/* =========================================================
   Adlure Dashboard — designsystem

   Paletten ligger fast: blå #3498DB (struktur), grøn #3AD790
   (tilstande og mærkater), rød #F44C80 (accenter og fald).

   Mobil er ikke en formindsket udgave af computeren. Menuen
   flytter ned i bunden inden for tommelfingerens rækkevidde,
   tabeller bliver til kort, og alt man kan trykke på er
   mindst 44px. Det er derfor breakpointsene ligger, hvor de
   ligger.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --blue: #3498DB;
  --green: #3AD790;
  --red: #F44C80;

  /* Bløde toner afledt af de tre mærkefarver */
  --blue-soft: rgba(52, 152, 219, .10);
  --blue-line: rgba(52, 152, 219, .28);
  --green-soft: rgba(58, 215, 144, .12);
  --green-line: rgba(58, 215, 144, .34);
  --red-soft: rgba(244, 76, 128, .10);
  --red-line: rgba(244, 76, 128, .30);

  /* Blødt hvidt lærred */
  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --line: rgba(23, 34, 48, .08);
  --line-strong: rgba(23, 34, 48, .14);
  --ink: #212832;
  --ink-2: #5A6675;
  --ink-3: #8A94A1;

  /* Grøn tekst på lys baggrund skal være mørkere for at kunne læses */
  --green-ink: #167C51;

  --shadow-rest: 0 1px 2px rgba(23, 34, 48, .04), 0 10px 26px -18px rgba(23, 34, 48, .22);
  --shadow-lift: 0 2px 4px rgba(23, 34, 48, .05), 0 22px 48px -24px rgba(23, 34, 48, .30);

  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;

  --ease: cubic-bezier(.22, .9, .28, 1);
  --dur: 280ms;

  --rail-w: 78px;
  --rail-open: 236px;
  --rail-gap: 28px;
  --shell-pad: 20px;
  --shell-top: 14px;
  --bar-h: 66px;

  --tap: 44px;

  color-scheme: light;
}

[data-theme="dark"] {
  /* Blødt sort lærred — aldrig rent #000 */
  --bg: #131519;
  --surface: #191C21;
  --surface-2: #1E2229;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .15);
  --ink: #E9EDF2;
  --ink-2: #A3AEBB;
  --ink-3: #79838F;

  --green-ink: var(--green);

  --blue-soft: rgba(52, 152, 219, .16);
  --green-soft: rgba(58, 215, 144, .15);
  --red-soft: rgba(244, 76, 128, .14);

  --shadow-rest: 0 1px 2px rgba(0, 0, 0, .30), 0 14px 34px -22px rgba(0, 0, 0, .7);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 26px 56px -26px rgba(0, 0, 0, .8);

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 420ms var(--ease), color 420ms var(--ease);
}
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
::selection { background: var(--blue-soft); }

/* Synlig fokusmarkering. Uden den kan man ikke betjene
   dashboardet med tastatur — og det skal man kunne. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Ambient lys ---------- */
.ambience { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ambience__blob {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
  animation: drift 26s ease-in-out infinite alternate;
}
.ambience__blob--blue  { width: 46vw; height: 46vw; left: -10vw; top: -14vw; background: var(--blue);  opacity: .13; }
.ambience__blob--green { width: 34vw; height: 34vw; right: -8vw; top: 24vh;  background: var(--green); opacity: .10; animation-delay: -9s; }
.ambience__blob--red   { width: 30vw; height: 30vw; left: 38vw; bottom: -16vw; background: var(--red); opacity: .07; animation-delay: -17s; }
[data-theme="dark"] .ambience__blob { opacity: .10; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3vw, 4vh, 0) scale(1.12); }
}

/* ---------- App-ramme ---------- */
.app { position: relative; z-index: 1; display: flex; min-height: 100vh; }

.rail {
  position: fixed; inset: 14px auto 14px 14px;
  width: var(--rail-w);
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-rest);
  z-index: 40;
  transition: width var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  overflow: hidden;
}
.rail:hover, .rail:focus-within { width: var(--rail-open); box-shadow: var(--shadow-lift); }

.rail__brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 2px; }
/* Løven fra adlure.dk, samme fil som ikonet på hjemmeskærmen. */
.mark {
  flex: none; display: block; width: 32px; height: 32px; border-radius: 11px;
  box-shadow: 0 6px 16px -9px var(--blue);
}
.rail__brandtext {
  display: grid; white-space: nowrap;
  opacity: 0; transform: translateX(-6px);
  transition: opacity 200ms var(--ease), transform 260ms var(--ease);
}
.rail:hover .rail__brandtext, .rail:focus-within .rail__brandtext { opacity: 1; transform: none; }
.rail__brandtext strong { font-size: 15px; letter-spacing: -.02em; }
.rail__brandtext small { font-size: 11px; color: var(--ink-3); letter-spacing: .08em; }

/* Menupunkter */
.rail__nav { position: relative; display: grid; gap: 4px; }
.rail__marker {
  position: absolute; left: 0; width: 100%; height: var(--tap); border-radius: 14px;
  background: var(--blue-soft);
  transition: transform 420ms var(--ease), width 300ms var(--ease);
  pointer-events: none;
}
.rail__marker::before {
  content: ""; position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--blue);
}
.rail__item {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px;
  height: var(--tap); padding: 0 12px; border-radius: 14px;
  color: var(--ink-2); white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  width: 100%; text-align: left;
}
.rail__item:hover { color: var(--ink); background: var(--surface-2); }
.rail__item.is-active { color: var(--blue); background: transparent; }
.rail__icon { flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.rail__icon svg { width: 20px; height: 20px; }
.rail__item .rail__label,
.rail__user .rail__label { opacity: 0; transform: translateX(-6px); transition: opacity 200ms var(--ease), transform 260ms var(--ease); }
.rail:hover .rail__label, .rail:focus-within .rail__label { opacity: 1; transform: none; }

.rail__foot { margin-top: auto; display: grid; gap: 8px; }
.rail__user { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; }
.avatar {
  flex: none; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  background: var(--green-soft); color: var(--green-ink); border: 1px solid var(--green-line);
}
.avatar--lg { width: 42px; height: 42px; border-radius: 14px; font-size: 13px; }
.rail__label--user { display: grid; white-space: nowrap; min-width: 0; }
.rail__label--user strong { font-size: 13.5px; font-weight: 600; }
.rail__label--user small { font-size: 11.5px; color: var(--ink-3); }

/* ---------- Indhold ---------- */
.shell { flex: 1; margin-left: calc(var(--rail-w) + var(--rail-gap)); padding: var(--shell-top) var(--shell-pad) 40px 0; min-width: 0; }
.viewport:focus { outline: none; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: grid; gap: 12px;
  padding: 16px 4px 16px;
}

/* Baggrunden ligger på et lag for sig, af to grunde.

   Den strækker sig ud til vindueskanten i begge sider — mod
   venstre helt ind under sidebjælken, som ligger ovenpå og
   dækker den. Ellers stoppede farven brat ved skallens kant og
   gav en synlig lodret søm ned langs menuen.

   Og den fades med en maske frem for med en gradient i selve
   farven. Maskningen tager `backdrop-filter` med sig, så
   sløringen forsvinder i takt med farven. En gradient ville
   kun tone farven ud og efterlade blur-firkanten med skarpe
   kanter. */
.topbar::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--shell-top)); bottom: 0;
  left: calc(-1 * (var(--rail-w) + var(--rail-gap)));
  width: calc(100% + var(--rail-w) + var(--rail-gap) + var(--shell-pad));
  z-index: -1;
  pointer-events: none;
  background: var(--bg);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.topbar__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.topbar__left { flex: 1 1 240px; min-width: 0; }
.topbar__title { font-size: 26px; font-weight: 400; letter-spacing: -.03em; line-height: 1.2; }
.topbar__right { display: flex; align-items: center; gap: 10px; }
.topbar__row--period { align-items: center; justify-content: flex-start; gap: 12px; }
.period__label { font-size: 12px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); margin-bottom: 5px;
}

.search {
  display: flex; align-items: center; gap: 9px;
  height: var(--tap); padding: 0 10px 0 13px; min-width: 250px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  color: var(--ink-3);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), min-width var(--dur) var(--ease);
}
.search:focus-within { border-color: var(--blue-line); box-shadow: 0 0 0 4px var(--blue-soft); min-width: 310px; }
.search svg { width: 17px; height: 17px; }
.search input { border: 0; outline: 0; background: none; width: 100%; font-size: 14px; min-width: 0; }
.search input::placeholder { color: var(--ink-3); }
.search kbd {
  font-size: 11px; font-family: inherit; color: var(--ink-3); flex: none;
  border: 1px solid var(--line-strong); border-radius: 6px; padding: 1px 6px;
}

.segmented {
  display: flex; gap: 3px; padding: 3px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
}
.segmented button {
  height: 38px; padding: 0 16px; border-radius: 11px; font-size: 13.5px; font-weight: 500;
  color: var(--ink-2); transition: all var(--dur) var(--ease); white-space: nowrap;
}
.segmented button:hover { color: var(--ink); }
.segmented button.is-active { background: var(--blue); color: #fff; box-shadow: 0 6px 14px -8px var(--blue); }

.iconbtn {
  position: relative; width: var(--tap); height: var(--tap); display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px; color: var(--ink-2);
  transition: all var(--dur) var(--ease); flex: none;
}
.iconbtn:hover { color: var(--ink); border-color: var(--line-strong); transform: translateY(-1px); }
.iconbtn svg { width: 19px; height: 19px; }
.iconbtn .dot {
  position: absolute; top: 11px; right: 12px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 2px var(--surface);
}

/* Hvilken side man kigger på. Ikke en vælger — kunden har én side. */
.client {
  display: flex; align-items: center; gap: 10px; height: var(--tap); padding: 0 14px 0 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
}
.client__logo {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; background: var(--blue-soft); color: var(--blue); flex: none;
}
.client__meta { display: grid; line-height: 1.25; min-width: 0; }
.client__meta strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client__meta small { font-size: 11px; color: var(--ink-3); }

/* ---------- Gitter og kort ---------- */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; padding: 0 4px; }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; }

