*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  background:var(--canvas); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button,input,select,textarea{ font:inherit; color:inherit }
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.015em }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1 }
.muted{ color:var(--ink-2) }
.faint{ color:var(--ink-3) }
.neg{ color:var(--neg) }
.pos{ color:var(--pos) }
.warn{ color:var(--warn) }
.nowrap{ white-space:nowrap }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }

/* ---------- shell ---------- */
.shell{ display:grid; grid-template-columns:var(--side) minmax(0,1fr); min-height:100vh }
.side{
  position:sticky; top:0; height:100vh; overflow:auto;
  background:var(--surface); border-right:1px solid var(--hair);
  display:flex; flex-direction:column; padding:18px 14px 14px;
}
.brand{ display:flex; gap:11px; align-items:center; padding:4px 8px 18px }
.brand .mark{
  width:34px; height:34px; border-radius:10px; flex:none;
  background:linear-gradient(145deg,#7565F5,#4436C4); display:grid; place-items:center;
  box-shadow:0 1px 2px rgba(53,40,170,.25), 0 8px 18px -10px rgba(53,40,170,.6);
}
.brand b{ display:block; font-size:15px; letter-spacing:-.01em }
.brand small{ display:block; color:var(--ink-3); font-size:12px; margin-top:1px }
.navgroup{ margin:14px 0 4px; padding:0 10px; font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3) }
.nav{ display:flex; flex-direction:column; gap:2px }
.nav a{
  display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:9px;
  color:var(--ink-2); font-weight:500; text-decoration:none; position:relative;
}
.nav a:hover{ background:var(--hover); color:var(--ink) }
.nav a[aria-current="page"]{ background:var(--wash); color:var(--accent); font-weight:600 }
.nav a svg{ flex:none; opacity:.9 }
.nav .step{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-3) }
.side .grow{ flex:1 }
.side .who{ border-top:1px solid var(--hair); margin-top:12px; padding:12px 8px 2px; display:flex;
  align-items:center; gap:10px; font-size:13px }
.side .who .av{ width:30px; height:30px; border-radius:50%; background:var(--sunk-2); display:grid;
  place-items:center; font-weight:700; font-size:12px; color:var(--ink-2); flex:none }
.side .who .nm{ flex:1; min-width:0 }
.side .who .nm b{ display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.side .who .nm small{ color:var(--ink-3) }

.main{ min-width:0; padding:26px 32px 64px; max-width:1480px; width:100% }
.pagehead{ display:flex; gap:20px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
  margin-bottom:18px }
.pagehead h1{ font-size:26px; line-height:1.15 }
.pagehead p{ margin:6px 0 0; color:var(--ink-2); max-width:760px }
.filters{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 20px }
.filters .sep{ width:1px; height:24px; background:var(--hair-2) }
.fresh{ display:inline-flex; gap:4px 12px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--ink-2);
  padding:6px 12px; border-radius:14px; background:var(--surface); border:1px solid var(--hair); max-width:100% }
.fresh .fpart{ display:inline-flex; gap:7px; align-items:center }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--good-mark); flex:none }
.dot.old{ background:var(--warn-mark) }
.dot.bad{ background:var(--crit-mark) }
.dot.grey{ background:var(--ink-4) }
.stalebar{ display:flex; flex-direction:column; gap:10px; margin:0 0 18px }
.stalebar a{ font-weight:600 }

.mobilebar{ display:none }
@media (max-width: 980px){
  .shell{ grid-template-columns:1fr }
  .side{ position:fixed; inset:0 auto 0 0; width:min(86vw,300px); z-index:40; transform:translateX(-104%);
    transition:transform .2s ease; box-shadow:var(--lift-2) }
  .side[data-open="1"]{ transform:none }
  .scrim{ position:fixed; inset:0; background:rgba(10,10,20,.35); z-index:39 }
  .mobilebar{ display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:30;
    background:var(--surface); border-bottom:1px solid var(--hair); padding:10px 16px }
  .mobilebar b{ font-size:15px }
  .main{ padding:18px 16px 56px }
  .pagehead h1{ font-size:22px }
}

