/* =============================================================================
   BEACHES.LLC — the property's own components
   -----------------------------------------------------------------------------
   Loaded after assets/css/site.css (and dark.css in the dark edition). Every
   colour below reads a house token — --ink, --ink-77, --ink-55, --paper,
   --tint, --line, --line-soft, --accent, --muted — so dark.css has already
   answered it. The few literals this sheet needs (washes, shadows, the map's
   glass) are declared ONCE as --bx-* tokens at the top and given their dark
   values straight under them; nothing further down names a colour.

   Class names checked against site.css, dark.css, search.css, assistant.css
   and toast.css before use: .chip, .tbl, .bar, .src, .hp, .desk, .crumb,
   .muted and every .bx / .bp / .cp / .sp prefix are free there.

   Mobile first. The explorer's three-column layout (rail | map | card) starts
   at 900px; under it the rail is a swipeable strip of filter cards, the map
   has its own height, and the card is a bottom sheet.
   ========================================================================== */

:root {
    --bx-wash:    rgba(30, 38, 43, .045);  /* hover and selected rows       */
    --bx-wash-2:  rgba(30, 38, 43, .085);  /* pressed / stronger hover      */
    --bx-field:   rgba(30, 38, 43, .5);    /* a text input announces itself */
    --bx-glass:   rgba(255, 255, 255, .88);/* panels floated over the map   */
    --bx-shadow:  0 1px 2px rgba(30, 38, 43, .08), 0 10px 30px rgba(30, 38, 43, .12);
    --bx-sheet:   0 -12px 40px rgba(30, 38, 43, .18);
    --bx-rail-w:  clamp(15rem, 19vw, 18rem);
    --bx-card-w:  clamp(19rem, 26vw, 25rem);
    /* The explorer's height at 900px+: the bar above it (#find) plus this fill
       the viewport exactly when the "Find a beach" link scrolls there. #find
       lands at --nav-h + 14px (site.css's [id] scroll-margin) and the bar is
       two rows, search and the in-view line, measured at 105px = 6.6rem.
       The old "- 5.5rem" left out the bar and ran 31px past the fold. */
    --bx-h:       clamp(30rem, calc(100vh - var(--nav-h) - 14px - 6.6rem), 60rem);
    --bx-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@supports (height: 100svh) {
    :root { --bx-h: clamp(30rem, calc(100svh - var(--nav-h) - 14px - 6.6rem), 60rem); }
}
/* html[data-dark] outranks :root (0,1,1 against 0,1,0), so these win
   whatever order the sheets arrive in. */
html[data-dark] {
    --bx-wash:    rgba(255, 255, 255, .05);
    --bx-wash-2:  rgba(255, 255, 255, .1);
    --bx-field:   rgba(255, 255, 255, .34);
    --bx-glass:   rgba(12, 17, 22, .88);
    --bx-shadow:  0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .5);
    --bx-sheet:   0 -12px 40px rgba(0, 0, 0, .55);
}

/* .btn and every flex/grid box below set a display, which beats the UA's
   [hidden] rule — #bx-more, #bx-card and #bx-suggest all start hidden. */
main [hidden] { display: none !important; }

/* ================================================================ shared ==== */
.muted { color: var(--ink-55); }
.vh {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    border: 0; overflow: hidden; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%);
}
/* The honeypot: out of sight and out of the tab order, but still rendered, so
   a bot that skips display:none fields still fills it. Never display:none. */
.hp, .desk .hp {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    border: 0; overflow: hidden; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0;
}

.crumb {
    margin: 0 0 1.1rem; font-size: .78rem; font-weight: 500; color: var(--ink-55);
    overflow-wrap: anywhere;
}
.crumb a { color: var(--ink-77); text-decoration: none; border-bottom: 1px solid var(--line); }
.crumb a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* A small source label: "OSM surface=sand". Monospace because it IS a tag. */
.src {
    font-family: var(--bx-mono); font-size: .7rem; font-weight: 500;
    letter-spacing: 0; color: var(--ink-55); overflow-wrap: anywhere;
}
.as-written { color: var(--ink-55); font-size: .88em; }
/* .bp ul.as-written, not ul.as-written: `.bp ul` (0,1,1) comes later and would
   indent it, and `.bp li + li` would add its margin on top of the gap. */
ul.as-written, .bp ul.as-written { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .3rem; font-size: .85rem; }
.bp ul.as-written > li + li { margin-top: 0; }

main code {
    font-family: var(--bx-mono); font-size: .85em; padding: .05em .35em;
    border: 1px solid var(--line); border-radius: 4px; color: var(--ink-77);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ tables
   .tbl is the scroll wrapper: a wide table scrolls inside it and never widens
   the page. The same table look serves the card and compare, whose markup
   app.js writes. */
.tbl {
    max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; margin: .8rem 0 1rem;
    scrollbar-width: thin;
}
.tbl table, .bx__card table, #bx-compare-body table, #bx-cond table {
    width: 100%; border-collapse: collapse; font-size: .86rem;
    font-variant-numeric: tabular-nums;
}
.tbl th, .tbl td, .bx__card th, .bx__card td,
#bx-compare-body th, #bx-compare-body td, #bx-cond th, #bx-cond td {
    padding: .55rem .9rem .55rem 0; text-align: start; vertical-align: top;
    border-bottom: 1px solid var(--line-soft);
}
.tbl thead th, .bx__card thead th, #bx-compare-body thead th, #bx-cond thead th {
    font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-55); border-bottom-color: var(--line); white-space: nowrap;
}
.tbl tbody th, .bx__card tbody th, #bx-compare-body tbody th { color: var(--ink); font-weight: 600; }
.tbl tr:last-child > * { border-bottom: 0; }

