/* Layout: klocka och källor överst, dygnsband, karta + städer, sedan väder och tidtabell i full bredd */
:root {
  /* Nordiskt tema – ljust: björk och linne, fjordblått, tallgrönt, hjortron och lingon */
  --bg: #f4f2ee; --surface: #ffffff; --ink: #1f2a33; --muted: #5e6971; --line: #e4e0d8;
  --awake: #c27a2c; --asleep: #3d5a80; --day: #f3e6c8; --twilight: #cdd3e1; --night: #5b6b8c;
  --sea: #e7ecee; --ok: #3f7a55; --bad: #b5443b; --warn: #9c6b12; --rain: #386a96;
  --taxi: #b88a12; --m-metro: #2a6db5; --m-train: #7a4aa8; --m-tram: #a5561a; --m-bus: #b23a3f; --m-ferry: #1f7a80;
  --on-color: #ffffff; /* text på färgade brickor (linjenummer m.m.) */
  --w-yellow: #d9a90f; --w-orange: #d8661c; --w-red: #c4202a;
  --shadow: 0 1px 2px rgb(31 42 51 / .04), 0 6px 20px rgb(31 42 51 / .06);
  --display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --radius: 18px;
  color-scheme: light;
}
/* Nordiskt tema – mörkt: polarnatt med norrskensgrönt */
:root[data-theme="dark"] {
  --bg: #0f1820; --surface: #16222c; --ink: #e9eef1; --muted: #93a3ae; --line: #253441;
  --awake: #f0b45a; --asleep: #86a9d6; --day: #5c6878; --twilight: #34465a; --night: #18232f;
  --sea: #121d26; --ok: #6fc896; --bad: #f08a80; --warn: #e8bd5a; --rain: #7fb2e5;
  --taxi: #f0cb5c; --m-metro: #64a6ec; --m-train: #bb94e4; --m-tram: #eea35c; --m-bus: #ee8088; --m-ferry: #56c3c5;
  color-scheme: dark;
  --on-color: #0f1820;
  --w-yellow: #f0cc4a; --w-orange: #ff9150; --w-red: #ff6a64;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 20px rgb(0 0 0 / .25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1820; --surface: #16222c; --ink: #e9eef1; --muted: #93a3ae; --line: #253441;
  --awake: #f0b45a; --asleep: #86a9d6; --day: #5c6878; --twilight: #34465a; --night: #18232f;
  --sea: #121d26; --ok: #6fc896; --bad: #f08a80; --warn: #e8bd5a; --rain: #7fb2e5;
  --taxi: #f0cb5c; --m-metro: #64a6ec; --m-train: #bb94e4; --m-tram: #eea35c; --m-bus: #ee8088; --m-ferry: #56c3c5;
  color-scheme: dark;
  --on-color: #0f1820;
  --w-yellow: #f0cc4a; --w-orange: #ff9150; --w-red: #ff6a64;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 20px rgb(0 0 0 / .25);
  }
}
* { box-sizing: border-box; }
/* "hidden" ska alltid dölja – annars vinner t.ex. display: grid och förslagslistor ligger kvar på skärmen */
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); line-height: 1.5; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
/* Korten får krympa – annars gör breda tabeller (som skrollar i sidled) hela sidan bredare än mobilen */
.wrap > * { min-width: 0; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; }
h1 { font-size: clamp(26px, 4vw, 38px); }
h2 { font-size: 20px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.label { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.spacer { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; }

.top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; }
.top .title { display: grid; gap: 2px; flex: 1 1 260px; min-width: 0; }
.clock { display: grid; justify-items: end; }
.clock .time { font-size: clamp(34px, 6vw, 52px); line-height: 1; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.badge.paused .dot, .badge.warn .dot { background: var(--awake); }
.badge.bad .dot { background: var(--bad); }
@media (prefers-reduced-motion: no-preference) { #mode:not(.paused) .dot { animation: pulse 2s ease-in-out infinite; } }
@keyframes pulse { 50% { opacity: .35; } }
.sources { display: flex; flex-wrap: wrap; gap: 8px; }

.band, .card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.band { padding: 16px 18px; display: grid; gap: 10px; }
.band-head { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: baseline; }
.band-head .big { font-family: var(--display); font-size: 28px; font-weight: 700; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
select, button, input { font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); padding: 6px 12px; }
button, select { cursor: pointer; }
button:hover, select:hover { border-color: var(--muted); }
:focus-visible { outline: 2px solid var(--awake); outline-offset: 2px; }
button.primary { color: var(--surface); }
#scrub { width: 100%; margin: 0; padding: 0; border: 0; background: none; accent-color: var(--awake); }

.main { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 820px) { .main { grid-template-columns: minmax(0, 1fr); } }
.mapcard { position: relative; background: var(--sea); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 8px; justify-items: center; }
#map { display: block; max-width: 100%; cursor: pointer; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); justify-content: center; }
.legend-toggle { display: inline-flex; align-items: center; gap: 0; cursor: pointer; }
.legend-toggle input { margin: 0 6px 0 0; accent-color: var(--ink); cursor: pointer; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.sw-day { background: var(--day); } .sw-twilight { background: var(--twilight); } .sw-night { background: var(--night); }
.sw-radar { background: linear-gradient(90deg, #0a0, #ff0, #f80, #d00); } .sw-plane { background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%); }
.side { display: grid; gap: 20px; min-width: 0; }
.cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 8px; }
.city { text-align: left; display: grid; gap: 6px; background: var(--surface); padding: 10px 12px; }
.city[aria-pressed="true"] { border-color: var(--ink); }
.city .row .name { font-weight: 600; flex: 1; min-width: 0; }
.city .temp { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.chip { font-weight: 600; white-space: nowrap; }

.detail { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: grid; }
.detail-head { padding: 16px 18px; display: grid; gap: 12px; border-bottom: 1px solid var(--line); }
.detail-title { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 12px; }
.stat { display: grid; gap: 2px; align-content: start; }
.stat .v { font-family: var(--display); font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; white-space: nowrap; }
td.r, th.r { text-align: right; }
td .count { font-family: var(--mono); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tag { font-size: 11px; font-weight: 600; white-space: nowrap; }
.tag.est { color: var(--awake); } .tag.live { color: var(--ok); } .tag.late { color: var(--warn); } .tag.bad { color: var(--bad); }
.line { display: inline-block; min-width: 2.4em; text-align: center; font-weight: 700; font-family: var(--mono); font-size: 13px;
  padding: 1px 6px; border-radius: 5px; color: var(--on-color); background: var(--muted); }
.line.METRO { background: var(--m-metro); } .line.TRAIN { background: var(--m-train); } .line.TRAM { background: var(--m-tram); }
.line.BUS { background: var(--m-bus); } .line.FERRY { background: var(--m-ferry); }
.lines { display: flex; flex-wrap: wrap; gap: 4px; }
.notice { margin: 0; padding: 10px 14px; border-radius: 8px; font-size: 14px; background: color-mix(in srgb, var(--awake) 12%, transparent); }
.notice.bad { background: color-mix(in srgb, var(--bad) 12%, transparent); }
.empty { color: var(--muted); padding: 16px 14px; }
code { font-family: var(--mono); font-size: 12px; background: var(--bg); padding: 1px 5px; border-radius: 4px; }

.card { display: grid; grid-template-columns: minmax(0, 1fr); } /* kolumnen får inte växa efter breda tabeller */
.card-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; border-bottom: 1px solid var(--line); }
.weather-body { padding: 14px 18px 18px; display: grid; gap: 16px; min-width: 0; }

.wx-icon { width: 44px; height: 44px; flex: none; }
.wx-icon.sm { width: 26px; height: 26px; }
#wx-chart { height: 170px; }
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr)); gap: 8px; }
.day { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: var(--bg); text-align: center; }
.day .d { font-size: 12px; font-weight: 600; text-transform: capitalize; }
.day .t { font-family: var(--mono); font-size: 13px; }
.day .p { font-family: var(--mono); font-size: 11px; color: var(--rain); }

.tt-controls { display: grid; grid-template-columns: minmax(0, 2fr) auto auto; gap: 12px 16px; padding: 14px 18px 4px; align-items: end; }
@media (max-width: 760px) { .tt-controls { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.search { position: relative; min-width: 0; }
.search input { width: 100%; }
.suggest { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / .18); max-height: 320px; overflow-y: auto; display: grid; }
.suggest button { border: 0; border-radius: 0; background: none; text-align: left; padding: 8px 12px; display: grid; gap: 0; }
.suggest button:hover, .suggest button:focus-visible { background: var(--bg); outline: none; }
.seg { display: inline-flex; overflow: hidden; }

.filters { display: flex; flex-wrap: wrap; padding: 10px 18px; }

#board .board-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 4px 18px 10px; }
.when { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.when s { color: var(--muted); font-size: 12px; margin-right: 4px; }
.when.late b { color: var(--warn); }
tr.canceled td { color: var(--muted); }
tr.canceled .when b { text-decoration: line-through; }

.note { font-size: 13px; color: var(--muted); max-width: 80ch; display: grid; }
.note p { margin: 0; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--surface);
  padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 10; max-width: calc(100% - 32px); }

/* Kollektivtrafiken: huvudman, biljett och priser */
.transit-body { padding: 14px 18px 18px; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
@media (max-width: 820px) { .transit-body { grid-template-columns: minmax(0, 1fr); } }
.transit-body h3 { font-size: 17px; }
.who { display: grid; gap: 10px; align-content: start; }
.who a { color: var(--ink); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.prices { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.prices td, .prices th { padding: 10px 12px; }
.price { font-family: var(--display); font-size: 22px; font-weight: 700; white-space: nowrap; }
.price s { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.src { font-size: 12px; color: var(--muted); display: grid; gap: 2px; }
.src a { color: var(--muted); word-break: break-all; }

/* Störningar */
.dev { display: grid; gap: 4px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.dev:last-child { border-bottom: 0; }
.dev-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.dev-title { font-weight: 600; }
.dev-text { font-size: 14px; color: var(--muted); max-width: 90ch; }
.dev-meta { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.dev.new { box-shadow: inset 3px 0 0 var(--bad); }
.more { padding: 12px 18px; }
.city .warn { font-size: 11px; font-weight: 600; color: var(--bad); }
.who .label { display: block; margin-bottom: 2px; }

/* Livekarta och adressök */
.live-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 12px 18px; align-items: end; }
@media (max-width: 760px) { .live-tools { grid-template-columns: minmax(0, 1fr); } }
.live-tools .filters { padding: 0; }
/* Kartan i ett eget lager – annars lägger sig Leaflets lager (z-index 400–1000) över förslagslistorna */
#livemap { position: relative; z-index: 0; isolation: isolate; height: 540px; max-height: 70vh; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--sea); }
.live-note { padding: 8px 18px; font-size: 13px; color: var(--muted); display: grid; gap: 6px; }
.live-note:empty { display: none; }
.leaflet-container { font-family: var(--body); }
.leaflet-popup-content { font-size: 13px; line-height: 1.45; margin: 10px 12px; }
.leaflet-popup-content strong { font-size: 14px; }
#near .near-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 12px 18px 4px; }
.walk { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.walk.miss { color: var(--muted); text-decoration: line-through; }
.walk.hurry { color: var(--warn); font-weight: 600; }
.in { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.near-title { padding: 14px 18px 4px; display: grid; gap: 2px; }
.near-group { border-top: 1px solid var(--line); }
.near-group .near-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 12px 18px 4px; }
.near-group .near-head h3 { font-size: 16px; }
.near-group td:first-child { width: 110px; }
.near-group td:nth-child(2) { width: 70px; }
#trains .near-group td:nth-child(2) { width: auto; white-space: nowrap; }
/* Trafikslag längre bort: hopfällda under en rad */
.near-more, .taxi-all { border-top: 1px solid var(--line); }
.near-more > summary, .taxi-all > summary { cursor: pointer; padding: 12px 18px; color: var(--muted); font-size: 14px; list-style: none; }
.near-more > summary::-webkit-details-marker, .taxi-all > summary::-webkit-details-marker { display: none; }
.near-more > summary::before, .taxi-all > summary::before { content: "▸"; display: inline-block; width: 1.2em; transition: transform .15s; }
.near-more[open] > summary::before, .taxi-all[open] > summary::before { transform: rotate(90deg); }
.near-more > summary:hover, .taxi-all > summary:hover { color: var(--ink); }

/* Var är du / vart ska du / bästa resan */
.live-tools { grid-template-columns: minmax(0, 1fr); }
.where { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; }
@media (max-width: 900px) { .where { grid-template-columns: minmax(0, 1fr); } }
.where .row { flex-wrap: wrap; }
.where .row input { flex: 1 1 200px; min-width: 0; }
.where button[aria-pressed="true"] { background: var(--awake); color: var(--on-color); border-color: var(--awake); }
#livemap.picking { cursor: crosshair; }
#livemap.picking .leaflet-interactive { cursor: crosshair; }
#best:empty, #plan:empty { display: none; }
.best { margin: 12px 18px; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--ok); display: grid; gap: 6px; }
.best .label { color: var(--ok); }
.best .big { font-family: var(--display); font-size: 20px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.alts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.trips { display: grid; }
.trip { display: grid; gap: 6px; padding: 12px 18px; text-align: left; border-radius: 0; border: 0; border-top: 1px solid var(--line); background: none; }
.trip[aria-pressed="true"] { background: var(--bg); }
.trip.is-best { box-shadow: inset 3px 0 0 var(--ok); }
.trip-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.trip-head .times { font-family: var(--mono); font-size: 18px; font-weight: 500; }
.legs { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 13px; }
.legs .walkleg, .legs .arrow { color: var(--muted); }

/* Taxi */
.taxis { display: grid; }
.taxi-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 18px; border-top: 1px solid var(--line); align-items: baseline; }
.taxi-name { display: grid; gap: 2px; }
.taxi-title { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.taxi-price { font-family: var(--mono); font-size: 18px; font-weight: 500; white-space: nowrap; }
.taxi-row > .small { grid-column: 1 / -1; }
.uber-btn { display: inline-block; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: var(--ink); color: var(--surface); text-decoration: none; }

/* Flikar under livekartan */
.tabs { display: flex; gap: 4px; margin: 14px 18px 0; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.tabs [role=tab] { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px;
  border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s; }
.tabs [role=tab]:hover { color: var(--ink); }
.tabs [role=tab][aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 0 0 1px var(--line); }
.tabs [role=tab]:focus-visible { outline: 2px solid var(--rain); outline-offset: 2px; }
.tabs svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#tab-transit[aria-selected="true"] svg { color: var(--m-metro); }
#tab-taxi[aria-selected="true"] svg { color: var(--taxi); }
.tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-chip { font-family: var(--mono); font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 14%, transparent); white-space: nowrap; }
.tab-chip:empty { display: none; }
#tab-transit[aria-selected="true"] .tab-chip { background: color-mix(in srgb, var(--m-metro) 16%, transparent); }
#tab-taxi[aria-selected="true"] .tab-chip { background: color-mix(in srgb, var(--taxi) 24%, transparent); }
.tab-panel { padding-bottom: 6px; }
.tab-empty { margin: 14px 18px; padding: 18px; border: 1px dashed var(--line); border-radius: 12px; display: grid; gap: 4px; color: var(--muted); }
.tab-empty strong { color: var(--ink); font-family: var(--display); font-size: 16px; }
.taxi-best { border-color: var(--taxi); }
.taxi-best .label { color: color-mix(in srgb, var(--taxi) 65%, var(--ink)); }
.taxi-row.is-best { box-shadow: inset 3px 0 0 var(--taxi); }
@media (max-width: 520px) { .tabs { margin: 12px 16px 0; } .tabs [role=tab] { padding: 9px 8px; gap: 6px; } .tab-chip { display: none; } }

/* Tidsreglaget */
.scrub-scale { position: relative; height: 16px; margin: -4px 9px 0; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.scrub-scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
/* Reglaget går från −60 till +2880 minuter: nu ligger 60/2940 in, varje 12 h 720/2940 längre */
.scrub-scale span:nth-child(1) { left: 2.04%; transform: translateX(-30%); }
.scrub-scale span:nth-child(2) { left: 26.53%; }
.scrub-scale span:nth-child(3) { left: 51.02%; }
.scrub-scale span:nth-child(4) { left: 75.51%; }
.scrub-scale span:nth-child(5) { left: 100%; transform: translateX(-100%); }
#wx-play[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.temp-scale { display: inline-flex; align-items: center; gap: 4px; }
.temp-scale i { width: 70px !important; height: 8px !important; border-radius: 4px !important; margin: 0 !important;
  background: linear-gradient(90deg, rgb(49 54 149), rgb(69 117 180), rgb(171 217 233), rgb(166 217 106), rgb(254 224 139), rgb(253 174 97), rgb(215 48 39)); }

/* Städerna: temperaturfärg till vänster */
.city { box-shadow: inset 4px 0 0 var(--tc, var(--line)); padding-left: 14px; }
.city[aria-pressed="true"] { box-shadow: inset 4px 0 0 var(--tc, var(--line)), inset 0 0 0 1px var(--ink); }
.city .row { display: flex; align-items: center; gap: 6px; }
.city .ctemp { font-family: var(--mono); font-size: 16px; font-weight: 500; }
.wx-icon.xs { width: 22px; height: 22px; }

/* Väderkortet */
.wx-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--tc) 30%, var(--surface)), var(--surface) 70%); border: 1px solid var(--line); }
.wx-hero .big { font-family: var(--display); font-size: 52px; font-weight: 700; line-height: 1; }
.wx-hero .wx-icon { width: 60px; height: 60px; }
.wx-hero-text { display: grid; gap: 2px; min-width: 0; }
.wx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 8px; }
.wx-tile { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border-radius: 10px; background: var(--bg); min-width: 0; }
.wx-tile .v { font-family: var(--display); font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.wx-tile.wide { grid-column: span 2; }
@media (max-width: 520px) { .wx-tile.wide { grid-column: auto; } }
.wind-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wx-section { display: grid; gap: 8px; min-width: 0; }
.wx-section-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.wx-nowcast-text { margin: 0; }
svg.nowcast { width: 100%; height: 86px; display: block; }
#wx-map { height: 380px; border-radius: 10px; border: 1px solid var(--line); position: relative; z-index: 0; isolation: isolate; background: var(--sea); }
#wx-chart { width: 100%; display: block; touch-action: none; cursor: ew-resize; user-select: none; }
.wx-at { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 8px 12px; border-radius: 10px; background: var(--bg); font-size: 14px; min-height: 44px; }
.wx-at > strong { font-family: var(--mono); font-size: 20px; }
.wx-at span { display: inline-flex; align-items: center; gap: 3px; }
.wx-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); }
.wx-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: 3px; }
.wx-legend i.dash { background: none; border-top: 2px dashed; height: 0; }
.wx-legend i.dot { background: none; border-top: 2px dotted; height: 0; }
.wx-legend .k-temp { background: var(--awake); } .wx-legend .k-band { background: var(--awake); opacity: .3; }
.wx-legend .k-smhi { border-color: var(--muted); } .wx-legend .k-feels { border-color: var(--asleep); }
.wx-legend .k-dew { background: var(--m-ferry); } .wx-legend .k-rain { background: var(--rain); } .wx-legend .k-wind { background: var(--ink); }
.wx-legend .k-hum { background: var(--m-metro); } .wx-legend .k-pres { background: var(--m-train); }
/* Mörkt läge: kartbilderna (OpenStreetMap) inverteras – fordon, radar och linjer ligger i andra lager och påverkas inte */
html[data-dark] #livemap .leaflet-tile-pane, html[data-dark] #wx-map .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.88) saturate(.55); }
html[data-dark] .leaflet-container { background: var(--sea); }
html[data-dark] .leaflet-bar a, html[data-dark] .leaflet-bar a:hover { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-dark] .leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--muted); }
html[data-dark] .leaflet-control-attribution a { color: var(--rain); }
html[data-dark] .leaflet-popup-content-wrapper, html[data-dark] .leaflet-popup-tip, html[data-dark] .leaflet-tooltip {
  background: var(--surface); color: var(--ink); border-color: var(--line); }

/* Temaknappen */
.theme-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 10px; border-radius: 999px; }
.theme-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.clock-row { display: flex; align-items: center; }

/* Vädervarningar */
.wbadge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 5px;
  background: color-mix(in srgb, var(--rain) 18%, transparent); color: var(--ink); white-space: nowrap; }
