/* Ikier UI kit · edition 06 — ikier.css
   One stylesheet, two surfaces. Bone is the default working surface; add .s-carbon to any container to flip it.
   Every value comes from _tokens.py (kit/tokens.json). Contrast is measured (WCAG 2.2): see AGENTS.md §4. */

@font-face{font-family:"Schibsted Grotesk";src:url("fonts/SchibstedGrotesk.ttf")format("truetype");font-weight:400 900;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";font-style:italic;src:url("fonts/SchibstedGrotesk-Italic.ttf")format("truetype");font-weight:400 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-var.woff2")format("woff2");font-weight:100 800;font-display:swap}

:root{
  /* owned pair · neutrals */
  --beam:#2F1BE8; --carbon:#111114; --bone:#EFEEEA; --alu:#C5C6CB; --graphite:#5B5C66;
  /* UI-only states of Beam — never used as brand colour */
  --beam-700:#2414C4;   /* pressed · 9.2:1 under Bone text */
  --beam-300:#8C80F4;   /* Beam as text or focus on Carbon · 5.8:1 (Beam itself is 2.2:1 on Carbon) */
  --beam-100:#E3E0FC;   /* selected wash on Bone; Beam text on it 6.7:1 */
  /* not brand colours: function only */
  --amber:#E8920C;      /* laser safety window, nothing else */
  --fault:#D7261E;      /* fault dot, emergency stop, the fault bar */
  --fault-ink:#B81E17;  /* small fault text on Bone · 5.6:1 */
  --fault-ink-c:#F2574E;/* small fault text on Carbon · 5.6:1 */

  --sans:"Schibsted Grotesk","Helvetica Neue",Arial,"Noto Sans SC","PingFang SC",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,"Noto Sans SC",monospace;

  /* space · 8 px base */
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:104px;
  --r-ctl:6px; --r-card:10px;
  --ease-beam:cubic-bezier(.2,.7,.1,1); --t-ui:200ms; --t-wipe:1200ms;
  --slant:11deg;

  /* surface: Bone (default) — Carbon ink ladder; 62 % is the small-text floor (5.0:1) */
  --bg:var(--bone); --card:#F6F5F2; --fg:var(--carbon);
  --ink76:rgba(17,17,20,.76); --ink62:rgba(17,17,20,.62); --ink50:rgba(17,17,20,.5);
  --hair:rgba(17,17,20,.12); --hair2:rgba(17,17,20,.22);
  --accent-ink:var(--beam); --fault-text:var(--fault-ink); --focus:var(--beam);
  --primary-bg:var(--carbon); --primary-fg:var(--bone);
}
.s-carbon{
  --bg:var(--carbon); --card:#18181C; --fg:var(--bone);
  --ink76:rgba(239,238,234,.76); --ink62:rgba(239,238,234,.62); --ink50:rgba(239,238,234,.5);
  --hair:rgba(239,238,234,.14); --hair2:rgba(239,238,234,.26);
  --accent-ink:var(--beam-300); --fault-text:var(--fault-ink-c); --focus:var(--beam-300);
  --primary-bg:var(--bone); --primary-fg:var(--carbon);
  background:var(--bg); color:var(--fg);
}
.s-bone{background:var(--bg);color:var(--fg)}
.s-beam{ /* a Beam flood: Bone ink only, ≥ 76 % for text under 24 px */
  --bg:var(--beam); --fg:var(--bone); --ink76:rgba(239,238,234,.8); --ink62:rgba(239,238,234,.8); --ink50:rgba(239,238,234,.62);
  --hair:rgba(239,238,234,.24); --accent-ink:var(--bone); --focus:var(--bone);
  --primary-bg:var(--bone); --primary-fg:var(--beam);
  background:var(--beam); color:var(--bone);
}

*,*:before,*:after{box-sizing:border-box}
.ik{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--fg);background:var(--bg);
  -webkit-font-smoothing:antialiased;font-variant-ligatures:none;font-feature-settings:"ss01" 0}
.ik :where(h1,h2,h3,h4,p,figure,ul,ol){margin:0;padding:0}
.ik :where(img){display:block;max-width:100%}
.ik :where(a){color:inherit}

