/* ── Status banner ── */

.status-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 var(--pad) 16px var(--pad);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: var(--t-md);
  font-weight: 500;
}
.status-banner.is-loading { background: var(--good-bg); color: var(--good-ink); }
/* "Henter vejrdata…" floats instead of taking a line: inserted and then
   removed in the page's flow, it pushed everything down and back up again
   on every load (PageSpeed's layout-shift score). It only appears if the
   fetch takes over half a second, so a quick load shows nothing at all.
   Errors and the offline note stay in the flow — they need reading. */
.status-banner.is-loading {
  position: fixed;
  z-index: 1200;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  box-shadow: var(--shadow);
  white-space: nowrap;
  animation: status-loading-in .2s ease-out .5s both;
}
.status-banner.is-loading .status-banner-retry { display: none; }
@keyframes status-loading-in { from { opacity: 0; } to { opacity: 1; } }
/* Above the phone's bottom bar. */
@media (max-width: 859px) { .status-banner.is-loading { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* The weather cards' space, held while the first forecast loads
   (app.js toggles .weather-pending) — about what they fill out to, so
   their content arrives without shoving the page. A faint pulse says
   "on its way". Dropped on an error, so nothing big stands empty. */
.weather-pending .hero-card:empty,
.weather-pending .fishing-card:empty { min-height: 520px; }
.weather-pending .day-scroll:empty { min-height: 300px; }
.weather-pending .trend-card:empty { min-height: 500px; }
@media (max-width: 859px) {
  .weather-pending .hero-card:empty { min-height: 630px; }
  .weather-pending .fishing-card:empty { min-height: 545px; }
}
.weather-pending .hero-card:empty,
.weather-pending .fishing-card:empty,
.weather-pending .day-scroll:empty,
.weather-pending .trend-card:empty { animation: weather-pending-pulse 1.4s ease-in-out infinite; }
@keyframes weather-pending-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .weather-pending .hero-card:empty, .weather-pending .fishing-card:empty,
  .weather-pending .day-scroll:empty, .weather-pending .trend-card:empty { animation: none; }
}
.status-banner.is-error { background: var(--rough-bg); color: var(--rough-ink); }
.status-banner.is-offline { background: var(--cau-bg); color: var(--cau-ink); }
.status-banner-icon { display: flex; flex: 0 0 auto; }
.status-banner-text { flex: 1 1 auto; }
.status-banner-retry {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 6px 12px;
  min-height: 32px;
  border-radius: 8px;
  cursor: pointer;
}

/* ── Generic page sections ── */

.page-section {
  padding: 0 var(--pad);
}
.forecast-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.section-heading-row h2 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-size: var(--t-base);
  font-weight: 600;
}
.section-heading-sub { font-size: var(--t-sm); color: var(--faint); }

.section-summary {
  cursor: pointer;
  list-style: none;
}
.section-summary::-webkit-details-marker { display: none; }
.section-heading-right { display: flex; align-items: center; gap: 10px; }
.section-details-chevron {
  display: flex;
  flex: 0 0 auto;
  color: var(--faint);
  transition: transform .18s ease;
}
.section-summary:hover .section-details-chevron { color: var(--primary); }
.section-details[open] .section-details-chevron { transform: rotate(180deg); }

/* ── Hero row ── */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 859px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ── Front-page widgets (index.php, homeLayout.js, core/homeEditor.js) ── */

.widget-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  align-items: start;
}
.widget { grid-column: 1 / -1; min-width: 0; }
.widget[data-w="half"] { grid-column: auto; }
.widget[data-w="half"].is-solo { grid-column: 1 / -1; }
.widget[hidden] { display: none; }
/* Half-width cards sit side by side, so stretch them to the row's height. */
.widget-board:not(.is-editing) .widget[data-w="half"]:not(.is-solo) { align-self: stretch; display: flex; flex-direction: column; }
.widget-board:not(.is-editing) .widget[data-w="half"]:not(.is-solo) > .widget-body { flex: 1; display: flex; flex-direction: column; }
.widget-board:not(.is-editing) .widget[data-w="half"]:not(.is-solo) > .widget-body > .card:last-child { flex: 1; }
@media (max-width: 859px) {
  .widget-board { grid-template-columns: minmax(0, 1fr); }
  .widget[data-w="half"] { grid-column: 1 / -1; }
}

.section-heading-link { font-size: var(--t-sm); color: var(--primary); text-decoration: none; font-weight: 500; }
.section-heading-link:hover { text-decoration: underline; }
.widget-card { display: flex; flex-direction: column; gap: 12px; }
.widget-empty { color: var(--muted); font-size: var(--t-sm); margin: 0; }
.widget-empty a { color: var(--primary); }

.home-customize-row { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 28px; }
.home-customize-btn { display: inline-flex; align-items: center; gap: 8px; }
.home-customize-row[hidden] { display: none; }
.home-customize-status { font-size: var(--t-sm); color: var(--muted); min-height: 1em; }

/* Edit mode: each widget becomes a short, draggable preview. */
.widget-board.is-editing .widget {
  position: relative;
  border: 1.5px dashed var(--line);
  border-radius: 18px;
  padding: 8px;
  background: var(--surface2);
  transition: box-shadow .15s ease, opacity .15s ease;
}
.widget-board.is-editing .widget-body {
  max-height: 150px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.widget-board.is-editing .widget-body > .section-heading-row,
.widget-board.is-editing .widget-body > .section-details > .section-heading-row { display: none; }
.widget-board.is-editing .widget.is-dragging { opacity: .45; }
.widget-board.is-editing .widget.is-dragging .widget-edit-bar { box-shadow: none; }
.widget-edit-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 8px;
}
.widget-edit-title { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-edit-handle {
  cursor: grab;
  touch-action: none;
  color: var(--faint);
  border: none;
  background: transparent;
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border-radius: 9px;
  flex: none;
}
.widget-edit-handle:active { cursor: grabbing; }
.widget-edit-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  min-width: var(--tap); height: var(--tap);
  padding: 0 8px;
  border-radius: 9px;
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  display: grid; place-items: center;
  flex: none;
}
.widget-edit-btn:hover:not(:disabled), .widget-edit-handle:hover { color: var(--primary); border-color: var(--primary); }
.widget-edit-btn:disabled { opacity: .35; cursor: default; }
.widget-edit-btn.is-remove:hover { color: var(--rough-ink); border-color: var(--rough-ink); }
@media (max-width: 859px) {
  .widget-edit-btn.is-width { display: none; } /* one column anyway */
  .home-edit-panel { bottom: calc(80px + env(safe-area-inset-bottom)); } /* above the bottom nav */
}
body.is-dragging-widget { cursor: grabbing; user-select: none; }

.home-edit-panel {
  position: sticky;
  bottom: 12px;
  z-index: 20;
  margin-top: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-edit-panel[hidden] { display: none; }
.home-edit-add-title { font-weight: 600; color: var(--ink); font-size: var(--t-sm); }
.home-edit-add-list { display: flex; flex-wrap: wrap; gap: 8px; }
.home-edit-add-list:empty::before { content: attr(data-empty); color: var(--muted); font-size: var(--t-sm); }
.home-edit-add-btn { display: inline-flex; align-items: center; gap: 6px; }
.home-edit-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.home-edit-actions .is-primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
:root[data-phase="night"] .home-edit-actions .is-primary { color: #0B1730; }
.home-edit-actions .is-left { margin-right: auto; }

.card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

.hero-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hero-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-date {
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-temp-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.hero-temp {
  font-family: 'Archivo', sans-serif;
  font-size: var(--t-hero);
  font-weight: 600;
  letter-spacing: -2.5px;
  line-height: 1;
}
.hero-desc { font-size: var(--t-base); color: var(--muted); }

/* ── Metric grid ── */

.metric-grid {
  /* flexbox, not grid: with an odd cell count (e.g. 8 metrics + moon), grid's
     shared column tracks leave the last row's lone cell narrow and the rest
     of that row empty — flex-grow instead stretches whatever's left on each
     line to fill it, so a trailing row of 1 still spans full width. */
  display: flex;
  flex-wrap: wrap;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.metric-cell {
  flex: 1 1 118px;
  background: var(--surface2);
  padding: 12px 14px;
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.metric-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.metric-label-icon { flex: 0 0 auto; display: flex; }
.metric-label-text { overflow: hidden; text-overflow: ellipsis; }
.metric-value {
  margin-top: 5px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -.4px;
  overflow-wrap: break-word;
}
.metric-sub { font-size: var(--t-xs); color: var(--faint); margin-top: 1px; }

/* ── Fishing card ── */

.fishing-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fishing-score-label {
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.fishing-score-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.fishing-score-num {
  font-family: 'Archivo', sans-serif;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -1.4px;
  line-height: 1;
}
.fishing-score-of { font-size: var(--t-md); color: var(--muted); }

.score-track {
  height: 8px;
  border-radius: 8px;
  background: var(--primary-soft);
  overflow: hidden;
}
.score-fill {
  height: 100%;
  border-radius: 8px;
  background: var(--primary);
  transition: width .6s ease;
}

/* "Hvorfor 71?" — the score's parts (forecast.js scoreWhyHtml). */
.score-why { margin-top: -4px; }
.score-why > summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--primary); list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.score-why > summary::-webkit-details-marker { display: none; }
.score-why > summary::after { content: '▾'; font-size: .8em; transition: transform .2s; }
.score-why[open] > summary::after { transform: rotate(180deg); }
.why-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.why-row { display: grid; grid-template-columns: 6.5em 1fr auto; align-items: center; column-gap: 10px; row-gap: 1px; font-size: var(--t-sm); }
.why-label { color: var(--ink); font-weight: 600; }
.why-bar { height: 6px; border-radius: 6px; background: var(--primary-soft); overflow: hidden; }
.why-fill { display: block; height: 100%; border-radius: 6px; background: var(--primary); }
.why-row.is-bonus .why-bar { background: none; }
.why-pts { color: var(--muted); font-size: var(--t-xs); text-align: right; min-width: 3.2em; }
.why-reason { grid-column: 1 / -1; color: var(--muted); font-size: var(--t-xs); }
.why-note { margin-top: 10px; color: var(--faint); font-size: var(--t-xs); line-height: 1.4; }

.factor-list { display: flex; flex-direction: column; gap: 9px; }
.factor-row { display: flex; align-items: center; gap: 10px; font-size: var(--t-md); }
.factor-label { color: var(--muted); }
.factor-value { margin-left: auto; font-family: 'IBM Plex Mono', monospace; color: var(--ink); }

.best-window {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--good-bg);
  color: var(--good-ink);
  font-size: var(--t-md);
  font-weight: 600;
}
.best-window.is-unsafe {
  background: var(--rough-bg);
  color: var(--rough-ink);
}

/* "In season" row — hover/focus a fish icon for that species' name + tip
   (mirrors severity-badge-wrap/severity-reason-tip below); the caution
   icon next to the label uses the same mechanic for the "these are general
   trends, not closed-season data" note. */
.fishing-seasonal-row { display: flex; flex-direction: column; gap: 8px; }
.fishing-seasonal-label-row { display: flex; align-items: center; gap: 6px; }
.fishing-seasonal-label { font-size: var(--t-sm); color: var(--muted); }

.seasonal-caution-wrap { position: relative; display: inline-flex; }
.seasonal-caution-trigger { display: flex; color: var(--cau-ink); cursor: help; }

.fishing-seasonal-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.seasonal-pick-wrap { position: relative; display: inline-flex; }
.seasonal-pick-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--primary);
  cursor: help;
}
.seasonal-pick-trigger.is-protected { background: var(--cau-bg); color: var(--cau-ink); }
.seasonal-pick-warning { display: block; font-weight: 600; color: var(--cau-ink); margin: 2px 0 4px; }

.seasonal-caution-tip, .seasonal-pick-tip {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 10;
  width: max-content;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1), visibility .28s;
  pointer-events: none;
}
.seasonal-caution-tip {
  left: 0;
  max-width: 260px;
  transform-origin: top left;
  transform: translateY(-6px) scale(.94);
}
.seasonal-pick-tip {
  left: 50%;
  max-width: 220px;
  transform-origin: top center;
  transform: translate(-50%, -6px) scale(.94);
}
.seasonal-caution-wrap:has(.seasonal-caution-trigger:hover) .seasonal-caution-tip,
.seasonal-caution-wrap:has(.seasonal-caution-trigger:focus-visible) .seasonal-caution-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.seasonal-pick-wrap:has(.seasonal-pick-trigger:hover) .seasonal-pick-tip,
.seasonal-pick-wrap:has(.seasonal-pick-trigger:focus-visible) .seasonal-pick-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

.fishing-disclaimer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--faint);
  line-height: 1.5;
}

