:root {
  --bg: #f8fbff;
  --text: #4b5563;
  --strong: #1f2937;
  --muted: #6b7684;
  --line: #e7eaee;
  --card-bg: #ffffff;
  --card-shadow: 0 2px 10px rgba(20, 25, 35, 0.06);
  --surface: #f3f5f8;
  --accent: #2b6cb0;

  --green: #16a34a;
  --green-bg: #cdeed9;
  --green-text: #0b6630;

  --yellow: #e0a100;
  --yellow-bg: #fbe3a0;
  --yellow-text: #7d5300;

  --red: #dc3b2e;
  --red-bg: #f8d2cd;
  --red-text: #9e231a;

  --grey: #b8c0cc;
  --grey-bg: #eef1f4;
  --grey-text: #6b7684;
}

:root[data-theme="dark"] {
  /* Lysere mørk tilstand: skifergrå i stedet for næsten sort */
  --bg: #262b33;
  --text: #d3d9e0;
  --strong: #f1f4f7;
  --muted: #a0a9b4;
  --line: #3d444f;
  --card-bg: #2f3540;
  --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  --surface: #38404b;
  --accent: #7ab4f0;

  --green: #3ccf7f;
  --green-bg: rgba(46, 204, 113, 0.32);
  --green-text: #8ff0b8;

  --yellow: #f0bb3c;
  --yellow-bg: rgba(240, 187, 60, 0.32);
  --yellow-text: #ffdb85;

  --red: #f0675b;
  --red-bg: rgba(240, 103, 91, 0.32);
  --red-text: #ffb4ab;

  --grey: #7c8693;
  --grey-bg: rgba(255, 255, 255, 0.08);
  --grey-text: #b6bfc9;
}

html[data-theme="dark"] { background: #262b33; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  padding-bottom: 48px;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  gap: 16px;
}

button { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header ----------
   Billedet med logoet går fra kant til kant og glider over i baggrunden.
   Oversigten lægger sig op over den nederste del af billedet */

.hero {
  position: relative;
  height: clamp(300px, 42vw, 560px);
  background: #2a2a2a url("borup.jpg") center 38% / cover;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 14, 20, 0.35) 0%, rgba(10, 14, 20, 0) 22%),
    linear-gradient(0deg, var(--bg) 0%, rgba(0, 0, 0, 0) 28%);
  pointer-events: none;
}

.hero-top {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* Glas-effekt til opdateringstid og temaknap */
.hero-meta,
.theme-switch {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  border-radius: 999px;
}






.theme-switch { display: flex; padding: 2px; flex: none; }

.theme-switch button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
}

.theme-switch button[aria-pressed="true"] {
  background: #fff;
  color: #1f2937;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sw-dot { width: 6px; height: 6px; border-radius: 50%; display: none; }
.theme-switch button[aria-pressed="true"] .sw-dot { display: inline-block; }
.sw-sun  { background: #f6b73c; }
.sw-moon { background: #6a7bd8; }

/* ---------- Tavle med oversigten ---------- */

.board {
  position: relative;
  z-index: 3;
  margin-top: -72px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(20, 25, 35, 0.12);
  overflow: hidden;
}

:root[data-theme="dark"] .board { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); }

.board-head { padding: 22px 28px 14px; }
.board-head .toolbar { margin-bottom: 0; }




.board-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
  padding: 14px 28px;
  font-size: 0.75rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* Farveforklaring som små rolige mærkater */
.board-foot .legend { gap: 6px; font-size: 0.75rem; }

.board-foot .legend span {
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  color: var(--text);
}

.board-foot .legend .dot { width: 8px; height: 8px; }

/* Opdateringstid øverst til venstre i billedet */
.hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  min-width: 0;
}

.meta-lead-short { display: none; }

@media (max-width: 360px) {
  .meta-lead { display: none; }
  .meta-lead-short { display: inline; }
}

.hero-meta svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}


/* Landekode som lille rund mærkat */
.cc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 800;
  margin-right: 10px;
  vertical-align: middle;
  flex: none;
  background: var(--grey-bg);
  color: var(--grey-text);
}

.cc-DK { background: rgba(200, 16, 46, 0.12); color: #c8102e; }
.cc-SE { background: rgba(0, 106, 167, 0.12); color: #006aa7; }
:root[data-theme="dark"] .cc-DK { background: rgba(240, 90, 110, 0.2); color: #ff8a9b; }
:root[data-theme="dark"] .cc-SE { background: rgba(80, 160, 230, 0.2); color: #8cc8ff; }

.country-tag {
  font-size: 0.7rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* Kort til mobil. Skjult på bred skærm */
.site-list { display: none; }

.site-card { padding: 16px 20px; border-top: 1px solid var(--line); }
.site-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.site-card .site-meta { padding-left: 36px; }

.mini-days { display: grid; grid-template-columns: repeat(var(--days, 5), 1fr); gap: 6px; }
.mini-day { display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: center; }
.mini-label { font-size: 0.65rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mini-day .cell { min-width: 0; padding: 8px 2px; }

/* ---------- Værktøjslinje ---------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

/* Segmentknap: Alle eller kun flyvbare */
.segment {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.segment button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.segment button[aria-pressed="true"] {
  background: var(--card-bg);
  color: var(--strong);
  box-shadow: 0 1px 4px rgba(20, 25, 35, 0.12);
}

.segment .count {
  min-width: 15px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.56rem;
  background: var(--grey-bg);
  color: var(--grey-text);
}

.segment button[data-show="fly"] .count { background: var(--green-bg); color: var(--green-text); }

.chip {
  border: 1px solid var(--line);
  background: var(--card-bg);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}

.chip:hover { border-color: var(--muted); }

.chip[aria-pressed="true"] {
  background: var(--strong);
  color: var(--bg);
  border-color: var(--strong);
}

.toolbar .spacer { flex: 1; }

.legend {
  display: flex;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.legend span { display: inline-flex; align-items: center; gap: 5px; }

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

.bg-green  { background: var(--green); }
.bg-yellow { background: var(--yellow); }
.bg-red    { background: var(--red); }
.bg-grey   { background: var(--grey); }

/* ---------- Layout ---------- */

/* Oversigt øverst og detaljer under. Virker ens med 3 eller 30 lokationer */


.panel {
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--line);
}

/* ---------- Oversigt ---------- */

.matrix-wrap { overflow-x: auto; }

.matrix { width: 100%; border-collapse: separate; border-spacing: 0; }

.matrix th,
.matrix td { padding: 6px; text-align: center; }

.matrix thead th {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 8px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.matrix thead th.site { font-size: 0.68rem; }

.matrix tbody td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.matrix tbody tr:last-child td { border-bottom: 0; }
.matrix td + td, .matrix th + th { border-left: 1px solid var(--line); }
.matrix tbody tr:hover td { background: var(--surface); }
.matrix tbody tr:hover td .cell { filter: saturate(1.15); }

.matrix thead th small {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--strong);
  text-transform: none;
  letter-spacing: 0;
}

.matrix thead th.today { color: var(--accent); }

.matrix .site { text-align: left; padding-left: 28px; white-space: nowrap; min-width: 230px; }

.site-name { font-weight: 600; color: var(--strong); font-size: 0.95rem; display: flex; align-items: center; }
.site-meta { font-size: 0.75rem; color: var(--muted); padding-left: 36px; }

.group-row td {
  text-align: left;
  padding: 14px 16px 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-top: 1px solid var(--line);
}

.flag {
  display: inline-block;
  width: 18px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 6px;
  border-radius: 2px;
  overflow: hidden;
}

.flag svg { width: 100%; height: 100%; display: block; }

.cell {
  width: 100%;
  min-width: 72px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 4px;
  transition: transform 0.12s, box-shadow 0.12s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 0.78rem;
  line-height: 1.25;
}

.cell b { font-size: 0.8rem; }

/* Pulserende ring og lille boble første gang siden åbnes */
.cell { position: relative; }

.cell.hint-pulse { animation: tap-pulse 1.1s ease-out 2; }

.cell.hint-pulse::after {
  content: "Tryk for detaljer";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--strong);
  color: var(--bg);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  animation: tap-bubble 2.4s ease-out forwards;
}

@keyframes tap-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(43, 108, 176, 0.55); transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { box-shadow: 0 0 0 14px rgba(43, 108, 176, 0); transform: scale(1); }
}

@keyframes tap-bubble {
  0%   { opacity: 0; transform: translate(-50%, 4px); }
  15%  { opacity: 1; transform: translate(-50%, 0); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cell.hint-pulse { animation: none; }
}
.cell .sub { font-size: 0.7rem; opacity: 0.85; }
.cell .short { display: none; }

.cell.st-green  { background: var(--green-bg);  color: var(--green-text); }
.cell.st-yellow { background: var(--yellow-bg); color: var(--yellow-text); }
.cell.st-red    { background: var(--red-bg);    color: var(--red-text); }
.cell.st-grey   { background: var(--grey-bg);   color: var(--grey-text); }

.cell:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20, 25, 35, 0.1); }
.cell.st-green  { border-color: rgba(26, 156, 74, 0.25); }
.cell.st-yellow { border-color: rgba(217, 154, 0, 0.3); }
.cell.st-red    { border-color: rgba(217, 54, 43, 0.25); }
.cell.st-grey   { border-color: var(--line); }
.cell.selected { outline: 2px solid var(--strong); outline-offset: 1px; }
.cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.matrix-foot { font-size: 0.75rem; color: var(--muted); padding: 6px 16px 14px; }

.empty { color: var(--muted); font-size: 0.9rem; padding: 20px 0; text-align: center; }

/* ---------- Detaljer ---------- */

.detail {
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.6fr) auto;
  gap: 24px;
  align-items: start;
  scroll-margin: 16px;
}

.detail > .empty { grid-column: 1 / -1; }
.detail .windows { margin-top: 0; }

/* Kompasset står lodret i sin egen kolonne på bred skærm */
.detail .compass-row {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  padding-left: 24px;
  border-left: 1px solid var(--line);
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 1100px) and (min-width: 901px) {
  .detail { grid-template-columns: minmax(200px, 1fr) minmax(0, 1.6fr); }
  .detail .compass-row {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    padding-left: 0;
    border-left: 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
}

.detail-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.detail h2 { font-size: 1.2rem; color: var(--strong); line-height: 1.2; }
.detail .date { font-size: 0.85rem; color: var(--muted); }

.pill {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pill.st-green  { background: var(--green-bg);  color: var(--green-text); }
.pill.st-yellow { background: var(--yellow-bg); color: var(--yellow-text); }
.pill.st-red    { background: var(--red-bg);    color: var(--red-text); }
.pill.st-grey   { background: var(--grey-bg);   color: var(--grey-text); }

.best { font-size: 0.9rem; margin-top: 6px; color: var(--strong); }

.reason { font-size: 0.85rem; margin-top: 8px; }
.reason small { display: block; color: var(--muted); }

.windows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }

.win {
  background: var(--surface);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  border-top: 4px solid var(--grey);
}

.win.st-green  { border-top-color: var(--green); }
.win.st-yellow { border-top-color: var(--yellow); }
.win.st-red    { border-top-color: var(--red); }

.win .t   { font-size: 0.72rem; color: var(--muted); }
.win .w   { font-size: 1.15rem; font-weight: 700; color: var(--strong); }
.win .g   { font-size: 0.72rem; color: var(--muted); }
.win .d   { font-size: 0.8rem; margin-top: 4px; display: flex; justify-content: center; align-items: center; gap: 4px; }
.win .wx  { font-size: 0.75rem; margin-top: 2px; display: flex; justify-content: center; align-items: center; gap: 3px; }
.win .wx svg { width: 18px; height: 18px; }
.win .why { font-size: 0.7rem; margin-top: 6px; color: var(--muted); line-height: 1.3; }

.arrow { display: inline-block; font-weight: 700; }

.compass-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.compass-row svg { flex: none; }
.compass-txt { font-size: 0.8rem; }
.compass-txt li { list-style: none; display: flex; gap: 6px; align-items: center; }
.compass-txt .hint { color: var(--muted); margin-top: 4px; }

.links { margin-top: 14px; font-size: 0.85rem; }
.links a { color: var(--accent); text-decoration: none; font-weight: 600; }
.links a:hover { text-decoration: underline; }
.links .sep { color: var(--muted); margin: 0 4px; }

.close {
  display: none;
  border: 0;
  background: var(--surface);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  flex: none;
}

.scrim { display: none; }

/* ---------- Sådan vurderes det ---------- */

details.rules { padding: 14px 20px; }
details.rules summary { cursor: pointer; font-weight: 600; color: var(--strong); }

.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 12px;
  font-size: 0.85rem;
}

.rules-grid h3 { font-size: 0.85rem; color: var(--strong); margin-bottom: 4px; }
.rules-grid li { list-style: none; }

.rules-sub { font-size: 0.9rem; color: var(--strong); margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.rules-lead { font-size: 0.85rem; margin-top: 4px; }
.rules-lead a, .site-links a { color: var(--accent); font-weight: 600; text-decoration: none; }

.site-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.site-info-item {
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.83rem;
}

.site-info-item .site-name { margin-bottom: 6px; }
.site-info-item ul { list-style: none; }
.site-info-item li { display: flex; align-items: center; gap: 6px; }
.site-info-item p { margin-top: 6px; }

.suggest {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  font-size: 0.85rem;
}

.suggest h3 { font-size: 0.9rem; color: var(--strong); margin-bottom: 4px; }
.suggest p + p { margin-top: 6px; }
.suggest a { color: var(--accent); font-weight: 600; text-decoration: none; }
.suggest a:hover { text-decoration: underline; }

.note {
  font-size: 0.85rem;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.note p + p { margin-top: 8px; }
.note-strong { font-weight: 700; color: var(--strong); }

.updated { text-align: center; font-size: 0.78rem; color: var(--muted); margin-top: 20px; }

.page-footer { text-align: center; color: var(--muted); font-size: 0.78rem; margin-top: 8px; }
.page-footer a { color: inherit; }

/* ---------- Mobil ---------- */

@media (max-width: 900px) {

  .detail { display: block; padding: 18px; }
  .detail .windows { margin-top: 14px; }
  .detail .compass-row {
    flex-direction: row;
    align-items: center;
    margin-top: 16px;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  /* Detaljer glider op som et bundark */
  .detail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: 85vh;
    overflow: auto;
    border-radius: 18px 18px 0 0;
    transform: translateY(105%);
    transition: transform 0.25s;
    z-index: 20;
  }

  .detail.open { transform: none; }
  .close { display: block; }

  .scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 15; }
  .scrim.open { display: block; }

  .matrix .site {
    position: sticky;
    left: 0;
    background: var(--card-bg);
    z-index: 1;
    padding-left: 12px;
    max-width: 120px;
    white-space: normal;
  }

  .site-name { font-size: 0.85rem; line-height: 1.25; }
  .site-meta, .cell .sub, .cell .long { display: none; }
  .cell .short { display: inline; }

  .matrix th,
  .matrix td { padding: 4px 3px; }

  .cell { min-width: 48px; padding: 9px 2px; font-size: 0.72rem; }

  .toolbar .legend { width: 100%; }

  .theme-switch button { padding: 3px 8px; font-size: 0.62rem; }
}

/* Telefon: tabellen skiftes ud med et kort pr. lokation */
@media (max-width: 700px) {
  .wrap { padding: 0 12px; }
  /* Hele logoet skal kunne ses, så billedet beskæres ikke i siderne */
  .hero { height: auto; aspect-ratio: 1584 / 760; background-position: center 30%; }
  .hero-top { padding: 14px 12px; }
  .theme-switch button { padding: 3px 8px; font-size: 0.62rem; }
  .board { margin-top: -28px; border-radius: 20px; }
  .board-head { padding: 18px 16px 12px; }
  .board-foot { padding: 12px 10px; justify-content: center; }
  /* Farveforklaringen på 1 linje: uden mærkat-ramme og med mindre tekst */
  .board-foot .legend {
    justify-content: center;
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
    font-size: clamp(0.56rem, 2.75vw, 0.72rem);
  }

  .board-foot .legend span {
    padding: 0;
    border: 0;
    background: none;
    white-space: nowrap;
    gap: 3px;
  }

  .board-foot .legend .dot { width: 7px; height: 7px; }
  .matrix-wrap { display: none; }
  .site-list { display: block; }
  .site-card { padding: 14px 16px; }
  .site-card .cell { font-size: 0.72rem; }
  .site-card .cell b { font-size: 0.72rem; }
  .site-card .site-meta { display: block; }
}

/* =====================================================
   Strømlinet udseende
   Færre streger og flader, så de grønne og gule tider
   springer i øjnene og resten træder i baggrunden
   ===================================================== */

/* Tabel uden lodrette streger og uden farvet hoved */
.matrix td + td, .matrix th + th { border-left: 0; }
.matrix thead th { background: transparent; border-top: 0; padding: 12px 8px; }
.matrix thead th.today { box-shadow: inset 0 -2px 0 var(--accent); }
.matrix tbody td { padding: 6px 6px; }
.matrix tbody tr:hover td { background: transparent; }
.matrix tbody tr:hover td .cell { filter: none; }

/* Felterne: ingen kanter. Røde og grå er kun tekst, så de fylder mindre */
.cell { border: 0; border-radius: 10px; padding: 9px 4px; }
.cell.st-green, .cell.st-yellow, .cell.st-red, .cell.st-grey { border: 0; }
.cell.st-red  { background: transparent; color: var(--muted); }
.cell.st-grey { background: transparent; color: var(--muted); }
.cell.st-red b, .cell.st-grey b { font-weight: 500; }
.cell.st-red .sub, .cell.st-grey .sub { opacity: 0.7; }
.cell.st-red:hover, .cell.st-grey:hover { background: var(--surface); }
.cell:hover { box-shadow: none; }
.cell.selected { outline: 2px solid var(--accent); outline-offset: 0; }

/* Farveforklaring som ren tekst med prik */
.board-foot { background: transparent; }
.board-foot .legend span { padding: 0; border: 0; background: none; color: var(--muted); }
.board-foot .legend { gap: 14px; }

/* Tidsvinduer i detaljer: farvet prik i stedet for kraftig top-kant */
.win { border-top: 0; background: var(--surface); }
.win .t { display: flex; justify-content: center; align-items: center; gap: 5px; }
.win .t::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grey);
}
.win.st-green  .t::before { background: var(--green); }
.win.st-yellow .t::before { background: var(--yellow); }
.win.st-red    .t::before { background: var(--red); }

/* Lidt mere luft og færre skygger på kortene */
.panel { box-shadow: 0 1px 3px rgba(20, 25, 35, 0.05); }
:root[data-theme="dark"] .panel { box-shadow: none; }

@media (max-width: 700px) {
  .board-foot .legend { gap: 8px; }
  .mini-days { gap: 4px; }
}

/* Landenavnet på mobil gentager blot DK/SE-mærkaten */
.country-tag { display: none; }

/* =====================================================
   Stram version
   Mindre luft, lavere rækker og et lavere billede,
   så hele oversigten kan ses uden at scrolle
   ===================================================== */

.hero { height: clamp(260px, 32vw, 440px); background-position: center 46%; }
.board { margin-top: -56px; border-radius: 18px; }
.wrap { gap: 12px; }

.board-head { padding: 14px 20px 8px; }

.matrix thead th { padding: 8px 6px; font-size: 0.66rem; }
.matrix thead th small { font-size: 0.74rem; margin-top: 0; }
.matrix .site { padding-left: 20px; min-width: 200px; }
.matrix tbody td { padding: 3px 4px; }
.site-name { font-size: 0.88rem; }
.cc { width: 22px; height: 22px; font-size: 0.56rem; margin-right: 8px; }

.cell { padding: 6px 4px; border-radius: 8px; min-width: 64px; line-height: 1.2; }
.cell b { font-size: 0.76rem; }
.cell .sub { font-size: 0.64rem; }

.board-foot { padding: 10px 20px; }
.board-foot .legend { font-size: 0.7rem; }

.panel { border-radius: 14px; }
.detail { padding: 14px 18px; gap: 18px; }
.detail h2 { font-size: 1.05rem; }
.detail .date { font-size: 0.78rem; }
.pill { margin-top: 6px; padding: 2px 10px; font-size: 0.66rem; }
.best { font-size: 0.82rem; margin-top: 4px; }
.reason { font-size: 0.78rem; margin-top: 4px; }
.links { margin-top: 8px; font-size: 0.78rem; }

.windows { gap: 6px; }
.win { padding: 8px 6px; border-radius: 10px; }
.win .w { font-size: 1rem; }
.win .t, .win .g, .win .why { font-size: 0.66rem; }
.win .d, .win .wx { font-size: 0.72rem; }
.win .wx svg { width: 15px; height: 15px; }

.compass-row svg { width: 80px; height: 80px; }
.compass-txt { font-size: 0.74rem; }

details.rules { padding: 10px 18px; }
details.rules summary { font-size: 0.9rem; }

@media (max-width: 900px) {
  .detail { padding: 14px; }
}

@media (max-width: 700px) {
  .hero { height: auto; aspect-ratio: 1584 / 700; }
  .board { margin-top: -22px; }
  .board-head { padding: 12px 12px 8px; }
  .site-card { padding: 10px 12px; }
  .site-card-head { margin-bottom: 6px; }
  .mini-days { gap: 3px; }
  .mini-label { font-size: 0.58rem; }
  .mini-day { gap: 2px; }
  .mini-day .cell { padding: 6px 2px; }
  .site-card .cell b { font-size: 0.7rem; }
  .board-foot { padding: 8px 10px; }
}


/* =====================================================
   Ens farvesprog på hele siden
   Grøn og gul er udfyldte felter. Ikke egnet og For lidt vind
   er tomme felter med dæmpet tekst, præcis som i oversigten
   ===================================================== */

.sw {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid transparent;
  vertical-align: -1px;
}

.sw-green  { background: var(--green-bg);  border-color: var(--green); }
.sw-yellow { background: var(--yellow-bg); border-color: var(--yellow); }
.sw-none   { background: transparent;      border-color: var(--muted); opacity: 0.6; }

.legend span, .compass-txt li, .site-info-item li, .rules-grid li { display: flex; align-items: center; gap: 6px; }
.board-foot .legend span { gap: 5px; }

/* Status i detaljer */
.pill.st-red, .pill.st-grey { background: var(--surface); color: var(--muted); }

/* Prik ved tidsvinduer: samme udtryk som felterne */
.win .t::before { width: 12px; height: 8px; border-radius: 2px; border: 1px solid transparent; }
.win.st-green  .t::before { background: var(--green-bg);  border-color: var(--green); }
.win.st-yellow .t::before { background: var(--yellow-bg); border-color: var(--yellow); }
.win.st-red    .t::before,
.win.st-grey   .t::before { background: transparent; border-color: var(--muted); opacity: 0.6; }
.win.st-red .w, .win.st-grey .w { color: var(--muted); }

@media (max-width: 700px) {
  .board-foot .legend .sw { width: 11px; height: 8px; }
}


/* =====================================================
   Ikke egnet er rød igen, og alle tre farver har mere kontrast
   ===================================================== */

.cell.st-red, .cell.st-grey { background: var(--red-bg); color: var(--red-text); }
.cell.st-red b, .cell.st-grey b { font-weight: 600; }
.cell.st-red .sub, .cell.st-grey .sub { opacity: 0.85; }
.cell.st-red:hover, .cell.st-grey:hover { background: var(--red-bg); }

/* Tynd kant i samme farve giver felterne skarpere afgrænsning */
.cell.st-green  { box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.35); }
.cell.st-yellow { box-shadow: inset 0 0 0 1px rgba(224, 161, 0, 0.45); }
.cell.st-red,
.cell.st-grey   { box-shadow: inset 0 0 0 1px rgba(220, 59, 46, 0.30); }

.sw-red { background: var(--red-bg); border-color: var(--red); }

.pill.st-red, .pill.st-grey { background: var(--red-bg); color: var(--red-text); }

.win.st-red    .t::before,
.win.st-grey   .t::before { background: var(--red-bg); border-color: var(--red); opacity: 1; }
.win.st-red .w, .win.st-grey .w { color: var(--strong); }

/* =====================================================
   Hero-billede (2080 x 992)
   Motivet ligger i den øverste halvdel, så billedet vises
   fra toppen. Lyngen nederst toner ud bag tavlen
   ===================================================== */

.hero {
  height: clamp(420px, 46vw, 700px);
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.55) 74%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.55) 74%, transparent 100%);
}

.hero::after {
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.25) 0%, rgba(10, 14, 20, 0) 18%);
}

.board { margin-top: -200px; }

@media (max-width: 700px) {
  .hero { height: 230px; aspect-ratio: auto; background-position: center top; }
  .board { margin-top: -60px; }
}

/* =====================================================
   Balance mellem billede, tavle og knapper
   Én fælles skala: billede, tavle og knapper følger samme
   bredde, og tekststørrelser passer til hinanden
   ===================================================== */

/* Fælles bredde for knapper i billedet og for tavlen */
.wrap { max-width: 1120px; }
.hero-top { max-width: 1120px; padding: 22px 24px; }

/* Billedet: højde efter skærmens højde, så tavlen altid ses uden at scrolle */
.hero { height: clamp(380px, 58vh, 620px); }
.board { margin-top: -130px; }

/* Knapperne i billedet lidt større, så de passer til tavlen */
.hero-meta { font-size: 0.74rem; padding: 6px 13px; gap: 6px; }
.hero-meta svg { width: 14px; height: 14px; }
.theme-switch { padding: 3px; }
.theme-switch button { font-size: 0.74rem; padding: 4px 12px; }
.sw-dot { width: 7px; height: 7px; }

/* Tavlen: lidt større tekst og rolig luft */
.board-head { padding: 18px 24px 10px; }
.segment button { font-size: 0.78rem; padding: 5px 13px; }
.segment .count { font-size: 0.66rem; min-width: 18px; }
.matrix thead th { font-size: 0.68rem; padding: 10px 6px; }
.matrix thead th small { font-size: 0.82rem; }
.matrix .site { padding-left: 24px; min-width: 220px; }
.site-name { font-size: 0.95rem; }
.cc { width: 24px; height: 24px; font-size: 0.58rem; }
.matrix tbody td { padding: 4px 5px; }
.cell { padding: 8px 4px; min-width: 76px; border-radius: 10px; }
.cell b { font-size: 0.84rem; }
.cell .sub { font-size: 0.68rem; }
.board-foot { padding: 12px 24px; }
.board-foot .legend { font-size: 0.74rem; }

