/* LOOP·CHASSIS (407) — BabyLoops, the swipe-card screen. (D-725/D-726/D-727/D-729/D-730/D-731)
 *
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * ONE chassis, TWO recipes (D-729): the Home tour ("A few things") + the Weeks read (Quick→Loops,
 * D-728). Both wear the BabyLoops wordmark — D-729 supersedes TOUR-SPEC §10 "no wordmark".
 *
 * Ported from the LOCKED exploration renders, not re-designed:
 *   workbench/exploration/card-on-ink.html  — the two settled designs (D-726: FAQ sequence +
 *     media block, Andrew: "Ok this is it. This and faqs need to be saved."), the header, the
 *     corner grammar, the family plumbing.
 *   workbench/exploration/loops-read.html   — the Weeks read type spec (D-727: Fraunces heads,
 *     Inter-italic-17 draw, Inter-16 body, sources card).
 *
 * THE FAMILY PLUMBING: one pair of custom properties, set once per family on the root, consumed
 * everywhere — dot, avatar glyph, eyebrow, closing mark, lines, chip, corner glyphs, Try it →.
 * That is the ruled grammar ("the whole screen speaks one family per card") drawn ONCE.
 * 'teal' = out of family (article open · sources · showcase · end) — --accent, per the spec.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the surround — the app dark surface (D-730), dark text (D-731) ── */
.loop { position: relative; height: 100%; min-height: 640px; /* token-exception */ /* frame interior — matches the locked mock */
        display: flex; flex-direction: column; box-sizing: border-box;
        padding: var(--space-20) var(--space-24) var(--space-24);
        background: var(--ink-900); color: var(--cream-150);
        --loop-fam-icon: var(--accent); --loop-fam-fill: var(--kind-read-fill); }
.loop.f-read  { --loop-fam-icon: var(--kind-read-icon);  --loop-fam-fill: var(--kind-read-fill); }
.loop.f-do    { --loop-fam-icon: var(--kind-do-icon);    --loop-fam-fill: var(--kind-do-fill); }
.loop.f-watch { --loop-fam-icon: var(--kind-watch-icon); --loop-fam-fill: var(--kind-watch-fill); }
.loop.f-track { --loop-fam-icon: var(--kind-track-icon); --loop-fam-fill: var(--kind-track-fill); }
/* f-teal keeps the root defaults: accent glyphs on the read fill (the mock's .f-teal chip). */

/* ── the header (D-725) — wordmark size-20 cream-150, full stop in the family colour;
 *    week label + avatar (cream-75 circle, baby glyph in the family colour, her photo when it
 *    exists — never faked). ── */
.loop-top { display: flex; align-items: center; justify-content: space-between; }
.loop-logo { font-family: var(--font-display); font-weight: var(--weight-600);
             font-size: var(--size-20); /* token-exception */ /* D-725: the ruled wordmark size — app logo 24, loop 20; no --text-* role at 20 */ letter-spacing: var(--tracking-neg-01);
             color: var(--cream-150); } /* token-exception */ /* = the loop-card surface, ruled final */
.loop-logo b { color: var(--loop-fam-icon); font-weight: inherit; }
.loop-right { display: flex; align-items: center; gap: var(--space-8); }
.loop-wk { font-family: var(--font-label); font-size: var(--text-body-sm);
           font-weight: var(--weight-600); color: var(--cream-150); opacity: .85; }
.loop-av { width: var(--dim-32); height: var(--dim-32); border-radius: var(--radius-round);
           background: var(--cream-75); color: var(--loop-fam-icon);
           display: grid; place-items: center; overflow: hidden; }
.loop-av svg { width: var(--size-18); height: var(--size-18); display: block; }

.loop-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* ── the text card (D-726 design 1) — full-bleed cream-150, the 360 stage, radius 0 (a
 *    screen-cut rounded corner is worse than none), the thought centred. ── */
.loop-card { border-radius: 0; margin: 0 calc(-1 * var(--space-24));
             background: var(--cream-150);
             padding: var(--space-24) var(--space-24) var(--space-28);
             min-height: 360px; /* token-exception */ /* the ruled stage height (300 → 360, Andrew: "let the thing breath") */
             box-sizing: border-box; display: flex; flex-direction: column; position: relative; }
