/* ════════════════════════════════════════════════════════════════════════════
   supernova-09 · Stage 9 DESIGN · css/components.css
   control-room window & instrument components, composed for THIS project from
   design-direction.json `vocabulary` (Terminal Observatory register) + the
   approved mock's pane grammar. 9c webspire was ABSENT on this box → every
   pattern below was composed from the locked component_vocabulary directly
   (degradation documented in DESIGN.md §9). Nothing was copied from another
   project's components.css; every section banner names the pattern + origin.

   token discipline: every value is var(--*) from css/tokens.css.
   section index:
     A  inline text grammar (accents, keywords, comment-lines, cursor)
     B  instrument window frame (.win) + title bars + corner frames
     C  lead headline (.glitch) — static base; the burst lives in motion.css
     D  command-line / prompt grammar (.cmd) + CTA pill
     E  telemetry ticker (.tick) + live indicator + progress bar
     F  rate table (open pricing)
     G  FAQ accordion
     H  code / evidence surfaces (pre.c, logs)
     I  ASCII illustration plates (observatory scene, block charts)
     Z  typography baseline (orphan prevention — ships every build)
   ════════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   A · inline text grammar — vocabulary: comment-lines (#), keywords,
       flare figures, mono colour words. HTML paints words, never hex.
   ──────────────────────────────────────────────────────────────────────────── */
.grn{ color:var(--green); }
a.grn, .cap a.src, a.src{ text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--green) 45%, transparent); text-underline-offset:3px; }
a.grn:hover, .cap a.src:hover, a.src:hover{ color:var(--rose); text-decoration-color:var(--rose); }
.rose{ color:var(--rose); }
.dim{ color:var(--ink-dim); }
.dim2{ color:var(--ink-faint); }
.comment{ color:var(--ink-dim); }                 /* "# …" plain-language subtitle */
.k{ color:var(--green); font-weight:var(--fw-semibold); }   /* keyword / term */
.fl{ color:var(--rose); font-weight:var(--fw-semibold); }   /* flare figure    */
.win .k{ color:var(--green); }
.win .fl{ color:var(--rose); }
.nowrap{ white-space:nowrap; }                    /* orphan override span       */

/* prompt cursor block — base; blink animation in motion.css */
.cursor{
  display:inline-block;
  width:.62em;
  height:1.08em;
  vertical-align:-.2em;
  background:var(--rose);
}

/* ────────────────────────────────────────────────────────────────────────────
   B · instrument window frame (.win) — the primary pane grammar.
       Banners carry a title (.t), meta rail (.meta), status dot (.dot).
       Face treatments: corner frame (.corner, rose default / .grn),
       tilt offsets (.off / .offr), content padding variants.
       VARIETY RULE (direction): never two identical panes — BUILD alternates
       corner colours, tilts, and banner copy; grids must not repeat a plain
       window more than twice in a row.
   ──────────────────────────────────────────────────────────────────────────── */
.win{
  position:relative;
  background:var(--panel);
  border:var(--border-window);
  border-radius:var(--radius-window);
  overflow:hidden;
  box-shadow:var(--shadow-window);
}
.win.is-clickable{ transition:box-shadow var(--dur-micro) var(--ease-default),
                               border-color var(--dur-micro) var(--ease-default); }
.win.is-clickable:hover{ box-shadow:var(--shadow-window-soft); }
.win.off{ transform:rotate(-.35deg); }            /* [mock] hand-set tilt     */
.win.offr{ transform:rotate(.3deg); }             /* [mock] counter tilt      */
@media (prefers-reduced-motion: reduce){
  .win.off{ transform:none; }
  .win.offr{ transform:none; }
}

