/* ==========================================================================
   B&A AI Center of Excellence — Homepage v3 (index.html only)
   Page-specific rules layered on styles.css. Nothing here introduces a new
   colour, weight, radius or gradient: tokens come from styles.css :root.
   Motion is NOT defined here — motion.css / motion.js (shell) read the
   data-anim / data-stagger / .shimmer / .cursor hooks in index.html.

   Contents
   1. Hero — three-line headline, one subline, one text link, and the product
      composition directly beneath them (the triptych, straight on the canvas —
      no card); plus the full-bleed film band
      (muted looping video + poster fallback), which now closes the page
   2. Stack strip — seven flat grey text wordmarks + eyebrow + posture row
   3. Section heads, link index, closing display
   4. Shared mock helpers
   5. Product-UI mock — "Three windows, one task"  (.ui-app--tri) — the page's
      biggest visual: three app windows at 1:1 scale, one task crossing them
   6. Product-UI mock — "The system security plan" as a DOCUMENT  (.ui-app--doc)
   7. Product-UI mock — "Neutral routing layer"  (.ui-app--route) + lane cloud
   8. Product-UI mock — "Diff, issues and deploy"  (.ui-app--ship)
   9. Shipped-work row
  10. Closing contact line
  11. Responsive (≤1200 / ≤900 / ≤640 / ≤560)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero, and the film band that now closes the page
   PRODUCT FIRST (r3): the hero opens the way the bar's does — a three-line
   headline, ONE short subline, ONE small text link, and then one honest frame
   of the product. There is no orange button and no badge row here any more:
   the shell nav carries the "Get Started" pill and the posture badges moved to
   the stack strip, which leaves the closing CTA as the page's single chromatic
   fill. The hero object is the triptych (.ui-app--tri, §5), and r4 takes the
   frame off it: the three windows sit directly on the canvas as ONE composition
   that bleeds to within 16px of both viewport edges and stands ~800px tall, the
   way the bar's hero screenshot fills the screen below the headline. Per the
   system's hero exception it carries no FIG caption; FIG numbering restarts at
   the first framed showcase below it.
   THE FILM moved to the close — full bleed, no card, no caption, sitting between
   the notes row and the closing display. A graphite hairline closes its bottom
   edge. The source is a muted, looping, seamless 1920×1080 (16:9) video whose
   poster is frame 0, so the band fades from poster to playing video with no cut.
   The frame is used WHOLE — the spire sits 2% from the top and the orange node
   91% down, so any wider crop would lose one of them; the node is the film's
   accent and is meant to be visible at every width (user decision, 2026-09-13),
   and the system sanctions it sharing a screen with the closing CTA. No top mask:
   the source's own background is #020408, indistinguishable from the canvas, so
   the band's top edge needs no fade and the spire stays intact. Every window is
   anchored to the top-centre (object-position 50% 0) under cover:
     ≥900    16:9  cover → exact fit (the whole composition)
     561–899  3:2  cover → full height, centre 84% of the width
     ≤560     4:5  poster only (hero-poster-m.jpg, pre-cropped 4:5)
   Fallback: reduced motion, ≤560px, or the guard's .hero-showcase--still
   (index.html) hide the <video> and show the poster <img>. The <source> media
   queries stop the browser fetching video bytes where it is hidden.
   -------------------------------------------------------------------------- */
.hero-copy .t-hero span { display: block; }
.hero-lede { margin-top: var(--s-24); max-width: 720px; }
/* One text link, flush with the column — no button beside it to pad against. */
.hero-actions { margin-top: var(--s-24); }
.hero-actions .link-arrow { padding: 10px 0; }

/* The hero object (r4). NOT a card: the three windows sit directly on the page
   canvas as ONE composition, the way the bar's hero screenshot does. The band
   spans the whole viewport bar a 16px margin either side — far past the 1200
   column the copy above it sits in — and stands ~800px tall, so it fills the
   screen under the headline block instead of reading as a montage inside a
   frame. No border, no surface, no radius, no FIG caption. */
.hero-figure {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: var(--s-56) auto 0;
  padding: 0 16px;
}
/* The [data-anim="fade"] slot (hero sequence, +.6s) — geometry only, no chrome:
   an inline-size container so .ui-app's cqw min-height still resolves. */
.hero-frame {
  position: relative;
  container-type: inline-size;
}

.hero-showcase {
  max-width: none;
  margin: var(--s-32) 0 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--void);
}
/* The film is a section of its own now, so it takes the 96px section rhythm. */
.film-band { margin-top: var(--s-96); }
.hero-showcase::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--graphite);
}
.hero-showcase video,
.hero-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  border-radius: 0;
  background: var(--void);
}
.hero-showcase picture { display: contents; }
.hero-poster { display: none; }
.hero-showcase--still video { display: none; }
.hero-showcase--still .hero-poster { display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero-showcase video { display: none; }
  .hero-poster { display: block; }
}

