/* ══════════════════════════════════════════════════════════════════════
   La Agencia — the proof desk

   See DESIGN.md. Three rules do most of the work:

   1. VERMILION MEANS A PERSON MUST DECIDE. Nothing decorative is ever
      vermilion, so an empty queue holds no warmth at all and a waiting
      decision is the only hot thing on the screen.
   2. THE PAYLOAD IS THE PAGE. "Approving something you cannot see" is the
      failure this interface exists to prevent, so the thing being decided
      is always the largest, highest-contrast element.
   3. THE CASE TRAVELS WITH THE PROOF. Seeing the payload is not enough to
      judge it. Where it came from, why the agent proposed it, what it rests
      on, and what nobody checked are part of the decision, so they sit on
      the same sheet rather than behind a link.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Palette ─────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  --paper:     #eae5da;
  --sheet:     #fbf8f2;
  --sheet-2:   #f2ede3;
  --ink:       #141210;
  --ink-2:     #4e463c;
  /* 4.6:1 on the darkest ground it sits on. #857a6c read better and was
     3.96:1 on --sheet: under AA for body text, on the theme the account
     manager actually works in. */
  --ink-3:     #6e6455;
  --rule:      #d3cabb;
  --rule-2:    #e4ddd0;

  --stamp:     #c33520;   /* awaiting a human — never decorative */
  --stamp-ink: #ffffff;
  --stamp-wash:#f6e2dc;
  --signed:    #2c6242;
  --signed-wash:#e2ecdf;
  --pencil:    #24507f;
  --pencil-wash:#e2eaf2;
  --flag:      #855312;
  --flag-wash: #f4ead6;

  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --ui:      "Instrument Sans", "Helvetica Neue", Helvetica, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(1.15rem, 2.6vw, 2.5rem);
  --lift: 0 1px 2px rgb(20 18 16 / .06), 0 10px 26px -18px rgb(20 18 16 / .45);
  --lift-2: 0 2px 4px rgb(20 18 16 / .07), 0 26px 60px -32px rgb(20 18 16 / .55);
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* Always darker than the ground, in either theme. Never derive this from
     --ink: that is the foreground, and it inverts. */
  --dim: rgb(18 15 12 / .62);
}

:root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  --paper:     #100e0c;
  --sheet:     #191614;
  --sheet-2:   #201c19;
  --ink:       #f2ece1;
  --ink-2:     #c4bbac;
  --ink-3:     #948978;
  --rule:      #322c26;
  --rule-2:    #262119;

  --stamp:     #f2624a;
  --stamp-ink: #1a0d09;
  --stamp-wash:#2e1610;
  --signed:    #74c495;
  --signed-wash:#152a1e;
  --pencil:    #8ab8ea;
  --pencil-wash:#13202e;
  --flag:      #dfab4f;
  --flag-wash: #2b2110;

  --lift: 0 1px 2px rgb(0 0 0 / .5), 0 12px 30px -20px #000;
  --lift-2: 0 2px 6px rgb(0 0 0 / .55), 0 30px 70px -34px #000;
  --dim: rgb(4 3 2 / .74);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --paper: #eae5da; --sheet: #fbf8f2; --sheet-2: #f2ede3;
    --ink: #141210; --ink-2: #4e463c; --ink-3: #6e6455;
    --rule: #d3cabb; --rule-2: #e4ddd0;
    --stamp: #c33520; --stamp-ink: #ffffff; --stamp-wash: #f6e2dc;
    --signed: #2c6242; --signed-wash: #e2ecdf;
    --pencil: #24507f; --pencil-wash: #e2eaf2;
    --flag: #855312; --flag-wash: #f4ead6;
    --lift: 0 1px 2px rgb(20 18 16 / .06), 0 10px 26px -18px rgb(20 18 16 / .45);
    --lift-2: 0 2px 4px rgb(20 18 16 / .07), 0 26px 60px -32px rgb(20 18 16 / .55);
    --dim: rgb(18 15 12 / .62);
  }
}

/* ── Reset and browser surfaces ──────────────────────────────────────── */

* { box-sizing: border-box; }

/* `.gate` and `.shell` set `display`, which beats the UA stylesheet's
   `[hidden] { display: none }`. Without this, toggling `hidden` is inert. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--rule) transparent; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 var(--ui);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* The parts we did not draw still carry the design. */
::selection { background: var(--stamp); color: var(--stamp-ink); }
input, textarea, select { caret-color: var(--stamp); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rule); border-radius: 99px; border: 3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 2px;
}

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; }
p { margin: 0; }
a { color: inherit; }

