/* =========================================================================
   Tråden: appens stilfil. LÅST DESIGN.

   Detta ÄR designen, inte en beskrivning av den. Appen importerar den här
   filen rakt av. Bygg aldrig om utseendet från minnet eller från en
   skärmdump, och skriv aldrig egna färger eller storlekar i appens komponenter:
   allt går via variablerna nedan.

   Filen är extraherad ur skiss.html, som av tekniska skäl måste bära sin CSS
   inline (den publiceras som artifact och får inte länka lokala filer).
   Ändrar du skissen, kör om extraktionen enligt design/README.md.

   Ett tema, mörkt. Beslut Ludvig 2026-09-04. Inget ljust läge byggs.

   Färgroller, dessa får inte kastas om:
     --accent (bärnsten)  = du, ditt utfall, allt interaktivt
     --cool   (grönblått) = motparten, och din gissning i gapvyn
     --danger             = ENDAST destruktiva handlingar, aldrig ditt resultat

   Paletten är validerad för färgseendebrister mot ytan #1A1D17:
     deutan ΔE 12,0 · protan ΔE 12,0 · tritan ΔE 24,2 · normalseende ΔE 18,6
     kontrast mot ytan över 3:1 för båda. Byter du en färg, validera om.

   Typsnitt: Familjen Grotesk (Letters from Sweden) för allt utom siffror
   och etiketter, IBM Plex Mono för siffror, tidsstämplar och versaletiketter.
   Appen är ett mätinstrument och ska se ut som ett.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
/* ---------- tokens: appen har ETT tema, morkt. Beslut Ludvig 2026-09-04. ---------- */
:root{
  color-scheme:dark;
  --bg:#12140F; --surface:#1A1D17; --surface-2:#22261E; --surface-3:#2A2F26;
  --line:#2E332A; --line-soft:#252A22;
  --ink:#E9EAE1; --ink-2:#9BA093; --ink-3:#6E7468;
  --accent:#C68326;        /* du / utfall / interaktivt */
  --accent-soft:#3a2c12;
  --cool:#3FA98D;          /* motparten / gissning */
  --cool-soft:#14312a;
  --danger:#B4573F;
  --on-accent:#12140F;
  --grid:#22261E;
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --r:14px;
}


*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- flikfält ---------- */
.tabbar{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);
  background:var(--surface);padding:9px 10px 20px}
.tab{background:none;border:0;cursor:pointer;color:var(--ink-3);padding:8px 4px 6px;
  display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:10px;
  font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.07em;text-transform:uppercase}
.tab svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.tab[aria-selected="true"]{color:var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- generella skärmdelar ---------- */
.screen{display:none;flex-direction:column;gap:18px}
.screen.on{display:flex}
.eyebrow{font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
h2.sh{font-size:25px;line-height:1.15;margin:6px 0 0;letter-spacing:-.02em;font-weight:600;text-wrap:balance}
.sub{color:var(--ink-2);margin:0;font-size:13.5px}
.card{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px}
.rowsplit{display:flex;justify-content:space-between;align-items:baseline;gap:12px}

/* segmenterad lägesväljare */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:var(--surface-3);
  padding:4px;border-radius:12px}
.mode{border:0;background:none;color:var(--ink-2);cursor:pointer;border-radius:9px;padding:9px 4px 8px;
  font:500 12px/1.35 "Familjen Grotesk",sans-serif;display:flex;flex-direction:column;gap:3px;align-items:center}
.mode small{font:500 9px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.mode[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.mode[aria-pressed="true"] small{color:var(--accent)}
.mode:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* scenariolista */
.scenlist{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.scen{background:var(--surface-2);border:0;cursor:pointer;text-align:left;padding:13px 15px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--ink);font:400 14px/1.3 inherit}
.scen:hover{background:var(--surface-3)}
.scen[aria-pressed="true"]{background:var(--surface-3)}
.scen[aria-pressed="true"] .dot{background:var(--accent);border-color:var(--accent)}
.scen:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.scen span.meta{font:400 11px/1 "IBM Plex Mono",monospace;color:var(--ink-3);letter-spacing:.04em}
.scen .label{display:flex;align-items:center;gap:11px;min-width:0}
.dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink-3);flex:none}

.field{width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:13px 14px;font:400 14px/1.45 inherit;resize:none}
.field::placeholder{color:var(--ink-3)}
.field:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.hint{font-size:11.5px;color:var(--ink-3);margin:0}

.btn{width:100%;border:0;border-radius:13px;padding:16px;cursor:pointer;
  font:600 15px/1 "Familjen Grotesk",sans-serif;background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;gap:9px}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink-2);font-weight:500}
.btn.ghost:hover{border-color:var(--ink-3);color:var(--ink);filter:none}
.btn.quiet{background:var(--surface-3);color:var(--ink)}

/* ---------- samtalsskärmen ---------- */
.call{align-items:center;text-align:center;gap:0;padding-top:14px;min-height:calc(100% - 10px)}
.callwrap{display:flex;flex-direction:column;align-items:center;gap:26px;flex:1;justify-content:center;padding:26px 0}
.persona{width:96px;height:96px;border-radius:50%;background:var(--cool-soft);
  border:1px solid var(--cool);display:grid;place-items:center;
  font:500 27px/1 "Familjen Grotesk",sans-serif;color:var(--cool)}
