/* =========================================================
   Adlure Analytics — glasudgaven

   Ligger ovenpaa styles.css og aendrer kun udseendet. Hele
   forskellen mellem de to udgaver staar i denne fil, saa den
   kan laeses paa én gang — og fjernes igen ved at slette én
   linje i index.html.

   Princippet er Apples: frostet, gennemsigtigt glas med bloede
   farver bagved. Glas uden noget farvet bag sig ligner bare
   graa kasser, derfor ligger der farveskyer i baggrunden.

   Tekst skal altid kunne laeses. Kort med tal har derfor
   taettere glas end menuer, og hvor browseren ikke kan sloere,
   eller brugeren har slaaet gennemsigtighed fra, bliver
   fladerne naesten massive.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --bg: #EAF0F8;
  /* Laerredet bag glasset: Adlures blaa, groen og pink, plus en
     himmelblaa. Den sidste linje er bunden, saa det aldrig bliver
     gennemsigtigt helt ned. */
  --bg-mesh:
    radial-gradient(60vw 60vw at 0% 0%, rgba(52, 152, 219, .34), transparent 60%),
    radial-gradient(50vw 50vw at 100% 12%, rgba(58, 215, 144, .26), transparent 60%),
    radial-gradient(55vw 55vw at 85% 100%, rgba(244, 76, 128, .22), transparent 62%),
    radial-gradient(45vw 45vw at 10% 95%, rgba(90, 200, 250, .26), transparent 60%),
    linear-gradient(160deg, #F2F6FC 0%, #E7EEF8 100%);

  /* Glasset. --surface bruges af kort og paneler overalt i
     styles.css, saa ved at goere den gennemsigtig bliver alt
     til glas uden at hver komponent skal skrives om. */
  --surface: rgba(255, 255, 255, .60);
  --surface-2: rgba(255, 255, 255, .42);
  --glass-bar: rgba(255, 255, 255, .56);
  --glass-pop: rgba(255, 255, 255, .84);
  --glass-edge: rgba(255, 255, 255, .78);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .90);
  --glass-blur: saturate(180%) blur(26px);
  --glass-blur-lite: saturate(160%) blur(16px);
  --field: rgba(255, 255, 255, .55);
  --field-focus: rgba(255, 255, 255, .80);

  --line: rgba(23, 34, 48, .08);
  --line-strong: rgba(23, 34, 48, .13);
  --ink-3: #7A8594;

  --shadow-rest: 0 1px 1px rgba(23, 34, 48, .03), 0 18px 40px -26px rgba(33, 60, 110, .32);
  --shadow-lift: 0 2px 4px rgba(23, 34, 48, .04), 0 30px 62px -28px rgba(33, 60, 110, .42);

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
}

[data-theme="dark"] {
  --bg: #0B0F17;
  --bg-mesh:
    radial-gradient(60vw 60vw at 0% 0%, rgba(52, 152, 219, .30), transparent 60%),
    radial-gradient(50vw 50vw at 100% 10%, rgba(58, 215, 144, .18), transparent 60%),
    radial-gradient(55vw 55vw at 85% 100%, rgba(244, 76, 128, .20), transparent 62%),
    radial-gradient(45vw 45vw at 8% 95%, rgba(90, 200, 250, .16), transparent 60%),
    linear-gradient(160deg, #0E1320 0%, #080B12 100%);

  --surface: rgba(28, 33, 45, .56);
  --surface-2: rgba(255, 255, 255, .055);
  --glass-bar: rgba(22, 27, 38, .58);
  --glass-pop: rgba(28, 33, 46, .86);
  --glass-edge: rgba(255, 255, 255, .12);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .10);
  --field: rgba(255, 255, 255, .06);
  --field-focus: rgba(255, 255, 255, .10);

  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --ink-3: #7F8997;

  --shadow-rest: 0 1px 1px rgba(0, 0, 0, .25), 0 20px 44px -26px rgba(0, 0, 0, .78);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .30), 0 30px 64px -28px rgba(0, 0, 0, .88);
}