.wbadge.YELLOW { background: var(--w-yellow); color: #1a1500; }
.wbadge.ORANGE { background: var(--w-orange); color: #1a0a00; }
.wbadge.RED { background: var(--w-red); color: #fff; }

.city .wx-warn { font-size: 11px; font-weight: 600; }
.city .wx-warn:empty { display: none; }
.city .wx-warn.YELLOW { color: color-mix(in srgb, var(--w-yellow) 70%, var(--ink)); }
.city .wx-warn.ORANGE { color: var(--w-orange); } .city .wx-warn.RED { color: var(--w-red); }
.wx-warnings { display: grid; gap: 6px; }
.wx-warning { border: 1px solid var(--line); border-left: 4px solid var(--rain); border-radius: 10px; padding: 8px 12px; background: var(--bg); }
.wx-warning.YELLOW { border-left-color: var(--w-yellow); } .wx-warning.ORANGE { border-left-color: var(--w-orange); }
.wx-warning.RED { border-left-color: var(--w-red); }
.wx-warning summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; cursor: pointer; }
.wx-warning p { margin: 8px 0 0; font-size: 14px; white-space: pre-line; }
.sw-warn { background: color-mix(in srgb, var(--w-yellow) 40%, transparent); outline: 1.5px solid var(--w-yellow); }

/* Väglag och halka */
.road-body { padding: 14px 18px 18px; display: grid; gap: 14px; min-width: 0; }
.road-hero { display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); border-left: 5px solid var(--ok); background: var(--bg); }
.road-hero strong { font-family: var(--display); font-size: 20px; }
.road-hero.risk1 { border-left-color: var(--w-yellow); } .road-hero.risk2 { border-left-color: var(--w-orange); } .road-hero.risk3 { border-left-color: var(--w-red); }
.road-list { display: grid; gap: 6px; }
.road-item { display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--bg); border-left: 4px solid var(--w-orange); }
.road-item.code3 { border-left-color: var(--w-red); }
.road-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.road-no { font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 0 6px; border-radius: 4px; background: #1f6fc5; color: #fff; white-space: nowrap; }
.road-table td, .road-table th { padding: 7px 12px; }
.road-table tr.risk2 td:first-child, .road-table tr.risk3 td:first-child { box-shadow: inset 3px 0 0 var(--w-orange); }
.road-table tr.risk3 td:first-child { box-shadow: inset 3px 0 0 var(--w-red); }
.risk-chip { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.risk-chip.risk1 { background: color-mix(in srgb, var(--w-yellow) 25%, transparent); color: color-mix(in srgb, var(--w-yellow) 60%, var(--ink)); }
.risk-chip.risk2 { background: var(--w-orange); color: #1a0a00; } .risk-chip.risk3 { background: var(--w-red); color: #fff; }
.cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.cam { display: grid; border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); color: inherit; text-decoration: none; }
.cam:hover { border-color: var(--muted); }
.cam img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--sea); }
.cam-text { display: grid; padding: 6px 10px 8px; }
.city .road-warn { font-size: 11px; font-weight: 600; color: var(--w-orange); }
.city .road-warn:empty { display: none; }
.city .road-warn.risk3 { color: var(--w-red); }
.sw-road { background: var(--w-orange); height: 4px !important; vertical-align: 2px !important; }

/* Väglag och kameror på livekartan */
.line.ROAD { background: var(--w-orange); color: #1a0a00; }
.line.CAM { background: var(--ink); color: var(--surface); }
.cam-marker { display: grid; place-items: center; background: var(--ink); color: var(--surface); border-radius: 50%; border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgb(0 0 0 / .35); }
.cam-marker svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.map-cam img { display: block; width: 100%; border-radius: 6px; margin-bottom: 6px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sea); }

/* Luftkvalitet och blixtar */
.aqi { font-family: var(--mono); font-size: 14px; padding: 0 6px; border-radius: 5px; color: #10210f; background: #50f0e6; }
.aqi1 { background: #50ccaa; } .aqi2 { background: #f0e641; } .aqi3 { background: #ff5050; color: #fff; }
.aqi4 { background: #960032; color: #fff; } .aqi5 { background: #7d2181; color: #fff; }
.sw-bolt { background: none; border: 0; width: 10px; height: 10px; position: relative; }
.sw-bolt::before, .sw-bolt::after { content: ""; position: absolute; left: 4px; top: -1px; width: 1.5px; height: 12px; background: var(--w-yellow); }
.sw-bolt::before { transform: rotate(45deg); } .sw-bolt::after { transform: rotate(-45deg); }

/* Sparade resor */
.favs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.favs:empty { display: none; }
.fav { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--bg); }
.fav button { border: 0; border-radius: 0; background: none; font-size: 13px; padding: 3px 10px; }
.fav button:hover { background: var(--surface); }
.fav .fav-del { padding: 3px 8px; color: var(--muted); border-left: 1px solid var(--line); }
#save-fav { white-space: nowrap; }
.leave { font-weight: 700; color: var(--ok); }
.leave.now { color: var(--bad); }

/* App: offline och notiser */
.badge.offline { color: var(--warn); border-color: var(--warn); }
#mode.offline .dot { background: var(--warn); animation: none; }
#notify-btn[aria-pressed="true"] { color: var(--ok); border-color: var(--ok); }

.clock-row { flex-wrap: wrap; justify-content: flex-end; }

/* Inloggning (mobilen via --lan) */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(420px, 100%); padding: 24px; display: grid; gap: 12px; }
.login-card input { width: 100%; }

/* Statussidan */
.st-server { padding: 16px 18px; }
.st-table td, .st-table th { padding: 8px 12px; vertical-align: top; }
.st-chip { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.st-chip.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.st-chip.fel { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.st-bar { overflow: hidden; margin: 6px 0 2px; }
.st-bar span { display: block; height: 100%; background: var(--ok); }
.st-bar span.warn { background: var(--w-orange); }
.st-over { color: var(--bad); font-weight: 600; }
.st-note { padding: 0 18px 16px; }
.credits a { margin-left: 6px; }

/* Varning när man klickar på ett område på Sverigekartan */
#map.over-warning { cursor: pointer; }
.map-pop { position: absolute; z-index: 5; width: min(300px, calc(100% - 16px)); max-height: 70%; overflow-y: auto; display: grid; gap: 10px;
  padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 24px rgb(0 0 0 / .25); }
.map-pop-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-right: 22px; }
.map-pop-item { display: grid; gap: 4px; }
.map-pop-item p { margin: 2px 0 0; white-space: pre-line; }
.map-pop-close { position: absolute; top: 6px; right: 6px; border: 0; background: none; font-size: 18px; line-height: 1; padding: 4px 8px; color: var(--muted); }

/* Kamerabilder som inte gick att hämta */
.cam-frame { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--sea); overflow: hidden; }
.cam-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-frame.failed img { visibility: hidden; }
.cam-frame.failed::after { content: attr(data-msg); position: absolute; inset: 0; display: grid; place-items: center; padding: 12px;
  text-align: center; font-size: 13px; color: var(--muted); }
.map-cam .cam-frame { border-radius: 6px; margin-bottom: 6px; }

/* Språkväljaren */
.lang-select { appearance: auto; padding: 3px 8px; cursor: pointer; }

/* Min pendling */
.commute { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.commute .card-head button { font-size: 13px; padding: 3px 10px; }
.commute .card-head .ghost { background: none; border-color: transparent; color: var(--muted); font-size: 18px; line-height: 1; }
.commute-body { padding: 12px 18px 16px; display: grid; gap: 12px; min-width: 0; }
.commute-route { display: grid; gap: 2px; }
.commute-hero { display: grid; gap: 4px; padding: 12px 16px; border-radius: 12px; background: var(--bg); border-left: 5px solid var(--ok); }
.commute-hero.now { border-left-color: var(--bad); }
.commute-leave { font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--ok); }
.commute-hero.now .commute-leave { color: var(--bad); }
.commute-trips { display: grid; }
.commute-trip { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.commute-trip .times { font-size: 16px; }
.commute-trip.canceled .times { text-decoration: line-through; color: var(--muted); }
.commute-trip .legs { flex: 1 1 200px; }
.commute-wxs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.commute-wx { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--bg); align-content: start; }
.commute-wx > span:nth-child(2) { display: flex; align-items: center; gap: 6px; }
.commute-go { padding: 0 18px 14px; }
.commute-go summary { cursor: pointer; font-weight: 600; width: fit-content; }
.commute-go[data-on] summary { color: var(--ok); }
.commute-go-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; margin: 10px 0 6px; }
.commute-go-row label { display: grid; gap: 3px; font-size: 13px; color: var(--muted); }
.commute-go p { margin: 4px 0 0; max-width: 70ch; }

