/* ============================================================================
   ShopScout — "price ledger"
   Third sibling to umutakman.site (editorial dossier) and fugidev.xyz
   (workshop spec sheet). Related by: IBM Plex Mono for all data, radius 0,
   no shadows, a two-moment motion budget. Distinct by being cool where those
   are warm, and dense/numeric where those are editorial.

   House rules, enforced throughout:
     · border-radius is 0. Everywhere. No exceptions.
     · box-shadow does not appear in this file.
     · no gradients.
     · one accent (--accent), spent only on downward price movement and the
       active tab. Price rises use --muted, never red.
     · exactly two animated moments: row expansion, and a one-shot flash on a
       price that is at its tracked low.
   ========================================================================= */

:root {
  --paper:  #E8E8E3;   /* cool bone ground */
  --ink:    #141618;   /* near-black */
  --rule:   #C9C9C2;   /* hairline */
  --muted:  #6E6E67;   /* secondary data, price rises */
  --accent: #1B6B4A;   /* ledger green — the one accent */
  --wash:   #DEDED8;   /* one step down from paper, for expanded rows */

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --text:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --rail: 4.5rem;
  --gap:  1.75rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 var(--text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.sheet {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem 6rem;
}

/* --- the left rail: ledger section numbers, the sibling gesture ---------- */

.rail {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.09em;
  color: var(--muted);
  padding-top: 0.35rem;
}

.masthead, .panel, .colophon {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--gap);
  border-top: 1px solid var(--rule);
  padding: 1.6rem 0;
}

/* --- masthead ----------------------------------------------------------- */

.masthead {
  border-top: 2px solid var(--ink);
  grid-template-columns: var(--rail) minmax(0, 1fr) auto;
  align-items: start;
  padding-top: 1.2rem;
}

.kicker {
  margin: 0 0 0.5rem;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.wordmark {
  margin: 0;
  font: 500 clamp(2.6rem, 6vw, 4.1rem)/0.92 var(--display);
  letter-spacing: -0.02em;
}

.standfirst {
  margin: 0.75rem 0 0;
  max-width: 46ch;
  font: 400 16px/1.5 var(--display);
  color: var(--muted);
}

.masthead__meta {
  font: 400 11px/1.7 var(--mono);
  color: var(--muted);
  text-align: right;
  max-width: 22ch;
}
.masthead__meta.is-bad { color: var(--ink); }

/* --- tabs: a ruled strip, not pills ------------------------------------- */

.tabs {
  display: flex;
  gap: 1.75rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--ink);
  padding-left: calc(var(--rail) + var(--gap));
}

.tabs button {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.7rem 0;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.tabs button:hover { color: var(--ink); }
.tabs button.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* --- entry form: ruled lines, not boxes ---------------------------------- */

.entry { margin: 0 0 1.5rem; }

.label {
  display: block;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.55rem;
}

.dim { color: var(--muted); }

.entry__field input {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 0.35rem 0 0.5rem;
  font: 400 20px/1.3 var(--display);
  color: var(--ink);
}
.entry__field input::placeholder { color: var(--muted); opacity: 0.75; }
.entry__field input:focus { outline: 0; border-bottom-color: var(--accent); }

.entry__row {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-top: 1.4rem;
  flex-wrap: wrap;
}

.entry__field--narrow { width: 9rem; flex: 0 0 auto; }
.entry__field--narrow input { font: 400 16px/1.3 var(--mono); }

/* mono checkbox drawn as [x] / [ ] — no custom switch, no animation */
.toggle { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .label { margin: 0; text-transform: none; letter-spacing: 0.04em; font-size: 11px; }
.toggle__box {
  width: 1.1rem; height: 1.1rem;
  border: 1px solid var(--ink);
  display: grid; place-items: center;
}
.toggle__box::after { content: ""; width: 0.5rem; height: 0.5rem; background: none; }
.toggle input:checked + .toggle__box::after { background: var(--accent); }
.toggle input:focus-visible + .toggle__box { outline: 2px solid var(--accent); outline-offset: 2px; }

.action {
  appearance: none;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.6rem 1.5rem;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  margin-left: auto;
}
.action:hover { background: var(--accent); border-color: var(--accent); }
.action[disabled] { background: none; color: var(--muted); border-color: var(--rule); cursor: default; }

/* --- status / plan / summary -------------------------------------------- */

.status {
  border-left: 2px solid var(--accent);
  padding: 0.5rem 0 0.5rem 0.9rem;
  margin-bottom: 1.5rem;
  font: 400 12px/1.6 var(--mono);
  color: var(--muted);
}
.status.is-error { border-left-color: var(--ink); color: var(--ink); }

.plan { margin-bottom: 1.5rem; }
.plan dl { margin: 0; display: grid; grid-template-columns: 10rem minmax(0, 1fr); }
.plan dt {
  font: 500 10px/1.8 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding: 0.4rem 0;
}
.plan dd {
  margin: 0;
  font: 400 13px/1.8 var(--mono);
  border-top: 1px solid var(--rule);
  padding: 0.4rem 0;
}

.summary {
  margin: 0 0 1.75rem;
  max-width: 62ch;
  font: 400 17px/1.5 var(--display);
  border-left: 2px solid var(--ink);
  padding-left: 1rem;
}

/* --- the ledger table ---------------------------------------------------- */

.ledger { width: 100%; border-collapse: collapse; }

.ledger thead th {
  text-align: left;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  padding: 0 0.75rem 0.6rem 0;
}

.col-no    { width: 2.75rem; }
.col-num   { width: 7.5rem;  text-align: right !important; }
.col-score { width: 8.5rem; }
.ledger td.col-num, .ledger th.col-num { text-align: right; padding-right: 0; }

.ledger tbody tr.row { border-bottom: 1px solid var(--rule); cursor: pointer; }
.ledger tbody tr.row:hover { background: var(--wash); }
.ledger tbody tr.row > td { padding: 0.85rem 0.75rem 0.85rem 0; vertical-align: baseline; }

.no { font: 400 11px/1 var(--mono); color: var(--muted); }

.title { font: 400 15px/1.35 var(--text); }
.brand {
  display: block;
  margin-top: 0.2rem;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.price { font: 500 15px/1.2 var(--mono); }
.price--low { color: var(--accent); }
.sub { display: block; margin-top: 0.2rem; font: 400 10px/1 var(--mono); color: var(--muted); }
.rating { font: 400 13px/1.2 var(--mono); }

/* segmented 20-tick meter — the shared family gesture, reused for fit score */
.meter { display: flex; gap: 2px; align-items: center; }
.meter i { width: 3px; height: 11px; background: var(--rule); display: block; }
.meter i.on { background: var(--ink); }
.meter .n { margin-left: 0.5rem; font: 500 11px/1 var(--mono); }

/* --- expanded detail row (motion moment 1 of 2) -------------------------- */

.detail > td { padding: 0; border-bottom: 1px solid var(--rule); }

.detail__inner {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease;
  background: var(--wash);
}
.detail.is-open .detail__inner { grid-template-rows: 1fr; }
.detail__clip { overflow: hidden; }
.detail__pad {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 9rem;
  gap: 2rem;
  padding: 1.4rem 0 1.6rem;
}

.detail h4 {
  margin: 0 0 0.55rem;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail ul { margin: 0 0 1.1rem; padding-left: 1rem; }
.detail li { margin-bottom: 0.3rem; }
.detail p { margin: 0 0 1.1rem; }
.pick-if { font: 400 15px/1.45 var(--display); border-left: 2px solid var(--accent); padding-left: 0.8rem; }
.evidence { font: 400 12px/1.6 var(--mono); color: var(--muted); }

.spark { display: block; margin-bottom: 0.9rem; }
.spark path { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }

.detail__acts { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.detail__acts a, .detail__acts button {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.3rem 0;
  width: 100%;
  text-align: left;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
.detail__acts a:hover, .detail__acts button:hover { border-bottom-color: var(--accent); color: var(--accent); }
.detail__acts button.is-done { color: var(--muted); border-bottom-color: var(--rule); cursor: default; }

/* --- motion moment 2 of 2: a price sitting at its tracked low ------------ */

@keyframes ledger-flash {
  from { background: var(--accent); color: var(--paper); }
  to   { background: transparent;   color: var(--accent); }
}
.price--flash { animation: ledger-flash 900ms ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  .detail__inner { transition: none; }
  .price--flash  { animation: none; }
}

/* --- pending panels, colophon ------------------------------------------- */

.pending { margin: 0; max-width: 58ch; color: var(--muted); }
.pending .label { display: inline; margin-right: 0.5rem; color: var(--ink); }

.cost { font: 400 11px/1.6 var(--mono); color: var(--muted); margin-top: 1.25rem; }

.colophon { border-top: 1px solid var(--rule); margin-top: 3rem; }
.colophon p { margin: 0 0 0.3rem; font: 400 11px/1.6 var(--mono); color: var(--muted); }

/* --- narrow ------------------------------------------------------------- */

@media (max-width: 820px) {
  .sheet { padding: 0 1.1rem 4rem; }
  .masthead, .panel, .colophon { grid-template-columns: 1fr; gap: 0.9rem; }
  .masthead { grid-template-columns: 1fr; }
  .masthead__meta { text-align: left; max-width: none; }
  .tabs { padding-left: 0; gap: 1.1rem; overflow-x: auto; }
  .rail { padding-top: 0; }
  .col-num, .col-score { width: auto; }
  .ledger thead { display: none; }
  .detail__pad { grid-template-columns: 1fr; }
}

/* ============================================================================
   Phase 2 + Recommend. Same house rules: radius 0, no shadow, no gradient,
   accent only for downward price movement and active state.
   ========================================================================= */

.linkish {
  appearance: none; background: none; border: 0; padding: 0;
  font: 500 11px/1 var(--mono); letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--rule);
}
.linkish:hover { color: var(--accent); border-bottom-color: var(--accent); }

.handoff { margin: -0.5rem 0 1.75rem; font: 400 12px/1.6 var(--mono); color: var(--muted); }

.note {
  margin: 0 0 1.5rem; max-width: 62ch;
  font: 400 12px/1.65 var(--mono); color: var(--muted);
  border-left: 1px solid var(--rule); padding-left: 0.9rem;
}

.lede { margin: 0 0 1.5rem; max-width: 54ch; font: 400 16px/1.5 var(--display); color: var(--muted); }

.entry__row--top { align-items: flex-end; }
.entry__row--top .entry__field { flex: 1 1 auto; }

/* --- 05 recommend: the four starting points, as a ruled list ------------- */

.seeds { border-bottom: 1px solid var(--rule); }

.seed {
  display: grid;
  grid-template-columns: 2rem 13rem minmax(0, 1fr);
  gap: 1rem;
  width: 100%;
  text-align: left;
  appearance: none; background: none; border: 0;
  border-top: 1px solid var(--rule);
  padding: 0.95rem 0;
  cursor: pointer;
  align-items: baseline;
}
.seed:hover { background: var(--wash); }
.seed:hover .seed__name { color: var(--accent); }
.seed__no   { font: 500 11px/1 var(--mono); color: var(--muted); }
.seed__name { font: 400 17px/1.2 var(--display); color: var(--ink); }
.seed__desc { font: 400 13px/1.5 var(--text); color: var(--muted); }

/* --- the interview ------------------------------------------------------- */

.thread { list-style: none; margin: 0 0 1.75rem; padding: 0; counter-reset: q; }
.thread li {
  border-top: 1px solid var(--rule);
  padding: 0.8rem 0;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 1rem;
}
.thread li::before {
  counter-increment: q;
  content: counter(q, decimal-leading-zero);
  font: 400 11px/1.7 var(--mono); color: var(--muted);
}
.thread .q { display: block; font: 400 13px/1.5 var(--text); color: var(--muted); }
.thread .a { display: block; margin-top: 0.25rem; font: 500 14px/1.5 var(--mono); }

.question { border-top: 1px solid var(--ink); padding-top: 1.2rem; margin-bottom: 1.75rem; }
.question__why {
  margin: 0 0 0.5rem;
  font: 400 10px/1 var(--mono); letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--muted);
}
.question__text { margin: 0 0 1.1rem; max-width: 48ch; font: 400 22px/1.35 var(--display); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; }
.chips button {
  appearance: none; background: none;
  border: 1px solid var(--rule);
  padding: 0.45rem 0.8rem;
  font: 400 13px/1.2 var(--text); color: var(--ink); cursor: pointer;
}
.chips button:hover { border-color: var(--accent); color: var(--accent); }
.chips button.is-picked { border-color: var(--accent); color: var(--accent); }

.answer { display: flex; gap: 1rem; align-items: flex-end; margin-bottom: 0.9rem; }
.answer input {
  flex: 1 1 auto; background: none; border: 0; border-bottom: 1px solid var(--ink);
  padding: 0.35rem 0 0.5rem; font: 400 16px/1.3 var(--text); color: var(--ink);
}
.answer input:focus { outline: 0; border-bottom-color: var(--accent); }
.answer .action { margin-left: 0; }

.brief { margin-bottom: 1.75rem; }
.brief dl { margin: 0 0 1.25rem; display: grid; grid-template-columns: 10rem minmax(0, 1fr); }
.brief dt {
  font: 500 10px/1.8 var(--mono); letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--muted); border-top: 1px solid var(--rule); padding: 0.4rem 0;
}
.brief dd { margin: 0; font: 400 14px/1.7 var(--text); border-top: 1px solid var(--rule); padding: 0.4rem 0; }

.suggest { border-top: 1px solid var(--ink); padding-top: 1.2rem; margin-top: 2rem; }
.suggest ul { list-style: none; margin: 0; padding: 0; }
.suggest li {
  border-top: 1px solid var(--rule); padding: 0.8rem 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: baseline;
}
.suggest .s-text { font: 400 15px/1.45 var(--text); }
.suggest .s-why  { display: block; margin-top: 0.25rem; font: 400 11px/1.5 var(--mono); color: var(--muted); }
.suggest .s-acts { display: flex; gap: 1rem; }
.suggest li.is-resolved .s-text { color: var(--muted); }

/* --- 03 reviews report --------------------------------------------------- */

.report__head { border-top: 1px solid var(--ink); padding-top: 1rem; margin-bottom: 1.5rem; }
.report__title { margin: 0 0 0.3rem; font: 400 20px/1.3 var(--display); }
.report__meta  { margin: 0; font: 400 12px/1.6 var(--mono); color: var(--muted); }

.signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 2rem; margin-bottom: 1.75rem; }
.signals div { border-top: 1px solid var(--rule); padding: 0.5rem 0; }
.signals dt { font: 500 10px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.signals dd { margin: 0.2rem 0 0; font: 500 15px/1.2 var(--mono); }
.signals .flag { border-bottom: 2px solid var(--ink); }

.dist { margin-bottom: 1.75rem; }
.dist__row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 3rem; gap: 0.75rem; align-items: center; padding: 0.15rem 0; }
.dist__label { font: 400 11px/1 var(--mono); color: var(--muted); }
.dist__track { height: 8px; background: var(--rule); }
.dist__fill  { height: 8px; background: var(--ink); }
.dist__n     { font: 400 11px/1 var(--mono); text-align: right; color: var(--muted); }

.findings { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.findings li { border-top: 1px solid var(--rule); padding: 0.75rem 0; }
.findings .f-problem { font: 400 15px/1.45 var(--text); }
.findings .f-meta {
  display: block; margin-top: 0.3rem;
  font: 400 11px/1.5 var(--mono); letter-spacing: 0.04em; color: var(--muted);
}

.bottom-line {
  margin: 0 0 1.5rem; max-width: 60ch;
  font: 400 18px/1.5 var(--display);
  border-left: 2px solid var(--ink); padding-left: 1rem;
}

/* --- 04 compare matrix ---------------------------------------------------- */

.matrix { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.matrix th, .matrix td {
  border-top: 1px solid var(--rule);
  padding: 0.7rem 1rem 0.7rem 0;
  vertical-align: baseline;
  text-align: left;
}
.matrix thead th { border-top: 0; border-bottom: 1px solid var(--ink); }
.matrix .m-dim {
  width: 11rem;
  font: 500 10px/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.matrix .m-head { font: 400 14px/1.35 var(--text); }
.matrix .m-head .price { display: block; margin-top: 0.3rem; }
.matrix td { font: 400 13px/1.5 var(--text); }
.matrix td.is-winner { font-weight: 500; }
.matrix td.is-winner::before { content: "> "; color: var(--ink); font-family: var(--mono); }
.matrix .m-why {
  display: block; margin-top: 0.3rem;
  font: 400 11px/1.5 var(--mono); color: var(--muted);
}

.verdict-block { border-left: 2px solid var(--accent); padding-left: 1rem; margin-bottom: 1.5rem; }
.verdict-block.runner { border-left-color: var(--rule); }
.verdict-block h4 {
  margin: 0 0 0.4rem;
  font: 500 10px/1 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
}
.verdict-block p { margin: 0 0 0.9rem; font: 400 17px/1.5 var(--display); max-width: 58ch; }

.dealbreakers { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.dealbreakers li {
  border-top: 1px solid var(--rule); padding: 0.55rem 0;
  font: 400 13px/1.5 var(--text);
}
.dealbreakers li::before { content: "!  "; font-family: var(--mono); color: var(--muted); }

@media (max-width: 820px) {
  .seed { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .seed__desc { grid-column: 2; }
  .matrix .m-dim { width: auto; }
  .suggest li { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* --- 02 watch ------------------------------------------------------------ */

.runbar {
  display: flex; align-items: baseline; gap: 1.25rem;
  border-top: 1px solid var(--rule); padding: 0.7rem 0;
  margin-bottom: 1.75rem; flex-wrap: wrap;
}
.runbar__note { font: 400 11px/1.6 var(--mono); color: var(--muted); }
.mono { font-family: var(--mono); }

.alerts { margin-bottom: 2rem; }
.alerts__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.alerts__head .label { margin-bottom: 0.55rem; }
.alerts ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.alerts li {
  border-bottom: 1px solid var(--rule);
  padding: 0.7rem 0 0.7rem 0.9rem;
  border-left: 2px solid transparent;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: baseline;
}
.alerts li.is-unread { border-left-color: var(--accent); }
.alerts .a-msg  { font: 400 14px/1.45 var(--text); }
.alerts .a-meta { display: block; margin-top: 0.25rem; font: 400 10px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.alerts .a-price { font: 500 15px/1.2 var(--mono); color: var(--accent); white-space: nowrap; }

.watchtable .col-trend { width: 8.5rem; }
.watchtable tbody tr { border-bottom: 1px solid var(--rule); }
.watchtable tbody td { padding: 0.85rem 0.75rem 0.85rem 0; vertical-align: baseline; }
.watchtable td.col-num { text-align: right; padding-right: 0; }
.watchtable .spark { margin: 0; }
.watchtable .w-acts { display: flex; gap: 0.9rem; margin-top: 0.4rem; }
.watchtable .w-acts .linkish { font-size: 10px; }

.delta      { font: 500 14px/1.2 var(--mono); color: var(--muted); }
.delta--at  { color: var(--accent); }
.target-set { font: 500 14px/1.2 var(--mono); }
.target-none { font: 400 13px/1.2 var(--mono); color: var(--muted); }

@media (max-width: 820px) {
  .watchtable .col-trend { display: none; }
  .watchtable td:nth-child(7) { display: none; }
}
.tabs button.has-unread { color: var(--accent); }

/* ============================================================================
   Dark mode, sign-in, account, mobile.

   The palette is defined once as tokens; dark redefines only the tokens, never
   the rules. Every colour below is a var() for exactly that reason.

   Motion budget update: navigation now animates (smooth scroll, back-to-top
   appearing). That is a third and fourth moment beyond the original two, taken
   deliberately rather than by drift -- scrolling somewhere is orientation, not
   decoration, and both are switched off under prefers-reduced-motion.
   ========================================================================= */

:root[data-theme="dark"] {
  --paper:  #16181A;
  --ink:    #E6E6E1;
  --rule:   #2E3236;
  --muted:  #8A8F94;
  --accent: #3FA97A;   /* lifted from #1B6B4A: the dark original fails contrast */
  --wash:   #1D2023;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:  #16181A;
    --ink:    #E6E6E1;
    --rule:   #2E3236;
    --muted:  #8A8F94;
    --accent: #3FA97A;
    --wash:   #1D2023;
  }
}

/* The ledger reads as ink-on-paper; in dark the "ink" button would glare. */
:root[data-theme="dark"] .action,
:root:not([data-theme="light"]) .action {
  color: var(--paper);
}

/* --- sign in / first-run setup ------------------------------------------ */

.gate {
  position: fixed;
  inset: 0;
  background: var(--paper);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  z-index: 50;
  overflow-y: auto;
}
.gate__panel {
  width: 100%;
  max-width: 26rem;
  border-top: 2px solid var(--ink);
  padding-top: 1.4rem;
}
.gate__panel .wordmark { font-size: clamp(2.2rem, 9vw, 3rem); margin-bottom: 0.6rem; }
.gate__lede {
  margin: 0 0 1.8rem;
  font: 400 15px/1.5 var(--display);
  color: var(--muted);
}
.gate form .entry__field { margin-bottom: 1.3rem; }
.gate__actions { display: flex; justify-content: flex-end; margin-top: 1.6rem; }
.gate__actions .action { margin-left: 0; width: 100%; text-align: center; }
.gate .status { margin-top: 1.2rem; }

/* --- masthead chips ------------------------------------------------------ */

.chips-row { display: flex; gap: 0.5rem; justify-content: flex-end; margin-bottom: 0.5rem; }

.chip {
  appearance: none;
  background: none;
  border: 1px solid var(--rule);
  padding: 0.3rem 0.6rem;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-open { border-color: var(--accent); color: var(--accent); }

.meta-line { font: 400 11px/1.7 var(--mono); color: var(--muted); }

/* --- account panel ------------------------------------------------------- */

.account {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
}
.select, .plain-input {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 0.35rem 0 0.5rem;
  font: 400 15px/1.3 var(--mono);
  color: var(--ink);
}
.select { appearance: none; cursor: pointer; }
.select:focus, .plain-input:focus { outline: 0; border-bottom-color: var(--accent); }
.account .note { margin-top: 0.6rem; border: 0; padding-left: 0; }

/* --- source badge on ledger rows ---------------------------------------- */

.src {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--rule);
  font: 500 9px/1.4 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: 1px;
}
.src--thin { border-style: dashed; }

.offers { margin: 0 0 1.1rem; }
.offers__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--rule);
  padding: 0.35rem 0;
  font: 400 12px/1.4 var(--mono);
}
.offers__row a { color: var(--ink); text-decoration: none; }
.offers__row a:hover { color: var(--accent); }
.offers__row .cheaper { color: var(--accent); }
.offers__note { margin: 0.5rem 0 0; font: 400 10px/1.5 var(--mono); color: var(--muted); }

/* --- back to top --------------------------------------------------------- */

.to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  appearance: none;
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 0.6rem 0.9rem;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease;
}
.to-top.is-shown { opacity: 1; }
.to-top:hover { border-color: var(--accent); color: var(--accent); }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .to-top { transition: none; }
}

/* --- horizontal scroll containment --------------------------------------- */
/* Wide tables scroll inside their own box. The page body never scrolls sideways. */

.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroller > .ledger { min-width: 46rem; }

/* --- mobile -------------------------------------------------------------- */

@media (max-width: 700px) {
  .sheet { padding: 0 1rem 5rem; }

  .masthead {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .masthead__meta { text-align: left; max-width: none; }
  .chips-row { justify-content: flex-start; }
  .standfirst { font-size: 15px; }

  .tabs {
    padding-left: 0;
    gap: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { padding: 0.85rem 0; white-space: nowrap; }

  .panel, .colophon { grid-template-columns: 1fr; gap: 0.7rem; }
  .rail { padding-top: 0; }

  .entry__row { gap: 1.1rem; }
  .entry__field--narrow { width: 7.5rem; }
  .action { margin-left: 0; width: 100%; padding: 0.85rem 1.5rem; }
  .entry__row .action { width: 100%; }

  /* Tap targets. 44px is the floor below which people miss. */
  .linkish, .chip, .chips button, .seed { min-height: 44px; }
  .chips button { padding: 0.6rem 0.9rem; }

  .answer { flex-direction: column; align-items: stretch; }
  .answer .action { width: 100%; }

  .question__text { font-size: 19px; }
  .summary, .bottom-line { font-size: 16px; }

  .detail__pad { grid-template-columns: 1fr; gap: 1.2rem; }
  .plan dl, .brief dl { grid-template-columns: 7rem minmax(0, 1fr); }

  .scroller > .ledger { min-width: 34rem; }
  .col-num { width: 5.5rem; }
  .col-score { width: 6rem; }
  .meter i { width: 2px; }

  .signals { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0 1.2rem; }
  .account { gap: 1.6rem; }

  .to-top { right: 0.75rem; bottom: 0.75rem; }
}

@media (max-width: 420px) {
  .wordmark { font-size: 2.4rem; }
  .seed { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .scroller > .ledger { min-width: 30rem; }
}

/* A `display:` rule beats the UA stylesheet's [hidden]{display:none}. Without
   this guard, .gate (display:grid) stayed laid out while hidden and forced the
   document 120px wider than the phone viewport. Every hidden element toggled by
   JS in this app is at risk of the same thing, so the guard is global. */
[hidden] { display: none !important; }

/* --- gate links, invites ------------------------------------------------- */

.gate__links { display: flex; gap: 1.25rem; margin-top: 1.4rem; flex-wrap: wrap; }

.invites { border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 1.2rem; }
.invites .note { border: 0; padding-left: 0; max-width: 62ch; }
.invite-list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.invite-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--rule); padding: 0.5rem 0;
  font: 400 12px/1.5 var(--mono);
}
.invite-list li.is-used { color: var(--muted); }
#invite-out { word-break: break-all; }