/* schematics-detail.css — Schematics detail-page styles.
   Chrome (tokens, palette, type, .frame header/nav/footer, .site-notice,
   .skip-link, bare-element rules) is NOT defined here — it is @import-ed from
   the canonical design system, so it can NEVER drift from the rest of the site.
   The @imports MUST stay first (CSS requires @import before any other rule).
   Depth is two levels up: schematic pages live at /site/schematics/ and that
   tree deploys to the site root, served at /design. Mirrors recipes-detail.css. */
@import url("../../design/tokens.css");   /* Layer 0 — the DNA (palette, type, rhythm, layout) */
@import url("../../design/shell.css");    /* Layer 1 — the chrome + block set (.frame header/nav/footer) */

/* Below: ONLY the `.schematic-detail` scoped rules the shared shell does not own. */

.schematic-detail{ max-width:min(74ch, 92vw); margin:0 auto; padding:var(--gap-wide, 2rem) 0; }

/* Arrival — the schematic's title block. Mirrors the recipes .arrival rhythm. */
.schematic-detail .arrival{ text-align:center; margin-bottom:var(--gap-wide, 2rem); }
.schematic-detail .arrival .cat-line{
  font-family:var(--font-mono); font-size:var(--size-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--muted); margin-bottom:var(--gap-wide, 1.5rem); }
.schematic-detail .arrival .diamond-mark{
  color:var(--persimmon); font-size:14px; letter-spacing:6px; margin-bottom:var(--gap); }
.schematic-detail .arrival h1{
  font-family:var(--font-display); font-size:var(--size-headline, 2.2rem); color:var(--ink);
  margin:var(--gap-tight) 0; line-height:1.1; }
.schematic-detail .arrival .tagline{
  font-family:var(--font-body); font-style:italic; font-size:var(--size-lead);
  color:var(--muted); max-width:52ch; margin:var(--gap) auto 0; }

/* Shared part label — used by wiring / gaps / witnesses headers. */
.schematic-detail .part-label{
  font-family:var(--font-mono); font-size:var(--size-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink); font-weight:600;
  margin:0 0 var(--gap-tight) 0; padding-bottom:var(--gap-tight);
  border-bottom:var(--stroke-hairline) solid var(--hairline); }
.schematic-detail .part-label .count{ float:right; color:var(--faint); font-weight:400; }
.schematic-detail .part-label .wire-legend{
  float:right; color:var(--faint); font-weight:400; font-size:0.85em; letter-spacing:0; }
.schematic-detail .part-label .wire-legend .op-compose{ color:var(--persimmon); font-weight:600; }
.schematic-detail .part-label .wire-legend .op-tensor{ color:var(--ink); font-weight:600; }

/* --- Not-built disclosure (gift posture, Nyx) — a schematic is a proof, not a product.
   Screamingly clear the app is not built. Mirrors the recipes .not-built aside. --- */
.schematic-detail .not-built{
  background:var(--ground); border:var(--stroke-hairline) solid var(--hairline);
  border-radius:var(--radius-artifact, 6px); padding:var(--gap); margin:var(--gap-wide) 0; }
.schematic-detail .not-built .not-built-lead{ margin:0 0 var(--gap-tight); color:var(--ink); }
.schematic-detail .not-built .not-built-sub{ margin:0; color:var(--muted); font-size:var(--size-body); }

/* === THE WIRING — the proof-carrying hero. ∘ and ⊗ must read as DIFFERENT ops. === */
.schematic-detail .wiring{ margin:var(--gap-wide) 0; }
.schematic-detail .wiring .wiring-lead{
  color:var(--muted); margin:0 0 var(--gap); max-width:62ch; }
.schematic-detail .wiring .op-compose{ color:var(--persimmon); font-weight:600; }
.schematic-detail .wiring .op-tensor{ color:var(--ink); font-weight:700; }

/* The pipeline — an ordered flow of stage nodes with ∘ joins between them. Wraps
   gracefully on narrow viewports (the fit-by-construction overflow policy: wrap). */
.schematic-detail .wire-pipeline{
  list-style:none; margin:0 0 var(--gap); padding:0;
  display:flex; flex-wrap:wrap; align-items:stretch; gap:var(--gap-tight); }
.schematic-detail .wire-stage{
  display:flex; align-items:center; }
.schematic-detail .wire-stage .stage-id{
  display:inline-block; font-family:var(--font-mono); font-size:var(--size-code, 0.9rem);
  color:var(--ink); background:var(--paper);
  border:var(--stroke-hairline) solid var(--hairline); border-left:3px solid var(--persimmon);
  border-radius:var(--radius-badge, 3px); padding:0.4em 0.7em; white-space:nowrap; }
/* the ∘ join between two sequential stages — a data dependency ("feeds") */
.schematic-detail .wire-join{
  display:flex; align-items:center; padding:0 0.15em; }
.schematic-detail .wire-join .op-compose{
  font-size:1.2em; color:var(--persimmon); }
/* the ⊗ parallel node — a bracketed group, VISUALLY DISTINCT from sequential:
   a dashed enclosure (no single left-edge dependency bar), members side by side. */