/* ---------- Laerredet ---------- */
html { background-color: var(--bg); }   /* farven ved "elastik"-rulning paa iPhone */
body { background-color: var(--bg); }

/* Farverne ligger paa det faste baggrundslag frem for paa body.
   background-attachment: fixed ignoreres af Safari paa iPhone, og
   saa ville farverne rulle med. */
.ambience { background: var(--bg-mesh); }
.ambience__blob { filter: blur(80px); }
.ambience__blob--blue  { opacity: .30; }
.ambience__blob--green { opacity: .24; }
.ambience__blob--red   { opacity: .18; }
.ambience__blob--sky {
  width: 38vw; height: 38vw; left: 8vw; bottom: -12vw;
  background: #5AC8FA; opacity: .22; animation-delay: -5s;
}
.ambience__blob--rose {
  width: 28vw; height: 28vw; right: 18vw; top: -10vw;
  background: #F77FB0; opacity: .16; animation-delay: -13s;
}
[data-theme="dark"] .ambience__blob { opacity: .22; }

/* ---------- Kort ----------
   Baggrunden kommer allerede fra --surface. Her laegges sloering,
   en lys kant og et hoejlys langs overkanten paa — det er det, der
   faar det til at ligne glas frem for gennemsigtigt papir. */
.card {
  border-color: var(--glass-edge);
  box-shadow: var(--glass-hi), var(--shadow-rest);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  padding: 24px;
}
@media (hover: hover) {
  .card:hover { border-color: var(--glass-edge); box-shadow: var(--glass-hi), var(--shadow-lift); }
}
.grid { gap: 18px; }

/* Kort med egen farve skal beholde den — reglen ovenfor ville
   ellers overskrive deres kant. */
