/* Berthright — a thin layer over Bootstrap 5.3.
   Generous whitespace, hairline borders, no decorative shadows.

   THE PALETTE IS THE MARINA COLOUR CODE, not decoration. Two real conventions:

     · IALA buoyage, Region A (Europe): red port-hand marks, green starboard-hand marks,
       yellow special marks, black-and-yellow cardinal marks.
     · The green/red berth signs used in Nordic marinas: green means the berth is free
       tonight, red means it is taken.

   So a boater already reads these colours correctly before we explain anything:

     green   → letting is permitted, this berth can be used
     red     → prohibited, do not go here
     yellow  → special mark: permitted, but there is a condition (the port must approve)
     cardinal (black + yellow) → you must pass a particular way: only through the port
     grey    → unsurveyed, no verdict yet

   Every custom colour is a variable that flips under [data-bs-theme="dark"]. */

:root {
  /* Base — harbour water, hull, quay */
  --br-navy: #0b3d5c;
  --br-navy-hover: #09324c;
  --br-accent: var(--br-navy);
  --br-accent-ink: #ffffff;

  /* Regime colours */
  --br-green: #1b7a4b;
  --br-green-soft: #e6f4ec;
  --br-red: #c0392f;
  --br-red-soft: #fbeae8;
  --br-yellow: #b87d00;
  --br-yellow-soft: #fdf3dc;
  --br-cardinal-ink: #16181a;
  --br-cardinal: #edb500;
  --br-grey: #6b7280;
  --br-grey-soft: #eeefef;

  /* Neutrals */
  --br-surface: #ffffff;
  --br-surface-muted: #f5f6f6;
  --br-line: #e3e5e5;
  --br-ink: #12181c;

  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-bg: #fbfbfa;
  --bs-body-color: var(--br-ink);
  --bs-border-radius: .625rem;
}

[data-bs-theme="dark"] {
  --br-navy: #7cc4e8;
  --br-navy-hover: #a3d6f0;
  --br-accent: var(--br-navy);
  --br-accent-ink: #05202e;

  --br-green: #4ade9a;
  --br-green-soft: #10281e;
  --br-red: #ff8079;
  --br-red-soft: #2b1614;
  --br-yellow: #f2c14e;
  --br-yellow-soft: #2a2113;
  --br-cardinal-ink: #f2c14e;
  --br-cardinal: #16181a;
  --br-grey: #9aa2ab;
  --br-grey-soft: #1e2226;

  --br-surface: #15191c;
  --br-surface-muted: #1a1f23;
  --br-line: #292f35;
  --br-ink: #e8edf1;

  --bs-body-bg: #0f1315;
  --bs-body-color: var(--br-ink);
}

body { -webkit-font-smoothing: antialiased; letter-spacing: -0.006em; }

/* --- brand + nav ------------------------------------------------------------------ */

.br-nav {
  background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--br-line);
}

.br-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; letter-spacing: -0.02em; color: var(--br-ink);
}

/* The mark is a berth seen from above — two pontoon fingers off a walkway, a hull in the
   slot — and it is inlined from templates/brand/mark.html so these two variables reach it.
   That is the whole reason it is not an <img>: an external file could not follow the theme.
   Sized in em so it tracks whatever text it sits beside. */
.br-mark { height: 1.18em; width: auto; flex: none; }

.navbar .nav-link { color: var(--bs-body-color); opacity: .78; }
.navbar .nav-link:hover, .navbar .nav-link:focus { opacity: 1; color: var(--bs-body-color); }

/* Once expanded the row does not fit at every width in every language, and a nav that cannot
   wrap clips its last item rather than moving it. Wrapping keeps every link reachable. */
.navbar-expand-xl .navbar-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: .1rem; }
.navbar .nav-link, .navbar .navbar-brand { white-space: nowrap; }

/* --- buttons ---------------------------------------------------------------------- */

.btn-accent {
  background: var(--br-accent); border: 1px solid var(--br-accent);
  color: var(--br-accent-ink); font-weight: 500;
}
.btn-accent:hover, .btn-accent:focus {
  background: var(--br-navy-hover); border-color: var(--br-navy-hover); color: var(--br-accent-ink);
}
.text-accent { color: var(--br-accent) !important; }
.text-free { color: var(--br-green) !important; }
.br-link { color: var(--br-accent); text-decoration: none; }
.br-link:hover { text-decoration: underline; }

/* --- layout ----------------------------------------------------------------------- */

/* Only ever set the vertical padding here: these classes sit on .container elements, and the
   `padding: y 0` shorthand would wipe out Bootstrap's horizontal gutter on small screens. */
.br-section { padding-top: 3rem; padding-bottom: 3rem; }
.br-hero { padding-top: clamp(3rem, 9vw, 6.5rem); padding-bottom: 2rem; }

.br-hero-title {
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  font-weight: 650; line-height: 1.06; letter-spacing: -0.032em;
}

.br-eyebrow {
  font-size: .74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--bs-secondary-color); margin-bottom: .75rem;
}

.br-dot { padding: 0 .4rem; opacity: .45; }

/* --- prose ------------------------------------------------------------------------ */

/* Justified body copy, and hyphenation is not optional next to it: the column is 46rem and the
   same sentence carries "Betriebsgenehmigung" in German and "kikötőhely-szerződés" in Hungarian.
   With no break point those words drop to the next line and open rivers of white space in the
   one they left. <html lang> is set per locale in base.html, which is what lets the browser pick
   a dictionary; for a locale it has none for, the text stays justified and simply does not break.
   The 7/3/3 limit keeps it off short words and stops a hyphen landing two characters in. */
.br-prose p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}

/* The freshness stamp is a status dot and a date, not a paragraph. */
.br-prose .br-freshness { text-align: start; hyphens: manual; }

/* --- search ----------------------------------------------------------------------- */

/* Wide enough for the longest button label of the twelve: the field is what shrinks when the
   button grows, and below ~34rem it starts eating its own placeholder. */
.br-search {
  display: flex; gap: .5rem; max-width: 40rem;
  background: var(--br-surface); border: 1px solid var(--br-line);
  border-radius: 999px; padding: .35rem .35rem .35rem .5rem;
}
.br-search .form-control { background: transparent; box-shadow: none; flex: 1 1 auto; min-width: 0; }
.br-search .form-control:focus { box-shadow: none; }
.br-search .btn { border-radius: 999px; white-space: nowrap; flex: none; }
.br-search-sm { max-width: 32rem; }

/* The berth filters. Flex rather than the twelve-column grid: "Search" is "Rechercher" in French
   and "Αναζήτηση" in Greek, and a column sized to fit the English word clips both. Here each
   field asks for the width it needs, the button is never squeezed, and the row wraps instead. */
.br-filterbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; max-width: 56rem;
}
.br-filterbar > * { flex: 1 1 8rem; min-width: 0; }
.br-filterbar > .br-filterbar-wide { flex: 2 1 15rem; }
.br-filterbar .btn { flex: none; white-space: nowrap; }

/* --- stats ------------------------------------------------------------------------ */

.br-stat-value { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 620; letter-spacing: -0.03em; }
.br-stat-label { font-size: .82rem; color: var(--bs-secondary-color); line-height: 1.3; }
/* The qualification under a headline number. Quieter than the label above it, because it is
   there to stop the number being read as more than it is, not to compete with it.
   Quieter is done with size and space rather than with opacity. The old .75 on top of an
   already-secondary colour landed at 4.1:1 on the light background — under AA, and shrinking the
   type would only have taken it further down. Small text needs more contrast, not less, so the
   opacity is gone and the size carries the whole job: at .66rem this reads as an aside from
   across the room and holds 7.8:1 up close. The extra tracking is the usual repayment for
   setting type this small, and tabular figures stop the count jittering against the label
   above it as the sweep changes the number night to night. */
