/* ============================================================
   Tokens — the journey-shift script overwrites the palette at runtime
   (see js/journey-shift.js and theme.json → palette.stops)
   ============================================================ */
:root {
  --bg: #e8dcc0; --paper: #f7efdc; --paper-2: #efe3c8;
  --ink: #33261a; --mute: #7a6248; --line-rgb: 51, 38, 26;
  --accent: #55813a; --accent-ink: #fff; --gold: #a8781f; --danger: #a3271b; --good: #3f7a35;
  --line: rgba(var(--line-rgb), .16); --line-strong: rgba(var(--line-rgb), .32);
  --wash: rgba(var(--line-rgb), .05);
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body: 'IM Fell English', Georgia, 'Times New Roman', serif;
  --radius: 14px; --radius-sm: 9px; --gap: 16px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 10px 26px -16px rgba(50, 30, 10, .45);
  --shadow-lift: 0 18px 40px -18px rgba(40, 24, 8, .55);
  --nav-h: 66px; --side-w: 244px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
[data-mode="dark"] {
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 30px -16px rgba(0, 0, 0, .75);
  --shadow-lift: 0 22px 44px -18px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100dvh; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.45;
  overflow-x: hidden; transition: background-color .8s var(--ease), color .8s var(--ease);
}
body::before { /* paper grain over the desk */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255, 255, 255, .22), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, .10), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-mode="dark"] body::before { opacity: .35; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums lining-nums; letter-spacing: .02em; }
.display { font-family: var(--font-display); letter-spacing: .06em; }
.mute { color: var(--mute); }
.italic { font-style: italic; }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.up { color: var(--good); } .down { color: var(--danger); }
.danger { color: var(--danger); } .good { color: var(--good); } .gold { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }

/* ============================================================ shell */
.app { position: relative; z-index: 1; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.main { min-width: 0; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px); }
.view { max-width: 1180px; margin: 0 auto; padding: 4px 16px 24px; }
.topbar { max-width: 1180px; margin: 0 auto; padding: 18px 16px 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.topbar h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 5.4vw, 32px); letter-spacing: .05em; line-height: 1.1; }
.topbar .sub { margin: 4px 0 0; font-style: italic; color: var(--mute); font-size: 15.5px; }
.topbar .actions { display: flex; gap: 8px; flex: none; }
.brandline { display: none; }

.sidebar { display: none; }
.bottomnav {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding: 6px 6px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--paper) 94%, transparent); border-top: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, .45);
}
.navbtn {
  appearance: none; background: none; border: 0; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--mute); font-family: var(--font-display); font-size: 10.5px; letter-spacing: .05em; text-decoration: none; padding: 4px 2px; min-width: 0;
}
.navbtn svg { width: 24px; height: 24px; }
.navbtn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbtn[aria-current="page"] { color: var(--ink); background: var(--wash); }
.navbtn[aria-current="page"] svg { color: var(--accent); }

@media (min-width: 1024px) {
  .app { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .main { padding-bottom: 40px; }
  .bottomnav { display: none; }
  .sidebar {
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; padding: 22px 14px 18px; gap: 4px;
    border-right: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 55%, transparent);
  }
  .sidebar .brand { padding: 4px 10px 16px; }
  .sidebar .brand b { display: block; font-family: var(--font-display); font-size: 21px; letter-spacing: .06em; }
  .sidebar .brand i { color: var(--mute); font-size: 14px; }
  .sidebar .navbtn { flex-direction: row; justify-content: flex-start; gap: 12px; font-size: 13px; padding: 10px 12px; letter-spacing: .07em; text-transform: none; }
  .sidebar .navbtn svg { width: 22px; height: 22px; flex: none; }
  .sidebar .spacer { flex: 1; }
  .sidebar .mini { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; background: var(--paper); }
  .topbar { padding-top: 26px; }
}

/* the Road page is full-bleed */
body[data-page="road"] .topbar { display: none; }
body[data-page="road"] .view { max-width: none; padding: 0; }