/* ── Severity badges/dots/chips — never colour alone ── */

.severity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  padding: 8px;
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
}
.severity-badge.is-big { padding: 9px 14px; font-size: var(--t-md); }
.severity-badge.is-full { display: flex; width: 100%; }
.severity-badge.sev-good { background: var(--good-bg); color: var(--good-ink); }
.severity-badge.sev-cau { background: var(--cau-bg); color: var(--cau-ink); }
.severity-badge.sev-rough { background: var(--rough-bg); color: var(--rough-ink); }
.severity-badge-glyph { }

.severity-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
}
.severity-dot.sev-good { background: var(--good-ink); border-radius: 50%; }
.severity-dot.sev-cau { background: var(--cau-ink); border-radius: 2px; transform: rotate(45deg); }
.severity-dot.sev-rough { background: var(--rough-ink); border-radius: 2px; }

.severity-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  font-size: 10px;
  line-height: 1;
}
.severity-chip.sev-good { background: var(--good-bg); color: var(--good-ink); }
.severity-chip.sev-cau { background: var(--cau-bg); color: var(--cau-ink); }
.severity-chip.sev-rough { background: var(--rough-bg); color: var(--rough-ink); }

.legend-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--muted); }

/* ── Hourly strip ── */

.hourly-panel {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 12px;
  padding-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

.hour-cell {
  flex: 0 0 auto;
  width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 4px;
  border-radius: 11px;
  background: transparent;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.hour-cell.is-now {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.hour-time { font-family: 'IBM Plex Mono', monospace; font-size: var(--t-sm); color: var(--muted); }
.hour-icon { display: flex; color: var(--primary); }
.hour-temp { font-family: 'IBM Plex Mono', monospace; font-size: var(--t-base); font-weight: 500; }
.hour-rain-row { display: flex; align-items: center; justify-content: center; gap: 4px; }
.hour-rain-icon { display: flex; color: var(--primary); }
.hour-rain-value { font-family: 'IBM Plex Mono', monospace; font-size: var(--t-xs); color: var(--muted); }
.hour-rain-mm { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--faint); height: 12px; margin-top: -3px; }
.hour-wind-row { display: flex; align-items: center; justify-content: center; gap: 4px; }
.hour-wind-arrow { display: flex; color: var(--primary); }
.hour-wind-speed { font-family: 'IBM Plex Mono', monospace; font-size: var(--t-xs); color: var(--muted); }
.hour-wave-track { align-self: stretch; height: 34px; display: flex; align-items: flex-end; justify-content: center; } /* stretch: the cell centres its children, which left the track (and so the bar's 70%) 0 px wide */
.hour-wave-bar { width: 70%; border-radius: 3px 3px 0 0; background: var(--primary); }
.hour-wave-label { display: flex; align-items: center; gap: 3px; font-family: 'IBM Plex Mono', monospace; font-size: var(--t-xs); color: var(--faint); }
.hour-wave-icon { display: flex; color: var(--primary); }

/* Fishing conditions per hour: the day cards' ★ chip, smaller; the best
   window as one bar under its three hours (bridging the 6px cell gap). */
.hour-fish {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 3px;
  padding: 3px 8px 3px 7px; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 700; line-height: 1;
}
.hour-fish.tier-good { background: var(--good-bg); color: var(--good-ink); }
.hour-fish.tier-cau { background: var(--cau-bg); color: var(--cau-ink); }
.hour-fish.tier-rough { background: var(--rough-bg); color: var(--rough-ink); }
.hour-cell.is-now .hour-fish.tier-good { background: var(--surface); } /* else lost in the now-cell's own blue */
.hour-fish.is-unsafe { background: var(--surface2); color: var(--faint); font-weight: 500; }
.hour-best { align-self: stretch; height: 4px; margin: 2px -8px -5px; background: var(--leaf); } /* -8px: 4px padding + 1px border + half the 6px gap */
.hour-best.is-start { margin-left: 4px; border-radius: 4px 0 0 4px; }
.hour-best.is-end { margin-right: 4px; border-radius: 0 4px 4px 0; }
.hour-best.is-start.is-end { border-radius: 4px; }
.hour-best.is-none { visibility: hidden; }

.hourly-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 0 0 8px; }
.hourly-species { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--muted); }
.hourly-species-select {
  font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  padding: 5px 28px 5px 10px; border: 1px solid var(--line); border-radius: 999px; background-color: var(--surface);
  cursor: pointer; max-width: 60vw;
}
.hourly-legend { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--muted); }
.hourly-legend-band { width: 18px; height: 4px; border-radius: 4px; background: var(--leaf); }

/* ── 7-day cards ── */

.day-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}

.day-card {
  position: relative;
  flex: 1 0 158px;
  min-width: 158px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
  box-sizing: border-box;
  transition: transform .18s ease, border-color .18s ease;
}
.day-card:hover { transform: translateY(-2px); border-color: var(--primary); }
.day-card.is-today { border-color: var(--primary); }
/* Day 8-14, shown in their own row below the normal week (see .days-extended
   below) — a dashed border is enough to read as "less certain" once they're
   already visually separated by that row's own heading/banner; this card's
   native title tooltip (set in dayCardHtml) covers anyone who wants the why. */
.day-card.is-extended { border-style: dashed; }

/* ── 7→16 day expand toggle — a plain "+"/"−" next to the h2, with a
   hover/focus tooltip explaining what it does (same floating-tooltip
   mechanic as .severity-badge-wrap/.severity-reason-tip; safe to use here,
   unlike inside a day-card, since the heading row doesn't clip overflow). ── */

.section-heading-row h2 { display: flex; align-items: center; gap: 8px; }

.days-expand-wrap { position: relative; display: inline-flex; }
.days-expand-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
}
.days-expand-toggle:hover, .days-expand-toggle:focus-visible { border-color: var(--primary); color: var(--primary); }
.days-expand-toggle[aria-expanded="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--good-ink); }
.days-expand-toggle[disabled] { cursor: default; opacity: .7; }

.days-expand-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  width: max-content;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform-origin: top left;
  transform: translateY(-6px) scale(.94);
  transition: opacity .18s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1), visibility .28s;
  pointer-events: none;
}
.days-expand-wrap:has(.days-expand-toggle:hover) .days-expand-tip,
.days-expand-wrap:has(.days-expand-toggle:focus-visible) .days-expand-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Days 8-14 — a second row stacked below the normal 7-day strip (not mixed
   into the same scroller), with its own caution banner explaining why. */
.days-extended { margin-top: 14px; }
.days-extended[hidden] { display: none; }
.days-extended-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--cau-bg);
  color: var(--cau-ink);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.day-card-top { display: flex; flex-direction: column; gap: 2px; }
.day-name { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: var(--t-md); }
.day-date { font-size: var(--t-sm); color: var(--faint); font-family: 'IBM Plex Mono', monospace; }

.day-icon { display: flex; align-items: center; justify-content: center; padding: 6px 0 2px 0; color: var(--primary); }

.day-temp-row { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.day-hi { font-family: 'Archivo', sans-serif; font-size: var(--t-num); font-weight: 600; letter-spacing: -1px; }
.day-lo { font-size: var(--t-md); color: var(--faint); font-family: 'IBM Plex Mono', monospace; }

.day-details {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
}
.day-detail-row { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.day-detail-row .mono { color: var(--ink); }
.day-detail-sub.mono { color: var(--muted); font-size: var(--t-xs); }
.day-detail-icon { display: flex; }

/* ── Fishing score badge (day cards) — hover/focus flips the card to a
   detail panel, instead of a floating tooltip, since the day cards sit in a
   horizontally-scrolling row (.day-scroll) whose overflow-x also clips the
   Y axis per the CSS overflow spec — an absolutely-positioned tooltip that
   tried to escape the card would get silently cut off there. Covering the
   card's own box instead needs no escape. ── */

.fish-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3px;
  border: none;
  padding: 4px 8px 4px 7px;
  border-radius: 999px;
  font: inherit;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-xs);
  font-weight: 700;
  cursor: default;
  box-shadow: var(--shadow);
}
.fish-badge.tier-good { background: var(--good-bg); color: var(--good-ink); }
.fish-badge.tier-cau { background: var(--cau-bg); color: var(--cau-ink); }
.fish-badge.tier-rough { background: var(--rough-bg); color: var(--rough-ink); }
.fish-badge-icon { display: flex; font-size: 11px; line-height: 1; }

/* Shared "cover the whole card" mechanics for any day-card tooltip (the
   fish-score detail below, and the severity-reason panel further down):
   the cards live in a horizontally-scrolling row (.day-scroll) whose
   overflow-x also clips the Y axis per the CSS overflow spec, and that
   row's default flex align-items:stretch would cascade a height change
   from one hovered card onto every sibling if a tooltip instead grew the
   card taller. An absolutely-positioned overlay on the card's own
   (unchanged) box sidesteps both problems — it never affects layout. */
.card-tooltip-panel {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--primary);
  box-shadow: var(--shadow);
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  /* The panel covers the exact badge that triggers it (inset:0 over the
     whole card) — without this, the instant it appears the pointer is
     hovering the PANEL instead of the badge underneath, the browser can
     re-test that at any moment, :hover on the badge drops, the panel
     hides, the badge is exposed again, hover re-fires... an intermittent
     show/hide flicker that reads as "hover doesn't always work". Making
     the panel transparent to the pointer means hit-testing always falls
     through to the real badge underneath, so hover stays stable for as
     long as the cursor is actually over it. Nothing inside either panel
     is interactive, so there's nothing lost by making it click-through. */
  pointer-events: none;
  transform: scale(.92) translateY(6px);
  transition: opacity .18s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1), visibility .28s;
}

.fish-tooltip-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.day-card:has(.fish-badge:hover) .fish-tooltip-panel,
.day-card:has(.fish-badge:focus-visible) .fish-tooltip-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.fish-tooltip-score {
  font-size: var(--t-num);
  font-weight: 600;
  letter-spacing: -1px;
}
.fish-tooltip-of { font-size: var(--t-sm); color: var(--faint); font-weight: 400; margin-left: 2px; }
.fish-tooltip-tier { font-size: var(--t-md); font-weight: 600; }
.fish-tooltip-detail { font-size: var(--t-sm); color: var(--muted); }
.fish-tooltip-note { font-size: var(--t-xs); color: var(--faint); line-height: 1.5; margin-top: 4px; }

/* ── Severity badge "why" explanation — hover/focus the ▲/■ badge ── */

