/**
 * SBR2 Gemenskap — public pages.
 *
 * Scoped under .sbr2-hamnar so nothing leaks into the theme, and built on tokens
 * so a theme can retune it by redefining a handful of custom properties rather
 * than fighting specificity.
 *
 * The palette is the registry's: deep petrol for structure, a single teal accent,
 * cool neutrals. Light and dark both supported — a theme that sets a dark
 * background gets a page that follows.
 */

.sbr2-hamnar {
  --c-ink: #0f2733;
  --c-muted: #5b7280;
  --c-line: #e2e8ec;
  --c-surface: #ffffff;
  --c-bg: #f6f8f9;
  --c-accent: #0f6d7a;
  --c-accent-soft: #e6f2f3;
  --c-deep: #0d3a4a;
  --c-good: #1f8a5a;
  --c-good-soft: #e4f5ec;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(15, 39, 51, .05), 0 8px 24px -16px rgba(15, 39, 51, .25);

  color: var(--c-ink);
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  font-size: 16px;
  line-height: 1.6;
  box-sizing: border-box;
}
.sbr2-hamnar *, .sbr2-hamnar *::before, .sbr2-hamnar *::after { box-sizing: inherit; }

@media (prefers-color-scheme: dark) {
  .sbr2-hamnar {
    --c-ink: #e8eef1;
    --c-muted: #93a7b2;
    --c-line: #23343d;
    --c-surface: #14232b;
    --c-bg: #0d1920;
    --c-accent: #4fbecb;
    --c-accent-soft: #10333a;
    --c-deep: #0a2029;
    --c-good: #4cc38a;
    --c-good-soft: #102d21;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -16px rgba(0, 0, 0, .6);
  }
}

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.sbr2-crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 18px; padding: 0; font-size: 13.5px; color: var(--c-muted);
}
.sbr2-crumbs li + li::before { content: "›"; margin-right: 8px; opacity: .55; }
.sbr2-crumbs a { color: var(--c-muted); text-decoration: none; }
.sbr2-crumbs a:hover { color: var(--c-accent); text-decoration: underline; }

/* ── Hero ────────────────────────────────────────────────────── */
.sbr2-hero {
  position: relative; overflow: hidden; border-radius: var(--radius);
  /* Built from the themed tokens (SBR2_Theme overrides --c-deep/--c-accent), so
     the hero follows Utseende instead of keeping the retired teal. The plain
     declaration is the fallback for engines without color-mix(). */
  background: linear-gradient(150deg, var(--c-deep) 0%, var(--c-accent) 100%);
  background: linear-gradient(150deg, var(--c-deep) 0%,
    color-mix(in srgb, var(--c-deep) 55%, var(--c-accent)) 55%,
    color-mix(in srgb, var(--c-deep) 25%, var(--c-accent)) 100%);
  color: #fff; min-height: 260px; display: flex; align-items: flex-end;
}
.sbr2-hero-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .42;
}
/* The satellite view, layered over the cover photo — never instead of it.

   A block of map tiles turning slowly about the aim point. The rotation lives on
   the plate; the credit lives outside it and never moves. That separation is the
   whole reason this uses tiles instead of a Static Maps image, whose attribution
   is baked into the pixels and would turn with them.

   No WebGL: this is nine <img> elements and one transform, so it renders on every
   device, including the ~8% that fall back to software rendering and could not
   run the 3D map this replaced. */
.sbr2-hero-sat {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  animation: sbr2-hero-fade 1.2s ease-in both;
}
.sbr2-hero-sat-plate {
  position: absolute; top: 50%; left: 50%;
  animation: sbr2-sat-turn 150s linear infinite;
  will-change: transform;
}
/* The 1.25 scale is geometry, not styling. Rotation happens about the aim point,
   which sits anywhere inside its own tile — so the distance from that point to
   the plate's edge falls as low as 512px, against a hero half-diagonal of ~571px
   at full width. Unscaled, some harbours would show the plate's corner sweeping
   through. 512 x 1.25 = 640px clears it — provided the range residual
   (--sbr2-range-scale, kept ≥ 0.94 by zoom_int() in PHP) does not eat it. */
.sbr2-hero-sat-plate img {
  position: absolute; display: block; border: 0;
}
@keyframes sbr2-sat-turn {
  from { transform: scale(calc(1.25 * var(--sbr2-range-scale, 1))) rotate(0deg); }
  to   { transform: scale(calc(1.25 * var(--sbr2-range-scale, 1))) rotate(360deg); }
}
@keyframes sbr2-hero-fade { from { opacity: 0; } to { opacity: 1; } }

/* Map mode: the same turning plate, but a labels-off road map given a slight
   forward tilt so it reads as a gently angled, rotating map rather than a
   spinning street plan. The rotate() spins the plate in its own plane; rotateX
   then tips that plane toward the viewer; the larger scale hides the parallax
   gap the tilt would otherwise open at the far edge. Perspective gives the tilt
   real depth instead of a flat squash. */
.sbr2-hero-sat--map .sbr2-hero-sat-plate {
  animation: sbr2-sat-turn-map 180s linear infinite;
}
@keyframes sbr2-sat-turn-map {
  from { transform: perspective(1600px) rotateX(16deg) scale(calc(1.5 * var(--sbr2-range-scale, 1))) rotate(0deg); }
  to   { transform: perspective(1600px) rotateX(16deg) scale(calc(1.5 * var(--sbr2-range-scale, 1))) rotate(360deg); }
}
/* A quiet road map is lighter than aerial imagery, so it needs a touch more
   scrim to keep the white hero text readable over it. */