/* Detaljer og Om vejrvurderingen i samme skala som tavlen */
.detail { padding: 18px 24px; gap: 22px; }
.detail h2 { font-size: 1.2rem; }
.detail .date, .reason, .links { font-size: 0.85rem; }
.best { font-size: 0.9rem; }
.pill { font-size: 0.7rem; padding: 3px 11px; }
.win { padding: 10px 8px; }
.win .w { font-size: 1.15rem; }
.win .t, .win .g, .win .why { font-size: 0.7rem; }
.win .d, .win .wx { font-size: 0.76rem; }
.compass-row svg { width: 88px; height: 88px; }
.compass-txt { font-size: 0.8rem; }
details.rules { padding: 14px 24px; }
details.rules summary { font-size: 0.95rem; }

/* Mobil: lavere billede, mindre knapper og mere kompakte kort */
@media (max-width: 700px) {
  .wrap { padding: 0 12px; }
  .hero-top { padding: 12px; }
  .hero { height: 220px; }
  .board { margin-top: -44px; border-radius: 16px; }

  .hero-meta { font-size: 0.64rem; padding: 4px 10px; }
  .hero-meta svg { width: 12px; height: 12px; }
  .theme-switch button { font-size: 0.64rem; padding: 3px 9px; }

  .board-head { padding: 12px 14px 8px; }
  .segment button { font-size: 0.72rem; padding: 4px 11px; }

  .site-card { padding: 10px 14px 12px; }
  .site-card-head { margin-bottom: 6px; }
  .site-card .site-name { font-size: 0.95rem; }
  .site-card .cc { width: 22px; height: 22px; font-size: 0.55rem; margin-right: 8px; }
  .mini-days { gap: 5px; }
  .mini-label { font-size: 0.6rem; }
  .mini-day .cell { padding: 7px 2px; min-width: 0; border-radius: 8px; }
  .site-card .cell b { font-size: 0.74rem; }

  .board-foot { padding: 10px 12px; }
  .detail { padding: 16px; }
  details.rules { padding: 12px 16px; }
}

/* =====================================================
   Læsbarhed og trykflader efter gængs standard
   Mindst 12 px tekst, knapper mindst 40-44 px høje på mobil
   og tekst i felterne 13-14 px på computer.
   Tavlen ligger højere oppe i billedet for at give plads
   ===================================================== */

/* ---------- Computer ---------- */
.board { margin-top: -190px; }

.hero-meta { font-size: 0.8rem; padding: 7px 14px; }
.hero-meta svg { width: 15px; height: 15px; }
.theme-switch { padding: 4px; }
.theme-switch button { font-size: 0.8rem; padding: 6px 14px; min-height: 32px; }
.sw-dot { width: 8px; height: 8px; }

.segment { padding: 4px; }
.segment button { font-size: 0.85rem; padding: 7px 15px; min-height: 36px; }
.segment .count { font-size: 0.75rem; min-width: 20px; padding: 0 6px; }

.matrix thead th { font-size: 0.75rem; }
.matrix thead th small { font-size: 0.88rem; }
.site-name { font-size: 1rem; }
.cc { width: 26px; height: 26px; font-size: 0.62rem; }
.cell { padding: 9px 4px; min-height: 48px; }
.cell b { font-size: 0.88rem; }
.cell .sub { font-size: 0.75rem; }

.board-foot .legend { font-size: 0.8rem; }
.board-foot .legend .sw { width: 14px; height: 10px; }

.detail .date, .reason, .links { font-size: 0.9rem; }
.reason small { font-size: 0.8rem; }
.pill { font-size: 0.75rem; padding: 4px 12px; }
.win .t, .win .g, .win .why { font-size: 0.75rem; }
.win .d, .win .wx { font-size: 0.82rem; }
.win .w { font-size: 1.25rem; }
.compass-txt { font-size: 0.85rem; }
.links a { display: inline-block; padding: 4px 0; }

.rules-grid { font-size: 0.9rem; }
.page-footer { font-size: 0.8rem; }

/* ---------- Mobil ---------- */
@media (max-width: 700px) {
  .hero { height: 240px; }
  .board { margin-top: -80px; }

  .hero-top { padding: 10px 12px; gap: 8px; }
  .hero-meta { font-size: 0.75rem; padding: 6px 11px; min-height: 36px; }
  .hero-meta svg { width: 14px; height: 14px; }
  .theme-switch { padding: 3px; }
  .theme-switch button { font-size: 0.75rem; padding: 6px 11px; min-height: 36px; }

  .segment { width: 100%; }
  .segment button { flex: 1; justify-content: center; font-size: 0.9rem; min-height: 44px; }
  .segment .count { font-size: 0.75rem; }

  .site-card { padding: 12px 14px 14px; }
  .site-card .site-name { font-size: 1.05rem; }
  .site-card .cc { width: 26px; height: 26px; font-size: 0.62rem; }
  .mini-days { gap: 6px; }
  .mini-label { font-size: 0.75rem; }
  .mini-day .cell { min-height: 44px; padding: 8px 2px; justify-content: center; }
  .site-card .cell b { font-size: 0.85rem; }

  .board-foot .legend { font-size: 0.75rem; gap: 10px; flex-wrap: wrap; }
  .board-foot .legend .sw { width: 13px; height: 9px; }

  #detail-close { width: 44px; height: 44px; }
  .win .t, .win .g, .win .why { font-size: 0.75rem; }
  details.rules summary { min-height: 44px; display: flex; align-items: center; }
}

