/* overenskomst.css — OK-profilsider (motor, View A). KUN tokens. Delt chrome fra chrome.css. */
body{background:var(--bg);color:var(--text-body)}
.ok-shell{max-width:1120px;margin:0 auto;padding:22px 26px 60px}
.ok-col{max-width:1000px;margin:0 auto}
.ok-crumb{font-family:var(--mono);font-size:11px;color:var(--text-muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:22px 0 16px}
.ok-crumb a{color:var(--link);text-decoration:none}
.ok-crumb a:hover{color:var(--accent)}
.ok-crumb-sep{color:var(--hair2)}
.ok-mono{font-family:var(--mono)}
.ok-muted{color:var(--text-muted)}

/* head-panel */
.ok-head{border:1.5px solid var(--ink);background:var(--surface);box-shadow:var(--offset);padding:22px 24px}
.ok-head-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ok-sektor{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border:1px solid var(--catc);color:var(--catc);border-radius:2px}
.ok-sektor-1{--catc:var(--cat-1)} .ok-sektor-2{--catc:var(--cat-2)} .ok-sektor-3{--catc:var(--cat-3)} .ok-sektor-4{--catc:var(--cat-4)} .ok-sektor-6{--catc:var(--cat-6)} .ok-sektor-7{--catc:var(--cat-7)}
.ok-niveau{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--label-soft)}
.ok-h1{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.4vw,33px);line-height:1.1;letter-spacing:-.01em;color:var(--text);margin:12px 0 0;text-wrap:balance}
.ok-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 30px;margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline)}
.ok-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.ok-meta-k{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--label-soft)}
.ok-meta-v{font-family:var(--sans);font-size:14px;color:var(--text);font-weight:600;line-height:1.3}
.ok-meta-sub{font-family:var(--mono);font-size:10.5px;color:var(--label-soft);margin-top:2px}
.ok-loensys{border-bottom:1.5px dotted var(--accent);cursor:help}
.ok-belaeg-pct{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--text);line-height:1}
.ok-belaeg-lbl{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--label-soft)}

/* vilkårstabel */
.ok-group{margin-top:36px}
.ok-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:8px}
.ok-group-h{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--text);margin:0}
.ok-group-n{font-family:var(--mono);font-size:11px;color:var(--label-soft)}
.ok-table{border:1.5px solid var(--ink);background:var(--surface);box-shadow:var(--offset);margin-top:14px}
.ok-row{display:grid;grid-template-columns:minmax(180px,1.1fr) 1.4fr auto;gap:16px;align-items:start;padding:13px 18px;border-bottom:1px solid var(--hair)}
.ok-row:last-child{border-bottom:0}
.ok-row-label{font-family:var(--sans);font-size:14.5px;color:var(--text);font-weight:500;display:flex;flex-direction:column;gap:3px}
.qtrigger{border-bottom:1.5px dotted var(--accent);cursor:help}
.ok-arvet{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--label-soft)}
.ok-row-val{min-width:0}
.ok-v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:21px;font-weight:600;color:var(--text)}
.ok-u{font-family:var(--mono);font-size:12px;color:var(--label)}
.ok-yr{font-family:var(--mono);font-size:11px;color:var(--label-soft);margin-left:6px}
.ok-badge{font-size:12px;margin-left:6px}
.ok-badge-ver{color:var(--up)} .ok-badge-fore{color:var(--accent)}
.ok-satstrin{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.ok-trin{font-family:var(--mono);font-size:10.5px;color:var(--text-body);border:1px solid var(--hair2);border-radius:2px;padding:3px 8px;white-space:nowrap}
.ok-trin-aar{color:var(--label-soft)}
.ok-median{font-family:var(--mono);font-size:11px;color:var(--label-soft);margin-top:8px}
.ok-median b{color:var(--text-body)}
.ok-median-d.up{color:var(--pos);font-weight:600} .ok-median-d.down{color:var(--neg);font-weight:600} .ok-median-d.flat{color:var(--label-soft)}
.ok-median-n{color:var(--hair2)}
.ok-row-kilde{justify-self:end}
.ok-kilde{font-family:var(--mono);font-size:11px;color:var(--link);border:1px solid var(--hair2);border-radius:2px;padding:3px 8px;white-space:nowrap;text-decoration:none;display:inline-block}
.ok-kilde:hover{border-color:var(--link)}
.ok-kilde-arw{color:var(--label-soft)}

/* relateret + gate */
.ok-foot-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:18px;margin-top:40px}
.ok-rel{border:1.5px solid var(--hair2);background:var(--surface-2);padding:18px 20px}
.ok-rel-h{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--label-soft);margin:0 0 10px}
.ok-rel-link{display:block;font-family:var(--sans);font-weight:600;font-size:14px;color:var(--link);text-decoration:none;padding:5px 0}
.ok-rel-link:hover{color:var(--accent)}
.ok-gate{border:1.5px solid var(--accent);background:var(--accent-subtle);padding:20px 22px}
.ok-gate-k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ok-gate-h{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--text);margin:8px 0 6px}
.ok-gate-p{font-family:var(--sans);font-size:13.5px;color:var(--text-body);margin:0 0 14px;line-height:1.5}
.ok-src-note{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--label-soft);border-top:1px solid var(--hairline);margin-top:40px;padding-top:18px}
.ok-empty{font-family:var(--sans);color:var(--text-muted);margin-top:30px}