.sbr2-hero-sat--map::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,26,40,.12), rgba(12,26,40,.38));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-deep) 12%, transparent),
    color-mix(in srgb, var(--c-deep) 40%, transparent));
}

/* Google's copyright line. Required to be displayed in full and legibly, so it
   is deliberately outside the rotating plate, above the hero's gradient, and
   never scaled down to nothing. */
.sbr2-hero-credit {
  position: absolute; right: 10px; bottom: 8px; z-index: 3;
  font-size: 11px; line-height: 1.3; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
  pointer-events: none; max-width: 60%; text-align: right;
}

/* A turning horizon is exactly the motion that triggers vestibular symptoms.
   The imagery stays — it is the movement that has to stop. */
@media (prefers-reduced-motion: reduce) {
  .sbr2-hero-sat { animation: none; }
  /* Stop the turn, keep the scale — without it the plate shrinks back and the
     corners it was covering appear. */
  .sbr2-hero-sat-plate { animation: none; transform: scale(calc(1.25 * var(--sbr2-range-scale, 1))); }
  /* Map mode: hold the tilt and its larger scale; only the rotation stops. */
  .sbr2-hero-sat--map .sbr2-hero-sat-plate {
    animation: none; transform: perspective(1600px) rotateX(16deg) scale(calc(1.5 * var(--sbr2-range-scale, 1)));
  }
}

/* The generated seascape: two soft waves, so a photo-less club still gets a
   hero with a horizon rather than a flat rectangle. */
.sbr2-hero-pattern { position: absolute; inset: auto 0 0 0; height: 55%; color: #fff; }
.sbr2-hero-pattern svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.sbr2-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 58, 74, .1) 0%, rgba(13, 58, 74, .72) 100%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-deep) 10%, transparent) 0%,
    color-mix(in srgb, var(--c-deep) 72%, transparent) 100%);
}
.sbr2-hero-inner {
  position: relative; z-index: 2; display: flex; gap: 18px; align-items: flex-end;
  padding: 32px 28px; width: 100%;
}
.sbr2-hero-logo {
  width: 72px; height: 72px; border-radius: 12px; object-fit: contain;
  background: #fff; padding: 8px; flex: 0 0 auto;
}
.sbr2-hero-text { min-width: 0; }
.sbr2-hero-kicker {
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  opacity: .88; margin-bottom: 6px;
}
.sbr2-hero h1 {
  margin: 0; font-size: clamp(26px, 4.4vw, 42px); line-height: 1.12;
  font-weight: 780; letter-spacing: -.01em; color: #fff;
}
.sbr2-hero-tagline { margin: 8px 0 0; font-size: 16px; opacity: .92; max-width: 60ch; }
.sbr2-hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sbr2-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 620;
  background: rgba(255, 255, 255, .16); color: #fff;
  backdrop-filter: blur(2px);
}
.sbr2-pill.verified { background: rgba(255, 255, 255, .95); color: #0d5c3c; }
.sbr2-i { width: 14px; height: 14px; flex: 0 0 auto; }

/* ── Facts strip ─────────────────────────────────────────────── */
/* Sits under the hero and overlaps it slightly — the numbers are the first
   thing a visitor scans for, so they get the most valuable pixels. */
.sbr2-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin: -26px 16px 26px; position: relative; z-index: 3;
}
.sbr2-fact {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow);
}
.sbr2-fact .v {
  font-size: 22px; font-weight: 720; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--c-ink);
}
.sbr2-fact .k {
  font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-muted); margin-top: 3px;
}

/* ── Claim form ──────────────────────────────────────────────── */
.sbr2-claim { margin-top: 4px; }
.sbr2-claim > summary { display: inline-flex; cursor: pointer; list-style: none; }
.sbr2-claim > summary::-webkit-details-marker { display: none; }
.sbr2-claimform { display: grid; gap: 10px; margin-top: 14px; }
.sbr2-claim-field { display: grid; gap: 4px; font-size: 13px; color: var(--c-muted); }
.sbr2-claim-field b { color: #c0392b; font-weight: 700; }
.sbr2-claim-field input, .sbr2-claim-field textarea {
  font: inherit; padding: 9px 11px; border: 1px solid var(--c-line);
  border-radius: 9px; background: var(--c-surface); color: var(--c-ink); width: 100%;
}
.sbr2-claim-field textarea { resize: vertical; min-height: 68px; }
.sbr2-claim-field input:focus, .sbr2-claim-field textarea:focus {
  outline: 2px solid color-mix(in srgb, #2a6df4 55%, transparent); outline-offset: 1px; border-color: #2a6df4;
}
/* Honeypot: kept in the DOM for bots but off-screen and out of the tab order. */
.sbr2-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sbr2-claim-result { font-size: 13.5px; padding: 10px 12px; border-radius: 9px; }
.sbr2-claim-result.is-ok  { background: rgba(13, 92, 60, .08); color: #0d5c3c; }
.sbr2-claim-result.is-err { background: rgba(192, 57, 43, .08); color: #a5281b; }

/* ── Layout ──────────────────────────────────────────────────── */
/* The facts strip normally supplies the gap under the hero (its 26px bottom
   margin). A club too thin to show a facts strip has none, so the content would
   otherwise butt straight against the hero image — restore the same gap. */
.sbr2-hero + .sbr2-cols { margin-top: 26px; }
.sbr2-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .sbr2-cols { grid-template-columns: 1fr; } }
.sbr2-main, .sbr2-aside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (min-width: 901px) { .sbr2-aside { position: sticky; top: 20px; } }

.sbr2-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 22px 24px;
}
.sbr2-card h2 {
  margin: 0 0 14px; font-size: 17px; font-weight: 700; letter-spacing: -.005em; color: var(--c-ink);
}
.sbr2-card h3 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-muted);
}
.sbr2-prose p { margin: 0 0 12px; }
.sbr2-prose p:last-child { margin-bottom: 0; }
.sbr2-note { margin: 12px 0 0; font-size: 13px; color: var(--c-muted); }