/* --------------------------------------------------------------------------
   2. Stack strip
   The bar's social-proof slot. One row of the seven tool names as flat grey
   TEXT — never third-party logos, no cards, no colour, no card backgrounds —
   spread edge to edge so each name is isolated by space rather than by size.
   The uppercase eyebrow sits beneath it, as on the bar, and the three posture
   badges follow as a second, quieter row. Static: no data-anim.
   (The section carries .stack-section, not .stack — styles.css already owns
   .stack as a flex-column utility, and it would collapse the container.)
   -------------------------------------------------------------------------- */
.stack-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16) var(--s-48);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mist);
}
.stack-eyebrow { margin-top: var(--s-24); }
/* The posture claim the hero used to carry, kept as a second, quieter row of
   the same strip: system badges, fog text, no fills beyond the badge's own
   rgba(255,255,255,.05). */
.stack-posture {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin: var(--s-32) 0 0;
}
.stack-posture .badge { color: var(--fog); }   /* system: badge text fog */

/* --------------------------------------------------------------------------
   3. Section heads, link index, closing display
   The link index closes every feature band, as on the bar: a small uppercase
   label left, three columns of two tiny grey arrow links right — each pointing
   at a real page of this site. Static text; never animated.
   -------------------------------------------------------------------------- */
.closing .t-display { max-width: none; }
.closing .t-display span { display: block; }

.link-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-48);
  margin-top: var(--s-64);
}
.link-index-label { align-self: start; }
/* Columns size to their own longest link and spread across the half-column,
   so a 25-character label is not forced to wrap inside a 176px equal track. */
.link-index-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: space-between;
  gap: var(--s-24);
}
.link-index-cols ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap);
  min-width: 0;
}
.link-index .link-arrow { color: var(--fog); }
.link-index .link-arrow:hover { color: var(--mist); }
/* r4 — the arrow rides the last word. The site-wide .link-arrow is an
   inline-flex box whose text child wraps independently, so a label too wide
   for its track left the arrow stranded beside a two-line block ("Eight
   deployed prototypes →"). In the index the link flows as plain inline text
   and the arrow is glued to the final word by a NO-BREAK SPACE, so wherever a
   label breaks, "word →" stays together on one line. Horizontal padding — not
   transform — carries the hover nudge, since transforms do not apply to
   non-replaced inline boxes. */
.link-index .link-arrow {
  display: inline;
  gap: 0;
}
.link-index .link-arrow::after {
  content: "\00a0\2192";
  display: inline;
  transform: none;
  transition: padding-left var(--dur-hover, .1s) var(--ease-ui, ease);
}
.link-index .link-arrow:hover::after { transform: none; padding-left: 2px; }

/* --------------------------------------------------------------------------
   4. Shared mock helpers
   -------------------------------------------------------------------------- */

/* A mono ID followed by a 400 name inside one table cell */
.ui-comp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-comp .ui-id { flex: 0 0 auto; }
.ui-comp .ui-cp { flex: 1 1 auto; min-width: 0; }

/* Secondary strings in top bars / foots ellipsize, and drop at ≤640 */
.ui-topbar-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-foot > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-foot > span:first-child { flex: 0 0 auto; }
.ui-app .ui-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-app .ui-topbar .badge { flex: 0 0 auto; }

/* Long mono IDs in a panel head row truncate instead of pushing the badge out */
.ui-panel-row .ui-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-panel-row .badge { flex: 0 0 auto; }

/* The blinking caret inside a mock */
.ui-cursor {
  display: inline-block;
  width: 7px;
  height: 12px;
  vertical-align: -2px;
  background: var(--mist);
}

/* --------------------------------------------------------------------------
   5. Three windows, one task  (.ui-app--tri)
   The page's hero-type image. Three application windows side by side at 1:1
   scale on a void "desktop", each a carbon surface behind a hairline: an agent
   session planning COE-418, a second agent writing the diff, the review the
   change opens into. Real chrome throughout — title bars with window controls,
   tab rows, a file tree, mono IDs, bone pills, grey status dots. Greyscale
   only; nothing chromatic enters the frame.
   Height: the windows carry an 800px floor (700 below 1200, 560 below 900) so
   the composition reads as the page's dominant object, and the mock type steps
   up one notch with them — nothing inside renders smaller than it did inside
   the old 1232px card. Each absorbs the slack where a real window would — under
   the session's last line, under the editor's last line of code, above the
   review's reviewer list — never as a gap inside the content.
   ≤900 the composition collapses to the middle window — the diff — alone.
   -------------------------------------------------------------------------- */
