/* BLM Bokföring — "Liggaren": a calm ledger.
   One stylesheet, no external files. Our own scripts draw the account list (konto.js, .acctpop), the code field (otp.js), the receipt upload
   (kvitto.js) and the handbook's reading mark (handbok.js, .hb__toc). Colours are declared once as tokens and only
   re-bound for dark, so the two schemes can never drift apart.

   MONEY ALIGNMENT RULE (non-negotiable): the `.table th, .table td` pair below must come
   BEFORE the `.table th.num, .table td.num` pair, and no later rule may set text-align on a
   bare td/th. Otherwise money stops being right-aligned and columns become unreadable. */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* dark palette — declared here, used only via the re-binding blocks below */
  --d-paper:#121416; --d-surface:#191c1f; --d-surface-2:#202428; --d-surface-3:#262b30;
  --d-rule:#2a2f34;  --d-rule-strong:#3d444b; --d-field:#767d84;
  --d-ink:#e9ebed;   --d-ink-2:#b7bdc3;  --d-ink-3:#8a9198;
  --d-accent:#63c79e; --d-on-accent:#06241a; --d-accent-soft:#16302a;
  --d-live:#b02a20;  --d-on-live:#ffffff; --d-live-ink:#f0958a; --d-live-soft:#2a1614;
  --d-test-ink:#e0b558; --d-test-soft:#2a2312;
  --d-focus:#7fb4ff; --d-focus-soft:rgba(127,180,255,.26); --d-neg:#f0958a; --d-dot:#ff6b5e;
  --d-shadow-sticky: 0 6px 14px -12px rgba(0,0,0,.8);
  --d-shadow-pop: 0 16px 36px -12px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.4);
  --d-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b7bdc3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* light palette — the default binding */
  --paper:#f6f6f4; --surface:#ffffff; --surface-2:#f0f0ed; --surface-3:#e7e7e2;
  --rule:#e2e2dd;  --rule-strong:#c6c6bf; --field:#87877f;
  --ink:#16181a;   --ink-2:#41464b;  --ink-3:#62676d;
  --accent:#0f5c43; --on-accent:#ffffff; --accent-soft:#e6efe9;
  --live:#9e2016;  --on-live:#ffffff; --live-ink:#9e2016; --live-soft:#fbe9e6;
  --test-ink:#7a4f00; --test-soft:#fdf6e3;
  --focus:#1b64c8; --focus-soft:rgba(27,100,200,.2); --neg:#8c1d14; --dot:#d92d20;
  --shadow-sticky: 0 6px 14px -12px rgba(10,12,14,.45);
  --shadow-pop: 0 16px 36px -14px rgba(10,12,14,.38), 0 2px 6px rgba(10,12,14,.08);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2341464b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;
  --fs-xs:.6875rem;   /* 11px  column heads, chips, captions */
  --fs-sm:.8125rem;   /* 13px  table body, metadata */
  --fs-num:.875rem;   /* 14px  money — one step ABOVE the text beside it */
  --fs-base:.9375rem; /* 15px  prose */
  --fs-lg:1.0625rem;  /* 17px  h2 */
  --fs-xl:1.375rem;   /* 22px  h1 */
  --fs-big:1.75rem;   /* 28px  stat values, balances */
  --lh:1.5; --lh-tight:1.3;

  /* space, 4px base */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem;

  /* shape — a ledger is not bubbly */
  --r-sm:3px; --r:5px; --r-pill:999px;
  --border:1px solid var(--rule);

  /* layout */
  --page:1160px; --measure:68ch; --row-h:2.25rem;
  --envbar-h:2rem;              /* FIXED, never wraps, so sticky offsets are deterministic */
  --sticky-top:var(--envbar-h);
}

/* dark: system preference, unless the user forced light */
@media (prefers-color-scheme: dark) { :root:not(.theme-light) {
  --paper:var(--d-paper); --surface:var(--d-surface); --surface-2:var(--d-surface-2);
  --surface-3:var(--d-surface-3); --rule:var(--d-rule); --rule-strong:var(--d-rule-strong);
  --field:var(--d-field); --ink:var(--d-ink); --ink-2:var(--d-ink-2); --ink-3:var(--d-ink-3);
  --accent:var(--d-accent); --on-accent:var(--d-on-accent); --accent-soft:var(--d-accent-soft);
  --live:var(--d-live); --on-live:var(--d-on-live); --live-ink:var(--d-live-ink);
  --live-soft:var(--d-live-soft); --test-ink:var(--d-test-ink); --test-soft:var(--d-test-soft);
  --focus:var(--d-focus); --focus-soft:var(--d-focus-soft); --neg:var(--d-neg); --dot:var(--d-dot); --shadow-sticky:var(--d-shadow-sticky);
  --shadow-pop:var(--d-shadow-pop); --chevron:var(--d-chevron);
}}
/* dark: the user chose it */
:root.theme-dark {
  --paper:var(--d-paper); --surface:var(--d-surface); --surface-2:var(--d-surface-2);
  --surface-3:var(--d-surface-3); --rule:var(--d-rule); --rule-strong:var(--d-rule-strong);
  --field:var(--d-field); --ink:var(--d-ink); --ink-2:var(--d-ink-2); --ink-3:var(--d-ink-3);
  --accent:var(--d-accent); --on-accent:var(--d-on-accent); --accent-soft:var(--d-accent-soft);
  --live:var(--d-live); --on-live:var(--d-on-live); --live-ink:var(--d-live-ink);
  --live-soft:var(--d-live-soft); --test-ink:var(--d-test-ink); --test-soft:var(--d-test-soft);
  --focus:var(--d-focus); --focus-soft:var(--d-focus-soft); --neg:var(--d-neg); --dot:var(--d-dot); --shadow-sticky:var(--d-shadow-sticky);
  --shadow-pop:var(--d-shadow-pop); --chevron:var(--d-chevron);
}
:root.theme-light { color-scheme: only light }
:root.theme-dark  { color-scheme: only dark }

/* ── base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--paper); color:var(--ink); font:var(--fs-base)/var(--lh) var(--font) }
main { max-width:var(--page); margin:0 auto; padding:var(--s5) var(--s4) var(--s7) }
h1 { font-size:var(--fs-xl); font-weight:600; letter-spacing:-.01em; margin:0 0 var(--s3); line-height:var(--lh-tight) }
h2 { font-size:var(--fs-lg); font-weight:600; margin:var(--s6) 0 var(--s2) }
h3 { font-size:var(--fs-base); font-weight:600; margin:var(--s4) 0 var(--s2) }
h1 small,h2 small { font-size:var(--fs-sm); font-weight:400; color:var(--ink-3); margin-left:var(--s2) }
p,li { max-width:var(--measure) }
a { color:var(--accent); text-underline-offset:2px }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:2px }
code,.mono { font:var(--fs-sm)/1.4 var(--mono) }
code { word-break:break-all }
.muted { color:var(--ink-3) }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
hr { border:0; border-top:1px solid var(--rule); margin:var(--s5) 0 }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition:none!important; animation:none!important } }

/* ── shell: environment rail ────────────────────────────────────────────── */
.envbar { position:sticky; top:0; z-index:20; height:var(--envbar-h); display:flex; align-items:center;
  gap:var(--s3); padding:0 var(--s4); white-space:nowrap; overflow:hidden;
  border-bottom:1px solid var(--rule-strong); background:var(--surface) }
.envbar::before { content:""; position:absolute; inset:0 0 auto 0; height:4px }
.envbar--test::before { background:repeating-linear-gradient(135deg,var(--test-ink) 0 5px,transparent 5px 10px),var(--test-soft) }
.envbar--live::before { background:var(--live) }
.envbar--live { border-bottom:2px solid var(--live) }
.env { font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.1rem .45rem; border-radius:var(--r-sm); margin-top:4px }
.env--test { color:var(--test-ink); background:var(--test-soft); border:1px dashed currentColor }
.env--live { color:var(--on-live); background:var(--live); border:1px solid var(--live) }
.env__say { font-size:var(--fs-xs); color:var(--ink-2); margin-top:4px; text-overflow:ellipsis; overflow:hidden }
@media (max-width:30rem){ .env__say { display:none } }

/* ── shell: topbar ──────────────────────────────────────────────────────── */
.topbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4);
  padding:var(--s2) var(--s4); background:var(--surface); border-bottom:1px solid var(--rule) }
.brand { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none }
.brand__mark { display:block; border-radius:5px }
.company-switch { font-size:var(--fs-sm); color:var(--ink-2); text-decoration:none; white-space:nowrap;
  max-width:16rem; overflow:hidden; text-overflow:ellipsis; padding:.1rem .6rem;
  border:1px solid var(--rule-strong); border-radius:var(--r-pill) }
.company-switch:hover { border-color:var(--accent); color:var(--ink) }
.mark-lg { display:block; margin:0 0 var(--s3); border-radius:11px }
.nav { display:flex; gap:var(--s4); overflow-x:auto; scrollbar-width:none; flex:1 1 100%; order:3 }
.nav::-webkit-scrollbar { display:none }
.nav a { color:var(--ink-2); text-decoration:none; font-size:var(--fs-sm); font-weight:600;
  padding:var(--s2) 0 calc(var(--s2) - 2px); border-bottom:2px solid transparent; white-space:nowrap }
.nav a[aria-current] { color:var(--ink); border-bottom-color:var(--ink) }
/* "new" beside a menu entry: drawn as a border, so forced colours keep it; the word itself is in a .vh span */
.nav__dot { display:inline-block; width:0; height:0; margin-left:.3rem; border:.25rem solid var(--dot); border-radius:50%; vertical-align:.5em }
@media (forced-colors:active){ .nav__dot { forced-color-adjust:none; border-color:Highlight } }
.who { margin-left:auto; display:flex; gap:var(--s3); align-items:center; color:var(--ink-3); font-size:var(--fs-sm) }
@media (min-width:52rem){ .nav { flex:0 1 auto; order:0; margin-left:var(--s5) } }
.skip { position:absolute; left:-9999px }
.skip:focus { left:var(--s3); top:calc(var(--envbar-h) + var(--s2)); z-index:30; background:var(--surface);
  padding:var(--s2) var(--s3); border:1px solid var(--field); border-radius:var(--r) }
form.inline { display:inline }
.themeform { display:flex; align-items:center; gap:var(--s2) }
.themeform__label { font-size:var(--fs-xs); color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em }
@media (max-width:40rem){ .themeform__label { display:none } }

/* ── tables ─────────────────────────────────────────────────────────────── */
.table { width:100%; border-collapse:collapse; background:var(--surface); margin:var(--s3) 0 var(--s5) }
.table caption { caption-side:top; text-align:left; padding:0 0 var(--s2);
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3) }
.table th,.table td { padding:.45rem var(--s3); text-align:left; vertical-align:baseline;
  border-bottom:1px solid var(--rule) }
.table th.num,.table td.num { text-align:right }
.table thead th { position:sticky; top:var(--sticky-top); z-index:2; background:var(--surface);
  font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); border-bottom:1px solid var(--rule-strong) }
@media (hover:hover){ .table tbody tr:hover>* { background:var(--surface-2) } }
.table tfoot th,.table tfoot td { font-weight:600; border-top:1px solid var(--rule-strong);
  border-bottom:3px double var(--rule-strong) }
.table--dense th,.table--dense td { padding:.3rem var(--s2); font-size:var(--fs-sm) }
.table--dense tbody tr:nth-child(even)>* { background:var(--surface-2) }
.table--voucher { max-width:56rem }
.acct { display:flex; gap:var(--s2); align-items:baseline }
.acct__no { font-weight:600 }
.acct__name { font-size:var(--fs-sm); color:var(--ink-3); font-weight:400 }
@media (max-width:40rem){ .acct { display:inline-flex } }
.weekday { font-size:var(--fs-xs); color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em }

/* ── money ──────────────────────────────────────────────────────────────── */
.num { text-align:right; white-space:nowrap; font-size:var(--fs-num);
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1 }
.num--big { font-size:var(--fs-big); font-weight:600; letter-spacing:-.01em }
.num--na,.ccy { color:var(--ink-3) }
.ccy { font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; font-variant-numeric:normal }
.neg { color:var(--neg) }

/* ── status: word + shape, colour last ──────────────────────────────────── */
.status { display:inline-flex; align-items:baseline; gap:.45rem; font-size:var(--fs-sm) }
.mark { flex:none; width:.55rem; height:.55rem; border:1.5px solid currentColor; align-self:center }
.mark--ready   { border-radius:50% }
.mark--posted  { border-radius:50%; background:currentColor }
.mark--changed { background:currentColor; rotate:45deg }
.mark--problem { background:currentColor }
.mark--empty   { border-radius:50%; border-style:dashed }
.mark--todo    { background:transparent }
.mark--suggested { background:transparent; border-style:dashed }
.mark--waiting { border-radius:50%; background:linear-gradient(90deg,currentColor 50%,transparent 50%) }
.mark--hand, .mark--otherside { border-radius:50%; background:transparent }
.status--todo    { color:var(--ink); font-weight:600 }
.status--suggested { color:var(--accent); font-weight:600 }
.status--waiting { color:var(--test-ink); font-weight:600 }
.status--hand, .status--otherside { color:var(--ink-2) }
.status--ready   { color:var(--accent); font-weight:600 }
.status--posted  { color:var(--ink-3) }
.status--problem,.status--changed { color:var(--live-ink); font-weight:600 }
.status--empty   { color:var(--ink-3) }