svg { display: block; }
.rail svg, .btn svg, .proof svg, .rail__exit svg, .clear svg, .toast svg, .case svg {
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Trim marks ──────────────────────────────────────────────────────── */

.trim {
  position: absolute; width: 13px; height: 13px;
  border: 0 solid var(--stamp); opacity: .5; pointer-events: none;
}
.trim--tl { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.trim--tr { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.trim--bl { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.trim--br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* ── Sign in ─────────────────────────────────────────────────────────── */

.gate { min-height: 100dvh; display: grid; place-items: center; padding: var(--gut); }

.gate__sheet {
  position: relative;
  width: min(378px, 100%);
  display: grid; gap: 1rem;
  padding: 2.5rem 2.25rem;
  background: var(--sheet);
  border: 1px solid var(--rule);
  box-shadow: var(--lift-2);
  animation: sheet-in .6s var(--ease) both;
}
.gate__mark {
  width: 34px; height: 34px; color: var(--stamp); margin-inline: auto;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;
}
.gate__title { font-size: 2.9rem; line-height: .95; text-align: center; letter-spacing: -.03em; }
.gate__line {
  text-align: center; font-size: 12px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .4rem;
}
.gate__note { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.gate__err { padding: .6rem .75rem; font-size: 13px; color: var(--stamp); background: var(--stamp-wash); }

/* ── Shell ───────────────────────────────────────────────────────────── */

.shell { min-height: 100dvh; display: grid; grid-template-columns: 214px minmax(0, 1fr); }

.rail {
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column; gap: 1.6rem;
  padding: 1.4rem 1rem;
  border-right: 1px solid var(--rule);
}

.rail__mark { display: flex; align-items: center; gap: .6rem; text-decoration: none; padding: .2rem; }
.rail__mark svg { width: 21px; height: 21px; color: var(--stamp); }
.rail__mark span { font-family: var(--display); font-size: 1.22rem; letter-spacing: -.01em; }

.rail__nav { display: grid; gap: 2px; }
.rail__nav a {
  display: grid; grid-template-columns: 18px 1fr auto;
  align-items: center; gap: .65rem;
  padding: .5rem .55rem;
  text-decoration: none; color: var(--ink-2);
  font-size: 14px; font-weight: 500;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.rail__nav a svg { width: 18px; height: 18px; opacity: .7; }
.rail__nav a:hover { color: var(--ink); background: var(--rule-2); }
.rail__nav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--sheet); }
.rail__nav a[aria-current="page"] svg { opacity: 1; color: var(--stamp); }

.tally {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center;
  background: var(--stamp); color: var(--stamp-ink);
  font: 600 11px/1 var(--mono); font-style: normal;
  font-variant-numeric: tabular-nums; border-radius: 99px;
}

/* Something is running. A pip and never a count: this is not a queue. */
.rail__pip {
  width: 7px; height: 7px; border-radius: 99px; background: var(--signed);
  animation: pip 1.6s ease-in-out infinite; justify-self: end;
}

.rail__foot { margin-top: auto; display: grid; gap: 1rem; }
.rail__spec { margin: 0; display: grid; gap: .3rem; font: 400 10.5px/1.4 var(--mono); }
.rail__spec div { display: grid; grid-template-columns: 34px 1fr; gap: .4rem; }
.rail__spec dt { color: var(--ink-3); }
.rail__spec dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.rail__spec dd.is-warn { color: var(--stamp); }

.rail__exit {
  display: flex; align-items: center; gap: .55rem;
  background: none; border: 0; padding: .4rem .55rem; cursor: pointer;
  color: var(--ink-3); font: 500 13px var(--ui);
}
.rail__exit svg { width: 16px; height: 16px; }
.rail__exit:hover { color: var(--ink); }

.stage { padding: var(--gut); min-width: 0; }

/* ── Headings — no kickers; the heading carries its own weight ───────── */

.head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.head h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: .95; letter-spacing: -.035em; }
.head__aside { display: flex; align-items: center; gap: .6rem; }
.said { color: var(--ink-2); font-size: 14.5px; max-width: 68ch; margin-top: .5rem; }

/* ── The desk: a queue spine and one proof ───────────────────────────── */

.desk {
  display: grid;
  grid-template-columns: minmax(206px, 252px) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

.spine { display: grid; gap: 1px; border-top: 1px solid var(--ink); }
.spine__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .7rem 0 .55rem;
  font: 600 10.5px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}
.spine__item {
  display: grid; gap: .2rem; width: 100%; text-align: left;
  padding: .8rem .8rem .8rem .95rem;
  background: none; border: 0; border-bottom: 1px solid var(--rule-2);
  cursor: pointer; color: inherit; font: inherit; position: relative;
  transition: background .16s var(--ease);
}
.spine__item::before {
  content: ""; position: absolute; inset-block: 0; left: 0; width: 1px;
  background: var(--stamp); opacity: 0; transition: opacity .16s var(--ease);
}
.spine__item:hover { background: var(--sheet); }
.spine__item[aria-current="true"] { background: var(--sheet); }
.spine__item[aria-current="true"]::before { opacity: 1; }
.spine__what { font-weight: 600; font-size: 13.5px; }
.spine__who { font: 400 11.5px/1.4 var(--mono); color: var(--ink-3); }

/* ── The proof ───────────────────────────────────────────────────────── */

.proof {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--rule);
  box-shadow: var(--lift-2);
  animation: sheet-in .55s var(--ease) both;
}
.proof__band {
  display: grid; gap: .3rem;
  padding: .9rem 1.4rem;
  background: var(--stamp); color: var(--stamp-ink);
}
.proof__band-what { font: 600 11.5px/1.3 var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.proof__band-why { font-size: 13.5px; line-height: 1.5; max-width: 68ch; }
.proof__band-why b { font-weight: 700; }

.proof__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 1.35rem 1.4rem 1rem;
}
.proof__head h2 { font-size: 1.85rem; line-height: 1.05; letter-spacing: -.025em; }
.proof__meta { margin-top: .3rem; font: 400 11.5px/1.5 var(--mono); color: var(--ink-3); }
.proof__meta b { color: var(--ink-2); font-weight: 500; }

.proof__body { padding: 0 1.4rem 1.4rem; display: grid; gap: 1.3rem; }

.set { display: grid; gap: .55rem; }
.set__label {
  font: 600 10.5px/1 var(--ui); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}

/* What will actually be sent. */
.sent { position: relative; padding: 1.5rem 1.6rem; background: var(--paper); border: 1px solid var(--rule); }
.sent__from {
  display: flex; align-items: center; gap: .5rem;
  font: 500 11.5px/1 var(--mono); color: var(--ink-3);
  padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px dashed var(--rule);
}
.sent__from i { width: 5px; height: 5px; background: var(--ink-3); border-radius: 99px; font-style: normal; }
.sent__copy {
  font-family: var(--display); font-size: clamp(1.05rem, 1.6vw, 1.26rem);
  line-height: 1.62; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 62ch;
}
.sent__copy.is-missing { font-family: var(--ui); font-size: 14px; color: var(--stamp); }
.sent__foot {
  display: flex; gap: 1.4rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding-top: .85rem; border-top: 1px dashed var(--rule);
  font: 400 11.5px/1.5 var(--mono); color: var(--ink-3);
}

/* The pictures a package carries. Big enough to judge a picture, small
   enough that the copy above stays the thing being signed. */
.thumbs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.thumb {
  display: grid; gap: .3rem; width: min(220px, 100%); text-decoration: none;
  color: var(--ink-3); font: 400 11px/1.4 var(--mono);
}
.thumb img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid var(--rule); background: var(--sheet);
}
.thumb:hover img { border-color: var(--ink-3); }
.thumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb__missing { color: var(--flag); white-space: normal; }
.ledger td .thumbs { margin-top: .5rem; }
.ledger td .thumb { width: 96px; }

/* Budget: figures, not prose. */
.figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  border: 1px solid var(--rule); background: var(--rule); gap: 1px;
}
.figure { padding: .95rem 1.05rem; background: var(--paper); }
.figure dt {
  font: 600 10px/1 var(--ui); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem;
}
.figure dd {
  margin: 0; font: 400 1.5rem/1 var(--display);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.figure--now dd { color: var(--stamp); }

/* ── The case: provenance, reasoning, evidence, doubt ─────────────────
   Four questions, always in this order, because it is the order a person
   asks them: where did this come from, why does the agent want it, what
   does it rest on, and what did nobody check.                          */

.case { display: grid; gap: 0; border: 1px solid var(--rule); background: var(--rule); }
.case > * { background: var(--sheet); }

.case__part { padding: 1.05rem 1.2rem; display: grid; gap: .55rem; }
.case__part + .case__part { margin-top: 1px; }
.case__q {
  display: flex; align-items: center; gap: .45rem;
  font: 600 10.5px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.case__q svg { width: 14px; height: 14px; }
.case__part--doubt .case__q { color: var(--flag); }
.case__part--doubt { background: var(--flag-wash); }
.case__part--doubt .case__q svg { color: var(--flag); }

.case__said {
  font-family: var(--display); font-size: 1.02rem; line-height: 1.6;
  max-width: 68ch; white-space: pre-wrap;
}
.case__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .38rem; }
.case__list li {
  display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: baseline;
  font-size: 13.5px; line-height: 1.5;
}
.case__list li::before { content: "—"; color: var(--ink-3); }
.case__part--doubt .case__list li { color: var(--flag); }
/* The confirm action sits at the end of its line rather than under it: it acts
   on that one fact, and a row of buttons down the side would read as a queue. */
.case__list li:has(> [data-confirm]) { grid-template-columns: auto 1fr auto; }
[data-confirm] { justify-self: end; white-space: nowrap; }
.case__path { font: 400 12.5px/1.5 var(--mono); overflow-wrap: anywhere; }
.case__none { font-size: 13px; color: var(--ink-3); font-style: italic; }

/* The chain of work, as a run of steps. */
.chain { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.chain__step {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .5rem;
  background: var(--pencil-wash); color: var(--pencil);
  font: 600 11px/1.5 var(--ui);
}
.chain__arrow { color: var(--ink-3); font-size: 11px; }

details.raw > summary {
  cursor: pointer; list-style: none;
  font: 500 11.5px/1 var(--mono); color: var(--ink-3); padding: .35rem 0;
}
details.raw > summary::-webkit-details-marker { display: none; }
details.raw > summary::before { content: "+ "; }
details.raw[open] > summary::before { content: "– "; }
pre.raw__json {
  margin: .5rem 0 0; padding: .9rem 1rem;
  background: var(--paper); border: 1px solid var(--rule-2);
  font: 400 12px/1.6 var(--mono); color: var(--ink-2); overflow-x: auto;
}

.proof__sign {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: 1.05rem 1.4rem; border-top: 1px solid var(--rule); background: var(--sheet-2);
}
/* The spacer only earns its keep when the row fits on one line; below that it
   forces "Devolver" onto an orphan row of its own. */
.proof__sign .grow { flex: 1 1 0; min-width: 0; }
@media (max-width: 1180px) {
  .proof__sign { flex-wrap: wrap; }
  .proof__sign .grow { flex-basis: 100%; height: 0; }
}

.markup { display: grid; gap: .7rem; padding: 1.15rem 1.4rem; border-top: 1px solid var(--rule); }
.markup textarea { min-height: 88px; }
.markup__why { font-size: 12.5px; color: var(--ink-3); max-width: 70ch; }

/* The one authored moment: the sign-off. */
.stamp { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; }
.stamp svg {
  width: 158px; height: 158px; color: var(--stamp);
  fill: none; stroke: currentColor; stroke-width: 1.5;
  animation: stamp-land .5s var(--ease) both;
}
.stamp--back svg { color: var(--ink-3); }
@keyframes stamp-land {
  0%   { opacity: 0; transform: scale(1.75) rotate(-16deg); filter: blur(7px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(-9deg); filter: blur(0); }
}
.proof.is-signed { animation: sheet-away .55s var(--ease) .34s both; }
@keyframes sheet-away { to { opacity: 0; transform: translateY(-14px) scale(.985); } }

/* ── The desk when nothing is waiting ───────────────────────────────────
   Three questions answered in one line, then what finished, as report
   sheets: the proof component with no band and no sign row, because nothing
   on them is being decided. Ochre marks what waits on a person without being
   a signature; vermilion stays with the tally.                            */

.stateline { font-size: 14.5px; color: var(--ink-2); margin: -.6rem 0 1.4rem; max-width: 72ch; line-height: 1.6; }
.stateline b { color: var(--ink); font-weight: 600; }
.stateline a { color: var(--pencil); }

.done { display: grid; gap: 1.2rem; margin-top: 2rem; }
.done__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.done__head h2 { font-size: 1.55rem; letter-spacing: -.02em; }

.proof--report { animation: none; }
.proof--report .trim { border-color: var(--ink-3); }
.proof--report .proof__head { border-top: 3px solid var(--ink); }
.proof--report .proof__head h2 { font-size: 1.45rem; }
.report__said { font-size: 14px; }
.report__said > :first-child { margin-top: 0; }
/* The brief's rendering uses vermilion bullets; on a sheet where nothing is
   being decided, a red mark would be decoration, which it may never be. */
.report__said li::marker { color: var(--ink-3); }
.report__said h1, .report__said h2, .report__said h3 { font-size: 1.12rem; margin: 1.1em 0 .35em; }
.set__label .mark { margin-left: .5rem; letter-spacing: 0; text-transform: none; font-size: 11px; }

.packs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.pack { background: var(--paper); padding: .95rem 1.05rem; display: grid; gap: .55rem; }
.pack__meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font: 400 11.5px/1.5 var(--mono); color: var(--ink-3); }
.pack__body {
  font-family: var(--display); font-size: 1.02rem; line-height: 1.58;
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 62ch;
}
.pack .btn { justify-self: start; }

.note--flag { background: var(--flag-wash); color: var(--flag); }
.mark .pip { display: inline-block; width: 6px; height: 6px; margin-right: .35rem; vertical-align: middle; }
a.mark { text-decoration: none; }

/* ── Controls ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 600 13.5px/1 var(--ui); padding: .7rem 1.1rem;
  border: 1px solid var(--rule); background: var(--sheet); color: var(--ink);
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .1s var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--sm { padding: .45rem .75rem; font-size: 12.5px; }
.btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ink:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn--sign { background: var(--signed); color: #fff; border-color: var(--signed); }
.btn--sign:hover { filter: brightness(1.1); }
.btn--back { color: var(--stamp); border-color: var(--stamp); background: transparent; }
.btn--back:hover { background: var(--stamp-wash); }
.btn--bare { background: none; border-color: transparent; }
.btn--bare:hover { border-color: var(--rule); }

.field { display: grid; gap: .35rem; }
.field__label {
  font: 600 10.5px/1 var(--ui); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
input[type="text"], input[type="password"], input[type="month"], select, textarea {
  font: 400 14px/1.55 var(--ui); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  padding: .62rem .7rem; width: 100%; border-radius: 0;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem;
}

.hint { font-size: 12.5px; color: var(--ink-3); }
.mono { font: 400 12px/1.5 var(--mono); }

.mark {
  display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .5rem;
  font: 600 10px/1.5 var(--ui); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.mark--stamp { background: var(--stamp-wash); color: var(--stamp); }
.mark--signed { background: var(--signed-wash); color: var(--signed); }
.mark--pencil { background: var(--pencil-wash); color: var(--pencil); }
.mark--flag { background: var(--flag-wash); color: var(--flag); }
.mark--quiet { background: var(--rule-2); color: var(--ink-3); }

.note {
  padding: .8rem 1rem; font-size: 13px; line-height: 1.55;
  background: var(--flag-wash); color: var(--flag); max-width: 74ch;
}
.note--stamp { background: var(--stamp-wash); color: var(--stamp); }

/* ── Empty ───────────────────────────────────────────────────────────── */

.clear {
  display: grid; justify-items: center; gap: .85rem; text-align: center;
  padding: clamp(3rem, 10vw, 6.5rem) 1.5rem; border: 1px dashed var(--rule);
}
.clear svg { width: 40px; height: 40px; color: var(--ink-3); opacity: .5; }
.clear h2 { font-size: 1.9rem; letter-spacing: -.02em; }
.clear p { max-width: 50ch; color: var(--ink-2); font-size: 14px; }

/* ── Brief and stream ────────────────────────────────────────────────── */

.brief {
  display: grid; gap: 1rem; max-width: 720px; padding: 1.4rem;
  background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--lift);
}
.brief__go { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.brief__who { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 640px) { .brief__who { grid-template-columns: 1fr; } }

/* The strategies, as a ruled list. Pressed is the one whose brief is in
   the box; blue pencil, since it is a choice and not a decision. */
.strategies { display: grid; gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); }
.strategies button {
  display: grid; grid-template-columns: 15ch minmax(0, 1fr); gap: .2rem 1rem;
  align-items: baseline; text-align: left; border: 0; cursor: pointer;
  background: var(--sheet); padding: .6rem .85rem; color: var(--ink-2);
  font: 400 12.5px/1.45 var(--ui); border-left: 2px solid transparent;
}
.strategies button b { color: var(--ink); font-weight: 600; }
.strategies button:hover { background: var(--sheet-2); color: var(--ink); }
.strategies button[aria-pressed="true"] { border-left-color: var(--pencil); background: var(--sheet-2); }
@media (max-width: 640px) { .strategies button { grid-template-columns: 1fr; } }

.wire { margin-top: 1.5rem; border: 1px solid var(--rule); background: var(--sheet); }
.wire__head {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1.1rem; border-bottom: 1px solid var(--rule-2);
  font: 500 11.5px/1 var(--mono); color: var(--ink-3);
}
.wire__log { padding: .35rem 0; max-height: 64vh; overflow-y: auto; }

.beat {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: .85rem; align-items: baseline; padding: .4rem 1.1rem; font-size: 13.5px;
}
.beat__kind {
  font: 600 9.5px/1.7 var(--ui); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); text-align: right;
}
.beat__body { min-width: 0; overflow-wrap: anywhere; }
.beat--message { padding: .75rem 1.1rem; }
.beat--message .beat__body {
  font-family: var(--display); font-size: 15.5px; line-height: 1.6;
  white-space: pre-wrap; max-width: 70ch;
}
.beat--delegate .beat__kind { color: var(--pencil); }
.beat--file .beat__kind { color: var(--flag); }
.beat--file .beat__body, .beat--tool .beat__body { font: 400 12.5px/1.5 var(--mono); color: var(--ink-2); }
.beat--error { background: var(--stamp-wash); }
.beat--error .beat__kind, .beat--error .beat__body { color: var(--stamp); }
.beat--approval { background: var(--stamp-wash); }
.beat--approval .beat__kind { color: var(--stamp); }