.ui-app--tri {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 20px;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;                 /* no card edge: the canvas is the ground */
  font-size: 13px;                  /* the frame is 1408 wide now: mock UI text
                                       steps up one notch (system cap 13px) so
                                       nothing inside it reads smaller than it
                                       did in the old 1232px card */
}
.ui-app--tri .ui-id      { font-size: 13px; }   /* mono 12-14 allowed */
.ui-app--tri .ui-rail-label { font-size: 11px; }
.ui-app--tri .ui-avatar  { width: 24px; height: 24px; font-size: 10px; }
.ui-app--tri .ui-dot     { width: 7px; height: 7px; }
.ui-app--tri .ui-winicon { width: 16px; height: 16px; }
.ui-app.ui-app--tri .ui-winctl svg { width: 12px; height: 12px; }
.ui-app--tri .ui-btn-white { height: 28px; padding: 0 12px; font-size: 13px; }
.ui-app--tri .badge      { font-size: 12px; }

.ui-win {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 800px;
  overflow: hidden;
  border-radius: var(--r-6);
  background: var(--carbon);
  box-shadow: var(--hairline);
}

/* Title bar: icon · name · mono id · window controls */
.ui-winbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0 14px;
  background: var(--obsidian);
  box-shadow: inset 0 -1px 0 var(--graphite);
  white-space: nowrap;
}
.ui-wintitle {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 510;
  letter-spacing: -0.011em;
  color: var(--mist);
}
.ui-winbar .ui-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-app .ui-winicon { color: var(--fog); }
.ui-winctl {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--ash);
}
.ui-app .ui-winctl svg { width: 11px; height: 11px; }

/* Tab row */
.ui-wintabs {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0 12px;
  box-shadow: inset 0 -1px 0 var(--graphite);
  overflow: hidden;
}
.ui-win .ui-tab { height: 38px; padding: 0 10px; font-size: 13px; }

.ui-winbody {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 14px;
}

/* Footer strip: mono summary left, the one filled (bone) action right */
.ui-winfoot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  flex: 0 0 auto;
  padding: 0 14px;
  box-shadow: inset 0 1px 0 var(--graphite);
  white-space: nowrap;
}
.ui-winfoot > .ui-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-winfoot .badge { margin-left: auto; flex: 0 0 auto; }

/* Window 1 — the planning session */
.ui-prompt {
  flex: 0 0 auto;
  padding: 14px;
  border-radius: var(--r-6);
  background: rgba(255, 255, 255, .03);
  box-shadow: var(--hairline);
  font-size: 13px;
  line-height: 1.5;
  color: var(--mist);
}
.ui-ctx {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.ui-ctx .ui-id { flex: 0 0 auto; color: var(--mist); }
.ui-ctx-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ash); }
.ui-think {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fog);
  white-space: nowrap;
}
.ui-steps { display: flex; flex-direction: column; gap: 4px; }
.ui-step {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--r-4);
  white-space: nowrap;
}
.ui-step-n {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.013em;
  font-feature-settings: normal;
  color: var(--ash);
}
.ui-step-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--fog); }
.ui-step .ui-dot { margin-left: auto; flex: 0 0 auto; }
.ui-step.is-current { background: var(--obsidian); }
.ui-step.is-current .ui-step-t { color: var(--mist); }

.ui-handoff {
  margin-top: auto;                  /* the session's status pins to the floor */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: var(--r-6);
  background: var(--obsidian);
  box-shadow: var(--hairline);
}
.ui-handoff-k {
  font-size: 11px;
  font-weight: 510;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
}
.ui-handoff-row { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.ui-handoff-row .ui-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--mist); }
.ui-handoff-arr { flex: 0 0 auto; color: var(--ash); }
.ui-handoff-to { flex: 0 0 auto; font-weight: 510; color: var(--mist); }

.ui-note {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  white-space: nowrap;
}
.ui-note-k { color: var(--ash); }
.ui-note-v { color: var(--mist); }

