/* #291/#299/#300: styringsdashbordet, delt mellom /poc/dashboard og Prove and Build. Farger, skrifter, radius og skygger er chromens tokener;
   drakten «business» (Erlends valg) bytter verdiene. Flisen heter .result (#292). */
/* #291: den første POC-en, styringsdashbordet — en underside med den delte chromen (#5/#7). Alt står på én side: inndata til venstre (kildene som kort
   som åpnes, med glidebrytere), dashbordet i midten (dommen med merket, de tre tallene, nøkkeltallene med drilldown, rådene med grunnlaget bak, og de
   tolv månedene) og scenariene til høyre (Moosa 12.10: «På høyre side av løsningen skal det være ulike scenarier»). På mobil står dashbordet først, så
   scenariene, så inndata. #299: farger, skrifter, radius og skygger er chromens tokener; drakten «business» (Erlends valg, standard her) bytter verdiene. */
.content { text-align:center; }
.section { scroll-margin-top:84px; }
.note { max-width:780px; margin:-1.4rem auto 2rem; color:var(--muted); font-size:1.02rem; line-height:1.5; text-wrap:pretty; }
.card { position:relative; border:1px solid var(--line); border-radius:var(--radius); padding:2.3rem 1.9rem; background:var(--card); backdrop-filter:blur(6px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:.95rem; max-width:420px; margin:0 auto; box-shadow:var(--shadow); }
.card .mark { color:var(--accent-2); line-height:0; }
.card .mark svg { width:46px; height:46px; }
.card h3 { font-size:1.5rem; color:var(--accent); font-weight:500; letter-spacing:.3px; line-height:1.3; margin:0; text-wrap:balance; }
.card .code-slot { width:100%; }
/* løsningen bryter ut av tekstbredden, symmetrisk, så tre spalter får plass på skjerm; på mobil er den like bred som alt annet */
.poc-layout { display:grid; grid-template-columns:1fr; gap:1.3rem; text-align:left; width:min(100vw - 2.8rem, 1380px); position:relative; left:50%; transform:translateX(-50%); margin:0 0 1rem; }
.panel { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); backdrop-filter:blur(6px); padding:1.3rem 1.2rem; min-width:0; box-shadow:var(--shadow); }
.panel.output { order:1; } .panel.scenarios { order:2; } .panel.inputs { order:3; }
@media (min-width:1100px) {
  .poc-layout { grid-template-columns:minmax(290px,330px) minmax(0,1fr) minmax(230px,270px); align-items:start; }
  .panel.inputs { order:1; } .panel.output { order:2; } .panel.scenarios { order:3; position:sticky; top:84px; }
}
.panel-title { font-size:1.35rem; color:var(--ink); font-weight:600; letter-spacing:.2px; margin:0 0 .25rem; }
.panel-sub { color:var(--muted); font-size:1.02rem; margin:0 0 1rem; line-height:1.45; }
.sans { font-family:var(--font-ui); }
/* inndata: hver kilde er et kort som åpnes; inni står glidebryterne med verdien og én linje om hva tallet er (drilldown) */
.cat { border:1px solid var(--line-soft); border-radius:calc(var(--radius) - 4px); background:var(--card-3); margin-bottom:.7rem; overflow:hidden; }
.cat-head { width:100%; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:.7rem; padding:.85rem .95rem; background:none; border:none; color:var(--ink); cursor:pointer; text-align:left; font:inherit; }
.cat-head .mark { color:var(--accent-2); line-height:0; } .cat-head .mark svg { width:30px; height:30px; }
.cat-head .cat-t { font-size:1.18rem; color:var(--ink); font-weight:600; line-height:1.2; }
.cat-head .cat-sum { display:block; font-family:var(--font-ui); font-size:.78rem; color:var(--muted); margin-top:.15rem; letter-spacing:.2px; }
.cat-head .chev { color:var(--muted); transition:transform .25s ease; font-size:.9rem; }
.cat-head[aria-expanded="true"] .chev { transform:rotate(180deg); }
.cat-body { padding:0 .95rem 1rem; }
.cat-d { color:var(--ink-2); font-size:1rem; line-height:1.45; margin:0 0 .8rem; }
.slider { margin:0 0 .9rem; }
.slider .row { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; }
.slider label { color:var(--ink); font-size:1.08rem; line-height:1.3; }
.slider output { font-family:var(--font-ui); font-size:.92rem; font-weight:600; color:var(--accent-2); white-space:nowrap; }
.slider .in-d { margin:.1rem 0 0; color:var(--muted); font-size:.92rem; line-height:1.4; }
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:30px; background:transparent; margin:0; display:block; --p:50%; }
input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:linear-gradient(to right, var(--accent) 0 var(--p), var(--line) var(--p) 100%); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; margin-top:-9px; border-radius:50%; background:var(--accent-2); border:2px solid var(--bg); box-shadow:var(--shadow-2); cursor:pointer; }
input[type=range]::-moz-range-track { height:4px; border-radius:2px; background:var(--line); }
input[type=range]::-moz-range-progress { height:4px; border-radius:2px; background:var(--accent); }
input[type=range]::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--accent-2); border:2px solid var(--bg); cursor:pointer; }
input[type=range]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
/* dashbordet (#299, Erlends rekkefølge): dommen med merket, de tre tallene, de andre nøkkeltallene, drilldown, rådene med grunnlaget, så de tolv månedene */
.status { display:grid; grid-template-columns:1fr auto; gap:.3rem .7rem; align-items:center; padding:0 0 1rem; border-bottom:1px solid var(--line-soft); margin-bottom:1rem; }
.status .lvl { font-family:var(--font-ui); font-size:.78rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); }
.status h3 { grid-column:1 / -1; margin:0; font-size:1.6rem; color:var(--ink); font-weight:600; line-height:1.25; text-wrap:balance; }
.status p { grid-column:1 / -1; margin:0; color:var(--ink-2); font-size:1.08rem; line-height:1.5; }
/* merket: statusfargen sier hva den betyr, aldri pynt (Erlend 13.10) */
.pd-pill { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-ui); font-size:.8rem; font-weight:600; letter-spacing:.3px; padding:.3rem .7rem; border-radius:999px; white-space:nowrap; color:var(--ink); background:color-mix(in srgb, var(--muted) 14%, transparent); }
.pd-pill .dot { width:9px; height:9px; border-radius:50%; background:var(--muted); flex:none; }
.level-good .pd-pill .dot { background:var(--ok); } .level-watch .pd-pill .dot, .level-warning .pd-pill .dot { background:var(--warn); } .level-tight .pd-pill .dot, .level-loss .pd-pill .dot, .level-critical .pd-pill .dot { background:var(--bad); } .level-info .pd-pill .dot { background:var(--info); }
.level-good .pd-pill { background:color-mix(in srgb, var(--ok) 14%, transparent); } .level-watch .pd-pill, .level-warning .pd-pill { background:color-mix(in srgb, var(--warn) 16%, transparent); } .level-tight .pd-pill, .level-loss .pd-pill, .level-critical .pd-pill { background:color-mix(in srgb, var(--bad) 14%, transparent); } .level-info .pd-pill { background:color-mix(in srgb, var(--info) 14%, transparent); }
/* de tre tallene: resultatet, marginen og likviditeten (#292: flisen heter .result, chromen eier navnet på forsidens første seksjon) */
.pd-main { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:.6rem; margin:0 0 .6rem; }
.result, .kpi { text-align:left; background:var(--card-3); border:1px solid var(--line-soft); border-radius:calc(var(--radius) - 4px); padding:.85rem .9rem; color:inherit; cursor:pointer; font:inherit; transition:border-color .2s ease, background .2s ease; min-width:0; display:block; width:100%; }
.result:hover, .kpi:hover { border-color:var(--accent); }
.result[aria-pressed="true"], .kpi[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); }
.result .label, .kpi .label { display:block; font-family:var(--font-ui); font-size:.84rem; font-weight:500; color:var(--muted); line-height:1.25; }
.result .value { display:block; font-family:var(--font-ui); font-size:clamp(1.9rem, 4vw, 2.5rem); font-weight:600; letter-spacing:-.5px; color:var(--ink); line-height:1.1; margin:.25rem 0 .1rem; white-space:nowrap; }
.result .delta { display:block; font-family:var(--font-ui); font-size:.82rem; color:var(--muted); min-height:1.2em; }
.pd-main .kpi .value { font-size:clamp(1.5rem, 3.4vw, 2rem); }
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(136px, 1fr)); gap:.6rem; margin:0 0 .9rem; }
.kpi .value { display:block; font-family:var(--font-ui); font-size:clamp(1.05rem, 4.2vw, 1.42rem); font-weight:600; color:var(--ink); margin:.25rem 0 .1rem; line-height:1.15; white-space:nowrap; }   /* tallet står på én linje også i to spalter på 320 og 390 px (#12: lest i renderen) */
.kpi .sub { display:block; font-family:var(--font-ui); font-size:.78rem; color:var(--muted); line-height:1.3; }
.kpi .spark { display:block; width:100%; height:26px; margin-top:.35rem; }
.drill { border:1px solid var(--line); border-radius:calc(var(--radius) - 4px); padding:1rem 1.05rem; margin:0 0 1.1rem; background:var(--accent-soft); }
.drill h4 { margin:0 0 .3rem; font-size:1.28rem; color:var(--ink); font-weight:600; }
.drill p { margin:0 0 .6rem; color:var(--ink-2); font-size:1.03rem; line-height:1.5; }
.drill .eyebrow, .pd-basis .eyebrow { display:block; font-family:var(--font-ui); font-size:.74rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin:.5rem 0 .3rem; }
.drill ul, .pd-basis ul { list-style:none; margin:0; padding:0; }
.drill li, .pd-basis li { display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.35rem 0; border-top:1px solid var(--line-soft); font-size:1.02rem; }
.drill li .val, .pd-basis li .val { font-family:var(--font-ui); font-size:.9rem; color:var(--ink); margin-left:auto; }
.drill li .adjust, .drill .close, .pd-basis li .adjust, .pd-why { background:none; border:none; cursor:pointer; padding:0; font-family:var(--font-ui); font-size:.74rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--accent-2); }
.drill li .adjust:hover, .drill .close:hover, .pd-basis li .adjust:hover, .pd-why:hover { color:var(--accent); }
.drill .close { display:block; margin:.7rem 0 0; }
.block h3 { font-size:1.35rem; color:var(--ink); font-weight:600; margin:1rem 0 .3rem; letter-spacing:.2px; }
.block > p { margin:0 0 .8rem; color:var(--ink-2); font-size:1.05rem; line-height:1.5; }
.charts { position:relative; }
.chart { outline:none; border-radius:12px; margin:0 0 .6rem; padding:.3rem 0 0; }
.chart:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.chart .ct { font-family:var(--font-ui); font-size:.78rem; letter-spacing:1.3px; text-transform:uppercase; color:var(--muted); margin:0 0 .2rem; }
.chart svg { width:100%; height:auto; display:block; }
.chart text { font-family:var(--font-ui); font-size:11px; fill:var(--muted); font-variant-numeric:tabular-nums; }
.chart .lbl { fill:var(--ink); font-weight:600; }
.chart .grid { stroke:var(--line-soft); stroke-width:1; }
.chart .zero { stroke:var(--line); stroke-width:1; }
.chart .credit { stroke:var(--accent); stroke-width:1; opacity:.55; }
.chart .line { fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart .wash { fill:var(--accent); opacity:.1; }
.chart .dot { fill:var(--accent); stroke:var(--bg); stroke-width:2; }
.chart .bar { fill:var(--ink-3); }
.chart .bar.neg { fill:var(--bad); opacity:.75; }
.chart .cross { stroke:var(--ink); stroke-width:1; opacity:.5; }
.chart .hit { fill:transparent; }
.tip { position:absolute; pointer-events:none; background:var(--card-2); border:1px solid var(--line); border-radius:10px; padding:.5rem .7rem; font-family:var(--font-ui); font-size:.8rem; color:var(--ink); z-index:2; min-width:150px; box-shadow:var(--shadow-2); }
.tip b { display:block; margin-bottom:.2rem; color:var(--accent-2); }
.tip div { display:flex; justify-content:space-between; gap:.8rem; } .tip div span:last-child { font-weight:600; }
.view-toggle { background:none; border:none; cursor:pointer; padding:0; font-family:var(--font-ui); font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent-2); }
.view-toggle:hover { color:var(--accent); }
table.months { width:100%; border-collapse:collapse; font-family:var(--font-ui); font-size:.82rem; font-variant-numeric:tabular-nums; margin:0 0 .6rem; }
table.months th, table.months td { text-align:right; padding:.3rem .4rem; border-bottom:1px solid var(--line-soft); }
table.months th:first-child, table.months td:first-child { text-align:left; }
table.months th { color:var(--muted); font-weight:600; }
/* rådene: merket, tittelen, teksten, og «Hvorfor anbefales dette?» som åpner grunnlaget (#299) */
.advice ol { list-style:none; margin:0; padding:0; }
.advice li { display:grid; grid-template-columns:auto 1fr; gap:.35rem .7rem; align-items:center; padding:.85rem 0; border-top:1px solid var(--line-soft); }
.advice li h4 { grid-column:1 / -1; margin:0; font-size:1.22rem; color:var(--ink); font-weight:600; line-height:1.25; }
.advice li p { grid-column:1 / -1; margin:0; color:var(--ink-2); font-size:1.03rem; line-height:1.5; }
.advice li .pd-why { grid-column:1 / -1; justify-self:start; margin-top:.15rem; }
.advice li .pd-why[aria-expanded="true"] { color:var(--accent); }
.pd-basis { grid-column:1 / -1; border:1px solid var(--line-soft); border-radius:calc(var(--radius) - 6px); padding:.6rem .9rem .8rem; background:var(--card-3); }
.pd-basis[hidden] { display:none; }
/* scenariene: trykkbare kort; det som gjelder nå, lyser */
.scn { width:100%; text-align:left; background:var(--card-3); border:1px solid var(--line-soft); border-radius:calc(var(--radius) - 4px); padding:.75rem .9rem; margin:0 0 .55rem; color:inherit; cursor:pointer; font:inherit; transition:border-color .2s ease, background .2s ease; }
.scn:hover { border-color:var(--accent); }
.scn[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); }
.scn .scn-t { display:block; font-size:1.15rem; color:var(--ink); font-weight:600; line-height:1.25; }
.scn .scn-d { display:block; color:var(--muted); font-size:.95rem; line-height:1.4; margin-top:.15rem; }
.scn-note { color:var(--muted); font-size:.92rem; margin:.4rem 0 0; }
@media (max-width:1099px) { #scenario-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:.55rem; } .scn { margin:0; } }
@media (prefers-reduced-motion: reduce) { .cat-head .chev, .kpi, .scn, .result { transition:none; } }
.changes { display:flex; justify-content:space-between; align-items:center; gap:.6rem .9rem; flex-wrap:wrap; margin:.1rem 0 .9rem; }
.changes-h { margin:0; color:var(--ink-2); font-size:1rem; line-height:1.4; } .changes-h b { color:var(--accent); font-weight:500; }
.slider .row .val { display:flex; gap:.45rem; align-items:baseline; }
.slider .delta-tag { font-family:var(--font-ui); font-size:.82rem; color:var(--accent-2); white-space:nowrap; }
.scn-ch { display:block; margin-top:.4rem; font-family:var(--font-ui); font-size:.8rem; color:var(--accent-2); line-height:1.45; } .scn-ch:empty { display:none; }
.scn-own { color:var(--accent-2); }
#locked-title { margin-bottom:1.6rem; }   /* luft mellom navnet og kortet med koden, som på /poc */
/* #308: the predefined reports (Moosa 14.10). Printing shows only the report. */
.pd-reports { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:.6rem; margin:.4rem 0 .8rem; }
.pd-report-btn { text-align:left; cursor:pointer; background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius, 12px); padding:.8rem .9rem; color:var(--ink); font-family:var(--font-ui); display:flex; flex-direction:column; gap:.25rem; }
.pd-report-btn b { font-size:.98rem; } .pd-report-btn span { color:var(--muted); font-size:.86rem; line-height:1.45; }
.pd-report-btn:hover { border-color:var(--accent); }
.pd-report-host { margin:1rem 0 0; }
.pd-report { background:var(--card); border:1px solid var(--line); border-radius:var(--radius, 12px); padding:1.2rem 1.3rem 1rem; box-shadow:var(--shadow); color:var(--ink); font-family:var(--font-ui); }
.pd-report header { margin:0 0 .8rem; } .pd-report header .eyebrow { display:block; font-size:.74rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }
.pd-report h3 { margin:.2rem 0 .3rem; font-size:1.4rem; color:var(--ink); } .pd-report h4 { margin:1rem 0 .4rem; font-size:1.05rem; color:var(--ink); }
.pd-report .pd-report-meta, .pd-report .pd-report-note, .pd-report footer p { color:var(--muted); font-size:.86rem; margin:.15rem 0; }
.pd-report > p { color:var(--ink-2); font-size:1rem; line-height:1.5; margin:0 0 .6rem; }
.pd-report .status { margin:0 0 .8rem; } .pd-report .status h4 { margin:.3rem 0 .2rem; }
.pd-report table.months tr.current td { font-weight:600; }
.pd-report-advice { padding-left:1.2rem; margin:0 0 .6rem; } .pd-report-advice li { margin:0 0 .7rem; } .pd-report-advice li b { display:block; margin:.2rem 0; } .pd-report-advice li p { margin:0 0 .3rem; color:var(--ink-2); font-size:.95rem; }
.pd-report .actions { display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0 0; }
.pd-btn { cursor:pointer; border:none; border-radius:999px; padding:.6rem 1.1rem; background:var(--accent); color:var(--on-accent, #fff); font-family:var(--font-ui); font-weight:600; font-size:.92rem; }
.pd-btn.sek { background:var(--card-2); color:var(--ink); border:1px solid var(--line); }
@media print { html.pd-print body * { visibility:hidden; } html.pd-print .pd-report, html.pd-print .pd-report * { visibility:visible; } html.pd-print .pd-report { position:absolute; left:0; top:0; width:100%; box-shadow:none; border:none; } html.pd-print .pd-report .actions { display:none; } }
.pd-sets { margin:-.2rem 0 1rem; text-align:center; } .pd-sets a { color:var(--accent); text-decoration:none; font-family:var(--font-ui); font-weight:600; font-size:.95rem; } .pd-sets a:hover { text-decoration:underline; }   /* #309: the way to the rules and the inputs */