/* ── 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); }
.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;
}

.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 { height: 34px; display: flex; align-items: flex-end; justify-content: center; }
.hour-wave-bar { width: 70%; border-radius: 3px 3px 0 0; background: var(--primary); }
.hour-wave-label { font-family: 'IBM Plex Mono', monospace; font-size: var(--t-xs); color: var(--faint); }

/* ── 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);
}
.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;
}

.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. */
.map-overlay-toggle {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  padding: 4px 0;
}
.map-overlay-toggle-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.map-overlay-toggle-row:hover { color: var(--ink); }
.map-overlay-toggle-checkbox { margin: 0; accent-color: var(--primary); cursor: pointer; }

/* Icon-glyph overlay markers (lakes/shelters/campsites) — 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;
}
.map-type-btn::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--type-color);
  flex: 0 0 auto;
}
.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 havne / 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 (havne.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 (havne.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; }
.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); }

.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 ── */
.map-overlay-toggle-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  margin-top: 4px;
  padding: 7px 12px;
  border: none;
  border-top: 1px solid var(--line);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.map-overlay-swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.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; }
.map-overlay-toggle-row.is-indented { padding-left: 26px; font-size: var(--t-xs); }
.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; }
.map-overlay-toggle { padding: 0; }
.map-overlay-toggle-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 36px; padding: 0 12px; border: none; background: none; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink); cursor: pointer; }
.map-overlay-toggle-head[aria-expanded="true"] { border-bottom: 1px solid var(--line); }
.map-overlay-toggle-chevron { color: var(--faint); }
.map-overlay-toggle-body { padding: 4px 0; max-height: 60vh; overflow-y: auto; }
.map-overlay-toggle-body[hidden] { display: none; }
.map-overlay-toggle-heading:hover { color: var(--ink); }
.map-overlay-group-body[hidden] { display: none; }
.map-overlay-group-count { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 4px; padding: 0 4px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 10px; letter-spacing: 0; }

/* ── 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; }
}

/* ── 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; }