/* Window 2 — the file tree beside the diff */
.ui-winsplit {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
}
.ui-winsplit > * { min-width: 0; min-height: 0; overflow: hidden; }
.ui-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 8px;
  box-shadow: inset -1px 0 0 var(--graphite);
}
.ui-tree-label {
  padding: 0 8px 10px;
  font-size: 11px;
  font-weight: 510;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  min-width: 0;
  padding: 0 8px;
  border-radius: var(--r-4);
  font-size: 12px;
  color: var(--fog);
  white-space: nowrap;
}
.ui-tree-row--2 { padding-left: 18px; }
.ui-tree-row--3 { padding-left: 28px; }
.ui-tree-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-tree-row .ui-dot { flex: 0 0 auto; margin-left: auto; }
.ui-tree-row.is-active { background: var(--graphite); color: var(--mist); }
.ui-app .ui-tree-row svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* Window 3 — the review */
.ui-prhead { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ui-prtitle {
  font-size: 13px;
  font-weight: 510;
  letter-spacing: -0.011em;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-branch { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.ui-branch .ui-id:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-branch .ui-id:last-of-type { flex: 0 0 auto; }
.ui-branch-arr { flex: 0 0 auto; color: var(--ash); }

.ui-checks { display: flex; flex-direction: column; gap: 4px; }
.ui-check {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  min-width: 0;
  padding: 0 10px;
  border-radius: var(--r-4);
  white-space: nowrap;
}
.ui-check .ui-dot { flex: 0 0 auto; }
.ui-check-n {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.013em;
  font-feature-settings: normal;
  color: var(--mist);
}
.ui-check-v { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; color: var(--fog); }
.ui-check.is-current { background: var(--obsidian); }

.ui-files { display: flex; flex-direction: column; gap: 4px; }
.ui-files .ui-rail-label { padding: 0 10px 6px; }
.ui-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  min-width: 0;
  padding: 0 10px;
  white-space: nowrap;
}
.ui-file-row .ui-id { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-file-d {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.013em;
  font-feature-settings: normal;
  color: var(--ash);
}

.ui-revs { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.ui-revs .ui-rail-label { padding: 0 10px 6px; }
.ui-rev {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  min-width: 0;
  padding: 0 10px;
  white-space: nowrap;
}
.ui-rev .ui-avatar { flex: 0 0 auto; }
.ui-rev-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--mist); }
.ui-rev-v { flex: 0 0 auto; color: var(--fog); }
.ui-rev .ui-dot { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   6. The system security plan  (.ui-app--doc) — the DOCUMENT image type
   Deliberately NOT the console silhouette FIG 0.2 carries. There is no left
   rail, no wide status table and no footer summary bar here. Instead: a slim
   breadcrumb strip, a masthead carrying framework / impact / OSCAL version /
   component / artifacts, and the ten NIST SP 800-53 families written out as
   prose SECTIONS — ragged line lengths, no row grid, state badges flowing
   inline after each title rather than stacked in a column. The jump-link
   outline sits on the RIGHT, the mirror of the console's left-hand rail.
   The machine-readable artifact (.ui-float) stays layered over the lower right
   corner and across the outline's edge: obsidian on the document's carbon
   behind one hard 1px graphite line. Depth from the overlap — never a shadow.
   -------------------------------------------------------------------------- */
.ui-app--doc {
  position: relative;                      /* the layer below is absolute inside it */
  grid-template-columns: minmax(0, 1fr) 224px;
  aspect-ratio: auto;
}

/* The document pane */
.ui-doc { display: flex; flex-direction: column; min-width: 0; }

/* Breadcrumb strip — a path, a state, and the one filled (bone) action */
.ui-docbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  flex: 0 0 auto;
  padding: 0 24px;
  box-shadow: inset 0 -1px 0 var(--graphite);
  white-space: nowrap;
}
.ui-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.ui-crumb .ui-id { flex: 0 0 auto; }
.ui-crumb-sep { flex: 0 0 auto; color: var(--ash); }
/* higher specificity than `.ui-crumb .ui-id` above, so the document's own name is
   the one segment allowed to shrink and ellipsize instead of being hard-clipped */
.ui-crumb .ui-crumb-file { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--mist); }
.ui-docbar .badge { flex: 0 0 auto; }

.ui-docbody {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 28px 40px 32px;
}

/* Masthead: what this document is, before any of its sections */
.ui-dochead { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 660px; }
.ui-doc-eyebrow {
  font-size: 10px;
  font-weight: 510;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
}
.ui-doc-title {
  font-size: 13px;
  font-weight: 510;
  letter-spacing: -0.011em;
  color: var(--mist);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-doc-lede { margin: 0; max-width: 660px; color: var(--fog); line-height: 1.5; }
.ui-docmeta {
  grid-template-columns: 92px minmax(0, 1fr);
  row-gap: 4px;
  margin-top: 4px;
  max-width: 420px;
}
.ui-docrule { height: 1px; flex: 0 0 auto; background: var(--graphite); }
.ui-docsub { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; }
.ui-docsub-c { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ash); }

/* The sections. Prose with a ragged right edge — never a row grid, never a
   status column: the state badge sits inline, immediately after each title. */
.ui-secs { display: flex; flex-direction: column; gap: 14px; }
.ui-sec { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-left: 14px; }
.ui-sec-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ui-sec-h .ui-id { flex: 0 0 auto; color: var(--mist); }
.ui-sec-t {
  font-size: 13px;
  font-weight: 510;
  letter-spacing: -0.011em;
  color: var(--mist);
}
.ui-sec-h .badge { flex: 0 0 auto; }
.ui-sec-p { margin: 0; max-width: 660px; color: var(--fog); line-height: 1.5; }
/* The one section the reader is standing in — the higher-contrast smoke hairline */
.ui-sec.is-current { box-shadow: inset 1px 0 0 var(--smoke); }
.ui-sec.is-current .ui-sec-p { color: var(--mist); }

/* The outline: jump links, on the RIGHT */
.ui-outline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  box-shadow: inset 1px 0 0 var(--graphite);
}
.ui-outline .ui-rail-label { padding: 0 6px 8px; }
.ui-out {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 6px;
  border-radius: var(--r-4);
  color: var(--fog);
  white-space: nowrap;
}
.ui-out--h { margin-top: 10px; font-weight: 510; color: var(--mist); }
.ui-outline > .ui-out--h:first-of-type { margin-top: 0; }
.ui-out--2 { padding-left: 18px; }
.ui-out .ui-id { flex: 0 0 auto; }
.ui-out-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-out.is-current { background: var(--graphite); color: var(--mist); }
.ui-out.is-current .ui-id { color: var(--mist); }