.br-stat-note {
  font-size: .66rem; color: var(--bs-secondary-color); line-height: 1.35;
  letter-spacing: .015em; margin-top: .25rem; font-variant-numeric: tabular-nums;
}

/* --- cards ------------------------------------------------------------------------ */

.br-card {
  background: var(--br-surface); border: 1px solid var(--br-line);
  border-radius: var(--bs-border-radius); padding: 1.1rem 1.15rem;
  color: var(--bs-body-color);
  transition: border-color .15s ease, transform .15s ease;
}
a.br-card:hover { border-color: var(--br-accent); transform: translateY(-1px); }
.br-card-static:hover { transform: none; border-color: var(--br-line); }
.br-card-title { letter-spacing: -0.015em; }

/* The "you need an account for that" prompt, above whatever page the bounce landed on. */
.br-signin {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  background: var(--br-surface); border: 1px solid var(--br-line);
  border-left: 4px solid var(--br-accent);
  border-radius: var(--bs-border-radius); padding: .9rem 1.15rem;
}

.br-step { background: var(--br-surface-muted); border-radius: var(--bs-border-radius); padding: 1.25rem; }
.br-step-n {
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: .75rem;
  background: var(--br-accent); color: var(--br-accent-ink); font-size: .8rem; font-weight: 600;
}

/* --- the regime colour code ------------------------------------------------------- */

.br-badge {
  font-weight: 500; letter-spacing: .01em; padding: .38em .72em;
  border-radius: 999px; font-size: .78rem; display: inline-block;
  white-space: nowrap; flex: none;
}
.br-badge--free    { background: var(--br-green-soft);  color: var(--br-green); }
.br-badge--blocked { background: var(--br-red-soft);    color: var(--br-red); }
.br-badge--consent { background: var(--br-yellow-soft); color: var(--br-yellow); }
.br-badge--viaport { background: var(--br-cardinal);    color: var(--br-cardinal-ink); }
.br-badge--unknown { background: var(--br-grey-soft);   color: var(--br-grey); }

.br-verdict {
  border: 1px solid var(--br-line); border-left: 4px solid var(--br-grey);
  border-radius: var(--bs-border-radius); padding: 1.35rem 1.5rem;
  background: var(--br-surface);
}
.br-verdict-text { font-size: 1.12rem; font-weight: 550; letter-spacing: -0.015em; }
.br-verdict--free    { border-left-color: var(--br-green); }
.br-verdict--blocked { border-left-color: var(--br-red); }
.br-verdict--consent { border-left-color: var(--br-yellow); }
.br-verdict--viaport { border-left-color: var(--br-cardinal); }
.br-verdict--unknown { border-left-color: var(--br-grey); }