/* ── messages ───────────────────────────────────────────────────────────── */
.msg { max-width:var(--measure); padding:var(--s3); border-radius:var(--r); border:1px solid; margin:var(--s3) 0 }
.msg--ok    { background:var(--accent-soft); border-color:var(--accent); color:var(--ink) }
.msg--error { background:var(--live-soft); border-color:var(--live-ink); color:var(--ink) }
.msg--warn  { background:var(--test-soft); border-color:var(--test-ink); color:var(--ink) }
.msg--live  { background:var(--live-soft); border-left:4px solid var(--live); border-color:var(--live-ink);
  color:var(--ink); max-width:none; font-weight:500 }
.msg b { color:var(--live-ink) }
.msg--ok b { color:var(--accent) }
.msg h2,.msg h3 { margin:0 0 var(--s2) }
.idlist { list-style:none; padding:0; margin:var(--s2) 0; display:flex; flex-wrap:wrap; gap:var(--s2); max-width:none }
.idlist li { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-sm); padding:.1rem .4rem; max-width:none }

/* ── stats strip ────────────────────────────────────────────────────────── */
.stats { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r);
  overflow:hidden; margin:var(--s4) 0; padding:0 }
.stats li { max-width:none }
.stat { display:flex; flex-direction:column; gap:var(--s1); background:var(--surface);
  padding:var(--s3) var(--s4); height:100%; text-decoration:none; color:var(--ink) }
.stat:hover { background:var(--surface-2) }
.stat__label { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3) }
.stat--alarm { border-left:4px solid var(--live); padding-left:calc(var(--s4) - 4px) }
.stat--alarm .stat__label { color:var(--live-ink); font-weight:700 }
.syncline { max-width:none; font-size:var(--fs-sm); color:var(--ink-2); display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center }

/* ── month navigation and filters ───────────────────────────────────────── */
.months { display:flex; gap:var(--s5); overflow-x:auto; scrollbar-width:thin;
  padding-bottom:var(--s2); margin:var(--s4) 0; border-bottom:1px solid var(--rule) }
.months__group { display:flex; align-items:center; gap:var(--s1) }
.months__year { font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; color:var(--ink-3); margin-right:var(--s2) }
.months a { padding:.3rem .55rem; border-radius:var(--r-sm); text-decoration:none; color:var(--ink-2);
  font-size:var(--fs-sm); font-variant-numeric:tabular-nums }
.months a:hover,.months button:hover { background:var(--surface-2) }
.months a[aria-current],.months button[aria-current] { background:var(--ink); color:var(--paper); font-weight:600 }
.months button { padding:.3rem .55rem; border:0; border-radius:var(--r-sm); background:none; color:var(--ink-2); font:inherit;
  font-size:var(--fs-sm); font-variant-numeric:tabular-nums; cursor:pointer }
.filterbar { display:flex; gap:var(--s3); align-items:center; margin:var(--s3) 0; flex-wrap:wrap; max-width:none }
.chip { display:inline-block; font-size:var(--fs-xs); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; padding:.2rem .5rem; border:1px solid var(--field); border-radius:var(--r-pill); color:var(--ink-2) }
.filterbar a { color:var(--ink-2); font-size:var(--fs-sm) }
.filterbar a[aria-current] { color:var(--ink); font-weight:700; text-decoration:none }
.daynav { display:flex; gap:var(--s4); align-items:center; font-size:var(--fs-sm); margin:var(--s3) 0; max-width:none }

/* ── reconciliation ─────────────────────────────────────────────────────── */
.recon { border:var(--border); border-radius:var(--r); background:var(--surface);
  padding:var(--s3) var(--s4); margin:var(--s4) 0 }
.recon h2 { margin-top:var(--s2) }
.cell--check .ok  { color:var(--accent); font-weight:600; display:inline-flex; gap:.4rem; align-items:center }
.cell--check .bad { color:var(--live-ink); font-weight:700; display:inline-flex; gap:.4rem; align-items:center }

/* ── scroller for dense tables ──────────────────────────────────────────── */
.scroller { overflow-x:auto; overscroll-behavior-x:contain; border:var(--border);
  border-radius:var(--r); background:var(--surface); margin:var(--s3) 0 var(--s5) }
.scroller:focus-visible { outline:2px solid var(--focus); outline-offset:-2px }
.scroller .table { margin:0; border:0 }
.scroller .table thead th { position:static }
.scroller .table th[scope=row] { position:sticky; left:0; z-index:1; background:var(--surface) }
.scroller .table--dense tbody tr:nth-child(even) th[scope=row] { background:var(--surface-2) }
@media (min-width:52rem){
  .scroller--tall { max-height:min(70vh,38rem); overflow:auto; overscroll-behavior:contain }
  .scroller--tall .table thead th { position:sticky; top:0; z-index:3 }
}

/* ── buttons and action bar ─────────────────────────────────────────────── */
.btn { padding:.5rem 1rem; font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  border:1px solid var(--accent); border-radius:var(--r); background:var(--accent); color:var(--on-accent) }
.btn--quiet { background:var(--surface-3); color:var(--ink); border-color:var(--field) }
.btn--link { background:none; border:0; padding:0; color:var(--accent); font-weight:500; text-decoration:underline }
.btn--chip { background:var(--surface-3); color:var(--ink-2); border:1px solid var(--field);
  font-size:var(--fs-xs); font-weight:600; padding:.15rem .45rem; border-radius:var(--r-sm) }
.btn--chip[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink) }
.btn[disabled] { opacity:.5; cursor:not-allowed }
.btn--send { padding:.6rem 1.2rem; font-size:var(--fs-base) }
.is-live .btn--send { background:var(--live); border-color:var(--live); color:var(--on-live); border-radius:0 }
.actionbar { position:sticky; bottom:0; z-index:5; display:flex; flex-wrap:wrap; gap:var(--s3);
  align-items:center; padding:var(--s3) var(--s4); margin:var(--s5) 0 0; background:var(--surface);
  border-top:1px solid var(--rule-strong); box-shadow:var(--shadow-sticky) }
.actionbar__hint { flex:1 1 14rem; margin:0; font-size:var(--fs-sm); color:var(--ink-3) }
.is-live .actionbar { border-top:2px solid var(--live) }

