/* ==========================================================================
   POSTY v43 — designsystem
   Lyst og mørkt tema. Følger telefonens/computerens indstilling, eller det
   du vælger med tema-knappen (gemmes i browseren).
   Accent: RAL 3000 Flammerød. Alt andet er rolige, neutrale flader.
   ========================================================================== */

/* ---------- Farver: lyst tema (Apple systemfarver) ---------- */
:root{
  color-scheme:light;
  --bg:#F2F2F7; --bg-elev:rgba(246,246,248,.82);
  --surface:#FFFFFF; --surface-2:#F2F2F7; --surface-3:#E9E9EE; --fill:rgba(118,118,128,.12); --fill-2:rgba(118,118,128,.08);
  --text:#1C1C1E; --text-2:#3C3C43; --muted:#8A8A8E; --muted-2:#AEAEB2;
  --line:#E5E5EA; --line-soft:#EFEFF4; --line-strong:#C7C7CC;
  --accent:#C2301F; --accent-h:#AF2B1E; --accent-press:#962416; --accent-soft:rgba(194,48,31,.1); --accent-text:#C2301F; --on-accent:#FFFFFF;
  --ok:#248A3D; --ok-bg:rgba(52,199,89,.14); --okc:#34C759;
  --warn:#C46A00; --warn-bg:rgba(255,149,0,.14); --warnc:#FF9500;
  --bad:#D70015; --bad-bg:rgba(255,59,48,.12); --badc:#FF3B30;
  --info:#0066D6; --info-bg:rgba(0,122,255,.12); --ai:#8944AB; --ai-bg:rgba(175,82,222,.13);
  --inverse:#1C1C1E; --on-inverse:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 1px 2px rgba(0,0,0,.03),0 4px 16px -8px rgba(0,0,0,.08);
  --shadow-lg:0 30px 80px -20px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.06);
  --scrim:rgba(0,0,0,.32);
  --chart-track:#E9E9EE;
}
/* ---------- Mørkt tema (system) ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#000000; --bg-elev:rgba(22,22,24,.78);
    --surface:#1C1C1E; --surface-2:#2C2C2E; --surface-3:#3A3A3C; --fill:rgba(118,118,128,.24); --fill-2:rgba(118,118,128,.16);
    --text:#FFFFFF; --text-2:#EBEBF5; --muted:#8D8D93; --muted-2:#636366;
    --line:#38383A; --line-soft:#2C2C2E; --line-strong:#48484A;
    --accent:#E0412F; --accent-h:#EA5040; --accent-press:#C2301F; --accent-soft:rgba(255,69,58,.16); --accent-text:#FF6A5C; --on-accent:#FFFFFF;
    --ok:#30D158; --ok-bg:rgba(48,209,88,.16); --okc:#30D158;
    --warn:#FF9F0A; --warn-bg:rgba(255,159,10,.16); --warnc:#FF9F0A;
    --bad:#FF453A; --bad-bg:rgba(255,69,58,.16); --badc:#FF453A;
    --info:#0A84FF; --info-bg:rgba(10,132,255,.18); --ai:#BF5AF2; --ai-bg:rgba(191,90,242,.18);
    --inverse:#FFFFFF; --on-inverse:#000000;
    --shadow-sm:none; --shadow:none;
    --shadow-lg:0 30px 80px -20px rgba(0,0,0,.9),0 0 0 .5px rgba(255,255,255,.08);
    --scrim:rgba(0,0,0,.55);
    --chart-track:#2C2C2E;
  }
}
/* ---------- Mørkt tema (valgt) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000; --bg-elev:rgba(22,22,24,.78);
  --surface:#1C1C1E; --surface-2:#2C2C2E; --surface-3:#3A3A3C; --fill:rgba(118,118,128,.24); --fill-2:rgba(118,118,128,.16);
  --text:#FFFFFF; --text-2:#EBEBF5; --muted:#8D8D93; --muted-2:#636366;
  --line:#38383A; --line-soft:#2C2C2E; --line-strong:#48484A;
  --accent:#E0412F; --accent-h:#EA5040; --accent-press:#C2301F; --accent-soft:rgba(255,69,58,.16); --accent-text:#FF6A5C; --on-accent:#FFFFFF;
  --ok:#30D158; --ok-bg:rgba(48,209,88,.16); --okc:#30D158;
  --warn:#FF9F0A; --warn-bg:rgba(255,159,10,.16); --warnc:#FF9F0A;
  --bad:#FF453A; --bad-bg:rgba(255,69,58,.16); --badc:#FF453A;
  --info:#0A84FF; --info-bg:rgba(10,132,255,.18); --ai:#BF5AF2; --ai-bg:rgba(191,90,242,.18);
  --inverse:#FFFFFF; --on-inverse:#000000;
  --shadow-sm:none; --shadow:none;
  --shadow-lg:0 30px 80px -20px rgba(0,0,0,.9),0 0 0 .5px rgba(255,255,255,.08);
  --scrim:rgba(0,0,0,.55);
  --chart-track:#2C2C2E;
}

/* ---------- Gamle navne (bruges stadig i siderne) → nye tokens ---------- */
:root{
  --ral3000:var(--accent); --brand:var(--accent); --brand-d:var(--accent-press); --brand-l:var(--accent-h); --brand-2:var(--accent-h);
  --brand-soft:var(--accent-soft);
  --ink:var(--text); --ink-2:var(--text-2); --paper:var(--bg); --card:var(--surface); --line-2:var(--line-soft);
  --night:var(--bg); --night-2:var(--surface); --night-3:var(--surface-2); --night-line:var(--line);
  --gold:#E9B949;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI Variable Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI Variable Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --rounded:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Inter",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --radius:16px; --r-lg:16px; --r-md:12px; --r-sm:9px;
  --side-w:252px; --tab-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
}

/* ---------- Grundlag ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; background:var(--bg); }
body{ margin:0; font-family:var(--ui); font-size:15px; line-height:1.55; color:var(--text); background:var(--bg);
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:-.006em;
      min-height:100vh; min-height:100dvh; }
img{ max-width:100%; }
a{ color:var(--accent-text); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }
.card a,.card a:visited{ color:var(--accent-text); }
:focus-visible{ outline:2px solid var(--accent-h); outline-offset:2px; border-radius:6px; }
::selection{ background:var(--accent-soft); }
code{ font-family:var(--mono); font-size:.88em; background:var(--surface-3); padding:1px 5px; border-radius:5px; }
hr{ border:0; border-top:1px solid var(--line); margin:18px 0; }
.num,.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- Ikoner (SF Symbols-agtige streger) ---------- */
.ic{ width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.ic.sm{ width:16px; height:16px; } .ic.lg{ width:26px; height:26px; }

/* ==========================================================================
   SKAL: sidebar som iPadOS/macOS · navigationsbar + tabbar som iOS
   ========================================================================== */
.side{ position:fixed; inset:0 auto 0 0; width:var(--side-w); z-index:40; display:flex; flex-direction:column;
       background:var(--bg-elev); backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px);
       border-right:.5px solid var(--line-strong); }
.side-head{ display:flex; align-items:center; gap:10px; padding:20px 18px 12px; }
.logo{ display:flex; align-items:center; gap:10px; color:var(--text); font:700 17px/1.1 var(--display); letter-spacing:-.022em; }
.logo:hover{ text-decoration:none; }
.logo small{ display:block; font:500 12px var(--ui); color:var(--muted); letter-spacing:-.003em; margin-top:1px; }
.logo .mk{ width:32px; height:32px; border-radius:8px; background:linear-gradient(180deg,#D23A28,#A8291B); display:grid; place-items:center; flex:none;
           box-shadow:0 .5px 0 rgba(255,255,255,.35) inset,0 2px 6px -2px rgba(160,40,25,.6); }
.side-new{ margin:2px 14px 6px; }
.side-new .btn{ width:100%; justify-content:center; }
.side-nav{ flex:1; overflow-y:auto; padding:2px 10px 16px; scrollbar-width:thin; }
.side-grp{ margin-top:16px; }
.side-grp:first-child{ margin-top:6px; }
.side-grp > span{ display:block; font:600 12px var(--ui); color:var(--muted); padding:4px 10px 4px; letter-spacing:-.003em; }
.side-nav a{ display:flex; align-items:center; gap:11px; padding:7px 10px; border-radius:8px; color:var(--text); font-size:14.5px; font-weight:450; letter-spacing:-.012em; }
.side-nav a .ic{ color:var(--accent-text); width:19px; height:19px; }
.side-nav a:hover{ background:var(--fill-2); text-decoration:none; }
.side-nav a.active{ background:var(--accent); color:#fff; font-weight:500; }
.side-nav a.active .ic{ color:#fff; }
.side-foot{ border-top:.5px solid var(--line-strong); padding:10px; display:flex; gap:6px; }
.side-foot a,.side-foot button{ flex:1; white-space:nowrap; display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 10px; border-radius:8px;
      border:0; background:transparent; color:var(--text-2); font:500 13.5px var(--ui); cursor:pointer; }
.side-foot a:hover,.side-foot button:hover{ background:var(--fill-2); color:var(--text); text-decoration:none; }

.main{ margin-left:var(--side-w); min-height:100vh; }
.mtop,.tabbar,.scrim{ display:none; }

.wrap{ max-width:1120px; margin:0 auto; padding:34px 36px 64px; color:var(--text); }
.pagehint{ display:flex; gap:8px; align-items:flex-start; color:var(--muted); font-size:14px; margin:-10px 0 20px; max-width:760px; line-height:1.45; }
.pagehint .ic{ color:var(--muted-2); margin-top:2px; }

/* ---------- Mobil (iPhone) ---------- */
@media (max-width:1023px){
  .main{ margin-left:0; padding-bottom:calc(var(--tab-h) + var(--safe-b)); }
  .side{ transform:translateX(-102%); visibility:hidden; transition:transform .32s cubic-bezier(.32,.72,0,1), visibility 0s linear .32s; width:min(86vw,320px);
         box-shadow:var(--shadow-lg); z-index:80; background:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none; }
  body.menu-open .side{ transform:none; visibility:visible; transition:transform .32s cubic-bezier(.32,.72,0,1), visibility 0s; }
  .scrim{ display:block; position:fixed; inset:0; background:var(--scrim); z-index:70; opacity:0; pointer-events:none; transition:opacity .25s; }
  body.menu-open .scrim,body.sheet-open .scrim{ opacity:1; pointer-events:auto; }
  .mtop{ display:flex; position:sticky; top:0; z-index:30; height:calc(48px + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) 8px 0 16px; align-items:center; gap:10px;
         background:var(--bg-elev); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:.5px solid transparent; transition:border-color .2s; }
  body.scrolled .mtop{ border-bottom-color:var(--line-strong); }
  .mtop .logo .mk{ width:28px; height:28px; border-radius:7px; }
  .mtop .ttl{ flex:1; min-width:0; text-align:center; color:var(--text); font:600 16px var(--ui); letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
              opacity:0; transition:opacity .2s; }
  body.scrolled .mtop .ttl{ opacity:1; }
  .iconbtn{ width:40px; height:40px; display:grid; place-items:center; border-radius:20px; border:0; background:transparent; color:var(--accent-text); cursor:pointer; }
  .iconbtn:hover{ background:var(--fill-2); }
  .tabbar{ display:grid; grid-template-columns:repeat(5,1fr); position:fixed; inset:auto 0 0 0; z-index:60; height:calc(var(--tab-h) + var(--safe-b));
           padding:4px 4px var(--safe-b); background:var(--bg-elev);
           backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-top:.5px solid var(--line-strong); }
  .tabbar a,.tabbar button{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:6px; gap:3px; border:0; background:transparent;
           color:var(--muted); font:500 10.5px var(--ui); letter-spacing:.005em; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .tabbar .ic{ width:25px; height:25px; stroke-width:1.6; }
  .tabbar a:hover{ text-decoration:none; }
  .tabbar .on{ color:var(--accent-text); }
  .tabbar .on .ic{ stroke-width:2; }
  .tabbar .plus{ color:var(--accent-text); }
  .tabbar .plus span.pl{ width:25px; height:25px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; }
  .tabbar .plus span.pl .ic{ width:16px; height:16px; stroke-width:2.6; }
  .wrap{ padding:6px 16px 40px; }
  .side-new{ display:none; }
}

/* ---------- Ark (iOS sheet / macOS-vindue) ---------- */
.sheet{ position:fixed; z-index:90; background:var(--surface); color:var(--text); display:flex; flex-direction:column;
        left:50%; top:50%; width:min(560px,calc(100vw - 32px)); max-height:min(86vh,760px); transform:translate(-50%,-47%) scale(.97); opacity:0; pointer-events:none;
        border-radius:20px; box-shadow:var(--shadow-lg); visibility:hidden;
        transition:opacity .2s, transform .3s cubic-bezier(.32,.72,0,1), visibility 0s linear .3s; }
body.sheet-open .sheet{ opacity:1; transform:translate(-50%,-50%); pointer-events:auto; visibility:visible; transition:opacity .2s, transform .3s cubic-bezier(.32,.72,0,1), visibility 0s; }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 16px 6px 20px; }
.sheet-head h2{ margin:0; font-size:20px; font-weight:700; letter-spacing:-.025em; }
.sheet-x{ width:30px; height:30px; border-radius:50%; border:0; display:grid; place-items:center; background:var(--fill); color:var(--muted); cursor:pointer; padding:0; }
.sheet-x .ic{ width:15px; height:15px; stroke-width:2.4; }
.sheet-body{ padding:6px 20px 22px; overflow-y:auto; }
.sheet .grab{ display:none; }
.sheet-acts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.sheet-acts a{ display:flex; align-items:center; gap:10px; padding:12px 13px; border-radius:12px; background:var(--surface-2); color:var(--text); font-weight:500; font-size:14.5px; letter-spacing:-.012em; }
.sheet-acts a .ic{ color:var(--accent-text); }
.sheet-acts a:hover{ background:var(--surface-3); text-decoration:none; }
@media (max-width:1023px){
  body.sheet-open{ overflow:hidden; }
  .scrim{ z-index:85; }
  .sheet{ left:0; right:0; top:auto; bottom:0; width:100%; max-height:90vh; border-radius:14px 14px 0 0; transform:translateY(102%); opacity:1; padding-bottom:var(--safe-b); }
  body.sheet-open .sheet{ transform:none; }
  .sheet .grab{ display:block; width:36px; height:5px; border-radius:3px; background:var(--line-strong); margin:6px auto 0; }
  .sheet-head{ padding-top:10px; }
}
@media (min-width:1024px){ body.sheet-open .scrim{ display:block; position:fixed; inset:0; background:var(--scrim); z-index:85; opacity:1; } }

/* ==========================================================================
   TYPOGRAFI — Large Title, Title 2/3, Headline, Footnote
   ========================================================================== */
h1{ font:700 34px/1.12 var(--display); letter-spacing:-.03em; margin:0 0 18px; color:var(--text); }
h2{ font:700 22px/1.25 var(--display); letter-spacing:-.024em; color:var(--text); }
h3{ font:600 17px/1.3 var(--ui); letter-spacing:-.02em; color:var(--text); }
.card h1{ font-size:26px; }
.eyebrow{ font:600 13px var(--ui); letter-spacing:-.003em; text-transform:none; color:var(--muted); }
.muted{ color:var(--muted); font-size:13.5px; }
.wrap > p,.wrap > .muted{ color:var(--muted); }
@media (max-width:560px){ h1{ font-size:32px; margin-bottom:14px; } h2{ font-size:20px; } }

/* ==========================================================================
   KORT — grupperet "inset" som i Indstillinger
   ========================================================================== */
.card{ background:var(--surface); color:var(--text); border:0; border-radius:var(--radius); padding:20px 22px; margin-bottom:18px;
       box-shadow:var(--shadow); position:relative; min-width:0; }
.card h2{ font-size:20px; margin:0 0 12px; }
.card h3{ margin:14px 0 8px; }
.card .muted{ color:var(--muted); }
.card.dark{ background:#1C1C1E; color:#fff; }
.card.dark h2,.card.dark h3{ color:#fff; }
.card.dark .muted{ color:rgba(235,235,245,.6); }
:root[data-theme="dark"] .card.dark{ background:#2C2C2E; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .card.dark{ background:#2C2C2E; } }
@media (max-width:560px){ .card{ padding:16px; border-radius:14px; margin-bottom:14px; } }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:860px){ .grid2{ grid-template-columns:1fr; } }

/* ==========================================================================
   FORMULARER — udfyldte felter
   ========================================================================== */
label{ display:block; font-size:13px; font-weight:500; margin:14px 0 6px; color:var(--muted); letter-spacing:-.003em; }
input[type=text],input[type=url],input[type=password],input[type=datetime-local],input[type=number],input[type=date],input[type=time],input[type=email],input[type=search],input[type=tel],textarea,select{
  width:100%; padding:11px 13px; border:1px solid transparent; border-radius:10px; font:16px/1.35 var(--ui); letter-spacing:-.012em;
  background:var(--surface-2); color:var(--text); transition:border-color .14s, box-shadow .14s, background .14s; }
.card input[type=text],.card input[type=url],.card input[type=password],.card input[type=datetime-local],.card input[type=number],.card input[type=date],.card input[type=time],.card input[type=email],.card input[type=search],.card input[type=tel],.card textarea,.card select{ background:var(--surface-2); }
select{ appearance:none; -webkit-appearance:none; padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8A8E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5-5 5 5M7 14l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important; }
input::placeholder,textarea::placeholder{ color:var(--muted-2); }
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--accent); background-color:var(--surface); box-shadow:0 0 0 4px var(--accent-soft); }
textarea{ min-height:120px; resize:vertical; line-height:1.5; }
input[type=checkbox],input[type=radio]{ accent-color:var(--accent); }
input[type=file]{ font:inherit; color:var(--muted); max-width:100%; }
input[type=file]::file-selector-button{ font:500 14px var(--ui); border:0; background:var(--fill); color:var(--accent-text);
  padding:8px 14px; border-radius:9px; margin-right:10px; cursor:pointer; }
.check{ display:flex; align-items:center; gap:9px; margin:6px 0; font-weight:400; font-size:15px; color:var(--text); }
.check input{ width:auto; }

/* ==========================================================================
   KNAPPER — fyldt (tint), grå (tinted), ren tekst
   ========================================================================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; font:600 15px/1.2 var(--ui); letter-spacing:-.016em;
      background:var(--accent); color:var(--on-accent) !important; border:0; padding:10px 18px; border-radius:12px; cursor:pointer;
      text-decoration:none !important; box-shadow:none; transition:background .15s, transform .1s, opacity .15s; -webkit-tap-highlight-color:transparent; min-height:42px; }
.btn:hover{ background:var(--accent-h); }
.btn:active{ opacity:.75; transform:scale(.98); }
.btn[disabled],.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.btn.secondary{ background:var(--fill); color:var(--accent-text) !important; }
.btn.secondary:hover{ background:color-mix(in srgb,var(--fill) 100%,var(--text) 6%); }
.btn.dark{ background:var(--inverse); color:var(--on-inverse) !important; }
.btn.dark:hover{ opacity:.88; }
.btn.ghost{ background:transparent; color:var(--accent-text) !important; padding-left:10px; padding-right:10px; }
.btn.ghost:hover{ background:var(--fill-2); }
.btn.big{ font-size:17px; padding:14px 24px; min-height:50px; border-radius:14px; }
.btn.sm{ font-size:13.5px; padding:6px 12px; min-height:32px; border-radius:999px; }
.btn .ic{ stroke-width:2; }

/* ==========================================================================
   TABELLER, PILLER, LISTER
   ========================================================================== */
.tscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
table{ width:100%; border-collapse:collapse; font-size:14px; }
th,td{ text-align:left; padding:11px 10px; border-bottom:.5px solid var(--line); }
th{ color:var(--muted); font-weight:500; font-size:12.5px; border-bottom-color:var(--line); }
tr:last-child td{ border-bottom:0; }
.pill{ display:inline-block; font-size:12px; padding:3px 10px; border-radius:999px; font-weight:600; }
.tag{ display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; }
.tag.ok{ background:var(--ok-bg); color:var(--ok); } .tag.warn{ background:var(--warn-bg); color:var(--warn); }
.tag.bad{ background:var(--bad-bg); color:var(--bad); } .tag.ai{ background:var(--ai-bg); color:var(--ai); }
details > summary{ cursor:pointer; }

/* Flash-beskeder (flash_render) */
.flash,.msg{ border-radius:12px; padding:12px 14px; margin-bottom:16px; font-size:14.5px; background:var(--surface); }
.flash.ok,.msg.ok{ background:var(--ok-bg); color:var(--ok); border-color:transparent; }
.flash.error,.msg.error,.flash.err{ background:var(--bad-bg); color:var(--bad); border-color:transparent; }

/* Kom godt i gang */
.steps{ list-style:none; margin:0; padding:0; }
.step{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.step:last-child{ border-bottom:0; }
.step .num{ flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-weight:650; font-size:14px; background:var(--surface-3); color:var(--muted); }
.step.done .num{ background:var(--ok-bg); color:var(--ok); }
.step.current .num{ background:var(--accent); color:#fff; }
.step .body{ flex:1; min-width:0; }
.step .body .t{ font-weight:600; }
.step.done .body .t{ color:var(--muted); text-decoration:line-through; }
.step .body .d{ font-size:13px; color:var(--muted); margin-top:2px; }
.step .act{ flex:none; align-self:center; }

/* Kalender */
.cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.cal .dow{ font-size:12px; color:var(--muted); text-align:center; font-weight:600; }
.cal .cell{ border:1px solid var(--line); border-radius:10px; min-height:84px; padding:7px; background:var(--surface); min-width:0; transition:box-shadow .15s,border-color .15s; }
.cal .cell:hover{ border-color:var(--line-strong); }
.cal .cell .dnum{ font-size:11.5px; color:var(--muted); font-weight:600; }
.cal .cell.empty{ background:transparent; border:0; }
.dot{ display:block; font-size:11px; line-height:1.3; padding:3px 7px; border-radius:6px; color:#fff; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.legend{ display:flex; flex-wrap:wrap; gap:12px; font-size:13px; margin-bottom:12px; color:var(--text-2); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.chartwrap{ width:100%; overflow-x:auto; }

/* Nr. 1-score */
.n1{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:13px; padding:3px 9px 3px 4px; border-radius:7px;
     background:var(--inverse); color:var(--on-inverse); white-space:nowrap; }
.n1 b{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:22px; border-radius:5px; font-size:14px; padding:0 4px; color:#fff; }
.n1.hi b{ background:#15803D; } .n1.mid b{ background:#B7791F; } .n1.lo b{ background:#AF2B1E; }
.n1list{ list-style:none; margin:8px 0 0; padding:0; font-size:13px; }
.n1list li{ display:flex; gap:8px; padding:3px 0; color:var(--text-2); }
.n1list li i{ font-style:normal; font-weight:700; width:16px; flex:none; }
.n1list li.y i{ color:var(--ok); } .n1list li.n i{ color:var(--accent-text); }

.footer-cred{ text-align:center; color:var(--muted-2); font-size:12px; padding:18px 0 8px; }

/* ==========================================================================
   UPLOADER (delt: forside, ark, bibliotek)
   ========================================================================== */
.up-drop{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
          border:1.5px dashed var(--line-strong); border-radius:14px; padding:26px 16px; background:var(--surface-2); color:var(--accent-text);
          cursor:pointer; transition:border-color .15s, background .15s, color .15s; }
.up-drop:hover,.up-drop.over{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-text); }
.up-drop .ic{ width:30px; height:30px; stroke-width:1.5; }
.up-drop-t{ font-weight:600; font-size:15px; color:var(--text); }
.up-drop-s{ font-size:12.5px; color:var(--muted); max-width:420px; }
.up-drop input[type=file]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.up-pick{ display:flex; gap:8px; margin-top:10px; }
.up-pick .btn{ flex:1; }
.up-fields{ display:grid; grid-template-columns:1fr; gap:0; }
.up-q{ margin-top:14px; }
.up-qh{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:14px; }
.up-qh .muted{ font-size:12.5px; }
.up-bar{ height:6px; background:var(--chart-track); border-radius:6px; overflow:hidden; margin:8px 0 10px; }
.up-bar > div{ height:100%; width:0; background:var(--accent); border-radius:6px; transition:width .25s; }
.up-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; max-height:320px; overflow:auto; padding:2px; }
.up-it{ border:.5px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface); font-size:11px; position:relative; }
.up-it .th{ width:100%; height:66px; object-fit:cover; display:block; background:var(--surface-3); }
.up-it .vid{ width:100%; height:66px; display:grid; place-items:center; background:var(--surface-3); color:var(--muted); }
.up-it .nm{ padding:4px 6px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-2); }
.up-it .stt{ padding:0 6px 5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.up-it.ok{ border-color:color-mix(in srgb,var(--ok) 40%,var(--line)); } .up-it.ok .stt{ color:var(--ok); font-weight:600; }
.up-it.dup .stt{ color:var(--muted); font-weight:600; }
.up-it.err{ border-color:color-mix(in srgb,var(--bad) 45%,var(--line)); } .up-it.err .stt{ color:var(--bad); font-weight:600; white-space:normal; }
.up-it.busy .stt{ color:var(--info); }
.up-it.video .stt{ color:var(--ai); font-weight:600; }
.up-it .x{ position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; border:0; background:rgba(0,0,0,.55); color:#fff;
           display:grid; place-items:center; padding:0; cursor:pointer; }
.up-acts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.up-done{ margin-top:10px; font-size:13.5px; color:var(--text-2); }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }
@media print{ .side,.mtop,.tabbar,.sheet,.scrim{ display:none !important; } .main{ margin:0; } }

/* ---------- SVG-grafer med faste farver følger temaet ---------- */
.wrap svg [fill="#b9b3aa"],.wrap svg [fill="#9a968f"],.wrap svg [fill="#8a8e95"],.wrap svg [fill="#6f6a62"],.wrap svg [fill="#6b7280"]{ fill:var(--muted); }
.wrap svg [fill="#e6e3db"],.wrap svg [fill="#ece9e4"]{ fill:var(--surface-3); }
.wrap svg [fill="#f4f2ee"]{ fill:var(--surface-2); }
.wrap svg [fill="#14171c"]{ fill:var(--text); }
.wrap svg [stroke="#cdc8bd"],.wrap svg [stroke="#d8d3c8"],.wrap svg [stroke="#cfcdc8"],.wrap svg [stroke="#b9b3aa"]{ stroke:var(--line-strong); }
.wrap svg [stroke="#ecebe8"],.wrap svg [stroke="#eee"]{ stroke:var(--line); }