/* Machine-readable output: mono, keys mist, values fog, booleans paper */
.ui-json {
  margin: 0;
  padding: 12px;
  border-radius: var(--r-6);
  background: var(--obsidian);
  box-shadow: var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.013em;
  font-feature-settings: normal;
  color: var(--fog);
  white-space: pre;
  overflow: hidden;
}
.ui-json .k { color: var(--mist); }
.ui-json .b { color: var(--paper); }

/* The layer. Offset so it straddles the document's lower right AND the outline's
   edge, partly covering the sections it was generated from. Surface step #161718
   on the document's #0f1011, closed by a hard 1px #23252a edge. No shadow, no
   glow, no blur — the depth is the overlap itself. */
.ui-float {
  position: absolute;
  right: 180px;
  bottom: 28px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 320px;
  padding: 16px;
  border-radius: var(--r-6);
  background: var(--obsidian);
  box-shadow: inset 0 0 0 1px var(--graphite);
}
.ui-float .ui-json { background: rgba(255, 255, 255, .02); font-size: 11px; }

/* --------------------------------------------------------------------------
   7. Routing console  (.ui-app--route) — product chrome CONTAINING data-viz
   The bar's second image type. A rail of the four authorized fabrics, each with
   its grey status dot and the number of queued routes pointing at it; then the
   console: top bar → tabs → route table → an analysis strip (models in play +
   one compact chart) → foot. No connectors, no node graph, no schematic — this
   is an app someone operates. The chart is B&A's OWN published accuracy column
   (article-benchmarking.html, Jan 13, 2026) drawn as hairline bars with mono
   keys, values and axis: greyscale throughout, the one emphasised series in
   mist. Counts reconcile with the eight rows the table displays: fabrics
   3+2+1+2 = 8, models 3+3+2 = 8.
   -------------------------------------------------------------------------- */
.ui-app--route {
  grid-template-columns: 224px minmax(0, 1fr);
  aspect-ratio: auto;
}
.ui-table--route .ui-tr {
  grid-template-columns: minmax(0, 1fr) 176px 176px 92px;
  height: 40px;
}
.ui-table--route .ui-tr--head { height: 32px; }
.ui-model { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ui-model .ui-id { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-kind { flex: 0 0 auto; font-size: 11px; color: var(--ash); }
.ui-tr.is-selected .ui-dim { color: var(--mist); }

/* Fabric rail: status dot · name · queued routes on that fabric */
.ui-nav-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-nav-c {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -0.013em;
  font-feature-settings: normal;
  color: var(--ash);
}
.ui-nav-item.is-active .ui-nav-c { color: var(--mist); }

/* Analysis strip: models in play | the published benchmark */
.ui-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  flex: 0 0 auto;
  box-shadow: inset 0 1px 0 var(--graphite);
}
.ui-chart--models { box-shadow: inset -1px 0 0 var(--graphite); }
.ui-chart-src,
.ui-chart-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.013em;
  font-feature-settings: normal;
  color: var(--ash);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-chart-cap { margin-top: auto; }

.ui-mlist { display: flex; flex-direction: column; gap: 2px; }
.ui-mrow {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  min-width: 0;
  padding: 0 8px;
  border-radius: var(--r-4);
  color: var(--fog);
  white-space: nowrap;
}
.ui-mrow.is-selected { background: var(--graphite); }
.ui-mname { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--mist); }
.ui-mc {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -0.013em;
  font-feature-settings: normal;
  color: var(--ash);
}
.ui-mrow.is-selected .ui-mc { color: var(--mist); }

/* The chart. Three tracks — mono key · bar track · mono value — repeated per
   row, so the bar widths and the axis below share one scale. */
