/* =====================================================================
   Platformhuset Dashboard · kit/ph-dash.css
   Ét stylesheet, seks stilarter i to familier. Stilen vælges på #app (PHDash.stil sætter begge attributter):
     Moderne
     <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
     Klassisk (afsnit 24; kræver også data-familie="klassisk")
     <div id="app" data-stil="papir" data-familie="klassisk">         Papir (reference cases/06)
     <div id="app" data-stil="nordisk" data-familie="klassisk">       Nordisk (reference cases/07)
     <div id="app" data-stil="marine" data-familie="klassisk">        Marine (reference cases/08)
   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%; }
.pd-mere { display: none !important; } /* "Mere" i mobilens fanebar; vises kun af Klassisk på smal skærm (afsnit 24) */

[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; }
/* Ark fra bunden (PHDash.ark): bruges af "Mere" i mobilens fanebar */
.pd-ark { position: absolute; z-index: 56; left: 0; right: 0; bottom: 0; max-height: 82%; display: flex; flex-direction: column; border-radius: 24px 24px 0 0;
  background: var(--pop-bg); box-shadow: 0 -24px 60px -24px rgba(0, 0, 0, .55); transform: translateY(calc(100% + 2rem)); transition: transform .5s var(--ease); }
.pd-ark.open { transform: none; }
.pd-ark .pd-drawer-h { padding: 2rem 1.6rem 1rem 2.2rem; }
.pd-ark .pd-drawer-h h2 { font-size: 1.8rem; }
.pd-ark .pd-drawer-b { padding: .2rem 1.2rem 2.4rem; gap: 0; }
.pd-ark-l { display: flex; flex-direction: column; gap: .2rem; }
.pd-ark-i { display: flex; align-items: center; gap: 1.2rem; width: 100%; min-height: 5.2rem; padding: 0 1.4rem; border: 0; border-radius: var(--r-in); background: none; cursor: pointer;
  font-size: 1.5rem; font-weight: 500; color: var(--ink); text-align: left; transition: background .3s var(--ease); }
.pd-ark-i .pd-i { width: 2rem; height: 2rem; color: var(--ink-3); }
.pd-ark-i:hover, .pd-ark-i[data-ph-hover], .pd-ark-i[aria-current="page"] { background: var(--surf); }
.pd-ark-i .pd-badge { position: static; margin-left: auto; color: var(--acc-ink); background: var(--acc); }
[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; }
/* Stil i to grupper: Moderne og Klassisk */
.pd-stilgrp { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); align-items: center; gap: .8rem; }
.pd-stilgrp + .pd-stilgrp { margin-top: .6rem; }
.pd-stilgrp > span { font-size: 1.12rem; font-weight: 600; color: var(--ink-3); }
.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); }
}

/* =====================================================================
   24. Klassisk-familien: Papir, Nordisk og Marine
   Ro og præcision (PLAYBOOK 3b v2.1). Referencer: cases/06 (Papir), 07 (Nordisk) og 08 (Marine).
   Én grotesk til alt, også tal (tabulære og lining; Nordisk proportionale, se 24b). Serif kun i ordmærket (Papir). Sentence case, ingen versaler,
   ingen spatiering på småt, ingen streg under titlen, ingen glas, blur eller glød. Farve kun på status og handling.
   Alt her er låst bag data-familie="klassisk", som PHDash.stil sætter. En case, der selv skriver
   data-stil="papir" på #app uden at kalde PHDash.stil (fx 13), rammes derfor ikke.
   ===================================================================== */

/* ---------- 24a. Fælles tokens ---------- */
#app[data-familie="klassisk"] {
  --acc-2: var(--acc); --acc-2-txt: var(--acc-txt);
  --glow: rgb(from var(--acc) r g b / .4);
  --ok-soft: rgb(from var(--ok) r g b / .11); --warn-soft: rgb(from var(--warn) r g b / .12); --risk-soft: rgb(from var(--risk) r g b / .1);
  --fase-1: var(--acc); --fase-2: var(--acc); --fase-3: var(--warn); --fase-4: var(--acc); --fase-5: var(--ok);
  --card-bg: var(--card); --card-sh: var(--sh); --pop-bg: var(--card);
  --surf: var(--sunk-2); --surf-2: var(--sunk); --surf-3: var(--sunk-3);
  --lift: none;
  --node: var(--ghost); --node-ring: var(--card);
  --gap: 2rem; --pad-y: 2.2rem; --pad-x: 2.4rem; --rail-w: 23rem;
  --fs-body: 1.4rem; --fs-h1: 2.6rem; --fs-h2: 1.7rem; --w-h2: 600; --fs-meta: 1.32rem; --fs-small: 1.2rem;
  --big-w: 500; --big-ls: -.025em; --big-scale: .94;
  --lift-y: -2px;
  font-variant-numeric: tabular-nums lining-nums;
}
/* Lys bund (Papir, Nordisk): fladen holdes under L 0,6, så knapper og søjler står tydeligt på papir og hvidt.
   Tekstvarianten holdes under L 0,47 og giver mindst 4,5:1 på kort, bund og de bløde flader. Tekst på fladen er
   sort eller hvid ud fra luminansen (afsnit 1), så den også holder 4,5:1. */