/* The coverage bar. --p arrives as a percentage string from PHP ("48.5%"),
   which a gradient stop takes as it is. */
.bar {
    display: inline-block; vertical-align: middle;
    width: clamp(3.5rem, 12vw, 8rem); height: 6px; border-radius: 3px;
    background: linear-gradient(to right, var(--ink) var(--p, 0%), var(--line) var(--p, 0%));
    margin-inline-end: .45rem;
}
[dir="rtl"] .bar { background: linear-gradient(to left, var(--ink) var(--p, 0%), var(--line) var(--p, 0%)); }

/* ------------------------------------------------------------------- chips */
.chip, button.chip {
    display: inline-flex; align-items: baseline; gap: .4rem;
    padding: .42rem .72rem; border: 1px solid var(--line); border-radius: 999px;
    background: transparent; font: inherit; font-size: .76rem; font-weight: 600;
    line-height: 1.25; letter-spacing: -.005em; color: var(--ink-77);
    text-decoration: none; cursor: pointer; text-align: start;
    transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip em { font-style: normal; font-weight: 500; opacity: .62; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip[aria-pressed="true"] em { opacity: .72; }
.chip[disabled] { opacity: .4; cursor: default; }
/* Not recorded: a dashed edge, because it is an absence, not a value. Pressed
   it fills grey rather than ink, so it never reads as one more "yes". */
/* .chip.chip--nr, not .chip--nr: `button.chip` above is 0,1,1 and would win. */
.chip.chip--nr { border-style: dashed; border-color: var(--bx-field); color: var(--ink-55); }
.chip.chip--nr:hover { border-color: var(--ink); color: var(--ink); }
.chip.chip--nr[aria-pressed="true"] { background: var(--muted); border-color: var(--muted); border-style: solid; color: var(--paper); }

/* ================================================================ EXPLORER == */
.bx__head { padding-block: clamp(1.4rem, 3.5vw, 2.6rem) .2rem; }
.bx__h {
    font-size: clamp(1.65rem, 4vw, 2.6rem); font-weight: 300;
    letter-spacing: -.032em; line-height: 1.12; overflow-wrap: anywhere;
}
.bx__h span { display: block; color: var(--ink-55); }
.bx__lede { max-width: 68ch; margin: .8rem 0 0; font-size: clamp(.95rem, 1.2vw, 1.05rem); font-weight: 300; line-height: 1.6; }

/* ------------------------------------------------------------ the bar ---- */
.bx__bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem;
    padding-block: 1rem .7rem;
}
.bx__search { position: relative; z-index: 40; flex: 1 1 100%; min-width: 0; margin: 0; }
#bx-q {
    width: 100%; font: inherit; font-size: .95rem; font-weight: 500;
    padding: .7rem .9rem; border-radius: 9px;
    color: var(--ink); background: var(--paper); border: 1px solid var(--bx-field);
    -webkit-appearance: none; appearance: none;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
#bx-q::placeholder { color: var(--ink-55); font-weight: 400; }
#bx-q:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--bx-wash-2); }
#bx-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#bx-suggest {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    margin: 0; padding: .3rem; list-style: none;
    max-height: min(60vh, 26rem); overflow-y: auto; overscroll-behavior: contain;
    background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: var(--bx-shadow); overflow-wrap: anywhere;
}
#bx-suggest li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem;
    padding: .5rem .6rem; border-radius: 7px; cursor: pointer;
    font-size: .88rem; color: var(--ink);
}
#bx-suggest li:hover, #bx-suggest li[aria-selected="true"] { background: var(--bx-wash-2); }
#bx-suggest li small, #bx-suggest li span:not(:first-child) { font-size: .74rem; color: var(--ink-55); }
#bx-suggest mark { background: none; color: inherit; font-weight: 700; }

/* MATCHES | COVERAGE: one segmented control, the pressed half filled in ink. */
.bx__modes {
    display: inline-flex; padding: 3px; gap: 2px; flex: 0 0 auto;
    border: 1px solid var(--line); border-radius: 999px; background: var(--bx-wash);
}
.bx__modes button {
    font: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; padding: .42rem .8rem; border: 0; border-radius: 999px;
    background: transparent; color: var(--ink-55); cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.bx__modes button:hover { color: var(--ink); }
.bx__modes button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.bx__excl, .bx__limit {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .78rem; font-weight: 600; color: var(--ink-77); cursor: pointer; user-select: none;
}
.bx__excl input, .bx__limit input { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); flex: 0 0 auto; }
.bx__limit:has(input:disabled) { color: var(--ink-55); cursor: default; }

.bx__inview {
    flex: 1 1 100%; margin: 0; min-height: 1.4em;
    font-size: .74rem; font-weight: 600; letter-spacing: .02em;
    color: var(--ink-55); font-variant-numeric: tabular-nums;
}
.bx__inview b, .bx__inview strong { color: var(--ink); }

/* Selects inside the explorer: drawn by hand so both editions match. The
   chevron is two gradients in currentColor, so it follows the ink. */
.bx select, .desk select {
    font: inherit; font-size: .8rem; font-weight: 500; color: var(--ink);
    padding: .38rem 1.9rem .38rem .6rem; border: 1px solid var(--bx-field); border-radius: 8px;
    background-color: var(--paper);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
    -webkit-appearance: none; appearance: none; max-width: 100%; cursor: pointer;
}
.bx select:focus-visible, .desk select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------- the body ---- */
.bx__body { position: relative; border-top: 1px solid var(--line-soft); }