/* ── Facilities ──────────────────────────────────────────────── */
.sbr2-facgroup + .sbr2-facgroup { margin-top: 18px; }
.sbr2-facs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px;
}
.sbr2-facs li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
.sbr2-facs .sbr2-i { color: var(--c-good); width: 16px; height: 16px; }

/* ── Tables & definition lists ───────────────────────────────── */
.sbr2-table { width: 100%; border-collapse: collapse; }
.sbr2-table th {
  text-align: left; font-weight: 600; font-size: 14.5px; padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
}
.sbr2-table td { padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: 14.5px; }
.sbr2-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.sbr2-table td.unit { text-align: right; color: var(--c-muted); font-size: 13px; width: 1%; white-space: nowrap; padding-left: 14px; }
.sbr2-table tr:last-child th, .sbr2-table tr:last-child td { border-bottom: 0; }

.sbr2-dl { margin: 0; display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 20px; font-size: 14.5px; }
.sbr2-dl dt { color: var(--c-muted); }
.sbr2-dl dd { margin: 0; font-weight: 560; }

/* ── Contact ─────────────────────────────────────────────────── */
.sbr2-contact address { font-style: normal; margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; }
.sbr2-contactlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sbr2-contactlist li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; min-width: 0; }
.sbr2-contactlist .sbr2-i { color: var(--c-accent); width: 16px; height: 16px; }
.sbr2-contactlist a { color: var(--c-accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.sbr2-contactlist a:hover { text-decoration: underline; }
.sbr2-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sbr2-socials a {
  font-size: 13px; font-weight: 600; text-decoration: none;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--c-line); color: var(--c-muted);
}
.sbr2-socials a:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ── Map ─────────────────────────────────────────────────────── */
.sbr2-map { border-radius: 10px; overflow: hidden; border: 1px solid var(--c-line); aspect-ratio: 4 / 3; background: var(--c-bg); }
.sbr2-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.sbr2-maplinks { margin: 10px 0 0; font-size: 13px; color: var(--c-muted); }
.sbr2-maplinks a { color: var(--c-accent); text-decoration: none; }
.sbr2-maplinks a:hover { text-decoration: underline; }
.sbr2-coords { font-variant-numeric: tabular-nums; }

/* ── Invite / claim ──────────────────────────────────────────── */
.sbr2-invite { background: var(--c-accent-soft); border-color: transparent; }
.sbr2-invite p, .sbr2-claimcard p { margin: 0 0 14px; font-size: 14.5px; color: var(--c-ink); }
.sbr2-btn {
  display: inline-block; padding: 10px 18px; border-radius: 10px;
  background: var(--c-accent); color: #fff; font-weight: 640; font-size: 14.5px;
  text-decoration: none; border: 1px solid transparent;
}
.sbr2-btn:hover { filter: brightness(1.08); color: #fff; }
.sbr2-btn.ghost { background: transparent; color: var(--c-accent); border-color: var(--c-accent); }
.sbr2-btn.ghost:hover { background: var(--c-accent-soft); filter: none; }

/* ── Card grids (nearby + directory) ─────────────────────────── */
.sbr2-cardgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px;
}
.sbr2-cardgrid a {
  display: flex; flex-direction: column; gap: 3px; height: 100%;
  padding: 14px 16px; border: 1px solid var(--c-line); border-radius: 12px;
  text-decoration: none; color: var(--c-ink); background: var(--c-surface);
  transition: border-color .14s ease, transform .14s ease;
}
.sbr2-cardgrid a:hover { border-color: var(--c-accent); transform: translateY(-1px); }
.sbr2-cardgrid strong { font-size: 15px; font-weight: 660; display: flex; align-items: center; gap: 6px; }
.sbr2-cardgrid span { font-size: 13px; color: var(--c-muted); }
.sbr2-cardgrid .meta { font-variant-numeric: tabular-nums; }
.sbr2-tick { color: var(--c-good); display: inline-flex; }
.sbr2-tick .sbr2-i { width: 15px; height: 15px; }
.sbr2-nearby { margin-top: 22px; }

/* ── Port cards ──────────────────────────────────────────────── */
/* Image-led: the cover photo, or the same aerial plate the profile hero draws
   (a still 2×2 tile block, centred on the aim point), or the generated seascape
   — never a grey box. Depth comes from shadow, not borders; the hover lift is
   the "this is clickable" cue. */
.sbr2-portgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px;
}
.sbr2-port a {
  display: flex; flex-direction: column; height: 100%;
  border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: var(--c-ink); background: var(--c-surface);
  border: 1px solid var(--c-line); box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sbr2-port a:hover, .sbr2-port a:focus-visible {
  transform: translateY(-3px); border-color: var(--c-accent);
  box-shadow: 0 2px 4px rgba(15, 39, 51, .06), 0 18px 36px -18px rgba(15, 39, 51, .35);
}
.sbr2-port a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.sbr2-port-media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(150deg, var(--c-deep) 0%, var(--c-accent) 100%);
  background: linear-gradient(150deg, var(--c-deep) 0%,
    color-mix(in srgb, var(--c-deep) 55%, var(--c-accent)) 55%,
    color-mix(in srgb, var(--c-deep) 25%, var(--c-accent)) 100%);
  color: #fff;
}
.sbr2-port-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 58, 74, 0) 45%, rgba(13, 58, 74, .45) 100%);
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--c-deep) 50%, transparent) 100%);
}
.sbr2-port-cover {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.sbr2-port a:hover .sbr2-port-cover { transform: scale(1.04); }
/* The plate: the aim point is centred by the negative margins the PHP writes;
   the block is larger than the media box so the harbour's shore fills it. */
.sbr2-port-plate { position: absolute; inset: 0; overflow: hidden; }
.sbr2-port-plate > div { position: absolute; top: 50%; left: 50%; }
.sbr2-port-plate img { position: absolute; display: block; border: 0; }
.sbr2-port-plate--map { filter: saturate(.85); }
.sbr2-port-media .sbr2-hero-pattern { height: 60%; }
.sbr2-port-media .sbr2-pill.verified {
  position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 12px; padding: 4px 9px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.sbr2-port-logo {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 40px; height: 40px; border-radius: 9px; object-fit: contain;
  background: #fff; padding: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.sbr2-port-body { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px 14px; }
.sbr2-port-body strong { font-size: 15.5px; font-weight: 680; line-height: 1.3; display: flex; align-items: center; gap: 6px; }
.sbr2-port-where { font-size: 13px; color: var(--c-muted); }
.sbr2-port-live {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.sbr2-port-live .sbr2-i { width: 14px; height: 14px; margin-right: -2px; }
.sbr2-port-live i { font-style: normal; color: var(--c-muted); opacity: .6; }
.sbr2-thumb-credit { margin: 8px 0 0; font-size: 11px; color: var(--c-muted); text-align: right; }

/* Compact rows: the thin tail of the directory. Same element, no image — the
   text card of old, so 600 unknown harbours don't become 600 empty plates. */
.sbr2-portgrid.is-compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.sbr2-port.is-compact a { box-shadow: none; border-radius: 12px; }
.sbr2-port.is-compact a:hover { transform: translateY(-1px); box-shadow: none; }
.sbr2-port.is-compact .sbr2-port-body { padding: 12px 14px; }
.sbr2-port.is-compact .sbr2-port-body strong { font-size: 14.5px; font-weight: 640; }

/* The "help us" group: quiet accent surface, one heading, one sentence. */
.sbr2-thinports {
  margin-top: 30px; padding: 22px 22px 20px; border-radius: var(--radius);
  background: var(--c-accent-soft);
}
.sbr2-thinports h2 { margin: 0 0 6px; font-size: 18px; font-weight: 720; letter-spacing: -.01em; }
.sbr2-thinports > p { margin: 0 0 16px; font-size: 14.5px; color: var(--c-ink); max-width: 70ch; }

@media (prefers-reduced-motion: reduce) {
  .sbr2-port a, .sbr2-port-cover { transition: none; }
  .sbr2-port a:hover { transform: none; }
  .sbr2-port a:hover .sbr2-port-cover { transform: none; }
}

/* ── Port page: the living parts (Phase C) ───────────────────── */
.sbr2-anchor { position: relative; top: -84px; height: 0; visibility: hidden; }
.sbr2-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sbr2-sechead h2 { margin: 0; }
.sbr2-more { font-size: 13.5px; font-weight: 640; color: var(--c-accent); text-decoration: none; white-space: nowrap; }
.sbr2-more:hover { text-decoration: underline; }
.sbr2-pill[href] { text-decoration: none; }
.sbr2-pill[href]:hover { background: rgba(255, 255, 255, .28); }

/* Action bar: three verbs, sticky under the theme header. */
.sbr2-actions {
  position: sticky; top: 0; z-index: 8; display: flex; gap: 8px; flex-wrap: wrap;
  margin: 14px 0 0; padding: 10px 0; background: var(--c-bg);
}
.sbr2-action {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px;
  background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow);
  font-size: 14.5px; font-weight: 640; color: var(--c-ink); text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.sbr2-action:hover { transform: translateY(-2px); border-color: var(--c-accent); color: var(--c-accent); }
.sbr2-action span { font-size: 17px; line-height: 1; }
.sbr2-actions + .sbr2-facts { margin-top: 0; }

/* In-page nav */
.sbr2-pagenav ul { list-style: none; margin: 8px 0 18px; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--c-line); }
.sbr2-pagenav a {
  display: inline-block; padding: 8px 12px; font-size: 13.5px; font-weight: 620; color: var(--c-muted);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sbr2-pagenav a:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* Bryggan feed */
.sbr2-feedlist { list-style: none; margin: 0; padding: 0; }
.sbr2-feedrow { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--c-line); }
.sbr2-feedrow:last-child { border-bottom: 0; padding-bottom: 4px; }
.sbr2-feedrow:first-child { padding-top: 0; }
.sbr2-feedrow-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-accent-soft); font-size: 17px;
}
.sbr2-feedrow-body { min-width: 0; flex: 1 1 auto; }
.sbr2-feedrow-meta { font-size: 13.5px; color: var(--c-muted); }
.sbr2-feedrow-meta a { color: var(--c-accent); text-decoration: none; }
.sbr2-feedrow-meta a:hover { text-decoration: underline; }
.sbr2-feedrow-body p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; }
.sbr2-feedrow.is-memory p { font-style: italic; }
.sbr2-feedrow-photos { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sbr2-feedrow-photos img { height: 96px; max-width: 100%; border-radius: 10px; object-fit: cover; display: block; }
.sbr2-bryggan-empty { font-size: 15px; line-height: 1.6; }
.sbr2-bryggan-empty .sbr2-btn { display: inline-block; margin-top: 12px; }

/* Boat wall */
.sbr2-boats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sbr2-boats a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--c-ink); }
.sbr2-boat-media {
  aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; margin-bottom: 6px;
  background: var(--c-accent-soft); display: grid; place-items: center; color: var(--c-accent);
}
.sbr2-boat-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sbr2-boats a:hover img { transform: scale(1.05); }
.sbr2-boat-ph .sbr2-i { width: 34px; height: 34px; opacity: .6; }
.sbr2-boats strong { font-size: 14.5px; font-weight: 660; line-height: 1.3; }
.sbr2-boats span { font-size: 12.5px; color: var(--c-muted); }