/* title bar */
.win .hd{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-12);
  align-items:center;
  padding:var(--pad-window-head);
  background:var(--panel-2);
  border-bottom:var(--border-hair);
  font-size:var(--fs-12);
  color:var(--ink-dim);
  white-space:nowrap;
  overflow:hidden;
}
.win .hd .t{ color:var(--ink); overflow:hidden; text-overflow:ellipsis; }
.win .hd .meta{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-8);
  flex:0 0 auto;
}
.win .hd .meta .dot{
  width:var(--sp-7);
  height:var(--sp-7);
  border-radius:50%;
  background:var(--green);
  box-shadow:var(--glow-green);
  display:inline-block;
}
.win .hd .meta .dot--rose{ background:var(--rose); box-shadow:var(--glow-rose); }

/* body */
.win .bd{ padding:var(--pad-window-bd); }
.win .bd p{ margin:0 0 var(--sp-10); }
.win .bd p:last-child{ margin-bottom:0; }

/* body padding variants (approve-render paddings, token-composed) */
.win--claim .bd{ padding:var(--pad-window-bd-wide); }         /* hero claim   */
.win--art .bd{ padding:var(--sp-12) var(--sp-12) var(--sp-10); }    /* art plate    */
.win--flush .bd{ padding:var(--sp-8) var(--sp-6); }                 /* ticker       */
.win--table .bd{ padding:var(--sp-6) var(--sp-14) var(--sp-12); }   /* rate table   */

/* windowed list content */
.win ul{ list-style:none; margin:var(--sp-6) 0 0; }
.win li{
  padding:var(--sp-4) 0 var(--sp-4) var(--sp-20);
  position:relative;
  font-size:var(--fs-13);
}
.win li::before{
  content:"▪";
  position:absolute;
  left:0;
  color:var(--rose);
  font-size:var(--fs-11);
  top:var(--sp-6);
}

/* corner frame — 2px rose angle brackets on a featured window */
.corner::before,
.corner::after{
  content:"";
  position:absolute;
  width:var(--corner-size);
  height:var(--corner-size);
  pointer-events:none;
  z-index:1;
}

.corner.grn::before{ border-color:var(--green); }
.corner.grn::after{ border-color:var(--green); }
.corner.offr::before,
.corner.offr::after{ border-color:var(--green); }

/* ────────────────────────────────────────────────────────────────────────────
   C · lead headline (.glitch) — rose/green chromatic layers.
       Static typographic base here; the ::before/::after ghost layers and
       clip-path burst keyframes live in motion.css (single reduced-motion
       kill-switch there). data-text must equal the visible text for ghosts.
   ──────────────────────────────────────────────────────────────────────────── */
.glitch{
  position:relative;
  color:var(--ink-hi);
  font-weight:var(--fw-semibold);
  font-size:var(--fs-glitch);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-glitch);
}
.glitch .g,
.glitch .grn{ color:var(--green); text-shadow:var(--glitch-sh-g); }
.glitch .r,
.glitch .rose{ color:var(--rose); text-shadow:var(--glitch-sh-r); }
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}
.glitch::before{ color:var(--rose); }
.glitch::after{ color:var(--green); }

/* ────────────────────────────────────────────────────────────────────────────
   D · command-line grammar (.cmd) + CTA pill.
       vocabulary: “prompt lines + cursor block as CTA grammar”.
       Render as:  $ ./start-a-build.sh --plan launch|build-geo ▌
   ──────────────────────────────────────────────────────────────────────────── */
.cmd{
  display:flex;
  align-items:center;
  gap:var(--sp-8);
  flex-wrap:wrap;
  color:var(--ink);
  font-weight:var(--fw-medium);
}
.cmd .d{ color:var(--ink-faint); }                /* the “$” prefix          */
.cmd .in{ color:var(--ink-hi); }                  /* the invoked command     */
.cmd .flg{ color:var(--ink-dim); }                /* flags, before accents   */
.cmd .opt{ color:var(--green); }                  /* selectable green value  */
.cmd .opt--rose{ color:var(--rose); }             /* selectable rose value   */
.cmd .cursor{ margin-inline-start:var(--sp-2); }
/* lead command rows (hero claim + final CTA) — mock hero-cmd scale */
.cmd--lead{
  font-size:var(--fs-hero-cmd);
  line-height:var(--lh-tight);
  font-weight:var(--fw-medium);
}

