/* SHARED·CHROME (401) — THE drill-in masthead. (D-469 · design-locked D-478 2026-07-15 ·
 * actions trigger recut D-610/D-583 · close ruled 2026-08-16 · BUILT 2026-08-17, D-721)
 *
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * 🔴 THIS FILE EXISTS TO END NINE COPIES OF ONE DECLARATION.
 *
 * `abt- cls- crd- lsn- phl- rec- wdp- wkp- tqp- x-` — ten near-identical close buttons, every one
 * `--dim-40`, round, `--text-secondary`. The 2026-08-16 chrome inventory counted them and said the
 * quiet part out loud: "no visual drift YET — nine copies of one declaration waiting to drift."
 * `collections/surface.css` names this build as "the next PR". It is this one.
 *
 * ⚠️ AND THE COPIES WERE ALREADY WRONG IN A WAY NOBODY HAD SPOTTED. Every one of them puts the
 * close on the LEFT and has no wordmark at all — the surfaces "begin at the <h1>". 401 has said
 * since July that a drill-in wears **wordmark left, round buttons right**. Andrew caught it on the
 * 802/803 review: *"The X should be top right no? the wordmark?"* He was reading the spec back to
 * a build that had ignored it.
 *
 * ONE bar, four button-sets:
 *   close       × only                    — reader · collections · about · picker
 *   actions     chevron + ×, chevron LEFT, close OUTERMOST — the technique player
 *   actions-nc  chevron alone             — surfaces that do not close (the week read, D-609)
 *   next        round ARROW + ×           — a paginated drill-in. NEXT IS AN ARROW, NOT A CARET:
 *               that is where the D-583 caret collision is resolved, and it is why minting a
 *               `caret-up-down` to fix it (2026-08-16) was both unnecessary and wrong.
 *
 * The round-button treatment is Andrew's 2026-08-16 ruling, taken after seeing all nine shipped
 * variants and four candidates on four real grounds: "C but with grey iso teal (not brand for a
 * close)… grey iso white for the circle fill" → "W2 Shadow". Teal is the ACT colour and spending it
 * on the way out is backwards. The actions chevron FOLLOWS the close — a grey close beside a teal
 * chevron is two grammars on one bar.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.mast-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-12) var(--rhythm-inset) var(--space-4); }
.mast-word { font-family: var(--font-display); font-weight: var(--weight-wordmark); font-size: var(--size-20); letter-spacing: var(--tracking-neg-01); color: var(--text-primary); } /* token-exception */
.mast-word b { color: var(--accent); font-weight: inherit; }
.mast-r { display: flex; align-items: center; gap: var(--space-8); }

.mast-btn { width: var(--dim-40); height: var(--dim-40); border-radius: var(--radius-round); background: var(--surface-well); box-shadow: var(--shadow-card); color: var(--text-secondary); border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.mast-btn svg { width: var(--size-18); height: var(--size-18); display: block; flex: none; }
.mast-btn:active { opacity: 0.72; }
.mast-btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* the ACTIONS trigger (D-610) — 403's chevron wearing the masthead's disc. Rest › · open ⌄ (90°). */
.mast-r .act-chev { width: var(--dim-40); height: var(--dim-40); background: var(--surface-well); box-shadow: var(--shadow-card); color: var(--text-secondary); }
.mast-r .act-chev svg { width: var(--size-18); height: var(--size-18); }

/* ══ MODIFIERS ═══════════════════════════════════════════════════════════════════════════════════
 * Both exist because the migration of 2026-08-17 found REAL differences among the ten copies that
 * are NOT drift. Folding them in here is what lets every surface delete its own bar; leaving them
 * out would have forced nine surfaces to keep an override, which is the disease.
 *
 * ⚠️ THE TEST FOR ADDING A THIRD ONE: does the difference come from the SURFACE's geometry or
 * ground (legitimate), or from someone restyling the control (drift)? `box-shadow:none` and a
 * `--green-900` glyph on the three phase/week reads were the second kind, and they are deleted,
 * not modifiered. */

/* `flush` — the parent already owns the horizontal inset. The phase article, the development read
 * and the week read all sit inside a padded column, so the bar must NOT inset again or it steps in
 * twice. This is geometry, not taste. */
.mast-bar.mast-flush { padding: var(--space-4) 0 var(--space-8); }

/* `on-dark` — the listen surface runs on ink (`--text-on-dark`), so the grey-disc ruling of
 * 2026-08-16 cannot apply literally: `--surface-well` is a cream, and a cream disc on ink is a
 * light blob. The dark fill is the same one `.lsn-close` used, kept. Naming mirrors `.act-on-dark`
 * in actions.css so the two components read as one system.
 * ⚠️ The shadow is declared and does nothing on ink — that is listen.css's own note, kept true. */
.mast-on-dark .mast-word { color: var(--text-on-dark); }
.mast-on-dark .mast-word b { color: var(--text-on-dark); }
.mast-on-dark .mast-btn { background: var(--cream-300-a10); color: var(--text-on-dark); }
.mast-on-dark .mast-r .act-chev { background: var(--cream-300-a10); color: var(--text-on-dark); }

/* `is-full` — a surface in full-screen hides the bar. The technique player does this (D-458: in
 * full-screen the video is the whole point and the chrome goes), and it owned the rule as
 * `.tqp.is-full .mast-bar` — a card styling another card's prefix, which check 16 correctly
 * refuses. Written generically here: ANY surface that puts itself in `.is-full` loses the bar.
 * The component owns its own disappearance. */
.is-full > .mast-bar, .is-full .mast-bar { display: none; }