/* =========================================================
   MQ Klinikatlas — styles, design direction A "Ledger"
   Tokens live on <html>: light by default, dark via prefers-color-scheme or an explicit
   data-theme="dark|light" (theme toggle, ?theme=). No external requests (CSP).
   ========================================================= */

/* ---------- 0. Fonts (self-hosted: CSP font-src 'self') ----------
   Inter is variable (one file per subset covers 400–600); IBM Plex Mono is static 400/500.
   Subsets latin + latin-ext; other scripts fall back to the system font. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- 1. Tokens: colour, light ----------
   Hairlines instead of shadows; three greys (canvas, surface, sunken sidebar); one blue accent for
   action, focus and selection only; status colours always come with an icon. Contrast: text on
   --surface unless stated. */
:root,
[data-theme="light"] {
  color-scheme: light;
  --canvas:          #F4F6F8;  /* app background, top bar, composer dock */
  --surface:         #FFFFFF;  /* cards, tables, inputs */
  --surface-sunken:  #EEF1F4;  /* sidebar, table header, figure background */
  --surface-hover:   #E8ECF0;
  --surface-active:  #DEE3E9;  /* pressed, current chat, user message */
  --surface-inverse: #0F1720;  /* toast */
  --line:            #DEE3E8;  /* hairlines */
  --line-strong:     #C6CED6;  /* button borders */
  --line-input:      #75818D;  /* form boundaries 4.0:1 (WCAG 1.4.11) */
  --ink:             #0F1720;  /* 18.0:1 */
  --ink-2:           #3A4653;  /* 9.6:1 */
  --ink-3:           #58656F;  /* 6.0:1 · 5.3:1 on --surface-sunken · 4.6:1 on --surface-active */
  --ink-disabled:    #98A2AC;
  --ink-inverse:     #FFFFFF;
  --accent:          #1458C8;  /* 6.4:1 */
  --accent-hover:    #0F48A8;
  --accent-active:   #0B3A88;
  --accent-subtle:   #E9F0FB;
  --accent-muted:    #C4D6F3;
  --accent-ink:      #0F48A8;  /* text on --accent-subtle 7.3:1 */
  --on-accent:       #FFFFFF;
  --ok:   #1B7A3E; --ok-subtle:   #E6F4EA; --ok-line:   #9DD2AF;
  --warn: #A14F00; --warn-subtle: #FDF0E3; --warn-line: #EDB074;
  --err:  #C42A24; --err-subtle:  #FCECEB; --err-line:  #F0ACA8;
  --focus:           #1458C8;
  --map-mid-ink:     #0F1720;  /* value label on map class c2 (5.0:1) */
  --data-2:          #D35F0A;  /* grouped bars, series 2 after --accent: orange 3.9:1 (fill only, no text) */
  --data-3:          #58656F;  /* series 3: neutral 6.0:1 */
  --backdrop:        rgba(15, 23, 32, .42);
  --skeleton-a:      #EAEEF2;
  --skeleton-b:      #F6F8FA;
  --shadow-sm: 0 1px 2px rgba(15, 23, 32, .06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 32, .14), 0 2px 6px rgba(15, 23, 32, .06);
}

/* ---------- 1b. Tokens: colour, dark (explicit choice) ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --canvas:          #0E1319;
  --surface:         #161C23;
  --surface-sunken:  #0A0E13;
  --surface-hover:   #1E2630;
  --surface-active:  #28323D;
  --surface-inverse: #E4E9EE;
  --line:            #262F39;
  --line-strong:     #374350;
  --line-input:      #6F7C89;  /* 4.0:1 on --surface */
  --ink:             #E4E9EE;  /* 14.0:1 */
  --ink-2:           #B4BEC8;  /* 9.1:1 */
  --ink-3:           #8E9AA6;  /* 6.0:1 · 5.3:1 on --surface-hover */
  --ink-disabled:    #56626E;
  --ink-inverse:     #0E1319;
  --accent:          #6FA8F5;  /* 7.0:1 */
  --accent-hover:    #8DBBF8;
  --accent-active:   #AACCFA;
  --accent-subtle:   #15243A;
  --accent-muted:    #22426F;
  --accent-ink:      #8DBBF8;
  --on-accent:       #06192F;  /* 7.2:1 on --accent */
  --ok:   #5FC78B; --ok-subtle:   #10261B; --ok-line:   #245C3C;
  --warn: #F0A44E; --warn-subtle: #2A1D0F; --warn-line: #75491C;
  --err:  #F28B82; --err-subtle:  #2C1716; --err-line:  #702D29;
  --focus:           #8DBBF8;
  --map-mid-ink:     #0E1319;
  --data-2:          #F2994A;  /* 7.7:1 */
  --data-3:          #8E9AA6;  /* 6.0:1 */
  --backdrop:        rgba(0, 0, 0, .6);
  --skeleton-a:      #1B222B;
  --skeleton-b:      #263039;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
}

/* ---------- 1c. Tokens: dark by system preference, while no choice is stored ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas:#0E1319; --surface:#161C23; --surface-sunken:#0A0E13; --surface-hover:#1E2630;
    --surface-active:#28323D; --surface-inverse:#E4E9EE; --line:#262F39; --line-strong:#374350;
    --line-input:#6F7C89; --ink:#E4E9EE; --ink-2:#B4BEC8; --ink-3:#8E9AA6; --ink-disabled:#56626E;
    --ink-inverse:#0E1319; --accent:#6FA8F5; --accent-hover:#8DBBF8; --accent-active:#AACCFA;
    --accent-subtle:#15243A; --accent-muted:#22426F; --accent-ink:#8DBBF8; --on-accent:#06192F;
    --ok:#5FC78B; --ok-subtle:#10261B; --ok-line:#245C3C; --warn:#F0A44E; --warn-subtle:#2A1D0F;
    --warn-line:#75491C; --err:#F28B82; --err-subtle:#2C1716; --err-line:#702D29; --focus:#8DBBF8; --map-mid-ink:#0E1319;
    --data-2:#F2994A; --data-3:#8E9AA6;
    --backdrop:rgba(0,0,0,.6); --skeleton-a:#1B222B; --skeleton-b:#263039;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 16px 40px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  }
}

/* ---------- 2. Tokens: type, space, radius, size, motion ---------- */
:root {
  --font-ui:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-2xs: 11px; --leading-2xs: 16px;  /* group labels, uppercase */
  --text-xs:  12px; --leading-xs:  16px;  /* meta, badges, captions */
  --text-sm:  13px; --leading-sm:  20px;  /* dense UI, tables, nav */
  --text-md:  14px; --leading-md:  22px;  /* UI default */
  --text-lg:  15px; --leading-lg:  24px;  /* answer prose, composer */
  --text-xl:  17px; --leading-xl:  24px;  /* answer h2 */
  --text-3xl: 26px; --leading-3xl: 34px;  /* empty-state headline */
  --text-num-sm: 12.5px;                  /* Plex Mono in tables (optically 13px Inter) */
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --tracking-tight: -0.015em; --tracking-caps: 0.06em;
  --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-xs: 4px;   /* chips, kbd */
  --radius-sm: 6px;   /* buttons, inputs, nav items */
  --radius-md: 8px;   /* cards, tables, notes */
  --radius-lg: 12px;  /* composer, view card */
  --sidebar-w: 288px;
  --rail-w: 56px;
  --topbar-h: 64px;       /* header and sidebar head share the hairline */
  --content-w: 860px;
  --control-sm: 28px;     /* icon buttons in dense rows (≥ 24 px, WCAG 2.5.8) */
  --control-md: 34px;     /* default buttons */
  --target-touch: 44px;   /* coarse pointer, phone */
  /* Compact data boxes: ~10 rows show, then the box scrolls (half a row peeks as a cue). Row heights
     follow the type and cell padding, so the cap tracks them. */
  --rows-visible: 10.5;
  --cell-py: 5px; --cell-py-head: 6px; --cell-px: 10px;
  --table-head-h: calc(var(--leading-xs) + 2 * var(--cell-py-head) + 1px);
  --table-row-h: calc(var(--leading-sm) + 2 * var(--cell-py) + 1px);
  --table-box-max: min(calc(var(--table-head-h) + var(--rows-visible) * var(--table-row-h)), 65vh);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; --dur-4: 600ms; /* dur-4: long paths and the start page count */
}

/* ---------- 3. Base ---------- */
html {
  background: var(--canvas);
  /* Keep focused or revealed content clear of the sticky top bar and composer (WCAG 2.4.11). */
  scroll-padding-block: calc(var(--topbar-h) + var(--space-4)) calc(var(--composer-h, 148px) + var(--space-4));
}
html:has(> body.is-empty) { scroll-padding-block-end: var(--space-4); }
.app, .app *, .app *::before, .app *::after { box-sizing: border-box; }
body.app {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--canvas); color: var(--ink);
  font-family: var(--font-ui); font-size: var(--text-md); line-height: var(--leading-md);
  font-feature-settings: "cv11", "ss03"; -webkit-font-smoothing: antialiased;
}
.app [hidden] { display: none !important; }
:where(.app) :is(button, input, textarea, select) { font: inherit; color: inherit; } /* low specificity: component classes set sizes */
:where(.app) button { cursor: pointer; }
.app :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.app .tnum, .app td, .app th { font-variant-numeric: tabular-nums; }
.app .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.copy-buffer { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; } /* clipboard.js legacy copy, appended to body */
.app svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app svg.i-sm { width: 14px; height: 14px; }
.app svg.i-xs { width: 12px; height: 12px; }
.app svg.i-lg { width: 20px; height: 20px; }
.app .chev { color: var(--ink-3); transition: transform var(--dur-2); }
.app [aria-expanded="true"] > .chev { transform: rotate(180deg); }

.skip-link { position: absolute; left: 8px; top: -48px; z-index: 70; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.skip-link:focus { top: 8px; }

/* ---------- 4. Buttons, badges ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1; white-space: nowrap;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.btn:hover { background: var(--surface-hover); }
.btn:active { background: var(--surface-active); }
.btn:disabled { background: var(--surface-sunken); border-color: var(--line); color: var(--ink-disabled); cursor: not-allowed; }
.btn--ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-hover); color: var(--ink); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--primary:active { background: var(--accent-active); border-color: var(--accent-active); }
.btn--danger { background: var(--err); border-color: var(--err); color: var(--surface); }
.btn--danger:hover { background: var(--err); filter: brightness(1.08); }

.icon-btn {
  display: inline-grid; place-items: center; flex: none; width: var(--control-sm); height: var(--control-sm); padding: 0;
  border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--ink-3);
  transition: background var(--dur-1), color var(--dur-1);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--ink); }
.icon-btn:active { background: var(--surface-active); }
.icon-btn[aria-pressed="true"] { background: var(--accent-subtle); color: var(--accent-ink); }

kbd {
  font-family: var(--font-ui); font-size: var(--text-2xs); line-height: 16px; padding: 0 5px;
  border-radius: var(--radius-xs); border: 1px solid var(--line-strong); border-bottom-width: 2px;
  background: var(--surface); color: var(--ink-2);
}

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: 24px; padding: 0 var(--space-2);
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface);
  font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-medium); color: var(--ink-2); white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge--live { color: var(--ok); border-color: var(--ok-line); background: var(--ok-subtle); }

/* ---------- 5. Shell (board ShellD): sidebar column / rail ≥ 900 px, drawer below; main column ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 20; width: var(--sidebar-w); overflow: hidden;
  display: flex; flex-direction: column; background: var(--canvas); border-right: 1px solid var(--line);
}
.sidebar-rail .sidebar { width: var(--rail-w); }
/* The dock toggle keeps one place: right-aligned, at the rail's centre once collapsed. */
.sidebar-head {
  flex: none; display: flex; align-items: center; gap: var(--space-2); height: var(--topbar-h);
  padding: 0 calc((var(--rail-w) - var(--control-md)) / 2) 0 var(--space-6); border-bottom: 1px solid var(--line);
}
.sidebar-head .brand-logo { min-width: 0; overflow: hidden; }
.sidebar-head .icon-btn { width: var(--control-md); height: var(--control-md); margin-left: auto; }
/* MEDIQON logo: one image per theme (light default; dark via data-theme or the system setting). */
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}
.brand-logo img { height: 20px; width: auto; }
/* The "Q" of the logo: the wordmark scaled to the mark's height, cropped to its left square. */
.brand-mark { width: 20px; height: 20px; flex: none; overflow: hidden; }
.brand-mark img { height: 100%; width: auto; max-width: none; object-fit: cover; object-position: left center; }
.sidebar-close { display: none; }

.sidebar-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: var(--space-3) var(--space-4) 0; }
.side-new {
  flex: none; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink);
  font-size: var(--text-md); font-weight: var(--weight-medium); text-align: left; white-space: nowrap;
}
.side-new svg { color: var(--accent); }
.side-new:hover { background: var(--surface-sunken); }
.sidebar-rail .sidebar-body { padding-inline: var(--space-2); }
.sidebar-rail .side-new { width: 40px; height: 40px; padding-left: var(--space-3); border-radius: var(--radius-md); }

.chat-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: var(--space-2); }
.chat-nav-group {
  margin: var(--space-5) var(--space-2) var(--space-1); font-size: var(--text-2xs); line-height: var(--leading-2xs); white-space: nowrap;
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3);
}
.chat-group:first-child .chat-nav-group { margin-top: var(--space-3); }
.chat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.chat-item { display: flex; align-items: center; border-radius: var(--radius-sm); transition: background var(--dur-1); }
.chat-item:hover, .chat-item:focus-within { background: var(--surface-sunken); }
.chat-item.is-active { background: var(--surface-active); }
.chat-open {
  flex: 1 1 auto; min-width: 0; min-height: 36px; padding: var(--space-2); border: 0; border-radius: var(--radius-sm);
  background: transparent; text-align: left; font-size: var(--text-md); line-height: var(--leading-sm); color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item:hover .chat-open, .chat-item.is-active .chat-open { color: var(--ink); }
.chat-item.is-active .chat-open { font-weight: var(--weight-semibold); }
/* The list scrolls (overflow clips), so its focus rings are drawn inside the controls. */
.chat-open:focus-visible, .chat-delete:focus-visible { outline-offset: -2px; }
.chat-delete {
  flex: none; display: inline-grid; place-items: center; width: var(--control-sm); height: var(--control-sm); margin-right: var(--space-1); padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-3); opacity: 0; transition: opacity var(--dur-1);
}
.chat-item:hover .chat-delete, .chat-item:focus-within .chat-delete, .chat-item.is-active .chat-delete { opacity: 1; }
.chat-delete:hover { color: var(--err); background: var(--surface-hover); }
@media (hover: none) { .chat-delete { opacity: 1; } }
.chat-list-empty { margin: var(--space-3) var(--space-2); font-size: var(--text-sm); color: var(--ink-3); }

.sidebar-foot { flex: none; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-6) var(--space-5); border-top: 1px solid var(--line); }
.sidebar-note { margin: 0; font-size: var(--text-xs); line-height: 17px; color: var(--ink-3); }
.sidebar-clear {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: 24px; padding: 0;
  border: 0; background: transparent; font-size: var(--text-xs); color: var(--ink-3);
}
.sidebar-clear:hover { color: var(--err); }
.clear-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.clear-confirm > span { flex-basis: 100%; }
.clear-confirm .btn { min-height: var(--control-sm); }

/* Rail foot: the signed-in user's initials, pinned to the bottom (outside the flow: no reflow while folding). */
.rail-foot { position: absolute; left: 0; bottom: 0; width: var(--rail-w); display: flex; justify-content: center; padding-bottom: var(--space-4); }
.rail-avatar {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-active); color: var(--ink); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: .02em;
}

/* Open column vs rail. Collapsing: labels fade out (120 ms) while the width folds (260 ms); expanding: they fade in
   from 160 ms (180 ms). `shell-ready` (app.js) keeps a stored rail from animating in on load. */
.side-rail { display: none; }
.sidebar-rail .side-full { display: none; }
.sidebar-rail .side-rail { display: flex; }
.shell-ready.has-sidebar :is(.sidebar, .main-col) { transition: width var(--dur-3) var(--ease-out), margin-left var(--dur-3) var(--ease-out); }
.shell-ready.has-sidebar :is(.sidebar-body, .side-new) { transition: padding var(--dur-3) var(--ease-out), background var(--dur-1); }
.shell-ready.has-sidebar .side-full { transition: opacity var(--dur-2) var(--ease-out) 160ms, display var(--dur-2) 160ms allow-discrete; }
.shell-ready.has-sidebar.sidebar-rail .side-full { opacity: 0; transition: opacity var(--dur-1) var(--ease-out), display var(--dur-1) allow-discrete; }
@starting-style {
  .shell-ready.has-sidebar:not(.sidebar-rail) .side-full { opacity: 0; }
}
.sidebar-backdrop { position: fixed; inset: 0; z-index: 40; background: var(--backdrop); }

.main-col { min-height: 100vh; min-height: 100dvh; min-width: 0; display: flex; flex-direction: column; container: col / inline-size; }
.has-sidebar .main-col { margin-left: var(--sidebar-w); }
.has-sidebar.sidebar-rail .main-col { margin-left: var(--rail-w); }

/* Drawer: below 900 px (app.js `wideLayout`), modal over the page. */
.drawer-open .sidebar { z-index: 50; width: min(320px, 86vw); box-shadow: var(--shadow-lg); animation: mq-drawer var(--dur-3) var(--ease-out) both; }
.drawer-open .sidebar-head { padding-inline: var(--space-4) var(--space-2); }
.drawer-open .sidebar-close { display: inline-grid; }
.drawer-open .sidebar-dock { display: none; }
.drawer-open { overflow: hidden; }

/* ---------- 6. Top bar: meta line over the chat title, tools right; 64 px in every sidebar state ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--space-4);
  height: var(--topbar-h); padding: 0 var(--space-8); background: var(--canvas); border-bottom: 1px solid var(--line);
}
.topbar-menu { display: none; }
.topbar-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.topbar-meta {
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--leading-2xs); margin: 0; overflow: hidden; white-space: nowrap;
  font-size: var(--text-2xs); line-height: var(--leading-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3);
}
.topbar-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.meta-live, .meta-offline { display: inline-flex; align-items: center; gap: var(--space-1-5); font-weight: var(--weight-semibold); }
.meta-live { color: var(--ok); }
.meta-offline { color: var(--warn); }
.topbar-meta .sep { flex: none; width: 1px; height: 10px; background: var(--line-strong); }
.topbar-meta > span:not(.sep, .meta-live, .meta-offline) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.meta-live, .meta-offline { flex: none; }
.topbar-title {
  margin: 0; font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-title.is-idle { color: var(--ink-3); font-weight: var(--weight-medium); }
.topbar-tools { flex: none; display: flex; align-items: center; gap: var(--space-1); }
.topbar-tools .icon-btn { width: var(--control-md); height: var(--control-md); }
/* The theme icon itself shows the state (board ShellD): no pressed fill in the header. */
.topbar-tools .icon-btn[aria-pressed="true"] { background: transparent; color: var(--ink-2); }
.topbar-tools .icon-btn[aria-pressed="true"]:hover { background: var(--surface-hover); color: var(--ink); }

.account { display: flex; align-items: center; gap: var(--space-2); min-width: 0; margin-left: var(--space-2); padding-left: var(--space-3); border-left: 1px solid var(--line); }
.account-name { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: var(--text-sm); }

/* ---------- 6b. Login (js/auth.js): replaces the app while signed out ---------- */
.is-login :is(.skip-link, .sidebar, .sidebar-backdrop, .main-col, .toast) { display: none !important; }
.app:not(.is-login) > .login { display: none; }
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: var(--space-4); padding: var(--space-6); }
.login-card {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8) var(--space-6);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm);
}
.login-logo img { width: 132px; height: auto; }
.login-title { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-semibold); }
.login-label { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-2); }
.login-input {
  height: var(--control-md); padding: 0 var(--space-3); border: 1px solid var(--line-input); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
.login-input[aria-invalid="true"] { border-color: var(--err); }
.login-message { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-sunken); color: var(--ink-2); font-size: var(--text-sm); }
.login-message.is-error { border-color: var(--err-line); background: var(--err-subtle); color: var(--err); }
.login-submit { margin-top: var(--space-4); }

/* ---------- 6c. Footer links (js/site-links.js): under the login card and the composer ---------- */
.site-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding: 0 var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); }
.site-link { color: var(--ink-3); text-decoration: none; }
.site-link:hover { color: var(--ink-2); text-decoration: underline; }

/* ---------- 7. Main, empty state ---------- */
.main { flex: 1 1 auto; width: 100%; max-width: var(--content-w); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-8); }
.is-empty .main { justify-content: center; max-width: 1088px; }

.empty { width: 100%; max-width: 1040px; margin: 0 auto; padding: 3vh 0 var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
/* Hero copy, figures and question cards: board WowEmpty (Wow v1). */
.empty-eyebrow { margin: 0 0 10px; font-size: var(--text-2xs); line-height: var(--leading-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-ink); }
.empty-title { margin: 0 0 var(--space-3); max-width: 18ch; font-size: 34px; line-height: 40px; font-weight: var(--weight-semibold); letter-spacing: -0.025em; text-wrap: pretty; }
.empty-lead { margin: 0; max-width: 52ch; font-size: var(--text-lg); line-height: var(--leading-lg); color: var(--ink-2); text-wrap: pretty; }
/* Hero: text and figures left, the stylised Germany map right (decoration; hidden on phones). */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-8); align-items: center; }
.figs { list-style: none; margin: 28px 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); }
.fig { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fig-n { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 34px; line-height: 40px; font-weight: var(--weight-medium); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.fig-l { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.de-map { margin: 0; width: 260px; justify-self: end; }
.de-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.de-outline { fill: none; stroke: var(--line-input); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.de-dots { opacity: .55; }
.de-dots-pat circle { fill: var(--accent); }
.de-lit { clip-path: inset(100% 0 0 0); }
.de-beam { fill: var(--accent); opacity: 0; }
.de-cap { margin: var(--space-1-5) 0 0; font-size: var(--text-2xs); line-height: 14px; color: var(--ink-3); text-align: right; }
.hero-composer-slot { display: flex; }
.hero-composer-slot > .composer { flex: 1 1 auto; }

.examples-h { margin: 0 0 10px; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-medium); color: var(--ink-3); }
.examples { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-3); }
.examples > li { display: flex; }
.example {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--space-1-5) 10px;
  border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); text-align: left;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.example:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.example:active { background: var(--surface-hover); }
.example-kicker { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-ink); }
.example-text { font-size: var(--text-sm); line-height: 18px; color: var(--ink); overflow-wrap: break-word; }
/* With a topic icon: icon left over both lines, kicker and question right. */
.example.has-ico { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--space-3); align-items: start; align-content: start; padding: 14px var(--space-4); }
.example.has-ico .example-kicker { margin-bottom: 2px; }
.example-ico { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-sunken); display: grid; place-items: center; color: var(--accent); }
.app .example-ico svg.i { width: 18px; height: 18px; }

/* Trust line: verification, Datenbasis, read-only access. An open Datenbasis takes its own row. */
.trust { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); }
.trust > li { display: flex; align-items: center; gap: var(--space-2); min-height: 24px; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-2); }
.trust > li > svg { color: var(--ok); }
.trust > li:has(> .databasis[open]) { flex-basis: 100%; }
.trust .databasis-summary { margin-left: 0; }
.chip-sample { display: inline-flex; align-items: center; gap: 4px; padding: 0 var(--space-1-5); border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--ink-3); font-weight: var(--weight-medium); }
.chip-sample svg { color: var(--ok); }

/* Datenbasis (empty state): a quiet disclosure line, not a panel. */
.databasis { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); }
.databasis-summary {
  display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: 24px; padding: 0 var(--space-1-5);
  margin-left: calc(-1 * var(--space-1-5)); border-radius: var(--radius-sm); cursor: pointer; list-style: none;
}
.databasis-summary::-webkit-details-marker { display: none; }
.databasis-summary:hover { background: var(--surface-hover); color: var(--ink-2); }
.databasis-label { color: var(--ink-2); font-weight: var(--weight-medium); }
.databasis[open] .chev { transform: rotate(180deg); }
.databasis-body { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); margin-top: var(--space-3); }
.databasis-body h4 { margin: 0 0 var(--space-1-5); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ink-3); }
.databasis-body ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); }
.databasis-body li { display: flex; gap: var(--space-2); align-items: center; }
.databasis-body .yes { color: var(--ok); }
.databasis-body .no { color: var(--ink-3); }
.databasis-body li.no-text { color: var(--ink-2); }

/* ---------- 8. Conversation, messages ---------- */
.conversation { display: flex; flex-direction: column; gap: var(--space-8); }
.conversation:empty { display: none; }
.msg-user {
  align-self: flex-end; max-width: min(640px, 82%); padding: 10px 14px;
  border-radius: 12px 12px 4px 12px; background: var(--surface-active); color: var(--ink);
  font-size: var(--text-md); line-height: var(--leading-md);
}
.msg-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-filters { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; } /* dormant: no user-set filters today */
.msg-filter { padding: 0 8px; border-radius: var(--radius-xs); font-size: var(--text-xs); line-height: 20px; background: var(--surface); }

.turn { display: flex; flex-direction: column; gap: var(--space-4); animation: mq-in var(--dur-2) var(--ease-out) both; }
.turn-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.turn-author { font-weight: var(--weight-semibold); }
.turn-usage {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 var(--space-1-5); margin-left: calc(-1 * var(--space-1-5));
  border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-3); font-size: var(--text-xs);
}
.turn-usage:hover { background: var(--surface-hover); color: var(--ink-2); }
.usage-list {
  list-style: none; margin: calc(-1 * var(--space-2)) 0 0; padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
  font-family: var(--font-num); font-size: var(--text-num-sm); line-height: 18px; color: var(--ink-2); overflow-wrap: anywhere;
}

.sk { height: 12px; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--skeleton-a) 0%, var(--skeleton-b) 50%, var(--skeleton-a) 100%); background-size: 200% 100%; animation: mq-shimmer 1.4s linear infinite; }
.answer-wait { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.spin { animation: mq-spin .9s linear infinite; }
.turn-note { margin: 0; font-size: var(--text-sm); color: var(--ink-3); font-style: italic; }

/* The data card while it builds (assistant-turn.js cardWait): title from `frage_kurz`, skeleton rows until the real
   card replaces it; the real rows then rise staggered (`is-arriving`, Motion). */
.data-card.is-building .data-meta { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--accent-ink); }
.data-card.is-building .data-meta svg { color: var(--accent); }
.sk-rows { list-style: none; margin: 0; padding: var(--space-2) var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.sk-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); align-items: center; gap: var(--space-3); min-height: 20px; }
.sk-row .sk-bar { display: flex; align-items: center; gap: var(--space-1-5); }
.sk-row .sk-bar .sk { height: 14px; border-radius: 2px; }

/* ---------- 9. Analyse (analysis.js, boards Analyse1Schritte, Analyse2Debug): one head line for everyone, folded;
   the steps on demand, a line joining their rings (accent up to the last settled step, it grows to a new ring);
   the head ring pulses three times per new step. Debug mode only adds content inside a step's body. ---------- */
.an { position: relative; display: flex; flex-direction: column; font-size: var(--text-sm); line-height: var(--leading-sm); }
.an-head {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 32px; margin: 0; padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); text-align: left; font-size: var(--text-sm); line-height: var(--leading-sm);
}
.an-head:hover { background: var(--surface-hover); color: var(--ink); }
.an-head:focus-visible, .an-step-head:focus-visible { outline-offset: -2px; }
.an-head[aria-disabled="true"] { cursor: default; }
.an-head[aria-disabled="true"]:hover { background: transparent; color: var(--ink-2); }
.an-head[aria-disabled="true"] .chev { visibility: hidden; }
.an-ring { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--ink-3); background: var(--surface); }
.app .an-ring svg.i { width: 11px; height: 11px; stroke-width: 2; }
.an-ring::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; transform: scale(.6); pointer-events: none; }
.is-running > .an-head .an-ring, .an-step.is-running .an-ring { border-color: var(--accent-muted); color: var(--accent); }
.an-ring.is-pulse::after, .an-step.is-running .an-ring::after { animation: mq-pulse 900ms var(--ease-out) 3; }
.is-done > .an-head .an-ring, .an-step.is-done .an-ring { border-color: var(--ok); background: var(--ok-subtle); color: var(--ok); }
.is-error > .an-head .an-ring, .an-step.is-error .an-ring { border-color: var(--err); background: var(--err-subtle); color: var(--err); }
.an-title { font-weight: var(--weight-medium); color: var(--ink); }
.is-running > .an-head .an-title { font-weight: var(--weight-regular); color: var(--accent-ink); }
.an-meta { color: var(--ink-3); white-space: nowrap; }
.an-meta .fail { color: var(--err); }
.an-time { font-family: var(--font-num); font-size: var(--text-num-sm); font-variant-numeric: tabular-nums; }
.an-head .chev { margin-left: auto; }
.an-steps { position: relative; list-style: none; margin: var(--space-1) 0 0; padding: 0; animation: mq-in var(--dur-2) var(--ease-out) both; }
.an-steps::before { content: ""; position: absolute; left: 16px; top: -20px; height: 36px; width: 2px; border-radius: 1px; background: var(--accent); }
.an-step { position: relative; }
.an-step:not(:last-child)::before {
  content: ""; position: absolute; left: 16px; top: 16px; bottom: -16px; width: 2px; border-radius: 1px; background: var(--line-strong);
  transform-origin: top; animation: mq-rise var(--dur-3) var(--ease-out) both;
}
.an-step.is-done:not(:last-child)::before, .an-step.is-error:not(:last-child)::before { background: var(--accent); }
.an-step-head {
  position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 16px; column-gap: 10px; align-items: center;
  width: 100%; min-height: 32px; padding: 4px var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent;
  text-align: left; color: var(--ink); font-size: var(--text-sm); line-height: var(--leading-sm);
}
.an-step-head:hover { background: var(--surface-hover); }
.an-step-head[aria-disabled="true"] { cursor: default; }
.an-step-head[aria-disabled="true"]:hover { background: transparent; }
.an-step-main { display: flex; flex-direction: column; min-width: 0; }
.an-step-label { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.an-step.is-running .an-step-label { font-weight: var(--weight-regular); color: var(--accent-ink); }
.an-step-sum { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.an-step.is-error .an-step-sum { color: var(--err); }
.an-step-dur { font-family: var(--font-num); font-size: var(--text-num-sm); font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; }
.an-step.is-running .an-step-dur { color: var(--accent-ink); }
.an-step.is-flash > .an-step-head { animation: mq-flash 1.6s var(--ease-out) both; }
.an-step-body {
  display: flex; flex-direction: column; gap: var(--space-3); margin: 2px 0 var(--space-2) 36px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); animation: mq-in var(--dur-2) var(--ease-out) both;
}
.an-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--space-4); margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); }
.an-facts dt { color: var(--ink-3); }
.an-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.an-note { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-2); }
.an-note svg { flex: none; margin-top: 1px; color: var(--warn); }
.an-note.is-err svg { color: var(--err); }
.an-note strong { font-weight: var(--weight-semibold); }
.an-sql-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); }
.an-sql {
  margin: 0; max-height: calc(22 * 18px + 16px); overflow: auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunken);
  font-family: var(--font-num); font-size: var(--text-xs); line-height: 18px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
}
.an-sql:focus-visible, .an-table:focus-visible { outline-offset: -2px; }
.an-raw { margin: 0; padding: 6px 10px; border-left: 2px solid var(--line-strong); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-2); overflow-wrap: anywhere; }
.an-table { max-width: 100%; max-height: 330px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.an-table table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); line-height: var(--leading-xs); }
.an-table th { position: sticky; top: 0; padding: 5px 8px; text-align: left; background: var(--surface-sunken); border-bottom: 1px solid var(--line); font-weight: var(--weight-semibold); color: var(--ink-2); white-space: nowrap; }
.an-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.an-table tr:last-child td { border-bottom: 0; }
.an-table .n { text-align: right; }
.an-table td.n { font-family: var(--font-num); }

/* Ledger tables (answer and data cards): sunken header, hairlines, numbers right in Plex Mono. */
.answer-table-box { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: auto; background: var(--surface); }
table.answer-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
table.answer-table th {
  text-align: left; vertical-align: bottom; padding: var(--cell-py-head) var(--cell-px); white-space: nowrap;
  font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold); color: var(--ink-2);
  background: var(--surface-sunken); border-bottom: 1px solid var(--line);
}
table.answer-table td { padding: var(--cell-py) var(--cell-px); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.answer-table tbody tr:last-child td { border-bottom: 0; }
table.answer-table tbody tr:hover td { background: var(--surface-hover); }
table.answer-table .r { text-align: right; }
table.answer-table td.r, table.answer-table td.has-bar { font-family: var(--font-num); font-size: var(--text-num-sm); }
table.answer-table caption { caption-side: bottom; text-align: left; padding: 8px 12px; font-size: var(--text-xs); color: var(--ink-3); border-top: 1px solid var(--line); }
/* Wide tables: right-edge fade + swipe hint, only while the box really scrolls (table-scroll.js). */
.table-scroll-frame { position: relative; }
.table-scroll-frame::after {
  content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 28px; pointer-events: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0; background: linear-gradient(to right, transparent, var(--surface));
  opacity: 0; transition: opacity var(--dur-2);
}
.table-scroll.is-overflowing:not(.is-at-end) .table-scroll-frame::after { opacity: 1; }
.table-swipe-hint { display: none; margin: 6px 0 0; text-align: center; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); }
.table-scroll.is-overflowing .table-swipe-hint { display: block; }

/* ---------- 10. Answer (Markdown) ---------- */
.answer { font-size: var(--text-md); line-height: var(--leading-md); color: var(--ink); overflow-wrap: anywhere; }
.answer > * { margin: 0; }
.answer > * + * { margin-top: var(--space-3); }
.answer > p.answer-lead { font-size: var(--text-lg); line-height: var(--leading-lg); text-wrap: pretty; } /* DS text-lead 15/24 */
.answer h1, .answer h2 { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.answer h3, .answer h4 { font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-semibold); }
.answer > :is(h1, h2, h3, h4):not(:first-child) { margin-top: var(--space-5); }
.answer > :is(h1, h2, h3, h4) + * { margin-top: var(--space-2); }
.answer strong { font-weight: var(--weight-semibold); }
.answer ul, .answer ol { padding-left: 1.25em; }
.answer li + li { margin-top: var(--space-1); }
.answer li::marker { color: var(--ink-3); }
.answer a { color: var(--accent); text-underline-offset: 3px; }
.answer a:hover { color: var(--accent-hover); }
.answer .link-host { color: var(--ink-3); font-size: .92em; overflow-wrap: anywhere; }
.answer code { font-family: var(--font-num); font-size: .875em; padding: 1px 5px; border-radius: var(--radius-xs); background: var(--surface-sunken); }
.answer pre { overflow-x: auto; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--line); }
.answer pre code { padding: 0; background: none; }
.answer blockquote { padding: 2px 12px; border-left: 3px solid var(--line-strong); color: var(--ink-2); }
.answer hr { border: 0; border-top: 1px solid var(--line); }
.answer em { color: var(--ink-2); }
.answer .plain-fallback { white-space: pre-wrap; }
.bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--accent); vertical-align: middle; margin-right: 8px; opacity: .8; }
.caret { display: inline-block; width: 2px; height: 1.15em; background: var(--accent); vertical-align: -3px; margin-left: 2px; animation: mq-blink 1s steps(1) infinite; }
.unverified { text-decoration: underline dotted var(--warn); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.unverified-mark { display: inline-flex; vertical-align: -2px; margin-left: 2px; color: var(--warn); }
.num-cite, .answer .unverified { white-space: nowrap; }
/* A number the server corrected (markdown.js correctedNumber): accent dotted underline plus a "korr." superscript, so
   the cue is never colour alone; its title says what was written. */
.corrected { background: none; color: inherit; text-decoration: underline dotted var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: help; }
.corrected-mark { margin-left: 2px; font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-medium); line-height: 0; color: var(--accent-ink); }
/* Source chips (source-chips.js, board Quellen1Chips): a quiet chip at the end of a block with verified numbers (under
   a table), its popover below the block, starting at the chip; one entry per source step. */
.src-anchor { position: relative; }
.src-chip {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline; max-width: 100%; height: 20px; margin-left: 6px; padding: 0 6px 0 5px;
  border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); color: var(--ink-3);
  font-family: var(--font-ui); font-size: var(--text-2xs); line-height: 16px; font-weight: var(--weight-medium); white-space: nowrap;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.app .src-chip svg.i { width: 11px; height: 11px; stroke-width: 1.8; }
.src-chip .lbl { flex: none; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.src-chip .more { color: var(--accent-ink); }
.src-chip:hover, .src-chip[aria-expanded="true"] { border-color: var(--line-input); background: var(--surface-hover); color: var(--ink-2); }
.answer-lead .src-chip { vertical-align: 2px; }
.answer-table-foot { display: flex; justify-content: flex-end; margin-top: var(--space-1); }
.answer-table-foot .src-chip { margin-left: 0; }
.src-pop {
  position: absolute; z-index: 5; left: var(--pop-x, 0); top: calc(100% + 6px); width: min(400px, calc(100vw - 32px)); padding: var(--space-1);
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-regular); text-align: left; white-space: normal;
  animation: mq-in var(--dur-1) var(--ease-out) both;
}
.src-pop-title { margin: 0; padding: 6px 8px 4px; font-size: var(--text-2xs); line-height: 16px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--ink-3); }
.src-pop .src-pop-list { list-style: none; margin: 0; padding: 0; }
.src-pop li + li { margin-top: 0; }
.src-pop-item {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; width: 100%; padding: 6px 8px;
  border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; color: var(--ink); font-size: var(--text-sm); line-height: var(--leading-sm);
}
.src-pop-item:hover { background: var(--surface-hover); }
.src-pop-item .an-ring { margin-top: 1px; }
.src-pop-lbl { display: block; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.src-pop-meta { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.src-pop-foot { margin: 0; padding: 4px 8px 2px; border-top: 1px solid var(--line); font-size: var(--text-2xs); line-height: 16px; color: var(--ink-3); }
.knowledge-source { margin: calc(-1 * var(--space-2)) 0 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); }
.source-link { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; border-radius: var(--radius-xs); }
.source-link:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---------- 11. Datenprüfung (verification): folded when all numbers were found ---------- */
.verify-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.datanote { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-sm); line-height: var(--leading-sm); animation: mq-in var(--dur-2) var(--ease-out) both; }
.datanote-head {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 36px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-md); background: transparent; text-align: left; font-size: var(--text-sm);
}
.datanote-head:hover { background: var(--surface-hover); }
.datanote-head:focus-visible { outline-offset: -2px; }
.datanote-head[aria-expanded="true"] { border-bottom: 1px solid var(--line); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.datanote .dn-icon { color: var(--ok); }
.datanote .dn-title { font-weight: var(--weight-medium); }
.datanote-head .chev { margin-left: auto; }
.datanote.has-issues { border-color: var(--warn-line); }
.datanote.has-issues .dn-icon { color: var(--warn); }
.datanote.is-info { border-color: var(--accent-muted); }
.datanote.is-info .dn-icon { color: var(--accent-ink); }
.dn-list { list-style: none; margin: 0; padding: var(--space-1) 0; }
.dn-list li { display: grid; grid-template-columns: 16px 92px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 5px var(--space-3); }
.dn-list li.is-warn { background: var(--warn-subtle); }
.dn-list .v { font-family: var(--font-num); font-size: var(--text-num-sm); text-align: right; white-space: nowrap; }
.dn-list .ctx { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-list .src { color: var(--ink-3); font-size: var(--text-xs); white-space: nowrap; }
.dn-list .is-warn .src { color: var(--warn); }
.dn-list .source-link + .src-label { margin-left: var(--space-2); }
.dn-list .ok { color: var(--ok); }
.dn-list .warn { color: var(--warn); }
.dn-list .info, .dn-list .is-corrected .src strong { color: var(--accent-ink); }
.dn-list .is-corrected .src { white-space: normal; }

/* Normal mode (no html.is-debug, see js/mode.js): the answer without process details. Hidden by
   style, not removed, so replayed and live turns follow the mode set by /api/meta. */
:root:not(.is-debug) :is(.turn-usage, .usage-list, .verify-row, .dn-list .source-link) { display: none !important; }
:root:not(.is-debug) .datanote.is-ok { display: none; } /* all found: the source chips carry the trust */

/* ---------- 12. Data tables and views under the answer ---------- */
.turn-extras { display: flex; flex-direction: column; gap: var(--space-4); }
.data-tables, .views { display: flex; flex-direction: column; gap: var(--space-4); }
.data-tables:empty, .views:empty { display: none; }

.view-card { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; animation: mq-in var(--dur-2) var(--ease-out) both; }
.view-card:focus-visible { outline-offset: -2px; }
.view-head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.view-head-icon { color: var(--accent); margin-top: 2px; }
.view-names { display: flex; flex-direction: column; min-width: 0; }
.view-title { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.view-workbook { margin-top: 2px; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.view-image-link { position: relative; display: block; }
.view-image-link:focus-visible { outline-offset: -2px; }
.view-figure { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-sunken); border-block: 1px solid var(--line); }
.view-figure.is-loading { background: linear-gradient(90deg, var(--skeleton-a) 0%, var(--skeleton-b) 50%, var(--skeleton-a) 100%); background-size: 200% 100%; animation: mq-shimmer 1.4s linear infinite; }
.view-img { display: block; width: 100%; height: 100%; object-fit: contain; visibility: hidden; } /* a broken image never shows */
.view-img.is-loaded { visibility: visible; }
.view-figure.is-error { display: grid; place-content: center; }
.view-status { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6); text-align: center; font-size: var(--text-sm); color: var(--ink-2); }
.view-status p { margin: 0; }
.view-status > svg { color: var(--err); }
.view-note { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border-block: 1px solid var(--line); background: var(--surface-sunken); font-size: var(--text-sm); color: var(--ink-2); }
/* "Vergrößern": part of the link's name everywhere, visible only on narrow columns (below). */
.view-zoom { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.view-meta { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); font-size: var(--text-xs); line-height: 18px; color: var(--ink-3); }
.view-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; overflow-wrap: anywhere; }
.view-filters { color: var(--ink-2); }
.view-actions { margin-top: var(--space-1); }
.view-open { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; color: var(--accent); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; border-radius: var(--radius-xs); }
.view-open:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
/* Data card (`data_table`): the view-card frame around a Ledger table that runs edge to edge. */
.data-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; animation: mq-in var(--dur-2) var(--ease-out) both; }
/* Card toolbar (card-tools.js): quiet ghost buttons at the head's right; 44 px targets on touch/phone (§17). */
.data-card .view-names { flex: 1 1 0; }
.card-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; margin: -4px -6px -4px auto; }
.card-tool { min-height: var(--control-sm); gap: var(--space-1); padding: 0 var(--space-2); font-size: var(--text-xs); color: var(--ink-2); }
.card-tool svg.i { color: var(--ink-3); }
.card-tool:disabled { background: transparent; border-color: transparent; cursor: progress; }
/* View switch "Balken | Tabelle" (card-tools.js): a segmented pair of toggle buttons that leads the toolbar,
   a hairline separating it from the export buttons. Pressed: accent-subtle + accent-ink as a pressed icon button,
   plus an inset accent edge (≥ 3:1 in both themes) and semibold text, so the state never rests on the fill. */
.card-view { display: inline-flex; flex: none; align-items: center; margin-right: var(--space-1); padding-right: var(--space-2); border-right: 1px solid var(--line); }
.view-opt {
  min-height: var(--control-sm); padding: 0 var(--space-3); border: 1px solid var(--line-strong); background: transparent;
  color: var(--ink-2); font-size: var(--text-sm); line-height: 1; font-weight: var(--weight-medium); white-space: nowrap;
  transition: background var(--dur-1), color var(--dur-1);
}
.view-opt:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.view-opt:last-child { border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.view-opt:hover { background: var(--surface-hover); color: var(--ink); }
.view-opt:active { background: var(--surface-active); }
.view-opt[aria-pressed="true"] { background: var(--accent-subtle); color: var(--accent-ink); font-weight: var(--weight-semibold); box-shadow: inset 0 0 0 1px var(--accent); cursor: default; }
.view-opt:focus-visible { outline-offset: -2px; }
/* Vollbild: the card fills the screen, height limits lifted, type one step larger (tokens cascade). */
.data-card:fullscreen {
  --text-xs: 13px; --leading-xs: 18px; --text-sm: 15px; --leading-sm: 22px; --text-num-sm: 14px;
  overflow: auto; border: 0; border-radius: 0; padding: var(--space-4) max(var(--space-6), calc((100vw - 1280px) / 2));
}
.data-card:fullscreen .view-title { font-size: 20px; line-height: 28px; }
.data-card:fullscreen :is(.chart-scroll, .answer-table-box) { max-height: none; }
.data-card:fullscreen .bar-svg { height: 18px; }
.data-card:fullscreen .is-grouped .bar-svg { height: 12px; }
.data-card:fullscreen .map-stage { flex-basis: min(860px, 62vw); }
.data-card:fullscreen .map-svg { max-height: calc(100vh - 200px); }
.data-card::backdrop { background: var(--surface, #fff); }
.data-meta { margin-top: 2px; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.data-card .answer-table-box { border-radius: 0; border-inline: 0; border-bottom: 0; }
.data-card .table-scroll-frame::after { border-radius: 0; }
.data-card .table-swipe-hint { margin-bottom: 6px; }
.data-foot { margin: 0; padding: 8px 12px; border-top: 1px solid var(--line); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); }
/* Result card (result-card.js): the primary data table's bar chart leads, the view switch swaps it for
   the rows, a source line closes every data card. Labels wrap, never truncate. */
.data-figure { margin: 0; }
.bar-chart { position: relative; isolation: isolate; list-style: none; margin: 0; padding: var(--space-1) var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.bar-row { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); align-items: center; gap: 2px var(--space-3); }
.bar-label { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-2); overflow-wrap: break-word; }
.bar-track { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; }
.bar-svg, .bar-value { font-family: var(--font-num); font-size: var(--text-num-sm); }
/* `--share` (0–1) of the room left after the widest value, so the longest bar and its value fit. */
.bar-svg { display: block; flex: none; height: 14px; width: calc(var(--share) * (100% - var(--value-w) - var(--space-1-5))); overflow: visible; }
.bar-rect { fill: var(--accent); }
.bar-value { flex: none; line-height: var(--leading-xs); color: var(--ink); white-space: nowrap; }
/* F2 Vergleich mit Rang: the row the question names (`markiert`) as the map-picked table row; the median as a dashed
   line across the bars, at `--ref` of the bar scale (same geometry as .bar-row and .bar-svg). */
.bar-row.is-marked::before { content: ""; position: absolute; inset: -3px calc(-1 * var(--space-4)); z-index: -1; background: var(--accent-subtle); box-shadow: inset 3px 0 0 var(--accent); }
.bar-row.is-marked .bar-label { color: var(--ink); font-weight: var(--weight-semibold); }
.bar-chart.has-ref { padding-top: 22px; }
.ref-line {
  --plot: calc(100% - 2 * var(--space-4) - var(--space-3)); /* the row's two grid columns (2fr | 5fr) */
  font-family: var(--font-num); font-size: var(--text-num-sm); /* `--value-w` is in ch of the bar values' font */
  position: absolute; top: 0; bottom: var(--space-3); z-index: 1; width: 0; border-left: 1px dashed var(--line-input); pointer-events: none; transform-origin: top;
  left: calc(var(--space-4) + var(--plot) * 2 / 7 + var(--space-3) + var(--ref) * (var(--plot) * 5 / 7 - var(--value-w) - var(--space-1-5)));
}
.ref-label { position: absolute; top: -1px; left: 5px; white-space: nowrap; font-family: var(--font-ui); font-size: var(--text-2xs); line-height: var(--leading-2xs); color: var(--ink-3); }
.ref-label .num { font-family: var(--font-num); color: var(--ink-2); }
.ref-line.at-right .ref-label { left: auto; right: 5px; }
/* F3 Schwelle: the threshold is the reference line; a row below it adds a warning icon and its gap in --warn
   (icon and text: never colour alone). */
.bar-gap { display: inline-flex; flex: none; align-items: center; gap: 3px; margin-left: var(--space-1-5); font-family: var(--font-num); font-size: var(--text-2xs); line-height: var(--leading-2xs); color: var(--warn); white-space: nowrap; }
/* Values near the threshold sit on its line: they knock it out in their row's background. */
.bar-chart.has-threshold .bar-row { --knock: var(--surface); }
.bar-chart.has-threshold .bar-row.is-marked { --knock: var(--accent-subtle); }
.bar-chart.has-threshold :is(.bar-value, .bar-gap) { position: relative; z-index: 2; background: var(--knock); box-shadow: -2px 0 0 var(--knock), 2px 0 0 var(--knock); }
/* Grouped bars (result-card.js renderGroupedBarChart): one bar per series in each group, series colours colour-blind
   safe (blue, orange, neutral; ≥ 3:1 on --surface), named by the legend and each bar's sr-only text. */
.chart-legend { list-style: none; margin: 0; padding: var(--space-2) var(--space-4) var(--space-1); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-2); }
.chart-legend li { display: inline-flex; align-items: center; gap: var(--space-1-5); min-width: 0; overflow-wrap: anywhere; }
.legend-swatch { flex: none; width: 12px; height: 12px; border-radius: 2px; background: var(--series); }
.series-1 { --series: var(--accent); }
.series-2 { --series: var(--data-2); }
.series-3 { --series: var(--data-3); }
.bar-chart.is-grouped { gap: var(--space-3); }
.bar-series { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.is-grouped .bar-svg { height: 10px; }
.is-grouped .bar-rect { fill: var(--series); }
.is-grouped .is-gap .bar-value { color: var(--ink-3); }
.chart-scroll.is-grouped { --bar-row-h: calc(var(--series-n) * (var(--leading-xs) + 2px) + var(--space-3)); }
/* Bevölkerungspyramide (result-card.js renderPyramid): männlich left, weiblich right of the age labels in the centre;
   bars grow outwards on one scale, values at their outer ends. Label and both halves share one grid row (the halves'
   list spans it, its middle column left free), so a wrapped label grows the row. Side and legend arrows name each
   half: never colour alone. */
.pyramid-legend { justify-content: space-between; }
.legend-side { color: var(--ink-3); }
.bar-chart.is-pyramid { --age-w: 8rem; gap: var(--space-1); }
.is-pyramid :is(.bar-row, .bar-series) { display: grid; grid-template-columns: minmax(0, 1fr) var(--age-w) minmax(0, 1fr); align-items: center; gap: 0; }
.is-pyramid .bar-label { grid-area: 1 / 2; padding-inline: var(--space-2); text-align: center; }
.is-pyramid .bar-series { grid-area: 1 / 1 / auto / -1; }
.is-pyramid .side-rechts { grid-column: 3; }
.side-links { flex-direction: row-reverse; }
.is-pyramid .bar-rect { fill: var(--series); }
.is-pyramid .is-gap .bar-value { color: var(--ink-3); }
/* Verlauf (F4, trend-chart.js): drawn at the plot's pixel width (text keeps its size), y gridlines in --line, one
   line per series in its series colour with its own marker shape, the last value labelled; the hover tip is decorative. */
.trend-chart { padding: 0 var(--space-4) var(--space-3); }
.trend-chart .chart-legend { padding-inline: 0; }
.trend-plot { position: relative; min-width: 0; }
.trend { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-num); }
.trend .axis { stroke: var(--line-strong); stroke-width: 1; }
.trend .grid-line { stroke: var(--line); stroke-width: 1; }
.trend .tick, .trend .yr { font-size: 11px; fill: var(--ink-3); }
.trend .val { font-size: 12px; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.trend .ln, .trend-swatch .ln { fill: none; stroke: var(--series, var(--accent)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend .pt, .trend-swatch .pt { fill: var(--series, var(--accent)); stroke: var(--surface); stroke-width: 1.5; }
.trend .guide { stroke: var(--line-input); stroke-width: 1; stroke-dasharray: 3 3; }
.trend .ring { fill: none; stroke: var(--series, var(--accent)); stroke-width: 2; }
.trend-swatch { flex: none; width: 20px; height: 10px; overflow: visible; }
.trend-tip {
  position: absolute; top: 0; left: var(--x); transform: translateX(-50%); z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: 1px; padding: var(--space-1) var(--space-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-2); white-space: nowrap;
}
.trend-tip.at-left { transform: translateX(8px); }
.trend-tip.at-right { transform: translateX(calc(-100% - 8px)); }
.trend-tip b { font-family: var(--font-num); font-weight: var(--weight-semibold); color: var(--ink); }
.trend-tip .tip-row { display: flex; align-items: center; gap: var(--space-1-5); }
.trend-tip .tip-row::before { content: ""; width: 8px; height: 2px; background: var(--series); }
.trend-tip .tip-name { flex: 1 1 auto; }
.trend-tip .num { font-family: var(--font-num); color: var(--ink); }
/* Einordnungszeile (result-card.js renderInsight): arithmetic on the shown rows above the visual; facts wrap whole. */
.data-insight { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; margin: 0; padding: var(--space-2) var(--space-4) var(--space-1); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink-2); }
.data-insight .fact { white-space: nowrap; }
.data-insight b { font-weight: var(--weight-semibold); color: var(--ink); white-space: normal; }
.data-insight .num { font-family: var(--font-num); font-size: var(--text-num-sm); color: var(--ink); }
.data-insight .sep { margin: 0 .5em; color: var(--ink-3); }
/* Share strip (F5): 100 % of the shown rows, largest first; segments grow from their share (`--g`). Shades by rank
   on the map classes' data scale (accent-muted → accent-active in oklab, the largest strongest), 1 px --surface gaps
   between; value text dark on the light classes, light on the dark ones (as the map labels, ≥ 4.5:1 in both themes). */
.share-strip { --map-lo: var(--accent-muted); --map-hi: var(--accent-active); display: flex; gap: 1px; height: 22px; margin: var(--space-2) var(--space-4) var(--space-1); border-radius: var(--radius-xs); overflow: hidden; background: var(--surface); }
.share-seg { position: relative; flex: var(--g) 1 0; min-width: 0; background: var(--map-lo); }
.share-seg .t { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 6px; font-family: var(--font-num); font-size: var(--text-2xs); line-height: 1; color: var(--ink); white-space: nowrap; overflow: hidden; }
.share-c1 { background: color-mix(in oklab, var(--map-hi) 25%, var(--map-lo)); }
.share-c2 { background: color-mix(in oklab, var(--map-hi) 50%, var(--map-lo)); }
.share-c2 .t { color: var(--map-mid-ink); }
.share-c3 { background: color-mix(in oklab, var(--map-hi) 75%, var(--map-lo)); }
.share-c4 { background: var(--map-hi); }
:is(.share-c3, .share-c4) .t { color: var(--surface); }
.share-seg.is-marked { background: var(--accent); } /* the site the question names (`markiert`, not yet sent) */
.share-seg.is-marked .t { color: var(--on-accent); font-weight: var(--weight-medium); }
.share-cap { margin: 0; padding: 0 var(--space-4) var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); }
/* Key tiles (F1): value Plex Mono 26/32 (`data-key`), neutral delta (fewer cases is no status). No motion. */
.kpi-grid { list-style: none; margin: 0; padding: var(--space-2) var(--space-4) var(--space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)); gap: var(--space-3); }
.kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.kpi-label { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-2); overflow-wrap: anywhere; }
.kpi-value { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 26px; line-height: 32px; font-weight: var(--weight-medium); letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.kpi-value small { margin-left: 4px; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-regular); letter-spacing: 0; color: var(--ink-3); }
.kpi--text .kpi-value { font-family: var(--font-ui); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: 0; }
.kpi-delta { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 4px; align-self: flex-start; max-width: 100%; margin-top: 4px; padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-sunken); font-family: var(--font-num); font-size: var(--text-xs); line-height: 16px; color: var(--ink-2); }
.kpi-delta > * { white-space: nowrap; }
.kpi-delta svg { color: var(--ink-3); }
.kpi-delta .ctx { font-family: var(--font-ui); color: var(--ink-3); }
/* Gegenüberstellung (F6): attributes as rows, entities as columns; the highest value bold (and named "(höher)" for
   screen readers), the difference neutral. Names, attributes and text values wrap at word ends; numbers never.
   Every value sits right, under its entity's name. */
.data-card table.answer-table.compare th { position: static; white-space: normal; overflow-wrap: break-word; }
table.compare :is(th, td) { vertical-align: baseline; }
table.compare tbody th { color: var(--ink-2); }
table.compare td { white-space: normal; text-align: right; }
table.compare td.r { white-space: nowrap; }
table.compare td.is-max { font-weight: var(--weight-semibold); color: var(--ink); }
table.compare td.diff { color: var(--ink-2); white-space: normal; } /* "Pp." may go below its value */
.compare-box { position: relative; overflow-x: auto; } /* positioned: its sr-only notes scroll with it, never widen the page */
.compare-box:focus-visible { outline-offset: -2px; }
table.compare th.is-marked { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); } /* `markiert`; sr-only note */
/* Compare mode (compare-view.js; boards CompareTray, CompareCard, CompareKreise, CompareMobil). */
/* Pin on a site row: shows on hover/focus, always when pressed or on touch; pressed = accent (check icon, aria-pressed). */
.bar-row.has-pin { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) var(--control-sm); }
.row-pin {
  position: relative; display: inline-grid; place-items: center; width: var(--control-sm); height: var(--control-sm); padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-3); opacity: 0; transition: opacity var(--dur-1), background var(--dur-1);
}
.bar-row:hover .row-pin, .bar-row:focus-within .row-pin, tr:hover .row-pin, tr:focus-within .row-pin, .row-pin[aria-pressed="true"], .row-pin:focus-visible { opacity: 1; }
.row-pin:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink); }
.row-pin[aria-pressed="true"] { background: var(--accent-subtle); color: var(--accent-ink); }
.row-pin:disabled { color: var(--ink-disabled); cursor: not-allowed; }
@media (hover: none) { .row-pin { opacity: 1; } }
table.answer-table .pin-cell { width: calc(var(--control-sm) + 2 * var(--space-1)); padding-block: 0; padding-inline: var(--space-1); text-align: center; }
/* Entity chip: in the tray and in a compare card's bar. */
.ent {
  display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; max-width: 100%; min-height: var(--control-sm); padding: 0 2px 0 var(--space-2);
  border: 1px solid var(--line-input); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-sm); line-height: var(--leading-xs); color: var(--ink); white-space: nowrap;
}
.ent .ent-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ent .ent-x { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-3); }
.ent .ent-x:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink); }
.ent .ent-x:disabled { color: var(--ink-disabled); cursor: not-allowed; }
.ent--ref { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-ink); }
.ent--ref .ent-tag { flex: none; margin-left: 2px; font-size: var(--text-2xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.tray-chips { display: contents; }
/* Tray above the composer: shown with a pinned entity or an open picker. */
.compare-tray { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.compare-tray[hidden] { display: none; }
.tray-label { display: inline-flex; align-items: center; gap: var(--space-1-5); margin-right: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--ink-2); }
.tray-label svg { color: var(--accent); }
.tray-slot { display: contents; }
.tray-hint { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); white-space: nowrap; }
.tray-actions { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.compare-add:disabled { background: transparent; border-color: transparent; }
/* Compare card: the edit bar under the head; the picker's list may reach past the card. */
.data-card.compare-card { overflow: visible; }
.compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-3); }
.add-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.compare-bar .add-wrap:has(.picker) { flex: 1 1 260px; max-width: 420px; }
/* Picker: combobox and listbox; under its input in a card, above it in the tray (the composer sits at the bottom). */
.picker { position: relative; display: inline-flex; flex: 1 1 260px; align-items: center; min-width: 0; max-width: 420px; }
.picker-input {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--control-md); padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--line-input); border-radius: var(--radius-sm); background: var(--surface);
}
.picker-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus); }
.picker-input svg { color: var(--ink-3); }
.picker-input input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--text-sm); color: var(--ink); }
.picker-input input::placeholder { color: var(--ink-3); }
.picker-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.compare-tray .picker-pop { top: auto; bottom: calc(100% + 4px); }
.picker-list { list-style: none; margin: 0; padding: var(--space-1) 0; max-height: 320px; overflow: auto; }
.opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--space-3); padding: 6px var(--space-3); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); cursor: pointer; }
.opt .opt-name { overflow-wrap: anywhere; }
.opt .opt-meta { font-size: var(--text-xs); color: var(--ink-3); white-space: nowrap; }
.opt:hover { background: var(--surface-hover); }
.opt[aria-selected="true"] { background: var(--accent-subtle); color: var(--accent-ink); box-shadow: inset 3px 0 0 var(--accent); }
.opt[aria-selected="true"] .opt-meta { color: var(--accent-ink); }
.opt.is-in { color: var(--ink-3); cursor: default; }
.picker-hint { margin: 0; padding: 6px var(--space-3) 8px; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); }
.picker-foot { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding: 6px var(--space-3); border-top: 1px solid var(--line); font-size: var(--text-2xs); line-height: var(--leading-xs); color: var(--ink-3); }
.picker-foot kbd { font-size: 10.5px; padding: 0 4px; }
/* Compare table: entity heads with the reference toggle, Δ to the reference under each value. */
table.compare th.ent-head { vertical-align: top; min-width: 9em; }
table.compare th.ent-head .ent-title { display: block; color: var(--ink); }
table.compare.is-picked td.r { vertical-align: top; line-height: var(--leading-xs); padding-block: 6px; }
table.compare td .delta { display: block; margin-top: 1px; font-size: var(--text-2xs); line-height: 14px; font-weight: 400; color: var(--ink-3); }
table.compare td .delta.is-ref { visibility: hidden; }
.ref-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 20px; margin-top: 3px; padding: 0 6px; white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface); font-size: var(--text-2xs); line-height: 1; font-weight: var(--weight-medium); letter-spacing: .02em; color: var(--ink-2);
}
.ref-btn:hover { border-color: var(--line-input); color: var(--ink); }
.ref-btn .rdot { width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.ref-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-ink); cursor: default; }
.ref-btn[aria-pressed="true"] .rdot { background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .compare-tray:not([hidden]), .picker-pop:not([hidden]) { animation: mq-in var(--dur-2) var(--ease-out) both; }
}
/* Long charts and the table behind them scroll in a capped box. Scroll shadows: the `local` covers
   move with the content and hide the `scroll` shadows at either end, so a shadow shows only where
   more rows follow. Static backgrounds, no motion. */
.chart-scroll { --bar-row-h: calc(var(--leading-xs) + var(--space-2)); max-height: min(calc(var(--space-1) + var(--rows-visible) * var(--bar-row-h)), 65vh); }
.data-card .answer-table-box, .map-card .answer-table-box { max-height: var(--table-box-max); }
.chart-scroll, .data-card .answer-table-box, .map-card .answer-table-box {
  overflow-x: hidden; overflow-y: auto;
  background:
    linear-gradient(var(--surface) 30%, transparent) center top / 100% 32px no-repeat local,
    linear-gradient(transparent, var(--surface) 70%) center bottom / 100% 32px no-repeat local,
    radial-gradient(farthest-side at 50% 0, var(--line-input), transparent) center top / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, var(--line-input), transparent) center bottom / 100% 12px no-repeat scroll,
    var(--surface);
}
.data-card .answer-table-box, .map-card .answer-table-box { overflow-x: auto; }
.chart-scroll:focus-visible, .data-card .answer-table-box:focus-visible, .map-card .answer-table-box:focus-visible { outline-offset: -2px; }
:is(.data-card, .map-card) table.answer-table th { position: sticky; top: 0; z-index: 1; }
.data-source { margin: 0; padding: 8px var(--space-4); border-top: 1px solid var(--line); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.data-check { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--ink-2); }
.data-check svg { color: var(--ok); }
.data-check.is-warn, .data-check.is-warn svg { color: var(--warn); }
.data-source > * + .data-check { margin-left: .35em; }
.data-source > * + .data-check::before { content: "·"; margin-right: .35em; color: var(--ink-3); }
.answer > .scope-chip { display: inline-flex; max-width: 100%; margin-top: var(--space-2); padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface-sunken); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-2); overflow-wrap: anywhere; }

/* Map card (`map`) and the map figure of a result card (Versorgungsgebiete).
   Classes: five steps from --accent-muted to --accent-active, mixed in oklab; the tokens switch with the
   theme, so the scale runs light → dark in the light theme and dim → bright in the dark theme (adjacent
   steps ≈ 1.5–1.7:1). No data: --surface-active, grey against the blue scale. Randbereiche: a dark line on a light halo, legible
   over every class. Points use the warm status hue, the one colour that separates from the blue scale. */
.map-body { --map-lo: var(--accent-muted); --map-hi: var(--accent-active); }
.map-card .view-head { align-items: center; }
.map-card .view-names { flex: 1; }
.map-body { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: var(--space-4); padding: 0 var(--space-4) var(--space-4); }
.map-stage { position: relative; flex: 0 1 460px; min-width: 260px; }
.map-svg { display: block; width: 100%; height: auto; max-height: 560px; overflow: hidden; }

.map-region { fill: var(--surface-hover); stroke: var(--surface); stroke-width: .5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map-region:focus { outline: none; }
/* Base map under points: the Kreis lines are the place context, so they need contrast. */
.map-svg--base .map-region { stroke: var(--line-strong); stroke-width: .7; }
.map-svg:not(.map-svg--base) .map-region { stroke-width: .8; }
.map-c0 { fill: var(--map-lo); }
.map-c1 { fill: color-mix(in oklab, var(--map-hi) 25%, var(--map-lo)); }
.map-c2 { fill: color-mix(in oklab, var(--map-hi) 50%, var(--map-lo)); }
.map-c3 { fill: color-mix(in oklab, var(--map-hi) 75%, var(--map-lo)); }
.map-c4 { fill: var(--map-hi); }
.map-none { fill: var(--surface-active); }
.map-hatch-halo { stroke: var(--surface); stroke-width: 2.4; }
.map-hatch-line { stroke: var(--ink-2); stroke-width: 1; }
.map-rand-hatch { pointer-events: none; }
.map-outline { fill: none; stroke: var(--ink-3); stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-hl { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-sel { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-svg:has(.map-region:focus-visible) .map-hl { stroke: var(--focus); stroke-width: 2.5; }

.map-point { fill: color-mix(in oklab, var(--warn) 88%, transparent); stroke: var(--surface); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map-point:focus { outline: none; }
.map-svg:has(.map-point:focus-visible) .map-hl { stroke: var(--focus); }

.map-tip {
  position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none;
  display: flex; flex-direction: column; padding: 6px 10px; border-radius: var(--radius-sm); white-space: nowrap;
  background: var(--surface-inverse); color: var(--ink-inverse); box-shadow: var(--shadow-lg);
  font-size: var(--text-xs); line-height: var(--leading-xs);
}
.map-tip-name { font-weight: var(--weight-semibold); }
.map-tip-value { font-family: var(--font-num); }
.map-tip-note { opacity: .8; }

.map-legend-box { flex: 0 1 auto; min-width: 128px; max-width: 300px; }
.map-legend-title { margin: 0 0 var(--space-2); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold); color: var(--ink-2); }
.map-legend { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.map-legend-item { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-num); font-size: var(--text-num-sm); line-height: 18px; color: var(--ink-2); }
.map-legend-note { align-items: flex-start; font-family: var(--font-ui); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); }
.map-legend-note .map-swatch { margin-top: 2px; }
.map-legend-item:not(.map-legend-note) + .map-legend-note { margin-top: var(--space-1); }
.map-swatch { width: 18px; height: 12px; flex: none; border-radius: 2px; background: var(--surface-hover); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 8%, transparent); }
.map-swatch.map-c0 { background: var(--map-lo); }
.map-swatch.map-c1 { background: color-mix(in oklab, var(--map-hi) 25%, var(--map-lo)); }
.map-swatch.map-c2 { background: color-mix(in oklab, var(--map-hi) 50%, var(--map-lo)); }
.map-swatch.map-c3 { background: color-mix(in oklab, var(--map-hi) 75%, var(--map-lo)); }
.map-swatch.map-c4 { background: var(--map-hi); }
.map-swatch.map-none { background: var(--surface-active); }
.map-swatch.map-rand { background: repeating-linear-gradient(-45deg, var(--surface-hover) 0 2px, var(--surface) 2px 3px, var(--ink-2) 3px 4px, var(--surface) 4px 5px, var(--surface-hover) 5px 6px); }
.map-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); }
.map-size-box { max-width: 300px; }
.map-legend-box > * + .map-size-box { margin-top: var(--space-4); }
.map-point-row { align-items: flex-start; padding: 1px 4px; margin-inline: -4px; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: var(--text-xs); }
.map-point-row.is-active { background: var(--surface-hover); color: var(--ink); }
.map-badge { flex: none; width: 20px; height: 18px; border-radius: 9px; background: var(--warn); color: var(--surface); font-family: var(--font-num); font-size: var(--text-xs); line-height: 18px; font-weight: var(--weight-semibold); text-align: center; }
.map-point-name { flex: 1; min-width: 0; }
.map-point-value { flex: none; white-space: nowrap; }
.map-point-more { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--ink-3); }
/* Region values: dark text on the light classes, light on the dark ones (≥ 4.5:1 in both themes); a halo
   in the class colour keeps them clear of the Randbereich hatch. */
.map-label { font-family: var(--font-num); font-size: 16px; font-weight: var(--weight-semibold); text-anchor: middle; dominant-baseline: central; pointer-events: none; paint-order: stroke; stroke-width: 4px; stroke-linejoin: round; }
.map-lab-c0 { fill: var(--ink); stroke: var(--map-lo); }
.map-lab-c1 { fill: var(--ink); stroke: color-mix(in oklab, var(--map-hi) 25%, var(--map-lo)); }
.map-lab-c2 { fill: var(--map-mid-ink); stroke: color-mix(in oklab, var(--map-hi) 50%, var(--map-lo)); }
.map-lab-c3 { fill: var(--surface); stroke: color-mix(in oklab, var(--map-hi) 75%, var(--map-lo)); }
.map-lab-c4 { fill: var(--surface); stroke: var(--map-hi); }
.map-nr { font-family: var(--font-num); font-size: 12px; font-weight: 700; fill: var(--surface); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.map-leader { stroke: var(--ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map-anchor { fill: var(--ink-2); }
.map-tables .table-scroll + .table-scroll { border-top: 1px solid var(--line); }
.map-card .table-scroll-frame .answer-table-box { border-radius: 0; border-inline: 0; border-bottom: 0; }
.map-attrib { margin: calc(-1 * var(--space-2)) var(--space-4) var(--space-3); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.map-skeleton { max-width: 460px; aspect-ratio: 1; margin: 0 auto var(--space-4); border-radius: var(--radius-md); background: var(--skeleton-a); }
/* The row of the region marked on the map, and the rows the question names (`markiert`). */
.data-table tbody tr:is(.is-picked, .is-marked) td { background: var(--accent-subtle); color: var(--ink); font-weight: var(--weight-semibold); }
.data-table tbody tr:is(.is-picked, .is-marked) td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .map-region { transition: fill var(--dur-2) var(--ease-out); }
}

/* Drill-down map (map-drill-view.js, boards Map1–Map7): breadcrumb row, stage at the board's 600 × 540, side panel
   (legend, level note, site details) right of it from 900 px, below it on narrower columns. The world group carries
   the zoom as one transform; strokes keep their width (non-scaling-stroke). */
.map-drill .map-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding: 0 var(--space-4) var(--space-2); }
.map-back:disabled { color: var(--ink-disabled); cursor: default; background: transparent; }
.map-crumbs { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.map-crumbs li { display: flex; flex: none; align-items: center; }
.map-crumbs li + li::before { content: "›"; padding: 0 2px; color: var(--ink-3); font-size: var(--text-sm); }
.map-crumb { min-height: var(--control-sm); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--accent-ink); font-size: var(--text-sm); line-height: 1; font-weight: var(--weight-medium); white-space: nowrap; }
.map-crumb:hover { background: var(--surface-hover); }
.map-crumb[aria-current="page"] { color: var(--ink); font-weight: var(--weight-semibold); cursor: default; }
.map-crumb[aria-current="page"]:hover { background: transparent; }
.map-levelinfo { margin: 0 0 0 auto; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); text-align: right; }
.map-body.map-body--drill { display: grid; grid-template-columns: minmax(0, 1fr) 216px; align-items: start; gap: var(--space-4); }
.map-body--drill .map-stage { aspect-ratio: 600 / 540; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); overflow: hidden; touch-action: pan-y; }
.map-body--drill .map-svg { width: 100%; height: 100%; max-height: none; }
.map-drill .map-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.map-world { transform-box: view-box; transform-origin: 0 0; }
.map-drill .map-region { stroke: var(--surface); stroke-width: .6; }
.map-drill .map-plain { fill: var(--surface); stroke: var(--line-strong); stroke-width: .8; }
.map-drill .map-dim { fill: var(--surface-active); stroke: var(--surface-sunken); }
.map-drill .map-ctx .map-region { pointer-events: none; }
.map-drill .map-regions .map-plain:hover { fill: var(--surface-hover); }
.map-focus-outline { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-drill .map-svg:has(.map-region:focus-visible, .map-point:focus-visible) .map-hl { stroke: var(--focus); stroke-width: 2.5; }
.map-drill .map-label { font-size: 13px; }
.map-name { font-family: var(--font-ui); font-size: 11px; fill: var(--ink-3); text-anchor: middle; dominant-baseline: central; pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.map-drill .map-point { stroke-width: 1.5; }
.map-point.is-out { fill: var(--ink-3); opacity: .5; pointer-events: none; }
.map-point.is-selected { fill: var(--warn); stroke: var(--ink); stroke-width: 2.5; }
.map-sel-ring { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; pointer-events: none; }
.map-zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.map-zoom button { display: grid; place-items: center; width: var(--control-md); height: var(--control-md); padding: 0; border: 0; background: transparent; color: var(--ink-2); }
.map-zoom button + button { border-top: 1px solid var(--line); }
.map-zoom button:hover { background: var(--surface-hover); color: var(--ink); }
.map-zoom button[aria-disabled="true"] { color: var(--ink-disabled); background: transparent; cursor: default; }
.map-zoom button:focus-visible { outline-offset: -2px; }
.map-scale { position: absolute; left: 10px; bottom: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: calc(100% - 20px); font-family: var(--font-num); font-size: var(--text-2xs); line-height: 12px; color: var(--ink-2); pointer-events: none; }
.map-scale i { display: block; height: 5px; border: 1px solid var(--ink-2); border-top: 0; }
.map-drill .map-tip { min-width: 120px; max-width: 230px; white-space: normal; }
.map-tip-hint { opacity: .72; }
.map-drill .map-tip.is-below { transform: translate(-50%, 16px); }
/* Touch: a transparent stroke (screen pixels, non-scaling) widens each site to a 44 px target. */
@media (pointer: coarse) { .map-drill .map-point:not(.is-out, .is-selected) { stroke: transparent; stroke-width: 34px; } }
.map-hint, .map-overlay { position: absolute; left: 50%; bottom: 34px; z-index: 2; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 6px 12px; border-radius: var(--radius-sm); font-size: var(--text-xs); line-height: var(--leading-xs); }
.map-hint { background: var(--surface-inverse); color: var(--ink-inverse); white-space: nowrap; pointer-events: none; }
.map-overlay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); width: max-content; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-sm); }
.map-overlay[hidden] { display: none; }
.map-error { border-color: var(--err-line); color: var(--ink); }
.map-error > svg { color: var(--err); }
.map-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.map-side .map-legend-box, .map-side .map-size-box { max-width: none; min-width: 0; }
.map-side .map-note { margin-top: var(--space-2); }
.map-howto { margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); }
.map-howto kbd { margin: 0 1px; }
@media (hover: none) { .map-howto { display: none; } } /* keys and wheel: no use on touch */
.map-nodata { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-2); }
.map-nodata p { margin: 0; }
.map-nodata strong { font-weight: var(--weight-semibold); color: var(--ink); }
.map-detail { display: flex; flex-direction: column; gap: var(--space-2); padding: 12px; border: 1px solid var(--accent-muted); border-radius: var(--radius-md); background: var(--surface); }
.map-detail:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.map-detail-head { display: flex; align-items: flex-start; gap: var(--space-2); }
.map-detail-head .icon-btn { margin: -4px -4px 0 auto; }
.map-detail-title { margin: 0; flex: 1; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.map-detail-sub { margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); }
.map-detail dl { margin: var(--space-1) 0 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); line-height: var(--leading-xs); }
.map-detail dt { color: var(--ink-3); }
.map-detail dd { margin: 0 0 4px; color: var(--ink); overflow-wrap: anywhere; }
.map-detail dd.mono { font-family: var(--font-num); font-size: 11px; }
.map-detail-q { margin: var(--space-1) 0 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); }
.map-detail .chips { flex-direction: column; gap: var(--space-1-5); }
.map-detail .chip { width: 100%; min-height: 32px; padding: 5px 10px; font-size: var(--text-xs); line-height: 16px; }
/* Vollbild (Map7): stage at most 100vh − 200 px high, the 280 px panel right beside it; breadcrumb row, stage and
   panel centred as one block. */
.data-card:fullscreen .map-drill { --map-fs-stage: calc((100vh - 200px) * 600 / 540); max-width: calc(var(--map-fs-stage) + 280px + 3 * var(--space-4)); margin-inline: auto; }
.data-card:fullscreen .map-body--drill { grid-template-columns: minmax(0, var(--map-fs-stage)) 280px; }
.data-card:fullscreen .map-body--drill .map-stage { max-height: calc(100vh - 200px); justify-self: center; width: min(100%, var(--map-fs-stage)); }
.data-card:fullscreen .map-body--drill .map-svg { max-height: none; }
/* Motion: one zoom per level change, then the new sites pop and the labels fade in; the overview fades in north →
   south once. Nothing moves with reduced motion. */