.loop-eb { font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--weight-600);
           letter-spacing: var(--tracking-12); text-transform: uppercase;
           color: var(--loop-fam-icon); margin: 0 0 var(--space-12); }
.loop-txt { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* type roles (D-727): Fraunces carries the one-message weight; Inter is reading text. */
.loop-q  { font-family: var(--font-display); font-size: var(--text-display-md); font-weight: var(--weight-600);
           color: var(--ink-900); margin: 0; line-height: var(--leading-115); }
.loop-s  { font-family: var(--font-display); font-size: var(--size-24); /* token-exception */ /* D-726: the ruled sentence size, a step below the Q; no --text-* role at 24 */ font-weight: var(--weight-500);
           color: var(--ink-900); margin: 0; line-height: var(--leading-140); }
.loop-hl { font-family: var(--font-display); font-size: var(--text-display-md); font-weight: var(--weight-600);
           color: var(--ink-900); margin: 0; line-height: var(--leading-115); }
.loop-h  { font-family: var(--font-display); font-size: var(--text-display-sm); font-weight: var(--weight-600);
           color: var(--ink-900); margin: 0; line-height: var(--leading-115); }
.loop-b  { font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-400);
           color: var(--ink-900); margin: 0; line-height: var(--leading-150); }
/* the draw sentence — Inter ITALIC size-17, the dek grey, ends in the family "…" (D-727) */
.loop-draw { font-family: var(--font-body); font-style: italic; font-size: var(--size-17); /* token-exception */ /* D-727: draw = one size up from body; no --text-* role at 17 */
             color: var(--text-secondary); margin: var(--space-16) 0 0; line-height: var(--leading-155); }
/* the closing-mark rule (D-725): card-1 terminal punctuation carries the family colour */
.loop-mark, .loop-ell { color: var(--loop-fam-icon); }

/* within-section position lines — under the text, inside the card, family colour */
.loop-lines { display: flex; gap: var(--space-8); justify-content: center; margin-top: var(--space-20); }
.loop-lines span { width: var(--dim-24); height: var(--dim-4); border-radius: var(--radius-2);
                   background: var(--loop-fam-icon); opacity: .35; }
.loop-lines span.on { opacity: 1; }

/* the area chip — bottom-right of the cream; shape = area (D-444), colour = FAMILY (D-454,
 * never per-area — D-379/D-404) */
.loop-chip { position: absolute; right: var(--space-16); bottom: var(--space-16);
             width: var(--dim-40); height: var(--dim-40); border-radius: var(--radius-round);
             background: var(--loop-fam-fill); color: var(--loop-fam-icon);
             display: flex; align-items: center; justify-content: center; }
.loop-chip svg { width: var(--dim-24); height: var(--dim-24); }

/* ── media INSIDE the card — 84% stage, cream-75 ground, CONTAIN (the generation-on-cream-75
 *    standard makes the letterbox invisible — load-bearing, not cosmetic) ── */
.loop-stage { border-radius: var(--radius-card); overflow: hidden; background: var(--surface-card);
              aspect-ratio: 1 / 1; width: 84%; align-self: center; position: relative; } /* token-exception */ /* ruled stage width */
.loop-stage video, .loop-stage img { position: absolute; inset: 0; width: 100%; height: 100%;
              object-fit: contain; }
.loop-tline { font-size: var(--text-body-sm); line-height: var(--leading-145);
              color: var(--ink-600); text-align: center; margin: var(--space-12) 0 0; }
.loop-try { align-self: center; margin-top: var(--space-12); border: none; background: transparent;
            color: var(--loop-fam-icon); cursor: pointer;
            font-family: var(--font-label); font-size: var(--text-body); font-weight: var(--weight-600);
            padding: var(--space-8) var(--space-16); border-radius: var(--radius-pill); }
.loop-try:active { transform: translateY(1px); }
.loop-try:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* a graphical component on its own card */
.loop-fig { margin: var(--space-8) 0 0; }
.loop-fig svg { width: 100%; height: auto; display: block; }
.loop-figcap { font-size: var(--text-caption); color: var(--ink-600); text-align: center; margin: var(--space-12) 0 0; }

/* ── THE MEDIA BLOCK (D-726 design 2) — the stage IS the card: full-bleed × 360, cream-75
 *    ground, asset CONTAINED never cropped; eyebrow top-left OF the cream, chip bottom-right;
 *    bold caption below on the surround. Personal media: no eyebrow, no chip (ruled). ── */
.loop-mstage { border-radius: 0; overflow: hidden; background: var(--surface-card);
               margin: 0 calc(-1 * var(--space-24)); height: 360px; /* token-exception */ /* = the text-card stage */
               position: relative; }
.loop-mstage video, .loop-mstage img { position: absolute; inset: 0; width: 100%; height: 100%;
               object-fit: contain; }
.loop-meb { position: absolute; top: var(--space-20); left: var(--space-24);
            font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--weight-600);
            letter-spacing: var(--tracking-12); text-transform: uppercase;
            color: var(--loop-fam-icon); margin: 0; }
.loop-mstage .loop-chip { right: var(--space-16); bottom: var(--space-16); }
.loop-mempty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
               color: var(--ink-600); font-family: var(--font-label); font-size: var(--text-meta);
               text-align: center; padding: var(--space-16); }
.loop-cap { font-size: var(--text-body-sm); font-weight: var(--weight-600); color: var(--cream-150);
            opacity: .75; text-align: center; margin: var(--space-16) 0 0; }

/* ── the sources card (D-727/D-728) — links coloured by the family the source BACKS;
 *    provenance row teal, out of family ── */
.loop-src { font-size: var(--text-body-sm); color: var(--ink-600); line-height: var(--leading-160); }
.loop-srclist a { display: flex; align-items: baseline; justify-content: space-between;
                  gap: var(--space-12); padding: var(--space-12) 0;
                  border-top: 1px solid var(--cream-600); /* token-exception */ /* hairline */
                  text-decoration: none; font-weight: var(--weight-500); font-size: var(--text-body); }
.loop-srclist a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.loop-srcarw { color: var(--ink-400); font-weight: var(--weight-400); }
.loop-sr-teal  { color: var(--accent); }
.loop-sr-read  { color: var(--kind-read-icon); }
.loop-sr-do    { color: var(--kind-do-icon); }
.loop-sr-watch { color: var(--kind-watch-icon); }
.loop-sr-track { color: var(--kind-track-icon); }
.loop-prov { padding-top: var(--space-12); border-top: 1px solid var(--cream-600); /* token-exception */ /* hairline */
             margin-top: var(--space-8); }
.loop-provrow { display: flex; align-items: center; gap: var(--space-8); color: var(--accent);
                font-weight: var(--weight-600); margin-bottom: var(--space-8); }
.loop-provrow svg { width: var(--size-18); height: var(--size-18); flex: none; }
.loop-provline { margin: 0; }

/* ── the corner one-tap actions (D-726) — cream-150 circles (the card's own material), family
 *    glyphs, NO outline, pinned to the true screen corner ("Bottom right means bottom right").
 *    A D-453 one-tap exception, BabyLoops-scoped — see its own D-row. Track cards and the media
 *    block render none (D-671; the settled mock). Visual dim-32; the ::after pad extends the
 *    HIT AREA past the 44pt floor without moving a pixel. ── */
.loop-acts { position: absolute; right: var(--space-24); bottom: var(--space-24);
             display: flex; gap: var(--space-12); }
.loop-acts button { width: var(--dim-32); height: var(--dim-32); border: none;
                    background: var(--cream-150); color: var(--loop-fam-icon); cursor: pointer;
                    display: grid; place-items: center; padding: 0;
                    border-radius: var(--radius-round); position: relative; }
.loop-acts button::after { content: ''; position: absolute; inset: calc(-1 * var(--space-8));
                    border-radius: var(--radius-round); }
.loop-acts svg { width: var(--size-18); height: var(--size-18); }
.loop-acts button:active { transform: translateY(1px); }
.loop-acts button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }