/* Arnu Salg – stilen følger design_handoff/README.md og Arnu-tokenene (design-tokens/tokens.css). */
:root {
  --warm-0:#FFFFFF; --warm-50:#F4F2F0; --warm-100:#E9E5E2; --warm-200:#D2CECB; --warm-400:#A39D99; --warm-500:#6E6A68; --warm-900:#1A1919;
  --brand:#E4F222; --rod:#CF491E; --amber:#AF7A2B; --gronn:#24863E; --gronn-tint:#F5FFF9;
  --font-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --skygge-xs:0 1px 0 0 rgba(26,25,25,.04);
  --skygge-sm:0 1px 2px 0 rgba(26,25,25,.05), 0 1px 3px 0 rgba(26,25,25,.06);
  --skygge-lg:0 12px 32px -4px rgba(26,25,25,.10), 0 4px 8px -2px rgba(26,25,25,.04);
  --fokus:0 0 0 3px rgba(26,25,25,.15);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { font-size:16px; }
body { margin:0; font:300 14px/1.5 var(--font-sans); font-feature-settings:'case', 'ss01'; font-variant-numeric:tabular-nums; color:var(--warm-900); background:var(--warm-0); -webkit-font-smoothing:antialiased; }
body.innlogget { display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100vh; }
::selection { background:var(--brand); color:var(--warm-900); }
a { color:var(--warm-900); text-decoration:none; }
h1 { font-size:32px; line-height:1.15; font-weight:400; letter-spacing:-0.02em; margin:0; text-wrap:balance; }
h2 { font-size:24px; line-height:1.25; font-weight:600; letter-spacing:-0.01em; margin:0; }
h3 { font-size:20px; line-height:1.3; font-weight:500; margin:0; }
h4 { font-size:16px; line-height:1.4; font-weight:600; margin:0; }
p { margin:0; font-size:16px; font-weight:300; }
strong { font-weight:500; }
.overlinje { font-size:11px; line-height:1.4; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--warm-500); }
.liten { font-size:12px; line-height:1.4; font-weight:400; color:var(--warm-500); }
.liten-tekst { font-size:13px; }
.dempet { color:var(--warm-500); }
.lett { font-size:15px; font-weight:300; }
.mono { font-family:var(--font-mono); }
.tabular { font-variant-numeric:tabular-nums; }
.nowrap { white-space:nowrap; }
.hoyre { text-align:right; }
.tekst { white-space:pre-wrap; font-weight:300; }
.vokse { flex:1; min-width:0; }
.rad-mellom { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.rad-midt { display:flex; align-items:center; gap:8px; }
.strek-over { padding-top:8px; border-top:1px solid var(--warm-100); }
.undertittel { font-size:14px; font-weight:400; color:var(--warm-500); }
.firma { font-weight:500; } .firma.stor { font-size:16px; }
.forfalt { color:var(--rod); }
.feiltekst { font-size:12px; color:var(--rod); font-style:normal; }

/* ---- sidemeny ---- */
.sidemeny { background:var(--warm-50); border-right:1px solid var(--warm-100); display:flex; flex-direction:column; gap:24px; padding:20px 12px; position:sticky; top:0; height:100vh; overflow:auto; }
.logo { display:flex; align-items:center; gap:8px; padding:0 8px; }
.logo-rute { width:14px; height:14px; background:var(--brand); border-radius:2px; flex-shrink:0; }
.ordmerke { font-weight:600; font-size:18px; letter-spacing:.07em; text-transform:lowercase; }
.logo-salg { font-size:12px; color:var(--warm-500); margin-left:auto; font-weight:400; }
.sidemeny nav { display:flex; flex-direction:column; gap:2px; }
.sidemeny nav a { display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; border-radius:8px; font-size:14px; font-weight:400; color:var(--warm-500); }
.sidemeny nav a > span:first-child { flex:1; }
.sidemeny nav a:hover { background:rgba(233,229,226,.5); color:var(--warm-900); }
.sidemeny nav a.aktiv { background:var(--warm-100); color:var(--warm-900); }
.pille { font-size:11px; font-weight:500; background:var(--warm-900); color:#fff; border-radius:999px; padding:1px 7px; }
.sidemeny .lister { display:flex; flex-direction:column; gap:2px; }
.sidemeny .lister .overlinje { padding:0 10px 6px; }
.sidemeny .lister a { position:relative; display:flex; align-items:center; gap:8px; height:32px; padding:0 10px; border-radius:8px; font-size:13px; font-weight:400; color:var(--warm-500); }
.sidemeny .lister a > span:first-child { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidemeny .lister a > .tabular { font-size:12px; }
.sidemeny .lister a:hover { background:var(--warm-100); color:var(--warm-900); }
.slett-liste { display:none; position:absolute; right:4px; top:4px; }
.slett-liste button { width:24px; height:24px; border:0; border-radius:6px; background:transparent; color:var(--warm-500); font:inherit; font-size:16px; cursor:pointer; line-height:1; }
.slett-liste button:hover { background:var(--warm-200); color:var(--warm-900); }
.sidemeny .lister a:hover .slett-liste { display:block; }
.sidemeny .lister a:hover > .tabular { visibility:hidden; }
.sidemeny .bunn { margin-top:auto; display:flex; flex-direction:column; gap:8px; padding:0 6px; }
.sidemeny .bunn .overlinje { padding:0 4px; }
.segment { display:flex; gap:4px; background:var(--warm-100); border-radius:8px; padding:3px; }
.segment > *, .segment button { flex:1; height:30px; border:0; border-radius:6px; font:inherit; font-size:13px; font-weight:500; cursor:pointer; background:transparent; color:var(--warm-500); display:flex; align-items:center; justify-content:center; padding:0 12px; white-space:nowrap; }
.segment > span.aktiv, .segment button.aktiv { background:#fff; color:var(--warm-900); box-shadow:var(--skygge-sm); cursor:default; }
.segment form { flex:1; display:flex; padding:0; } .segment form button { width:100%; }
.sidemeny .bunn form.synk { padding:0 4px; }

/* ---- knapper, felt, kort ---- */
button { font:inherit; cursor:pointer; }
.knapp { height:36px; padding:0 14px; border:0; border-radius:8px; background:var(--warm-900); color:#fff; font:inherit; font-size:14px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; text-decoration:none; }
.knapp:hover { background:#333130; }
.knapp.sekundaer { background:#fff; color:var(--warm-900); border:1px solid var(--warm-200); }
.knapp.sekundaer:hover { background:var(--warm-50); }
.knapp.merke { background:var(--brand); color:var(--warm-900); height:40px; padding:0 16px; }
.knapp.merke:hover { background:#d8e61c; }
.knapp.liten-knapp { height:32px; padding:0 12px; font-size:13px; }
.knapp[disabled] { opacity:.4; cursor:default; }
.sidetopp .knapp.sekundaer { height:40px; }
.lenke { border:0; background:transparent; padding:0; font:inherit; color:var(--warm-500); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.lenke:hover { color:var(--warm-900); }
.lenke.fare { color:var(--rod); margin-right:auto; }
.lenke[disabled] { opacity:.4; cursor:default; }
.ikonknapp { width:32px; height:32px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--warm-500); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.ikonknapp:hover { border-color:var(--warm-200); background:#fff; color:var(--warm-900); }
.ikonknapp.ramme { border-color:var(--warm-200); background:#fff; color:var(--warm-900); }
.tilbake { align-self:flex-start; display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 8px 0 4px; border-radius:8px; font-size:13px; font-weight:500; color:var(--warm-500); }
.tilbake:hover { background:var(--warm-50); color:var(--warm-900); }
input, select, textarea { font:inherit; font-weight:400; color:var(--warm-900); border:1px solid var(--warm-200); border-radius:8px; background:#fff; height:36px; padding:0 12px; width:100%; outline:none; }
textarea { height:auto; padding:12px; resize:vertical; line-height:1.5; }
input:focus, select:focus, textarea:focus { border-color:var(--warm-900); box-shadow:var(--fokus); }
input.feil { border-color:var(--rod); }
input.stor { font-size:16px; }
input[type=range] { accent-color:var(--warm-900); height:auto; padding:0; border:0; }
input[type=checkbox] { width:16px; height:16px; accent-color:var(--warm-900); margin:0; }
label > span:first-child { display:block; font-size:13px; font-weight:500; margin-bottom:6px; }
.to { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kort { background:#fff; border:1px solid var(--warm-200); border-radius:10px; box-shadow:var(--skygge-xs); padding:24px; display:flex; flex-direction:column; gap:14px; }
.korttopp { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } .korttopp h4 { flex:1; }
.smal.kort { max-width:360px; margin:80px auto; }
.melding { background:var(--gronn-tint); border:1px solid #cfe5da; padding:8px 12px; border-radius:8px; margin:16px 40px 0; font-weight:400; }
.status { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:999px; border:1px solid var(--warm-200); font-size:12px; font-weight:500; white-space:nowrap; background:#fff; }
.prikk { width:6px; height:6px; border-radius:50%; background:var(--warm-400); display:inline-block; flex-shrink:0; }
.prikk.warm-900 { background:var(--warm-900); } .prikk.amber { background:var(--amber); } .prikk.gronn { background:var(--gronn); } .prikk.rod { background:var(--rod); }
.tagg { display:inline-block; background:var(--warm-100); padding:0 7px; border-radius:4px; margin:0 4px 2px 0; font-size:12px; font-weight:400; }
.avatar { width:36px; height:36px; border-radius:50%; background:var(--warm-100); display:flex; align-items:center; justify-content:center; font-weight:500; font-size:14px; flex-shrink:0; }
.avatar.stor { width:40px; height:40px; }
.pille-svart { display:inline-flex; align-self:flex-start; align-items:center; height:20px; padding:0 8px; border-radius:999px; background:var(--warm-900); color:#fff; font-size:11px; font-weight:500; }
.stolpe-bak { height:10px; background:var(--warm-100); border-radius:999px; overflow:hidden; } .stolpe-bak.tynn { height:6px; margin-top:6px; }
.stolpe-fyll { display:block; height:100%; background:var(--warm-900); border-radius:999px; } .stolpe-fyll.gronn { background:var(--gronn); }
kbd { font:400 11px/1 var(--font-mono); color:var(--warm-500); }

/* ---- sider ---- */
main { min-width:0; background:#fff; }
.side { padding:32px 40px; display:flex; flex-direction:column; gap:20px; max-width:1280px; }
.sidedeling { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.sider { display:flex; gap:8px; }
.sidetopp { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.sidetopp .tittel { flex:1; min-width:240px; display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.tittel { display:flex; flex-direction:column; gap:4px; }

/* ringeliste */
.filter { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.filter .sok { width:260px; max-width:100%; }
.velger { display:flex; align-items:center; gap:6px; height:36px; border:1px solid var(--warm-200); border-radius:8px; padding:0 4px 0 12px; font-size:13px; color:var(--warm-500); font-weight:400; white-space:nowrap; }
.velger select { border:0; background:transparent; font-size:14px; font-weight:500; height:32px; padding:0 4px; width:auto; cursor:pointer; }
.velger select:focus { box-shadow:none; }
.velger.avkryss { gap:8px; padding-right:12px; cursor:pointer; }
.velger.tall { padding-right:8px; }
.velger.tall input { width:56px; height:28px; border:1px solid var(--warm-200); border-radius:6px; padding:0 6px; font-size:13px; font-weight:500; }
.velger.tall input::placeholder { font-weight:400; }
.filter-hoyre { display:flex; gap:12px; align-items:center; justify-content:flex-end; margin-top:-8px; }
.lagre-liste { display:flex; gap:8px; align-items:center; }
.lagre-liste input { width:180px; border-color:var(--warm-900); box-shadow:var(--fokus); }
.tabellkort { border:1px solid var(--warm-200); border-radius:10px; box-shadow:var(--skygge-xs); overflow:auto; background:#fff; }
table { width:100%; border-collapse:collapse; font-size:14px; font-weight:400; }
.ringeliste { min-width:880px; }
thead tr { background:var(--warm-50); text-align:left; }
th { padding:10px 16px; font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--warm-500); }
td { padding:12px 16px; border-top:1px solid var(--warm-100); vertical-align:middle; }
td.mono { font-size:13px; }
td.notat { max-width:260px; font-weight:300; color:var(--warm-500); } td.notat div { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
td.smal, th.smal { width:48px; padding:8px 12px 8px 0; text-align:right; }
tbody tr { cursor:pointer; } tbody tr:hover { background:var(--warm-50); }
.tomt { padding:48px; text-align:center; display:flex; flex-direction:column; gap:12px; align-items:center; }

/* skuffen */
.overlegg { position:fixed; inset:0; background:rgba(26,25,25,.4); display:flex; justify-content:flex-end; z-index:60; }
.overlegg-lukk { position:absolute; inset:0; }
.skuff { position:relative; background:#fff; width:100%; max-width:440px; height:100%; box-shadow:var(--skygge-lg); display:flex; flex-direction:column; }
.skuff-topp { padding:20px 24px; border-bottom:1px solid var(--warm-100); display:flex; align-items:center; gap:12px; } .skuff-topp h3 { flex:1; }
.skuff-felt { flex:1; overflow:auto; padding:24px; display:flex; flex-direction:column; gap:16px; }
.skuff-felt label { display:flex; flex-direction:column; gap:6px; } .skuff-felt label > span:first-child { margin:0; }
.skuff-bunn { padding:16px 24px; border-top:1px solid var(--warm-100); display:flex; flex-direction:column; gap:12px; }
.knapper { display:flex; gap:8px; justify-content:flex-end; align-items:center; }
.avkryss { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:400; cursor:pointer; }
.avkryss > span:first-of-type { margin:0; font-weight:400; font-size:14px; } .avkryss .liten { margin-left:auto; }

/* firmakort */
.firmakort { padding-top:24px; max-width:1160px; }
.to-kol { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.kol { flex:999 1 480px; min-width:0; display:flex; flex-direction:column; gap:16px; }
.kol.smal { flex:1 1 280px; }
.kol.smal .kort { padding:20px; gap:12px; }
.steg { display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:14px; }
.steg-spor { display:flex; flex-direction:column; align-items:center; }
.sirkel { width:22px; height:22px; border-radius:50%; border:1.5px solid var(--warm-200); background:#fff; display:flex; align-items:center; justify-content:center; color:transparent; flex-shrink:0; }
.steg.naa .sirkel { border-color:var(--warm-900); }
.steg.ferdig .sirkel { border-color:var(--warm-900); background:var(--warm-900); color:#fff; }
.steg.ferdig.tapt .sirkel { border-color:var(--rod); background:var(--rod); }
.steg-spor .linje { flex:1; width:1.5px; min-height:16px; background:var(--warm-200); }
.steg.ferdig .linje { background:var(--warm-900); }
.steg-innhold { padding-bottom:18px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.steg:last-child .steg-innhold { padding-bottom:0; }
.steg-rad { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; min-height:22px; }
.steg-navn { font-size:15px; font-weight:400; color:var(--warm-500); }
.steg.naa .steg-navn, .steg.ferdig .steg-navn { font-weight:500; color:var(--warm-900); }
.angre { margin-left:auto; }
.steg-skjema { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.steg-skjema input[type=date] { width:auto; }
.belop { display:flex; align-items:center; border:1px solid var(--warm-200); border-radius:8px; height:36px; padding:0 12px; gap:6px; background:#fff; }
.belop.feil { border-color:var(--rod); }
.belop input { border:0; width:120px; padding:0; height:auto; } .belop input:focus { box-shadow:none; }
.belop span { font-size:12px; color:var(--warm-500); }
.notatlinje { display:flex; gap:8px; } .notatlinje input { flex:1; min-width:0; }
.hendelse { display:flex; flex-direction:column; gap:2px; padding-bottom:12px; border-bottom:1px solid var(--warm-100); }
.hendelse-topp { display:flex; gap:6px; font-size:12px; color:var(--warm-500); font-weight:400; }
.hendelse-topp .utfall { margin-left:auto; color:var(--warm-900); font-weight:500; }
.hendelse-tekst { font-size:14px; font-weight:300; }
.tlf-liten { font-size:18px; }
.maaltall { display:grid; grid-template-columns:1fr 1fr; padding:0 !important; gap:0 !important; }
.maaltall > div { padding:16px 20px; display:flex; flex-direction:column; gap:4px; } .maaltall > div + div { border-left:1px solid var(--warm-100); }
.maaltall .verdi { font-size:20px; font-weight:400; }

/* ringemodus */
.ringmodus { display:flex; flex-direction:column; min-height:100vh; }
.ringtopp { display:flex; align-items:center; gap:16px; padding:14px 32px; border-bottom:1px solid var(--warm-100); flex-wrap:wrap; }
.posisjon { font-size:14px; font-weight:500; }
.fremdrift { flex:1; max-width:320px; height:4px; background:var(--warm-100); border-radius:999px; overflow:hidden; min-width:80px; }
.fremdrift span { display:block; height:100%; background:var(--warm-900); }
.idag-teller { margin-left:auto; display:flex; align-items:baseline; gap:6px; font-size:13px; color:var(--warm-500); font-weight:400; }
.idag-teller strong { font-size:18px; font-weight:500; color:var(--warm-900); }
.skille { width:1px; height:20px; background:var(--warm-100); }
.tid { font-size:13px; color:var(--warm-500); }
.ringkropp { flex:1; display:flex; flex-wrap:wrap; }
.ringhoved { flex:999 1 520px; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; padding:40px 32px; }
.ringhode { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.ringhode h1 { margin-top:8px; }
.person { font-size:18px; font-weight:300; }
.tekstknapper { display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; justify-content:center; }
.tekstknapper a { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border-radius:8px; font-size:13px; font-weight:500; color:var(--warm-500); }
.tekstknapper a:hover { background:var(--warm-50); color:var(--warm-900); }
.tlf { font-size:clamp(36px, 5.5vw, 96px); font-weight:300; letter-spacing:-0.02em; line-height:1; white-space:nowrap; max-width:100%; font-variant-numeric:tabular-nums; }
.qr { display:flex; align-items:center; gap:10px; margin-top:-16px; } .qr svg { width:56px; height:56px; }
.ringskjema { width:100%; max-width:720px; display:flex; flex-direction:column; gap:28px; align-items:center; }
.utfall { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; width:100%; }
.utfall button { min-height:56px; padding:6px 8px; border:1px solid var(--warm-200); border-radius:8px; background:#fff; font-size:14px; font-weight:500; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--warm-900); }
.utfall button:hover { background:var(--warm-50); }
.utfall button.merke { background:var(--brand); border-color:var(--brand); } .utfall button.merke kbd { color:var(--warm-900); }
.utfall button.merke:hover { background:#d8e61c; }
.notatfelt { width:100%; display:flex; flex-direction:column; gap:6px; }
.notatlabel { display:flex; justify-content:space-between; } .notatlabel .hint { text-transform:none; letter-spacing:0; }
.notatfelt textarea { min-height:120px; font-size:15px; font-weight:300; }
.ringfot { display:flex; gap:16px; align-items:center; font-size:13px; color:var(--warm-500); font-weight:400; }
.ringfot form { display:contents; } .ringfot .lenke { text-decoration:none; padding:4px; } .ringfot strong { color:var(--warm-900); }
.ringside { flex:1 1 300px; min-width:0; border-left:1px solid var(--warm-100); background:var(--warm-50); padding:24px; display:flex; flex-direction:column; gap:20px; overflow:auto; }
.ringside .bolk { display:flex; flex-direction:column; gap:10px; }
.ringside .hendelse { padding-bottom:10px; }
.tips { display:flex; flex-direction:column; gap:12px; font-size:14px; font-weight:300; line-height:1.5; white-space:pre-line; }
.bransjetips { background:#fff; border:1px solid var(--warm-200); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:300; }
.ringferdig { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:48px; text-align:center; }
.ringferdig .knapper { justify-content:center; flex-wrap:wrap; }

/* booking */
.overlegg.modal { align-items:center; justify-content:center; padding:24px; z-index:50; }
.booking { background:#fff; border-radius:10px; box-shadow:var(--skygge-lg); width:100%; max-width:1000px; max-height:calc(100vh - 48px); overflow:auto; display:flex; flex-wrap:wrap; }
.booking-info { flex:1 1 240px; padding:24px; border-right:1px solid var(--warm-100); display:flex; flex-direction:column; gap:14px; }
.booking-info > div:nth-child(2) { display:flex; flex-direction:column; gap:2px; }
.booking-hvem { font-size:14px; font-weight:300; }
.booking-fakta { display:flex; flex-direction:column; gap:10px; font-size:14px; font-weight:400; } .booking-fakta span { display:flex; align-items:center; gap:8px; }
.booking-info label { display:flex; flex-direction:column; gap:6px; margin-top:8px; } .booking-info label > span { margin:0; }
.booking-fot { margin-top:auto; }
.booking-kal { flex:2 1 380px; padding:24px; display:flex; flex-direction:column; gap:16px; border-right:1px solid var(--warm-100); }
.kal-topp { display:flex; align-items:center; gap:8px; } .kal-topp span { flex:1; font-size:16px; font-weight:500; }
.kal { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
.kal .overlinje { text-align:center; padding-bottom:6px; }
.kal button { aspect-ratio:1; border:1px solid transparent; border-radius:8px; background:#fff; color:var(--warm-400); font-size:14px; font-weight:300; cursor:default; }
.kal button.ledig { background:var(--warm-50); border-color:var(--warm-200); color:var(--warm-900); font-weight:500; cursor:pointer; }
.kal button.valgt { background:var(--warm-900); border-color:var(--warm-900); color:#fff; }
.booking-tider { flex:1 1 220px; padding:24px; display:flex; flex-direction:column; gap:10px; }
.dagnavn { font-size:16px; font-weight:500; }
.tider { display:flex; flex-direction:column; gap:10px; }
.tider button { height:40px; border:1px solid var(--warm-200); border-radius:8px; background:#fff; color:var(--warm-900); font-size:14px; font-weight:500; display:flex; align-items:center; justify-content:center; gap:8px; }
.tider button.valgt { background:var(--warm-900); border-color:var(--warm-900); color:#fff; }
.booking-knapper { margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:16px; }
.booking-knapper .knapp { height:40px; } .booking-knapper .lenke { height:36px; text-decoration:none; font-size:14px; }

/* analyse */
.analyse { gap:24px; }
.maalkort { padding:28px; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:32px; }
.maal-venstre { display:flex; flex-direction:column; gap:16px; }
.omsetning { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.stor-tall { font-size:56px; font-weight:300; letter-spacing:-0.02em; line-height:1; }
.fakta { display:flex; gap:24px; flex-wrap:wrap; font-size:14px; font-weight:400; }
.maal-hoyre { border-left:1px solid var(--warm-100); padding-left:32px; display:flex; flex-direction:column; gap:12px; }
.naar { font-size:32px; font-weight:400; letter-spacing:-0.02em; line-height:1.1; }
.glider { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.glider-fot { display:flex; justify-content:space-between; } .glider-fot .lenke { color:var(--warm-900); font-size:12px; }
.nyttaar { padding-top:10px; border-top:1px solid var(--warm-100); }
.graf-bolk { grid-column:1 / -1; display:flex; flex-direction:column; gap:8px; padding-top:8px; border-top:1px solid var(--warm-100); }
.forklaring { display:flex; gap:20px; flex-wrap:wrap; font-size:12px; color:var(--warm-500); padding-top:12px; font-weight:400; }
.forklaring span { display:flex; align-items:center; gap:6px; }
.strek { width:16px; height:2px; background:var(--warm-900); display:inline-block; } .strek.stiplet { height:0; background:none; border-top:2px dashed var(--warm-400); }
.graf { position:relative; height:240px; margin:0 0 20px 56px; }
.graf svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.y-linje { position:absolute; left:0; right:0; border-top:1px solid var(--warm-100); }
.y-linje.maal { border-top-style:dashed; border-color:var(--warm-900); }
.y-linje span { position:absolute; right:calc(100% + 8px); top:-8px; font-size:11px; color:var(--warm-500); white-space:nowrap; }
.idag-prikk { position:absolute; width:10px; height:10px; margin:0 0 -5px -5px; border-radius:50%; background:var(--warm-900); border:2px solid #fff; }
.idag-tekst { position:absolute; transform:translate(-50%, -14px); font-size:12px; font-weight:500; white-space:nowrap; background:#fff; padding:0 4px; }
.eta-linje { position:absolute; top:0; bottom:0; border-left:1px dashed var(--warm-400); }
.eta-prikk { position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:#fff; border:2px solid var(--warm-900); }
.eta-tekst { position:absolute; font-size:12px; font-weight:500; white-space:nowrap; background:#fff; padding:0 4px; }
.x-tekst { position:absolute; top:calc(100% + 6px); transform:translateX(-50%); font-size:11px; color:var(--warm-500); white-space:nowrap; }
.traktkort { padding:24px 28px; gap:20px; }
.traktkort .segment button { height:28px; flex:0 0 auto; }
.trakt { display:flex; flex-direction:column; gap:6px; }
.trakt-rad { display:grid; grid-template-columns:200px minmax(0,1fr) 120px; gap:16px; align-items:center; font-size:14px; font-weight:400; }
.trakt-midt { display:flex; justify-content:center; }
.trakt-stolpe { height:40px; border-radius:6px; background:var(--warm-900); color:#fff; font-size:16px; font-weight:500; display:flex; align-items:center; justify-content:center; }
.trakt-stolpe.gronn { background:var(--gronn); }
.personer { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:16px; }
.person { gap:18px; }
.person-topp { display:flex; align-items:center; gap:12px; }
.poeng { font-size:32px; font-weight:300; letter-spacing:-0.02em; } .poeng .dempet { font-size:14px; }
.trinnstripe { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); border:1px solid var(--warm-100); border-radius:8px; }
.trinnstripe > div { padding:10px; display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--warm-100); } .trinnstripe > div:first-child { border-left:0; }
.trinnstripe span { font-size:10px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--warm-500); }
.trinnstripe strong { font-size:18px; font-weight:400; }
.forutsetninger summary { cursor:pointer; } .forutsetninger .kort { margin-top:12px; max-width:720px; }
.forutsetninger .to { grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }

@media (max-width: 900px) {
  body.innlogget { grid-template-columns:1fr; }
  .sidemeny { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:10px 12px; gap:10px; }
  .sidemeny nav { flex-direction:row; flex-wrap:wrap; } .sidemeny .lister { display:none; } .sidemeny .bunn { margin-top:0; margin-left:auto; }
  .side, .firmakort { padding:16px; } .ringtopp { padding:12px 16px; } .ringhoved { padding:24px 16px; }
  .maalkort { grid-template-columns:1fr; padding:20px; } .maal-hoyre { border-left:0; padding-left:0; border-top:1px solid var(--warm-100); padding-top:16px; }
  .trakt-rad { grid-template-columns:1fr; gap:4px; } .trakt-rad .hoyre { text-align:left; }
  .qr { display:none; } .melding { margin:12px 16px 0; }
  .graf { margin-left:40px; }
}