@keyframes mq-pop { from { transform: scale(0); } }
@media (prefers-reduced-motion: no-preference) {
  .map-drill.is-animating .map-world { transition: transform var(--dur-3) var(--ease-out); }
  .map-drill.is-entering .map-point { transform-box: fill-box; transform-origin: center; animation: mq-pop var(--dur-3) var(--ease-out) calc(220ms + var(--i, 0) * 20ms) both; }
  .map-drill.is-entering :is(.map-point-labels, .map-names, .map-labels, .map-leaders) { animation: mq-fade var(--dur-2) var(--ease-out) 300ms both; }
  .map-drill.is-entering :is(.map-crumbs li:last-child, .map-levelinfo, .map-side > *) { animation: mq-in var(--dur-2) var(--ease-out) 140ms both; }
  .map-drill.is-overview .map-regions .map-region { animation: mq-fade var(--dur-3) var(--ease-out) calc(var(--i, 0) * 18ms) both; }
}
@media (max-width: 899px) {
  .map-body.map-body--drill, .data-card:fullscreen .map-body--drill { grid-template-columns: minmax(0, 1fr); }
}
@container col (max-width: 599px) {
  .map-body--drill .map-stage { aspect-ratio: 1; }
  .map-drill .map-nav, .map-body.map-body--drill { padding-inline: var(--space-3); }
  .map-drill .map-nav > nav { flex: 1 1 0; min-width: 0; }
  .map-crumbs { overflow-x: auto; scrollbar-width: none; }
  .map-crumb, .map-back { min-height: 36px; }
  .map-back { width: 36px; height: 36px; }
  .map-levelinfo { flex-basis: 100%; margin: 0; text-align: left; }
  .map-zoom button { width: var(--target-touch); height: var(--target-touch); }
  .map-drill .map-tip { max-width: 200px; }
  .map-detail .chip { min-height: var(--target-touch); }
}

/* ---------- 13. Clarify, errors, notices ---------- */
.clarify { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--accent-muted); background: var(--surface); display: flex; flex-direction: column; gap: var(--space-3); }
.clarify-q { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); }
.clarify-foot { margin: 0; font-size: var(--text-xs); color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 6px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-input); background: var(--surface); text-align: left; font-size: var(--text-md); line-height: 18px;
}
.chip:hover { border-color: var(--accent); background: var(--accent-subtle); }
.chip:disabled { cursor: default; opacity: .5; }
.chip:disabled:hover { border-color: var(--line-input); background: var(--surface); }
.chip.is-chosen, .chip.is-chosen:hover { opacity: 1; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
body.is-streaming .chip:not(:disabled) { opacity: .6; cursor: wait; }

.suggestions { display: flex; flex-direction: column; gap: var(--space-2); }
.suggestions-label { margin: 0; font-size: var(--text-xs); color: var(--ink-3); }
/* Next-step cards: a question and an arrow per card, as many per row as fit at 240 px. */
.next { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-2); }
.next li { display: flex; }
.next-card {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 18px; column-gap: var(--space-2); align-items: center; min-height: 52px;
  padding: 10px var(--space-3); border: 1px solid var(--line-input); border-radius: var(--radius-md); background: var(--surface);
  color: var(--ink); text-align: left; font-size: var(--text-sm); line-height: 18px; overflow-wrap: anywhere;
  transition: border-color var(--dur-1), background var(--dur-1);
}
.next-card svg.next-arrow { width: 18px; height: 18px; color: var(--ink-3); transition: transform var(--dur-2) var(--ease-out), color var(--dur-2); }
@media (hover: hover) {
  .next-card:hover { border-color: var(--accent); background: var(--accent-subtle); }
  .next-card:hover .next-arrow { transform: translateX(3px); color: var(--accent); }
  .next-card:disabled:hover { border-color: var(--line-input); background: var(--surface); }
  .next-card:disabled:hover .next-arrow { transform: none; color: var(--ink-3); }
}
.next-card:disabled { cursor: default; opacity: .5; }
.next-card.is-chosen, .next-card.is-chosen:hover { opacity: 1; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.next-card.is-chosen .next-arrow { color: var(--on-accent); }
body.is-streaming .next-card:not(:disabled) { opacity: .6; cursor: wait; }

.error-card { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border: 1px solid var(--err-line); border-radius: var(--radius-md); background: var(--err-subtle); }
.error-card > svg { color: var(--err); margin-top: 2px; }
.error-card > div { min-width: 0; }
.error-title { margin: 0; font-weight: var(--weight-semibold); color: var(--err); }
.error-text { margin: 2px 0 var(--space-3); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink-2); }
.error-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.stale-note { display: flex; gap: var(--space-2); align-items: center; padding: 4px 4px 4px var(--space-3); border: 1px solid var(--warn-line); border-radius: var(--radius-sm); background: var(--warn-subtle); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); }
.stale-note > svg { color: var(--warn); }
.stale-note > span { flex: 1 1 auto; }
.stale-reload { min-height: var(--control-sm); color: var(--accent); font-weight: var(--weight-semibold); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--composer-h, 148px) + var(--space-3)); z-index: 60;
  display: flex; align-items: center; gap: var(--space-2); max-width: min(480px, calc(100vw - 32px));
  padding: 6px 6px 6px 14px; border-radius: var(--radius-md); background: var(--surface-inverse); color: var(--ink-inverse);
  font-size: var(--text-sm); line-height: var(--leading-sm); box-shadow: var(--shadow-lg);
  translate: -50% 0; animation: mq-in var(--dur-2) var(--ease-out) both;
}
.toast-text { padding-block: 4px; }
.toast-action { min-height: var(--control-sm); padding: 0 10px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.toast-action:hover { background: transparent; color: inherit; text-decoration-thickness: 2px; }
.toast-close { color: inherit; opacity: .8; }
.toast-close:hover { background: transparent; color: inherit; opacity: 1; }
.toast :focus-visible { outline-color: var(--ink-inverse); }
.is-empty .toast { bottom: var(--space-6); }
.has-sidebar .toast { left: calc(50% + var(--sidebar-w) / 2); }
.has-sidebar.sidebar-rail .toast { left: calc(50% + var(--rail-w) / 2); }
/* With the drawer open the toast belongs to it: aligned to the drawer, above its footer. */
.drawer-open .toast { left: var(--space-3); bottom: 112px; width: calc(min(320px, 86vw) - 2 * var(--space-3)); justify-content: space-between; translate: none; }

/* ---------- 14. Feedback: action row under a finished answer, details dialog (boards Feedback1Dialoge, Feedback2Zustaende) ---------- */
.feedback { display: flex; flex-direction: column; gap: var(--space-2); margin-top: calc(-1 * var(--space-2)); }
.fb-row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.fb-btn {
  display: inline-grid; place-items: center; width: var(--control-sm); height: var(--control-sm); padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-3);
  transition: background var(--dur-1), color var(--dur-1);
}
.fb-btn:hover { background: var(--surface-hover); color: var(--ink); }
.fb-btn[aria-pressed="true"], .fb-btn[aria-pressed="true"]:hover { background: var(--accent-subtle); color: var(--accent-ink); }
.fb-btn[aria-pressed="true"] svg { fill: color-mix(in oklab, currentColor 22%, transparent); }
.fb-btn.is-popping svg { animation: mq-press var(--dur-2) var(--ease-out) both; }
.fb-btn[aria-disabled="true"] { cursor: default; opacity: .4; }
.fb-btn[aria-disabled="true"]:hover { background: transparent; color: var(--ink-3); }
.fb-btn.is-copied, .fb-btn.is-copied:hover { color: var(--ok); }
.fb-sep { width: 1px; height: 14px; margin: 0 var(--space-1); background: var(--line-strong); }
.fb-status { margin-left: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); }
.fb-status.is-error { color: var(--err); }
.fb-status.is-entering { animation: mq-fade var(--dur-2) var(--ease-out) both; }
/* <dialog> opened with showModal; the entrance replays on every open (display none → block). */
.fb-dialog {
  width: min(480px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
}
.fb-dialog[open] { animation: mq-in var(--dur-2) var(--ease-out) both; }
.fb-dialog::backdrop { background: var(--backdrop); }
.fb-dialog[open]::backdrop { animation: mq-fade var(--dur-2) var(--ease-out) both; }
.fb-form { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); }
.fb-title { margin: 0; font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.fb-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.fb-label { padding: 0; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-medium); color: var(--ink); }
.fb-label span { font-weight: var(--weight-regular); color: var(--ink-3); }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px 0 8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
  font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink-2); cursor: pointer;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.fb-chip:hover { background: var(--surface-hover); color: var(--ink); }
.fb-chip input { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; pointer-events: none; }
.fb-chip .r { flex: none; width: 14px; height: 14px; border: 1.5px solid var(--line-input); border-radius: 50%; background: var(--surface); transition: border var(--dur-1); }
.fb-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-ink); }
.fb-chip:has(input:checked) .r { border: 4.5px solid var(--accent); }
.fb-chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.fb-textarea {
  display: block; width: 100%; min-height: 88px; padding: 8px 12px; border: 1px solid var(--line-input); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: var(--text-md); line-height: var(--leading-md); resize: vertical;
}
.fb-textarea::placeholder { color: var(--ink-3); }
.fb-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); }
.fb-note svg { margin-top: 1px; }
.fb-alert { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--err); }
.fb-foot { display: flex; justify-content: flex-end; gap: var(--space-2); }
.fb-foot .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
/* Phone: bottom sheet with 44 px targets. */
@media (max-width: 599px) {
  .fb-dialog {
    width: 100%; max-height: calc(100% - 24px); margin: auto 0 0; overflow: auto;
    border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .fb-dialog[open] { animation: mq-sheet var(--dur-3) var(--ease-out) both; }
  .fb-form { padding: var(--space-5) var(--space-4) var(--space-6); }
  .fb-chip { min-height: var(--target-touch); }
  .fb-foot .btn { flex: 1 1 0; min-height: var(--target-touch); }
}

/* ---------- 15. Composer: docked at the column's bottom; the hero on the empty state ---------- */
.composer { position: sticky; bottom: 0; z-index: 5; padding: var(--space-3) var(--space-6) var(--space-4); background: var(--canvas); }
.composer-inner { max-width: calc(var(--content-w) - 48px); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-1-5); }
.is-empty .composer { position: static; z-index: auto; padding: 0; background: transparent; }
/* Scroll to the conversation's end (js/scroll-latest.js): centred above the docked composer; a dot while an answer streams. */
.composer-inner { position: relative; }
.scroll-latest {
  position: absolute; left: 50%; bottom: calc(100% + var(--space-6)); translate: -50% 4px;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-sm);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out), visibility 0s var(--dur-2), background var(--dur-1), color var(--dur-1);
}
.scroll-latest.is-shown { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }
.scroll-latest:hover { background: var(--surface-hover); color: var(--ink); }
.is-streaming .scroll-latest::after {
  content: ""; position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--surface);
}
.is-empty .scroll-latest { display: none; }
/* A notice (#toast) takes the same spot: the button steps above it. */
.app:has(#toast:not([hidden])) .scroll-latest { bottom: calc(100% + var(--space-6) + 56px); }
.is-empty .composer-inner { max-width: 100%; }
.composer-box {
  display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--line-input); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus), var(--shadow-sm); } /* the textarea has no own ring */
.composer-box textarea {
  flex: 1 1 auto; min-height: 24px; max-height: 200px; padding: 6px 0; border: 0; outline: 0; resize: none; background: transparent;
  font-size: var(--text-lg); line-height: 22px; field-sizing: content;
}
.composer-box textarea::placeholder { color: var(--ink-3); }
/* Start page: the example question types itself over the empty field (js/start-page.js); the placeholder hides under it. */
.type-wrap { position: relative; flex: 1 1 100%; display: flex; min-width: 0; }
.type-wrap textarea { width: 100%; }
.type-ghost { position: absolute; inset: 6px 0; overflow: hidden; pointer-events: none; color: var(--ink-3); font-size: var(--text-lg); line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.type-ghost:empty, .composer-box:not(.is-typing) .type-ghost { display: none; }
.is-typing textarea::placeholder { color: transparent; }
.composer-box textarea:focus-visible { outline: 0; }
.composer-box textarea:read-only { color: var(--ink-3); cursor: not-allowed; }
.is-empty .composer-box { flex-wrap: wrap; padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4); }
.is-empty .composer-box textarea { flex-basis: 100%; min-height: 72px; }
.is-empty .composer-box .send-btn { margin-left: auto; }
.send-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); min-width: var(--control-md); height: var(--control-md); flex: none; padding: 0;
  border-radius: var(--radius-sm); border: 0; background: var(--accent); color: var(--on-accent); font-size: var(--text-sm); font-weight: var(--weight-medium);
  transition: background var(--dur-1);
}
.send-btn:hover { background: var(--accent-hover); }
.send-btn:active { background: var(--accent-active); }
.send-btn.is-stop { padding: 0 var(--space-3); background: var(--ink); color: var(--surface); }
.send-btn.is-stop:hover { background: var(--ink-2); }
.composer-hint { display: flex; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink-3); }
.kbd-hint { display: inline-flex; align-items: center; gap: 4px; }
.composer-count { margin-left: auto; white-space: nowrap; }
.composer-count.is-limit { color: var(--warn); font-weight: var(--weight-semibold); }