.wave{display:flex;align-items:center;justify-content:center;gap:3.5px;height:64px;width:100%}
.wave i{width:3px;border-radius:2px;background:var(--cool);opacity:.55;height:var(--h,26px);
  animation:pulse 1.15s ease-in-out infinite}
@keyframes pulse{0%,100%{height:9px;opacity:.32}50%{height:var(--h,26px);opacity:.95}}
@media(prefers-reduced-motion:reduce){.wave i{animation:none;height:var(--h,26px);opacity:.6}}
.timer{font:500 40px/1 "IBM Plex Mono",monospace;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.talkstate{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---------- feedback ---------- */
.stepdots{display:flex;gap:6px;justify-content:center;padding:2px 0 0}
.stepdots i{width:22px;height:3px;border-radius:2px;background:var(--line)}
.stepdots i.on{background:var(--accent)}

.quote{border-left:2px solid var(--line);padding-left:14px;display:flex;flex-direction:column;gap:11px;margin:0}
.turn{display:flex;gap:10px;align-items:flex-start}
.who{font:500 10px/1.6 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;
  flex:none;width:34px;padding-top:1px}
.turn.her .who{color:var(--cool)} .turn.you .who{color:var(--accent)}
.turn p{margin:0;font-size:13.5px;line-height:1.5}
.turn.miss p{color:var(--ink-2)}
.tstamp{font:400 11px/1 "IBM Plex Mono",monospace;color:var(--ink-3)}

.playrow{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--surface-3);
  border-radius:11px;cursor:pointer;border:0;width:100%;color:var(--ink)}
.playrow svg{width:16px;height:16px;fill:var(--accent);flex:none}
.playbar{flex:1;height:3px;background:var(--line);border-radius:2px;position:relative;overflow:hidden}
.playbar::after{content:"";position:absolute;inset:0 62% 0 0;background:var(--accent);border-radius:2px}

.verdict{background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 40%,transparent);
  border-radius:12px;padding:13px 14px;font-size:13.5px;line-height:1.5}
.verdict b{color:var(--accent)}
.warnbox{background:var(--surface-3);border:1px solid var(--line);border-left:3px solid var(--danger);
  border-radius:10px;padding:12px 13px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.warnbox b{color:var(--ink)}

/* mätrader */
.metric{display:grid;grid-template-columns:1fr 74px 62px;gap:12px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--line-soft)}
.metric:last-child{border-bottom:0}
.mname{font-size:13px;line-height:1.3}
.mname em{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace;letter-spacing:.06em;margin-top:3px}
.mval{font:500 15px/1 "IBM Plex Mono",monospace;text-align:right;font-variant-numeric:tabular-nums}
.mval s{text-decoration:none;color:var(--ink-3);font-size:11px}

/* ---------- fält ---------- */
.ladder{display:flex;flex-direction:column;gap:0}
.rung{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.rung:last-child{border-bottom:0}
.rung .n{font:500 11px/1 "IBM Plex Mono",monospace;color:var(--ink-3);
  border:1px solid var(--line);border-radius:6px;padding:5px 0;text-align:center}
.rung.done .n{background:var(--cool-soft);border-color:var(--cool);color:var(--cool)}
.rung.now{color:var(--ink)}
.rung.now .n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rung.next{color:var(--ink-3)}
.rung .tag{font:400 10px/1 "IBM Plex Mono",monospace;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}

.slider{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.slider:last-of-type{border-bottom:0}
.slider .rowsplit span:first-child{font-size:13.5px}
.slider output{font:500 15px/1 "IBM Plex Mono",monospace;color:var(--accent);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:var(--surface-3)}
input[type=range]::-moz-range-track{height:4px;border-radius:3px;background:var(--surface-3)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--accent);margin-top:-8px;border:3px solid var(--surface-2)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);
  border:3px solid var(--surface-2)}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- diagram ---------- */
.hero{display:flex;flex-direction:column;gap:5px;padding:2px 0 4px}
.heronum{font:500 44px/1 "IBM Plex Mono",monospace;letter-spacing:-.03em;color:var(--accent);
  font-variant-numeric:tabular-nums}
.herotxt{font-size:13.5px;color:var(--ink-2);margin:0;max-width:30ch}
.legend{display:flex;gap:16px;align-items:center;font:400 11px/1 "IBM Plex Mono",monospace;
  color:var(--ink-2);letter-spacing:.04em;flex-wrap:wrap}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:-1px}
.chartwrap{overflow-x:auto}
.tip{position:fixed;pointer-events:none;background:var(--surface-3);border:1px solid var(--line);
  border-radius:9px;padding:8px 10px;font:400 11.5px/1.45 "IBM Plex Mono",monospace;
  color:var(--ink);box-shadow:var(--shadow);opacity:0;transition:opacity .12s;z-index:50;white-space:nowrap}
.tip.on{opacity:1}
table.data{width:100%;border-collapse:collapse;font:400 11.5px/1 "IBM Plex Mono",monospace}
table.data th,table.data td{padding:7px 6px;border-bottom:1px solid var(--line-soft);text-align:right}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data th{color:var(--ink-3);font-weight:500;letter-spacing:.05em}
table.data td{font-variant-numeric:tabular-nums}
details.tbl summary{cursor:pointer;font:400 11px/1 "IBM Plex Mono",monospace;color:var(--ink-3);
  letter-spacing:.06em;padding:8px 0;list-style:none}
details.tbl summary::-webkit-details-marker{display:none}
details.tbl summary::before{content:"› ";color:var(--accent)}
details.tbl[open] summary::before{content:"⌄ "}