/* Smalle telefoner: kortere tekst i opdateringstiden */
@media (max-width: 380px) {
  .hero-meta { font-size: 0.7rem; padding: 6px 9px; }
  .theme-switch button { padding: 6px 9px; }
}

/* Tavlen må gå op i billedet, men aldrig dække teksten på skærmen.
   Teksten sidder ca. 22 % af skærmbredden nede i billedet */
:root { --hero-h: clamp(400px, 60vh, 640px); }
.hero { height: var(--hero-h); }
.board { margin-top: calc(-1 * max(0px, min(var(--hero-h) * 0.32, var(--hero-h) - 24vw))); }

@media (max-width: 700px) {
  :root { --hero-h: 240px; }
  .board { margin-top: -76px; }
}

/* Telefon: kort udgave af opdateringstiden, så den passer ved Lys/Mørk */
@media (max-width: 430px) {
  .meta-lead { display: none; }
  .meta-lead-short { display: inline; }
  .hero-meta { font-size: 0.72rem; padding: 6px 10px; gap: 5px; }
  .hero-meta svg { flex: none; }
  .theme-switch button { font-size: 0.72rem; padding: 6px 10px; }
}

@media (max-width: 380px) {
  .meta-year { display: none; }
}

/* Tavlen ca. 60 px højere op på computer, stadig under teksten på skærmen */
@media (min-width: 701px) {
  .board { margin-top: calc(-1 * max(0px, min(var(--hero-h) * 0.43, var(--hero-h) - 21vw))); }
}



/* =====================================================
   Mindre glas-knapper i alle opløsninger
   ===================================================== */

.hero-meta { font-size: 0.7rem; padding: 4px 10px; gap: 5px; min-height: 0; }
.hero-meta svg { width: 12px; height: 12px; }
.theme-switch { padding: 2px; }
.theme-switch button { font-size: 0.7rem; padding: 3px 10px; min-height: 0; gap: 4px; }
.sw-dot { width: 6px; height: 6px; }

.segment { width: auto; padding: 3px; }
.segment button { flex: none; font-size: 0.75rem; padding: 4px 12px; min-height: 0; gap: 6px; }
.segment .count { font-size: 0.65rem; min-width: 16px; padding: 0 5px; }

@media (max-width: 700px) {
  .hero-top { padding: 10px 12px; }
  .hero-meta { font-size: 0.68rem; padding: 4px 9px; min-height: 0; }
  .theme-switch button { font-size: 0.68rem; padding: 3px 9px; min-height: 0; }
  .segment { width: auto; }
  .segment button { flex: none; font-size: 0.78rem; padding: 5px 14px; min-height: 0; }
  .segment .count { font-size: 0.68rem; }
}

@media (max-width: 430px) {
  .hero-meta { font-size: 0.66rem; padding: 4px 8px; }
  .theme-switch button { font-size: 0.66rem; padding: 3px 8px; }
}

/* Alle glas-knapper præcis 22 px høje (yderkant) i alle opløsninger */
.hero-meta,
.theme-switch,
.segment {
  height: 22px;
  box-sizing: border-box;
  align-items: center;
}
.hero-meta { padding: 0 9px; line-height: 1; }
.theme-switch, .segment { padding: 2px; }
.theme-switch button,
.segment button {
  height: 16px;
  min-height: 0;
  padding: 0 9px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.hero-meta, .theme-switch button { font-size: 0.66rem; }
.segment button { font-size: 0.7rem; }
.segment .count { font-size: 0.6rem; min-width: 14px; padding: 0 4px; line-height: 12px; }
.hero-meta svg { width: 11px; height: 11px; }

@media (max-width: 700px) {
  .hero-meta { padding: 0 8px; font-size: 0.66rem; }
  .theme-switch button { padding: 0 8px; font-size: 0.66rem; }
  .segment button { padding: 0 10px; font-size: 0.7rem; }
}

/* =====================================================
   Kontakt-blok med billede
   ===================================================== */
.contact {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 24px;
}

.contact-photo {
  flex: none;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--card-bg), 0 0 0 5px var(--line);
}

.contact-body h2 { font-size: 1.1rem; color: var(--strong); margin-bottom: 6px; }
.contact-body p { font-size: 0.9rem; }
.contact-body p + p { margin-top: 4px; }

.contact-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}
.contact-mail:hover { border-color: var(--accent); }
.contact-mail svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.contact-sign { margin-top: 14px; color: var(--muted); }
.contact-sign strong { color: var(--strong); font-weight: 600; }

@media (max-width: 700px) {
  .contact { flex-direction: column; text-align: center; gap: 14px; padding: 20px 16px; }
  .contact-photo { width: 96px; height: 96px; }
  .contact-mail { min-height: 44px; }
}

/* Kontakt inde i Om vejrvurderingen. Hele portrættet vises */
.contact {
  margin-top: 20px;
  padding: 16px;
  border-radius: 14px;
  background: var(--surface);
  align-items: center;
}
.contact-photo {
  width: 120px;
  height: auto;
  aspect-ratio: auto;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: none;
}
.contact-body h3 { font-size: 1rem; color: var(--strong); margin-bottom: 6px; }

@media (max-width: 700px) {
  .contact-photo { width: 120px; height: auto; }
}

/* Billedet står ved underskriften */
.contact { display: block; }
.contact-sign {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.contact-sign .contact-photo { width: 72px; height: auto; border-radius: 8px; }
.contact-sign p { margin: 0; color: var(--muted); font-size: 0.9rem; }

@media (max-width: 700px) {
  .contact { text-align: left; }
  .contact-sign .contact-photo { width: 72px; }
}

/* Større billede ved underskriften */
.contact-sign { gap: 18px; }
.contact-sign .contact-photo { width: 130px; border-radius: 10px; }
@media (max-width: 700px) {
  .contact-sign .contact-photo { width: 120px; }
}

.contact-sign .contact-photo { width: 170px; }
@media (max-width: 700px) {
  .contact-sign .contact-photo { width: 150px; }
}

/* Billedet fylder hele højden i venstre side, tekst til højre */
.contact {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.contact > .contact-photo {
  flex: none;
  width: 180px;
  height: auto;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
}
.contact-body { padding: 18px 22px; flex: 1; }
.contact-sign {
  display: block;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 700px) {
  .contact { text-align: left; }
  .contact > .contact-photo { width: 120px; }
  .contact-body { padding: 14px 16px; }
  .contact-mail { font-size: 0.78rem; padding: 6px 10px; min-height: 40px; word-break: break-all; }
}

@media (max-width: 700px) {
  .contact { flex-direction: row; align-items: stretch; gap: 0; padding: 0; }
  .contact > .contact-photo { width: 110px; }
  .contact-body h3 { font-size: 0.95rem; }
  .contact-body p { font-size: 0.85rem; }
}

@media (max-width: 700px) {
  .contact-mail { word-break: normal; white-space: nowrap; font-size: 0.72rem; padding: 6px 10px; gap: 6px; }
  .contact-mail svg { width: 14px; height: 14px; }
}
@media (max-width: 700px) {
  .contact > .contact-photo { width: 100px; }
  .contact-body { padding: 14px 12px 14px 14px; min-width: 0; }
  .contact-mail { font-size: 0.68rem; padding: 6px 9px; max-width: 100%; }
}

/* Detaljer og Om vejrvurderingen får samme fulde kort-udseende som tavlen */
.panel {
  background: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(20, 25, 35, 0.10);
}
:root[data-theme="dark"] .panel { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30); }

/* Opdateringstid i højre side af tavlen, på linje med Alle / Flyvbare */
.hero-top { justify-content: flex-end; }
.board-head .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.board-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}
.board-meta svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 430px) {
  .board-meta { font-size: 0.66rem; }
}

