/* The deck's one stylesheet. Phone-first: reviewed in one hand, 44px tap targets, and the
   decide bar pinned where a thumb is. */

:root {
  --paper: #faf8f4; --card: #fffdf9; --ink: #1d1a16; --muted: #7a736a;
  --line: #e5e0d7; --accent: #7a2e2e; --ok: #2e6b45; --warn: #9a7a1e; --bad: #a33327;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
main { padding: 12px 12px 96px; max-width: 720px; margin: 0 auto; }
img, video { max-width: 100%; border-radius: 8px; display: block; }
audio { width: 100%; }
h1 { font-size: 20px; margin: 0; }
h2 { font-size: 22px; margin: 8px 0; line-height: 1.25; }
h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em;
     color: var(--muted); margin: 20px 0 8px; }

/* ── chrome ─────────────────────────────────────────────────────────────── */
header.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--card); border-bottom: 1px solid var(--line);
}
header.top .count { margin-left: auto; color: var(--muted); font-size: 14px; }
.drawer summary {
  list-style: none; cursor: pointer; font-size: 20px; line-height: 1;
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  position: relative;
}
.drawer summary::-webkit-details-marker { display: none; }
/* ⚠️ THE DOT: a count inside a closed drawer is a count nobody sees — "can't see it on
   the deck", twice in two days. */
