/* ==========================================================================
   THE LAST TREES OF MALÉ. Field register.
   --------------------------------------------------------------------------
   Direction: a specimen register, not a website. Record data is set in mono
   so it reads as data. The archive is monochrome; the only colour in it is
   vermilion, and vermilion means a tree is gone or going.

   Contrast is verified in both themes: every text pair >= 4.5:1, every
   control border and focus ring >= 3:1. Do not lighten without re-checking.
   Layout uses logical properties, so the whole interface mirrors for Dhivehi.
   ========================================================================== */

:root {
  --paper:  #131417;
  --sheet:  #1C1E22;
  --ink:    #E8E8E3;
  --muted:  #9B9E98;
  --verm:   #FF7C5E;   /* the only colour. loss, and things heading that way */
  --rule:   #2F3238;   /* hairlines */
  --edge:   #80847D;   /* control borders */
  --focus:  #7FB2E5;
  --on-verm:#131417;

  --font-text:  "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-thaana:"Faruma", "A_Faruma", "MV Faseyha", "Noto Sans Thaana", var(--font-text);
  /* Thaana sits optically smaller than Latin at the same size, so it is set
     up a step wherever the two meet. */
  --thaana-scale: 1.18;

  --t-fast: 120ms;
  --t:      180ms;
  --ease:   cubic-bezier(.2, .7, .2, 1);

  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* Native controls and scrollbars follow the theme too. */
  color-scheme: dark;
}

/* Light is the opt-in, so it is the only palette that needs a selector.

   Dark being the base means it also survives with no JavaScript, and it kills
   the duplication the previous arrangement needed: a media query cannot sit in
   a selector list, so supporting both a system preference and an override
   meant writing dark out twice and keeping the copies in step. */