.pip { width: 7px; height: 7px; border-radius: 99px; background: var(--ink-3); }
.pip--live { background: var(--signed); animation: pip 1.6s ease-in-out infinite; }
.pip--held { background: var(--stamp); animation: pip 2.1s ease-in-out infinite; }
.pip--dead { background: var(--stamp); }
@keyframes pip { 50% { opacity: .35; } }

/* ── Ruled tables, not cards ─────────────────────────────────────────── */

.ledger { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ledger caption {
  text-align: left; padding-bottom: .7rem;
  font-family: var(--display); font-size: 1.35rem; letter-spacing: -.02em;
}
.ledger th {
  text-align: left; padding: 0 .9rem .5rem 0; border-bottom: 1px solid var(--ink);
  font: 600 10px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.ledger td { padding: .68rem .9rem .68rem 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger .num {
  text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums;
  padding-left: 1.6rem; padding-right: 0; white-space: nowrap;
}
.ledger tr.sum td { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 700; padding-top: .75rem; }
.ledger tbody tr:hover td { background: var(--sheet); }
.ledger a { text-decoration: none; }
.ledger a:hover { color: var(--pencil); }

.slab { padding: 1.4rem; background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--lift); }
/* Six columns do not fit a phone. The slab scrolls sideways so every column
   stays reachable; without this the last ones were simply gone, with nothing
   to indicate they existed. Only slabs that hold a ledger: a scroll container
   around a textarea earns nothing. */
.slab:has(> .ledger) { overflow-x: auto; scrollbar-width: thin; }
.slab + .slab { margin-top: 1.2rem; }

.totals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 1.4rem;
}
.total { background: var(--sheet); padding: 1.15rem 1.2rem; }
.total dt {
  font: 600 10px/1 var(--ui); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .55rem;
}
.total dd {
  margin: 0; font: 400 2rem/1 var(--display);
  font-variant-numeric: tabular-nums; letter-spacing: -.025em;
}
.total small { display: block; margin-top: .45rem; font: 400 11.5px/1.45 var(--ui); color: var(--ink-3); }

/* ── Client detail ───────────────────────────────────────────────────── */

.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.4rem; flex-wrap: wrap; }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .6rem .85rem; margin-bottom: -1px; cursor: pointer;
  font: 600 12.5px/1 var(--ui); color: var(--ink-3); transition: color .16s var(--ease);
}
.tabs button:hover { color: var(--ink-2); }
/* `aria-selected` belongs to a tab in a tablist; a filter that is on or off is
   a pressed button. Both are styled the same because both mean "this one". */