/* ---------- controls ---------- */
.seg{ display:inline-flex; background:var(--sunk); border-radius:10px; padding:3px; gap:2px; flex-wrap:wrap }
.seg button{ border:0; background:transparent; padding:6px 11px; border-radius:8px; cursor:pointer;
  color:var(--ink-2); font-weight:500; font-size:13px; display:inline-flex; gap:7px; align-items:center }
.seg button:hover{ color:var(--ink) }
.seg button[aria-pressed="true"]{ background:var(--raised); color:var(--ink); box-shadow:0 1px 2px rgba(26,24,58,.10), 0 0 0 1px var(--hair) }
.swatch{ width:9px; height:9px; border-radius:3px; flex:none; display:inline-block }
.btn{ border:1px solid var(--hair-2); background:var(--surface); border-radius:9px; padding:7px 13px;
  cursor:pointer; font-weight:600; font-size:13px; display:inline-flex; gap:7px; align-items:center }
.btn:hover{ background:var(--hover) }
.btn.primary{ background:var(--accent); color:var(--on-accent); border-color:transparent }
.btn.primary:hover{ background:var(--accent-hi) }
.btn.ghost{ border-color:transparent; background:transparent }
.btn.small{ padding:4px 9px; font-size:12px; border-radius:7px }
.btn[disabled]{ opacity:.5; cursor:default }
.input, select.input{ border:1px solid var(--hair-2); background:var(--surface); border-radius:8px;
  padding:7px 10px; font-size:13px; min-width:0 }
.input:focus, .seg button:focus-visible, .btn:focus-visible, .nav a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.input.num{ text-align:right; font-variant-numeric:tabular-nums }
label.field{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--ink-2); font-weight:500 }
label.field .hint{ font-weight:400; color:var(--ink-3); font-size:11.5px }
.check{ display:inline-flex; gap:8px; align-items:center; font-size:13px; cursor:pointer }
.infowrap{ display:inline-flex; vertical-align:1px }
.infotip{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; border:0; padding:0;
  background:var(--sunk-2); color:var(--ink-2); font-size:10.5px; font-weight:700; cursor:help; line-height:1 }
.infotip:hover, .infotip[aria-expanded="true"]{ background:var(--wash-2); color:var(--accent) }
.infotip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.popover{ position:fixed; z-index:70; background:var(--raised); color:var(--ink); border:1px solid var(--hair-2);
  border-radius:10px; box-shadow:var(--lift-2); padding:10px 12px; font-size:12.5px; font-weight:400; line-height:1.5;
  text-transform:none; letter-spacing:0; white-space:normal; text-align:left }

/* ---------- cards and grids ---------- */
.grid{ display:grid; gap:16px }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.g6{ grid-template-columns:repeat(6,minmax(0,1fr)) }
.span2{ grid-column:span 2 }
/* six tiles in one row only where a tile can hold "−27,8 mio. kr." */
@media (max-width: 1640px){ .g6{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width: 1280px){ .g4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width: 760px){ .g2,.g3,.g4,.g6{ grid-template-columns:1fr } .span2{ grid-column:auto } }

.card{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); box-shadow:var(--lift);
  padding:18px 20px; min-width:0 }
.card.flush{ padding:0 }
.card > header{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap }
.card > header h2{ font-size:15px; letter-spacing:-.01em }
.card > header p{ margin:3px 0 0; color:var(--ink-2); font-size:12.5px; max-width:640px }
.card > header .tools{ display:flex; gap:6px; align-items:center }
.card.flush > header{ padding:16px 20px 0 }
.section-title{ margin:28px 0 12px; display:flex; align-items:baseline; gap:4px 12px; flex-wrap:wrap }
.section-title h2{ font-size:17px }
.section-title p{ margin:0; color:var(--ink-2); font-size:13px }

