/* =====================================================================
   Platformhuset Dashboard · kit/ph-dash.css
   Ét stylesheet, tre stilarter i samme familie. Stilen vælges på #app:
     <div id="app" data-stil="glas" data-tone="standard|kold|varm">   A Mørkt glas
     <div id="app" data-stil="grafit">                                B Grafit-bento
     <div id="app" data-stil="lys">                                   C Lys flow
   Kundens brandfarve sættes som ÉN variabel på #app: style="--brand:#E11D48".
   Alt andet (accent, sekundær accent, glød, tekst på accent, mørk tekstvariant
   til lys bund) afledes med relative farver og color-mix (Chrome 120+).
   Motorkontrakt: rem sættes af PH.fitRem('#app') (10 px ved 1600×1000), aldrig vw/vh.
   Hover skrives altid som :hover, [data-ph-hover].
   ===================================================================== */

/* ---------- 0. Rod ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
:root { --ph-ripple: rgba(96, 226, 255, .7); --ph-frame-bg: #05070d; }
:root[data-pd-stil="grafit"] { --ph-frame-bg: #060709; }
:root[data-pd-stil="lys"] { --ph-frame-bg: #E7EAF5; }
body { background: var(--ph-frame-bg); }

#app {
  position: fixed; inset: 0; overflow: hidden; isolation: isolate;
  --brand: #60E2FF;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --r-card: 26px; --r-in: 16px; --r-pill: 999px;
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.45; color: var(--ink);
  background: var(--bg); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
:where(#app) :where(button, input, textarea, select) { font: inherit; color: inherit; }
:where(#app) :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; padding: 0; }
:where(#app) :where(ul, ol) { list-style: none; }
#app :focus-visible { outline: 2px solid var(--acc-txt); outline-offset: 3px; }
#app [hidden] { display: none !important; }
.pd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pd-i { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pd-i.s { width: 1.45rem; height: 1.45rem; stroke-width: 2; }
.pd-i.xs { width: 1.2rem; height: 1.2rem; stroke-width: 2.2; }

/* ---------- 1. Fælles afledte tokens (gælder alle stilarter) ---------- */
#app {
  /* Tekst på accent: sort eller hvid ud fra accentens luminans (WCAG-tærskel 0,18 giver ≥ 4,5:1 begge veje) */
  --acc-ink: color(from var(--acc) srgb
    clamp(0, (.18 - (.2126 * pow(max(r, 0), 2.2) + .7152 * pow(max(g, 0), 2.2) + .0722 * pow(max(b, 0), 2.2))) * 1000, 1)
    clamp(0, (.18 - (.2126 * pow(max(r, 0), 2.2) + .7152 * pow(max(g, 0), 2.2) + .0722 * pow(max(b, 0), 2.2))) * 1000, 1)
    clamp(0, (.18 - (.2126 * pow(max(r, 0), 2.2) + .7152 * pow(max(g, 0), 2.2) + .0722 * pow(max(b, 0), 2.2))) * 1000, 1));
  --acc-2-ink: color(from var(--acc-2) srgb
    clamp(0, (.18 - (.2126 * pow(max(r, 0), 2.2) + .7152 * pow(max(g, 0), 2.2) + .0722 * pow(max(b, 0), 2.2))) * 1000, 1)
    clamp(0, (.18 - (.2126 * pow(max(r, 0), 2.2) + .7152 * pow(max(g, 0), 2.2) + .0722 * pow(max(b, 0), 2.2))) * 1000, 1)
    clamp(0, (.18 - (.2126 * pow(max(r, 0), 2.2) + .7152 * pow(max(g, 0), 2.2) + .0722 * pow(max(b, 0), 2.2))) * 1000, 1));
  --acc-soft: rgb(from var(--acc) r g b / .14);
  --glow: rgb(from var(--acc) r g b / .6);
  --ok-soft: rgb(from var(--ok) r g b / .13);
  --warn-soft: rgb(from var(--warn) r g b / .13);
  --risk-soft: rgb(from var(--risk) r g b / .13);
  --k: var(--acc-txt); /* kortets accent; skiftes med .k-2/.k-ok/.k-warn/.k-risk */
  /* Fasefarver til puls-rækken (PHDash.pulsRaekke læser var(--fase-1..5)) */
  --fase-1: var(--acc-txt);
  --fase-2: color-mix(in oklch, var(--acc-txt), var(--acc-2-txt));
  --fase-3: var(--warn);
  --fase-4: var(--acc-2-txt);
  --fase-5: var(--ok);
}
#app[data-stil="grafit"] { --fase-1: var(--acc); --fase-2: var(--acc); --fase-3: var(--risk); --fase-4: var(--acc); --fase-5: var(--acc); }
#app[data-stil="lys"] { --fase-3: var(--risk); }

/* ---------- 2. Stilart A: Mørkt glas ---------- */
#app[data-stil="glas"] {
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bg: #05070d;
  --bg-grad: radial-gradient(120% 90% at 50% -10%, #0d1429 0%, #070a15 50%, #04060b 100%);
  --ink: #f4f6ff; --ink-2: rgba(228, 233, 255, .8); --ink-3: rgba(210, 218, 248, .64); --ink-4: rgba(210, 218, 248, .36);
  --ok: #54F0C4; --warn: #FFB862; --risk: #FF8470; --warn-ink: #1d1305;
  --mal-2: #A38FFF;
  --acc: oklch(from var(--brand) max(l, .56) c h);
  --acc-txt: oklch(from var(--brand) max(l, .8) c h);
  --acc-2: color-mix(in oklch, var(--brand) 30%, var(--mal-2));
  --acc-2-txt: oklch(from var(--acc-2) max(l, .78) c h);
  --surf: rgba(255, 255, 255, .045); --surf-2: rgba(255, 255, 255, .075); --surf-3: rgba(255, 255, 255, .11);
  --lift: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 24px -14px rgba(0, 0, 0, .7);
  --card-base: rgba(13, 18, 36, .48);
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, .065) 0%, rgba(255, 255, 255, .02) 42%, rgba(255, 255, 255, .012) 100%), var(--card-base);
  --card-sh: 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);
  --pop-bg: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)), rgba(14, 19, 38, .86);
  --scrim: rgba(3, 5, 10, .55);
  --node: #1a2036; --node-ring: #0c1122;
  --b1: rgb(from color-mix(in oklch, var(--brand) 55%, #2866ff) r g b / .44);
  --b2: rgb(from var(--acc-2) r g b / .38);
  --b3: rgba(255, 150, 70, .2); --b4: rgba(20, 200, 175, .26); --b5: rgba(190, 70, 230, .22);
  --gap: 1.6rem; --pad-y: 2.5rem; --pad-x: 2.8rem; --rail-w: 9rem;
  --fs-body: 1.4rem; --fs-h1: 2.8rem; --fs-h2: 1.55rem; --w-h2: 700; --fs-meta: 1.22rem; --fs-small: 1.15rem;
  --big-w: 300; --big-ls: -.05em; --big-scale: 1;
  --lift-y: -4px;
}
#app[data-stil="glas"][data-tone="kold"] {
  --bg: #03060d;
  --bg-grad: radial-gradient(120% 90% at 50% -10%, #0a1532 0%, #050a16 50%, #02050a 100%);
  --mal-2: #5AD8FF;
  --card-base: rgba(10, 18, 40, .5);
  --pop-bg: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)), rgba(10, 18, 40, .88);
  --b1: rgb(from color-mix(in oklch, var(--brand) 60%, #2f5bff) r g b / .46);
  --b2: rgba(90, 216, 255, .22); --b3: rgba(47, 91, 255, .2); --b4: rgba(30, 170, 210, .2); --b5: rgba(70, 80, 230, .22);
}
#app[data-stil="glas"][data-tone="varm"] {
  --bg: #0b0705;
  --bg-grad: radial-gradient(120% 90% at 50% -10%, #26170d 0%, #120b06 50%, #070403 100%);
  --ink: #fff6ee; --ink-2: rgba(255, 236, 220, .82); --ink-3: rgba(245, 222, 204, .64); --ink-4: rgba(245, 222, 204, .36);
  --ok: #54F0C4; --warn: #FFC861; --risk: #FF6B6B;
  --mal-2: #E07A4F;
  --card-base: rgba(36, 22, 14, .5);
  --pop-bg: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), rgba(34, 21, 13, .9);
  --node: #2a1d14; --node-ring: #170e08;
  --b1: rgb(from color-mix(in oklch, var(--brand) 60%, #ff9a3c) r g b / .4);
  --b2: rgba(224, 122, 79, .32); --b3: rgba(255, 107, 139, .14); --b4: rgba(255, 190, 90, .16); --b5: rgba(184, 64, 42, .24);
}

/* Kundens egen brandfarve (data-brand="egen", sat af PHDash.stil): den sekundære accent afledes af brandet,
   ikke af tonens --mal-2. Ellers trækker 70 % kobber (varm) eller violet (standard) knapper som Godkend,
   AI-kortet og grafens linje væk fra kundens farve (teal + kobber blev guld, fund 30/10-2026).
   Tonen styrer stadig bunden og farvefelterne. Uden kundefarve er alt som før. */
#app[data-stil="glas"][data-brand="egen"] {
  --acc-2: oklch(from var(--brand) max(l, .6) c calc(h + 12));
  --b2: rgb(from var(--acc-2) r g b / .3);
}

/* ---------- 3. Stilart B: Grafit-bento ---------- */
#app[data-stil="grafit"] {
  --font: 'Sora', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --bg: #060709;
  --ink: #F3F5F0; --ink-2: #B5BAC1; --ink-3: #8C929B; --ink-4: #5A5F66;
  --ok: #7EE2A8; --warn: #FFB224; --risk: #FF8B5E; --warn-ink: #1a1204;
  --acc: oklch(from var(--brand) max(l, .56) c h);
  --acc-txt: oklch(from var(--brand) max(l, .8) c h);
  --acc-2: var(--acc); --acc-2-txt: var(--acc-txt);
  --surf: rgba(255, 255, 255, .04); --surf-2: rgba(255, 255, 255, .07); --surf-3: rgba(255, 255, 255, .1);
  --lift: none;
  --card-bg: linear-gradient(180deg, #15181C 0%, #0F1114 100%);
  --card-sh: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 6px rgba(0, 0, 0, .35), 0 34px 64px -34px rgba(0, 0, 0, .95);
  --pop-bg: linear-gradient(180deg, #1B1E23, #121418);
  --scrim: rgba(0, 0, 0, .55);
  --node: #2A2F36; --node-ring: #121418;
  --gap: 1.55rem; --pad-y: 2.4rem; --pad-x: 2.4rem; --rail-w: 8.4rem;
  --fs-body: 1.3rem; --fs-h1: 2.45rem; --fs-h2: 1.38rem; --w-h2: 600; --fs-meta: 1.12rem; --fs-small: 1.06rem;
  --big-w: 600; --big-ls: -.045em; --big-scale: .9;
  --lift-y: -2px;
}

/* ---------- 4. Stilart C: Lys flow ---------- */
#app[data-stil="lys"] {
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bg: #F1F3FA;
  --ink: oklch(from var(--brand) .24 .07 h);
  --ink-2: oklch(from var(--brand) .42 .05 h);
  --ink-3: oklch(from var(--brand) .53 .04 h);
  --ink-4: oklch(from var(--brand) .74 .03 h);
  --ok: #0B7F58; --warn: #B45309; --risk: #C63F2B; --warn-ink: #fff;
  --ok-soft: #E2F6ED; --warn-soft: #FEF0DC; --risk-soft: #FFEEE9;
  --acc: var(--brand);
  --acc-2: oklch(from var(--brand) l c calc(h + 28));
  --acc-txt: oklch(from var(--brand) min(l, .5) c h);
  --acc-2-txt: oklch(from var(--acc-2) min(l, .5) c h);
  --acc-soft: oklch(from var(--brand) .95 .035 h);
  --glow: rgb(from var(--acc-txt) r g b / .45);
  --tint: oklch(from var(--brand) .965 .018 h); --tint-2: oklch(from var(--brand) .935 .035 h);
  --surf: var(--tint); --surf-2: var(--tint-2); --surf-3: oklch(from var(--brand) .9 .05 h);
  --sh-c: rgb(from var(--acc-txt) r g b / .16);
  --lift: 0 1px 2px rgba(19, 22, 58, .03), 0 8px 22px -14px rgb(from var(--acc-txt) r g b / .28);
  --card-bg: rgba(255, 255, 255, .88);
  --card-sh: 0 1px 2px rgba(19, 22, 58, .03), 0 12px 32px -14px rgb(from var(--acc-txt) r g b / .16), 0 34px 68px -38px rgb(from var(--acc-txt) r g b / .24);
  --card-sh-h: 0 2px 4px rgba(19, 22, 58, .03), 0 20px 42px -16px rgb(from var(--acc-txt) r g b / .24), 0 48px 90px -40px rgb(from var(--acc-txt) r g b / .32);
  --pop-bg: rgba(255, 255, 255, .95);
  --scrim: rgba(30, 32, 64, .2);
  --node: #fff; --node-ring: oklch(from var(--brand) .86 .05 h);
  --grad: linear-gradient(118deg, var(--acc) 0%, var(--acc-2) 100%);
  --grad-txt: linear-gradient(100deg, var(--acc-txt) 0%, var(--acc-2-txt) 100%);
  --gap: 2rem; --pad-y: 2.6rem; --pad-x: 2.6rem; --rail-w: 9.2rem;
  --fs-body: 1.36rem; --fs-h1: 3rem; --fs-h2: 1.42rem; --w-h2: 600; --fs-meta: 1.28rem; --fs-small: 1.12rem;
  --big-w: 800; --big-ls: -.04em; --big-scale: 1;
  --lift-y: -4px;
}

/* ---------- 5. Baggrund ---------- */
.pd-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg-grad, var(--bg)); }
.pd-bg i { position: absolute; display: block; border-radius: 50%; aspect-ratio: 1; }
[data-stil="glas"] .pd-bg i:nth-child(1) { width: 64%; left: -16%; top: -51%; background: radial-gradient(circle, var(--b1), transparent 64%); }
[data-stil="glas"] .pd-bg i:nth-child(2) { width: 56%; right: -18%; top: -22%; background: radial-gradient(circle, var(--b2), transparent 64%); }
[data-stil="glas"] .pd-bg i:nth-child(3) { width: 30%; left: 40%; top: -19%; background: radial-gradient(circle, var(--b3), transparent 64%); }
[data-stil="glas"] .pd-bg i:nth-child(4) { width: 54%; left: -14%; bottom: -58%; background: radial-gradient(circle, var(--b4), transparent 64%); }
[data-stil="glas"] .pd-bg i:nth-child(5) { width: 50%; right: -6%; bottom: -54%; background: radial-gradient(circle, var(--b5), transparent 64%); }
[data-stil="glas"] .pd-bg::after { content: ""; position: absolute; inset: 0; opacity: .06; 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>"); }
[data-stil="grafit"] .pd-bg i { display: none; }
[data-stil="grafit"] .pd-bg::before { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.3px); background-size: 28px 28px;
  -webkit-mask: radial-gradient(70% 55% at 35% 0%, #000, transparent 80%); mask: radial-gradient(70% 55% at 35% 0%, #000, transparent 80%); }
[data-stil="grafit"] .pd-bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(38% 34% at 24% 6%, rgb(from var(--acc) r g b / .09), transparent 70%), radial-gradient(34% 44% at 88% 78%, rgb(from var(--acc) r g b / .05), transparent 70%); }
[data-stil="lys"] .pd-bg i { aspect-ratio: auto; filter: blur(70px); }
[data-stil="lys"] .pd-bg i:nth-child(1) { width: 73.6rem; height: 54.4rem; left: 4%; top: -19rem; background: radial-gradient(closest-side, rgb(from var(--acc) r g b / .36), transparent); }
[data-stil="lys"] .pd-bg i:nth-child(2) { width: 64rem; height: 64rem; right: -12.8rem; top: -9.6rem; background: radial-gradient(closest-side, rgb(from var(--acc-2) r g b / .3), transparent); }
[data-stil="lys"] .pd-bg i:nth-child(3) { width: 89.6rem; height: 48rem; left: 18%; top: 40%; background: radial-gradient(closest-side, rgba(56, 189, 248, .22), transparent); }
[data-stil="lys"] .pd-bg i:nth-child(4) { width: 41.6rem; height: 35.2rem; left: 44%; top: 6.4rem; background: radial-gradient(closest-side, rgba(251, 146, 120, .14), transparent); }
[data-stil="lys"] .pd-bg i:nth-child(5) { width: 54.4rem; height: 41.6rem; right: 6%; bottom: -22.4rem; background: radial-gradient(closest-side, rgb(from var(--acc-2) r g b / .24), transparent); }

/* ---------- 6. App-skal: skinne, topbar, visninger ---------- */
.pd-skal { position: relative; z-index: 1; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: var(--gap); height: 100%; padding: var(--gap); }
.pd-main { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--gap); min-width: 0; min-height: 0; }

