/* ══════════════════════════════════════════════════════════════════════════════
   rotcodrm — shared design system  (warm editorial)
   Single source of truth for palette, type, and shared components.
   Linked LAST in <head> so it overrides each page's legacy inline <style>.
   Added 2026-08-08.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#FAFAFA;            /* neutral paper */
  --surface:#FFFFFF;       /* cards */
  --surface-alt:#F4F4F5;   /* subtle fills */
  --ink:#18181B;           /* near-black text */
  --ink-2:#52525B;         /* secondary text */
  --ink-3:#8A8A93;         /* hints / meta */
  --line:#E7E7EA;          /* hairline borders */
  --line-2:#D4D4D8;        /* stronger borders */
  --accent:#4F46E5;        /* indigo — the one site accent, shared with the tracker */
  --accent-ink:#4338CA;    /* accent text on light */
  --accent-soft:#EEF0FF;   /* accent tint fill */
  --good:#1E6B4A; --bad:#B23C2E; --warn:#A16207;
  --radius:10px; --radius-lg:14px; --radius-pill:999px;
  --font-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Menlo,monospace;
  --maxw:1080px;
}

/* ── base ─────────────────────────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg)!important;color:var(--ink)!important;
  font-family:var(--font-sans)!important;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.65;
}
h1,h2,h3,.serif{font-family:var(--font-serif)!important;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
a{color:var(--accent-ink)}
::selection{background:var(--accent-soft)}

/* ── navbar (shared 5/5; currently grey on most, dark on news) ─────────────── */
.navbar{
  background:var(--surface)!important;color:var(--ink)!important;
  height:56px!important;border-bottom:1px solid var(--line)!important;
  gap:8px!important;padding:0 20px!important;backdrop-filter:none!important;
}
.brand{color:var(--accent)!important;font-family:var(--font-serif)!important;font-weight:700!important;text-decoration:none}
.nav-quote,#navQuote{
  font-family:var(--font-serif)!important;font-style:italic!important;
  color:var(--ink-3)!important;font-size:13px!important;
}
.np,.nav-pill{
  color:var(--ink-2)!important;font-size:13px!important;text-decoration:none;
  padding:6px 12px!important;border-radius:var(--radius-pill)!important;
  border:1px solid transparent!important;background:none!important;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.np:hover,.nav-pill:hover{background:var(--surface-alt)!important;color:var(--ink)!important}
.np.active,.nav-pill.active{background:var(--surface-alt)!important;color:var(--ink)!important;border-color:var(--line-2)!important}

/* ── shared components ─────────────────────────────────────────────────────── */
.tm-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px}
.tm-btn{
  font-family:var(--font-sans);font-size:14px;padding:10px 22px;
  border-radius:var(--radius-pill);border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .12s ease;
}
.tm-btn:hover{border-color:var(--ink-3);background:var(--surface-alt)}
.tm-btn:active{transform:scale(.97)}
.tm-btn-primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tm-btn-primary:hover{opacity:.9;background:var(--ink)}
.tm-chip{
  display:inline-flex;align-items:center;padding:6px 14px;margin:0 6px 8px 0;
  border:1px solid var(--line-2);border-radius:var(--radius-pill);
  background:var(--surface);font-size:14px;color:var(--ink);cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.tm-chip:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}
.tm-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

/* ── responsive: S24 Ultra (~412) and Galaxy Fold 4 (folded ~344, open ~768) ─ */
@media(max-width:820px){
  .navbar{padding:0 12px!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .navbar::-webkit-scrollbar{display:none}
  .np,.nav-pill{padding:6px 10px!important;white-space:nowrap;flex-shrink:0}
}
@media(max-width:412px){
  .nav-quote,#navQuote{display:none!important}   /* no room beside the app links on a phone */
  body{line-height:1.6}
}
@media(max-width:360px){                          /* Fold 4 folded / small S-series */
  .navbar{height:52px!important;padding:0 8px!important}
  .np,.nav-pill{font-size:12px!important;padding:5px 8px!important}
}
/* Comfortable tap targets on touch */
@media(hover:none){
  .np,.nav-pill,.tm-btn,.tm-chip{min-height:38px}
}

/* ── SURFACES ──────────────────────────────────────────────────────────────
   Journal is the one page whose colour he likes, so it becomes the house
   style: white cards on near-white, one hairline border, a soft neutral fill
   in the inputs and labels in small grey caps. Nothing saturated, nothing
   tinted. News opts out of the card part on purpose — a newspaper page is
   flat by design and its own rules are declared later.
   ────────────────────────────────────────────────────────────────────────── */
.card,.panel,.box,.tm-card,.sec-card,.stat-card,.entry-card{
  background:#fff;border:1px solid #ECECEE;border-radius:14px;
  box-shadow:0 1px 2px rgba(24,24,27,.04);
}
input[type=text],input[type=number],input[type=search],input[type=email],
input[type=password],input[type=date],textarea,select{
  background:#F7F7F8;border:1px solid #E4E4E7;border-radius:10px;color:#27272A;
}
input:focus,textarea:focus,select:focus{border-color:#4F46E5;background:#fff;outline:none}
::placeholder{color:#A1A1AA}
hr{border:none;border-top:1px solid #ECECEE}
