/* Oversikten i tre lag: oversikt, område, ett tall. Bruker panelets tokens fra index.html
   (--ink, --paper, --line, --hair, --mute, --soft, --signal, --signaltekst, --ok, --card, --r).
   Signalfargen er reservert for det som trenger en avgjørelse. --wait er ny: venter på data. */
:root { --wait: #9A948A; --oktekst: #2E7D32; --fill: rgba(18,16,14,.07); --barfill: rgba(18,16,14,.14); }
.morkt, :root[data-tema="morkt"] { --wait: #7B746A; --oktekst: #7CC47F; --fill: rgba(245,240,232,.09); --barfill: rgba(245,240,232,.16); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="lys"]) { --wait: #7B746A; --oktekst: #7CC47F; --fill: rgba(245,240,232,.09); --barfill: rgba(245,240,232,.16); } }

/* :not(#driftMaskineri *) på de generelle reglene: maskineriseksjonene (agenter, kilder, historikk) flyttes inn
   under Drift og skal beholde panelets egen stil. Til 14. september 2026 ble loggradene runde piller der. */
#oversikt button:not(#driftMaskineri *) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
#oversikt button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
#oversikt .num { font-variant-numeric: tabular-nums; }
#oversikt .drill:hover { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
#oversikt .tech { display: none; }
#oversikt.teknisk .tech { display: inline; }
#oversikt.teknisk .plain { display: none; }
#oversikt .est { font-size: 11px; color: var(--mute); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; margin-left: 6px; vertical-align: middle; font-weight: 500; letter-spacing: 0; text-decoration: none; }
#oversikt .i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); color: var(--mute); font-size: 11px; font-weight: 600; font-family: Georgia, serif; font-style: italic; flex: none; line-height: 1; }
#oversikt .i:hover { border-color: var(--ink); color: var(--ink); }
#oversikt .hint { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--mute); }

/* Brødsmule og bakknapp */
#oversikt .crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); min-height: 24px; margin: 0 0 12px; flex-wrap: wrap; }
#oversikt .crumb button { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
#oversikt .crumb button:hover { color: var(--ink); }
#oversikt .crumb b { color: var(--ink); font-weight: 600; }
#oversikt .crumb .sep { opacity: .5; }

/* Lag 0 */
#oversikt .lede { font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; max-width: 34ch; margin: 0 0 6px; text-wrap: balance; }
#oversikt .lede em { font-style: normal; color: var(--signaltekst); }
#oversikt .lede button { display: inline; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; }
#oversikt .lede button:hover { text-decoration-color: currentColor; }
#oversikt .when { font-size: 13px; color: var(--mute); margin: 0 0 12px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
#oversikt .when .drill { color: var(--mute); }
#oversikt .status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); white-space: nowrap; }
#oversikt .dot.signal { background: var(--signal); }
#oversikt .ctl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; font-size: 13px; color: var(--mute); }
#oversikt .ctl .seg { margin-right: 6px; }
#oversikt .seg button { padding: 5px 13px; }
#oversikt .seg button.on { background: var(--ink); color: var(--paper); }
#oversikt .filt { margin-left: 10px; }
/* Vinduslinjen (steg 82, del 1): tynn stripe øverst i canvasen, den visuelle referansen til et
   nettleservindu (graphed.com-mønsteret Sebastian pekte på). Prikkene er dekorative, ingen egen
   statuslogikk. Fanen er monospace som en filsti, pillen gjenbruker status-fargene under (--ok/--signal). */
#oversikt .vramme { display: flex; align-items: center; gap: 10px; padding: 7px 12px; margin: 0 0 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--soft); }
#oversikt .vramme .dots { display: flex; gap: 4px; }
#oversikt .vramme .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); display: block; }
#oversikt .vramme .fane { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--mute); }
#oversikt .vramme .vstatus { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); margin-left: auto; }
/* NÅ-boksen (steg 82): egen boks med signalkant, ikke kortstilen (.area) resten av oversikten bruker,
   så noen som kommer utenfra ser med en gang at dette er noe annet enn kortene under. Oransje kant når
   noe trenger en avgjørelse (forslag i køen eller helseavvik), ellers en nøytral kant. */
#oversikt .naabox { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 20px; padding: 12px 16px; background: var(--soft); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--r); }
#oversikt .naabox.signal { border-left-color: var(--signal); }
#oversikt .naabox .lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 600; margin-right: 4px; }
#oversikt .act:not(#driftMaskineri *) { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 13px; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
#oversikt .act:hover:not(#driftMaskineri *) { border-color: var(--ink); }
#oversikt .act.signal:not(#driftMaskineri *) { border-color: var(--signal); }
#oversikt .act b:not(#driftMaskineri *) { font-weight: 600; }
#oversikt .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; }
#oversikt .grp { grid-column: 1 / -1; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 600; margin: 10px 0 -4px; }
#oversikt .grp:first-child { margin-top: 0; }
/* Tomme kort samlet (steg 82): én linje med disclosure i stedet for fulle kort som bare sier
   «Venter på data». */
#oversikt details.tomkort { margin: 6px 0 4px; }
#oversikt details.tomkort summary { cursor: pointer; font-size: 13px; color: var(--mute); list-style: none; }
#oversikt details.tomkort summary::-webkit-details-marker { display: none; }
#oversikt details.tomkort summary::before { content: "▸ "; }
#oversikt details.tomkort[open] summary::before { content: "▾ "; }
#oversikt details.tomkort summary:hover { color: var(--ink); }
#oversikt .tomliste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#oversikt .tomliste button { border: 1px dashed var(--line); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--mute); }
#oversikt .tomliste button:hover { border-color: var(--ink); color: var(--ink); }
#oversikt .area { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; transition: border-color .12s, box-shadow .12s; }
#oversikt .area:hover { border-color: var(--ink); box-shadow: 0 2px 12px var(--skygge); }
#oversikt .area .top { display: flex; align-items: center; gap: 8px; }
#oversikt .area h3 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; min-width: 0; letter-spacing: 0; text-transform: none; color: var(--ink); }
#oversikt .area h3 button:hover { text-decoration: underline; text-underline-offset: 4px; }
#oversikt .area .statline { font-size: 12px; color: var(--mute); margin: -4px 0 0; }
#oversikt .area .say { font-size: 13.5px; line-height: 1.4; min-height: 2.8em; display: block; width: 100%; }
#oversikt .area .say.wait { color: var(--mute); }
#oversikt .area .foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; border-top: 1px solid var(--hair); padding-top: 9px; }
#oversikt .area .big { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
#oversikt .area .big u { text-decoration: none; font-size: 12px; font-weight: 500; color: var(--mute); margin-left: 4px; }
#oversikt .area .big.tom { font-size: 16px; color: var(--mute); }
#oversikt .area .lbl { font-size: 12px; color: var(--mute); }
#oversikt .area .lbl button { color: var(--mute); }
#oversikt .explain { display: none; font-size: 12.5px; color: var(--mute); line-height: 1.4; }
#oversikt.forklar .explain { display: block; }
#oversikt .steps4 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
#oversikt .steps4 .st4 { border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; background: var(--paper); }
#oversikt .steps4 .st4 b { display: block; font-size: 15px; font-weight: 600; }
#oversikt .steps4 .st4.kommer { border-style: dashed; color: var(--mute); }

/* Lag 1 */
#oversikt .sechead1 { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; flex-wrap: wrap; }
#oversikt .sechead1 h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.015em; text-transform: none; color: var(--ink); }
#oversikt .sechead1 .spacer { flex: 1; }
#oversikt .intro { color: var(--mute); margin: 0 0 14px; max-width: 64ch; }
#oversikt .rows { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
#oversikt .rowhead, #oversikt .orow { display: grid; grid-template-columns: minmax(200px, 1.4fr) 110px minmax(120px, 1fr) minmax(160px, 1fr) 24px; gap: 14px; align-items: center; padding: 11px 16px; }
#oversikt .rowhead { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--hair); background: var(--soft); }
#oversikt .orow { border-bottom: 1px solid var(--hair); width: 100%; }
#oversikt .orow:last-child { border-bottom: 0; }
#oversikt .orow:hover { background: var(--soft); }
#oversikt .orow .k { font-weight: 500; display: flex; flex-direction: column; gap: 2px; }
#oversikt .orow .k .lab { display: flex; align-items: center; gap: 8px; }
#oversikt .orow .k .explain { font-weight: 400; }
#oversikt .orow .v { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
#oversikt .orow .v.tom { color: var(--mute); font-weight: 500; font-size: 14px; }
#oversikt .od { font-size: 13px; display: flex; flex-direction: column; gap: 1px; }
#oversikt .od b { font-weight: 600; }
#oversikt .od .vs { font-size: 12px; color: var(--mute); }
#oversikt .od.up b { color: var(--oktekst); } #oversikt .od.down b { color: var(--signaltekst); } #oversikt .od.flat b { color: var(--mute); } #oversikt .od.neutral b { color: var(--ink); }
#oversikt .orow .go { color: var(--mute); text-align: right; }
#oversikt .sub:not(#driftMaskineri *) { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 20px 0 8px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
#oversikt .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
#oversikt .glance { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
#oversikt .gcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 14px; display: flex; flex-direction: column; gap: 3px; }
#oversikt .gcard .k { font-size: 12px; color: var(--mute); }
#oversikt .gcard .v { font-size: 14.5px; display: block; }
#oversikt .gcard .v b { font-weight: 600; }
#oversikt .gcard.signal { border-left: 3px solid var(--signal); }
#oversikt .from { font-size: 12px; color: var(--mute); margin-top: 3px; }
#oversikt .from b { font-weight: 600; color: var(--mute); }
#oversikt .gacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
#oversikt .sm { border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; font-size: 12.5px; background: var(--card); }
#oversikt .sm:hover { border-color: var(--ink); }
#oversikt .sm.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#oversikt .top1 { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
#oversikt .top1 h4 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); display: flex; gap: 10px; align-items: center; }
#oversikt .top1 h4 .spacer { flex: 1; }
#oversikt .trow { display: grid; grid-template-columns: 22px minmax(0, 1.6fr) minmax(50px, .6fr) 64px 16px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--hair); width: 100%; font-size: 14px; }
#oversikt .trow:last-child { border-bottom: 0; }
#oversikt .trow:hover { background: var(--soft); }
#oversikt .trow .rk { font-size: 12px; color: var(--mute); }
#oversikt .trow .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#oversikt .trow .nm.us { font-weight: 600; }
#oversikt .trow .bar { height: 6px; background: var(--soft); border-radius: 3px; overflow: hidden; margin: 0; }
#oversikt .trow .bar i { display: block; height: 100%; background: var(--barfill); border-radius: 3px; }
#oversikt .trow .bar i.us { background: var(--ink); }
#oversikt .trow .vl { text-align: right; font-weight: 600; font-size: 13.5px; }
#oversikt .trow .vl.tom { color: var(--mute); font-weight: 400; }
#oversikt .trow .go { color: var(--mute); }

/* Lag 2 */
#oversikt .metric { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
#oversikt .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
#oversikt .card h4 { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 10px; }
#oversikt .heronum { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
#oversikt .heronum .v { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
#oversikt .heronum .v.tom { color: var(--mute); font-size: 26px; }
#oversikt .filt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ink); border-radius: 999px; padding: 2px 8px 2px 10px; font-size: 12px; margin-left: 8px; vertical-align: middle; letter-spacing: 0; font-weight: 500; }
#oversikt .filt button { font-size: 14px; line-height: 1; color: var(--mute); }
#oversikt .cw2 { position: relative; height: 240px; margin-top: 8px; }
#oversikt .side { display: flex; flex-direction: column; gap: 12px; }
#oversikt .chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 12px 0 4px; }
#oversikt .chain .st { padding: 8px 10px 8px 0; border-top: 2px solid var(--line); width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-self: stretch; }
#oversikt .chain .st:hover .w { text-decoration: underline; text-underline-offset: 3px; }
#oversikt .chain .st.now { border-top-color: var(--ink); }
#oversikt .chain .st .t { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
#oversikt .chain .st .w { font-size: 13px; font-weight: 500; margin-top: 2px; }
#oversikt .chain .st .s { font-size: 12px; color: var(--mute); }
#oversikt .def { margin: 0; }
#oversikt .def dt { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 600; margin: 0 0 2px; }
#oversikt .def dd { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }
#oversikt .def dd:last-child { margin-bottom: 0; }
#oversikt details summary { cursor: pointer; font-size: 13px; color: var(--mute); list-style: none; }
#oversikt details summary::before { content: "+ "; }
#oversikt details[open] summary::before { content: "– "; }
#oversikt details p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
#oversikt .breakdown { width: 100%; border-collapse: collapse; font-size: 14px; }
#oversikt .breakdown td { padding: 6px 0; border-bottom: 1px solid var(--hair); }
#oversikt .breakdown tr:last-child td { border-bottom: 0; }
#oversikt .breakdown td:last-child { text-align: right; font-weight: 600; }
#oversikt .breakdown tr.link { cursor: pointer; }
#oversikt .breakdown tr.link:hover td { background: var(--soft); }
#oversikt .breakdown tr.on td:first-child { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#oversikt .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* Panelets .btn og .link har lavere spesifisitet enn #oversikt button, så de settes igjen her. */
#oversikt .btn:not(#driftMaskineri *) { padding: 8px 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); font-size: 14px; }
#oversikt .btn:hover:not(#driftMaskineri *) { border-color: var(--ink); }
#oversikt .btn.primary:not(#driftMaskineri *) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#oversikt .link:not(#driftMaskineri *) { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
#oversikt .link:hover { color: var(--ink); }
#oversikt .alist { display: flex; flex-direction: column; gap: 2px; }
#oversikt .alist button { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; width: 100%; font-size: 14px; }
#oversikt .alist button:hover { background: var(--soft); }
#oversikt .alist .r { font-size: 11px; color: var(--mute); white-space: nowrap; }
#oversikt .alist .r.high { color: var(--signaltekst); }
/* A/B/C-merkingen (steg 82): A ett klikk her i panelet, B gjør økten i terminalen, C gjør Sebastian
   selv på den andre plattformen. Fargene følger mockupen Sebastian godkjente: A mørk fylt pille, B lys
   grå ramme, C lys oransje ramme. */
#oversikt .kat { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 700; flex: none; }
#oversikt .kat.a { background: var(--ink); color: var(--paper); }
#oversikt .kat.b { border: 1px solid var(--line); color: var(--mute); }
#oversikt .kat.c { border: 1px solid var(--signal); color: var(--signaltekst); background: color-mix(in srgb, var(--signal) 10%, transparent); }
#oversikt .alist.bc { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--hair); gap: 10px; }
#oversikt .hrow { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 6px 8px; align-items: start; }
#oversikt .hrow .hva { font-size: 13.5px; line-height: 1.4; }
#oversikt .hrow .hvorfor { font-size: 12px; color: var(--mute); line-height: 1.4; margin-top: 2px; }
/* Kvitteringslinjen (steg 82, del 2): hvor og når handlingen faktisk skriver, ekte stier fra
   kildekoden. Samme dempede monospace som strimmelboksene i Drift, se .src .tall. */
#oversikt .hrow .kvittering { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--mute); margin-top: 4px; }
/* Rekkefølgetallet (steg 82, del 6): bare med når kortet har mer enn ett B/C-steg. .mark holder
   tallet og A/B/C-pillen sammen i én kolonne, .hrow sitt grid er uendret. */
#oversikt .hrow .mark { display: flex; align-items: center; gap: 6px; }
#oversikt .hrow .seq { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--mute); }
#oversikt .related { display: flex; gap: 8px; flex-wrap: wrap; }

/* ⓘ-boksen */
.opop { position: absolute; z-index: 20; width: 340px; max-width: calc(100vw - 32px); background: var(--card); border: 1px solid var(--ink); border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 28px var(--skygge); font-size: 13px; line-height: 1.45; display: none; }
.opop.on { display: block; }
.opop dt { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 600; margin-top: 8px; }
.opop dt:first-child { margin-top: 0; }
.opop dd { margin: 1px 0 0; }
.opop .related button { text-decoration: underline; text-underline-offset: 3px; margin-right: 8px; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Arket for én handling */
.oveil { position: fixed; inset: 0; background: rgba(18,16,14,.45); z-index: 30; display: none; align-items: center; justify-content: center; padding: 20px; }
.oveil.on { display: flex; }
.osheet { background: var(--card); border: 1px solid var(--line); border-radius: 14px; max-width: 520px; width: 100%; padding: 20px 22px 16px; box-shadow: 0 20px 60px var(--skygge); max-height: 90vh; overflow: auto; }
.osheet h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.osheet > p { margin: 0 0 12px; color: var(--mute); font-size: 13.5px; }
.osheet label { display: block; font-size: 12px; color: var(--mute); margin: 8px 0 3px; }
.osheet input, .osheet textarea, .osheet select { font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; width: 100%; }
.osheet .row { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.osheet .risk { font-size: 12px; color: var(--mute); flex-basis: 100%; margin-top: 4px; }
.osheet .risk.high { color: var(--signaltekst); }
.otoast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 8px 24px var(--skygge); display: none; z-index: 40; max-width: calc(100vw - 40px); }
.otoast.on { display: block; }
.otoast button { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; margin-left: 10px; font: inherit; background: none; border: 0; cursor: pointer; }

/* Grafer: på kortene (30 dager), øverst i hvert område, og for helsesjekken. */
#oversikt .area .mini { height: 56px; margin: 0; }
#oversikt .chart1 { margin: 0 0 14px; }
#oversikt .cw1 { height: 190px; }
/* Helse: én rad per kobling med strimmel av de siste sjekkene. */
#oversikt .rows.helse .hrow { display: grid; grid-template-columns: 10px minmax(170px, 1.3fr) minmax(120px, 1fr) 120px 18px; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--hair); width: 100%; text-align: left; }
#oversikt .hrow:last-child { border-bottom: 0; }
#oversikt .hrow:hover { background: var(--soft); }
#oversikt .hrow .k { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#oversikt .hrow .lab { font-weight: 500; }
#oversikt .hrow .explain { font-size: 12.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#oversikt .hrow .st { font-size: 12px; color: var(--mute); text-align: right; white-space: nowrap; }
#oversikt .hrow .go { color: var(--mute); text-align: right; }
#oversikt .strip { display: flex; gap: 2px; align-items: stretch; height: 18px; }
#oversikt .strip i { flex: 1 1 0; min-width: 2px; max-width: 9px; border-radius: 2px; background: var(--hair); }
#oversikt .strip i.ok { background: var(--ok); }
#oversikt .strip i.warn { background: var(--signal); }
#oversikt .strip i.wait { background: var(--wait, var(--mute)); }
#oversikt .strip i.info { background: var(--line); }
#oversikt .strip i.none { background: transparent; border: 1px dashed var(--hair); }
#oversikt .strip.big { height: 36px; gap: 3px; margin: 8px 0 4px; }
#oversikt .strip.big i { max-width: 14px; }
#oversikt .todo:not(#driftMaskineri *) { font-size: 13.5px; background: var(--soft); border-radius: 8px; padding: 8px 10px; margin: 10px 0 0; }

@media (max-width: 820px) {
  #oversikt .card, #oversikt .top1, #oversikt .rows { overflow-x: auto; max-width: 100%; }
  #oversikt .area .mini { height: 74px; }
  #oversikt .cw1 { height: 160px; }
  #oversikt .rows.helse .hrow { grid-template-columns: 10px 1fr auto; }
  #oversikt .hrow .strip { grid-column: 2 / -1; height: 12px; }
  #oversikt .hrow .go { display: none; }
  #oversikt table.t th, #oversikt table.t td { white-space: normal; }
  #oversikt .ctl .hint { margin-left: 0; flex-basis: 100%; }
  #oversikt .heronum .v { font-size: 32px; }
  #oversikt .trow { grid-template-columns: 22px minmax(0, 1fr) 56px 16px; }
  #oversikt .trow .bar { display: none; }
  #oversikt .tilpassbar .row { gap: 6px; }
  #oversikt .metric { grid-template-columns: 1fr; }
  #oversikt .rowhead { display: none; }
  #oversikt .orow { grid-template-columns: 1fr 90px auto; }
  #oversikt .orow .od, #oversikt .orow .go { display: none; }
  #oversikt .chain { grid-template-columns: 1fr 1fr; }
  #oversikt .lede { font-size: 22px; }
}

/* Ord fra ordlista: prikket strek, klikk gir forklaring. */
#oversikt .ord { text-decoration: underline dotted; text-decoration-color: var(--mute); text-underline-offset: 3px; cursor: help; }
#oversikt .ord:hover { text-decoration-style: solid; }
#oversikt .ordliste { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 6px 16px; margin: 0; }
#oversikt .ordliste dt { font-weight: 600; }
#oversikt .ordliste dd { margin: 0; color: var(--mute); }

/* Tilpass: kortene får håndtak og kan dras, skjules og få nytt tall. Verktøylinjene er stiplet. */
#oversikt .handle { display: none; color: var(--mute); font-size: 14px; letter-spacing: -2px; margin-right: 2px; }
#oversikt.tilpass .handle { display: inline; }
#oversikt.tilpass .area { cursor: grab; border-style: dashed; }
#oversikt.tilpass .area.drag { opacity: .4; }
#oversikt.tilpass .area.over { border-color: var(--ink); border-style: solid; box-shadow: inset 0 0 0 2px var(--ink); }
#oversikt.tilpass .area .statline { display: none; }
#oversikt .edit { border-top: 1px dashed var(--line); padding-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--mute); }
#oversikt .edit select { font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 3px 24px 3px 8px; font-size: 12px; max-width: 150px; }
#oversikt .tilpassbar { background: var(--card); border: 1px dashed var(--line); border-radius: var(--r); padding: 12px 16px; margin: 0 0 14px; font-size: 13px; }
#oversikt .tilpassbar h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
#oversikt .tilpassbar .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
#oversikt .tilpassbar label { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: var(--paper); }
#oversikt .tilpassbar label input[type="checkbox"] { margin: 0; }
#oversikt .tilpassbar select { font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 1px 20px 1px 6px; font-size: 12px; }
#oversikt .tilpassbar input[type="text"], #oversikt .tilpassbar input:not([type]) { font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
#oversikt .bygg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#oversikt .bygg span { border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; background: var(--paper); font-size: 12.5px; }
#oversikt .bygg span b { display: block; font-weight: 600; font-size: 13px; }
#oversikt .bygg span i { font-style: normal; color: var(--mute); }
#oversikt .link.on { color: var(--ink); font-weight: 600; }

/* Guiden: fire steg i arket. */
.osheet .steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.osheet .step { border: 1px solid var(--hair); border-radius: 10px; padding: 12px 14px; }
.osheet .step .n { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.osheet .step h4 { margin: 2px 0 4px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.osheet .step p { margin: 0; font-size: 13px; color: var(--mute); line-height: 1.45; }
@media (max-width: 600px) { .osheet .steps { grid-template-columns: 1fr; } }

/* Lag 2: siling og radene bak tallet (steg 68) */
#oversikt .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
#oversikt .chips .chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#oversikt .card.bak { margin-top: 12px; }
#oversikt .bakrad { padding: 10px 0; border-bottom: 1px solid var(--hair); }
#oversikt .bakrad:last-of-type { border-bottom: 0; }
#oversikt .bakrad .bh { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; color: var(--mute); flex-wrap: wrap; }
#oversikt .bakrad .bh b, #oversikt .bakrad .bh .hv { color: var(--ink); font-weight: 600; font-size: 13px; }
#oversikt .bakrad .bh .hv:hover, #oversikt .bakrad .bh .hv.on { text-decoration: underline; text-underline-offset: 3px; }
#oversikt .bakrad .bh .bv { margin-left: auto; font-weight: 600; color: var(--ink); }
#oversikt .bakrad .bt { font-size: 14px; margin-top: 3px; line-height: 1.4; }
#oversikt .bakrad .bx { font-size: 13px; color: var(--mute); margin-top: 3px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
#oversikt .bakrad .bm { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; align-items: center; }
#oversikt .bakrad .tag { font-size: 11.5px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--mute); background: var(--card); }
#oversikt .bakrad button.tag:hover { border-color: var(--ink); color: var(--ink); }
#oversikt .bakrad .tag.klage { border-color: var(--signal); color: var(--signal); }
#oversikt .bakrad .tag.ros { border-color: var(--ok); color: var(--ok); }
#oversikt .bakrad .bm a { font-size: 12.5px; margin-left: auto; white-space: nowrap; }

/* Steg 116: «Mer» i oversikten samler valuta, forklaringer, ordliste og Tilpass. */
#oversikt .ctlmer summary { cursor: pointer; color: var(--mute); font-size: 13px; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
#oversikt .ctlmer summary::-webkit-details-marker { display: none; }
#oversikt .ctlmeny { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 8px; font-size: 13px; }