/* hero and stat tiles */
.herocard{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:28px; align-items:center; padding:24px 26px; margin-bottom:16px }
@media (max-width: 1100px){ .herocard{ grid-template-columns:1fr } }
.herocard .kicker{ font-size:12.5px; color:var(--ink-2); font-weight:600 }
.herocard .figure{ font-size:48px; font-weight:700; letter-spacing:-.035em; line-height:1.05; margin:8px 0 8px; white-space:nowrap }
.herocard .figure small{ font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--ink-2); margin-left:8px }
.herocard .verdict{ font-size:14.5px; line-height:1.6; color:var(--ink) }
.herocard .verdict b{ font-weight:650 }
@media (max-width: 760px){ .herocard .figure{ font-size:38px } }
.alertgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; margin-bottom:16px }
.hero{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px; margin-bottom:16px }
@media (max-width: 980px){ .hero{ grid-template-columns:1fr } }
.hero .card{ padding:22px 24px }
.hero .kicker{ font-size:12.5px; color:var(--ink-2); font-weight:600 }
.hero .figure{ font-size:46px; font-weight:700; letter-spacing:-.035em; line-height:1.05; margin:8px 0 6px }
.hero .figure small{ font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--ink-2); margin-left:6px }
.hero .verdict{ font-size:14.5px; line-height:1.55; color:var(--ink); max-width:640px }
.hero .verdict b{ font-weight:650 }
.stat{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.stat .label{ font-size:12.5px; color:var(--ink-2); font-weight:500; display:flex; gap:6px; align-items:center }
.stat .value{ font-size:24px; font-weight:700; letter-spacing:-.025em; line-height:1.15; white-space:nowrap }
.stat .value.text{ font-size:18px; white-space:normal; letter-spacing:-.01em }
.stat .sub{ font-size:12px; color:var(--ink-2) }
.stat .spark{ margin-top:6px }
.meter{ height:8px; border-radius:99px; background:var(--sunk-2); position:relative; overflow:hidden; margin-top:8px }
.meter i{ position:absolute; inset:0 auto 0 0; border-radius:99px; background:var(--accent) }
.meter i.warn{ background:var(--warn-mark) } .meter i.bad{ background:var(--crit-mark) }
.meter b{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink) }

/* alerts */
.alerts{ display:flex; flex-direction:column; gap:10px }
.alert{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; padding:12px 14px; border-radius:11px;
  background:var(--sunk); border:1px solid var(--hair) }
.alert.crit{ background:var(--neg-wash); border-color:var(--neg-2) }
.alert.warn{ background:var(--warn-wash); border-color:rgba(250,178,25,.35) }
.alert.info{ background:var(--wash); border-color:var(--wash-2) }
.alert .ic{ margin-top:1px }
.alert b{ font-weight:650 }
.alert p{ margin:2px 0 0; color:var(--ink-2); font-size:13px }

/* tables */
.tablewrap{ overflow:auto; max-width:100%; border-radius:0 0 var(--r) var(--r) }
/* more columns to the right: fade the edge (set by useScrollEnd / useScrollCue) */
.tablewrap.more-r{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 36px), rgba(0,0,0,.15));
  mask-image:linear-gradient(to right, #000 calc(100% - 36px), rgba(0,0,0,.15)) }
table.t{ border-collapse:separate; border-spacing:0; width:100%; font-size:13px }
table.t th, table.t td{ padding:7px 10px; border-bottom:1px solid var(--hair); text-align:right; white-space:nowrap }
table.t th:first-child, table.t td:first-child{ text-align:left; position:sticky; left:0; background:var(--surface); z-index:1 }
table.t thead th{ position:sticky; top:0; background:var(--surface); z-index:2; color:var(--ink-2); font-weight:600;
  font-size:12px; border-bottom:1px solid var(--hair-2) }
table.t thead th:first-child{ z-index:3 }
table.t td{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1 }
table.t tr.sum td{ font-weight:700; background:var(--sunk) }
table.t tr.sum td:first-child{ background:var(--sunk) }
table.t tr.total td{ font-weight:800; background:var(--sunk-2); border-bottom:0 }
table.t tr.total td:first-child{ background:var(--sunk-2) }
table.t tr.sub td{ color:var(--ink-2); font-size:12.5px }
table.t tr.sub td:first-child{ padding-left:28px }
table.t tr.click{ cursor:pointer }
table.t tr[role="button"]:focus-visible, table.t td[role="button"]:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }
table.t tr.click:hover td{ background:var(--hover) }
table.t tr.click:hover td:first-child{ background:var(--sunk) }
table.t td.cell-click{ cursor:pointer }
table.t td.cell-click:hover{ background:var(--wash); color:var(--accent) }
table.t th.cur, table.t td.cur{ background:var(--forecast-wash) }
/* the running month: shown, greyed, never in a total */
table.t td.cur, table.t td.cur b, table.t th.cur{ color:var(--ink-3) }
table.t th .mnote{ display:block; font-size:10.5px; font-weight:600; color:var(--warn); margin-top:1px; cursor:help }
table.t th .mnote.run{ color:var(--ink-3) }
table.t .caret{ display:inline-block; width:14px; color:var(--ink-3); transition:transform .15s }
table.t .open .caret{ transform:rotate(90deg) }
table.t td.lbl{ max-width:320px; overflow:hidden; text-overflow:ellipsis }
table.t .linecol{ min-width:230px }
table.t tfoot td{ font-weight:700 }
table.t.compact th, table.t.compact td{ padding:6px 9px }
table.t .bar{ display:inline-block; height:6px; border-radius:3px; vertical-align:1px; margin-right:8px }