#app[data-familie="klassisk"]:is([data-stil="papir"], [data-stil="nordisk"]) {
  --acc: oklch(from var(--brand) min(l, .6) c h);
  --acc-txt: oklch(from var(--brand) min(l, .47) c h);
  --acc-soft: color-mix(in oklch, var(--acc) 10%, var(--card));
  --tip-bg: var(--ink); --tip-ink: #fff; --tip-ok: #9ADBB8; --tip-risk: #FFB3A3;
  --scrim: rgba(30, 36, 48, .26);
  --kbd-bg: rgb(from var(--ink) r g b / .07);
}

/* Papir (06 Brask & Holm): varm lys bund, papirkort, skovgrøn og okker. IBM Plex Sans; Source Serif 4 kun i ordmærket. */
#app[data-familie="klassisk"][data-stil="papir"] {
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-maerke: 'Source Serif 4', Georgia, serif; --maerke-w: 600; --maerke-fs: 1.85rem;
  --bg: #F4EFE6; --side: #ECE5D8; --side-sh: inset -1px 0 0 rgba(70, 52, 30, .06);
  --card: #FFFDF8; --sunk: #F1EBE0; --sunk-2: #F8F4EC; --sunk-3: #E9E1D3; --ghost: #E9E2D6; --ghost-h: #DED5C6;
  --ink: #1E2430; --ink-2: #4A5160; --ink-3: #5D6471; --ink-4: #A4A7AE;
  --line: rgba(70, 52, 30, .1); --line-2: rgba(70, 52, 30, .16);
  --ok: #2A6F4D; --warn: #8A6220; --risk: #9A2F2F; --warn-ink: #fff;
  --sh: 0 1px 2px rgba(60, 40, 20, .05), 0 14px 34px -18px rgba(60, 40, 20, .2);
  --sh-h: 0 2px 4px rgba(60, 40, 20, .06), 0 22px 44px -20px rgba(60, 40, 20, .28);
  --sh-s: 0 1px 2px rgba(60, 40, 20, .06), 0 6px 16px -10px rgba(60, 40, 20, .22);
  --sh-pop: 0 2px 6px rgba(60, 40, 20, .08), 0 34px 80px -28px rgba(60, 40, 20, .42);
  --r-card: 20px; --r-in: 14px; --r-nav: 99px;
  --nav-h: rgba(255, 253, 248, .6); --nav-on: var(--card); --nav-on-ink: var(--ink); --nav-on-sh: var(--sh-s);
  --badge-bg: rgb(from var(--ink) r g b / .08); --badge-ink: var(--ink-2);
  --btn: var(--sunk); --btn-h: var(--sunk-3);
  --seg: var(--sunk); --seg-on: var(--ink); --seg-on-ink: #FBF8F1; --seg-on-sh: none;
  --av: #E3DACB; --av-ink: var(--ink);
  --draft: var(--sunk-2); --draft-h: var(--sunk); --bubble: var(--card); --deal: var(--sunk-2); --deal-h: var(--sunk);
  --row-h: var(--sunk-2); --track: #DCD3C4;
  --tabbar: var(--card);
}

/* Nordisk (07 Toft & Korn): kølig lys bund, hvide kort, fjordblå og rug. Schibsted Grotesk, vægt højst 700. */
#app[data-familie="klassisk"][data-stil="nordisk"] {
  --font: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --maerke-w: 700; --maerke-fs: 1.95rem; --h1-ls: -.02em;
  --bg: #F3F5F7; --side: #FFFFFF; --side-sh: 14px 0 34px -28px rgba(20, 32, 43, .28);
  --card: #FFFFFF; --sunk: #EDF1F5; --sunk-2: #F4F6F8; --sunk-3: #E3E9EF; --ghost: #E3E8EE; --ghost-h: #D5DCE4;
  --ink: #14202B; --ink-2: #4B5866; --ink-3: #5E6A77; --ink-4: #A1ABB6;
  --line: #E4E9EE; --line-2: #EDF0F3;
  --ok: #1F6B41; --warn: #8C5B16; --risk: #B83A27; --warn-ink: #fff;
  --sh: 0 1px 2px rgba(20, 32, 43, .04), 0 12px 30px -16px rgba(20, 32, 43, .16);
  --sh-h: 0 1px 2px rgba(20, 32, 43, .05), 0 22px 40px -20px rgba(20, 32, 43, .26);
  --sh-s: 0 1px 2px rgba(20, 32, 43, .04), 0 6px 16px -10px rgba(20, 32, 43, .18);
  --sh-pop: 0 2px 6px rgba(20, 32, 43, .06), 0 30px 70px -24px rgba(20, 32, 43, .34);
  --r-card: 18px; --r-in: 12px; --r-nav: 11px;
  --nav-h: #F6F8FA; --nav-on: var(--acc-soft); --nav-on-ink: var(--acc-txt); --nav-on-sh: none;
  --badge-bg: var(--acc); --badge-ink: var(--acc-ink);
  --btn: #EDF1F5; --btn-h: #E3E9EF;
  --seg: #E8ECF0; --seg-on: #FFFFFF; --seg-on-ink: var(--ink); --seg-on-sh: 0 1px 2px rgba(20, 32, 43, .08), 0 3px 8px -3px rgba(20, 32, 43, .14);
  --av: var(--acc-soft); --av-ink: var(--acc-txt);
  --draft: var(--sunk-2); --draft-h: var(--sunk); --bubble: #FFFFFF; --deal: var(--sunk-2); --deal-h: var(--sunk);
  --row-h: #F6F8FA; --track: #D5DCE4;
  --tabbar: #FFFFFF;
}

