/* Light and dark themes for every Guessroo page. Pages are dark by default; the head snippet sets
   data-theme from the saved choice or the device setting before the first paint, and theme.js adds the switch. */
:root { --truth-text: var(--truth); }
:root[data-theme="light"] {
  --rock: #f6f4ef;
  --rock-2: #e9e5dc;
  --chalk: #171b22;
  --dust: #5a6271;
  --seam: #d2ccc0;
  --core: #1d232c;
  --truth: #ffc928;
  --truth-text: #8a5d00;
  color-scheme: light;
}
[data-theme="light"] :focus-visible { outline-color: var(--chalk); }
[data-theme="light"] .mark img { box-shadow: 0 3px 12px rgba(160, 110, 0, .3); }
[data-theme="light"] .realm { filter: saturate(.85) brightness(.95); }
[data-theme="light"] .realm.on { filter: none; }

/* Coloured slabs keep light text in both themes */
.verdict, .slab { --chalk: #eef1f5; --dust: #d3d9e2; color: var(--chalk); }
/* a quarter shade over the band keeps the light text readable on the brighter bands (ochre, olive, rose) */
.verdict, .slab { background-image: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)); }
.verdict p, .slab p { color: var(--chalk); }
.needle.truth b { color: #0f1217; }
.toast { color: var(--truth-text); }

/* The switch, added to the page header by theme.js */
header > :first-child { margin-right: auto; }
.icon-btn { flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--seam); background: transparent; color: var(--dust); display: inline-grid; place-items: center; cursor: pointer; transition: color .2s, border-color .2s; }
.icon-btn:hover { color: var(--chalk); border-color: var(--dust); }
.icon-btn svg { width: 17px; height: 17px; display: block; }
/* Place names on the Farroo maps */
.stage svg text, .route text { fill: var(--chalk); stroke: var(--rock-2); }
/* Scale labels sit on the coloured bands, so they stay light in both themes */
.ticks, .layer span { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.ticks { font-variant-numeric: normal; pointer-events: none; }

/* Social icons, added to the footer by theme.js */
footer .social { flex-basis: 100%; display: flex; gap: 10px; margin-top: 4px; }
footer .social svg { width: 18px; height: 18px; }