/* ============================================================
   SPORET, prototype
   Rekonstruktion af Cursors ComposerToc plus en forfinet udgave.
   Alle tal i :root er målt fra cursor.com/grok ved 1600x1000.
   ============================================================ */
:root{
  color-scheme: light;
  /* målte tokens */
  --v: calc(1rem * 1.4);              /* 22.4px, Cursors lodrette rytme */
  --g1: calc(10rem / 16);             /* 10px */
  --g1-5: calc(10rem / 16 * 1.5);     /* 15px */
  --toc-pad-sm: calc(var(--v) / 12);  /* 1.8667px */
  --toc-pad-md: calc(var(--v) * 2 / 12);
  --rail-tick-w: 10px;
  --rail-dot: 6px;
  --rail-gap: 10px;                   /* gap-g1 mellem label og prik */
  --rail-row: 24.7188px;              /* målt rækkehøjde */
  --sticky-top: 64px;
  --header-h: 52px;

  --fg: #26251e;
  --bg: #f7f7f4;
  --accent: #f54e00;
  --text: #26251e;
  --text-sec: color-mix(in oklab, #26251e 60%, transparent);
  --text-ter: color-mix(in oklab, #26251e 40%, transparent);
  --hairline: color-mix(in srgb, var(--fg) 16%, var(--bg));
  --card: color-mix(in srgb, var(--fg) 4%, var(--bg));
  --border: color-mix(in srgb, var(--fg) 10%, var(--bg));
  --ease-out-spring: cubic-bezier(.25, 1, .5, 1);
}
html[data-theme="dark"]{
  color-scheme: dark;
  --fg:#edecec; --bg:#14120b; --text:#edecec;
  --text-sec: color-mix(in oklab, #edecec 60%, transparent);
  --text-ter: color-mix(in oklab, #edecec 40%, transparent);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    color-scheme: dark;
    --fg:#edecec; --bg:#14120b; --text:#edecec;
    --text-sec: color-mix(in oklab, #edecec 60%, transparent);
    --text-ter: color-mix(in oklab, #edecec 40%, transparent);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 400 16px/1.55 ui-sans-serif, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
header.top{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:50;
  background:var(--bg); display:flex; align-items:center; gap:1rem;
  padding:0 20px; border-bottom:1px solid transparent;
}
header.top .mark{font-weight:600; letter-spacing:.14em; font-size:12px; text-transform:uppercase}
header.top .sub{font-size:12px; color:var(--text-ter)}
main{padding-top:calc(var(--header-h) + 80px); padding-inline:20px}
.shell{max-width:1560px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:20px}
@media (min-width:56rem){ .shell{grid-template-columns:minmax(240px,317.5px) minmax(0,1fr) } }
.rail-col{display:none}
@media (min-width:56rem){ .rail-col{display:block} }

/* ---------- Sporet ---------- */
.toc{position:sticky; top:var(--sticky-top); height:fit-content}
.toc__title{
  font-size:14px; line-height:21px; letter-spacing:.14px; font-weight:500;
  color:var(--text); margin:0 0 var(--toc-pad-md) 0;
}
.toc__body{position:relative; margin-left:var(--g1); font-size:14px}
.toc__spine{
  position:absolute; left:0; width:1px; background:var(--hairline);
  top: calc((var(--toc-pad-sm) - var(--toc-pad-md)) / 2);
  bottom: calc(var(--toc-pad-sm) + 0.5lh);
  pointer-events:none;
}
.toc ol{list-style:none; margin:0; padding:0}
.toc li{position:relative; display:grid; align-items:center}
.toc__tick{
  grid-column:1; grid-row:1; height:1px; width:var(--rail-tick-w);
  background: color-mix(in srgb, var(--accent) calc(var(--warm, 0) * 100%), var(--hairline));
  pointer-events:none;
  transform-origin:left center; transform:scaleX(var(--tick, 1));
}
.toc a{
  grid-column:1; grid-row:1; display:flex; align-items:center; gap:var(--rail-gap);
  padding: var(--toc-pad-sm) 0 var(--toc-pad-sm) var(--g1-5);
  color:var(--text-ter); text-decoration:none; line-height:21px; letter-spacing:.14px;
  transition:color .15s cubic-bezier(.4,0,.2,1);
  width:100%;
}
.toc a:is(:hover, [data-hover]){color:var(--text-sec)}
.toc a[data-active]{color:color-mix(in oklab, var(--text) 75%, transparent)}
.toc a:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
/* prikken lever uden for listen, så den kan flyve frit */
.toc__dot{
  position:absolute; left:0; top:0; width:var(--rail-dot); height:var(--rail-dot);
  border-radius:9999px; background:var(--accent); pointer-events:none;
  will-change:transform; transform:translate3d(var(--dx,0px), var(--dy,0px), 0);
  opacity:var(--dot-o, 1);
}
/* replika-tilstand: prikken sidder inde i det aktive link, som hos Cursor */
.toc[data-mode="replica"] .toc__dot{ transition:none }

/* ---------- indhold ---------- */
article section{
  scroll-margin-top:var(--sticky-top);
  padding-block: 0 0; margin-bottom: 96px;
}
article h2{font-size:22px; line-height:1.25; font-weight:600; margin:0 0 12px}
article p{max-width:64ch; color:var(--text-sec); margin:0 0 14px}
article .plate{
  border:1px solid var(--border); border-radius:6px;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--fg) 5%, transparent) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(to bottom, color-mix(in srgb, var(--fg) 5%, transparent) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--card);
  height:var(--plate-h, 200px); margin:18px 0;
  display:grid; place-items:center; color:var(--text-ter); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
}
figure.wave{margin:22px 0 0; border:1px solid var(--border); border-radius:6px; background:var(--card); padding:14px}
figure.wave figcaption{font-size:11px; color:var(--text-ter); letter-spacing:.06em; margin-top:8px}
figure.wave svg{display:block; width:100%; height:auto; aspect-ratio:600/160; overflow:visible; color:var(--text)}
.hero{min-height:min(56vh, 520px); display:grid; align-content:center; gap:10px; margin-bottom:120px}
.hero h1{font-size:clamp(32px,5vw,56px); line-height:1.02; margin:0; letter-spacing:-.02em; font-weight:600}
.hero p{color:var(--text-sec); max-width:56ch}
footer{min-height:70vh}

/* ---------- kontrolpanel ---------- */
.panel{
  position:fixed; right:16px; bottom:16px; z-index:60; width:296px;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--border); border-radius:10px; padding:12px 12px 10px;
  font-size:12px; line-height:1.4; box-shadow:0 12px 40px -18px color-mix(in srgb, var(--fg) 55%, transparent);
}
.panel h3{margin:0 0 8px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-ter); font-weight:500}
.seg{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--border); border-radius:6px; padding:2px; margin-bottom:8px}
.seg button{
  appearance:none; border:0; background:transparent; color:var(--text-sec);
  font:inherit; padding:5px 4px; border-radius:4px; cursor:pointer;
}
.seg button[aria-pressed="true"]{background:var(--bg); color:var(--text); box-shadow:0 1px 2px color-mix(in srgb, var(--fg) 12%, transparent)}
.row{display:flex; justify-content:space-between; gap:8px; color:var(--text-ter); font-variant-numeric:tabular-nums}
.row b{font-weight:500; color:var(--text-sec)}
.opts{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 6px}
.opts label{display:flex; align-items:center; gap:5px; color:var(--text-sec); cursor:pointer}
.note{margin-top:8px; color:var(--text-ter); font-size:11px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }