/* Ruteholm Dispatch · tema A kold: blå-sort glas.
   Reference: design-retning/a-glas. Alt UI ligger i #app, rem sættes af PH.fitRem('#app'), ingen vw/vh. */
:root {
  color-scheme: dark;
  --ph-ripple: rgba(90, 216, 255, .8);
  --ph-frame-bg: #03070e;
  --bg: #03070e;
  --ink: #f2f7ff;
  --ink-2: rgba(222, 234, 255, .82);
  --ink-3: rgba(196, 214, 245, .64);
  --ink-4: rgba(196, 214, 245, .36);
  --blue: 79 139 255;
  --cyan: 90 216 255;
  --amber: 255 178 36;
  --crit: 255 107 107;
  --mint: 84 240 196;
  --r-card: 2.6rem;
  --r-in: 1.6rem;
  --surf: rgba(255, 255, 255, .045);
  --surf-2: rgba(255, 255, 255, .08);
  --lift: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 24px -14px rgba(0, 0, 0, .7);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --blur: 26px;
  --glass: rgba(9, 18, 36, .5);
}
html.ph-frame { --blur: 0px; --glass: rgba(10, 20, 40, .62); }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; overflow: hidden; background: var(--bg); }
#app {
  position: fixed; inset: 0; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1.4rem; line-height: 1.45;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid rgb(var(--cyan)); outline-offset: 3px; }
svg.i { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono { font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
kbd { font-family: inherit; font-size: 1.1rem; font-weight: 700; color: var(--ink-2); padding: .3rem .8rem; border-radius: 99px; background: rgba(255, 255, 255, .1); line-height: 1.3; }

/* ---------- Baggrund: kolde felter (blå, petrol, cyan) ---------- */
.bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 90% at 50% -10%, #0a1631 0%, #050c19 52%, #03070e 100%); }
.blob { position: absolute; border-radius: 50%; aspect-ratio: 1; }
.b1 { width: 62%; left: -16%; top: -52%; background: radial-gradient(circle, rgba(40, 112, 255, .46), rgba(40, 112, 255, 0) 64%); }
.b2 { width: 54%; right: -18%; top: -40%; background: radial-gradient(circle, rgba(40, 196, 255, .32), rgba(40, 196, 255, 0) 64%); }
.b3 { width: 30%; left: 40%; top: -24%; background: radial-gradient(circle, rgba(90, 150, 255, .2), rgba(90, 150, 255, 0) 64%); }
.b4 { width: 54%; left: -14%; bottom: -62%; background: radial-gradient(circle, rgba(16, 170, 172, .28), rgba(16, 170, 172, 0) 64%); }
.b5 { width: 50%; right: -8%; bottom: -60%; background: radial-gradient(circle, rgba(36, 120, 230, .26), rgba(36, 120, 230, 0) 64%); }
.noise { position: absolute; inset: 0; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------- Skal ---------- */
.shell { position: relative; z-index: 1; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.6rem; height: 100%; padding: 1.6rem; }
.main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 1.6rem; min-width: 0; min-height: 0; }
.views { position: relative; min-height: 0; min-width: 0; }
.view { position: absolute; inset: 0; display: none; gap: 1.6rem; min-height: 0; }
.view.on { display: grid; }

/* Glas: flade, dybde og en blød lyskant */
.glass, .card { position: relative; isolation: isolate; border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, .062) 0%, rgba(255, 255, 255, .02) 42%, rgba(255, 255, 255, .01) 100%), var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); backdrop-filter: blur(var(--blur)) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .22), 0 28px 56px -24px rgba(0, 0, 0, .75); }
/* Under demo (kamera-zoom) og i 9:16-rammen slås blur fra: baggrundsfelterne er bløde i forvejen, og blur ved
   viewportens kant trækker gennemsigtige pixels ind som et mørkt bånd. */
html.ph-frame .glass, html.ph-frame .card, html.ph-demo .glass, html.ph-demo .card { -webkit-backdrop-filter: none; backdrop-filter: none; }
.glass::before, .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 26%, rgba(255, 255, 255, 0) 52%, rgb(var(--acc, 255 255 255) / .12) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---------- Venstreskinne ---------- */
.rail { --acc: var(--cyan); display: flex; flex-direction: column; align-items: center; gap: 2.6rem; padding: 2rem .9rem 1.6rem; border-radius: 3rem; }
.mark { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 30% 25%, rgb(var(--cyan) / .32), rgb(var(--blue) / .16) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 30px -6px rgb(var(--blue) / .8); }
.mark svg { width: 2.9rem; height: 2.9rem; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; width: 100%; }
.nav { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; width: 100%; padding: 1.1rem .2rem 1rem; border: 0; border-radius: 2rem; background: none;
  color: var(--ink-3); font-size: 1.1rem; font-weight: 600; transition: color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); }
.nav svg.i { width: 2.2rem; height: 2.2rem; transition: transform .4s var(--ease); }
.nav:hover, .nav[data-ph-hover] { color: var(--ink); background: rgba(255, 255, 255, .05); }
.nav:hover svg.i, .nav[data-ph-hover] svg.i { transform: translateY(-1px); }
.nav.on { color: var(--ink); background: linear-gradient(180deg, rgb(var(--blue) / .24), rgb(var(--blue) / .07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 30px -10px rgb(var(--blue) / .7); }
.nav.on svg.i { color: rgb(var(--cyan)); filter: drop-shadow(0 0 6px rgb(var(--cyan) / .8)); }
.badge { position: absolute; top: .5rem; right: 1.2rem; min-width: 1.8rem; height: 1.8rem; padding: 0 .45rem; border-radius: 99px; display: grid; place-items: center;
  font-size: 1.05rem; font-weight: 800; line-height: 1; color: #04101e; background: rgb(var(--cyan)); box-shadow: 0 0 14px rgb(var(--cyan) / .7); transition: transform .4s var(--ease), opacity .4s; }
.badge.warn { background: rgb(var(--amber)); box-shadow: 0 0 14px rgb(var(--amber) / .7); color: #1d1200; }
.badge.zero { opacity: 0; transform: scale(.4); }
.badge.bump { animation: bump .6s var(--ease); }
.rail-keys { margin-top: auto; display: flex; align-items: center; gap: .3rem; font-size: 1rem; color: var(--ink-4); }
.rail-keys kbd { font-size: 1rem; padding: .2rem .6rem; }

/* ---------- Topbar ---------- */
.top { display: flex; align-items: center; gap: 2rem; min-height: 5.6rem; padding: 0 .4rem 0 1rem; }
.greet { min-width: 0; }
.greet h1 { margin: 0; font-size: 2.8rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; }
.greet h1 span { background: linear-gradient(90deg, #fff 0%, rgb(var(--cyan)) 60%, rgb(var(--blue))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.greet p { display: flex; align-items: center; gap: 1rem; margin: .6rem 0 0; font-size: 1.32rem; font-weight: 500; color: var(--ink-3); flex-wrap: wrap; row-gap: .1rem; }
.greet p i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--ink-4); flex: none; }
.greet p b { font-weight: 700; color: var(--ink-2); }
.greet p b.warn { color: rgb(var(--amber)); }
.top-r { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; flex: none; }
.search { display: flex; align-items: center; gap: 1rem; width: 32rem; height: 4.6rem; padding: 0 .7rem 0 1.6rem; border: 0; border-radius: 99px;
  color: var(--ink-3); font-size: 1.35rem; font-weight: 500; background: rgba(255, 255, 255, .055); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--lift);
  transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.search:hover, .search[data-ph-hover] { background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 30px -8px rgb(var(--cyan) / .55); }
.search kbd { margin-left: auto; }
.clockpill { display: inline-flex; align-items: center; gap: .7rem; height: 4.6rem; padding: 0 1.6rem; border-radius: 99px; font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; background: rgba(255, 255, 255, .05); box-shadow: var(--lift); }
.clockpill i { width: .7rem; height: .7rem; border-radius: 50%; background: rgb(var(--mint)); animation: live 2.4s ease-out infinite; --lc: var(--mint); }
.demo { display: inline-flex; align-items: center; gap: .6rem; height: 3rem; padding: 0 1.2rem; border-radius: 99px; font-size: 1.15rem; font-weight: 600; color: var(--ink-3); background: rgba(255, 255, 255, .04); }
.demo::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: rgb(var(--amber) / .85); }
.me { display: flex; align-items: center; gap: 1rem; height: 4.6rem; padding: 0 1.6rem 0 .5rem; border-radius: 99px; background: rgba(255, 255, 255, .05); box-shadow: var(--lift); }
.me-av { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; font-size: 1.25rem; font-weight: 800; color: #04101e;
  background: linear-gradient(135deg, rgb(var(--cyan)), rgb(var(--blue))); box-shadow: 0 0 0 2px #071021, 0 0 0 3.5px rgb(var(--blue) / .5), 0 0 18px rgb(var(--blue) / .45); }
.me b { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.me small { display: block; font-size: 1.12rem; font-weight: 500; color: var(--ink-3); line-height: 1.25; white-space: nowrap; }

/* ---------- Kort (fælles) ---------- */
.card { --acc: var(--cyan); display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 2.4rem 2.6rem;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 62% at var(--gx, 100%) var(--gy, 0%), rgb(var(--acc) / .15), transparent 72%); opacity: .85; transition: opacity .5s var(--ease); }
.card.lift:hover, .card.lift[data-ph-hover] { transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .22), 0 40px 70px -28px rgba(0, 0, 0, .85), 0 0 60px -18px rgb(var(--acc) / .55); }
.card.lift:hover::after, .card.lift[data-ph-hover]::after { opacity: 1; }
.card.ping { animation: ping 1.2s var(--ease); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(var(--acc) / .7); } 60% { box-shadow: 0 0 0 8px rgb(var(--acc) / 0), 0 0 70px -10px rgb(var(--acc) / .7); } 100% { box-shadow: 0 0 0 0 rgb(var(--acc) / 0); } }
.c-head { display: flex; align-items: center; gap: 1.1rem; min-height: 3.4rem; flex: none; min-width: 0; }
.c-ico { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; flex: none; color: rgb(var(--acc));
  background: radial-gradient(circle at 30% 25%, rgb(var(--acc) / .26), rgb(var(--acc) / .08)); box-shadow: 0 0 20px -6px rgb(var(--acc) / .7); }
.c-ico svg.i { width: 1.7rem; height: 1.7rem; }
.c-head h2 { margin: 0; font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.c-head .r { margin-left: auto; }
.meta { font-size: 1.2rem; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.sub { margin: 0; font-size: 1.3rem; font-weight: 500; color: var(--ink-3); }
.sub b { color: var(--ink-2); font-weight: 700; }
.big { display: inline-block; font-size: 6.4rem; font-weight: 300; letter-spacing: -.05em; line-height: 1; white-space: nowrap;
  background: linear-gradient(180deg, #fff 35%, rgb(var(--acc) / .9) 130%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgb(var(--acc) / .3)); }
.big { font-variant-numeric: proportional-nums; }
.big .u { font-size: .34em; font-weight: 500; letter-spacing: 0; margin-left: .35em; -webkit-text-fill-color: var(--ink-3); }
.livechip { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.12rem; font-weight: 700; color: rgb(var(--lc, var(--mint))); }
.livechip::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: rgb(var(--lc, var(--mint))); animation: live 2.4s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgb(var(--lc, var(--mint)) / .6); } 80%, 100% { box-shadow: 0 0 0 .8rem rgb(var(--lc, var(--mint)) / 0); } }
@keyframes bump { 35% { transform: scale(1.3); } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; height: 3.6rem; padding: 0 1.6rem; border: 0; border-radius: 99px; white-space: nowrap;
  font-size: 1.3rem; font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), opacity .4s; }
.btn svg.i { width: 1.55rem; height: 1.55rem; stroke-width: 2; }
.btn:hover, .btn[data-ph-hover] { background: rgba(255, 255, 255, .14); }
.btn:active { transform: scale(.97); }
.btn.pri { --acc: var(--cyan); color: #03111f; background: linear-gradient(180deg, rgb(var(--acc)), rgb(var(--acc) / .8));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 26px -10px rgb(var(--acc) / .9); }
.btn.pri:hover, .btn.pri[data-ph-hover] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 32px -8px rgb(var(--acc)); }
.btn.pri kbd { color: #03111f; background: rgba(0, 20, 40, .14); }
.btn.sm { height: 3rem; padding: 0 1.2rem; font-size: 1.2rem; }
.btn[disabled] { opacity: .38; pointer-events: none; }
.icon-btn { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .07); color: var(--ink-2); flex: none; transition: background .3s var(--ease); }
.icon-btn:hover, .icon-btn[data-ph-hover] { background: rgba(255, 255, 255, .14); color: var(--ink); }
.chip { display: inline-flex; align-items: center; gap: .5rem; height: 2.6rem; padding: 0 1rem; border-radius: 99px; font-size: 1.15rem; font-weight: 700; white-space: nowrap;
  color: var(--ink-2); background: rgba(255, 255, 255, .07); }
.chip::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; flex: none; }
.chip.ok { color: rgb(var(--mint)); background: rgb(var(--mint) / .11); }
.chip.warn { color: rgb(var(--amber)); background: rgb(var(--amber) / .13); }
.chip.crit { color: rgb(var(--crit)); background: rgb(var(--crit) / .13); }
.chip.idle { color: var(--ink-3); }
.chip.info { color: rgb(var(--cyan)); background: rgb(var(--cyan) / .11); }
.chip.plain::before { display: none; }
.av { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; flex: none; font-size: 1.12rem; font-weight: 800; color: var(--ink);
  background: radial-gradient(circle at 30% 25%, rgb(var(--acc, var(--blue)) / .5), rgb(var(--acc, var(--blue)) / .14)); }
.empty { display: grid; place-items: center; align-content: center; gap: .4rem; padding: 3rem 1rem; text-align: center; color: var(--ink-3); font-size: 1.3rem; }
.empty b { color: var(--ink); font-size: 1.5rem; }
.warn-t { color: rgb(var(--amber)); }
.crit-t { color: rgb(var(--crit)); }
.ok-t { color: rgb(var(--mint)); }
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
.scroll::-webkit-scrollbar { width: 6px; }
.scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 6px; }

/* ---------- Overblik: bento ---------- */
#v-overblik { grid-template-columns: minmax(0, 1.12fr) minmax(0, .96fr) minmax(0, 1.04fr);
  grid-template-rows: minmax(0, 1.3fr) minmax(0, .6fr) minmax(0, .98fr);
  grid-template-areas: "map exc ai" "map flow ai" "map tacho cold"; }

/* Kortet */
.c-map { grid-area: map; --acc: var(--blue); --gx: 20%; --gy: 0%; padding: 0; overflow: hidden; }
.mapbox { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.mapbox svg.map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-head { position: relative; z-index: 2; padding: 2.4rem 2.6rem 0; pointer-events: none; }
.map-head .c-head { pointer-events: auto; }
.map-kpi { margin-top: 1.4rem; }
.map-kpi .big { font-size: 6rem; }
.map-kpi .sub { margin-top: .5rem; color: var(--ink-2); font-size: 1.36rem; }
.map-kpi .sub b { color: var(--ink); }
.map-still { margin-top: .3rem; font-size: 1.2rem; }
.map-legend { position: absolute; z-index: 2; left: 2rem; bottom: 1.8rem; display: flex; flex-wrap: wrap; gap: .6rem; pointer-events: none; }
.map-legend.top { left: auto; bottom: auto; right: 2rem; top: 6.6rem; flex-direction: column; align-items: flex-end; gap: .45rem; }
.map-legend.top span { height: 2.4rem; }
.map-legend span { display: inline-flex; align-items: center; gap: .55rem; height: 2.6rem; padding: 0 1rem; border-radius: 99px; font-size: 1.1rem; font-weight: 600; color: var(--ink-2);
  background: rgba(6, 14, 30, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.map-legend i { width: .8rem; height: .8rem; border-radius: 50%; }
.map-legend .l1 { background: #e8f4ff; box-shadow: 0 0 8px rgb(var(--cyan)); }
.map-legend .l2 { background: rgb(var(--amber)); box-shadow: 0 0 8px rgb(var(--amber)); }
.map-legend .l3 { width: 1.6rem; height: .3rem; border-radius: 2px; background: linear-gradient(90deg, rgb(var(--blue)), rgb(var(--cyan))); box-shadow: 0 0 8px rgb(var(--cyan)); }
.map-legend .l4 { background: rgb(var(--crit)); box-shadow: 0 0 8px rgb(var(--crit)); }

/* SVG-kortets lag */
.land { fill: url(#landfill); stroke: rgba(150, 196, 255, .34); stroke-width: .6; stroke-linejoin: round; }
.coast { fill: none; stroke: rgba(110, 170, 255, .1); stroke-width: 3.2; stroke-linejoin: round; }
.road { fill: none; stroke: rgba(170, 200, 255, .1); stroke-width: .6; }
.net-g { fill: none; stroke-width: 3.6; stroke-opacity: .09; stroke-linecap: round; stroke-linejoin: round; }
.net { fill: none; stroke-width: 1.1; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; }
.netwrap.dim .net, .netwrap.dim .net-g { stroke-opacity: .05; }
.netwrap .net.hl { stroke-opacity: 1; stroke-width: 1.8; }
.netwrap .net-g.hl { stroke-opacity: .3; stroke-width: 6; }
.city circle { fill: rgba(200, 220, 255, .55); }
.city text { font-size: 9.5px; font-weight: 600; fill: rgba(205, 222, 250, .62); paint-order: stroke; stroke: rgba(3, 8, 18, .8); stroke-width: 2.6px; stroke-linejoin: round; transition: opacity .35s; }
.city text.hid { opacity: 0; }
.city.depot circle { fill: rgb(var(--cyan)); }
.city.depot text { fill: rgb(var(--cyan)); font-weight: 700; }
.border-m { fill: none; stroke: rgba(200, 220, 255, .35); stroke-width: .8; stroke-dasharray: 1.6 1.6; }
.rt-done { fill: none; stroke: rgba(200, 225, 255, .4); stroke-width: 1.2; stroke-dasharray: 2 2.4; stroke-linecap: round; }
.rt-glow { fill: none; stroke: rgb(var(--cyan)); stroke-width: 7; stroke-opacity: .16; stroke-linecap: round; stroke-linejoin: round; }
.rt-left { fill: none; stroke: url(#rtgrad); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rt-end { fill: #03070e; stroke: rgb(var(--cyan)); stroke-width: 1.6; }
.jam-g { fill: none; stroke: rgb(var(--amber)); stroke-width: 8; stroke-opacity: .2; stroke-linecap: round; stroke-linejoin: round; transition: stroke-opacity .6s, stroke .6s; }
.jam { fill: none; stroke: rgb(var(--amber)); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 2.4; transition: stroke .6s, opacity .6s; }
.jam.past, .jam-g.past { stroke: rgba(200, 215, 240, .5); stroke-opacity: .5; opacity: .5; }
.jam-g.past { stroke-opacity: .05; }
.detour, .detour-g { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; }
.detour { stroke: #c9f3ff; stroke-width: 2.4; }
.detour-g { stroke: rgb(var(--cyan)); stroke-width: 9; stroke-opacity: .3; }
.detour.draw, .detour-g.draw { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.15s cubic-bezier(.45, .05, .25, 1), opacity .3s; }
.detour.fade, .detour-g.fade { opacity: 0; transition: opacity .8s; }
.tk { transition: opacity .4s; }
.map-ready .tk { transition: transform 1s linear, opacity .4s; }
.tk .halo { fill: rgb(var(--cyan)); opacity: .18; }
.tk .dot { fill: #eaf6ff; }
.tk.cold .dot { fill: #bff0ff; }
.tk.stopped .dot { fill: rgba(200, 215, 240, .55); }
.tk.stopped .halo { opacity: 0; }
.tk.warn .halo { fill: rgb(var(--amber)); opacity: .32; }
.tk.warn .dot { fill: rgb(var(--amber)); }
.tk.crit .halo { fill: rgb(var(--crit)); opacity: .3; }
.tk.crit .dot { fill: rgb(var(--crit)); }
.tk.sel .halo { opacity: .4; }
.tk .live { fill: none; stroke: rgb(var(--amber)); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tk.warn .live { animation: tklive 2.4s ease-out infinite; }
@keyframes tklive { 0% { opacity: .8; transform: scale(.5); } 70%, 100% { opacity: 0; transform: scale(1.6); } }
.tk.dim { opacity: .14; }
.mlabels { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.mlabel { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .6rem; height: 2.6rem; padding: 0 1rem 0 .9rem; border-radius: 99px; white-space: nowrap;
  font-size: 1.15rem; font-weight: 700; color: var(--ink); background: rgba(6, 14, 30, .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 20px -10px rgba(0, 0, 0, .9);
  transform: translate(var(--lx, 1.2rem), -50%); transition: left 1s linear, top 1s linear, opacity .4s; }
.mlabel.left { transform: translate(calc(-100% - 1.2rem), -50%); }
.mlabel small { font-size: 1.08rem; font-weight: 600; color: var(--ink-3); }
.mlabel .v { font-weight: 800; }
.mlabel.warn .v { color: rgb(var(--amber)); }
.mlabel.crit .v { color: rgb(var(--crit)); }
.mlabel.ok .v { color: rgb(var(--mint)); }
.mlabel.jaml { color: rgb(var(--amber)); background: rgba(40, 26, 4, .72); transition: opacity .6s; }
.mlabel.jaml.past { opacity: 0; }
.map-focus { position: absolute; pointer-events: none; }

/* Afvigelser */
.c-exc { grid-area: exc; --acc: var(--amber); --gx: 100%; --gy: 0%; --lc: var(--amber); }
.kpi-row { display: flex; align-items: flex-end; gap: 1.4rem; margin-top: 1.2rem; flex: none; }
.kpi-row .big { font-size: 5.2rem; }
.c-tacho .kpi-row, .c-cold .kpi-row { margin-top: .8rem; }
.c-tacho .kpi-row .big, .c-cold .kpi-row .big { font-size: 4.8rem; }
.kpi-row .sub { padding-bottom: .7rem; line-height: 1.35; }
.c-exc .big { background-image: linear-gradient(180deg, #fff4dc 10%, rgb(var(--amber)) 105%); filter: drop-shadow(0 0 24px rgb(var(--amber) / .4)); }
.c-exc.calm .big { background-image: linear-gradient(180deg, #fff 30%, rgb(var(--mint)) 130%); filter: drop-shadow(0 0 24px rgb(var(--mint) / .3)); }
.xlist { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; flex: 1; min-height: 0; }
.xrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .7rem 1.4rem .7rem .7rem; border-radius: 99px; cursor: pointer;
  background: var(--surf); box-shadow: var(--lift); transition: background .4s var(--ease), transform .4s var(--ease); }
.xrow:hover, .xrow[data-ph-hover], .xrow.cur { background: var(--surf-2); }
.xrow .x-ic { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; flex: none; color: rgb(var(--tone)); background: rgb(var(--tone) / .14); }
.xrow .x-ic svg.i { width: 1.6rem; height: 1.6rem; stroke-width: 2; }
.xrow b { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xrow small { display: block; font-size: 1.12rem; font-weight: 500; line-height: 1.3; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xrow .x-v { font-size: 1.45rem; font-weight: 700; color: rgb(var(--tone)); white-space: nowrap; text-align: right; }
.xrow .x-v small { font-size: 1.05rem; text-align: right; }
.xrow.warn { --tone: var(--amber); }
.xrow.crit { --tone: var(--crit); }
.xrow.ok { --tone: var(--mint); background: rgb(var(--mint) / .06); }
.xrow.info { --tone: var(--cyan); }
.xrow.enter { animation: rowIn .5s var(--ease) backwards; }
@keyframes rowIn { from { opacity: 0; transform: translateY(.8rem); } }
.x-foot { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; font-size: 1.2rem; font-weight: 500; color: var(--ink-3); flex: none; min-width: 0; }
.x-foot b { color: var(--ink-2); font-weight: 700; }
.x-foot span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-foot .fresh { animation: fresh 1.6s var(--ease); }
@keyframes fresh { 0% { color: rgb(var(--cyan)); } 100% { color: inherit; } }

/* AI-dispatcher */
.c-ai { grid-area: ai; --acc: var(--cyan); --gx: 100%; --gy: 0%;
  background: radial-gradient(110% 60% at 100% 0%, rgb(var(--cyan) / .14), transparent 62%), radial-gradient(90% 50% at 0% 100%, rgb(var(--blue) / .12), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015) 45%), var(--glass); }
.orb { position: relative; width: 3.4rem; height: 3.4rem; border-radius: 50%; flex: none;
  background: conic-gradient(from 210deg, rgb(var(--blue)), rgb(var(--cyan)), rgb(var(--mint)), rgb(var(--blue))); box-shadow: 0 0 22px -2px rgb(var(--cyan) / .75); }
.orb::after { content: ""; position: absolute; inset: .4rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .1) 45%, rgba(4, 12, 30, .6) 78%); }
.toggle { display: inline-flex; align-items: center; gap: .8rem; margin-left: auto; cursor: pointer; font-size: 1.22rem; font-weight: 600; color: var(--ink-2); user-select: none; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .tr { position: relative; width: 4rem; height: 2.3rem; border-radius: 99px; background: rgba(255, 255, 255, .12); transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.toggle .tr::after { content: ""; position: absolute; top: .3rem; left: .3rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #cfd9f0; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .45s var(--ease), background .4s; }
.toggle input:checked + .tr { background: rgb(var(--blue) / .75); box-shadow: 0 0 18px -2px rgb(var(--blue) / .8); }
.toggle input:checked + .tr::after { transform: translateX(1.7rem); background: #fff; }
.toggle input:focus-visible + .tr { outline: 2px solid rgb(var(--cyan)); outline-offset: 3px; }
.ai-title { margin: 1.2rem 0 0; font-size: 2.3rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.15; flex: none; }
.ai-title b { font-weight: 700; background: linear-gradient(180deg, #fff, rgb(var(--cyan))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-ai .lead { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; flex: none; }
.c-ai .lead svg.i { width: 1.55rem; height: 1.55rem; color: rgb(var(--mint)); }
.sugs { list-style: none; margin: 1.3rem -.6rem 0; padding: 0 .6rem .6rem; display: flex; flex-direction: column; gap: .9rem; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.sugs::-webkit-scrollbar { display: none; }
.sug { position: relative; flex: none; padding: 1.1rem 1.1rem 1.2rem; border-radius: 2rem; background: rgba(255, 255, 255, .05); box-shadow: var(--lift); transition: background .4s var(--ease); }
.sug:hover, .sug[data-ph-hover] { background: rgba(255, 255, 255, .07); }
.sg-head { display: flex; align-items: center; gap: 1rem; }
.sg-ic { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; flex: none; color: rgb(var(--tone)); background: radial-gradient(circle at 30% 25%, rgb(var(--tone) / .3), rgb(var(--tone) / .1)); }
.sg-ic svg.i { width: 1.6rem; height: 1.6rem; stroke-width: 2; }
.sug.warn { --tone: var(--amber); }
.sug.crit { --tone: var(--crit); }
.sg-who { min-width: 0; flex: 1; }
.sg-who b { display: block; font-size: 1.32rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-who small { display: block; font-size: 1.13rem; font-weight: 500; line-height: 1.3; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-who small em { font-style: normal; font-weight: 700; color: rgb(var(--cyan)); }
.sg-act { display: flex; gap: .5rem; flex: none; }
.sg-act .btn { height: 3rem; padding: 0 1.15rem; font-size: 1.18rem; }
.sg-act .btn kbd { font-size: .95rem; padding: .15rem .5rem; }
.bubble { position: relative; margin: .8rem 0 0 4.4rem; padding: .85rem 1.3rem; border-radius: 1.6rem 1.6rem 1.6rem .6rem; font-size: 1.24rem; font-weight: 500; line-height: 1.5; color: var(--ink-2);
  background: linear-gradient(180deg, rgb(var(--blue) / .18), rgb(var(--blue) / .08)); transition: box-shadow .4s var(--ease); }
.bubble .tx { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; outline: none; }
.sug:not(.open) .bubble, .sug:not(.open) .cmp { display: none; }
.cmp { display: grid; gap: .5rem; margin: .8rem 0 0 4.4rem; padding: .85rem 1.3rem; border-radius: 1.6rem; background: rgba(0, 0, 0, .14); }
.cmp-r { display: grid; grid-template-columns: 11.6rem minmax(0, 1fr) 6.2rem 4.2rem; align-items: center; gap: .9rem; font-size: 1.15rem; font-weight: 600; color: var(--ink-3); }
.cmp-r .tr { height: .7rem; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.cmp-r .tr i { display: block; height: 100%; border-radius: inherit; }
.cmp-r.bad .tr i { background: rgb(var(--amber)); box-shadow: 0 0 10px rgb(var(--amber) / .7); }
.cmp-r.good .tr i { background: linear-gradient(90deg, rgb(var(--blue)), rgb(var(--cyan))); box-shadow: 0 0 10px rgb(var(--cyan) / .7); }
.cmp-r b { text-align: right; font-size: 1.3rem; }
.cmp-r.bad b { color: rgb(var(--amber)); }
.cmp-r.good b { color: rgb(var(--cyan)); }
.cmp-r small { text-align: right; font-size: 1.15rem; font-weight: 700; color: var(--ink-2); }
.sug.done .cmp { opacity: .55; }
.sug.editing .bubble .tx { display: block; -webkit-line-clamp: unset; }
.sug.editing .bubble { color: var(--ink); box-shadow: 0 0 0 2px rgb(var(--cyan) / .7), 0 0 24px -4px rgb(var(--cyan) / .6); }
.sug .edited { display: none; margin-left: .6rem; font-size: 1.05rem; font-weight: 700; color: rgb(var(--cyan)); }
.sug.was-edited .edited { display: inline; }
.sentline { display: none; align-items: center; gap: .5rem; font-size: 1.2rem; font-weight: 700; color: rgb(var(--mint)); white-space: nowrap; }
.sentline svg.i { width: 1.5rem; height: 1.5rem; stroke-width: 2.2; }
.sug.done { background: rgb(var(--mint) / .06); }
.sug.done .bubble { opacity: .55; }
.sug.done .sg-act, .sug.working .sg-act { display: none; }
.sug.done .sentline { display: inline-flex; }
.sug.working .workline { display: inline-flex; }
.workline { display: none; align-items: center; gap: .5rem; font-size: 1.2rem; font-weight: 700; color: rgb(var(--cyan)); white-space: nowrap; }
.workline::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: rgb(var(--cyan)); animation: breathe 1.2s ease-in-out infinite; }
.c-ai.paused .sugs { opacity: .38; filter: saturate(.3); pointer-events: none; }
.c-ai.paused .orb { filter: grayscale(.85); box-shadow: none; }
.ai-foot { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; font-size: 1.2rem; font-weight: 500; color: var(--ink-3); flex: none; }
.ai-foot .dotp { width: 1.4rem; display: grid; place-items: center; }
.ai-foot .dotp::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; background: rgb(var(--cyan)); box-shadow: 0 0 12px rgb(var(--cyan)); animation: breathe 2.2s ease-in-out infinite; }
.c-ai.paused .ai-foot .dotp::before { animation: none; background: var(--ink-4); box-shadow: none; }
@keyframes breathe { 50% { transform: scale(.6); opacity: .5; } }

/* Dagens ture som puls */
.c-flow { grid-area: flow; --acc: var(--blue); --gx: 50%; --gy: 100%; padding-bottom: 1.4rem; }
.flow-vis { position: relative; flex: 1; min-height: 0; margin-top: .4rem; }
.st { position: absolute; top: 0; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.st b { display: block; font-size: 2.6rem; font-weight: 400; letter-spacing: -.04em; line-height: 1.05; transition: color 1s var(--ease), text-shadow 1s var(--ease), transform 1s var(--ease); }
.st.beat b { color: rgb(var(--c)); text-shadow: 0 0 22px rgb(var(--c) / .75); transform: scale(1.07); transition-duration: .12s; }
.st span { display: block; font-size: 1.15rem; font-weight: 600; color: var(--ink-3); margin-top: .1rem; }

/* Køretid */
.c-tacho { grid-area: tacho; --acc: var(--amber); --gx: 0%; --gy: 100%; }
.c-tacho .big { background-image: linear-gradient(180deg, #fff4dc 10%, rgb(var(--amber)) 110%); filter: drop-shadow(0 0 24px rgb(var(--amber) / .35)); }
.tlist { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; gap: .6rem 4rem; flex: 1; min-height: 0; overflow: hidden; }
.tlist > li { width: 100%; }
.trow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .4rem 1.3rem .4rem .45rem; border-radius: 99px; background: var(--surf); cursor: pointer; transition: background .4s var(--ease); }
.trow:hover, .trow[data-ph-hover] { background: var(--surf-2); }
.ring { position: relative; width: 3.2rem; height: 3.2rem; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .bgc { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 3.4; }
.ring .fg { fill: none; stroke: rgb(var(--tone, var(--cyan))); stroke-width: 3.4; stroke-linecap: round; filter: drop-shadow(0 0 3px rgb(var(--tone, var(--cyan)) / .8)); }
.trow b { display: block; font-size: 1.28rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow small { display: block; font-size: 1.1rem; font-weight: 500; line-height: 1.3; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .cd { font-size: 1.5rem; font-weight: 600; color: rgb(var(--tone, var(--ink))); }
.trow.warn { --tone: var(--amber); }
.trow.crit { --tone: var(--crit); }
.trow.calm { --tone: var(--cyan); }
.trow.calm .cd { color: var(--ink-2); }

/* Køl */
.c-cold { grid-area: cold; --acc: var(--cyan); --gx: 100%; --gy: 100%; }
.cold-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 1.6rem; }
.cold-plot { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: .3rem; flex: 1; min-height: 0; }
.cold-band { position: absolute; left: -.6rem; right: -.6rem; border-radius: .8rem; background: rgb(var(--mint) / .08); box-shadow: inset 0 1px 0 rgb(var(--mint) / .18), inset 0 -1px 0 rgb(var(--mint) / .18); pointer-events: none; }
.cold-band span { position: absolute; right: .8rem; top: -1.7rem; font-size: 1.05rem; font-weight: 700; color: rgb(var(--mint) / .85); }
.cbar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; border: 0; padding: 0; background: none; }
.cbar i { display: block; width: min(100%, 1.1rem); height: var(--h); border-radius: 99px; transform-origin: 50% 100%;
  background: linear-gradient(180deg, rgb(var(--cyan) / .9), rgb(var(--cyan) / .18)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); transition: height .9s var(--ease), background .4s; }
.cbar:hover i, .cbar[data-ph-hover] i { background: linear-gradient(180deg, #fff, rgb(var(--cyan) / .3)); }
.cbar.crit i { background: linear-gradient(180deg, rgb(var(--crit)), rgb(var(--crit) / .25)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 16px rgb(var(--crit) / .7); }
.cbar .cl { position: absolute; bottom: calc(var(--h) + .6rem); left: 50%; transform: translateX(-50%); font-size: 1.12rem; font-weight: 800; white-space: nowrap; color: rgb(var(--crit)); }
.cold-axis { display: flex; justify-content: space-between; margin-top: .7rem; font-size: 1.05rem; font-weight: 600; color: var(--ink-4); flex: none; }

/* ---------- Faner: fælles ---------- */
.vhead { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.seg { display: inline-flex; gap: .4rem; padding: .4rem; border-radius: 99px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.seg button { display: inline-flex; align-items: center; gap: .6rem; height: 3.6rem; padding: 0 1.5rem; border: 0; border-radius: 99px; background: none; color: var(--ink-3);
  font-size: 1.28rem; font-weight: 700; white-space: nowrap; transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); }
.seg button b { font-weight: 800; color: var(--ink); }
.seg button:hover, .seg button[data-ph-hover] { color: var(--ink); background: rgba(255, 255, 255, .06); }
.seg button[aria-pressed="true"] { color: var(--ink); background: linear-gradient(180deg, rgb(var(--blue) / .32), rgb(var(--blue) / .12)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 22px -10px rgb(var(--blue) / .8); }
.seg button.warn b { color: rgb(var(--amber)); }
.seg button.crit b { color: rgb(var(--crit)); }
.seg button.zero { opacity: .5; }
.hints { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.12rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.hints kbd { padding: .2rem .65rem; font-size: 1.05rem; }
.hints span { margin-right: .6rem; }
.colh { display: grid; align-items: center; gap: 1.2rem; padding: 0 1.4rem; margin-top: 1.6rem; font-size: 1.1rem; font-weight: 700; color: var(--ink-4); flex: none; }
.colh .r { text-align: right; }
.rows { flex: 1; min-height: 0; margin: .8rem -.8rem 0; padding: 0 .8rem .8rem; display: flex; flex-direction: column; gap: .6rem; }
.lrow { display: grid; align-items: center; gap: 1.2rem; min-height: 5.4rem; padding: .6rem 1.4rem; border-radius: 1.8rem; cursor: pointer; flex: none;
  background: var(--surf); transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); }
.lrow:hover, .lrow[data-ph-hover] { background: var(--surf-2); }
.lrow.cur { background: linear-gradient(90deg, rgb(var(--blue) / .2), rgb(var(--blue) / .08)); box-shadow: inset 0 0 0 1px rgb(var(--cyan) / .35), 0 10px 30px -14px rgb(var(--blue) / .8); }
.lrow.in { animation: rowIn .45s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 22ms); }
.lrow b { font-weight: 700; }
.lrow .two b { display: block; font-size: 1.3rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .two small { display: block; font-size: 1.12rem; font-weight: 500; line-height: 1.3; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .r { text-align: right; justify-self: end; }
.idb { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.32rem; font-weight: 800; letter-spacing: -.01em; }
.idb svg.i { width: 1.4rem; height: 1.4rem; color: rgb(var(--cyan)); }
.prog { display: block; height: .5rem; margin-top: .55rem; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--blue)), rgb(var(--cyan))); box-shadow: 0 0 8px rgb(var(--cyan) / .6); transition: width 1s linear; }
.prog.warn i { background: rgb(var(--amber)); box-shadow: 0 0 8px rgb(var(--amber) / .6); }
.prog.crit i { background: rgb(var(--crit)); box-shadow: 0 0 8px rgb(var(--crit) / .6); }
.eta b { display: block; font-size: 1.4rem; line-height: 1.25; }
.eta small { display: block; font-size: 1.08rem; font-weight: 700; color: var(--ink-3); }
.eta.late small { color: rgb(var(--amber)); }
.eta.saved small { color: rgb(var(--mint)); }
.dt .mono { font-size: 1.32rem; font-weight: 600; }
.dt.warn .mono { color: rgb(var(--amber)); }
.dt.crit .mono { color: rgb(var(--crit)); }
.dt.mute .mono { color: var(--ink-4); }
.fu.low { color: rgb(var(--amber)); font-weight: 800; }
.tp { display: inline-flex; align-items: center; gap: .6rem; justify-content: flex-end; font-weight: 700; white-space: nowrap; }
.fst { min-width: 0; }
.tp.crit { color: rgb(var(--crit)); }
.tp.warn { color: rgb(var(--amber)); }
.tp .na { color: var(--ink-4); font-weight: 500; }
.spark { width: 3.2rem; height: 1.4rem; overflow: visible; }
.spark polyline { fill: none; stroke: rgb(var(--cyan)); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tp.crit .spark polyline { stroke: rgb(var(--crit)); }
.lrow.off { display: none; }
.flash { animation: flash 1s var(--ease); }
@keyframes flash { 0% { color: rgb(var(--cyan)); text-shadow: 0 0 12px rgb(var(--cyan) / .8); } }

/* Flåde */
#v-flaade { grid-template-columns: minmax(0, 1fr) 32rem; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "filters filters" "list side"; }
#v-flaade .vhead { grid-area: filters; }
.c-fleet { grid-area: list; --acc: var(--blue); --gx: 0%; --gy: 0%; }
.fl-cols { grid-template-columns: 8.4rem minmax(12rem, 1.1fr) minmax(12rem, 1.3fr) 12.4rem 7rem 10.4rem 5.6rem 8.4rem; }
.side { grid-area: side; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.6rem; min-height: 0; }
.c-still { --acc: var(--blue); --gx: 0%; --gy: 50%; }
.c-still .mini-list { flex: 1; min-height: 0; gap: .8rem; }
.c-still .mini { padding: 1rem 1.2rem; }
.still-foot { margin-top: auto; padding: 1rem .4rem 0; font-size: 1.15rem; font-weight: 500; color: var(--ink-3); list-style: none; }
.c-still .chip { height: 2.4rem; font-size: 1.08rem; }
.c-fuel { --acc: var(--amber); --gx: 100%; --gy: 0%; }
.mini-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .7rem 1.2rem; border-radius: 1.6rem; background: var(--surf); cursor: pointer; transition: background .35s var(--ease); }
.mini:hover, .mini[data-ph-hover] { background: var(--surf-2); }
.mini b { display: block; font-size: 1.28rem; line-height: 1.3; }
.mini small { display: block; font-size: 1.1rem; font-weight: 500; color: var(--ink-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .v { font-size: 1.5rem; font-weight: 700; color: rgb(var(--amber)); }
.mini.done .v { color: rgb(var(--mint)); font-size: 1.2rem; }
.c-models { --acc: var(--cyan); --gx: 100%; --gy: 100%; }
.models { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.models li { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.2rem; border-radius: 1.6rem; background: var(--surf); font-size: 1.12rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.models li b { font-size: 2.4rem; font-weight: 400; letter-spacing: -.04em; line-height: 1.05; color: var(--ink); }
.models .pb { margin-top: .5rem; height: .5rem; }
.models .pb { border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.models .pb i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--blue)), rgb(var(--cyan))); box-shadow: 0 0 10px rgb(var(--cyan) / .5); transform-origin: 0 50%; }
.models-foot { margin-top: auto; padding-top: 1.4rem; display: flex; align-items: center; gap: .6rem; font-size: 1.22rem; color: var(--ink-3); }
.models-foot svg.i { width: 1.5rem; height: 1.5rem; color: rgb(var(--cyan)); }
.models-foot b { color: var(--ink); }

/* Ruter */
#v-ruter { grid-template-columns: minmax(0, 1fr) 40rem; grid-template-rows: minmax(0, 1fr); }
.c-rmap { --acc: var(--blue); padding: 0; overflow: hidden; }
.c-rmap .map-head { max-width: 46rem; }
.rside { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.6rem; min-height: 0; }
.c-choice { --acc: var(--amber); --gx: 100%; --gy: 0%; }
.c-choice.calm { --acc: var(--mint); }
.opts { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.4rem; }
.opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .9rem 1.4rem .9rem 1rem; border: 0; border-radius: 1.8rem; text-align: left;
  background: var(--surf); transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.opt:hover, .opt[data-ph-hover] { background: var(--surf-2); }
.opt .rd { width: 2rem; height: 2rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink-4); transition: box-shadow .3s; }
.opt[aria-checked="true"] { background: linear-gradient(90deg, rgb(var(--cyan) / .16), rgb(var(--cyan) / .06)); box-shadow: inset 0 0 0 1px rgb(var(--cyan) / .4); }
.opt[aria-checked="true"] .rd { box-shadow: inset 0 0 0 2px rgb(var(--cyan)), inset 0 0 0 5px #06101f, inset 0 0 0 10px rgb(var(--cyan)); }
.opt b { display: block; font-size: 1.32rem; }
.opt small { display: block; font-size: 1.12rem; color: var(--ink-3); font-weight: 500; }
.opt .v { text-align: right; font-size: 1.6rem; font-weight: 600; }
.opt .v small { font-weight: 700; }
.opt.bad .v small { color: rgb(var(--amber)); }
.opt.good .v small { color: rgb(var(--mint)); }
.choice-act { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.choice-act .sub { font-size: 1.15rem; }
.c-routes { --acc: var(--cyan); --gx: 0%; --gy: 100%; }
.rlist { list-style: none; margin: 1.2rem -.8rem 0; padding: 0 .8rem .8rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; min-height: 0; }
.rrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .75rem 1.3rem; border-radius: 1.6rem; background: var(--surf); cursor: pointer; flex: none;
  transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.rrow:hover, .rrow[data-ph-hover] { background: var(--surf-2); }
.rrow.cur { background: linear-gradient(90deg, rgb(var(--blue) / .22), rgb(var(--blue) / .08)); box-shadow: inset 0 0 0 1px rgb(var(--cyan) / .35); }
.rrow b { display: flex; align-items: center; gap: .5rem; font-size: 1.28rem; line-height: 1.3; white-space: nowrap; overflow: hidden; }
.rrow b svg.i { width: 1.3rem; height: 1.3rem; color: rgb(var(--cyan)); }
.rrow small { display: block; font-size: 1.1rem; color: var(--ink-3); font-weight: 500; }
.rrow .n { font-size: 1.5rem; font-weight: 600; text-align: right; }
.rrow .n small { font-size: 1.05rem; }
.rrow.warn .n { color: rgb(var(--amber)); }

/* Chauffører */
#v-chauffoerer { grid-template-columns: minmax(0, 1fr) 36rem; grid-template-rows: minmax(0, 1fr); }
.c-drivers { --acc: var(--blue); --gx: 0%; --gy: 0%; }
.dr-cols { grid-template-columns: minmax(16rem, 1.2fr) 11.6rem minmax(12rem, 1fr) 9.6rem 9.6rem 14.6rem; }
.drv { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.cdw { display: flex; align-items: center; gap: .9rem; }
.cdw .ring { width: 3rem; height: 3rem; }
.meterc small { display: flex; justify-content: space-between; gap: .6rem; font-size: 1.1rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.meterc .ms { color: var(--ink); font-weight: 700; font-size: 1.24rem; }
.ext { display: inline-flex; gap: .4rem; }
.ext i { width: .9rem; height: .9rem; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.ext i.on { background: rgb(var(--cyan)); box-shadow: 0 0 8px rgb(var(--cyan) / .7); }
.dside { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1.6rem; min-height: 0; }
.c-next { --acc: var(--amber); --gx: 100%; --gy: 0%; }
.tl { position: relative; list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: .2rem 4rem; flex: 1; min-height: 0; overflow: hidden; }
.tl > li { width: 100%; }
.tl::before { content: ""; position: absolute; left: 6.5rem; top: 1.6rem; bottom: 1.6rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgb(var(--amber) / .55), rgba(255, 255, 255, .07)); }
.ap { position: relative; display: grid; grid-template-columns: 5.2rem 2.6rem minmax(0, 1fr) auto; align-items: center; gap: 0 .2rem; padding: .55rem .6rem .55rem 0; border-radius: var(--r-in); cursor: pointer; transition: background .35s var(--ease); }
.ap:hover, .ap[data-ph-hover] { background: rgba(255, 255, 255, .045); }
.ap time { font-size: 1.3rem; font-weight: 700; color: var(--ink-2); text-align: right; padding-right: .4rem; }
.ap .node { justify-self: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #1a2440; box-shadow: 0 0 0 3px #08101f; }
.ap.warn .node { background: rgb(var(--amber)); box-shadow: 0 0 0 3px rgb(var(--amber) / .2), 0 0 12px rgb(var(--amber)); }
.ap.crit .node { background: rgb(var(--crit)); box-shadow: 0 0 0 3px rgb(var(--crit) / .2), 0 0 12px rgb(var(--crit)); }
.ap .what { min-width: 0; padding-left: .6rem; }
.ap .what b { display: block; font-size: 1.28rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap .what span { display: block; font-size: 1.1rem; font-weight: 500; line-height: 1.3; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-rules { --acc: var(--cyan); --gx: 0%; --gy: 100%; }
.rules { list-style: none; margin: 1.3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.rules li { display: grid; grid-template-columns: 9.6rem minmax(0, 1fr); align-items: baseline; gap: 1rem; }
.rules b { font-size: 2.2rem; font-weight: 400; letter-spacing: -.04em; white-space: nowrap; }
.rules span { font-size: 1.2rem; color: var(--ink-3); font-weight: 500; line-height: 1.35; }
.rules span em { display: block; font-style: normal; color: var(--ink-2); font-weight: 700; }

/* Beskeder */
#v-beskeder { grid-template-columns: 34rem minmax(0, 1fr) 32rem; grid-template-rows: minmax(0, 1fr); }
.c-threads { --acc: var(--blue); --gx: 0%; --gy: 0%; }
.c-threads .seg { margin-top: 1.4rem; align-self: flex-start; }
.c-threads .seg button { height: 3.2rem; padding: 0 1.2rem; font-size: 1.18rem; }
.thl { list-style: none; margin: 1.2rem -.8rem 0; padding: 0 .8rem .8rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; min-height: 0; }
.th { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .8rem 1.2rem .8rem .8rem; border-radius: 1.8rem; cursor: pointer; flex: none;
  background: var(--surf); transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.th:hover, .th[data-ph-hover] { background: var(--surf-2); }
.th.cur { background: linear-gradient(90deg, rgb(var(--blue) / .22), rgb(var(--blue) / .08)); box-shadow: inset 0 0 0 1px rgb(var(--cyan) / .35); }
.th b { display: block; font-size: 1.3rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th small { display: block; font-size: 1.1rem; color: var(--ink-3); font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th .tm { font-size: 1.1rem; font-weight: 700; color: var(--ink-3); text-align: right; }
.th .tm i { display: block; margin: .4rem 0 0 auto; width: .8rem; height: .8rem; border-radius: 50%; background: rgb(var(--cyan)); box-shadow: 0 0 10px rgb(var(--cyan)); }
.th .av.mod { --acc: var(--mint); }
.c-conv { --acc: var(--cyan); --gx: 50%; --gy: 0%; }
.conv-h { display: flex; align-items: center; gap: 1.2rem; flex: none; }
.conv-h .av { width: 4.4rem; height: 4.4rem; font-size: 1.4rem; }
.conv-h b { display: block; font-size: 1.7rem; letter-spacing: -.01em; }
.conv-h small { display: block; font-size: 1.2rem; color: var(--ink-3); font-weight: 500; }
.conv-h .r { margin-left: auto; }
.ctx { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.4rem; padding: .8rem 1.4rem .8rem .8rem; border-radius: 99px; background: rgba(255, 255, 255, .045); flex: none; }
.ctx:empty { display: none; }
.ctx .two { min-width: 0; flex: 1; }
.ctx .two b { display: block; font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx .two small { display: block; font-size: 1.12rem; color: var(--ink-3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-v { text-align: right; }
.ctx-v b { display: block; font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.ctx-v small { display: block; font-size: 1.05rem; color: var(--ink-3); font-weight: 600; }
.msgs { flex: 1; min-height: 0; margin: 1.6rem -.6rem 0; padding: 0 .6rem; display: flex; flex-direction: column; gap: 1rem; }
.msg { max-width: 76%; padding: 1rem 1.4rem; border-radius: 1.8rem 1.8rem 1.8rem .6rem; font-size: 1.32rem; line-height: 1.5; font-weight: 500; color: var(--ink-2); background: rgba(255, 255, 255, .07); flex: none; }
.msg.out { align-self: flex-end; border-radius: 1.8rem 1.8rem .6rem 1.8rem; color: var(--ink); background: linear-gradient(180deg, rgb(var(--blue) / .38), rgb(var(--blue) / .2)); box-shadow: 0 10px 24px -16px rgb(var(--blue)); }
.msg time { display: block; margin-top: .3rem; font-size: 1.05rem; font-weight: 700; color: var(--ink-3); }
.msg.out time { text-align: right; color: rgba(220, 235, 255, .7); }
.msg.new { animation: rowIn .55s var(--ease) backwards; }
.day { align-self: center; font-size: 1.1rem; font-weight: 700; color: var(--ink-4); }
.composer { margin-top: 1.4rem; padding: 1rem; border-radius: 2.2rem; background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); flex: none; }
.tpls { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.tpls button { height: 2.8rem; padding: 0 1.1rem; border: 0; border-radius: 99px; font-size: 1.15rem; font-weight: 700; color: rgb(var(--cyan)); background: rgb(var(--cyan) / .1); transition: background .3s; }
.tpls button:hover, .tpls button[data-ph-hover] { background: rgb(var(--cyan) / .2); }
.composer textarea { display: block; width: 100%; height: 7.2rem; resize: none; border: 0; outline: 0; padding: .8rem 1rem; border-radius: 1.4rem; background: rgba(0, 0, 0, .18); font-size: 1.32rem; line-height: 1.5; }
.composer textarea:focus-visible { box-shadow: 0 0 0 2px rgb(var(--cyan) / .6); }
.composer textarea::placeholder { color: var(--ink-4); }
.comp-f { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; }
.comp-f .sub { font-size: 1.12rem; }
.comp-f .btn { margin-left: auto; }
.c-log { --acc: var(--blue); --gx: 100%; --gy: 0%; }
.logl { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; flex: 1; min-height: 0; }
.lg { display: grid; grid-template-columns: 4.6rem 1.4rem minmax(0, 1fr); gap: .6rem; align-items: start; padding: .55rem .4rem; border-radius: 1.2rem; font-size: 1.2rem; line-height: 1.4; flex: none; }
.lg time { font-weight: 700; color: var(--ink-3); }
.lg i { margin-top: .5rem; width: .8rem; height: .8rem; border-radius: 50%; background: rgb(var(--mint)); }
.lg.warn i { background: rgb(var(--amber)); box-shadow: 0 0 8px rgb(var(--amber)); }
.lg.crit i { background: rgb(var(--crit)); box-shadow: 0 0 8px rgb(var(--crit)); }
.lg span { color: var(--ink-2); font-weight: 500; }
.lg.new { animation: rowIn .55s var(--ease) backwards; background: rgb(var(--cyan) / .07); }

/* ---------- Skuffe ---------- */
.scrim { position: absolute; inset: 0; z-index: 30; background: rgba(2, 6, 14, .4); opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: absolute; z-index: 31; top: 1.6rem; right: 1.6rem; bottom: 1.6rem; width: 50rem; display: flex; flex-direction: column; border-radius: 2.8rem; --acc: var(--cyan);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025) 40%), rgba(8, 16, 34, .86);
  transform: translateX(calc(100% + 3rem)); transition: transform .55s var(--ease); }
html.ph-frame .drawer, html.ph-demo .drawer { background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025) 40%), rgb(9, 17, 35); }
.drawer.open { transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 90px -20px rgba(0, 0, 0, .9), 0 0 80px -30px rgb(var(--blue) / .7); }
.dr-h { display: flex; align-items: center; gap: 1.2rem; padding: 2.4rem 2.4rem 1.6rem; flex: none; }
.dr-h .c-ico { width: 4.6rem; height: 4.6rem; }
.dr-h .c-ico svg.i { width: 2.2rem; height: 2.2rem; }
.dr-h h2 { margin: 0; display: flex; align-items: baseline; gap: 1rem; font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; }
.plate { font-size: 1.2rem; font-weight: 800; letter-spacing: .06em; padding: .25rem .8rem; border-radius: .7rem; color: #0b1730; background: linear-gradient(180deg, #f6f9ff, #cfdaf0); }
.dr-h p { margin: .3rem 0 0; font-size: 1.24rem; color: var(--ink-3); font-weight: 500; }
.dr-h .icon-btn { margin-left: auto; }
.dr-b { flex: 1; min-height: 0; padding: 0 2rem 1.6rem; display: flex; flex-direction: column; gap: 1.2rem; }
.sec { padding: 1.6rem 1.8rem; border-radius: 2rem; background: rgba(255, 255, 255, .045); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); flex: none; }
.sec h3 { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.2rem; font-size: 1.3rem; font-weight: 700; color: var(--ink-2); }
.sec h3 small { margin-left: auto; font-size: 1.1rem; font-weight: 600; color: var(--ink-4); }
.sec h3 svg.i { width: 1.6rem; height: 1.6rem; color: rgb(var(--cyan)); }
.tacho { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.8rem; align-items: center; }
.tring { position: relative; width: 11rem; height: 11rem; }
.tring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tring .bgc { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 7; }
.tring .fg { fill: none; stroke: rgb(var(--tone, var(--cyan))); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 5px rgb(var(--tone, var(--cyan)) / .7)); transition: stroke-dashoffset 1s linear; }
.tring .c { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; }
.tring .c b { font-size: 1.7rem; font-weight: 600; }
.tring .c span { font-size: 1.02rem; font-weight: 600; color: var(--ink-3); }
.tacho.warn { --tone: var(--amber); }
.tacho.crit { --tone: var(--crit); }
.tacho.warn .c b { color: rgb(var(--amber)); }
.tacho.crit .c b { color: rgb(var(--crit)); }
.meters { display: flex; flex-direction: column; gap: 1rem; }
.meter .m-t { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.18rem; font-weight: 600; color: var(--ink-3); }
.meter .m-t b { color: var(--ink); font-weight: 700; }
.meter .m-b { height: .6rem; margin-top: .45rem; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.meter .m-b i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--blue)), rgb(var(--cyan))); }
.meter.warn .m-b i { background: rgb(var(--amber)); }
.na { font-size: 1.24rem; color: var(--ink-3); }
.stops { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: .9rem; }
.stops::before { content: ""; position: absolute; left: 5.9rem; top: .8rem; bottom: .8rem; width: 2px; background: linear-gradient(180deg, rgb(var(--cyan) / .5), rgba(255, 255, 255, .06)); }
.stops li { display: grid; grid-template-columns: 4.8rem 2.2rem minmax(0, 1fr); align-items: start; gap: 0 .2rem; }
.stops time { font-size: 1.28rem; font-weight: 700; color: var(--ink-2); text-align: right; padding-right: .4rem; }
.stops .p { justify-self: center; margin-top: .45rem; width: 1rem; height: 1rem; border-radius: 50%; background: #1a2440; box-shadow: 0 0 0 3px #0a1324; }
.stops li.done time { color: var(--ink-4); }
.stops li.done .p { background: rgb(var(--mint)); }
.stops li.next .p { background: rgb(var(--cyan)); box-shadow: 0 0 0 3px rgb(var(--cyan) / .2), 0 0 12px rgb(var(--cyan)); }
.stops li.warn .p { background: rgb(var(--amber)); box-shadow: 0 0 0 3px rgb(var(--amber) / .2), 0 0 12px rgb(var(--amber)); }
.stops .x { padding-left: .6rem; font-size: 1.15rem; color: var(--ink-3); font-weight: 500; line-height: 1.4; }
.stops .x b { display: block; font-size: 1.28rem; color: var(--ink); font-weight: 700; }
.temp-top { display: flex; align-items: baseline; gap: 1rem; }
.temp-top .t { font-size: 3.6rem; font-weight: 300; letter-spacing: -.04em; line-height: 1; }
.temp-top .t.crit { color: rgb(var(--crit)); text-shadow: 0 0 22px rgb(var(--crit) / .5); }
.temp-top span { font-size: 1.15rem; color: var(--ink-3); font-weight: 500; }
.tchart { display: block; width: 100%; height: auto; margin-top: 1rem; overflow: visible; }
.tchart .band { fill: rgb(var(--mint) / .08); }
.tchart .lim { stroke: rgb(var(--mint) / .5); stroke-width: 1; stroke-dasharray: 3 4; }
.tchart text { font-size: 10px; font-weight: 600; fill: var(--ink-4); }
.tchart .area { fill: url(#tgrad); }
.tchart .ln { fill: none; stroke: rgb(var(--cyan)); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tchart .ln.hot { stroke: rgb(var(--crit)); }
.tchart .now { fill: #fff; stroke: rgb(var(--cyan)); stroke-width: 2.4; }
.tchart .now.hot { stroke: rgb(var(--crit)); }
.kvs { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: 1rem; }
.kv { padding: 1rem 1.2rem; border-radius: 1.4rem; background: rgba(255, 255, 255, .04); min-width: 0; }
.kv small { display: block; font-size: 1.08rem; font-weight: 600; color: var(--ink-3); }
.kv b { display: block; margin-top: .2rem; font-size: 1.36rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv b.low { color: rgb(var(--amber)); }
.docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.doc { border-radius: 1.6rem; background: rgba(255, 255, 255, .04); }
.doc > button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; width: 100%; padding: .9rem 1.2rem; border: 0; border-radius: inherit; background: none; text-align: left; }
.doc > button:hover, .doc > button[data-ph-hover] { background: rgba(255, 255, 255, .05); }
.doc > button svg.i { color: rgb(var(--cyan)); }
.doc b { display: block; font-size: 1.28rem; }
.doc small { display: block; font-size: 1.1rem; color: var(--ink-3); font-weight: 500; }
.doc .chev { font-size: 1.15rem; font-weight: 700; color: rgb(var(--cyan)); }
.cmr { display: none; grid-template-columns: 1fr 1fr; gap: .8rem 1.4rem; padding: .4rem 1.4rem 1.4rem 4.2rem; font-size: 1.18rem; }
.doc.open .cmr { display: grid; }
.cmr small { display: block; color: var(--ink-4); font-weight: 600; font-size: 1.05rem; }
.cmr span { display: block; color: var(--ink-2); font-weight: 600; }
.dr-f { display: flex; gap: .8rem; padding: 1.4rem 2rem 2rem; flex: none; flex-wrap: wrap; }
.dr-f .btn.pri { margin-left: auto; }

/* ---------- SMS-modal og palette ---------- */
.layer { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 2rem; background: rgba(2, 6, 14, .5); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.layer.open { opacity: 1; pointer-events: auto; }
.modal { --acc: var(--cyan); width: 52rem; padding: 2.4rem; border-radius: 2.8rem; transform: translateY(1.2rem) scale(.98); transition: transform .5s var(--ease);
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03) 45%), rgba(10, 20, 42, .88); }
html.ph-frame .modal, html.ph-demo .modal { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03) 45%), rgb(11, 21, 43); }
html.ph-frame .pal-box, html.ph-demo .pal-box { background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)), rgb(11, 21, 43); }
.layer.open .modal { transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 90px -20px rgba(0, 0, 0, .9), 0 0 80px -24px rgb(var(--cyan) / .55); }
.m-h { display: flex; align-items: center; gap: 1.1rem; }
.m-h h2 { margin: 0; font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; }
.m-h .icon-btn { margin-left: auto; }
.to { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.8rem; padding: 1rem 1.4rem 1rem 1rem; border-radius: 99px; background: rgba(255, 255, 255, .05); }
.to .av { --acc: var(--mint); width: 4rem; height: 4rem; font-size: 1.3rem; }
.to b { display: block; font-size: 1.4rem; }
.to small { display: block; font-size: 1.15rem; color: var(--ink-3); font-weight: 500; }
.to .ph { margin-left: auto; font-size: 1.2rem; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.etaline { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.2rem; padding: 1.2rem 1.6rem; border-radius: 2rem; background: linear-gradient(90deg, rgb(var(--cyan) / .12), rgb(var(--cyan) / .03)); }
.etaline .l { font-size: 1.24rem; font-weight: 600; color: var(--ink-2); }
.etaline s { font-size: 1.7rem; font-weight: 500; color: var(--ink-4); }
.etaline svg.i { width: 1.6rem; height: 1.6rem; color: var(--ink-3); }
.etaline .new { font-size: 3rem; font-weight: 300; letter-spacing: -.04em; line-height: 1; color: #fff; text-shadow: 0 0 20px rgb(var(--cyan) / .6); }
.etaline .chip { margin-left: auto; }
.smsbox { margin-top: 1.2rem; }
.smsbox textarea { display: block; width: 100%; height: 10.4rem; resize: none; border: 0; outline: 0; padding: 1.2rem 1.4rem; border-radius: 1.8rem 1.8rem 1.8rem .6rem; font-size: 1.36rem; line-height: 1.5;
  color: var(--ink); background: linear-gradient(180deg, rgb(var(--blue) / .2), rgb(var(--blue) / .1)); }
.smsbox textarea:focus-visible { box-shadow: 0 0 0 2px rgb(var(--cyan) / .7); }
.sms-meta { display: flex; justify-content: space-between; margin-top: .7rem; font-size: 1.12rem; font-weight: 600; color: var(--ink-3); }
.m-f { display: flex; align-items: center; gap: .8rem; margin-top: 1.8rem; }
.m-f .sub { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; }
.m-f .sub svg.i { width: 1.45rem; height: 1.45rem; color: rgb(var(--mint)); }
.m-f .btn:first-of-type { margin-left: auto; }
.pal-layer { place-items: start center; padding-top: 12%; }
.pal-box { --acc: var(--cyan); width: 60rem; padding: 1.2rem; border-radius: 2.8rem; transform: translateY(-1rem) scale(.98); transition: transform .45s var(--ease);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)), rgba(10, 20, 42, .9); }
.layer.open .pal-box { transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 90px -20px rgba(0, 0, 0, .9); }
.pal-in { display: flex; align-items: center; gap: 1rem; height: 5.4rem; padding: 0 1.2rem 0 1.8rem; border-radius: 99px; background: rgba(255, 255, 255, .06); }
.pal-in svg.i { color: rgb(var(--cyan)); }
.pal-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 1.6rem; font-weight: 500; color: var(--ink); }
.pal-in input::placeholder { color: var(--ink-3); }
.pal-list { margin: .8rem 0 0; padding: 0; max-height: 44rem; overflow: auto; scrollbar-width: none; }
.pal-g { padding: 1rem 1.6rem .4rem; font-size: 1.1rem; font-weight: 700; color: var(--ink-4); }
.pal-i { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; padding: .7rem 1.6rem .7rem .7rem; border-radius: 99px; cursor: pointer; transition: background .25s var(--ease); }
.pal-i.on, .pal-i:hover, .pal-i[data-ph-hover] { background: rgb(var(--cyan) / .12); }
.pal-i .av { width: 3.4rem; height: 3.4rem; font-size: 1.05rem; }
.pal-i b { display: block; font-weight: 700; font-size: 1.34rem; }
.pal-i small { display: block; font-size: 1.14rem; font-weight: 500; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-i em { font-style: normal; color: rgb(var(--cyan)); }
.pal-i .amt { font-size: 1.2rem; font-weight: 700; color: var(--ink-3); text-align: right; }
.pal-none { padding: 2rem; text-align: center; color: var(--ink-3); }
.pal-foot { display: flex; gap: 1.6rem; padding: 1.1rem 1.6rem .4rem; font-size: 1.12rem; font-weight: 500; color: var(--ink-3); }

/* ---------- Toast ---------- */
.toasts { position: absolute; z-index: 70; top: 1.4rem; right: 1.6rem; display: flex; flex-direction: column; gap: 1rem; pointer-events: none; }
.toast { --acc: var(--mint); display: flex; align-items: center; gap: 1.3rem; width: 40rem; padding: 1.3rem 1.6rem 1.3rem 1.3rem; border-radius: 2.4rem; pointer-events: auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)), rgb(12, 22, 44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 26px 50px -18px rgba(0, 0, 0, .9), 0 0 44px -14px rgb(var(--acc) / .75); animation: toastIn .55s var(--ease) backwards; }
.toast.out { transition: opacity .45s var(--ease), transform .45s var(--ease); opacity: 0; transform: translateY(-1.6rem) scale(.98); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-2rem) scale(.97); } }
.toast .ti { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; flex: none; color: #03111f;
  background: linear-gradient(135deg, rgb(var(--acc)), rgb(var(--cyan))); box-shadow: 0 0 22px -4px rgb(var(--acc) / .9); }
.toast .ti svg.i { width: 2rem; height: 2rem; stroke-width: 2.2; }
.toast b { display: block; font-size: 1.36rem; font-weight: 700; }
.toast span { display: block; font-size: 1.2rem; font-weight: 500; color: var(--ink-3); }
.toast time { margin-left: auto; align-self: flex-start; font-size: 1.08rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }

/* ---------- Indlæsning ---------- */
.pre .rail, .pre .top, .pre .view.on > * { opacity: 0; }
.view.on > .in { animation: cardIn .5s var(--ease) backwards; animation-delay: var(--delay, 0s); }
.rail.in, .top.in { animation: fadeIn .45s var(--ease) backwards; }
@keyframes cardIn { from { opacity: 0; transform: translateY(1.6rem) scale(.985); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-.6rem); } }
.c-map .land-g { transition: opacity .9s var(--ease); }
.c-map.intro .land-g { opacity: 0; }

/* ---------- Telefon (max 760 px): stak i stedet for at presse ---------- */
@media (max-width: 1100px) {
/* Gælder ikke i demo-rammen (9:16 er 1080 px bred): */ :root:not(.ph-frame){
  &{ font-size: max(8.8px, 1vw) !important; }
  #app { overflow-y: auto; }
  .shell { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100%; padding: 1rem; padding-bottom: 9rem; }
  .rail { position: fixed; z-index: 20; left: 1rem; right: 1rem; bottom: 1rem; flex-direction: row; gap: .6rem; padding: .6rem; border-radius: 2.4rem; }
  .mark, .rail-keys { display: none; }
  .nav-list { flex-direction: row; flex: 1; }
  .nav-list > li { flex: 1 1 0; min-width: 0; }
  .nav { font-size: 1rem; padding: .7rem .1rem; min-width: 44px; min-height: 44px; }
  .nav .badge { right: auto; left: 50%; margin-left: 1.3rem; top: .3rem; }
  kbd { display: none !important; }
  .top { flex-wrap: wrap; }
  .greet { flex: 1 1 100%; }
  .greet p { flex-wrap: wrap; white-space: normal; row-gap: .2rem; overflow: visible; }
  .top-r { width: 100%; }
  .search { flex: 1; width: auto; }
  .clockpill, .me { display: none; }
  .views { min-height: 0; }
  .view { position: static; }
  .view.on { display: flex; flex-direction: column; }
  .view.on > * { min-height: 32rem; min-width: 0; }
  .vhead { overflow-x: auto; }
  .xrow .x-v small, .map-legend, .mlabels { display: none; }
  .c-map { min-height: 60rem; }
  .side, .rside, .dside { display: flex; flex-direction: column; }
  .colh { display: none; }
  .lrow { grid-template-columns: 1fr 1fr !important; }
  .drawer { left: 1rem; right: 1rem; width: auto; }
  .modal, .pal-box { width: 100%; }
}
}
@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after { animation: none !important; transition: none !important; }
  .pre .rail, .pre .top, .pre .view.on > * { opacity: 1; }
}
@media (hover: none) { kbd { display: none !important; } }