.severity-badge-trigger { cursor: help; }

/* Day cards: same cover-the-card trick as the fish-score tooltip above
   (see .card-tooltip-panel's comment for why). */
.severity-reason-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  text-align: left;
}
.day-card:has(.severity-badge-trigger:hover) .severity-reason-panel,
.day-card:has(.severity-badge-trigger:focus-visible) .severity-reason-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.severity-reason-panel-title { font-size: var(--t-md); font-weight: 600; }
.severity-reason-panel-text { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }

/* Hero card: not inside a clipping/stretching row, so a normal small
   floating tooltip anchored under the badge is simpler than the day-card's
   cover trick. */
.severity-badge-wrap { position: relative; display: inline-flex; }
.severity-reason-tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  width: max-content;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform-origin: top right;
  transform: translateY(-6px) scale(.94);
  transition: opacity .18s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1), visibility .28s;
  pointer-events: none;
}
.severity-badge-wrap:has(.severity-badge-trigger:hover) .severity-reason-tip,
.severity-badge-wrap:has(.severity-badge-trigger:focus-visible) .severity-reason-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ── Map screen ── */

.map-hint {
  margin: 0 0 14px 0;
  font-size: var(--t-sm);
  color: var(--muted);
}
.map-hint a { color: var(--primary); }

.map-search-wrap {
  position: relative;
  z-index: 2;
  max-width: 420px;
  margin-bottom: 14px;
}
.map-search-input {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: var(--surface);
  color: var(--ink);
}
/* Country chip (core/countryChip.js) at the input's right end: a short
   label with the real <select> invisibly on top, so tapping it opens the
   phone's own picker. */
.map-search-wrap.has-country > input { padding-right: 68px; }
.search-country {
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  cursor: pointer;
}
.search-country::after { content: '▾'; margin-left: 4px; }
.search-country:hover,
.search-country:focus-within { color: var(--ink); }
.search-country:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.search-country > select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px; /* iOS zooms into anything smaller on focus */
}
.map-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
  box-sizing: border-box;
}
.map-search-result {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.map-search-result:hover { background: var(--surface2); }
.map-search-result.is-message { color: var(--faint); cursor: default; }
.map-search-result.is-message:hover { background: none; }
.map-search-result-type {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--muted);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
/* Our own fishing spots, lakes, shelters and saved places — told apart
   from Photon's towns and addresses at a glance. */
.map-search-result-type.is-ours {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
}

.map-container {
  position: relative;
  z-index: 1;
  height: min(62vh, 560px);
  min-height: 320px;
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface2);
  transition: height .25s ease;
}

/* Kort's "large view" toggle (map.js's own Leaflet control, not shared
   with tur.php's map) — grows the map and hides the 7-day strip below it
   rather than a real Fullscreen API takeover, so the sidebar/header stay
   reachable and there's nothing for a headless/embedded context to deny. */
body.is-map-expanded .map-container { height: min(82vh, 1100px); }
body.is-map-expanded #map-forecast-section { display: none; }

.map-expand-control a { display: flex; align-items: center; justify-content: center; }

/* Leaflet ships its own hardcoded white popup chrome — override it so
   popups (the GPS marker, saved-place pins, the add-location form) follow
   the current theme instead of staying a jarring white box at night. */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.leaflet-popup-content { margin: 12px 14px; font-family: inherit; }
.leaflet-popup-close-button { color: var(--faint) !important; }

/* Point-overlay toggle (Søer, Shelters, ...) — a Leaflet control
   (top-right), so it sits and behaves like the built-in zoom control;
   .leaflet-bar already gives it that stacked-button-group look. One
   checkbox row per overlay (assets/js/core/mapOverlays.js), rather than
   the single on/off button this used to be back when lakes was the only
   overlay — a second overlay needs "either, both, or neither", not a
   single toggle. */

/* Icon-glyph overlay markers (lakes/shelters) — a coloured
   circular badge with a white icon centered inside, matching .fish-badge's
   "coloured circle + glyph" language elsewhere in the app. The outer
   .facility-marker is Leaflet's own divIcon wrapper (no box size of its
   own); the badge inside carries the actual visible circle. */
.facility-marker { background: none; border: none; }
.facility-marker-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #FFF;
  color: #FFF;
  box-shadow: var(--shadow);
}

/* Leaflet.markercluster's own cluster icon — same "coloured circle" shape
   as .facility-marker-badge, just bigger and with a count instead of a
   glyph, so a cluster of e.g. lakes still reads as "lakes" (the overlay's
   own colour) rather than markercluster's default unrelated orange/green
   scale. */
.facility-cluster { background: none; border: none; }
.facility-cluster-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #FFF;
  color: #FFF;
  font-weight: 600;
  font-size: var(--t-sm);
  box-shadow: var(--shadow);
}

.map-place-popup-name { font-weight: 600; }
.map-place-popup-type { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 2px 0 8px 0; }
.map-popup-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.map-popup-meta { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; margin-top: 4px; }

.map-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}
.map-add-title { font-weight: 600; }
.map-add-actions { display: flex; justify-content: flex-end; gap: 8px; }
.map-add-error { font-size: var(--t-sm); color: var(--rough-ink); }

/* Pin-type picker in the "add location" popup — a coloured dot (--type-color,
   set inline per button since it comes from a small JS data table, PIN_TYPES
   in places.js) plus a label, matching .seg-button's general shape. */
.map-type-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.map-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--muted);
  font: inherit;
  font-size: var(--t-sm);
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}
/* A saved place's type as its map icon (core/places.js placeTypeBadgeHTML):
   the header's place dropdown, the map pins, the type picker, Steder. */
.place-type-badge { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--badge); color: #FFF; }
.place-pin { background: none; border: none; }
.place-pin .place-type-badge { border: 2px solid #FFF; box-shadow: var(--shadow); box-sizing: border-box; }
.map-type-btn { padding-left: 4px; }
.map-type-btn:not(.is-active) .place-type-badge { opacity: 0.55; }
.place-row-name { display: flex; align-items: center; gap: 8px; }
.place-type-pick { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.map-type-btn.is-active {
  border-color: var(--type-color);
  background: color-mix(in srgb, var(--type-color) 16%, var(--surface));
  color: var(--ink);
  font-weight: 600;
}
/* ── Settings screen ── */

.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}
.settings-group {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.settings-group-title {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-family: 'Archivo', sans-serif;
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.settings-row-label { flex: 1 1 200px; min-width: 0; }
.settings-row-label .label { font-size: var(--t-base); font-weight: 500; }
.settings-row-label .hint { font-size: var(--t-sm); color: var(--faint); margin-top: 2px; }
.settings-row-choices { display: flex; gap: 6px; flex: 0 0 auto; }

.seg-button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 400;
  padding: 0 14px;
  min-height: var(--tap);
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
}
/* .seg-button used on an <a> (Log ind/Log ud/Opret konto links styled to
   match the button rows around them) rather than a real <button>. */
.seg-button.is-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.seg-button[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--good-ink);
  font-weight: 600;
}

.settings-note { font-size: var(--t-sm); color: var(--faint); line-height: 1.6; }

/* ── Admin import history (Sweden lakes) ── */
.admin-import-history { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.admin-import-history th {
  text-align: left;
  padding: 6px 10px;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.admin-import-history td { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.admin-import-history tr:last-child td { border-bottom: none; }
.settings-note.is-warning {
  margin: 0 20px 16px 20px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--cau-bg);
  color: var(--cau-ink);
  font-weight: 500;
}

/* ── Fold-out settings row (native <details>, no JS needed to open/close) ── */

.settings-summary {
  cursor: pointer;
  list-style: none;
}
.settings-summary::-webkit-details-marker { display: none; }
.settings-summary:hover { background: var(--surface2); }

.settings-details-chevron {
  display: flex;
  flex: 0 0 auto;
  color: var(--faint);
  transition: transform .18s ease;
}
.settings-details[open] .settings-details-chevron { transform: rotate(180deg); }

.settings-details-body {
  padding: 2px 20px 20px 20px;
  border-bottom: 1px solid var(--line);
}

.settings-password-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
  margin-top: 8px;
}

/* ── Totrinsbekræftelse (2FA) ── */
/* Always dark-on-white, even in night mode: authenticator apps scan that
   far more reliably than an inverted code. */
.mfa-qr {
  width: 200px;
  max-width: 100%;
  margin: 12px 0;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.mfa-qr svg { display: block; width: 100%; height: auto; }
.mfa-text {
  margin: 10px 0;
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--muted);
}
.mfa-secret {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-md);
  color: var(--ink);
  word-break: break-all;
  user-select: all;
}
.mfa-warn {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--cau-bg);
  color: var(--cau-ink);
  font-size: var(--t-md);
  line-height: 1.5;
}
.mfa-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 8px 36px;
  margin: 12px 0 14px;
  padding: 0;
  list-style: none;
}
.mfa-codes code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-base);
  color: var(--ink);
  letter-spacing: .02em;
}
/* "New recovery codes" and "turn off" are separate actions — keep them
   visibly apart. */
.mfa-block + .mfa-block {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.mfa-cancel { margin-top: 10px; }
.mfa-block-title { font-weight: 600; color: var(--ink); font-size: var(--t-md); }
.mfa-devices { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mfa-devices li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.mfa-device-info { min-width: 0; }
.mfa-device-name { font-weight: 600; color: var(--ink); }
.mfa-device-used { font-size: var(--t-sm); color: var(--muted); }
.mfa-device-this { font-weight: 400; color: var(--muted); font-size: var(--t-sm); }

/* ── Mine steder / My spots — inline add-place form ── */

.place-add-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.place-input {
  flex: 1 1 160px;
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
  background: var(--surface2);
  color: var(--ink);
  box-sizing: border-box;
}
.place-input.is-coord { flex: 0 1 130px; }
.place-input.is-type { flex: 0 1 150px; }
.place-type-hint { font-weight: 600; text-transform: uppercase; font-size: var(--t-xs); letter-spacing: .04em; }

/* ── "Not built" empty states ── */

.stub-card {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 18px;
  padding: 40px 30px;
  text-align: center;
  max-width: 520px;
}
.stub-title { font-family: 'Archivo', sans-serif; font-size: var(--t-lg); font-weight: 600; }
.stub-body { margin-top: 8px; font-size: var(--t-md); color: var(--muted); line-height: 1.6; }

/* ── Trip planner (Ture) ── */

.trip-field-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--t-xs);
  color: var(--muted);
  flex: 1 1 130px;
}
.trip-field-label.is-wide { flex: 2 1 220px; }
/* An author `display` rule otherwise beats the UA stylesheet's
   `[hidden] { display: none }` at equal specificity (author styles win
   ties) — without this, toggling .hidden on a flex/grid element via JS
   silently does nothing. */
.trip-field-label[hidden] { display: none; }
/* .place-input's own `flex: 1 1 160px` is meant for .place-add-form's ROW
   layout (basis = width). Nested here inside .trip-field-label's COLUMN
   flex container, the same shorthand would be reinterpreted against the
   vertical main axis instead — inflating the input to ~160px tall. Reset
   it to a plain block sized by width/height rather than flex-basis. */
.trip-field-label > .place-input { flex: none; width: 100%; }
/* Same fix, for the address-search field (kort.php's .map-search-wrap
   reused for the lodging form) nested inside a .trip-field-label column. */
.trip-field-label > .map-search-wrap { flex: none; width: 100%; max-width: none; margin-bottom: 0; }
.trip-field-label > .map-search-wrap > .place-input { flex: none; width: 100%; }
.trip-time-row { display: flex; gap: 6px; }
.trip-time-row > .place-input { flex: 1 1 100px; }

.trip-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 14px 20px;
  margin-bottom: 16px;
}

.trip-day {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  margin-top: 16px;
  overflow: hidden;
}
.trip-day-header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: var(--t-md);
}
.trip-day-empty { padding: 14px 20px; }
.trip-stop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--line);
  flex-wrap: wrap;
}
.trip-stop:last-child { border-bottom: none; }
.trip-stop-badge { margin-top: 6px; }
.trip-suggestions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.trip-suggestion-card {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface2);
}

.trip-day-lodging {
  padding: 8px 20px;
  font-size: var(--t-sm);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
/* Leaflet's base .leaflet-div-icon carries a white box + border meant for
   a generic content marker — overridden here so the emoji renders on its
   own, matching the plain circleMarker dots used for fishing stops. */
.leaflet-div-icon.trip-lodging-marker {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
}

/* ── Print (trip plan) ──
   Printing a trip is meant to leave a page you can actually take fishing —
   chrome, edit controls and the sharing/suggestion UI are all noise there,
   never useful on paper. Scoped to the trip pages' own containers rather
   than every .settings-row sitewide, so this doesn't change print output
   for unrelated pages (steder.php, admin.php, ...). */
@media print {
  /* .main is a fixed-height (100vh), independently-scrolling column — the
     right call for the on-screen app shell (fixed sidebar, scrolling
     content), but fatal for printing: a browser can't paginate content
     trapped inside a fixed-height overflow:auto box across multiple pages,
     it only captures what fits in that one box. body's own overflow:hidden
     has the same effect one level up. Both reset to their natural flow
     here so the trip plan can actually span as many printed pages as it
     needs instead of being cut off after a single page. */
  body, .main { height: auto !important; overflow: visible !important; }

  .sidebar, .bottom-nav, #backdrop, .map-overlay-toggle, .leaflet-control-zoom,
  #trip-share-panel, #lodging-add-section, #stop-add-section, #print-trip, #export-trip-gpx,
  .trip-suggestions, .trip-stop .settings-row-choices, #lodging-list-section .settings-row-choices {
    display: none !important;
  }
  .map-container { height: 320px; }
  .trip-day, .settings-group { page-break-inside: avoid; }
}

/* ── "Næste 48 timer" trend chart (core/trendChart.js) ──
   Marks use the theme's own tokens, so day/night themes need nothing extra:
   2px data line, a 10% wash for the gust range, hairline grid, text in
   text tokens (never the line colour). */
.trend-card { padding: 14px 16px 10px; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--t-xs); color: var(--muted); margin: 0 0 2px 46px; }
.trend-key { display: inline-flex; align-items: center; gap: 6px; }
.trend-key-line { width: 16px; height: 2px; border-radius: 2px; background: var(--primary); }
.trend-key-band { width: 16px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--primary) 18%, transparent); }
.trend-key-night { width: 16px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.trend-plot { position: relative; }
.trend-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.trend-night { fill: var(--ink); fill-opacity: .05; }
.trend-grid { stroke: var(--line); stroke-width: 1; }
.trend-tick { fill: var(--muted); font: 500 10.5px 'IBM Plex Mono', monospace; }
.trend-tick.is-day { fill: var(--ink); font-weight: 600; text-transform: capitalize; }
.trend-title { fill: var(--ink); font: 600 12px 'IBM Plex Sans', sans-serif; }
.trend-unit { fill: var(--muted); font-weight: 400; }
.trend-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-band { fill: var(--primary); fill-opacity: .12; stroke: none; }
.trend-crosshair { stroke: var(--muted); stroke-width: 1; pointer-events: none; }
.trend-dot { fill: var(--primary); stroke: var(--surface); stroke-width: 2; pointer-events: none; }
.trend-hit { fill: transparent; cursor: crosshair; outline: none; }
.trend-hit:focus-visible { stroke: var(--primary); stroke-width: 2; }
.trend-tooltip {
  position: absolute; top: 6px; pointer-events: none; z-index: 5; min-width: 150px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 8px 10px; font-size: var(--t-sm);
}
.trend-tooltip > div { display: flex; justify-content: space-between; gap: 12px; }
.trend-tooltip span { color: var(--muted); }
.trend-tooltip b { font: 500 var(--t-sm) 'IBM Plex Mono', monospace; }
.trend-tip-time { font-weight: 600; margin-bottom: 4px; text-transform: capitalize; }
.trend-table-details { margin-top: 6px; font-size: var(--t-sm); }
.trend-table-details summary { cursor: pointer; color: var(--muted); padding: 4px 0; }
.trend-table-wrap { overflow-x: auto; max-height: 260px; overflow-y: auto; }
.trend-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.trend-table th, .trend-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.trend-table thead th { color: var(--muted); font-weight: 500; position: sticky; top: 0; background: var(--surface); }

/* "Kysten vender mod" picker on Mine steder (steder.js) */
.place-shore { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.place-input.is-shore { flex: 0 0 auto; width: auto; min-width: 0; padding: 4px 8px; font-size: var(--t-sm); }

/* "Målart" line on the fishing card (forecast.js speciesLineHtml) */
.species-line { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 2px 0 10px; font-size: var(--t-sm); }
.species-line-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.species-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.species-season { font-size: var(--t-xs); padding: 2px 8px; border-radius: 999px; }
.species-season.is-peak { background: var(--good-bg); color: var(--good-ink); }
.species-season.is-good { background: var(--primary-soft); color: var(--ink); }
.species-season.is-off { background: var(--cau-bg); color: var(--cau-ink); }
.species-line-sub { color: var(--muted); margin-top: 3px; }
.species-line-tip { color: var(--muted); margin-top: 3px; font-size: var(--t-xs); line-height: 1.4; }
.species-rules { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 2px; font-size: var(--t-xs); line-height: 1.4; color: var(--ink); }
.species-rule.is-warning { color: var(--cau-ink); font-weight: 600; }
.species-rule.is-faint { color: var(--faint); }
.place-input.is-species { flex: 0 1 240px; }

/* ── Best fishing days (bedste-dage.php) + the dashboard header chip ──
   Score tiers 4..1 match fishingScore.js's tierOf() buckets (80/65/40/0).
   Tier colour goes strong -> quiet so the good days jump out; "not
   advised" reuses the rough severity pair, so it never reads as a good
   score, even colour-blind (it also carries a ⚠ mark). */

.best-days-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 14px 0 11px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.best-days-chip:hover { border-color: var(--primary); }
.best-days-chip-icon { display: flex; color: var(--primary); }
.best-days-chip.tier-4 .best-days-chip-icon, .best-days-chip.tier-3 .best-days-chip-icon { color: var(--leaf); }
/* Once the pick is in: "lør · 86" over a "Bedste fiskedag" caption, the
   same two-line shape as the clock pill beside it. */
.best-days-chip-lines { display: flex; flex-direction: column; line-height: 1.25; }
.best-days-chip-label { font-size: var(--t-xs); font-weight: 400; color: var(--muted); }
.best-days-chip.has-pick { padding-top: 8px; padding-bottom: 8px; }

.best-stack { display: flex; flex-direction: column; gap: 22px; max-width: 920px; }
.best-intro { margin: 0; color: var(--muted); font-size: var(--t-md); line-height: 1.55; max-width: 62ch; }
.best-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.best-filter-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-xs); color: var(--muted); min-width: 200px; }
.best-filter-field .place-input { flex: none; } /* .place-input's flex-basis would otherwise become its height in this column */
.best-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: var(--t-sm); cursor: pointer; }
.best-toggle input { width: 18px; height: 18px; accent-color: var(--primary); }
.best-heading { font-family: 'Archivo', sans-serif; font-size: var(--t-lg); font-weight: 600; margin: 0 0 10px; }
.best-empty { color: var(--muted); font-size: var(--t-md); }
.best-empty a { color: var(--primary); }

.best-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.best-pick {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.best-pick:hover { border-color: var(--primary); }
.best-pick-rank {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary-soft);
  color: var(--good-ink);
  font-size: var(--t-xs);
  font-weight: 700;
}
.best-pick-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.best-pick-title { font-weight: 600; font-size: var(--t-base); }
.best-pick-place { color: var(--muted); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.best-reasons { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.best-reasons li {
  font-size: var(--t-xs);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--muted);
}
.best-reasons li.is-bad { background: var(--cau-bg); border-color: transparent; color: var(--cau-ink); }

.best-score {
  flex: none;
  min-width: 42px;
  padding: 6px 8px;
  border-radius: 10px;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: var(--t-base);
}

/* Shared tier colours for grid cells, pick scores and legend swatches. */
.best-cell.tier-4, .best-score.tier-4, .best-legend-swatch.tier-4 { background: var(--primary); color: var(--surface); }
.best-cell.tier-3, .best-score.tier-3, .best-legend-swatch.tier-3 { background: var(--good-bg); color: var(--good-ink); }
.best-cell.tier-2, .best-score.tier-2, .best-legend-swatch.tier-2 { background: var(--surface2); color: var(--muted); }
.best-cell.tier-1, .best-score.tier-1, .best-legend-swatch.tier-1 { background: transparent; color: var(--faint); }
.best-cell.is-unsafe, .best-score.is-unsafe, .best-legend-swatch.is-unsafe { background: var(--rough-bg); color: var(--rough-ink); }
.best-cell.is-closed, .best-score.is-closed {
  background: repeating-linear-gradient(135deg, var(--surface2) 0 4px, transparent 4px 8px);
  color: var(--faint);
}

.best-grid-card { padding: 8px; }
.best-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.best-grid { border-collapse: separate; border-spacing: 4px; width: 100%; }
.best-grid th {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--muted);
  padding: 4px 2px;
}
.best-grid th.is-weekend { color: var(--ink); }
.best-grid-date { display: block; font-weight: 400; color: var(--faint); font-size: 10.5px; }
.best-grid .is-dim { opacity: .35; }
.best-grid .best-place-name {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  text-align: left;
  font-size: var(--t-sm);
  color: var(--ink);
  text-transform: none;
  max-width: 150px;
  min-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
}
.best-place-type { font-size: var(--t-xs); color: var(--faint); font-weight: 400; }
.best-grid td { padding: 0; }
.best-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 38px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
}
.best-cell.tier-4, .best-cell.tier-3, .best-cell.is-unsafe { border-color: transparent; }
.best-cell.is-none { cursor: default; color: var(--faint); background: transparent; }
.best-cell.is-selected { outline: 2px solid var(--ink); outline-offset: 1px; }
.best-cell-mark { position: absolute; top: 1px; right: 3px; font-size: 9px; line-height: 1; }

.best-detail { border-top: 1px solid var(--line); margin-top: 8px; padding: 14px 8px 6px; }
.best-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.best-detail-title { font-family: 'Archivo', sans-serif; font-size: var(--t-lg); font-weight: 600; }
.best-detail-sub { color: var(--muted); font-size: var(--t-sm); margin-top: 2px; }
.best-detail-warn { margin-top: 10px; padding: 8px 12px; border-radius: 9px; background: var(--rough-bg); color: var(--rough-ink); font-size: var(--t-sm); }
.best-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.best-detail-actions .is-primary { background: var(--primary); border-color: var(--primary); color: var(--surface); font-weight: 600; }
.best-detail-status { margin-top: 8px; min-height: 1em; font-size: var(--t-sm); color: var(--faint); }

.best-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: var(--t-xs); color: var(--muted); }
.best-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.best-legend-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); }
.best-note { margin: 8px 0 0; font-size: var(--t-xs); color: var(--faint); }