/* Hamnens år */
.sbr2-year-season { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-muted); white-space: nowrap; }
.sbr2-year-season .sbr2-i { color: #d9a400; width: 15px; height: 15px; }
.sbr2-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.sbr2-month { text-align: center; font-size: 11.5px; color: var(--c-muted); padding-top: 6px; position: relative; }
.sbr2-month i { display: block; height: 10px; border-radius: 4px; background: var(--c-line); margin-bottom: 6px; }
.sbr2-month.in-season i { background: color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); }
.sbr2-month.has-items i { background: var(--c-accent); }
.sbr2-month.has-items i::after {
  content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 3px var(--c-surface);
}
.sbr2-month.is-now span { color: var(--c-ink); font-weight: 700; }
.sbr2-month.is-now::before {
  content: ""; position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--c-ink);
}

/* Weather */
.sbr2-weather-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sbr2-weather .sbr2-fact { box-shadow: none; }
.sbr2-weather .v small { font-size: 12px; font-weight: 600; color: var(--c-muted); }

/* Sub-pages */
.sbr2-subpage .sbr2-actions { position: static; margin-bottom: 18px; }
.sbr2-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; font-size: 14px; color: var(--c-muted); }

@media (max-width: 640px) {
  .sbr2-actions { gap: 6px; margin-top: 10px; }
  .sbr2-action { padding: 9px 12px; font-size: 13.5px; flex: 1 1 auto; justify-content: center; }
  .sbr2-months { gap: 2px; }
  .sbr2-month { font-size: 10px; }
  .sbr2-feedrow-photos img { height: 72px; }
}