/* The colour-code key, shown once next to the filters so the palette is never a guess. */
.br-key { display: flex; flex-wrap: wrap; gap: .25rem .95rem; font-size: .78rem; }
.br-key span { display: inline-flex; align-items: center; gap: .38rem; color: var(--bs-secondary-color); }
.br-key i { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.br-key .k-free    { background: var(--br-green); }
.br-key .k-consent { background: var(--br-yellow); }
.br-key .k-viaport { background: var(--br-cardinal); border: 1px solid var(--br-cardinal-ink); }
.br-key .k-blocked { background: var(--br-red); }
.br-key .k-unknown { background: var(--br-grey); }

.br-quote {
  border-left: 2px solid var(--br-line); padding: .35rem 0 .35rem 1rem;
  color: var(--bs-secondary-color); font-size: .93rem; line-height: 1.62;
  margin-bottom: 1rem;
}

/* --- what it costs to be wrong ------------------------------------------------------ */

/* The consequence, at the foot of the verdict card. No panel, no colour of its own: the card's
   left border already says which regime this is, and a red box here would read as "prohibited"
   at a port that only wants to approve the tenant. The rule and the weight of the type are the
   whole treatment — these sentences are short and they are the heaviest on the page. */
.br-stake { border-top: 1px solid var(--br-line); margin-top: 1.2rem; padding-top: 1rem; }
.br-stake-list { list-style: none; padding: 0; margin: 0 0 .9rem; }
.br-stake-list li { font-weight: 550; line-height: 1.45; }
.br-stake-list li + li { margin-top: .3rem; }

/* The words the sentence above is a translation of. Smaller than the clause quoted further down
   the page, because that one is the evidence for the verdict and this is a fragment of it. */
.br-stake-quote { font-size: .87rem; }
.br-stake-note { font-size: .78rem; color: var(--bs-secondary-color); }

/* --- the watch form ---------------------------------------------------------------- */

/* What the page offers where the verdict is no. It sits inside the verdict's own card rather
   than at the foot of the page, because it is the answer's continuation and not a newsletter
   box: the reader has just been told their port forbids letting, and this is the sentence that
   says the answer can move. The field grows and the button does not, so the pair stays on one
   line in the sidebar and wraps rather than shrinking on a phone. */
.br-watch input[type="email"] { flex: 1 1 11rem; min-width: 0; }

/* Both colours are the regime tokens, so the note flips with the theme like everything else and
   never states an outcome in a colour the surface behind it cannot carry. */
.br-note {
  border-radius: var(--bs-border-radius); padding: .7rem .9rem;
  font-size: .9rem; line-height: 1.5; margin: 0;
}
.br-note--ok  { background: var(--br-green-soft); color: var(--br-green); }
.br-note--bad { background: var(--br-red-soft); color: var(--br-red); }

/* --- filters + lists --------------------------------------------------------------- */

.br-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.br-filter {
  padding: .32rem .8rem; border-radius: 999px; font-size: .875rem;
  border: 1px solid var(--br-line); color: var(--bs-secondary-color); text-decoration: none;
}
.br-filter:hover { border-color: var(--br-accent); color: var(--bs-body-color); }
.br-filter.is-active {
  background: var(--br-accent); border-color: var(--br-accent); color: var(--br-accent-ink);
}

.br-checklist { list-style: none; padding: 0; margin: 0; }
.br-checklist li {
  position: relative; padding-left: 1.35rem; margin-bottom: .5rem;
  font-size: .9rem; color: var(--bs-secondary-color);
}
.br-checklist li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--br-green);
}

.br-back { color: var(--bs-secondary-color); text-decoration: none; font-size: .9rem; }
.br-back:hover { color: var(--br-accent); }

/* --- wizard ------------------------------------------------------------------------ */

.br-steps { display: flex; gap: .5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.br-steps li {
  display: flex; align-items: center; gap: .45rem; list-style: none;
  font-size: .82rem; color: var(--bs-secondary-color);
}
.br-steps li + li::before { content: ""; width: 1.1rem; height: 1px; background: var(--br-line); }
.br-steps .n {
  width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--br-line); font-size: .72rem; font-weight: 600;
}
.br-steps .is-current { color: var(--bs-body-color); font-weight: 550; }
.br-steps .is-current .n { background: var(--br-accent); border-color: var(--br-accent); color: var(--br-accent-ink); }
.br-steps .is-done .n { background: var(--br-green); border-color: var(--br-green); color: #fff; }

.br-form { max-width: 34rem; }
.br-form .form-label { font-size: .875rem; font-weight: 550; margin-bottom: .3rem; }
.br-form .form-text { font-size: .8rem; }
.br-form .form-control, .br-form .form-select {
  background: var(--br-surface); border-color: var(--br-line);
}
.br-form .form-control:focus, .br-form .form-select:focus {
  border-color: var(--br-accent); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--br-accent) 18%, transparent);
}

.br-summary { width: 100%; font-size: .92rem; }
.br-summary th {
  font-weight: 500; color: var(--bs-secondary-color); padding: .45rem 1rem .45rem 0;
  vertical-align: top; white-space: nowrap;
}
.br-summary td { padding: .45rem 0; }

/* --- state chips ------------------------------------------------------------------- */

.br-chip {
  font-size: .74rem; font-weight: 500; padding: .25em .6em; border-radius: 999px;
  border: 1px solid var(--br-line); color: var(--bs-secondary-color);
}
.br-chip--submitted { border-color: var(--br-yellow); color: var(--br-yellow); }
.br-chip--verified  { border-color: var(--br-green);  color: var(--br-green); }
.br-chip--rejected  { border-color: var(--br-red);    color: var(--br-red); }

/* --- language menu ------------------------------------------------------------------ */

/* A dozen languages is taller than a phone, so the menu carries its own scroll. */
.br-lang-menu { min-width: 12.5rem; max-height: 60vh; overflow-y: auto; }
.br-lang-code {
  flex: none; width: 1.75rem; font-size: .74rem; font-weight: 550; letter-spacing: .04em;
  color: var(--bs-secondary-color); align-self: center;
}
.br-lang-menu .active .br-lang-code { color: inherit; }

/* --- footer ------------------------------------------------------------------------ */

.br-footer { border-top: 1px solid var(--br-line); background: var(--br-surface-muted); }

/* --- small screens ------------------------------------------------------------------ */

@media (max-width: 575.98px) {
  .br-search { flex-direction: column; border-radius: var(--bs-border-radius); padding: .5rem; }
  .br-search .btn { border-radius: var(--bs-border-radius); }
  .br-filterbar .btn { flex: 1 0 100%; }
  .br-stats { text-align: center; }
}

/* The live dot next to the sweep line. A slow pulse, because the thing it reports on happens
   once a day — a fast blink would promise a liveness the machinery does not have.

   The red is the mark's own: --br-red paints the port-hand pontoon finger in brand/mark.html, so
   the dot and the logo hold the same colour and it flips with the theme like everything else.
   Worth one note for whoever reads the palette block at the top of this file and finds a
   contradiction: there, red means "prohibited — do not go here", and that meaning belongs to a
   VERDICT. This dot is not a verdict about a port; it is a recording light, which is what a
   pulsing red dot has meant since tape. The two never appear in the same place — verdict red
   lives on badges and the verdict card, and this sits alone under the hero. */
.br-live {
  display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--br-red); margin-right: .35rem; vertical-align: baseline;
  animation: br-pulse 3s ease-in-out infinite;
}
@keyframes br-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .br-live { animation: none; opacity: .8; } }

/* The freshness line under the hero, in the recording light's own red rather than muted grey.
   The dot alone was too small to carry the line: a reader scanning the hero saw three numbers
   and skipped the sentence that says how old they are, which is the one claim on this page that
   ages. Colouring the whole sentence makes the date arrive with the numbers instead of after
   them. Same --br-red as .br-live, so the dot and its sentence read as one object and both flip
   with the theme. This stays outside the verdict's meaning of red (see the note above .br-live):
   it is still the recording light, now the length of its own sentence, and it still never shares
   a surface with a verdict badge. Contrast holds in both themes — #c0392f on the light body is
   5.2:1 and #ff8079 on the dark one is well clear, so .small stays legible. The !important is
   only here to beat Bootstrap's .text-secondary utility this line used to carry. */
.br-freshness { color: var(--br-red) !important; }
.br-freshness time { color: inherit; }

/* The countdown under it. Deliberately not red: the sentence above is a claim about the registry
   and earns the loud colour, this is a timetable and would only dilute it by shouting too. */
.br-next-sweep {
  font-size: .72rem; color: var(--bs-secondary-color); line-height: 1.35;
  letter-spacing: .01em; margin-top: .3rem; font-variant-numeric: tabular-nums;
}

/* --- the signed-in account --------------------------------------------------------------- */

