/* Layout: et langt arkivregister. Smal tekstkolonne, innholdsliste som følger med på store skjermer,
   og et slektsvifte som forside-illustrasjon. Kortene med ferdige spørsmål er utformet som katalogkort. */
:root{
  --paper:#F1F4F2;
  --paper-2:#E3E9E5;
  --card:#FAFBFA;
  --ink:#18212C;
  --ink-soft:#4C5866;
  --rule:#C6D0CA;
  --lingon:#A3303C;
  --moss:#3C6450;
  --ochre:#94650F;
  --unknown:#D4DCD7;
  --on-fill:#FFFFFF;
  --focus:#A3303C;
  --f-display:"IM Fell English", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-body:"Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --s-xs:.8125rem; --s-sm:.9375rem; --s-md:1.0625rem; --s-lg:1.3125rem; --s-xl:1.875rem; --s-2xl:2.625rem; --s-3xl:3.5rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#11161B; --paper-2:#1A222A; --card:#151C22; --ink:#E4E9E5; --ink-soft:#A3AEA8; --rule:#2C3842;
    --lingon:#E37782; --moss:#82B79A; --ochre:#D9A64C; --unknown:#2A343D; --on-fill:#0F1418; --focus:#E37782;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#11161B; --paper-2:#1A222A; --card:#151C22; --ink:#E4E9E5; --ink-soft:#A3AEA8; --rule:#2C3842;
  --lingon:#E37782; --moss:#82B79A; --ochre:#D9A64C; --unknown:#2A343D; --on-fill:#0F1418; --focus:#E37782;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:var(--s-md); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--lingon); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px}
h1,h2{font-family:var(--f-display); font-weight:400; line-height:1.08; text-wrap:balance; margin:0}
h3{font-size:var(--s-lg); line-height:1.25; margin:0; text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.mono{font-family:var(--f-mono)}
.label{font-family:var(--f-mono); font-size:var(--s-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}

/* ---------- Forside ---------- */
.hero{padding-block:56px 40px; border-bottom:1px solid var(--rule)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center}
.hero h1{font-size:clamp(2.6rem, 6vw, var(--s-3xl)); margin-top:14px}
.hero h1 em{font-style:italic; color:var(--lingon)}
.lead{font-size:var(--s-lg); line-height:1.5; margin-top:22px; max-width:34em; color:var(--ink)}
.needs{margin-top:26px; display:flex; flex-wrap:wrap; gap:8px 10px}
.needs span{font-size:var(--s-sm); border:1px solid var(--rule); border-radius:999px; padding:4px 12px; background:var(--card)}
.hero-cta{margin-top:28px; display:flex; flex-wrap:wrap; gap:12px}
.btn{display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:var(--s-sm); font-weight:700; padding:10px 18px; border-radius:6px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); text-decoration:none; cursor:pointer}
.btn.ghost{background:transparent; color:var(--ink)}
.btn:hover{text-decoration:none; filter:brightness(1.08)}
figure.fan{margin:0}
figure.fan svg{width:100%; height:auto; display:block}
.fan path{stroke:var(--paper); stroke-width:1.5; transition:opacity .2s}
.fan path:hover{opacity:.78}
.s-ok{fill:var(--moss)} .s-tree{fill:var(--ochre)} .s-unk{fill:var(--unknown)} .s-you{fill:var(--lingon)}
.fan text{font-family:var(--f-body); font-size:11px; fill:var(--on-fill); pointer-events:none; font-weight:700}
.fan text.you{font-size:13px}
.fan-anim path{animation:grow .6s ease-out backwards}
@keyframes grow{from{opacity:.25}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.fan-anim path{animation:none}}
.legend{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px; font-size:var(--s-sm); color:var(--ink-soft)}
.legend i{display:inline-block; width:12px; height:12px; border-radius:2px; margin-right:7px; vertical-align:-1px}
figcaption{font-size:var(--s-sm); color:var(--ink-soft); margin-top:10px; max-width:36em}

/* ---------- Hovedoppsett ---------- */
.layout{display:grid; grid-template-columns:200px minmax(0,1fr); gap:56px; padding-block:48px 80px}
.toc{position:sticky; top:calc(env(safe-area-inset-top, 0px) + 24px); align-self:start}
.toc ol{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:2px; counter-reset:toc}
.toc a{display:block; padding:5px 0 5px 12px; border-left:2px solid var(--rule); color:var(--ink-soft); text-decoration:none; font-size:var(--s-sm); line-height:1.35}
.toc a:hover, .toc a.on{color:var(--ink); border-left-color:var(--lingon)}
main{min-width:0}
section{padding-block:8px 64px; scroll-margin-top:24px}
section + section{border-top:1px solid var(--rule); padding-top:56px}
.sec-head{max-width:40em; margin-bottom:28px}
.sec-head h2{font-size:clamp(2rem, 4vw, var(--s-2xl))}
.sec-head p{margin-top:14px; color:var(--ink-soft); font-size:var(--s-lg); line-height:1.5}
.prose{max-width:40em; display:grid; gap:16px}

/* Hva Claude er */
.twocol{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px}
.panel{background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:22px 24px}
.panel h3{font-size:var(--s-md); font-family:var(--f-mono); font-weight:500; letter-spacing:.06em; text-transform:uppercase}
.panel.good h3{color:var(--moss)} .panel.warn h3{color:var(--lingon)}
.panel ul{margin:14px 0 0; padding-left:1.1em; display:grid; gap:9px}
.panel li::marker{color:var(--ink-soft)}
.solo{max-width:44em}

/* Hva AI kan */
.caps{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 36px}
.cap{padding-block:18px; border-top:1px solid var(--rule); display:grid; gap:6px; align-content:start}
.cap h3{font-size:var(--s-md)}
.cap p{font-size:var(--s-sm); color:var(--ink-soft)}
.trace-wrap{margin-top:36px; background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:22px 24px}
.trace-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px 16px; flex-wrap:wrap}
.trace-intro{margin-top:8px; font-size:var(--s-sm); color:var(--ink-soft)}
.trace{list-style:none; margin:14px 0 0; padding:0; display:grid}
.trace li{display:grid; grid-template-columns:9.5rem minmax(0,1fr); gap:16px; padding-block:12px; border-top:1px dashed var(--rule)}
.trace li:first-child{border-top:none}
.trace .verb{font-family:var(--f-mono); font-size:var(--s-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--lingon); padding-top:2px}
.trace .verb.no{color:var(--ochre)} .trace .verb.ok{color:var(--moss)}
.trace p{font-size:var(--s-sm)}
.trace small{display:block; margin-top:3px; font-family:var(--f-mono); font-size:var(--s-xs); color:var(--ink-soft)}
.limits{margin-top:24px; max-width:40em; font-size:var(--s-md)}

/* Samarbeidet */
.duo{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px}
.panel.you h3{color:var(--lingon)} .panel.ai h3{color:var(--moss)}
.stops{margin-top:26px}
.stops ul{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.stops li{font-size:var(--s-sm); border:1px solid var(--rule); border-radius:999px; padding:4px 12px; background:var(--card)}
.dialogs{display:grid; gap:18px; margin-top:32px}
.dlg{background:var(--card); border:1px solid var(--rule); border-radius:8px; overflow:hidden}
.dlg-head{display:flex; justify-content:space-between; align-items:baseline; gap:6px 16px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid var(--rule); background:var(--paper-2)}
.dlg-head h3{font-size:var(--s-md)}
.dlg-body{padding:8px 18px 4px}
.line{display:grid; grid-template-columns:4.5rem minmax(0,1fr); gap:12px; padding-block:8px}
.line + .line{border-top:1px dashed var(--rule)}
.who{font-family:var(--f-mono); font-size:var(--s-xs); letter-spacing:.08em; text-transform:uppercase; padding-top:3px}
.who.u{color:var(--lingon)} .who.c{color:var(--moss)}
.line p{font-size:var(--s-sm)}
.line .act{font-style:italic; color:var(--ink-soft)}
.dlg .lesson{margin:6px 18px 16px}
.before{margin-top:24px; max-width:44em; font-size:var(--s-sm); color:var(--ink-soft)}
.before b{color:var(--ink)}

/* Steg */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:st; max-width:44em}
.steps > li{counter-increment:st; display:grid; grid-template-columns:64px minmax(0,1fr); gap:18px; padding-block:22px; border-top:1px solid var(--rule)}
.steps > li:first-child{border-top:none; padding-top:0}
.steps > li::before{content:counter(st); font-family:var(--f-display); font-size:3rem; line-height:.9; color:var(--lingon)}
.steps h3{margin-bottom:6px}
.steps p + p{margin-top:8px}

.instr{margin-top:28px; max-width:44em}
.copybox{position:relative; background:var(--card); border:1px solid var(--rule); border-radius:8px; overflow:hidden}
.copybox-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--rule); background:var(--paper-2)}
.copybox pre{margin:0; padding:18px 20px; font-family:var(--f-mono); font-size:var(--s-sm); line-height:1.6; white-space:pre-wrap; word-wrap:break-word; color:var(--ink)}
.copy{font:inherit; font-family:var(--f-mono); font-size:var(--s-xs); letter-spacing:.04em; padding:5px 11px; border-radius:4px; border:1px solid var(--rule); background:var(--card); color:var(--ink); cursor:pointer; white-space:nowrap}
.copy:hover{border-color:var(--ink-soft)}
.copy.done{border-color:var(--moss); color:var(--moss)}