/* Marine (08 Halvorsen & Lund): dyb marine, flade kort, creme tekst, messing sparsomt. Public Sans til alt.
   Mørk bund: fladen løftes til mindst L 0,62 og tekstvarianten til mindst L 0,78 (4,5:1 på kort og indre flader).
   Kroma holdes under 0,16 og 0,15, så løftede farver bliver i sRGB; ellers klipper skærmen dem, og luminansen
   (og dermed valget af sort eller hvid tekst på knappen) passer ikke. */
#app[data-familie="klassisk"][data-stil="marine"] {
  --font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --maerke-w: 600; --maerke-fs: 1.75rem;
  --acc: oklch(from var(--brand) max(l, .62) min(c, .16) h);
  --acc-txt: oklch(from var(--brand) max(l, .78) min(c, .15) h);
  --acc-soft: color-mix(in oklch, var(--acc) 12%, var(--card));
  --bg: #0C1624; --side: #09121D; --side-sh: 1px 0 0 rgba(0, 0, 0, .28), 10px 0 32px -18px rgba(0, 0, 0, .6);
  --card: #132036; --in: #18283F; --in-2: #1F3250;
  --sunk: var(--in-2); --sunk-2: var(--in); --sunk-3: #27405F; --ghost: #22344F; --ghost-h: #2B4060;
  --ink: #F3EDE1; --ink-2: rgba(243, 237, 225, .78); --ink-3: rgba(243, 237, 225, .62); --ink-4: rgba(243, 237, 225, .3);
  --line: rgba(243, 237, 225, .08); --line-2: rgba(243, 237, 225, .13);
  --ok: #7FBF9A; --warn: #C8A15A; --risk: #E07A6B; --warn-ink: #0C1624;
  --sh: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .28), 0 22px 44px -22px rgba(0, 0, 0, .72);
  --sh-h: inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 4px rgba(0, 0, 0, .3), 0 30px 56px -24px rgba(0, 0, 0, .8);
  --sh-s: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .25);
  --sh-pop: inset 0 1px 0 rgba(255, 255, 255, .05), 0 40px 90px -30px rgba(0, 0, 0, .85);
  --r-card: 20px; --r-in: 14px; --r-nav: 99px;
  --nav-h: rgba(243, 237, 225, .04); --nav-on: rgba(243, 237, 225, .07); --nav-on-ink: var(--ink); --nav-on-sh: none;
  --badge-bg: rgba(243, 237, 225, .08); --badge-ink: var(--ink-2);
  --btn: var(--in-2); --btn-h: var(--sunk-3);
  --seg: var(--bg); --seg-on: var(--in-2); --seg-on-ink: var(--ink); --seg-on-sh: inset 0 1px 0 rgba(255, 255, 255, .05);
  --av: var(--in-2); --av-ink: var(--ink);
  --draft: var(--in); --draft-h: var(--in-2); --bubble: var(--in-2); --deal: var(--in); --deal-h: var(--in-2);
  --row-h: rgba(243, 237, 225, .04); --track: #2B4060;
  --tip-bg: var(--in-2); --tip-ink: var(--ink); --tip-ok: var(--ok); --tip-risk: #F2998B;
  --scrim: rgba(4, 8, 14, .6);
  --kbd-bg: rgba(243, 237, 225, .08);
  --tabbar: var(--side);
}

/* ---------- 24b. Komponenter ---------- */
[data-familie="klassisk"] {
  & .pd-bg { background: var(--bg); }
  & .pd-bg i, & .pd-bg::before, & .pd-bg::after { display: none; }
  & kbd { height: 2.2rem; min-width: 2.2rem; padding: 0 .6rem; font-size: 1.12rem; font-weight: 600; color: var(--ink-3); background: var(--kbd-bg); }

  /* Skal: sidebjælke i fuld højde og indhold med luft som i 06-08 */
  & .pd-skal { gap: 0; padding: 0; }
  & .pd-main { gap: 1.8rem; padding: 2.2rem 2.8rem 2.4rem 3rem; }

  /* Sidebjælke med ordmærke og menupunkter på række */
  & .pd-rail { align-items: stretch; gap: 0; padding: 2.4rem 1.4rem 1.8rem; border-radius: 0; background: var(--side); box-shadow: var(--side-sh); }
  & .pd-mark { position: relative; width: 3.8rem; height: 3.8rem; margin: 0 0 2.6rem .6rem; border-radius: 50%; font-size: 1.3rem; font-weight: 700; letter-spacing: 0;
    color: var(--acc-ink); background: var(--acc); }
  /* Ordmærket er kundens navn (title på .pd-mark, som app'en holder opdateret) */
  & .pd-mark::after { content: attr(title); position: absolute; left: calc(100% + 1.1rem); top: 50%; transform: translateY(-50%); max-width: 15.2rem; overflow: hidden; text-overflow: ellipsis;
    font: var(--maerke-w, 600) var(--maerke-fs, 1.8rem)/1.15 var(--font-maerke, var(--font)); letter-spacing: -.01em; white-space: nowrap; color: var(--ink); }
  & .pd-nav { gap: .3rem; }
  & .pd-nav-i { flex-direction: row; justify-content: flex-start; gap: 1.1rem; height: 4.3rem; padding: 0 1rem 0 1.3rem; border-radius: var(--r-nav);
    font-size: 1.42rem; font-weight: 500; color: var(--ink-2); text-align: left; }
  & .pd-ni { width: auto; height: auto; border-radius: 0; background: none; color: var(--ink-3); transition: color .3s var(--ease); }
  & .pd-nav-i .pd-i { width: 1.9rem; height: 1.9rem; }
  & .pd-nav-i:hover, & .pd-nav-i[data-ph-hover] { color: var(--ink); background: var(--nav-h); }
  & .pd-nav-i[aria-current="page"] { color: var(--nav-on-ink); font-weight: 600; background: var(--nav-on); box-shadow: var(--nav-on-sh); }
  & .pd-nav-i[aria-current="page"] .pd-ni { color: var(--acc-txt); }
  & .pd-rail .pd-badge { position: static; margin-left: auto; min-width: 2.2rem; height: 2.1rem; padding: 0 .65rem; font-size: 1.15rem; font-weight: 600;
    color: var(--badge-ink); background: var(--badge-bg); box-shadow: none; }

  /* Topbjælke: hilsen og én linje */
  & .pd-top { min-height: 0; gap: 1.6rem; padding: 0; }
  & .pd-hello h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: var(--h1-ls, -.01em); line-height: 1.15; }
  & .pd-sub { margin-top: .5rem; font-size: 1.4rem; font-weight: 400; color: var(--ink-3); }
  & .pd-sub b { font-weight: 600; color: var(--ink-2); }
  & .pd-sub .pd-navn-i, & .pd-sub .pd-navn-i + i { display: none; }
  & .pd-search { width: 32rem; height: 4.4rem; padding: 0 .8rem 0 1.6rem; font-size: 1.4rem; font-weight: 400; color: var(--ink-3); background: var(--card); box-shadow: var(--sh-s); }
  & .pd-search .pd-i { color: var(--ink-3); }
  & .pd-search:hover, & .pd-search[data-ph-hover] { color: var(--ink-2); background: var(--card); box-shadow: var(--sh-h); }
  & .pd-demo { height: auto; padding: 0; font-size: 1.3rem; font-weight: 500; color: var(--ink-3); background: none; }
  & .pd-demo::before { background: var(--warn); opacity: 1; }
  & .pd-me { height: 4.4rem; background: var(--card); box-shadow: var(--sh-s); }
  & .pd-me b { font-weight: 600; }
  & .pd-me small { font-weight: 400; }

  /* Kort: flade kort med blød skygge, ingen lyskant */
  & .pd-card:hover, & .pd-card[data-ph-hover] { box-shadow: var(--sh-h); }
  & .pd-card.pd-stille:hover, & .pd-card.pd-stille[data-ph-hover] { box-shadow: var(--card-sh); }
  & .pd-card.pd-ping { animation: pdPingK 1.1s var(--ease); }
  & .pd-ch h2 { letter-spacing: -.005em; }
  & .pd-ico { color: var(--k); background: rgb(from var(--k) r g b / .1); }
  & .pd-meta { font-weight: 400; }

  /* Tal: UI-fonten, vægt 500. Ét heroal over 4 rem pr. visning. */
  & .pd-big { color: var(--ink); }
  & .pd-big .u { font-size: .3em; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
  & .pd-big.m { font-size: 3.8rem; }
  & .pd-big.s { font-size: 3rem; }
  & .pd-big.m .u, & .pd-big.s .u { font-size: .42em; }
  & .pd-mid { letter-spacing: -.02em; }
  & .pd-delta { height: 2.6rem; font-size: 1.3rem; font-weight: 600; }
  & .pd-tekst { font-weight: 400; }
  & .pd-tekst b { font-weight: 600; }
  & .pd-link { font-size: 1.35rem; font-weight: 600; }

  /* Knapper og chips: piller i flade farver, accent kun på handling */
  & .pd-btn { height: 4rem; padding: 0 1.7rem; font-size: 1.36rem; font-weight: 600; color: var(--ink); background: var(--btn); box-shadow: none; }
  & .pd-btn:hover, & .pd-btn[data-ph-hover] { background: var(--btn-h); }
  & .pd-btn.sm { height: 3.4rem; padding: 0 1.3rem; font-size: 1.3rem; }
  & .pd-btn.rund { width: 4rem; padding: 0; }
  & .pd-btn.rund.sm { width: 3.4rem; }
  & .pd-btn:is(.pri, .to) { color: var(--acc-ink); background: var(--acc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 18px -10px rgb(from var(--acc) r g b / .7); }
  & .pd-btn:is(.pri, .to):hover, & .pd-btn:is(.pri, .to)[data-ph-hover] { filter: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 24px -10px rgb(from var(--acc) r g b / .8); }
  & .pd-btn.warn { color: var(--warn-ink); background: var(--warn); box-shadow: 0 8px 18px -10px rgb(from var(--warn) r g b / .6); }
  & .pd-btn.ghost { color: var(--ink-2); background: transparent; box-shadow: none; }
  & .pd-btn.ghost:hover, & .pd-btn.ghost[data-ph-hover] { color: var(--ink); background: var(--btn); }
  & .pd-btn.ok-done { color: var(--ok); background: var(--ok-soft); box-shadow: none; }
  & .pd-chip { height: 2.5rem; padding: 0 .9rem; font-size: 1.18rem; font-weight: 600; color: var(--ink-2); background: var(--sunk); }
  & .pd-chip:is(.acc, .to) { color: var(--acc-txt); background: var(--acc-soft); }
  & .pd-chip.ok { background: var(--ok-soft); }
  & .pd-chip.warn { background: var(--warn-soft); }
  & .pd-chip.risk { background: var(--risk-soft); }
  & .pd-chip.ren { background: none; }
  & .pd-av { font-weight: 600; color: var(--av-ink); background: var(--av); }
  & .pd-av.fyld { color: var(--acc-ink); background: var(--acc); box-shadow: none; }
  & .pd-seg { gap: .2rem; padding: .4rem; background: var(--seg); box-shadow: none; }
  & .pd-seg button { height: 3.2rem; padding: 0 1.4rem; font-size: 1.3rem; font-weight: 600; color: var(--ink-2); }
  & .pd-seg button:hover, & .pd-seg button[data-ph-hover] { color: var(--ink); }
  & .pd-seg button:is(.on, [aria-pressed="true"]) { color: var(--seg-on-ink); background: var(--seg-on); box-shadow: var(--seg-on-sh); }
  & .pd-seg button:is(.on, [aria-pressed="true"]) small { color: inherit; opacity: .7; }
  & .pd-input { background: var(--sunk); box-shadow: none; }
  & .pd-input:focus-within { background: var(--card); box-shadow: 0 0 0 2px rgb(from var(--acc) r g b / .55), 0 0 0 5px rgb(from var(--acc) r g b / .12); }
  & .pd-input :is(input, select, textarea) { font-weight: 400; }
  & .pd-field > span { font-weight: 600; }
  & .pd-toggle .tr { background: var(--track); }
  & .pd-toggle .tr::after { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
  & .pd-toggle input:checked + .tr { background: var(--acc); box-shadow: none; }

  /* Lister: rækker med en tynd skillelinje som i 06 og 07 */
  & .pd-rows { gap: 0; }
  & .pd-row { padding: .75rem .8rem .75rem .2rem; border-radius: 0; background: none; box-shadow: none; }
  & .pd-row + .pd-row { border-top: 1px solid var(--line); }
  & .pd-row:hover, & .pd-row[data-ph-hover] { background: var(--row-h); }
  & .pd-rn b, & .pd-rv { font-weight: 600; }
  & .pd-rn small { font-weight: 400; }
  & .pd-hrs { font-weight: 600; }

  /* AI-kortet: ikon i en rolig cirkel, udkast på en indre flade */
  & .pd-orb { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; color: var(--k); background: rgb(from var(--k) r g b / .1); box-shadow: none; animation: none; }
  & .pd-orb::after { display: none; }
  & .pd-orb .pd-i { display: block; width: 1.8rem; height: 1.8rem; }
  & .pd-ai-title { margin-top: 1.4rem; font-size: 2.2rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
  & .pd-ai-title b { font-weight: 600; }
  & .pd-ai-lead { font-size: 1.3rem; font-weight: 400; }
  & .pd-drafts { gap: .8rem; }
  & .pd-draft { padding: 1.2rem 1.2rem 1.3rem; border-radius: var(--r-in); background: var(--draft); box-shadow: none; }
  & .pd-draft:hover, & .pd-draft[data-ph-hover] { background: var(--draft-h); }
  & .pd-d-head { gap: .9rem; }
  & .pd-d-who b { font-size: 1.3rem; font-weight: 600; }
  & .pd-d-who small { font-size: 1.15rem; font-weight: 400; }
  & .pd-d-act { gap: .4rem; }
  & .pd-d-act .pd-btn { height: 3.1rem; padding: 0 1.1rem; font-size: 1.22rem; gap: .45rem; }
  & .pd-d-act .pd-btn .pd-i { width: 1.4rem; height: 1.4rem; }
  & .pd-bubble { margin-left: 0; border-radius: 12px; font-weight: 400; color: var(--ink-2); background: var(--bubble); }
  & .pd-draft.ret .pd-bubble { box-shadow: 0 0 0 2px rgb(from var(--acc) r g b / .6); }
  & .pd-draft.sendt { background: var(--ok-soft); }
  & .pd-draft.sendt .pd-sentline { color: var(--ok); }
  & .pd-ai-fod { font-weight: 400; }
  & .pd-ai-fod .lbl { color: var(--ink-3); background: none; animation: none; }
  & .pd-ai-fod .dotp::before { background: var(--acc); box-shadow: none; }

  /* Tidslinje */
  & .pd-tl::before { width: 1.5px; background: var(--line-2); }
  & .pd-node { background: var(--ghost); box-shadow: 0 0 0 3px var(--card); }
  & .pd-tl-i:is(.live, .nu) .pd-node { background: var(--k); box-shadow: 0 0 0 3px var(--card), 0 0 0 5px rgb(from var(--k) r g b / .2); }
  & .pd-tl-i:hover, & .pd-tl-i[data-ph-hover] { background: var(--row-h); }
  & .pd-tl-i time { font-weight: 600; }
  & .pd-what b { font-weight: 600; }
  & .pd-what span { font-weight: 400; }
  & .pd-tl-nu .nd { box-shadow: none; }
  & .pd-tl-nu .ln { background: rgb(from var(--risk) r g b / .5); }

  /* Kanal-søjler, ring og pille-søjler: flade farver, ingen glød */
  & .pd-spor-i > span { font-weight: 500; }
  & .pd-spor-i > b { font-weight: 600; }
  & .pd-spor-t { height: .8rem; background: var(--ghost); }
  & .pd-spor-t i { background: var(--k); box-shadow: none; }
  & .pd-ring .trk { stroke: var(--ghost); stroke-width: 10; }
  & .pd-ring .val { stroke-width: 10; filter: none; }
  & .pd-ring :is(.s0, .s1) { stop-color: var(--k); }
  & .pd-ring-c b { letter-spacing: -.03em; }
  & .pd-ring-c > span { font-weight: 500; }
  & .pd-bars { gap: .8rem; }
  & .pd-bar-c i { width: min(3.2rem, 70%); border-radius: .5rem .5rem .25rem .25rem; background: var(--ghost); box-shadow: none; }
  & .pd-bar:hover .pd-bar-c i, & .pd-bar[data-ph-hover] .pd-bar-c i { background: var(--ghost-h); }
  & .pd-bar.nu .pd-bar-c i { width: min(3.2rem, 70%); background: var(--acc); box-shadow: none; }
  & .pd-bar-v, & .pd-bar > span { font-weight: 500; }
  & .pd-bar.nu > span, & .pd-bar.nu .pd-bar-v { font-weight: 600; color: var(--acc-txt); }

  /* Områdegraf: én linje i accenten og en svag flade */
  & .pd-area .g-top { stop-color: var(--acc); stop-opacity: .16; }
  & .pd-area .g-mid { stop-color: var(--acc); stop-opacity: .05; }
  & .pd-area .g-bot { stop-color: var(--acc); stop-opacity: 0; }
  & .pd-area .l-0 { stop-color: rgb(from var(--acc) r g b / .5); }
  & .pd-area :is(.l-1, .l-2) { stop-color: var(--acc); }
  & .pd-area svg path[filter] { display: none; }
  & .pd-area .dot { fill: var(--acc); }
  & .pd-area .dot-c, & .pd-area .hdot { fill: var(--card); stroke: var(--acc); filter: none; }
  & .pd-ax { font-weight: 400; }
  & .pd-ax.nu { fill: var(--acc-txt); font-weight: 600; }
  & .pd-tip { border-radius: 12px; color: var(--tip-ink); background: var(--tip-bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--sh-pop); }
  & .pd-tip b { font-weight: 600; color: var(--tip-ink); }
  & .pd-tip span { color: rgb(from var(--tip-ink) r g b / .76); }
  & .pd-tip .op { color: var(--tip-ok); }
  & .pd-tip .ned { color: var(--tip-risk); }

  /* Puls-rækken: tynd linje uden glød */
  & .pd-puls-st.top b { font-weight: 600; letter-spacing: -.02em; }
  & .pd-puls-st.top.slag b { text-shadow: none; }
  & .pd-puls-st.top span { font-weight: 500; }
  & .pd-puls-st.bund b { font-weight: 600; }
  & .pd-puls-st.bund.warn b::before { box-shadow: none; }
  & .php-svg [filter] { display: none; }
  & .php-svg circle[fill="#fff"] { fill: var(--acc); }

  /* Lag: kort-flader med skygge, ingen blur */
  & .pd-toast { border-radius: 18px; background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--sh-pop); }
  & .pd-toast .ti { color: var(--k); background: rgb(from var(--k) r g b / .12); box-shadow: none; }
  & .pd-toast .tt b { font-weight: 600; }
  & .pd-toast .tt span { font-weight: 400; }
  & .pd-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }
  & :is(.pd-pal-box, .pd-drawer, .pd-modal, .pd-ark, .pd-vaelger-p) { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--sh-pop); }
  & :is(.pd-drawer, .pd-modal) { border-radius: 22px; }
  & .pd-pal-box { border-radius: 22px; }
  & .pd-pal-in { background: var(--sunk); }
  & .pd-pal-in input { font-weight: 400; }
  & .pd-pal-list li b { font-weight: 600; }
  & .pd-drawer-h h2 { font-weight: 600; letter-spacing: -.01em; }
  & .pd-kv b { font-weight: 600; }
  & .pd-sek h3 { font-weight: 600; letter-spacing: 0; }
  & .pd-fase i.on { box-shadow: none; }
  & .pd-empty b { font-weight: 600; }

  /* CRM-mønstre */
  & .pd-lane-h .t { font-weight: 600; }
  & .pd-deal { background: var(--deal); box-shadow: none; }
  & .pd-deal:hover, & .pd-deal[data-ph-hover] { background: var(--deal-h); }
  & .pd-deal b, & .pd-deal .bund .kr { font-weight: 600; }
  & .pd-deal small { font-weight: 400; }
  & .pd-deal.ny { box-shadow: 0 0 0 2px rgb(from var(--acc) r g b / .55); }
  & .pd-liste { gap: 0; }
  & .pd-lrow { padding: .8rem 1.6rem .8rem .6rem; border-radius: 0; background: none; box-shadow: none; }
  & .pd-lrow + .pd-lrow { border-top: 1px solid var(--line); }
  & .pd-lrow:hover, & .pd-lrow[data-ph-hover] { background: var(--row-h); }
  & .pd-lrow .c { font-weight: 500; }
  & .pd-lrow .c.kr, & .pd-lhead { font-weight: 600; }
  & .pd-uge-d b { font-weight: 600; }
  & .pd-uge-k { border-radius: var(--r-in); background: var(--sunk-2); }
  & .pd-uge-k.i-dag { background: rgb(from var(--acc) r g b / .06); box-shadow: none; }
  /* Lange navne afkortes med ellipse i b; boksen klipper kun den afkortede linje */
  & .pd-evt { border-radius: 10px; text-overflow: ellipsis; }
  & .pd-evt b { font-weight: 600; }
  & .pd-evt span { font-weight: 400; }
  & .pd-uge-nu { box-shadow: none; }
  & .pd-traad { border-radius: var(--r-in); }
  & .pd-traad.on { background: var(--sunk); box-shadow: none; }
  & .pd-traad b { font-weight: 600; }
  & .pd-traad small { font-weight: 400; }
  & .pd-traad.ulaest b::after { box-shadow: none; }
  & .pd-msg { font-weight: 400; background: var(--sunk); }
  & .pd-msg.ud { color: var(--ink); background: var(--acc-soft); }
  & .pd-forslag { background: var(--acc-soft); }
  & .pd-forslag .ft { font-weight: 400; }
  & .pd-forslag .ft b { font-weight: 600; color: var(--acc-txt); }

  /* Stilvælger */
  & .pd-vaelger-p { border-radius: 20px; }
  & .pd-vaelger-p h3 { font-weight: 600; letter-spacing: 0; }
  & .pd-sw { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08), 0 2px 6px -3px rgb(0 0 0 / .4); }
  & .pd-sw.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink-2); }
  & .pd-vaelger-knap { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--sh-s); }
}
@keyframes pdPingK { 40% { box-shadow: var(--card-sh), 0 0 0 .5rem rgb(from var(--k) r g b / .16); } }

