/* ------------------------------------------------------------------
   katachi-process — "terminal" theme
   The original case-study page's design (static/agentic/claudito-case-study.html)
   applied to the site's process page: kitty.conf palette, Monaco/Menlo, 1600px card grid,
   4-up version cards with prompt → preview → filename, and the description beneath each card.
   Everything is scoped to body.terminal; remove that class to get the site's
   paper design back. Loaded after site.css.
   ------------------------------------------------------------------ */

body.terminal {
  /* kitty.conf palette, as declared in the original page */
  --t-bg: #13161a;
  --t-bg-light: #160301;
  --t-bg-lighter: #1f0906;
  --t-fg: #e9ae17;
  --t-red-bright: #dc7974;
  --t-blue-bright: #a6aaf1;
  --t-white: #c7c7c7;
  --t-white-bright: #ffffff;
  --t-gray: #676767;
  --t-black: #14191e;
  --t-rule: #3a3a3a;
  --t-shadow: 0 4px 12px rgba(0, 0, 0, .5);

  --max: 1648px;      /* 1600px content + 24px either side, as the original */
  --gutter: 24px;

  background: var(--t-bg);
  color: var(--t-fg);
  font-family: Monaco, "SF Mono", Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
}
body.terminal code { font-family: inherit; }

/* ---------- colour roles ----------
   Each colour means exactly one thing on this page, so a reader can tell at a glance what will respond to
   hover or click:
     indigo (--t-blue-bright)  interactive, and only interactive: links, version-reference pills, the
                               arrived-at card. Nothing static is indigo.
     amber  (--t-fg)           text that came out of the terminal, verbatim: prompts, ASCII sketches, the
                               BibTeX block, the state name in the eyebrow. Never a link, never emphasis.
     white  (--t-white)        titles, labels and prose; emphasis is brighter white and heavier, not a colour.
     gray   (--t-gray)         captions, metadata, numbering (section and finding counters). */
body.terminal p a, body.terminal dd a { color: var(--t-blue-bright); text-decoration: none; }
body.terminal p a:hover, body.terminal dd a:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* ---------- site chrome, inverted ---------- */
body.terminal .top .name { color: var(--t-white); }
body.terminal .top nav { color: var(--t-gray); }
body.terminal .top nav a[aria-current], body.terminal .top nav a:hover { color: var(--t-white); }
body.terminal footer.foot { border-top-color: var(--t-gray); color: var(--t-gray); }
body.terminal footer.foot a:hover { color: var(--t-white); }

/* ---------- publication voice ----------
   Two voices on the page: everything that came from the terminal (prompts, filenames, labels, numbers, code)
   stays in the monospace; the long-form prose a reader actually reads (abstract, observations, reflections,
   colophon) is set in the site's text face at a reading measure. Set --t-prose-font to `inherit` to put the
   prose back in Monaco. */
body.terminal { --t-prose-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; }
body.terminal .abstract p:not(.lbl), body.terminal .notes p:not(.hint):not(.preview-label), body.terminal .findings li, body.terminal .colophon-grid p {
  font-family: var(--t-prose-font); font-size: 16px; line-height: 1.65;
}
body.terminal .abstract, body.terminal .notes > p, body.terminal .findings, body.terminal .colophon p { max-width: 72ch; }

/* ---------- title block ---------- */
body.terminal .work-head { max-width: none; margin: 36px 0 40px; }
body.terminal .eyebrow { color: var(--t-gray); font-size: 12px; margin: 0 0 20px; }
body.terminal .eyebrow a { color: var(--t-blue-bright); }
body.terminal .eyebrow code { color: var(--t-fg); }
body.terminal .work-head h1 {
  color: var(--t-white); font-size: 32px; font-weight: normal; line-height: 1.25; max-width: none;
  font-variant: small-caps; letter-spacing: .15em; margin: 0 0 28px;
}
body.terminal .byline { padding-top: 20px; border-top: 1px solid var(--t-gray); font-size: 13px; gap: 8px 48px; }
body.terminal .byline dt { color: var(--t-gray); font-size: 11px; letter-spacing: .08em; }
body.terminal .byline dd { color: var(--t-white); }
body.terminal .authors { color: var(--t-gray); font-size: 14px; margin: 0 0 24px; }
body.terminal .wall { color: var(--t-gray); font-size: 13px; margin: 0; padding-bottom: 24px; border-bottom: 1px solid var(--t-gray); }
body.terminal .wall dt { color: var(--t-gray); opacity: .75; }
body.terminal .wall dd { color: var(--t-white); }

/* ---------- figure numbers: a white label inside the gray caption ---------- */
body.terminal .fig { color: var(--t-white); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
body.terminal figcaption, body.terminal .film-note { color: var(--t-gray); font-size: 13px; line-height: 1.6; }
body.terminal figcaption a { color: var(--t-blue-bright); text-decoration: none; }

/* ---------- showcase: sketch beside final, no boxes ---------- */
body.terminal .showcase { gap: 60px; max-width: 760px; }
body.terminal .showcase .cell { background: transparent; box-shadow: none; }
body.terminal .showcase .cell.sketch pre { color: var(--t-fg); }
body.terminal .showcase-fig figcaption { max-width: none; margin-top: 16px; }

/* ---------- abstract, contents ---------- */
body.terminal .intro .statement { max-width: none; }
body.terminal .abstract .lbl { color: var(--t-gray); font-size: 11px; letter-spacing: .15em; margin: 0 0 12px; }
body.terminal .abstract p { color: var(--t-white); margin: 0; }
body.terminal .abstract p strong { font-weight: 600; color: var(--t-white-bright); }
body.terminal .contents { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--t-rule); font-size: 13px; color: var(--t-gray); gap: 6px 28px; }
body.terminal .contents .lbl { color: var(--t-gray); letter-spacing: .08em; text-transform: uppercase; font-size: 11px; line-height: 1.8; }
body.terminal .contents a { color: var(--t-blue-bright); }
body.terminal .contents a:hover { color: var(--t-white); }

/* ---------- section + subsection titles ---------- */
body.terminal h2.quiet {
  color: var(--t-white); font-size: 20px; font-weight: normal; letter-spacing: 0; text-transform: none;
  display: flex; align-items: center; gap: 20px; margin: 64px 0 24px;
}
body.terminal h2.quiet::before { color: var(--t-gray); margin: 0 -4px 0 0; font-family: inherit; }
body.terminal h2.quiet::after { content: ""; flex: 1; height: 1px; background: var(--t-gray); }
body.terminal .sub { color: var(--t-white); font-size: 18px; font-weight: normal; margin: 32px 0 16px; }
body.terminal h2.quiet + .sub { margin-top: 0; }

/* ---------- ASCII exploration cards (full-width in the original, sized to content) ----------
   The card holds the terminal artefacts (title, prompt, blocks); the figure caption sits beneath it like every
   other figure on the page. The caption is kept from widening the fit-content figure: min-content width so it
   contributes nothing to the intrinsic size, min-width 100% so it then stretches to the card. */
body.terminal .explore-fig { width: fit-content; max-width: 100%; margin: 0 0 28px; }
body.terminal .explore-fig figcaption { width: min-content; min-width: 100%; margin-top: 12px; }
body.terminal .explore {
  display: flex; flex-direction: column;
  margin: 0; overflow: hidden;
  background: var(--t-bg-light); border: 1px solid var(--t-bg-lighter); border-radius: 12px; box-shadow: var(--t-shadow);
}
body.terminal .explore h3 { margin: 0; padding: 10px 14px; font-size: 16px; font-weight: normal; color: var(--t-white); }
body.terminal .q::before { content: "› "; color: var(--t-red-bright); font-weight: bold; }
body.terminal .explore .q {
  margin: 0 14px; padding: 10px 0; font-size: 13px; line-height: 1.5; color: var(--t-fg);
  border-top: 1px solid var(--t-rule); border-bottom: 1px solid var(--t-rule);
}
body.terminal .explore .blocks { background: var(--t-black); box-shadow: none; margin: 10px 14px; padding: 10px 14px 40px; gap: 40px; }
body.terminal .explore .blk .lbl { color: var(--t-gray); font-size: 11px; margin: 0 0 4px; font-family: inherit; }
body.terminal .explore .blk .lbl .pick { color: inherit; }
body.terminal pre.ascii { color: var(--t-fg); }

/* ---------- SVG implementation: 4-up version cards ----------
   Each version is a five-row grid: title, prompt, preview and filename make up the card, and the
   description sits beneath it, outside the card, at its natural height (no scrolling). The card itself
   is the figure's ::before, spanning the first four rows behind them, so the HTML (cell + figcaption with
   .n .d .q .f, the order the paper design reads them in) is untouched. */
body.terminal .film { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: ver; }
body.terminal .film figure {
  counter-increment: ver;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto auto;
  align-content: start;
}
body.terminal .film figure::before {
  content: ""; grid-column: 1; grid-row: 1 / 5;
  background: var(--t-bg-light); border: 1px solid var(--t-bg-lighter); border-radius: 12px; box-shadow: var(--t-shadow);
}
body.terminal .film figcaption { display: contents; }
/* explicit column on every part: with the card already in column 1, an auto-placed item would be pushed into a new column beside it */
body.terminal .film figure > *, body.terminal .film figcaption > * { grid-column: 1; min-width: 0; }
body.terminal .film figcaption .n {
  grid-row: 1; display: block; min-width: 0; margin: 0; padding: 10px 14px;
  font-family: inherit; font-size: 0; line-height: 1.5; color: var(--t-white);
}
body.terminal .film figcaption .n::before { content: "Version " counter(ver); font-size: 16px; }
body.terminal .film figcaption .q {
  grid-row: 2; margin: 0 14px; padding: 10px 0; height: 160px; overflow-y: auto;
  font-size: 13px; line-height: 1.5; color: var(--t-fg);
  border-top: 1px solid var(--t-rule); border-bottom: 1px solid var(--t-rule);
}
body.terminal .film .cell { grid-row: 3; aspect-ratio: auto; height: 180px; margin: 10px 14px; background: var(--t-black); box-shadow: none; }
body.terminal .film figcaption .f {
  grid-row: 4; display: block; margin: 0; padding: 8px 14px; text-align: right;
  font-family: inherit; font-size: 12px; color: var(--t-gray); border-top: 1px solid var(--t-bg-lighter);
}
body.terminal .film figcaption .d { grid-row: 5; display: block; margin: 0; padding: 12px 14px 0; font-size: 13px; line-height: 1.5; color: var(--t-white); }
body.terminal .film figure.key .cell, body.terminal .film figure:target .cell { outline: 0; }
body.terminal .film figure:target::before { border-color: var(--t-blue-bright); box-shadow: 0 0 0 1px var(--t-blue-bright), var(--t-shadow); }
body.terminal .film-note { color: var(--t-gray); font-size: 12px; }

/* ---------- key observations / design evolution / agent reflections ---------- */
body.terminal .notes { max-width: none; color: var(--t-white); font-size: 14px; line-height: 1.7; }
body.terminal .notes p { margin: 0 0 16px; }
body.terminal .notes strong { font-weight: 600; color: var(--t-white-bright); }
body.terminal .notes em { font-style: italic; color: var(--t-white-bright); }

/* background: the session screenshot in a card like the versions, the sentence beside it in the prose voice */
body.terminal .context { gap: 24px 40px; }
body.terminal .context-fig img { background: var(--t-black); box-shadow: var(--t-shadow); border: 1px solid var(--t-bg-lighter); border-radius: 12px; }
body.terminal .context-fig figcaption { margin-top: 12px; }
body.terminal .context p { margin: 0; }

/* findings: numbered 01–05 in gray, version references as indigo pills (the only coloured thing in the list) */
body.terminal .findings li { color: var(--t-white); padding-left: 48px; margin-bottom: 18px; }
body.terminal .findings li::before { color: var(--t-gray); font-family: Monaco, "SF Mono", Menlo, monospace; font-size: 13px; top: .2em; }
body.terminal .ref { font-family: Monaco, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--t-blue-bright); border-color: var(--t-rule); }
body.terminal .ref:hover, body.terminal .ref.is-previewed { color: var(--t-white); border-color: var(--t-blue-bright); }
body.terminal .hint { color: var(--t-gray); font-family: Monaco, "SF Mono", Menlo, monospace; font-size: 12px; }

/* preview panel: the hovered version on the near-black ground, in a card like the versions above */
body.terminal .with-preview { gap: 24px 60px; }
body.terminal .preview { background: var(--t-bg-light); border: 1px solid var(--t-bg-lighter); border-radius: 12px; box-shadow: var(--t-shadow); overflow: hidden; }
body.terminal .preview .cell { margin: 14px; background: var(--t-black); box-shadow: none; }
body.terminal .preview-label { margin: 0; padding: 0 14px 12px; font-size: 13px; color: var(--t-white); }
body.terminal .preview-label .n { font-family: Monaco, "SF Mono", Menlo, monospace; font-size: 14px; color: var(--t-white); margin-bottom: 4px; }

/* timeline: the phases as a list, then ticks on the near-black ground; hover previews the version on the right */
body.terminal .strip-fig { max-width: none; }
body.terminal .strip-hint { margin-top: 28px; }
body.terminal .strip { gap: 3px; margin: 0 0 14px; }
body.terminal .strip a { height: 36px; line-height: 36px; font-family: Monaco, "SF Mono", Menlo, monospace; font-size: 11px; border-radius: 2px; }
body.terminal .strip a:hover, body.terminal .strip a:focus-visible, body.terminal .strip a.is-previewed { filter: brightness(1.15); color: var(--t-bg); }
body.terminal .milestones { font-size: 13px; gap: 6px; }
body.terminal .milestones dt { font-family: inherit; color: var(--t-white); }
body.terminal .milestones dd { color: var(--t-white); }
body.terminal .strip-fig figcaption { margin-top: 20px; }

/* colophon */
body.terminal .colophon-grid { gap: 24px 60px; }
body.terminal .colophon .sub { margin-bottom: 12px; }
body.terminal .colophon p { color: var(--t-white); margin: 0 0 16px; }
/* identifiers named in the prose (keyMap, isPaused…) are emphasis, not terminal output: bold white, like
   the strong leads elsewhere; the em in the citation takes the .notes em rule (bright white italic) */
body.terminal .colophon code { font-weight: 600; color: var(--t-white-bright); }
body.terminal .bib { background: var(--t-black); color: var(--t-fg); font-size: 12px; border-radius: 8px; border: 1px solid var(--t-bg-lighter); }

/* ---------- page evolution cards ---------- */
body.terminal section.work > .statement { color: var(--t-white); }
body.terminal .pages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; font-size: 12px; }
body.terminal .pages li { padding: 0; overflow: hidden; background: var(--t-bg-light); border: 1px solid var(--t-bg-lighter); border-radius: 12px; box-shadow: var(--t-shadow); }
body.terminal .pages a { display: block; color: inherit; text-decoration: none; }
body.terminal .pages .t { padding: 10px 14px; font-size: 14px; font-weight: normal; color: var(--t-blue-bright); border-bottom: 1px solid var(--t-white); }
body.terminal .pages a:hover .t { color: var(--t-white); text-decoration: none; }
body.terminal .pages .d { margin: 0; padding: 10px 14px; line-height: 1.5; color: var(--t-white); }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  body.terminal .film { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body.terminal .film, body.terminal .pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body.terminal .film, body.terminal .pages { grid-template-columns: 1fr; }
  body.terminal .explore-fig { width: auto; }
  body.terminal .explore .blocks { padding-bottom: 32px; }
}