/* ── type roles ── */
.tele{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.55;color:var(--ink62)}
.tele .ix,.ix{color:var(--accent-ink)}
.num{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:0}
.hl{font-weight:800;letter-spacing:-.04em;line-height:.96;color:var(--fg)}            /* headline: claim at 800 … */
.hl .a{font-weight:400;color:var(--ink62);letter-spacing:-.035em}                      /* … answer at 400, 62 % */
.s-beam .hl .a{color:rgba(239,238,234,.76)}
.hl.stack .a{display:block}                                                            /* answer on its own line */
.hl-xl{font-size:clamp(48px,7.4vw,124px);letter-spacing:-.05em;line-height:.88}
.hl-l{font-size:clamp(36px,4.4vw,72px)}
.hl-m{font-size:clamp(28px,2.8vw,44px)}
.hl-s{font-size:24px;letter-spacing:-.03em;line-height:1.05}
.lead{font-size:clamp(17px,1.35vw,21px);line-height:1.45;color:var(--ink76);max-width:46ch}
.body{font-size:16px;line-height:1.55;color:var(--ink76);max-width:62ch}
.small{font-size:13px;line-height:1.5;color:var(--ink62)}

/* ── layout ── */
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 clamp(16px,5.8vw,112px)}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.hr{border:0;border-top:1px solid var(--hair);margin:0}
.stack>*+*{margin-top:var(--s2)}

/* ── buttons: one Beam key per view (the action that starts light), one primary, the rest outline ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border-radius:var(--r-ctl);
  font:650 15px/1 var(--sans);letter-spacing:-.005em;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--t-ui) var(--ease-beam),border-color var(--t-ui) var(--ease-beam),color var(--t-ui) var(--ease-beam)}
.btn:focus-visible,.field input:focus-visible,.chip:focus-visible,.tab:focus-visible,.seg button:focus-visible,.toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn-primary{background:var(--primary-bg);color:var(--primary-fg)}
.btn-primary:hover{opacity:.88}
.btn-key{background:var(--beam);color:var(--bone)}                 /* the Beam key: Start, Buy, Back this project */
.btn-key:hover{background:var(--beam-700)}
.s-beam .btn-key{background:var(--bone);color:var(--beam)}
.btn-line{background:transparent;color:var(--fg);border-color:var(--hair2)}
.btn-line:hover{border-color:var(--fg)}
.btn-quiet{background:transparent;color:var(--fg);padding:0 8px;height:36px}
.btn-quiet:hover{color:var(--accent-ink)}
.btn-fault{background:transparent;color:var(--fault-text);border-color:currentColor}
.btn-sm{height:34px;padding:0 14px;font-size:13px}
.btn-lg{height:56px;padding:0 28px;font-size:17px}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn .arw{font-family:var(--mono);font-weight:500}

/* ── chips, tabs, segmented, toggle ── */
.chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--hair2);
  font:500 13px/1 var(--sans);color:var(--ink76);background:transparent;cursor:pointer;white-space:nowrap}
.chip[aria-pressed=true],.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--hair)}
.tab{position:relative;padding:12px 0 14px;font:500 15px/1 var(--sans);color:var(--ink62);background:none;border:0;cursor:pointer}
.tab[aria-selected=true]{color:var(--fg)}
.tab[aria-selected=true]:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--fg)}
.seg{display:inline-flex;padding:3px;border-radius:calc(var(--r-ctl) + 3px);background:var(--hair)}
.seg button{height:32px;padding:0 14px;border:0;border-radius:var(--r-ctl);background:transparent;font:500 13px/1 var(--sans);color:var(--ink76);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--bg);color:var(--fg);box-shadow:0 0 0 1px var(--hair)}
.toggle{position:relative;width:44px;height:26px;border-radius:99px;background:var(--hair2);border:0;cursor:pointer;flex:none}
.toggle:after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--bg);transition:transform var(--t-ui) var(--ease-beam)}
.toggle[aria-checked=true]{background:var(--fg)}
.toggle[aria-checked=true]:after{transform:translateX(18px)}