/* ── Startsida ───────────────────────────────────────────────── */
.sbr2-home { display: flex; flex-direction: column; gap: 44px; }
.sbr2-home-section { min-width: 0; }
.sbr2-home-sechead { margin-bottom: 16px; }
.sbr2-home-sechead h2 { margin: 0 0 4px; font-size: 22px; font-weight: 760; letter-spacing: -.015em; }
.sbr2-home-sechead p { margin: 0; color: var(--c-muted); font-size: 15px; max-width: 70ch; }

/* Hero: text left, Sweden right. The map is inline SVG built server-side —
   every port a dot, verified ones pulsing — so the first paint already shows
   the country lit up, before any script. */
.sbr2-home-hero {
  /* overflow stays visible: the suggest panel drops below the hero's edge. */
  position: relative; border-radius: var(--radius); color: #fff;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center;
  min-height: 520px; padding: 40px 44px;
  background: linear-gradient(150deg, var(--c-deep) 0%, var(--c-accent) 100%);
  background: linear-gradient(160deg, var(--c-deep) 0%,
    color-mix(in srgb, var(--c-deep) 65%, var(--c-accent)) 60%,
    color-mix(in srgb, var(--c-deep) 35%, var(--c-accent)) 100%);
}
.sbr2-home-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse at 72% 45%, rgba(255, 255, 255, .09), transparent 55%);
}
.sbr2-home-hero-text { position: relative; z-index: 2; min-width: 0; order: 1; }
.sbr2-home-hero h1 { margin: 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.04; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sbr2-home-line { margin: 14px 0 22px; font-size: 16px; opacity: .9; max-width: 52ch; }
.sbr2-season {
  display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); font-weight: 650; letter-spacing: 0; text-transform: none; font-size: 12px;
}
.sbr2-home-map { position: relative; z-index: 1; order: 2; height: 100%; min-height: 440px; display: flex; align-items: center; justify-content: center; }
.sbr2-sweden { height: min(560px, 60vh); width: auto; max-width: 100%; overflow: visible; }
.sbr2-sweden-land { fill: rgba(255, 255, 255, .13); filter: drop-shadow(0 0 28px rgba(255, 255, 255, .12)); }
.sbr2-sweden circle { transform-box: fill-box; transform-origin: center; }
.sbr2-sweden .t { fill: rgba(255, 255, 255, .38); }
.sbr2-sweden .r { fill: #fff; opacity: .85; }
.sbr2-sweden .v { fill: #ffd166; }
.sbr2-sweden .halo { fill: #ffd166; opacity: .35; animation: sbr2-halo 2.8s ease-out infinite; }
.sbr2-sweden a:hover circle:not(.halo) { transform: scale(2); }
.sbr2-sweden a { cursor: pointer; }
@keyframes sbr2-halo { 0% { transform: scale(.35); opacity: .6; } 100% { transform: scale(1.4); opacity: 0; } }
.sbr2-home-legend { list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 16px; font-size: 12.5px; opacity: .85; }
.sbr2-home-legend li { display: inline-flex; align-items: center; gap: 6px; }
.sbr2-home-legend i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.sbr2-home-legend i.v { background: #ffd166; box-shadow: 0 0 8px #ffd166; }
.sbr2-home-legend i.r { background: #fff; }

/* Search: one big box, the page's primary control. */
.sbr2-home-search { position: relative; max-width: 640px; }
.sbr2-home-searchbox {
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px;
  background: #fff; border-radius: 14px; box-shadow: 0 12px 40px -18px rgba(0, 0, 0, .55);
}
.sbr2-home-searchbox > .sbr2-i { width: 20px; height: 20px; color: var(--c-muted); flex: 0 0 auto; }
.sbr2-home-searchbox input {
  flex: 1 1 auto; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent; font: inherit; font-size: 17px;
  padding: 10px 6px; color: #0f2733; outline: none;
}
.sbr2-home-searchbox input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sbr2-home-searchbox .sbr2-btn { padding: 10px 18px; border-radius: 10px; }
.sbr2-home-near {
  display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 13.5px; font-weight: 620;
  color: var(--c-accent); background: var(--c-accent-soft); border: 0; border-radius: 10px; padding: 9px 12px; cursor: pointer;
  white-space: nowrap;
}
.sbr2-home-near .sbr2-i { width: 15px; height: 15px; }
.sbr2-home-near[disabled] { opacity: .6; cursor: progress; }
.sbr2-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
  background: var(--c-surface); color: var(--c-ink); border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5), 0 0 0 1px var(--c-line);
  padding: 8px; max-height: 60vh; overflow: auto;
}
.sbr2-suggest h4 { margin: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c-muted); }
.sbr2-suggest a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  text-decoration: none; color: var(--c-ink); font-size: 14.5px;
}
.sbr2-suggest a:hover, .sbr2-suggest a[aria-selected="true"] { background: var(--c-accent-soft); }
.sbr2-suggest a strong { font-weight: 640; display: inline-flex; align-items: center; gap: 5px; }
.sbr2-suggest a span { color: var(--c-muted); font-size: 13px; margin-left: auto; white-space: nowrap; }
.sbr2-suggest .sbr2-tick .sbr2-i { width: 14px; height: 14px; }
.sbr2-suggest p { margin: 0; padding: 12px 10px; color: var(--c-muted); font-size: 14px; }

/* Utvalda: a horizontal rail of the same port cards, wider, snapping. */
.sbr2-rail {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px;
  margin: 0 -4px; scrollbar-width: thin;
}
.sbr2-rail > .sbr2-port { flex: 0 0 min(300px, 78vw); scroll-snap-align: start; }
.sbr2-rail .sbr2-port-media { aspect-ratio: 4 / 3; }

/* Vid bryggan: photo-first masonry. */
.sbr2-feed { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 16px; }
.sbr2-feed-item {
  break-inside: avoid; margin: 0 0 16px; border-radius: var(--radius); overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow);
}
.sbr2-feed-item img { display: block; width: 100%; height: auto; }
.sbr2-feed-body { padding: 14px 16px 15px; display: flex; flex-direction: column; gap: 6px; }
.sbr2-feed-type { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }
.sbr2-feed-body p { margin: 0; font-size: 15px; line-height: 1.5; }
.sbr2-feed-item.is-memory:not(.has-photo) .sbr2-feed-body p { font-size: 17px; font-style: italic; }
.sbr2-feed-meta { font-size: 13px; color: var(--c-muted); }
.sbr2-feed-meta a { color: var(--c-accent); text-decoration: none; font-weight: 600; }
.sbr2-feed-meta a:hover { text-decoration: underline; }
.sbr2-home-feed-empty {
  padding: 22px 24px; border-radius: var(--radius); background: var(--c-accent-soft); font-size: 15px; max-width: 80ch;
}