.tabs button[aria-selected="true"],
.tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--stamp); }

.back {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-bottom: .7rem; text-decoration: none;
  font: 500 12px/1 var(--mono); color: var(--ink-3);
}
.back:hover { color: var(--ink); }

.doc { font-size: 14.5px; line-height: 1.72; max-width: 72ch; }
.doc h1, .doc h2, .doc h3 { font-family: var(--display); letter-spacing: -.02em; margin: 1.5em 0 .45em; }
.doc h1 { font-size: 1.7rem; } .doc h2 { font-size: 1.32rem; } .doc h3 { font-size: 1.1rem; }
.doc p { margin: 0 0 .85em; }
.doc ul { margin: 0 0 .9em; padding-left: 1.1em; }
.doc li { margin-bottom: .32em; }
.doc li::marker { color: var(--stamp); }
.doc code { font: 400 .87em var(--mono); background: var(--rule-2); padding: .1em .35em; }
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 1.5em 0; }
.doc ol { margin: 0 0 .9em; padding-left: 1.4em; }
.doc blockquote {
  margin: 0 0 .9em; padding: .1em 0 .1em .9em;
  border-left: 2px solid var(--rule); color: var(--ink-2); font-style: italic;
}
.doc em { font-style: italic; }
/* A table inside prose: the same ruled table the ledgers use, scrolling
   inside its own box so a wide one never widens the page. */
