/* Ekvi portal. Own CSS, no CDN and no web fonts: an on-prem install may sit without internet access.

   The look follows the Base44 prototype the owner chose on 2026-09-23 (review/reports/
   2026-09-23-look-BRIEF.md): shadcn/ui "neutral" tokens, dark by default, a fixed left sidebar with
   lucide icons, content in 12 px cards, stat cards with a tinted icon tile, an indigo accent. What the
   look does not get to change: every figure keeps its unit and the date it is computed at, a total is
   the strongest row of its table, a refusal is the loudest thing on the screen, and text stays at
   4.5:1 or better on the surface it sits on — where the prototype's measured colour is below that, the
   token here is the nearest colour that is not (noted next to it).

   Layers, in order: tokens (both themes) · shell · type · cards and figures · tables · forms · states
   · charts · breakpoints · print · blocks contributed by packages. */

/* ---------- tokens ---------------------------------------------------------------------------- */
/* Dark is the default and lives on :root; light is [data-theme="light"], and "system" takes the light
   block from prefers-color-scheme. The light block is written out twice for that reason — keep the two
   identical — so no colour is defined only inside a media query. */
:root {
  color-scheme: dark;

  --bg: #0a0a0a;          /* page, and the card: shadcn's card = background, set apart by its border */
  --panel: #0a0a0a;
  --sidebar: #18181b;     /* zinc-900 */
  --surface-2: #171717;   /* a strip that is not a record: table foot, toolbar, a selected row */
  --hover: #262626;       /* accent: hovered and current navigation, hovered row */
  --line: #262626;        /* hairline: card edge, row separator */
  --line-strong: #5c5c5c; /* the edge of a field and the rule above a total; the prototype's #262626
                             is 1.3:1 on the page, too faint to find an input by (WCAG 1.4.11 asks 3:1) */

  --ink: #fafafa;
  --ink-2: #d4d4d4;
  --muted: #a3a3a3;       /* 8:1 on the page */

  --accent: #818cf8;      /* indigo-400: links, the jurisdiction, the focus ring */
  --primary: #4f46e5;     /* indigo-600: the one main action of a form; white on it is 6.3:1 */
  --primary-hover: #4338ca;
  --primary-ink: #fff;
  --focus: #818cf8;
  --danger-solid: #ef4444; /* destructive, hsl(0 84.2% 60.2%): bars and edges, not text */

  /* Four states. Fill at ~15 % of the state colour, text in a tint that reads on that fill. */
  --info-bg: rgb(99 102 241 / 15%); --info-line: rgb(99 102 241 / 40%); --info-ink: #a5b4fc;
  --ok-bg: rgb(52 211 153 / 13%); --ok-line: rgb(52 211 153 / 35%); --ok-ink: #6ee7b7;
  --warn-bg: rgb(245 158 11 / 15%); --warn-line: rgb(245 158 11 / 40%); --warn-ink: #fcd34d;
  --danger-bg: rgb(239 68 68 / 15%); --danger-line: rgb(239 68 68 / 50%); --danger: #fca5a5;

  /* Stat card accents, in the prototype's order. */
  --tone-1: #6366f1; --tone-2: #22d3ee; --tone-3: #34d399; --tone-4: #f59e0b;

  /* Chart palette, the prototype's: indigo, violet, cyan, emerald, amber, and a neutral for
     "Other"/unallocated (ekvi.api.charts.DONUT_PALETTE_SIZE / BAR_PALETTE_SIZE). Each segment sets
     `color` and paints with `fill: currentColor`, so a theme only redefines the variables. */
  --chart-1: #6366f1; --chart-2: #8b5cf6; --chart-3: #22d3ee; --chart-4: #34d399; --chart-5: #f59e0b;
  --chart-other: #737373;
  --chart-track: #262626;

  /* Type scale (px in the prototype, rem here: the Greek phase sets longer words, not smaller ones). */
  --t-figure: 1.5rem;     /* 24/600 — a stat value */
  --t-page: 1.5rem;       /* 24/600 — h1 */
  --t-section: 1rem;      /* h2 between cards */
  --t-sub: 0.875rem;      /* h3, a card title, a form legend */
  --t-body: 0.875rem;     /* 14 — cells, inputs, nav */
  --t-meta: 0.75rem;      /* 12 — column heads, stat labels, units, dates */

  /* Spacing, 4 px grid. Inside a block is always tighter than between blocks. */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem;

  --radius: 0.5rem;       /* base, shadcn */
  --radius-sm: 6px;       /* buttons, inputs, nav links */
  --radius-card: 12px;    /* rounded-xl */
  --w-sidebar: 220px;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* State marks: inline SVG as a mask, painted with currentColor, so one mark serves both themes; the
     message itself is in the markup, for a screen reader. */
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.3 4.4h2.6v2.6h-2.6zm0 4.4h2.6v7.2h-2.6z'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 4.2h2.4v8.4h-2.4zm0 10.2h2.4v2.6h-2.4z'/%3E%3C/svg%3E");
  --icon-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2 23 20.8H1zm-1.1 5.6h2.2v6.6h-2.2zm0 8.2h2.2v2.4h-2.2z'/%3E%3C/svg%3E");
  --icon-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 17.6 3.8 11.8l1.8-1.8 4 4 8.8-8.8 1.8 1.8z'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16.5 4.5 9l1.8-1.8L12 12.9l5.7-5.7L19.5 9z'/%3E%3C/svg%3E");
}

/* Light. Keep identical to the block inside the media query below. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fff; --panel: #fff; --sidebar: #fafafa; --surface-2: #f5f5f5; --hover: #f0f0f0;
  --line: #e5e5e5; --line-strong: #8f8f8f;
  --ink: #0a0a0a; --ink-2: #404040;
  --muted: #6b6b6b;       /* the prototype's #737373 is 4.35:1 on the #f5f5f5 strips; this is 4.9:1 */
  --accent: #4f46e5; --primary: #4f46e5; --primary-hover: #4338ca; --primary-ink: #fff; --focus: #4f46e5;
  --danger-solid: #dc2626;
  --info-bg: rgb(99 102 241 / 10%); --info-line: rgb(99 102 241 / 35%); --info-ink: #3730a3;
  --ok-bg: rgb(16 185 129 / 11%); --ok-line: rgb(16 185 129 / 40%); --ok-ink: #065f46;
  --warn-bg: rgb(245 158 11 / 13%); --warn-line: rgb(217 119 6 / 45%); --warn-ink: #92400e;
  --danger-bg: rgb(239 68 68 / 9%); --danger-line: rgb(220 38 38 / 45%); --danger: #b91c1c;
  --tone-1: #4f46e5; --tone-2: #0891b2; --tone-3: #059669; --tone-4: #d97706;
  /* The same hues one step darker: cyan-400 and amber-500 are under 2:1 on white, and a segment has to
     be seen to be counted (3:1 for graphics). */
  --chart-1: #4f46e5; --chart-2: #7c3aed; --chart-3: #0891b2; --chart-4: #059669; --chart-5: #d97706;
  --chart-other: #a3a3a3;
  --chart-track: #f0f0f0;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --bg: #fff; --panel: #fff; --sidebar: #fafafa; --surface-2: #f5f5f5; --hover: #f0f0f0;
    --line: #e5e5e5; --line-strong: #8f8f8f;
    --ink: #0a0a0a; --ink-2: #404040;
    --muted: #6b6b6b;
    --accent: #4f46e5; --primary: #4f46e5; --primary-hover: #4338ca; --primary-ink: #fff; --focus: #4f46e5;
    --danger-solid: #dc2626;
    --info-bg: rgb(99 102 241 / 10%); --info-line: rgb(99 102 241 / 35%); --info-ink: #3730a3;
    --ok-bg: rgb(16 185 129 / 11%); --ok-line: rgb(16 185 129 / 40%); --ok-ink: #065f46;
    --warn-bg: rgb(245 158 11 / 13%); --warn-line: rgb(217 119 6 / 45%); --warn-ink: #92400e;
    --danger-bg: rgb(239 68 68 / 9%); --danger-line: rgb(220 38 38 / 45%); --danger: #b91c1c;
    --tone-1: #4f46e5; --tone-2: #0891b2; --tone-3: #059669; --tone-4: #d97706;
    --chart-1: #4f46e5; --chart-2: #7c3aed; --chart-3: #0891b2; --chart-4: #059669; --chart-5: #d97706;
    --chart-other: #a3a3a3;
    --chart-track: #f0f0f0;
  }
}

/* ---------- base ------------------------------------------------------------------------------ */
* { box-sizing: border-box; }
/* The root keeps the reader's own size (1rem = their 16 px) so every rem in the scale means what it says;
   the body text is set one step down, on body. */
html { color: var(--ink); background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font: var(--t-body)/1.5 var(--sans); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Focus stays visible on everything that takes it: a register is checked by tabbing through it. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
code { font-family: var(--mono); font-size: 0.85em; }
/* A rule id is one long word; in running text it may break anywhere rather than push the page sideways. */
p code, li code, .signal-ground code { overflow-wrap: anywhere; }
small, .muted { color: var(--muted); font-weight: normal; }
small { font-size: var(--t-meta); }
.inline { display: inline; }
.spacer { flex: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s4); top: -3rem; z-index: 100; padding: var(--s2) var(--s3); background: var(--primary); color: var(--primary-ink); border-radius: var(--radius-sm); }
.skip-link:focus { top: var(--s2); }

/* Lucide icons from templates/_icons.html: a stroke drawing that takes the colour of its text. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

/* ---------- shell: sidebar + main ------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: var(--w-sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar { grid-column: 1; grid-row: 1; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4) var(--s3); background: var(--sidebar); border-right: 1px solid var(--line); }
.shell > main { grid-column: 2; grid-row: 1; min-width: 0; padding: var(--s6); }
.topbar, .nav-toggle, .nav-close { display: none; }

.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s1); }
.brand { display: inline-flex; align-items: center; gap: var(--s3); color: var(--ink); }
.brand:hover { text-decoration: none; }
/* The one gradient in the portal: it is the prototype's mark, and a mark is what it stays. */
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.brand-words { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 0.875rem; font-weight: 600; }
.brand-tag { font-size: 0.625rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

/* Company switcher: a disclosure, so it works without JavaScript; it looks like a control. */
.switcher { position: relative; }
.switcher summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); cursor: pointer; list-style: none; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); font-weight: 500; }
.switcher summary:hover { background: var(--hover); }
.switcher summary::-webkit-details-marker { display: none; }
.switcher-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher summary .icon { color: var(--muted); }
.switcher ul { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: var(--s1) 0 0; padding: var(--s1); list-style: none; max-height: 60vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / 35%); /* a menu floats over the page: the shadow is what says so */ }
.switcher li a { display: block; padding: var(--s2) var(--s2); border-radius: var(--radius-sm); color: var(--ink); }
.switcher li a:hover, .switcher li a.current { background: var(--hover); text-decoration: none; }

/* Navigation: 14 px, 6 × 10 padding, 10 px between icon and label; current and hovered links take the
   foreground on the accent surface. */
.sidebar nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a, .sidebar-foot .who { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--muted); font-size: var(--t-body); }
.sidebar nav a:hover, .sidebar-foot .who:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.sidebar nav a.active { background: var(--hover); color: var(--ink); font-weight: 500; }
.nav-group + .nav-group { margin-top: var(--s3); }
.nav-title { margin: 0 0 var(--s1); padding: 0 10px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sidebar .global { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); }
.sidebar-foot { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
.sidebar-foot .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot .who.active { background: var(--hover); color: var(--ink); }
.sidebar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0 var(--s1) 0 10px; }
.deployment { padding: 0 10px; }
.sidebar button.logout { display: inline-flex; align-items: center; gap: var(--s2); color: var(--muted); text-decoration: none; font-size: var(--t-body); }
.sidebar button.logout:hover { color: var(--ink); }

.theme-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.theme-switch button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.theme-switch button:hover { color: var(--ink); background: var(--hover); border: 0; }
.theme-switch button[aria-pressed="true"] { background: var(--hover); color: var(--ink); }
.theme-switch .icon { width: 14px; height: 14px; }
/* The language switch (package `greek`): the theme switch's twin, with the language's own code as its
   label — text, because no icon says "Greek" — sharing the second sidebar row with the install's name. */
.lang-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lang-switch button { display: grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; }
.lang-switch button:hover { color: var(--ink); background: var(--hover); border: 0; }
.lang-switch button[aria-pressed="true"] { background: var(--hover); color: var(--ink); }

/* Signed out: the brand, one centred card, the theme switch. */
.solo { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: var(--s6) var(--s4); }
.solo-head { margin: var(--s5) 0 var(--s5); }
.solo > main { width: 100%; max-width: 26rem; flex: 1; }
.solo > main .narrow { max-width: none; }
.solo > main h1 { text-align: center; font-size: 1.25rem; margin-bottom: var(--s4); }
/* The token sign-in is a disclosure without the company switcher's icon: it gets the chevron mark. */
.solo .switcher summary::after { content: ""; width: 0.75rem; height: 0.75rem; background-color: var(--muted); -webkit-mask: var(--icon-chevron) no-repeat center / 100% 100%; mask: var(--icon-chevron) no-repeat center / 100% 100%; }
.solo .switcher[open] summary::after { transform: rotate(180deg); }
.solo .switcher[open] > :not(summary) { margin-top: var(--s3); }
.solo-foot { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s6); color: var(--muted); }

/* The assistant's button — a link to the chat page, rendered only when the assistant is configured. */
.assistant-fab:hover { text-decoration: none; background: var(--primary-hover); }
.assistant-fab { text-decoration: none; position: fixed; right: var(--s5); bottom: var(--s5); z-index: 40; display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s4); border: 0; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font: 500 var(--t-body) var(--sans); cursor: pointer; box-shadow: 0 6px 20px rgb(0 0 0 / 35%); /* floats over the content */ }

/* The assistant's chat page (package `assistant`): questions right, answers left, drafts as buttons. */
.chat { display: flex; flex-direction: column; gap: var(--s3); margin: 0 0 var(--s4); }
.chat .msg { max-width: 52rem; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--panel); }
.chat .msg.user { align-self: flex-end; background: var(--surface-2); }
.chat .msg .text { overflow-wrap: anywhere; }
/* An answer's own structure (ekvi.api.reply_format): tight paragraphs and lists inside the bubble, a
   heading as a bold line, code in the mono face — the page's heading outline is not the model's. */
.chat .msg .text > :first-child { margin-top: 0; }
.chat .msg .text > :last-child { margin-bottom: 0; }
.chat .msg .text p, .chat .msg .text ul, .chat .msg .text ol, .chat .msg .text pre { margin: 0 0 var(--s2); }
.chat .msg .text ul, .chat .msg .text ol { padding-left: var(--s5); }
.chat .msg .text li + li { margin-top: var(--s1); }
.chat .msg .text .reply-heading { margin-top: var(--s3); }
.chat .msg .text pre { overflow-x: auto; padding: var(--s2) var(--s3); background: var(--surface-2); border-radius: var(--radius-sm); font: var(--t-meta)/1.5 var(--mono); white-space: pre; }
.chat .msg .text code { padding: 0 0.2em; background: var(--surface-2); border-radius: 3px; }
.chat .msg.user .text { white-space: pre-wrap; }
.chat .msg .meta { margin-top: var(--s2); color: var(--muted); font-size: var(--t-meta); }
.chat .drafts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.chat .drafts a.button { white-space: normal; height: auto; min-height: 36px; padding-block: var(--s1); text-align: left; }
.suggestions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); padding: 0; list-style: none; }
.suggestions li { display: contents; }
.suggestions button { height: auto; min-height: 32px; padding: var(--s1) var(--s3); white-space: normal; text-align: left; color: var(--ink); background: transparent; border-color: var(--line-strong); }
.suggestions button:hover { background: var(--hover); border-color: var(--line-strong); }
.ask { display: flex; gap: var(--s2); align-items: flex-end; }
.ask textarea { margin: 0; min-height: 44px; }

/* ---------- type ------------------------------------------------------------------------------ */
h1 { font-size: var(--t-page); font-weight: 600; line-height: 1.25; margin: 0 0 var(--s1); letter-spacing: -0.015em; }
/* The line under the title ("As of 2026-09-19 · Cyprus Cap. 113") belongs to it: 14 px muted. */
h1 + p, h1 + .muted { margin-top: 0; color: var(--muted); font-size: var(--t-body); }
h1 + p.muted:not(.lede) { margin-bottom: var(--s5); }
.juris { color: var(--accent); }
/* The unit of a money figure (the currency, or "currency not recorded"): quiet, but always there. */
.unit { color: var(--muted); font-size: var(--t-meta); font-weight: 400; letter-spacing: 0; white-space: nowrap; }
h2 { font-size: var(--t-section); font-weight: 600; line-height: 1.35; margin: var(--s6) 0 var(--s3); }
h3 { font-size: var(--t-sub); font-weight: 600; line-height: 1.35; margin: var(--s5) 0 var(--s2); }
h1 small, h2 small, h3 small { font-size: var(--t-meta); font-weight: normal; }
p { margin: 0 0 var(--s3); }
/* Prose between cards keeps a readable line: a paragraph of Cap. 113 across 1200 px is not read. */
main > p, main > section > p, .lede, .card > p { max-width: 80ch; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }

/* ---------- cards and figures ------------------------------------------------------------------ */
.card { --card-pad: var(--s5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--card-pad); margin: 0 0 var(--s4); min-width: 0; }
.card > h2 { font-size: var(--t-sub); font-weight: 500; margin: 0 0 1.25rem; }
.card > h2 small { margin-left: var(--s1); }
.card > :last-child { margin-bottom: 0; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--s4); margin: 0 0 var(--s4); }
.card-grid > .card { margin: 0; }

/* Stat cards: label top-left, an icon tile top-right (the tone at 12.5 %), the value below it. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--s4); margin: var(--s4) 0 var(--s5); }
.stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label tile" "value value"; align-items: start; column-gap: var(--s3); row-gap: var(--s2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.25rem; }
.stat .label { grid-area: label; color: var(--muted); font-size: var(--t-meta); font-weight: 500; }
.stat .value { grid-area: value; font-size: var(--t-figure); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.stat .value small { font-size: var(--t-meta); font-weight: 500; letter-spacing: 0; }
.stat-tile { grid-area: tile; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); color: var(--tone, var(--tone-1)); background: color-mix(in srgb, var(--tone, var(--tone-1)) 12.5%, transparent); }
.tone-1 { --tone: var(--tone-1); }
.tone-2 { --tone: var(--tone-2); }
.tone-3 { --tone: var(--tone-3); }
.tone-4 { --tone: var(--tone-4); }

/* ---------- tables ---------------------------------------------------------------------------- */
/* A table sits in a card: no vertical rules, a 12/500 muted head, 1 px between rows. separate +
   spacing 0 so the card's radius holds on a bare table as well. */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); margin: var(--s2) 0 var(--s5); font-size: var(--t-body); }
caption { text-align: left; color: var(--muted); font-size: var(--t-meta); padding: 0 0 var(--s2); }
th, td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { font-size: var(--t-meta); font-weight: 500; color: var(--muted); white-space: nowrap; }
tbody th { font-weight: 500; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover > * { background: color-mix(in srgb, var(--hover) 50%, transparent); }
/* Figures line up by digit: right edge, one width per digit, never broken across lines. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A date or an id torn across two lines is not a register entry, so a cell holds its line; a table
   too wide for its card scrolls inside .table-scroll. A cell that carries prose wraps. */
td { white-space: nowrap; }
td.details, td.prose { white-space: normal; }
/* The register carries thirteen columns of s.105(1): tighter cells, so it fits a laptop screen. */
table.register th, table.register td { padding-inline: 0.625rem; }
td.details { color: var(--muted); font-size: var(--t-meta); word-break: break-word; min-width: 18rem; }
/* The total is what the table was read for: a rule above it and the weight of a figure. */
tfoot > tr > * { border-top: 1px solid var(--line-strong); border-bottom: 0; background: var(--surface-2); color: var(--ink); font-weight: 600; }
tfoot > tr:last-child > :first-child { border-bottom-left-radius: calc(var(--radius-card) - 1px); }
tfoot > tr:last-child > :last-child { border-bottom-right-radius: calc(var(--radius-card) - 1px); }
.narrow-table { max-width: 48rem; }
.narrow-table th { width: 14rem; color: var(--muted); font-size: var(--t-meta); font-weight: 500; }
/* The card a wide table scrolls inside: the edge is visible, so sideways scrolling reads as the table's,
   not as the page overflowing. */
/* position: relative keeps a visually hidden label inside a scrolled row within the scroller; without
   it the label's static position, far to the right, widens the page (Members on a phone). */
.table-scroll { position: relative; overflow-x: auto; margin: var(--s2) 0 var(--s5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); }
.table-scroll > table { margin: 0; border: 0; border-radius: 0; background: transparent; }
/* A table that is the body of a card runs to the card's edges; the card is its frame. */
.card > .table-scroll { margin: 0 calc(-1 * var(--card-pad)); border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.card > .table-scroll:last-child { margin-bottom: calc(-1 * var(--card-pad)); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.card > .table-scroll th:first-child, .card > .table-scroll td:first-child { padding-left: var(--card-pad); }
.card > .table-scroll th:last-child, .card > .table-scroll td:last-child { padding-right: var(--card-pad); }
.card-foot { margin: var(--s4) 0 0; }
.me-company { margin-bottom: var(--s6); }

/* ---------- forms ----------------------------------------------------------------------------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3); width: fit-content; max-width: 100%; margin: 0 0 var(--s5); padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); }
.toolbar label { margin: 0; }
.toolbar input { width: auto; display: inline-block; }
.toolbar label.check { display: flex; align-items: center; gap: var(--s2); padding-bottom: 0.5rem; }
.toolbar label.check input { width: auto; margin: 0; }
/* The forms at the foot of a section: a grid of cards, set apart from the record above by space. */
.forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: var(--s4); margin-top: var(--s6); }
.forms > .notice, .forms > .rejection, .forms > .state { grid-column: 1 / -1; }
.event-form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s5); margin: 0 0 var(--s4); min-width: 0; }
.forms > .event-form { margin: 0; }

/* A PDF-generation button next to a row — a one-field form (or none) that posts and redirects to the
   Data Room download, not a whole card like .event-form. */
.inline-form { display: inline-block; margin: 0 var(--s2) var(--s1) 0; }
.inline-form button, .inline-form input[type="submit"] { height: 28px; padding: 0 var(--s3); font-size: var(--t-meta); }
.doc-actions { white-space: nowrap; }
.event-form h3 { margin: 0 0 1.25rem; font-size: var(--t-sub); font-weight: 600; }
.event-form .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0 var(--s4); }
.event-form button[type="submit"], .event-form > button { margin-top: var(--s2); }

/* A label sits closer to its own field (s1) than to the next field (s4). */
label { display: block; margin: 0 0 var(--s4); font-size: var(--t-body); font-weight: 500; color: var(--ink); }
input, select, textarea { display: block; width: 100%; height: 36px; margin-top: var(--s2); padding: 0 0.75rem; font: inherit; font-size: var(--t-body); font-weight: normal; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; }
textarea { height: auto; padding: 0.5rem 0.75rem; }
input[type="file"] { padding: 0.35rem 0.5rem; }
select { background: var(--panel); }
input[type="date"], input[type="number"] { font-variant-numeric: tabular-nums; }
label.checkbox { display: flex; align-items: center; gap: var(--s2); }
label.checkbox input, input[type="checkbox"], input[type="radio"] { display: inline-block; width: auto; height: auto; margin: 0; accent-color: var(--primary); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
input::placeholder { color: var(--muted); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s4) var(--s5); margin: 0 0 var(--s4); }
legend { padding-inline: var(--s1); font-weight: 600; }

/* Buttons: indigo for the one main action; an outline for a secondary link (CSV, download). */
button, a.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 36px; padding: 0 var(--s4); font: inherit; font-size: var(--t-body); font-weight: 500; color: var(--primary-ink); background: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
a.button { color: var(--ink); background: transparent; border-color: var(--line-strong); }
a.button:hover { text-decoration: none; background: var(--hover); }
button.link, button.link:hover { height: auto; display: inline; background: none; border: 0; padding: 0; color: var(--accent); }
.narrow { max-width: 30rem; }

/* ---------- four states, one mechanism --------------------------------------------------------- */
/* empty · refused · warning (and the neighbouring notice) · ok. A refusal is the loudest thing on the
   screen while it is there: nothing was recorded, and the reader has to see which guard said so and
   about what — a solid red edge, a red fill, the guard's name in bold. */
.state, .notice, .rejection, .chart-empty { position: relative; margin: var(--s2) 0 var(--s5); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--radius); }
.state, .notice, .rejection { padding-left: calc(var(--s4) * 2 + 1rem); }
.state::before, .notice::before, .rejection::before {
  content: ""; position: absolute; left: var(--s4); top: 0.95rem; width: 1rem; height: 1rem;
  background-color: currentColor;
  -webkit-mask: var(--state-icon) no-repeat center / 100% 100%;
  mask: var(--state-icon) no-repeat center / 100% 100%;
}
.state--empty, .chart-empty { border-style: dashed; background: transparent; color: var(--muted); padding-left: var(--s4); }
.state--empty::before { content: none; }
.notice, .state--notice { background: var(--info-bg); border-color: var(--info-line); color: var(--ink); --state-icon: var(--icon-info); }
.notice::before, .state--notice::before { color: var(--accent); }
.notice.top, .state.top { margin-block: 0 var(--s4); }
.rejection, .state--refused { background: var(--danger-bg); border-color: var(--danger-line); border-left: 4px solid var(--danger-solid); color: var(--danger); --state-icon: var(--icon-alert); }
.rejection strong, .state--refused strong { font-weight: 700; }
.rejection code, .state--refused code { font-weight: 600; }
.rejection a, .state--refused a { color: var(--danger); text-decoration: underline; }
.state--warning { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); --state-icon: var(--icon-warn); }
.state--warning a { color: var(--warn-ink); text-decoration: underline; }
.state--ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); --state-icon: var(--icon-ok); }
.state--ok a { color: var(--ok-ink); text-decoration: underline; }

/* Status pills: rounded-full, 12 px, the status colour at ~15 %. Colour by what the status means for
   the reader: closed is green, expected is amber, missed or void is red, not applicable is quiet.
   "n/a" carries a slash, so it is reached by attribute instead of by class selector. */
.status { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: var(--t-meta); font-weight: 500; line-height: 1.4; background: var(--hover); border: 1px solid transparent; color: var(--ink-2); white-space: nowrap; }
.status-executed, .status-signed, .status-filed, .status-approved, .status-recorded, .status-notified { background: var(--ok-bg); color: var(--ok-ink); }
.status-due, .status-address_missing, .status-not_recorded { background: var(--warn-bg); color: var(--warn-ink); }
.status-overdue, .status-cancelled, .status-rejected { background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.status-pending, .status-pending_signature, .status-above { background: var(--info-bg); color: var(--info-ink); }
.status-above { font-weight: 600; }
.status-draft, .status-not_eligible, [class~="status-n/a"], .status-below { background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); }

.inline-status { display: flex; gap: var(--s1); align-items: center; }
.inline-status select, .inline-status input { width: auto; margin: 0; height: 32px; padding: 0 0.5rem; }
.inline-status button { height: 32px; padding: 0 0.75rem; }

/* ---------- charts (ekvi/api/charts.py + templates/_charts.html) ------------------------------ */
/* Inline SVG, no JavaScript. Every segment carries a .chart-N / .chart-other class that only sets
   `color`; the shape paints with fill: currentColor. The chart never computes: every figure next to
   it is the one in the table. */
.chart { margin: var(--s2) 0 var(--s5); }
.card .chart { margin: 0; }
.chart-row { margin: var(--s2) 0 var(--s4); }
.chart-row p { margin: 0 0 var(--s1); }
.chart-slice { fill: currentColor; }
.chart-1 { color: var(--chart-1); }
.chart-2 { color: var(--chart-2); }
.chart-3 { color: var(--chart-3); }
.chart-4 { color: var(--chart-4); }
.chart-5 { color: var(--chart-5); }
.chart-other { color: var(--chart-other); }

.chart-donut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); }
.donut-svg { width: 11rem; height: 11rem; flex: 0 0 auto; }
/* A thin line in the card's colour between slices, as the prototype's donut has. */
.donut-svg .chart-slice { stroke: var(--panel); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.chart-donut figcaption { flex: 1 1 14rem; min-width: 0; max-width: 30rem; }
.chart-legend { list-style: none; margin: 0; padding: 0; }
.chart-legend > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: 0.2rem 0; }
.chart-legend-label { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-legend .num { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.chart-legend-sub { list-style: none; margin: 0.2rem 0 0.2rem 1.4rem; padding: 0; flex-basis: 100%; color: var(--muted); font-size: var(--t-meta); }
.chart-legend-sub li { display: flex; gap: var(--s2); padding: 0.05rem 0; }
.chart-legend-sub .num { margin-left: auto; color: var(--muted); }
.chart-legend-inline { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s3); }
.chart-legend-inline li { display: flex; align-items: center; gap: var(--s2); }
.chart-legend-inline .num { margin-left: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-note { color: var(--muted); font-size: var(--t-meta); }
.swatch { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 3px; background: currentColor; flex: 0 0 auto; }

.chart-bar { max-width: none; }
.bar-svg { width: 100%; height: 0.875rem; display: block; background: var(--chart-track); border-radius: 999px; overflow: hidden; }
.bar-svg .chart-slice { stroke: var(--panel); stroke-width: 2px; vector-effect: non-scaling-stroke; }

.chart-history .history-svg { width: 100%; max-width: 40rem; height: auto; display: block; }
.chart-axis-label { fill: var(--muted); font-size: 10px; }
.chart-axis { stroke: var(--line); stroke-width: 1; }

/* FMV history: a step line plus one marker per valuation. */
.chart-fmv .fmv-svg { width: 100%; max-width: 40rem; height: auto; display: block; }
.fmv-baseline { stroke: var(--line); stroke-width: 1; }
.fmv-step { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.fmv-point { stroke: var(--panel); stroke-width: 1; }
.fmv-value-label { fill: var(--ink); font-size: 9px; font-variant-numeric: tabular-nums; }
/* Legend swatches echo the point's own shape, since colour alone repeats within a kind. */
.swatch.shape-square { border-radius: 0; }
.swatch.shape-diamond { border-radius: 0; transform: rotate(45deg); }

/* ---------- breakpoints ----------------------------------------------------------------------- */
/* Below 48rem the sidebar becomes a drawer behind the Menu button (a checkbox and its labels). */
@media (max-width: 48rem) {
  .shell { display: block; }
  .shell > main { padding: var(--s5) var(--s4) var(--s6); }
  .nav-toggle { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .topbar { display: flex; align-items: center; gap: var(--s3); position: sticky; top: 0; z-index: 30; padding: var(--s2) var(--s4); background: var(--sidebar); border-bottom: 1px solid var(--line); }
  .topbar .brand-words { display: none; }
  .topbar-company { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  .nav-button { display: inline-flex; align-items: center; gap: var(--s2); height: 36px; margin: 0; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; }
  .nav-toggle:focus-visible ~ .topbar .nav-button { outline: 2px solid var(--focus); outline-offset: 2px; }
  .sidebar { display: none; position: fixed; inset: 0; z-index: 50; height: auto; border-right: 0; }
  .nav-toggle:checked ~ .sidebar { display: flex; }
  .nav-close { display: grid; place-items: center; width: 36px; height: 36px; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; }
  .sidebar .global { margin-top: 0; }
  main > table { display: block; width: 100%; overflow-x: auto; }
  .forms { grid-template-columns: 1fr; }
  .card { --card-pad: var(--s4); }
  .event-form { padding: var(--s4); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .stat { padding: var(--s4); }
  :root { --t-page: 1.375rem; --t-figure: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ---------- print: the register and the extract have to be readable on paper ------------------ */
/* What prints is the record: title, the date it is computed at, the tables and their totals. The
   navigation, forms and controls are not part of it. Colour drops to an ink ramp, so a black-and-white
   printer still separates the segments of a chart. */
@media print {
  /* :root:root — doubled on purpose: it has to outweigh the theme blocks above, or a register printed
     from the dark theme comes out pale grey on white. */
  :root:root {
    color-scheme: light;
    --bg: #fff; --panel: #fff; --sidebar: #fff; --surface-2: #fff; --hover: #fff; --line: #767676; --line-strong: #000;
    --ink: #000; --ink-2: #1a1a1a; --muted: #333;
    --accent: #000; --primary: #000; --primary-ink: #fff; --focus: #000; --danger-solid: #000;
    --info-bg: #fff; --info-line: #000; --info-ink: #000;
    --ok-bg: #fff; --ok-line: #000; --ok-ink: #000;
    --warn-bg: #fff; --warn-line: #000; --warn-ink: #000;
    --danger-bg: #fff; --danger-line: #000; --danger: #000;
    --chart-1: #1a1a1a; --chart-2: #4d4d4d; --chart-3: #808080; --chart-4: #b3b3b3; --chart-5: #d9d9d9;
    --chart-other: #f2f2f2; --chart-track: #fff;
  }
  @page { margin: 14mm; }
  html { font-size: 12pt; background: #fff; }
  body { font-size: 10.5pt; }
  .sidebar, .topbar, .skip-link, .solo-head, .solo-foot, .toolbar, .forms, .notice, button, a.button, .assistant-fab, .assistant-panel { display: none; }
  .shell { display: block; }
  .shell > main, .solo > main { max-width: none; margin: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
  h2 { margin-top: var(--s5); break-after: avoid; }
  table { break-inside: auto; border-radius: 0; }
  .table-scroll, .card { border-radius: 0; overflow: visible; }
  thead { display: table-header-group; }
  tr, .stat, figure { break-inside: avoid; }
  .stats { gap: var(--s2); }
}

/* ---------- contributed by the profile package ------------------------------------------------- */
/* Superadmin console: the per-row "Edit" form opens in place, without leaving the table. */
.edit-profile-form { min-width: 16rem; margin-top: var(--s2); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }

/* === Attention screen (package `attention`, 2026-09-20) =========================================
   The semantic state classes — state-action_required / state-due_soon / state-watch / state-empty —
   come from the Severity in ekvi/core/attention.py, not from colour in the markup. */
:root {
  --state-action: var(--danger-solid);
  --state-action-ink: var(--danger);
  --state-due: var(--tone-4);
  --state-due-ink: var(--warn-ink);
  --state-watch: var(--line-strong);
  --state-ok: var(--ok-ink);
  --state-ok-bg: var(--ok-bg);
}
.lede { margin: 0 0 var(--s4); color: var(--muted); }

/* Tally: all three states are always present, including zero — "zero overdue" is an answer too. */
.tally { display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; margin: var(--s2) 0 var(--s5); padding: 0; }
.tally-item { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-left: 3px solid var(--state-watch); border-radius: var(--radius); background: var(--panel); }
.tally-n { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tally-label { color: var(--muted); font-size: var(--t-meta); font-weight: 500; }
.tally-item.state-action_required { border-left-color: var(--state-action); }
.tally-item.state-due_soon { border-left-color: var(--state-due); }

.group-head { display: flex; align-items: baseline; gap: var(--s2); margin-top: var(--s6); }
.group-head.state-action_required { color: var(--state-action-ink); }
.group-head.state-due_soon { color: var(--state-due-ink); }

/* A signal is a card with its state on the left edge; the text keeps the common left edge. */
.signals { list-style: none; margin: var(--s2) 0 var(--s4); padding: 0; }
.signal { border: 1px solid var(--line); border-left: 3px solid var(--state-watch); border-radius: var(--radius); background: var(--panel); padding: var(--s3) var(--s4); margin: 0 0 var(--s2); }
.signal.state-action_required { border-left-color: var(--state-action); background: color-mix(in srgb, var(--state-action) 6%, var(--panel)); }
.signal.state-due_soon { border-left-color: var(--state-due); background: color-mix(in srgb, var(--state-due) 6%, var(--panel)); }
.signal-title { margin: 0 0 var(--s1); font-weight: 600; }
.signal-detail { margin: 0 0 var(--s2); max-width: 80ch; color: var(--ink-2); }
.signal-due { font-weight: normal; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.signal-ground { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; font-size: var(--t-meta); color: var(--muted); }
.ground-law { color: var(--ink); font-weight: 500; }
.ground-practice::before { content: "⌁ "; }
.signal-fix { margin-left: auto; white-space: nowrap; font-weight: 500; }

/* The empty state is a result with a list of what was checked, not a grey line lost in the flow. */
.state-empty { border: 1px solid var(--ok-line); border-left: 3px solid var(--state-ok); border-radius: var(--radius); background: var(--state-ok-bg); padding: var(--s3) var(--s4); margin: var(--s4) 0; max-width: 80ch; }
.state-empty-head { margin: 0 0 var(--s2); font-weight: 600; color: var(--state-ok); }
.state-empty ul { margin: var(--s1) 0 0; padding-left: 1.2rem; color: var(--ink-2); font-size: var(--t-body); }

/* Company summary: colour marks only a non-zero count. */
td.num.state-action_required { color: var(--state-action-ink); font-weight: 600; }
td.num.state-due_soon { color: var(--state-due-ink); font-weight: 600; }
.burning { list-style: none; margin: 0; padding: 0; }
.burning li { padding: 0.1rem 0 0.1rem 0.6rem; border-left: 2px solid var(--line); }
.burning li.state-action_required { border-left-color: var(--state-action); }
.burning li.state-due_soon { border-left-color: var(--state-due); }
/* === END attention screen ====================================================================== */

/* === Round modelling screen (package `round`, 2026-09-20) ======================================
   The term sheet is one form of grouped fieldsets at the TOP of the page, because the page exists to
   change it and look again; it drops the gap .forms has at the foot of a record. */
.round-terms { margin-top: var(--s4); }
.round-terms > fieldset { min-width: 0; margin: 0; background: var(--panel); }
.round-terms > p { grid-column: 1 / -1; margin: 0; }
.round-terms legend { font-size: var(--t-sub); }
/* === END round modelling screen ================================================================ */

/* === UBO notifications and late filings (packages `ubo`, `hardening`, 2026-09-20) ================
   A notification or a form submitted after its deadline must not take the green of "met on time":
   the deadline did pass, and no later act un-passes it. Done but late is the warning tone. */
.status-notified_late, .status-filed_late { background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; }
/* === END UBO notifications ===================================================================== */

/* === IFRS 2 expense report (package `ifrs2`, 2026-09-20) =======================================
   A subtotal is neither a body row nor the <tfoot> total, and a group heading inside a <tbody> is
   neither a <thead> cell nor a value. */
tr.group > th { background: var(--surface-2); border-bottom: 1px solid var(--line-strong); font-weight: 600; }
tr.subtotal > * { border-top: 1px solid var(--line-strong); background: var(--surface-2); font-weight: 600; }
/* A grant nobody has valued: the loudest chip in the table — its line has no amounts at all, and every
   total on the page is smaller than the truth by exactly that grant. */
.status-missing_fair_value, .status-no_valuation_on_grant_date { background: var(--danger-bg); color: var(--danger); font-weight: 600; }
@media print {
  /* On paper the scroller clips: headings wrap instead, and the report drops a type step. */
  .ifrs2-report .ifrs2-wide { overflow: visible; }
  .ifrs2-report { font-size: 9pt; }
  .ifrs2-report th { white-space: normal; }
  .ifrs2-report tr.group, .ifrs2-report tr.subtotal { break-inside: avoid; }
}
/* === END IFRS 2 expense report ================================================================= */

/* === Ekvi AI panel (package `chat-popup`, 2026-09-23) =============================================
   The chat over the current page, opened by static/assistant.js; without the script it is never shown
   and the button stays a link to the chat page. It floats over the content, so it has the button's
   shadow and a strong edge; the page under it stays usable (a non-modal dialog). On a phone it is the
   whole screen. */
.assistant-fab[hidden], .assistant-panel[hidden] { display: none; }
.assistant-panel { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 45; display: flex; flex-direction: column; width: min(400px, calc(100vw - 2 * var(--s5))); height: min(600px, calc(100vh - 2 * var(--s5))); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-card); box-shadow: 0 12px 40px rgb(0 0 0 / 45%); /* floats over the content */ }
.assistant-panel-head { display: flex; align-items: center; gap: var(--s1); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
.assistant-panel-head h2 { display: flex; align-items: center; gap: var(--s2); flex: 1; margin: 0; font-size: var(--t-sub); }
.assistant-panel-head h2 .icon { color: var(--accent); }
.icon-button, a.icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); }
.icon-button:hover, a.icon-button:hover { background: var(--hover); border-color: var(--line); text-decoration: none; }
.assistant-panel-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s4) var(--s4) 0; }
.assistant-panel-body h2 { margin: 0 0 var(--s3); font-size: var(--t-sub); }
.assistant-panel-body .suggestions { flex-direction: column; align-items: stretch; }
.assistant-panel-body .suggestions a.button { align-self: flex-start; height: auto; min-height: 32px; margin-bottom: var(--s2); white-space: normal; }
.assistant-panel-body .chat .msg { max-width: none; }
.assistant-panel-body .chat .msg.user { max-width: 85%; }
.assistant-panel-body .chat .drafts a.button { justify-content: flex-start; }
.assistant-panel-body .msg.pending { color: var(--muted); animation: assistant-wait 1.2s ease-in-out infinite alternate; /* the answer is on its way */ }
@keyframes assistant-wait { from { opacity: 1; } to { opacity: 0.55; } }
/* The question box stays in view at the foot of the conversation while it scrolls. */
.assistant-panel-body .ask { position: sticky; bottom: 0; margin: 0 calc(-1 * var(--s4)); padding: var(--s3) var(--s4); background: var(--bg); border-top: 1px solid var(--line); }
.assistant-panel-body .ask textarea { flex: 1; resize: none; }
.assistant-panel-body .rejection { margin-top: 0; }
.assistant-foot { margin: var(--s2) 0 var(--s3); font-size: var(--t-meta); }
.assistant-status { margin: 0; padding: 0 var(--s4); color: var(--muted); font-size: var(--t-meta); }
.assistant-status:not(:empty) { padding-block: var(--s2); border-top: 1px solid var(--line); }
@media (max-width: 48rem) {
  .assistant-panel { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none; }
  .assistant-fab { right: var(--s4); bottom: var(--s4); }
}
/* === END Ekvi AI panel ========================================================================= */

/* === Fund pages (package `fund-portal`, 2026-09-24) ==============================================
   The J-curve: TVPI and DPI at each quarter-end as polylines, the break-even multiple as a dashed rule.
   The same chart classes and palette as the company charts; the fund tables and forms reuse the cards. */
.chart-lines .lines-svg { width: 100%; max-width: 40rem; height: auto; display: block; }
.lines-path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lines-point { stroke: var(--panel); stroke-width: 1; }
.lines-unit { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 3; }
.swatch.swatch-dashed { height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--line-strong); }
/* A multiple's unit is a formula ("(D + NAV) / PI"): on a phone it wraps under the value rather than
   pushing the page sideways. */
.stat .value .unit { white-space: normal; }
/* A preview of an allocation: what the rule would give each partner, and nothing is recorded by it. */
.preview { border-style: dashed; }
/* The signals of a fund reuse the attention screen's classes; a partner's own page keeps the cards. */
.lp-fund { margin-bottom: var(--s6); }
/* Two global groups at the foot of the sidebar: the first takes the slack, the second follows it. */
.sidebar .global + .global { margin-top: 0; }
/* === END fund pages ============================================================================ */
/* Calendar feeds on the Filings page (package `ics-revoke`): the address is a long signed URL that is
   copied, not read, so it gets the full cell in the mono face rather than wrapping the table wide. */
.feed-url { display: block; width: 100%; min-width: 16rem; margin-top: var(--s1); font-family: var(--mono); font-size: 0.85em; }