/* Verktøy */
.tools{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px}
.tool{background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:22px 24px; display:flex; flex-direction:column; gap:10px; min-width:0}
.tool-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.pill{font-family:var(--f-mono); font-size:var(--s-xs); padding:2px 9px; border-radius:999px; border:1px solid currentColor; white-space:nowrap}
.pill.free{color:var(--moss)} .pill.pro{color:var(--lingon)} .pill.app{color:var(--ochre)}
.tool .use{font-size:var(--s-sm); color:var(--ink-soft)}
.tool .how{font-size:var(--s-sm); border-top:1px dashed var(--rule); padding-top:10px; margin-top:auto}
.tool .note{font-size:var(--s-sm); background:var(--paper-2); border-radius:6px; padding:12px 14px}
.tool .note b{display:block; font-family:var(--f-mono); font-weight:500; font-size:var(--s-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--lingon); margin-bottom:4px}
.extra{margin-top:22px; max-width:44em; color:var(--ink-soft); font-size:var(--s-sm)}

/* Kilder */
.srcgroup{margin-top:34px}
.srcgroup:first-of-type{margin-top:0}
.srcgroup > .label{display:block; padding-bottom:8px; border-bottom:2px solid var(--ink); color:var(--ink)}
.src{display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:6px 24px; padding-block:16px; border-bottom:1px solid var(--rule)}
.src-name a{font-weight:700; font-size:var(--s-md)}
.src-name .pill{display:inline-block; margin-top:6px}
.pill.open{color:var(--moss)} .pill.acct{color:var(--ochre)} .pill.pay{color:var(--lingon)}
.src-body p{font-size:var(--s-sm)}
.ask{margin-top:8px; font-family:var(--f-mono); font-size:var(--s-xs); line-height:1.55; color:var(--ink-soft)}
.ask b{color:var(--lingon); font-weight:500}

/* Oppskrifter */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.chip{font:inherit; font-size:var(--s-sm); padding:6px 14px; border-radius:999px; border:1px solid var(--rule); background:var(--card); color:var(--ink); cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px}
.rcard{background:var(--card); border:1px solid var(--rule); border-radius:4px; display:flex; flex-direction:column; min-width:0}
.rcard-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 16px; border-bottom:3px double var(--rule)}
.tags{display:flex; flex-wrap:wrap; gap:4px}
.tag{font-family:var(--f-mono); font-size:11px; padding:1px 7px; border-radius:3px; background:var(--paper-2); color:var(--ink-soft)}
.rcard h3{padding:14px 16px 0; font-size:var(--s-md)}
.rcard pre{margin:10px 16px 0; font-family:var(--f-mono); font-size:var(--s-xs); line-height:1.65; white-space:pre-wrap; word-wrap:break-word; color:var(--ink); flex:1}
.rcard-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding:12px 16px 14px; margin-top:12px; border-top:1px solid var(--rule)}
.rcard-foot p{font-size:var(--s-xs); color:var(--ink-soft); line-height:1.45}
.empty-note{color:var(--ink-soft); font-size:var(--s-sm)}

/* Saker */
.cases{display:grid; gap:0}
.case{display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:28px; padding-block:28px; border-top:1px solid var(--rule)}
.case:first-child{border-top:none; padding-top:0}
.case h3{font-family:var(--f-display); font-weight:400; font-style:italic; font-size:var(--s-xl); line-height:1.12}
.case .meta{margin-top:10px}
.case-body{display:grid; gap:12px; max-width:40em}
.lesson{background:var(--paper-2); border-radius:6px; padding:12px 16px; font-size:var(--s-sm)}
.lesson b{font-family:var(--f-mono); font-weight:500; font-size:var(--s-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--moss); margin-right:6px}