.doc__table { overflow-x: auto; margin: .4em 0 1em; scrollbar-width: thin; }
.doc__table .ledger { font-size: 13px; }
.doc__table .ledger th, .doc__table .ledger td { padding-right: 1rem; vertical-align: top; }
.doc__table .ledger td:first-child { font-weight: 600; white-space: nowrap; }

.files { display: grid; gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); }
.files button {
  text-align: left; border: 0; cursor: pointer; background: var(--sheet);
  padding: .55rem .8rem; font: 400 12.5px/1.45 var(--mono); color: var(--ink-2);
}
.files button:hover { background: var(--sheet-2); color: var(--ink); }

.bar { height: 4px; background: var(--rule-2); margin-top: .6rem; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--signed); }
.bar i.is-over { background: var(--stamp); }

/* ── Toast ───────────────────────────────────────────────────────────── */

.toast {
  position: fixed; inset-inline: 0; bottom: 1.6rem; z-index: 40;
  margin-inline: auto; width: max-content; max-width: min(92vw, 540px);
  display: flex; align-items: center; gap: .55rem;
  padding: .75rem 1.1rem; background: var(--ink); color: var(--paper);
  font-size: 13.5px; font-weight: 500; box-shadow: var(--lift-2);
  animation: sheet-in .3s var(--ease) both;
}
.toast svg { width: 16px; height: 16px; }
.toast--stamp { background: var(--stamp); color: var(--stamp-ink); }

/* ── Motion ──────────────────────────────────────────────────────────── */

@keyframes sheet-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Narrow ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .desk { grid-template-columns: 1fr; }
  .spine { order: 2; }
}