/* Skinne */
.pd-rail { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.pd-mark { display: grid; place-items: center; flex: none; border-radius: 50%; border: 0; cursor: default;
  font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.pd-nav { display: flex; flex-direction: column; width: 100%; }
.pd-nav-i { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; border: 0; background: none; cursor: pointer;
  color: var(--ink-3); font-weight: 600; text-align: center; white-space: nowrap; text-decoration: none; transition: color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); }
.pd-nav-i:hover, .pd-nav-i[data-ph-hover] { color: var(--ink); }
.pd-ni { position: relative; display: grid; place-items: center; border-radius: 50%; transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); }
.pd-badge { position: absolute; display: grid; place-items: center; min-width: 1.8rem; height: 1.8rem; padding: 0 .45rem; border-radius: 99px;
  font-size: 1.02rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pd-rail-fod { margin-top: auto; width: 100%; }

[data-stil="glas"] .pd-rail { gap: 2.8rem; padding: 2rem .9rem; border-radius: 30px; }
[data-stil="glas"] .pd-mark { width: 5rem; height: 5rem; font-size: 1.7rem; color: #fff;
  background: radial-gradient(circle at 30% 25%, rgb(from var(--acc) r g b / .38), rgb(from var(--acc-2) r g b / .2) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 30px -6px rgb(from var(--acc) r g b / .7); }
[data-stil="glas"] .pd-nav { gap: .8rem; }
[data-stil="glas"] .pd-nav-i { gap: .6rem; padding: 1.1rem .2rem 1rem; border-radius: 20px; font-size: 1.1rem; }
[data-stil="glas"] .pd-nav-i .pd-i { width: 2.2rem; height: 2.2rem; transition: transform .4s var(--ease); }
[data-stil="glas"] .pd-nav-i:hover, [data-stil="glas"] .pd-nav-i[data-ph-hover] { background: rgba(255, 255, 255, .05); }
[data-stil="glas"] .pd-nav-i[aria-current="page"] { color: var(--ink); background: linear-gradient(180deg, rgb(from var(--acc) r g b / .2), rgb(from var(--acc) r g b / .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 30px -10px rgb(from var(--acc) r g b / .6); }
[data-stil="glas"] .pd-nav-i[aria-current="page"] .pd-i { color: var(--acc-txt); filter: drop-shadow(0 0 6px rgb(from var(--acc) r g b / .8)); }
[data-stil="glas"] .pd-badge { top: .55rem; right: 1.3rem; color: var(--acc-2-ink); background: var(--acc-2); box-shadow: 0 0 14px rgb(from var(--acc-2) r g b / .8); }

[data-stil="grafit"] .pd-rail { padding: 1.6rem 0 1.5rem; border-radius: 28px; background: linear-gradient(180deg, #121519, #0C0E11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -30px rgba(0, 0, 0, .9); }
[data-stil="grafit"] .pd-mark { width: 4.3rem; height: 4.3rem; margin-bottom: 2.4rem; font-size: 1.4rem; color: var(--acc-txt);
  background: radial-gradient(circle at 35% 30%, rgb(from var(--acc) r g b / .3), rgb(from var(--acc) r g b / .06) 70%);
  box-shadow: 0 0 28px -6px rgb(from var(--acc) r g b / .6), inset 0 0 0 1px rgb(from var(--acc) r g b / .25); }
[data-stil="grafit"] .pd-nav { gap: 1.4rem; }
[data-stil="grafit"] .pd-nav-i { gap: .2rem; font-size: .98rem; font-weight: 500; }
[data-stil="grafit"] .pd-ni { width: 3.85rem; height: 3.85rem; }
[data-stil="grafit"] .pd-ni .pd-i { width: 1.7rem; height: 1.7rem; }
[data-stil="grafit"] .pd-nav-i:hover .pd-ni, [data-stil="grafit"] .pd-nav-i[data-ph-hover] .pd-ni { background: var(--surf-2); }
[data-stil="grafit"] .pd-nav-i[aria-current="page"] { color: var(--ink); }
[data-stil="grafit"] .pd-nav-i[aria-current="page"] .pd-ni { background: var(--acc); color: var(--acc-ink); box-shadow: 0 0 26px -4px rgb(from var(--acc) r g b / .75), inset 0 1px 0 rgba(255, 255, 255, .5); }
[data-stil="grafit"] .pd-badge { top: -.3rem; right: 1.7rem; min-width: 1.55rem; height: 1.55rem; font-size: .85rem; color: var(--acc-ink); background: var(--acc); box-shadow: 0 0 12px rgb(from var(--acc) r g b / .6); }

[data-stil="lys"] .pd-rail { gap: .8rem; padding: 1.8rem .8rem 1.6rem; border-radius: 32px; background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); box-shadow: var(--card-sh); }
[data-stil="lys"] .pd-mark { width: 4.6rem; height: 4.6rem; margin-bottom: 2rem; font-size: 1.5rem; color: var(--acc-ink); background: var(--grad);
  box-shadow: 0 12px 24px -8px rgb(from var(--acc) r g b / .6), inset 0 1px 1px rgba(255, 255, 255, .35); }
[data-stil="lys"] .pd-nav { gap: .8rem; }
[data-stil="lys"] .pd-nav-i { gap: .6rem; padding: .6rem .2rem; border-radius: 2rem; font-size: 1.05rem; }
[data-stil="lys"] .pd-ni { width: 4.2rem; height: 4.2rem; }
[data-stil="lys"] .pd-nav-i:hover .pd-ni, [data-stil="lys"] .pd-nav-i[data-ph-hover] .pd-ni { background: rgba(255, 255, 255, .85); transform: translateY(-1px); }
[data-stil="lys"] .pd-nav-i[aria-current="page"] { color: var(--ink); }
[data-stil="lys"] .pd-nav-i[aria-current="page"] .pd-ni { background: #fff; color: var(--acc-txt); box-shadow: 0 8px 20px -8px rgb(from var(--acc-txt) r g b / .5); }
[data-stil="lys"] .pd-badge { top: .1rem; right: 1.5rem; min-width: 1.76rem; height: 1.76rem; color: var(--acc-ink); background: var(--grad);
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .95), 0 4px 10px -3px rgb(from var(--acc) r g b / .6); }

/* Topbar */
.pd-top { position: relative; z-index: 5; display: flex; align-items: center; gap: 1.2rem; min-height: 5.6rem; padding: 0 .4rem 0 1rem; }
.pd-hello { min-width: 0; }
.pd-hello h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; white-space: nowrap; }
.pd-eyebrow { display: none; align-items: center; gap: .8rem; font-size: 1.2rem; font-weight: 600; color: var(--ink-3); }
.pd-eyebrow b { color: var(--acc-txt); font-weight: 700; }
.pd-sub { display: flex; align-items: center; gap: 1rem; margin-top: .55rem; font-size: 1.3rem; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.pd-sub i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--ink-4); flex: none; }
.pd-sub b { font-weight: 700; color: var(--ink-2); }
.pd-top-r { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; flex: none; }
.pd-search { display: flex; align-items: center; gap: 1rem; width: 34rem; height: 4.6rem; padding: 0 .7rem 0 1.6rem; border: 0; border-radius: 99px; cursor: pointer;
  color: var(--ink-3); font-size: 1.35rem; font-weight: 500; text-align: left; background: var(--surf); box-shadow: var(--lift);
  transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.pd-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-search:hover, .pd-search[data-ph-hover] { background: var(--surf-2); box-shadow: var(--lift), 0 0 30px -8px var(--glow); }
:where(#app) kbd { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .8rem; border-radius: 99px; font-family: inherit; font-size: 1.1rem; font-weight: 600; line-height: 1; color: var(--ink-2); background: var(--surf-3); white-space: nowrap; }
.pd-demo { display: inline-flex; align-items: center; gap: .6rem; height: 3rem; padding: 0 1.2rem; border-radius: 99px; font-size: 1.12rem; font-weight: 600; color: var(--ink-3); background: var(--surf); white-space: nowrap; }
.pd-demo::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--warn); opacity: .85; }
.pd-me { display: flex; align-items: center; gap: 1rem; height: 4.6rem; padding: 0 1.6rem 0 .5rem; border-radius: 99px; background: var(--surf); box-shadow: var(--lift); white-space: nowrap; }
.pd-me b { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.pd-me small { display: block; font-size: 1.1rem; font-weight: 500; color: var(--ink-3); line-height: 1.25; }

[data-stil="glas"] .pd-search { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); background: rgba(255, 255, 255, .055); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--lift); }
[data-stil="glas"] .pd-hello h1 .pd-navn-acc { background: linear-gradient(90deg, #fff 0%, var(--acc-txt) 65%, var(--acc-2-txt)); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-stil="glas"] .pd-me-av { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px rgb(from var(--acc-2) r g b / .5), 0 0 18px rgb(from var(--acc-2) r g b / .45); }
[data-stil="grafit"] .pd-top { min-height: 5rem; padding-left: .4rem; }
[data-stil="grafit"] .pd-search, [data-stil="grafit"] .pd-me { height: 4.3rem; background: #101215; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
[data-stil="grafit"] .pd-search { width: 34rem; font-size: 1.18rem; }
[data-stil="grafit"] .pd-sub { font-size: 1.18rem; margin-top: .4rem; }
[data-stil="grafit"] .pd-demo { background: rgba(255, 255, 255, .025); font-size: 1rem; }
[data-stil="grafit"] .pd-demo::before { display: none; }
[data-stil="lys"] .pd-eyebrow { display: flex; }
[data-stil="lys"] .pd-hello h1 { font-weight: 700; letter-spacing: -.025em; margin-top: .2rem; }
[data-stil="lys"] .pd-sub .pd-navn-i, [data-stil="lys"] .pd-sub .pd-navn-i + i { display: none; }
[data-stil="lys"] .pd-search { height: 4.8rem; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 10px 28px -16px rgb(from var(--acc-txt) r g b / .35); }
[data-stil="lys"] .pd-search:hover, [data-stil="lys"] .pd-search[data-ph-hover] { background: #fff; }
[data-stil="lys"] .pd-me, [data-stil="lys"] .pd-demo { background: rgba(255, 255, 255, .6); box-shadow: 0 10px 28px -18px rgb(from var(--acc-txt) r g b / .35); }
[data-stil="lys"] .pd-demo::before { background: var(--ink-4); }

/* Visninger (faner) */
.pd-views { position: relative; min-width: 0; min-height: 0; }
.pd-view { display: none; position: absolute; inset: 0; min-width: 0; min-height: 0; }
.pd-view.pd-on { display: grid; }
.pd-view.pd-ind { animation: pdViewIn .5s var(--ease) backwards; }
@keyframes pdViewIn { from { opacity: 0; transform: translateY(1rem); } }
.pd-vhead { display: flex; align-items: center; gap: 1.2rem; min-height: 4.4rem; }
.pd-vhead .pd-r { margin-left: auto; display: flex; align-items: center; gap: 1rem; }

/* ---------- 7. Bento og kort ---------- */
.pd-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); min-height: 0; height: 100%; }
.pd-card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--pad-y) var(--pad-x);
  border-radius: var(--r-card); background: var(--card-bg); box-shadow: var(--card-sh);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease); }
.pd-card.k-2 { --k: var(--acc-2-txt); }
.pd-card.k-ok { --k: var(--ok); }
.pd-card.k-warn { --k: var(--warn); }
.pd-card.k-risk { --k: var(--risk); }
.pd-card:hover, .pd-card[data-ph-hover] { transform: translateY(var(--lift-y)); }
.pd-card.pd-stille:hover, .pd-card.pd-stille[data-ph-hover] { transform: none; }

/* Glas: blur, lyskant oppe til venstre og en blød accentglød i et hjørne */
[data-stil="glas"] .pd-card { -webkit-backdrop-filter: var(--blur, blur(28px) saturate(165%)); backdrop-filter: blur(28px) saturate(165%); }
[data-stil="glas"] .pd-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 26%, rgba(255, 255, 255, 0) 52%, rgb(from var(--k) r g b / .12) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
[data-stil="glas"] .pd-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(from var(--k) r g b / .16), transparent 72%); opacity: .85; transition: opacity .5s var(--ease); }
[data-stil="glas"] .pd-card:hover, [data-stil="glas"] .pd-card[data-ph-hover] {
  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(from var(--k) r g b / .6); }