/* ── confirm gate ───────────────────────────────────────────────────────── */
.confirm { border:2px solid var(--field); border-radius:var(--r); padding:var(--s4);
  margin:var(--s5) 0 var(--s3); background:var(--surface) }
.confirm--live { border-color:var(--live); background:var(--live-soft) }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:var(--s2) var(--s4); margin:0 0 var(--s4) }
.kv dt { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3) }
.kv dd { margin:0 }
.confirmcheck { display:flex; gap:var(--s3); align-items:flex-start; font-weight:500; max-width:var(--measure) }
.confirmcheck input { flex:none; width:1.35rem; height:1.35rem; margin:.1rem 0 0; accent-color:var(--live) }
@media (max-width:40rem){ .kv { grid-template-columns:1fr } .kv dd { margin-bottom:var(--s2) } }

/* ── forms ──────────────────────────────────────────────────────────────── */
label { display:block; margin:var(--s3) 0; font-weight:500; font-size:var(--fs-sm) }
input,select,textarea { display:block; width:100%; margin-top:var(--s1); padding:.45rem var(--s3);
  font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--field); border-radius:var(--r) }
input[inputmode=numeric],input[pattern] { font-variant-numeric:tabular-nums }
input[type=checkbox] { display:inline-block; width:1.1rem; height:1.1rem; margin:0; accent-color:var(--accent) }
form.rowform { display:flex; flex-wrap:wrap; gap:var(--s3) var(--s4); align-items:end }
form.rowform label { flex:1 1 11rem; margin:0 }
.pickcell { display:inline-flex; align-items:center; justify-content:center;
  min-width:2.25rem; min-height:2.25rem; margin:-.4rem }
.col-pick { width:1% }
label.pick { display:inline-flex; align-items:center; gap:.4rem; font-weight:400; margin:0 0 0 var(--s3); font-size:var(--fs-sm) }
label.pick input { width:auto }
.narrow { max-width:26rem; margin:var(--s6) auto }
.steps li { margin-bottom:var(--s3) }
.secret { display:inline-block; font:var(--fs-base)/1.5 var(--mono); letter-spacing:.05em;
  background:var(--surface-3); padding:.3rem .6rem; border-radius:var(--r-sm); margin:var(--s2) 0; word-break:break-all }
.qr { display:block; margin:var(--s3) 0; background:#fff; border:1px solid var(--rule);
  border-radius:var(--r); image-rendering:pixelated }
details { margin:var(--s2) 0; color:var(--ink-3) }
summary { cursor:pointer; color:var(--accent) }

/* ── kvitton: the receipt beside the voucher, as Fortnox shows the picture ─ */
.kvitton { margin:0 0 var(--s3) }
.kvitto { margin:0 0 var(--s3); border:var(--border); border-radius:var(--r); background:var(--surface-2); overflow:hidden }
/* The tile has the shape of what is in the file, so nothing is letterboxed for no reason. */
.kvitto__view { position:relative; line-height:0; background:var(--surface-3); aspect-ratio:1/1.414;
  max-height:42rem }
.kvitto__view--wide { aspect-ratio:16/9 }
.kvitto__view--landscape { aspect-ratio:4/3 }
.kvitto__view--square { aspect-ratio:1/1 }
.kvitto__view--letter { aspect-ratio:1/1.294 }
.kvitto__view--a4 { aspect-ratio:1/1.414 }
.kvitto__view--tall { aspect-ratio:1/2 }
.kvitto__view--strip { aspect-ratio:1/3.2; max-height:34rem }
/* The picture, the PDF and the link that opens them all fill the tile exactly. Laid out from the
   tile itself, not from the link around them: a tall screenshot used to keep its own height and paint
   straight over the file name and the buttons below it. */
.kvitto__zoom { position:absolute; inset:0; display:block; cursor:zoom-in }
.kvitto__img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff }
/* The PDF's own first page, in the browser's own reader: it scrolls, so the clicks are its own. */
.kvitto__pdf { position:absolute; inset:0; width:100%; height:100%; border:0; background:#fff }
/* Full screen: the corner button, clear of the reader's scrollbar on the right. */
.kvitto__full { position:absolute; top:.4rem; left:.4rem; width:1.9rem; height:1.9rem; display:flex;
  align-items:center; justify-content:center; font:600 1.05rem/1 var(--font); color:#fff; text-decoration:none;
  background:rgba(10,12,14,.62); border-radius:var(--r-sm); opacity:.8; transition:opacity .15s ease, background .15s ease }
.kvitto__view:hover .kvitto__full { opacity:1 }
.kvitto__full:hover, .kvitto__full:focus-visible { opacity:1; background:rgba(10,12,14,.85) }
.kvitto figcaption { display:flex; flex-wrap:wrap; gap:.3rem var(--s3); align-items:baseline;
  padding:.4rem var(--s3); font-size:var(--fs-xs); color:var(--ink-2); overflow-wrap:anywhere }
.kvittoform { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:end; margin:0 0 var(--s3) }
.kvittoform__label { flex:1 1 11rem; margin:0 }
.kvittoform__hint { flex:1 1 100% }
/* With the script the file is sent the moment it is chosen, so the button has nothing left to do. */
.kvittoform--auto .btn { display:none }
.kvittoform__busy { font-size:var(--fs-sm); font-weight:600; color:var(--accent) }
.kvittoform input[type=file] { width:100%; margin-top:var(--s1); font-size:var(--fs-sm); color:var(--ink-2) }
.kvittoq { display:inline-block; font-size:var(--fs-sm); font-weight:600; color:var(--accent) }
.lightbox { position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:var(--s4) }
.lightbox:target { display:flex }
.lightbox__back { position:absolute; inset:0; background:rgba(10,12,14,.82) }
.lightbox__inner { position:relative; display:flex; flex-direction:column; gap:var(--s2);
  max-width:min(60rem, 94vw); max-height:92vh; width:100% }
.lightbox__img { max-width:100%; max-height:84vh; object-fit:contain; background:#fff;
  border-radius:var(--r); box-shadow:var(--shadow-pop) }
.lightbox__pdf { width:100%; height:84vh; border:0; border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow-pop) }
.lightbox__bar { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:baseline; justify-content:center;
  margin:0; color:#fff; font-size:var(--fs-sm); text-shadow:0 1px 2px rgba(0,0,0,.6) }
.lightbox__bar a { color:#fff }
.lightbox__close { font-weight:600 }
@media (max-width:52rem){ .lightbox { padding:var(--s2) } .lightbox__img { max-height:76vh } .lightbox__pdf { height:76vh } }
@media print { .lightbox { display:none !important } }
.kvitto__tip { margin:.35rem var(--s3) 0 }
@media (max-width:52rem){ .kvitto__view { max-height:24rem } }
@media print { .kvittoform { display:none } .kvitto__img { max-height:9rem } }

/* ── the six-digit code (public/otp.js) ─────────────────────────────────── */
/* Without the script the field is an ordinary one; the script sets .otp--js once the boxes are up. */
.otp--js { text-align:center }
section:has(.otp--js) > h1 { text-align:center }
.otp--js + .btn { display:block; margin:var(--s4) auto 0 }
.otp--js .otp__stage { position:relative; display:flex; justify-content:center; padding:var(--s3) 0 var(--s2) }
.otp__boxes { display:flex; gap:.4rem; transition:opacity .25s ease, transform .25s ease }
.otp__box { position:relative; display:flex; align-items:center; justify-content:center;
  width:2.6rem; height:3.25rem; background:var(--surface-2); border:1px solid var(--rule-strong);
  border-radius:12px; font:600 1.4rem/1 var(--mono); font-variant-numeric:tabular-nums; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease }
.otp__box.is-filled { background:var(--surface); border-color:var(--field) }
.otp__box.is-filled .otp__digit { animation:otp-pop .18s ease-out }
.otp.is-focus .otp__box.is-active { background:var(--surface); border-color:var(--focus);
  box-shadow:0 0 0 3px var(--focus-soft); transform:translateY(-1px) }
.otp.is-focus .otp__box.is-active::after { content:""; position:absolute; width:2px; height:1.5rem;
  background:var(--focus); border-radius:1px; animation:otp-caret 1.05s step-end infinite }
.otp.is-focus .otp__box.is-active.is-filled::after { content:none }
/* The field lies on top of the boxes and keeps the typing: its own text is invisible. */
.otp--js .otp__field { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
  border:0; background:transparent; color:transparent; caret-color:transparent; text-align:center;
  font-size:1rem; cursor:text }
.otp--js .otp__field:focus, .otp--js .otp__field:focus-visible { outline:none }
.otp--js .otp__field::selection { background:transparent }
/* Waiting for the answer: the boxes give way to one tile with a running ring, green once it is done. */
.otp__tile { position:absolute; inset:0; margin:auto; width:3.4rem; height:3.9rem; display:none;
  align-items:center; justify-content:center; border-radius:14px; background:var(--surface-2);
  border:1px solid var(--rule-strong); color:var(--accent); font-size:1.7rem; line-height:1 }
.otp.is-checking .otp__tile, .otp.is-done .otp__tile { display:flex }
.otp.is-checking .otp__boxes, .otp.is-done .otp__boxes { opacity:0; transform:scale(.88) }
.otp.is-checking .otp__field, .otp.is-done .otp__field { pointer-events:none }
.otp__tile::before { content:""; position:absolute; inset:-3px; border-radius:16px; padding:3px;
  background:conic-gradient(from 0turn, transparent 0 55%, var(--focus) 92%, transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; animation:otp-spin 1.1s linear infinite }
.otp.is-done .otp__tile { border-color:var(--accent); background:var(--accent-soft) }
.otp.is-done .otp__tile::before { animation:none; background:var(--accent) }
.otp.is-done .otp__tile::after { content:""; width:.8rem; height:1.5rem; margin-top:-.4rem;
  border:solid var(--accent); border-width:0 3px 3px 0; border-radius:2px; transform:rotate(45deg);
  animation:otp-pop .3s ease-out }
.otp__state { min-height:1.25rem; margin:0; text-align:center; font-size:var(--fs-sm); color:var(--ink-2) }
.otp.is-done .otp__state { color:var(--accent); font-weight:600 }
.otp.is-error .otp__boxes { animation:otp-shake .4s ease-in-out }
.otp.is-error .otp__box { border-color:var(--neg) }
@keyframes otp-pop { from { transform:scale(.6); opacity:0 } to { transform:scale(1); opacity:1 } }
@keyframes otp-caret { 0%,49% { opacity:1 } 50%,100% { opacity:0 } }
@keyframes otp-spin { to { transform:rotate(1turn) } }
@keyframes otp-shake { 10%,90% { transform:translateX(-2px) } 30%,70% { transform:translateX(4px) } 50% { transform:translateX(-5px) } }
@media (max-width:22rem){ .otp__box { width:2.2rem; height:2.9rem; font-size:1.2rem } }
@media (forced-colors:active){
  .otp__box { border-color:CanvasText }
  .otp.is-focus .otp__box.is-active { outline:2px solid Highlight }
  .otp__tile { border-color:CanvasText; forced-color-adjust:none } }

/* ── cards (Att kontera, previews) ──────────────────────────────────────── */
.card { background:var(--surface); border:var(--border); border-radius:var(--r);
  padding:var(--s3) var(--s4); margin:var(--s4) 0 }
.card--ready   { border-left:4px solid var(--accent) }
.card--problem { border-left:4px solid var(--live) }
.card--posted  { border-left:4px solid var(--rule-strong); background:var(--surface-2) }
.card--empty   { border-left:4px dashed var(--rule-strong) }
.card--todo    { border-left:4px solid var(--field) }
.card--suggested { border-left:4px dashed var(--accent) }
.card--waiting { border-left:4px solid var(--test-ink) }
.card--hand, .card--otherside { border-left:4px dotted var(--rule-strong); background:var(--surface-2) }
/* after Spara the page lands on a card: keep it clear of the sticky rail and show where */
.card { scroll-margin-top:calc(var(--envbar-h) + var(--s3)) }
.card:target { box-shadow:0 0 0 2px var(--focus) }
.proposal { border:1px dashed var(--accent); border-radius:var(--r); padding:0 var(--s3) var(--s2) }
.proposal__tag { margin:var(--s2) 0 0; font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent) }
.proposal .table { background:transparent }
.suggest--conflict { border-color:var(--test-ink); background:var(--test-soft) }
.suggest--conflict p { margin:0 0 var(--s1); max-width:none }
.handbox { margin-top:var(--s3) }
.handbox summary { font-size:var(--fs-sm); color:var(--ink-3) }
label.pick--accept { font-weight:600; color:var(--accent) }
.card h2 { margin-top:var(--s2) }
.card__grid { display:grid; gap:var(--s4) }
.meta { max-width:none; font-size:var(--fs-sm); color:var(--ink-3); display:flex; flex-wrap:wrap; gap:.25rem var(--s2); align-items:baseline }
.meta .acct { display:inline-flex }
.small { font-size:var(--fs-sm) }
.kontering label { margin:0 0 var(--s3) }
.kontering label.pick { margin:0 var(--s3) var(--s3) 0 }
.kontering select { font-variant-numeric:tabular-nums }
.acctfield { width:100%; max-width:28rem; font-variant-numeric:tabular-nums }
.acctfield + .bad { display:block }
.acctfield[aria-invalid="true"] { border-color:var(--live); outline:1px solid var(--live) }

/* the account list drawn by konto.js; without the script the browser's datalist and its own hint are used */
.acct-hint__js { display:none }
.has-acctlist .acct-hint__js { display:inline }
.has-acctlist .acct-hint__nojs { display:none }
.acctfield--list { padding-right:2rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2387877f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center; background-size:.75rem auto; text-overflow:ellipsis }
.acctfield--list[aria-expanded="true"] { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) }
.acctpop { position:absolute; z-index:40; display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); color:var(--ink); font-size:var(--fs-sm); line-height:var(--lh-tight);
  border:1px solid var(--rule-strong); border-radius:var(--r); box-shadow:var(--shadow-pop) }