/* On a phone this is a thumb-reached tool: the PRD's own scene is an approval
   answered three hours later, away from a desk. So the rail becomes a fixed
   bottom bar rather than a squeezed version of the desktop column. */
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }

  .rail {
    position: fixed; inset: auto 0 0 0; z-index: 30;
    height: auto; flex-direction: row; align-items: stretch; gap: 0;
    padding: 0; border-right: 0; border-top: 1px solid var(--rule);
    background: var(--sheet);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .rail__mark, .rail__spec { display: none; }

  .rail__nav { display: flex; flex: 1; gap: 0; }
  .rail__nav a {
    flex: 1; display: grid; grid-template-columns: none; justify-items: center;
    gap: .18rem; padding: .6rem .25rem .55rem;
    font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
    position: relative;
  }
  .rail__nav a svg { width: 20px; height: 20px; }
  .rail__nav a[aria-current="page"] { background: none; color: var(--stamp); }
  .rail__nav a[aria-current="page"]::after {
    content: ""; position: absolute; top: 0; inset-inline: 22%;
    height: 2px; background: var(--stamp);
  }
  /* The count rides on the icon, the way a badge does on a phone. */
  .rail__nav a .tally {
    position: absolute; top: .3rem; left: 50%; margin-left: 3px;
    min-width: 16px; height: 16px; font-size: 9.5px; padding: 0 4px;
  }
  .rail__nav a .rail__pip { position: absolute; top: .5rem; left: 50%; margin-left: 7px; }
  .proof--report .proof__head h2 { font-size: 1.25rem; }

  .rail__foot { margin: 0; display: flex; }
  .rail__exit {
    flex-direction: column; justify-content: center; gap: .18rem;
    padding: .6rem .8rem .55rem; font-size: 10.5px; font-weight: 600;
  }
  .rail__exit svg { width: 20px; height: 20px; }

  /* Clear the bar. */
  .stage { padding-bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)); }

  .head h1 { font-size: 2.3rem; }
  .beat { grid-template-columns: 1fr; gap: .1rem; }
  .beat__kind { text-align: left; }
  .proof__band { padding: .8rem 1rem; }
  .proof__head, .proof__body, .proof__sign, .markup { padding-inline: 1rem; }
  .proof__head { padding-top: 1.1rem; }
  .sent { padding: 1.1rem; }
  .case__part { padding: .95rem 1rem; }
  .figures { grid-template-columns: 1fr 1fr; }
  /* Signing is the reason to be here; on a phone it gets full width. */
  .proof__sign { flex-direction: column; align-items: stretch; }
  .proof__sign .btn { justify-content: center; }
  .proof__sign .grow { display: none; }
  .slab { padding: 1rem; }
  .ledger { font-size: 13px; }
  /* The count column is narrower here, so the list under it does not need to
     clear as much, and a phone has no width to spend on indentation. */
  .gap__list { padding-left: 1.2rem; }
  .gap > summary { grid-template-columns: auto 1fr auto; row-gap: .2rem; }
  .gap__share { grid-column: 2 / -1; }
  /* Reaching a file to open it should not need a precise tap. */
  .filelink { min-height: 44px; }
  .ledger .num { padding-left: .8rem; }
}

.ask__marks { display: flex; gap: .3rem; margin-top: .3rem; }

/* Resultados: ruled tables and the owner's three questions. */
.slab__sub { font-family: var(--display); font-size: 1.08rem; margin: 1.4rem 0 .6rem; letter-spacing: -.01em; }
.ask { margin-top: 1rem; padding: 1rem; border: 1px dashed var(--rule); display: grid; gap: .8rem; }
.ask__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; }
.ask__note { grid-column: 1 / -1; }
.ask .btn { justify-self: start; }
.ask__marks .btn { padding: .15rem .35rem; font-size: 11px; }

/* ── The register ──────────────────────────────────────────────────────
   What was signed off without somebody checking a particular thing. Ochre
   throughout: the palette's mark for unverified, which is exactly what
   these are. Never vermilion -- every decision on this screen has already
   been made, and nothing here is waiting for anybody.                  */

.slab__title { font-family: var(--display); font-size: 1.3rem; margin-bottom: .35rem; }

.gaps { display: grid; gap: 1px; background: var(--rule); margin-top: 1rem; border: 1px solid var(--rule); }
.gap { background: var(--sheet); }
.gap > summary {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: .8rem; align-items: baseline;
  padding: .85rem 1rem; cursor: pointer; list-style: none;
}
.gap > summary::-webkit-details-marker { display: none; }
/* The native marker is gone, so the row has to say it opens. Same mark the
   handoffs use, so one disclosure idiom runs through the whole interface. */
.gap > summary::after {
  content: "›"; color: var(--ink-3); font-size: 14px; line-height: 1;
  transition: rotate .18s var(--ease);
}
.gap[open] > summary::after { rotate: 90deg; }
.gap > summary:hover { background: var(--sheet-2); }
.gap__count {
  font: 500 1.3rem/1 var(--mono); color: var(--flag);
  font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right;
}
.gap__label { font-size: 14px; color: var(--ink); }
.gap__share { font: 400 12px var(--mono); color: var(--ink-3); white-space: nowrap; }
.gap__list {
  list-style: none; margin: 0; padding: 0 1rem 1rem 3.4rem;
  display: grid; gap: .35rem; font-size: 12.5px; color: var(--ink-3);
}
.gap__reason { font-size: 12.5px; color: var(--flag); margin-top: .25rem; font-style: italic; }

/* What the signer was told before signing, folded under the row. */
.signed-with { margin-top: .3rem; font-size: 12.5px; }
.signed-with > summary { cursor: pointer; color: var(--flag); list-style: none; }
.signed-with > summary::-webkit-details-marker { display: none; }
.signed-with > summary::before { content: "› "; }
.signed-with[open] > summary::before { content: "⌄ "; }
.signed-with ul { margin: .35rem 0 0; padding-left: 1.1rem; color: var(--ink-2); display: grid; gap: .25rem; max-width: 62ch; }

/* Where a package came from, on a proof for publishing it. */
.origin { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-width: 70ch; }
.origin a { color: var(--pencil); }
.origin .mark { margin-left: .2rem; }

/* A period switch, in the shape the tabs already have. */
.tabs--sm button { font-size: 12px; padding: .3rem .7rem; }

/* ── Reading the case ──────────────────────────────────────────────────
   Two layers on purpose. The line at the top answers "can I trust this"
   at a glance — who asked, how much work, whether anything checked it,
   what it cost. Everything under it is the evidence, and the evidence is
   openable where it is cited: sending somebody to another screen to read
   a file costs them the decision they were in the middle of.          */