:root[data-theme="light"] {
  --paper:  #E6E6E1;   /* mount board */
  --sheet:  #F3F3EF;   /* the specimen sheet itself */
  --ink:    #16171A;
  --muted:  #565853;
  --verm:   #A82A12;   /* the only colour. loss, and things heading that way */
  --rule:   #C4C4BC;   /* hairlines */
  --edge:   #63665F;   /* control borders */
  --focus:  #0F4C81;
  --on-verm:#F3F3EF;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}

/* Thaana needs more leading and a larger optical size than Archivo. */
[lang="dv"] { font-family: var(--font-thaana); line-height: 2; font-size: calc(1rem * var(--thaana-scale)); }
:root[lang="dv"] body { font-family: var(--font-thaana); line-height: 2; }


/* Latin fragments inside a Dhivehi page keep the Latin stack: a scientific
   name or a record number should not be set in a Thaana face. */
:root[lang="dv"] [lang="en"], :root[lang="dv"] [lang="la"] { font-family: var(--font-text); }
:root[lang="dv"] .mono, :root[lang="dv"] .rec-id, :root[lang="dv"] .num { font-family: var(--font-mono); }

h1, h2, h3 { margin-block: 0 .4em; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.4rem); }
h2 { font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); }
h3 { font-size: 1.0625rem; }
p  { margin-block: 0 1em; max-inline-size: 66ch; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

/* Condensed caps for labels: the specimen-label voice. Used only on
   column headers, eyebrows and stamps, never on running text. */
.label {
  font-family: var(--font-text);
  font-variation-settings: "wdth" 80;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  color: var(--muted);
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; inset-block-start: -100%; inset-inline-start: 0; z-index: 1000;
  background: var(--ink); color: var(--paper); padding: .8rem 1.25rem;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { inset-block-start: 0; }

/* Width is a tool, not a constant: three deliberate measures. */
.wrap   { inline-size: min(100% - (2 * var(--gutter)), 1320px); margin-inline: auto; }
.narrow { inline-size: min(100% - (2 * var(--gutter)), 68ch);   margin-inline: auto; }
.bleed  { inline-size: 100%; }

/* ---------- masthead ---------------------------------------------------- */
.masthead { border-block-end: 2px solid var(--ink); background: var(--paper); }
.masthead-top {
  display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap;
  padding-block: .9rem;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
  color: var(--ink); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em;
  margin-inline-end: auto; text-transform: uppercase;
  font-variation-settings: "wdth" 88;
}
.wordmark:hover .mark { transform: rotate(-8deg); }
.mark { flex: none; transition: transform var(--t) var(--ease); }

.nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a {
  display: inline-flex; align-items: center; min-block-size: 44px;
  text-decoration: none; font-weight: 500; color: var(--muted);
  border-block-end: 2px solid transparent; transition: color var(--t-fast) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 700; border-block-end-color: var(--verm); }

/* The metadata strip. Says what this is, in the register's own voice. */
.colophon {
  border-block-start: 1px solid var(--rule);
  padding-block: .5rem .6rem;
  font-family: var(--font-mono); font-size: .72rem; color: var(--muted);
  display: flex; gap: .4rem 1rem; flex-wrap: wrap; text-transform: uppercase; letter-spacing: .04em;
}
.colophon b { color: var(--ink); font-weight: 500; }

/* ---------- buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 44px; padding-inline: 1.1rem; border-radius: 0;
  font: inherit; font-weight: 600; cursor: pointer;
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:hover .ico path, .btn:hover .ico circle { stroke-dashoffset: 0; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--verm); border-color: var(--verm); color: var(--on-verm); }
.btn-lg { min-block-size: 52px; padding-inline: 1.6rem; }

/* Icons draw themselves in on hover. One gesture, reused everywhere. */
.ico path, .ico circle, .ico rect {
  stroke-dasharray: 64; stroke-dashoffset: 0;
  transition: stroke-dashoffset 420ms var(--ease);
}
.reactive:hover .ico path, .reactive:hover .ico circle,
.reactive:focus-visible .ico path, .reactive:focus-visible .ico circle { stroke-dashoffset: 64; }

/* ---------- the ledger (headline totals) -------------------------------- */
.ledger {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  list-style: none; margin: 0; padding: 0;
  border-block: 1px solid var(--rule);
}
.ledger li { padding: 1.1rem 0 1.2rem; padding-inline-end: 1rem; }
.ledger li + li { border-inline-start: 1px solid var(--rule); padding-inline-start: 1rem; }
.ledger b {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); line-height: .95; letter-spacing: -.04em;
}
.ledger .is-loss b { color: var(--verm); }
.ledger span { display: block; margin-block-start: .5rem; }

.lede { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: var(--muted); max-inline-size: 54ch; }

/* ---------- notices ------------------------------------------------------ */
.notice {
  border: 2px solid var(--verm); padding: .9rem 1.1rem; margin-block: 1.5rem;
  display: flex; gap: .8rem; align-items: flex-start; background: var(--sheet);
}
.notice svg { flex: none; color: var(--verm); margin-block-start: .15rem; }
.notice h2 { font-size: .95rem; margin-block-end: .2rem; }
.notice p { margin: 0; font-size: .9rem; color: var(--muted); max-inline-size: 80ch; }

/* ---------- tabs --------------------------------------------------------- */
.tabs {
  position: relative; display: flex; gap: 0; flex-wrap: wrap;
  border-block-end: 1px solid var(--rule); margin-block-start: 2rem;
}
.tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--muted);
  min-block-size: 48px; padding-inline: 1.1rem; padding-block: 0;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: color var(--t-fast) var(--ease);
}
.tab:first-child { padding-inline-start: 0; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab .count { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
.tab[aria-selected="true"] .count { color: var(--verm); }
/* Physical left is deliberate here: the indicator is positioned from a
   measured offsetLeft, which browsers report from the left edge in both
   writing directions. */
.tab-ind {
  position: absolute; left: 0; bottom: -1px; block-size: 2px; inline-size: 1px;
  background: var(--ink); transform-origin: left center;
  transform: translateX(var(--ind-x, 0)) scaleX(var(--ind-w, 0));
  transition: transform var(--t) var(--ease);
}
.tabs.is-lost .tab-ind { background: var(--verm); }

[role="tabpanel"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* ---------- filter rail -------------------------------------------------- */
.rail {
  display: grid; gap: .9rem 1.25rem; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding-block: 1.15rem; border-block-end: 1px solid var(--rule);
}
fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field > label { font-weight: 600; font-size: .85rem; }
.hint { font-size: .8rem; color: var(--muted); }

.input, .select, textarea {
  font: inherit; font-family: inherit; color: var(--ink); background: var(--sheet);
  border: 0; border-block-end: 2px solid var(--edge); border-radius: 0;
  padding: .55rem .1rem; min-block-size: 44px; inline-size: 100%;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.input:hover, .select:hover, textarea:hover { border-block-end-color: var(--ink); }
.input:focus, .select:focus, textarea:focus { border-block-end-color: var(--focus); }
textarea { min-block-size: 7rem; resize: vertical; padding-inline: .6rem; border: 2px solid var(--edge); }
.select {
  appearance: none; padding-inline-end: 1.6rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right .55rem center, right .25rem center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
[dir="rtl"] .select { background-position: left .55rem center, left .25rem center; }
[aria-invalid="true"] { border-color: var(--verm) !important; border-block-end-color: var(--verm) !important; }

.results-line {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline;
  padding-block: .9rem; font-family: var(--font-mono); font-size: .8rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.results-line b { color: var(--ink); font-weight: 500; }

/* ---------- the register table ------------------------------------------ */
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

table.register { inline-size: 100%; border-collapse: collapse; font-size: .92rem; }
.register caption { text-align: start; padding-block-end: .6rem; color: var(--muted); font-size: .8rem; }
.register th, .register td { text-align: start; padding: .55rem .8rem; vertical-align: baseline; }
.register th:first-child, .register td:first-child { padding-inline-start: 0; }
.register thead th { border-block-end: 2px solid var(--ink); padding-block-end: .5rem; white-space: nowrap; }
.register tbody tr { border-block-end: 1px solid var(--rule); transition: background var(--t-fast) var(--ease); }
.register tbody tr:hover, .register tbody tr.is-active { background: var(--sheet); }
.register tbody tr.is-active { box-shadow: inset 3px 0 0 var(--ink); }
[dir="rtl"] .register tbody tr.is-active { box-shadow: inset -3px 0 0 var(--ink); }
.register tbody tr.is-lost.is-active { box-shadow: inset 3px 0 0 var(--verm); }
[dir="rtl"] .register tbody tr.is-lost.is-active { box-shadow: inset -3px 0 0 var(--verm); }

/* Sortable column headers are real buttons. */
.sortbtn {
  appearance: none; background: none; border: 0; cursor: pointer; padding: .2rem 0;
  font: inherit; color: var(--muted); display: inline-flex; align-items: center; gap: .35rem;
  font-variation-settings: "wdth" 80; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: .72rem; min-block-size: 32px;
}
.sortbtn:hover { color: var(--ink); }
[aria-sort] .sortbtn { color: var(--ink); }
.sortbtn .arrow { opacity: 0; transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--ease); }
[aria-sort] .sortbtn .arrow { opacity: 1; }
[aria-sort="descending"] .sortbtn .arrow { transform: rotate(180deg); }

.rec-id { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); white-space: nowrap; position: relative; }
tr.is-lost .rec-id { color: var(--verm); }
/* The struck record: a rule drawn through the number of a tree that is gone. */
tr.is-lost .rec-id::after {
  content: ""; position: absolute; inset-inline: -2px; inset-block-start: 50%;
  block-size: 1px; background: var(--verm);
  transform: scaleX(0); transform-origin: inline-start; transition: transform 320ms var(--ease);
}
tr.is-lost:hover .rec-id::after, tr.is-lost.is-active .rec-id::after { transform: scaleX(1); }

.rec-name { font-weight: 600; }
.rec-name a { text-decoration: none; }
.rec-name a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.rec-sci { font-style: italic; color: var(--muted); font-size: .85rem; }
/* The same tree's name in the other language, beside the first. */
/* The two names sit on one line. The gap belongs to the row, not to either
   name: a margin on the Thaana would resolve against its own right-to-left
   direction and open up on the wrong side. */
.name-pair {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: .55rem;
  row-gap: .1rem;
}
.alt-name { font-weight: 400; color: var(--muted); font-size: .85rem; }
.alt-name[dir="rtl"] {
  font-family: var(--font-thaana);
  font-size: calc(.9rem * var(--thaana-scale));
  line-height: 1.7;
}
.num { font-family: var(--font-mono); font-size: .84rem; white-space: nowrap; }
.dim { color: var(--muted); }

@media (max-width: 60rem) { .col-opt { display: none; } }

/* ---------- the status stamp (signature detail) ------------------------- */
.stamp {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  border: 1px solid currentColor; padding: .1rem .45rem;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.stamp-standing   { color: var(--ink); }
.stamp-threatened { color: var(--verm); }
.stamp-lost       { color: var(--verm); border-width: 2px; }
.stamp-relocated  { color: var(--muted); }
.stamp-cutback    { color: var(--verm); }
/* Hovering a record inverts its stamp: the ink-on-paper gesture, reversed. */
tr:hover .stamp-standing,   tr.is-active .stamp-standing   { background: var(--ink);  color: var(--paper); }
tr:hover .stamp-threatened, tr.is-active .stamp-threatened,
tr:hover .stamp-cutback,    tr.is-active .stamp-cutback,
tr:hover .stamp-lost,       tr.is-active .stamp-lost       { background: var(--verm); color: var(--on-verm); }
tr:hover .stamp-relocated,  tr.is-active .stamp-relocated  { background: var(--muted); color: var(--paper); }

.unverified {
  font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); border-block-end: 1px dashed var(--edge);
}

/* ---------- map ---------------------------------------------------------- */
.map-panel { padding-block-start: 1rem; }
#map {
  block-size: clamp(440px, 78vh, 820px);
  border-block: 1px solid var(--ink); background: var(--sheet); z-index: 1;
}
/* MapLibre on the register map. The picker on the submission form is still
   Leaflet, so both sets of rules stay. */
.maplibregl-map { font: inherit; background: var(--sheet); }
.maplibregl-popup-content {
  padding: .85rem 1rem; border-radius: 0; background: var(--sheet);
  color: var(--ink); border: 2px solid var(--ink); box-shadow: none;
}
.maplibregl-popup-tip { display: none; }
.maplibregl-popup-close-button {
  font-size: 1.2rem; color: var(--ink); inline-size: 32px; block-size: 32px;
}
.maplibregl-popup-close-button:hover { background: var(--chip); }
.maplibregl-ctrl-group { border-radius: 0; border: 1px solid var(--edge); }
.maplibregl-ctrl-group button { border-radius: 0; }
/* Sits under the compass in the same stack, so it reads as one set of map
   controls rather than a stray button.

   The selector is qualified because MapLibre's own `.maplibregl-ctrl-group
   button` is more specific than a lone class and would otherwise win, keeping
   the button display:block and leaving the icon sitting in a corner. */
.maplibregl-ctrl-group button.map-layer-btn {
  display: flex; align-items: center; justify-content: center;
  inline-size: 29px; block-size: 29px; padding: 0;
  background: var(--sheet); color: var(--ink); border: 0; cursor: pointer;
}
.maplibregl-ctrl-group button.map-layer-btn:hover { background: var(--chip); }
.maplibregl-ctrl-group button.map-layer-btn svg {
  display: block;
  /* Explicit rather than currentColor: these controls sit inside MapLibre's
     own markup, and inheriting from it produced a washed-out grey icon. */
  stroke: var(--ink);
}
.maplibregl-ctrl-attrib { font-size: .7rem; }

.leaflet-container { font: inherit; background: var(--sheet); }
.leaflet-popup-content { margin: .85rem 1rem; font: inherit; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { border-radius: 0; }
/* MapLibre positions each marker by writing transform: translate() onto this
   element, so nothing here may set transform on it: doing so tears the pin off
   its coordinates, and a transition on it makes every pin lag the map on each
   pan. The highlight scales an inner span instead. */
.marker { display: block; }
.marker svg { display: block; }
.marker-pin { display: block; transition: transform var(--t) var(--ease); }
/* Cross-highlight: the marker answers when its row is pointed at. */
.marker.is-active { z-index: 1000; }
.marker.is-active .marker-pin { transform: scale(1.5); }
.map-note { font-size: .82rem; color: var(--muted); padding-block: .7rem; }

/* The location picker on the submission form. */
#picker {
  block-size: clamp(240px, 38vh, 380px);
  border: 2px solid var(--edge);
  background: var(--sheet);
  z-index: 1;
  margin-block-start: .35rem;
}
#picker:focus-within { border-color: var(--focus); }
#picker .leaflet-marker-icon { cursor: grab; }

/* ---------- the lost panel (memorial) ----------------------------------- */
.losses { list-style: none; margin: 0; padding: 0; }
.loss {
  display: grid; gap: .3rem 2rem; padding-block: 1.5rem;
  border-block-end: 1px solid var(--rule);
  grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr);
}
.loss-when { font-family: var(--font-mono); color: var(--verm); font-size: .9rem; padding-block-start: .3rem; }
.loss h3 { font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); margin-block-end: .2rem; }
.loss h3 a { text-decoration: none; }
.loss h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.loss-meta { color: var(--muted); font-size: .9rem; margin-block-end: .5rem; }
.loss p { margin-block-end: 0; font-size: .95rem; }
@media (max-width: 40rem) { .loss { grid-template-columns: 1fr; } }

.empty { padding: 3rem 0; border-block-end: 1px solid var(--rule); }

/* ---------- detail dialog (the specimen sheet) -------------------------- */
dialog.sheet {
  inline-size: min(100% - 2rem, 740px); max-block-size: min(88vh, 940px);
  padding: 0; border: 2px solid var(--ink); border-radius: 0;
  background: var(--sheet); color: var(--ink);
}
dialog.sheet::backdrop { background: rgba(10, 11, 13, .7); }
.sheet-head {
  display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
  padding: 1.1rem 1.25rem .85rem; border-block-end: 2px solid var(--ink);
  position: sticky; inset-block-start: 0; background: var(--sheet); z-index: 2;
}
.sheet-head h2 { font-size: 1.4rem; margin: 0; }
.sheet-body { padding: 1.25rem; overflow-y: auto; }
.sheet-body img { inline-size: 100%; border: 1px solid var(--rule); margin-block-end: 1rem; }
.spec { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: 0; margin: 0 0 1.5rem; }
.spec dt {
  font-variation-settings: "wdth" 80; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: .7rem; color: var(--muted);
  padding-block: .5rem; border-block-end: 1px solid var(--rule);
}
.spec dd { margin: 0; padding-block: .5rem; border-block-end: 1px solid var(--rule); }
.spec .mono { font-size: .88rem; }
.loss-block { border: 2px solid var(--verm); padding: .9rem 1rem; margin-block-end: 1.5rem; }
.loss-block .spec { margin-block-end: 0; }
.loss-block .spec dt, .loss-block .spec dd { border-block-end-color: color-mix(in srgb, var(--verm) 35%, transparent); }
.loss-block .spec dt:last-of-type, .loss-block .spec dd:last-of-type { border-block-end: 0; }
@media (max-width: 34rem) { .spec { grid-template-columns: 1fr; } .spec dt { border-block-end: 0; padding-block-end: 0; } }

/* ---------- forms -------------------------------------------------------- */
.form { display: grid; gap: 2rem; max-inline-size: 44rem; }
.form fieldset.group { border-block-start: 2px solid var(--ink); padding-block-start: 1rem; }
.form legend {
  font-variation-settings: "wdth" 80; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: .78rem; padding-inline-end: .7rem;
}
.radio-row { display: grid; gap: .6rem; }
.radio-card {
  display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem;
  border: 2px solid var(--edge); cursor: pointer; min-block-size: 44px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.radio-card:hover { border-color: var(--ink); }
.radio-card:has(input:checked) { border-color: var(--ink); background: var(--sheet); }
.radio-card:has(input:focus-visible), .check:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.radio-card input, .check input { inline-size: 24px; block-size: 24px; accent-color: var(--verm); flex: none; margin-block-start: .1rem; }
.check { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; }

.error-summary { border: 3px solid var(--verm); padding: 1rem 1.15rem; }
.error-summary h2 { color: var(--verm); font-size: 1.05rem; }
.error-summary ul { margin: .5rem 0 0; padding-inline-start: 1.2rem; }
.error-summary a { color: var(--verm); font-weight: 600; }
.field-error { color: var(--verm); font-weight: 600; font-size: .875rem; }
.success { border: 3px solid var(--ink); padding: 1.25rem 1.35rem; background: var(--sheet); }
.panel { border: 1px solid var(--rule); background: var(--sheet); padding: 1.15rem; }
pre.summary {
  white-space: pre-wrap; background: var(--paper); border: 1px solid var(--rule);
  padding: 1rem; font-size: .85rem; overflow-x: auto; font-family: var(--font-mono);
}

/* ---------- prose (about) ----------------------------------------------- */
.prose h2 {
  margin-block-start: 2.6rem; padding-block-end: .4rem; border-block-end: 1px solid var(--rule);
}
.prose ul, .prose ol { padding-inline-start: 1.3rem; max-inline-size: 66ch; }
.prose li { margin-block-end: .45rem; }
.prose blockquote {
  margin-inline: 0; padding-inline-start: 1.2rem; border-inline-start: 3px solid var(--verm);
  font-size: 1.15rem; color: var(--ink);
}
.prose .spec { max-inline-size: 66ch; }

/* ---------- footer ------------------------------------------------------- */
.site-footer {
  margin-block-start: 4rem; border-block-start: 2px solid var(--ink);
  padding-block: 1.5rem 2.5rem; font-family: var(--font-mono);
  font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer .row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* ---------- motion, contrast, print ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .marker.is-active .marker-pin { transform: none; }
  .marker.is-active { outline: 3px solid var(--ink); }
}

@media (forced-colors: active) {
  .stamp, .btn, .panel, .notice, dialog.sheet { border: 1px solid CanvasText; }
  .register tbody tr.is-active { background: Highlight; color: HighlightText; }
  :focus-visible { outline: 3px solid Highlight; }
}

@media print {
  .masthead, .site-footer, .rail, .tabs, .map-panel, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .register tbody tr { break-inside: avoid; }
}


/* --- pointer target sizes (WCAG 2.2, 2.5.8) --------------------------------
   Everything here already met 2.1 AA, which has no target-size rule at AA.
   These are small paddings that take the remaining links and boxes to 24px so
   the site also satisfies 2.2, which costs nothing and helps anyone tapping
   with a thumb. */
.rec-name a { display: inline-block; padding-block: 4px; }
.site-footer a { display: inline-block; padding-block: 3px; }
.loss h3 a { display: inline-block; padding-block: 2px; }
/* Third-party attribution links, which ship at the library's own size. */
.maplibregl-ctrl-attrib a, .leaflet-control-attribution a {
  display: inline-block; padding-block: 3px;
}