/* The rail, on a phone: a strip of filter cards swiped sideways inside its
   own scroller, so thirteen families do not push the map off the screen. */
.bx__rail {
    display: flex; align-items: flex-start; gap: .7rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    padding: .8rem var(--gutter) .9rem; scroll-padding-inline: var(--gutter);
    scrollbar-width: thin; border-bottom: 1px solid var(--line-soft);
}
.bx__rail > .fx {
    flex: 0 0 min(78vw, 17rem); min-width: 0; scroll-snap-align: start;
    padding: .75rem .8rem .8rem; border: 1px solid var(--line); border-radius: 12px;
    background: var(--paper);
}
/* A snap target too: without it the strip snaps to the first card on load
   and clips "Filters / Clear all" off the left edge. */
.bx__railhead {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem;
    padding-top: .2rem; scroll-snap-align: start;
}
.bx__railhead h2 {
    font-size: .625rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--ink-55);
}
.bx__clear {
    font: inherit; font-size: .76rem; font-weight: 600; color: var(--ink);
    background: none; border: 0; padding: .2rem 0; cursor: pointer;
    text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px;
}
.bx__clear:hover { text-decoration-color: var(--accent); }

/* A family. */
.fx { margin: 0; padding: 0; border: 0; min-width: 0; }
.fx legend {
    display: block; width: 100%; padding: 0; margin: 0 0 .55rem;
    font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink);
}
.fx legend small {
    display: block; margin-top: .15rem; font-size: .72rem; font-weight: 500;
    letter-spacing: 0; text-transform: none; color: var(--ink-55);
    font-variant-numeric: tabular-nums;
}
.fx__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.fx__note { margin: .55rem 0 0; font-size: .72rem; line-height: 1.45; color: var(--ink-55); }
.fx__note a { color: var(--ink-77); }
.fx__sea { display: grid; gap: .55rem; }
.fx__sea label {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
    font-size: .8rem; font-weight: 600; color: var(--ink-77);
}
.fx__sea input[type="range"] { flex: 1 1 6rem; min-width: 0; width: auto; margin: 0; }
.fx__sea input[type="range"]:disabled { opacity: .4; cursor: not-allowed; }
.fx__sea output { min-width: 3.4em; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ the map ---- */
.bx__mapwrap {
    position: relative; isolation: isolate; min-width: 0;
    height: 62vh; min-height: 20rem; max-height: 38rem;
    background: var(--tint);
}
@supports (height: 100svh) { .bx__mapwrap { height: 62svh; } }
#bx-map.bx__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.bx__legend {
    position: absolute; z-index: 3; top: .6rem; left: .6rem;
    max-width: calc(100% - 4.4rem); margin: 0;
    padding: .4rem .65rem; border-radius: 8px; border: 1px solid var(--line);
    background: var(--bx-glass); box-shadow: var(--bx-shadow);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font-size: .72rem; line-height: 1.4; color: var(--ink-77);
}
.bx__legend:empty { display: none; }
.bx__legend b, .bx__legend strong { color: var(--ink); }
.bx__nojs {
    position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
    padding: 1.5rem; text-align: center; font-size: .9rem; color: var(--ink-77);
}

/* ------------------------------------------------------------ the card ---
   A bottom sheet under 900px: fixed to the foot of the viewport, its own
   scroller, under the header (z 60) and the menu (z 200). */
.bx__card {
    position: fixed; z-index: 55; left: 0; right: 0; bottom: 0;
    max-width: 42rem; margin-inline: auto;
    max-height: min(72vh, 44rem); overflow-y: auto; overscroll-behavior: contain;
    padding: .7rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
    background: var(--paper); border: 1px solid var(--line); border-bottom: 0;
    border-radius: 16px 16px 0 0; box-shadow: var(--bx-sheet);
    font-size: .9rem; overflow-wrap: anywhere;
    animation: bx-sheet .32s var(--ease);
}
@supports (height: 100svh) { .bx__card { max-height: min(72svh, 44rem); } }
.bx__card::before {
    content: ''; display: block; width: 38px; height: 4px; border-radius: 2px;
    background: var(--line); margin: 0 auto .7rem;
}
@keyframes bx-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Card content is written by app.js; these read its plain elements, and the
   beach-page classes (.bp__facts, .src, .is-nr, .bp__sst, .bp__reveal) work
   here unchanged. */
.bx__card h2 {
    font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
    margin: 0 2.6rem .25rem 0;
}
.bx__card h3 {
    margin: 1.2rem 0 .45rem; font-size: .625rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--ink-55);
}
.bx__card p { margin: .35rem 0; }
.bx__card ul, .bx__card ol { margin: .35rem 0; padding-inline-start: 1.1rem; }
.bx__card li + li { margin-top: .2rem; }
.bx__card figure { margin: .8rem 0; }
.bx__card img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--bx-wash); }
.bx__card figcaption { margin-top: .35rem; font-size: .72rem; color: var(--ink-55); }
.bx__card dl { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: .3rem .9rem; margin: .5rem 0; }
.bx__card dt { color: var(--ink-55); font-size: .8rem; }
.bx__card dd { margin: 0; color: var(--ink); }
.bx__card .btn { margin: .2rem .3rem .2rem 0; }
.bx__card .bx__x, .bx__card .bx__close, .bx__card [data-close] {
    position: sticky; top: 0; float: right; z-index: 2;
    width: 36px; height: 36px; margin: -.2rem -.4rem 0 .5rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font: inherit; font-size: 1.1rem; line-height: 1; color: var(--ink-77);
    background: var(--paper); border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
}
.bx__card .bx__x:hover, .bx__card .bx__close:hover, .bx__card [data-close]:hover { border-color: var(--ink); color: var(--ink); }