/* The address is the label, so it has to survive being long without pushing the bar apart: the
   avatar keeps its size, the address takes what is left and ellipses. The cap applies only where
   the bar is actually horizontal — inside the collapsed mobile menu each item is a full-width row
   and truncating there would hide the very thing this exists to show. */
.br-account { display: inline-flex; align-items: center; gap: .45rem; }
.br-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-avatar { border-radius: 50%; flex: none; object-fit: cover; }
.br-account-menu { min-width: 15rem; }

@media (min-width: 1200px) {
  .br-account { max-width: 15rem; }
}

/* --- the map ------------------------------------------------------------------------------ */

/* Leaflet ships its own light-only chrome, so everything below is the app's tokens applied to
   its class names. Without this the popups, the zoom buttons and the attribution stay white
   boxes on a dark basemap, which is the tell that a map was bolted on rather than built in. */

.br-map {
  height: min(68vh, 40rem); border: 1px solid var(--br-line);
  border-radius: var(--bs-border-radius); overflow: hidden; position: relative;
  background: var(--br-surface-muted);
}
/* On a port's own page the map is a fact about the port, not the page's subject, so it sits at
   the size of the cards beside it. */
.br-map--port { height: 13rem; }

/* The home page's map. Shorter than the search map: there it is the answer and deserves the
   viewport, here it is evidence sitting between a hero and the rest of the page, and a map tall
   enough to fill the screen reads as the end of the document rather than the middle of it. */
.br-map--home { height: min(52vh, 30rem); }

/* The colour code, spelled out once. The map carries the verdict in colour and until now nothing
   said what the colours meant — a red coast is only self-evident to whoever chose the palette.
   Labels come from `regime.*.label`, the same strings the port pages print beside the badge, so
   the legend cannot say something the verdict does not and costs nothing in twelve languages.
   Fills mirror map.js's pinStyle exactly, cardinal included: filled with one token and ringed
   with the other, which is what keeps a cardinal mark black-and-yellow in both themes. */
.br-legend {
  display: flex; flex-wrap: wrap; gap: .4rem 1.15rem; list-style: none; padding: 0; margin: 0;
  font-size: .8rem; color: var(--bs-secondary-color);
}
.br-legend li { display: flex; align-items: center; gap: .4rem; }
.br-legend-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.br-legend-dot[data-code="free"] { background: var(--br-green); }
.br-legend-dot[data-code="consent"] { background: var(--br-yellow); }
.br-legend-dot[data-code="viaport"] {
  background: var(--br-cardinal); box-shadow: 0 0 0 1.5px var(--br-cardinal-ink);
}
.br-legend-dot[data-code="blocked"] { background: var(--br-red); }
.br-legend-dot[data-code="unknown"] { background: var(--br-grey); }

/* The instruction directly above the search field. Full body colour where the subtitle above it
   is secondary, because the order of the hero is question, reason, instruction — and the last of
   the three is the one being acted on. Weight rather than size does the lifting: made larger it
   would start arguing with the h1 two lines up. */
.br-hero-prompt {
  font-weight: 500; color: var(--bs-body-color); margin-bottom: .7rem;
  text-wrap: balance;
}

/* Throwing a draft away. The summary is deliberately not a button: closed it is one quiet word
   that does nothing, and the thing that actually deletes only exists once the reader has opened
   it and read what goes with it. That ordering is the confirmation, and it survives JavaScript
   being off — which a confirm() dialog does not. Red only on the button, never on the summary:
   a card carrying a red word before anyone has asked for one reads as an error on the draft. */
.br-remove > summary {
  font-size: .8rem; color: var(--bs-secondary-color); cursor: pointer;
  list-style: none; display: inline-flex; align-items: center; gap: .3rem; width: fit-content;
}
.br-remove > summary::-webkit-details-marker { display: none; }
.br-remove > summary::before { content: "\2715"; font-size: .7em; opacity: .7; }
.br-remove > summary:hover { color: var(--br-red); }
.br-remove[open] > summary { color: var(--br-red); }