/* ---------- 16. Motion ---------- */
@keyframes mq-in      { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes mq-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes mq-spin    { to { transform: rotate(360deg); } }
@keyframes mq-blink   { 50% { opacity: 0; } }
@keyframes mq-flash   { from { background: var(--accent-subtle); } to { background: transparent; } }
@keyframes mq-drawer  { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes mq-grow    { from { transform: scaleX(0); } }
@keyframes mq-rise    { from { transform: scaleY(0); } }
@keyframes mq-draw    { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mq-fade    { from { opacity: 0; } }
@keyframes mq-press   { from { transform: scale(.6); } }
@keyframes mq-sheet   { from { transform: translateY(100%); } }
@keyframes mq-pulse   { from { opacity: .7; transform: scale(.6); } to { opacity: 0; transform: scale(1.35); } }
@keyframes mq-wipe    { from { clip-path: inset(-6px 100% -6px -6px); } to { clip-path: inset(-6px -6px -6px -6px); } }
/* Answer entrance (assistant-turn.js enterAnswer, motion.js): `is-entering` on the turn, armed once per live turn
   when the answer text has ended and its cards stand (t = 0); base styles are the end state, numbers never move,
   transform/opacity/stroke-dashoffset only. Cards fade in at 300 ms (same keyframes as their
   own mq-in, so dropping the class does not restart it); the median line rises at 300 ms (180 ms); bars and share segments grow from 360 ms, first ten staggered
   (key tiles and the Einordnungszeile never move); the
   all-clear seal draws ring then check from 800 ms (its own key, armed on the mark when `verification` arrives);
   next-step cards and their label rise from 1.000 ms, feedback fades in at 1.100 ms, so nothing stands alone below
   the card while the rest is still to come. Last frame ≈ 1,3 s. The invisible next cards stay clickable (accepted:
   a second at most). */
.turn.is-entering :is(.data-card, .view-card) { animation-duration: var(--dur-3); animation-delay: 300ms; }
.turn.is-entering :is(.bar-svg, .share-seg) { transform-origin: left center; animation: mq-grow var(--dur-3) var(--ease-out) calc(360ms + var(--i, 0) * 30ms) both; }
.turn.is-entering .is-pyramid .side-links .bar-svg { transform-origin: right center; } /* grows from the centre */
.turn.is-entering .ref-line { animation: mq-rise var(--dur-2) var(--ease-out) 300ms both; }
.turn.is-entering .trend-lines { animation: mq-wipe 400ms var(--ease-out) 360ms both; } /* F4: the lines are revealed left to right */
.is-entering .seal-ring { stroke-dasharray: 1; animation: mq-draw var(--dur-3) var(--ease-out) 800ms both; }
.is-entering .seal-tick { stroke-dasharray: 1; animation: mq-draw var(--dur-2) var(--ease-out) 1060ms both; }
.turn.is-entering .next li { animation: mq-in var(--dur-3) var(--ease-out) calc(1000ms + var(--i, 0) * 40ms) both; }
.turn.is-entering .suggestions-label { animation: mq-in var(--dur-3) var(--ease-out) 1000ms both; }
.turn.is-entering .feedback { animation: mq-fade var(--dur-2) var(--ease-out) 1100ms both; }
/* Cards that replace the building shell (assistant-turn.js revealExtras): no wait, rows rise i × 40 ms, bars grow 80 ms
   behind their row (board WowFinalMotion, "Karte baut sich"). */
.turn.is-entering .is-arriving :is(.data-card, .view-card) { animation-delay: 0ms; }
.turn.is-entering .is-arriving .bar-row { animation: mq-in var(--dur-3) var(--ease-out) calc(var(--i, 0) * 40ms) both; }
.turn.is-entering .is-arriving .bar-svg { animation-delay: calc(var(--i, 0) * 40ms + 80ms); }
/* Start page entrance (board WowFinalMotion, 0–3 s, once per session): `is-entering` on #empty-state (js/start-page.js).
   Outline draws, composer, examples (i × 40 ms) and trust line rise, dots fade in; figures count and the example
   types in JS. The scan sweeps down and up, 5.6 s each way (board WowMotion "Scan", W1), for as long as the start
   page shows (reduced motion: none). */
.empty.is-entering .de-outline { stroke-dasharray: 1; animation: mq-draw var(--dur-4) var(--ease-out) both; }
.empty.is-entering .de-dots { animation: mq-fade var(--dur-3) var(--ease-out) 420ms both; }
.empty .de-lit { animation: mq-scan 5.6s ease-in-out 1.2s infinite alternate both; }
.empty .de-beam { opacity: .9; animation: mq-sweep 5.6s ease-in-out 1.2s infinite alternate both; }
.empty.is-entering .figs { animation: mq-in var(--dur-2) var(--ease-out) 200ms both; }
.empty.is-entering .hero-composer-slot { animation: mq-in var(--dur-2) var(--ease-out) 120ms both; }
.empty.is-entering .examples > li { animation: mq-in var(--dur-2) var(--ease-out) calc(220ms + var(--i, 0) * 40ms) both; }
.empty.is-entering .trust { animation: mq-in var(--dur-2) var(--ease-out) 400ms both; }
@keyframes mq-scan { from { clip-path: inset(-6% 0 96% 0); } to { clip-path: inset(100% 0 -6% 0); } }
@keyframes mq-sweep { from { transform: translateY(-14px); } to { transform: translateY(254px); } }
@media (prefers-reduced-motion: reduce) {
  .app *, .app *::before, .app *::after { animation: none !important; transition: none !important; }
  .fb-dialog::backdrop { animation: none !important; }
  .sk, .view-figure.is-loading { background: var(--skeleton-a); }
}

/* ---------- 17. Responsive ---------- */
/* Below 900 px the list is a drawer (app.js); the column takes the full width. */
@media (max-width: 899px) {
  .topbar { padding: 0 var(--space-3); gap: var(--space-2); }
  .topbar-menu { display: inline-grid; }
  .main { padding: var(--space-6) var(--space-4); }
  .composer { padding: var(--space-2) var(--space-3) var(--space-3); }
}
/* Narrow column: the board's smaller hero title (WowEmpty, ≤ 860 px). */
@container col (max-width: 860px) {
  .empty-title { font-size: 28px; line-height: 34px; }
  .figs { gap: var(--space-3) var(--space-5); }
}
/* Phone-width column */
@container col (max-width: 599px) {
  .topbar-new-label, .account-name, .topbar-meta > :not(.meta-live, .meta-offline) { display: none; } /* phone header: status only */
  .topbar-new { min-width: var(--target-touch); padding: 0; }
  .account { margin-left: 0; padding-left: var(--space-1); }
  .empty { padding: var(--space-4) 0 var(--space-6); }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .de-map, .chip-sample { display: none; }
  .msg-user { max-width: 92%; }
  .src-chip { height: 24px; padding: 0 8px 0 6px; font-size: var(--text-xs); }
  .src-pop { left: 0; right: 0; width: auto; }
  .src-pop-item { min-height: var(--target-touch); align-items: center; }
  .dn-list li { grid-template-columns: 16px auto minmax(0, 1fr); row-gap: 0; }
  .dn-list .v { text-align: left; }
  .dn-list .src { grid-column: 2 / -1; }
  .bar-row { grid-template-columns: minmax(0, 1fr); }
  .bar-chart.has-ref { padding-top: var(--space-1); }
  .ref-line { display: none; } /* labels sit above the bars: the rank line carries the median */
  /* The threshold stays: a dashed tick in each bar's track (a line would cross the labels); the Einordnungszeile names it. */
  .bar-chart.has-threshold .bar-track { position: relative; }
  .bar-chart.has-threshold .bar-track::after {
    content: ""; position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1px dashed var(--line-input); pointer-events: none; transform-origin: top;
    left: calc(var(--ref) * (100% - var(--value-w) - var(--space-1-5)));
  }
  .turn.is-entering .bar-chart.has-threshold .bar-track::after { animation: mq-rise var(--dur-2) var(--ease-out) 300ms both; }
  .share-seg:not(.is-wide) .t { display: none; } /* a 9 % segment is too narrow for its value; the bars carry it */
  .chart-scroll { --bar-row-h: calc(2 * var(--leading-xs) + 2px + var(--space-2)); } /* label above its bar */
  .bar-chart.is-pyramid { --age-w: 4.75rem; padding-inline: var(--space-2); } /* the centre labels wrap; values stay at the ends */
  .is-pyramid .bar-label { padding-inline: var(--space-1); hyphens: auto; }
  .chart-scroll.is-grouped { --bar-row-h: calc((var(--series-n) + 1) * (var(--leading-xs) + 2px) + var(--space-3)); }
  .data-card .view-head { flex-wrap: wrap; }
  .card-tools { flex-basis: 100%; justify-content: space-between; margin: -4px 0 -8px; } /* under the title */
  .card-tool { padding: 0 var(--space-1); } /* PNG · CSV · Excel · Vollbild fit one row from 320 px */
  .card-view { flex: 1 0 100%; margin: 0 0 var(--space-1); padding: 0; border-right: 0; } /* own row, exports below */
  .view-opt { flex: 1; }
  .map-label { display: none; } /* the stage is too small for 12 px labels; tooltip and table carry the values */
  .chip { width: 100%; }
  .composer-hint .kbd-hint { display: none; }
  .view-zoom {
    width: auto; height: auto; margin: 0; overflow: visible; clip: auto; inset: auto var(--space-2) var(--space-2) auto;
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--radius-xs);
    background: var(--surface); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-medium); color: var(--ink-2);
  }
  /* Touch targets */
  .btn, .send-btn, .chip, .example, .an-head, .an-step-head, .datanote-head, .view-open, .turn-usage, .login-input, .view-opt { min-height: var(--target-touch); }
  .icon-btn, .fb-btn { width: var(--target-touch); height: var(--target-touch); }
  .send-btn { min-width: var(--target-touch); height: var(--target-touch); }
  /* Sticky row label in wide tables; it may wrap so more value columns fit before scrolling. */
  table.answer-table th:first-child, table.answer-table td:first-child {
    position: sticky; left: 0; z-index: 1; white-space: normal; overflow-wrap: normal; min-width: 8em;
    box-shadow: inset -1px 0 0 var(--line);
  }
  table.answer-table td:first-child { background: var(--surface); }
  table.answer-table th:first-child { background: var(--surface-sunken); }
  /* The Gegenüberstellung fits the column instead: no sticky label, tighter cells. */
  table.answer-table.compare :is(th, td):first-child { position: static; min-width: 0; box-shadow: none; }
  table.compare :is(th, td) { padding-inline: var(--space-1-5); }
  /* Compare mode: pins and chips as touch targets; the tray a sheet above the composer, its actions full width. */
  .bar-row.has-pin { grid-template-columns: minmax(0, 1fr) var(--target-touch); grid-template-areas: "l p" "t t"; }
  .bar-row.has-pin .bar-label { grid-area: l; align-self: center; }
  .bar-row.has-pin .bar-track { grid-area: t; }
  .bar-row.has-pin .row-pin { grid-area: p; margin: -12px 0; }
  .row-pin { width: var(--target-touch); height: var(--target-touch); opacity: 1; }
  .ent { min-height: var(--target-touch); padding-left: var(--space-3); }
  .ent .ent-x { width: 36px; height: 36px; }
  .ref-btn { min-height: var(--target-touch); padding: 0 10px; }
  .compare-bar { padding: var(--space-2) var(--space-3) var(--space-3); }
  .picker, .compare-bar .add-wrap:has(.picker) { flex-basis: 100%; max-width: none; }
  .picker-input { min-height: var(--target-touch); }
  .opt { min-height: var(--target-touch); align-items: center; }
  .picker-foot { display: none; } /* no arrow keys on a phone */
  .compare-tray { padding: var(--space-2); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-md) var(--radius-md); box-shadow: var(--shadow-lg); }
  .tray-actions { width: 100%; margin-left: 0; }
  .tray-actions .btn { flex: 1; }
  .picker-list { max-height: min(320px, 40vh); }
  table.compare th.ent-head { min-width: 8em; }
}
/* Below a 360 px screen a long attribute name of the Gegenüberstellung breaks before its values scroll. */
@container col (max-width: 339px) {
  table.compare tbody th { hyphens: auto; }
}
/* The drawer lives outside the column: its targets follow the viewport. */
@media (max-width: 599px), (pointer: coarse) {
  .sidebar .btn, .side-new, .chat-open, .sidebar-clear, .clear-confirm .btn { min-height: var(--target-touch); }
  .sidebar .icon-btn, .chat-delete, .toast .icon-btn { width: var(--target-touch); height: var(--target-touch); }
}
@media (pointer: coarse) {
  .btn, .send-btn, .example, .an-head, .an-step-head, .datanote-head, .view-opt { min-height: var(--target-touch); }
  .icon-btn, .fb-btn, .scroll-latest { width: var(--target-touch); height: var(--target-touch); }
}