/* Stay Safe — shared by every page of the site, so a colour change is made
   once. Written for this app alone on 2026-10-06 rather than adapted from the
   sibling apps' site (Apple had just rejected other apps from this account
   under 4.3, and reviewers open the privacy and support links).

   Always dark, like the app (app/lib/theme.dart): near-black field, cyan
   accent — never one of the five risk colours, which mean something. Section
   headings are small spaced capitals with a rule, like the "MOST COMMON HERE"
   label in the app; the risk scale runs across the top of every page. */
:root {
  color-scheme: dark;
  --bg: #121214;
  --panel: #1C1C1E;
  --line: #3A3A3F;
  --ink: #F2F2F5;
  --muted: #9A9AA2;
  --accent: #64D2FF;
  --scale: linear-gradient(90deg,
    #2ECC71 0 20%, #F1C40F 20% 40%, #E67E22 40% 60%, #E74C3C 60% 80%, #0E0E10 80%);
}

* { box-sizing: border-box; }

html { background: var(--bg); }
body {
  margin: 0 auto;
  padding: 0 1rem 4rem;
  max-width: 50rem;
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
        Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
body::before {
  content: "";
  display: block;
  height: 4px;
  margin: 0 -1rem 2.5rem;
  background: var(--scale);
}

h1 { font-size: 2rem; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .4rem; }
h2 {
  display: flex; align-items: center; gap: .8rem;
  margin: 3rem 0 1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
h3 { font-size: 1.08rem; margin: 1.8rem 0 .3rem; }
p, li { color: var(--ink); }
.date { color: var(--muted); font-size: .92rem; margin: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

nav { margin: 0 0 2rem; font-size: .9rem; }
nav a { margin-right: 1.2rem; text-decoration: none; }
nav a:first-child { font-weight: 700; }

.hero { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; }
.hero img { width: 84px; height: 84px; border-radius: 20px; }

.scale { display: none; } /* the bar along the top of the page replaces it */

.box {
  margin: 1.8rem 0;
  padding: 1.1rem 1.3rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.box p:first-child { margin-top: 0; }
.box p:last-child { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }

.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.shots img { width: 100%; height: auto; border-radius: 26px; border: 1px solid var(--line); }

/* Coverage map (coverage-map.js) — coverage only, never risk colours. */
.map-wrap { position: relative; margin: 1.2rem 0 .6rem; }
#coverage-map {
  display: block; width: 100%; aspect-ratio: 2 / 1; min-height: 240px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  touch-action: none; cursor: grab;
}
#coverage-map:active { cursor: grabbing; }
#coverage-tip {
  position: absolute; z-index: 2; max-width: 18rem; pointer-events: none;
  padding: .5rem .7rem; font-size: .85rem; line-height: 1.4;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.map-zoom { position: absolute; right: .6rem; top: .6rem; display: flex; flex-direction: column; gap: .3rem; }
.map-zoom button {
  width: 2rem; height: 2rem; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; padding: 0; list-style: none; font-size: .88rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: .45rem; color: var(--muted); }
.legend i { width: .8rem; height: .8rem; border-radius: 3px; }
#coverage-summary { color: var(--muted); font-size: .9rem; margin: .2rem 0 0; }

footer {
  margin-top: 4rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: .86rem; color: var(--muted);
}
footer p { color: var(--muted); }
footer nav { margin-bottom: 1rem; }

@media (max-width: 480px) {
  h1 { font-size: 1.6rem; }
  .hero img { width: 64px; height: 64px; border-radius: 16px; }
}