/* Same document language as the Checkout project's spec.html — one format for
   every handoff. No local values. */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --ink:#141414; --body-c:#5C5C56; --meta:#8F8F8A;
  --line:#E7E7E3; --panel:#F6F6F3; --accent:#E4572E;
  --ui-font:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
}

html,body { background:#fff; color:var(--ink); font-family:var(--ui-font); -webkit-font-smoothing:antialiased; }
body { padding:0 0 120px; }
a { color:inherit; }
code { font-family:var(--mono); font-size:0.92em; }

.wrap { width:max-content; min-width:100%; padding:0 40px; }

/* ---- doc type system: h1 48 · h2 34 · ui 14 · mono 13 ---- */
.head { max-width:820px; padding-top:48px; }
.head h1 { font-size:48px; font-weight:600; letter-spacing:-0.03em; line-height:1.1; }
.head p { margin-top:14px; font-size:16px; line-height:1.6; color:var(--body-c); max-width:64ch; }

.links a, .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ui-font); font-size:14px; font-weight:600; color:var(--ink);
  background:#fff; border:1px solid #D8D8D3; border-radius:8px; padding:9px 16px; cursor:pointer;
  text-decoration:none;
}
.links a:hover, .btn:hover { background:var(--panel); }
.btn.on { background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---- top bar: module (left) · skin (centre, prototypes only) · width (right) ---- */
.bar { position:sticky; top:0; z-index:20; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.bar-in { position:relative; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 40px; }
.modes { display:flex; gap:8px; }
.bar-right { display:flex; align-items:center; gap:16px; }
.page-link { font-size:13px; font-weight:600; color:var(--meta); text-decoration:none; }
.page-link:hover { color:var(--ink); }

.skin-switch {
  position:absolute; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ui-font); font-size:14px; font-weight:600; color:var(--ink);
  background:#fff; border:1px solid #D8D8D3; border-radius:8px; padding:8px 16px; cursor:pointer;
}
.skin-switch:hover { background:var(--panel); }
.skin-switch svg { width:14px; height:14px; color:var(--meta); }

/* Spor og knott, ikke to hvite bokser — i en rad av hvite piller forsvant den.
   Det fylte sporet skiller den fra modul- og drakt-knappene, og glyfen sier hva
   den styrer før du har lest etiketten. */
.seg { display:inline-flex; gap:4px; padding:4px; background:var(--panel); border:1px solid #D8D8D3; border-radius:10px; }
.seg button {
  display:inline-flex; align-items:center; gap:7px;
  border:0; background:none; cursor:pointer; padding:6px 12px; border-radius:7px;
  font-family:var(--ui-font); font-size:13px; font-weight:600; color:var(--body-c);
  transition:background-color 160ms ease, color 160ms ease;
}
.seg button svg { width:15px; height:15px; flex:none; }
.seg button:hover { color:var(--ink); }
.seg button.on { background:var(--ink); color:#fff; }

.toast {
  position:fixed; right:24px; bottom:24px; z-index:30;
  background:var(--ink); color:#fff; border-radius:8px; padding:9px 14px;
  font:500 13px var(--mono); opacity:0; transition:opacity 200ms ease; pointer-events:none;
}
.toast.on { opacity:1; }
.toast.err { background:var(--accent); }

.section-head { margin-top:64px; max-width:820px; }
.section-head h2 { font-size:34px; font-weight:600; letter-spacing:-0.02em; line-height:1.1; }
.section-head p { margin-top:12px; font-size:15px; line-height:1.6; color:var(--body-c); max-width:64ch; }
.links { margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; }

.view { display:none; }
.view.on { display:block; }

/* ---- rows ---- */
.spec-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:9px 0; border-top:1px solid #E3E3DD; }
.spec-row .k { flex:none; font-size:14px; color:var(--body-c); }
.spec-row .v { font:500 13px var(--mono); color:var(--ink); text-align:right; word-break:break-word; }
.sw { display:inline-block; width:12px; height:12px; border-radius:3px; border:1px solid rgba(0,0,0,.12); vertical-align:-1.5px; margin-right:7px; }
.spec-empty { color:var(--meta); font-size:14px; line-height:1.5; }