/* GRIDvisit — self-hosted, single stylesheet, no webfonts.
 *
 * GV-WEB-17 / P9: nothing loads from a third party, so there is no CDN, no
 * Google Fonts and no analytics. The system font stack is not a compromise
 * here — it removes a render-blocking download, which is most of how
 * GV-WEB-01's "under 2 s on 3G" and GV-WEB-16's Lighthouse ≥ 85 get met.
 *
 * GV-WEB-18: every colour derives from --brand, set per bygd from its own
 * configuration. A community rebrands by changing one value, not a stylesheet.
 *
 * Sizes are in rem so text survives 200% zoom (WCAG 1.4.4), and nothing is
 * pinned to a viewport height.
 */

:root {
  --brand: #2e5d34;               /* overridden per bygd in the page head */
  --ink: #1a1a1a;                 /* 15.3:1 on --paper — well past AA */
  --ink-soft: #55595c;            /* 7.0:1 on --paper, passes AA for body text */
  --paper: #fbfaf7;
  --rule: #d9d5cc;
  --warn-bg: #fdf6e3;
  --warn-ink: #6b4e00;            /* 7.4:1 on --warn-bg */
  --measure: 38rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ececec;
    --ink-soft: #b6b6b6;
    --paper: #16181a;
    --rule: #33383c;
    --warn-bg: #2b2517;
    --warn-ink: #f0d798;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: var(--measure); margin: 0 auto; }

/* Keyboard users must be able to reach the content past the header (WCAG 2.4.1).
 * Visible on focus rather than removed — a skip link nobody can see is a skip
 * link nobody can use. */
.skip {
  position: absolute; left: -9999px;
  background: var(--brand); color: #fff; padding: .6rem 1rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

/* A visible focus ring everywhere. Never outline: none. */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

header.site {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1rem 0;
  display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--rule);
}

.brand {
  font-size: 1.15rem; font-weight: 600;
  color: var(--brand); text-decoration: none;
}
.brand:hover, .brand:focus-visible { text-decoration: underline; }

/* Language switcher. Targets are ≥ 44 px so they are usable with gloves and
 * cold hands, which is the actual field condition here. */
.langs { display: flex; gap: .25rem; }
.lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem;
  border: 1px solid var(--rule); border-radius: .25rem;
  color: var(--ink); text-decoration: none; font-size: .85rem;
}
.lang.current {
  background: var(--brand); color: #fff; border-color: var(--brand);
  font-weight: 600;
}

h1 { font-size: 1.6rem; line-height: 1.25; margin: 1.5rem 0 .5rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 .35rem; }

a { color: var(--brand); }

.places { list-style: none; padding: 0; margin: 0; }
.places li {
  padding: .75rem 0;
  border-bottom: 1px solid var(--rule);
}
/* The whole row is comfortably tappable, not just the words. */
.places a {
  display: inline-block; min-height: 2.75rem; line-height: 2.75rem;
  font-size: 1.05rem;
}

.category, .coords, .dialect, .narrator {
  color: var(--ink-soft); font-size: .9rem; margin: .15rem 0;
}
.coords { font-variant-numeric: tabular-nums; }

/* GV-WEB-02 and GV-CON-03 notices. Deliberately plain and adjacent to the text
 * they describe: a marker the reader skims past has not done its job. Colour is
 * never the only signal (WCAG 1.4.1) — they carry their own words. */
.notice {
  margin: .35rem 0 0;
  padding: .4rem .6rem;
  background: var(--warn-bg); color: var(--warn-ink);
  border-left: 3px solid currentColor;
  font-size: .85rem;
}

.empty { color: var(--ink-soft); font-style: italic; }

.story { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.story .i18n { margin: .5rem 0; }

.sources summary { cursor: pointer; color: var(--ink-soft); font-size: .9rem; }

.accessibility { color: var(--ink-soft); font-size: .9rem; padding-left: 1.1rem; }

footer.site {
  max-width: var(--measure);
  margin: 3rem auto 0; padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
/* P10: GRID appears here and nowhere else. */
.powered { color: var(--ink-soft); font-size: .8rem; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Offline download (GV-WEB-07). The section is hidden until script confirms the
 * browser can do it, so these styles only ever apply to a working control. */
.offline-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.offline-actions button {
  min-height: 2.75rem; padding: 0 1rem;
  background: var(--brand); color: #fff;
  border: 1px solid var(--brand); border-radius: .25rem;
  font: inherit; cursor: pointer;
}
.offline-actions button[disabled] { opacity: .6; cursor: progress; }
.offline-status, .offline-updated {
  margin: .25rem 0; color: var(--ink-soft); font-size: .9rem;
}

/* Pass (GV-WEB-08). */
.pass-progress { font-size: 1.05rem; margin: .5rem 0; }
.pass-pending { color: var(--ink-soft); font-size: .9rem; }