.acctpop[hidden] { display:none }
.acctpop__list { position:relative; overflow-y:auto; overscroll-behavior:contain; max-height:22rem }
.acctpop__head { position:sticky; top:0; z-index:1; padding:.45rem var(--s3) .35rem; background:var(--surface-2);
  border-bottom:1px solid var(--rule); color:var(--ink-3); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.05em; text-transform:uppercase }
.acctpop__group + .acctpop__group .acctpop__head { border-top:1px solid var(--rule) }
.acctpop__opt { display:grid; grid-template-columns:3.1rem minmax(0,1fr) auto; gap:var(--s3); align-items:baseline;
  padding:.45rem var(--s3) .45rem calc(var(--s3) - 3px); border-left:3px solid transparent; cursor:pointer }
.acctpop__num { font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink) }
.acctpop__name { color:var(--ink-2); overflow-wrap:anywhere }
.acctpop mark { background:none; color:var(--accent); font-weight:700 }
@media (hover:hover){ .acctpop__opt:hover { background:var(--surface-2) } }
.acctpop__opt.is-active { background:var(--accent-soft); border-left-color:var(--accent) }
.acctpop__opt.is-current .acctpop__name { color:var(--ink); font-weight:600 }
.acctpop__tick { color:var(--accent); font-weight:700 }
.acctpop__empty { margin:0; padding:var(--s3); color:var(--ink-3); max-width:none }
.acctpop__foot { display:flex; justify-content:space-between; gap:var(--s3); padding:.35rem var(--s3);
  border-top:1px solid var(--rule); background:var(--surface-2); color:var(--ink-3); font-size:var(--fs-xs) }
.acctpop__count { font-variant-numeric:tabular-nums }
@media (hover:none){ .acctpop__keys { display:none } .acctpop__opt { padding-top:.65rem; padding-bottom:.65rem } }
@media (forced-colors:active){ .acctpop__opt.is-active { outline:2px solid Highlight; outline-offset:-2px } .acctpop mark { color:Highlight } }
.suggest { max-width:none; margin:0 0 var(--s3); padding:var(--s2) var(--s3); font-size:var(--fs-sm);
  background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--r) }
.suggest .acct { display:inline-flex }
.suggest__tag { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin-right:var(--s2) }
label.pick--kvitto { font-weight:600; padding:.35rem .6rem; border:1px dashed var(--test-ink); border-radius:var(--r); background:var(--test-soft) }
label.pick--kvitto:has(input:checked) { border-style:solid; border-color:var(--accent); background:var(--accent-soft) }
.bankline { max-width:none; margin:0 0 var(--s2); font-size:var(--fs-sm); display:flex; flex-wrap:wrap; gap:.25rem var(--s4) }
.bankline .acct { display:inline-flex }
.bankline b { color:var(--ink) }

/* ── own rows editor ────────────────────────────────────────────────────── */
.table--rows td { vertical-align:middle }
.table--rows td input,.table--rows td select { margin:0 }
.table--rows td .acctfield { min-width:18rem }
.table--rows td.num input { width:8rem; text-align:right; margin-left:auto }
.table--rows td:last-child input { min-width:14rem }
.table--rows .row--locked > * { background:var(--surface-2) }
.table--rows .ok { color:var(--accent); font-weight:600 }
.table--rows .bad { color:var(--live-ink); font-weight:700 }
.count { display:inline-block; min-width:1.5em; padding:0 .35em; margin-left:.2rem; border-radius:var(--r-pill);
  background:var(--surface-3); color:var(--ink-2); font-size:var(--fs-xs); font-weight:700; text-align:center }
.months a[aria-current] .count,.btn--chip[aria-pressed="true"] .num { background:var(--paper); color:var(--ink) }
.btn--chip .num { font-size:var(--fs-xs); padding:0 .3em; border-radius:var(--r-pill) }

/* ── choose company ─────────────────────────────────────────────────────── */
.companies { list-style:none; padding:0; margin:var(--s4) 0; display:grid; gap:var(--s3); max-width:none }
.companies li { max-width:none }
.company { display:grid; grid-template-columns:1fr auto; gap:.2rem var(--s3); width:100%; text-align:left; cursor:pointer;
  padding:var(--s3) var(--s4); font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--rule-strong); border-radius:var(--r) }