/* Lagre */
.store{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:28px; align-items:start}
.tree-wrap{overflow-x:auto; background:var(--card); border:1px solid var(--rule); border-radius:8px}
.tree{margin:0; padding:20px 22px; font-family:var(--f-mono); font-size:var(--s-xs); line-height:1.85; white-space:pre; color:var(--ink)}
.tree .c{color:var(--ink-soft)}
.tree .d{color:var(--lingon); font-weight:500}
.principles{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.principles li{padding-left:16px; border-left:2px solid var(--rule)}
.principles b{display:block}
.principles span{font-size:var(--s-sm); color:var(--ink-soft)}

/* Presentere */
.shows{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.show{border-top:2px solid var(--ink); padding-top:14px; display:grid; gap:8px; align-content:start}
.show p{font-size:var(--s-sm)}
.show .ask{margin-top:2px}

/* Regler og sjekkliste */
.rules{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 32px; list-style:none; margin:0; padding:0}
.rules li{padding-block:12px; border-top:1px solid var(--rule)}
.rules b{display:block; font-size:var(--s-md)}
.rules span{font-size:var(--s-sm); color:var(--ink-soft)}
.check{margin-top:36px; background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:22px 24px; max-width:44em}
.check-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.check ul{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px}
.check label{display:flex; gap:12px; align-items:flex-start; cursor:pointer}
.check input{width:20px; height:20px; margin-top:3px; accent-color:var(--moss); flex:none}
.progress{font-family:var(--f-mono); font-size:var(--s-xs); color:var(--ink-soft); font-variant-numeric:tabular-nums}
.progress.full{color:var(--moss)}

/* Ordliste */
.gloss{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 36px; margin:0}
.gloss div{padding-block:12px; border-top:1px solid var(--rule)}
.gloss dt{font-weight:700}
.gloss dd{margin:2px 0 0; font-size:var(--s-sm); color:var(--ink-soft)}

footer{border-top:1px solid var(--rule); padding-block:36px 48px; font-size:var(--s-sm); color:var(--ink-soft)}
.foot-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px}
.linkcols{columns:2; column-gap:24px}
.linkcols a{display:block; padding-block:3px; break-inside:avoid}

/* ---------- Smale skjermer ---------- */
@media (max-width: 980px){
  .layout{grid-template-columns:minmax(0,1fr); gap:28px; padding-top:28px}
  .toc{position:static; background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:16px 18px}
  .toc ol{grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px 16px}
}
@media (max-width: 860px){
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:32px}
  .store{grid-template-columns:minmax(0,1fr)}
  .shows{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 700px){
  .twocol, .tools, .rules, .gloss, .foot-grid, .caps, .duo{grid-template-columns:minmax(0,1fr)}
  .line{grid-template-columns:3.6rem minmax(0,1fr); gap:8px}
  .trace li{grid-template-columns:minmax(0,1fr); gap:2px}
  .src{grid-template-columns:minmax(0,1fr)}
  .case{grid-template-columns:minmax(0,1fr); gap:12px}
  .steps > li{grid-template-columns:44px minmax(0,1fr); gap:12px}
  .steps > li::before{font-size:2.3rem}
  .linkcols{columns:1}
  .toc ol{grid-template-columns:minmax(0,1fr)}
}

/* Lenke tilbake til familiehistorien */
.crumb{border-bottom:1px solid var(--rule);background:var(--paper-2);font-size:var(--s-sm)}
.crumb .wrap{padding-block:10px}
.crumb a{color:var(--ink);text-decoration:none}
.crumb a:hover{text-decoration:underline}