/* CTA pill — border-flare call to action (persistent conversion affordance) */
.pill{
  display:inline-block;
  border:var(--border-hair);
  border-color:var(--rose-dim);
  color:var(--rose);
  padding:var(--sp-4) var(--sp-12);
  border-radius:var(--radius-pill);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-head);
  transition:color var(--dur-micro) var(--ease-default),
             background-color var(--dur-micro) var(--ease-default),
             box-shadow var(--dur-micro) var(--ease-default);
}
.pill:hover{
  color:var(--sel-ink);
  background:var(--rose);
  box-shadow:var(--glow-rose);
}
.pill--grn{
  border-color:var(--green-dim);
  color:var(--green);
}
.pill--grn:hover{
  color:var(--bg);
  background:var(--green);
}

/* ────────────────────────────────────────────────────────────────────────────
   E · telemetry — ticker band, live marker, progress bar.
       vocabulary: “progress/live readouts; no heavy animation”.
   ──────────────────────────────────────────────────────────────────────────── */
.tick{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
}
.tick .cell{
  position:relative;
  padding:var(--pad-tick-cell);
}
.tick .cell:not(:last-child)::after{              /* hairline column rule   */
  content:"";
  position:absolute;
  top:var(--sp-10);
  bottom:var(--sp-10);
  right:0;
  width:var(--hairline);
  background:var(--line);
}
.tick .lab{
  font-size:var(--fs-10);
  color:var(--ink-dim);
  letter-spacing:var(--ls-kicker);
}
.tick .lab .rose{ color:var(--rose); }
.tick .val{
  font-size:var(--fs-tick);
  color:var(--ink-hi);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-tick);
  font-variant-numeric:tabular-nums;
}
.tick .val .u{ font-size:.55em; color:var(--ink-dim); font-weight:var(--fw-regular); }
.tick .val--rose{ color:var(--rose); }
.tick .val--grn{ color:var(--green); }

/* responsive: ≤860px the ticker reflows to a 2-up grid (base above sets
   grid-auto-flow:column — this override must live AFTER it in the SAME file;
   in layout.css it lost the cascade to this base rule and never applied) */
@media (max-width:860px){
  .tick{
    grid-auto-flow:row;
    grid-template-columns:repeat(2,1fr);
  }
  .tick .cell::after{ display:none; }
  .tick .cell:nth-child(odd):not(:last-child)::after{
    display:block;
    content:"";
    position:absolute;
    top:var(--sp-10);
    bottom:var(--sp-10);
    right:0;
    width:var(--hairline);
    background:var(--line);
  }
  .tick .cell:nth-child(even):not(:last-child)::after{
    display:block;
    content:"";
    position:absolute;
    left:var(--sp-10);
    right:var(--sp-10);
    bottom:0;
    height:var(--hairline);
    background:var(--line);
  }
}

/* live ▋ marker — appends a blinking green block (blink in motion.css) */
.live::after{
  content:"▋";
  color:var(--green);
  margin-inline-start:var(--sp-4);
}

/* telemetry progress bar — rose→green sweep, draws in under .js */
.bar{
  height:var(--sp-6);
  background:var(--panel-2);
  border:var(--border-hair);
  margin-top:var(--sp-8);
  overflow:hidden;
}
.bar i{
  display:block;
  height:100%;
  background:var(--bar-fill);
  transform:scaleX(0);
  transform-origin:0 50%;
}
.js .bar i{ transform:scaleX(1); animation:telemetryGrow var(--dur-grow) var(--ease-default) forwards; }