[data-stil="glas"] .pd-card:hover::after, [data-stil="glas"] .pd-card[data-ph-hover]::after { opacity: 1; }
[data-stil="glas"] .pd-card.pd-ai { background: radial-gradient(110% 60% at 100% 0%, rgb(from var(--acc-2) r g b / .2), transparent 62%), radial-gradient(90% 50% at 0% 100%, rgb(from var(--acc) r g b / .08), transparent 60%),
  linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015) 45%), var(--card-base); }

/* Grafit: mat flade og en lyskant, der følger musen (--mx/--my sættes af ph-dash.js) */
[data-stil="grafit"] .pd-card { overflow: hidden; }
[data-stil="grafit"] .pd-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgb(from var(--acc) r g b / .6), rgb(from var(--acc) r g b / .06) 55%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .5s var(--ease); }
[data-stil="grafit"] .pd-card::before { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(10px);
  width: 70%; height: 90%; left: var(--ax, -18%); top: var(--ay, -40%); background: radial-gradient(closest-side, rgb(from var(--k) r g b / var(--aura, 0)), transparent); }
[data-stil="grafit"] .pd-card.pd-aura { --aura: .15; }
[data-stil="grafit"] .pd-card:hover, [data-stil="grafit"] .pd-card[data-ph-hover] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgb(from var(--acc) r g b / .1), 0 22px 60px -22px rgb(from var(--acc) r g b / .22), 0 34px 64px -34px rgba(0, 0, 0, .95); }
[data-stil="grafit"] .pd-card:hover::after, [data-stil="grafit"] .pd-card[data-ph-hover]::after { opacity: 1; }
[data-stil="grafit"] .pd-card.pd-ai { background: linear-gradient(180deg, #191C21 0%, #121418 55%, #101215 100%); --aura: .14; --ax: 5%; --ay: -22%; }
[data-stil="grafit"] .pd-ch .pd-ico { display: none; }

/* Lys: hvide flader, bløde skygger tonet af brandet */
[data-stil="lys"] .pd-card { overflow: hidden; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
[data-stil="lys"] .pd-card:hover, [data-stil="lys"] .pd-card[data-ph-hover] { box-shadow: var(--card-sh-h); }
[data-stil="lys"] .pd-card::after { content: ""; position: absolute; z-index: -1; pointer-events: none; right: -7rem; top: -8rem; width: 22rem; height: 22rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(from var(--k) r g b / var(--aura, 0)), transparent); }
[data-stil="lys"] .pd-card.pd-aura { --aura: .14; }
[data-stil="lys"] .pd-card.pd-ai { background: linear-gradient(172deg, rgba(255, 255, 255, .95) 0%, rgba(250, 249, 255, .92) 55%, var(--tint) 100%); --aura: .16; }
[data-stil="lys"] .pd-card.pd-fri { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; padding-left: .4rem; padding-right: .4rem; }
[data-stil="lys"] .pd-card.pd-fri:hover, [data-stil="lys"] .pd-card.pd-fri[data-ph-hover] { transform: none; box-shadow: none; }

.pd-card.pd-ping { animation: pdPing 1.2s var(--ease); }
@keyframes pdPing { 40% { box-shadow: var(--card-sh), 0 0 0 .5rem rgb(from var(--k) r g b / .22), 0 0 70px -10px rgb(from var(--k) r g b / .6); } }

/* Korthoved */
.pd-ch { display: flex; align-items: center; gap: 1.1rem; min-height: 3.4rem; flex: none; }
.pd-ch h2 { font-size: var(--fs-h2); font-weight: var(--w-h2); letter-spacing: -.01em; white-space: nowrap; color: var(--ink); }
.pd-ch .pd-r { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.pd-ico { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; flex: none; color: var(--k); }
.pd-ico .pd-i { width: 1.7rem; height: 1.7rem; }
.pd-meta { font-size: var(--fs-meta); font-weight: 500; color: var(--ink-3); white-space: nowrap; }
[data-stil="glas"] .pd-ico { background: radial-gradient(circle at 30% 25%, rgb(from var(--k) r g b / .26), rgb(from var(--k) r g b / .08)); box-shadow: 0 0 20px -6px rgb(from var(--k) r g b / .7); }
[data-stil="lys"] .pd-ico { width: 3.6rem; height: 3.6rem; background: linear-gradient(140deg, var(--tint-2), oklch(from var(--acc-2) .95 .03 h)); }
[data-stil="lys"] .pd-card.k-warn .pd-ico, [data-stil="lys"] .pd-card.k-risk .pd-ico { background: linear-gradient(140deg, #FFEFE9, #FFE6EC); }
[data-stil="lys"] .pd-ch h2 { color: var(--ink-2); }
[data-stil="lys"] .pd-ch .pd-meta::before { content: "·"; margin-right: .6rem; color: var(--ink-4); }
[data-stil="lys"] .pd-ch .pd-r .pd-meta::before, [data-stil="lys"] .pd-ch .pd-meta.pd-r::before { content: none; }

/* Tal */
.pd-big { display: inline-flex; align-items: baseline; font-size: calc(6.8rem * var(--big-scale)); font-weight: var(--big-w); letter-spacing: var(--big-ls); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-big.m { font-size: calc(4.4rem * var(--big-scale)); }
.pd-big.s { font-size: calc(3.2rem * var(--big-scale)); }
.pd-big .u { font-size: .34em; font-weight: 500; letter-spacing: 0; margin-left: .35em; }
.pd-big.s .u, .pd-big.m .u { font-size: .4em; }
[data-stil="glas"] .pd-big { background: linear-gradient(180deg, #fff 35%, rgb(from var(--k) r g b / .9) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px rgb(from var(--k) r g b / .32)); }
[data-stil="glas"] .pd-big .u { -webkit-text-fill-color: var(--ink-3); }
[data-stil="glas"] .pd-card.k-warn .pd-big { background-image: linear-gradient(180deg, #fff3e2 10%, var(--warn) 95%); }
[data-stil="glas"] .pd-card.k-warn .pd-big .u { -webkit-text-fill-color: rgb(from var(--warn) r g b / .7); }
[data-stil="grafit"] .pd-big { color: var(--ink); }
[data-stil="grafit"] .pd-big .u { color: var(--ink-3); }
[data-stil="lys"] .pd-big { background: var(--grad-txt); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-stil="lys"] .pd-big.ink, [data-stil="lys"] .pd-big.s { background: none; color: var(--ink); }
[data-stil="lys"] .pd-big .u { -webkit-text-fill-color: var(--ink-3); font-weight: 600; }
.pd-mid { font-size: 3.1rem; font-weight: calc(var(--big-w) + 100); letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.pd-mid .u { font-size: .45em; font-weight: 500; letter-spacing: 0; margin-left: .3em; color: var(--ink-3); }
.pd-delta { display: inline-flex; align-items: center; gap: .35rem; height: 2.7rem; padding: 0 1rem 0 .8rem; border-radius: 99px; font-size: 1.26rem; font-weight: 700; white-space: nowrap;
  color: var(--ok); background: var(--ok-soft); }
.pd-delta.ned { color: var(--risk); background: var(--risk-soft); }
.pd-delta.acc { color: var(--acc-txt); background: var(--acc-soft); }
[data-stil="grafit"] .pd-delta { color: var(--acc-txt); background: rgb(from var(--acc) r g b / .1); height: 2.4rem; font-size: 1.04rem; font-weight: 600; }
.pd-muted { color: var(--ink-3); }
.pd-tekst { font-size: var(--fs-meta); font-weight: 500; color: var(--ink-3); }
.pd-tekst b { font-weight: 700; color: var(--ink-2); }
.pd-tekst b.k { color: var(--k); }
.pd-link { display: inline-flex; align-items: center; gap: .5rem; border: 0; padding: 0; background: none; cursor: pointer; font-size: 1.28rem; font-weight: 700; color: var(--k); text-decoration: none; border-radius: 99px; white-space: nowrap; }
.pd-link .pd-i { width: 1.5rem; height: 1.5rem; transition: transform .4s var(--ease); }
.pd-link:hover .pd-i, .pd-link[data-ph-hover] .pd-i { transform: translateX(3px); }

/* ---------- 8. Knapper, chips, avatarer, segmenter, felter ---------- */
.pd-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; height: 3.6rem; padding: 0 1.6rem; border: 0; border-radius: 99px; cursor: pointer;
  white-space: nowrap; font-size: 1.3rem; font-weight: 700; color: var(--ink); background: var(--surf-2); 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), color .4s var(--ease), opacity .4s, filter .4s var(--ease); }
.pd-btn .pd-i { width: 1.55rem; height: 1.55rem; stroke-width: 2; }
.pd-btn:hover, .pd-btn[data-ph-hover] { background: var(--surf-3); }
.pd-btn:active { transform: scale(.97); }
.pd-btn.pri { color: var(--acc-ink); background: var(--acc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px -10px var(--glow); }
.pd-btn.pri:hover, .pd-btn.pri[data-ph-hover] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 32px -8px rgb(from var(--acc) r g b / .9); filter: brightness(1.05); }
.pd-btn.to { color: var(--acc-2-ink); background: var(--acc-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px -10px rgb(from var(--acc-2) r g b / .8); }
.pd-btn.to:hover, .pd-btn.to[data-ph-hover] { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 32px -8px rgb(from var(--acc-2) r g b / .9); }
.pd-btn.warn { color: var(--warn-ink); background: var(--warn); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px -10px rgb(from var(--warn) r g b / .8); }
.pd-btn.warn:hover, .pd-btn.warn[data-ph-hover] { filter: brightness(1.05); }
.pd-btn.ghost { background: transparent; box-shadow: none; color: var(--ink-2); }
.pd-btn.ghost:hover, .pd-btn.ghost[data-ph-hover] { background: var(--surf-2); color: var(--ink); }
.pd-btn.sm { height: 3.1rem; padding: 0 1.25rem; font-size: 1.2rem; }
.pd-btn kbd { min-width: 2.2rem !important; height: 2.2rem !important; margin-left: .2rem; padding: 0 .6rem !important; font-size: 1rem !important; }
.pd-btn:is(.pri, .to, .warn) kbd { color: inherit !important; background: rgb(0 0 0 / .14) !important; }
[data-stil="lys"] .pd-btn:is(.pri, .to) kbd { background: rgb(255 255 255 / .2) !important; }
.pd-btn.blok { width: 100%; }
.pd-btn.rund { width: 3.6rem; padding: 0; }
.pd-btn.rund.sm { width: 3.1rem; }
.pd-btn[disabled] { opacity: .42; pointer-events: none; filter: grayscale(.4); }
.pd-btn.ok-done { color: var(--ok); background: var(--ok-soft); box-shadow: none; pointer-events: none; }
[data-stil="glas"] .pd-btn.pri { background: linear-gradient(180deg, var(--acc), rgb(from var(--acc) r g b / .84)); }
[data-stil="glas"] .pd-btn.to { background: linear-gradient(180deg, var(--acc-2), rgb(from var(--acc-2) r g b / .84)); }
[data-stil="grafit"] .pd-btn { height: 3.5rem; font-size: 1.12rem; font-weight: 600; background: var(--surf-2); box-shadow: none; }
[data-stil="grafit"] .pd-btn.sm { height: 3rem; font-size: 1.04rem; }
[data-stil="grafit"] .pd-btn.pri, [data-stil="grafit"] .pd-btn.to { background: var(--acc); color: var(--acc-ink); box-shadow: 0 8px 26px -8px rgb(from var(--acc) r g b / .7), inset 0 1px 0 rgba(255, 255, 255, .55); }
[data-stil="grafit"] .pd-btn.ghost { background: transparent; }
[data-stil="lys"] .pd-btn { background: var(--tint); color: var(--ink-2); box-shadow: none; }
[data-stil="lys"] .pd-btn:hover, [data-stil="lys"] .pd-btn[data-ph-hover] { background: var(--tint-2); color: var(--acc-txt); }
[data-stil="lys"] .pd-btn.pri, [data-stil="lys"] .pd-btn.to { color: var(--acc-ink); background: var(--grad); box-shadow: 0 12px 24px -10px rgb(from var(--acc) r g b / .7), inset 0 1px 1px rgba(255, 255, 255, .28); }
[data-stil="lys"] .pd-btn.pri:hover, [data-stil="lys"] .pd-btn.pri[data-ph-hover], [data-stil="lys"] .pd-btn.to:hover, [data-stil="lys"] .pd-btn.to[data-ph-hover] { color: var(--acc-ink); transform: translateY(-1px); filter: brightness(1.06) saturate(1.05); }
[data-stil="lys"] .pd-btn.ghost { background: transparent; }
[data-stil="lys"] .pd-btn.warn { color: var(--warn-ink); background: var(--warn); box-shadow: 0 12px 24px -10px rgb(from var(--warn) r g b / .6); }

.pd-chip { display: inline-flex; align-items: center; gap: .45rem; height: 2.5rem; padding: 0 1rem; border-radius: 99px; font-size: 1.12rem; font-weight: 700; white-space: nowrap; line-height: 1;
  color: var(--ink-2); background: var(--surf-2); font-variant-numeric: tabular-nums; }
.pd-chip .pd-i { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
.pd-chip.acc { color: var(--acc-txt); background: var(--acc-soft); }
.pd-chip.to { color: var(--acc-2-txt); background: rgb(from var(--acc-2) r g b / .14); }
.pd-chip.ok { color: var(--ok); background: var(--ok-soft); }
.pd-chip.warn { color: var(--warn); background: var(--warn-soft); }
.pd-chip.risk { color: var(--risk); background: var(--risk-soft); }
.pd-chip.ren { background: none; padding: 0; height: auto; }
.pd-chip.live::before, .pd-chip.prik::before { content: ""; width: .65rem; height: .65rem; border-radius: 50%; background: currentColor; flex: none; }
.pd-chip.live::before { animation: pdLive 2.2s ease-out infinite; }
@keyframes pdLive { 0% { box-shadow: 0 0 0 0 currentColor; } 80%, 100% { box-shadow: 0 0 0 .7rem transparent; } }
[data-stil="grafit"] .pd-chip { height: 2.4rem; font-size: 1rem; font-weight: 600; background: var(--surf); }
[data-stil="grafit"] .pd-chip.acc { background: rgb(from var(--acc) r g b / .1); }
[data-stil="lys"] .pd-chip { background: var(--tint); }
[data-stil="lys"] .pd-chip.acc { background: var(--acc-soft); }
[data-stil="lys"] .pd-chip.ok { background: var(--ok-soft); }
[data-stil="lys"] .pd-chip.warn { background: var(--warn-soft); }
[data-stil="lys"] .pd-chip.risk { background: var(--risk-soft); }

.pd-av { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; flex: none; font-size: 1.1rem; font-weight: 700; color: var(--ink); line-height: 1;
  background: radial-gradient(circle at 30% 25%, rgb(from var(--k) r g b / .45), rgb(from var(--k) r g b / .12)); }
.pd-av.s { width: 2.8rem; height: 2.8rem; font-size: .95rem; }
.pd-av.xs { width: 2.3rem; height: 2.3rem; font-size: .82rem; }
.pd-av.l { width: 5.6rem; height: 5.6rem; font-size: 1.8rem; }
.pd-av.fyld { color: var(--acc-ink); background: linear-gradient(135deg, var(--acc), var(--acc-2)); }
[data-stil="grafit"] .pd-av { color: var(--ink); background: linear-gradient(140deg, #2C3138, #1B1E23); }
[data-stil="grafit"] .pd-av.fyld { color: var(--acc-ink); background: linear-gradient(140deg, oklch(from var(--acc) calc(l + .06) c h), var(--acc)); }
[data-stil="lys"] .pd-av { color: var(--acc-txt); background: linear-gradient(140deg, var(--tint-2), oklch(from var(--acc-2) .95 .03 h)); }
[data-stil="lys"] .pd-av.warm { color: var(--risk); background: linear-gradient(140deg, #FFEFE9, #FFE5EC); }
[data-stil="lys"] .pd-av.fyld { color: var(--acc-ink); background: var(--grad); box-shadow: 0 0 0 2.5px #fff, 0 6px 14px -4px rgb(from var(--acc) r g b / .55); }

.pd-seg { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem; border-radius: 99px; background: var(--surf); box-shadow: var(--lift); }
.pd-seg button { height: 3.2rem; padding: 0 1.4rem; border: 0; border-radius: 99px; cursor: pointer; background: none; font-size: 1.2rem; font-weight: 600; color: var(--ink-3); white-space: nowrap;
  transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); }
.pd-seg button:hover, .pd-seg button[data-ph-hover] { color: var(--ink); }
.pd-seg button.on, .pd-seg button[aria-pressed="true"] { color: var(--ink); background: var(--surf-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.pd-seg button small { margin-left: .4rem; font-weight: 700; color: var(--ink-3); }
[data-stil="grafit"] .pd-seg { background: #101215; box-shadow: none; }
[data-stil="grafit"] .pd-seg button.on, [data-stil="grafit"] .pd-seg button[aria-pressed="true"] { color: var(--acc-ink); background: var(--acc); }
[data-stil="grafit"] .pd-seg button.on small, [data-stil="grafit"] .pd-seg button[aria-pressed="true"] small { color: var(--acc-ink); opacity: .7; }
[data-stil="lys"] .pd-seg { background: rgba(255, 255, 255, .65); box-shadow: 0 10px 28px -18px rgb(from var(--acc-txt) r g b / .35); }
[data-stil="lys"] .pd-seg button.on, [data-stil="lys"] .pd-seg button[aria-pressed="true"] { color: var(--acc-txt); background: #fff; box-shadow: 0 6px 16px -8px rgb(from var(--acc-txt) r g b / .4); }

.pd-input { display: flex; align-items: center; gap: .9rem; height: 4.2rem; padding: 0 1.4rem; border-radius: 99px; background: var(--surf); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); color: var(--ink-3);
  transition: box-shadow .4s var(--ease), background .4s var(--ease); }
.pd-input:focus-within { background: var(--surf-2); box-shadow: 0 0 0 2px rgb(from var(--acc) r g b / .5), 0 0 0 6px rgb(from var(--acc) r g b / .1); }
.pd-input input, .pd-input select, .pd-input textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 1.32rem; font-weight: 500; color: var(--ink); }
.pd-input input::placeholder, .pd-input textarea::placeholder { color: var(--ink-3); }
.pd-input select option { color: #111; }
.pd-field { display: flex; flex-direction: column; gap: .6rem; }
.pd-field > span { font-size: 1.12rem; font-weight: 700; color: var(--ink-3); padding-left: 1.4rem; }
[data-stil="lys"] .pd-input { background: var(--tint); box-shadow: none; }
[data-stil="lys"] .pd-input:focus-within { background: #fff; }

.pd-toggle { display: inline-flex; align-items: center; gap: .8rem; cursor: pointer; font-size: 1.2rem; font-weight: 600; color: var(--ink-2); user-select: none; white-space: nowrap; }
.pd-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.pd-toggle .tr { position: relative; width: 4rem; height: 2.3rem; border-radius: 99px; background: var(--surf-3); transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.pd-toggle .tr::after { content: ""; position: absolute; top: .3rem; left: .3rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #cfd6f0; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .45s var(--ease), background .4s; }
.pd-toggle input:checked + .tr { background: var(--acc-2); box-shadow: 0 0 18px -2px rgb(from var(--acc-2) r g b / .8); }
.pd-toggle input:checked + .tr::after { transform: translateX(1.7rem); background: #fff; }
.pd-toggle input:focus-visible + .tr { outline: 2px solid var(--acc-txt); outline-offset: 3px; }
[data-stil="lys"] .pd-toggle .tr { background: var(--surf-3); }

/* ---------- 9. Lister og rækker ---------- */
.pd-scroll { overflow-y: auto; scrollbar-width: none; min-height: 0; }
.pd-scroll::-webkit-scrollbar { display: none; }
.pd-scroll.fade { -webkit-mask: linear-gradient(180deg, #000 calc(100% - 3.2rem), transparent); mask: linear-gradient(180deg, #000 calc(100% - 3.2rem), transparent); }
.pd-rows { display: flex; flex-direction: column; gap: .7rem; min-height: 0; }
.pd-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .9rem; padding: .6rem 1.4rem .6rem .6rem; border-radius: 99px;
  background: var(--surf); box-shadow: var(--lift); transition: background .4s var(--ease), transform .45s var(--ease), opacity .45s var(--ease); }
.pd-row:hover, .pd-row[data-ph-hover] { background: var(--surf-2); }
.pd-row.ud { opacity: 0; transform: translateX(2.4rem); }
.pd-row.ind { animation: pdRowIn .5s var(--ease) backwards; }
@keyframes pdRowIn { from { opacity: 0; transform: translateY(.8rem); } }
.pd-row .pd-av { width: 3rem; height: 3rem; font-size: 1rem; }
.pd-rn { min-width: 0; }
.pd-rn b { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-rn 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; }
.pd-rv { text-align: right; font-size: 1.3rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-hrs { display: inline-flex; align-items: center; gap: .35rem; font-size: 1.16rem; font-weight: 700; color: var(--warn); white-space: nowrap; }
.pd-hrs .pd-i { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
[data-stil="grafit"] .pd-row { border-radius: var(--r-in); padding: .7rem .7rem .7rem 1.2rem; box-shadow: none; grid-template-columns: minmax(0, 1fr) auto auto; }
[data-stil="grafit"] .pd-row .pd-av { display: none; }
[data-stil="grafit"] .pd-row .pd-rn b { font-weight: 500; font-size: 1.2rem; }
[data-stil="grafit"] .pd-row .pd-rn small { display: none; }
[data-stil="grafit"] .pd-rv { font-weight: 500; color: var(--ink-2); font-size: 1.2rem; min-width: 8rem; }
[data-stil="grafit"] .pd-hrs { height: 2.3rem; padding: 0 .9rem; border-radius: 99px; background: rgb(from var(--risk) r g b / .1); color: var(--risk); font-weight: 600; font-size: 1rem; }
[data-stil="lys"] .pd-row { background: none; box-shadow: none; padding: .45rem .6rem .45rem .45rem; }
[data-stil="lys"] .pd-row:hover, [data-stil="lys"] .pd-row[data-ph-hover] { background: var(--risk-soft); }
[data-stil="lys"] .pd-row .pd-av { color: var(--risk); background: linear-gradient(140deg, #FFEFE9, #FFE5EC); }
[data-stil="lys"] .pd-rv { font-weight: 800; }

/* ---------- 10. AI-kort ---------- */
.pd-ai { --k: var(--acc-2-txt); }
.pd-orb { position: relative; width: 3.4rem; height: 3.4rem; border-radius: 50%; flex: none;
  background: conic-gradient(from 0deg, var(--acc-2), var(--acc), oklch(from var(--acc-2) l c calc(h + 50)), var(--acc-2)); box-shadow: 0 0 24px -2px rgb(from var(--acc-2) r g b / .85); animation: pdSpin 8s linear infinite; }
.pd-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(14, 12, 36, .6) 78%); }
@keyframes pdSpin { to { transform: rotate(360deg); } }
.pd-orb .pd-i { position: relative; z-index: 1; width: 1.6rem; height: 1.6rem; }
[data-stil="glas"] .pd-orb .pd-i { display: none; }
[data-stil="lys"] .pd-orb { display: grid; place-items: center; color: #fff; }
[data-stil="lys"] .pd-orb .pd-i { fill: #fff; stroke: none; }
[data-stil="grafit"] .pd-orb { display: grid; place-items: center; width: 4.1rem; height: 4.1rem; color: var(--acc-txt); animation: none;
  background: radial-gradient(circle, rgb(from var(--acc) r g b / .24), rgb(from var(--acc) r g b / .04) 70%); box-shadow: 0 0 30px -6px rgb(from var(--acc) r g b / .75); }
[data-stil="grafit"] .pd-orb::after { inset: -3px; background: conic-gradient(from 0deg, transparent, rgb(from var(--acc) r g b / .9) 22%, transparent 48%);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%, #000 70%, transparent 72%); mask: radial-gradient(circle, transparent 64%, #000 66%, #000 70%, transparent 72%); animation: pdSpin 3.6s linear infinite; }
[data-stil="lys"] .pd-orb { animation: none; background: radial-gradient(circle at 32% 28%, oklch(from var(--acc) .85 .08 h) 0%, var(--acc) 48%, var(--acc-txt) 100%); box-shadow: 0 8px 18px -5px rgb(from var(--acc) r g b / .6), inset 0 1px 1px rgba(255, 255, 255, .5); }
[data-stil="lys"] .pd-orb::after { inset: -4px; background: none; box-shadow: 0 0 0 1.5px rgb(from var(--acc-2) r g b / .35); animation: pdHalo 3s var(--ease) infinite; }
@keyframes pdHalo { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
.pd-ai-title { margin-top: 1.7rem; font-size: 2.5rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.15; flex: none; }
.pd-ai-title b { font-weight: 700; }
[data-stil="glas"] .pd-ai-title b { background: linear-gradient(180deg, #fff, var(--acc-2-txt)); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-stil="grafit"] .pd-ai-title { margin-top: 1.6rem; font-size: 1.45rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
[data-stil="grafit"] .pd-ai-title b { font-weight: 500; }
[data-stil="grafit"] .pd-ai-title .n { display: inline-block; vertical-align: -.12em; margin-right: .9rem; font-size: 3.8rem; font-weight: 600; line-height: 1; color: var(--acc-txt); text-shadow: 0 0 30px rgb(from var(--acc) r g b / .45); }
[data-stil="lys"] .pd-ai-title { font-size: 2.4rem; font-weight: 700; letter-spacing: -.025em; }
[data-stil="lys"] .pd-ai-title b { font-weight: 800; background: var(--grad-txt); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pd-ai-lead { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; font-size: 1.28rem; font-weight: 500; color: var(--ink-3); flex: none; }
.pd-ai-lead .pd-i { width: 1.55rem; height: 1.55rem; color: var(--ok); }
.pd-drafts { display: flex; flex-direction: column; gap: .9rem; margin: 1.6rem -.6rem 0; padding: 0 .6rem .6rem; flex: 1; min-height: 0; }
.pd-draft { position: relative; flex: none; padding: 1.1rem 1.1rem 1.2rem; border-radius: 20px; background: var(--surf); box-shadow: var(--lift);
  transition: background .4s var(--ease), box-shadow .4s var(--ease), opacity .5s var(--ease), transform .5s var(--ease); }
.pd-draft:hover, .pd-draft[data-ph-hover] { background: var(--surf-2); }
.pd-draft.ind { animation: pdDraftIn .6s var(--ease) backwards; }
@keyframes pdDraftIn { from { opacity: 0; transform: translateY(-1rem) scale(.98); } }
.pd-d-head { display: flex; align-items: center; gap: 1.1rem; }
.pd-d-who { min-width: 0; flex: 1; }
.pd-d-who b { display: block; font-size: 1.34rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-d-who 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; }
.pd-d-who small em { font-style: normal; font-weight: 600; color: var(--warn); }
.pd-d-act { display: flex; gap: .6rem; flex: none; }
.pd-d-act .pd-btn { height: 3.2rem; padding: 0 1.3rem; font-size: 1.2rem; }
.pd-bubble { position: relative; margin: .8rem 0 0 4.5rem; padding: .9rem 1.4rem; border-radius: 16px 16px 16px 6px; font-size: 1.24rem; font-weight: 500; line-height: 1.5; color: var(--ink-2);
  background: linear-gradient(180deg, rgb(from var(--acc-2) r g b / .16), rgb(from var(--acc-2) r g b / .08)); transition: box-shadow .4s var(--ease), opacity .4s; }
.pd-bubble .pd-tx { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; outline: none; }
.pd-draft.aaben .pd-bubble .pd-tx, .pd-draft.ret .pd-bubble .pd-tx { display: block; -webkit-line-clamp: unset; }
.pd-draft.ret .pd-bubble { color: var(--ink); box-shadow: 0 0 0 2px rgb(from var(--acc-2) r g b / .7), 0 0 24px -4px rgb(from var(--acc-2) r g b / .6); }
.pd-draft .pd-rettet { display: none; margin-left: .6rem; font-size: 1.02rem; font-weight: 600; color: var(--acc-2-txt); }
.pd-draft.rettet .pd-rettet { display: inline; }
.pd-sentline { display: none; align-items: center; gap: .5rem; font-size: 1.22rem; font-weight: 700; color: var(--ok); white-space: nowrap; }
.pd-sentline .pd-i { width: 1.6rem; height: 1.6rem; stroke-width: 2.2; }
.pd-draft.sendt { background: var(--ok-soft); }
.pd-draft.sendt .pd-bubble { opacity: .55; }
.pd-draft.sendt .pd-d-act { display: none; }
.pd-draft.sendt .pd-sentline { display: inline-flex; }
.pd-draft.status .pd-bubble { background: linear-gradient(180deg, var(--ok-soft), rgb(from var(--ok) r g b / .05)); }
.pd-ai.pause .pd-drafts { opacity: .38; filter: saturate(.3); pointer-events: none; }
.pd-ai.pause .pd-orb { animation-play-state: paused; filter: grayscale(.85); box-shadow: none; }
.pd-ai-fod { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; font-size: 1.2rem; font-weight: 500; color: var(--ink-3); flex: none; }
.pd-ai-fod .lbl { background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink-3) 35%, var(--ink) 50%, var(--ink-3) 65%, var(--ink-3) 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: pdShimmer 2.6s linear infinite; }
.pd-ai-fod .dotp { width: 1.4rem; display: grid; place-items: center; }
.pd-ai-fod .dotp::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; background: var(--acc-2); box-shadow: 0 0 12px var(--acc-2); animation: pdBreathe 1.8s ease-in-out infinite; }
@keyframes pdShimmer { from { background-position: 120% 0; } to { background-position: -100% 0; } }
@keyframes pdBreathe { 50% { transform: scale(.6); opacity: .5; } }
.pd-ai.pause .pd-ai-fod .lbl, .pd-ai.pause .pd-ai-fod .dotp::before { animation: none; }
[data-stil="grafit"] .pd-draft { border-radius: 18px; background: rgba(255, 255, 255, .035); box-shadow: none; }
[data-stil="grafit"] .pd-draft:hover, [data-stil="grafit"] .pd-draft[data-ph-hover] { background: rgba(255, 255, 255, .055); }
[data-stil="grafit"] .pd-draft .pd-av { width: 3.1rem; height: 3.1rem; font-size: .95rem; }
[data-stil="grafit"] .pd-d-who b { font-weight: 600; font-size: 1.2rem; }
[data-stil="grafit"] .pd-d-who small, [data-stil="grafit"] .pd-d-who small em { color: var(--ink-3); font-weight: 400; font-size: 1rem; }
[data-stil="grafit"] .pd-bubble { margin-left: 0; font-size: 1.12rem; background: linear-gradient(180deg, rgb(from var(--acc) r g b / .075), rgb(from var(--acc) r g b / .03)); }
[data-stil="grafit"] .pd-draft.sendt { background: rgb(from var(--acc) r g b / .05); }
[data-stil="grafit"] .pd-draft.sendt .pd-sentline { color: var(--acc-txt); }
[data-stil="lys"] .pd-draft { background: rgba(255, 255, 255, .96); box-shadow: var(--lift); border-radius: var(--r-in); }
[data-stil="lys"] .pd-bubble { margin-left: 0; background: linear-gradient(120deg, var(--tint), oklch(from var(--acc-2) .965 .02 h)); }
[data-stil="lys"] .pd-draft.sendt { background: var(--ok-soft); }

/* ---------- 11. Tidslinje ---------- */
.pd-tl { position: relative; display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-height: 0; margin-top: 1.2rem; }
.pd-tl::before { content: ""; position: absolute; left: 6.6rem; top: 1.6rem; bottom: 1.6rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgb(from var(--k) r g b / .55), var(--surf-2)); }
.pd-tl-i { position: relative; display: grid; grid-template-columns: 5.2rem 2.8rem minmax(0, 1fr) auto; align-items: center; gap: 0 .2rem; padding: .4rem .6rem .4rem 0; border: 0; background: none; text-align: left; width: 100%;
  border-radius: var(--r-in); transition: background .4s var(--ease); cursor: default; }
button.pd-tl-i { cursor: pointer; }
.pd-tl-i:hover, .pd-tl-i[data-ph-hover] { background: var(--surf); }
.pd-tl-i time { font-size: 1.3rem; font-weight: 700; color: var(--ink-2); text-align: right; padding-right: .4rem; font-variant-numeric: tabular-nums; }
.pd-node { justify-self: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--node); box-shadow: 0 0 0 3px var(--node-ring); z-index: 1; }
.pd-tl-i.live .pd-node, .pd-tl-i.nu .pd-node { background: var(--k); box-shadow: 0 0 0 4px rgb(from var(--k) r g b / .2), 0 0 14px var(--k); }
.pd-tl-i.slut { opacity: .55; }
.pd-what { min-width: 0; padding-left: .6rem; }
.pd-what b { display: block; font-size: 1.32rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-what span { 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; }
.pd-tl-nu { position: relative; display: grid; grid-template-columns: 5.2rem 2.8rem 1fr; align-items: center; gap: 0 .2rem; height: 1.6rem; }
.pd-tl-nu time { font-size: 1.05rem; font-weight: 700; color: var(--risk); text-align: right; padding-right: .4rem; }
.pd-tl-nu .nd { justify-self: center; width: .8rem; height: .8rem; border-radius: 50%; background: var(--risk); box-shadow: 0 0 10px var(--risk); z-index: 1; }
.pd-tl-nu .ln { height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgb(from var(--risk) r g b / .8), transparent); }
[data-stil="grafit"] .pd-tl::before { background: rgba(255, 255, 255, .06); }
[data-stil="grafit"] .pd-tl-i.live { background: linear-gradient(90deg, rgb(from var(--acc) r g b / .1), rgb(from var(--acc) r g b / .025)); }
[data-stil="grafit"] .pd-tl-i.live time { color: var(--acc-txt); }
[data-stil="grafit"] .pd-tl-nu time { color: var(--acc-ink); background: var(--acc); border-radius: 99px; padding: .2rem .5rem; text-align: center; justify-self: end; font-size: .95rem; }
[data-stil="grafit"] .pd-tl-nu .nd { background: var(--acc); box-shadow: 0 0 10px var(--acc); }
[data-stil="grafit"] .pd-tl-nu .ln { background: linear-gradient(90deg, var(--acc), transparent); box-shadow: 0 0 10px rgb(from var(--acc) r g b / .6); }
[data-stil="lys"] .pd-tl::before { background: linear-gradient(180deg, var(--acc-2) 0%, var(--surf-3) 26%, var(--tint-2) 100%); }
[data-stil="lys"] .pd-node { box-shadow: 0 0 0 2.5px var(--node-ring); }
[data-stil="lys"] .pd-tl-i.live { background: linear-gradient(90deg, rgb(from var(--acc-2) r g b / .1), rgb(from var(--acc-2) r g b / .02)); border-radius: 99px; }
[data-stil="lys"] .pd-tl-i time { color: var(--ink); }

/* ---------- 12. Kanal-søjler (vandrette spor) ---------- */
.pd-spor { display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; flex: 1; min-height: 0; margin-top: 1.4rem; }
.pd-spor-i { display: grid; grid-template-columns: auto 8.6rem minmax(0, 1fr) 3rem; align-items: center; gap: 1rem; padding: .2rem .3rem; border-radius: 99px; transition: background .6s var(--ease); }
.pd-spor-i .pd-i { width: 1.6rem; height: 1.6rem; color: var(--k); }
.pd-spor-i > span { font-size: 1.24rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-spor-i > b { font-size: 1.36rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pd-spor-t { height: .8rem; border-radius: 99px; background: var(--surf-2); overflow: hidden; }
.pd-spor-t i { display: block; height: 100%; width: var(--w, 0%); border-radius: 99px; background: linear-gradient(90deg, rgb(from var(--k) r g b / .45), var(--k)); box-shadow: 0 0 12px rgb(from var(--k) r g b / .45); transition: width .7s var(--ease); }
.pd-spor-i.ny { background: rgb(from var(--k) r g b / .1); }
.pd-spor-i.ny > b { animation: pdBump .6s var(--ease); }
@keyframes pdBump { 35% { transform: scale(1.35); color: var(--k); } }
[data-stil="glas"] .pd-spor-i { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "i l v" "t t t"; row-gap: .75rem; padding: 0; }
[data-stil="glas"] .pd-spor-i > .pd-i { grid-area: i; }
[data-stil="glas"] .pd-spor-i > span:not(.pd-spor-t) { grid-area: l; }
[data-stil="glas"] .pd-spor-i > b { grid-area: v; }
[data-stil="glas"] .pd-spor-i > .pd-spor-t { grid-area: t; height: .7rem; }
[data-stil="grafit"] .pd-spor-i { grid-template-columns: 8.6rem minmax(0, 1fr) 2.6rem; }
[data-stil="grafit"] .pd-spor-i .pd-i { display: none; }
[data-stil="grafit"] .pd-spor-i > span { font-weight: 400; font-size: 1.12rem; }
[data-stil="grafit"] .pd-spor-t { height: .9rem; background: rgba(255, 255, 255, .05); }
[data-stil="grafit"] .pd-spor-t i { background: linear-gradient(90deg, rgb(from var(--acc) r g b / .45), var(--acc)); box-shadow: 0 0 12px rgb(from var(--acc) r g b / .45); }
[data-stil="lys"] .pd-spor-i { grid-template-columns: 3.2rem 8.4rem minmax(0, 1fr) 2.6rem; }
[data-stil="lys"] .pd-spor { margin-top: 1.1rem; gap: .3rem; }
[data-stil="lys"] .pd-spor-i .pd-i { box-sizing: content-box; width: 1.5rem; height: 1.5rem; padding: .6rem; border-radius: 50%; background: var(--tint); color: var(--acc-txt); }
[data-stil="lys"] .pd-spor-t { height: 1rem; background: var(--tint-2); }
[data-stil="lys"] .pd-spor-t i { background: linear-gradient(90deg, var(--acc), var(--acc-2)); box-shadow: none; }
[data-stil="lys"] .pd-spor-i > b { font-weight: 800; }

/* ---------- 13. Ring ---------- */
.pd-ring { position: relative; flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; margin-top: 1rem; }
.pd-ring svg { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; max-height: 15rem; overflow: visible; }
.pd-ring .trk { fill: none; stroke: var(--surf-2); stroke-width: 12; }
.pd-ring .val { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); filter: drop-shadow(0 0 8px rgb(from var(--k) r g b / .6)); }
.pd-ring .s0 { stop-color: var(--k); }
.pd-ring .s1 { stop-color: var(--ring-2, var(--acc-txt)); }
.pd-ring-c { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; }
.pd-ring-c b { font-size: 3.8rem; font-weight: var(--big-w); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.pd-ring-c b small { font-size: .48em; font-weight: 500; margin-left: .12em; color: var(--ink-3); letter-spacing: 0; }
.pd-ring-c > span { font-size: 1.05rem; font-weight: 600; color: var(--ink-3); margin-top: .35rem; line-height: 1.3; }
[data-stil="glas"] .pd-ring-c b { background: linear-gradient(180deg, #fff 30%, var(--k) 140%); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-stil="glas"] .pd-ring-c b small { -webkit-text-fill-color: var(--ink-3); }
[data-stil="grafit"] .pd-ring .trk { stroke: rgba(255, 255, 255, .06); }
[data-stil="grafit"] .pd-ring .s0, [data-stil="grafit"] .pd-ring .s1 { stop-color: var(--acc); }
[data-stil="grafit"] .pd-ring .val { filter: drop-shadow(0 0 8px rgb(from var(--acc) r g b / .5)); }
[data-stil="lys"] .pd-ring .trk { stroke: var(--tint-2); }
[data-stil="lys"] .pd-ring .s0 { stop-color: var(--acc-txt); }
[data-stil="lys"] .pd-ring .s1 { stop-color: var(--acc-2); }
[data-stil="lys"] .pd-ring .val { filter: drop-shadow(0 4px 8px rgb(from var(--acc) r g b / .35)); }

/* ---------- 14. Pille-søjler ---------- */
.pd-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .6rem; flex: 1; min-height: 0; margin-top: 1.8rem; }
.pd-bar { display: flex; flex-direction: column; align-items: center; min-height: 0; cursor: default; }
.pd-bar-c { position: relative; flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.pd-bar-c i { position: relative; display: block; width: 1.6rem; height: calc(var(--h) * 100%); border-radius: 99px; transform-origin: 50% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); transition: background .4s var(--ease), height .8s var(--ease); }
.pd-bar:hover .pd-bar-c i, .pd-bar[data-ph-hover] .pd-bar-c i { background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .1)); }
.pd-bar-v { position: absolute; left: 50%; bottom: calc(var(--h) * 100% + .6rem); transform: translateX(-50%); font-size: 1.1rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; opacity: 0; transition: opacity .3s var(--ease), bottom .8s var(--ease); }
.pd-bar:hover .pd-bar-v, .pd-bar[data-ph-hover] .pd-bar-v, .pd-bar.nu .pd-bar-v { opacity: 1; }
.pd-bar > span { margin-top: .8rem; font-size: 1.12rem; font-weight: 600; color: var(--ink-3); }
.pd-bar.nu > span { color: var(--ink); }
.pd-bar.nu .pd-bar-c i { width: 2rem; background: linear-gradient(0deg, var(--acc-2), var(--acc)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 28px -2px rgb(from var(--acc) r g b / .75); }
.pd-bar.nu .pd-bar-v { color: var(--ink); font-weight: 700; }
[data-stil="grafit"] .pd-bars { gap: .5rem; }
[data-stil="grafit"] .pd-bar-c i { width: min(3.2rem, 100%); background: linear-gradient(180deg, #3A3F47, #20242A); box-shadow: none; }
[data-stil="grafit"] .pd-bar:hover .pd-bar-c i, [data-stil="grafit"] .pd-bar[data-ph-hover] .pd-bar-c i { background: linear-gradient(180deg, #4A505A, #262A31); }
[data-stil="grafit"] .pd-bar.nu .pd-bar-c i { width: min(3.2rem, 100%); background: linear-gradient(180deg, oklch(from var(--acc) calc(l + .08) c h), var(--acc) 45%, oklch(from var(--acc) calc(l - .1) c h)); box-shadow: 0 0 34px -4px rgb(from var(--acc) r g b / .65), inset 0 1px 0 rgba(255, 255, 255, .6); }
[data-stil="grafit"] .pd-bar.nu > span, [data-stil="grafit"] .pd-bar.nu .pd-bar-v { color: var(--acc-txt); }
[data-stil="lys"] .pd-bar-c i { width: 72%; max-width: 3.8rem; background: linear-gradient(180deg, var(--tint-2), var(--surf-3)); box-shadow: none; }
[data-stil="lys"] .pd-bar:hover .pd-bar-c i, [data-stil="lys"] .pd-bar[data-ph-hover] .pd-bar-c i { filter: saturate(1.6) brightness(.97); background: linear-gradient(180deg, var(--tint-2), var(--surf-3)); }
[data-stil="lys"] .pd-bar.nu .pd-bar-c i { width: 72%; background: var(--grad); box-shadow: 0 14px 26px -10px rgb(from var(--acc) r g b / .65), inset 0 1px 1px rgba(255, 255, 255, .35); }
[data-stil="lys"] .pd-bar.nu > span { color: var(--acc-txt); font-weight: 800; }

/* ---------- 15. Områdegraf ---------- */
.pd-area { position: relative; flex: 1; min-height: 0; margin: .6rem calc(var(--pad-x) * -1) calc(var(--pad-y) * -1); }
.pd-area svg { position: absolute; inset: 0; overflow: visible; }
.pd-area .g-top { stop-color: var(--k); stop-opacity: .36; }
.pd-area .g-mid { stop-color: var(--acc-2-txt); stop-opacity: .1; }
.pd-area .g-bot { stop-color: var(--acc-2-txt); stop-opacity: 0; }
.pd-area .l-0 { stop-color: var(--acc-2-txt); }
.pd-area .l-1 { stop-color: color-mix(in oklch, var(--acc-2-txt), var(--k)); }
.pd-area .l-2 { stop-color: var(--k); }
.pd-area .dot { fill: var(--k); }
.pd-area .dot-c { fill: #fff; stroke: var(--k); stroke-width: 2.6; filter: drop-shadow(0 0 8px var(--k)); }
.pd-area .guide { stroke: var(--ink-4); stroke-linecap: round; }
.pd-area .hdot { fill: #fff; stroke: var(--acc-2-txt); stroke-width: 2.2; }
.pd-ax { font-size: 1.12rem; font-weight: 500; fill: var(--ink-3); font-family: var(--font); }
.pd-ax.nu { fill: var(--k); font-weight: 700; }
.pd-tip { position: absolute; z-index: 3; pointer-events: none; padding: .9rem 1.3rem; border-radius: var(--r-in); font-size: 1.18rem; font-weight: 500; white-space: nowrap;
  background: var(--pop-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 34px -12px rgba(0, 0, 0, .6);
  opacity: 0; transform: translate(-50%, -125%); transition: opacity .3s var(--ease); }
.pd-tip b { display: block; font-size: 1.5rem; font-weight: 700; color: var(--ink); margin: .1rem 0; }
.pd-tip span { display: block; color: var(--ink-3); }
.pd-tip .op { color: var(--ok); } .pd-tip .ned { color: var(--risk); }
.pd-area.hov .pd-tip { opacity: 1; }
[data-stil="grafit"] .pd-area .g-top { stop-color: var(--acc); stop-opacity: .26; }
[data-stil="grafit"] .pd-area .g-mid, [data-stil="grafit"] .pd-area .g-bot { stop-color: var(--acc); }
[data-stil="grafit"] .pd-area .l-0 { stop-color: rgb(from var(--acc) r g b / .5); }
[data-stil="grafit"] .pd-area .l-1, [data-stil="grafit"] .pd-area .l-2 { stop-color: var(--acc); }
[data-stil="grafit"] .pd-area .dot-c { fill: var(--bg); stroke: var(--acc); }
[data-stil="grafit"] .pd-tip { border-radius: 99px; padding: .6rem 1.1rem; }
[data-stil="lys"] .pd-area .g-top { stop-color: var(--acc); stop-opacity: .3; }
[data-stil="lys"] .pd-area .g-mid, [data-stil="lys"] .pd-area .g-bot { stop-color: var(--acc-2); }
[data-stil="lys"] .pd-area .l-0 { stop-color: rgb(from var(--acc) r g b / .55); }
[data-stil="lys"] .pd-area .l-1 { stop-color: var(--acc-txt); }
[data-stil="lys"] .pd-area .l-2 { stop-color: var(--acc-2-txt); }
[data-stil="lys"] .pd-area .dot { fill: var(--acc); }
[data-stil="lys"] .pd-area .dot-c { stroke: var(--acc-txt); filter: drop-shadow(0 4px 8px rgb(from var(--acc) r g b / .5)); }
[data-stil="lys"] .pd-tip { box-shadow: 0 14px 30px -12px rgb(from var(--acc-txt) r g b / .38); }

/* ---------- 16. Puls-række (pipeline som hjerteslag) ---------- */
.pd-puls { position: relative; flex: 1; min-width: 0; min-height: 0; }
.pd-puls-st { position: absolute; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.pd-puls-st.top { top: -.2rem; }
.pd-puls-st.top b { display: block; font-size: 2.8rem; font-weight: calc(var(--big-w) + 100); letter-spacing: -.04em; line-height: 1.05;
  transition: color 1s var(--ease), text-shadow 1s var(--ease), transform 1s var(--ease); }
.pd-puls-st.top.slag b { color: var(--c); text-shadow: 0 0 22px var(--c); transform: scale(1.07); transition-duration: .12s; }
.pd-puls-st.top span { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.18rem; font-weight: 600; color: var(--ink-3); margin-top: .15rem; }
.pd-puls-st.bund { bottom: -.2rem; }
.pd-puls-st.bund b { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.3rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pd-puls-st.bund.warn b { color: var(--warn); }
.pd-puls-st.bund.warn b::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.pd-puls-st .pd-chip { height: 2.1rem; padding: 0 .7rem; font-size: 1rem; }
[data-stil="grafit"] .pd-puls-st.top b { font-weight: 600; }
[data-stil="lys"] .pd-puls-st.top b { font-weight: 800; color: var(--ink); }
[data-stil="lys"] .pd-puls-st.top.slag b { text-shadow: 0 4px 18px rgb(from var(--c) r g b / .35); }
[data-stil="lys"] .pd-puls-st.bund b { font-weight: 800; color: var(--ink); }
[data-stil="lys"] .php-svg > path:first-of-type { stroke-width: 2px; }
[data-stil="lys"] .php-svg circle[fill="#fff"] { fill: var(--acc-txt); }
.pd-puls-kort { flex-direction: row; gap: 1rem; }
.pd-puls-l { display: flex; flex-direction: column; align-items: flex-start; width: 17rem; flex: none; }
.pd-puls-l h2 { margin-top: 1.4rem; font-size: var(--fs-h2); font-weight: var(--w-h2); letter-spacing: -.01em; }
.pd-puls-l .pd-tekst { margin-top: .4rem; }
.pd-puls-l .pd-link { margin-top: auto; }
[data-stil="grafit"] .pd-puls-kort { flex-direction: column; }
[data-stil="grafit"] .pd-puls-l { flex-direction: row; align-items: center; gap: 1rem; width: auto; }
[data-stil="grafit"] .pd-puls-l h2 { margin: 0; }
[data-stil="grafit"] .pd-puls-l .pd-tekst { margin: 0; }
[data-stil="grafit"] .pd-puls-l .pd-link { margin: 0 0 0 auto; }
[data-stil="grafit"] .pd-puls-l .pd-ico { display: none; }
[data-stil="lys"] .pd-puls-kort.pd-fri { flex-direction: column; }
[data-stil="lys"] .pd-puls-kort.pd-fri .pd-puls-l { flex-direction: row; align-items: center; gap: 1rem; width: auto; }
[data-stil="lys"] .pd-puls-kort.pd-fri .pd-puls-l h2 { margin: 0; color: var(--ink); }
[data-stil="lys"] .pd-puls-kort.pd-fri .pd-puls-l .pd-tekst { margin: 0; }
[data-stil="lys"] .pd-puls-kort.pd-fri .pd-puls-l .pd-tekst::before { content: "·"; margin-right: .6rem; color: var(--ink-4); }
[data-stil="lys"] .pd-puls-kort.pd-fri .pd-puls-l .pd-link { margin: 0 0 0 auto; }
[data-stil="lys"] .pd-puls-kort.pd-fri .pd-ico { background: rgba(255, 255, 255, .8); box-shadow: 0 8px 18px -10px rgb(from var(--acc-txt) r g b / .4); }

/* ---------- 17. Toasts ---------- */
.pd-toasts { position: absolute; z-index: 40; top: 1.2rem; right: 1.6rem; display: flex; flex-direction: column; gap: 1rem; pointer-events: none; }
.pd-toast { --k: var(--acc-2-txt); display: flex; align-items: center; gap: 1.3rem; width: 42rem; padding: 1.3rem 1.6rem 1.3rem 1.3rem; border-radius: 24px; pointer-events: auto;
  background: var(--pop-bg); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  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(from var(--k) r g b / .75); animation: pdToastIn .55s var(--ease) backwards; }
.pd-toast.ud { transition: opacity .45s var(--ease), transform .45s var(--ease); opacity: 0; transform: translateY(-1.6rem) scale(.98); }
@keyframes pdToastIn { from { opacity: 0; transform: translateY(-2rem) scale(.97); } }
.pd-toast .ti { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; flex: none; color: #fff;
  background: linear-gradient(135deg, var(--k), var(--acc-2)); box-shadow: 0 0 22px -4px rgb(from var(--k) r g b / .9); }
.pd-toast .ti .pd-i { width: 2rem; height: 2rem; }
.pd-toast .tt { min-width: 0; flex: 1; }
.pd-toast .tt b { display: block; font-size: 1.34rem; font-weight: 700; }
.pd-toast .tt span { display: block; font-size: 1.2rem; font-weight: 500; color: var(--ink-3); }
.pd-toast time { align-self: flex-start; font-size: 1.06rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.pd-toast .pd-btn { flex: none; }
[data-stil="grafit"] .pd-toast { border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 26px 50px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgb(from var(--acc) r g b / .14); }
[data-stil="grafit"] .pd-toast .ti { color: var(--acc-ink); background: var(--acc); box-shadow: 0 0 22px -4px rgb(from var(--acc) r g b / .8); }
[data-stil="lys"] .pd-toasts { top: auto; right: auto; left: 50%; bottom: 2.8rem; transform: translateX(-50%); align-items: center; }
[data-stil="lys"] .pd-toast { width: auto; max-width: 56rem; padding: .9rem 1.2rem .9rem .9rem; border-radius: 99px; color: #fff; background: rgb(from var(--ink) r g b / .9); box-shadow: 0 18px 40px -16px rgb(from var(--ink) r g b / .6); }
[data-stil="lys"] .pd-toast .ti { width: 3.2rem; height: 3.2rem; background: rgba(255, 255, 255, .16); box-shadow: none; color: #fff; }
[data-stil="lys"] .pd-toast .ti .pd-i { width: 1.6rem; height: 1.6rem; }
[data-stil="lys"] .pd-toast .tt b { font-size: 1.28rem; }
[data-stil="lys"] .pd-toast .tt span, [data-stil="lys"] .pd-toast time { color: rgba(255, 255, 255, .7); }
[data-stil="lys"] .pd-toast.ud { transform: translateY(1.2rem) scale(.98); }

/* ---------- 18. Palette (⌘K), skuffe og modal ---------- */
.pd-scrim { position: absolute; inset: 0; z-index: 50; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.pd-scrim.on { opacity: 1; pointer-events: auto; }
.pd-pal { position: absolute; inset: 0; z-index: 60; display: grid; justify-items: center; align-items: start; padding-top: 14%; pointer-events: none; }
.pd-pal-box { width: 58rem; max-width: 92%; padding: 1.2rem; border-radius: 28px; background: var(--pop-bg); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 90px -30px rgba(0, 0, 0, .8); opacity: 0; transform: translateY(-1rem) scale(.98); transition: transform .45s var(--ease), opacity .35s var(--ease); }
.pd-pal.open { pointer-events: auto; }
.pd-pal.open .pd-pal-box { opacity: 1; transform: none; }
.pd-pal-in { display: flex; align-items: center; gap: 1rem; height: 5.4rem; padding: 0 1.2rem 0 1.8rem; border-radius: 99px; background: var(--surf); }
.pd-pal-in .pd-i { color: var(--acc-txt); }
.pd-pal-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 1.6rem; font-weight: 500; color: var(--ink); }
.pd-pal-in input::placeholder { color: var(--ink-3); }
.pd-pal-list { margin-top: .8rem; max-height: 42rem; overflow: auto; scrollbar-width: none; }
.pd-pal-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; padding: .8rem 1.6rem .8rem .8rem; border-radius: 99px; cursor: pointer; transition: background .3s var(--ease); }
.pd-pal-list li.sel, .pd-pal-list li:hover, .pd-pal-list li[data-ph-hover] { background: var(--acc-soft); }
.pd-pal-list li b { display: block; font-weight: 700; font-size: 1.34rem; }
.pd-pal-list li small { display: block; font-size: 1.12rem; font-weight: 500; color: var(--ink-3); }
.pd-pal-list li .h { font-size: 1.28rem; font-weight: 600; color: var(--ink-2); text-align: right; white-space: nowrap; }
.pd-pal-list li .h small { text-align: right; }
.pd-pal-tom { display: block !important; padding: 2rem; text-align: center; color: var(--ink-3); cursor: default !important; }
.pd-pal-fod { display: flex; gap: 1.6rem; padding: 1.1rem 1.6rem .4rem; font-size: 1.1rem; font-weight: 500; color: var(--ink-3); }
.pd-pal-fod kbd { min-width: 2rem; height: 2rem; padding: 0 .6rem; font-size: 1rem; }

.pd-drawer { position: absolute; z-index: 55; top: var(--gap); right: var(--gap); bottom: var(--gap); width: 48rem; max-width: calc(100% - 2 * var(--gap)); display: flex; flex-direction: column;
  border-radius: 30px; background: var(--pop-bg); -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), -30px 0 90px -40px rgba(0, 0, 0, .8); transform: translateX(calc(100% + 4rem)); transition: transform .6s var(--ease); }
.pd-drawer.open { transform: none; }
.pd-drawer-h { display: flex; align-items: center; gap: 1.2rem; padding: 2.4rem 2.4rem 1.2rem 2.8rem; flex: none; }
.pd-drawer-h h2 { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.pd-drawer-h .pd-btn { margin-left: auto; }
.pd-drawer-b { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: .4rem 2.8rem 2.8rem; display: flex; flex-direction: column; gap: 2rem; }
.pd-drawer-b::-webkit-scrollbar { display: none; }
.pd-drawer-f { display: flex; gap: 1rem; padding: 1.6rem 2.8rem 2.4rem; flex: none; }
.pd-drawer-f .pd-btn { flex: 1; }
.pd-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pd-kv > div { padding: 1.2rem 1.4rem; border-radius: var(--r-in); background: var(--surf); }
.pd-kv span { display: block; font-size: 1.08rem; font-weight: 600; color: var(--ink-3); }
.pd-kv b { display: block; margin-top: .3rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-sek h3 { font-size: 1.2rem; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; margin-bottom: 1rem; }
.pd-fase { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.pd-fase i { height: .7rem; border-radius: 99px; background: var(--surf-2); }
.pd-fase i.on { background: var(--acc); box-shadow: 0 0 12px rgb(from var(--acc) r g b / .5); }
.pd-fase-l { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-top: .6rem; font-size: 1.02rem; font-weight: 600; color: var(--ink-3); }
.pd-fase-l span.on { color: var(--ink); }

.pd-modal { position: absolute; z-index: 56; left: 50%; top: 50%; width: 56rem; max-width: 92%; max-height: 90%; display: flex; flex-direction: column; border-radius: 30px;
  background: var(--pop-bg); -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 50px 100px -40px rgba(0, 0, 0, .85);
  opacity: 0; pointer-events: none; transform: translate(-50%, -46%) scale(.97); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.pd-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.pd-modal .pd-drawer-b { gap: 1.4rem; }
[data-stil="grafit"] .pd-drawer, [data-stil="grafit"] .pd-modal, [data-stil="grafit"] .pd-pal-box { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 90px -30px rgba(0, 0, 0, .95); }
[data-stil="lys"] .pd-drawer, [data-stil="lys"] .pd-modal, [data-stil="lys"] .pd-pal-box { box-shadow: 0 40px 90px -30px rgb(from var(--acc-txt) r g b / .4); }
[data-stil="lys"] .pd-pal-in, [data-stil="lys"] .pd-kv > div { background: var(--tint); }

/* ---------- 19. Tom tilstand ---------- */
.pd-empty { display: grid; justify-items: center; align-content: center; gap: .8rem; flex: 1; min-height: 0; padding: 2rem; text-align: center; }
.pd-empty .eo { display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; color: var(--ok); background: var(--ok-soft); margin-bottom: .6rem; }
.pd-empty .eo .pd-i { width: 2.4rem; height: 2.4rem; }
.pd-empty b { font-size: 1.6rem; font-weight: 700; }
.pd-empty span { max-width: 30rem; font-size: 1.24rem; font-weight: 500; color: var(--ink-3); }

/* ---------- 20. CRM-mønstre: kanban, liste, uge, beskeder ---------- */
.pd-kanban { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: var(--gap); min-height: 0; }
.pd-lane { padding: 2rem 1.2rem 1.2rem; }
.pd-lane-h { padding: 0 .8rem; flex: none; }
.pd-lane-h .t { display: flex; align-items: center; gap: .8rem; font-size: 1.3rem; font-weight: 700; color: var(--ink-2); }
.pd-lane-h .t .pd-chip { margin-left: auto; }
.pd-lane-h .v { display: block; margin-top: .8rem; font-size: 2.4rem; font-weight: calc(var(--big-w) + 100); letter-spacing: -.04em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-lane-h .v small { font-size: .5em; font-weight: 500; letter-spacing: 0; color: var(--ink-3); margin-left: .3em; }
.pd-lane-list { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.4rem; flex: 1; min-height: 0; padding: .2rem .2rem 1rem; }
.pd-deal { position: relative; display: block; width: 100%; padding: 1.2rem 1.3rem; border: 0; border-radius: var(--r-in); text-align: left; cursor: pointer; background: var(--surf); box-shadow: var(--lift);
  transition: background .4s var(--ease), transform .45s var(--ease), box-shadow .4s var(--ease), opacity .45s var(--ease); }
.pd-deal:hover, .pd-deal[data-ph-hover] { background: var(--surf-2); transform: translateY(-2px); }
.pd-deal b { display: block; font-size: 1.28rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-deal small { display: block; margin-top: .2rem; font-size: 1.1rem; font-weight: 500; line-height: 1.35; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-deal .bund { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; }
.pd-deal .bund .kr { font-size: 1.3rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-deal .bund .pd-chip { height: 2.2rem; padding: 0 .8rem; font-size: 1rem; }
.pd-deal .bund .pd-av { margin-left: auto; }
.pd-deal.ind { animation: pdRowIn .6s var(--ease) backwards; }
.pd-deal.ud { opacity: 0; transform: translateX(2rem); }
.pd-deal.ny { box-shadow: var(--lift), 0 0 0 2px rgb(from var(--acc) r g b / .6), 0 0 26px -6px var(--glow); }
[data-stil="grafit"] .pd-deal { background: rgba(255, 255, 255, .035); box-shadow: none; }
[data-stil="grafit"] .pd-deal:hover, [data-stil="grafit"] .pd-deal[data-ph-hover] { background: rgba(255, 255, 255, .06); }
[data-stil="lys"] .pd-deal { background: #fff; }
[data-stil="lys"] .pd-lane { background: rgba(255, 255, 255, .55); }

.pd-liste { display: flex; flex-direction: column; gap: .6rem; flex: 1; min-height: 0; margin-top: 1.4rem; padding: .2rem .2rem 1rem; }
.pd-lrow { display: grid; grid-template-columns: auto minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 1.4rem; width: 100%;
  padding: .7rem 1.6rem .7rem .7rem; border: 0; border-radius: 99px; background: var(--surf); box-shadow: var(--lift); text-align: left; cursor: pointer; transition: background .4s var(--ease), transform .4s var(--ease); }
.pd-lrow:hover, .pd-lrow[data-ph-hover] { background: var(--surf-2); }
.pd-lrow .c { min-width: 0; font-size: 1.26rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-lrow .c.kr { font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.pd-lhead { display: grid; grid-template-columns: 3.4rem minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) 2.8rem; gap: 1.4rem; padding: 0 1.6rem 0 .7rem; margin-top: 1.6rem; font-size: 1.06rem; font-weight: 700; color: var(--ink-3); }
.pd-lhead .kr { text-align: right; }
[data-stil="grafit"] .pd-lrow { border-radius: var(--r-in); background: rgba(255, 255, 255, .035); box-shadow: none; }
[data-stil="lys"] .pd-lrow { background: rgba(255, 255, 255, .7); }
[data-stil="lys"] .pd-lrow:hover, [data-stil="lys"] .pd-lrow[data-ph-hover] { background: #fff; }

.pd-uge { position: relative; display: grid; grid-template-columns: 5.6rem repeat(5, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); column-gap: .8rem; flex: 1; min-height: 0; margin-top: 1.6rem; }
.pd-uge-d { padding: .2rem 0 1.2rem 1rem; }
.pd-uge-d b { display: block; font-size: 1.3rem; font-weight: 700; }
.pd-uge-d span { display: block; font-size: 1.12rem; font-weight: 500; color: var(--ink-3); }
.pd-uge-d.i-dag b { color: var(--acc-txt); }
.pd-uge-t { position: relative; }
.pd-uge-t span { position: absolute; right: .6rem; transform: translateY(-50%); font-size: 1.06rem; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pd-uge-k { position: relative; border-radius: 20px; background: var(--surf); }
.pd-uge-k.i-dag { background: rgb(from var(--acc) r g b / .07); box-shadow: inset 0 0 0 1px rgb(from var(--acc) r g b / .12); }
.pd-evt { position: absolute; left: .5rem; right: .5rem; display: flex; flex-direction: column; justify-content: flex-start; gap: .2rem; padding: .8rem 1rem; overflow: hidden; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
  color: var(--ink); background: rgb(from var(--ec, var(--acc)) r g b / .16); box-shadow: inset 3px 0 0 var(--ec, var(--acc)); transition: background .4s var(--ease), transform .4s var(--ease); }
.pd-evt:hover, .pd-evt[data-ph-hover] { background: rgb(from var(--ec, var(--acc)) r g b / .26); transform: translateY(-1px); }
.pd-evt b { font-size: 1.16rem; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-evt span { font-size: 1.04rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-evt.slut { opacity: .5; }
.pd-evt.kort { flex-direction: row; align-items: center; gap: .6rem; padding: .2rem 1rem; }
.pd-evt.kort span { flex: none; }
.pd-evt.ind { animation: pdRowIn .6s var(--ease) backwards; }
.pd-uge-nu { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--risk); box-shadow: 0 0 10px var(--risk); z-index: 2; pointer-events: none; }
.pd-uge-nu::before { content: ""; position: absolute; left: -.4rem; top: -.4rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--risk); }
[data-stil="lys"] .pd-uge-k { background: rgba(255, 255, 255, .55); }
[data-stil="lys"] .pd-evt { background: rgb(from var(--ec, var(--acc)) r g b / .12); }
[data-stil="grafit"] .pd-uge-k { background: rgba(255, 255, 255, .025); }

.pd-traade { display: flex; flex-direction: column; gap: .6rem; flex: 1; min-height: 0; margin-top: 1.4rem; padding: .2rem .2rem 1rem; }
.pd-traad { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.1rem; width: 100%; padding: 1rem 1.2rem 1rem .9rem; border: 0; border-radius: 20px; background: none; text-align: left; cursor: pointer; transition: background .4s var(--ease); }
.pd-traad:hover, .pd-traad[data-ph-hover] { background: var(--surf); }
.pd-traad.on { background: var(--surf-2); box-shadow: var(--lift); }
.pd-traad b { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-traad small { display: block; font-size: 1.12rem; font-weight: 500; color: var(--ink-3); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-traad time { align-self: start; font-size: 1.04rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.pd-traad.ulaest b::after { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-left: .6rem; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); vertical-align: .15em; }
.pd-samtale { display: flex; flex-direction: column; gap: 1.2rem; flex: 1; min-height: 0; margin-top: 1.6rem; padding: .4rem .4rem 1rem; }
.pd-msg { max-width: 76%; padding: 1.2rem 1.6rem; border-radius: 20px 20px 20px 6px; font-size: 1.3rem; font-weight: 500; line-height: 1.55; color: var(--ink-2); background: var(--surf-2); }
.pd-msg.ud { align-self: flex-end; border-radius: 20px 20px 6px 20px; color: var(--ink); background: rgb(from var(--acc) r g b / .16); }
.pd-msg time { display: block; margin-top: .4rem; font-size: 1.02rem; font-weight: 600; color: var(--ink-3); }
.pd-msg.ind { animation: pdRowIn .5s var(--ease) backwards; }
.pd-forslag { display: flex; align-items: flex-start; gap: 1.2rem; padding: 1.2rem 1.4rem; border-radius: 20px; background: linear-gradient(180deg, rgb(from var(--acc-2) r g b / .14), rgb(from var(--acc-2) r g b / .06)); flex: none; }
.pd-forslag .ft { min-width: 0; flex: 1; font-size: 1.24rem; font-weight: 500; line-height: 1.5; color: var(--ink-2); }
.pd-forslag .ft b { display: flex; align-items: center; gap: .5rem; font-size: 1.12rem; font-weight: 700; color: var(--acc-2-txt); margin-bottom: .3rem; }
.pd-skriv { display: flex; align-items: flex-end; gap: 1rem; margin-top: 1.2rem; flex: none; }
.pd-skriv .pd-input { flex: 1; height: auto; min-height: 4.6rem; padding: 1.2rem 1.6rem; border-radius: 24px; }
.pd-skriv textarea { resize: none; height: 2.2rem; line-height: 1.5; font-size: 1.3rem; }
[data-stil="lys"] .pd-msg { background: var(--tint); }
[data-stil="lys"] .pd-msg.ud { background: var(--acc-soft); }
[data-stil="lys"] .pd-traad.on { background: #fff; }
[data-stil="grafit"] .pd-forslag { background: linear-gradient(180deg, rgb(from var(--acc) r g b / .075), rgb(from var(--acc) r g b / .03)); }
[data-stil="grafit"] .pd-forslag .ft b { color: var(--acc-txt); }

/* ---------- 21. Stilvælger ---------- */
.pd-vaelger { position: absolute; z-index: 45; right: 2rem; bottom: 2rem; display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; pointer-events: none; }
.pd-vaelger > * { pointer-events: auto; }
.pd-vaelger.ved-skinne { right: auto; left: calc(var(--gap) + var(--rail-w) + 1.2rem); bottom: var(--gap); align-items: flex-start; }
.pd-vaelger.ved-skinne .pd-vaelger-p { transform-origin: 0 100%; }
.pd-vaelger-knap { display: inline-flex; align-items: center; gap: .8rem; height: 4rem; padding: 0 1.5rem 0 .6rem; border: 0; border-radius: 99px; cursor: pointer; font-size: 1.2rem; font-weight: 700; color: var(--ink-2);
  background: var(--pop-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 16px 36px -14px rgba(0, 0, 0, .6); opacity: .82; transition: opacity .3s var(--ease), transform .4s var(--ease); }
.pd-vaelger-knap:hover, .pd-vaelger-knap[data-ph-hover], .pd-vaelger.open .pd-vaelger-knap { opacity: 1; }
.pd-vaelger-knap .sw { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: conic-gradient(from 210deg, var(--acc), var(--acc-2), var(--acc)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.pd-vaelger-p { width: 36rem; padding: 1.8rem; border-radius: 28px; background: var(--pop-bg); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 90px -30px rgba(0, 0, 0, .8); display: flex; flex-direction: column; gap: 1.6rem;
  opacity: 0; pointer-events: none; transform: translateY(1rem) scale(.98); transform-origin: 100% 100%; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.pd-vaelger.open .pd-vaelger-p { opacity: 1; pointer-events: auto; transform: none; }
.pd-vaelger-p h3 { font-size: 1.1rem; font-weight: 700; color: var(--ink-3); margin-bottom: .8rem; letter-spacing: .02em; }
.pd-vaelger-p .pd-seg { width: 100%; box-shadow: none; }
.pd-vaelger-p .pd-seg button { flex: 1; }
.pd-swatches { display: flex; flex-wrap: wrap; gap: .8rem; }
.pd-sw { position: relative; width: 3.2rem; height: 3.2rem; border: 0; border-radius: 50%; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 4px 10px -4px rgba(0, 0, 0, .5); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pd-sw:hover, .pd-sw[data-ph-hover] { transform: scale(1.1); }
.pd-sw.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink-2); }
.pd-sw.std { background: conic-gradient(var(--c) 0 50%, var(--c2) 50% 100%); }
.pd-sw.egen { display: grid; place-items: center; overflow: hidden; color: var(--ink-2); background: var(--surf-2); }
.pd-sw.egen input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.pd-vaelger-p .pd-btn { width: 100%; }
[data-stil="lys"] .pd-vaelger-knap { color: var(--ink-2); background: rgba(255, 255, 255, .85); box-shadow: 0 16px 36px -16px rgb(from var(--acc-txt) r g b / .5); }
[data-stil="lys"] .pd-vaelger-p .pd-seg { background: var(--tint); }
[data-stil="lys"] .pd-sw.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink-2); }

/* ---------- 22. Indlæsning og bevægelse ---------- */
#app.pd-pre .pd-card, #app.pd-pre .pd-rail, #app.pd-pre .pd-top { opacity: 0; }
.pd-card.pd-in { animation: pdCardIn .55s var(--ease) backwards; animation-delay: var(--pd-delay, 0s); }
.pd-rail.pd-in, .pd-top.pd-in { animation: pdFadeIn .5s var(--ease) backwards; }
@keyframes pdCardIn { from { opacity: 0; transform: translateY(1.6rem) scale(.985); } }
@keyframes pdFadeIn { from { opacity: 0; transform: translateY(-.6rem); } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }

@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after { animation: none !important; transition: none !important; }
  #app.pd-pre .pd-card, #app.pd-pre .pd-rail, #app.pd-pre .pd-top { opacity: 1; }
}

/* ---------- 23. Smal skærm (eneste breakpoint) ---------- */
@media (max-width: 760px) {
  #app { overflow: auto; }
  .pd-skal { grid-template-columns: 1fr; height: auto; min-height: 100%; }
  .pd-rail { flex-direction: row; overflow-x: auto; padding: .8rem !important; gap: .8rem !important; }
  .pd-nav { flex-direction: row; }
  .pd-rail-fod { margin: 0; width: auto; }
  .pd-mark { display: none; }
  .pd-top { flex-wrap: wrap; }
  .pd-top-r { width: 100%; flex-wrap: wrap; margin: 0; }
  .pd-search { width: auto; flex: 1; }
  .pd-hello h1 { white-space: normal; }
  .pd-views { min-height: 0; }
  .pd-view { position: static; }
  .pd-bento, .pd-kanban, #app .pd-grid { grid-template-columns: 1fr !important; grid-template-rows: none !important; grid-template-areas: none !important; height: auto; }
  .pd-bento > .pd-card, .pd-grid > .pd-card { grid-area: auto !important; min-height: 28rem; }
  .pd-drawer { width: auto; left: var(--gap); }
}