/* Mobil: hold opdateringstiden på samme linje som Alle / Flyvbare */
@media (max-width: 700px) {
  .board-head .toolbar { flex-wrap: nowrap; }
  .board-meta { font-size: 0.66rem; gap: 4px; }
  .board-meta .meta-year { display: none; }
  .board-meta .meta-lead { display: none; }
  .board-meta .meta-lead-short { display: inline; }
}
@media (max-width: 380px) {
  .board-meta svg { display: none; }
  .segment button { padding: 0 8px; }
}
@media (max-width: 380px) {
  .board-meta .meta-word { display: none; }
  .board-meta svg { display: inline; }
}

/* =====================================================
   Topbanner med logo til venstre og vejr i Taastrup til højre
   ===================================================== */
.topbar {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(15, 20, 30, 0.55), rgba(15, 20, 30, 0.25));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.topbar-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.brand-logo { width: 40px; height: 27px; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.brand-path { color: #4ee38f; }
.brand-sub { font-size: 0.7rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); }

.topbar-right { display: flex; align-items: center; gap: 10px; }

.wx-now {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}
.wx-now[hidden] { display: none; }
.wx-now-icon svg { width: 22px; height: 22px; display: block; }
.wx-now-text { display: flex; flex-direction: column; line-height: 1.05; }
.wx-now-text b { font-size: 0.88rem; font-weight: 700; }
.wx-now-text small { font-size: 0.62rem; color: rgba(255, 255, 255, 0.8); }

@media (max-width: 700px) {
  .topbar-inner { padding: 8px 12px; }
  .brand-logo { width: 32px; height: 22px; }
  .brand-name { font-size: 0.95rem; }
  .brand-sub { font-size: 0.6rem; }
  .wx-now { height: 30px; padding: 0 9px 0 6px; }
  .wx-now-icon svg { width: 18px; height: 18px; }
  .wx-now-text b { font-size: 0.78rem; }
}
@media (max-width: 380px) {
  .brand-sub { display: none; }
  .theme-switch button { padding: 0 6px; }
}
@media (max-width: 380px) {
  .topbar-inner { padding: 8px 10px; gap: 6px; }
  .topbar-right { gap: 6px; }
  .brand { gap: 6px; }
  .brand-logo { width: 26px; height: 18px; }
  .brand-name { font-size: 0.82rem; }
  .wx-now { padding: 0 7px 0 5px; gap: 4px; }
  .wx-now-icon svg { width: 16px; height: 16px; }
  .wx-now-text b { font-size: 0.72rem; }
  .wx-now-text small { font-size: 0.55rem; }
  .theme-switch button { padding: 0 6px; font-size: 0.62rem; }
  .sw-dot { display: none !important; }
}
.brand-path { color: #ff8a3d; }
.brand-name { letter-spacing: 0.02em; }
.brand-sub { white-space: nowrap; }
@media (max-width: 700px) {
  .brand-sub { font-size: 0.56rem; }
}
@media (max-width: 400px) {
  .brand-sub { display: none; }
}

/* Mere gennemsigtigt banner */
.topbar {
  background: linear-gradient(180deg, rgba(15, 20, 30, 0.28), rgba(15, 20, 30, 0.06));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.brand-name, .brand-sub, .wx-now-text { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); }

/* Undertekst vises også på mobil. Plads skaffes ved at gøre højre side kompakt */
@media (max-width: 700px) {
  .brand-sub { display: block; font-size: 0.56rem; letter-spacing: 0.01em; }
}
@media (max-width: 430px) {
  .topbar-inner { padding: 8px 10px; gap: 6px; }
  .brand { gap: 6px; }
  .brand-logo { width: 26px; height: 18px; }
  .brand-name { font-size: 0.82rem; }
  .brand-sub { display: block; font-size: 0.5rem; }
  .topbar-right { gap: 5px; }
  .wx-now { height: 28px; padding: 0 7px 0 5px; gap: 4px; }
  .wx-now-icon svg { width: 15px; height: 15px; }
  .wx-now-text b { font-size: 0.7rem; }
  .wx-now-text small { font-size: 0.52rem; }
  .theme-switch button { padding: 0 6px; font-size: 0.62rem; }
  .sw-dot { display: none !important; }
}
@media (max-width: 360px) {
  .brand-logo { display: none; }
  .brand-name { font-size: 0.76rem; }
  .brand-sub { font-size: 0.47rem; }
}

/* Uden temperatur er der plads til en større undertekst */
.brand-sub { font-size: 0.78rem; }
.brand-logo { display: block; }
@media (max-width: 700px) {
  .brand-name { font-size: 1rem; }
  .brand-sub { font-size: 0.75rem; }
  .brand-logo { width: 32px; height: 22px; }
}
@media (max-width: 430px) {
  .brand-name { font-size: 0.95rem; }
  .brand-sub { font-size: 0.72rem; }
  .brand-logo { display: block; width: 30px; height: 20px; }
}
@media (max-width: 360px) {
  .brand-name { font-size: 0.9rem; }
  .brand-sub { font-size: 0.7rem; }
  .brand-logo { display: block; width: 26px; height: 18px; }
}

/* Alle/Flyvbare og Lys/Mørk i samme skriftstørrelse som "Om vejrvurderingen" (0,95rem) */
.segment, .theme-switch { height: 32px; padding: 3px; }
.segment button, .theme-switch button {
  height: 26px;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0 12px;
}
.segment .count { font-size: 0.75rem; min-width: 18px; padding: 0 6px; line-height: 16px; }
.sw-dot { width: 7px; height: 7px; }

@media (max-width: 700px) {
  .segment button, .theme-switch button { font-size: 0.95rem; padding: 0 11px; }
}
@media (max-width: 430px) {
  .segment button { padding: 0 9px; }
  .theme-switch button { font-size: 0.95rem; padding: 0 9px; }
}
@media (max-width: 380px) {
  .segment button, .theme-switch button { padding: 0 7px; }
}

/* =====================================================
   Ensartet typografi
   S  0,75rem  (12 px)  små etiketter og hjælpetekst
   M  0,875rem (14 px)  brødtekst, datoer, links
   L  0,95rem  (15 px)  knapper, navne og overskrifter (vægt 600)
   XL 1,2rem   (19 px)  overskrift i detaljer og vindtal
   ===================================================== */
:root { --fs-s: 0.75rem; --fs-m: 0.875rem; --fs-l: 0.95rem; --fs-xl: 1.2rem; }

/* S */
.brand-sub, .segment .count, .board-meta, .matrix thead th, .cell .sub,
.board-foot .legend, .board-foot .legend span, .pill, .reason small,
.win .t, .win .g, .win .why, .mini-label, .compass-txt .hint, .page-footer {
  font-size: var(--fs-s);
}

/* M */
.matrix thead th small, .cell b, .detail .date, .reason, .best, .links, .links a,
.win .d, .win .wx, .compass-txt, .compass-txt li,
.rules-grid, .rules-grid p, .rules-grid li, .rules-lead,
.site-info-item, .site-info-item li, .site-links a,
.note, .note p, .contact-body p, .contact-mail, .contact-sign {
  font-size: var(--fs-m);
}

/* L */
.theme-switch button, .segment button, details.rules summary,
.site-name, .site-info-item .site-name, .rules-grid h3, .rules-sub, .contact-body h3 {
  font-size: var(--fs-l);
  font-weight: 600;
}

/* XL */
.detail h2, .win .w { font-size: var(--fs-xl); font-weight: 600; }

/* Ens vægt på små overskrifter i tabellen */
.matrix thead th { font-weight: 600; }
.cell b { font-weight: 600; }
.pill { font-weight: 600; }

@media (max-width: 700px) {
  .site-card .site-name { font-size: var(--fs-l); }
  .site-card .cell b, .mini-day .cell b { font-size: var(--fs-m); }
  .brand-sub { font-size: var(--fs-s); }
  .board-meta { font-size: var(--fs-s); }
}
@media (max-width: 430px) {
  .contact-mail { font-size: 0.8rem; }
}
@media (max-width: 380px) {
  .board-meta { font-size: 0.7rem; }
  .brand-sub { font-size: 0.7rem; }
}
.matrix thead th.site { font-size: var(--fs-s); }
@media (max-width: 380px) {
  .board-meta svg { display: none; }
  .segment button { padding: 0 6px; gap: 4px; }
  .segment .count { min-width: 16px; padding: 0 4px; }
}

/* Diskret tema-knap: kun et ikon i en lille glas-cirkel */
.theme-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.theme-icon:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.theme-icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.theme-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon .i-moon { fill: currentColor; stroke: none; }
.theme-icon .i-sun { display: none; }
:root[data-theme="dark"] .theme-icon .i-sun { display: block; }
:root[data-theme="dark"] .theme-icon .i-moon { display: none; }

/* Lille skyde-kontakt med sol og måne */
.theme-toggle {
  position: relative;
  width: 46px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
  flex: none;
}
.theme-toggle svg {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2;
  stroke-linecap: round;
}
.theme-toggle .tt-sun  { left: 6px; }
.theme-toggle .tt-moon { right: 6px; fill: rgba(255, 255, 255, 0.75); stroke: none; }
.tt-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}
:root[data-theme="dark"] .tt-knob { transform: translateX(22px); background: #e6edf3; }
.theme-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tt-knob { transition: none; } }

/* Opdateringstiden må aldrig blive klippet.
   Er der ikke plads, flyttes den ned på sin egen linje */
.board-head .toolbar { flex-wrap: wrap !important; row-gap: 6px; }
.board-meta { margin-left: auto; flex: none; }
@media (max-width: 430px) {
  .board-meta .meta-word { display: none; }
  .board-meta svg { display: inline; }
}

/* ---------- Tidsvindue-prikker i oversigten ---------- */
.cell { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.wdots {
  display: inline-flex; gap: 4px; padding: 3px 6px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.75);
}
.wd { width: 6px; height: 6px; border-radius: 50%; display: block; background: var(--grey); }
.wd-green  { background: var(--green);  box-shadow: 0 0 0 2px rgba(26, 156, 74, 0.2); }
.wd-yellow { background: var(--yellow); }
.wd-red    { background: var(--red); }
.wd-grey   { background: var(--grey); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wdots { background: rgba(0, 0, 0, 0.3); } }
:root[data-theme="dark"] .wdots { background: rgba(0, 0, 0, 0.3); }
.cell .sub .arrow { margin-left: 2px; font-size: 0.85rem; line-height: 1; }

/* ---------- Valgbare tidsvinduer ---------- */
button.win { font: inherit; color: inherit; text-align: center; cursor: pointer; width: 100%;
  border: 1px solid var(--line); border-top: 4px solid var(--grey);
  transition: transform .12s, box-shadow .12s, border-color .12s; }
button.win.st-green  { border-top-color: var(--green); }
button.win.st-yellow { border-top-color: var(--yellow); }
button.win.st-red    { border-top-color: var(--red); }
button.win:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20, 25, 35, 0.08); }
button.win.active { border-left-color: var(--strong); border-right-color: var(--strong); border-bottom-color: var(--strong);
  box-shadow: 0 0 0 1px var(--strong); }