/* Contribute: three tiles, one obvious next click each. */
.sbr2-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.sbr2-tiles a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px 22px 24px;
  border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow);
  text-decoration: none; color: var(--c-ink); transition: transform .18s ease, border-color .18s ease;
}
.sbr2-tiles a:hover { transform: translateY(-3px); border-color: var(--c-accent); }
.sbr2-tile-emoji { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.sbr2-tiles strong { font-size: 17px; font-weight: 720; letter-spacing: -.01em; }
.sbr2-tiles a > span:last-child { font-size: 14px; color: var(--c-muted); line-height: 1.5; }

/* Browse tabs. With JS off every panel is visible (hidden attr removed by nothing —
   the panels simply stack), which is the crawlable fallback. */
.sbr2-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--c-line); }
.sbr2-tabs button {
  font: inherit; font-size: 14.5px; font-weight: 640; color: var(--c-muted); background: transparent; border: 0;
  padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; cursor: pointer;
}
.sbr2-tabs button[aria-selected="true"] { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.sbr2-lanchips a { font-size: 14.5px; padding: 8px 14px; }
.sbr2-types { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.sbr2-types a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 16px 18px;
  border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-surface); text-decoration: none; color: var(--c-ink);
}
.sbr2-types a:hover { border-color: var(--c-accent); }
.sbr2-types strong { font-weight: 680; }
.sbr2-types span { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.sbr2-countylist h3 a { color: inherit; text-decoration: none; }
.sbr2-countylist h3 a:hover { color: var(--c-accent); }
.sbr2-countylist h3 span { font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .7; }

@media (max-width: 900px) {
  .sbr2-home-hero { grid-template-columns: 1fr; padding: 28px 22px 10px; min-height: 0; }
  .sbr2-home-map { min-height: 0; margin-top: 6px; }
  .sbr2-sweden { height: min(420px, 55vh); }
  .sbr2-feed { columns: 2; }
}
@media (max-width: 640px) {
  .sbr2-home { gap: 32px; }
  .sbr2-feed { columns: 1; }
  .sbr2-sweden { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .sbr2-sweden .halo { animation: none; opacity: .3; transform: scale(1); }
  .sbr2-tiles a { transition: none; }
}

/* ── Directory ───────────────────────────────────────────────── */
.sbr2-dirhead { margin-bottom: 22px; }
.sbr2-dirhead h1 { margin: 0 0 8px; font-size: clamp(24px, 3.6vw, 34px); font-weight: 760; letter-spacing: -.015em; }
.sbr2-dirhead p { margin: 0 0 16px; color: var(--c-muted); }
.sbr2-filter {
  width: 100%; max-width: 460px; padding: 12px 16px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--c-line); border-radius: 10px;
  background: var(--c-surface); color: var(--c-ink);
}
.sbr2-filter:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }
.sbr2-dirgrid { margin-bottom: 28px; }
.sbr2-empty { color: var(--c-muted); padding: 18px 0; }