/* Stilarternes egne detaljer */
[data-familie="klassisk"][data-stil="nordisk"] {
  & .pd-ch h2 { font-size: 1.6rem; }
  & .pd-big { letter-spacing: -.035em; }
}
/* Nordisk: Schibsted Grotesks tabulære tal gør også punktum og komma brede ("2 . 675 . 000"). 07 løser det med
   spans om tegnene; kittet slår tabulære tal fra i stedet, så "2.675.000" og "10. november" står tæt. */
#app[data-familie="klassisk"][data-stil="nordisk"] { font-feature-settings: "tnum" 0, "pnum" 1, "lnum" 1; }
[data-familie="klassisk"][data-stil="marine"] {
  & .pd-nav-i { position: relative; }
  & .pd-nav-i[aria-current="page"]::before { content: ""; position: absolute; left: -1.4rem; top: 1rem; bottom: 1rem; width: .3rem; border-radius: 0 3px 3px 0; background: var(--acc); }
  & .pd-ico, & .pd-orb { background: var(--in); }
  /* Som 08: korthoveder uden ikon */
  & :is(.pd-ch, .pd-puls-l) > .pd-ico { display: none; }
  & .pd-puls-l h2 { margin-top: 0; }
  & .pd-search .pd-i { color: var(--acc-txt); }
  & .pd-me .pd-av.fyld { color: var(--bg); background: var(--ink); }
  & .pd-input:focus-within { background: var(--in-2); }
}