/* Hållplatsens egen sida (/hallplats/…): texten överst i tidtabellen, och länkarna till hållplatser i sidfoten */
.stop-intro { padding: 0 18px 6px; }
.stop-intro h3 { margin: 0 0 2px; font-family: var(--display); font-size: 20px; }
.stop-intro p { margin: 0; }
.stop-links { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 10px; }
.stop-links:empty { display: none; }

/* Mina hållplatser (07l-favoriter.js) och stjärnan i tidtabellen */
.mystops-body { padding: 12px 18px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.ms-stop { display: grid; gap: 6px; align-content: start; padding: 10px 12px; border-radius: 12px; background: var(--bg); min-width: 0; }
.ms-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ms-open { font-weight: 700; font-size: 16px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ms-del { background: none; border-color: transparent; color: var(--muted); font-size: 18px; line-height: 1; padding: 2px 8px; }
.ms-deps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ms-dep { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.ms-dest { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-when { font-weight: 600; white-space: nowrap; }
.ms-dep.canceled .ms-dest { text-decoration: line-through; color: var(--muted); }
.board-head .stop-star { margin-left: auto; font-size: 13px; padding: 3px 10px; }
.stop-star[aria-pressed="true"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }

/* UV-index och norrsken */
.uv { font-family: var(--mono); font-size: 14px; padding: 0 6px; border-radius: 5px; color: #10210f; }
.uv0 { background: #6cc24a; } .uv1 { background: #f2d33a; } .uv2 { background: #f28c28; } .uv3 { background: #d8382c; color: #fff; } .uv4 { background: #8a4fb8; color: #fff; }
.aurora { font-size: 16px; }
.aurora1 { color: var(--warn); } .aurora2, .aurora3 { color: var(--ok); }
.aurora3::after { content: " ✦"; }

/* Elpriset */
.power-body { padding: 14px 18px 18px; display: grid; gap: 14px; min-width: 0; }
#power-areas button { font-size: 13px; padding: 3px 10px; font-family: var(--mono); }
.power-hero { display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; background: var(--bg); border-left: 5px solid var(--warn); }
.power-hero.cheap { border-left-color: var(--ok); } .power-hero.dear { border-left-color: var(--bad); }
.power-hero .big { font-family: var(--mono); font-size: 34px; font-weight: 500; }
.power-chart { width: 100%; height: auto; display: block; }
.power-chart rect.cheap { fill: var(--ok); } .power-chart rect.mid { fill: var(--warn); } .power-chart rect.dear { fill: var(--bad); }
.power-chart rect { opacity: .75; } .power-chart rect.now { opacity: 1; stroke: var(--ink); stroke-width: 1.5; }
.power-chart line.avg { stroke: var(--ink); stroke-dasharray: 4 3; stroke-width: 1; opacity: .6; }
.power-chart line.zero { stroke: var(--muted); stroke-width: 1; }
.power-chart text { font-size: 11px; fill: var(--muted); font-family: var(--mono); }
.power-chart text.day { font-family: var(--display); font-weight: 600; fill: var(--ink); }
.power-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.power-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.power-legend i.cheap { background: var(--ok); } .power-legend i.mid { background: var(--warn); } .power-legend i.dear { background: var(--bad); }
.power-legend i.avg { height: 0; border-top: 2px dashed var(--ink); border-radius: 0; vertical-align: 3px; }

/* Tågtrafiken */
.trains-body { padding: 14px 18px 18px; display: grid; gap: 16px; min-width: 0; }
.trains-stats .v.good, .ops .good { color: var(--ok); } .trains-stats .v.ok, .ops .ok { color: var(--warn); } .trains-stats .v.bad, .ops .bad { color: var(--bad); }
.trains-table .delay { font-weight: 700; color: var(--warn); white-space: nowrap; }
.trains-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.ops { display: grid; gap: 6px; }
.op { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(60px, 1fr) 3.2em; gap: 10px; align-items: center; font-size: 14px; }
.op .num { text-align: right; font-weight: 700; }
.op-bar svg { width: 100%; height: 6px; display: block; border-radius: 3px; }
.op-bar rect.bg { fill: var(--line); } .op-bar rect.good { fill: var(--ok); } .op-bar rect.ok { fill: var(--warn); } .op-bar rect.bad { fill: var(--bad); }

/* Lättversionen (GitLab Pages): det som kräver servern döljs */
html[data-lite] .full-only { display: none !important; }
html:not([data-lite]) .lite-only { display: none !important; }
.lite-banner { margin: 0; padding: 10px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  border-left: 5px solid var(--rain); font-size: 14px; }

/* VMA – Viktigt meddelande till allmänheten */
.vma { display: grid; gap: 10px; }
.vma-item { padding: 14px 18px; border-radius: 14px; background: #b8001c; color: #fff; display: grid; gap: 6px; box-shadow: 0 2px 10px rgb(0 0 0 / .25); }
.vma-item:not(.here) { background: #7a1022; }
.vma-item p { margin: 0; }
.vma-item a { color: #fff; font-weight: 600; }
.vma-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.vma-badge { font-family: var(--mono); font-weight: 700; background: #fff; color: #b8001c; padding: 0 8px; border-radius: 5px; letter-spacing: .05em; }
.vma-title { font-family: var(--display); font-size: 22px; font-weight: 700; }

/* Krisinformation */
.kris-list { display: grid; }
.kris { padding: 12px 18px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.kris:first-child { border-top: 0; }
.kris.here { box-shadow: inset 3px 0 0 var(--bad); }
.kris h3 { font-size: 16px; } .kris h3 a { color: inherit; }
.kris p { margin: 0; color: var(--muted); }
.kris-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }

/* Händelser på vägarna och vägfärjor */
.line.EVENT { background: var(--w-red); }
.ev-marker { display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 1px 4px rgb(0 0 0 / .35); color: #fff; }
.ev-marker svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ev-marker.ev-accident { background: var(--w-red); } .ev-marker.ev-obstacle, .ev-marker.ev-queue { background: var(--w-orange); }
.ev-marker.ev-closed { background: #8a1020; } .ev-marker.ev-ferry { background: var(--m-ferry); }
.ev-marker.ev-roadwork { background: var(--w-yellow); color: #1a1500; } .ev-marker.ev-other { background: var(--muted); }
.ev-chip { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 4px; color: #fff; background: var(--muted); white-space: nowrap; }
.ev-chip.ev-accident { background: var(--w-red); } .ev-chip.ev-obstacle, .ev-chip.ev-queue { background: var(--w-orange); color: #1a0a00; }
.ev-chip.ev-closed { background: #8a1020; } .ev-chip.ev-ferry { background: var(--m-ferry); } .ev-chip.ev-roadwork { background: var(--w-yellow); color: #1a1500; }
.road-item.ev-accident, .road-item.ev-closed { border-left-color: var(--w-red); } .road-item.ev-roadwork { border-left-color: var(--w-yellow); }
.road-item.ev-ferry { border-left-color: var(--m-ferry); }
.ferries { display: grid; gap: 6px; }
.ferry { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 6em) minmax(0, 1fr); gap: 4px 12px; padding: 8px 12px; border-radius: 10px; background: var(--bg); align-items: baseline; }
@media (max-width: 640px) { .ferry { grid-template-columns: minmax(0, 1fr); } }
.ferry-dep { display: inline-block; margin-right: 14px; max-width: 100%; overflow-wrap: anywhere; }
.ferry-dep b { white-space: nowrap; }

/* Elpris-påminnelse och väggskärmslänk */
#power-remind { font-size: 13px; padding: 3px 10px; }
#power-remind[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: #fff; }
a.theme-btn { text-decoration: none; color: var(--ink); background: var(--bg); border: 1px solid var(--line); line-height: 1.5; }
a.theme-btn:hover { border-color: var(--muted); }

/* Väggskärmen (skarm.html) */
body.screen { background: var(--bg); }
.screen-wrap { max-width: 1600px; margin: 0 auto; padding: clamp(12px, 2vw, 28px); display: grid; gap: clamp(12px, 1.6vw, 22px); min-height: 100vh; align-content: start; }
.screen-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; }
.screen-time { font-family: var(--mono); font-size: clamp(56px, 10vw, 150px); line-height: .9; font-weight: 500; display: block; }
.screen-date { display: block; font-family: var(--display); font-size: clamp(18px, 2.2vw, 30px); color: var(--muted); }
.screen-date::first-letter { text-transform: uppercase; }
.screen-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.screen-back { color: var(--muted); font-size: 14px; }
.screen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: clamp(12px, 1.6vw, 22px); }
@media (min-width: 1100px) { .screen-wx { grid-column: span 2; } }
.screen-card { background: var(--surface); border: 1px solid var(--line); padding: clamp(14px, 1.6vw, 24px); display: grid; gap: 12px; align-content: start;
  font-size: clamp(16px, 1.4vw, 22px); min-width: 0; }
.screen-card p { margin: 0; }
.screen-label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.screen-wx-now { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.screen-icon { width: clamp(64px, 7vw, 110px); height: clamp(64px, 7vw, 110px); }
.screen-temp { font-size: clamp(48px, 6vw, 96px); font-weight: 500; }
.screen-wx-text { display: grid; gap: 2px; }
.screen-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.screen-hour { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: var(--bg); }
.screen-hour .rain { color: var(--rain); min-height: 1.2em; }
.screen-warn { padding: 8px 12px; border-radius: 10px; background: var(--bg); border-left: 5px solid var(--w-yellow); }
.screen-warn.ORANGE { border-left-color: var(--w-orange); } .screen-warn.RED { border-left-color: var(--w-red); }
.screen-trip { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--bg); border-left: 5px solid var(--ok); }
.screen-trip:not(.first) { opacity: .75; }
.screen-trip.now { border-left-color: var(--bad); }
.screen-leave { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 40px); color: var(--ok); }
.screen-trip.now .screen-leave { color: var(--bad); }
.screen-big { font-family: var(--mono); font-size: clamp(44px, 5vw, 80px); line-height: 1; display: flex; align-items: baseline; gap: 10px; }
.screen-big .small { font-family: var(--body); font-size: 16px; color: var(--muted); }
.screen-news { display: grid; gap: 10px; }
.screen-foot { text-align: right; }
/* Väggskärmen på en plats (gym, butik, kontor, hemma): namn och adress till vänster, klockan till höger */
.screen-clock { display: grid; }
body.has-place .screen-top { align-items: end; flex-wrap: nowrap; }
body.has-place .screen-clock { text-align: right; margin-left: auto; }
.screen-grid { grid-auto-flow: dense; }
.screen-place { gap: 2px; }
.screen-place-name { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.4vw, 52px); line-height: 1.05; }
.screen-place-addr { font-size: clamp(16px, 1.6vw, 24px); color: var(--muted); }

.screen-sub { margin-top: 4px; }
.screen-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.screen-day { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; background: var(--bg); text-align: center; }
.screen-day-name { font-weight: 600; font-size: 14px; }
.screen-day-name::first-letter { text-transform: uppercase; }
.screen-day .rain { color: var(--rain); min-height: 1.2em; }
.screen-setup { width: min(520px, calc(100vw - 32px)); border: 0; border-radius: 20px; padding: 22px; background: var(--surface); color: var(--ink);
  box-shadow: 0 20px 60px rgb(0 0 0 / .3); }
.screen-setup::backdrop { background: rgb(15 24 32 / .45); }
.screen-setup form { display: grid; gap: 8px; }
.screen-setup h2 { margin: 0; font-family: var(--display); }
.screen-setup .field { margin-top: 6px; }
.screen-setup input[type="text"], .screen-setup input[type="search"] { width: 100%; }
.screen-setup .search { position: relative; }
.screen-setup .bad { color: var(--bad); margin: 0; }
.screen-link { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.screen-link .row { display: flex; gap: 6px; }
.screen-link input { flex: 1; min-width: 0; font-size: 12px; }
.screen-setup-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.screen-setup-actions .spacer { flex: 1; }

/* --- Nordiskt tema: luftigt, mjuka hörn, lätta skuggor i stället för tydliga ramar --- */
body { font-size: 15px; letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { letter-spacing: -0.02em; }
h1 { font-weight: 800; }
h2 { font-weight: 700; }
.label { letter-spacing: .1em; }
.band, .card, .detail, .mapcard { border-radius: var(--radius); border-color: transparent; box-shadow: var(--shadow); }
.card-head { border-bottom-color: var(--line); padding: 16px 20px; }
.city { border-radius: 14px; }
.wx-tile, .road-item, .commute-hero, .power-hero, .commute-wx, .screen-hour, .screen-trip, .screen-warn { border-radius: 14px; }
select, button, input { border-radius: 10px; }
button.primary { background: var(--ink); border-color: var(--ink); }
.screen-card { border-color: transparent; box-shadow: var(--shadow); border-radius: 22px; }

/* Namnet och loggan */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: clamp(48px, 6.5vw, 62px); height: auto; border-radius: 22%; flex: none; box-shadow: 0 4px 14px rgb(15 30 70 / .22); }  /* hela loggan – stor nog att detaljerna syns */
.brand b { color: var(--awake); font-weight: 800; }

/* --- Flikar. Datorn: en flikrad under sidhuvudet som följer med när man skrollar. --- */
html.tabbed .view-off { display: none !important; }
.desknav { position: sticky; top: 0; z-index: 1100; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  margin: -6px -16px 0; padding: 4px 16px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.desknav button { display: flex; align-items: center; gap: 7px; padding: 11px 16px 10px; background: none; border: 0; border-radius: 0;
  border-bottom: 3px solid transparent; margin-bottom: -1px; font: 600 14.5px var(--body); color: var(--muted); cursor: pointer; white-space: nowrap; }
.desknav button:hover { color: var(--ink); }
.desknav button[aria-current="page"] { color: var(--ink); border-bottom-color: var(--awake); }
.desknav button:focus-visible { outline: 2px solid var(--asleep); outline-offset: -4px; border-radius: 8px; }
.desknav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tab-count { background: var(--bad); color: var(--on-color); border-radius: 999px; font: 700 10.5px var(--body); padding: 1px 7px; line-height: 1.5; }
.tab-count[hidden] { display: none; }
/* Kort som skrollas fram (goTo, länkar) hamnar under flikraden – inte bakom den */
html.tabbed .wrap > * { scroll-margin-top: 64px; }
@media (max-width: 760px) { html.tabbed .wrap > * { scroll-margin-top: 12px; } }

/* --- Mobilen: flikar längst ner (Hem, Väder, Resa, Trafik) och Mer-menyn. --- */
.appnav, .more-sheet, .sheet-backdrop { display: none; }
@media (max-width: 760px) {
  .desknav { display: none; }
  html.tabbed body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  html.tabbed .clock-row > :not(#mode) { display: none; }  /* språk, tema, notiser m.m. finns under Mer */
  html.tabbed .top { align-items: center; flex-wrap: nowrap; justify-content: space-between; gap: 10px; }
  html.tabbed .top .label, html.tabbed #date { display: none; }
  html.tabbed .top .title { flex: 0 1 auto; }
  html.tabbed .brand { font-size: 26px; gap: 8px; }
  html.tabbed .brand-logo { width: 46px; }
  html.tabbed .clock { gap: 4px; justify-items: end; }
  html.tabbed .clock .time { font-size: 22px; }
  html.tabbed .clock-row { gap: 4px; }
  .appnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--surface);
    border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); justify-content: space-around;
    box-shadow: 0 -4px 18px rgb(31 42 51 / .06); }
  .appnav button { flex: 1; display: grid; justify-items: center; gap: 2px; background: none; border: 0; border-radius: 12px; padding: 4px 0;
    font: 600 11px var(--body); color: var(--muted); min-width: 0; }
  .appnav button svg { width: 24px; height: 24px; padding: 2px 14px; box-sizing: content-box; border-radius: 999px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: background .15s; }
  .appnav button[aria-current="page"] { color: var(--ink); }
  .appnav button[aria-current="page"] svg { background: color-mix(in srgb, var(--awake) 22%, transparent); }
  .sheet-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1001; background: rgb(15 24 32 / .35); }
  .more-sheet:not([hidden]) { display: grid; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1002; background: var(--surface);
    border-radius: 22px 22px 0 0; padding: 10px 16px calc(84px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 30px rgb(0 0 0 / .2);
    max-height: 85vh; overflow-y: auto; animation: sheet-up .2s ease-out; }
  .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto; }
  .more-head { display: flex; align-items: center; justify-content: space-between; }
  .more-close { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted); padding: 0 6px; }
  .more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .more-tile { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 12px 6px; border-radius: 14px; background: var(--bg);
    border: 0; color: var(--ink); text-decoration: none; font: 600 12.5px var(--body); text-align: center; cursor: pointer; min-width: 0; position: relative; }
  .more-tile svg { width: 24px; height: 24px; fill: none; stroke: var(--asleep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .more-tile small { font-weight: 500; color: var(--muted); font-size: 11px; }
  .more-tile[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--awake); }
  .more-tile select { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
  .more-tile[hidden] { display: none; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .more-sheet { animation: none !important; } }
/* Inget kort får göra sidan bredare än mobilen (då zoomar webbläsaren ut hela sidan) */
@media (max-width: 760px) { html, body { overflow-x: clip; } }

/* Bil */
.car-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 8px; margin: 4px 18px 0; }
.car-hero > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border-left: 4px solid var(--asleep); }
.car-hero.warn > div:last-child { border-left-color: var(--w-orange); }
.car-hero .big { font-family: var(--display); font-size: 22px; font-weight: 800; }
#car > p.small, #car > .wx-section, #car > .car-settings { margin: 10px 18px 0; }
.car-ok { margin: 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 12%, transparent); }
.car-settings > span.small { display: block; }
.car-form { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0 4px; }
.car-form label { display: grid; gap: 2px; font-size: 12px; color: var(--muted); }
.car-form input { width: 7.5em; }
.toll-list { display: grid; border-radius: 12px; background: var(--bg); overflow: hidden; }
.toll-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line); }
.toll-row:first-child { border-top: 0; }
.toll-row > span:first-child { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.toll-row .num { font-weight: 700; white-space: nowrap; }
.toll-row.total { background: color-mix(in srgb, var(--awake) 10%, transparent); }
#car > .wx-section .toll-list + .small { display: block; margin-top: 6px; }

/* --- Tyck till (feedback), Om-sidan och adminsidan --- */
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-links a, .foot-links button.link { color: var(--muted); }   /* sidfoten: lugn, en färg */

/* Om-fliken: om tjänsten till vänster, Tyck till till höger (under varandra i mobilen) */
.om-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .om-grid { grid-template-columns: 1fr; } }
.om-grid > .card { padding-bottom: 18px; }
.om-grid > .card > :not(.card-head) { margin-left: 20px; margin-right: 20px; }
.om-grid h3 { margin: 16px 20px 4px; font-size: 15px; }
.om-grid p { margin-top: 0; margin-bottom: 6px; }
.om-lead { margin-top: 14px !important; font-size: 17px; }
.om-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 4px; }
.om-facts > div { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: var(--bg); font-size: 13px; color: var(--muted); }
.om-facts strong { font-family: var(--display); font-size: 18px; color: var(--ink); }
@media (max-width: 480px) { .om-facts { gap: 6px; } .om-facts > div { padding: 9px 8px; font-size: 12px; } .om-facts strong { font-size: 15px; } }
.om-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.om-feedback .card-head + p { margin-top: 14px; }

/* Hållplatserna under Trafik: en hopfälld rad – länkarna finns ändå i sidan (för Google) */
.stop-card summary { padding: 14px 20px; cursor: pointer; font-weight: 600; }
.stop-card[open] summary { border-bottom: 1px solid var(--line); }
.stop-card .stop-links { padding: 12px 20px 16px; margin: 0; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--asleep); text-decoration: underline; cursor: pointer; }
.feedback-dlg { width: min(520px, calc(100vw - 32px)); border: 0; border-radius: 20px; padding: 22px; background: var(--surface); color: var(--ink);
  box-shadow: 0 20px 60px rgb(0 0 0 / .3); }
.feedback-dlg::backdrop { background: rgb(15 24 32 / .45); }
.feedback-dlg form { display: grid; gap: 8px; }
.feedback-dlg h2 { margin: 0; font-family: var(--display); }
.feedback-dlg textarea, .feedback-dlg input { width: 100%; font: inherit; }
.feedback-dlg textarea { resize: vertical; min-height: 110px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.feedback-dlg .bad { color: var(--bad); margin: 0; }
.feedback-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.feedback-actions .spacer { flex: 1; }
.stars { display: flex; gap: 4px; }
.stars button { border: 0; background: none; font-size: 30px; line-height: 1; padding: 2px 4px; color: var(--line); cursor: pointer; }
.stars button.on { color: var(--awake); }
.stars button:focus-visible { outline: 2px solid var(--asleep); border-radius: 6px; }
.om { max-width: 820px; }
.om-card { display: grid; gap: 10px; padding: 22px; }
.om-card h2, .om-card h3 { margin: 6px 0 0; font-family: var(--display); }
.om-card p, .om-card ul { margin: 0; line-height: 1.6; }
.om-card li + li { margin-top: 6px; }
.admin-tools { display: flex; gap: 8px; align-items: center; }
.admin-body { padding: 14px 18px; display: grid; gap: 10px; }
.fb-item { padding: 12px 14px; border-radius: 12px; background: var(--bg); display: grid; gap: 6px; }
.fb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.fb-head .spacer { flex: 1; }
.fb-stars { color: var(--awake); letter-spacing: 2px; font-size: 17px; }
.fb-text { margin: 0; white-space: pre-wrap; }
.admin-log { margin: 0; max-height: 60vh; overflow: auto; padding: 12px; border-radius: 12px; background: var(--bg); font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; }
.admin-log .bad { color: var(--bad); } .admin-log .warn { color: var(--warn); }
.card-head input[type="search"] { min-width: 0; width: 240px; }

/* --- Kundens väggskärm: logga, meddelande, pausad och gammal data --- */
.screen-place { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); }
.screen-place-text { display: grid; gap: 2px; }
.screen-logo { height: clamp(48px, 6vw, 96px); max-width: clamp(120px, 18vw, 280px); object-fit: contain; border-radius: 10px; }
.screen-msg { padding: clamp(12px, 1.4vw, 20px) clamp(16px, 2vw, 28px); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow);
  border-left: 8px solid var(--awake); }
.screen-msg-text { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.2vw, 36px); white-space: pre-wrap; }
/* Flera meddelanden: alla i samma ruta ovanpå varandra (rutan blir lika hög som det längsta), ett syns i taget */
.screen-msg-stack { display: grid; }
.screen-msg-stack > .screen-msg-text { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.screen-msg-stack > .screen-msg-text.on { opacity: 1; visibility: visible; }
.screen-msg-dots { display: flex; gap: 6px; margin-top: 8px; }
.screen-msg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.screen-msg-dot.on { background: var(--awake); }
@media (prefers-reduced-motion: reduce) { .screen-msg-stack > .screen-msg-text { transition: none; } }
.screen-paused { text-align: center; padding: clamp(24px, 4vw, 60px); }
body.paused .screen-grid, body.paused .screen-msg { display: none; }
.screen-foot.stale { color: var(--bad); font-weight: 600; font-size: 15px; }

body.paused .screen-foot { display: none; }
.k-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.k-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.k-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); align-self: center; }
.k-dot.on { background: var(--ok); }
.k-dot.off { background: var(--line); }
.la-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.la-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 12px; border-radius: 10px; background: var(--bg); }
.la-item.bad strong { color: var(--bad); }
.k-msgs { margin: 0 0 8px; padding: 0 0 0 22px; display: grid; gap: 12px; }
.k-msg { display: grid; gap: 6px; }
.k-msg textarea { width: 100%; }
.k-msg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
/* Viktigt: röd som det viktiga meddelandet på skärmen – inte webbläsarens blå */
.k-msg-viktig { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.k-msg-viktig input { width: 18px; height: 18px; margin: 0; accent-color: var(--bad); }
.k-msg-row label { display: flex; align-items: center; gap: 6px; }
.kund textarea { width: 100%; font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); resize: vertical; }
.small.ok { color: var(--ok); } .small.bad { color: var(--bad); }
/* Adminsidan: kunder, skärmar och fakturor */
.st-chip.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.st-chip.bad { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.st-chip.muted { background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }
.ku-item { padding: 14px; border-radius: 14px; background: var(--bg); display: grid; gap: 8px; margin-bottom: 10px; }
.ku-name { font-family: var(--display); font-size: 17px; }
.ku-logo { height: 28px; max-width: 90px; object-fit: contain; }
.ku-screens { display: grid; gap: 6px; }
.ku-screen, .ku-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ku-screen { padding: 8px 10px; border-radius: 10px; background: var(--surface); }
.ku-screen .spacer, .ku-actions .spacer { flex: 1; }
.ku-actions select { padding: 2px 6px; }
.admin-dlg { width: min(620px, calc(100vw - 32px)); max-height: 92vh; overflow: auto; }
.admin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.admin-row > div { display: grid; gap: 4px; }
.admin-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; cursor: pointer; }
/* kryssrutan i sin naturliga storlek, först på raden – inte 100 % bred som dialogens textfält */
.feedback-dlg input[type="checkbox"], .admin-check input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; accent-color: var(--awake); }
.admin-fs { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 12px; display: grid; gap: 6px; }
.admin-fs legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.admin-dlg .search { position: relative; }
.fa-table { width: 100%; }
.fa-act { white-space: nowrap; }
.admin-flash { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--surface);
  padding: 10px 18px; border-radius: 999px; z-index: 2000; font-weight: 600; }