button.win:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.win .cb { font-size: var(--fs-s); margin-top: 4px; color: var(--muted); white-space: nowrap; }

/* Smal skærm (fx iPhone): vinduerne må ikke presse popup'en bredere end skærmen */
.windows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
button.win { min-width: 0; }
@media (max-width: 480px) {
  .windows { gap: 6px; }
  button.win { padding: 8px 4px; }
  .win .d, .win .wx { font-size: var(--fs-s); gap: 3px; white-space: nowrap; }
  .win .wx svg { width: 14px; height: 14px; }
  .win .cb span { display: block; }
}

/* =====================================================
   Detaljer v2: Hoved, tidsvinduer, pilotvurdering og kompas
   ===================================================== */
.detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "head head" "wins pilot" "compass pilot"; gap: 14px 24px; align-items: start; }
.detail > .empty { grid-column: 1 / -1; }
.dt-head { grid-area: head; }
.dt-wins { grid-area: wins; }
.dt-pilot { grid-area: pilot; }
.dt-compass { grid-area: compass; }

.dt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dt-title h2 { margin: 0; }
.dt-day { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dt-day .best { font-size: var(--fs-m); }
.dt-head .links { margin: 0 0 0 auto; }
.dt-head .close { margin-left: 8px; }

/* Tidsvinduer */
.dt-wins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wcard {
  font: inherit; color: var(--text); cursor: pointer; text-align: center; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px 12px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line); border-top: 4px solid var(--grey);
  transition: transform .12s, box-shadow .12s;
}
.wcard.st-green  { border-top-color: var(--green); }
.wcard.st-yellow { border-top-color: var(--yellow); }
.wcard.st-red    { border-top-color: var(--red); }
.wcard:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20, 25, 35, 0.08); }
.wcard.active { border-left-color: var(--strong); border-right-color: var(--strong); border-bottom-color: var(--strong); box-shadow: 0 0 0 1px var(--strong); }
.wcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wc-time { font-size: var(--fs-s); color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.wc-wx { display: flex; align-items: center; gap: 6px; }
.wc-wx svg { width: 34px; height: 34px; flex: none; }
.wc-wx > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.wc-wx b { font-size: var(--fs-m); color: var(--strong); }
.wc-wx small { font-size: var(--fs-s); color: var(--muted); white-space: nowrap; }
.wc-wind { font-size: var(--fs-s); color: var(--muted); }
.wc-wind b { font-size: 1.45rem; color: var(--strong); font-weight: 700; margin-right: 1px; }
.wc-dir { font-size: var(--fs-s); color: var(--muted); white-space: nowrap; }

/* Pilotvurdering */
.dt-pilot { background: var(--surface); border-radius: 12px; padding: 12px 14px; }
.pv-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.pv-head h3 { margin: 0; font-size: var(--fs-l); color: var(--strong); font-weight: 600; }
.pv-head .pill { font-size: var(--fs-s); }
.pv-list { list-style: none; margin: 0; padding: 0; }
.pv-list li { display: grid; grid-template-columns: 10px 90px 1fr auto; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-m); }
.pv-list li:last-child { border-bottom: 0; }
.pv-list i { width: 10px; height: 10px; border-radius: 50%; background: var(--grey); box-sizing: border-box; }
.pv-list .k { color: var(--muted); }
.pv-list .v { color: var(--strong); font-weight: 600; white-space: nowrap; }
.pv-list .t { color: var(--muted); font-size: var(--fs-s); text-align: right; white-space: nowrap; }
.pv-green  i { background: var(--green); }
.pv-yellow i { background: var(--yellow); }
.pv-red    i { background: var(--red); }
.pv-red .t { color: var(--red-text); font-weight: 600; }
.pv-info   i { background: transparent; border: 2px solid var(--accent); }
.pv-note { margin: 8px 0 0; font-size: var(--fs-s); color: var(--muted); }

/* Kompas */
.dt-compass { display: flex; align-items: center; gap: 16px; padding: 4px 4px 0; }
.dt-compass svg { width: 88px; height: 88px; flex: none; }
.dt-compass .compass-txt { margin: 0; padding: 0; font-size: var(--fs-s); }
.dt-compass .ct-head { color: var(--strong); font-weight: 600; margin-bottom: 2px; }