/* ---- View B: vilkårs-sammenligner (barliste) ---- */
.okc-controls{display:flex;flex-direction:column;gap:14px;margin:0 0 22px}
.okc-metricgrp{max-width:420px}
.okc-metricgrp .tool-sel{padding:9px 12px}
.okc-sektorer{display:flex;gap:8px;flex-wrap:wrap}
.okc-sek{font-family:var(--mono);font-size:11px;color:var(--label);background:var(--paper);border:1px solid var(--hair2);border-radius:2px;padding:5px 10px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.okc-sek:hover{border-color:var(--catc)}
.okc-sek[aria-pressed="true"]{color:var(--accent-contrast);background:var(--catc);border-color:var(--catc)}
.okc-sek-1{--catc:var(--cat-1)} .okc-sek-2{--catc:var(--cat-2)} .okc-sek-3{--catc:var(--cat-3)} .okc-sek-4{--catc:var(--cat-4)} .okc-sek-6{--catc:var(--cat-6)} .okc-sek-7{--catc:var(--cat-7)}
.okc-sek-n{color:var(--label-soft)}
.okc-sek[aria-pressed="true"] .okc-sek-n{color:var(--accent-contrast);opacity:.85}
.okc-grouphd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 8px;border-bottom:1px solid var(--hairline);padding-bottom:6px}
.okc-grouphd-t{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.okc-grouphd-n{font-family:var(--mono);font-size:10.5px;color:var(--label-soft)}
.okc-bar-row{display:grid;grid-template-columns:34px minmax(160px,220px) 1fr auto auto;gap:14px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--hair)}
.okc-rank{font-family:var(--mono);font-size:12px;color:var(--rank);text-align:right}
.okc-name{font-family:var(--serif);font-weight:600;font-size:15.5px;color:var(--ink);text-decoration:none;line-height:1.15}
.okc-name:hover{color:var(--accent)}
.okc-track{height:16px;background:var(--track);border:1px solid var(--hairline);position:relative;min-width:60px}
.okc-fill{display:block;height:100%;min-width:2px}
.bg-cat-1{background:var(--cat-1)} .bg-cat-2{background:var(--cat-2)} .bg-cat-3{background:var(--cat-3)} .bg-cat-4{background:var(--cat-4)} .bg-cat-6{background:var(--cat-6)} .bg-cat-7{background:var(--cat-7)}
.okc-val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink);white-space:nowrap}
.okc-u{color:var(--label);font-size:11px}
.okc-kilde-cell{justify-self:end}