@media (max-width: 859px) {
  .best-days-chip { padding: 0 11px 0 9px; }
  .best-filter-field { min-width: 0; flex: 1 1 100%; }
  .best-grid .best-place-name { max-width: 96px; min-width: 72px; }
}

/* ── Front-page widgets: Bedste dage, Vandstand, Sol & måne (core/homeWidgets.js) ── */

.widget-note { margin: 0; font-size: var(--t-xs); color: var(--faint); line-height: 1.45; }

.wbest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wbest-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
.wbest-row:hover { border-color: var(--primary); }
.wbest-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wbest-when { font-weight: 600; color: var(--ink); }
.wbest-place { font-size: var(--t-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wlevel-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wlevel-now-value { font-size: var(--t-num); color: var(--ink); font-weight: 600; }
.wlevel-trend { color: var(--muted); font-size: var(--t-sm); }
.wlevel-svg { display: block; max-width: 100%; }
.wlevel-area { fill: var(--primary-soft); }
.wlevel-line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; }
.wlevel-now { stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 3 4; }
.wlevel-dot { fill: var(--surface); stroke: var(--primary); stroke-width: 2.5; }
.wlevel-dot.is-low { stroke: var(--faint); }
.wlevel-label { font-size: 12px; fill: var(--ink); font-family: 'IBM Plex Mono', monospace; }
.wlevel-tick { font-size: 11.5px; fill: var(--faint); }
.wlevel-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wlevel-chip { font-size: var(--t-xs); padding: 3px 10px; border-radius: 999px; background: var(--surface2); color: var(--muted); }
.wlevel-chip.is-high { background: var(--good-bg); color: var(--good-ink); }

.sunmoon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.sunmoon-cell { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface2); }
.sunmoon-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; flex: none; }
.sunmoon-icon.is-sun { background: color-mix(in srgb, var(--sun) 22%, transparent); color: var(--sun); }
.sunmoon-label { font-size: var(--t-sm); color: var(--muted); }
.sunmoon-value { font-weight: 600; color: var(--ink); }
.sunmoon-sub { font-size: var(--t-xs); color: var(--faint); display: flex; align-items: center; gap: 4px; }
.moon-disc { flex: none; }
.moon-disc-dark { fill: var(--line); }
.moon-disc-lit { fill: #F4E9C1; stroke: #D9C98F; stroke-width: .5; }

.bite-title { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); font-size: var(--t-sm); }
.bite-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bite-row {
  display: grid; grid-template-columns: 52px 104px 1fr; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 10px; font-size: var(--t-sm);
}
.bite-row.is-major { background: var(--good-bg); color: var(--good-ink); }
.bite-row.is-minor { background: var(--surface2); color: var(--muted); }
.bite-row.is-active { outline: 2px solid var(--primary); outline-offset: -2px; }
.bite-kind { font-weight: 600; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; }
.bite-now { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--primary); color: var(--surface); font-size: var(--t-xs); font-weight: 600; }

/* ── Page tabs (indstillinger.php, admin.php — assets/js/tabs.js) ── */

.page-tabs {
  display: flex;
  gap: 4px;
  max-width: 720px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: 8px;
  z-index: 15;
}
.page-tabs::-webkit-scrollbar { display: none; }
.page-tab {
  flex: 1 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap);
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.page-tab:hover { color: var(--ink); background: var(--surface2); }
.page-tab[aria-selected="true"] { background: var(--primary-soft); color: var(--good-ink); font-weight: 600; }
.page-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.page-tab-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--cau-bg); color: var(--cau-ink);
  font-size: var(--t-xs); font-weight: 700;
  display: inline-grid; place-items: center;
}
.tab-panel[hidden] { display: none; }
.tab-panel > .settings-stack { margin-top: 0; }

/* ── Makkere (makkere.php) ── */
.seg-button.is-primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
:root[data-phase="night"] .seg-button.is-primary { color: #0B1730; }
.seg-button.is-danger { color: var(--rough-ink); border-color: var(--rough-bg); }
.link-button { border: none; background: none; padding: 0; margin-top: 6px; font: inherit; font-size: var(--t-sm); color: var(--primary); cursor: pointer; text-align: left; }
.link-button:hover { text-decoration: underline; }

.friend-profile-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.friend-profile-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.friend-profile-name { font-family: 'Archivo', sans-serif; font-size: var(--t-lg); font-weight: 700; }
.friend-profile-bio { font-style: italic; }
.friend-profile-text .hint { font-size: var(--t-sm); color: var(--faint); }
.friend-handle { color: var(--muted); font-size: var(--t-sm); font-weight: 400; }
.friend-handle-missing { color: var(--primary); font-size: var(--t-sm); text-decoration: none; }
.friend-handle-missing:hover { text-decoration: underline; }
.friend-profile-form { display: flex; flex-direction: column; gap: 12px; padding: 0 20px 18px; }
.friend-profile-form .friend-profile-head { padding: 18px 0 0; }
.friend-bio-input { padding: 10px 12px; resize: vertical; min-height: 60px; font: inherit; }
.friend-profile-actions { display: flex; justify-content: flex-end; gap: 8px; }

.friend-row { gap: 12px; flex-wrap: nowrap; }
.friend-row .settings-row-label { flex: 1 1 auto; }
.friend-row .hint { line-height: 1.45; }
.friend-row.is-incoming { background: var(--primary-soft); }
.friend-row:last-child, #friends-list > .friend-empty:last-child { border-bottom: none; }
.friend-row .settings-row-label { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .friend-row { padding-left: 16px; padding-right: 16px; }
  .friend-row .seg-button { padding: 0 10px; }
}

.friend-more { position: relative; }
.friend-more > summary { list-style: none; display: inline-grid; place-items: center; font-weight: 700; letter-spacing: .1em; }
.friend-more > summary::-webkit-details-marker { display: none; }
.friend-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.friend-empty { padding: 28px 20px; text-align: center; }
.friend-empty-icon { font-size: 34px; margin-bottom: 6px; }

.invite-actions { gap: 8px; }
.invite-qr-row { align-items: flex-start; }
.invite-qr-row[hidden], .invite-actions [hidden] { display: none; }
.invite-qr { width: 168px; height: 168px; flex: 0 0 auto; background: #fff; border-radius: 12px; overflow: hidden; }
.invite-qr svg { width: 100%; height: 100%; display: block; }

/* ── Shared trips (tur.php: core/tripCrew.js; ture.php) ── */
#trip-crew, #trip-suggestions, #trip-dates, #snak { margin-bottom: 16px; }
#snak { margin-top: 16px; }
.avatar.is-xs { --size: 22px; }

.crew-people { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.crew-person {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface2);
}
.crew-person-text { line-height: 1.2; }
.crew-person-name { font-size: var(--t-md); font-weight: 600; }
.crew-person-tag { font-size: var(--t-xs); color: var(--faint); }
.crew-person.rsvp-yes .crew-person-tag, .crew-person.rsvp-organizer .crew-person-tag { color: var(--leaf); font-weight: 600; }
.crew-person.rsvp-no { opacity: .6; }
.crew-person.rsvp-invited { border-style: dashed; }
.crew-remove { border: none; background: none; color: var(--faint); font-size: 18px; line-height: 1; padding: 0 2px 0 4px; cursor: pointer; min-height: 24px; }
.crew-remove:hover { color: var(--rough-ink); }
.crew-rsvp-row.is-waiting { background: var(--primary-soft); }
.seg-button.is-go[aria-pressed="true"] { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.crew-leave-row { justify-content: flex-end; border-bottom: none; padding-top: 8px; padding-bottom: 12px; }
.crew-leave-row .link-button { color: var(--faint); margin: 0; }
.crew-invite-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.crew-invite-list { display: flex; flex-wrap: wrap; gap: 8px; }
.crew-invite-option {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; font-size: var(--t-md);
}
.crew-invite-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); font-weight: 600; }
.crew-invite-option input { margin: 0 2px 0 4px; }
.crew-note { font-size: var(--t-sm); font-style: italic; color: var(--muted); margin-top: 3px; }
.crew-status { font-size: var(--t-sm); padding: 4px 10px; border-radius: 999px; background: var(--surface2); color: var(--muted); white-space: nowrap; }
.crew-status.status-accepted, .crew-status.status-yes { background: var(--primary-soft); color: var(--good-ink); font-weight: 600; }
.crew-status.status-rejected, .crew-status.status-no { color: var(--faint); }

.date-votes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  padding: 14px 20px;
}
.date-vote { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.date-vote.is-top { border-color: var(--leaf); box-shadow: 0 0 0 1px var(--leaf); }
.date-vote-main {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px;
  border: none; background: none; font: inherit; color: var(--ink); text-align: left;
  cursor: pointer; min-height: 84px;
}
.date-vote-main:hover { background: var(--surface2); }
.date-vote-main[aria-pressed="true"] { background: var(--primary-soft); }
.date-vote-main[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 8px; right: 10px; color: var(--good-ink); font-weight: 700; }
.date-vote-day { display: block; font-weight: 600; }
.date-vote-day::first-letter, .day-chip::first-letter { text-transform: uppercase; }
.date-vote-sub { font-size: var(--t-xs); color: var(--faint); }
.date-vote-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; }
.date-vote-faces { display: flex; }
.date-vote-faces .avatar { margin-right: -6px; box-shadow: 0 0 0 2px var(--surface); }
.date-vote-faces:not(:empty) { margin-right: 6px; }
.date-vote-count { font-size: var(--t-xs); color: var(--muted); }
.date-vote-foot { width: 100%; }
.date-vote-weather { margin-left: auto; flex: 0 0 auto; font-size: var(--t-xs); font-weight: 600; padding: 1px 6px; border-radius: 999px; }
.date-vote-weather.sev-good { background: var(--good-bg); color: var(--good-ink); }
.date-vote-weather.sev-cau { background: var(--cau-bg); color: var(--cau-ink); }
.date-vote-weather.sev-rough { background: var(--rough-bg); color: var(--rough-ink); }
.date-vote-choose { border: none; border-top: 1px solid var(--line); background: var(--surface2); color: var(--primary); font: inherit; font-size: var(--t-sm); font-weight: 600; padding: 7px; cursor: pointer; }
.date-vote-choose:hover { background: var(--primary); color: #fff; }

.talk-list { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; max-height: 480px; overflow-y: auto; }
.talk-item { display: flex; gap: 10px; align-items: flex-start; }
.talk-bubble { background: var(--surface2); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 8px 12px; min-width: 0; max-width: 100%; }
.talk-meta { display: flex; align-items: baseline; gap: 8px; font-size: var(--t-sm); }
.talk-meta span { color: var(--faint); font-size: var(--t-xs); }
.talk-body { margin-top: 2px; font-size: var(--t-md); line-height: 1.5; overflow-wrap: anywhere; }
.talk-delete { margin-left: auto; border: none; background: none; color: var(--faint); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 0 0 8px; }
.talk-delete:hover { color: var(--rough-ink); }
.talk-empty { text-align: center; padding: 8px 0; }
.talk-form { display: flex; gap: 10px; align-items: flex-end; padding: 12px 20px 16px; border-top: 1px solid var(--line); }
.talk-form textarea { flex: 1 1 auto; padding: 10px 12px; resize: vertical; min-height: 44px; font: inherit; }
.trip-secret-note { font-style: italic; }

@media (max-width: 520px) {
  .crew-people, .date-votes, .talk-list { padding-left: 16px; padding-right: 16px; }
  .date-votes { grid-template-columns: repeat(2, 1fr); }
  .crew-rsvp-row .settings-row-choices { flex-wrap: wrap; }
}
@media print {
  #trip-dates, #trip-suggestions, .crew-leave-row, .crew-remove, .crew-rsvp-row .settings-row-choices, .talk-form, .talk-delete { display: none !important; }
}

/* ── Konkurrence (tur.php: core/tournament.js) ── */
#konkurrence { margin-bottom: 16px; }
.tourn-live { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--rough-ink); color: #fff; font-size: var(--t-xs); letter-spacing: .04em; animation: tourn-pulse 2s ease-in-out infinite; }
@keyframes tourn-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .tourn-live { animation: none; } }
.tourn-head .link-button { margin-top: 4px; }
.tourn-log-button { font-size: var(--t-base); padding: 0 18px; min-height: 44px; }