.ui-chart .ui-bench,
.ui-bench-axis {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 34px;
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
  height: auto;
}
.ui-bk,
.ui-bv,
.ui-bench-ticks {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.013em;
  font-feature-settings: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-bk { color: var(--fog); }
.ui-bv { color: var(--ash); text-align: right; }
.ui-chart .ui-bench > i {
  display: block;
  flex: none;
  min-width: 0;
  max-width: none;
  width: var(--v, 0%);
  height: 5px;
  margin: 7px 0;
  justify-self: start;
  border-radius: var(--r-2);
  background: var(--smoke);
}
.ui-chart .ui-bench > i.is-current { background: var(--mist); }
.ui-bv.is-current { color: var(--mist); }
/* Marks grow from the left edge here, not from the bottom (motion.css default) */
.ui-chart .ui-bench[data-stagger] > i { transform-origin: 0 50%; }

.ui-bench-axis { margin-top: -4px; }
.ui-bench-ticks {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  box-shadow: inset 0 1px 0 var(--graphite);
  color: var(--ash);
}

/* --------------------------------------------------------------------------
   8. Diff, issues and deploy  (.ui-app--ship)
   The bar's fourth image type: an issue list beside a code editor carrying a
   syntax-highlighted diff, over a full-width deploy strip. The change it shows
   is its own — COE-402 in src/policy/fabric.ts — never the hero triptych's
   COE-418/routes/export.ts: no file or issue ID repeats across the page's mocks.
   The highlighting is
   greyscale by construction — added lines are mist on rgba(255,255,255,.03)
   behind a "+" gutter, removed lines are ash behind a "−" gutter and struck
   through in smoke, unchanged lines are fog. Content-tight: the frame ends at
   the deploy strip.
   -------------------------------------------------------------------------- */
.ui-app--ship {
  grid-template-columns: 340px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}
.ui-issues { display: flex; flex-direction: column; box-shadow: inset -1px 0 0 var(--graphite); }
.ui-editor { display: flex; flex-direction: column; min-width: 0; }
.ui-editor .ui-topbar > .ui-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mist); }
.ui-editor .ui-topbar .badge { margin-left: auto; }

/* Grouped issue list */
.ui-group { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 8px 0; }
.ui-ghead {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0 16px;
  color: var(--fog);
  white-space: nowrap;
}
.ui-ghead .ui-dot { flex: 0 0 auto; }
.ui-gcount { color: var(--ash); }
.ui-issue {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 16px 0 28px;
  white-space: nowrap;
}
.ui-issue .ui-id { flex: 0 0 auto; }
.ui-issue .ui-cp { flex: 1 1 auto; min-width: 0; }
.ui-issue .ui-dot { flex: 0 0 auto; margin-left: auto; }
/* The one issue the editor beside it has open — the same surface step the tables use */
.ui-issue.is-selected { background: var(--obsidian); }
.ui-issue.is-selected .ui-id { color: var(--mist); }

/* The diff. Line numbers mono, a one-character gutter, then the code. */
.ui-code {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.013em;
  font-feature-settings: normal;
  white-space: pre;
  overflow: hidden;
}
.ui-cl {
  display: grid;
  grid-template-columns: 28px 14px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  height: 20px;
  flex: 0 0 auto;
  padding: 0 16px 0 8px;
}
.ui-cl > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-cn { text-align: right; font-feature-settings: "tnum"; color: var(--ash); }
.ui-cg { text-align: center; color: var(--ash); }
.ui-cl code { font: inherit; color: var(--fog); }
.tk-k { color: var(--mist); }
.tk-s { color: var(--ash); }
.tk-c { color: var(--ash); }

.ui-cl--add { background: rgba(255, 255, 255, .03); }
.ui-cl--add code { color: var(--mist); }
.ui-cl--add .ui-cg { color: var(--mist); }
.ui-cl--add .tk-k { color: var(--paper); }
.ui-cl--add .tk-s { color: var(--fog); }

.ui-cl--del code { color: var(--ash); text-decoration: line-through; text-decoration-color: var(--smoke); }
.ui-cl--del .tk-k, .ui-cl--del .tk-s { color: var(--ash); }

/* Window 2's diff runs narrower */
.ui-code--win { font-size: 13px; padding: 14px 0; }
.ui-code--win .ui-cl { grid-template-columns: 22px 13px minmax(0, 1fr); gap: 8px; height: 26px; padding: 0 14px 0 10px; }

/* Deploy strip: the stages this build already cleared, then the fabric it is on */
.ui-deploy {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  background: var(--obsidian);
  box-shadow: inset 0 1px 0 var(--graphite);
  white-space: nowrap;
}
.ui-deploy-label { flex: 0 0 auto; padding: 0 4px 0 0; }
.ui-stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .03);
  box-shadow: var(--hairline);
  color: var(--fog);
}
.ui-stage.is-current { background: var(--graphite); box-shadow: var(--hairline-strong); color: var(--mist); }
.ui-deploy-state { flex: 0 0 auto; margin-left: 4px; }
.ui-deploy-meta { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ash); }