/* The conditions slot, card or page: a modelled reading, never "live". */
#bx-cond dl, .bx__cond dl {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
    gap: .6rem 1rem; margin: .5rem 0;
}
#bx-cond dt, .bx__cond dt {
    font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55);
}
#bx-cond dd, .bx__cond dd { margin: .1rem 0 0; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }
#bx-cond p, .bx__cond p { font-size: .78rem; color: var(--ink-55); }

/* ------------------------------------------------------------ the list ---- */
.bx__list { padding-block: 1.8rem 1rem; }
.bx__listhead {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem;
    padding-bottom: .8rem; border-bottom: 1px solid var(--line);
}
.bx__listhead h2 {
    margin-inline-end: auto; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.bx__listhead > label:not(.bx__limit) {
    display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    font-size: .78rem; font-weight: 600; color: var(--ink-77); min-width: 0;
}
.bx__rows { list-style: none; margin: 0; padding: 0; overflow-wrap: anywhere; }
.bx__rows > li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem;
    padding: .7rem .4rem; border-bottom: 1px solid var(--line-soft);
    font-size: .9rem; min-width: 0;
}
.bx__rows > li:hover, .bx__rows > li[aria-current], .bx__rows > li.is-on { background: var(--bx-wash); }
.bx__rows a, .bx__rows b { color: var(--ink); font-weight: 600; }
.bx__rows a { text-decoration: none; }
.bx__rows a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.bx__rows small, .bx__rows span { font-size: .78rem; color: var(--ink-55); }
.bx__rows button {
    font: inherit; font-size: .7rem; font-weight: 600; color: var(--ink-77);
    padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 999px;
    background: transparent; cursor: pointer;
}
.bx__rows button:hover { border-color: var(--ink); color: var(--ink); }
.bx__rows:empty::after {
    content: ''; display: block; min-height: 3rem;
}
#bx-more { margin: 1.1rem 0 0; }

/* ---------------------------------------------------------- compare ----- */
.bx__compare { padding-block: 1.4rem 2rem; }
.bx__compare h2 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; letter-spacing: -.02em; margin-bottom: .6rem; }
#bx-compare-body { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
#bx-compare-body table { min-width: 34rem; table-layout: fixed; }
#bx-compare-body th[scope="row"], #bx-compare-body tbody th {
    position: sticky; left: 0; background: var(--paper); width: 9.5rem; font-size: .8rem;
}
#bx-compare-body td { overflow-wrap: anywhere; }
#bx-compare-body .is-nr, #bx-compare-body td:empty { color: var(--ink-55); }
#bx-compare-body button {
    font: inherit; font-size: .7rem; font-weight: 600; color: var(--ink-77);
    padding: .25rem .55rem; border: 1px solid var(--line); border-radius: 999px;
    background: transparent; cursor: pointer;
}
#bx-compare-body button:hover { border-color: var(--ink); color: var(--ink); }

/* ---------------------------------------------------------- coverage ----- */
.bx-cov { padding-block: clamp(2rem, 5vw, 3.6rem) var(--band); border-top: 1px solid var(--line-soft); }
.bx-cov h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 300; letter-spacing: -.03em; }
.bx-cov > p { max-width: 68ch; margin: .7rem 0 0; }
.bx-cov td:last-child { white-space: nowrap; }
.bx-cov__more { font-size: .88rem; }

/* ================================================== the explorer at 900+ ==
   Three columns: rail | map | card. The card column is `auto`, so while the
   card is hidden it takes no width and the map fills the space. */
@media (min-width: 900px) {
    .bx__search { flex: 1 1 22rem; max-width: 36rem; }
    .bx__body {
        display: grid; height: var(--bx-h);
        grid-template-columns: var(--bx-rail-w) minmax(0, 1fr) auto;
        grid-template-rows: minmax(0, 1fr);
        border-bottom: 1px solid var(--line-soft);
    }
    .bx__rail {
        display: block; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none;
        padding: 0 1.1rem 1.4rem var(--gutter); border-bottom: 0;
        border-inline-end: 1px solid var(--line-soft);
    }
    .bx__rail > .fx {
        padding: 0 0 1rem; margin-bottom: 1rem; border: 0; border-radius: 0;
        border-bottom: 1px solid var(--line-soft); background: none;
    }
    .bx__rail > .fx:last-child { border-bottom: 0; }
    .bx__railhead {
        position: sticky; top: 0; z-index: 1; flex-direction: row;
        align-items: center; justify-content: space-between;
        padding: .9rem 0 .7rem; margin-bottom: .6rem; background: var(--paper);
        border-bottom: 1px solid var(--line);
    }
    .bx__mapwrap { height: auto; min-height: 0; max-height: none; }
    .bx__card {
        position: relative; z-index: auto; left: auto; right: auto; bottom: auto;
        width: var(--bx-card-w); max-width: none; max-height: none; margin: 0;
        padding: 1.1rem 1.2rem 1.6rem; border: 0; border-inline-start: 1px solid var(--line);
        border-radius: 0; box-shadow: none; animation: none;
    }
    .bx__card::before { display: none; }
}

