/* farang.dk — the one stylesheet. The look is DESIGN.md's: quiet and plain. The
   site's name in plain type, one colour (street-sign blue), black on near-white
   (the reverse at night), red only where something can't be undone, thin grey lines, the same slight
   rounding on every box and control, no shadows.
   Layers, lowest priority first: reset → tokens → base → layout → components → utilities.
   Colours, spacing and type are tokens on :root; components use only tokens, so a
   re-theme is an edit to the tokens layer. One class per template component. */
@layer reset, tokens, base, layout, components, utilities;

/* Kanit (headings, navigation, numbers) and Sarabun (everything read), both SIL OFL
   (fonts/OFL-*.txt). Latin and Thai are separate files picked by unicode-range, so
   Danish and English pages never download Thai. */
@font-face { font-family: "Kanit"; src: url("fonts/Kanit-Medium-latin.woff2") format("woff2"); font-weight: 500; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Kanit"; src: url("fonts/Kanit-Medium-thai.woff2") format("woff2"); font-weight: 500; font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Kanit"; src: url("fonts/Kanit-SemiBold-latin.woff2") format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Kanit"; src: url("fonts/Kanit-SemiBold-thai.woff2") format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Sarabun"; src: url("fonts/Sarabun-Regular-latin.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Sarabun"; src: url("fonts/Sarabun-Regular-thai.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Sarabun"; src: url("fonts/Sarabun-SemiBold-latin.woff2") format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Sarabun"; src: url("fonts/Sarabun-SemiBold-thai.woff2") format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; border-radius: 0; }
  input[type=search] { -webkit-appearance: none; appearance: none; } /* Safari rounds search fields otherwise */
  ul[class], ol[class] { list-style: none; padding: 0; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    color-scheme: light dark; /* day or night, as the phone or computer is set */

    --sign: #3c69a9;   /* street-sign blue: the one colour */
    --ink: #202023;    /* sign black: text */
    --red: #bc1e2a;    /* danger: what can't be undone; lines and text only, never a fill */
    --paper: #faf9f6;  /* near-white: the page */
    --board: #ffffff;  /* white: posts, fields and buttons on the page */
    --line: #d3d2d0;   /* the lines between rows and around boxes */
    --edge: #828282;   /* the edge of anything you type in or press: 3.6:1 on the page */
    --muted: #5d5d5e;  /* details under a title (who, how many, when) and counts: 6.2:1 on the page */

    --head: "Kanit", sans-serif;
    --body: "Sarabun", sans-serif;
    --text: 1.0625rem;
    --small: 0.9375rem;
    --label: 0.875rem;
    --h3: 1.1875rem;
    --h2: 1.5rem;
    --h1: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
    --leading: 1.6;

    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3rem;

    --hair: 1px;
    --rule: 2px;
    --radius: 4px; /* every box and control, nothing else; never a mix */
    --width: 78rem;
    --narrow: 30rem;
  }
  /* night: the same roles, lightened or darkened to pass the same checks (DESIGN.md → Night) */
  @media (prefers-color-scheme: dark) {
    :root {
      --sign: #79a5e8;
      --ink: #ebe9e4;
      --red: #f07b73;
      --paper: #1c1c1f;
      --board: #26262a;
      --line: #454546;
      --edge: #888785;
      --muted: #b1b0ad;
    }
  }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; }
  html[lang="th"] { --leading: 1.7; } /* Thai stacks vowels and tone marks; it needs the room */
  body {
    font-family: var(--body);
    font-size: var(--text);
    line-height: var(--leading);
    background: var(--paper);
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  h1, h2, h3 { font-family: var(--head); font-weight: 600; line-height: 1.25; text-wrap: balance; }
  h1 { font-size: var(--h1); margin-block: var(--s5) var(--s4); }
  h2 { font-size: var(--h2); margin-block: var(--s6) var(--s3); }
  h3 { font-size: var(--h3); }
  h2 a { color: inherit; text-decoration: none; }
  h2 a:hover { text-decoration: underline; }
  p { text-wrap: pretty; }
  a { color: inherit; text-decoration-thickness: var(--hair); text-decoration-color: var(--sign); text-underline-offset: 0.18em; }
  a:hover { text-decoration-color: var(--ink); text-decoration-thickness: var(--rule); } /* a change you can see */
  /* a ring that shows on every fill: ink, with a gap between it and the thing */
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
}

@layer layout {
  .wrap { width: min(100% - 2 * var(--s4), var(--width)); margin-inline: auto; }
  main { flex: 1; padding-bottom: var(--s7); }
  .narrow { max-width: var(--narrow); }
  .columns { display: grid; gap: 0 var(--s6); }
  @media (min-width: 52rem) { .columns { grid-template-columns: 1fr 1fr; } }
  .page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
  .page-head h1 { margin-bottom: var(--s3); }
  .actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
  .row { display: grid; gap: var(--s3); }
  @media (min-width: 40rem) { .row { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }
}

@layer components {
  /* every box and control has the same slight rounding; lines and full-width bands have none */
  .skip:focus, .button, .react, input:not([type=checkbox], [type=radio]), textarea, select, .flash, .post, .badge, .map, fieldset,
  .staff-menu summary, .staff-menu nav, .staff-box, .dash-tiles > li > a, .dash-tiles > li:not(:has(a)), .dash-photos img, .dash-json,
  .tag.dash-yes, .tag.dash-unsure, .tag.dash-no, .tag.dash-waiting, .tag.dash-dir { border-radius: var(--radius); }

  .skip { position: absolute; left: -999px; }
  .skip:focus { left: var(--s4); top: var(--s2); background: var(--board); border: var(--hair) solid var(--edge); padding: var(--s2) var(--s3); z-index: 10; }

  /* header: the site's name top left, a plain text menu, search, account */
  .site-header { border-bottom: var(--hair) solid var(--line); }
  .header-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s6); padding-block: var(--s3); }
  .brand { margin: 0; font-size: inherit; line-height: inherit; }
  .site-name { font: 600 1.5rem/1.2 var(--head); text-decoration: none; white-space: nowrap; padding-block: var(--s1) 2px; border-bottom: var(--rule) solid transparent; }
  .site-name:hover { border-bottom-color: var(--sign); }
  .nav { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
  .nav a { font: 600 1.1875rem/1.3 var(--head); text-decoration: none; white-space: nowrap; padding-block: var(--s1) 2px; border-bottom: var(--rule) solid transparent; }
  .nav a:hover { border-bottom-color: var(--sign); }
  .nav a[aria-current] { border-bottom-color: var(--ink); }
  .header-search { flex: 1; min-width: 10rem; max-width: 20rem; margin-left: auto; }
  .header-search input { width: 100%; }
  .account { display: flex; align-items: center; gap: var(--s3); margin-left: auto; font: 500 var(--small)/1.3 var(--head); }
  .header-search + .account { margin-left: 0; }
  /* the member's name and "log out" behave like the menu: no line until pointed at, black on their own page */
  .account > a:not(.button), .account .link { text-decoration: none; padding-block: var(--s1) 2px; border-bottom: var(--rule) solid transparent; }
  .account > a:not(.button):hover, .account .link:hover { border-bottom-color: var(--sign); }
  .account > a[aria-current] { border-bottom-color: var(--ink); }
  @media (max-width: 40rem) {
    .header-row { gap: var(--s2) var(--s4); padding-block: var(--s2); }
    .site-name { font-size: 1.375rem; }
    .account, .header-search + .account { margin-left: auto; } /* the search moves below, so the account goes right */
    .nav { order: 3; width: 100%; }
    .nav a { padding-block: var(--s2) var(--s1); }
    .header-search { order: 4; max-width: none; margin-left: 0; flex-basis: 100%; }
  }

  /* footer */
  .site-footer { border-top: var(--hair) solid var(--line); padding-block: var(--s4) var(--s5); font: 500 var(--small)/1.4 var(--head); }
  .langs { display: flex; flex-wrap: wrap; gap: var(--s4); }
  .langs a, .langs .link { text-decoration: none; color: inherit; }
  .langs a:hover, .langs .link:hover { text-decoration: underline; text-decoration-color: var(--sign); }
  .langs [aria-current] { text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: var(--rule); }
  nav.langs > form { display: contents; }

  /* buttons: the main action is filled blue and turns black under the pointer; the
     rest are white with a grey edge that turns black */
  .button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    padding: var(--s2) var(--s4); border: var(--hair) solid var(--sign);
    background: var(--sign); color: var(--paper); font: 600 1.0625rem/1.2 var(--head); text-decoration: none; cursor: pointer;
    min-height: 2.75rem; /* thumb-sized */
  }
  .button:hover { background: var(--ink); border-color: var(--ink); }
  .button:disabled { opacity: 0.6; cursor: progress; }
  .button.secondary, .button.provider, .button.danger { background: var(--board); color: var(--ink); border-color: var(--edge); }
  .button.secondary:hover, .button.provider:hover { border-color: var(--ink); }
  .button.small { min-height: 2.25rem; padding: var(--s1) var(--s3); font-size: var(--small); }
  .button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .button.danger { border-color: var(--red); color: var(--red); }
  .button.danger:hover { text-decoration: underline; }
  .link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-decoration-color: var(--sign); text-decoration-thickness: var(--hair); cursor: pointer; }
  .link:hover { text-decoration-color: var(--ink); text-decoration-thickness: var(--rule); }
  form:has(> .link) { display: inline; }

  /* forms */
  .form { display: grid; gap: var(--s4); max-width: 42rem; }
  .form label { display: grid; gap: var(--s1); font: 500 var(--small)/1.35 var(--head); }
  input:not([type=hidden]), textarea, select {
    width: 100%; padding: var(--s2) var(--s3); border: var(--hair) solid var(--edge);
    background: var(--board); font: 400 var(--text)/1.4 var(--body); min-height: 2.75rem;
  }
  input:hover, textarea:hover, select:hover { border-color: var(--ink); }
  input::placeholder, textarea::placeholder { color: var(--ink); opacity: 0.65; }
  textarea { resize: vertical; line-height: var(--leading); }
  .form .button { justify-self: start; }
  .filters { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; margin-block: var(--s4); }
  .filters label { display: grid; gap: var(--s1); font: 500 var(--small)/1.35 var(--head); min-width: 11rem; }
  /* filters as rows of links (events by landsdel and type): the chosen one
     underlined in black like the menu's, pointing blue */
  .chips { display: grid; gap: var(--s2); }
  .chips-row { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font: 500 var(--small)/1.4 var(--head); }
  .chips a { text-decoration: none; padding-block: 2px; border-bottom: var(--rule) solid transparent; }
  .chips a:hover { border-bottom-color: var(--sign); }
  .chips a[aria-current] { border-bottom-color: var(--ink); }
  .search-form { display: flex; gap: var(--s2); max-width: 36rem; margin-bottom: var(--s5); }
  .hint { font: 400 var(--small)/1.45 var(--body); }

  /* text */
  .lead { font-size: 1.1875rem; line-height: 1.5; margin-bottom: var(--s4); max-width: 46rem; }
  .meta { font-size: var(--small); color: var(--muted); }
  a.meta { text-decoration: none; }
  a.meta:hover { text-decoration: underline; }
  .empty { padding: var(--s3) 0; }
  .flash { background: var(--board); border: var(--hair) solid var(--sign); padding: var(--s3) var(--s4); margin-top: var(--s4); }
  .flash.problem { border-color: var(--red); } /* what went wrong with what you sent */
  .flash:empty { display: none; }
  .crumbs { margin-top: var(--s5); font: 500 var(--small)/1.4 var(--head); }
  .crumbs + h1, .crumbs + .page-head h1, .crumbs + article h1 { margin-top: var(--s2); }
  .place > .tag:first-child { margin-top: var(--s5); }
  .place > .tag:first-child + h1 { margin-top: var(--s1); }
  /* a kind or category: small and blue, in normal letters (Thai has no capitals) */
  .tag { display: inline-block; font: 500 var(--label)/1.4 var(--head); color: var(--sign); }
  .body { display: grid; gap: var(--s3); overflow-wrap: anywhere; }

  /* lists of rows with a line between them, flush with the text: threads, events,
     categories, places, search hits, moderation */
  .list { display: grid; border-top: var(--hair) solid var(--line); }
  .list > li { display: grid; gap: 0.125rem; padding-block: 0.625rem; border-bottom: var(--hair) solid var(--line); }
  .list .list { border-top: 0; } /* a list inside a list continues it */
  .row-title { font: 600 1.125rem/1.3 var(--head); text-decoration: none; overflow-wrap: anywhere; }
  .row-title:hover { text-decoration: underline; }
  .row-kicker { font: 500 var(--label)/1.4 var(--head); color: var(--sign); }
  .row-kicker a { text-decoration: none; }
  .row-kicker a:hover { text-decoration: underline; }
  .in-category .row-kicker.is-category { display: none; } /* on its own category's page it says nothing */
  .event-when { font: 500 var(--label)/1.4 var(--head); color: var(--sign); }
  .mod-item .actions { margin-top: var(--s2); }
  .more { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); padding-top: var(--s3); font: 500 var(--small)/1.4 var(--head); }

  /* the front page: search, what's on, the places by kind and town, the forum */
  .home {
    display: grid; gap: var(--s6); align-items: start; padding-top: var(--s5);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "find on" "places on" "places talk";
  }
  .home-find { grid-area: find; }
  .home-on { grid-area: on; }
  .home-places { grid-area: places; }
  .home-talk { grid-area: talk; }
  .home-festivals { border-top: 0; }
  .home-kinds { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-bottom: var(--s3); font: 500 1rem/1.4 var(--head); }
  .home-kinds a { text-decoration: none; }
  .home-kinds a:hover { text-decoration: underline; }
  .home-kinds span { color: var(--muted); font-variant-numeric: tabular-nums; }
  .home h2 { font-size: 1.25rem; margin: 0 0 var(--s2); }
  .home-find .lead { margin: 0; }
  .home-search { display: flex; gap: var(--s2); margin-top: var(--s3); }
  .home-search input { flex: 1; min-width: 0; font-size: 1.1875rem; padding-block: 0.625rem; }
  .home-search .button { font-size: 1.1875rem; }
  .home .empty { padding-block: var(--s3); border-bottom: var(--hair) solid var(--line); }
  /* places by town: an index in columns, like the back of a printed guide */
  .towns { columns: 9rem auto; column-gap: var(--s5); border-top: var(--hair) solid var(--line); }
  .towns li { break-inside: avoid; }
  .towns a { display: flex; justify-content: space-between; gap: var(--s2); padding-block: 0.3125rem; border-bottom: var(--hair) solid var(--line); font: 500 1rem/1.4 var(--head); text-decoration: none; }
  .towns a span { color: var(--muted); font-variant-numeric: tabular-nums; }
  .towns a:hover { text-decoration: underline; }
  @media (max-width: 56rem) {
    .home { grid-template-columns: minmax(0, 1fr); grid-template-areas: "find" "on" "places" "talk"; gap: var(--s5); }
  }
  @media (max-width: 40rem) {
    .towns a { padding-block: 0.5625rem; }
    .more a { display: inline-block; padding-block: var(--s2); }
  }

  /* forum categories */
  .category { grid-template-columns: minmax(0, 1fr); }

  /* places: rows, not cards */
  .place-card a { display: grid; gap: 0.125rem; text-decoration: none; }
  .place-card h3 { font: 600 1.125rem/1.3 var(--head); }
  .place-card a:hover h3 { text-decoration: underline; }
  .place-card strong { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

  /* prices: what an hour costs, place by place and area by area; a phone scrolls the table, not the page */
  .table-wrap { overflow-x: auto; margin-block: var(--s2); }
  .prices { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
  .prices th, .prices td { padding: var(--s1) var(--s2); border-bottom: var(--hair) solid var(--line); text-align: left; vertical-align: top; }
  .prices th:first-child, .prices td:first-child { padding-left: 0; }
  .prices thead th { font: 500 var(--small)/1.4 var(--head); color: var(--muted); border-bottom-color: var(--ink); }
  .prices .num { text-align: right; white-space: nowrap; }

  /* forum posts */
  .posts { display: grid; gap: var(--s4); margin-bottom: var(--s6); }
  .post { background: var(--board); border: var(--hair) solid var(--line); padding: var(--s3) var(--s4); }
  .post-head { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; margin-bottom: var(--s2); }
  .reply { margin-top: var(--s4); }
  .place-talk { margin-top: var(--s6); }
  /* replies, one level deep, under their post */
  .replies { display: grid; gap: var(--s3); margin: var(--s3) 0 0 var(--s2); padding-left: var(--s4); border-left: var(--rule) solid var(--line); } /* grey: the line can't be pressed */
  .older > summary { cursor: pointer; font: 500 var(--small)/1.4 var(--head); }
  .older[open] > summary { margin-bottom: var(--s3); }
  .replying { font-size: var(--small); }
  @media (max-width: 40rem) { .replies { margin-left: 0; padding-left: var(--s3); } }

  /* facts: event and place details */
  .facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); margin-block: var(--s4); }
  .facts dt { font: 500 var(--label)/1.9 var(--head); }
  .facts dd { margin: 0; }
  .event .actions { margin-block: var(--s4) var(--s5); }
  .event .actions form { display: flex; gap: var(--s3); align-items: center; }

  /* report */
  .report { margin-top: var(--s3); font-size: var(--small); }
  .report summary { cursor: pointer; width: max-content; }
  .report .form { margin-top: var(--s2); gap: var(--s2); }

  /* login */
  .providers { display: grid; gap: var(--s2); margin-block: var(--s4); }
  .or { display: flex; align-items: center; gap: var(--s3); font: 500 var(--small)/1.4 var(--head); margin-block: var(--s4); }
  .or::before, .or::after { content: ""; flex: 1; border-top: var(--hair) solid var(--line); }
  .pager { display: flex; gap: var(--s2); margin-top: var(--s4); }
  .cf-turnstile { min-height: 65px; }
}