.schematic-detail .wire-parallel .par-bracket{
  display:inline-flex; align-items:center; gap:0.4em;
  border:var(--stroke-hairline) dashed var(--muted); border-radius:var(--radius-badge, 3px);
  padding:0.3em 0.6em; background:transparent; }
.schematic-detail .wire-parallel .par-member{
  border-left:none; border-style:dashed; border-color:var(--muted); background:transparent; }
.schematic-detail .wire-parallel .op-tensor{ font-size:1.1em; color:var(--ink); }

.schematic-detail .batch-term{
  font-size:var(--size-body); color:var(--muted); margin:var(--gap) 0 0;
  padding-top:var(--gap-tight); border-top:var(--stroke-hairline) solid var(--hairline); }
.schematic-detail .batch-term .term-label{
  font-family:var(--font-mono); font-size:var(--size-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--faint); margin-right:0.5em; }
.schematic-detail .batch-term code{
  font-family:var(--font-mono); font-size:var(--size-code, 0.88rem); color:var(--ink);
  word-break:break-word; }
.schematic-detail .tensor-note{
  font-size:var(--size-body); color:var(--muted); margin:var(--gap-tight) 0 0;
  max-width:62ch; }
.schematic-detail .tensor-note .op-tensor{ color:var(--ink); font-weight:700; }

/* === The verdict — honest COMPLETE / GAPPED, never a bare green check. === */
.schematic-detail .verdict{
  border:var(--stroke-hairline) solid var(--hairline); border-radius:var(--radius-artifact, 6px);
  padding:var(--gap); margin:var(--gap-wide) 0; background:var(--paper); }
.schematic-detail .verdict .verdict-head{
  font-family:var(--font-mono); font-size:var(--size-label); letter-spacing:var(--track-label);
  text-transform:uppercase; font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:0.5em; }
.schematic-detail .verdict .verdict-glyph{ font-size:1.2em; }
.schematic-detail .verdict.verdict-complete{ border-left:4px solid var(--persimmon); }
.schematic-detail .verdict.verdict-complete .verdict-glyph{ color:var(--persimmon); }
.schematic-detail .verdict.verdict-gapped{ border-left:4px solid var(--muted); }
.schematic-detail .verdict.verdict-gapped .verdict-glyph{ color:var(--muted); }
.schematic-detail .verdict .verdict-count{
  margin:var(--gap-tight) 0 0; color:var(--ink); font-weight:600; font-size:var(--size-body); }
.schematic-detail .verdict .verdict-raw{
  margin:var(--gap-tight) 0 0; color:var(--muted); font-size:var(--size-body); }

/* === The declared gaps — each a card, primitive + covenant-class + reason. === */
.schematic-detail .gaps{ margin:var(--gap-wide) 0; }
.schematic-detail .gaps .gaps-lead{ color:var(--muted); margin:0 0 var(--gap); max-width:62ch; }
.schematic-detail .gap-list{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--gap-tight); }
.schematic-detail .gap-card{
  border:var(--stroke-hairline) solid var(--hairline); border-left:3px solid var(--muted);
  border-radius:var(--radius-badge, 3px); padding:var(--gap-tight) var(--gap); background:var(--paper); }
.schematic-detail .gap-card .gap-head{ display:flex; align-items:baseline; gap:0.6em; flex-wrap:wrap; }
.schematic-detail .gap-card .gap-prim{
  font-family:var(--font-mono); font-size:var(--size-code, 0.9rem); color:var(--ink); font-weight:600; }
.schematic-detail .gap-card .gap-class{
  font-family:var(--font-mono); font-size:var(--size-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--faint); }
.schematic-detail .gap-card .gap-reason{ margin:var(--gap-tight) 0 0; color:var(--muted); font-size:var(--size-body); }

/* === Witness gifts — cross-linked chips (The Twine seam), honest on absence. === */
.schematic-detail .witnesses{ margin:var(--gap-wide) 0; }
.schematic-detail .witnesses .witness-lead{ color:var(--muted); margin:0 0 var(--gap-tight); }
.schematic-detail .witnesses .witness-none{ color:var(--muted); font-style:italic; margin:0; max-width:62ch; }
.schematic-detail .gift-chips{ list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--gap-tight); }
.schematic-detail .gift-chips .gift-chip{
  display:inline-block; text-decoration:none;
  border:var(--stroke-hairline) solid var(--hairline); border-radius:var(--radius-badge, 3px);
  padding:0.3em 0.6em; background:var(--paper); }
.schematic-detail .gift-chips .gift-chip code{
  font-family:var(--font-mono); font-size:var(--size-code, 0.88rem); color:var(--persimmon); }
.schematic-detail .gift-chips .gift-chip:hover{ border-color:var(--persimmon); }

/* Invite + contact — mirror the recipes closers. */
.schematic-detail .schematic-invite{
  margin:var(--gap-wide) 0; padding:var(--gap); background:var(--ground);
  border-radius:var(--radius-artifact, 6px); color:var(--ink); }
.schematic-detail .schematic-contact{ margin:var(--gap-wide) 0 0; }
.schematic-detail .schematic-contact .contact-lead{ color:var(--muted); margin:0 0 var(--gap-tight); }
.schematic-detail .schematic-contact .contact-addr{ margin:0; }
.schematic-detail .schematic-contact .contact-addr a{ color:var(--persimmon); font-weight:600; }