.card {
  /* Et kort skal reagere på sin egen bredde, ikke på skærmens.
     Et kort på en tredjedel af en stor skærm er lige så smalt
     som et helt kort på en telefon. */
  container-type: inline-size;
  container-name: card;
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-rest);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (hover: hover) {
  .card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); }
}

.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.card__headtext { min-width: 0; }
.card__title { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }

/* Forklaringslinjen. Den er ikke pynt — den er grunden til at
   en kunde uden teknisk baggrund kan bruge kortet. Derfor er
   den læsbar og ikke lysegrå på 11px. */
.card__note { font-size: 13px; color: var(--ink-2); margin-top: 5px; max-width: 62ch; line-height: 1.5; }
.card__insight { font-size: 13px; color: var(--ink-2); margin-top: 16px; line-height: 1.55; }
.card__tools { display: flex; align-items: center; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }

.ghostgroup { display: flex; gap: 4px; flex-wrap: wrap; }
.ghostbtn {
  min-height: 36px; padding: 0 13px; border-radius: 10px; font-size: 13px; color: var(--ink-2);
  border: 1px solid transparent; transition: all var(--dur) var(--ease);
}
.ghostbtn:hover { color: var(--ink); background: var(--surface-2); border-color: var(--line); }
.ghostbtn.is-active { color: var(--blue); background: var(--blue-soft); border-color: transparent; font-weight: 550; }

.linkbtn {
  font-size: 13px; color: var(--red); display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 4px; transition: gap var(--dur) var(--ease);
}
.linkbtn svg { width: 14px; height: 14px; }
.linkbtn:hover { gap: 10px; }

.btn-primary {
  margin-top: 16px; min-height: 42px; padding: 0 18px; border-radius: 12px;
  background: var(--blue); color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 22px -12px var(--blue);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px var(--blue); }

/* ---------- Mærkater ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 24px; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; flex: none;
  background: var(--green-soft); color: var(--green-ink); border: 1px solid var(--green-line);
}
.pill svg { width: 12px; height: 12px; }
.pill--down { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.pill--info { background: var(--blue-soft); color: var(--blue); border-color: var(--blue-line); }
.pill--mute { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); }

/* ---------- Resuméet ----------
   Det første man ser, og det eneste man skal kunne nøjes med
   at læse. Derfor sætning frem for tal, og rigelig skriftstørrelse. */
.summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, var(--blue-soft), transparent 62%), var(--surface);
  border-color: var(--blue-line);
}
.summary__body { display: flex; align-items: flex-start; gap: 16px; min-width: 0; flex: 1 1 420px; }
.summary__mark {
  flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue);
}
.summary__mark svg { width: 21px; height: 21px; }
.summary__line { font-size: 17px; line-height: 1.5; letter-spacing: -.01em; }
.summary__line b { font-weight: 650; }
.summary__sub { font-size: 13px; color: var(--ink-2); margin-top: 5px; }
.summary__pill { flex: none; }