/* chart primitives */
.chart{ position:relative; width:100%; user-select:none }
.chart svg{ display:block; width:100%; overflow:visible }
.chart .tick{ font-size:11px; fill:var(--ink-3); font-variant-numeric:tabular-nums }
.chart .gridline{ stroke:var(--grid); stroke-width:1 }
.chart .zero{ stroke:var(--axis); stroke-width:1 }
.chart .limit{ stroke:var(--neg); stroke-width:1.5 }
.chart .limit-label{ font-size:11px; fill:var(--neg); font-weight:600 }
.chart .dlabel{ font-size:11.5px; fill:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums }
.chart .hit{ fill:transparent; cursor:crosshair }
.chart .halo{ paint-order:stroke; stroke:var(--surface); stroke-width:4px; stroke-linejoin:round }
.chart .kfocus{ fill:var(--hover) }
.chart:focus{ outline:none }
.chart:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:6px }
.chart .xhair{ stroke:var(--ink-3); stroke-width:1 }
.tip{ position:absolute; pointer-events:none; z-index:10; background:var(--raised); color:var(--ink);
  border:1px solid var(--hair-2); border-radius:10px; box-shadow:var(--lift-2); padding:9px 11px; font-size:12.5px;
  min-width:150px; max-width:280px }
.tip .th{ color:var(--ink-2); font-size:11.5px; margin-bottom:5px; font-weight:600 }
.tip .row{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:3px }
.tip .row b{ font-variant-numeric:tabular-nums; font-weight:650 }
.tip .key{ display:inline-flex; gap:7px; align-items:center; color:var(--ink-2) }
.tip .key i{ width:12px; height:3px; border-radius:2px; display:inline-block }
.legend{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--ink-2); margin:2px 0 10px }
.legend span{ display:inline-flex; gap:7px; align-items:center }
.legend i{ width:10px; height:10px; border-radius:3px; display:inline-block }
.legend i.line{ height:3px; width:14px; border-radius:2px }
.legend i.dash{ height:0; width:14px; border-top:2px dashed var(--ink-3); border-radius:0 }

/* drawer */
.drawer-scrim{ position:fixed; inset:0; background:rgba(10,10,20,.35); z-index:60 }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(720px,96vw); background:var(--surface); z-index:61;
  box-shadow:var(--lift-2); display:flex; flex-direction:column }
.drawer header{ padding:18px 22px 12px; border-bottom:1px solid var(--hair); display:flex; gap:12px; align-items:flex-start }
.drawer header h3{ font-size:16px }
.drawer header p{ margin:4px 0 0; color:var(--ink-2); font-size:12.5px }
.drawer .body{ padding:14px 22px 24px; overflow:auto; flex:1 }

/* pills and badges */
.pill{ display:inline-flex; gap:6px; align-items:center; font-size:11.5px; font-weight:600; padding:3px 9px;
  border-radius:999px; background:var(--sunk); color:var(--ink-2); white-space:nowrap }
.pill.crit{ background:var(--neg-wash); color:var(--neg) }
.pill.good{ background:var(--pos-wash); color:var(--pos) }
.pill.warn{ background:var(--warn-wash); color:var(--warn) }
.pill.acc{ background:var(--wash); color:var(--accent) }

