/* prompts-detail.css — prompt-specific 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 at the top of this file, so it can NEVER drift
   from the rest of the site again. The @imports MUST stay first (CSS requires
   @import before any other rule). Depth is two levels up into the design tree
   because prompt pages live at /site/prompts/ and that tree deploys to the site
   root, served at /design. */
@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, .site-notice, .nav-collapse) */

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

   WHY THIS FILE NO LONGER FORKS THE SHELL (root-cause fix, NOTE-28.0956-N3):
   Through v1.125 this file carried a hand-copied "token + shell preview
   subset" of the chrome. That subset drifted — it was missing shell.css's
   entire .nav-collapse block — so the prompt-page nav rendered stuck-collapsed
   and the footer nav ran on unstyled. Five prior fixes patched the OUTPUT HTML
   (which was never wrong); the fork was the real cause. Consuming the canonical
   tokens.css + shell.css like every other site/ page makes the chrome
   un-forkable — it can never drift from the rest of the site again.
   (The operator reported this 6 times. This is the structural fix.) */
  
  /* ───────────────────────────────────────────────────────────────────────
     THE PROMPTS — per-prompt detail page · v2 (re-cut after reading the proof)
     Folded from the Book of Sweet Prompts:
       · reverence-through-restraint — the specimen floats, no rule/fill (was v1's mistake)
       · arrival pacing — a tall quiet hero before the specimen
       · The Anatomy is a bold-fragment CLOSE READING, not generic prose
       · the diamond page-number signature carries as the catalog mark
     Web-native additions the print book can't do:
       · The Reveal (prompt → what it made) — placed AFTER the specimen, as payoff
     Accent (--persimmon) appears in exactly TWO places: the diamond mark, and
     the Reveal's "certified" — Score scarcity rule.
     ─────────────────────────────────────────────────────────────────────── */

  /* ── The column (NOTE-01.1039-2 root-cause fix) ──────────────────────────
     .frame > main is full-bleed (flex:1, no max-width). Before this rule, each
     content block set its OWN max-width and only SOME added margin:0 auto — so
     the hero/specimen centered (298px in) while the body/profile/element-heads
     pinned hard left (0px). That split-column mis-alignment is the operator's
     "extreme flush-left, not lined up." The fix is ONE column measure on the
     main element; per-block max-widths below are collapsed into it so every
     section shares a single left edge. Determinism: verified by headless render
     (before: specimen@298 body@0; after: all@240). --width-room = the site's
     canonical Room measure, matching the doc-room pages. */
  .prompt-detail{
    /* Flex child of .frame: definite width FIRST so it fills, THEN max-width caps
       + margin centers; min-width:0 lets it shrink below content on a phone
       instead of forcing document h-scroll. Mirrors the site's own .app-page
       pattern (shell.css:1153) — matching the site, not inventing a rule. */
    width:100%; max-width:var(--width-room); margin-left:auto; margin-right:auto;
    min-width:0; box-sizing:border-box;   /* explicit: the global *{border-box}
       reset (shell.css) does not reach this element on the served cascade
       (byte-verified: container reads content-box on main), so its side padding
       was being ADDED to width:100% and pushing the column past a phone viewport. */
    padding-left:var(--gap-wide); padding-right:var(--gap-wide);
  }

  /* ── Arrival hero — the title-page threshold, ported to scroll ─────────── */
  .prompt-detail .arrival{
    /* space: fill --width-room; overflow: wrap. Generous top air = the page-turn. */
    min-height:66vh; display:flex; flex-direction:column; justify-content:center;
    text-align:center; padding:var(--gap-section) 0;
  }
  .prompt-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);
  }
  .prompt-detail .arrival .diamond-mark{ color:var(--persimmon); font-size:14px; letter-spacing:6px;
    margin-bottom:var(--gap); } /* accent #1 — the book's binary-diamond signature, ported */
  .prompt-detail .arrival h1{ max-width:16ch; margin:0 auto; }
  .prompt-detail .arrival .catalog-name{
    font-family:var(--font-display); font-style:italic; font-size:var(--size-lead);
    color:var(--muted); margin-top:var(--gap); }
  .prompt-detail .arrival .tone-line{
    font-family:var(--font-body); font-style:italic; font-size:var(--size-lead);
    color:var(--ink); margin-top:var(--gap-wide); max-width:44ch; margin-left:auto; margin-right:auto; }

  /* ── THE WORD SQUARE — the four words rendered AS a square ─────────────────
     NOTE-27.1935-4: the top text formatted into an actual square. A monospace
     n×n grid so the letters line up in both directions, with both readings
     (across + derived down) exposed beneath — teaching the "up and down, 8X"
     double-word-square idea, not just decorating. --ws-n comes from the page. */
  .prompt-detail .word-square{
    margin:var(--gap-wide) auto 0 auto; width:fit-content;
    display:flex; flex-direction:column; align-items:center;
  }
  .prompt-detail .word-square .ws-grid{
    display:grid; grid-template-columns:repeat(var(--ws-n,4), 1fr);
    gap:2px; background:var(--rule, #d8cfbf); padding:2px;
  }
  .prompt-detail .word-square .ws-cell{
    display:flex; align-items:center; justify-content:center;
    width:clamp(2.4rem, 9vw, 3.4rem); aspect-ratio:1;
    background:var(--paper); color:var(--ink);
    font-family:var(--font-mono); font-weight:600;
    font-size:clamp(1.2rem, 4.5vw, 1.7rem); letter-spacing:0;
    text-transform:uppercase;
  }
  .prompt-detail .word-square figcaption{
    display:flex; flex-wrap:wrap; gap:var(--gap-tight) var(--gap-wide);
    justify-content:center; margin-top:var(--gap);
    font-family:var(--font-mono); font-size:var(--size-code); color:var(--muted);
  }
  .prompt-detail .word-square .ws-read{ letter-spacing:0.04em; }
  .prompt-detail .word-square .ws-k{
    font-size:var(--size-label); letter-spacing:var(--track-label);
    text-transform:uppercase; color:var(--faint); margin-right:0.4em;
  }

  /* ── THE PROMPT — the specimen, reverent + restrained (the v1 fix) ─────────
     No rule. No fill. Deep indent, italic, air. The book's whole treatment. */
  .prompt-detail .element-head{
    font-family:var(--font-mono); font-size:var(--size-label); letter-spacing:var(--track-label);
    text-transform:uppercase; color:var(--muted); font-weight:500;
    margin:var(--gap-section) 0 var(--gap) 0;
  }
  .prompt-detail .specimen{
    /* space: on the shared column rail (NOT re-centered); overflow: wrap.
       NOTE-01.1039-2 completion: the column fix above collapsed the body/head/
       profile blocks onto one left rail, but the specimen kept margin:0 auto +
       its own padding, so it floated 58px right of everything else (render:
       specimen@248 vs body@190). A specimen that centers itself inside an
       already-centered column reads as the operator's "not lined up." It now
       aligns to the column left edge like every other block, keeping only its
       measure (max-width) and its italic voice. Systemic (shared class). */
    margin:0 0 var(--gap) 0; max-width:min(56ch,100%);
    font-family:var(--font-body); font-style:italic; font-size:var(--size-body);
    /* text-align was `justify` + `hyphens:auto`: on specimens with few break
       points (command-shaped prompts like `S>Super Frame>Random/Random/Random>`)
       justify stretched the inter-word spacing into huge rivers (operator
       NOTE-28.1843-2, super-frame-triple-random-gold-bar). Left-align + no
       hyphenation reads clean for BOTH prose and command specimens. Systemic
       (shared class -> every the-prompts detail page). */
    line-height:1.72; color:var(--ink); text-align:left; hyphens:none;
    overflow-wrap:anywhere;   /* command-shaped specimens (e.g. `S>Super Frame(…)`)
       have no breakable whitespace and overflowed a phone viewport; let the long
       token break. Prose specimens are unaffected (they break on spaces). */
  }
  .prompt-detail .specimen-attrib{
    max-width:min(56ch,100%); margin:0 0 var(--gap-section) 0;
    text-align:right; font-family:var(--font-body); color:var(--muted); font-size:var(--size-body);
  }

  /* ── THE REVEAL — web-native, placed after the specimen (the payoff) ──────
     Quieter than v1: no filled grid; a hairline-framed strip. */
  .prompt-detail .reveal{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    border-top:var(--stroke-hairline) solid var(--hairline);
    border-bottom:var(--stroke-hairline) solid var(--hairline);
    margin:var(--gap-section) 0; padding:var(--gap) 0;
  }
  .prompt-detail .reveal .side{ padding:0 var(--gap); box-sizing:border-box; min-width:0; }
  /* box-sizing: the global *{border-box} reset (shell.css) does NOT reach this
     page — loop-analytics loads only prompts-detail.css — so .side's side padding
     was ADDED to its grid-column width and pushed the row 3px past a 360px phone
     (The Clearance I3; NOTE-02.0044-1, S02.0126). Same fix .prompt-detail already
     carries above; applied here to the reveal columns + seam. */
  .prompt-detail .reveal .seam{ box-sizing:border-box; }
  .prompt-detail .reveal .side .tag{
    font-family:var(--font-mono); font-size:var(--size-label); letter-spacing:var(--track-label);
    text-transform:uppercase; color:var(--faint); display:block; margin-bottom:var(--gap-tight);
  }
  .prompt-detail .reveal .side--made .made{ font-family:var(--font-display); font-size:var(--size-headline);
    line-height:var(--lh-headline); }
  .prompt-detail .reveal .chips{ display:flex; gap:var(--gap-tight); flex-wrap:wrap; margin-top:var(--gap-tight); }
  .prompt-detail .reveal .chip{
    font-family:var(--font-mono); font-size:var(--size-label); letter-spacing:var(--track-label);
    text-transform:uppercase; color:var(--muted); border:var(--stroke-hairline) solid var(--hairline);
    border-radius:var(--radius-badge); padding:1px var(--gap-tight); }
  .prompt-detail .reveal .made-link{ display:inline-block; margin-top:var(--gap-tight);
    font-family:var(--font-mono); font-size:var(--size-code);
    border-bottom:var(--stroke-hairline) solid var(--persimmon); }
  /* aim-note: honest provenance for prompts that name a build TARGET, not a shipped artifact */
  .prompt-detail .reveal .side--made .aim-note{ margin:var(--gap-tight) 0 0 0;
    font-family:var(--font-mono); font-size:var(--size-label); line-height:1.5;
    color:var(--faint); max-width:min(42ch,100%); }
  .prompt-detail .reveal .seam{ display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:0 var(--gap); }
  .prompt-detail .reveal .seam .arrow{ font-family:var(--font-mono); font-size:20px; color:var(--faint); }
  .prompt-detail .reveal .seam .seal{ font-family:var(--font-mono); font-size:10px;
    letter-spacing:var(--track-label); text-transform:uppercase; color:var(--persimmon); font-weight:600; } /* accent #2 */
  @media (max-width:699px){
    /* Match the site's .room/.porch phone gutter: --gap-wide each side ate
       width on narrow screens, so the specimen's 56ch measure overflowed the
       viewport (render: specimen right-edge 554 on a 375px phone). The rest of
       the site drops to --gap at this breakpoint (shell.css @699 .room/.porch);
       the prompt-detail column never got that treatment. Now it matches. */
    .prompt-detail{ padding-left:var(--gap); padding-right:var(--gap); }
    .prompt-detail .reveal{ grid-template-columns:1fr; gap:var(--gap); }
    .prompt-detail .reveal .seam{ flex-direction:row; }
  }

  /* ── Element sections — real short essays; extensible; source order ─────── */
  .prompt-detail .element{ margin-bottom:var(--gap-wide); }
  .prompt-detail .element .body{ max-width:min(64ch,100%); }
  .prompt-detail .element .body p + p{ text-indent:1.4em; margin-top:0; } /* book indent-led paragraphs */

  /* The Anatomy device: bolded prompt fragments, then gloss (the close reading) */
  .prompt-detail .frag{ font-weight:600; font-style:italic; color:var(--ink); }

  /* Pop-Out — board-member aside */
  .prompt-detail .popout{ border-left:var(--stroke-hairline) solid var(--hairline); padding-left:var(--gap);
    margin:var(--gap) 0; color:var(--muted); font-style:italic; max-width:min(60ch,100%); }
  .prompt-detail .popout .who{ font-style:normal; font-family:var(--font-mono); font-size:var(--size-label);
    letter-spacing:var(--track-label); text-transform:uppercase; color:var(--faint); display:block; margin-bottom:2px; }

  /* Computational Profile — mono, dotted leaders */
  .prompt-detail .profile{ font-family:var(--font-mono); font-size:var(--size-code); line-height:var(--lh-code);
    background:var(--ground); border:var(--stroke-hairline) solid var(--hairline);
    border-radius:var(--radius-artifact); padding:var(--gap); margin:var(--gap) 0; max-width:min(64ch,100%); }
  .prompt-detail .profile .metric{ display:flex; align-items:baseline; gap:var(--gap-tight); }
  .prompt-detail .profile .metric .k{ color:var(--muted); white-space:nowrap; }
  .prompt-detail .profile .metric .leader{ flex:1; border-bottom:1px dotted var(--hairline); transform:translateY(-3px); }
  .prompt-detail .profile .metric .v{ color:var(--ink); overflow-wrap:anywhere; min-width:0; } /* was white-space:nowrap — long values overflowed a phone; match the site's .app-page profile-value handling (shell.css:1287) */

  /* Terms for the Outside Reader */
  .prompt-detail .terms{ margin:var(--gap-wide) 0; max-width:min(64ch,100%); }
  .prompt-detail .terms-lead{ max-width:min(64ch,100%); margin:0 0 var(--gap) 0;
    font-family:var(--font-body); font-size:var(--size-body); color:var(--muted); line-height:1.6; }
  .prompt-detail .terms dt{ font-family:var(--font-mono); font-size:var(--size-label);
    letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink); margin-top:var(--gap); }
  .prompt-detail .terms dd{ margin:2px 0 0 0; color:var(--muted); }

  /* Entry Closer — the diamond, ported from the book's footer signature */
  .prompt-detail .closer{ text-align:center; margin-top:var(--gap-section); color:var(--faint);
    font-family:var(--font-mono); font-size:var(--size-label); letter-spacing:var(--track-label);
    text-transform:uppercase; }
  .prompt-detail .closer .diamond{ color:var(--hairline); font-size:14px; letter-spacing:6px; margin-bottom:var(--gap-tight); }
  .prompt-detail .backlinks{ display:flex; gap:var(--gap-wide); justify-content:center; margin-top:var(--gap); }
  .prompt-detail .backlinks a{ color:var(--muted); border-bottom:var(--stroke-hairline) solid var(--hairline); }
  .prompt-detail .backlinks a:hover,.prompt-detail .backlinks a:focus{ color:var(--ink); }

  /* ── Produced-artifacts list (what a prompt actually created) ─────────────
     Reuses the .terms-lead + element-head grammar; links carry the same
     visible affordance as .backlinks a (muted + hairline) so they do not
     vanish under a decoration-less base, one link per produced page. */
  .prompt-detail .produced{ margin-top:var(--gap-wide); }
  .prompt-detail .produced-list{ display:flex; flex-direction:column; gap:var(--gap-tight); margin-top:var(--gap); }
  .prompt-detail .produced-list a{ color:var(--muted);
    border-bottom:var(--stroke-hairline) solid var(--hairline); padding-bottom:2px; }
  .prompt-detail .produced-list a:hover,.prompt-detail .produced-list a:focus{ color:var(--ink); }
  .prompt-detail .produced-list .produced-sub{ display:block; color:var(--muted);
    font-size:var(--size-label); font-style:italic; border:0; margin-top:2px; }

  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }
  

  /* ── Content plate (hero photo of the thing the prompt is about) ─────────
     Mirrors the loop-2-0 plate: linked full-res, natural aspect (not a fixed
     gallery cell), captioned. Lives in <main class="prompt-detail">. */
  .prompt-detail figure.plate{ margin:var(--gap) 0 var(--gap-wide); }
  .prompt-detail figure.plate a{ display:block; overflow:hidden;
    border:var(--stroke-hairline) solid var(--hairline);
    border-radius:var(--radius-artifact); background:var(--ground);
    transition:border-color var(--motion-nav) var(--ease); }
  .prompt-detail figure.plate a:hover,
  .prompt-detail figure.plate a:focus-visible{ border-color:var(--faint); }
  .prompt-detail figure.plate img{ display:block; width:100%; height:auto; }
  .prompt-detail figure.plate figcaption{ font-family:var(--font-body);
    font-size:14.5px; line-height:1.5; color:var(--muted);
    margin:var(--gap-tight) 0 0; }
  .prompt-detail figure.plate .hires{ font-family:var(--font-mono);
    font-size:11px; letter-spacing:.04em; color:var(--faint); margin-left:6px; }

  /* ── THE DUET — two excerpts on one page (a sub-style of the single prompt) ──
     One .specimen block per excerpt, each labelled with the board member's name.
     Reuses .specimen / .element-head; adds only the per-excerpt sub-head + lead. */
  .prompt-detail .duet-lead{ font-style:italic; color:var(--ink-soft, var(--ink));
    margin:var(--gap-tight) 0 var(--gap) 0; max-width:min(60ch,100%); }
  .prompt-detail .element-head.duet-sub{ font-size:var(--size-label);
    letter-spacing:.04em; text-transform:none; opacity:.85;
    margin-top:var(--gap); }

  /* ── THE WORD SQUARE — a 4×4 grid that reads the same across and down ──────────
     Used by the-word-square: the overlay declares the across-words, the builder
     derives the down-words. Sits in the Arrival section, OUTSIDE the specimen
     block, so it never touches the word-count oracle or verify-specimen-fidelity.
     Monospace (Spline Sans Mono, already loaded) so the square reads true. */
  .prompt-detail figure.word-square{ margin:var(--gap) 0 0; }
  .prompt-detail .ws-grid{
    display:grid; grid-template-columns:repeat(4, 1fr);
    width:max-content; max-width:100%;
    gap:var(--stroke-hairline);
    background:var(--hairline);
    border:var(--stroke-hairline) solid var(--hairline);
    border-radius:var(--radius-artifact);
    overflow:hidden; }
  .prompt-detail .ws-cell{
    display:flex; align-items:center; justify-content:center;
    aspect-ratio:1 / 1; min-width:clamp(38px, 11vw, 58px);
    background:var(--ground); color:var(--ink);
    font-family:var(--font-mono); font-weight:600; line-height:1;
    font-size:clamp(20px, 5.5vw, 32px); letter-spacing:.03em; }
  .prompt-detail .ws-caption{
    font-family:var(--font-body); font-size:14.5px; line-height:1.5;
    color:var(--muted); margin:var(--gap-tight) 0 0; max-width:min(60ch,100%); }
  .prompt-detail .ws-caption b{ color:var(--ink); font-weight:600; }