@layer components {
  /* language hint */
  .langhint { background: var(--board); border-bottom: var(--hair) solid var(--line); text-align: center; padding: var(--s2) var(--s4); font: 500 var(--small)/1.4 var(--head); }
  .langhint .link { margin-left: var(--s3); text-decoration: none; font-size: 1rem; }

  /* footer */
  .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); }
  .legal { display: flex; flex-wrap: wrap; gap: var(--s4); }
  .legal a { text-decoration: none; }
  .legal a:hover { text-decoration: underline; }
  @media (max-width: 40rem) { .langs a, .legal a, .langs .link { display: inline-block; padding-block: var(--s2); } }

  /* who and badges */
  .who { font: 600 1rem/1.3 var(--head); text-decoration: none; }
  a.who:hover { text-decoration: underline; }
  .badge {
    display: inline-block; font: 500 0.8125rem/1.5 var(--head);
    border: var(--hair) solid var(--ink); padding: 0 var(--s2); vertical-align: 0.1em;
  }
  .badge.admin { background: var(--sign); border-color: var(--sign); color: var(--paper); }
  .badge.helpful { border-color: var(--sign); color: var(--sign); }
  .post-head .when { margin-left: auto; color: var(--muted); }

  /* reactions under a post */
  .post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s3); font-size: var(--small); }
  .post-actions form { display: inline; }
  .post-actions .report { margin-top: 0; }
  .react {
    background: var(--board); border: var(--hair) solid var(--edge); padding: 0.1rem var(--s3);
    cursor: pointer; min-height: 2rem; font: 500 var(--small)/1.3 var(--head);
  }
  .react:hover { border-color: var(--ink); }
  .react.on { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* blue fills are for the main action */
  .react.static { cursor: default; background: none; border-color: var(--line); }
  .post.is-helpful { border-color: var(--sign); }

  /* map */
  .map { height: clamp(16rem, 45vh, 28rem); overflow: hidden; border: var(--hair) solid var(--line); margin-bottom: var(--s5); }
  .map.small { height: 16rem; margin-block: var(--s4); }

  /* events */
  .attendees h2 { font-size: var(--h3); margin-top: var(--s4); }

  /* profile */
  .stats { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); margin-block: var(--s4); }
  .stats dt { font: 500 var(--label)/1.5 var(--head); }
  .stats dd { margin: 0; font: 600 var(--h3)/1.3 var(--head); }

  /* settings */
  fieldset { border: var(--hair) solid var(--line); padding: var(--s3) var(--s4); display: grid; gap: var(--s2); }
  legend { font: 600 var(--small)/1.3 var(--head); padding-inline: var(--s1); }
  .form label.check { display: flex; gap: var(--s2); align-items: center; font: 400 var(--text)/1.4 var(--body); }
  .check input { width: auto; min-height: 0; }
  input[type=checkbox], input[type=radio] { accent-color: var(--sign); }
  .row-split { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2); }
  .danger summary { color: var(--red); cursor: pointer; font-family: var(--head); font-weight: 600; }
  .push { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-block: var(--s3); }
  .mod-form { display: grid; gap: var(--s2); margin-top: var(--s2); max-width: 36rem; }
  .mod-form label { display: grid; gap: var(--s1); font: 500 var(--small)/1.35 var(--head); }

  /* legal pages */
  .legal-text { max-width: 44rem; }
  .legal-text ul { display: grid; gap: var(--s2); padding-left: 1.25rem; }
  .legal-text h2 { font-size: var(--h3); margin-top: var(--s5); }
}