.sbr2-countylist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.sbr2-kommuner { display: flex; flex-wrap: wrap; gap: 7px; }
.sbr2-kommuner a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--c-line);
  font-size: 13.5px; text-decoration: none; color: var(--c-ink); background: var(--c-surface);
}
.sbr2-kommuner a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.sbr2-kommuner a span { color: var(--c-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .sbr2-hamnar { padding: 16px 14px 48px; }
  .sbr2-hero-inner { padding: 22px 18px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .sbr2-facts { margin: -20px 8px 22px; }
  .sbr2-card { padding: 18px 16px; }
  .sbr2-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .sbr2-dl dd { margin-bottom: 10px; }
}

/* ── Phase D: flash, follow, spana, rätta ─────────────────────── */
.sbr2-flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-size: 14.5px; font-weight: 560; }
.sbr2-flash.is-ok { background: var(--c-good-soft); color: var(--c-good); }
.sbr2-flash.is-err { background: rgba(192, 57, 43, .08); color: #a5281b; }
.sbr2-ratta { margin: -12px 16px 22px; font-size: 13px; color: var(--c-muted); }
.sbr2-ratta a { color: var(--c-accent); text-decoration: none; }
.sbr2-ratta a:hover { text-decoration: underline; }
.sbr2-follow p { margin: 0 0 12px; font-size: 14.5px; }
.sbr2-followrow { display: flex; gap: 8px; }
.sbr2-followrow input { flex: 1 1 auto; min-width: 0; font: inherit; padding: 9px 11px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-surface); color: var(--c-ink); }
.sbr2-followrow input:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }
.sbr2-followform .sbr2-claim-result { margin-top: 10px; }
.sbr2-spanaform { display: grid; gap: 14px; max-width: 640px; }
.sbr2-spanaform .sbr2-claim-field small { color: var(--c-muted); font-size: 12.5px; }
.sbr2-spanaform input[type="file"] { font: inherit; font-size: 14px; }
.sbr2-spanaform .sbr2-btn { justify-self: start; }
.sbr2-spana-thanks h2 { margin: 0 0 6px; }
.sbr2-spana-thanks p { margin: 0 0 14px; font-size: 15px; }
.sbr2-spana-next { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Phase E: Anslag, Kommande ───────────────────────────────── */
.sbr2-anslag { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--c-accent-soft); border-left: 4px solid var(--c-accent); }
.sbr2-anslag-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 4px; }
.sbr2-anslag strong { display: block; font-size: 16px; font-weight: 700; }
.sbr2-anslag .sbr2-prose { margin-top: 4px; font-size: 14.5px; }
.sbr2-feedrow.is-post .sbr2-feedrow-ico, .sbr2-feedrow.is-event .sbr2-feedrow-ico { background: color-mix(in srgb, var(--c-accent) 18%, var(--c-surface)); }
.sbr2-events ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sbr2-events li { display: flex; gap: 12px; align-items: center; }
.sbr2-events time { flex: 0 0 auto; width: 46px; text-align: center; border-radius: 10px; background: var(--c-accent-soft); padding: 5px 0; line-height: 1.1; }
.sbr2-events time b { display: block; font-size: 18px; font-weight: 760; color: var(--c-accent); }
.sbr2-events time span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); }
.sbr2-events li div { display: flex; flex-direction: column; min-width: 0; }
.sbr2-events li strong { font-size: 14.5px; font-weight: 660; }
.sbr2-events li div span { font-size: 13px; color: var(--c-muted); }

