/* The kit's colours: the Story Bible's Pearl and Dark palettes (storybible/core.py PALETTES). */
:root {
  --bg: #f3f0f7; --fg: #2a2637; --panel: #faf8fc; --field: #fffdfa; --sel: #e9e4f6;
  --link: #5b4e9c; --muted: #5d586e; --accent: #6c5fae; --accent-fg: #ffffff;
  --line: #e4dfec; --glow: #cfc4ec; --glass: rgba(251, 249, 254, .82); --gold: #b4924c; --shadow: #e2dcea;
  --bad: #a33a3f; --map-filter: none;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #1b1613; --fg: #f0e6d6; --panel: #261f1a; --field: #211b17; --sel: #3d3123;
  --link: #ecc98c; --muted: #bcae98; --accent: #e3ba6e; --accent-fg: #1b1613;
  --line: #372d25; --glow: #6b5236; --glass: rgba(42, 34, 28, .86); --gold: #d8a85c; --shadow: #120e0b;
  --bad: #f2a08c; --map-filter: brightness(.82) contrast(1.05) sepia(.15);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1613; --fg: #f0e6d6; --panel: #261f1a; --field: #211b17; --sel: #3d3123;
    --link: #ecc98c; --muted: #bcae98; --accent: #e3ba6e; --accent-fg: #1b1613;
    --line: #372d25; --glow: #6b5236; --glass: rgba(42, 34, 28, .86); --gold: #d8a85c; --shadow: #120e0b;
    --bad: #f2a08c; --map-filter: brightness(.82) contrast(1.05) sepia(.15);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font: 17px/1.5 "EB Garamond", Georgia, serif;
}
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: Consolas, monospace; font-size: .85em; }

/* the top bar every page shares */
#bar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.brand { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.brand .sigil { color: var(--gold); font-size: 14px; }
.brand .name { font: 600 24px/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
.brand .mode { font-style: italic; color: var(--bad); font-size: 14px; }
.nav { display: flex; gap: 4px; }
.nav a {
  color: var(--muted); text-decoration: none; padding: 3px 12px; border-radius: 999px; font-size: 16px;
}
.nav a:hover { color: var(--fg); background: var(--sel); }
.nav a.on { color: var(--fg); background: var(--sel); }
.ghost {
  border: 1px solid var(--line); background: transparent; border-radius: 999px;
  width: 36px; height: 36px; cursor: pointer; font-size: 18px; flex: none;
}
.ghost:hover { border-color: var(--accent); }
h2 { font: 600 15px/1.2 "Cormorant Garamond", Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.muted { color: var(--muted); }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--field); cursor: pointer; font-size: 16px;
}
.chip:hover { border-color: var(--accent); }
.chip.on { border-color: var(--accent); background: var(--sel); }

/* the phone version's "Load my kit" card (shared/pocket.js) */
#pocket { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(circle at 50% 30%, var(--panel), var(--bg)); }
.pocket-card { max-width: 420px; text-align: center; }
.pocket-card h1 { font: 600 34px "Cormorant Garamond", Georgia, serif; margin: 4px 0 10px; }
.pocket-sigil { color: var(--gold); font-size: 30px; }
.pocket-muted { color: var(--muted); font-size: 15px; }
.pocket-btn { display: inline-block; margin-top: 10px; border-radius: 999px; padding: 10px 24px; cursor: pointer;
  background: var(--accent); color: var(--accent-fg); font-weight: 500; box-shadow: 0 6px 18px var(--glow); }
.pocket-plain { display: block; margin: 12px auto 0; border: 0; background: none; color: var(--link); cursor: pointer; }
.pocket-error { color: var(--bad); }

@media (max-width: 760px) {
  #bar { padding: 8px 16px; gap: 8px; }
  .brand .mode, .brand .name, .nav .long { display: none; }   /* on a phone: the diamond, then Map and Names */
  .nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }   /* slides sideways if it must */
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 3px 9px; white-space: nowrap; }
  .nav a.on { display: none; }                                /* no room for a link to the page you're on */
}