/* ============================================================
   Field Manuals — shared design system
   Fraunces (display) · Inter (UI) · IBM Plex Mono (labels)
   Light + dark via prefers-color-scheme. Per-app accent is set
   in each page's own stylesheet via --accent / --accent-soft.
   ============================================================ */

:root{
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-lg:18px; --r:14px; --r-sm:10px;
  --appbar-h:calc(52px + env(safe-area-inset-top));

  /* neutrals — light (warm paper) */
  --bg:#F4F2EB;
  --card:#FFFFFF;
  --card-2:#FAF8F1;
  --line:#E2DDD0;
  --line-soft:#EAE6DB;
  --ink:#1E2433;
  --ink-soft:#3C4557;
  --muted:#6A7280;
  --deep:#1B2130;            /* dark editorial panel used on light pages */
  --deep-ink:#E9E7DF;        /* text on --deep */
  --bar:rgba(244,242,235,.88);
  --shadow:0 1px 2px rgba(30,36,51,.05), 0 6px 20px rgba(30,36,51,.06);
  --ok:#2E7D5B;
  --danger:#A93B2E;
  --danger-soft:rgba(169,59,46,.08);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#12161F;
    --card:#1A202B;
    --card-2:#161C26;
    --line:#2A3140;
    --line-soft:#232A38;
    --ink:#E7EAF1;
    --ink-soft:#C3C9D6;
    --muted:#8E97A9;
    --deep:#0D1119;
    --deep-ink:#E4E2DA;
    --bar:rgba(18,22,31,.88);
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28);
    --ok:#5FB58A;
    --danger:#D47B6A;
    --danger-soft:rgba(212,123,106,.10);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
::selection{background:var(--accent,#8C6B2F);color:#fff}
:focus-visible{outline:2.5px solid var(--accent,#8C6B2F);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- shared app bar ---------- */
.appbar{
  position:sticky;top:0;z-index:100;
  background:var(--bar);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
  padding-top:env(safe-area-inset-top);
}
.appbar .bar-in{
  max-width:680px;margin:0 auto;height:52px;
  display:flex;align-items:center;gap:12px;padding:0 14px;
}
.appbar .back{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:50%;
  color:var(--ink);background:var(--card);border:1px solid var(--line);
  text-decoration:none;box-shadow:var(--shadow);
}
.appbar .back svg{width:15px;height:15px;display:block}
.appbar .bar-title{
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.appbar .bar-dot{
  margin-left:auto;flex:none;width:9px;height:9px;border-radius:50%;
  background:var(--accent,#8C6B2F);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent,#8C6B2F) 18%, transparent);
}