/* --------------------------------------------------------------------------
   9. Dated notes row
   The bar's sixth mechanism — recency as proof of life. Four entries from B&A's
   own published notes, newest first: a rule with a grey node, the real title,
   one line taken from the piece, and its real publication date. Subgrid keeps
   the rules, titles and dates on one baseline across the four columns however
   long a title runs. No cards, no colour, no quotes, no logos. The eight
   prototypes stay proven by the SHIPPED link index under the row.
   -------------------------------------------------------------------------- */
.notes-section .eyebrow { margin-bottom: var(--s-40); }
.notes-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto;   /* rule · title · line · date */
  gap: var(--gap) var(--s-32);
}
.note {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-items: start;
  justify-items: start;
  min-width: 0;
}
.note-rule {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: var(--s-16);
  background: var(--graphite);
}
.note-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--fog);
}
.note-title {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mist);
  transition: color var(--dur-hover, .1s) var(--ease-ui, cubic-bezier(.25, .46, .45, .94));
}
.note-title:hover { color: var(--paper); }
.note-sum {
  margin-top: var(--s-8);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.011em;
  color: var(--fog);
}
.note-date {
  margin-top: var(--s-16);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.013em;
  font-feature-settings: normal;
  color: var(--ash);
}
.notes-all { margin-top: var(--s-48); }

/* --------------------------------------------------------------------------
   10. Closing contact line — ash caption under the text link
   -------------------------------------------------------------------------- */
/* Two buttons, as the bar closes: the orange primary — the page's one chromatic
   fill in this view — beside the system's ghost/outline (transparent, 1px
   #23252a). Stretch keeps the two the same height without touching either
   component's own padding or type. */
.closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--gap);
  margin-top: var(--s-32);
}
.closing-contact { margin-top: var(--s-32); color: var(--ash); }
.closing-contact a { color: var(--fog); transition: color var(--dur-hover, .1s) var(--ease-ui, cubic-bezier(.25,.46,.45,.94)); }
.closing-contact a:hover { color: var(--mist); }