/* ============================================================ BEACH PAGE == */
.bp, .cp, .sp { padding-block: clamp(1.4rem, 4vw, 2.8rem) var(--band); }
.bp.wrap { max-width: calc(54rem + 2 * var(--gutter)); }
.bp h1, .cp h1, .sp h1 {
    font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 300;
    letter-spacing: -.032em; line-height: 1.1; overflow-wrap: anywhere;
}
.bp h2, .cp h2, .sp h2 {
    margin: 2.4rem 0 .7rem; font-size: clamp(1.12rem, 2vw, 1.38rem);
    font-weight: 600; letter-spacing: -.02em; line-height: 1.25;
}
.bp h2 small { font-size: .7em; font-weight: 500; color: var(--ink-55); letter-spacing: 0; }
.bp h3, .sp h3 { margin: 1.4rem 0 .4rem; font-size: .95rem; font-weight: 600; }
.bp p, .cp p, .sp p { max-width: 70ch; }
.bp ul, .sp ul { padding-inline-start: 1.15rem; }
.bp li + li, .sp li + li { margin-top: .3rem; }

.bp__head { margin-bottom: 1.2rem; }
.bp__local { margin: .4rem 0 0; font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 300; color: var(--ink-77); overflow-wrap: anywhere; }
.bp__where {
    margin: .7rem 0 0; font-size: .7rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-55); overflow-wrap: anywhere;
}
.bp__lede, .cp .bp__lede, .sp .bp__lede {
    font-size: clamp(1.02rem, 1.35vw, 1.15rem); font-weight: 300; line-height: 1.6;
    color: var(--ink-77); max-width: 64ch; margin: 1rem 0 0;
}
.bp__sec { margin-top: 2.2rem; }
.bp__sec > h2:first-child { margin-top: 0; padding-top: 1.6rem; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ the photo --- */
.bp__photo { margin: 1.2rem 0 1.4rem; }
.bp__slide { margin: 0; min-width: 0; }
.bp__photo img {
    display: block; max-width: 100%; width: auto; height: auto; max-height: 72vh;
    border-radius: 10px; background: var(--bx-wash);
}
.bp__photo figcaption { margin-top: .45rem; font-size: .74rem; line-height: 1.45; color: var(--ink-55); overflow-wrap: anywhere; }
.bp__photo figcaption a { color: var(--ink-77); }

/* Two or more photographs: a snap carousel inside its own scroller. */
.bp__photo--many {
    display: flex; gap: .8rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: thin;
}
.bp__photo--many .bp__slide { flex: 0 0 min(88%, 34rem); scroll-snap-align: start; }
.bp__photo--many img { width: 100%; max-height: 62vh; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) { .bp__photo--many { scroll-behavior: smooth; } }

/* A clothing-optional beach: the photograph waits behind a button. */
.bp__reveal {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    width: 100%; aspect-ratio: 4 / 3; max-height: 60vh; padding: 1rem;
    font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink);
    background: var(--bx-wash); border: 1px dashed var(--bx-field); border-radius: 10px;
    cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.bp__reveal:hover { border-color: var(--ink); background: var(--bx-wash-2); }
.bp__reveal small { font-size: .74rem; font-weight: 500; color: var(--ink-55); }

.bp__nophoto {
    margin: 1.2rem 0; padding: .9rem 1rem; font-size: .88rem; color: var(--ink-77);
    border: 1px dashed var(--bx-field); border-radius: 10px;
}

/* ------------------------------------------------------------ the facts --- */
.bp__facts th[scope="row"] { width: 36%; min-width: 7.5rem; font-size: .84rem; }
.bp__facts td { color: var(--ink); }
.bp__facts .src { display: block; margin-top: .15rem; }
.bp__facts .is-nr th, .bp__facts .is-nr td, tr.is-nr > * { color: var(--ink-55); font-weight: 400; }
.bp__facts .is-nr a { color: var(--ink-77); }
.bp__count { margin: .2rem 0 0; font-size: .8rem; color: var(--ink-55); font-variant-numeric: tabular-nums; }

/* Twelve monthly normals: the current month carries the accent underline. */
.bp__sst { min-width: 34rem; table-layout: fixed; }
.tbl .bp__sst th, .tbl .bp__sst td { text-align: center; padding-inline: .2rem; }
.bp__sst td { font-size: .84rem; color: var(--ink-77); }
.bp__sst .is-now { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); background: var(--bx-wash); }

.bp .bp__near { list-style: none; padding: 0; columns: 15rem; column-gap: 2rem; }
.bp .bp__near li { break-inside: avoid; margin: 0; padding: .2rem 0; overflow-wrap: anywhere; }
.bp__acts ul { list-style: none; padding: 0; margin: 0; }
.bp__acts li { padding: .5rem 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.bp__acts li + li { margin-top: 0; }

/* ----------------------------------------------------- the report form --- */
.desk { display: grid; gap: .9rem; max-width: 36rem; margin-top: 1rem; }
.desk label {
    display: grid; gap: .35rem; min-width: 0;
    font-size: .8rem; font-weight: 600; color: var(--ink);
}
.desk input:not([type="hidden"]), .desk textarea, .desk select {
    width: 100%; min-width: 0; font: inherit; font-size: .95rem; font-weight: 500;
    padding: .7rem .85rem; border: 1px solid var(--bx-field); border-radius: 9px;
    background-color: var(--paper); color: var(--ink);
}
.desk select { padding-right: 2rem; }
.desk input:not([type="hidden"]), .desk textarea { -webkit-appearance: none; appearance: none; }
.desk textarea { resize: vertical; min-height: 6rem; line-height: 1.5; }
.desk input:focus, .desk textarea:focus, .desk select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--bx-wash-2); }
.desk input:focus-visible, .desk textarea:focus-visible, .desk select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.desk .btn { justify-self: start; }