.tourn-setup, .tourn-log { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface2); }
.tourn-log { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.tourn-log .friend-profile-actions { flex: 1 0 100%; }
.tourn-setup fieldset { border: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.tourn-setup legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.tourn-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.tourn-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.tourn-choice input { margin-top: 3px; }
.tourn-choice-title { display: block; font-weight: 600; }
.tourn-choice .hint { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: 2px; line-height: 1.4; }
.tourn-length { display: flex; align-items: center; gap: 6px; }
.tourn-length input { width: 110px; flex: none; font-size: 18px; font-weight: 600; }
.tourn-locked-species { min-height: var(--tap); display: flex; align-items: center; font-weight: 600; }

.tourn-winner { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, var(--cau-bg), var(--surface)); }
.tourn-winner.is-empty { justify-content: center; background: var(--surface2); color: var(--muted); }
.tourn-winner-cup { font-size: 40px; line-height: 1; }
.tourn-winner-faces { display: flex; }
.tourn-winner-faces .avatar + .avatar { margin-left: -12px; box-shadow: 0 0 0 3px var(--surface); }
.tourn-winner-text { font-family: 'Archivo', sans-serif; font-size: var(--t-lg); font-weight: 700; }

.tourn-board { list-style: none; margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.tourn-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; }
.tourn-row.is-first { background: var(--cau-bg); }
.tourn-row.is-me .tourn-name { font-weight: 700; }
.tourn-place { width: 28px; text-align: center; font-size: 20px; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
.tourn-name { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.tourn-trophies { font-size: var(--t-sm); }
.tourn-score { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.tourn-score-main { font-family: 'IBM Plex Mono', monospace; font-size: var(--t-lg); font-weight: 600; }
.tourn-score-sub { font-size: var(--t-xs); color: var(--faint); }

.tourn-catches { padding: 12px 20px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.tourn-catches-title { font-size: var(--t-sm); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.tourn-catch { display: flex; gap: 10px; align-items: flex-start; }
.tourn-catch.is-not-counting { opacity: .65; }
.tourn-catch-text { flex: 1 1 auto; min-width: 0; font-size: var(--t-md); }
.tourn-catch-text .hint { font-size: var(--t-sm); color: var(--faint); }
.tourn-cm { font-family: 'IBM Plex Mono', monospace; }
.tourn-catch-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.tourn-seen { font-size: var(--t-xs); color: var(--leaf); font-weight: 600; }
.tourn-pending { font-size: var(--t-xs); color: var(--cau-ink); background: var(--cau-bg); border-radius: 999px; padding: 1px 8px; }
.tourn-catch-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
@media (max-width: 520px) {
  .tourn-setup, .tourn-log, .tourn-catches { padding-left: 16px; padding-right: 16px; }
  .tourn-catch { flex-wrap: wrap; }
  .tourn-catch-actions { margin-left: 40px; }
}
@media print { .tourn-log-button, .tourn-catch-actions, #konkurrence .crew-leave-row, .tourn-head .link-button { display: none !important; } }
.tourn-setup .trip-field-label, .tourn-log .trip-field-label { flex: none; }
.tourn-log .trip-field-label.is-wide { flex: 1 1 200px; }

/* ── Notification switches + push device (indstillinger.php) ── */
.notify-switches { gap: 8px; }
.notify-switch {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--t-sm); color: var(--muted); cursor: pointer; user-select: none;
}
.notify-switch input { appearance: none; width: 30px; height: 18px; margin: 0; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; flex: none; }
.notify-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.notify-switch input:checked { background: var(--primary); }
.notify-switch input:checked::after { transform: translateX(12px); }
.notify-switch:has(input:checked) { color: var(--good-ink); border-color: var(--primary); font-weight: 600; }
.notify-switch input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.push-steps { margin: 0; padding: 4px 20px 16px 44px; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-md); line-height: 1.5; }

/* ── "Skal du ud?" + "Nyt fra makkerne" (makkere.php: core/feed.js) ── */
.out-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface2); }
.out-form .trip-field-label { flex: none; }
.out-form .trip-field-label.is-wide { flex: 1 1 100%; }
.out-form .friend-profile-actions { flex: 1 0 100%; }
.out-form input[hidden] { display: none; }
.out-form select + input { margin-top: 6px; }
.day-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.day-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-sm); min-height: 36px; padding: 0 12px; border-radius: 999px; cursor: pointer; }
.day-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
:root[data-phase="night"] .day-chip[aria-pressed="true"] { color: #0B1730; }

.out-list { display: flex; flex-direction: column; }
.out-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 20px; border-top: 1px solid var(--line); }
.out-card:first-child { border-top: none; }
.out-text { flex: 1 1 auto; min-width: 0; font-size: var(--t-md); line-height: 1.45; }
.out-when { font-weight: 600; color: var(--good-ink); }
.out-joins { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--t-sm); color: var(--muted); }
.out-foot { margin-top: 6px; }
.out-actions { flex: 0 0 auto; }

.feed-list { display: flex; flex-direction: column; padding: 6px 0; }
.feed-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 20px; }
.feed-text { flex: 1 1 auto; min-width: 0; font-size: var(--t-md); line-height: 1.45; }
.feed-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: var(--t-xs); color: var(--faint); }

.react-button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: var(--t-xs); font-weight: 600; min-height: 28px; padding: 0 10px; border-radius: 999px; cursor: pointer; }
.react-button:hover { border-color: var(--primary); }
.react-button.is-on { background: var(--primary-soft); border-color: var(--primary); color: var(--good-ink); }
@media (max-width: 520px) {
  .out-form, .out-card, .feed-item { padding-left: 16px; padding-right: 16px; }
  .out-card { flex-wrap: wrap; }
  .out-actions { margin-left: 46px; }
}

/* ── Fiskepladser (Fishing in Denmark) on the maps ── */
.fid-kind { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--kind); color: #fff; font-size: var(--t-xs); font-weight: 600; }
.fid-progress-row { flex-direction: column; align-items: stretch; gap: 6px; }
.fid-progress-row progress { width: 100%; height: 10px; accent-color: var(--primary); }

/* ── "Vind på søer" (kort.php: core/lakeWind.js) ── */
.lake-wind-canvas { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 450; }
/* Kortlag: a row of chips along the top of the map (createOverlayControl()).
   Starts right of the zoom buttons; scrolls sideways, with no scrollbar,
   when it doesn't fit. Off: plain chip, badge faded. On: tinted in the
   layer's colour (--layer, set per chip). */
.map-layer-bar {
  position: absolute; z-index: 1000; top: 6px; left: 50px; right: 6px;
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 4px; /* room for the chips' shadow and focus ring — the row
     scrolls, so anything past its edge is cut off: hence a tight shadow */
}
.map-layer-bar::-webkit-scrollbar { display: none; }
/* Fade whichever edge the row carries on past. */
.map-layer-bar.fade-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.map-layer-bar.fade-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.map-layer-bar.fade-left.fade-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
/* Compact (a narrow map): icon-only chips, the name back once it's on. */
.map-layer-bar.is-compact { gap: 4px; }
.map-layer-bar.is-compact .map-layer-chip-group { height: 30px; }
.map-layer-bar.is-compact .map-layer-chip { padding: 0 4px; gap: 5px; font-size: var(--t-xs); }
.map-layer-bar.is-compact .map-layer-chip:has(.map-layer-chip-input:checked) { padding-right: 10px; }
.map-layer-bar.is-compact .map-layer-chip:not(:has(.map-layer-chip-input:checked)) .map-layer-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.map-layer-bar.is-compact .map-layer-chip-group.has-menu .map-layer-chip { padding-right: 4px; }
.map-layer-bar.is-compact .map-layer-chip-group.has-menu .map-layer-chip:has(.map-layer-chip-input:checked) { padding-right: 8px; }
.map-layer-bar.is-compact .map-layer-chip-more { padding: 0 7px 0 4px; }

