/* The hub look (pages/startpakker.html: Inter, the light tokens, the .page frame and .hubbar) around Signe's v105
     cards. Redesign 16/10-2026 (Signe): the sales deck's expression (light grey canvas, white cards, Inter, the logo),
     the colour gradient ONLY on the month's scale, and a dark variant: every colour is a token, redefined below. */
  :root {
    color-scheme: light;
    --font: Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --page: #F5F5F7; --bg: #F5F5F7;
    --surface: #FFFFFF; --surface-2: #F0F0F3; --raise: #FAFAFC; --chip: #ECECF0;
    --ink: #1D1D1F; --ink-2: #6E6E73; --muted: #6E6E73;
    --hairline: #ECECF0; --grid: #ECECF0;
    --accent: #1D1D1F; --accent-soft: #ECECF0;
    --s-dk: #5b9bfa;   /* Signes shopfarver 17/9-2026: DK blaa, NO lavendel, COM lyseroed (SE brun er reserveret) */
    --s-no: #b98bf6;
    --s-se: #9a6c5a;
    --s-com: #ea97bf;
    --c1: #a63d8f; --c2: #12909f; --c3: #5d5fc4; --c4: #a4783c; --c5: #3f7fbf; --c6: #8a5a9e;
    --good: #1f7a4d; --good-soft: #e3f2e9;
    --bad: #b42318; --bad-soft: #fbe6e3;
    --warn: #b26a00; --warn-soft: #fbefdc;
    --focus: #0071E3;
    --shadow: none;
    --on-ink: #FFFFFF;                      /* text on an ink-coloured pill or button */
    --bar-edge: rgba(36,26,30,.18);         /* the thin edge between the stacked shop bars */
    --grad: linear-gradient(90deg, #1D7DFF 0%, #7D5BFF 38%, #FF4F9A 79%, #FF8A31 100%);   /* the brand gradient, used once */
  }
  /* Dark variant (Signe 16/10) ONLY on an explicit data-theme="dark" on <html> - never from the OS setting:
     every hub page is light, and the owner wants this one to match them (16/10 23:20). */
  :root[data-theme="dark"] {
      color-scheme: dark;
      --page: #000000; --bg: #000000;
      --surface: #1C1C1E; --surface-2: #2C2C2E; --raise: #242426; --chip: #3A3A3C;
      --ink: #F5F5F7; --ink-2: #AEAEB2; --muted: #AEAEB2;
      --hairline: #2C2C2E; --grid: #2C2C2E; --axis: #48484A;
      --accent: #F5F5F7; --accent-soft: #3A3A3C;
      --s-dk: #6EA8FF; --s-no: #C4A0F8; --s-se: #B88A78; --s-com: #F0A8CA;
      --c1: #D872BF; --c2: #3FBACA; --c3: #9496EC; --c4: #CFA066; --c5: #6EA8DE; --c6: #B58BC8;
      --good: #4CC38A; --good-soft: rgba(76,195,138,.16);
      --bad: #FF6B5E; --bad-soft: rgba(255,107,94,.16);
      --warn: #F5A623; --warn-soft: rgba(245,166,35,.16);
      --on-ink: #000000;
      --bar-edge: rgba(0,0,0,.35);
  }
  :root[data-theme="dark"] .brand svg > path { fill: var(--ink); }   /* the wordmark; the hexagon mark keeps its own colours */
  body { margin: 0; background: var(--page); color: var(--ink); overflow-x: hidden;
    font-family: Inter, -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
  /* frame: the same as pages/startpakker.html, so the logo sits on the same pixel on every hub page */
  .page { max-width: 1248px; margin: 0 auto; padding: 28px 24px 80px; }
  .hubbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 38px; margin-bottom: 40px; }
  .brand { display: flex; align-items: center; line-height: 0; }
  .brand svg { width: 124px; height: 32px; }
  .out a { font-size: 14px; font-weight: 500; color: var(--ink); background: var(--surface); padding: 9px 18px; border-radius: 999px; text-decoration: none; }
  .out a:hover, .out a:focus-visible { background: var(--chip); }
  .head { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; justify-content: space-between; padding-bottom: 20px; }
  .kicker { font: 600 17px/1.3 var(--font); color: var(--ink-2); margin: 0 0 10px; }
  h1 { font-family: var(--font); font-weight: 700; font-size: 64px; line-height: 1.05; letter-spacing: -.035em; margin: 0; }
  .head .sub { color: var(--ink-2); font-size: 17px; line-height: 1.5; max-width: 64ch; margin: 10px 0 0; }
  .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .monthnav { display: inline-flex; align-items: center; border-radius: 999px; background: var(--surface); overflow: hidden; }
  .monthnav button { border: 0; background: transparent; padding: 8px 12px; cursor: pointer; line-height: 1; font-size: 18px; color: var(--ink-2); }
  .monthnav button:hover { background: var(--surface-2); }
  .monthnav button:disabled { opacity: .35; cursor: default; }
  .monthnav .label { padding: 0 6px; font-weight: 600; min-width: 140px; text-align: center; }
  .btn { border: 0; background: var(--surface); border-radius: 999px; padding: 9px 16px; cursor: pointer; font-weight: 600; font-size: 14px; }
  .btn:hover { background: var(--chip); }
  .btn.primary { background: var(--ink); color: #fff; }
  .btn.primary:hover { background: #000; }
  .btn:disabled { opacity: .55; cursor: default; }
  .fresh { font-size: 12.5px; color: var(--ink-2); flex-basis: 100%; }
  .proeve { background: var(--warn-soft); color: var(--warn); font-weight: 700; padding: 10px 16px; border-radius: 16px; margin: 0 0 16px; font-size: 14px; }
  * { box-sizing: border-box; }
  h1, h2, h3 { margin: 0; text-wrap: balance; }
  h2 { font-size: 16px; font-weight: 700; }
  h3 { font-size: 14px; font-weight: 600; color: var(--ink-2); }
  .eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .muted { color: var(--muted); }
  .ink2 { color: var(--ink-2); }
  .num { font-variant-numeric: tabular-nums; }
  button { font: inherit; color: inherit; }
  button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible { outline:2px solid #0071E3; outline-offset:2px; }
  a { color: var(--ink); }


  /* notices */
  .notice { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--warn-soft); border: 1px solid var(--hairline); font-size: 14px; }
  .notice.bad { background: var(--bad-soft); }
  .notice.info { background: var(--surface-2); }
  .notice strong { font-weight: 700; }

  /* overblik: ét hovedtal og tre perioder */
  .hero { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; align-items: start; }
  .tile.lead .big { font-size: 46px; }
  .lead-sub { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; max-width: 46ch; }
  /* de to smaa kort staar side om side OVER det store tal (Signe 20/9: ellers staar der luft under dem) */
  .periods { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 12px; }
  .seg.mini button { padding: 3px 8px; font-size: 11.5px; }
  .pcard .eyebrow-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
  .kpirow { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 8px; font-size: 13.5px; }
  .kpirow b { font-size: 17px; }
  .kpirow .lbl { color: var(--muted); font-size: 12px; display: block; }
  .pcard { display: flex; flex-direction: column; justify-content: flex-start; }
  .pcard { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow); }
  .pcard .big { margin-top: 2px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
  .big .exm { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-left: 8px; vertical-align: middle; white-space: nowrap; }
  .psub { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
  @media (max-width: 720px) { .periods { grid-template-columns: 1fr; } }

  /* foldbar sektion (resultat og beregning) */
  .fold-sec { margin-top: 14px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
  .fold-sec > summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; border-radius: 14px; }
  .fold-sec > summary::-webkit-details-marker { display: none; }
  .fold-sec > summary::before { content: "\25B8"; color: var(--muted); font-size: 12px; }
  .fold-sec[open] > summary::before { content: "\25BE"; }
  .fold-sec > summary:hover { background: var(--surface-2); }
  .fold-sec .sum-title { font-weight: 700; font-size: 15px; }
  .fold-sec .sum-note { color: var(--muted); font-size: 12.5px; }
  .fold-sec .fold-body { padding: 0 14px 14px; }
  .fold-sec .fold-body > .card, .fold-sec .fold-body > .two > .card { box-shadow: none; }
  /* greb der kan løfte måneden (v105; the levers are computed on the host, view.greb) */
  #c-greb { margin-top: 12px; }
  .greb-r { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--hairline); }
  .greb-r:first-child { border-top: 0; }
  .greb-navn { font-weight: 600; font-size: 14px; }
  .greb-hvorfor { font-weight: 400; font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
  .greb-tal { text-align: right; white-space: nowrap; }
  .greb-tal b { font-size: 19px; }
  .greb-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
  @media (max-width: 640px) { .greb-r { flex-direction: column; gap: 6px; } .greb-tal { text-align: left; } }
  #c-greb .greb-intro { font-size: 12.5px; color: var(--muted); margin: 0 4px 4px; line-height: 1.5; }
  #c-greb .greb { padding: 0 4px; }
  .fold-sec.evfold { margin-top: 12px; box-shadow: none; background: var(--surface-2); }
  .fold-sec.evfold > summary { padding: 10px 14px; }
  .fold-sec.evfold .fold-body { padding: 0 10px 10px; }

  /* hvad månedens tal er bygget af */
  .bygget { margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 10px; font-size: 13.5px; }
  .ba-h { font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 6px; }
  .ba-r { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
  .ba-r.sum { border-top: 1px solid var(--hairline); margin-top: 4px; padding-top: 6px; font-weight: 700; }
  .ba-sub { font-size: 12.5px; color: var(--ink-2); padding: 0 0 4px 12px; line-height: 1.55; }
  /* egne tal: Signe og Christoffer kan selv sætte en dags omsætning (18/9-2026) */
  .egne { margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 10px; font-size: 13.5px; }
  .egne-top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
  .egne-top b { font-size: 14px; }
  .egne-hint { color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
  .egne-msg { font-size: 12.5px; }
  .egne-msg:empty { display: none; }
  .egne-liste { margin-top: 6px; }
  .egne-r { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--hairline); }
  .egne-r:first-child { border-top: 0; }
  .egne-r.fra .egne-tal { opacity: .6; }
  .egne-tal { line-height: 1.5; }
  .egne-knapper { display: flex; gap: 6px; flex-wrap: wrap; }
  .egne-knapper .btn { padding: 5px 11px; font-size: 13px; }
  /* hver shop for sig (18/9-2026) */
  #c-shops .card-head .big { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
  .card-head.sub-head { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); }
  .card-head h3 { font-size: 14.5px; font-weight: 700; margin: 0; letter-spacing: .01em; }
  #c-shops tr.faste td { color: var(--ink-2); border-bottom: 0; }
  #c-shops tr.netto td { font-weight: 700; border-top: 1px solid var(--hairline); }
  #c-shops td .sub, #c-shops th .sub { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
  @media (max-width: 640px) { #c-shops .c-ordrer, #c-shops .c-ads { display: none; } #c-shops th, #c-shops td:first-child { white-space: normal; } #c-shops th, #c-shops td { padding: 8px 4px; font-size: 12.5px; } #c-shops td:first-child .chip { margin-right: 4px; } }

  /* filterrække over de grafer den styrer */
  .filterrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
  .filterrow .filterlabel { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

  /* kort intro under fanerne */
  .intro { margin: 14px 0 2px; }
  .intro > p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 90ch; }
  .linkbtn { background: none; border: 0; padding: 0; margin-left: 4px; font: inherit; font-weight: 700; color: var(--focus); text-decoration: underline; cursor: pointer; }
  .linkbtn:hover { text-decoration: none; }
  .intro .steps { margin-top: 12px; }
  .steps[hidden] { display: none; } /* hidden-attributten skal slaa grid-visningen */

  /* hero */
  .tile { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); min-width: 0; }
  .tile .big { font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin-top: 6px; }
  .tile .big.mid { font-size: 30px; }
  .tile .row { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: baseline; margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
  .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; vertical-align: middle; }
  .pill.good { background: var(--good-soft); color: var(--good); }
  .pill.bad { background: var(--bad-soft); color: var(--bad); }
  .pill.warn { background: var(--warn-soft); color: var(--warn); }
  .pill.neutral { background: var(--surface-2); color: var(--ink-2); }
  .pill .mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1.2px solid currentColor; font-style: normal; font-size: 9.5px; font-weight: 800; }
  .fold { border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; margin-top: 6px; }
  .fold:hover { background: var(--surface-2); }
  .chip { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
  table.events col.c-dato { width: 92px; } table.events col.c-type { width: 118px; } table.events col.c-shop { width: 58px; } table.events col.c-tal { width: 190px; }
  table.events td, table.events th { white-space: normal; }
  .formel { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
  .formel .cell { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; min-width: 0; }
  .formel .cell .lbl { font-size: 12px; color: var(--ink-2); font-weight: 600; min-height: 2.7em; line-height: 1.3; }
  .formel .cell .v { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; }
  .formel .cell .nt { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.3; }
  .formel .cell.res { background: var(--surface); border: 1px solid var(--hairline); }
  .notice details summary { cursor: pointer; font-weight: 700; }
  tr.nedslag td { border-bottom-color: transparent; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
  tr.nedslag + tr:not(.nedslag) td { border-top: 1px solid var(--hairline); }
  .good-text { color: var(--good); }
  .bad-text { color: var(--bad); }
  .warn-text { color: var(--warn); }
  .bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 10px; }
  .bar > i { display: block; height: 100%; background: var(--ink-2); border-radius: 999px; } /* neutral: stregen viser hvor langt måneden er nået, ikke om det er godt eller skidt */
  .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13.5px; margin-top: 10px; }
  .kv dt { color: var(--muted); }
  .kv dd { margin: 0; text-align: right; font-weight: 600; }

  /* cards */
  .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 18px; margin-top: 14px; box-shadow: var(--shadow); min-width: 0; }
  .card-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
  .card-head .desc { font-size: 13px; color: var(--muted); }
  /* teksten ombrydes i sin egen kolonne, så vælgeren bliver stående oppe til højre, uanset hvor lang beskrivelsen er */
  .card-head > div:first-child { flex: 1 1 360px; min-width: 0; }
  .card-head > .controls, .card-head > .seg, .card-head > .btn, .card-head > .pill { flex: 0 0 auto; }
  .legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
  .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
  .seg { display: inline-flex; border: 1px solid var(--hairline); border-radius: 999px; overflow: hidden; background: var(--surface); }
  .seg button { border: 0; background: transparent; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
  .seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
  .chart { position: relative; margin-top: 10px; }
  .chart svg { display: block; width: 100%; height: auto; overflow: visible; }
  .chart text { font-family: inherit; fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
  .chart .lbl { fill: var(--ink-2); font-size: 11.5px; font-weight: 600; }
  .chart .gridline { stroke: var(--grid); stroke-width: 1; }
  .chart .axis { stroke: var(--hairline); stroke-width: 1; }
  .chart .thresh { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
  .chart .hit { fill: transparent; cursor: crosshair; }
  .chart .hit:hover { fill: rgba(127,127,127,.08); }
  .tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--bg); padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.4; white-space: nowrap; display: none; z-index: 5; box-shadow: 0 6px 18px -8px rgba(0,0,0,.4); }
  .tip b { font-weight: 700; }
  .tip .r { display: flex; justify-content: space-between; gap: 14px; }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .two .card { margin-top: 14px; }
  .ig-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
  .ig-two .card { margin-top: 0; }
  .bygget details.plog { margin-top: 10px; }
  .plog-liste { list-style: none; padding: 0; margin: 0; }
  .plog-liste li { padding: 8px 4px; border-top: 1px solid var(--hairline); font-size: 13px; }
  .plog-tekst { margin-top: 2px; color: var(--ink-2); line-height: 1.45; }
  .plog-grunde { margin: 4px 0 0 0; padding-left: 18px; }
  .plog-grunde li { border: 0; padding: 2px 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
  .plog-grunde li b { margin-left: 4px; }
  .plog-regn { width: 100%; max-width: 520px; border-collapse: collapse; margin-top: 4px; font-size: 13px; }
  .plog-regn td { padding: 3px 4px; border: 0; }
  .plog-regn td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .plog-regn tr.foer td { color: var(--ink-2); }
  .plog-regn tr.sum td { border-top: 1px solid var(--hairline); font-weight: 700; padding-top: 5px; }
  .plog-regn .fortegn { display: inline-block; width: 16px; color: var(--muted); }
  .plog-hoved { font-size: 12.5px; margin-top: 2px; }
  .kpis.tre { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 860px) { .kpis.tre { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .kpis.tre { grid-template-columns: 1fr; } }
  @media (max-width: 860px) { .ig-two { grid-template-columns: 1fr; } }
  .empty { padding: 28px 12px; text-align: center; color: var(--muted); font-size: 14px; }
  .skeleton { height: 220px; border-radius: 10px; background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: sh 1.4s infinite linear; }
  @keyframes sh { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  .loading .chart, .loading .tbl { opacity: .55; }

  table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  th, td { padding: 8px 8px; text-align: right; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
  th { color: var(--muted); font-weight: 600; font-size: 12px; letter-spacing: .02em; }
  th:first-child, td:first-child { text-align: left; }
  tbody tr:last-child td { border-bottom: 0; }
  tr.total td { font-weight: 700; border-top: 2px solid var(--hairline); }
  .tblwrap { overflow-x: auto; margin-top: 8px; }

  /* reconciliation */
  .rec { margin-top: 26px; }
  .rec .intro { color: var(--ink-2); font-size: 14px; max-width: 68ch; margin-top: 6px; }
  .recgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
  .recgrid .cell { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
  .recgrid .cell .v { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; }
  .bridge td .bb { display: inline-block; height: 8px; border-radius: 2px; vertical-align: middle; margin-left: 8px; }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
  .step { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; }
  .step b { display: block; margin-bottom: 4px; }
  ul.notes { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); }
  ul.notes li { margin: 6px 0; }
  #dailyDetails { margin-top: 14px; }
  summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
  .notice details { margin: 0; }
  .tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; border-bottom: 1px solid var(--hairline); }
  .tabs button { border: 0; background: transparent; padding: 10px 14px; font-weight: 700; font-size: 15px; color: var(--ink-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
  .tabs button:hover { color: var(--ink); }
  .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
  .kpis .cell { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; min-width: 0; }
  .kpis .v { font-size: 24px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; }
  .kpis .sub { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
  @media (max-width: 860px) { .kpis { grid-template-columns: 1fr 1fr; } }
  [data-tip] { border-bottom: 1px dotted var(--muted); cursor: help; }
  .big[data-tip] { border-bottom: 0; }
  .hint { position: fixed; z-index: 50; max-width: 320px; background: var(--ink); color: var(--bg); padding: 9px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 8px 24px -10px rgba(0,0,0,.45); display: none; pointer-events: none; }
  .notice details summary { color: inherit; }
  .foot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 12.5px; color: var(--muted); }
  .foot p { margin: 6px 0; max-width: none; }   /* samme bredde som sektionerne ovenover (Signe 20/9) */

  @media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; }
    #forklaringBody { grid-template-columns: 1fr !important; }
    .two { grid-template-columns: 1fr; }
    .recgrid { grid-template-columns: 1fr 1fr; }
    .steps { grid-template-columns: 1fr; }
    .tile .big { font-size: 34px; }
  }
  @media (max-width: 480px) {
    .recgrid { grid-template-columns: 1fr; }
    .monthnav .label { min-width: 110px; }
  }
  @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
  /* hub overrides on v105's components */
  .card, .tile, .pcard, .fold-sec { border: 0; border-radius: 20px; }
  .card { padding: 20px 22px; }
  .tabs { border-bottom-color: var(--axis, #C7C7CC); }
  .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
  .rettes { font-size: 12.5px; margin: 6px 0 0; }
  .plog-regn td { white-space: normal; } .plog-regn td.num { white-space: nowrap; }
  /* Ret tallene (2026-10-12): an editor's forms on the page, in the hub look; nothing here is wider than the phone */
  #ret { margin-top: 28px; }
  .ret-faner { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 2px; }
  .ret-faner .btn { background: var(--surface-2); padding: 7px 14px; font-size: 13px; }
  .ret-faner .btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
  .ret-msg { min-height: 1.4em; margin: 8px 0; font-size: 13.5px; font-weight: 600; }
  .ret-intro { font-size: 13px; margin: 6px 0 10px; }
  .ret-top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 8px 0; }
  .ret-form { background: var(--surface-2); border-radius: 14px; padding: 14px; margin: 10px 0; min-width: 0; }
  .ret-form h3 { margin: 0 0 10px; color: var(--ink); font-size: 14.5px; }
  .ret-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px 14px; }
  .ret-f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
  .ret-f.bred { grid-column: 1 / -1; }
  .ret-f.ret-inline { flex-direction: row; align-items: center; gap: 8px; }
  .ret-f input, .ret-f select, .ret-f textarea, .ret-kr { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 8px 10px; width: 100%; min-width: 0; }
  .ret-f textarea { resize: vertical; }
  .ret-fast { font-size: 14px; color: var(--ink); padding: 8px 0; overflow-wrap: anywhere; }
  .ret-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px 12px; }
  .ret-mapr { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .ret-mapr input { font: inherit; font-size: 14px; border: 1px solid var(--hairline); border-radius: 10px; padding: 7px 9px; background: var(--surface); width: 100%; min-width: 0; }
  .ret-chks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; font-size: 13.5px; }
  .ret-chk { display: inline-flex; align-items: center; gap: 6px; }
  .ret-udelad { margin-top: 12px; }
  .ret-knapper { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .ret-slet { color: var(--bad); }
  .btn.lille { padding: 5px 12px; font-size: 12.5px; }
  .ret-top .btn, .ret-tbl .btn { background: var(--surface-2); }
  .ret-top .btn:hover, .ret-tbl .btn:hover { background: var(--chip); }
  .ret-tbl td, .ret-tbl th { padding: 7px 8px; vertical-align: top; }
  .ret-kr { max-width: 140px; text-align: right; }
  @media (max-width: 600px) {
    .page { padding: 20px 16px 56px; } .hubbar { margin-bottom: 16px; }
    h1 { font-size: clamp(30px,8.5vw,40px); } .head .sub { font-size: 15px; }
    .card, .tile, .pcard { padding: 14px 14px; }
    .recgrid, .kpis { grid-template-columns: 1fr 1fr !important; }
    .steps { grid-template-columns: 1fr !important; }
    .monthnav .label { min-width: 110px; }
    .card-head > .controls { flex: 1 1 100%; } .card-head select { max-width: 100%; }
    .tile.lead .big { font-size: 36px; } .pcard .big { font-size: 26px; }
  }
  @media (min-width: 1441px) { .page { max-width: 1264px; padding-left: 32px; padding-right: 32px; } }

  /* ───────────────── tvp.caprock.dk, version 1 (16/10-2026): Signe's design proposal in the Caprock identity ─────────────────
     Light grey canvas, white cards, Inter, the logo. The colour gradient is used ONCE: on the month's expected result (its
     number and its scale). Every colour is a token above, redefined for dark mode. Nothing below may clip text or make the
     page scroll sideways at 390 px (scripts/screenshots.mjs checks both). */
  :root { --r-card: 20px; --gap: 16px; --budline: #1D1D1F; --ghost: rgba(110,110,115,.14); }
    :root[data-theme="dark"] { --budline: #F5F5F7; --ghost: rgba(174,174,178,.16); }
  .btn.primary { color: var(--on-ink); } .btn.primary:hover { background: var(--ink); opacity: .86; }
  .seg button[aria-pressed="true"] { color: var(--on-ink); }
  .ret-faner .btn[aria-pressed="true"] { color: var(--on-ink); }
    :root[data-theme="dark"] #core { fill: #000; } :root[data-theme="dark"] .brand svg #mark use:first-child { fill: #fff; }

  /* the top: logo bar, a compact title and the controls */
  .hubbar { margin-bottom: 28px; }
  .head { align-items: center; padding-bottom: 8px; }
  .kicker { font-size: 13px; font-weight: 600; margin: 0 0 4px; color: var(--muted); }
  h1 { font-size: 40px; letter-spacing: -.03em; }
  .head .sub { font-size: 14.5px; margin-top: 6px; color: var(--ink-2); }
  .monthnav .label { min-width: 120px; }
  .fresh { flex-basis: auto; display: inline-flex; align-items: center; gap: 6px; }
  .fresh:not(:empty)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: 0 0 auto; }
  /* the tabs as one segmented control (the names stay today's) */
  .tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin-top: 12px; background: var(--surface-2); border: 0; border-radius: 12px; max-width: 100%; }
  .tabs button { border: 0; margin: 0; padding: 7px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
  .tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

  /* the four numbers */
  .hero { margin-top: 16px; display: block; }
  .kpi4 { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: var(--gap); align-items: stretch; }
  .kc { background: var(--surface); border-radius: var(--r-card); padding: 20px 22px; min-width: 0; display: flex; flex-direction: column; }
  .kc .eyebrow { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--muted); }
  .kc .eyebrow-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
  .kc-v { font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; margin-top: 8px; overflow-wrap: anywhere; }
  .kc-v .exm { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-left: 6px; white-space: nowrap; vertical-align: middle; -webkit-text-fill-color: var(--muted); }
  /* inline-block: the gradient spans the amount, not the card, so it reads the same at every width (Astra design r1 #12) */
  .kc.lead .kc-v { font-size: clamp(34px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; white-space: nowrap; overflow-wrap: normal; display: inline-block; align-self: flex-start; }
  .kc.lead .kc-v .exm { display: block; margin: 6px 0 0; }
  .kc-v[data-tip] { border-bottom: 0; }
  /* the one gradient: the month's expected result */
  .kc-v .amt { white-space: nowrap; }
  .kc.lead .kc-v.good-text .amt, .kc.lead .kc-v.bad-text .amt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
  .kc.lead .kc-v[data-tip] { border-bottom: 0; }
  .kc-sub { margin-top: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
  .kc-sub b { color: var(--ink); font-weight: 600; }
  .kc-pills { margin: 8px 0 2px; display: flex; flex-wrap: wrap; gap: 6px; }
  .kc-note { margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
  .kc .fold { align-self: flex-start; margin-top: 10px; }
  .kc-seg { margin-top: 12px; }
  /* the likely range as a scale; the mark is the expectation, the tick is 0 kr */
  .skala { margin-top: 14px; }
  .sk-bar { position: relative; height: 6px; border-radius: 3px; background: var(--grad); opacity: .9; }
  .sk-mark { position: absolute; top: -4px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
  .sk-nul { position: absolute; top: -3px; width: 1.5px; height: 12px; margin-left: -.75px; background: var(--surface); }
  .sk-nultxt { position: absolute; top: 12px; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
  .sk-lbl { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .skala:has(.sk-nultxt) .sk-lbl { margin-top: 20px; }
  /* today against today's bid */
  .mod { margin-top: 12px; }
  .mod-bar { position: relative; height: 5px; border-radius: 3px; background: var(--surface-2); }
  .mod-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--focus); }
  .mod-nu { position: absolute; top: -3px; width: 2px; height: 11px; margin-left: -1px; background: var(--ink-2); border-radius: 1px; }
  .mod-lbl { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
  .byggetfold { margin-top: var(--gap); }

  /* cards: one rhythm */
  .card { margin-top: var(--gap); border-radius: var(--r-card); }
  .card-head h2 { font-size: 17px; letter-spacing: -.01em; }
  .fold-sec { border-radius: var(--r-card); }
  .legend .leg-line { width: 14px; height: 3px; border-radius: 2px; background: var(--budline); vertical-align: 3px; }
  .legend .leg-band { width: 14px; height: 5px; border-radius: 3px; background: var(--c3); vertical-align: 2px; }
  /* the revenue chart: the locked bids as a black line, launches as coloured bands under the days */
  .chart .budline { fill: none; stroke: var(--budline); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .chart .budline-under { fill: none; stroke: var(--surface); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
  .chart text.weekend { fill: var(--ink-2); }
  /* phone: the revenue chart keeps a readable width and scrolls sideways inside its card */
  #chRev.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #chRev.scroll svg { width: 760px; max-width: none; }
  .swipe { font-size: 12px; margin: 6px 0 0; text-align: right; }
  .chart .band-lbl { font-size: 10.5px; font-weight: 600; fill: var(--ink-2); }

  /* "Det, der kan løfte måneden" and "Det næste, der sker" side by side */
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
  .duo > .card { margin-top: var(--gap); }
  .duo > .card[hidden] { display: none; }
  .duo:has(> .card[hidden]) { grid-template-columns: 1fr; }
  #c-greb .greb { padding: 0; margin-top: 8px; }
  #c-greb .greb-intro { margin: 10px 0 0; font-size: 12px; }
  .greb-tal b { font-size: 17px; }
  .nx { list-style: none; margin: 8px 0 0; padding: 0; }
  .nx li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--hairline); align-items: baseline; }
  .nx li:first-child { border-top: 0; }
  .nx-naar { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .nx-til { font-weight: 500; color: var(--muted); font-size: 11.5px; }
  .nx-hvad { min-width: 0; }
  .nx-hvad b { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
  .nx-type { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
  .nx-tom, .nx-mere { font-size: 12.5px; margin: 8px 0 0; }

  /* the hit rate: one cell per day */
  #c-noejagtighed .kpirow { gap: 10px 28px; margin: 10px 0 4px; }
  #c-noejagtighed .kpirow b { font-size: 20px; letter-spacing: -.02em; display: inline-block; }
  #c-noejagtighed .kpirow .lbl { display: block; }
  .dboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; margin-top: 12px; }
  .dbox { background: var(--surface-2); border-radius: 10px; padding: 8px 6px 7px; text-align: center; cursor: default; min-width: 0; }
  .dbox:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .db-d { display: block; font-size: 11.5px; color: var(--muted); }
  .db-v { display: block; font-size: 14px; font-weight: 700; margin-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .dbox.good { background: var(--good-soft); } .dbox.bad { background: var(--bad-soft); }
  .dbox.good .db-v { color: var(--good); } .dbox.bad .db-v { color: var(--bad); }
  .dbox.none .db-v, .dbox.ude .db-v { color: var(--muted); font-weight: 500; font-size: 12.5px; }
  .dbox.live { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--hairline); } .dbox.live .db-v { color: var(--ink-2); font-weight: 600; font-size: 12.5px; }
  .lg-box { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--surface-2); }
  .lg-box.good { background: var(--good); } .lg-box.bad { background: var(--bad); } .lg-box.ude { background: var(--muted); }
  #c-noejagtighed .chart { margin-top: 4px; }
  .noej-intro { font-size: 12.5px; line-height: 1.5; margin: 12px 0 0; }

  /* the model's warnings: small badges at the bottom */
  .vagt { padding-top: 16px; padding-bottom: 16px; }
  .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .badge { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 12.5px; line-height: 1.4; padding: 5px 11px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); max-width: 100%; }
  .badge b { font-weight: 700; color: var(--ink); }
  .badge.warn { background: var(--warn-soft); color: var(--warn); } .badge.warn b { color: var(--warn); }

  /* sign-in and refusal (the page's own; po-dashboard's sign-out lands here) */
  .login { max-width: 460px; margin: 10vh auto 0; background: var(--surface); border-radius: var(--r-card); padding: 26px 24px; }
  .login h2 { font-size: 22px; letter-spacing: -.02em; }
  .login p { color: var(--ink-2); font-size: 14.5px; margin: 10px 0 18px; }
  .login .btn { display: inline-block; text-decoration: none; }
  .login .btn.primary { background: var(--ink); color: var(--on-ink); }

  /* tablet: two by two, the lead in the first cell (no orphaned card; Astra design r1 #9) */
  @media (max-width: 1080px) { .kpi4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kc.lead .kc-v { font-size: 34px; } }
  /* touch: every control at least 44 px */
  @media (pointer: coarse) { .monthnav button, .seg.mini button, .tabs button, .btn { min-height: 44px; } .monthnav button { min-width: 44px; } .seg.mini button { min-width: 44px; } }
  @media (max-width: 760px) { .duo { grid-template-columns: 1fr; } h1 { font-size: 32px; } }
  @media (max-width: 600px) {
    .kpi4 { grid-template-columns: 1fr; gap: 12px; } .kc, .card { padding: 16px; } .kc.lead .kc-v { font-size: 38px; }
    .tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; }
    .tabs button { flex: 0 0 auto; padding: 7px 12px; }
    .dboxes { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
    .nx li { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
    .head { gap: 12px; } .controls { width: 100%; }
  }
  /* the amount and its unit: side by side, the unit moves under the amount flush left when there is no room */
  .kc:not(.lead) .kc-v { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
  .kc:not(.lead) .kc-v .exm { margin-left: 0; }