.leaflet-container {
  font: inherit; background: var(--br-surface-muted);
  /* Leaflet's own link colour is a flat blue that belongs to no theme here. */
  --leaflet-link: var(--br-accent);
}
.leaflet-container a { color: var(--leaflet-link); }

.leaflet-bar, .leaflet-bar a, .br-map-layers, .leaflet-popup-content-wrapper,
.leaflet-popup-tip, .leaflet-tooltip, .leaflet-control-attribution {
  background: var(--br-surface); color: var(--bs-body-color);
  border-color: var(--br-line);
}
.leaflet-bar { box-shadow: 0 1px 3px rgb(0 0 0 / .18); border-radius: var(--bs-border-radius); }
.leaflet-bar a, .leaflet-bar a:hover { border-bottom-color: var(--br-line); }
.leaflet-bar a:hover { background: var(--br-surface-muted); }
.leaflet-bar a.leaflet-disabled { background: var(--br-surface-muted); opacity: .5; }
.br-locate a { display: flex; align-items: center; justify-content: center; }

.leaflet-control-attribution {
  font-size: .68rem; padding: 0 .4rem; border-radius: var(--bs-border-radius) 0 0 0;
}
.leaflet-tooltip {
  border: 1px solid var(--br-line); box-shadow: none; font-size: .8rem; padding: .15rem .45rem;
}
.leaflet-tooltip-top::before { border-top-color: var(--br-line); }

.leaflet-popup-content-wrapper { border-radius: var(--bs-border-radius); box-shadow: 0 4px 16px rgb(0 0 0 / .2); }
.leaflet-popup-content { margin: .8rem .9rem; }
.leaflet-container a.leaflet-popup-close-button { color: var(--bs-secondary-color); }

.br-pop-title { font-size: .95rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 1rem .5rem 0; }
.br-pop .br-badge { display: inline-block; }
.br-pop-meta { font-size: .8rem; color: var(--bs-secondary-color); margin: .5rem 0 0; }
.br-pop-link { display: inline-block; margin-top: .6rem; font-size: .85rem; font-weight: 500; }

/* The unread-marina layer's own switch. Leaflet's layers control could carry the checkbox but
   not the sentence under it, and a grey dot with no sentence is exactly the thing that would be
   read as a verdict. */
.br-map-layers {
  border: 1px solid var(--br-line); border-radius: var(--bs-border-radius);
  padding: .5rem .65rem; max-width: 15rem; box-shadow: 0 1px 3px rgb(0 0 0 / .14);
}
.br-map-layers label {
  display: flex; align-items: center; gap: .35rem; font-size: .82rem; cursor: pointer; margin: 0;
}
.br-map-layers input { accent-color: var(--br-accent); flex: none; }
.br-map-layers .n { color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.br-map-layers .hint {
  font-size: .72rem; line-height: 1.35; color: var(--bs-secondary-color); margin: .35rem 0 0;
}

@media (max-width: 575.98px) {
  /* On a phone this control sits on the map rather than beside it, so it takes the width it
     needs for one line and no more. */
  .br-map-layers { max-width: 11.5rem; padding: .4rem .5rem; }
  .br-map-layers label { font-size: .76rem; }
}

/* Answers the locate button when it has nothing to move the map to. Above the tiles, below the
   controls, and gone on its own — a reader who has already understood should not have to
   dismiss it. */
.br-map-note {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1000;
  max-width: min(26rem, 88%); background: var(--br-surface); color: var(--bs-body-color);
  border: 1px solid var(--br-line); border-radius: 999px; box-shadow: 0 2px 10px rgb(0 0 0 / .18);
  padding: .45rem .95rem; font-size: .82rem; text-align: center;
}

/* The list/map switch borrows the filter pills, so it needs the icon to sit on the text's
   baseline and nothing else. */
.br-views .br-filter { display: inline-flex; align-items: center; gap: .35rem; }
.br-views svg { opacity: .75; }