.summary { border-color: var(--blue-line); }
.warnbar { border-color: var(--red-line); }
.plan {
  background: linear-gradient(150deg, rgba(69, 166, 230, .95), rgba(43, 131, 191, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 26px 54px -26px rgba(52, 152, 219, .85);
}

/* ---------- Menuen (computer): svaevende glaspanel ---------- */
.rail {
  background: var(--glass-bar);
  border: 1px solid var(--glass-edge);
  border-radius: 30px;
  box-shadow: var(--glass-hi), var(--shadow-rest);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.rail:hover, .rail:focus-within { box-shadow: var(--glass-hi), var(--shadow-lift); }

/* Det valgte punkt faar en lille glaslinse, som i iOS. */
.rail__marker {
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(33, 60, 110, .55);
}
[data-theme="dark"] .rail__marker {
  background: rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.rail__marker::before { display: none; }
.rail__item:hover { background: rgba(255, 255, 255, .35); }
[data-theme="dark"] .rail__item:hover { background: rgba(255, 255, 255, .06); }
.mark { border-radius: 10px; }

/* ---------- Toppen: stor titel som i iOS ----------
   Den faste bjaelke bag titlen er vaek. Titlen staar direkte paa
   farverne, og der er intet der klaeber. */
.topbar::before { display: none; }
.topbar__title { font-size: 34px; font-weight: 700; letter-spacing: -.035em; line-height: 1.15; }
.eyebrow {
  color: var(--ink-2); font-size: 12.5px; font-weight: 600;
  letter-spacing: .01em; text-transform: none; margin-bottom: 3px;
}

/* ---------- Periodevaelgeren: iOS' segmentkontrol ---------- */
.segmented {
  background: rgba(118, 118, 128, .14);
  border: 0; border-radius: 14px; padding: 3px;
  -webkit-backdrop-filter: var(--glass-blur-lite);
  backdrop-filter: var(--glass-blur-lite);
}
[data-theme="dark"] .segmented { background: rgba(118, 118, 128, .26); }
.segmented button { color: var(--ink); font-weight: 500; border-radius: 11px; }
.segmented button.is-active {
  background: rgba(255, 255, 255, .96); color: var(--ink); font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04);
}
[data-theme="dark"] .segmented button.is-active {
  background: rgba(255, 255, 255, .20); color: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
}

/* ---------- Smaa glasflader: kundemaerket og runde knapper ---------- */
.client, .iconbtn, .devbtn, .globe__zoombtn {
  background: var(--glass-bar);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-hi);
  -webkit-backdrop-filter: var(--glass-blur-lite);
  backdrop-filter: var(--glass-blur-lite);
}
.client { border-radius: 999px; padding-left: 6px; }
.client__logo { border-radius: 999px; }
.iconbtn, .devbtn { border-radius: 999px; }

/* ---------- Knapper: kapsler ---------- */
.btn-primary {
  border-radius: 999px; min-height: 44px; padding: 0 20px;
  background: linear-gradient(180deg, #45A6E6 0%, #2E8BD1 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -12px rgba(52, 152, 219, .85);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), 0 16px 30px -14px rgba(52, 152, 219, .90);
}
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .55; transform: none; }

.btn-white {
  border-radius: 999px; min-height: 44px; padding: 0 18px; font-weight: 600;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), 0 6px 16px -12px rgba(33, 60, 110, .35);
  -webkit-backdrop-filter: var(--glass-blur-lite);
  backdrop-filter: var(--glass-blur-lite);
}
.ghostbtn { border-radius: 999px; }
.ghostbtn.is-active { background: rgba(255, 255, 255, .72); border-color: var(--glass-edge); }
[data-theme="dark"] .ghostbtn.is-active { background: rgba(255, 255, 255, .13); }
.chip { border-radius: 999px; }
.impbar { border-radius: 20px; -webkit-backdrop-filter: var(--glass-blur-lite); backdrop-filter: var(--glass-blur-lite); }
.impbar__back { border-radius: 999px; }

/* ---------- Felter ---------- */
.frm__input, .gate__row input {
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
}
.frm__input:focus, .gate__row input:focus { background: var(--field-focus); }

/* ---------- Pop-ups: taettere glas, saa teksten staar skarpt ---------- */
.tip, .devmenu, .ask {
  background: var(--glass-pop);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), var(--shadow-lift);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.tip { border-radius: 14px; }
.devmenu { border-radius: 20px; }
.ask { border-radius: 28px; padding: 24px 24px 20px; }
.ask::backdrop {
  background: rgba(12, 20, 34, .26);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

/* ---------- Login ---------- */
.gate { background: var(--bg-mesh); background-color: var(--bg); }
.gate__card {
  border: 1px solid var(--glass-edge);
  border-radius: 32px;
  padding: 34px 28px 28px;
  box-shadow: var(--glass-hi), var(--shadow-lift);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.gate__mark { border-radius: 16px; }
.gate__title { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }

/* ---------- Telefon: flydende glaskapsel i bunden ---------- */
@media (max-width: 860px) {
  /* Lidt mindre sloering paa telefoner — det er dyrt at tegne, og
     paa en lille skaerm ser man ikke forskel. */
  :root { --glass-blur: saturate(170%) blur(18px); }

  .rail {
    inset: auto 14px calc(12px + env(safe-area-inset-bottom)) 14px;
    border-radius: 999px;
    padding: 6px;
    box-shadow: var(--glass-hi), var(--shadow-lift);
  }
  .rail__item, .rail__marker { border-radius: 999px; }

  .topbar__title { font-size: 28px; }
  .card { padding: 18px; border-radius: 24px; }
  .grid { gap: 12px; }
}
@media (max-width: 380px) {
  .topbar__title { font-size: 24px; }
}

/* ---------- Naar glas ikke kan eller ikke maa bruges ----------
   Uden sloering bliver gennemsigtige flader grumsede, fordi
   indholdet bagved staar skarpt igennem. Saa bliver de naesten
   massive i stedet. Det samme, hvis brugeren har slaaet
   gennemsigtighed fra i sit styresystem. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --surface: rgba(255, 255, 255, .93); --glass-bar: rgba(255, 255, 255, .95); --glass-pop: #FFFFFF; }
  [data-theme="dark"] { --surface: rgba(28, 33, 45, .95); --glass-bar: rgba(22, 27, 38, .96); --glass-pop: #1C212D; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --surface: rgba(255, 255, 255, .95); --glass-bar: rgba(255, 255, 255, .96); --glass-pop: #FFFFFF; }
  [data-theme="dark"] { --surface: rgba(28, 33, 45, .96); --glass-bar: rgba(22, 27, 38, .97); --glass-pop: #1C212D; }
  .ambience__blob { display: none; }
}


/* =========================================================
   Version 2 — tydeligere, og mindre at laese

   Tre greb:
   1. Forklaringerne staar bag (i). Kortet taler for sig selv.
   2. Et farvet ikon foran hver titel og korte titler.
   3. Menuen er en flydende fanebjaelke foroven paa computeren.
   ========================================================= */

/* ---------- Korttitel: ikon, titel, (i) ---------- */
.card__titlerow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.card__title { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.card__ico {
  flex: none; width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -8px rgba(33, 60, 110, .55);
}
.card__ico svg { width: 17px; height: 17px; }
.card__ico--b { background: linear-gradient(180deg, #5AB3EC, #2E8BD1); }
.card__ico--g { background: linear-gradient(180deg, #52DFA0, #22B574); }
.card__ico--r { background: linear-gradient(180deg, #FF6F9C, #E23A70); }
.card__ico--v { background: linear-gradient(180deg, #A493FF, #7B68EE); }

/* (i)-knappen. Selve knappen er lille, men det usynlige felt omkring
   den er 44 px, saa den kan rammes med en tommelfinger. */
.info {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center; color: var(--ink-3);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.info::after { content: ""; position: absolute; inset: -9px; }
.info svg { width: 18px; height: 18px; }
.info:hover, .info[aria-expanded="true"] { color: var(--blue); background: var(--blue-soft); }

/* Den aabnede forklaring: en bloed boks, ikke brødtekst. */
.card__note:not([hidden]) {
  margin-top: 10px; padding: 10px 12px; border-radius: 14px; max-width: none;
  background: rgba(118, 118, 128, .09); color: var(--ink-2); font-size: 13px;
  animation: fold 220ms var(--ease);
}
@keyframes fold { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Opsummeringer som smaa farvede bokse ----------
   Grøn = godt, pink = kraever noget, blaa = vaer opmaerksom. Punktet
   foran siger det, foer man har laest linjen. */
.card__insight:not(:empty) {
  position: relative;
  padding: 10px 12px 10px 30px; border-radius: 14px;
  background: rgba(118, 118, 128, .09);
}
.card__insight:not(:empty)::before {
  content: ""; position: absolute; left: 13px; top: 17px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3);
}
.card__insight.insight--good { background: var(--green-soft); color: var(--green-ink); }
.card__insight.insight--good::before { background: var(--green); }
.card__insight.insight--bad { background: var(--red-soft); color: var(--red); }
.card__insight.insight--bad::before { background: var(--red); }
.card__insight.insight--warn { background: var(--blue-soft); color: var(--blue); }
.card__insight.insight--warn::before { background: var(--blue); }
.plan .card__insight { background: rgba(255, 255, 255, .16); color: #fff; }
.plan .card__insight::before { background: #fff; }

/* ---------- Noegletal som widgets ---------- */
.kpi__lbl { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.kpi__ico {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  background: linear-gradient(180deg, #5AB3EC, #2E8BD1);
}
.kpi__ico svg { width: 16px; height: 16px; }
.kpi--green .kpi__ico { background: linear-gradient(180deg, #52DFA0, #22B574); }
.kpi--red .kpi__ico { background: linear-gradient(180deg, #FF6F9C, #E23A70); }
.card.kpi--blue { background: linear-gradient(160deg, rgba(52, 152, 219, .17), transparent 58%), var(--surface); }
.card.kpi--green { background: linear-gradient(160deg, rgba(58, 215, 144, .17), transparent 58%), var(--surface); }
.card.kpi--red { background: linear-gradient(160deg, rgba(244, 76, 128, .15), transparent 58%), var(--surface); }
.kpi__value { font-size: 44px; font-weight: 650; letter-spacing: -.04em; margin-top: 6px; }
.kpi__foot { margin-top: 10px; }
.kpi__note:not([hidden]) { margin: 10px 0 0; }

/* ---------- Resumeet: konklusion og tre store tal ---------- */
.summary { padding: 26px 28px; align-items: center; }
.summary__mark {
  width: 54px; height: 54px; border-radius: 17px; color: #fff;
  background: linear-gradient(180deg, #5AB3EC, #2E8BD1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px -14px rgba(52, 152, 219, .9);
}
.summary__mark svg { width: 26px; height: 26px; }
.summary__main { display: grid; gap: 12px; min-width: 0; }
.summary__hero {
  display: flex; align-items: center; gap: 8px;
  font-size: 30px; font-weight: 700; letter-spacing: -.035em; line-height: 1.15;
}
.summary__note .summary__line { font-size: 13.5px; line-height: 1.55; }
.summary__stats { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.hstat { display: grid; gap: 1px; }
.hstat b { font-size: 26px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hstat small { font-size: 12.5px; color: var(--ink-2); }

/* ---------- Computer: flydende fanebjaelke foroven ---------- */
@media (min-width: 861px) {
  .rail {
    inset: 14px auto auto 50%;
    transform: translateX(-50%);
    width: auto; height: auto;
    flex-direction: row; align-items: center; gap: 4px;
    padding: 6px; border-radius: 999px; overflow: visible;
  }
  .rail:hover, .rail:focus-within { width: auto; }
  .rail__brand { padding: 0 6px 0 4px; }
  .rail__brandtext { display: none; }
  .rail__nav { display: flex; align-items: center; gap: 2px; }
  .rail__item { width: auto; height: 46px; padding: 0 16px; gap: 8px; border-radius: 999px; }
  .rail__item .rail__label, .rail__user .rail__label { opacity: 1; transform: none; }
  .rail__marker { top: 0; left: 0; height: 46px; border-radius: 999px; }
  .rail__foot {
    margin: 0 0 0 4px; padding-left: 6px;
    display: flex; align-items: center; gap: 2px;
    border-left: 1px solid var(--line-strong);
  }
  .rail__foot .rail__item { padding: 0 12px; }
  /* Tema og log ud er kun ikoner her oppe — teksten er der stadig
     for skaermlaesere. */
  .rail__foot .rail__item .rail__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .rail__user { padding: 4px; }
  .rail__label--user { display: none; }

  .shell { margin: 0 auto; max-width: 1240px; padding: 88px 24px 48px; }
  .topbar__title { font-size: 40px; }
}
/* Mellemstore skaerme: kun ikoner i bjaelken, saa den ikke flyder over. */
@media (min-width: 861px) and (max-width: 1100px) {
  .rail__nav .rail__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .rail__item { padding: 0 14px; }
}

@media (max-width: 860px) {
  .summary { padding: 20px; }
  .summary__mark { width: 44px; height: 44px; border-radius: 14px; }
  .summary__hero { font-size: 23px; }
  .hstat b { font-size: 21px; }
  .card.kpi .kpi__value { font-size: 32px; }
}

/* Minigrafen i noegletallene fylder hele bredden, som i en iOS-widget.
   Linjen holder sin tykkelse (non-scaling-stroke), men prikken for
   enden ville blive til en oval, naar grafen straekkes — den er vaek. */
.card.kpi .sparkhost, .card.kpi .spark { display: block; width: 100%; }
.card.kpi .spark { height: 44px; }
.card.kpi .spark ellipse { display: none; }

/* Stregen tegnes normalt ind med en stiplet linje, der er praecis saa
   lang som grafen i sin oprindelige stoerrelse (96 punkter). Med
   non-scaling-stroke regnes stiplingen i skaermpunkter — saa naar
   grafen straekkes til hele kortets bredde, stoppede linjen ved ca.
   60 %. Maalt 2026-09-26. Her staar den bare fuld, uden indtegning. */
.card.kpi .spark .line {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  animation: none !important;
}