/* ---------- Nøgletal ---------- */
.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.kpi__label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.kpi__value {
  font-size: 38px; font-weight: 300; letter-spacing: -.035em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.kpi__value small { font-size: 18px; color: var(--ink-3); font-weight: 400; margin-left: 2px; }
.kpi__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 14px; }
.kpi__hint { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.kpi__hint b { color: var(--ink); font-weight: 600; }
.spark { width: 96px; height: 34px; flex: none; }
.sparkhost { flex: none; }

/* ---------- Grafer ---------- */
.chartwrap { position: relative; touch-action: pan-y; }
.chart { width: 100%; display: block; }
.axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.legend__item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.chart .line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chart .line--draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1250ms var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart .area { transform-box: fill-box; transform-origin: bottom; animation: riseArea 900ms var(--ease) 180ms both; }
@keyframes riseArea { from { transform: scaleY(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.chart .grid-line { stroke: var(--line); stroke-dasharray: 2 6; }
.chart .col { transform-box: fill-box; transform-origin: bottom; animation: growY 700ms var(--ease) both; }
@keyframes growY { from { transform: scaleY(0); } to { transform: none; } }
.chart .arc { animation: sweep 1100ms var(--ease) both; }
@keyframes sweep { from { stroke-dashoffset: var(--circ); } }

.cross { opacity: 0; transition: opacity 180ms var(--ease); }
.chartwrap.is-hovered .cross { opacity: 1; }

.tip {
  position: fixed; z-index: 90; pointer-events: none; opacity: 0;
  transform: translate(-50%, calc(-100% - 14px)) scale(.96);
  transition: opacity 160ms var(--ease), transform 200ms var(--ease);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: var(--shadow-lift); padding: 10px 13px; font-size: 13px; min-width: 150px;
  max-width: min(280px, calc(100vw - 24px));
}
.tip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 10px)) scale(1); }
.tip.tip--below { transform: translate(-50%, 14px) scale(.96); }
.tip.tip--below.is-on { transform: translate(-50%, 18px) scale(1); }
.tip__date { font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; }
.tip__row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.tip__row + .tip__row { margin-top: 4px; }
.tip__k { display: flex; align-items: center; gap: 7px; color: var(--ink-2); }
.tip__v { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Doughnut ---------- */
.donut { display: flex; align-items: center; gap: 20px; }
.donut__ring { position: relative; width: 148px; height: 148px; flex: none; }
.donut__svg { width: 148px; height: 148px; }
.donut__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut__center b { display: block; font-size: 24px; font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.donut__center b small { font-size: 14px; color: var(--ink-3); }
.donut__center span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
/* minmax(0,1fr) er ikke pynt: uden den får den automatiske
   kolonne min-content som mindstemål, og lange navne skubber
   tallene ud over kortkanten. Samme grund på .ranks og .feed. */
.donut__list { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.donut__row {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px;
  min-height: 34px; padding: 0 8px; margin: 0 -8px; border-radius: 9px;
  transition: background-color 200ms var(--ease); cursor: default;
}
.donut__row[data-seg] { cursor: pointer; }
.donut__row.is-on { background: var(--surface-2); }
.donut__row .name { color: var(--ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut__row.is-on .name { color: var(--ink); }
.donut__row .val { font-variant-numeric: tabular-nums; font-weight: 600; }
.donut__row .pct { color: var(--ink-3); font-size: 12px; width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Rangerede bjælker ---------- */
.ranks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px; }
.rank { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.rank__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.rank__name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__val { font-variant-numeric: tabular-nums; font-weight: 600; flex: none; }
.rank__val small { color: var(--ink-3); font-weight: 400; font-size: 12px; }
.rank__track { height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.rank__track--wide { margin-top: 20px; height: 10px; }
.rank__fill {
  display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), #6cc0ec);
  width: 0; transition: width 900ms var(--ease);
}
/* Farve = betydning, ikke rækkefølge. */
.rank--alt .rank__fill,
.rank--good .rank__fill { background: linear-gradient(90deg, var(--green), #7fe6b7); }
.rank--warn .rank__fill { background: linear-gradient(90deg, var(--blue), #6cc0ec); }
.rank--bad .rank__fill { background: linear-gradient(90deg, var(--red), #ff8fb3); }

/* ---------- Tragt ---------- */
.funnel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.step__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.step__name { color: var(--ink-2); }
.step__val { font-variant-numeric: tabular-nums; font-weight: 600; }
.step__bar {
  height: 38px; border-radius: 12px; width: 0; min-width: 76px; white-space: nowrap;
  background: var(--blue-soft); border: 1px solid var(--blue-line);
  display: flex; align-items: center; padding: 0 12px;
  font-size: 12.5px; color: var(--blue); font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: width 1000ms var(--ease);
}
.step__foot { font-size: 12px; color: var(--ink-3); }
.step__drop { color: var(--red); }

/* ---------- Oppetid ---------- */
.uptime { display: flex; gap: 3px; align-items: flex-end; height: 48px; margin-bottom: 4px; }
.uptime i {
  flex: 1; min-width: 2px; border-radius: 3px; background: var(--green); opacity: .85; height: 100%;
  transform-origin: bottom; animation: growY 500ms var(--ease) both;
  transition: opacity 200ms var(--ease);
}
.uptime i:hover { opacity: 1; }
.uptime i.is-warn { background: var(--blue); }
.uptime i.is-down { background: var(--red); }

/* ---------- Målere ---------- */
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 18px; }
.gauge { position: relative; display: grid; justify-items: center; gap: 4px; padding: 6px 0; text-align: center; }
.gauge__svg { width: 100%; max-width: 124px; height: auto; }
.gauge__val { position: absolute; top: 44%; }
.gauge__val b { font-size: 22px; font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.gauge__val b small { font-size: 13px; color: var(--ink-3); }
.gauge__name { font-size: 13px; color: var(--ink); font-weight: 550; margin-top: 2px; }
.gauge__sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }

/* ---------- Tabeller ---------- */
.tablewrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr { transition: background-color 200ms var(--ease); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .path { color: var(--ink); font-weight: 550; }
.table .pathurl { display: block; font-size: 12px; }
.table .muted { color: var(--ink-3); }

/* ---------- Aktivitet ---------- */
.feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.feed__item {
  display: flex; gap: 13px; padding: 12px 10px; border-radius: 13px;
  transition: background-color 220ms var(--ease);
}
.feed__item:hover { background: var(--surface-2); }
.feed__dot { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; }
.feed__dot svg { width: 16px; height: 16px; }
.feed__dot--blue { background: var(--blue-soft); color: var(--blue); }
.feed__dot--green { background: var(--green-soft); color: var(--green-ink); }
.feed__dot--red { background: var(--red-soft); color: var(--red); }
.feed__body { min-width: 0; }
.feed__title { font-size: 13.5px; line-height: 1.45; }
.feed__time { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

.person { display: flex; align-items: center; gap: 14px; }
.person__name { font-size: 14.5px; font-weight: 600; }
.person__meta { font-size: 12.5px; color: var(--ink-3); }

/* ---------- Kloden ---------- */
.globe { display: flex; align-items: center; gap: 26px; }
.globe__stage {
  position: relative;
  flex: none; width: 300px; display: grid; place-items: center;
  /* Vandret træk drejer kloden, lodret rulning skal stadig
     virke på en telefon. */
  touch-action: pan-y;
}
.globe__canvas {
  cursor: grab; border-radius: 50%;
  filter: drop-shadow(0 18px 34px rgba(23, 62, 99, .30));
}
.globe__canvas:active { cursor: grabbing; }
.globe__list { flex: 1; min-width: 0; }

/* Zoom. Knapper frem for musehjul: en kunde skal ikke gætte en
   genvej, og et hjul der zoomer i stedet for at rulle siden
   føles som om noget gik i stykker. */
.globe__zoom {
  position: absolute; right: 2px; bottom: 6px;
  display: grid; gap: 6px; z-index: 2;
}
.globe__zoombtn {
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 600; line-height: 1;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-rest);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.globe__zoombtn:hover:not(:disabled) { color: var(--blue); border-color: var(--blue-line); }
.globe__zoombtn:disabled { opacity: .35; cursor: default; }

/* ---------- Talbånd ---------- */
.band { display: grid; gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; margin-top: 18px; }
.band > div { background: var(--surface); padding: 14px 16px; }
.band b { display: block; font-size: 22px; font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.band b small { font-size: 14px; color: var(--ink-3); }
.band span { font-size: 11.5px; color: var(--ink-3); }

/* ---------- Indstillinger ---------- */
.setrow {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.setrow:last-child { border-bottom: 0; }
.setrow__text { min-width: 0; }
.setrow__t { font-size: 14px; font-weight: 550; }
.setrow__d { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; max-width: 52ch; line-height: 1.5; }

.switch {
  position: relative; width: 52px; height: 30px; border-radius: 999px; flex: none;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink-3); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.switch[aria-checked="true"] { background: var(--green-soft); border-color: var(--green-line); }
.switch[aria-checked="true"]::after { transform: translateX(22px); background: var(--green); }

.chips { display: flex; gap: 8px; flex: none; }
.chip {
  min-height: 38px; padding: 0 15px; border-radius: 11px; font-size: 13.5px; font-weight: 550;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  transition: all var(--dur) var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip.is-active { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue); }

.themepick { display: flex; gap: 12px; margin-bottom: 4px; }
.themecard {
  flex: 1; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface-2); text-align: left; transition: all var(--dur) var(--ease);
}
.themecard:hover { border-color: var(--line-strong); }
.themecard.is-active { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.themecard__prev { display: block; height: 52px; border-radius: 9px; margin-bottom: 10px; border: 1px solid var(--line); position: relative; overflow: hidden; }
.themecard__prev::before { content: ""; position: absolute; left: 9px; top: 11px; width: 34%; height: 8px; border-radius: 4px; background: var(--blue); }
.themecard__prev::after { content: ""; position: absolute; left: 9px; top: 26px; width: 58%; height: 6px; border-radius: 4px; background: var(--ink-3); opacity: .45; }
.themecard--light .themecard__prev { background: #F3F5F8; }
.themecard--dark .themecard__prev { background: #131519; }
.themecard__name { display: block; font-size: 13.5px; font-weight: 550; }

/* ---------- Aftalekort (blåt = det vigtige) ---------- */
.plan { background: linear-gradient(150deg, var(--blue), #2b83bf); color: #fff; border: 0; }
.plan::after { display: none; }
.plan .card__title, .plan .kpi__value { color: #fff; }
.plan__value { font-size: 32px; }
.plan__value--sm { font-size: 24px; font-weight: 500; }
.plan__value small { color: rgba(255, 255, 255, .7); }
.plan__meta { font-size: 13px; opacity: .85; line-height: 1.5; }
.plan__bar { height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden; margin: 16px 0 10px; }
.plan__bar i { display: block; height: 100%; background: var(--green); width: 0; transition: width 1000ms var(--ease); }
.plan .btn-white {
  margin-top: 16px; min-height: 42px; padding: 0 18px; border-radius: 12px; background: #fff; color: var(--blue);
  font-size: 14px; font-weight: 650; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plan .btn-white:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .5); }
.plan :focus-visible { outline-color: #fff; }

/* ---------- Indgangsanimation ---------- */
.stagger > * { animation: cardIn 560ms var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }


/* =========================================================
   Admin — bureauets eget lag
   ========================================================= */

/* Bjælken der siger hvis dashboard man kigger på. Den skal
   kunne ses uden at man leder efter den. */
.impbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  margin: 0 4px;
  padding: 11px 16px;
  border-radius: var(--r-md);
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  font-size: 13.5px;
}
.impbar__text b { font-weight: 650; }
.impbar__back {
  min-height: 34px; padding: 0 13px; border-radius: 10px; flex: none;
  font-size: 13px; font-weight: 600;
  background: var(--red); color: #fff;
  transition: filter var(--dur) var(--ease);
}
.impbar__back:hover { filter: brightness(1.06); }

.avatar--client { background: var(--blue-soft); color: var(--blue); border-color: var(--blue-line); }

/* Kundelisten. Rækkerne er knapper frem for en tabel — så
   virker tastatur og skærmlæser uden ekstra arbejde, og de
   falder pænt fra hinanden på en telefon. */
.clientlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.clientlist__head,
.clientrow {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) .8fr 1fr 1.1fr auto 20px;
  align-items: center; gap: 14px;
}
.clientlist__head {
  padding: 0 12px 8px; border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.clientrow {
  width: 100%; text-align: left;
  padding: 12px; border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.clientrow:hover { background: var(--surface-2); border-color: var(--line); }
.clientrow__id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.clientrow__id > span { display: grid; min-width: 0; }
.clientrow__name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clientrow__domain { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clientrow__cell { display: grid; gap: 5px; min-width: 0; font-variant-numeric: tabular-nums; }
.clientrow__cell b { font-size: 14px; font-weight: 600; }
.clientrow__cell b small { color: var(--ink-3); font-weight: 400; font-size: 12px; }
.clientrow__cell .pill { justify-self: start; }
.clientrow__status { justify-self: start; }
.clientrow__go { color: var(--ink-3); }
.clientrow__go svg { width: 15px; height: 15px; }
.clientrow:hover .clientrow__go { color: var(--blue); }

.rank__fill--good { background: linear-gradient(90deg, var(--green), #7fe6b7); }
.rank__fill--warn { background: linear-gradient(90deg, var(--blue), #6cc0ec); }
.rank__fill--bad { background: linear-gradient(90deg, var(--red), #ff8fb3); }

/* Det der brænder på */
.attnlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.attn {
  display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
  padding: 11px 10px; margin: 0 -10px; border-radius: 13px;
  transition: background-color 200ms var(--ease);
}
.attn:hover { background: var(--surface-2); }
.attn__body { display: grid; gap: 6px; min-width: 0; }
.attn__name { font-size: 13.5px; font-weight: 600; }
.attn__flags { display: flex; flex-wrap: wrap; gap: 5px; }
.chipflag {
  font-size: 11.5px; font-weight: 550; padding: 2px 8px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue); border: 1px solid var(--blue-line);
}
.chipflag--warn { background: var(--blue-soft); color: var(--blue); border-color: var(--blue-line); }
.chipflag--bad { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }

/* Kundens hoved på admin-detaljen */
.adminhead__back { margin-bottom: 12px; }
.adminhead__back svg { width: 15px; height: 15px; }
.adminhead__row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.adminhead__id { display: flex; align-items: center; gap: 15px; min-width: 0; }
.adminhead__name { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.adminhead__meta { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.adminhead__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adminhead__open { margin-top: 0; }
.adminhead__flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }

/* =========================================================
   Udviklergenvej — fjernes sammen med blokken i app.js
   ========================================================= */
.devwrap { position: relative; }
.devbtn {
  width: var(--tap); height: var(--tap); border-radius: 13px;
  display: grid; grid-auto-flow: column; gap: 3px; place-content: center; align-items: center;
  background: var(--surface); border: 1px dashed var(--line-strong);
  transition: border-color var(--dur) var(--ease);
}
.devbtn:hover { border-color: var(--blue); }
.devbtn span { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }
.devbtn:hover span { background: var(--blue); }

.devmenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 268px; max-height: 70vh; overflow-y: auto;
  padding: 10px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lift);
}
.devmenu__note {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.45;
  padding: 4px 8px 10px; border-bottom: 1px dashed var(--line-strong); margin-bottom: 6px;
}
.devmenu__group {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding: 10px 8px 5px;
}
.devmenu__item {
  display: grid; width: 100%; text-align: left; gap: 1px;
  padding: 8px; border-radius: 9px; font-size: 13.5px;
  transition: background-color 160ms var(--ease);
}
.devmenu__item:hover { background: var(--surface-2); }
.devmenu__item small { font-size: 11.5px; color: var(--ink-3); }



/* ---------- Totrinsbekræftelse ---------- */
.mfa__qr {
  display: grid; place-items: center;
  padding: 14px; margin: 14px 0 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
}
.mfa__qr svg { width: 168px; height: 168px; }
.mfa__secretlabel { font-size: 12.5px; color: var(--ink-3); }
.mfa__secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; letter-spacing: .06em; word-break: break-all;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 11px; margin: 5px 0 14px;
  user-select: all;
}
.mfa__actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.mfa__actions .btn-primary { margin-top: 0; }
.mfa__start { margin-top: 0; flex: none; }
.mfa__done {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 550; color: var(--green-ink);
  background: var(--green-soft); border: 1px solid var(--green-line);
  border-radius: var(--r-sm); padding: 11px 13px;
}
.mfa__done svg { width: 16px; height: 16px; flex: none; }

/* =========================================================
   Login
   ========================================================= */
body.is-gated { overflow: hidden; }

.gate {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 24px;
  background: var(--bg);
  overflow-y: auto;
}
.gate__card {
  width: 100%; max-width: 380px;
  display: grid; gap: 14px;
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}
.gate__mark {
  display: block; width: 56px; height: 56px; border-radius: 18px;
  box-shadow: 0 10px 24px -12px var(--blue);
  margin-bottom: 4px;
}
.gate__title { font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.gate__sub { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-top: -8px; }

.gate__row { display: grid; gap: 6px; }
.gate__row > span { font-size: 13px; font-weight: 550; color: var(--ink-2); }
.gate__row input {
  height: var(--tap); padding: 0 13px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: 12px;
  font-size: 15px; width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gate__row input:focus {
  outline: none;
  border-color: var(--blue-line);
  box-shadow: 0 0 0 4px var(--blue-soft);
}
#gateCode { letter-spacing: .34em; font-variant-numeric: tabular-nums; text-align: center; }

.gate__note { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

/* Fejlen skal kunne ses uden at man leder. */
.gate__error {
  font-size: 13.5px; font-weight: 550;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
}

.gate__submit { margin-top: 4px; width: 100%; }

@media (max-width: 480px) {
  .gate { padding: 16px; align-items: start; }
  .gate__card { padding: 26px 20px; }
}

/* =========================================================
   Smalle kort — uanset hvor stor skærmen er.
   ========================================================= */
@container card (max-width: 420px) {
  /* Ring og liste ved siden af hinanden klemmer navnene til
     "Go…". Så står ringen hellere ovenover. */
  .donut { flex-direction: column; align-items: stretch; gap: 16px; }
  .donut__ring { align-self: center; }
  .donut__row { min-height: 38px; font-size: 14px; }
  .card__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .card__tools { justify-content: flex-start; }
}

@container card (max-width: 540px) {
  /* Kundelisten stables. Overskriftsrækken giver ingen mening
     når kolonnerne er væk, så hver celle får sin egen label. */
  .clientlist__head { display: none; }
  .clientrow {
    grid-template-columns: 1fr auto;
    gap: 10px 14px; padding: 14px 12px;
    border-color: var(--line); background: var(--surface-2); margin-bottom: 8px;
  }
  .clientrow__id { grid-column: 1; }
  .clientrow__status { grid-column: 2; justify-self: end; }
  .clientrow__go { display: none; }
  .clientrow__cell {
    grid-column: span 2;
    grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px;
  }
  .clientrow__cell::before {
    content: attr(data-label);
    font-size: 12px; font-weight: 550; color: var(--ink-3);
  }
  .clientrow__cell b { grid-column: 2; text-align: right; }
  .clientrow__cell .rank__track { grid-column: span 2; }
  .clientrow__cell .pill { grid-column: 2; justify-self: end; }

  .adminhead__row { flex-direction: column; align-items: flex-start; }
  .adminhead__actions { width: 100%; }
  .adminhead__open { flex: 1; }
  .devmenu { width: min(300px, calc(100vw - 32px)); }
  .impbar { margin: 0; }

  .globe { flex-direction: column; gap: 18px; }
  .globe__stage { width: 100%; }
}

@container card (max-width: 300px) {
  .kpi__value { font-size: 32px; }
  .kpi__foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .band { grid-template-columns: repeat(2, 1fr) !important; }
}

/* =========================================================
   Mellemstore skærme
   ========================================================= */
@media (max-width: 1180px) {
  .col-3, .col-4, .col-5 { grid-column: span 6; }
  .col-7, .col-8, .col-9 { grid-column: span 12; }
}

/* =========================================================
   Telefon og tablet i højformat.
   Menuen flytter ned i bunden, hvor tommelfingeren er.
   ========================================================= */
@media (max-width: 860px) {
  /* Lidt over de 44px Apple og Google anbefaler, så kanter og
     rammer ikke æder marginen væk. */
  :root { --tap: 46px; --shell-top: 0px; }
  body { font-size: 15px; }

  .rail {
    inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px;
    width: auto; height: var(--bar-h);
    flex-direction: row; align-items: stretch; gap: 0;
    padding: 6px; border-radius: 22px;
    box-shadow: var(--shadow-lift);
    backdrop-filter: blur(14px);
  }
  .rail:hover, .rail:focus-within { width: auto; }
  .rail__brand, .rail__user, .rail__foot { display: none; }

  .rail__nav { display: flex; flex: 1; gap: 0; }
  .rail__item {
    flex: 1; flex-direction: column; justify-content: center; gap: 3px;
    height: 100%; padding: 0 2px; border-radius: 16px; text-align: center;
  }
  .rail__item:hover { background: transparent; }
  /* Teksten står altid. En kunde skal ikke gætte hvad et ikon betyder. */
  .rail__item .rail__label {
    opacity: 1; transform: none; display: block;
    font-size: 10.5px; font-weight: 600; letter-spacing: -.01em;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  .rail__icon svg { width: 21px; height: 21px; }
  .rail__marker { height: 100%; border-radius: 16px; }
  .rail__marker::before { display: none; }

  .shell {
    margin-left: 0;
    padding: 0 12px calc(var(--bar-h) + 28px + env(safe-area-inset-bottom));
  }
  .topbar::before { left: -12px; width: calc(100% + 24px); }

  .topbar {
    padding: calc(12px + env(safe-area-inset-top)) 2px 12px;
    gap: 10px;
  }
  .topbar__row--main { align-items: center; flex-wrap: nowrap; gap: 10px; }
  .topbar__left { flex: 1 1 auto; }
  .topbar__title { font-size: 21px; }
  .eyebrow { font-size: 10px; margin-bottom: 3px; }

  /* Søgefeltet virker ikke endnu, og en knap der ikke gør noget
     er værre end ingen knap. Den er skjult indtil den virker. */
  .search { display: none; }

  .client { padding: 0 8px; gap: 8px; }
  .client__meta { display: none; }

  .topbar__row--period { gap: 10px; }
  .period__label { display: none; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; padding: 0 10px; height: var(--tap); }

  .grid { gap: 12px; padding: 0; }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }

  /* De fire hovedtal skal kunne ses på én gang. Fire kort i
     fuld bredde ville betyde fire skærmes rulning, før man
     overhovedet nåede den første graf. */
  .card.kpi { grid-column: span 6; padding: 15px; }
  .card.kpi--last { grid-column: span 12; }
  .card.kpi--last .kpi__foot { flex-direction: row; align-items: flex-end; }
  .card.kpi--last .sparkhost, .card.kpi--last .spark { width: 120px; }
  .card.kpi .kpi__top { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
  .card.kpi .kpi__label { font-size: 11px; letter-spacing: .06em; }
  .card.kpi .kpi__value { font-size: 26px; }
  .card.kpi .kpi__value small { font-size: 15px; }
  .card.kpi .kpi__foot { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; }
  .card.kpi .kpi__hint { font-size: 12px; }
  .card.kpi .sparkhost, .card.kpi .spark { width: 100%; }
  .card { padding: 18px; border-radius: 20px; }
  .card__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
  .card__tools { justify-content: flex-start; width: 100%; }
  .card__note { font-size: 13px; max-width: none; }

  .kpi__value { font-size: 34px; }
  /* Skifteknapperne må ikke ombryde til en enlig knap på
     anden linje — de deler bredden ligeligt i stedet. */
  .ghostgroup {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 4px; width: 100%;
  }
  .ghostgroup .ghostbtn {
    min-height: var(--tap); padding: 0 6px; font-size: 12.5px; text-align: center;
    background: var(--surface-2); border-color: var(--line);
  }
  .linkbtn { min-height: var(--tap); }
  .ghostgroup .ghostbtn.is-active { background: var(--blue-soft); border-color: var(--blue-line); }

  .donut { flex-direction: column; align-items: stretch; gap: 16px; }
  .donut__ring { align-self: center; }
  .donut__row { min-height: 40px; }

  .gauges { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .gauge__val b { font-size: 18px; }
  .gauge__name { font-size: 12px; }
  .gauge__sub { font-size: 11px; }

  .globe { flex-direction: column; gap: 18px; }
  .globe__stage { width: 100%; }
  .globe__list { width: 100%; }
  /* Fingerstørrelse på zoom-knapperne. */
  .globe__zoom { right: 4px; bottom: 4px; gap: 8px; }
  .globe__zoombtn { width: var(--tap); height: var(--tap); font-size: 20px; }

  .summary { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* I kolonne bliver flex-basis til en højde. Uden den her
     står kortet med 400px tom luft under teksten. */
  .summary__body { flex: 0 0 auto; width: 100%; }
  .summary__line { font-size: 16px; }

  .setrow { flex-wrap: wrap; gap: 12px; }
  .setrow__text { flex: 1 1 200px; }
  .setrow__d { max-width: none; }

  .themepick { gap: 10px; }
  .plan__value { font-size: 30px; }
  .uptime i:nth-child(2n) { display: none; }
}

/* =========================================================
   Smalle telefoner — tabeller bliver til kort.
   En vandret rulletabel er ubrugelig med en tommelfinger.
   ========================================================= */
@media (max-width: 640px) {
  .tablewrap { overflow: visible; margin: 0; padding: 0; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr {
    border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 6px 14px; margin-bottom: 10px; background: var(--surface-2);
  }
  .table tbody tr:hover { background: var(--surface-2); }
  .table td, .table tbody tr:last-child td {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 9px 0; border-bottom: 1px solid var(--line); text-align: left;
  }
  .table tr td:last-child { border-bottom: 0; }
  .table td::before {
    content: attr(data-label);
    color: var(--ink-3); font-size: 12px; font-weight: 550; flex: none;
  }
  /* Første celle er kortets overskrift — den skal ikke have
     en label klistret foran sig. */
  .table td:first-child {
    display: block; padding: 10px 0 11px; font-size: 15px;
  }
  .table td:first-child::before { content: none; }
  .table td.num { text-align: right; }
  .table .pathurl { display: inline; margin-left: 6px; }

  .band { grid-template-columns: repeat(2, 1fr) !important; }
  .gauges { grid-template-columns: 1fr; gap: 6px; }
  .gauge { grid-template-columns: 96px 1fr; justify-items: start; align-items: center; text-align: left; }
  .gauge__svg { grid-row: span 2; }
  .gauge__val { position: static; grid-column: 2; }
  .gauge__name { grid-column: 2; margin: 0; }
  .gauge__sub { grid-column: 2; }
  .chips { width: 100%; }
  .chip { flex: 1; }
}

@media (max-width: 380px) {
  .rail__item .rail__label { font-size: 9.5px; }
  .kpi__value { font-size: 30px; }
  .topbar__title { font-size: 19px; }
}

/* =========================================================
   Stående app fra hjemmeskærmen — lidt mere luft foroven,
   fordi der ikke er nogen browserlinje at læne sig op ad.
   ========================================================= */
@media (display-mode: standalone) {
  .topbar { padding-top: calc(18px + env(safe-area-inset-top)); }
}

/* ---------- Fravalg af bevægelse ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
}