/* ==========================================================================
   SCENEN
   Genbrugelig motor til deterministiske, scrubbare procesfigurer.
   Mønsteret er hentet fra Cursors git-at-any-scale, men farvelaget er skrevet
   om til Calibre: ingen kulør, tone er fylde.
   ========================================================================== */
:root{
  color-scheme: light;
  /* Calibre, låste værdier */
  --grund:#faf9f5;
  --panel:#f0eee7;
  --kort:#fffffd;
  --felt:#f4f3ee;
  --raekke-hover:#f0efea;
  --raekke-valgt:#eae9e2;
  --sel:#e9e9e8;
  --pille:#f3f3f2;
  --pille-aktiv:#eae9e2;
  --haarlinje:#e5e2d9;
  --blaek:#1b1b1a;
  --t1:#3c3b37;
  --t2:#53524e;
  --t3:#6d6c66;
  --blaek-1:#c0beb3;
  --blaek-2:#a09d93;
  --blaek-3:#5a5954;
  --skifer:#516379;
  /* Calibres bevægelseslov */
  --t-tilstand:.06s;
  --t-arbejde:.15s;
  --t-udtryk:.3s;
  --kurve:cubic-bezier(.32,.72,0,1);
  --ring: color-mix(in srgb, var(--blaek) 6%, transparent);
  --ring-staerk: color-mix(in srgb, var(--blaek) 8.8%, transparent);
  --loeft: 0 0 0 1px var(--ring-staerk), 0 1px 0 color-mix(in srgb, var(--blaek) 4%, transparent), 0 3px 6px -2px color-mix(in srgb, var(--blaek) 2%, transparent);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--grund); color:var(--blaek);
  font:400 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:56px 24px 160px}
h1{font-size:30px;line-height:1.1;letter-spacing:-.02em;margin:0 0 10px;font-weight:600}
.lede{color:var(--t2);max-width:64ch;margin:0 0 8px}
.meta{color:var(--t3);font-size:12.5px;letter-spacing:.02em;margin:0 0 36px}
h2{font-size:17px;margin:56px 0 8px;font-weight:600}
p{color:var(--t2);max-width:68ch}
code{font-size:.92em;background:var(--felt);padding:1px 5px;border-radius:4px;color:var(--t1)}

/* ---------- figurens skal ---------- */
.scene{
  background:var(--kort); border-radius:10px; box-shadow:var(--loeft);
  overflow:hidden; margin:26px 0;
}
.scene__controls{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
  padding:14px 16px; border-bottom:1px solid var(--haarlinje); background:var(--felt);
}
@media (max-width:760px){ .scene__controls{grid-template-columns:1fr} }
.ctl{display:flex;flex-direction:column;gap:6px;min-width:0}
.ctl__label{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--t3);letter-spacing:.02em}
.ctl__label b{color:var(--t1);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.slider{position:relative;display:block;width:100%;height:22px;padding:8px 0;cursor:pointer;touch-action:none;user-select:none}
.slider:focus-visible{outline:none}
.slider:focus-visible .slider__track{box-shadow:0 0 0 2px var(--kort), 0 0 0 4px var(--skifer)}
.slider__track{position:relative;display:block;height:5px;border-radius:999px;background:var(--raekke-valgt);border:1px solid var(--haarlinje)}
.slider__fill{position:absolute;left:-1px;top:-1px;bottom:-1px;border-radius:999px;background:var(--blaek-3)}
.slider__mark{position:absolute;top:50%;width:4px;height:4px;border-radius:999px;background:var(--blaek-1);transform:translate(-50%,-50%);border:1px solid var(--kort)}
.slider__mark[data-on]{background:var(--blaek-3)}
.slider__thumb{position:absolute;top:50%;width:13px;height:13px;border-radius:999px;background:var(--kort);border:1.5px solid var(--blaek-3);transform:translate(-50%,-50%);box-shadow:0 1px 3px #0000001f}
.scene__stagewrap{position:relative;background:var(--kort)}
svg.stage{display:block;width:100%;height:auto;background:var(--kort);user-select:none}
svg.stage *{pointer-events:none}
svg.stage[data-interactive] .node[data-interactive]{pointer-events:all;cursor:pointer}
.scene__transport{
  display:flex;align-items:center;gap:12px;padding:10px 16px;
  border-top:1px solid var(--haarlinje);background:var(--felt);
}
.btn{
  border:1px solid var(--haarlinje);background:var(--kort);color:var(--t1);
  border-radius:6px;padding:6px 11px;font:500 12px/1 Inter,ui-sans-serif,system-ui,sans-serif;
  cursor:pointer;transition:background var(--t-tilstand) var(--kurve), border-color var(--t-tilstand) var(--kurve);
}
.btn:is(:hover, [data-hover]){background:var(--raekke-hover)}
.btn[aria-pressed="true"]{background:var(--pille-aktiv);border-color:var(--blaek-1)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--felt),0 0 0 4px var(--skifer)}
.scrub{flex:1;min-width:120px}
.scrub input{width:100%;accent-color:var(--blaek-3)}
.tspan{font-size:11.5px;color:var(--t3);min-width:118px;text-align:right;font-variant-numeric:tabular-nums}
.scene__phases{display:grid;border-top:1px solid var(--haarlinje);background:var(--felt)}
.scene__phases span{
  padding:9px 6px;border-right:1px solid var(--haarlinje);text-align:center;
  font-size:11.5px;letter-spacing:.04em;color:var(--t3);text-transform:uppercase;
}
.scene__phases span:last-child{border-right:0}
.scene__phases span[data-on]{background:var(--raekke-valgt);color:var(--blaek);font-weight:600;box-shadow:inset 0 0 0 1px var(--blaek-1)}
.scene__foot{padding:12px 16px;border-top:1px solid var(--haarlinje);background:var(--felt);color:var(--t2);font-size:13px}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;font-size:12px;color:var(--t3)}
.legend i{display:inline-block;width:22px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px;border:1px solid var(--blaek-2)}
@media (prefers-reduced-motion: reduce){ .btn{transition:none} }