a.company { text-decoration:none }
.company:hover { border-color:var(--accent); background:var(--surface-2) }
.company__name { font-weight:600; font-size:var(--fs-lg) }
.company__meta { grid-column:1; font-size:var(--fs-sm); color:var(--ink-3) }
.company .env { grid-column:2; grid-row:1; align-self:start; margin-top:0 }
.company[disabled] { opacity:.6; cursor:not-allowed }
@media (min-width:52rem){ .card__grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
.subnav { display:flex; gap:var(--s4); border-bottom:1px solid var(--rule); margin:var(--s4) 0 }
.subnav a { text-decoration:none; color:var(--ink-2); font-size:var(--fs-sm); font-weight:600;
  padding:var(--s2) 0; border-bottom:2px solid transparent }
.subnav a[aria-current] { color:var(--ink); border-bottom-color:var(--ink) }

/* ── folded cards, page info, automatic sending ─────────────────────────── */
.card--compact { padding-top:var(--s2); padding-bottom:var(--s2) }
.compact { display:flex; gap:var(--s3); align-items:flex-start }
/* the tick sits apart from the row, behind a thin rule */
.compact > .pick { flex:0 0 auto; margin:0; min-height:2rem; padding-right:var(--s3); border-right:1px solid var(--rule) }
.compact > details { flex:1 1 auto; min-width:0; margin:0; color:var(--ink) }
/* a folded card opens like any accordion: the whole row is the button, and a round chevron at its
   right end points down when closed and up when open (no browser triangle beside the tick) */
.compact > details > summary, details.card > summary { display:flex; align-items:center; gap:var(--s3);
  min-height:2rem; list-style:none; color:var(--ink) }
.compact > details > summary::-webkit-details-marker, details.card > summary::-webkit-details-marker { display:none }
.compact > details > summary::after, details.card > summary::after { content:""; flex:0 0 auto; margin-left:auto;
  width:2rem; height:2rem; border-radius:var(--r-pill); background:var(--surface-2) var(--chevron) no-repeat center / .75rem auto;
  transition:transform .15s ease, background-color .15s ease }
.compact > details[open] > summary::after, details.card[open] > summary::after { transform:rotate(180deg) }
@media (hover:hover){ .compact > details > summary:hover::after, details.card > summary:hover::after { background-color:var(--surface-3) } }
.compact__line { flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; gap:.2rem var(--s3); align-items:baseline; font-size:var(--fs-sm) }
.compact > details[open] > summary { margin-bottom:var(--s2) }
.plainlist { list-style:none; margin:var(--s2) 0 0; padding:0; font-size:var(--fs-sm) }
.plainlist li { padding:.2rem 0; border-top:1px solid var(--rule); max-width:none }
.pageinfo { max-width:var(--measure) }
.pageinfo > summary { font-size:var(--fs-sm) }
.card--preview:has(input[name^="key_"]:not(:checked)) { opacity:.55 }
form:has(> .card--preview) { counter-reset:picked }
.card--preview input[name^="key_"]:checked { counter-increment:picked }
.pickcount::after { content:counter(picked) " " }
.chip--warn { background:var(--test-soft); color:var(--test-ink); text-transform:none; letter-spacing:0 }
.table--rows .row--error > * { background:var(--live-soft) }
.table--rows [aria-invalid="true"] { border-color:var(--live); outline:1px solid var(--live) }
.nowrap { white-space:nowrap }
.acctmove { display:inline-flex; gap:var(--s2); margin-right:var(--s4) }
.autoline { max-width:none; font-size:var(--fs-sm); padding:var(--s2) var(--s3); border-radius:var(--r); border:var(--border); background:var(--surface) }
.autoline--on { border-left:4px solid var(--accent) }
.autoline--pending { border-left:4px solid var(--test-ink) }
.kontbox { margin:var(--s3) 0 }
.kontbox h2 { font-size:var(--fs-base); margin:0 0 var(--s1) }
.kontbox ul { margin:0; padding-left:1.1rem; font-size:var(--fs-sm) }
.kontbox li { max-width:none }
.autostate { background:var(--surface); border:var(--border); border-radius:var(--r); padding:var(--s3) var(--s4); margin:var(--s3) 0 }
.autostate--on { border-left:4px solid var(--accent) }
.autostate--pending { border-left:4px solid var(--test-ink) }
.autostate--off { border-left:4px solid var(--rule-strong) }
.autostate form { margin:var(--s3) 0 0 }
.ages { border:0; padding:0; margin:0 0 var(--s3); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4) }
.ages legend { font-size:var(--fs-sm); color:var(--ink-2); margin-bottom:var(--s1) }
.rules { font-size:var(--fs-sm); padding-left:1.1rem }
.rules li { margin:.2rem 0 }

/* ── logg: filter chips and the pager ───────────────────────────────────── */
.chips { display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; margin:0 0 var(--s3) }
.chips .btn--chip { text-decoration:none }
.chips .btn--chip[aria-current] { background:var(--ink); color:var(--paper); border-color:var(--ink) }
.chips .btn--chip[aria-current] .num { background:var(--paper); color:var(--ink) }
.pager { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; margin:var(--s3) 0 }

/* ── underlag ───────────────────────────────────────────────────────────── */
.ulfilter { max-width:none }
.ulmonths { border:var(--border); border-radius:var(--r); padding:var(--s2) var(--s3); margin:0 0 var(--s3); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); align-items:center }
.ulmonths legend { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3) }
.ulgroups { max-width:none; display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center }
.ulgroups .btn--chip { text-decoration:none }
.ulname,.ulnote { display:block; margin:.2rem 0 0; font-size:var(--fs-sm); padding:.2rem .4rem; min-width:9rem }
.ulname { max-width:12rem }
.sorthead { color:inherit; text-decoration:none }
.sorthead--on { text-decoration:underline }
.mailtext pre { white-space:pre-wrap; background:var(--surface-2); border:var(--border); border-radius:var(--r); padding:var(--s3); font-size:var(--fs-sm); user-select:all }

/* ── handboken ──────────────────────────────────────────────────────────── */
.hb__kicker { margin:0 0 var(--s1); font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3) }
.hb__kicker a { color:inherit; text-decoration:none }
.hb__lead { margin:0 0 var(--s4); color:var(--ink-2); font-size:var(--fs-lg); line-height:var(--lh-tight) }
.hb__lead .chip { vertical-align:.15em }
/* the download box for the AI file: icon, title and two lines, the button with the kind of file beside it */
.aibox { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s3) var(--s4); align-items:start;
  margin:var(--s4) 0; padding:var(--s4); background:var(--surface-2); border:1px solid var(--rule); border-radius:var(--r) }
.aibox__icon { width:2.5rem; height:2.5rem; padding:.5rem; border-radius:var(--r); background:var(--accent-soft); color:var(--accent);
  border:1px solid var(--rule) }
.aibox h2 { margin:0 0 var(--s1); font-size:var(--fs-lg) }
.aibox p { margin:0; max-width:var(--measure); font-size:var(--fs-sm); color:var(--ink-2) }
.aibox__get { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:center }
.aibox .btn { display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; white-space:nowrap }
.aibox .btn svg { flex:none; width:1rem; height:1rem }
.aibox__kind { font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3) }
@media (min-width:52rem){ .aibox { grid-template-columns:auto minmax(0,1fr) auto; align-items:center }
  .aibox__get { grid-column:auto; flex-direction:column; align-items:flex-end; gap:var(--s1) } }
/* chapters as tabs that wrap: every chapter is in sight, on a phone too */
.hb__tabs { display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s4) 0 var(--s5); padding-bottom:var(--s4); border-bottom:1px solid var(--rule) }
.hb__tabs a { padding:.3rem .7rem; font-size:var(--fs-sm); font-weight:600; color:var(--ink-2); text-decoration:none;
  background:var(--surface); border:1px solid var(--rule-strong); border-radius:var(--r-pill) }