/* ========================================================= COUNTRY PAGE == */
.cp > p .btn { margin-top: .4rem; }
.cp__list { list-style: none; padding: 0; margin: .6rem 0 0; columns: 16rem; column-gap: 2.2rem; }
.cp__list li { break-inside: avoid; padding: .28rem 0; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.cp__list a { color: var(--ink); text-decoration: none; }
.cp__list a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* The country index on /sources: a newspaper column list. */
.cp__cols, .sp .cp__cols { list-style: none; padding: 0; margin: .6rem 0 0; max-width: none; columns: 12.5rem; column-gap: 2rem; font-size: .88rem; }
.cp__cols li {
    display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
    break-inside: avoid; padding: .22rem 0; border-bottom: 1px solid var(--line-soft);
}
.cp__cols li + li { margin-top: 0; }
.cp__cols a { color: var(--ink); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.cp__cols a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.cp__cols small { flex: 0 0 auto; font-size: .74rem; color: var(--ink-55); font-variant-numeric: tabular-nums; }

/* ========================================================== SOURCES PAGE == */
.sp > h2[id] { padding-top: 1.4rem; border-top: 1px solid var(--line); }
.sp ul { max-width: 72ch; }

/* ============================================================== MAPLIBRE ==
   The library's controls, popups and attribution, re-drawn in the house
   tokens. Its icons are dark SVG backgrounds, so the dark edition inverts
   them (hue-rotate keeps the geolocate blue blue). */
.bx .maplibregl-map { font: 12px/1.4 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.bx .maplibregl-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.bx .maplibregl-ctrl-group {
    background: var(--paper); border-radius: 9px; overflow: hidden;
}
.bx .maplibregl-ctrl-group:not(:empty) { box-shadow: 0 0 0 1px var(--line), var(--bx-shadow); }
.bx .maplibregl-ctrl-group button { width: 32px; height: 32px; }
.bx .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
.bx .maplibregl-ctrl button:not(:disabled):hover { background-color: var(--bx-wash-2); }
.bx .maplibregl-ctrl-group button:focus:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.bx .maplibregl-ctrl-attrib-button:focus { box-shadow: 0 0 0 2px var(--accent); }

.bx .maplibregl-ctrl.maplibregl-ctrl-attrib {
    background-color: var(--bx-glass); color: var(--ink-77);
    padding: 1px 7px; border-top-left-radius: 6px; font-size: 11px;
}
.bx .maplibregl-ctrl-attrib.maplibregl-compact { background-color: var(--paper); color: var(--ink-77); box-shadow: 0 0 0 1px var(--line); }
.bx .maplibregl-ctrl-attrib a { color: var(--ink-77); }
.bx .maplibregl-ctrl-attrib a:hover { color: var(--ink); }
.bx .maplibregl-ctrl-scale {
    background-color: var(--bx-glass); color: var(--ink-77);
    border-color: var(--ink-55); font-size: 10px;
}

.bx .maplibregl-popup { max-width: min(18rem, calc(100vw - 2rem)) !important; }
.bx .maplibregl-popup-content {
    background: var(--paper); color: var(--ink-77); border: 1px solid var(--line);
    border-radius: 8px; box-shadow: var(--bx-shadow);
    padding: .5rem .75rem; font-size: .78rem; line-height: 1.4; overflow-wrap: anywhere;
}
.bx .maplibregl-popup-content b, .bx .maplibregl-popup-content strong { color: var(--ink); }
.bx .maplibregl-popup-close-button {
    width: 26px; height: 26px; font-size: 17px; line-height: 1; color: var(--ink-55); border-radius: 0 8px 0 6px;
}
.bx .maplibregl-popup-close-button:hover { background-color: var(--bx-wash-2); color: var(--ink); }
.bx .maplibregl-popup-anchor-top .maplibregl-popup-tip,
.bx .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.bx .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--paper); }
.bx .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.bx .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.bx .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--paper); }
.bx .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--paper); }
.bx .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--paper); }

html[data-dark] .bx .maplibregl-ctrl-icon,
html[data-dark] .bx .maplibregl-ctrl-attrib-button,
html[data-dark] .bx .maplibregl-ctrl-attrib.maplibregl-compact::after { filter: invert(1) hue-rotate(180deg); }

/* ============================================================ touch & a11y == */
/* Under 16px iOS Safari zooms a focused field and carries the layout with it.
   Matched on the pointer, not the width: a phone held sideways still zooms. */
@media (hover: none) and (pointer: coarse) {
    #bx-q, .bx select, .desk input:not([type="hidden"]), .desk textarea, .desk select { font-size: 16px; }
    .chip, button.chip { min-height: 36px; padding-block: .5rem; }
    .bx__modes button { min-height: 36px; }
    .bx__excl, .bx__limit { min-height: 36px; }
    .bx .maplibregl-ctrl-group button { width: 40px; height: 40px; }
    #bx-suggest li { padding-block: .7rem; }
}

