/* The survey sheet at the foot of the page (scripts/survey-sheet.mjs, survey-sheet.js) and the big square wordmark
   under it (megamark.js): an engineering drawing of South Africa on the ink ground, 1 px lines, notes in thin green
   boxes on leader lines, labels and figures in Martian Mono. The footer that follows is drawn on the same sheet,
   between dashed rules. Phones and tablets: the sheet stacks and the notes are a list under the map; from 1200 px the
   notes hang off the map, a set at a time. Without the script everything is drawn and listed; with reduced motion nothing moves. */
.sf {
  --sf-ink: var(--on-core);
  --sf-ink-2: var(--on-core-2);
  --sf-grid: color-mix(in srgb, var(--on-core) 15%, transparent);
  --sf-rule: color-mix(in srgb, var(--on-core) 24%, transparent);
  margin-top: clamp(56px, 8vw, 112px);
  background: var(--core);
  color: var(--sf-ink-2);
}
.sf h2 { margin: 0 0 14px; font: 600 clamp(2rem, 8vw, 2.9rem)/1.02 var(--sans); letter-spacing: -.035em; color: var(--sf-ink); }

/* The map: the plot is a button (click, tap, Enter); the notes sit over it on wide screens and under it on phones. */
.sf-plot { position: relative; cursor: crosshair; touch-action: manipulation; -webkit-tap-highlight-color: transparent; outline: none; }
.sf-plot:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
.sf-coast { fill: none; stroke: var(--sf-ink); stroke-width: calc(var(--u, 1.5) * 1.25px); stroke-linejoin: round; }
.sf-scale path { fill: none; stroke: var(--sf-ink-2); stroke-width: calc(var(--u, 1.5) * 1px); }
.sf-north path { fill: var(--sf-ink-2); }
.sf-lead { fill: none; stroke: var(--accent); stroke-width: calc(var(--u, 1.5) * 1px); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--ease-out); }
.sf-lead.on { stroke-dashoffset: 0; }

/* Pins: a green point with its note's number; yours is ink-white, dropped in. Never pulsing. */
.sf-pin { position: absolute; width: 0; height: 0; pointer-events: none; }
.sf-pin::before { content: ''; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--core); }
.sf-pin b { position: absolute; left: 8px; top: -17px; font: 400 .75rem/1 var(--mono); color: var(--accent); }
.sf-you::before { left: -5px; top: -5px; width: 10px; height: 10px; background: var(--sf-ink); }
.sf-you::after { content: ''; position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border: 1px solid var(--accent); border-radius: 50%; }