/* pipeline run-step row (5-step build band) — step cells with hairline rules */
.runstep{
  position:relative;
  padding:var(--sp-10) var(--sp-16);
}
.runstep .no{ color:var(--ink-faint); font-size:var(--fs-11); }
.runstep h3{ font-size:var(--fs-13); font-weight:var(--fw-medium); color:var(--ink); margin:var(--sp-8) 0 0; }
.runstep h3 .opt{ font-weight:var(--fw-regular); color:var(--ink-dim); }
.runstep p{ font-size:var(--fs-12); color:var(--ink-dim); margin:var(--sp-8) 0 0; }
.runstep:not(:last-child)::after{
  content:"";
  position:absolute;
  top:var(--sp-10);
  bottom:var(--sp-10);
  right:0;
  width:var(--hairline);
  background:var(--line);
}

/* ────────────────────────────────────────────────────────────────────────────
   F · rate table — open pricing, never behind a contact wall (honesty rule).
   ──────────────────────────────────────────────────────────────────────────── */
table.rc{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-13);
}
table.rc th,
table.rc td{
  text-align:left;
  padding:var(--sp-8) var(--sp-10);
  border-bottom:var(--border-hair);
  vertical-align:top;
}
table.rc th{
  color:var(--ink-dim);
  font-weight:var(--fw-medium);
  font-size:var(--fs-12);
  letter-spacing:var(--ls-label);
}
table.rc td.l{ color:var(--ink); }
table.rc td.l b{ color:var(--ink-hi); font-weight:var(--fw-semibold); }
table.rc td .fl{ color:var(--rose); font-weight:var(--fw-semibold); white-space:nowrap; }
table.rc td .dim2{ color:var(--ink-faint); }
table.rc tr.hl td{ background:color-mix(in srgb,var(--rose) 7%,transparent); }
table.rc .note{ color:var(--ink-dim); font-size:var(--fs-12); }

/* ≤640px: rate + comparison tables scroll inside their own box. Without this
   the table's min-content width exceeded the viewport and html{overflow-x:clip}
   silently cut the right-hand column (price / plan) off the page — unreachable.
   The first cell pins so the row label stays visible while swiping.
   Must live AFTER the base table.rc rules in THIS file: same specificity, and
   components.css is the last stylesheet, so a layout.css override would lose. */