@media (max-width: 600px) { .admin-row { grid-template-columns: 1fr; } }

/* --- Dela och tipset om hemskärmen --- */
#share-btn svg, .more-tile[data-share] svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.more-tile[data-share] svg { width: 24px; height: 24px; stroke: var(--asleep); }
#share-btn { display: inline-flex; align-items: center; gap: 6px; }
.install-hint { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1050; width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); color: var(--ink);
  box-shadow: 0 10px 30px rgb(0 0 0 / .2); border: 1px solid var(--line); }
.install-hint[hidden] { display: none; }
.install-hint img { border-radius: 10px; flex: none; }
.install-hint p { margin: 0; flex: 1; font-size: 14px; line-height: 1.4; }
.install-hint button { flex: none; }
.ios-share svg { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: var(--asleep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .install-hint { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; } .install-hint p { flex-basis: calc(100% - 60px); } }

/* Väggskärmen: QR-kod till gratisappen – egen plats i sidfoten (täcker aldrig något), samma storlek på alla skärmar.
   Vit bakgrund, så att alla mobiler kan läsa den även i mörkt tema. */
.screen-qr { --qr: 92px; display: flex; align-items: center; gap: 12px; flex: none; max-width: 100%; box-sizing: border-box;
  padding: 8px 14px 8px 8px; border-radius: 14px; background: #fff; color: #1f2a33; box-shadow: var(--shadow); }
.screen-qr[hidden] { display: none; }
.screen-qr svg { width: var(--qr); height: var(--qr); flex: none; display: block; }
.screen-qr div { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.screen-qr strong { font-family: var(--display); font-size: 17px; }
.screen-qr span { overflow-wrap: anywhere; }
body.paused .screen-qr { display: none; }

/* Adminsidan: besöksstatistiken */
.st-kpis { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.st-kpis div { display: grid; }
.st-kpis strong { font-family: var(--display); font-size: 30px; line-height: 1.1; }
.st-chart { display: flex; align-items: flex-end; gap: 2px; height: 110px; padding: 6px 0 0; border-bottom: 1px solid var(--line); }
.st-chart span { flex: 1; min-width: 1px; height: 0; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--rain) 25%, transparent);
  position: relative; }
.st-chart span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--inner, 0%);
  border-radius: 3px 3px 0 0; background: var(--rain); }