/* Notes: a thin green box, its place and point in mono, then each figure, which links to its page. */
.sf-over { margin-top: 20px; }
.sf-note, .sf-you-box { position: relative; margin: 0; padding: 10px 12px 11px; border: 1px solid var(--accent); background: var(--core); }
.sf-you-box { margin-bottom: 10px; padding-right: 36px; }
.sf-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; font: 400 .75rem/1.5 var(--mono); color: var(--sf-ink); }
.sf-k b { font-weight: 400; color: var(--accent); }
.sf-k span { white-space: nowrap; }
.sf-k i { margin-left: auto; font-style: normal; font-size: .9em; color: var(--sf-ink-2); white-space: nowrap; }
.sf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1px 10px; padding: 7px 0 0; color: inherit; text-decoration: none; }
.sf-row + .sf-row { margin-top: 7px; border-top: 1px dashed var(--sf-rule); }
.sf-l, .sf-n { font: 400 .75rem/1.45 var(--mono); }
.sf-l::after { content: '\00a0→'; color: var(--accent); }
.sf-n { grid-column: 1 / -1; }
.sf-v { display: block; margin: 0; font: 600 1.15rem/1.15 var(--sans); letter-spacing: -.02em; color: var(--sf-ink); white-space: nowrap; }
.sf-row .sf-v { grid-column: 2; grid-row: 1; text-align: right; }
.sf-row:hover, .sf-row:focus-visible { color: inherit; }
.sf-row:hover .sf-v, .sf-row:focus-visible .sf-v { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sf-you-box .sf-v { margin-top: 4px; font-size: 1.05rem; white-space: normal; }
.sf-go { display: inline-block; margin-top: 6px; font: 400 .75rem/1.4 var(--mono); color: var(--accent); }
.sf-go:hover { color: var(--sf-ink); }
.sf-x { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border: 0; background: none; color: var(--sf-ink-2); font: 400 1.1rem/1 var(--sans); cursor: pointer; }
.sf-x:hover { color: var(--sf-ink); }
.sf-next { display: none; min-height: 32px; padding: 0 12px; border: 1px solid var(--sf-rule); border-radius: 0; background: none; color: var(--sf-ink); font: 400 .75rem/1 var(--mono); cursor: pointer; }
.sf-next:hover { border-color: var(--accent); }

/* Drawn on once, when it scrolls into view: the coast traces itself, the grid and labels come up under it. */
.sf-js .sf-coast { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sf-js .sf-scale, .sf-js .sf-north, .sf-js .sf-pin:not(.sf-you) { opacity: 0; }
.sf-drawn .sf-coast { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--ease-out); }
.sf-drawn .sf-scale, .sf-drawn .sf-north { opacity: 1; transition: opacity .9s ease .2s; }
.sf-drawn .sf-pin:not(.sf-you) { opacity: 1; transition: opacity .5s ease 1.2s; }
.sf-drawn.sf-ready .sf-pin:not(.sf-you) { transition: opacity .35s ease; }
.sf-you.drop { animation: sf-drop .45s var(--ease-out); }
@keyframes sf-drop { from { opacity: 0; transform: translateY(-16px); } }

@media (min-width: 1200px) {
  .sf-over { position: absolute; inset: 0; margin: 0; pointer-events: none; }
  .sf-note, .sf-you-box { position: absolute; left: var(--x); top: var(--y); width: 200px; margin: 0; transform: translate(0, -50%); pointer-events: auto; }
  .sf-note[data-side="l"], .sf-you-box[data-side="l"] { transform: translate(-100%, -50%); }
  .sf-note { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
  .sf-note.on { opacity: 1; visibility: visible; transition: opacity .35s ease .35s, visibility 0s; }
  .sf-drawn .sf-pin:not(.on):not(.sf-you) { opacity: .4; }
  .sf-pin b { display: none; }
  .sf-you-on .sf-note.on { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
  .sf-you-on .sf-lead:not(.sf-you-lead) { opacity: 0; }
  .sf-next { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-js .sf-coast { stroke-dasharray: none; }
  .sf *, .sf-drawn .sf-coast { transition: none !important; animation: none !important; }
}

/* The wordmark: full-bleed, its height follows its width (two lines on phones and tablets, one from 960 px), so
   nothing moves when the canvas arrives. Its colours are tokens megamark.js reads: as the home page's catalogue, the
   released datasets are the colour of the letters, the one in development green, the unmapped ones faint. */
.mm { --mm-a: var(--ink); --mm-b: var(--ink-3); --mm-ea: var(--ink); --mm-dev: var(--accent); --mm-wave: var(--accent); --mm-bg: var(--bg); margin: 0; }
.sf .mm { --mm-a: var(--on-core); --mm-b: var(--on-core-2); --mm-ea: var(--on-core); --mm-bg: var(--core); margin-top: clamp(56px, 9vw, 128px); padding-bottom: clamp(40px, 6vw, 72px); }
.mm-stage { position: relative; aspect-ratio: 2 / 1; padding-inline: var(--gutter); }
.mm-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: manipulation; }
.mm-alt { display: flex; flex-wrap: wrap; align-content: center; gap: 0 .26em; height: 100%; margin: 0; font: 650 17vw/1 var(--sans); letter-spacing: -.03em; color: var(--mm-a); }
.mm-alt b { font-weight: 400; color: var(--mm-b); }
.mm-on .mm-alt { visibility: hidden; }
.mm-tip { position: absolute; left: 0; top: 0; z-index: 2; width: max-content; max-width: min(300px, 80vw); margin: 0; padding: 7px 10px 8px; border: 1px solid var(--accent); background: var(--core); color: var(--on-core); font: 400 .75rem/1.5 var(--mono); pointer-events: none; }
.mm-tip span { display: block; color: var(--on-core-2); }
.mm-k { display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: color-mix(in srgb, var(--mm-a) 20%, var(--mm-bg)); }
.mm-k.ea { background: var(--mm-ea); }
.mm-k.dev { background: var(--mm-dev); }
@media (min-width: 960px) {
  .mm-stage { aspect-ratio: 6 / 1; }
  .mm-alt { font-size: 9vw; }
}

/* The footer, drawn on the sheet between dashed rules. */
.sf + .foot {
  --fr: color-mix(in srgb, var(--on-core) 24%, transparent);
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  border-top: 0;
  background: repeating-linear-gradient(90deg, var(--fr) 0 4px, transparent 4px 9px) left top / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--fr) 0 4px, transparent 4px 9px) left bottom calc(28px + env(safe-area-inset-bottom, 0px)) / 100% 1px no-repeat, var(--core);
  color: var(--on-core-2);
}
.sf + .foot a:hover { color: var(--on-core); }
.sf + .foot .brand, .sf + .foot .brand:hover, .sf + .foot .foot-name { color: var(--on-core); }
.sf + .foot .brand b, .sf + .foot .foot-name b, .sf + .foot .wm-d .ch::after { color: var(--on-core-2); }
/* The four columns of links and the legal line (site review N-3), on the dark sheet. */
.sf + .foot :is(.foot-col a, .foot-legal a) { color: var(--on-core-2); }
.sf + .foot :is(.foot-col a, .foot-legal a):hover { color: var(--on-core); }
.sf + .foot .foot-h { color: var(--on-core); }
.sf + .foot .foot-meta { border-top-color: var(--fr); }
/* Credits on the dark sheet: the links' grey, about 9:1 (site review A-012; --ink-3 gave 3:1). */
.sf + .foot .credit, .sf + .foot .credit a { color: var(--on-core-2); }