/* forecast layout */
.fc{ display:grid; grid-template-columns:360px minmax(0,1fr); gap:16px; align-items:start }
/* one column: the answers first, the inputs below them */
@media (max-width: 1180px){ .fc{ grid-template-columns:1fr } .fc > .drivers{ order:2 } }
.drivers{ position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; padding:0 }
@media (max-width: 1180px){ .drivers{ position:static; max-height:none } }
.drivers details{ border-bottom:1px solid var(--hair) }
.drivers details:last-child{ border-bottom:0 }
.drivers summary{ list-style:none; cursor:pointer; padding:13px 18px; font-weight:650; display:flex; gap:8px; align-items:center }
.drivers summary::-webkit-details-marker{ display:none }
.drivers summary .caret{ margin-left:auto; color:var(--ink-3); transition:transform .15s }
.drivers details[open] summary .caret{ transform:rotate(90deg) }
.drivers .inner{ padding:2px 18px 16px; display:flex; flex-direction:column; gap:12px }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.event{ border:1px solid var(--hair-2); border-radius:11px; padding:11px 12px; display:flex; flex-direction:column; gap:9px; background:var(--sunk) }
.event .top{ display:flex; gap:8px; align-items:center }
.event .top b{ font-size:13px; flex:1 }

/* waterfall/bridge text */
.bridge-legend{ font-size:12px; color:var(--ink-2) }

/* login */
.login{ min-height:100vh; display:grid; place-items:center; padding:24px }
.login .box{ width:min(400px,100%); background:var(--surface); border:1px solid var(--hair); border-radius:18px;
  box-shadow:var(--lift-2); padding:28px }
.login h1{ font-size:21px; margin:14px 0 4px }
.login p{ color:var(--ink-2); margin:0 0 18px; font-size:13.5px }
.login form{ display:flex; flex-direction:column; gap:12px }
.login .err{ color:var(--neg); font-size:13px; background:var(--neg-wash); padding:9px 11px; border-radius:9px }

.empty{ padding:28px; text-align:center; color:var(--ink-2) }
.loading{ padding:40px; text-align:center; color:var(--ink-3) }
.skeleton{ opacity:.55; transition:opacity .2s }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13px }
.kv dt{ color:var(--ink-2) }
.kv dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums }
.note{ font-size:12px; color:var(--ink-3); margin-top:10px; line-height:1.5 }
.divider{ height:1px; background:var(--hair); margin:14px 0 }
.flexrow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.spacer{ flex:1 }

/* amount and month inputs (NumInput, MonthPicker) */
.numinput{ display:inline-flex; flex-direction:column; gap:3px; min-width:0 }
.numinput .input{ font-variant-numeric: tabular-nums; min-width:0 }
.numinput .hint{ font-size:11.5px; color:var(--ink-3) }
.numinput .hint.bad{ color:var(--neg) }
.input.invalid{ border-color:var(--neg); box-shadow:0 0 0 3px var(--neg-wash) }
.monthpicker select{ min-width:0 }

/* phones: stacked titles, key-value rows that keep the amount on one line,
   and the postings drawer shows date, text and amount only */
@media (max-width: 760px){
  .section-title{ flex-direction:column; align-items:flex-start; gap:2px }
  .kv{ grid-template-columns:minmax(0,1fr) auto }
  .kv dd{ white-space:nowrap }
  .hide-sm{ display:none }
  .filters .sep{ display:none }
  /* P&L table: a narrower sticky label column leaves room for the months */
  table.t.pl th:first-child, table.t.pl td:first-child{ min-width:140px; max-width:150px; white-space:normal; line-height:1.3 }
  table.t.pl td.lbl{ max-width:150px }
  .drawer header{ padding:14px 16px 10px }
  .drawer .body{ padding:10px 12px 20px }
  .herocard{ padding:18px 18px }
  .herocard .figure{ white-space:normal }
}

/* Status · Styring: two stacked columns (the transfer card joins the shorter one) */
.steer-col{ display:flex; flex-direction:column; gap:16px; min-width:0 }
.steer-col > div{ min-width:0 }