/* ═══════════════════════════════════════════════════════════════════
   THE WORKSHOP — split screen. The machine and the book, side by side.

   Left: a dark, warm room (soil and lamplight) where eight workers
   compute the life into prose — live, on every arrival. Right: the
   biography itself, embedded, the single source of truth. Click a
   worker; watch its computation, and the passage it produced lights up.

   Doctrine: Gropius grid · Vignelli hairline · Monocle ledger.
   One accent — amber. No rounding, no gradient, no shadow.
   Machine = JetBrains Mono. Book = Literata.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --soil:   #14110c;
  --soil-2: #1d1913;
  --soil-3: #262019;
  --line:   rgba(255,255,255,0.09);
  --line-2: #38301f;

  --text:  #ece5d6;
  --dim:   #a89c84;
  --faint: #857c69;

  --amber: #f59e0b;

  --paper: #fdfcf9;

  --mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --serif: 'Literata', Georgia, 'Times New Roman', serif;

  --t-display: clamp(1.6rem, 3.4vw, 2.1rem);
  --t-body:  0.875rem;
  --t-micro: 0.6875rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
html {
  background: var(--soil);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--mono);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--soil);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { color: inherit; }

/* ── Top bar ───────────────────────────────────────────────────── */

.wk-head {
  flex: 0 0 auto;
  background: var(--soil);
  border-bottom: 1px solid var(--line-2);
  padding: 0.7rem 1.1rem;
}
.wk-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}
.wk-mark { font-size: var(--t-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); }
.wk-mark b { color: var(--amber); font-weight: 700; }

.wk-status {
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.wk-status .s-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.wk-status.computing .s-dot { background: var(--amber); }
.wk-status.computing { color: var(--amber); }
.wk-status.ready .s-dot { background: var(--amber); }

.wk-tothe-book {
  font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  border-bottom: 1px solid var(--line-2); padding-bottom: 2px;
}
.wk-tothe-book:hover { color: var(--amber); border-color: var(--amber); }

/* ── The split stage ───────────────────────────────────────────── */

.stage { flex: 1 1 auto; display: flex; min-height: 0; }

.machine {
  flex: 0 0 42%;
  max-width: 600px;
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid var(--line-2);
  padding: 1.1rem 1.2rem 2.5rem;
}
.book { flex: 1 1 auto; min-height: 0; background: var(--paper); }
.book iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--paper); }

/* ── Machine head + toggle ─────────────────────────────────────── */

.machine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 0.7rem;
  margin-bottom: 1rem;
}
.mh-title { font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text); font-weight: 700; }
.toggle { display: flex; border: 1px solid var(--line-2); }
.tg {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); background: transparent; border: none; border-right: 1px solid var(--line-2);
  padding: 0.5rem 0.8rem; min-height: 38px; cursor: pointer;
}
.tg:last-child { border-right: none; }
.tg[aria-selected="true"] { background: var(--amber); color: var(--soil); font-weight: 700; }
.tg:not([aria-selected="true"]):hover { color: var(--text); background: var(--soil-3); }

.machine-intro {
  font-family: var(--serif); color: var(--dim); line-height: 1.55; margin-bottom: 1.1rem;
}
.machine-intro em { color: var(--text); font-style: italic; }

[hidden] { display: none !important; }

/* ── The live console ──────────────────────────────────────────── */

.console {
  border: 1px solid var(--line-2);
  background: #100d09;
  padding: 0.8rem 0.9rem;
  min-height: 16rem;
  max-height: 22rem;
  overflow-y: auto;
  font-size: var(--t-micro);
  line-height: 1.5;
}
.c-line {
  display: grid;
  grid-template-columns: 6.2rem 1fr;
  gap: 0.2rem 0.7rem;
  padding: 0.34rem 0;
  border-bottom: 1px solid var(--line);
  letter-spacing: 0.02em;
}
.c-line:last-child { border-bottom: none; }
.c-w { color: var(--amber); letter-spacing: 0.08em; }
.c-code { color: var(--dim); }
.c-out { grid-column: 2; color: var(--text); }
.c-flag .c-out { color: #e8a13a; }
.c-flag .c-out::before { content: "⚑ "; }
.c-ready .c-w { color: var(--faint); }
.c-ready .c-out { color: var(--amber); }

.caret {
  display: inline-block; width: 0.5em; height: 1em; background: var(--amber);
  vertical-align: -0.15em; margin-left: 2px;
}

/* ── Run control ───────────────────────────────────────────────── */

.run {
  display: block; width: 100%;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--soil); background: var(--amber); border: none;
  padding: 0.7rem; margin: 0.8rem 0 1.3rem; min-height: 44px; cursor: pointer;
}
.run:hover { background: #ffb52e; }
.run:disabled { background: var(--soil-3); color: var(--faint); cursor: default; }

/* ── The eight workers ─────────────────────────────────────────── */

.legend { list-style: none; }
.wrow {
  width: 100%;
  display: flex; align-items: center; gap: 0.7rem;
  background: transparent; border: none; border-top: 1px solid var(--line);
  padding: 0.6rem 0.2rem; min-height: 44px; cursor: pointer; text-align: left;
}
.legend li:last-child .wrow { border-bottom: 1px solid var(--line); }
.w-no { font-size: var(--t-micro); color: var(--faint); letter-spacing: 0.08em; width: 1.5rem; flex-shrink: 0; }
.w-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--soil-3); border: 1px solid var(--line-2); flex-shrink: 0; }
.wrow.done .w-dot { background: var(--amber); border-color: var(--amber); }
.wrow.active .w-dot { background: var(--amber); border-color: var(--amber); }
.w-nm { font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); flex: 1; }
.w-op { font-family: var(--serif); font-style: italic; font-size: var(--t-body); color: var(--faint); }
.wrow:hover .w-nm { color: var(--amber); }
.wrow.active { background: var(--soil-2); }