/* ---- View B: mode-toggle + Side om side ---- */
.okc-modebar{margin:6px 0 14px}
.okc-modeseg{display:inline-flex;border:1.5px solid var(--ink)}
.okc-modebtn{font-family:var(--mono);font-size:11px;padding:7px 14px;background:var(--surface);border:0;border-right:1.5px solid var(--ink);cursor:pointer;color:var(--label)}
.okc-modebtn:last-child{border-right:0}
.okc-modebtn.on{background:var(--ink);color:var(--surface)}
.okc-picker{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.okc-picker-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--label-soft)}
.okc-pchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:600;font-size:12.5px;padding:6px 11px;border:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--ink);cursor:pointer}
.okc-pchip-sek{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.okc-pchip-x{color:var(--label-soft);font-size:11px}
.okc-pchip:hover .okc-pchip-x{color:var(--accent)}
.okc-add{font-family:var(--sans);font-size:12.5px;padding:6px 10px;border:1.5px solid var(--hair2);background:var(--surface);color:var(--label);cursor:pointer;max-width:220px}
.okc-picker-max{font-family:var(--mono);font-size:10.5px;color:var(--label-soft)}
.okc-sxs-wrap{border:1.5px solid var(--ink);box-shadow:var(--offset);background:var(--surface);overflow-x:auto;max-width:100%}
.okc-sxs-table{border-collapse:collapse;width:100%}
.okc-sxs-table th,.okc-sxs-table td{border-bottom:1px solid var(--hair2);text-align:left;vertical-align:top;padding:11px 14px}
.okc-sxs-corner{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--label);background:var(--surface-2);border-bottom:1.5px solid var(--ink)!important;min-width:150px}
.okc-sxs-okhead{background:var(--surface-2);border-bottom:1.5px solid var(--ink)!important;border-left:1px solid var(--hair2);min-width:150px;max-width:230px}
.okc-sxs-sek{display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px}
.okc-sxs-nm{display:block;font-family:var(--serif);font-weight:600;font-size:15px;color:var(--ink);line-height:1.15;text-decoration:none}
.okc-sxs-nm:hover{color:var(--accent)}
.okc-sxs-loen{display:block;font-family:var(--mono);font-size:10px;color:var(--label-soft);margin-top:5px}
.okc-sxs-metcol{font-family:var(--sans);font-weight:600;font-size:12.5px;color:var(--ink);border-right:1px solid var(--hair2);min-width:150px;max-width:210px}
.okc-sxs-note{display:block;font-family:var(--mono);font-size:10px;font-weight:400;color:var(--label-soft);margin-top:3px;letter-spacing:0;text-transform:none;line-height:1.4}
.okc-sxs-td{font-family:var(--serif);font-variant-numeric:tabular-nums;font-size:15px;color:var(--ink);border-left:2px solid transparent}
.okc-sxs-v{font-weight:600}
.okc-sxs-na{color:var(--label-soft)}
.okc-sxs-win{background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent-ink,var(--accent));border-left:2px solid var(--accent)}
.okc-sxs-loenrow .okc-sxs-td,.okc-sxs-loenrow .okc-sxs-metcol{border-bottom:1.5px solid var(--ink)}

/* mobil vilkårs-visning-toggle (Alle vilkår / Prioriteret) — kun synlig på mobil */
.ok-mobtoggle{display:none}
.ok-mobtoggle-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--label-soft)}
.ok-mobseg{display:inline-flex;border:1.5px solid var(--ink)}
.ok-mobbtn{font-family:var(--mono);font-size:11px;padding:6px 12px;background:var(--surface);border:0;border-right:1.5px solid var(--ink);cursor:pointer;color:var(--label)}
.ok-mobbtn:last-child{border-right:0}
.ok-mobbtn.on{background:var(--ink);color:var(--surface)}
.ok-badge-na{color:var(--label-soft)}

/* ---- Komponent-ark (spec-side) ---- */
.kc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:24px}
.kc{border:1.5px solid var(--ink);background:var(--surface);box-shadow:var(--offset);padding:18px 20px}
.kc-head{display:flex;align-items:baseline;gap:10px}
.kc-code{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--label-soft)}
.kc-name{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink);margin:0;letter-spacing:.01em}
.kc-desc{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--label);margin:8px 0 14px}
.kc-states{display:flex;flex-direction:column;gap:12px}
.kc-state{border-top:1px solid var(--hair2);padding-top:11px}
.kc-demo{margin-bottom:6px}
.kc-tag{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--label-soft)}
.kc-barliste{border:1px solid var(--hair2);padding:4px 10px}
.kc .ok-row{grid-template-columns:1fr;gap:7px;padding:12px 14px}
.kc .ok-table{border:1px solid var(--hair2)}
.kc .ok-row-kilde{justify-self:start}

@media (max-width:720px){
  .okc-bar-row{grid-template-columns:26px 1fr auto;gap:8px 10px}
  .okc-track,.okc-kilde-cell{grid-column:1/-1;justify-self:stretch}
  .ok-shell{padding:18px 16px 48px}
  .ok-meta-grid{grid-template-columns:1fr}
  .ok-row{grid-template-columns:1fr;gap:8px;padding:14px 18px}
  .ok-row-kilde{justify-self:start}
  .ok-foot-grid{grid-template-columns:1fr}
  .ok-mobtoggle{display:flex;align-items:center;gap:10px;margin:6px 0 10px}
  .ok-col.prio-mode .ok-row:not([data-prio]){display:none}
  .ok-col.prio-mode .ok-group:not(:has(.ok-row[data-prio])){display:none}
}
@media (forced-colors:active){
  .ok-head,.ok-table,.ok-trin,.ok-kilde,.ok-sektor{border:1px solid CanvasText}
}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}