.prov {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .1rem;
  font-size: 12.5px; color: var(--ink-2); margin-bottom: .85rem;
}
.prov b { color: var(--ink); font-weight: 600; }
.prov .mark { margin: 0 .1rem; }
.prov__dot { color: var(--rule); padding: 0 .45rem; }
.prov__unknown { color: var(--ink-3); }

/* A delegation, as what it was asked and what came back. */
.hand { list-style: none; display: grid; gap: .6rem; margin: .2rem 0 0; padding: 0; }
.hand li { border-left: 2px solid var(--pencil); padding-left: .7rem; }
.hand__who {
  font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--pencil);
}
.hand__asked {
  font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: .3rem;
  font-style: italic;
}
.hand__more { margin-top: .35rem; }
.hand__more summary {
  cursor: pointer; font-size: 12px; color: var(--ink-3); list-style: none;
}
.hand__more summary::before { content: "› "; }
.hand__more[open] summary::before { content: "⌄ "; }
.hand__more pre {
  margin: .4rem 0 0; font: 400 12px/1.55 var(--mono); color: var(--ink-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--rule-2); padding: .6rem .7rem;
}

/* The reconstructed path. Numbered because the order is the point, and set
   in the mono face because it is a record rather than prose. */
.trail { margin-top: .5rem; }
.trail summary {
  cursor: pointer; list-style: none; font-size: 12px; color: var(--ink-3);
}
.trail summary::-webkit-details-marker { display: none; }
.trail summary::before { content: "› "; }
.trail[open] summary::before { content: "⌄ "; }
.trail__list {
  margin: .5rem 0 0; padding-left: 1.4rem; display: grid; gap: .3rem;
  font: 400 12.5px/1.5 var(--mono); color: var(--ink-3);
}
.trail__list li::marker { color: var(--rule); }
.trail__did { color: var(--ink-2); }
.trail__what { color: var(--ink); overflow-wrap: anywhere; }

/* A cited file, openable in place. */
/* The base list is a dash in one column and text in the other. A cited file
   is three stacked things -- the link, what it is, and its contents when
   opened -- so it takes the whole width and drops the dash. */
.case__list--files li { grid-template-columns: 1fr; gap: .15rem; }
.case__list--files li::before { content: none; }
.filelink {
  display: inline-flex; align-items: center; gap: .4rem; justify-self: start;
  background: none; border: 0; padding: .35rem 0; cursor: pointer; text-align: left;
  color: var(--pencil); font: inherit; min-height: 32px;
}
.filelink svg { width: 13px; height: 13px; }
.filelink:hover .case__path { text-decoration: underline; }
.filelink:disabled { cursor: default; color: var(--ink-3); }
.filelink.is-open svg { color: var(--stamp); }
.filelink__what { font-size: 12px; color: var(--ink-3); }
.filelink__body pre {
  margin: .45rem 0 .2rem; max-height: 340px; overflow: auto;
  font: 400 12px/1.6 var(--mono); color: var(--ink-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--rule-2); padding: .7rem .8rem;
  border-left: 2px solid var(--rule);
}

/* ── The specimen sheet ────────────────────────────────────────────────
   Shown under an empty queue, because Pruebas is the screen the product
   exists for and a fresh install has nothing on it — so the one moment
   somebody is being shown around is the one moment there is nothing to
   show them.

   It re-points the stamp tokens at the pencil ones rather than restyling
   anything. Two things follow. The sheet is the *real* component, so what
   it teaches cannot drift from what the desk does. And it comes out blue:
   vermilion means a person must decide, nothing on the desk is ever blue,
   so a blue sheet cannot be misread as work waiting for a signature.     */

.proof--specimen {
  --stamp: var(--pencil);
  --stamp-wash: var(--pencil-wash);
  --stamp-ink: var(--paper);
  opacity: .92;
}
.proof--specimen .trim { border-color: var(--pencil); }
/* Retinting the band left the loudest element on the sheet still a saturated
   full-width fill reading "this cannot be retracted" -- true of a real proof
   and of nothing here. A specimen states the warning without sounding it, so
   the band drops to the wash the palette already uses for a pencil mark. No
   accent bar down the side: the colour is the whole mechanism, and a thick
   edge stripe is a tell rather than a signal. */
.proof--specimen .proof__band {
  background: var(--pencil-wash); color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
.proof--specimen .proof__band-what { color: var(--pencil); }

.demo { display: grid; gap: .8rem; margin-top: .4rem; }
.demo__head { display: grid; gap: .4rem; max-width: 62ch; }
.demo__head p { font-size: 13px; color: var(--ink-3); line-height: 1.55; }
.demo__tag {
  justify-self: start;
  font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--pencil); background: var(--pencil-wash);
  padding: .3rem .5rem; border: 1px dashed color-mix(in oklab, var(--pencil) 45%, transparent);
}
.demo__inert {
  flex-basis: 100%; margin: 0; font-size: 12px; color: var(--ink-3);
}
.proof--specimen .proof__sign .btn { cursor: not-allowed; }

/* ── A change to the brief, shown as a change ──────────────────────────
   Same rule as a proof: the payload at full size before any button. A
   replacement you can only see one half of is not reviewable, so both
   halves are set side by side and neither is summarised. Vermilion marks
   the proposed side because that is the half a person is deciding on. */

/* The proof pane is narrow even on a wide screen -- there is a queue spine
   beside it -- so the breakpoint has to be about this box, not the window. */
