/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   Huvudbok — Auga's own design system: the auditor's ledger book, set as a tool for the people who answer for it.
   (docs-site/docs/dashboard/design-system.md · .claude/skills/huvudbok-design)

   Colour           Grafit, chosen by the user from three palettes (Itten's contrasts as rules, Albers' pairs as the test):
                    no subjective colour at all — ink does the work, the primary button is filled ink. The one saturated
                    colour is red and it means only gap / not met / harm. Neutrals cool, one hue (260), chroma ≤ 0.006.
   Surfaces         page, toned field, control as three lightness steps (Albers), never shadows or cards
   Lines            few: no column rules, a row's edge almost vanishes, a head gets one quiet line; grouping comes
                    from space and from a toned field (the user: all the lines are cognitive overload)
   Stages           a mandate's stage is a straight label in one ink, five lightness steps up the ladder
   Type             one family, D-DIN: the EXPANDED width for headings and figures (airy, straight, square), normal for
                    text; no condensed width (the user: too compressed)
   Density          a tool, but airy: 18 px text, 16 px tables, nothing under 14 px; rows 0.7 rem
   Contrast         every text ≥ 7:1 (AAA): D-DIN's strokes are thin; no grey text on a grey field
   Corners          0 everywhere; motion: one (the panel that slides in)
   Tokens, rem only (1px hairlines). The fonts are self-hosted (SIL OFL, ./fonts/d-din/OFL.txt).
   ───────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

@font-face { font-family: "D-DIN Condensed"; src: url("./fonts/d-din/d-din-condensed-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "D-DIN Condensed"; src: url("./fonts/d-din/d-din-condensed-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "D-DIN Expanded"; src: url("./fonts/d-din/d-din-expanded-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "D-DIN Expanded"; src: url("./fonts/d-din/d-din-expanded-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* the bar (from the Grafit palette: oklch values in the comments) */
  --hb-cover: light-dark(#313336, #08090B);              /* oklch 0.32 / 0.14, 0.006 260 */
  --hb-cover-ink: #EDEEF0;
  --hb-cover-ink-2: rgba(237, 238, 240, 0.72);
  --hb-cover-line: rgba(237, 238, 240, 0.18);

  /* surfaces: three lightness steps of one cool neutral */
  --hb-paper: light-dark(#FFFFFF, #131416);              /* the page: white (the user, step by step: "even whiter") */
  --hb-paper-2: light-dark(#F6F6F4, #191B1D);            /* a toned field (hover, a band), never under grey text */
  --hb-paper-3: light-dark(#EDEDEA, #222427);            /* a control */
  --hb-ink: light-dark(#1B1D20, #E7E8EA);
  --hb-ink-2: light-dark(#3D3F43, #D2D4D7);              /* ≥ 10:1 — D-DIN's strokes are thin, grey reads weaker */
  --hb-ink-3: light-dark(#45474B, #B8BABD);              /* quiet, still ≥ 7:1 on every surface (AAA) */

  /* rules: a line = a boundary in the data */
  --hb-rule: light-dark(#E6E6E0, #26282B);                /* a row's edge: almost gone (Albers' vanishing boundary) */
  --hb-rule-strong: light-dark(#C9CBCE, #3C3F43);         /* under a table head, around a control */
  --hb-margin: light-dark(#8C231F, #F68A84);             /* the one saturated colour: gap, not met, harm (≥ 7:1) */

  /* meaning */
  --hb-shown: var(--hb-ink);                             /* shown / met is said in ink; only the gap is coloured */
  --hb-gap: var(--hb-margin);
  --hb-quiet: var(--hb-ink-3);
  --hb-tint: color-mix(in oklch, var(--hb-ink) 7%, var(--hb-paper));   /* a selected row: ink seen through paper */

  /* inked panel heads — the colour names the panel, the content stays on white (chosen by the user from three
     side-by-side options); one lightness, three quiet hues; every head text ≥ 7:1 */
  --hb-head-ledger: light-dark(oklch(0.925 0.026 250), oklch(0.29 0.03 250));     /* slate: the ledger, decisions */
  --hb-head-evidence: light-dark(oklch(0.925 0.032 155), oklch(0.29 0.035 155));  /* sage: fields, the evidence */
  --hb-head-act: light-dark(oklch(0.915 0.045 85), oklch(0.30 0.045 85));         /* sand: the regulation */
  --hb-band: light-dark(oklch(0.45 0.03 250), oklch(0.70 0.04 250));              /* a key figure's top band */

  /* the stage ladder: one ink, five steps, quieter to more official */
  --hb-stamp-observed: light-dark(#45474B, #ADAFB2);      /* the lightest step still ≥ 7:1 */
  --hb-stamp-supervised: light-dark(#3D3F43, #BEC0C3);
  --hb-stamp-constrained: light-dark(#33353A, #D0D2D5);
  --hb-stamp-trusted: light-dark(#2A2C30, #E1E2E4);
  --hb-stamp-mandated: light-dark(#1B1D20, #F1F2F4);

  /* type: one family; the expanded width for headings and figures */
  --hb-font-head: "D-DIN Expanded", "D-DIN", "Barlow", system-ui, sans-serif;
  --hb-font-text: "D-DIN", "Barlow", system-ui, sans-serif;
  --hb-font-figure: "D-DIN Expanded", "D-DIN", system-ui, sans-serif;
  /* the root is 15 px (tokens.css --text-md), so: */
  --hb-t-xs: 0.9375rem;    /* 14 — the smallest text there is */
  --hb-t-sm: 1.0625rem;    /* 16 — tables, secondary lines */
  --hb-t-md: 1.1875rem;    /* 18 — body */
  --hb-t-lg: 1.3333rem;    /* 20 — a section */
  --hb-t-xl: 1.7333rem;    /* 26 — a page's title */
  --hb-t-2xl: 2.2rem;      /* 33 — a figure that matters */
  --hb-leading: 1.55;

  /* space */
  --hb-s-1: 0.5rem; --hb-s-2: 1rem; --hb-s-3: 1.5rem; --hb-s-4: 2rem; --hb-s-5: 3rem; --hb-s-6: 4.5rem;
  --hb-row: 0.7rem;        /* a table row's vertical padding */
  --hb-margin-x: 2.5rem;   /* the page's left edge */

  /* form and motion */
  --hb-radius: 0;
  --hb-motion: 240ms cubic-bezier(0.2, 0.7, 0.2, 1);    /* the one motion: a panel slides in */
}

/* ── the sheet: the page surface ── */
.hb-sheet { background: var(--hb-paper); color: var(--hb-ink); font-family: var(--hb-font-text); font-size: var(--hb-t-md);
  line-height: var(--hb-leading); }

/* headings and figures: the expanded width; figures tabular */
.hb-h1 { margin: 0; font-family: var(--hb-font-head); font-size: var(--hb-t-xl); font-weight: 700; line-height: 1.2;
  letter-spacing: 0.01em; color: var(--hb-ink); }
.hb-h2 { margin: 0; font-family: var(--hb-font-head); font-size: var(--hb-t-lg); font-weight: 700; line-height: 1.2;
  color: var(--hb-ink); }
.hb-figure { font-family: var(--hb-font-figure); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* the table: no column rules; one quiet line under the head, rows edged almost invisibly; numbered rows */
.hb-ledger { width: 100%; border-collapse: collapse; font-size: var(--hb-t-sm); }
.hb-ledger th { padding: var(--hb-s-1) var(--hb-s-2); border-bottom: 1px solid var(--hb-rule-strong);
  font-family: var(--hb-font-text); font-size: var(--hb-t-sm); font-weight: 700; letter-spacing: 0.01em;
  text-align: start; text-transform: none; color: var(--hb-ink-2); }
.hb-ledger td { padding: var(--hb-row) var(--hb-s-2); border-bottom: 1px solid var(--hb-rule); vertical-align: baseline; }
.hb-ledger tbody tr:hover { background: var(--hb-paper-2); }
.hb-ledger .hb-no { width: 3rem; font-family: var(--hb-font-figure); color: var(--hb-ink-3); }
.hb-ledger .hb-num { font-family: var(--hb-font-figure); font-variant-numeric: tabular-nums; text-align: end; }

/* ── a stage or a status: a straight label, one frame, upper case (the one place for it) ── */
.hb-stamp { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.05rem 0.45rem;
  border: 1px solid currentColor; border-radius: 0;
  color: var(--hb-stamp-observed); font-family: var(--hb-font-text); font-size: var(--hb-t-xs); font-weight: 700;
  line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.hb-stamp small { font-family: var(--hb-font-figure); font-size: var(--hb-t-xs); font-weight: 400; letter-spacing: 0.02em; text-transform: none; }
.hb-stamp-observed { color: var(--hb-stamp-observed); }
.hb-stamp-supervised { color: var(--hb-stamp-supervised); }
.hb-stamp-constrained { color: var(--hb-stamp-constrained); }
.hb-stamp-trusted { color: var(--hb-stamp-trusted); }
.hb-stamp-mandated { color: var(--hb-stamp-mandated); background: var(--hb-tint); }
.hb-stamp-shown { color: var(--hb-shown); }
.hb-stamp-gap { color: var(--hb-gap); }
.hb-stamp-none { color: var(--hb-quiet); border-style: dashed; }
.hb-stamp-sm { padding: 0 0.35rem; }   /* smaller by its frame, never below 14 px */

/* links in the ledger: words, underlined; no arrows */
.hb-link { padding: 0; border: 0; background: none; color: var(--hb-ink); font: inherit; text-decoration: underline;
  text-decoration-color: var(--hb-rule-strong); text-underline-offset: 0.2em; cursor: pointer; }
.hb-link:hover { text-decoration-color: currentColor; }
.hb-link:focus-visible { outline: 1px solid var(--hb-ink); outline-offset: 0.2rem; }

/* ── corners: none. Everything in the d1 shell is square, older shared components included ── */
.d1-shell *, .d1-shell *::before, .d1-shell *::after { border-radius: 0 !important; }

/* explanations on request (components/Explain) on the sheet: a toned field and the second ink, not the old blue-grey */
.d1-shell .ui-explain > summary { color: var(--hb-ink-2); }
.d1-shell .ui-explain > summary { font-size: var(--hb-t-xs); }
.d1-shell .ui-explain-body { background: none; color: var(--hb-ink); font-size: var(--hb-t-sm); }   /* no grey on grey */

/* ── panels: one frame around one thing, a head strip with its title and facts — the user asked for panels and
   divisions so a page reads as a few blocks, not many loose lines (2026-10-24). Square, no shadow, white. ── */
.hb-panel { border: 1px solid var(--hb-rule-strong); background: var(--hb-paper); min-width: 0; }
.hb-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem var(--hb-s-2); padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--hb-rule-strong); background: var(--hb-head-ledger); }
.hb-panel-evidence > .hb-panel-head { background: var(--hb-head-evidence); }
.hb-panel-act > .hb-panel-head { background: var(--hb-head-act); }
/* a key figure: white, a thin inked band on top; red when it asks for a person */
.hb-kpi { box-shadow: inset 0 0.25rem 0 var(--hb-band); }
.hb-panel.hb-kpi { padding-top: 1.2rem; }
.hb-kpi-attn { box-shadow: inset 0 0.25rem 0 var(--hb-gap); }
.hb-panel-head h3, .hb-panel-head h4 { margin: 0; font-family: var(--hb-font-head); font-size: var(--hb-t-lg); font-weight: 700;
  line-height: 1.2; color: var(--hb-ink); }
.hb-panel-meta { margin: 0; font-size: var(--hb-t-sm); color: var(--hb-ink-2); }
.hb-panel-head > .hb-panel-end { margin-left: auto; }
.hb-panel-body { padding: 1rem 1.25rem; }
.hb-panel-foot { padding: 0.9rem 1.25rem; border-top: 1px solid var(--hb-rule); }
/* a table flush in a panel: its outer cells take the panel's inset */
.hb-panel table th:first-child, .hb-panel table td:first-child { padding-left: 1.25rem; }
.hb-panel table th:last-child, .hb-panel table td:last-child { padding-right: 1.25rem; }
.hb-panel table tbody tr:last-child > * { border-bottom: 0; }

/* ── the island: a set of choices in one frame, a hairline between them, the current one filled ink (the evidence
   steps, the AI Act's tabs, an agent picker) ── */
.hb-island { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--hb-rule-strong); background: var(--hb-paper); }
.hb-island > button { padding: 0.55rem 1.1rem; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--hb-ink-2);
  font: inherit; font-family: var(--hb-font-head); font-size: var(--hb-t-sm); font-weight: 700; letter-spacing: 0.01em; cursor: pointer; }
.hb-island > button + button { border-left: 1px solid var(--hb-rule-strong); }
.hb-island > button:hover { color: var(--hb-ink); background: var(--hb-paper-2); }
.hb-island > button[aria-selected="true"], .hb-island > button[aria-current="page"] { color: var(--hb-paper); background: var(--hb-ink); }
.hb-island > button:focus-visible { outline: 1px solid var(--hb-ink); outline-offset: 0.15rem; }