@media (max-width: 1100px) {
  .detail { grid-template-columns: 1fr; grid-template-areas: "head" "wins" "pilot" "compass"; }
}
@media (max-width: 900px) {
  .detail { display: block; }
  .dt-head { padding-right: 44px; position: relative; }
  .dt-head .links { margin-left: 0; width: 100%; }
  .dt-head .close { position: absolute; top: 0; right: 0; margin: 0; }
  .dt-wins { margin-top: 14px; gap: 6px; }
  .dt-pilot { margin-top: 12px; }
  .dt-compass { margin-top: 12px; justify-content: center; }
}
@media (max-width: 480px) {
  .wc-wx { flex-direction: column; gap: 2px; }
  .wc-wx > span { align-items: center; text-align: center; }
  .wc-wx svg { width: 30px; height: 30px; }
  .pv-list li { grid-template-columns: 10px 84px 1fr auto; gap: 6px; }
  .dt-compass svg { width: 76px; height: 76px; }
}
.pv-note { padding: 8px 10px; border-radius: 8px; color: var(--text); font-size: var(--fs-s); line-height: 1.4; }
.pv-note b { font-weight: 600; }
.pv-why-green  { background: var(--green-bg);  color: var(--green-text); }
.pv-why-yellow { background: var(--yellow-bg); color: var(--yellow-text); }
.pv-why-red    { background: var(--red-bg);    color: var(--red-text); }
.pv-why-grey   { background: var(--grey-bg);   color: var(--grey-text); }

/* Vindlinje i tidskort. Desktop: som før (to linjer, uden m/s efter stød) */
.wc-windrow { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wc-gu { display: none; }

/* =====================================================
   iPhone (fx 15 Pro): Alt i popup'en uden scroll
   ===================================================== */
@media (max-width: 480px) {
  .detail { padding: 12px 12px 14px; max-height: 94vh; max-height: 94dvh; }

  /* Hoved */
  .dt-head { gap: 4px 10px; padding-bottom: 8px; padding-right: 40px; }
  .dt-title h2 { font-size: 1.1rem; }
  .dt-title .date { font-size: var(--fs-s); }
  .dt-day { gap: 8px; }
  .dt-day .pill { padding: 3px 9px; font-size: 0.68rem; }
  .dt-day .best { font-size: var(--fs-s); }
  .dt-head .links, .dt-head .links a { font-size: var(--fs-s); }
  .dt-head .close { width: 32px; height: 32px; }

  /* Tidskort */
  .dt-wins { margin-top: 10px; gap: 5px; }
  .wcard { padding: 6px 3px 7px; gap: 3px; border-radius: 10px; border-top-width: 3px; }
  .wc-time { font-size: 0.68rem; }
  .wc-wx { flex-direction: row; gap: 4px; }
  .wc-wx svg { width: 22px; height: 22px; }
  .wc-wx > span { align-items: flex-start; text-align: left; }
  .wc-wx b { font-size: 0.8rem; }
  .wc-wx small { font-size: 0.64rem; }
  .wc-windrow { flex-direction: row; align-items: baseline; justify-content: center; gap: 3px; white-space: nowrap; }
  .wc-wind { font-size: 0.62rem; }
  .wc-wind b { font-size: 0.95rem; }
  .wc-dir { font-size: 0.62rem; }
  .wc-dir .arrow { font-size: 0.7rem; }
  .wc-dl { display: none; }
  .wc-gu { display: inline; }

  /* Kompas lige under tidskortene */
  .dt-compass { margin-top: 8px; padding: 0; gap: 12px; }
  .dt-compass svg { width: 62px; height: 62px; }
  .dt-compass .compass-txt li { font-size: 0.7rem; }

  /* Pilotvurdering */
  .dt-pilot { margin-top: 8px; padding: 8px 10px; border-radius: 10px; }
  .pv-head { margin-bottom: 0; }
  .pv-head h3 { font-size: var(--fs-m); }
  .pv-head .pill { padding: 2px 8px; font-size: 0.66rem; }
  .pv-list li { grid-template-columns: 8px 74px 1fr auto; gap: 6px; padding: 4px 0; font-size: 0.78rem; }
  .pv-list i { width: 8px; height: 8px; }
  .pv-list .t { font-size: 0.68rem; }
  .pv-note { margin-top: 6px; padding: 6px 8px; font-size: 0.7rem; }
}
@media (max-width: 480px) {
  .detail { padding-left: 10px; padding-right: 10px; }
  .dt-wins { gap: 4px; }
  .wcard { padding-left: 2px; padding-right: 2px; }
  .wc-windrow { gap: 2px; letter-spacing: -0.01em; }
  .wc-wind b { font-size: 0.88rem; }
  .wc-wind, .wc-dir { font-size: 0.6rem; }
}
@media (max-width: 480px) { .wc-g1 { display: none; } }

/* Links: Desktop øverst til højre som før. Mobil nederst */
.dt-links { grid-area: head; justify-self: end; align-self: center; margin: 0 0 14px; }
@media (max-width: 1100px) and (min-width: 901px) { .dt-links { margin-bottom: 14px; } }
@media (max-width: 900px) {
  .dt-links { margin: 10px 0 0; text-align: center; }
}
@media (max-width: 480px) {
  .dt-links { margin-top: 8px; }
  .dt-links, .dt-links a { font-size: var(--fs-s); }
}
@media (max-width: 900px) { .detail .dt-links { justify-self: center; justify-content: center; width: 100%; } }

/* Mobil: Status og bedste flyvetid op ved siden af navn og dato */
@media (max-width: 900px) {
  .dt-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; }
  .dt-title, .dt-day { display: contents; }
  .dt-title h2 { grid-column: 1; grid-row: 1; }
  .dt-title .date { grid-column: 1; grid-row: 2; }
  .dt-day .pill { grid-column: 2; grid-row: 1; justify-self: end; }
  .dt-day .best { grid-column: 2; grid-row: 2; justify-self: end; white-space: nowrap; }
}
@media (max-width: 900px) { .detail .dt-head { padding-right: 52px; } .detail .dt-head .close { top: -2px; } }

/* iPhone: Lidt større skrift så pladsen bruges */
@media (max-width: 480px) {
  .dt-title h2 { font-size: 1.2rem; }
  .dt-title .date, .dt-day .best { font-size: 0.8rem; }
  .dt-day .pill { font-size: 0.72rem; padding: 4px 10px; }

  .dt-wins { margin-top: 12px; }
  .wcard { padding-top: 8px; padding-bottom: 9px; gap: 5px; }
  .wc-time { font-size: 0.75rem; }
  .wc-wx svg { width: 26px; height: 26px; }
  .wc-wx b { font-size: 0.9rem; }
  .wc-wx small { font-size: 0.7rem; }
  .wc-wind b { font-size: 1rem; }
  .wc-wind, .wc-dir { font-size: 0.64rem; }

  .dt-compass { margin-top: 10px; }
  .dt-compass svg { width: 72px; height: 72px; }
  .dt-compass .compass-txt li { font-size: 0.78rem; }

  .dt-pilot { margin-top: 10px; padding: 10px 12px; }
  .pv-head { margin-bottom: 2px; }
  .pv-head h3 { font-size: 0.95rem; }
  .pv-head .pill { font-size: 0.72rem; padding: 3px 9px; }
  .pv-list li { grid-template-columns: 9px 84px 1fr auto; padding: 6px 0; font-size: 0.88rem; }
  .pv-list i { width: 9px; height: 9px; }
  .pv-list .t { font-size: 0.76rem; }
  .pv-note { margin-top: 8px; padding: 7px 9px; font-size: 0.78rem; }

  .dt-links { margin-top: 10px; }
  .dt-links, .dt-links a { font-size: 0.85rem; }
}
@media (max-width: 480px) { .wc-wind b { font-size: 0.94rem; } .wc-wind, .wc-dir { font-size: 0.62rem; } }
@media (max-width: 480px) { .wc-windrow { letter-spacing: -0.02em; gap: 2px; } .wcard { padding-left: 1px; padding-right: 1px; } }

/* Mobil: Dagens status og bedste flyvetid vises ikke i popup'en */
@media (max-width: 900px) { .detail .dt-day { display: none; } }
@media (max-width: 480px) { .wc-wind b, .wc-gu b { font-size: 0.9rem; font-weight: 700; color: var(--strong); } }
@media (max-width: 480px) { .wc-wind b, .wc-gu b { font-size: 0.87rem; } }