/* tw-metro-bridge.css - THE EDITORS SPEAK METRO WITHOUT BEING REWRITTEN.
 *
 * Governing page: /studio/research/bible-design-language
 * Closes deviation D-3 on /studio/research/design-bible
 *
 * ── WHY A BRIDGE AND NOT A REWRITE ──────────────────────────────────────────
 * Metro is the single Studio design language (RULED 2026-08-20), and on
 * 2026-08-23 the two Editors carried ZERO Metro references between them. They
 * are also 13,600 lines of markup keyed to the previous "warm" token
 * vocabulary - and NO MONOLITHS (RULED 2026-08-21) says decompose
 * incrementally, NEVER rewrite. A find-and-replace across 13,600 lines is a
 * rewrite wearing a smaller hat: it would touch every rule in both files, and
 * a single mistyped token would be invisible until someone opened the page.
 *
 * So the vocabulary is re-pointed instead. Every warm token name keeps
 * working; what it RESOLVES TO becomes the Metro value. The editors change
 * language by loading one more stylesheet, and not one line of their markup
 * moves. When a section of an editor is genuinely decomposed later, it can
 * adopt the --m-* names directly and drop off this bridge; the bridge shrinks
 * as that happens, which is the shape a migration should have.
 *
 * ── IT INHERITS THEMING RATHER THAN RESTATING IT ────────────────────────────
 * Every value below is `var(--m-…)`, and the Metro token file already carries
 * the complete three-state theme contract (bare :root = full light palette,
 * dark redefined under BOTH the media query and [data-theme="dark"]). So this
 * file needs no dark block of its own and MUST NOT GROW ONE - a second
 * definition here would be exactly the "colour whose only definition lives in
 * a media block" trap the token file warns about, and it would drift.
 *
 * ── LOAD ORDER IS LOAD-BEARING ──────────────────────────────────────────────
 *   tw-tokens.css  →  tw-metro-tokens.css  →  tw-metro-bridge.css
 * The bridge must come last so its :root wins the cascade over the warm
 * definitions it is replacing. Loading it before tw-tokens.css silently does
 * nothing, which is the failure mode worth naming because the page still
 * renders - just in the old language.
 */

:root {
  /* ══ SURFACES ══
     paper → the ground; raised/sunk/hover → the tile ladder. Metro separates
     with BLOCKS rather than with borders, so these carry the work that
     shadows and rules used to do. */
  --paper:            var(--m-ground);
  --paper-canvas:     var(--m-ground);
  --paper-raised:     var(--m-tile);
  --paper-sunk:       var(--m-tile-2);
  --paper-hover:      var(--m-tile-2);
  --skeleton-base:      var(--m-tile);
  --skeleton-highlight: var(--m-tile-2);

  --editor-chrome-bg-base:     var(--m-ground);
  --editor-chrome-surface:     var(--m-tile);
  --editor-chrome-bg-elevated: var(--m-tile-2);
  --editor-chrome-border:      var(--m-edge);

  /* ══ INK ══ */
  --ink:        var(--m-ink);
  --ink-soft:   var(--m-ink-2);
  --ink-muted:  var(--m-ink-2);
  --ink-faint:  var(--m-ink-3);
  --ink-ghost:  var(--m-ink-3);
  --card-ink-body: var(--m-ink-2);

  /* ══ RULES ══
     "Colour blocks separate; borders mostly do not exist." The rule tokens
     survive because the markup asks for them, and they resolve to the single
     edge tone so a page cannot accumulate four weights of line. */
  --rule:        var(--m-edge);
  --rule-soft:   var(--m-edge);
  --rule-heavy:  var(--m-edge);
  --rule-ghost:  var(--m-edge);
  --rule-focus:  var(--m-accent);
  --border-subtle: var(--m-edge);
  --border-strong: var(--m-edge);
  --border-focus:  var(--m-accent);

  /* ══ ACCENT ══
     The editors' "gold" is the Studio's accent slot. It follows the surface's
     family class, so an editor opened on a Music bank reads gold and on a
     Picture bank reads teal, with no per-page rule.
     ⚠ --gold-bright is used AS TEXT in both editors (24 and 28 occurrences),
     so it takes the -text value, never the fill. A fill used as text is the
     mistake the three-value accent structure exists to prevent. */
  --gold-bright: var(--m-accent-text);
  --gold-deep:   var(--m-accent-text);
  --gold-wash:   var(--m-tile-2);
  --stage-gold:  var(--m-accent-text);
  --stage-ink:   var(--m-ink);
  --accent-primary:         var(--m-accent);
  --accent-primary-hi:      var(--m-accent-2);
  --accent-primary-pressed: var(--m-accent);
  --accent-primary-bg:      var(--m-tile-2);
  --accent-contrast:        var(--m-accent-ink);
  --mechanic-panel-accent:  var(--m-accent);
  --mechanic-panel-bg:      var(--m-tile);

  /* ══ STATE - never a tile fill; chips, dots and stripes only ══ */
  --good:     var(--m-ok);    --good-bg:   var(--m-ok-bg);   --good-deep: var(--m-ok);
  --bad:      var(--m-err);
  --danger:   var(--m-err);   --danger-bg: var(--m-err-bg);
  --info:     var(--m-knowledge-text); --info-bg: var(--m-tile-2);

  /* ══ TYPE ══ */
  --sans:      var(--m-sans);
  --font-sans: var(--m-sans);
  --mono:      var(--m-mono);
  /* ★ RULED 2026-08-23: "Drop the serif - Metro is sans, full stop." There is
     no editorial exception, so the serif alias resolves to the sans like
     everything else. This replaces a note saying the scoping was unruled. */
  --serif: var(--m-sans);

  /* ══ GEOMETRY - Metro has no rounded corners ══
     Every radius resolves to 0. This is the single most visible line in the
     file and the one most likely to be "fixed" by someone who thinks a stray
     square corner is a bug. It is the language. */
  --r-xs: 0; --r-sm: 0; --r-md: 0;
  --radius-xs: 0; --radius-sm: 0; --radius-md: 0;
  --radius-lg: 0; --radius-xl: 0; --radius-pill: 0;

  /* ══ ELEVATION - Metro spends brightness on blocks, not on shadows ══ */
  --elev-0: none; --elev-1: none; --elev-2: none; --elev-3: none; --elev-4: none;
  --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none;

  /* ══ MOTION - fast and directional, never decorative ══ */
  --motion-instant:    80ms;
  --motion-quick:      120ms;
  --motion-standard:   160ms;
  --motion-deliberate: 220ms;
}