/* Ingen tastaturgenveje på touch og smal skærm (PLAYBOOK 3b, punkt 18) */
@media (hover: none), (max-width: 820px) {
  [data-familie="klassisk"] kbd, [data-familie="klassisk"] .pd-pal-fod { display: none !important; }
}

/* ---------- 24c. Flydende layout under 1180 px: ikonskinne, to kolonner, siden scroller ---------- */
/* Skrivebordets faste 12-kolonners bento bliver klemt under ca. 1180 px (rem stopper ved 8,8 px). Klassisk flyder i stedet:
   kortene får deres naturlige højde, grafer og lister en fast højde, og #app scroller. Opstillingen (to kolonner)
   sætter siden selv, fx .kat-over i katalog/index.html. */
@media (max-width: 1180px) {
  #app[data-familie="klassisk"] { --rail-w: 8.8rem; overflow-x: hidden; overflow-y: auto; }
  [data-familie="klassisk"] {
    & .pd-skal { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100%; padding-left: var(--rail-w); }
    & .pd-rail { position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: var(--rail-w); align-items: stretch; padding: 2rem .7rem 1.6rem; }
    & .pd-mark { align-self: center; margin: 0 0 2.2rem; }
    & .pd-mark::after { display: none; }
    & .pd-nav-i { position: relative; flex-direction: column; justify-content: center; gap: .35rem; height: auto; min-height: 5.6rem; padding: .6rem .2rem;
      border-radius: 14px; font-size: 1.05rem; line-height: 1.2; text-align: center; white-space: normal; }
    & .pd-nav-i .pd-i { width: 2.1rem; height: 2.1rem; }
    & .pd-rail .pd-badge { position: absolute; top: .3rem; left: calc(50% + .5rem); margin: 0; min-width: 1.9rem; height: 1.9rem; padding: 0 .5rem; font-size: 1.05rem;
      color: var(--acc-ink); background: var(--acc); box-shadow: 0 0 0 2px var(--side); }
    & .pd-main { grid-template-rows: auto auto; padding: 2rem 2.4rem 2.4rem; }
    & .pd-views { min-height: 0; }
    & .pd-view { position: static; }
    & .pd-search { width: 26rem; }
    & .pd-me { height: auto; padding: .4rem; }
    & .pd-me > span:last-child { display: none; }

    /* Kortene får deres naturlige højde; grafer og lister får en fast højde i stedet for resten af kortet */
    & .pd-bento { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
    & .pd-bento > .pd-card { min-height: 26rem; }
    & .pd-view > .pd-card { min-height: 0; }
    & .pd-ch { flex-wrap: wrap; row-gap: .8rem; }
    & .pd-vhead { flex-wrap: wrap; row-gap: 1rem; }
    & :is(.pd-drafts, .pd-tl, .pd-spor, .pd-liste, .pd-traade, .pd-samtale, .pd-lane-list) { flex: none; }
    & .pd-scroll.fade { -webkit-mask: none; mask: none; }
    & .pd-area { flex: none; height: 18rem; }
    & .pd-bars { flex: none; height: 16rem; }
    & .pd-ring { flex: none; height: 15rem; }
    & .pd-puls { flex: none; height: 15rem; }
    & .pd-kanban { grid-template-columns: repeat(var(--cols, 5), minmax(21rem, 1fr)); overflow-x: auto; scrollbar-width: none; padding-bottom: .6rem; }
    & .pd-uge { flex: none; height: 56rem; overflow-x: auto; grid-template-columns: 4.6rem repeat(5, minmax(13rem, 1fr)); scrollbar-width: none; }
  }
  [data-familie="klassisk"][data-stil="marine"] .pd-nav-i[aria-current="page"]::before { left: -.7rem; }
}

/* ---------- 24d. Smal skærm (højst 820 px): fanebar i bunden med højst 5 punkter ---------- */
@media (max-width: 820px) {
  #app[data-familie="klassisk"] { --gap: 1.4rem; --pad-y: 2rem; --pad-x: 2rem; }
  [data-familie="klassisk"] {
    & .pd-skal { padding: 0 0 calc(7.4rem + env(safe-area-inset-bottom, 0px)); }
    & .pd-main { gap: 1.6rem; padding: 1.8rem 1.6rem 2rem; }
    & .pd-rail { top: auto; width: auto; right: 0; z-index: 30; flex-direction: row; overflow: visible;
      padding: .6rem .6rem calc(.6rem + env(safe-area-inset-bottom, 0px)) !important; gap: 0 !important;
      background: var(--tabbar); box-shadow: 0 -1px 0 var(--line), 0 -14px 30px -22px rgb(0 0 0 / .4); }
    & .pd-mark { display: none; }
    & .pd-nav { flex: 1; flex-direction: row; gap: .2rem; }
    & .pd-nav > .pd-nav-i:nth-child(n + 5):not(.pd-mere), & .pd-rail-fod { display: none; }
    & .pd-nav > .pd-mere { display: flex !important; }
    & .pd-nav-i { flex: 1 1 0; min-width: 0; font-size: 1.15rem; white-space: nowrap; }
    & .pd-nav-i[aria-current="page"] { box-shadow: none; }
    & .pd-nav-i[aria-current="page"]::before { display: none; }
    & .pd-rail .pd-badge { box-shadow: 0 0 0 2px var(--tabbar); }

    /* Hilsen og brugermenu på første linje, kundens navn og dagen på to korte linjer, søgning i fuld bredde */
    & .pd-top { flex-wrap: wrap; align-items: center; gap: 1.2rem 1rem; }
    & .pd-hello, & .pd-top-r { display: contents; }
    & .pd-hello h1 { order: 0; flex: 1 1 0; min-width: 0; font-size: 2.4rem; white-space: normal; }
    & .pd-demo { order: 1; font-size: 1.2rem; }
    & .pd-me { order: 2; }
    & .pd-sub { order: 3; flex: 1 1 100%; flex-wrap: wrap; row-gap: .2rem; column-gap: .8rem; margin-top: -.8rem; font-size: 1.3rem; white-space: normal; }
    & .pd-sub .pd-navn-i, & .pd-sub .pd-navn-i + i { display: revert; }
    & .pd-sub > i:nth-of-type(2) { flex: 0 0 100%; width: 0; height: 0; background: none; }
    & .pd-search { order: 4; flex: 1 1 100%; width: auto; }

    /* Én kolonne */
    & :is(.pd-bento, .pd-kanban, .pd-grid) { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; grid-template-areas: none !important; overflow: visible; }
    & :is(.pd-bento, .pd-grid) > .pd-card { grid-area: auto !important; min-height: 0; }
    & .pd-big { font-size: 5.4rem; }
    & .pd-big.m { font-size: 3.6rem; }
    & .pd-area { height: 16rem; }
    & .pd-puls-kort { flex-direction: column; gap: 1.4rem; }
    & .pd-puls-l { flex-direction: row; align-items: center; gap: 1rem; width: auto; }
    & .pd-puls-l h2 { margin: 0; }
    & .pd-puls-l .pd-tekst { margin: 0; }
    & .pd-puls-l .pd-link { margin: 0 0 0 auto; }
    & .pd-puls-st.top b { font-size: 2.2rem; }
    & .pd-puls-st.top span { font-size: 1rem; }
    & .pd-puls-st.bund b { font-size: 1.05rem; }
    & .pd-lhead { display: none; }
    & .pd-lrow { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 1rem; padding-right: .6rem; }
    & .pd-lrow > .c:not(.kr) { display: none; }
    & .pd-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Lagene følger skærmen, ikke den scrollende flade */
    & :is(.pd-scrim, .pd-ark, .pd-pal, .pd-toasts) { position: fixed; }
    & .pd-drawer { position: fixed; top: 1.2rem; right: 1.2rem; bottom: 1.2rem; left: 1.2rem; width: auto; max-width: none; }
    & .pd-toasts { top: auto; right: 1.2rem; left: 1.2rem; bottom: 8rem; }
    & .pd-toast { width: auto; }
    & .pd-vaelger.ved-skinne { position: fixed; left: 1.2rem; right: 1.2rem; bottom: 8rem; }
    & .pd-vaelger-p { width: auto; }
  }
}