/* Brief — reader styles. Design tokens + components lifted from the SPEC mockup
   (brief-spec.html §10/§11), reframed from the phone mock into a real full-screen
   column. Muted newsprint: warm paper, almost-black ink, rationed oxblood, and a
   teletype voice (Plex Mono) for all the structural type. */

:root{
  --paper:#F3EDDF; --paper-2:#ECE3D1; --paper-3:#E5DAC4;
  --ink:#1E1B16; --ink-soft:#574F41; --ink-faint:#8A8068;
  --rule:#D9D0BC; --rule-strong:#C6BAA0;
  --red:#9B3B2E; --red-soft:#B9614F;
  --left:#4E6A88; --center:#897E66; --right:#A0564A;
  --sage:#5F6F4E;
  --shadow:0 1px 2px rgba(38,30,16,.06), 0 14px 40px -18px rgba(38,30,16,.30);
  --serif:"Newsreader",Georgia,serif; --display:"Fraunces",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0;background:var(--paper-3);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.62;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;justify-content:center;
}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}

/* the one honest column — full width on phones, framed on desktop */
.app{
  width:100%;max-width:600px;height:100dvh;min-height:0;
  display:flex;flex-direction:column;background:var(--paper);
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
}

/* ── app bar ─────────────────────────────────────────────────────────── */
.appbar{
  position:sticky;top:0;z-index:5;background:var(--paper);
  padding:max(14px,env(safe-area-inset-top)) 16px 10px;
  border-bottom:1.5px solid var(--ink);
}
.statusrow{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-soft)}
.plate{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.01em;
  text-align:center;margin:6px 0 2px;line-height:1}
.plate .dot{color:var(--red)}
.dateline{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);text-align:center}
.tabs{display:flex;gap:18px;justify-content:center;margin-top:10px}
.tab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);background:none;border:none;padding:8px 6px 9px;cursor:pointer;border-bottom:2px solid transparent;touch-action:manipulation}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--red)}
.tab .cnt{color:var(--red)}

/* ── panes / feed scroller ───────────────────────────────────────────── */
.feed{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom)}
.pane{display:none}
.pane.active{display:block}

/* ── glance card ─────────────────────────────────────────────────────── */
.card{padding:16px 16px 14px;border-bottom:1px solid var(--rule);position:relative}
.head{cursor:pointer}
.card.archived .head{cursor:default}
.krow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.krow .cat{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.krow .time{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-faint)}
.head:hover h3.hl{text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:3px}
.card.archived .head:hover h3.hl{text-decoration:none}
h3.hl{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.16;letter-spacing:-.012em;margin:0 0 5px}
.syn{font-family:var(--serif);font-size:15px;line-height:1.46;color:var(--ink-soft);margin:0 0 8px}
.why{font-family:var(--serif);font-style:italic;font-size:14.5px;line-height:1.4;color:var(--ink);margin:0 0 10px}
.why b{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-right:7px}

.metarow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.metarow .read{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-faint);
  border:1px solid var(--rule-strong);border-radius:999px;padding:1px 7px}
.metarow .tg{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.metarow .tg::before{content:"#";color:var(--ink-faint)}
.acts{display:flex;align-items:center;gap:6px;margin-left:auto}
.iconbtn{appearance:none;border:1px solid var(--rule-strong);background:var(--paper);border-radius:8px;
  width:36px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);transition:all .12s ease;padding:0;touch-action:manipulation}
.iconbtn svg{width:14px;height:14px;display:block}
.iconbtn:hover{border-color:var(--ink-faint)}
.vote.up.on{background:var(--sage);border-color:var(--sage);color:#F3EDDF}
.vote.down.on{background:var(--red);border-color:var(--red);color:#F3EDDF}
.arch-mini:hover{border-color:var(--ink);color:var(--ink)}

/* ── deep dive + typesetting ─────────────────────────────────────────── */
.deep{display:none;margin-top:13px;padding-top:13px;border-top:1px dashed var(--rule-strong)}
.card.open .deep{display:block}
.card.open{background:#F7F2E6}
.typesetting{display:none;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.dive-body{min-height:6px}
.dive-body p{font-family:var(--serif);font-size:15px;line-height:1.52;color:var(--ink);margin:0 0 9px}
.dive-body .lead{font-weight:600;color:var(--ink)}
.caret{display:inline-block;width:.5em;height:1.02em;background:var(--red);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.dive-after{display:none;opacity:0}
.dive-after.reveal{display:block;animation:fadein .5s ease forwards}
@keyframes fadein{to{opacity:1}}

/* spectrum strip — the visual signature */
.spectrum{margin:13px 0 4px}
.spectrum .sl{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
.specbar{display:flex;height:7px;border-radius:999px;overflow:hidden;margin:2px 0}
.specbar i{display:block;height:100%}
.specbar .l{background:var(--left);flex:1}
.specbar .c{background:var(--center);flex:1}
.specbar .r{background:var(--right);flex:1}
.spectrum .labels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-top:5px}
.srclinks{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.src{display:flex;align-items:center;gap:9px;text-decoration:none;border:1px solid var(--rule);border-radius:8px;padding:8px 10px;background:var(--paper)}
.src:hover{border-color:var(--ink-faint);background:#F6F1E4}
.src .d{width:8px;height:8px;border-radius:999px;flex:0 0 auto}
.src .d.l{background:var(--left)} .src .d.c{background:var(--center)} .src .d.r{background:var(--right)}
.src .lab{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);width:84px;flex:0 0 auto}
.src .nm{font-family:var(--serif);font-size:14px;color:var(--ink);flex:1}
.src .go{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.archive-btn{margin-top:13px;width:100%;appearance:none;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-radius:9px;padding:12px;cursor:pointer}
.archive-btn:hover{background:#2b261d}

/* ── archived state ──────────────────────────────────────────────────── */
.card.archived{opacity:.62}
.card.archived .acts,.card.archived .deep{display:none}
.archived-note{display:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-faint);margin-top:8px}
.card.archived .archived-note{display:block}
.daygroup{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  padding:13px 16px 7px;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.learned{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--red);margin-top:7px}
.learned svg{width:11px;height:11px}
.autofiled{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--ink-faint);margin-top:7px}

/* ── empty / caught-up state ─────────────────────────────────────────── */
.empty{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 26px;min-height:60%}
.empty.show{display:flex}
.empty .mark{font-family:var(--display);font-weight:600;font-size:28px;color:var(--ink);letter-spacing:-.01em;margin-bottom:8px}
.empty .sub{font-family:var(--serif);font-size:15px;color:var(--ink-soft);max-width:30ch;margin-bottom:14px}
.empty .next{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);
  border:1px solid var(--rule-strong);border-radius:999px;padding:6px 13px}

/* loading / error shells */
.notice{padding:40px 24px;text-align:center;color:var(--ink-soft);font-size:15px}
.notice .mono{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:8px}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .caret{display:none}
}