.legend-foot { font-size: var(--t-micro); color: var(--faint); line-height: 1.5; margin-top: 0.8rem; letter-spacing: 0.02em; }
.surprise {
  display: block; margin-top: 0.7rem; padding: 0.9rem 1rem;
  border: 1px solid var(--line-2); border-left: 2px solid var(--amber);
  font-family: var(--serif); font-style: italic; color: var(--dim);
  line-height: 1.5; text-decoration: none;
}
.surprise:first-of-type { margin-top: 1.2rem; }
.surprise b { font-style: normal; color: var(--text); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; }
.surprise:hover { color: var(--text); border-left-color: var(--amber); background: var(--soil-2); }

/* ── Analytics (ledger — reused) ───────────────────────────────── */

.an-block { border-top: 1px solid var(--line-2); padding-top: 0.9rem; margin-top: 1.4rem; }
.an-block:first-child { margin-top: 0; }
.an-block h3 { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); font-weight: 700; margin-bottom: 0.8rem; }
.an-block h3 .src { color: var(--faint); font-weight: 400; }

.an-split { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 480px) { .an-split { grid-template-columns: 1fr 1fr; } }
.an-split h4 { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 400; margin-bottom: 0.4rem; }

.ledger { margin: 0; }
.ledger-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem; padding: 0.42rem 0; border-bottom: 1px solid var(--line); }
.ledger-row:first-child { border-top: 1px solid var(--line-2); }
.ledger-row .l { font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.ledger-row .n { font-family: var(--mono); font-size: var(--t-body); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ledger-row.lead .l { color: var(--text); }
.ledger-row.lead .n { color: var(--amber); font-weight: 700; }

.an-read { font-family: var(--serif); font-style: italic; color: var(--text); line-height: 1.55; margin-top: 0.9rem; border-left: 2px solid var(--amber); padding-left: 0.9rem; }

.metric { font-size: var(--t-micro); letter-spacing: 0.06em; color: var(--amber); text-transform: uppercase; }
.corr-head { margin-top: 1.2rem; margin-bottom: 0.2rem; }
.corr { list-style: none; }
.corr li { font-family: var(--serif); line-height: 1.5; color: var(--dim); padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.corr li b { color: var(--text); font-weight: 400; }
.corr li .arr { color: var(--amber); padding: 0 0.3em; }

/* ── Mobile: stack the machine over the book ───────────────────── */

@media (max-width: 860px) {
  html, body { height: auto; }
  body { display: block; }
  .stage { display: block; }
  .machine {
    flex: none; max-width: none; width: auto;
    overflow: visible; border-right: 0; border-bottom: 1px solid var(--line-2);
  }
  .book iframe { height: 84vh; }
}

/* ── Motion — disciplined; reduced-motion shows the settled state ─ */

@media (prefers-reduced-motion: no-preference) {
  .wrow.active .w-dot { animation: ping 0.6s ease-out; }
  @keyframes ping { 0% { transform: scale(1); } 50% { transform: scale(1.6); } 100% { transform: scale(1); } }

  .wrow.done .w-dot { animation: idle 3s ease-in-out infinite; }
  @keyframes idle { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

  .wk-status.computing .s-dot { animation: idle 1.1s ease-in-out infinite; }

  .caret { animation: blink 1.05s step-end infinite; }
  @keyframes blink { 50% { opacity: 0; } }

  .c-line { animation: appear 0.28s ease-out; }
  @keyframes appear { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
}