.drawer .dot {
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--bad);
}
.drawer nav {
  position: absolute; left: 8px; right: 8px; margin-top: 8px; z-index: 25;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12); overflow: hidden;
}
.drawer nav a {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line); min-height: 44px;
}
.drawer nav a:last-child { border-bottom: 0; }
.drawer nav a.on { background: var(--paper); }
.drawer nav small { color: var(--muted); width: 100%; }
.badge {
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: 12px; padding: 1px 8px;
}
.pulse {
  margin: 0; padding: 6px 12px; font-size: 13px; color: var(--muted);
  border-bottom: 1px solid var(--line); background: var(--card);
}
.pulse.warn { color: #6b5410; background: #f7efd8; }
.pulse.bad { color: #fff; background: var(--bad); }
.lens { display: flex; gap: 8px; padding: 10px 12px 0; flex-wrap: wrap; }
.lens a {
  --accent: var(--muted);
  text-decoration: none; color: var(--accent); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px; min-height: 40px; display: inline-flex;
  align-items: center; background: var(--card);
}
.lens a.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── the card ───────────────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--accent);
  border-radius: 14px; padding: 14px; margin: 12px 0;
}
.eyebrow {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.eyebrow .kind { text-transform: none; letter-spacing: 0; }
.pill {
  display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px;
  border: 1px solid var(--line); background: var(--paper); text-transform: none;
}
.pill.hold, .pill.debtpill { background: #f7efd8; border-color: #d9c78a; color: #6b5410; }
.pill.gated { color: var(--muted); }
.pill.stuck, .pill.down { background: #f6dcd7; border-color: #d9a79e; color: var(--bad); }
.pill.settled, .pill.up { background: #e2efe6; border-color: #b5d4c0; color: var(--ok); }
.note {
  margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--warn);
  background: #f9f4e4; border-radius: 0 8px 8px 0; font-style: italic;
}
.sub { color: var(--muted); font-size: 13px; margin: 8px 0 4px; }
.why { color: var(--muted); font-size: 14px; margin: 4px 0; }
.stuckline { color: var(--bad); font-size: 14px; }
.more { color: var(--muted); font-size: 13px; text-align: center; }
.sibling { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.missing {
  padding: 18px; border: 2px dashed var(--bad); border-radius: 10px;
  color: var(--bad); font-weight: 600; text-align: center;
}
pre.text {
  white-space: pre-wrap; background: var(--paper); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px; font-size: 14px; overflow-x: auto;
}
.pdf { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 8px; }
.strip { overflow-x: auto; }
.strip img { max-width: none; height: 160px; }
.rehearsal .banner {
  display: block; background: var(--warn); color: #fff; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px;
  border-radius: 8px 8px 0 0;
}
.rehearsal video { border-radius: 0 0 8px 8px; }

/* ── deciding ───────────────────────────────────────────────────────────── */
.decide textarea {
  width: 100%; min-height: 64px; margin-top: 10px; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--paper);
}
.decide .buttons { display: flex; gap: 10px; margin-top: 10px; }
.decide button {
  flex: 1; min-height: 48px; border-radius: 12px; border: 1px solid var(--line);
  font: inherit; font-weight: 600; background: var(--card); cursor: pointer;
}
.decide .approve { background: var(--ok); border-color: var(--ok); color: #fff; }
.decide .hold { background: #f7efd8; border-color: #d9c78a; color: #6b5410; }
.decide .reject { color: var(--bad); }
.choose button {
  width: 100%; text-align: left; margin-top: 8px; padding: 12px; min-height: 48px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  font: inherit; cursor: pointer;
}
.choose small { display: block; color: var(--muted); margin-top: 4px; }

/* ── states of the world ────────────────────────────────────────────────── */
.lost {
  background: #f6dcd7; border: 1px solid #d9a79e; border-radius: 12px;
  padding: 14px; margin: 12px 0;
}
.lost blockquote { margin: 8px 0 0; font-size: 14px; color: var(--bad); }
.empty { text-align: center; color: var(--muted); padding: 48px 12px; }
.empty strong { display: block; font-size: 20px; color: var(--ink); margin-bottom: 8px; }
.evidence, .settled { margin-top: 20px; }
.apparatus { margin-top: 10px; font-size: 14px; }
.apparatus .option { display: block; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px; margin: 6px 0; }
.apparatus .option small { display: block; color: var(--muted); }
.blocks { color: var(--muted); font-size: 13px; }
.hint { color: var(--muted); font-size: 12px; }
.where { color: var(--muted); font-size: 13px; }
.why { white-space: pre-wrap; }

/* ── packages grid ──────────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pkg {
  display: block; text-decoration: none; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px;
}
.pkg.ready { opacity: .65; }
.pkg img, .pkg .blank { width: 100%; aspect-ratio: 4/3; object-fit: cover;
  background: var(--paper); border-radius: 8px; margin-bottom: 6px; }
.pkg b { display: block; font-size: 14px; line-height: 1.25; }
.pkg small { color: var(--muted); font-size: 12px; }
.meter { display: block; height: 6px; background: var(--paper); border-radius: 999px;
  margin: 6px 0; overflow: hidden; border: 1px solid var(--line); }
.meter i { display: block; height: 100%; background: var(--ok); }
.meter.tight i { background: var(--warn); }
.meter.full i { background: var(--bad); }
.product { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; margin: 10px 0; }
.element { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 8px; }
.element:first-of-type { border-top: 0; }

/* ── schedule ───────────────────────────────────────────────────────────── */
.channel { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; margin: 12px 0; }
.headline { font-size: 18px; font-weight: 600; margin: 4px 0; }
.headline.bad { color: var(--bad); }
.calendar { margin: 10px 0; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.day {
  min-height: 44px; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--paper); font-size: 13px;
}
.day.filled { background: var(--ok); border-color: var(--ok); color: #fff; }
/* a promise must not look like a fact */
.day.promised { background: repeating-linear-gradient(45deg, #cfe4d7 0 4px, var(--card) 4px 8px);
  border-color: var(--ok); color: var(--ok); }
.day.outside { opacity: .35; }
.day.today { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── glyph grid ─────────────────────────────────────────────────────────── */
.glyphgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px; }
.glyphgrid h3 { grid-column: 1 / -1; }
.glyphgrid figure { margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px; }
.glyphgrid figcaption { font-size: 12px; margin-top: 4px; }
.glyphgrid figcaption small { display: block; color: var(--muted); }

/* ── telemetry ──────────────────────────────────────────────────────────── */
.machine { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; margin: 12px 0; }
.machine.bad { border-color: var(--bad); }
.disk { margin: 8px 0; }
.disk .meter { display: inline-block; width: 140px; vertical-align: middle; }
.disk small { display: block; color: var(--muted); }
.spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 16px;
  margin-left: 8px; }
.spark i { width: 3px; background: var(--muted); display: inline-block; }
.spark i.gap { background: var(--bad); height: 16px; opacity: .35; }

/* ── the gate ───────────────────────────────────────────────────────────── */
.gatepage { display: grid; place-items: center; min-height: 100vh; }
.gate { max-width: 340px; width: 90vw; text-align: center; }
.gate input { width: 100%; margin: 6px 0; padding: 12px; font: inherit;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.gate button { width: 100%; margin-top: 10px; min-height: 48px; border-radius: 12px;
  border: 0; background: var(--accent); color: #fff; font: inherit; font-weight: 600; }