/* ── fields ── */
.field{display:grid;gap:8px}
.field label{font:500 13px/1.3 var(--sans);color:var(--ink76)}
.field input,.field select{height:44px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid var(--hair2);background:transparent;
  font:400 15px/1 var(--sans);color:var(--fg)}
.field input::placeholder{color:var(--ink50)}
.field .unit{position:relative}.field .unit input{width:100%;padding-right:52px;font-family:var(--mono)}
.field .unit span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font:500 12px/1 var(--mono);color:var(--ink62)}
.field .hint{font-size:13px;color:var(--ink62)}
.field.err input{border-color:var(--fault-text)}
.field.err .hint{color:var(--fault-text)}
.field.err .hint:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--fault);margin-right:8px;vertical-align:1px}

/* ── status light: the machine's ready line, as UI. off · ready (Beam) · pulse (done) · fault (red) ── */
.status{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink76)}
.status i{width:10px;height:10px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink50);flex:none}
.status.ready i{background:var(--beam);box-shadow:none}
.s-carbon .status.ready i{background:var(--beam-300)}
.status.pulse i{background:var(--beam);box-shadow:0 0 0 4px rgba(47,27,232,.22);animation:ik-pulse 1.6s var(--ease-beam) 1}
.s-carbon .status.pulse i{background:var(--beam-300);box-shadow:0 0 0 4px rgba(140,128,244,.28)}
.status.fault{color:var(--fault-text)} .status.fault i{background:var(--fault);box-shadow:none}
@keyframes ik-pulse{0%{box-shadow:0 0 0 0 rgba(47,27,232,.5)}100%{box-shadow:0 0 0 14px rgba(47,27,232,0)}}
.readyline{height:3px;width:100%;background:var(--hair)}
.readyline.ready{background:var(--beam)} .readyline.fault{background:var(--fault)}
.s-carbon .readyline.ready{background:var(--beam-300)}   /* thin Beam on Carbon is 2.2:1 — the line glows lighter on dark */

/* ── progress: the end is cut at the wordmark's 11° ── */
.progress{height:6px;border-radius:0;background:var(--hair);overflow:hidden}
.progress b{display:block;height:100%;background:var(--fg);clip-path:polygon(0 0,100% 0,calc(100% - 1.17px) 100%,0 100%)}
.progress.beam b{background:var(--beam)} .s-carbon .progress.beam b{background:var(--beam-300)}

/* ── cards, tables, badges, kbd ── */
.card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--s3)}
.card-flat{border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--s3)}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--hair2);color:var(--ink76)}
.badge.key{background:var(--beam);border-color:var(--beam);color:var(--bone)}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink62);padding:0 16px 10px 0;border-bottom:1px solid var(--hair2)}
.tbl td{padding:13px 16px 13px 0;border-bottom:1px solid var(--hair);color:var(--ink76);vertical-align:top}
.tbl td:first-child{color:var(--fg)}
.tbl .num,.tbl td.n{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}
.tbl td.r,.tbl th.r{text-align:right;padding-right:0}
.spec{display:grid;grid-template-columns:minmax(120px,1fr) 2fr;border-top:1px solid var(--hair)}
.spec>*{padding:14px 0;border-bottom:1px solid var(--hair)}
.spec dt{font:500 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink62);padding-top:17px}
.spec dd{margin:0;font:500 15px/1.5 var(--mono);color:var(--fg)}
kbd{font:500 11px/1 var(--mono);padding:3px 6px;border:1px solid var(--hair2);border-radius:4px;color:var(--ink76)}

/* ── toast: the only floating element casts the only shadow ── */
.toast{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r-card);background:var(--carbon);color:var(--bone);
  box-shadow:0 18px 40px -16px rgba(17,17,20,.45);font-size:15px;max-width:420px}
.s-carbon .toast{background:var(--bone);color:var(--carbon)}
.toast .status{color:inherit}

/* ── the mark, inline ── */
.mark-ss{display:block;fill:currentColor}
.spark-ic{display:inline-block;width:1em;height:1em;vertical-align:-.12em;fill:currentColor}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}