@media (max-width: 380px) {
    .bx__modes button { padding-inline: .6rem; letter-spacing: .08em; }
    .bp__facts th[scope="row"] { min-width: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .chip, .bx__modes button, #bx-q, .bp__reveal { transition: none; }
    .bx__card { animation: none; }
    .bp__photo--many { scroll-behavior: auto; }
}

@media print {
    .bx__bar, .bx__body, .bx__compare, .desk, #bx-more { display: none !important; }
    .tbl { overflow: visible; }
    .bp__photo--many { display: block; overflow: visible; }
}

/* =============================================================================
   MARKUP app.js WRITES — the card, the list rows, the search options, compare,
   the conditions, the carousel controls and the map popup. Written only against
   the house tokens (site.css, redefined by dark.css), so every rule holds in both
   editions without a single dark override.
   ========================================================================== */

/* --- the card ------------------------------------------------------------ */
.bxc__head { display: flex; align-items: flex-start; gap: .6rem; }
.bxc__h { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.28rem; line-height: 1.2;
          letter-spacing: -.01em; overflow-wrap: anywhere; }
.bxc__h:focus { outline: none; }
.bxc__h:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.bxc__x, .bx__card [data-close] { flex: 0 0 auto; width: 2rem; height: 2rem; display: grid; place-items: center;
          border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink);
          font-size: 1.1rem; line-height: 1; cursor: pointer; }
.bxc__x:hover { border-color: var(--ink); }
.bxc__local { margin: .15rem 0 0; color: var(--ink-77); font-size: .98rem; overflow-wrap: anywhere; }
.bxc__where { margin: .35rem 0 0; color: var(--muted); font-size: .86rem; }
.bxc__state { margin: .6rem 0 0; font-size: .84rem; color: var(--ink-77); }
.bxc__state::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .4rem;
          border-radius: 50%; background: var(--accent); vertical-align: 0; }
.bxc__state.is-nr::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.bxc__state.is-ex::before { background: var(--ink-55); }

.bxc__photo { margin: .9rem 0 0; }
.bxc__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px; background: var(--sur-1); }
.bxc__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bxc__img button { position: absolute; inset: 0; width: 100%; border: 0; background: var(--sur-2); color: var(--ink);
          font: inherit; font-size: .9rem; cursor: pointer; }
.bxc__photo figcaption { margin-top: .4rem; font-size: .76rem; color: var(--muted); overflow-wrap: anywhere; }
.bxc__photo figcaption a { color: inherit; }
.bxc__pnav { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.bxc__pnav button, .bp__carnav button { min-width: 2.2rem; height: 2rem; border: 1px solid var(--line);
          border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; }
.bxc__pnav button:hover, .bp__carnav button:hover { border-color: var(--ink); }
.bxc__pnav button:disabled, .bp__carnav button:disabled { opacity: .4; cursor: default; }
.bxc__pcount, .bp__count-photo { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bxc__nophoto { margin: .9rem 0 0; padding: .7rem .8rem; border: 1px dashed var(--line); border-radius: 10px;
          font-size: .86rem; color: var(--ink-77); }

.bxc__facts, .bxc__season, .bxc__record, .bxc__actions, .bxc__condslot { margin-top: 1.1rem; }
.bxc__facts h3, .bxc__season h3, .bxc__record h3, .bxc__condslot h3 { margin: 0 0 .45rem; font-size: .72rem;
          letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.bxc__factlist, .bxc__reclist, .bxc__acts { list-style: none; margin: 0; padding: 0; }
.bxc__factlist li { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: .1rem .6rem;
          padding: .35rem 0; border-top: 1px solid var(--line-soft); font-size: .9rem; }
.bxc__factlist li > :first-child { color: var(--ink-77); }
.bxc__factlist small, .bxc__factlist .src { grid-column: 2; color: var(--muted); font-size: .74rem; overflow-wrap: anywhere; }
.bxc__nr { margin: .5rem 0 0; font-size: .84rem; color: var(--muted); }
.bxc__reclist li { padding: .3rem 0; border-top: 1px solid var(--line-soft); font-size: .86rem; overflow-wrap: anywhere; }
.bxc__acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.bxc__acts a, .bxc__acts button, .bxc__cmp { display: inline-flex; align-items: center; min-height: 2rem; padding: .25rem .7rem;
          border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink);
          font: inherit; font-size: .82rem; text-decoration: none; cursor: pointer; }
.bxc__acts a:hover, .bxc__acts button:hover, .bxc__cmp:hover { border-color: var(--ink); }
.bxc__acts button[aria-pressed="true"], .bxc__cmp[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* --- conditions (card and beach page) ------------------------------------ */
.cond { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .1rem 1rem; margin: 0; }
.cond__row { display: flex; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--line-soft); }
.cond__row dt { color: var(--ink-77); font-size: .86rem; }
.cond__row dd { margin: 0; font-size: .9rem; font-variant-numeric: tabular-nums; text-align: right; }
.cond__cap, .cond__credit { margin: .45rem 0 0; font-size: .74rem; color: var(--muted); }
.cond__credit a { color: inherit; }
@media (max-width: 420px) { .cond { grid-template-columns: minmax(0, 1fr); } }

/* --- the season strip (twelve monthly normals) --------------------------- */
.bxc__season ol, .bxc__season ul { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px;
          list-style: none; margin: 0; padding: 0; }
.bxc__season li { text-align: center; font-size: .66rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bxc__season li.is-now { color: var(--ink); font-weight: 700; }
.bxc__season p { margin: .4rem 0 0; font-size: .74rem; color: var(--muted); }

/* --- the list ------------------------------------------------------------ */
.bx__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .1rem .8rem;
          padding: .6rem 0; border-top: 1px solid var(--line-soft); }
.bx__row .bx__name { grid-column: 1; font-weight: 600; overflow-wrap: anywhere; }
.bx__row .bx__meta { grid-column: 1; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.bx__row .bx__pick { grid-column: 2; grid-row: 1 / span 2; }
.bx__row.is-nr .bx__name { font-weight: 500; color: var(--ink-77); }
.bx__row.is-note { display: block; color: var(--muted); font-style: italic; }
.bx__pick { min-height: 2rem; padding: .25rem .75rem; border: 1px solid var(--line); border-radius: 999px;
          background: var(--paper); color: var(--ink); font: inherit; font-size: .8rem; cursor: pointer; }
.bx__pick:hover { border-color: var(--ink); }
.bx__sep { list-style: none; margin-top: .9rem; padding: .5rem 0 .2rem; border-top: 1px solid var(--line);
          font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* --- search suggestions -------------------------------------------------- */
.bx__opt { display: flex; flex-direction: column; gap: .05rem; padding: .5rem .75rem; cursor: pointer; }
.bx__opt[aria-selected="true"], .bx__opt:hover { background: var(--sur-1); }
.bx__opt-name { font-weight: 600; overflow-wrap: anywhere; }
.bx__opt-meta { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.bx__opt.is-note { cursor: default; color: var(--muted); font-style: italic; }
.bx__opt.is-note:hover { background: transparent; }

/* --- legend swatches ----------------------------------------------------- */
.bx__sw { display: inline-block; width: .7rem; height: .7rem; margin: 0 .3rem 0 .15rem; border-radius: 50%;
          vertical-align: -.05rem; background: var(--accent); }
.bx__sw--nr, .bx__sw--unknown { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.bx__sw--x, .bx__sw--ex, .bx__sw--excluded { background: transparent; border-radius: 0; position: relative; }
.bx__sw--x::before, .bx__sw--x::after, .bx__sw--ex::before, .bx__sw--ex::after, .bx__sw--excluded::before, .bx__sw--excluded::after {
          content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 100%; background: var(--ink-55); }
.bx__sw--x::before, .bx__sw--ex::before, .bx__sw--excluded::before { transform: rotate(45deg); }
.bx__sw--x::after, .bx__sw--ex::after, .bx__sw--excluded::after { transform: rotate(-45deg); }
.bx__sw--cov, .bx__sw--coverage { background: var(--ink-55); }

/* --- compare ------------------------------------------------------------- */
.bx__cmptable { border-collapse: collapse; min-width: 100%; font-size: .86rem; }
.bx__cmptable th, .bx__cmptable td { padding: .45rem .6rem; border-top: 1px solid var(--line-soft);
          text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.bx__cmptable thead th { border-top: 0; vertical-align: bottom; }
.bx__cmpname { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600;
          text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line);
          text-underline-offset: .2em; }
.bx__cmptable td.is-nr, .bx__cmptable .is-nr { color: var(--muted); font-style: italic; }

/* --- beach-page carousel controls ---------------------------------------- */
.bp__carnav { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }

/* --- the map popup ------------------------------------------------------- */
.bx-pop .maplibregl-popup-content { background: var(--paper); color: var(--ink); border: 1px solid var(--line);
          border-radius: 8px; padding: .45rem .6rem; font: inherit; font-size: .82rem; box-shadow: var(--bx-shadow, 0 6px 18px rgba(0,0,0,.14)); }
.bx-pop.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--paper); }
.bx-pop.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--paper); }
.bx-pop.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--paper); }
.bx-pop.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--paper); }

/* --- the desk: a sent report is acknowledged ----------------------------- */
.desk__sent { margin: .6rem 0; padding: .6rem .8rem; border: 1px solid var(--line); border-left: 3px solid var(--accent);
          border-radius: 6px; background: var(--sur-1); }

/* --- conditions: the labels are WORDS ------------------------------------
   An earlier rule set the labels uppercase and letter-spaced inside a two-column
   grid, and at 375 px "Air temperature" broke as "TEMPERATUR / E". Labels stay in
   sentence case and never break inside a word; the grid is one column wherever two
   columns cannot hold a label and its value side by side. Specific enough to win
   over the card and beach-page rules above, whichever order they were written in. */
.bx__card dl.cond, #bx-cond dl.cond { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { #bx-cond dl.cond { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bx__card .cond__row dt, #bx-cond .cond__row dt {
    text-transform: none; letter-spacing: 0; font-size: .86rem; font-weight: 500;
    color: var(--ink-77); word-break: normal; overflow-wrap: normal; hyphens: manual; white-space: normal; }
.bx__card .cond__row dd, #bx-cond .cond__row dd { font-variant-numeric: tabular-nums; }

/* --- contrast (WCAG 1.4.3) ----------------------------------------------
   The counts inside a chip were dimmed with opacity and measured under 4.5:1 in
   both editions; they now take their chip's own colour. The meta line of a
   highlighted suggestion measured 4.42:1 on paper. */
.chip em, .chip.chip--nr em { opacity: 1; }
.chip[aria-pressed="true"] em { opacity: 1; }
#bx-suggest li[aria-selected="true"] .bx__opt-meta, #bx-suggest li:hover .bx__opt-meta,
#bx-suggest li[aria-selected="true"] span:not(:first-child), #bx-suggest li:hover span:not(:first-child) { color: var(--ink-77); }
.tbl[tabindex="0"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }