/* ============================================================================
   Tacit: page styles. Split stage grammar.
   Two grounds, one hue for the accent at two lightnesses. The engine's tokens
   are overridden per half, and `color` is restated wherever `--sc-ink` is,
   because `color` inherits as a computed value.
   ========================================================================== */

:root {
  /* dark ground: any agent */
  --any-canvas:   #0e1013;
  --any-surface:  #15181d;
  --any-ink:      #e8e9ec;
  --any-soft:     #9ea3ad;
  --any-accent:   #3cc4cc;   /* petrol, light: 9.0:1 on the dark canvas */
  /* paper ground: your agent */
  --you-canvas:   #f1ece2;
  --you-surface:  #f8f4ec;
  --you-ink:      #171410;
  --you-soft:     #5c554a;
  --you-accent:   #0b6670;   /* petrol, deep: 5.7:1 on the paper canvas */

  --sc-canvas:       var(--any-canvas);
  --sc-surface:      var(--any-surface);
  --sc-ink:          var(--any-ink);
  --sc-ink-soft:     var(--any-soft);
  --sc-accent:       var(--any-accent);
  --sc-accent-ink:   var(--any-canvas);

  --sc-font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  /* Fallbacks chosen for width: Cascadia Mono (Chrome's ui-monospace on
     Windows) is far wider than Geist Mono and overflows the phone halves. */
  --sc-font-mono:    "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --top: clamp(4rem, 8vh, 6rem);
  --measure-half: min(36vw, 34rem);

  --collapse: 0;
  --prog: 0;
}

html { scroll-padding-top: 0; }
body { overflow-x: clip; }

/* ------------------------------------------------------------ grounds -- */
.ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--you-canvas); }
.ground__any {
  position: absolute; inset: 0 50% 0 0;
  background: var(--any-canvas);
  will-change: transform;
  transform: translate3d(calc(-100% * var(--collapse)), 0, 0);
}

/* ------------------------------------------------------------ divider -- */
.divider {
  position: fixed; inset: 0 auto 0 50%; width: 0;
  z-index: var(--sc-z-chrome);
  pointer-events: none;
  will-change: transform;
  transform: translate3d(calc(-50vw * var(--collapse)), 0, 0);
}
.divider > * { pointer-events: auto; }
.divider__line {
  position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px;
  background: color-mix(in oklab, var(--you-ink) 28%, transparent);
  pointer-events: none;
}
.divider__prog {
  position: absolute; inset: 0; background: var(--you-accent);
  transform-origin: 50% 0; transform: scaleY(var(--prog));
}
/* The tt tile sits on the seam, a miniature of the page it is on. */
.divider__mark {
  position: absolute; top: var(--sc-5); left: 50%; translate: -50% 0;
  display: block; line-height: 0; border-radius: 9px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.28));
  transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
/* max-width: none, or scrollcraft.css's img{max-width:100%} collapses the
   image to the zero-width divider. */
.divider__mark img { display: block; width: 34px; height: 34px; max-width: none; }
.divider__mark:active { transform: translateY(1px); }
.divider__label {
  position: absolute; top: calc(var(--sc-5) + 0.7rem);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  line-height: 1; white-space: nowrap;
  padding: 0.35rem 0.5rem; margin-top: -0.35rem; border-radius: var(--sc-r-sm);
  transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
/* Outer corners, so content never scrolls under them near the divider. */
.divider__label--any   { left: calc(-50vw + var(--pad) - 0.5rem); color: var(--any-soft); background: var(--any-canvas); }
.divider__label--yours { right: calc(-50vw + var(--pad) - 0.5rem); color: var(--you-soft); background: var(--you-canvas); }

.rail {
  list-style: none; margin: 0; padding: 0;
  position: absolute; bottom: var(--sc-6); right: 0.9rem;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem;
  transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
.rail__link {
  position: relative; display: block;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--any-soft); text-decoration: none; line-height: 1;
  padding: 0.2rem 0.4rem; border-radius: var(--sc-r-sm); background: var(--any-canvas);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.rail__link::after {
  content: ""; position: absolute; top: 50%; right: -1.15rem;
  width: 5px; height: 5px; border-radius: 50%; translate: 0 -50%;
  background: var(--any-soft); transition: background var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.rail__link:hover { color: var(--any-ink); }
.rail__link[aria-current="true"] { color: var(--any-accent); }
.rail__link[aria-current="true"]::after { background: var(--any-accent); transform: scale(1.5); }
.rail__link:active { transform: translateY(1px); }

.is-collapsing .divider__mark,
.is-collapsing .divider__label,
.is-collapsing .rail { opacity: calc(1 - var(--collapse) * 1.6); }

/* ---------------------------------------------------------------- acts -- */
.act { position: relative; z-index: 1; }
/* The row is the stage, never the content: a tall column must clip, not grow
   the row past the viewport and push the other column's centre off screen. */
.stage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); }

.half { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.stage > .half { overflow: clip; }
.half--any {
  --sc-canvas: var(--any-canvas); --sc-surface: var(--any-surface);
  --sc-ink: var(--any-ink); --sc-ink-soft: var(--any-soft);
  --sc-accent: var(--any-accent); --sc-accent-ink: var(--any-canvas);
  --sc-shadow-color: 220 40% 2%;
  color: var(--sc-ink);
  background: var(--any-canvas);
}
.half--yours {
  background: var(--you-canvas);
  --sc-canvas: var(--you-canvas); --sc-surface: var(--you-surface);
  --sc-ink: var(--you-ink); --sc-ink-soft: var(--you-soft);
  --sc-accent: var(--you-accent); --sc-accent-ink: var(--you-canvas);
  --sc-shadow-color: 30 30% 12%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.08), 0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.12);
  --sc-edge: inset 0 1px 0 rgba(255,255,255,0.7);
  color: var(--sc-ink);
}
.half__inner {
  width: 100%; max-width: var(--measure-half);
  padding: var(--top) var(--pad) var(--sc-7);
  display: flex; flex-direction: column; gap: var(--sc-5);
  margin-block: auto;
}
/* The rail sits to the left of the divider, so only the dark column has to
   keep clear of it. The paper column can run wider. */
.half--yours .half__inner { margin-inline-start: 0; max-width: min(42vw, 40rem); }
.half--any .half__inner { margin-inline-start: 0; }
.stage .half__inner { height: 100%; justify-content: safe center; margin-block: 0; }

/* flow acts: no stage, two columns in document flow */
.act--flow { display: grid; grid-template-columns: 1fr 1fr; }
.act--flow .half__inner { padding-block: var(--sc-8) var(--sc-9); }
.act--cost .half__inner { padding-top: var(--sc-6); }

/* ------------------------------------------------------------- type -- */
.hl {
  font-family: var(--sc-font-display);
  font-variation-settings: "opsz" 96;
  font-weight: 500; line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight); text-wrap: balance; margin: 0;
  /* Sized for a half-width column, not a full-bleed hero. */
  font-size: clamp(2.1rem, 1.1rem + 3.1vw, 4.4rem);
}
.hl--md { font-size: clamp(1.5rem, 0.9rem + 1.9vw, 2.6rem); letter-spacing: var(--sc-track-snug); line-height: var(--sc-leading-tight); }
.hl--lg { font-size: clamp(2.4rem, 1.2rem + 3.8vw, 5rem); }
.half--any .hl { font-weight: 450; letter-spacing: -0.03em; }
.sc-body { max-width: 52ch; }
.plain { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sc-3); color: var(--sc-ink); max-width: 46ch; text-wrap: pretty; }
.plain li { padding-left: 1.1rem; position: relative; }
.plain li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.45rem; height: 1px; background: var(--sc-ink-soft); }
.define { margin: 0; padding: var(--sc-4) 0; border-top: 1px solid var(--sc-hairline-strong); border-bottom: 1px solid var(--sc-hairline-strong); max-width: 46ch; }
.define dt { font-family: var(--sc-font-display); font-variation-settings: "opsz" 48; font-size: var(--sc-t-xl); font-weight: 600; letter-spacing: var(--sc-track-snug); }
.define dd { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); text-wrap: pretty; }
.you {
  font-family: var(--sc-font-display); font-variation-settings: "opsz" 96;
  font-size: var(--sc-t-2xl); font-weight: 500; letter-spacing: var(--sc-track-snug);
  line-height: var(--sc-leading-tight); margin: 0; color: var(--sc-ink);
}

/* the trace: one small mono line under each artefact */
.trace {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: 0.02em; color: var(--sc-ink-soft); margin: 0;
}
.trace::before { content: "› "; color: var(--sc-accent); }

/* ---------------------------------------------------------------- docs -- */
.doc {
  font-family: var(--sc-font-mono);
  font-size: clamp(0.74rem, 0.68rem + 0.28vw, 0.88rem);
  line-height: 1.55;
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md);
  padding: var(--sc-5);
  box-shadow: var(--sc-e2), var(--sc-edge);
  display: grid; gap: var(--sc-3);
  min-width: 0; overflow-wrap: break-word;
}
.doc__meta { font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); margin: 0; }
.doc__meta + .doc__msg { margin-top: calc(var(--sc-3) * -1 + 0.25rem); }
.doc__msg { margin: 0; color: var(--sc-ink); text-wrap: pretty; }
.doc__msg + .doc__meta { margin-top: var(--sc-2); }
.doc__list { margin: 0; padding-left: 1.2rem; color: var(--sc-ink); }
.doc--prompt { opacity: 0.92; }

q.fact { quotes: "\201C" "\201D"; }
mark[data-fact] {
  background: transparent; color: var(--sc-accent); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in oklab, var(--sc-accent) 55%, transparent);
}
.half--yours mark[data-fact] {
  background: color-mix(in oklab, var(--sc-accent) 13%, transparent);
  color: var(--sc-ink); padding: 0 0.15em; border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* audit rows */
.doc--table { gap: var(--sc-2); }
.rows { list-style: none; margin: 0; padding: 0; counter-reset: row; }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem var(--sc-4);
  padding: var(--sc-3) 0; border-top: 1px solid var(--sc-hairline);
  will-change: clip-path;
}
.row__task { color: var(--sc-ink); }
.row__verdict { font-weight: 500; color: var(--sc-ink); text-align: right; }
.row__why { grid-column: 1 / -1; color: var(--sc-ink-soft); }

/* the skill file */
.doc--skill { padding-bottom: var(--sc-5); }
.skill {
  margin: 0; font: inherit; white-space: normal; overflow-wrap: break-word;
  color: var(--sc-ink); min-height: 1.55em;
}
.skill__line {
  display: block; white-space: pre-wrap;
  --t0: calc(0.12 + var(--i) * 0.035);
  --v: clamp(0, calc((var(--sc-p, 0) - var(--t0)) * 28), 1);
  opacity: var(--v);
  clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0);
  will-change: clip-path, opacity;
}
.skill__line:empty::before { content: " "; }
.skill__caret {
  display: inline-block; width: 0.55em; height: 1.1em; vertical-align: -0.2em;
  background: var(--sc-accent); margin-left: 0.1em;
  animation: caret 1s steps(2, start) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* queue */
.queue { list-style: none; margin: 0; padding: 0; display: grid; }
.q {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sc-2) var(--sc-4);
  padding: var(--sc-2) 0; border-top: 1px solid var(--sc-hairline);
}
.q:first-child { border-top: 0; padding-top: 0; }
.q__item { color: var(--sc-ink); }
.q__state { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; align-self: center; }
.q--held .q__state { color: var(--sc-accent); font-weight: 500; }
.q__why { grid-column: 1 / -1; color: var(--sc-ink-soft); }

/* key-value */
.kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem var(--sc-5); }
.kv dt { color: var(--sc-ink-soft); }
.kv dd { margin: 0; color: var(--sc-ink); }

/* --------------------------------------------------------------- teach -- */
.teach { display: grid; gap: var(--sc-2); }
.teach__label { font-family: var(--sc-font-text); font-weight: 500; color: var(--sc-ink); }
.teach__input {
  width: 100%; font-family: var(--sc-font-mono); font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
  padding: 0.8rem 0.95rem; border-radius: var(--sc-r-sm);
  background: var(--sc-surface); color: var(--sc-ink);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 32%, transparent);
  box-shadow: var(--sc-e1), var(--sc-edge);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
.teach__input:hover { border-color: color-mix(in oklab, var(--sc-ink) 50%, transparent); }
.teach__input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-color: var(--sc-accent); }
.teach__input::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
.teach__hint { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-wrap: pretty; }

/* ----------------------------------------------------------------- cta -- */
.link {
  justify-self: start; align-self: flex-start;
  font-weight: 500; color: var(--sc-ink);
  text-decoration-thickness: 1.5px; text-underline-offset: 0.25em;
  text-decoration-color: var(--sc-accent);
  transition: text-decoration-color var(--sc-d-fast) var(--sc-ease-out);
}
.link:hover { text-decoration-color: var(--sc-ink); }
.link:active { transform: translateY(1px); }
.cta {
  display: inline-block; justify-self: start;
  font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-base);
  color: var(--you-canvas); background: var(--you-ink);
  padding: 0.95rem 1.5rem; border-radius: var(--sc-r-sm); text-decoration: none;
  white-space: nowrap; line-height: 1;
  box-shadow: var(--sc-e2);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out);
}
.cta:hover { background: #2a251d; }
.cta:active { transform: translateY(1px) scale(0.98); }
.cta:focus-visible { outline: 2px solid var(--you-accent); outline-offset: 3px; }

/* --------------------------------------------------------------- close -- */
.stage--close {
  display: block; background: var(--you-canvas);
  --sc-canvas: var(--you-canvas); --sc-surface: var(--you-surface);
  --sc-ink: var(--you-ink); --sc-ink-soft: var(--you-soft);
  --sc-accent: var(--you-accent); --sc-accent-ink: var(--you-canvas);
  color: var(--sc-ink);
}
.close__any {
  position: absolute; inset: 0 50% 0 0; background: var(--any-canvas);
  color: var(--any-soft); display: flex; align-items: flex-end;
  padding: var(--pad); will-change: transform;
  transform: translate3d(calc(-100% * var(--collapse)), 0, 0);
  z-index: 2;
}
.close__any-line { margin: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; }
.close__yours {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-rows: 1fr auto;
}
.close__inner {
  width: 50%; margin-left: 50%;
  padding: var(--top) var(--pad) var(--sc-7);
  display: grid; gap: var(--sc-5); align-content: center; justify-items: start;
  will-change: transform;
  transform: translate3d(calc(-50% * var(--collapse)), 0, 0);
}
.close__inner .hl--lg { max-width: 14ch; }
.close__inner .close__p { max-width: 44ch; }
.foot {
  display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); align-items: baseline;
  padding: var(--sc-5) var(--pad);
  border-top: 1px solid var(--sc-hairline-strong);
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
  will-change: transform;
  transform: translate3d(calc(50% * (1 - var(--collapse))), 0, 0);
}
.foot__mark { display: block; height: 18px; width: auto; align-self: center; }
/* The plain one-line definition of the studio: what an answer engine quotes. */
.foot__about { flex-basis: 100%; order: -1; margin: 0 0 var(--sc-2); max-width: 72ch; color: var(--sc-ink); font-size: var(--sc-t-sm); }

/* ------------------------------------------------------ short viewports --
   A laptop at 768px tall has the same problem a phone has: the stage is the
   viewport, and a column that overflows it loses its ending. Drop the optional
   lines and tighten the rhythm, the same cut the phone takes. */
@media (max-height: 940px) and (min-width: 861px) {
  :root { --top: 3.5rem; }
  .m-hide { display: none !important; }
  .stage .half__inner { gap: var(--sc-4); padding-bottom: var(--sc-5); }
  .stage .doc { padding: var(--sc-4); }
  .skill__line { --t0: calc(0.12 + var(--i) * 0.04); }
}

/* ----------------------------------------------------------- mobile -- */
.m-hide { }
@media (max-width: 860px) {
  :root { --top: 3.4rem; --pad: 1.1rem; --measure-half: none; }
  .m-hide, .p-hide { display: none !important; }

  .ground__any { inset: 0 0 50% 0; transform: translate3d(0, calc(-100% * var(--collapse)), 0); }

  .divider { inset: 50% 0 auto 0; height: 0; width: auto; transform: translate3d(0, calc(-50svh * var(--collapse)), 0); }
  .divider__line { top: -0.5px; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
  .divider__prog { transform-origin: 0 50%; transform: scaleX(var(--prog)); }
  .divider__mark { top: 50%; left: var(--pad); translate: 0 -50%; }
  .divider__mark img { width: 28px; height: 28px; }
  .divider__label { top: auto; }
  .divider__label--any   { left: auto; right: var(--pad); bottom: 1.1rem; }
  .divider__label--yours { left: auto; right: var(--pad); top: 1.1rem; }
  .rail { bottom: auto; top: 50%; right: auto; left: 50%; translate: -50% -50%; flex-direction: row; gap: 0.4rem; align-items: center; }
  .rail__link { color: var(--you-canvas); background: var(--you-ink); padding: 0.3rem 0.45rem; border-radius: var(--sc-r-sm); font-size: 0.6rem; }
  .rail__link::after { display: none; }
  .rail__link[aria-current="true"] { color: var(--any-accent); }

  .stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  /* Both halves run the full phone width. The desktop measure must not win. */
  .half__inner, .half--yours .half__inner, .half--any .half__inner { max-width: none; }
  .half__inner { padding: 1.25rem var(--pad) 1rem; gap: 0.6rem; }
  .stage .half__inner { justify-content: flex-start; }
  /* The top half carries its label at its foot, the bottom half at its head. */
  .stage .half--any .half__inner { padding-bottom: 2rem; }
  .stage .half--yours .half__inner { padding-top: 2.3rem; }
  .act--flow { grid-template-columns: 1fr; }
  .act--flow .half__inner { padding-block: var(--sc-7); gap: var(--sc-3); }

  .hl { font-size: 1.55rem; }
  .hl--md { font-size: 1.3rem; }
  .hl--lg { font-size: 1.9rem; }
  .doc { padding: 0.75rem 0.85rem; font-size: 0.7rem; line-height: 1.45; gap: 0.4rem; }
  .doc__meta + .doc__msg { margin-top: -0.15rem; }
  .trace { font-size: 0.66rem; }
  .teach { gap: 0.35rem; }
  .teach__label { font-size: var(--sc-t-sm); }
  .row { grid-template-columns: 1fr auto; padding: 0.35rem 0; }
  .row__why { grid-column: 1 / -1; }
  .skill__line { --t0: calc(0.12 + var(--i) * 0.04); }
  /* The skill file is the tightest fit on the page: at 0.66rem a 52-character
     rule sits on one line and the half keeps ~50px of air under the "you" line. */
  .doc--skill { font-size: 0.66rem; line-height: 1.4; }
  .teach__input { padding: 0.6rem 0.75rem; font-size: 0.8rem; }
  .teach__hint { font-size: var(--sc-t-xs); }
  .you { font-size: 1.3rem; }

  .close__any { inset: 0 0 50% 0; transform: translate3d(0, calc(-100% * var(--collapse)), 0); align-items: flex-start; }
  .close__yours { grid-template-rows: 50svh minmax(0, 1fr) auto; }
  /* Anchored to the top of its row: if the copy ever runs long, it overflows
     downward into the footer's clip, never upward under the dark panel. */
  .close__inner { width: 100%; margin-left: 0; grid-row: 2; align-content: start; padding-top: var(--sc-6); transform: translate3d(0, calc(-25svh * var(--collapse)), 0); }
  .close__inner .hl--lg { font-size: 1.7rem; }
  /* The close's bottom half is only ~50svh: the footer must stay short or it
     rides up over the closing copy. The links are in the Menu on a phone
     (and remain in the HTML for crawlers); the two sentences stay, small. */
  .foot { grid-row: 3; transform: none; gap: var(--sc-2) var(--sc-4); padding: var(--sc-3) var(--pad) var(--sc-4); }
  .foot .foot__nav { display: none; }
  .foot__about, .foot__note { font-size: 0.72rem; line-height: 1.45; }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .skill__line { opacity: 1; clip-path: none; }
  .skill__caret { animation: none; }
  /* No translation: the dark half and the divider fade instead of sliding,
     and the close copy simply stays in its column on a page that is now paper. */
  .ground__any, .divider, .close__any, .close__inner, .foot { transform: none !important; }
  .ground__any, .close__any { opacity: calc(1 - var(--collapse)); }
  .is-collapsing .divider { opacity: calc(1 - var(--collapse)); }
}