.hb__tabs a:hover { border-color:var(--accent); color:var(--ink) }
.hb__tabs a[aria-current] { background:var(--ink); border-color:var(--ink); color:var(--paper) }
.hb { display:grid; gap:var(--s4) }
.hb__toc { font-size:var(--fs-sm); padding:var(--s3) var(--s4); background:var(--surface); border:var(--border); border-radius:var(--r) }
.hb__toc-title { margin:0 0 var(--s2); font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3) }
/* the list is a rail, and the section being read is a green box on it: public/handbok.js sets
   aria-current on that one link as the page scrolls. Without the script nothing is marked and the
   rail is a plain line. Nothing here changes the type: a mark that made a title wrap would make the
   list jump while you read. */
.hb__toc ol { list-style:none; margin:0; padding:0; border-left:2px solid var(--rule) }
.hb__toc li { max-width:none }
.hb__toc a { display:block; margin-left:-2px; padding:.25rem var(--s2); border-left:2px solid transparent;
  border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--ink-2); text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease }
.hb__toc a:hover { color:var(--accent); text-decoration:underline }
.hb__toc a[aria-current] { background:var(--accent-soft); border-left-color:var(--accent); color:var(--accent); text-decoration:none }
@media (min-width:60rem){
  .hb { grid-template-columns:14rem minmax(0,1fr); gap:var(--s6); align-items:start }
  .hb__toc { position:sticky; top:calc(var(--envbar-h) + var(--s4)); max-height:calc(100vh - var(--envbar-h) - var(--s6)); overflow-y:auto }
}
.hb__body { min-width:0 }
.hb__body section { scroll-margin-top:calc(var(--envbar-h) + var(--s3)) }
.hb__body h2 { margin:var(--s7) 0 var(--s3); padding-top:var(--s5); border-top:1px solid var(--rule); font-size:1.25rem; line-height:var(--lh-tight) }
.hb__body section:first-child h2 { margin-top:0; padding-top:0; border-top:0 }
.hb__body h3 { margin-top:var(--s5) }
.hb__body li { margin:.3rem 0 }
.hb__body ul,.hb__body ol { padding-left:1.25rem }
.hbtable { font-size:var(--fs-sm) }
.hbtable th,.hbtable td { vertical-align:top }
.hbtable thead th { position:static }
.hbtable th[scope=row] { font-weight:600; min-width:9rem }
/* on a phone a row is a small block: each cell's column name above its text, which flows as ordinary text
   (the panel's own stacked tables are flex rows for one short value; these cells hold sentences) */
@media (max-width:52rem){
  .hbtable.table--stack th,.hbtable.table--stack td { display:block; padding:.3rem var(--s3) }
  .hbtable.table--stack th::before,.hbtable.table--stack td::before { display:block; margin-bottom:.1rem }
  .hbtable th[scope=row] { min-width:0 }
}
/* a text that stands on the screen, word for word */
.ui { padding:0 .3em; font-weight:600; color:var(--ink); background:var(--surface-2); border:1px solid var(--rule);
  border-radius:var(--r-sm); -webkit-box-decoration-break:clone; box-decoration-break:clone }
.hbnote { max-width:var(--measure); margin:var(--s4) 0; padding:var(--s3) var(--s4); background:var(--surface);
  border:1px solid var(--rule-strong); border-left:4px solid var(--accent); border-radius:var(--r) }
.hbnote p { margin:0 }
.hbnote--warn { background:var(--test-soft); border-color:var(--test-ink) }
.hbnote--stop { background:var(--live-soft); border-color:var(--live-ink) }
.hbnote--warn .hbnote__title { color:var(--test-ink) }
.hbnote--stop .hbnote__title { color:var(--live-ink) }
.shot { margin:var(--s4) 0 var(--s5); max-width:54rem }
/* shown at half the file's pixels (the files are 2×), and only ever made smaller */
.shot img { display:block; max-width:100%; height:auto; background:var(--surface-2); border:1px solid var(--rule-strong); border-radius:var(--r) }
.shot figcaption { margin-top:var(--s2); font-size:var(--fs-sm); color:var(--ink-3) }
.hb__cards { list-style:none; margin:var(--s3) 0; padding:0 !important; display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)) }
.hb__cards li { max-width:none; margin:0 }
.hb__card { display:block; height:100%; padding:var(--s3) var(--s4); color:var(--ink); text-decoration:none;
  background:var(--surface); border:1px solid var(--rule-strong); border-radius:var(--r) }
.hb__card:hover { border-color:var(--accent); background:var(--surface-2) }
.hb__card b { display:block; margin-bottom:.2rem }
.hb__card span { font-size:var(--fs-sm); color:var(--ink-3) }
.hb__card .chip { margin-top:var(--s2) }
.hb__pager { display:flex; justify-content:space-between; gap:var(--s4); margin:var(--s7) 0 var(--s3); padding-top:var(--s4);
  border-top:1px solid var(--rule); font-size:var(--fs-sm); font-weight:600 }
@media print { .hb { display:block } .shot { break-inside:avoid; max-width:100% } .hb__body h2 { break-after:avoid } .ui { border:0; padding:0; background:none } }

/* ── responsive: stack tables into labelled rows ────────────────────────── */
@media (max-width:52rem){
  .table--stack thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
  .table--stack tr { display:block; border-bottom:2px solid var(--rule-strong); padding:var(--s2) 0 }
  .table--stack th,.table--stack td { display:flex; gap:var(--s3); justify-content:space-between;
    align-items:baseline; border:0; padding:.25rem var(--s3) }
  .table--stack th::before,.table--stack td::before { content:attr(data-label); flex:0 0 auto;
    color:var(--ink-3); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em }
  .table--stack td:empty,.table--stack th:empty { display:none }
  .table--stack tfoot tr { border-bottom:0 }
  .table--stack tbody tr:nth-child(even)>* { background:transparent }
  .ulname,.ulnote { max-width:100%; min-width:0; width:100% }
}

/* ── print ──────────────────────────────────────────────────────────────── */
.printfoot { display:none }
@media print {
  :root { color-scheme:only light }
  body { background:#fff; color:#000 }
  .envbar { position:static; border-bottom:2px solid #000 }
  .compact > details > summary::after,details.card > summary::after { display:none }
  .topbar,.nav,.who,.themeform,.skip,.actionbar,.months,.filterbar,.noprint,.acctpop,
  form.rowform button,input[type=checkbox] { display:none!important }
  main { max-width:none; padding:0 }
  .table thead th,.scroller .table th[scope=row] { position:static }
  .scroller,.scroller--tall { max-height:none; overflow:visible; border:0 }
  .table { page-break-inside:auto } tr,section.card { page-break-inside:avoid }
  .printfoot { display:block; margin-top:var(--s5); padding-top:var(--s2);
    border-top:1px solid #000; font-size:var(--fs-xs) }
}