@layer components {
  /* moderators and admins: their menu in the header, and a band on their pages, in
     black, so they're never mistaken for the site's blue */
  .staff-menu { position: relative; }
  .staff-menu summary {
    list-style: none; cursor: pointer; font: 600 var(--label)/1.5 var(--head);
    color: var(--paper); background: var(--ink); padding: 0.15rem var(--s3);
  }
  .staff-menu summary::-webkit-details-marker { display: none; }
  .staff-menu summary::after { content: " ▾"; }
  .staff-menu nav {
    position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 20; display: grid; gap: var(--s2); min-width: 15rem;
    padding: var(--s3) var(--s4); background: var(--board); border: var(--hair) solid var(--edge);
  }
  .staff-menu nav a { font: 600 var(--text)/1.3 var(--head); }
  .staff-box { border: var(--hair) solid var(--line); padding: var(--s3) var(--s4); margin-top: var(--s5); background: var(--board); }
  .staff-box summary { cursor: pointer; font: 600 1rem/1.4 var(--head); }
  .staff-remove { border-top: var(--hair) solid var(--line); padding-top: var(--s3); margin-top: var(--s4); }
  .staff-bar { background: var(--ink); color: var(--paper); font: 500 var(--small)/1.4 var(--head); padding-block: var(--s1); }

  /* the admins' dashboard (dash.go): numbers first */
  .tabs { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); border-bottom: var(--hair) solid var(--line); margin-bottom: var(--s4); }
  .tabs a { font: 600 1rem/1.3 var(--head); text-decoration: none; padding-block: var(--s2); border-bottom: var(--rule) solid transparent; margin-bottom: calc(-1 * var(--hair)); }
  .tabs a:hover { border-bottom-color: var(--sign); }
  .tabs a[aria-current] { border-bottom-color: var(--ink); }
  .dash-tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); margin-block: var(--s4) var(--s5); }
  .dash-tiles > li > a, .dash-tiles > li:not(:has(a)) {
    display: grid; gap: 0.125rem; height: 100%; padding: var(--s3) var(--s4); background: var(--board);
    border: var(--hair) solid var(--line); text-decoration: none;
  }
  .dash-tiles a:hover { border-color: var(--ink); }
  .dash-n { font: 600 2rem/1.2 var(--head); font-variant-numeric: tabular-nums; }
  .dash-label { font: 500 1rem/1.3 var(--head); }
  .dash-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
  .dash-table th, .dash-table td { padding: var(--s1) var(--s2); border-bottom: var(--hair) solid var(--line); vertical-align: top; }
  .dash-table th { text-align: left; font-weight: 400; }
  .dash-table td { text-align: right; white-space: nowrap; }
  .dash-table thead th, .dash-table thead td { font: 500 var(--label)/1.4 var(--head); border-bottom-color: var(--ink); }
  .dash-table th.sub { padding-left: var(--s5); }
  .dash-table.wide { min-width: 40rem; }
  .dash-facts td { text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .dash-scroll { overflow-x: auto; }
  .dash-table .problem { color: var(--red); } /* a job or source whose last run failed */
  .dash-map { margin-bottom: var(--s2); }
  .dash-legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--small); margin-bottom: var(--s5); }
  .dash-legend li { display: flex; align-items: center; gap: var(--s1); }
  .dash-photos { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .dash-photos li { display: grid; gap: 0.125rem; align-content: start; }
  .dash-photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: var(--hair) solid var(--line); background: var(--board); }
  .dash-review { gap: var(--s1); }
  .dash-text { white-space: pre-line; overflow-wrap: anywhere; }
  .dash-stars { color: var(--sign); letter-spacing: 0.05em; }
  .dash-review mark, .row-title mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--sign); text-decoration-thickness: 3px; }
  .tag.dash-yes { color: var(--sign); border: var(--hair) solid var(--sign); padding: 0 var(--s1); }
  .tag.dash-unsure { color: var(--ink); border: var(--hair) dashed var(--ink); padding: 0 var(--s1); }
  .tag.dash-no, .tag.dash-waiting { color: var(--ink); border: var(--hair) solid var(--ink); padding: 0 var(--s1); }
  .tag.dash-dir { color: var(--paper); background: var(--ink); padding: 0 var(--s1); }
  .dash-table .tag { white-space: nowrap; }
  .mod-differ { margin-block: var(--s2); max-width: 44rem; }
  .mod-differ thead td { text-align: left; }
  .mod-differ tr.differs th { color: var(--red); font-weight: 600; }
  .dupe-remove { display: inline; }
  .mod-form fieldset.choose label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font: 400 var(--text)/1.4 var(--body); }
  .mod-form fieldset.choose input[type=radio] { width: auto; min-height: 0; }
  .mod-form fieldset.choose input:not([type=radio]) { flex: 1 1 12rem; width: auto; }
  .dash-more { margin-block: var(--s3); }
  .dash-more summary { cursor: pointer; font: 600 1rem/1.4 var(--head); }
  .dash-json { max-height: 40rem; overflow: auto; font-size: var(--small); background: var(--board); border: var(--hair) solid var(--line); padding: var(--s3); }
}

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

/* The map's own controls and popups, in the site's look. maplibre-gl.css isn't in a
   layer, so neither is this; `.map` makes it outrank the same selectors loaded later. */
.map .maplibregl-ctrl-group, .map .maplibregl-ctrl-group:not(:empty), .map .maplibregl-ctrl-attrib,
.map .maplibregl-ctrl-attrib.maplibregl-compact, .map .maplibregl-ctrl-attrib.maplibregl-compact-show, .map .maplibregl-ctrl-attrib-button,
.map .maplibregl-popup-content {
  border-radius: var(--radius); box-shadow: none; background-color: var(--board);
}
.map .maplibregl-ctrl-group:not(:empty), .map .maplibregl-popup-content { border: var(--hair) solid var(--edge); }
.map .maplibregl-ctrl-attrib.maplibregl-compact { color: var(--ink); }
.map .maplibregl-ctrl-attrib a { color: inherit; }
@media (prefers-color-scheme: dark) {
  /* MapLibre draws its icons dark grey; at night they'd vanish on the board */
  .map .maplibregl-ctrl-icon, .map .maplibregl-ctrl-attrib-button { filter: invert(1); }
  .map .maplibregl-ctrl-attrib-button { background-color: transparent; }
}
.map .maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .map .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.map .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--edge); }
.map .maplibregl-popup-anchor-top .maplibregl-popup-tip, .map .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.map .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--edge); }
.map .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--edge); }
.map .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--edge); }