.set { container-type: inline-size; }
.swap { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@container (max-width: 520px) { .swap { grid-template-columns: 1fr; } }
.swap__side { background: var(--sheet); padding: .95rem 1.1rem; display: grid; gap: .5rem; align-content: start; }
.swap__side--now { background: var(--stamp-wash); }
.swap__label {
  font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.swap__side--now .swap__label { color: var(--stamp); }
.swap__text {
  font: 400 12.5px/1.6 var(--mono); color: var(--ink-2);
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
}
.swap__side--now .swap__text { color: var(--ink); }

/* ── The blue-pencil tour ─────────────────────────────────────────────
   The colour is the design decision. Vermilion means "a person must
   decide" and is never decorative, so a tour highlighting in red would
   leave red meaning "look here" as often as "decide this". The pencil
   blue the palette already reserves for informational marks is the right
   voice — and in print, blue pencil is precisely the annotation that
   guides a reader and never reaches the press.                        */

.tour { position: fixed; inset: 0; z-index: 60; animation: fade-in .3s var(--ease) both; }
.tour.is-leaving { animation: fade-out .25s var(--ease) both; }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes fade-out { to { opacity: 0 } }

/* The room dims rather than greys: the ground darkens toward ink, so the
   desk still reads as the same desk. */
.tour__dim {
  position: absolute; inset: 0; background: var(--dim);
  transition: background .25s var(--ease);
}
/* The spotlight below carries its own full-screen shadow, so this layer
   stands down while one is up. Both at once was --dim over --dim, which made
   the centred steps look like the lights had come back on. */
.tour.has-spot .tour__dim { background: transparent; }

/* One element carries the cut-out, so it can be animated as a single box
   instead of four panels chasing each other. */
.tour__spot {
  position: absolute; pointer-events: none;
  box-shadow: 0 0 0 9999px var(--dim);
  outline: 1px solid color-mix(in oklab, var(--pencil) 70%, transparent);
  transition: left .42s var(--ease), top .42s var(--ease),
              width .42s var(--ease), height .42s var(--ease), opacity .25s var(--ease);
}
.tour__spot.is-hidden { opacity: 0; }
/* The same trim marks that frame a proof, in the annotating colour. */
.tour__spot .trim { border-color: var(--pencil); opacity: .95; width: 11px; height: 11px; }

.tour__card {
  position: absolute;
  width: min(360px, calc(100vw - 24px));
  display: grid; gap: .5rem;
  padding: 1.25rem 1.35rem 1.1rem;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--pencil);
  box-shadow: var(--lift-2);
  animation: card-in .42s var(--ease) backwards;
  transition: left .42s var(--ease), top .42s var(--ease), opacity .2s var(--ease);
}
@keyframes card-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
/* Held back while the next view is still on its way, so a press is visibly
   doing something rather than looking ignored. */
.tour.is-waiting .tour__card { opacity: .5; }
.tour__card.is-centred {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(430px, calc(100vw - 32px));
  animation: card-in-mid .45s var(--ease) backwards;
}
@keyframes card-in-mid {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) }
  to   { opacity: 1; transform: translate(-50%, -50%) }
}

/* A notch, so the card is clearly about the thing beside it. */
.tour__card::before {
  content: ""; position: absolute; width: 9px; height: 9px;
  background: var(--sheet); border: 1px solid var(--rule);
  border-width: 0 0 1px 1px; rotate: 45deg;
}
.tour__card[data-arrow="right"]::before { left: -5.5px; top: calc(50% - 5px); }
.tour__card[data-arrow="left"]::before  { right: -5.5px; top: calc(50% - 5px); rotate: -135deg; }
.tour__card[data-arrow="top"]::before    { bottom: -5.5px; left: calc(50% - 5px); rotate: -45deg; }
.tour__card[data-arrow="bottom"]::before { top: -5.5px; left: calc(50% - 5px); rotate: 135deg; }
.tour__card[data-arrow="none"]::before, .tour__card.is-centred::before { display: none; }

.tour__count {
  font: 500 11px/1 var(--mono); color: var(--pencil);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.tour__title {
  font-family: var(--display); font-size: 1.42rem; line-height: 1.1;
  letter-spacing: -.02em;
}
.tour__body { font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.tour__body b { color: var(--ink); font-weight: 600; }
.tour__body code {
  font: 400 .87em var(--mono); background: var(--rule-2); padding: .1em .35em;
}

.tour__feet { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; }
.tour__skip {
  background: none; border: 0; padding: .35rem 0; cursor: pointer;
  font: 500 12.5px/1 var(--ui); color: var(--ink-3);
}
.tour__skip:hover { color: var(--ink); }
.tour__dots { display: flex; gap: 4px; flex: 1; justify-content: center; }
.tour__dots i { width: 5px; height: 5px; border-radius: 99px; background: var(--rule); }
.tour__dots i.is-here { background: var(--pencil); }

/* The rail's way back in. */
.rail__help {
  display: flex; align-items: center; gap: .5rem;
  background: none; border: 0; padding: .4rem .55rem; cursor: pointer;
  color: var(--ink-3); font: 500 12.5px var(--ui); text-align: left;
}
.rail__help:hover { color: var(--pencil); }
.rail__help svg { width: 15px; height: 15px; }
.rail__help .narrow { display: none; }

body.has-tour { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .tour, .tour__card, .tour__spot { animation: none !important; transition: none !important; }
}

@media (max-width: 760px) {
  .tour__card { width: calc(100vw - 24px); }
  .tour__card::before { display: none; }

  /* The rail becomes a bottom bar, so the way back in has to speak the bar's
     language: icon over a short label, the same shape as every other stop.
     This sits here rather than with the bar because the base .rail__help
     rules are further up the file and would otherwise win on order. */
  .rail__help {
    flex-direction: column; justify-content: center; gap: .18rem;
    padding: .6rem .7rem .55rem; font-size: 10.5px; font-weight: 600;
  }
  .rail__help svg { width: 20px; height: 20px; }
  .rail__help .wide { display: none; }
  .rail__help .narrow { display: inline; }
}

/* A proposed change to an SOP, shown whole. Added lines in the cleared
   green, removed lines struck in the third ink; nothing here is vermilion. */
pre.diff {
  margin: .5rem 0 0; padding: .9rem 1rem;
  background: var(--paper); border: 1px solid var(--rule-2);
  font: 400 12px/1.6 var(--mono); color: var(--ink-2);
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 80ch;
}
pre.diff .diff__add { color: var(--signed); }
pre.diff .diff__del { color: var(--ink-3); text-decoration: line-through; }
pre.diff .diff__hunk { color: var(--pencil); }