/* The v4 aliases are a parallel vocabulary the editors still reach for in
   places. They are pointed at the same values rather than left behind, because
   a surface half in one language and half in another looks broken rather than
   transitional. */
:root {
  --ink-v4: var(--m-ink);          --ink-soft-v4: var(--m-ink-2);
  --ink-muted-v4: var(--m-ink-2);  --ink-faint-v4: var(--m-ink-3);
  --rule-v4: var(--m-edge);        --rule-soft-v4: var(--m-edge);
  --line-v4: var(--m-edge);
  --gold-v4: var(--m-accent-text);
  --sans-v4: var(--m-sans);        --mono-v4: var(--m-mono);
  --good-v4: var(--m-ok);          --good-bg-v4: var(--m-ok-bg);
  --danger-v4: var(--m-err);       --danger-bg-v4: var(--m-err-bg);
  --info-v4: var(--m-knowledge-text); --info-bg-v4: var(--m-tile-2);
  --r-xs-v4: 0; --r-sm-v4: 0; --r-md-v4: 0; --r-lg-v4: 0;
  --shadow-xs-v4: none; --shadow-sm-v4: none; --shadow-md-v4: none;
  --shadow-lg-v4: none; --shadow-inset-v4: none;
}

/* ── ALL-CAPS MICRO-LABELS ──────────────────────────────────────────────────
 * "Type is the interface." The one piece of actual STYLING here, rather than
 * token re-pointing: the editors' existing label classes take Metro's micro
 * treatment. Scoped to classes both editors already use, so nothing new has to
 * be added to the markup. */
.metro-editor .label,
.metro-editor .field-label,
.metro-editor .section-label {
  font: var(--m-micro);
  letter-spacing: var(--m-track);
  text-transform: uppercase;
  color: var(--m-ink-3);
}

/* ── THE FLATTEN LIST ───────────────────────────────────────────────────────
 * Re-pointing tokens cannot reach a HARD-CODED radius or shadow, and measuring
 * the rendered editor on 2026-08-23 found 26 elements still rounded and 4 still
 * shadowed - every one of them a literal value in a shared stylesheet rather
 * than a token. They are listed BY NAME here rather than swept with a blanket
 * `* { border-radius: 0 }`, for two reasons: a blanket rule would also flatten
 * the things Metro keeps round (below), and a named list is a worklist - each
 * line can be deleted as its own stylesheet is decomposed and adopts the
 * tokens properly. This block should SHRINK. If it is growing, something is
 * being written in the old language.
 *
 * ⚠ MEASURED, NOT GUESSED. This list came from walking the rendered DOM and
 * reading computed values, which is the only way to find a literal buried in
 * one of sixteen linked stylesheets. */
.twsh-brand-link,
.twsh-ai-winbar-btn,
.twsh-appnav-badge,
.tw-tour-help-btn,
.tw-skiplink,
.tw-bulk-bar-wrap,
.bbz-ai-seed-btn,
.bbz-create-btn,
.bbz-validate-badge,
.fiq-card,
.fiq-input {
  border-radius: 0;
  box-shadow: none;
}
/* ⚠ THE SAME LIST AGAIN, SCOPED TO .tw-shell - and it is NOT a duplicate.
 * The editors' own inline <style> writes these as `.tw-shell .bbz-…`, which is
 * specificity 0,2,0 against the list above at 0,1,0. Being later in the
 * cascade does not help: SPECIFICITY IS DECIDED BEFORE ORDER, and that is the
 * trap worth naming, because moving this file later in the <head> looks like
 * it should work and does nothing.
 * Matching the specificity is the honest fix. `!important` would also work and
 * is deliberately not used: it wins arguments this file should not be having,
 * and it would hide the day one of these rules becomes wrong. */
.tw-shell .twsh-brand-link,
.tw-shell .twsh-ai-winbar-btn,
.tw-shell .twsh-appnav-badge,
.tw-shell .tw-tour-help-btn,
.tw-shell .tw-bulk-bar-wrap,
.tw-shell .bbz-ai-seed-btn,
.tw-shell .bbz-create-btn,
.tw-shell .bbz-validate-badge,
.tw-shell .bbz-quiz-status,
.tw-shell .bbz-round-mech,
.tw-shell .bbz-round-count,
.tw-shell .fiq-card,
.tw-shell .fiq-input {
  border-radius: 0;
  box-shadow: none;
}

/* ── WHAT STAYS ROUND, AND WHY ──────────────────────────────────────────────
 * Metro's own state rule is that identity fills a block and state is "a CHIP,
 * DOT or stripe". A dot is round by definition - flattening it turns a state
 * mark into a small square tile, which is precisely the identity/state
 * collision the rule exists to prevent. So the dots are deliberately left
 * alone, and this comment exists so nobody "finishes the job" by flattening
 * them:
 *     .bbz-lock-dot   .twsh-ss-dot   .twsh-help-btn (a circular affordance)
 *     .twsh-avatar    (a person, not a tile)
 */