@media (max-width:640px){
  table.rc{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  table.rc th:first-child,
  table.rc td:first-child{
    position:sticky;
    left:0;
    z-index:1;
    background:var(--bg);
  }
  table.rc tr.hl td:first-child{ background:color-mix(in srgb,var(--rose) 7%,var(--bg)); }

  /* window headers: the nowrap flex row silently cut titles mid-word on narrow
     phones (no ellipsis, so the loss was invisible in QA). Let them wrap and
     break long tokens instead. */
  .win .hd{
    white-space:normal;
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .win .hd > span,
  .win .hd .t{
    min-width:0;
    overflow-wrap:anywhere;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   G · FAQ accordion — content in HTML, schema-pairable pairs (GEO rule).
   ──────────────────────────────────────────────────────────────────────────── */
.faq details{ border-bottom:var(--border-hair); padding:var(--sp-4) var(--sp-2); }
.faq details:last-child{ border-bottom:0; }
.faq summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:baseline;
  gap:var(--sp-12);
  padding:var(--sp-11) var(--sp-2);
  font-size:var(--fs-14);
  color:var(--ink);
  transition:color var(--dur-micro) var(--ease-default);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::marker{ content:""; }
.faq summary:hover{ color:var(--ink-hi); }
.faq summary .q{ color:var(--rose); font-weight:var(--fw-semibold); }
.faq summary .plus{ margin-left:auto; color:var(--ink-dim); transition:transform var(--dur-micro) var(--ease-default); }
.faq details[open] summary .plus{ transform:rotate(45deg); }
.faq-a{
  padding:0 var(--sp-2) var(--sp-14);
  font-size:var(--fs-13);
  line-height:var(--lh-faq);
  color:var(--ink);
  max-width:var(--content-narrow);
}
.faq-a::before{ content:"→ "; color:var(--green); }
.faq-a .dim{ display:block; margin-top:var(--sp-6); font-size:var(--fs-12); }
.faq-a .rose{ font-weight:var(--fw-medium); }
.faq-a .grn{ font-weight:var(--fw-medium); }

/* ────────────────────────────────────────────────────────────────────────────
   H · code & evidence surfaces — receipts the engines read, shown as-is.
       schema.org JSON-LD, llms.txt, build logs. Preformatted, wrap-safe.
   ──────────────────────────────────────────────────────────────────────────── */
.win pre.c{
  font-size:var(--fs-12);
  line-height:var(--lh-pre);
  white-space:pre-wrap;
  word-break:break-word;
  color:var(--ink);
}
.logline{ display:block; }
.logline .ok{ color:var(--green); font-weight:var(--fw-semibold); }
.logline .warn{ color:var(--rose); font-weight:var(--fw-semibold); }
.logline .p{ color:var(--ink-faint); }

/* ────────────────────────────────────────────────────────────────────────────
   I · ASCII illustration plates — observatory scene + block charts.
       Every glyph colour is a --art-* / --chart-* token so one class set
       renders correctly in BOTH themes (no per-theme art copy).
       Plate typography must not inherit prose measure.
   ──────────────────────────────────────────────────────────────────────────── */
pre.scene{
  font-size:var(--fs-scene);
  line-height:var(--lh-scene);
  white-space:pre;
  overflow-x:auto;
  color:var(--ink);
}
pre.scene s,
pre.scene span{ font-style:normal; text-decoration:none; }
.scene .star{ color:var(--art-star); }
.scene .star-hi{ color:var(--art-star-hi); }
.scene .tgt-h{ color:var(--art-tgt); }
.scene .bm-out{ color:var(--art-bm-out); }
.scene .bm-in{ color:var(--art-bm-in); }
.scene .bm-spk{ color:var(--art-bm-spk); }
.scene .tube-hi{ color:var(--art-tube-hi); }
.scene .tube{ color:var(--art-tube); }
.scene .tube-dim{ color:var(--art-tube-dim); }
.scene .dome{ color:var(--art-dome); }
.scene .dome-hi{ color:var(--art-dome-hi); }
.scene .slit{ color:var(--art-slit); }
.scene .haze{ color:var(--art-haze); }
.scene .emb-c{ color:var(--art-emb-c); }
.scene .emb-m{ color:var(--art-emb-m); }
.scene .emb-h{ color:var(--art-emb-h); }
.scene .rg{ color:var(--art-rg); }
.scene .rg-edge{ color:var(--art-rg-edge); }

pre.chart{
  font-size:var(--fs-chart);
  line-height:var(--lh-chart);
  white-space:pre;
  overflow-x:auto;
  min-width:0;
  max-width:100%;
  text-align:left;
  color:var(--ink);
}
pre.chart s{ font-style:normal; text-decoration:none; }
.chart .ax{ color:var(--chart-axis); }
.chart .grid{ color:var(--chart-grid); }
.chart .fill{ color:var(--chart-fill); }
.chart .edge{ color:var(--chart-edge); }
.chart .fill2{ color:var(--chart-fill2); }
.chart .edge2{ color:var(--chart-edge2); }
.chart .lab{ color:var(--chart-lab); }
.chart .lab-dim{ color:var(--chart-lab-dim); }
.chart .lab-amb{ color:var(--chart-lab-amb); }
.chart .year{ color:var(--chart-year); }

/* figure caption — every statistic carries one (GEO citation-ready) */
.cap{
  color:var(--ink-dim);
  font-size:var(--fs-11);
  margin-top:var(--sp-6);
  max-width:var(--content-lead);
}
.cap b{ color:var(--ink); font-weight:var(--fw-medium); }
.cap .rose{ color:var(--rose); font-weight:var(--fw-medium); }

/* ────────────────────────────────────────────────────────────────────────────
   Z · typography baseline — every build ships this (orphan prevention).
       Progressive enhancement only: browsers that ignore text-wrap render
       the text normally.
   ──────────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, .display{ text-wrap:balance; }
p, li, blockquote, .lead, .sec-lead{ text-wrap:pretty; }