.st-axis { display: flex; justify-content: space-between; margin: -4px 0 0; }
.st-key { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 10px; border-radius: 2px; background: var(--rain); vertical-align: -1px; }
.st-key.light { background: color-mix(in srgb, var(--rain) 25%, transparent); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 24px; }
.st-list h3 { margin: 0 0 6px; font-size: 14px; }
.st-list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.st-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 14px; }
.st-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-n { font-variant-numeric: tabular-nums; color: var(--muted); }
.st-bar { grid-column: 1 / -1; display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--line); position: relative; }
.st-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 2px; background: var(--rain); }

/* Reseplaneraren: När? (åk nu, avgå eller framme senast) */
.when { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.when .field { margin: 0; }
.when input[type="datetime-local"] { min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit; color-scheme: light dark; }

/* --- Väggskärmen på en plats: allt på en skärm, ingen skrollning ---------------------------------------------
   Sidan är exakt skärmhög. Rubrik, meddelande och sidfot tar den plats de behöver; korten delar på resten.
   Avgångsrader som inte ryms tas bort nerifrån (skarm.js fit()). Liggande skärm är huvudfallet. */
.screen-bottom { display: flex; align-items: flex-end; gap: 10px 18px; flex-wrap: wrap; }
body.has-place .screen-bottom { flex-wrap: nowrap; }  /* QR-koden, texten och knappen på en rad – koden ligger alltid längst ner */
.screen-bottom-text { display: grid; gap: 2px; flex: 1 1 260px; min-width: 0; }
.screen-bottom .screen-foot { text-align: left; margin: 0; }
.screen-sources { margin: 0; }
.screen-bottom .screen-tools { margin-left: auto; }
body.has-place { overflow: hidden; }
body.has-place .screen-wrap { max-width: none; height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column;
  padding: clamp(10px, 1.6vmin, 26px) clamp(12px, 2vmin, 32px); gap: clamp(8px, 1.4vmin, 18px); box-sizing: border-box; }
body.has-place .screen-wrap > * { flex: none; }
body.has-place .screen-grid { flex: 1 1 auto; min-height: 0; display: grid; gap: clamp(8px, 1.4vmin, 18px);
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-areas: "deps wx" "deps power"; }
body.has-place .screen-deps { grid-area: deps; }
body.has-place .screen-wx { grid-area: wx; }
body.has-place .screen-power { grid-area: power; }
body.has-place.no-power .screen-grid { grid-template-areas: "deps wx" "deps wx"; }
body.has-place.no-wx .screen-grid { grid-template-areas: "deps power" "deps power"; }
body.has-place.no-deps .screen-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "wx power" "wx power"; }
body.has-place.no-deps.no-power .screen-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "wx" "wx"; }
body.has-place.no-deps.no-wx .screen-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "power" "power"; }
body.has-place.no-wx.no-power .screen-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "deps" "deps"; }
/* Min pendling på din egen skärm: under avgångarna, resorna bredvid varandra – väder och elpris kvar till höger */
body.has-place.has-commute #s-commute { grid-area: commute; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
body.has-place.has-commute #s-commute > .screen-label, body.has-place.has-commute #s-commute > p { grid-column: 1 / -1; }
body.has-place.has-commute .screen-trip { padding: clamp(6px, 1vmin, 12px) clamp(8px, 1.2vmin, 14px); font-size: clamp(12px, 1.6vmin, 19px); }
body.has-place.has-commute .screen-leave { font-size: clamp(18px, 3vmin, 36px); }
body.has-place.has-commute .screen-grid { grid-template-areas: "deps wx" "commute power"; }
body.has-place.has-commute.no-power .screen-grid { grid-template-areas: "deps wx" "commute wx"; }
body.has-place.has-commute.no-wx .screen-grid { grid-template-areas: "deps power" "commute power"; }
body.has-place.has-commute.no-wx.no-power .screen-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "deps" "commute"; }
body.has-place.has-commute.no-deps .screen-grid { grid-template-areas: "commute wx" "commute power"; }
body.has-place .screen-card { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: clamp(6px, 1.1vmin, 14px);
  padding: clamp(12px, 1.7vmin, 24px) clamp(14px, 2vmin, 28px); }
body.has-place .screen-card > * { flex: none; }
body.has-place .screen-label { font-size: clamp(11px, 1.35vmin, 16px); }
body.has-place .screen-time { font-size: clamp(44px, 10vmin, 150px); }
body.has-place .screen-date { font-size: clamp(15px, 2.6vmin, 34px); }
body.has-place .screen-place-name { font-size: clamp(22px, 4.6vmin, 60px); }
body.has-place .screen-place-addr { font-size: clamp(14px, 2.3vmin, 28px); }
body.has-place .screen-logo { height: clamp(40px, 8vmin, 110px); }
body.has-place .screen-msg { padding: clamp(8px, 1.4vmin, 18px) clamp(14px, 2vmin, 26px); }
body.has-place .screen-msg-text { font-size: clamp(16px, 3vmin, 38px); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.has-place .screen-wx-now { flex-wrap: nowrap; gap: clamp(8px, 1.4vmin, 18px); }
body.has-place .screen-icon { width: clamp(40px, 7vmin, 100px); height: clamp(40px, 7vmin, 100px); flex: none; }
body.has-place .screen-temp { font-size: clamp(30px, 6.4vmin, 88px); white-space: nowrap; letter-spacing: -.04em; }
body.has-place .screen-wx-text { font-size: clamp(13px, 1.9vmin, 23px); min-width: 0; }
body.has-place .screen-hours { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.has-place .screen-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.has-place .screen-hour, body.has-place .screen-day { padding: clamp(4px, .8vmin, 10px) 4px; font-size: clamp(12px, 1.6vmin, 18px); }
body.has-place .screen-day-name { font-size: clamp(12px, 1.5vmin, 17px); }
body.has-place .screen-big { font-size: clamp(36px, 7vmin, 92px); }
body.has-place .screen-big .small { font-size: clamp(13px, 1.8vmin, 20px); }
body.has-place .power-chart { flex: 1 1 auto; min-height: 30px; max-height: 15vmin; width: 100%; height: auto; }
.power-tip { margin: 0; font-size: clamp(14px, 2vmin, 24px); }
.power-tip strong { color: var(--ok); font-family: var(--display); }
.screen-station { margin: 0; }
.screen-stale { margin: 0; padding: 4px 10px; border-radius: 8px; background: color-mix(in srgb, var(--w-yellow) 18%, transparent); font-size: clamp(12px, 1.5vmin, 16px); }
.screen-empty { font-size: clamp(15px, 2.2vmin, 26px); }
/* Närmaste timmen (radar) */
.nowcast { display: grid; gap: 4px; }
.nowcast-text { font-weight: 600; font-size: clamp(14px, 2vmin, 24px); }
.nowcast.rain .nowcast-text { color: var(--rain); }
.nowcast-bars { display: flex; align-items: flex-end; gap: 2px; height: clamp(22px, 4.5vmin, 56px); }
.nowcast-bars i { flex: 1; border-radius: 2px 2px 0 0; background: var(--rain); }
.nowcast-bars i.dry { background: var(--line); }
.nowcast-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: clamp(11px, 1.3vmin, 14px); }

/* BRF/företag: "Gå nu" – en rad per avgång, sorterade efter när man måste gå */
.go-list { display: grid; gap: clamp(5px, 1vmin, 12px); align-content: start; }
.go-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .3em .9em; padding: .5em .8em;
  border-radius: 14px; background: var(--bg); font-size: clamp(14px, 2.15vmin, 28px); }
.go-row .line { font-size: 1.05em; min-width: 3em; text-align: center; padding: .12em .45em; }
.go-what { display: grid; min-width: 0; }
.go-dest { font-family: var(--display); font-weight: 700; font-size: 1.12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go-meta { color: var(--muted); font-size: .72em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go-when { text-align: right; font-family: var(--display); font-weight: 800; font-size: 1.4em; line-height: 1.05; white-space: nowrap; }
.go-row.go-now { background: color-mix(in srgb, var(--w-yellow) 26%, var(--surface)); }
.go-row.go-now .go-when { color: var(--warn); }
.go-row.go-ok { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); }

.go-row.canceled { background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
.go-row.canceled .go-dest { text-decoration: line-through; }
.go-row.canceled .go-when { color: var(--bad); }
.late-tag { color: var(--warn); font-weight: 700; }
.rt { display: inline-block; font: 600 .62em var(--body); letter-spacing: .02em; padding: .15em .6em; border-radius: 999px; vertical-align: middle;
  background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.rt.plan { background: transparent; color: var(--muted); border: 1px solid var(--line); }

/* Hemma: nästa avgång stort överst, fler avgångar under */
.next { display: grid; gap: .2em; padding: .7em 1em; border-radius: 18px; background: var(--bg); font-size: clamp(15px, 2.3vmin, 30px); }
.next.go-now { background: color-mix(in srgb, var(--w-yellow) 24%, var(--surface)); }
.next.go-ok { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.next.canceled { background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
.next-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5em; }
.next-head .line { font-size: 1.35em; padding: .1em .5em; min-width: 2.6em; text-align: center; }
.next-head .rt { font-size: .7em; }
.next-mode { color: var(--muted); font-weight: 600; }
.next-dest { font-family: var(--display); font-weight: 800; font-size: 2.1em; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-time { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2em .6em; font-size: 2em; line-height: 1.1; }
.next-time .num { font-family: var(--mono); }
.next-in { font-family: var(--display); font-weight: 800; color: var(--ok); }
.next.go-now .next-in { color: var(--warn); }
.next.canceled .next-in, .next.canceled .next-dest { color: var(--bad); }
.next.canceled .next-dest { text-decoration: line-through; }
.next-meta { color: var(--muted); font-size: .8em; }
.next-meta strong { color: var(--ink); }
.after-list { display: grid; align-content: start; }
.after-row { display: grid; grid-template-columns: 3.2em 4.6em auto minmax(0, 1fr) auto; align-items: center; gap: .7em; padding: .4em .2em;
  border-top: 1px solid var(--line); font-size: clamp(14px, 2vmin, 26px); }
.after-row:first-child { border-top: 0; }
.after-row .line { min-width: 2.6em; text-align: center; padding: .08em .4em; }
.after-time { font-family: var(--mono); }
.after-in { font-weight: 700; white-space: nowrap; }
.after-dest { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.after-row.canceled .after-dest { text-decoration: line-through; color: var(--bad); }
.after-row.canceled .after-in { color: var(--bad); }
.after-tags { display: flex; gap: .4em; align-items: center; }
body.lage-hemma .screen-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr); }
body.lage-hemma .screen-time { font-size: clamp(52px, 13vmin, 180px); }

/* Låga skärmar (surfplatta liggande, 800 px): mindre QR-kod och rubriker – mer plats åt korten */
@media (max-height: 900px) {
  body.has-place .screen-qr { --qr: 70px; padding: 6px 12px 6px 6px; }
  body.has-place .screen-qr strong { font-size: 15px; }
  body.has-place .screen-qr div { font-size: 12px; }
  body.has-place .screen-time { font-size: clamp(40px, 9vmin, 120px); }
  body.has-place .screen-big { font-size: clamp(30px, 6vmin, 80px); }
  body.lage-hemma .screen-time { font-size: clamp(48px, 12vmin, 160px); }
}

/* Stående skärm (surfplatta på högkant): en spalt – avgångarna först */
@media (max-aspect-ratio: 4/5) {
  body.has-place .screen-grid, body.has-place.lage-hemma .screen-grid { grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "deps" "wx" "power"; }
  body.has-place.no-deps .screen-grid { grid-template-rows: auto auto; grid-template-areas: "wx" "power"; }
  body.has-place.no-power .screen-grid { grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "deps" "wx"; }
  body.has-place.no-wx .screen-grid { grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "deps" "power"; }
  body.has-place.has-commute .screen-grid { grid-template-rows: minmax(0, 1fr) auto auto auto; grid-template-areas: "deps" "commute" "wx" "power"; }
  body.has-place .screen-wx .screen-days { display: none; }
  body.has-place .power-chart { max-height: 60px; }
}

/* Kundens sida: skärmens plats från surfplattans position */
.k-plats p { margin: 0; }
.k-plats-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.k-plats-out { display: grid; gap: 8px; justify-items: start; }

/* --- Säljsidan för väggskärmen (/vaggskarm) ----------------------------------------------------------------- */
body.sales { margin: 0; background: var(--bg); color: var(--ink); }
.sales-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px max(16px, calc((100vw - 1180px) / 2)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); }
.sales-brand { display: flex; align-items: center; gap: 10px; font: 800 22px var(--display); color: var(--ink); text-decoration: none; }
.sales-brand b { color: var(--awake); }
.sales-nav { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; margin-left: auto; }
.sales-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.sales-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 999px; border: 2px solid var(--awake);
  background: var(--awake); color: var(--on-color) !important; font: 700 16px var(--body); text-decoration: none; cursor: pointer; }
.sales-btn.ghost { background: transparent; color: var(--ink) !important; border-color: var(--line); }
.sales-btn.small { padding: 7px 14px; font-size: 14px; }
.sales-btn:disabled { opacity: .6; cursor: wait; }
.sales main { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; display: grid; gap: 28px; }
.sales-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: center; padding: 36px 0 8px; }
.sales-hero h1 { font: 800 clamp(32px, 4.6vw, 56px)/1.05 var(--display); margin: 8px 0 14px; letter-spacing: -.02em; }
.sales-kicker { margin: 0; color: var(--awake); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.sales-lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; margin: 0 0 18px; max-width: 64ch; }
.sales-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.sales-tv { margin: 0; padding: 10px; border-radius: 18px; background: #15191d; box-shadow: 0 20px 44px rgb(0 0 0 / .22); }
.sales-tv img { display: block; width: 100%; height: auto; border-radius: 6px; }
.sales-tv video { display: block; width: 100%; height: auto; border-radius: 6px; background: #071430; }
.sales-video { max-width: 1040px; margin: 22px auto 8px; }
.sales-brand img { border-radius: 22%; }   /* loggan med rundade hörn (ingen inline-stil – sidans säkerhetsregler tillåter det inte) */
.sales-tv-small { max-width: 760px; margin: 22px auto 0; }
.sales-section { background: var(--surface); border-radius: 22px; padding: clamp(20px, 3vw, 36px); box-shadow: var(--shadow); }
.sales-section h2 { font: 800 clamp(24px, 2.6vw, 34px)/1.15 var(--display); margin: 0 0 12px; }
.sales-section h3 { font: 800 20px var(--display); margin: 0 0 6px; }
.sales-go { display: grid; gap: 10px; max-width: 760px; margin: 6px 0 18px; }
.sales-go .go-row { font-size: 18px; }
.sales-points { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; font-size: 17px; }
.sales-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; }
.sales-plan { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 18px; background: var(--bg); border: 2px solid transparent; }
.sales-plan.featured { border-color: var(--awake); }
.sales-plan ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; }
.sales-plan .sales-btn { justify-self: start; }
.sales-price { margin: 0; font-size: 16px; color: var(--muted); }
.sales-price strong { font: 800 34px var(--display); color: var(--ink); }
.sales-soon { display: inline-block; vertical-align: .2em; margin-left: 6px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--awake) 16%, transparent);
  color: color-mix(in srgb, var(--awake) 75%, var(--ink)); font: 700 12px var(--body); letter-spacing: .04em; text-transform: uppercase; }
.sales-note { margin: 0; color: var(--muted); line-height: 1.55; }
.sales-plan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sales-steps { margin: 0; padding-left: 24px; display: grid; gap: 10px; font-size: 17px; line-height: 1.5; }
.sales-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.sales-grid p { margin: 0; line-height: 1.55; color: var(--muted); }
.sales details { border-top: 1px solid var(--line); padding: 12px 0; }
.sales details summary { cursor: pointer; font-weight: 700; font-size: 17px; }
.sales details p { margin: 8px 0 0; line-height: 1.55; }
.sales-form { display: grid; gap: 8px; max-width: 760px; }
.sales-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sales-form-row > div { display: grid; gap: 4px; }
.sales-form input[type="text"], .sales-form input[type="email"], .sales-form input[type="tel"], .sales-form input[type="number"],
.sales-form select, .sales-form textarea { width: 100%; box-sizing: border-box; font: inherit; }
.sales-form .admin-check input { width: 18px; height: 18px; flex: none; margin: 3px 0 0; accent-color: var(--awake); }
.sales-form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.sales-form-actions p { margin: 0; }
.sales-foot { max-width: 1180px; margin: 0 auto; padding: 10px 16px 40px; text-align: center; }
.sales-foot p { margin: 4px 0; }
@media (max-width: 860px) {
  .sales-hero { grid-template-columns: minmax(0, 1fr); padding-top: 22px; }
  .sales-nav a:not(.sales-btn) { display: none; }
  .sales-form-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {   /* mobilen: "Gå nu" på egen rad under destinationen, så att inget kortas */
  .sales-go .go-row { font-size: 15px; grid-template-columns: auto minmax(0, 1fr); }
  .sales-go .go-when { grid-column: 2; text-align: left; font-size: 1.25em; }
  .sales-go .go-meta { white-space: normal; }
}

/* --- Första besöket och "Innan du går" (07j-innan.js) ------------------------------------------------------ */
.intro { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 14px 18px; border-radius: 16px;
  background: color-mix(in srgb, var(--awake) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--awake) 35%, transparent); }
.intro[hidden] { display: none; }
.intro p { margin: 0; flex: 1 1 320px; line-height: 1.5; }
.before-body { padding: 4px 14px 2px; }
.before-now { margin: 4px 4px 8px; color: var(--muted); line-height: 1.5; }
.before-now:empty { display: none; }
.before-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.before-row { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px;
  text-align: left; border: 0; border-left: 5px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; }
.before-row:hover { background: color-mix(in srgb, var(--bg) 70%, var(--line)); }
.before-row.ok { border-left-color: var(--ok); }
.before-row.warn { border-left-color: var(--warn); }
.before-row.bad { border-left-color: var(--bad); }
.before-row.rain { border-left-color: var(--rain); }
.before-row.muted { border-left-style: dashed; }
.before-icon { display: grid; place-items: center; color: var(--muted); }
.before-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.before-icon .wx-icon { width: 30px; height: 30px; }
.before-text { display: grid; gap: 1px; min-width: 0; }
.before-text strong { font-family: var(--display); font-size: 17px; line-height: 1.25; }
.before-text span { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.before-text .before-name { font-size: inherit; display: inline; }
.before-extra { font-style: normal; font-weight: 600; color: var(--muted); }
.before-extra::before { content: "· "; }
.before-row.ok strong { color: var(--ok); }
.before-row.warn strong { color: var(--warn); }
.before-row.bad strong { color: var(--bad); }
.before-row.rain span { color: var(--rain); font-weight: 600; }
.before-arrow { color: var(--muted); font-size: 22px; }
.before-foot { display: grid; gap: 4px; padding: 6px 18px 14px; }
.before-foot p { margin: 0; }
.before-foot .link { justify-self: start; }

/* --- Reseplaneraren: nordiskt och lugnt -------------------------------------------------------------------
   Fälten och knapparna är lika höga och ligger i linje. Knapparna sitter ihop med sitt sökfält. Samma typsnitt
   överallt och samma utseende för När? som för flikarna Kollektivtrafik/Bil/Taxi. Mobilen: knapparna under fältet. */
#live { --ctl-h: 44px; --ctl-r: 12px; --lift: 0 1px 2px rgb(31 42 51 / .06), 0 2px 6px rgb(31 42 51 / .04); }
#live .live-tools { padding: 18px 20px 16px; gap: 16px; }
#live .where { gap: 16px 20px; align-items: start; }
#live .where .field, #live .when > .field { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#live .where .field { margin-bottom: 6px; }
#live .where .field .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }

#live .where .row { flex-wrap: nowrap; gap: 0; align-items: stretch; height: var(--ctl-h); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--ctl-r); box-shadow: var(--lift); transition: border-color .15s, box-shadow .15s; }
#live .where .row:focus-within { border-color: var(--asleep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--asleep) 18%, transparent); }
#live .where .row input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; border-radius: var(--ctl-r) 0 0 var(--ctl-r);
  background: transparent; padding: 0 14px; font-size: 15px; }
#live .where .row input:focus-visible { outline: none; }
#live .where .row button { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 100%;
  padding: 0 14px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent;
  font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s; }
#live .where .row button:last-child { border-radius: 0 var(--ctl-r) var(--ctl-r) 0; }
#live .where .row #pick-to:has(+ #swap-trip[hidden]) { border-radius: 0 var(--ctl-r) var(--ctl-r) 0; }
#live .where .row #swap-trip { font-size: 18px; padding: 0 13px; }
#live .where .row #swap-trip::before { content: none; }
#live .where .row button:hover { background: var(--bg); }
#live .where .row button:active { background: color-mix(in srgb, var(--ink) 9%, var(--bg)); }
#live .where .row button.primary { background: var(--ink); color: var(--surface); }
#live .where .row button[aria-pressed="true"] { background: var(--awake); color: var(--on-color); }
#live .where .row button:focus-visible { outline: 2px solid var(--asleep); outline-offset: -3px; }
#live .where .row button::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
#geo-btn { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='7'/><circle cx='12' cy='12' r='2.2' fill='black'/><path d='M12 2v3M12 19v3M2 12h3M19 12h3'/></svg>"); }
[data-pick] { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M12 21.5s-6.8-5.8-6.8-11.3a6.8 6.8 0 0 1 13.6 0c0 5.5-6.8 11.3-6.8 11.3z'/><circle cx='12' cy='10.2' r='2.4'/></svg>"); }
@media (max-width: 600px) {
  #live .live-tools { padding: 16px; }
  #live .where .row { flex-wrap: wrap; height: auto; }
  #live .where .row input { flex-basis: 100%; height: var(--ctl-h); border-radius: var(--ctl-r) var(--ctl-r) 0 0; }
  #live .where .row button { flex: 1 1 0; height: 40px; border-top: 1px solid var(--line); }
  #live .where .row button:first-of-type { border-left: 0; border-radius: 0 0 0 var(--ctl-r); }
  #live .where .row button:last-child { border-radius: 0 0 var(--ctl-r) 0; }
  #live .where .row button:only-of-type { border-radius: 0 0 var(--ctl-r) var(--ctl-r); }
  #live .where .row #pick-to:has(+ #swap-trip[hidden]) { border-radius: 0 0 var(--ctl-r) var(--ctl-r); }
  #live .where .row #swap-trip { flex: 0 0 64px; }
}

/* När? – som flikarna längre ner (förut i skrivmaskinsstil, eftersom .when också är tidtabellens tidskolumn) */
#live .when { font-family: var(--body); gap: 10px 14px; }
#live .seg { display: inline-flex; gap: 2px; height: var(--ctl-h); padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--ctl-r); }
#live .seg button { padding: 0 16px; font-size: 13.5px; }
#live .when input[type="datetime-local"] { height: var(--ctl-h); min-height: 0; border-radius: var(--ctl-r); }

/* Spara resan / Gör till min pendling – tryckknappar till höger på samma rad */
#live .trip-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
#live .trip-actions:not(:has(button:not([hidden]))) { display: none; }
#live .trip-actions button { height: var(--ctl-h); padding: 0 18px; border-radius: var(--ctl-r); background: var(--surface); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600; box-shadow: var(--lift); transition: transform .08s, box-shadow .15s, border-color .15s; }
#live .trip-actions button:hover { border-color: color-mix(in srgb, var(--muted) 55%, var(--line)); box-shadow: 0 2px 4px rgb(31 42 51 / .08), 0 6px 14px rgb(31 42 51 / .06); }
#live .trip-actions button:active { transform: translateY(1px); box-shadow: none; }
#save-fav { color: color-mix(in srgb, var(--awake) 80%, var(--ink)); }
@media (max-width: 600px) { #live .trip-actions { margin-left: 0; flex-basis: 100%; } #live .trip-actions button { flex: 1 1 0; } }

/* Filterknappar (Visa på kartan, tidtabellen, störningarna): lugna knappar med en färgprick – ifylld när
   trafikslaget visas, en ring när det är dolt. Pricken får färgen från linjebrickan inuti (--c). */
.line { --c: var(--muted); } .line.TRAIN { --c: var(--m-train); } .line.METRO { --c: var(--m-metro); } .line.TRAM { --c: var(--m-tram); }
.line.BUS { --c: var(--m-bus); } .line.FERRY { --c: var(--m-ferry); } .line.ROAD { --c: var(--w-orange); } .line.EVENT { --c: var(--w-red); }
.filters { gap: 8px; }
.filters button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(31 42 51 / .06), 0 2px 6px rgb(31 42 51 / .04);
  text-decoration: none; opacity: 1; font-variant-numeric: tabular-nums; transition: background .15s, color .15s, box-shadow .15s, transform .08s; }
.filters button:active { transform: translateY(1px); }
.filters button[aria-pressed="false"] { background: transparent; box-shadow: none; color: var(--muted); text-decoration: none; opacity: 1; }
.filters button .line { display: inline-flex; align-items: center; gap: 8px; background: none; color: inherit; font: 600 13px var(--body); min-width: 0; padding: 0; }
.filters button .line::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }
.filters button[aria-pressed="false"] .line::before { background: transparent; }

/* När?, Avgångar/Ankomster m.fl.: samma utseende som flikarna Kollektivtrafik/Bil/Taxi */
.seg { gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.seg button { border: 0; border-radius: 9px; background: transparent; padding: 7px 16px; font-weight: 600; color: var(--muted); transition: background .15s, color .15s, box-shadow .15s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 0 0 1px var(--line); }

/* Resorna: tider i samma typsnitt som rubrikerna, lite mer luft */
#live .tabs { margin: 18px 20px 0; }
#live .tab-chip { font-family: var(--body); font-variant-numeric: tabular-nums; font-weight: 600; }
#live .near-title { padding: 18px 20px 6px; }
#live .trip { padding: 14px 20px; }
#live .trip-head .times { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }

/* Steg för steg under den valda resan (klasserna s-walk, s-ride … krockar inte med .walk m.fl.): en tidslinje – åken i trafikslagets färg, promenaderna streckade (som på kartan) */
.steps { padding: 2px 20px 16px; background: var(--bg); border-top: 1px dashed var(--line); }
.steps > .label { display: block; padding: 10px 0 8px; }
.steps ol { list-style: none; margin: 0; padding: 0; }
.step { --c: var(--muted); position: relative; display: grid; gap: 2px; padding: 0 0 14px 28px; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: 3px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface);
  box-shadow: inset 0 0 0 2.5px var(--c); }
.step::after { content: ""; position: absolute; left: 8px; top: 20px; bottom: 0; width: 2px;
  background: repeating-linear-gradient(var(--muted) 0 3px, transparent 3px 7px); }
.step:last-child::after { display: none; }
.step.s-ride::after { background: var(--c); width: 4px; left: 7px; border-radius: 2px; }
.step.s-ride::before { background: var(--c); }
.step.s-change { --c: var(--awake); }
.step.s-end { --c: var(--ok); }
.step.s-end::before { background: var(--ok); }
.step.METRO { --c: var(--m-metro); } .step.TRAIN { --c: var(--m-train); } .step.TRAM { --c: var(--m-tram); }
.step.BUS { --c: var(--m-bus); } .step.FERRY { --c: var(--m-ferry); }
.step-what { font-weight: 500; line-height: 1.4; }
.step-what strong { font-weight: 700; }
.step-what .line { font-size: 12.5px; padding: 1px 6px; vertical-align: 1px; }
.step-how { font-size: 13px; color: var(--muted); }
.step-note { font-size: 12.5px; color: var(--warn); }
/* Skylten man ser på plats (uppgång, linje vid byte) – mörk som SL:s skyltar */
.sign { justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 4px 10px 4px 8px; border-radius: 7px;
  background: #1f2a33; color: #fff; font-size: 13px; font-weight: 500; line-height: 1.35; }
.sign strong { font-weight: 700; }
.sign-arrow { font-size: 12px; opacity: .85; }
:root[data-theme="dark"] .sign { background: #0b1117; box-shadow: inset 0 0 0 1px var(--line); }
#live .steps { padding-left: 20px; padding-right: 20px; }
@media (max-width: 600px) { .steps, #live .steps { padding: 2px 16px 14px; } }

/* --- Mobilen: lugnt och läsbart ----------------------------------------------------------------------------
   Ett typsnitt (siffrorna jämnbreda i stället för skrivmaskinsstil), tabeller som rader i stället för kolumner som
   inte får plats, lika höga fält och knappar (44 px – lätta att träffa med tummen). */
/* Ett typsnitt överallt – dator och mobil (förut skrivmaskinsstil på datorn). Jämnbreda siffror bara i tider och tal:
   i Inter blir annars även bindestrecken breda ("T - Centralen"). */
:root { --mono: var(--body); }
.num, .when, .in, .walk, .clock .time, .times, .count, .price, .line, .tab-chip, .delay { font-variant-numeric: tabular-nums; }
.clock .time { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
@media (max-width: 600px) {
  .line { font-weight: 700; border-radius: 6px; padding: 2px 7px; letter-spacing: 0; }
  .wrap { gap: 14px; padding-left: 12px; padding-right: 12px; }
  .card-head { padding: 16px; }
  .band { padding: 16px; }

  /* Sökfält, tidsfält och knappar */
  .search input, input[type="datetime-local"], .controls select { height: 44px; border-radius: 12px; background: var(--surface);
    box-shadow: 0 1px 2px rgb(31 42 51 / .06), 0 2px 6px rgb(31 42 51 / .04); font-size: 16px; }  /* 16 px: iPhone zoomar inte in */
  #tt-now, .card-head button, .board-head button { min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--surface); font-weight: 600;
    box-shadow: 0 1px 2px rgb(31 42 51 / .06), 0 2px 6px rgb(31 42 51 / .04); transition: transform .08s, box-shadow .15s; }
  #tt-now:active, .card-head button:active, .board-head button:active { transform: translateY(1px); box-shadow: none; }
  .card-head button, .board-head button { min-height: 38px; padding: 0 14px; }
  /* Trafiken körs av: brickorna i en egen kolumn, bolagen bredvid */
  .who > div > div:has(> .line) { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 8px; }
  .who > div > div > .line { justify-self: start; }
  .seg { display: flex; }
  .seg button { flex: 1 1 0; padding: 9px 10px; }
  #live .seg { display: inline-flex; }
  #live .when .seg { flex: 1 1 auto; }

  /* Flikarna Kollektivtrafik/Bil/Taxi: ikonen ovanför texten, så att hela ordet får plats */
  .tabs [role=tab] { flex-direction: column; gap: 3px; padding: 8px 4px; font-size: 13px; }
  .tabs [role=tab] .tab-label { overflow: visible; }
  /* Fyra flikar: bredden efter texten, så att "Kollektivtrafik" får plats hela */
  .tabs [role=tab] { flex: 1 1 auto; padding-inline: 6px; }

  /* Tidtabellen: en rad per avgång – tid, linje, mot och läge; info under */
  .board-table thead { display: none; }
  .board-table tr { display: grid; grid-template-columns: 52px auto minmax(0, 1fr) auto; align-items: center; gap: 2px 12px;
    padding: 11px 16px; border-bottom: 1px solid var(--line); }
  .board-table td { padding: 0; border: 0; }
  .board-table td[colspan] { grid-column: 1 / -1; }
  .board-table td:nth-child(4):not(:empty) { font-size: 12px; font-weight: 600; color: var(--muted); padding: 2px 8px; border-radius: 6px; background: var(--bg); }
  .board-table td:nth-child(5) { grid-column: 2 / -1; }
  .board-table td:nth-child(5):not(:has(.tag, span:not(:empty))) { display: none; }
  .board-table .when { display: grid; line-height: 1.2; }
  .board-table .when b { font-size: 16px; }
  .board-table .when s { margin: 0; }

  /* Reseplaneraren: avgångarna närmast – tid och "om x min", linje, mot; "gå senast" under */
  .near-group tr { display: grid; grid-template-columns: 64px auto minmax(0, 1fr); align-items: start; gap: 4px 12px;
    padding: 11px 16px; border-bottom: 1px solid var(--line); }
  .near-group tbody tr:last-child { border-bottom: 0; }
  .near-group td, .near-group td:first-child, .near-group td:nth-child(2) { width: auto; padding: 0; border: 0; }
  .near-group td:nth-child(4) { grid-column: 3 / -1; }
  .near-group td:nth-child(4):empty { display: none; }
  .near-group td[colspan], .near-group td.empty { grid-column: 1 / -1; }
  .near-group .when { display: grid; line-height: 1.2; }
  .near-group .when b { font-size: 16px; }
  .near-group .when s { margin: 0; }
  .near-group .in { white-space: nowrap; }
  .near-group .near-head { padding: 14px 16px 4px; }

  /* Hem: trafiken från staden – rubriken och linjerna över hela bredden, antal och nästa avgång under */
  .traffic-table thead { display: none; }
  .traffic-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .traffic-table td { padding: 0; border: 0; text-align: left; }
  .traffic-table td:first-child, .traffic-table td[colspan] { grid-column: 1 / -1; }
  .traffic-table td.r { display: flex; align-items: baseline; gap: 5px; }
  .traffic-table td .count { font-size: 16px; font-weight: 700; }
  .traffic-table .lines { margin-top: 4px; }

  /* Väglag: stationen överst, värdena i tre kolumner med rubriken ovanför (data-label) */
  .road-table thead { display: none; }
  .road-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .road-table td, .road-table td.r { padding: 0; border: 0; text-align: left; }
  .road-table td:first-child, .road-table td[colspan] { grid-column: 1 / -1; }
  .road-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted); }
  .road-table tr.risk2, .road-table tr.risk3 { box-shadow: inset 3px 0 0 var(--w-orange); }
  .road-table tr.risk3 { box-shadow: inset 3px 0 0 var(--w-red); }
  .road-table tr td:first-child { box-shadow: none !important; }

  /* Tågen: nummer, sträcka och försening på en rad; stationen under sträckan */
  .trains-table thead { display: none; }
  .trains-table tr { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
  .trains-table td, .trains-table td.r { padding: 0; border: 0; }
  .trains-table td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--muted); }
  .trains-table td:nth-child(4) { grid-column: 3; grid-row: 1; }
  .trains-table td[colspan] { grid-column: 1 / -1; }

  /* Radarns tidsreglage: större yta att dra i */
  #scrub { height: 32px; }

  /* Biljettpriserna: priset under namnet i stället för bredvid (rymdes inte) */
  .prices thead { display: none; }
  .prices tr { display: grid; gap: 4px; padding: 12px; border-bottom: 1px solid var(--line); }
  .prices tbody tr:last-child { border-bottom: 0; }
  .prices td, .prices td.r { padding: 0; border: 0; text-align: left; }

  /* Störningar: långa texter hopfällda – tryck för att läsa allt */
  .dev { padding: 14px 16px; }
  .dev-text { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
  .dev.open .dev-text { display: block; }

  /* Bottenmenyn: lätt genomskinlig, som i appar */
  .appnav { background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}

/* --- Väggskärmen: lugn och läsbar på några meters håll ------------------------------------------------------
   Siffrorna (klockan, temperaturen, elpriset, linjerna) i rubrikernas typsnitt med jämnbreda siffror i stället för
   skrivmaskinsstil. Knapparna och muspekaren döljs när ingen rör skärmen. Natt: mörkt och nedtonat. */
body.screen { --mono: var(--display); }
/* jämnbreda siffror bara i tider och tal – i Inter blir annars bindestrecken breda ("T - bana") */
body.screen .num, body.screen .screen-temp, body.screen .screen-big, body.screen .go-when, body.screen .screen-hour,
body.screen .screen-day, body.screen .line, body.screen .next-time, body.screen .after-time { font-variant-numeric: tabular-nums; }
body.screen .screen-time { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
body.screen .screen-temp, body.screen .screen-big { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; }
body.screen .screen-big .small { letter-spacing: 0; }
body.screen .line { font-family: var(--display); font-weight: 800; letter-spacing: 0; }

/* Knapparna (Helskärm …) syns bara när någon rör skärmen (skarm.js wake) */
body.screen .screen-tools { transition: opacity .4s, visibility .4s; }
body.screen:not(.touched) .screen-tools:not(:focus-within) { opacity: 0; visibility: hidden; }
body.screen:not(.touched) { cursor: none; }

/* Prognosen: större ikoner och temperaturer, så att de syns från andra sidan rummet */
body.has-place .screen-hour, body.has-place .screen-day { gap: clamp(2px, .6vmin, 8px); }
body.has-place .screen-hour .wx-icon.sm, body.has-place .screen-day .wx-icon.sm { width: clamp(24px, 3.6vmin, 46px); height: clamp(24px, 3.6vmin, 46px); }
body.has-place .screen-hour strong, body.has-place .screen-day strong { font-family: var(--display); font-size: 1.3em; font-weight: 800; line-height: 1.1; }
body.has-place .screen-hour .small.muted, body.has-place .screen-day-name { font-size: clamp(12px, 1.7vmin, 20px); font-weight: 600; }

/* Viktigt meddelande: röd kant och märke, står dubbelt så länge */
.screen-msg { transition: background .6s, box-shadow .6s; }
.screen-msg.viktig { background: color-mix(in srgb, var(--bad) 9%, var(--surface)); border-left-color: var(--bad); }
.screen-msg-flag { display: inline-block; vertical-align: .18em; margin-right: .3em; padding: .1em .55em; border-radius: 999px; background: var(--bad); color: #fff;
  font: 800 .5em var(--body); letter-spacing: .06em; text-transform: uppercase; }
.screen-msg-dot.viktig { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 55%, transparent); }
.screen-msg-dot.viktig.on { background: var(--bad); }

/* Störningar för linjerna på skärmen – en rad var, högst två */
.screen-devs { display: grid; gap: clamp(4px, .7vmin, 8px); }
.screen-dev { display: flex; align-items: center; gap: .55em; margin: 0; padding: .3em .7em; border-radius: 10px; font-size: clamp(12px, 1.7vmin, 21px);
  background: color-mix(in srgb, var(--w-orange) 12%, var(--surface)); box-shadow: inset 4px 0 0 var(--w-orange); min-width: 0; }
.screen-dev-icon { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; flex: none; border-radius: 50%; background: var(--w-orange); color: #fff; font-weight: 800; font-size: .85em; }
.screen-dev .line { font-size: .9em; min-width: 2.2em; text-align: center; padding: .05em .4em; }
.screen-dev-text { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* "Gå nu": bara den mest brådskande raden fylld – de andra med en färgad kant, så att skärmen inte blir helt gul */
.go-row.go-now, .go-row.go-ok { background: var(--bg); }
.go-row.go-now { box-shadow: inset 5px 0 0 var(--w-yellow); }
.go-row.go-now.first { background: color-mix(in srgb, var(--w-yellow) 26%, var(--surface)); }
.go-row.go-ok .go-when { color: var(--ok); }

/* Stående skärm: avgångarna får platsen – vädrets mätstation tas bort, prognosen lite mindre */
@media (max-aspect-ratio: 4/5) {
  body.has-place .screen-wx .screen-station { display: none; }
  body.has-place .screen-hour .wx-icon.sm { width: clamp(22px, 3.2vmin, 40px); height: clamp(22px, 3.2vmin, 40px); }
}

/* Natten (22–06): mörkt tema och nedtonat. Allt flyttas några pixlar var tionde minut (mot inbränning).
   Kundens logga är oftast gjord för ljus bakgrund – den får en ljus platta, annars försvinner mörk text. */
:root[data-theme="dark"] body.screen .screen-logo,
body.screen.has-cover .screen-logo { background: #f4f2ee; padding: clamp(4px, .6vmin, 8px); }   /* samma ljusa platta på omslagsbilden */
body.screen.night .screen-wrap { filter: brightness(.72); }
/* Med marginaler och lika mycket mindre höjd – en förskjutning (transform) skulle få innehållet att sticka ut och kapas */
body.screen .screen-wrap { margin-left: var(--shift-x, 0px); margin-top: var(--shift-y, 0px); }
body.has-place .screen-wrap { height: calc(100dvh - var(--shift-y, 0px)); }

/* Omslagsbilden (kundens egen bild, skarm.js renderCover): hela bakgrunden, nedtonad uppifrån och nedifrån så att namnet,
   klockan och raden längst ner syns i vitt. Korten ligger ovanpå som vanligt. På natten tonas bilden ned mer. */
body.screen.has-cover { background: linear-gradient(rgba(10, 16, 22, .62), rgba(10, 16, 22, .28) 32%, rgba(10, 16, 22, .28) 70%, rgba(10, 16, 22, .66)),
  var(--omslag) center / cover no-repeat fixed, var(--bg); }
body.screen.night.has-cover { background-image: linear-gradient(rgba(5, 8, 12, .8), rgba(5, 8, 12, .8)), var(--omslag); }
body.screen.has-cover .screen-top, body.screen.has-cover .screen-bottom-text { color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
body.screen.has-cover .screen-date, body.screen.has-cover .screen-place-addr, body.screen.has-cover .screen-bottom-text .muted { color: rgba(255, 255, 255, .86); }
body.screen.has-cover .screen-foot.stale { color: #ffb4a8; }
body.screen.has-cover .screen-card, body.screen.has-cover .screen-msg { box-shadow: 0 10px 34px rgba(0, 0, 0, .28); }

/* Kundens sida: förhandsvisningen av omslagsbilden */
.k-cover { display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 560px; border-radius: 14px; border: 1px dashed var(--line); background: var(--bg); overflow: hidden; }
.k-cover.has-img { border-style: solid; }
.k-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Mobilen: lugnare – svaret först, mindre text runtomkring -------------------------------------------------
   Resa: formuläret, sedan resorna och steg för steg, sist kartan – och vad kartan visar hopfällt bakom en knapp.
   Väder och elpris i två spalter. Störningarna kompakta (tryck för detaljer). Förklarande småtext bort. */
.layers-toggle { display: none; }
@media (max-width: 600px) {
  #live { display: flex; flex-direction: column; }
  #live .live-tools { display: contents; }
  /* rubriken "Livekarta" stämmer inte när kortet börjar med reseplaneraren – kvar för skärmläsare, menyn säger Resa */
  #live > .card-head { order: 0; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; border: 0; }
  #live .where { order: 1; padding: 16px 16px 4px; }
  #live #favs { order: 2; padding: 4px 16px 0; }
  #live .tabs { order: 3; }
  #live .tab-panel { order: 4; }
  #live .resa-map { order: 5; margin-top: 8px; }
  #livemap { height: 46vh; max-height: 420px; }
  #trafikkarta .layers-toggle { display: block; margin: 12px 16px; justify-self: start; align-self: flex-start;
    min-height: 40px; padding: 0 16px; border-radius: 12px; background: var(--surface); font-weight: 600;
    box-shadow: 0 1px 2px rgb(31 42 51 / .06), 0 2px 6px rgb(31 42 51 / .04); }
  #trafikkarta .layers-toggle::after { content: " ▾"; color: var(--muted); }
  #trafikkarta.show-layers .layers-toggle::after { content: " ▴"; }
  #trafikkarta #live-layers { display: none; padding: 0 16px 12px; }
  #trafikkarta.show-layers #live-layers { display: flex; }
  #live-status { display: none; }   /* "17 tåg · 425 bussar …" – kartan visar det */

  /* Väder och elpris: två värden i bredd i stället för en lång stapel */
  .wx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wx-tile { padding: 10px 12px; }
  .wx-tile .v { font-size: 18px; }
  .wx-tile.wide { grid-column: 1 / -1; }

  /* Störningar: rubriken, linjen och tiden – texten och detaljerna när man trycker */
  .dev { gap: 3px; cursor: pointer; }
  .dev-text { -webkit-line-clamp: 2; line-clamp: 2; }
  .dev-meta .dm-more { display: none; }
  .dev.open .dev-meta .dm-more { display: inline; }

  /* Hem: förklaringarna behövs inte varje gång */
  .band > .small.muted, #before .before-foot > p.small.muted { display: none; }
}

/* --- Lugnare gränssnitt: färre saker som väger lika mycket ------------------------------------------------------
   Sidhuvudet med ikonknappar och mindre klocka, städerna som en tät lista i mobilen, vädret med de viktigaste värdena
   först, störningarna i grupper, och samma stil för alla statusetiketter. */
.clock .time { font-size: clamp(28px, 3.2vw, 38px); }
.clock-row { gap: 6px; }
.theme-btn.icon-only { padding: 4px 7px; }
.theme-btn.icon-only > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#install-btn { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* Städerna i mobilen: en rad per stad i ett kort, de första sex (och den valda) – resten bakom "Visa alla städer" */
.cities-more { display: none; }
@media (max-width: 600px) {
  .cities { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .city { border: 0; border-radius: 0; gap: 2px; padding: 11px 14px 11px 18px; background: none; box-shadow: inset 4px 0 0 var(--tc, var(--line)); }
  .city + .city { border-top: 1px solid var(--line); }
  .city .sub { display: none; }
  .city[aria-pressed="true"] { background: color-mix(in srgb, var(--awake) 10%, var(--surface)); box-shadow: inset 4px 0 0 var(--tc, var(--line)); }
  .city[aria-pressed="true"] .name::after { content: " ✓"; color: var(--awake); }
  .cities:not(.all) .city:nth-child(n+7):not([aria-pressed="true"]) { display: none; }
  .cities-more { display: block; width: 100%; margin-top: 8px; min-height: 42px; border-radius: 12px; font-weight: 600; background: var(--surface); }
}

/* "Innan du går": fyra rader blir två och två på datorn – inte tre plus en ensam */
@media (min-width: 761px) {
  .before-list:has(> li:nth-child(4):last-child), .before-list:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Vädret: sex viktiga värden överst, resten under "Fler mätvärden" */
.wx-main { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.wx-main .wx-tile .v { font-size: 22px; }
.wx-more { border-radius: 14px; background: var(--bg); }
.wx-more > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 16px; font-weight: 600; }
.wx-more > summary::-webkit-details-marker { display: none; }
.wx-more > summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.wx-more[open] > summary::after { content: "▴"; }
.wx-more > .wx-tiles { padding: 0 10px 10px; }
.wx-more .wx-tile { background: var(--surface); }
@media (max-width: 600px) { .wx-main .wx-tile .v { font-size: 19px; } .wx-more > summary .small { display: none; } }

/* Små rubriker ovanför ett värde: vanlig text i stället för VERSALER – versalerna bara för rubriker på delar av sidan */
.wx-tile .label, .detail .stat .label, .car-hero .label { text-transform: none; letter-spacing: 0; font-size: 12.5px; }

/* Störningar i grupper per trafikslag */
.dev-section + .dev-section { border-top: 6px solid var(--bg); }
.dev-group { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 18px 2px; font: 600 13px var(--body); color: var(--muted); }
.dev-group .line { font-size: 12px; }
@media (max-width: 600px) { .dev-group { padding: 12px 16px 2px; } }

/* Resa innan något är ifyllt */
.resa-empty { display: flex; gap: 14px; align-items: flex-start; margin: 14px 18px 4px; padding: 16px; border-radius: 14px; background: var(--bg); }
.resa-empty[hidden] { display: none; }
.resa-empty svg { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--awake); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.resa-empty p { margin: 4px 0 0; color: var(--muted); line-height: 1.5; }
@media (max-width: 600px) { .resa-empty { margin: 12px 16px 4px; } }

/* Statusetiketter: samma form överallt – färgad text på en ljus platta av samma färg */
.tag { border: 0; border-radius: 6px; padding: 1px 7px; background: color-mix(in srgb, currentColor 13%, transparent); }

/* Sidfoten: en rad länkar och en rad om källorna */
.note { gap: 8px; }
.note .credits { line-height: 1.55; }

/* Ny version på servern (07m-ny-version.js): en rad längst ner med "Ladda om" */
.update-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1060; display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 10px 18px; border-radius: 14px; background: var(--ink); color: var(--surface); box-shadow: 0 10px 30px rgb(0 0 0 / .25);
  font-weight: 600; width: max-content; max-width: calc(100vw - 24px); }
.update-bar button.primary { background: var(--awake); border-color: var(--awake); color: #1f2a33; }
@media (max-width: 760px) { .update-bar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* "Innan du går": raden med råd (paraply, varma kläder …) */
.before-row.tip { border-left-color: var(--awake); }
.before-row.tip .before-icon { color: var(--awake); }
.before-row.tip span { white-space: normal; }

/* Störningar som berör din pendling eller dina hållplatser: överst, markerade */
.dev-section.mine { background: color-mix(in srgb, var(--awake) 7%, transparent); }
.dev-group.mine { color: var(--ink); }

/* Elpriset: ett tydligt besked överst och tiderna under diagrammet som vanlig text (lika stora i mobilen) */
.power-verdict { justify-self: start; font: 700 12.5px var(--body); padding: 2px 9px; border-radius: 999px; color: var(--muted);
  background: color-mix(in srgb, currentColor 13%, transparent); }
.power-verdict.cheap { color: var(--ok); } .power-verdict.dear { color: var(--bad); } .power-verdict.mid { color: var(--ink); }
#power .power-chart { height: 150px; width: 100%; display: block; }
.power-axis { position: relative; height: 18px; margin-top: 2px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.power-axis span { position: absolute; top: 0; white-space: nowrap; }
.power-axis .pa-day { font-weight: 600; color: var(--ink); }
.power-axis .pa-hour { transform: translateX(-50%); }
@media (max-width: 600px) { #power .power-chart { height: 120px; } }

/* Krisinformation: VMA just nu eller inte, överst */
.kris-status { margin: 12px 18px 4px; padding: 10px 14px; border-radius: 12px; font-size: 14px;
  background: color-mix(in srgb, var(--ok) 12%, transparent); }
.kris-status.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); }
.kris-foot { margin: 10px 18px 14px; }
@media (max-width: 600px) { .kris-status, .kris-foot { margin-left: 16px; margin-right: 16px; } }
.power-chart rect.now, .power-chart line { vector-effect: non-scaling-stroke; }

/* Kontrast (WCAG AA): färgad text blandas med textfärgen så att den går att läsa – temperaturen i tio dagar och halkrisken */
.days .tmax { color: color-mix(in srgb, var(--tc) 45%, var(--ink)); font-weight: 700; }
.city .road-warn { color: color-mix(in srgb, var(--w-orange) 70%, var(--ink)); }

/* Ortens sida (/ort/gavle): vädret just nu och hållplatserna överst */
.ort-body { display: grid; gap: 8px; padding: 12px 18px 16px; }
.ort-body p { margin: 0; }
.ort-now { font-size: 17px; }
.ort-stops a, .orter a { display: inline-block; margin: 0 10px 4px 0; }
@media (max-width: 600px) { .ort-body { padding: 12px 16px 14px; } }