:root {
  --sky-top: #0b2545;
  --sky-bottom: #134074;
  --accent: #8da9c4;
  --snow: #eef4ed;
  --card: rgba(238, 244, 237, 0.06);
  --border: rgba(141, 169, 196, 0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--snow);
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom)) fixed;
  min-height: 100vh;
}

.mountains {
  position: fixed;
  left: 0; bottom: 0;
  width: 100%; height: 38vh;
  background-color: rgba(11, 37, 69, 0.55);
  clip-path: polygon(
    0% 100%, 0% 55%, 12% 70%, 25% 35%, 38% 60%,
    50% 20%, 63% 58%, 75% 40%, 88% 68%, 100% 50%, 100% 100%);
  z-index: 0;
  pointer-events: none;
}

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.5rem;
}
.topbar-left { display: flex; align-items: center; gap: 1.4rem; }
.brand { font-weight: 700; }
.adminlink, a.back {
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.9rem;
}
.adminlink:hover, a.back:hover { background: var(--card); }

.page {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 0.6rem 1.5rem 5rem;
  text-align: center;
}
h1 {
  font-size: clamp(2rem, 8vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.tagline {
  margin-top: 0.5rem;
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: var(--accent);
}

.page.wide { max-width: none; }

/* ---- Toolbar (filters / actions above the grid) ---- */
.toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.5rem 0 0; min-height: 2.2rem; }
.toggle {
  font: inherit; cursor: pointer; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--snow);
  padding: 0.45rem 1.1rem; font-size: 0.9rem;
}
.toggle:hover { background: rgba(141, 169, 196, 0.15); }
.toggle.active { background: #3a6ea5; border-color: #3a6ea5; color: #fff; }
.toggle:disabled { opacity: 0.4; cursor: default; }
.toggle:disabled:hover { background: var(--card); }
.toggle.active:disabled:hover { background: #3a6ea5; }
.toolbar-status { color: var(--accent); font-size: 0.82rem; align-self: center; }
.tt-ico {
  display: inline-block; width: 1.15em; height: 1.15em; margin-right: 0.45rem;
  vertical-align: -0.2em; flex-shrink: 0;
  background-color: currentColor;            /* icon takes the button's text colour */
  -webkit-mask: var(--tt-ic) center / contain no-repeat;
          mask: var(--tt-ic) center / contain no-repeat;
}
.ic-sport    { --tt-ic: url(/typeicons/sport.svg); }
.ic-buldring { --tt-ic: url(/typeicons/buldring.svg); }
.ic-trad     { --tt-ic: url(/typeicons/trad.svg); }
.ic-dws      { --tt-ic: url(/typeicons/dws.svg); }

/* Identity button (top-right) */
.topbar-right { display: flex; gap: 0.6rem; align-items: flex-start; }
.user-col { display: inline-flex; flex-direction: column; align-items: stretch; gap: 0.25rem; }
.prefbtn { color: var(--accent); text-decoration: none; font-size: 0.78rem; text-align: center; }
.prefbtn:hover { text-decoration: underline; }
.userbtn {
  font: inherit; cursor: pointer; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--snow);
  padding: 0.4rem 0.95rem; font-size: 0.9rem; white-space: nowrap;
}
.userbtn:hover { background: rgba(141, 169, 196, 0.15); }
.userbtn.logged-in { border-color: #3a6ea5; background: rgba(58, 110, 165, 0.25); }
.user-body { max-width: 460px; }
.user-body .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.user-body .err { color: #ff9a9a; font-size: 0.85rem; margin-top: 0.5rem; }
.user-body b { color: var(--snow); }

/* Favorite star column */
th.col-fav { font-size: 1rem; }
.col-fav { text-align: center; width: 2.4rem; }
td.col-fav { cursor: pointer; font-size: 1.25rem; color: var(--accent); user-select: none; }
td.col-fav:hover { color: var(--snow); }
td.col-fav.is-fav { color: #ffd166; }

/* ---- Forecast grid ---- */
.grid-wrap {
  margin-top: 2.5rem;
  /* overflow visible so the page (body) is the scroll container and the
     header can stick to the top of the viewport as you scroll down. */
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}
.grid { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.95rem; }
.grid thead th {
  background: #0e2a4d;            /* opaque so scrolling rows don't show through */
  color: var(--accent);
  font-weight: 600;
  padding: 0.7rem 0.8rem;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 6;
}
.grid thead th.sortable { cursor: pointer; user-select: none; }
.grid thead th.sortable:hover { color: var(--snow); }
.grid thead th .arrow { color: var(--snow); }
.grid .filter-row th { padding: 0.35rem 0.5rem; background: #0a2342; top: 2.55rem; z-index: 5; }

/* Header tooltip (reliable, instant — replaces the flaky native title). */
.grid thead th[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 4px);
  left: 0.4rem;
  background: #0e2a4d;
  border: 1px solid var(--border);
  color: var(--snow);
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 400;
  white-space: nowrap;
  z-index: 30;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(2, 12, 27, 0.5);
}
.col-filter {
  width: 100%;
  min-width: 60px;
  background: rgba(11, 37, 69, 0.6);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--snow);
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-size: 0.82rem;
}
.col-filter::placeholder { color: rgba(141, 169, 196, 0.6); }

.grid tbody td {
  padding: 0.3rem 0.8rem;            /* tighter rows -> more fit per page */
  border-top: 1px solid var(--border);
  vertical-align: middle;
}
.grid tbody tr { cursor: pointer; }
.grid tbody tr:hover td { background: rgba(141, 169, 196, 0.06); }

/* Right-click "Vis i …" context menu */
.ctx-menu {
  position: fixed; z-index: 50; min-width: 210px; padding: 0.3rem;
  background: #0e2a4d; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(2, 12, 27, 0.55);
}
.ctx-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; color: var(--snow); font: inherit; font-size: 0.9rem;
  padding: 0.45rem 0.7rem; border-radius: 6px;
}
.ctx-item:hover:not(:disabled) { background: rgba(141, 169, 196, 0.2); }
.ctx-item:disabled { opacity: 0.4; cursor: default; }
.ctx-head {
  padding: 0.35rem 0.7rem 0.45rem; font-size: 0.78rem; font-weight: 600;
  color: var(--accent); border-bottom: 1px solid var(--border); margin-bottom: 0.25rem;
}
.ctx-menu-list { max-height: 60vh; overflow-y: auto; }

/* Klatrefelt/Kommune mode toggle that lives in the grid header. */
.view-toggle {
  cursor: pointer; font: inherit; font-weight: 600; color: var(--snow);
  background: rgba(141, 169, 196, 0.14); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.12rem 0.6rem;
}
.view-toggle:hover { background: rgba(141, 169, 196, 0.28); }
.view-toggle[aria-pressed="true"] { background: var(--accent); color: #0a2342; border-color: var(--accent); }
.col-symbol { text-align: center; }
.grid th.col-symbol { font-size: 0.78rem; }    /* smaller daypart headers */
.col-symbol .wsym { width: 1.7rem; height: 1.7rem; }
.col-num, .col-temp { white-space: nowrap; }
.col-temp .hi { color: #ff8f6b; font-weight: 600; }
.col-temp .lo { color: #7fb2e6; }
.col-text { cursor: pointer; display: flex; align-items: flex-start; gap: 0.55rem; }
.crag-body { min-width: 0; }
.col-text:hover .crag-name { text-decoration: underline; }
.row-grip {
  cursor: grab; color: var(--accent); font-size: 1.2rem; line-height: 1.3;
  touch-action: none; user-select: none; flex-shrink: 0;
}
.row-grip:active { cursor: grabbing; }
.grid tbody tr.dragging td { background: rgba(58, 110, 165, 0.28); }
.crag-name { font-weight: 600; font-size: 1.02rem; }
.crag-notes { color: var(--accent); font-size: 0.82rem; margin-top: 0.15rem; }
.row-links { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.row-links a {
  color: var(--snow);
  background: rgba(141, 169, 196, 0.15);
  border: 1px solid var(--border);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  text-decoration: none;
}
.row-links a:hover { background: rgba(141, 169, 196, 0.3); }
.col-action { text-align: center; }
.col-hvor { white-space: nowrap; color: var(--snow); font-size: 0.9rem; cursor: pointer; }
.col-hvor:hover { text-decoration: underline; }
.hvor-filter-btn {
  cursor: pointer; width: 100%;
  background: rgba(11, 37, 69, 0.6); border: 1px solid var(--border);
  border-radius: 6px; color: var(--accent); padding: 0.3rem 0.5rem;
  font: inherit; font-size: 0.82rem;
}
.hvor-filter-btn:hover { color: var(--snow); }
.hvor-filter-btn.active { color: var(--snow); border-color: #3a6ea5; background: rgba(58, 110, 165, 0.3); }

/* Hvor filter dialog */
/* Pinned to the right edge, vertically centered. */
.dialog.hvor-dialog { width: min(1100px, 95vw); max-width: 95vw; margin: auto 1.5rem auto auto; }
.dialog-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem;
  padding: 0.8rem 1.2rem; border-top: 1px solid var(--border);
}
.foot-spacer { flex: 1; }
.fav-status { color: var(--accent); font-size: 0.8rem; }
.hvor-body {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem;
  padding: 1rem 1.2rem; max-height: 70vh; overflow-y: auto;
}
@media (max-width: 720px) { .hvor-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hvor-note { font-size: 0.74rem; color: var(--accent); margin-top: 0.3rem; }
.hvor-col { display: flex; flex-direction: column; min-width: 0; }
.hvor-col-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.5rem; flex-wrap: wrap;
  font-weight: 600; color: var(--snow); margin-bottom: 0.4rem;
}
.hvor-acts { font-size: 0.78rem; font-weight: 400; white-space: nowrap; }
.hvor-acts a { color: var(--accent); cursor: pointer; text-decoration: underline; }
.hvor-acts a:hover { color: var(--snow); }
.hvor-search {
  width: 100%; background: rgba(11, 37, 69, 0.6); border: 1px solid var(--border);
  border-radius: 6px; color: var(--snow); padding: 0.3rem 0.5rem;
  font: inherit; font-size: 0.82rem; margin-bottom: 0.4rem;
}
.hvor-list {
  border: 1px solid var(--border); border-radius: 8px;
  max-height: 40vh; overflow-y: auto; overflow-x: hidden;
  background: rgba(11, 37, 69, 0.3);
}
.hvor-item {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.5rem; font-size: 0.85rem; cursor: pointer;
}
.hvor-item:hover { background: rgba(141, 169, 196, 0.1); }
.hvor-item input { width: auto; flex-shrink: 0; margin: 0; }
.hvor-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hvor-count { color: var(--accent); font-size: 0.78rem; flex-shrink: 0; }
.credit { margin-top: 1.5rem; text-align: center; font-size: 0.82rem; color: var(--accent); }
.credit a { color: var(--snow); }
.loading, .empty { color: var(--accent); text-align: center; padding: 1.5rem; }
.empty a { color: var(--snow); }

/* ---- Dialogs (Detaljer / Flere dager) ---- */
.dialog {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #0e2a4d;
  color: var(--snow);
  max-width: 560px;
  width: calc(100% - 2rem);
  padding: 0;
}
.dialog::backdrop { background: rgba(2, 12, 27, 0.6); }
.dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--border);
}
.dialog-head h2 { font-size: 1.1rem; }
.dialog-body { padding: 0.5rem 1.2rem 1.2rem; max-height: 70vh; overflow-y: auto; }
.sub-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.sub-table th {
  text-align: left; color: var(--accent); font-weight: 600;
  padding: 0.5rem 0.6rem; position: sticky; top: 0; background: #0e2a4d;
}
.sub-table td { padding: 0.45rem 0.6rem; border-top: 1px solid var(--border); white-space: nowrap; }
.sub-table .hi { color: #ff8f6b; font-weight: 600; }
.sub-table .lo { color: #7fb2e6; }
.sub-table .day-sep td {
  color: var(--accent); font-weight: 600; text-transform: capitalize;
  background: rgba(11, 37, 69, 0.5); border-top: 1px solid var(--border);
}

/* ---- Yr weather icons ---- */
.wsym { width: 2.1rem; height: 2.1rem; vertical-align: middle; display: inline-block; }
.sub-table .wsym { width: 1.6rem; height: 1.6rem; }

/* Compact Detaljer (hourly) table so ~24 hours fit visible at once. */
#hourly-dialog { max-width: 520px; }
#hourly-dialog .dialog-body { max-height: 85vh; }
#hourly-dialog .sub-table { font-size: 0.78rem; }
#hourly-dialog .sub-table td { padding: 0 0.6rem; line-height: 1; height: 20px; }
#hourly-dialog .sub-table .wsym { width: 1rem; height: 1rem; vertical-align: middle; }
#hourly-dialog .day-sep td { padding: 0.1rem 0.6rem; height: auto; line-height: 1.1; }

/* Flere dager (days) table: show all days without a scrollbar. */
#days-dialog .dialog-body { max-height: 88vh; }
#days-dialog .sub-table td { padding: 0.15rem 0.6rem; line-height: 1.1; }
#days-dialog .sub-table .wsym { width: 1.5rem; height: 1.5rem; }
#days-dialog .day-row { cursor: pointer; }
#days-dialog .day-row:hover td { background: #3a6ea5; color: #fff; }
#days-dialog .day-row:hover .hi, #days-dialog .day-row:hover .lo { color: #fff; }

/* ---- Admin ---- */
.admin { max-width: 820px; margin: 0 auto; padding: 1rem 1.5rem 5rem; position: relative; z-index: 1; }
.admin h1 { font-size: 2rem; text-align: left; margin-bottom: 1.5rem; }
.layout { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .layout { grid-template-columns: 360px 1fr; align-items: start; } }

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.3rem;
}
.panel h2 { font-size: 1.1rem; margin-bottom: 1rem; }
label { display: block; font-size: 0.85rem; color: var(--accent); margin: 0.8rem 0 0.3rem; }
input, textarea {
  width: 100%;
  background: rgba(11, 37, 69, 0.5);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--snow);
  padding: 0.55rem 0.7rem;
  font: inherit;
}
textarea { resize: vertical; min-height: 64px; }
.row { display: flex; gap: 0.6rem; }
.row > * { flex: 1; }

.subfields {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.9rem 0.9rem;
  margin: 1rem 0 0;
}

/* Klatretyper + live map side by side. */
.types-map-row { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; }
.types-map-row > .subfields { flex: 1 1 280px; margin-top: 1rem; }
.crag-map { display: flex; flex-direction: column; min-height: 240px; }
.crag-map iframe {
  flex: 1; width: 100%; min-height: 220px; border: 0; border-radius: 8px;
  background: rgba(11, 37, 69, 0.5);
}
.map-link { display: inline-block; margin-top: 0.4rem; font-size: 0.82rem; color: #7fb2e6; }

/* Read-only URL fields act as links. */
input.url-link {
  cursor: pointer; color: #7fb2e6; text-decoration: underline;
}
input.url-link:hover { color: #a7ccf0; }

/* ---- Favorites manage page ---- */
.muted { color: var(--accent); font-size: 0.9rem; }
.fav-list {
  list-style: none; padding: 0; margin: 1.4rem 0 5rem;
  display: grid; gap: 0.5rem; max-width: 720px;
}
.fav-item {
  display: flex; align-items: center; gap: 0.8rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 0.55rem 0.9rem;
}
.drag-handle {
  cursor: grab; color: var(--accent); font-size: 1.25rem;
  touch-action: none; user-select: none; flex-shrink: 0; padding: 0 0.1rem;
}
.drag-handle:active { cursor: grabbing; }
.fav-item.dragging { opacity: 0.6; border-color: #3a6ea5; background: rgba(58, 110, 165, 0.2); }
.fav-pos { color: var(--accent); font-size: 0.85rem; width: 1.8rem; text-align: right; flex-shrink: 0; }
.fav-name { flex: 1; font-weight: 600; min-width: 0; }
.fav-where { display: block; font-weight: 400; color: var(--accent); font-size: 0.8rem; }
.fav-ctrl { display: flex; gap: 0.35rem; flex-shrink: 0; }
.btn:disabled { opacity: 0.35; cursor: default; }
.subfields legend { padding: 0 0.4rem; color: var(--accent); font-size: 0.85rem; }
.chk { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0; cursor: pointer; }
.chk input { width: auto; flex-shrink: 0; margin: 0; }
.chk.standalone { margin-top: 1rem; }
.chk input:disabled + * , .chk:has(input:disabled) { opacity: 0.5; }
.linkrow { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: center; }
.linkrow input { flex: 1; }
.btn {
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(141, 169, 196, 0.15);
  color: var(--snow);
  padding: 0.55rem 1rem;
}
.btn:hover { background: rgba(141, 169, 196, 0.3); }
.btn.primary { background: #3a6ea5; border-color: #3a6ea5; }
.btn.primary:hover { background: #4a80bb; }
.btn.danger { background: rgba(180, 60, 60, 0.2); border-color: rgba(180, 60, 60, 0.5); }
.btn.danger:hover { background: rgba(180, 60, 60, 0.4); }
.btn.small { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.actions { display: flex; gap: 0.6rem; margin-top: 1.2rem; }

.list { display: grid; gap: 0.8rem; }
.item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.item h3 { font-size: 1.05rem; }
.item .meta { color: var(--accent); font-size: 0.85rem; margin-top: 0.2rem; }
.item .item-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.status { min-height: 1.2rem; margin-top: 0.8rem; font-size: 0.9rem; color: var(--accent); }

/* ---- Feedback editor (Tilbakemelding) ---- */
.editor-toolbar { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.4rem 0; }
.editor {
  min-height: 9rem; max-height: 60vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
  background: rgba(11, 37, 69, 0.4); color: var(--snow);
  padding: 0.7rem 0.9rem; font-size: 0.95rem; line-height: 1.5;
}
.editor:focus { outline: none; border-color: #3a6ea5; }
.editor:empty::before { content: attr(data-placeholder); color: var(--accent); }
.editor img { max-width: 100%; height: auto; border-radius: 8px; margin: 0.3rem 0; }

/* ---- Feedback review (admin) ---- */
.fb-item { padding: 0.8rem 1rem; }
.fb-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.fb-meta { color: var(--accent); font-size: 0.9rem; }
.fb-controls { display: flex; gap: 0.5rem; align-items: center; }
.fb-status { font: inherit; padding: 0.25rem 0.4rem; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--snow); }
.fb-frame { width: 100%; min-height: 80px; max-height: 480px; border: 1px solid var(--border); border-radius: 8px; background: #fff; margin-top: 0.6rem; }
.fb-item.fb-done { opacity: 0.6; }

/* ---- Date navigator (topbar) ---- */
.datenav { display: inline-flex; align-items: center; gap: 0.5rem; }
.date-label { font-weight: 600; min-width: 9.5rem; text-align: center; }
.date-arrows { display: inline-flex; flex-direction: column; line-height: 0; }
.datebtn {
  cursor: pointer; border: 1px solid var(--border); color: var(--snow);
  background: var(--card); font-size: 0.6rem; padding: 0.1rem 0.45rem;
}
.date-arrows .datebtn:first-child { border-radius: 6px 6px 0 0; border-bottom: none; }
.date-arrows .datebtn:last-child { border-radius: 0 0 6px 6px; }
.datebtn:hover:not(:disabled) { background: rgba(141, 169, 196, 0.25); }
.datebtn:disabled { opacity: 0.3; cursor: default; }

/* ---- Weather-filter config affordance ---- */
.wf { display: inline-flex; align-items: stretch; }
.wf .toggle { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wf-cfg {
  cursor: pointer; border: 1px solid var(--border); border-left: none; color: var(--snow);
  background: var(--card); padding: 0 0.45rem; border-radius: 0 8px 8px 0; font-size: 0.7rem;
}
.wf-cfg:hover { background: rgba(141, 169, 196, 0.25); }
.icon-filter-btn { cursor: pointer; }

/* ---- Popovers (filter config + icon picker) ---- */
.popover {
  position: fixed; z-index: 60; min-width: 180px; padding: 0.5rem;
  background: #0e2a4d; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(2, 12, 27, 0.55);
}
.pop-title { font-size: 0.78rem; font-weight: 600; color: var(--accent); margin-bottom: 0.4rem; }
.pop-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.1rem; cursor: pointer; }
.pop-row input { width: auto; }
.pop-row .wsym { width: 1.5rem; height: 1.5rem; }
.pop-mode { display: flex; gap: 0.3rem; margin-top: 0.5rem; }
.pop-mode-btn {
  flex: 1; cursor: pointer; border: 1px solid var(--border); color: var(--snow);
  background: var(--card); border-radius: 6px; padding: 0.25rem 0.4rem; font: inherit; font-size: 0.85rem;
}
.pop-mode-btn.active { background: #3a6ea5; border-color: #3a6ea5; color: #fff; }
.icon-pop-list { max-height: 50vh; overflow-y: auto; }
.pop-empty { color: var(--accent); font-size: 0.85rem; padding: 0.3rem 0.1rem; }
.pop-clear {
  margin-top: 0.5rem; width: 100%; cursor: pointer; border: 1px solid var(--border);
  color: var(--snow); background: var(--card); border-radius: 6px; padding: 0.25rem; font: inherit;
}
.pop-clear:hover { background: rgba(141, 169, 196, 0.2); }

/* ======================================================================
   Mobile (phone) layout — cards + bottom sheet. Desktop is untouched.
   ====================================================================== */

/* Compact controls + bottom sheet are hidden / inert until phone width. */
.m-controls { display: none; }
.m-crumbs { display: none; }

.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto;
  width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 16px 16px 0 0; padding: 1rem 1.1rem 1.6rem;
  background: #0e2a4d; color: var(--snow);
}
.sheet::backdrop { background: rgba(2, 12, 27, 0.6); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.sheet-head h3 { font-size: 1.2rem; min-width: 0; }
.sheet-x { background: none; border: none; color: var(--accent); font-size: 1.3rem; cursor: pointer; padding: 0.2rem 0.4rem; }
.sheet-meta { color: var(--accent); font-size: 0.9rem; margin-top: 0.2rem; }
.sheet-routes { font-size: 0.85rem; margin-top: 0.3rem; }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.9rem; }
.sheet-actions .btn { width: 100%; text-align: center; }
.sheet-up { display: grid; gap: 0.5rem; margin-top: 0.5rem; }   /* full-width rows for longer labels */
.sheet-up .btn { width: 100%; text-align: center; }
.sheet-section { color: var(--accent); font-size: 0.8rem; margin: 1rem 0 0.4rem; text-transform: uppercase; letter-spacing: 0.03em; }
.sheet-list { display: grid; gap: 0.4rem; max-height: 42vh; overflow-y: auto; }
.sheet-crag, .sheet-link {
  text-align: left; background: var(--card); border: 1px solid var(--border); color: var(--snow);
  border-radius: 8px; padding: 0.65rem 0.85rem; font: inherit; cursor: pointer;
}
.sheet-crag:active, .sheet-link:active:not(:disabled) { background: rgba(141, 169, 196, 0.25); }
.sheet-link:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 640px) {
  .page { padding: 0.4rem 0.6rem 4rem; }
  .topbar { padding: 0.5rem 0.7rem; gap: 0.4rem; flex-wrap: wrap; }
  .topbar-left { gap: 0.7rem; flex-wrap: wrap; }
  .brand { font-size: 0.98rem; }
  .date-label { min-width: 7.5rem; font-size: 0.92rem; }

  /* Mobile control bar (replaces the table header). */
  .m-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin: 0.4rem 0 0.3rem; }
  .m-controls #m-search { grid-column: 1 / -1; }
  .m-controls .toggle, .m-controls select, .m-controls input {
    padding: 0.55rem 0.7rem; font-size: 0.9rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--card); color: var(--snow);
  }
  .m-controls .toggle.active { background: #3a6ea5; border-color: #3a6ea5; color: #fff; }

  /* Geographic breadcrumb (zoom out). */
  .m-crumbs.show { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.35rem; margin: 0.2rem 0 0.3rem; }
  .crumb {
    cursor: pointer; font: inherit; font-size: 0.84rem; color: var(--snow);
    background: rgba(141, 169, 196, 0.16); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.25rem 0.6rem;
  }
  .crumb:active { background: rgba(141, 169, 196, 0.32); }
  .crumb-sep { color: var(--accent); font-size: 0.8rem; }

  /* Filter toolbars collapse behind the "Filtre" button. */
  #filter-area { display: none; margin-top: 0.3rem; }
  #filter-area.open { display: block; }
  .toolbar { gap: 0.4rem; margin-top: 0.4rem; }

  /* Table → cards. */
  .grid-wrap { border: none; background: none; border-radius: 0; margin-top: 0.4rem; }
  .grid thead { display: none; }
  .grid, .grid tbody { display: block; }
  .grid tbody tr { display: block; }
  .grid td.card-cell { display: block; border: none; padding: 0; }
  .grid tbody tr:hover td { background: none; }
  .grid td.empty, .grid td.loading { display: block; text-align: center; padding: 1.4rem; }

  .card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "fav name temp" "icons icons icons" "meta meta meta";
    align-items: center; column-gap: 0.5rem; row-gap: 0.45rem;
    border: 1px solid var(--border); border-radius: 12px; background: var(--card);
    padding: 0.6rem 0.7rem; margin-bottom: 0.5rem;
  }
  .card-fav { grid-area: fav; background: none; border: none; color: var(--accent); font-size: 1.45rem; line-height: 1; padding: 0 0.1rem 0 0; cursor: pointer; }
  .card-fav.is-fav { color: #ffd166; }
  .card-fav-spacer { grid-area: fav; width: 0.2rem; }
  .card-name { grid-area: name; font-weight: 600; font-size: 1.05rem; min-width: 0; }
  .card-sub { color: var(--accent); font-weight: 400; font-size: 0.82rem; }
  .card-temp { grid-area: temp; white-space: nowrap; font-weight: 600; }
  .card-temp .hi { color: #ff8f6b; } .card-temp .lo { color: #7fb2e6; }
  .card-icons { grid-area: icons; display: flex; justify-content: space-between; gap: 0.2rem; }
  .ci { display: flex; flex-direction: column; align-items: center; gap: 0.12rem; flex: 1 1 0; min-width: 0; }
  .ci-lbl { font-size: 0.62rem; color: var(--accent); }
  .ci-sym img.wsym { width: 2.1rem; height: 2.1rem; }
  .card-meta { grid-area: meta; display: flex; justify-content: space-between; color: var(--accent); font-size: 0.85rem; gap: 0.5rem; }
  .card-hvor {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
    text-underline-offset: 2px; padding: 0.15rem 0.3rem 0.15rem 0; margin: -0.15rem 0;
  }
  .card-nums { white-space: nowrap; }

  /* Dialogs use most of the screen. */
  .dialog { width: 96vw; max-width: 96vw; padding: 0.9rem; }
  .dialog-head h2 { font-size: 1.15rem; }
  /* Phone: cap the Hvor dialog and pin its footer so "Bruk" stays reachable.
     [open] keeps the rule off the closed dialog (display:flex would otherwise
     override the browser's display:none and leave it stuck on screen). */
  .dialog.hvor-dialog { margin: auto; width: 96vw; padding: 0; }
  .dialog.hvor-dialog[open] { display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; }
  .hvor-dialog .hvor-body { max-height: none; flex: 1 1 auto; min-height: 0; }
  .hvor-dialog .dialog-foot { flex-shrink: 0; }
}

/* Footer version tag */
.version-tag { display: inline-block; margin-left: 0.4rem; opacity: 0.6; font-size: 0.78rem; }