/* A chip, or a chip + its ▾ joined into one pill (.has-menu). */
.map-layer-chip-group {
  display: inline-flex; flex: none; height: 32px; border-radius: 999px;
  background: var(--surface); box-shadow: 0 1px 3px rgba(11, 34, 57, .2);
}
.map-layer-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px 0 6px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--surface);
  font-size: var(--t-sm); font-weight: 500; color: var(--muted);
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.map-layer-chip:hover { color: var(--ink); }
.map-layer-chip-group.has-menu .map-layer-chip { padding-right: 9px; border-radius: 999px 0 0 999px; }
.map-layer-chip-more {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 10px 0 7px; border: 1.5px solid var(--line); border-left: none; border-radius: 0 999px 999px 0;
  background: var(--surface); color: var(--faint); font: inherit; font-size: var(--t-xs); cursor: pointer;
}
.map-layer-chip-group:has(.map-layer-chip-input:checked) .map-layer-chip-more { border-color: var(--layer); }
.map-layer-chip-more:hover, .map-layer-chip-more[aria-expanded="true"] { color: var(--ink); background: var(--surface2); }
.map-layer-chip-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.map-layer-chip-count { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--primary); color: #FFF; font-size: 10px; font-weight: 600; }
.map-layer-chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.map-layer-chip:has(.map-layer-chip-input:focus-visible),
.map-layer-menu-row:has(.map-layer-chip-input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.map-overlay-badge { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--layer); color: #FFF; opacity: .45; filter: grayscale(.6); transition: opacity .15s, filter .15s; }
.map-layer-chip:has(.map-layer-chip-input:checked) {
  color: var(--ink); border-color: var(--layer);
  background: color-mix(in srgb, var(--layer) 14%, var(--surface));
}
.map-layer-chip:has(.map-layer-chip-input:checked) .map-overlay-badge,
.map-layer-menu-row:has(.map-layer-chip-input:checked) .map-overlay-badge { opacity: 1; filter: none; }

/* The dropdown under a chip's ▾ — its sub-options, each with a check. */
.map-layer-menu {
  position: absolute; z-index: 1001; min-width: 180px; padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.map-layer-menu[hidden] { display: none; }
.map-layer-menu-row {
  position: relative; display: flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 10px 0 6px; border-radius: 8px;
  font-size: var(--t-sm); font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; user-select: none;
}
.map-layer-menu-row:hover { background: var(--surface2); color: var(--ink); }
.map-layer-menu-row .map-layer-name { flex: 1; }
.map-layer-menu-row::after { content: ""; width: 16px; height: 16px; flex: none; border-radius: 5px; border: 1.5px solid var(--line); }
.map-layer-menu-row:has(.map-layer-chip-input:checked) { color: var(--ink); background: color-mix(in srgb, var(--layer) 12%, var(--surface)); }
.map-layer-menu-row:has(.map-layer-chip-input:checked)::after {
  border-color: var(--layer); background: var(--layer) no-repeat center / 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
}
.lake-wind-notice { background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: var(--t-sm); box-shadow: var(--shadow); }
.lake-wind-notice[hidden] { display: none; }

/* ── Beta window (core/beta.js) ── */
.modal-card.beta-card { max-width: 600px; gap: 12px; }
.beta-card .auth-title { padding-right: 30px; }
.beta-tabs { position: static; margin: 0; box-shadow: none; }
.beta-body { display: flex; flex-direction: column; gap: 12px; }
.beta-form { display: flex; flex-direction: column; gap: 12px; }
.beta-form textarea { padding: 10px 12px; resize: vertical; min-height: 120px; font: inherit; }
.beta-lead { margin: 0; font-size: var(--t-md); color: var(--muted); line-height: 1.5; }
.beta-poll-toggle { display: flex; align-items: center; gap: 8px; font-size: var(--t-md); cursor: pointer; }
.beta-poll-title[hidden] { display: none; }
.beta-context { font-size: var(--t-sm); color: var(--muted); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--surface); }
.beta-context summary { cursor: pointer; font-weight: 600; }
.beta-context ul { margin: 8px 0; padding-left: 18px; line-height: 1.6; }
.beta-context pre { max-height: 200px; overflow: auto; margin: 8px 0; padding: 8px; font-size: 11px; background: var(--surface2); border-radius: 8px; white-space: pre-wrap; word-break: break-word; }
.beta-context .hint { margin: 0; }
.beta-thanks { text-align: center; padding: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.beta-thanks p { margin: 0; }
.beta-thanks-icon { font-size: 40px; }
.beta-thanks .friend-profile-actions { justify-content: center; }
.beta-poll { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.beta-poll-text { flex: 1 1 auto; min-width: 0; }
.beta-poll-text .hint { font-size: var(--t-sm); color: var(--faint); margin-top: 2px; }
.beta-poll-votes { display: flex; gap: 6px; flex: 0 0 auto; }
.beta-vote { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.beta-vote.is-on { background: var(--primary-soft); border-color: var(--primary); color: var(--good-ink); }
.beta-subhead { margin: 8px 0 0; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .03em; color: var(--faint); }
.beta-mine { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.beta-mine-head { font-size: var(--t-sm); }
.beta-mine-text { margin-top: 6px; font-size: var(--t-md); white-space: pre-wrap; }
.beta-note { margin-top: 6px; font-size: var(--t-sm); color: var(--good-ink); }
@media (max-width: 520px) {
  .beta-poll { flex-direction: column; }
}

/* "Nyt" — Beta window tab and /nyt (nyt.php) */
.news-page { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.news-intro { margin: 0; color: var(--muted); font-size: var(--t-md); }
.news-item { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.news-item + .news-item { margin-top: 10px; }
.news-page .news-item + .news-item { margin-top: 0; }
.news-date { font-size: var(--t-xs); color: var(--faint); text-transform: uppercase; letter-spacing: .03em; }
.news-title { margin: 2px 0 0; font-size: var(--t-base); font-weight: 650; }
.news-body { font-size: var(--t-md); line-height: 1.5; }
.news-body p { margin: 6px 0 0; }
.news-link { display: inline-block; margin-top: 8px; font-size: var(--t-md); font-weight: 600; color: var(--primary); text-decoration: none; }
.news-link:hover { text-decoration: underline; }
.settings-link-row { color: inherit; text-decoration: none; }
.settings-link-row:hover { background: var(--surface2); }
.admin-news-form { flex-direction: column; align-items: stretch; gap: 10px; }
.admin-news-form .trip-field-label { display: flex; flex-direction: column; gap: 4px; }
.admin-news-form [hidden] { display: none; }

/* ── Admin → Feedback ── */
.admin-report { padding: 14px 20px; border-bottom: 1px solid var(--line); border-left: 4px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.admin-report.status-new { border-left-color: var(--sun); background: var(--cau-bg); }
.admin-report.status-planned { border-left-color: var(--primary); }
.admin-report.status-done { border-left-color: var(--leaf); opacity: .8; }
.admin-report.status-wontfix { opacity: .6; }
.admin-report-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.admin-report-kind { font-weight: 700; }
.admin-report-head .hint { flex: 1 1 200px; font-size: var(--t-sm); color: var(--faint); }
.admin-report-status { flex: 0 0 auto; width: auto; }
.admin-report-message { white-space: pre-wrap; font-size: var(--t-base); line-height: 1.5; }
.admin-report-note { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); color: var(--muted); }
.admin-report-context summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--primary); }
.admin-report-context h4 { margin: 12px 0 4px; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .03em; color: var(--faint); }
.admin-trail { margin: 8px 0; padding-left: 0; list-style: none; font-size: var(--t-sm); display: flex; flex-direction: column; gap: 3px; }
.admin-trail-time { display: inline-block; width: 64px; font-family: 'IBM Plex Mono', monospace; color: var(--faint); }
.admin-trail-bad { color: var(--rough-ink); }
.admin-kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; font-size: var(--t-sm); }
.admin-kv dt { color: var(--faint); }
.admin-kv dd { margin: 0; overflow-wrap: anywhere; }
.admin-report-note .place-input { flex: none; }

/* ── "Dybde (hav)" on the maps (core/depthLayer.js) ── */
.depth-box { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow); max-width: 260px; font-size: var(--t-sm); }
.depth-scale { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--faint); }
.depth-ramp { flex: 1 1 auto; height: 8px; min-width: 80px; border-radius: 999px; background: linear-gradient(90deg, #dcecf8, #9cc6e6, #5b9fd0, #2f6fa6, #173f66); }
.depth-readout { margin-top: 6px; font-weight: 600; }
.depth-note { margin-top: 4px; font-size: var(--t-xs); color: var(--faint); line-height: 1.35; }
/* Depth numbers (soundings) — dark on the water, with a light halo so they
   read on every shade of blue; never catch clicks (tap-for-depth still works). */
.depth-labels-tile { pointer-events: none; }
.depth-label {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 1px 2px rgba(11, 34, 57, .25);
  font: 600 11px/1.1 'IBM Plex Mono', monospace;
  color: #0b2d4f;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Dybdekort for søer (admin: dybdekort.php) ── */
.lakedepth { max-width: none; }
.lakedepth-pick { align-items: flex-end; }
/* Overview: one row per chart, filtered */
/* Pinned to the top while working below; fold it to just its summary line. */
.lakedepth-overview-wrap { position: sticky; top: 0; z-index: 1100; }
.lakedepth-overview #lakedepth-filters { flex-wrap: nowrap; overflow-x: auto; min-width: 0; flex: 1 1 auto; }
/* The filter row scrolls on its own; the card around it never does (it used to slide sideways when the row was wider). */
.lakedepth-overview { overflow: hidden; }
.lakedepth-overview > .settings-row { min-width: 0; }
.lakedepth-nochart-intro { padding: 8px 20px; font-size: var(--t-sm); }
.lakedepth-overview #lakedepth-filters .seg-button { flex: 0 0 auto; }
.lakedepth-table { max-height: 26vh; overflow-y: auto; }
.lakedepth-trow, .lakedepth-thead { display: grid; grid-template-columns: minmax(0, 1fr) 72px 96px 132px; gap: 12px; align-items: center; width: 100%; padding: 9px 20px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; font-size: var(--t-md); text-align: left; cursor: pointer; }
.lakedepth-trow:hover { background: var(--surface2); }
.lakedepth-trow.is-open { background: var(--primary-soft); }
.lakedepth-tname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lakedepth-tname .hint { font-weight: 400; }
/* Several editions of one lake: a fold toggle in the lead row, the rest indented under it. */
.lakedepth-editions { margin-left: 8px; padding: 1px 7px; border-radius: 6px; background: var(--surface2); color: var(--muted); font-size: var(--t-xs); font-weight: 600; cursor: pointer; }
.lakedepth-editions:hover { color: var(--ink); }
.lakedepth-trow.is-edition { padding-left: 40px; background: var(--surface2); font-size: var(--t-sm); }
.lakedepth-trow.is-edition:hover { background: var(--line); }
.lakedepth-tcount { font-size: var(--t-sm); color: var(--muted); white-space: nowrap; }
.lakedepth-tmax { font-size: var(--t-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lakedepth-tstatus { text-align: right; }
/* Header row: sticks to the top of the scrolling table; the cells are sort buttons. */
.lakedepth-thead { position: sticky; top: 0; z-index: 1; gap: 12px; align-items: center; padding: 6px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.lakedepth-thead button { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--t-sm); font-weight: 600; text-align: left; cursor: pointer; white-space: nowrap; }
.lakedepth-thead button:hover, .lakedepth-thead button[aria-pressed="true"] { color: var(--ink); }
.lakedepth-thead button.lakedepth-tstatus { text-align: right; }
@media (max-width: 520px) {
  .lakedepth-trow, .lakedepth-thead { grid-template-columns: minmax(0, 1fr) 84px 118px; padding: 9px 16px; }
  .lakedepth-tcount { display: none; }
}
.lakedepth-steps { gap: 16px; align-items: center; }
/* A lake with no chart: nothing to place, nothing to read — just click depths in. */
.lakedepth-work.is-manual [data-mode], .lakedepth-work.is-manual .lakedepth-opacity, .lakedepth-work.is-manual #lakedepth-read { display: none; }
.lakedepth-opacity, .lakedepth-publish { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--muted); }
.lakedepth-publish { font-weight: 600; color: var(--ink); }
.lakedepth-delete { margin-left: auto; color: #c62828; }
.lakedepth-map { height: 62vh; min-height: 360px; border-top: 1px solid var(--line); }
.lakedepth-map.is-entering { cursor: crosshair; }
.lakedepth-map.is-entering .leaflet-interactive { cursor: crosshair; }
.lakedepth-handle { background: none; border: none; }
.lakedepth-handle span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 17px; box-shadow: 0 2px 6px rgba(0,0,0,.35); cursor: grab; }
.lakedepth-handle.is-turn span { background: #d62828; }
.lakedepth-point, .lake-depth-point { background: none; border: none; }
.lakedepth-point .depth-label { cursor: pointer; pointer-events: auto; }
/* Read by the machine, not checked yet. */
.lakedepth-point.is-auto .depth-label { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f08c00; }
/* Stands out from its neighbours (core/depthOutliers.js): red, over any band. */
.lakedepth-point.is-suspect .depth-label { background: #c62828; color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c62828; z-index: 1; }
.lakedepth-suspect, .lakedepth-suspect-note { color: #c62828; font-weight: 600; }
.lakedepth-suspect-note { font-size: var(--t-sm); max-width: 220px; }
.depth-suspect-chip { display: inline-block; padding: 1px 6px; border-radius: 6px; background: #c62828; color: #fff; font-size: var(--t-xs); font-weight: 700; }
.lakedepth-unchecked { color: #b35c00; font-weight: 600; }
.lakedepth-editor { display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
.lakedepth-editor label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); }
.lakedepth-editor input { font-size: 18px; font-weight: 600; padding: 4px 8px; width: 110px; }
.lakedepth-editor-actions { display: flex; gap: 6px; justify-content: flex-end; }
/* Lake depths on the public map: a hint of green-blue so they read as "lake". */
.depth-label.is-lake { background: rgba(232, 246, 240, .9); color: #0f4a3a; }
/* Lake depth bands (core/depthBands.js): the chart convention — light blue
   in the shallows, darker with depth. Dark text on the two light bands,
   white on the two dark ones. Same colours in dark mode: they sit on the
   map, which doesn't change. */
.depth-b1 { --depth-bg: #d6eef8; --depth-ink: #0b2d4f; }
.depth-b2 { --depth-bg: #8fcbe8; --depth-ink: #0b2d4f; }
.depth-b3 { --depth-bg: #3f8fc4; --depth-ink: #fff; }
.depth-b4 { --depth-bg: #1b4f8a; --depth-ink: #fff; }
.depth-label[class*="depth-b"] { background: var(--depth-bg); color: var(--depth-ink); }
.depth-chip { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--depth-bg); color: var(--depth-ink); font-weight: 600; }
.depth-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--t-xs); color: var(--muted); }
.depth-legend-title { font-weight: 600; color: var(--ink); }
.depth-legend-item { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.depth-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--depth-bg); box-shadow: inset 0 0 0 1px rgba(11, 45, 79, .2); }
.depth-legend-box { padding: 6px 10px; border-radius: 10px; background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.lake-map + .depth-legend { margin-top: 8px; }

/* Admin → Feedback → Nyt: drafts stand out, preview as users see it */
.admin-news-item.is-draft > .settings-row { background: var(--surface2); }
.admin-news-preview { padding: 0 20px 14px; border-bottom: 1px solid var(--line); }
.admin-news-preview[hidden] { display: none; }
.crew-status.status-draft { background: var(--cau-bg); color: var(--cau-ink); font-weight: 600; }

/* ── Fredningsbælter (core/protectedZones.js): the map popup's status
   pill and the forecast's warning box. Colours are the site's own
   severity pairs: rough = closed, good = open, caution = special rules. */
.zone-status { display: inline-block; padding: 1px 8px; border-radius: 999px; font-weight: 600; font-size: var(--t-xs); }
.zone-status.is-closed { background: var(--rough-bg); color: var(--rough-ink); }
.zone-status.is-open { background: var(--good-bg); color: var(--good-ink); }
.zone-status.is-special { background: var(--cau-bg); color: var(--cau-ink); }
.zone-popup .map-place-popup-name { display: flex; align-items: center; gap: 6px; }
.zone-popup .zone-source { color: var(--faint); font-size: var(--t-xs); }
.zone-warning {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--cau-bg);
  color: var(--cau-ink);
  font-size: var(--t-sm);
}
.zone-warning.is-closed { background: var(--rough-bg); color: var(--rough-ink); }
.zone-warning-icon { flex: none; padding-top: 1px; }
.zone-warning-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zone-warning-row { font-weight: 600; }
.zone-warning-row .zone-status { margin-left: 4px; background: var(--surface); }
.zone-warning-links { font-size: var(--t-xs); }
.zone-warning-links a { color: inherit; text-decoration: underline; }

/* ── Content pages: /arter, /fredningsbaelter (server-rendered, read by
   search engines) and the forecast's intro below the widgets. One
   readable column; the app's own tokens. ── */
.content-page { max-width: 720px; font-size: var(--t-base); line-height: 1.55; color: var(--ink); }
.content-page h2 { margin: 28px 0 10px; font-family: 'Archivo', sans-serif; font-size: var(--t-lg); }
.content-page h3 { margin: 18px 0 6px; font-size: var(--t-base); font-weight: 650; color: var(--muted); }
.content-page p { margin: 0 0 12px; }
.content-page a { color: var(--primary); }
.content-lead { font-size: var(--t-lg); line-height: 1.45; }
.crumbs { margin-bottom: 10px; font-size: var(--t-sm); color: var(--muted); }
.crumbs a { color: inherit; }
.content-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.content-page .seg-button.is-link { color: var(--ink); text-decoration: none; }
.content-cta { display: inline-block; }

.fact-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0 0 16px; }
.fact-list > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fact-list dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fact-list dd { margin: 2px 0 0; font-weight: 600; }

/* Season, month by month: a bar per month, this month outlined. */
.season-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; margin: 8px 0 6px; }
.season-bar { height: 72px; display: flex; align-items: flex-end; border-radius: 6px; background: var(--surface2); overflow: hidden; }
.season-bar span { display: block; width: 100%; background: var(--primary); opacity: .8; border-radius: 6px 6px 0 0; }
.season-col.is-now .season-bar { outline: 2px solid var(--sun); outline-offset: 1px; }
.season-month { margin-top: 4px; text-align: center; font-size: var(--t-xs); color: var(--muted); }

.rules-table { width: 100%; border-collapse: collapse; margin: 0 0 10px; font-size: var(--t-md); }
.rules-table th, .rules-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rules-table thead th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.rules-note { padding: 10px 12px; border-radius: 12px; background: var(--cau-bg); color: var(--cau-ink); font-size: var(--t-md); }

.link-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.link-chips a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: var(--t-md); }
.link-chips a:hover { border-color: var(--primary); }

.species-list, .zone-list { margin: 0 0 6px; padding: 0; list-style: none; }
.species-list li, .zone-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
/* The search filters (fredningsbaelter.js, soer.js) hide rows with [hidden] — the display above would beat it. */
.species-list li[hidden], .zone-list li[hidden] { display: none; }
.species-list a, .zone-list a { font-weight: 600; text-decoration: none; }
.zone-list .zone-status { margin-left: auto; }
.zone-letter { margin: 14px 0 2px; }
.zone-filter { width: 100%; max-width: 420px; margin: 0 0 8px; }
.zone-map { height: 300px; margin: 6px 0 16px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.zone-legend { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-md); }
.zone-swatch { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 4px; background: var(--c); opacity: .85; }

.site-intro { max-width: 720px; margin: 28px 0 8px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-md); line-height: 1.55; }
.site-intro h1 { margin: 0 0 6px; font-family: 'Archivo', sans-serif; font-size: var(--t-lg); color: var(--ink); }
.site-intro p { margin: 0 0 12px; }
/* On the front page it's a quiet footer: small, muted, plain links. */
.site-intro.is-quiet { margin-top: 40px; padding-top: 14px; font-size: var(--t-xs); color: var(--faint); line-height: 1.5; }
.site-intro.is-quiet h1 { margin-bottom: 4px; font-family: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--muted); }
.site-intro.is-quiet p { margin-bottom: 8px; }
.site-intro.is-quiet .link-chips { gap: 4px 0; }
.site-intro.is-quiet .link-chips li + li::before { content: '·'; margin: 0 8px; color: var(--faint); }
.site-intro.is-quiet .link-chips a { padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-intro.is-quiet .link-chips a:hover { color: var(--primary); }

/* ── Skånsom genudsætning: a tip at the foot of "Vejret nu" (index.php, includes/release_tips.php) ── */

/* margin-top: auto parks it at the bottom of the card when the card is
   stretched to the fishing card's height beside it. */
.release-box { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--line); }
.widget-board[data-release="off"] .release-box { display: none; }
.release-head { font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.release-tip { display: flex; align-items: flex-start; gap: 12px; }
.release-tip p { margin: 0; color: var(--ink); line-height: 1.5; }
.release-icon {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: var(--primary-soft); color: var(--primary);
}
.release-more summary {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; list-style: none;
  font-size: var(--t-sm); font-weight: 500; color: var(--primary);
}
.release-more summary::-webkit-details-marker { display: none; }
.release-more summary .section-details-chevron { color: inherit; }
.release-more[open] summary .section-details-chevron { transform: rotate(180deg); }
.release-more h3 { margin: 14px 0 6px; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.release-more ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
.release-more .widget-note { margin-top: 12px; }
.release-more .widget-note a { color: var(--primary); }

/* "Regler i dag" in map popups (core/spotRules.js) — same look as the
   fishing card's species rules. */
.spot-rules { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 3px; font-size: var(--t-xs); line-height: 1.4; color: var(--ink); }
.spot-rules-title { font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: 0.68rem; }
.spot-rule-name { font-weight: 600; }
.spot-rule-name a { color: inherit; }
.spot-rule.is-warning { color: var(--cau-ink); }
.spot-rule.is-faint { color: var(--faint); }
.spot-rules-zones:empty { display: none; }

/* Lake pages (soer.php, pages/soer.js). */
.lake-today { margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lake-today-title { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.lake-days-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lake-day { text-align: center; padding: 8px 4px; border-radius: 10px; background: var(--primary-soft); }
.lake-day-name { font-size: var(--t-xs); color: var(--muted); font-weight: 600; }
.lake-day-score { font-family: 'Archivo', sans-serif; font-size: 1.6rem; font-weight: 650; line-height: 1.1; color: var(--ink); }
.lake-day-tier, .lake-day-window { font-size: var(--t-xs); color: var(--muted); }
.lake-day-window { font-family: 'IBM Plex Mono', monospace; }
.lake-day.is-unsafe { opacity: .6; }
.lake-day-species { margin-top: 6px; }
.lake-today-link { display: inline-block; margin-top: 10px; font-size: var(--t-sm); }
.lake-map { height: 280px; }
.lake-depth-num { background: none; border: none; }
.lake-depth-badge { font-size: var(--t-xs); color: var(--primary); font-weight: 600; }
.rules-table tr.is-closed-now th, .rules-table tr.is-closed-now td { background: var(--cau-bg); }
.rule-now { font-size: var(--t-xs); font-weight: 650; color: var(--cau-ink); }
.zone-warning-inline { font-size: var(--t-sm); color: var(--cau-ink); }

/* Front page, first visit without an account (index.php #first-visit). */
.first-visit { margin: 0 0 16px; padding: 18px 18px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.first-visit-title { margin: 0 0 6px; font-family: 'Archivo', sans-serif; font-size: var(--t-lg); }
.first-visit-lead { margin: 0 0 14px; color: var(--muted); line-height: 1.5; }
.first-visit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.first-visit-actions a.seg-button { text-decoration: none; color: var(--ink); }
.first-visit-actions .seg-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; }
.first-visit .seg-button.is-primary { background: var(--primary); color: var(--surface); border-color: var(--primary); font-weight: 600; }
.first-visit-search .place-input { width: 100%; }

/* Only where there's no sidebar (phones): the reference links in
   Indstillinger ("Mere") and the avatar menu. */
.is-mobile-only { display: none; }
@media (max-width: 859px) {
  .settings-group.is-mobile-only, .header-loc-menu-item.is-mobile-only { display: block; }
}
.settings-link-row { text-decoration: none; color: inherit; align-items: center; }
.settings-link-arrow { margin-left: auto; color: var(--faint); font-size: 1.4rem; line-height: 1; }
.map-popup-nudge { margin-top: 6px; }

/* Indstillinger → Fiskeri → "Hvad betyder mest for dig?" */
.weight-row { align-items: center; }
.weight-control { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.weight-control input[type=range] { width: 140px; accent-color: var(--primary); }
.weight-value { min-width: 5.5em; font-size: var(--t-sm); color: var(--muted); text-align: right; }
@media (max-width: 520px) {
  .weight-row { flex-wrap: wrap; }
  .weight-control { width: 100%; margin-left: 0; }
  .weight-control input[type=range] { flex: 1; width: auto; }
}
.score-custom-tag { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: .72em; font-weight: 600; text-transform: none; letter-spacing: 0; text-decoration: none; vertical-align: 1px; }

/* Indstillinger → Notifikationer → Sæsonbeskeder: the species chips. */
.season-species-row { flex-wrap: wrap; }
.season-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.season-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--ink); font-size: var(--t-sm); }
.season-chip button { border: 0; background: none; color: var(--muted); font-size: 1rem; line-height: 1; padding: 2px 6px; cursor: pointer; border-radius: 999px; }
.season-chip button:hover { background: var(--line); color: var(--ink); }
.season-species-controls { flex-wrap: wrap; }
.species-rule-nudge { margin-top: 4px; }
.species-rule-nudge a { color: var(--primary); }

/* /soer list: search + "only lakes with depths" (pages/soer.js). */
.lake-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.lake-filters .zone-filter { flex: 1 1 220px; margin: 0; }
.lake-depth-toggle[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--surface); }