/* --------------------------------------------------------------------------
   11. Responsive
   ≤1200: the document's outline rail narrows and the floating OSCAL layer with it;
   the route table keeps all columns.
   ≤900: the hero triptych collapses to the middle window (the diff) alone; the ship
   frame stacks issues → editor → deploy; the floating layer narrows but still
   overlaps the document; the route table drops its model column (the models
   are named in the strip below it); the analysis strip stacks; the link index
   and the notes row go to two columns.
   ≤640: the document drops its outline rail (every entry in it is a section printed
   below anyway) and the routing console's rail becomes a horizontal strip of fabric
   chips so the four fabrics survive on a phone; code drops to 11px; the route table
   falls to three columns; the link index goes to one column per group.
   ≤560: film band 4:5, poster only — the video is hidden and unfetched; the file
   tree goes so the diff keeps its full width; notes row single column.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .hero-showcase { aspect-ratio: 16 / 9; }
}
@media (max-width: 1200px) {
  .ui-app--ship { grid-template-columns: 300px minmax(0, 1fr); }
  .ui-app--tri { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
  .ui-win { min-height: 700px; }
  .ui-winsplit { grid-template-columns: 152px minmax(0, 1fr); }
  /* the diff pane is ~100px narrower here — the code steps back one notch so
     whole lines still fit (still above the 11px it rendered at in v3r3) */
  .ui-code--win { font-size: 12px; }
  .ui-code--win .ui-cl { height: 24px; padding: 0 10px 0 8px; }

  /* Below 1200 the half-and-half split starves the link columns and long
     labels start breaking; the eyebrow only needs its own width, so the label
     track is capped and the links take the rest. */
  .link-index { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }

  .ui-app--doc { grid-template-columns: minmax(0, 1fr) 200px; }
  .ui-docbody { padding: 28px 32px 36px; }
  .ui-float { width: 300px; right: 88px; }
  .ui-table--route .ui-tr { grid-template-columns: minmax(0, 1fr) 148px 168px 88px; }
}
@media (max-width: 899px) {
  .hero-showcase { aspect-ratio: 3 / 2; }
}
@media (max-width: 900px) {
  /* The triptych keeps one window — the diff — and nothing overlaps. It still
     sits straight on the canvas: no card, no padding, just the bleed margin. */
  .ui-app--tri { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .ui-win--plan, .ui-win--pr { display: none; }
  .ui-win { min-height: 560px; }
  .ui-winsplit { grid-template-columns: 180px minmax(0, 1fr); }

  .ui-app--ship { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .ui-issues { box-shadow: inset 0 -1px 0 var(--graphite); }
  .ui-deploy { grid-column: 1; height: auto; flex-wrap: wrap; gap: 6px; padding: 12px 16px; }
  .ui-deploy-meta { margin-left: 0; width: 100%; }

  /* The layer narrows but keeps its overlap: the document has to remain visibly
     running on underneath it, not be replaced by it. */
  .ui-float { right: 16px; bottom: 24px; width: 280px; }
  .ui-float .ui-json { font-size: 10px; }
  .ui-docbody { padding: 24px 24px 32px; gap: 18px; }
  .ui-sec-p, .ui-doc-lede { max-width: none; }

  .ui-table--route .ui-tr { grid-template-columns: minmax(0, 1fr) 168px 92px; }
  .ui-col-model { display: none; }

  .ui-strip { grid-template-columns: minmax(0, 1fr); }
  .ui-chart--models { box-shadow: inset 0 -1px 0 var(--graphite); }

  .link-index { grid-template-columns: minmax(0, 1fr); gap: var(--s-24); margin-top: var(--s-48); }
  .notes-row { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto auto 1fr auto); gap: var(--gap) var(--s-24); }
  /* subgrid keeps the tracks shared, so the breathing room between stacked
     entries has to come from the last row itself */
  .note-date { margin-bottom: var(--s-40); }
  .note:nth-last-child(-n+2) .note-date { margin-bottom: 0; }
  .stack-strip { justify-content: flex-start; gap: var(--s-16) var(--s-32); }
}
@media (max-width: 640px) {
  /* The document keeps the whole frame; the outline is the part a phone can
     lose, because every entry in it is a section printed below anyway. */
  .ui-app--doc { grid-template-columns: minmax(0, 1fr); }
  .ui-outline { display: none; }
  .ui-docbar { padding: 0 14px; gap: 8px; }
  /* the path prefix goes so the document's own name survives the phone */
  .ui-crumb > :not(.ui-crumb-file) { display: none; }
  .ui-docbody { padding: 18px 14px 26px; gap: 16px; }
  .ui-docmeta { grid-template-columns: 78px minmax(0, 1fr); }
  .ui-secs { gap: 14px; }
  .ui-sec { padding-left: 10px; }
  .ui-docsub { flex-wrap: wrap; gap: 2px 10px; white-space: normal; }

  .ui-topbar-sub, .ui-foot-meta { display: none; }

  /* The layer keeps the section rules peeking out on its left, so the document
     is visibly still there, running on behind it. */
  .ui-float { left: 28px; right: 8px; bottom: 20px; width: auto; padding: 12px; gap: 10px; }
  .ui-float .ui-json { padding: 10px; font-size: 10px; }

  /* The routing console keeps its fabrics: the rail becomes a chip strip. */
  .ui-app--route { grid-template-columns: minmax(0, 1fr); }
  .ui-app--route .ui-rail { display: flex; padding: 10px 12px; box-shadow: inset 0 -1px 0 var(--graphite); }
  .ui-app--route .ui-brand, .ui-app--route .ui-rail-foot { display: none; }
  .ui-app--route .ui-rail-label { padding: 0 0 6px; }
  .ui-app--route .ui-nav { flex-direction: row; flex-wrap: wrap; gap: 4px 6px; }
  .ui-app--route .ui-nav-item { height: 24px; background: var(--obsidian); box-shadow: var(--hairline); }
  .ui-app--route .ui-nav-n { flex: 0 1 auto; }
  .ui-table--route .ui-tr { grid-template-columns: minmax(0, 1fr) max-content max-content; }
  .ui-table--route .ui-cp { display: none; }
  .ui-chart .ui-bench, .ui-bench-axis { grid-template-columns: 110px minmax(0, 1fr) 30px; column-gap: 6px; }
  .ui-chart-cap { white-space: normal; }

  .ui-code { font-size: 11px; }
  .ui-cl { grid-template-columns: 22px 12px minmax(0, 1fr); gap: 5px; padding: 0 12px 0 6px; }
  .ui-issue { padding: 0 12px 0 20px; }
  .ui-ghead { padding: 0 12px; }
  .ui-deploy { padding: 10px 12px; }

  .link-index-cols { grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
}
@media (max-width: 560px) {
  .hero-showcase { aspect-ratio: 4 / 5; }
  .hero-showcase video { display: none; }
  .hero-poster { display: block; }

  .ui-app--tri { padding: 0; }
  .ui-win { min-height: 420px; }
  .ui-tree { display: none; }
  .ui-winsplit { grid-template-columns: minmax(0, 1fr); }

  .notes-row { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, auto auto 1fr auto); }
  .note:nth-last-child(-n+2) .note-date { margin-bottom: var(--s-40); }
  .note:last-child .note-date { margin-bottom: 0; }
}