/* 5K&Stay parkrun pages — shared brand CSS (generated by scripts/build_pages.py) */
:root{ /* type ramp — see DESIGN.md typography */ --fs-micro:0.68rem; --fs-caption:0.72rem; --fs-label:0.75rem; --fs-small:0.78rem; --fs-compact:0.82rem; --fs-body-s:0.85rem; --fs-note:0.92rem; --fs-body:1rem; --fs-title-s:1.05rem; --fs-title:1.15rem; --fs-title-l:1.3rem;
  --ink:#152218;
  --paper:#EEF0E2;
  --paper-dim:#E2E5D3;
  --hivis:#FF6A13;
  --hivis-dark:#D9560A;
  --pine:#1F4D3A;
  --pine-light:#3C7159;
  --dawn:#7FA3B0;
  --gravel:#A9825D;
  --line:rgba(21,34,24,0.14);
  --white:#FBFAF5;
  --radius:2px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ background:var(--paper); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; }
::selection{ background:var(--hivis); color:var(--white); }
a{ color:inherit; }
.mono{ font-family:'IBM Plex Mono',monospace; }
.display{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0.01em; }

.barcode{
  height:14px; width:100%;
  background-image: repeating-linear-gradient(90deg,
    var(--ink) 0px, var(--ink) 2px, transparent 2px, transparent 5px,
    var(--ink) 5px, var(--ink) 6px, transparent 6px, transparent 11px,
    var(--ink) 11px, var(--ink) 14px, transparent 14px, transparent 17px);
  opacity:0.85;
}
.barcode.light{ opacity:0.18; }

header{ position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line); }
.nav-wrap{ max-width:1180px; margin:0 auto; padding:18px 28px; display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:10px; font-size:var(--fs-title-s); text-decoration:none; }
.logo .bib{ background:var(--hivis); color:var(--white); font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:var(--fs-label); padding:3px 7px; border-radius:2px; letter-spacing:0.04em; }
.nav-cta{ background:var(--ink); color:var(--paper); padding:9px 18px; border-radius:var(--radius); font-weight:600; font-size:var(--fs-body-s); text-decoration:none; }
.nav-cta:hover{ background:var(--hivis-dark); }

section{ padding:52px 28px; }
.section-wrap{ max-width:1180px; margin:0 auto; }
.kicker{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-label); color:var(--hivis-dark); text-transform:uppercase; letter-spacing:0.12em; margin-bottom:10px; display:block; }
h2.display{ font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--ink); line-height:1.05; }

.eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-small); color:var(--hivis-dark); letter-spacing:0.14em; text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.eyebrow::before{ content:''; width:22px; height:2px; background:var(--hivis-dark); display:inline-block; }
.page-hero{ max-width:1180px; margin:0 auto; padding:56px 28px 34px; }
h1.display{ font-size:clamp(2rem, 4.4vw, 3.4rem); line-height:1.0; color:var(--ink); margin-bottom:18px; }
.region-crumb{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-label); color:#5a6b56; text-transform:uppercase; letter-spacing:0.08em; margin:-6px 0 16px; }
.region-crumb a{ color:inherit; text-decoration:none; }
.region-crumb a:hover, .region-crumb a:focus-visible{ color:var(--hivis-dark); outline:none; }
.hero-meta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.starttime{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-note); background:var(--ink); color:var(--paper); padding:8px 14px; border-radius:var(--radius); }
.starttime strong{ color:var(--hivis); font-weight:600; }
.nation-tag{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-small); border:1px solid var(--ink); padding:7px 12px; border-radius:var(--radius); text-transform:uppercase; letter-spacing:0.06em; }
.lede{ font-size:var(--fs-title-s); max-width:60ch; color:#33422f; }
.time-note{ margin-top:16px; font-size:var(--fs-note); color:var(--ink); border-left:3px solid var(--hivis); background:var(--paper-dim); padding:12px 14px; max-width:70ch; border-radius:var(--radius); }

.map-block{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 14px; box-shadow:0 18px 40px -22px rgba(21,34,24,0.35); }
.map-cap{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-family:'IBM Plex Mono',monospace; font-size:var(--fs-caption); color:#5a6b56; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:12px; flex-wrap:wrap; }
.course-stats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.course-stats .cstat{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-small); background:var(--paper-dim); border:1px solid var(--line); border-radius:var(--radius); padding:8px 12px; color:var(--ink); }
.course-stats .cstat b{ color:var(--hivis-dark); font-weight:600; }
.course-stats .cstat .cs-label{ color:#5a6b56; text-transform:uppercase; letter-spacing:0.06em; font-size:var(--fs-micro); display:block; }
#map{ height:420px; border:2px solid var(--ink); border-radius:var(--radius); background:var(--paper-dim); z-index:1; }
.legend{ display:flex; gap:18px; margin-top:12px; flex-wrap:wrap; }
.legend span{ display:flex; align-items:center; gap:6px; font-size:var(--fs-label); font-family:'IBM Plex Mono',monospace; color:#33422f; }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }

/* Leaflet marker + popup styling (brand system, same as homepage) */
.mk{ box-sizing:border-box; width:100%; height:100%; }
.mk-verified{ border-radius:50%; background:var(--hivis); border:3px solid var(--ink); box-shadow:0 0 0 2px var(--white); }
.mk-official{ border-radius:50%; background:var(--white); border:3px solid var(--pine); box-shadow:0 0 0 2px var(--white); }
.mk-stay{ background:var(--dawn); border:2px solid var(--ink); }
.leaflet-popup-content-wrapper, .leaflet-tooltip{ border-radius:var(--radius); font-family:'IBM Plex Mono',monospace; font-size:var(--fs-caption); color:var(--ink); }
.leaflet-popup-content{ margin:10px 14px; line-height:1.55; }
.leaflet-container{ font-family:'Inter',sans-serif; }

.verify{ background:var(--ink); color:var(--paper); border-radius:var(--radius); padding:40px; display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:center; }
.verify h2.display{ color:var(--paper); }
.verify .kicker{ color:var(--hivis); }
.verify p{ color:#D6DAC6; margin-top:14px; font-size:var(--fs-body); }
.verify-data{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-body-s); }
.report-box{ margin-top:18px; }
.report-toggle{ background:none; border:none; color:var(--hivis); font:inherit; font-size:var(--fs-body-s); text-decoration:underline; cursor:pointer; padding:0; }
.report-toggle:disabled{ color:#8fa08f; text-decoration:none; cursor:default; }
#report-form{ margin-top:12px; display:grid; gap:8px; font-size:var(--fs-body-s); color:#D6DAC6; }
#report-form[hidden]{ display:none; }
#report-form label{ display:flex; gap:8px; align-items:center; cursor:pointer; }
#report-form textarea{ font:inherit; font-size:var(--fs-body-s); padding:8px; border-radius:6px; border:1px solid #4a5a4c; background:#22301f; color:var(--paper); resize:vertical; }
#report-form .report-send{ justify-self:start; background:var(--hivis); color:#fff; border:none; border-radius:6px; padding:8px 16px; font:inherit; font-size:var(--fs-body-s); font-weight:700; cursor:pointer; }
#report-web{ position:absolute; left:-5000px; top:auto; }
#report-hint{ font-size:var(--fs-small); }
.vd-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.14); gap:16px; }
.vd-row span:first-child{ color:#7FB299; }
.vd-row .ok{ color:var(--hivis); }
.vd-note{ font-size:var(--fs-caption); color:#7E998A; margin-top:10px; }

.results-table{ margin-top:20px; border-top:2px solid var(--ink); overflow-x:auto; }
.stays{ width:100%; border-collapse:collapse; }
.stays th{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-caption); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:#5a6b56; text-align:left; padding:10px 14px 10px 0; border-bottom:1px solid var(--ink); }
.stays td{ padding:16px 14px 16px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.stays th:last-child, .stays td:last-child{ padding-right:0; text-align:right; }
.pos{ font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--hivis-dark); white-space:nowrap; }
.stays .name{ font-weight:700; display:block; }
.stays .place-type{ font-size:var(--fs-body-s); color:#5a6b56; display:block; margin-top:2px; }
.dist-badge{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-body-s); background:var(--paper-dim); padding:5px 10px; border-radius:var(--radius); display:inline-block; white-space:nowrap; }
.walk-min{ display:block; font-family:'IBM Plex Mono',monospace; font-size:var(--fs-caption); color:#5a6b56; margin-top:5px; }
.stars{ font-family:'IBM Plex Mono',monospace; color:var(--hivis-dark); font-size:var(--fs-body-s); white-space:nowrap; }
.book-btn{ display:inline-block; text-decoration:none; font-family:'Inter',sans-serif; font-weight:700; font-size:var(--fs-compact); background:var(--ink); color:var(--paper); border:none; padding:9px 16px; border-radius:var(--radius); cursor:pointer; white-space:nowrap; }
.book-btn:hover{ background:var(--hivis-dark); }
.rating-inline{ display:none; font-family:'IBM Plex Mono',monospace; color:var(--hivis-dark); font-size:var(--fs-small); margin-top:5px; }
.newcomer-note{ font-size:var(--fs-note); color:#33422f; margin-top:12px; }
.partner{ display:block; font-size:var(--fs-micro); color:#5a6b56; margin-top:5px; font-family:'IBM Plex Mono',monospace; }
.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.no-match{ padding:20px 0; color:#5a6b56; font-family:'IBM Plex Mono',monospace; font-size:var(--fs-body-s); }
.data-note{ margin-top:18px; font-size:var(--fs-small); color:#5a6b56; border-left:3px solid var(--hivis); padding-left:12px; max-width:70ch; }

.nearby-grid{ margin-top:20px; border-top:2px solid var(--ink); }
.nb-link{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 2px; border-bottom:1px solid var(--line); text-decoration:none; font-size:var(--fs-note); color:var(--ink); }
.nb-link:hover, .nb-link:focus-visible{ background:var(--paper-dim); outline:none; }
.nb-link .nb-name{ font-weight:700; }
.nb-link .nb-loc{ color:#5a6b56; font-size:var(--fs-small); font-weight:400; }
.nb-link .nb-dist{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-small); color:var(--hivis-dark); white-space:nowrap; }

footer{ border-top:1px solid var(--line); padding:44px 28px 30px; }
.foot-wrap{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; }
.foot-wrap .logo .bib{ font-size:var(--fs-micro); }
.foot-note{ font-size:var(--fs-compact); color:#5a6b56; max-width:44ch; }
.foot-give{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-compact); color:var(--ink); margin-bottom:10px; }
.foot-give b{ color:var(--hivis-dark); }
.foot-links{ display:flex; gap:26px; flex-wrap:wrap; }
.foot-links a{ font-size:var(--fs-body-s); text-decoration:none; color:var(--pine); font-weight:600; }
.foot-links a:hover{ color:var(--hivis-dark); }

@media (max-width: 860px){
  .verify{ grid-template-columns:1fr; padding:28px; }
  #map{ height:300px; }
  .stays th:nth-child(4), .stays td:nth-child(4){ display:none; }
  .rating-inline{ display:block; }
  .foot-wrap{ flex-direction:column; }
}
.stay-lead{ max-width:60ch; color:#33422F; margin:18px 0 12px; }
/* Phones: the five-column stays table can't fit 390px (a nowrap button
   pushed the page sideways) — each row becomes a card instead. */
@media (max-width: 560px){
  .stays thead{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }
  .stays, .stays tbody{ display:block; width:100%; }
  .stays tr{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"pos name walk" "book book book"; column-gap:12px; row-gap:10px; padding:16px 0; border-bottom:1px solid var(--line); }
  .stays td{ display:block; padding:0; border:0; }
  .stays td.pos{ grid-area:pos; padding-top:2px; }
  .stays td:nth-child(2){ grid-area:name; min-width:0; }
  .stays td:nth-child(3){ grid-area:walk; text-align:right; }
  .stays td.stars{ display:none; }
  .stays td.book-cell{ grid-area:book; text-align:left; }
  .stays td.book-cell .book-btn{ display:block; width:100%; text-align:center; }
  .stays td.book-cell .partner{ text-align:right; }
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* Directory page (/parkruns/) --------------------------------------------- */
.dir-filter{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--white); border:2px solid var(--ink); border-radius:var(--radius); padding:12px 16px; margin-bottom:14px; box-shadow:0 18px 40px -22px rgba(21,34,24,0.35); }
.dir-filter label{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:0.12em; color:var(--hivis-dark); }
.dir-filter input{ flex:1; min-width:200px; font-family:'Inter',sans-serif; font-size:var(--fs-body); border:none; background:transparent; color:var(--ink); padding:6px 0; }
.dir-filter input:focus{ outline:none; }
.dir-filter:focus-within{ border-color:var(--hivis-dark); }
.dir-filter input::placeholder{ color:#8a967f; }
#dir-count{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-small); color:#5a6b56; white-space:nowrap; }
/* Region chips — homepage .chip styling, adapted for the paper background */
.dir-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.chip{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-small); padding:7px 12px; border:1px solid rgba(21,34,24,0.4); border-radius:20px; cursor:pointer; color:var(--ink); background:transparent; }
.chip:hover{ border-color:var(--hivis-dark); color:var(--hivis-dark); }
.chip:focus-visible{ outline:2px solid var(--hivis-dark); outline-offset:2px; }
.chip[aria-pressed="true"]{ background:var(--hivis); border-color:var(--hivis); color:var(--white); }
.chip .chip-n{ opacity:0.75; margin-left:2px; }
.dir-group{ margin-bottom:38px; }
.dir-group > summary{ cursor:pointer; list-style:none; }
.dir-group > summary::-webkit-details-marker{ display:none; }
.dir-group > summary:focus-visible{ outline:2px solid var(--hivis-dark); outline-offset:4px; }
.dir-group h2.display{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.dir-group .disclose{ display:inline-block; color:var(--hivis-dark); font-size:var(--fs-note); transition:transform 0.15s ease; }
.dir-group:not([open]) .disclose{ transform:rotate(-90deg); }
@media (prefers-reduced-motion: reduce){ .dir-group .disclose{ transition:none; } }
.group-count{ font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:var(--fs-body-s); color:var(--hivis-dark); letter-spacing:0.04em; text-transform:none; }
.dir-list{ list-style:none; margin-top:14px; border-top:2px solid var(--ink); }
.dir-item a{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 2px; border-bottom:1px solid var(--line); text-decoration:none; font-size:var(--fs-note); color:var(--ink); }
.dir-item a:hover, .dir-item a:focus-visible{ background:var(--paper-dim); outline:none; }
.dir-item .d-name{ font-weight:700; }
.dir-item .d-loc{ color:#5a6b56; font-size:var(--fs-small); font-weight:400; }
.dir-item .d-time{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-small); color:var(--hivis-dark); white-space:nowrap; }
.dir-item[hidden], .dir-group[hidden]{ display:none; }
.dir-none{ display:none; padding:20px 0; color:#5a6b56; font-family:'IBM Plex Mono',monospace; font-size:var(--fs-body-s); }