/* ── Phase F: achievements, marina mode, season album ────────── */
.sbr2-ach { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sbr2-ach li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--c-accent-soft); font-size: 13px; font-weight: 620; }
.sbr2-pill-vs.is-available { background: #1f8a5a; color: #fff; }
.sbr2-pill-vs.is-few { background: #d9a400; color: #1a1a1a; }
.sbr2-pill-vs.is-full { background: #a5281b; color: #fff; }
.sbr2-vs { font-style: normal; font-weight: 700; }
.sbr2-vs.is-available { color: #1f8a5a; }
.sbr2-vs.is-few { color: #b58a00; }
.sbr2-vs.is-full { color: #a5281b; }
.sbr2-season-month h2 { margin-bottom: 12px; }
.sbr2-season-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0 0 14px; }
.sbr2-season-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }

/* ── Hero, quieter: sentence case, lighter weight, pill search, no glow ── */
/* The theme's heading face (geometos) is uppercase-only; the hero speaks in the body face. */
.sbr2-home-hero h1 { font-family: inherit; text-transform: none !important; font-weight: 600; letter-spacing: -.02em; font-size: clamp(32px, 4.4vw, 52px); }
.sbr2-home-hero::before { display: none; }
.sbr2-home-line { margin: 10px 0 20px; font-size: 15.5px; }
.sbr2-home-searchbox { border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: 0 1px 6px rgba(32, 33, 36, .28); }
.sbr2-home-searchbox:focus-within { box-shadow: 0 1px 6px rgba(32, 33, 36, .28), 0 0 0 1px var(--c-line); }
.sbr2-home-searchbox .sbr2-btn { border-radius: 999px; }
.sbr2-home-near { border-radius: 999px; background: transparent; color: var(--c-muted); }
.sbr2-home-near:hover { background: var(--c-accent-soft); color: var(--c-accent); }
.sbr2-suggest { border-radius: 20px; }

/* Light theme (default): white ground, the country in cool grey, blue beacons. */
.sbr2-home-hero.is-light {
  background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); box-shadow: var(--shadow);
}
.sbr2-home-hero.is-light h1 { color: var(--c-ink); }
.sbr2-home-hero.is-light .sbr2-home-line { color: var(--c-muted); opacity: 1; }
.sbr2-home-hero.is-light .sbr2-sweden-land { fill: #e8eef4; filter: none; }
.sbr2-home-hero.is-light .sbr2-sweden .t { fill: #b9c8d6; }
.sbr2-home-hero.is-light .sbr2-sweden .r { fill: var(--c-accent); opacity: .75; }
.sbr2-home-hero.is-light .sbr2-sweden .v { fill: var(--c-accent); }
.sbr2-home-hero.is-light .sbr2-sweden .halo { fill: var(--c-accent); }
.sbr2-home-hero.is-light .sbr2-home-legend { color: var(--c-muted); opacity: 1; }
.sbr2-home-hero.is-light .sbr2-home-legend i { background: #b9c8d6; }
.sbr2-home-hero.is-light .sbr2-home-legend i.r { background: var(--c-accent); opacity: .75; }
.sbr2-home-hero.is-light .sbr2-home-legend i.v { background: var(--c-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--c-accent) 60%, transparent); }
@media (prefers-color-scheme: dark) {
  .sbr2-home-hero.is-light .sbr2-sweden-land { fill: #1d2f3a; }
  .sbr2-home-hero.is-light .sbr2-sweden .t, .sbr2-home-hero.is-light .sbr2-home-legend i { fill: #4f6675; background: #4f6675; }
}

/* Mobile: keep the pill as ONE row. Icon + input + pin-only "Nära mig" + Sök;
   never wrap (a wrapped 999px pill turns into a blob) and never overflow the card. */
@media (max-width: 640px) {
  .sbr2-home-hero { padding: 24px 16px 8px; overflow: hidden; }
  .sbr2-home-search { max-width: 100%; }
  .sbr2-home-searchbox { flex-wrap: nowrap; gap: 2px; padding: 4px 4px 4px 14px; width: 100%; box-sizing: border-box; }
  .sbr2-home-searchbox > .sbr2-i { display: none; }
  .sbr2-home-searchbox input { font-size: 16px; padding: 10px 2px; }
  .sbr2-home-near { padding: 9px; gap: 0; }
  .sbr2-home-near span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sbr2-home-near .sbr2-i { width: 18px; height: 18px; }
  .sbr2-home-searchbox .sbr2-btn { padding: 10px 12px; }
  .sbr2-home-legend { flex-wrap: wrap; gap: 10px 14px; }
}