/*
 * attendit design system — v0.2.0
 * https://attend-it-services.github.io/design-system/
 *
 * Token prefix: --att-
 * Component prefix: .att-
 *
 * Two media targets: screen (web app, dashboards, HTML reports)
 * and print (WeasyPrint-rendered PDFs of tender extractions and bid checks).
 * Tokens are shared; layout differs.
 */

/* ─────────────────────────────────────────────────────────────────────────
 * Tokens
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Brand — Ink Petrol. Calm, document-respecting, no flag baggage.
     Reserves red/green/amber for status semantics. */
  --att-brand-900: #062F37;
  --att-brand-700: #0E4F58;  /* primary */
  --att-brand-500: #2A7884;  /* interactive, hover */
  --att-brand-300: #7BB3BB;
  --att-brand-100: #D9EBEE;
  --att-brand-50:  #F1F8F9;

  /* Surfaces — warm paper, not bluish-cool. Reads as "document". */
  --att-paper:    #FAF9F6;
  --att-paper-2:  #F4F1EA;
  --att-white:    #FFFFFF;

  /* Ink — graphite, not pure black. Easier on the eyes over long reads. */
  --att-ink-900: #1A1F2C;
  --att-ink-700: #3D4456;
  --att-ink-500: #6B7388;
  --att-ink-300: #B0B5C2;
  --att-ink-100: #E5E7EE;
  --att-ink-50:  #F5F6F9;

  /* Status — RESERVED for compliance/finding semantics. Do not reuse for brand. */
  --att-status-danger:  #C8324B;
  --att-status-warning: #8E6210;
  --att-status-success: #2F7A4B;
  --att-status-info:    #2F65A8;

  /* Jurisdiction chips — actual flag colors are quarantined to small chips,
     never to brand surfaces. Treats nationality as data, not identity. */
  --att-flag-at-red:    #ED2939;
  --att-flag-eu-blue:   #003399;
  --att-flag-eu-gold:   #FFCC00;

  /* Typography — IBM Plex family (SIL OFL 1.1). One family, matched metrics
     across sans/serif/mono. Consumers install via Fontsource at build time
     and serve from their own domain (GDPR — no third-party CDN at runtime).
     Stacks fall back to system fonts if Plex hasn't loaded yet. */
  --att-font-sans:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
                    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --att-font-serif: "IBM Plex Serif", ui-serif, Georgia, Cambria,
                    "Times New Roman", Times, serif;
  --att-font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
                    Consolas, monospace;

  /* Type scale — modular, conservative steps for dense document UIs. */
  --att-fs-xs:   0.75rem;   /* 12px */
  --att-fs-sm:   0.875rem;  /* 14px */
  --att-fs-base: 1rem;      /* 16px */
  --att-fs-md:   1.125rem;  /* 18px */
  --att-fs-lg:   1.375rem;  /* 22px */
  --att-fs-xl:   1.75rem;   /* 28px */
  --att-fs-2xl:  2.25rem;   /* 36px */
  --att-fs-3xl:  3rem;      /* 48px */

  --att-lh-tight: 1.2;
  --att-lh-snug:  1.4;
  --att-lh-body:  1.55;
  --att-lh-prose: 1.7;

  /* Spacing — 4px base. */
  --att-space-1: 0.25rem;
  --att-space-2: 0.5rem;
  --att-space-3: 0.75rem;
  --att-space-4: 1rem;
  --att-space-5: 1.5rem;
  --att-space-6: 2rem;
  --att-space-7: 3rem;
  --att-space-8: 4rem;

  /* Radii, borders, shadows — restrained. */
  --att-radius-sm: 4px;
  --att-radius-md: 6px;
  --att-radius-lg: 10px;
  --att-border: 1px solid var(--att-ink-100);
  --att-border-strong: 1px solid var(--att-ink-300);
  --att-shadow-sm: 0 1px 2px rgba(6, 47, 55, 0.06);
  --att-shadow-md: 0 4px 12px rgba(6, 47, 55, 0.08);

  /* Layout */
  --att-content-max: 72rem;

  /* Focus ring — D4 of ds-a11y-baseline. brand-500 is 4.84:1 on paper,
     5.10:1 on white, 4.52:1 on paper-2 — all pass WCAG 2.2 SC 1.4.11
     (3:1 non-text). */
  --att-focus-ring: 2px solid var(--att-brand-500);
  --att-focus-ring-offset: 2px;

  /* ── Screen layer (v0.2.0) ─────────────────────────────────────────────
     Tokens for dense app/tool surfaces (analysis web app). Screen-only;
     nothing below changes the print/marketing tokens above. */

  /* Dense UI type scale — tool surfaces; distinct from the reading scale
     (--att-fs-*). Floor: never render UI text below --att-fs-ui-xs (11.5px). */
  --att-fs-ui-2xl: 1.375rem;   /* 22px — pane title            */
  --att-fs-ui-lg:  1.0625rem;  /* 17px — section / h3          */
  --att-fs-ui-md:  0.9375rem;  /* 15px — list-row title        */
  --att-fs-ui-base:0.875rem;   /* 14px — body / control        */
  --att-fs-ui-sm:  0.78125rem; /* 12.5px — meta / secondary    */
  --att-fs-ui-xs:  0.71875rem; /* 11.5px — label / overline    */

  /* Grey ROLES (map ad-hoc app greys onto these four):
     text      → ink-900   (15.8:1 on paper)
     meta      → ink-700   ( 9.2:1) — smallest text colour allowed
     large/ico → ink-500   ( 4.5:1) — only >=16px or non-text
     deco      → ink-300   (borders/rules ONLY, never text)          */

  /* Category system — one hue per tender-requirement category, matched
     chroma/lightness. solid = dot/accent · text = AA label on white ·
     fill = chip bg · hl = translucent evidence highlight in the viewer. */
  --att-cat-eignung-solid:#2B5FA6; --att-cat-eignung-text:#2B5FA6; --att-cat-eignung-fill:#E7EEF7; --att-cat-eignung-hl:rgba(43,95,166,.20);
  --att-cat-technik-solid:#6A4BA6; --att-cat-technik-text:#6A4BA6; --att-cat-technik-fill:#EEE9F6; --att-cat-technik-hl:rgba(107,63,160,.20);
  --att-cat-formale-solid:#0F6E6A; --att-cat-formale-text:#0F6E6A; --att-cat-formale-fill:#E1F0EF; --att-cat-formale-hl:rgba(15,110,106,.20);
  --att-cat-verfahren-solid:#9A6410; --att-cat-verfahren-text:#9A6410; --att-cat-verfahren-fill:#F6ECD8; --att-cat-verfahren-hl:rgba(154,100,16,.20);
  --att-cat-vertrag-solid:#7A4A1E; --att-cat-vertrag-text:#7A4A1E; --att-cat-vertrag-fill:#F0E7DD; --att-cat-vertrag-hl:rgba(122,74,30,.20);
  --att-cat-zuschlag-solid:#2F7A4B; --att-cat-zuschlag-text:#2F7A4B; --att-cat-zuschlag-fill:#E3F1E7; --att-cat-zuschlag-hl:rgba(47,122,75,.20);
  --att-cat-schadstoff-solid:#B23A4B; --att-cat-schadstoff-text:#B23A4B; --att-cat-schadstoff-fill:#FBE7EA; --att-cat-schadstoff-hl:rgba(178,58,75,.20);
  --att-cat-pflichthandlung-solid:#A23A86; --att-cat-pflichthandlung-text:#A23A86; --att-cat-pflichthandlung-fill:#F6E5F0; --att-cat-pflichthandlung-hl:rgba(162,58,134,.20);
  --att-cat-sonstige-solid:#566B72; --att-cat-sonstige-text:#566B72; --att-cat-sonstige-fill:#EAEEEF; --att-cat-sonstige-hl:rgba(86,107,114,.20);

  /* Severity — 4 levels, always paired with an icon/text glyph (never colour
     only). Solids reuse the reserved status tokens (info uses ink-700); adds
     fills. Note: .att-sev--muss renders brand-900 by design; the -muss tokens
     serve consumers (e.g. warn banners on --att-sev-muss-fill). */
  --att-sev-critical-solid:var(--att-status-danger);  --att-sev-critical-fill:#FBE7EA;
  --att-sev-muss-solid:var(--att-status-warning);     --att-sev-muss-fill:#F6ECD8;
  --att-sev-soll-solid:var(--att-status-info);        --att-sev-soll-fill:#E4ECF6;
  --att-sev-info-solid:var(--att-ink-700);            --att-sev-info-fill:var(--att-ink-50);

  /* Active-evidence highlight (matches the PDF viewer's selected fill). */
  --att-hl-sel-fill:rgba(240,138,20,.50);
  --att-hl-sel-outline:rgba(198,96,8,.9);

  /* App shell */
  --att-app-bg:var(--att-paper-2);
  --att-app-gap:12px;
  --att-app-radius:8px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Base
 * ───────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  font-family: var(--att-font-sans);
  font-size: var(--att-fs-base);
  line-height: var(--att-lh-body);
  color: var(--att-ink-900);
  background: var(--att-paper);
}
@media screen {
  /* Browser-only font-rendering hints — WeasyPrint warns on these. */
  body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--att-space-3);
  font-weight: 600;
  line-height: var(--att-lh-tight);
  color: var(--att-brand-900);
}
h1 { font-size: var(--att-fs-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--att-fs-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--att-fs-xl); }
h4 { font-size: var(--att-fs-lg); }

p { margin: 0 0 var(--att-space-4); }

a {
  color: var(--att-brand-700);
  text-decoration-color: var(--att-brand-300);
  text-underline-offset: 0.18em;
}
a:hover { color: var(--att-brand-500); }

code, pre, kbd, samp {
  font-family: var(--att-font-mono);
  font-size: 0.95em;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Layout primitives
 * ───────────────────────────────────────────────────────────────────────── */

.att-container {
  max-width: var(--att-content-max);
  margin: 0 auto;
  padding: var(--att-space-6) var(--att-space-5);
}

.att-section { margin-top: var(--att-space-7); margin-bottom: var(--att-space-7); }
.att-section--tight { margin-top: var(--att-space-5); margin-bottom: var(--att-space-5); }

/* ─────────────────────────────────────────────────────────────────────────
 * Components
 * ───────────────────────────────────────────────────────────────────────── */

.att-panel {
  background: var(--att-white);
  border: var(--att-border);
  border-radius: var(--att-radius-lg);
  padding: var(--att-space-5);
}
@media screen {
  /* box-shadow is screen-only — WeasyPrint doesn't support it on print. */
  .att-panel { box-shadow: var(--att-shadow-sm); }
}

.att-panel--paper {
  background: var(--att-paper-2);
  border-color: var(--att-ink-100);
}

.att-button {
  display: inline-flex;
  align-items: center;
  gap: var(--att-space-2);
  padding: var(--att-space-2) var(--att-space-4);
  font: inherit;
  font-weight: 500;
  color: var(--att-white);
  background: var(--att-brand-700);
  border: 1px solid var(--att-brand-700);
  border-radius: var(--att-radius-md);
  cursor: pointer;
  text-decoration: none;
}
.att-button:hover { background: var(--att-brand-500); border-color: var(--att-brand-500); color: var(--att-white); }
.att-button--ghost { color: var(--att-brand-700); background: transparent; }
.att-button--ghost:hover { background: var(--att-brand-50); color: var(--att-brand-700); }

.att-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--att-space-1);
  padding: 2px var(--att-space-2);
  font-size: var(--att-fs-xs);
  font-weight: 500;
  border-radius: 999px;
  background: var(--att-ink-50);
  color: var(--att-ink-700);
  border: 1px solid var(--att-ink-100);
}
.att-badge--danger  { background: #FBE7EC; color: var(--att-status-danger);  border-color: #F2C6CF; }
.att-badge--warning { background: #FAF0DA; color: var(--att-status-warning); border-color: #ECD8A6; }
.att-badge--success { background: #DCEEDF; color: var(--att-status-success); border-color: #B4D7BB; }
.att-badge--info    { background: #DCE7F4; color: var(--att-status-info);    border-color: #B4C8E1; }

/* Jurisdiction chip — small flag swatch for "this tender applies to X". */
.att-chip-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--att-space-2);
  padding: 2px var(--att-space-2);
  font-size: var(--att-fs-xs);
  font-weight: 500;
  background: var(--att-white);
  border: var(--att-border);
  border-radius: var(--att-radius-sm);
  color: var(--att-ink-700);
}
.att-chip-flag::before {
  content: "";
  width: 14px; height: 10px;
  border-radius: 1px;
  background: currentColor;
}
.att-chip-flag--at::before {
  background: linear-gradient(to bottom,
    var(--att-flag-at-red) 33%, var(--att-white) 33%, var(--att-white) 66%, var(--att-flag-at-red) 66%);
  border: 0.5px solid var(--att-ink-300);
}
.att-chip-flag--eu::before {
  background: var(--att-flag-eu-blue);
  color: var(--att-flag-eu-gold);
}

/* Finding card — the canonical "we found something in a tender" element. */
.att-finding {
  display: grid;
  grid-template-columns: 4px 1fr;
  background: var(--att-white);
  border: var(--att-border);
  border-radius: var(--att-radius-md);
  overflow: hidden;
  margin-top: var(--att-space-3);
  margin-bottom: var(--att-space-3);
}
.att-finding__bar { background: var(--att-ink-300); }
.att-finding--danger  .att-finding__bar { background: var(--att-status-danger); }
.att-finding--warning .att-finding__bar { background: var(--att-status-warning); }
.att-finding--success .att-finding__bar { background: var(--att-status-success); }
.att-finding--info    .att-finding__bar { background: var(--att-status-info); }
.att-finding__body { padding: var(--att-space-4) var(--att-space-5); }
.att-finding__title { font-weight: 600; margin: 0 0 var(--att-space-1); color: var(--att-ink-900); }
.att-finding__meta  { font-size: var(--att-fs-sm); color: var(--att-ink-700); margin: 0 0 var(--att-space-2); }  /* ink-500 on paper is 4.4994:1 — sub-AA at 14px regular; use ink-700 (9.24:1) per ds-a11y-baseline audit */
.att-finding__quote {
  font-family: var(--att-font-serif);
  font-style: italic;
  color: var(--att-ink-700);
  border-left: 2px solid var(--att-ink-100);
  padding-left: var(--att-space-3);
  margin: var(--att-space-2) 0;
}

/* Swatch — for the style guide and comparison page. */
.att-swatch {
  display: flex; flex-direction: column;
  border: var(--att-border);
  border-radius: var(--att-radius-md);
  overflow: hidden;
  background: var(--att-white);
  font-size: var(--att-fs-xs);
}
.att-swatch__chip { height: 72px; }
.att-swatch__label { padding: var(--att-space-2) var(--att-space-3); display: flex; justify-content: space-between; gap: var(--att-space-2); }
.att-swatch__name { font-weight: 500; color: var(--att-ink-900); }
.att-swatch__hex { font-family: var(--att-font-mono); color: var(--att-ink-500); }

.att-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--att-space-3);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Screen layer — dense app surfaces (v0.2.0, screen-only)
 *
 * Formalises the analysis web app's panes, nav rail, list rows, chips and
 * document viewer. These components never run through WeasyPrint; shadows
 * are still @media screen-guarded for consistency with .att-panel.
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Pane: a bounded region with a 3-step header (overline · title · context) ── */
.att-app-pane {
  background:var(--att-white); border:var(--att-border); border-radius:var(--att-app-radius);
  min-height:0; display:flex; flex-direction:column; overflow:hidden;
}
@media screen { .att-app-pane { box-shadow:var(--att-shadow-sm); } }
.att-app-pane__head { padding:11px 16px; border-bottom:var(--att-border); background:var(--att-paper); }
.att-app-pane__over { font-size:var(--att-fs-ui-xs); text-transform:uppercase; letter-spacing:.07em;
  color:var(--att-brand-500); font-weight:600; margin:0 0 3px; }
.att-app-pane__titlerow { display:flex; align-items:baseline; gap:10px; }
.att-app-pane__title { margin:0; font-size:var(--att-fs-ui-lg); font-weight:600; color:var(--att-brand-900); }
.att-app-pane__context { font-size:var(--att-fs-ui-sm); color:var(--att-ink-700); }
.att-app-pane__body { overflow:auto; padding:12px 16px; }

/* ── Nav rail ── */
.att-app-nav { background:var(--att-white); border:var(--att-border); border-radius:var(--att-app-radius);
  padding:8px; display:flex; flex-direction:column; gap:2px; }
.att-app-nav__label { padding:8px 8px 4px; font-size:var(--att-fs-ui-xs); text-transform:uppercase;
  letter-spacing:.06em; color:var(--att-ink-500); font-weight:600; }
.att-app-nav__item { display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:7px 10px; border-radius:6px; color:var(--att-ink-700); text-decoration:none;
  font-size:var(--att-fs-ui-base); cursor:pointer; }
.att-app-nav__item:hover { background:var(--att-brand-50); color:var(--att-ink-900); text-decoration:none; }
.att-app-nav__item .att-app-n { color:var(--att-ink-500); font-variant-numeric:tabular-nums; font-size:var(--att-fs-ui-sm); }
.att-app-nav__item[aria-current="true"], .att-app-nav__item.is-active {
  background:var(--att-brand-900); color:#fff; font-weight:500; }
.att-app-nav__item[aria-current="true"] .att-app-n,
.att-app-nav__item.is-active .att-app-n { color:rgba(255,255,255,.7); }

/* ── Chip grammar — ONE shape, role decides colour. 22px tall, pill. ── */
.att-chip { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px;
  border-radius:11px; font-size:var(--att-fs-ui-sm); font-weight:500; line-height:1;
  border:1px solid transparent; white-space:nowrap; }
.att-chip__dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }

/* category chip — fill + text from tokens; the dot uses the solid colour */
.att-chip--cat.att-chip--eignung        { background:var(--att-cat-eignung-fill);        color:var(--att-cat-eignung-text); }
.att-chip--cat.att-chip--technik         { background:var(--att-cat-technik-fill);         color:var(--att-cat-technik-text); }
.att-chip--cat.att-chip--formale         { background:var(--att-cat-formale-fill);         color:var(--att-cat-formale-text); }
.att-chip--cat.att-chip--verfahren       { background:var(--att-cat-verfahren-fill);       color:var(--att-cat-verfahren-text); }
.att-chip--cat.att-chip--vertrag         { background:var(--att-cat-vertrag-fill);         color:var(--att-cat-vertrag-text); }
.att-chip--cat.att-chip--zuschlag        { background:var(--att-cat-zuschlag-fill);        color:var(--att-cat-zuschlag-text); }
.att-chip--cat.att-chip--schadstoff      { background:var(--att-cat-schadstoff-fill);      color:var(--att-cat-schadstoff-text); }
.att-chip--cat.att-chip--pflichthandlung { background:var(--att-cat-pflichthandlung-fill); color:var(--att-cat-pflichthandlung-text); }
.att-chip--cat.att-chip--sonstige        { background:var(--att-cat-sonstige-fill);        color:var(--att-cat-sonstige-text); }

/* verbindlichkeit */
.att-chip--muss { background:var(--att-brand-900); color:#fff; font-weight:600; letter-spacing:.02em; }
.att-chip--soll { background:#fff; border-color:var(--att-brand-700); color:var(--att-brand-700); font-weight:600; }

/* konfidenz */
.att-chip--conf-ok      { background:#E3F1E7; border-color:#B6D9C0; color:#17542C; font-weight:600; }
.att-chip--conf-unsure  { background:#F6ECD8; border-color:#E7D3A0; color:#6A5200; font-weight:600; }
.att-chip--conf-none    { background:var(--att-ink-50); border-color:var(--att-ink-100); color:var(--att-ink-700); font-weight:600; }

/* schlagwort (tag) */
.att-chip--tag { background:var(--att-brand-50); border-color:var(--att-brand-100); color:var(--att-brand-700); font-weight:400; }

/* severity pill (icon glyph carried in markup, e.g. ▲ ● ○ ·) */
.att-sev { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:11px;
  font-size:var(--att-fs-ui-xs); font-weight:600; white-space:nowrap; border:1px solid transparent; }
.att-sev--critical { background:var(--att-sev-critical-fill); color:var(--att-sev-critical-solid); }
.att-sev--muss     { background:var(--att-brand-900); color:#fff; }
.att-sev--soll     { background:var(--att-sev-soll-fill); color:var(--att-sev-soll-solid); }
.att-sev--info     { background:var(--att-sev-info-fill); color:var(--att-sev-info-solid); border-color:var(--att-ink-100); }

/* jurisdiction chip in the unified grammar (square swatch; the standalone
   .att-chip-flag component above stays for existing consumers) */
.att-chip--flag { border-radius:5px; background:#fff; border-color:var(--att-ink-100); color:var(--att-ink-700); font-weight:400; }

/* ── List row — category left accent, dominant title, quiet meta ── */
.att-irow { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center;
  padding:11px 14px 11px 12px; border-left:3px solid var(--att-ink-300);
  border-bottom:1px solid var(--att-ink-50); cursor:pointer; }
.att-irow:hover { background:var(--att-brand-50); }
.att-irow.is-selected { background:var(--att-brand-50); box-shadow:inset 3px 0 0 var(--att-brand-900); }
.att-irow__main { min-width:0; }
.att-irow__title { font-size:var(--att-fs-ui-md); color:var(--att-ink-900); }
.att-irow__meta { font-size:var(--att-fs-ui-sm); color:var(--att-ink-700); margin-top:2px; }
.att-irow__src { font-size:var(--att-fs-ui-xs); color:var(--att-brand-700); font-weight:600; white-space:nowrap; }
.att-irow--eignung        { border-left-color:var(--att-cat-eignung-solid); }
.att-irow--technik         { border-left-color:var(--att-cat-technik-solid); }
.att-irow--formale         { border-left-color:var(--att-cat-formale-solid); }
.att-irow--verfahren       { border-left-color:var(--att-cat-verfahren-solid); }
.att-irow--vertrag         { border-left-color:var(--att-cat-vertrag-solid); }
.att-irow--zuschlag        { border-left-color:var(--att-cat-zuschlag-solid); }
.att-irow--schadstoff      { border-left-color:var(--att-cat-schadstoff-solid); }
.att-irow--pflichthandlung { border-left-color:var(--att-cat-pflichthandlung-solid); }
.att-irow--sonstige        { border-left-color:var(--att-cat-sonstige-solid); }

/* ── Document viewer ─────────────────────────────────────────────────────
 * KEY: the PDF view and the Text view share the SAME page surface and the
 * SAME highlight vocabulary. .att-doc__page is the single reading surface;
 * the text view is just flowing <p>s inside it instead of a rendered canvas. */
.att-doc { background:var(--att-white); border:var(--att-border); border-radius:var(--att-app-radius);
  overflow:hidden; display:flex; flex-direction:column; min-height:0; }
.att-doc__bar { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:var(--att-border);
  background:var(--att-paper); font-size:var(--att-fs-ui-sm); }
.att-doc__name { font-weight:600; color:var(--att-ink-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-doc__viewmode { display:inline-flex; border:1px solid var(--att-ink-100); border-radius:5px; overflow:hidden; margin-left:auto; }
.att-doc__vm { padding:3px 10px; font-size:var(--att-fs-ui-xs); background:#fff; color:var(--att-ink-700); border:0; cursor:pointer; }
.att-doc__vm + .att-doc__vm { border-left:1px solid var(--att-ink-100); }
.att-doc__vm.is-active { background:var(--att-brand-900); color:#fff; }
.att-doc__scroll { flex:1; min-height:0; overflow:auto; background:#DCE1E2; padding:16px; }
.att-doc__page { background:#fff; margin:0 auto; max-width:66ch;
  padding:34px 40px 40px;
  font-family:var(--att-font-serif); font-size:13.5px; line-height:1.72; color:#1c2226;
  text-align:justify; hyphens:auto; }
@media screen { .att-doc__page { box-shadow:0 1px 6px rgba(6,47,55,.22); } }
.att-doc__page > p { margin:0 0 10px; }
.att-doc__page > p:last-child { margin-bottom:0; }
.att-doc__section { font-family:var(--att-font-sans); font-size:var(--att-fs-ui-xs);
  text-transform:uppercase; letter-spacing:.05em; color:var(--att-ink-500); margin:0 0 10px; text-align:left; }
.att-doc__pgno { text-align:center; color:#8a9296; font-size:10px; margin-top:22px; font-family:var(--att-font-sans); }
.att-doc__legend { border-top:var(--att-border); background:var(--att-paper); padding:8px 12px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--att-fs-ui-sm); color:var(--att-ink-700); }
.att-doc__legend .att-swatch-dot { width:12px; height:12px; border-radius:3px; }

/* highlights — used identically in PDF overlay and Text view */
.att-hl { border-radius:2px; padding:1px 2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.att-hl--eignung        { background:var(--att-cat-eignung-hl); }
.att-hl--technik         { background:var(--att-cat-technik-hl); }
.att-hl--formale         { background:var(--att-cat-formale-hl); }
.att-hl--verfahren       { background:var(--att-cat-verfahren-hl); }
.att-hl--vertrag         { background:var(--att-cat-vertrag-hl); }
.att-hl--zuschlag        { background:var(--att-cat-zuschlag-hl); }
.att-hl--schadstoff      { background:var(--att-cat-schadstoff-hl); }
.att-hl--pflichthandlung { background:var(--att-cat-pflichthandlung-hl); }
.att-hl--sonstige        { background:var(--att-cat-sonstige-hl); }
/* active/selected evidence — warm amber, wins over any passive category tint */
.att-hl--sel { background:var(--att-hl-sel-fill); outline:1.5px solid var(--att-hl-sel-outline); }

/* ── Control rows (buttons already exist in base DS as .att-button) ── */
.att-app-btnrow { display:flex; gap:7px; flex-wrap:wrap; }
.att-app-btn { display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:6px;
  border:1px solid var(--att-ink-100); background:#fff; color:var(--att-ink-900);
  font:inherit; font-size:var(--att-fs-ui-sm); cursor:pointer; text-decoration:none; }
.att-app-btn:hover { background:var(--att-brand-50); }
.att-app-btn--primary { background:var(--att-brand-700); border-color:var(--att-brand-700); color:#fff; }
.att-app-btn--primary:hover { background:var(--att-brand-500); border-color:var(--att-brand-500); color:#fff; }

/* ─────────────────────────────────────────────────────────────────────────
 * Print — A4, WeasyPrint-compatible paged media
 * ───────────────────────────────────────────────────────────────────────── */

@page {
  size: A4;
  margin: 22mm 18mm 22mm 18mm;
  @top-left     { content: string(att-doc-title);   font-family: var(--att-font-sans); font-size: 9pt; color: var(--att-ink-500); }
  @top-right    { content: string(att-doc-section); font-family: var(--att-font-sans); font-size: 9pt; color: var(--att-ink-500); }
  @bottom-left  { content: string(att-doc-meta);    font-family: var(--att-font-sans); font-size: 8pt; color: var(--att-ink-500); }
  @bottom-right { content: counter(page) " / " counter(pages); font-family: var(--att-font-sans); font-size: 9pt; color: var(--att-ink-500); }

  /* Per-page footnote area. Document-wide counter; numbers carry across pages. */
  @footnote {
    border-top: 0.4pt solid var(--att-ink-300);
    margin-top: 4mm;
    padding-top: 2mm;
    font-family: var(--att-font-sans);
    font-size: 8.5pt;
    line-height: 1.35;
    color: var(--att-ink-700);
  }
}

/* Named page: cover. Suppress all running chrome. */
@page cover {
  @top-left     { content: none; }
  @top-right    { content: none; }
  @bottom-left  { content: none; }
  @bottom-right { content: none; }
}

/* Named page: toc. Override @top-right with literal heading. */
@page toc {
  @top-right { content: "Inhaltsverzeichnis"; }
}

@media print {
  body {
    background: var(--att-white);
    font-size: 10.5pt;
    line-height: 1.45;
    counter-reset: footnote 0;     /* document-wide footnote numbering */
    text-align: left;              /* D2: left-align, never justify */
  }
  /* box-shadow is screen-only; .att-panel's shadow lives in @media screen above. */
  .att-no-print { display: none !important; }

  /* Break hygiene */
  h1, h2, h3 { break-after: avoid; }
  h1.att-chapter { break-before: page; }
  .att-finding { break-inside: avoid; }
  table { break-inside: auto; }
  tr, td, th { break-inside: avoid; }

  /* Long-row override for LV tables — allow break inside descriptive rows. */
  .att-table--lv tr { break-inside: auto; }

  /* PDF outline — free win, zero markup cost. */
  h1 { bookmark-level: 1; bookmark-label: content(text); }
  h2 { bookmark-level: 2; bookmark-label: content(text); }
  h3 { bookmark-level: 3; bookmark-label: content(text); }

  /* Cover and TOC carriers wire themselves to the named pages. */
  .att-cover { page: cover; break-after: page; }
  .att-toc   { page: toc;   break-after: page; }

  /* h2 populates the running chapter header. */
  h2 { string-set: att-doc-section content(); }
}

/* String-set hooks for paged headers — populated by report templates.
   att-doc-title fills @top-left (whole-document title; set once on the cover).
   att-doc-meta  fills @bottom-left (fine-print disclaimer line).
   att-doc-section is set automatically on every h2 inside @media print.

   The carriers are visually hidden but kept in the layout so string-set fires.
   `display: none` would suppress the string update; absolute-off-screen keeps
   layout while removing the box from any page's visible area. */
.att-doc-title,
.att-doc-meta {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}
.att-doc-title { string-set: att-doc-title content(); }
.att-doc-meta  { string-set: att-doc-meta  content(); }

/* ── TOC ──────────────────────────────────────────────────────────── */
.att-toc h1 { margin-bottom: var(--att-space-5); }
.att-toc nav a {
  display: block;
  padding: 4pt 0;
  color: var(--att-ink-900);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  border-bottom: 0.3pt solid var(--att-ink-100);
}
.att-toc nav a.att-toc-l2 { padding-left: 1.2em; font-size: 9.5pt; color: var(--att-ink-700); }
.att-toc nav a::after {
  content: leader(".") " " target-counter(attr(href), page);
  color: var(--att-ink-500);
}

/* ── Footnote ─────────────────────────────────────────────────────── */
.att-footnote { float: footnote; }
.att-footnote::footnote-call {
  content: counter(footnote, decimal);
  vertical-align: super;
  font-size: 0.75em;
  line-height: 0;
  color: var(--att-brand-700);
  font-variant-numeric: tabular-nums;
}
.att-footnote::footnote-marker {
  content: counter(footnote, decimal) ". ";
  font-weight: 600;
  color: var(--att-ink-900);
}

/* ── Table (LV + summary tables) ──────────────────────────────────── */
.att-table {
  width: 100%;
  border-collapse: separate;       /* NOT collapse — breaks repeating thead */
  border-spacing: 0;
  font-size: 9.5pt;
  margin-top: var(--att-space-3);
  margin-bottom: var(--att-space-3);
}
.att-table thead { display: table-header-group; }   /* repeat per page */
.att-table tfoot { display: table-footer-group; }
.att-table th, .att-table td {
  text-align: left;
  padding: 4pt 6pt;
  border-bottom: 0.5pt solid var(--att-ink-100);
  vertical-align: top;
}
.att-table th {
  font-weight: 600;
  font-size: 9pt;
  color: var(--att-ink-700);
  background: var(--att-paper-2);
  border-bottom: 0.5pt solid var(--att-ink-300);
}
.att-table tfoot td {
  font-weight: 600;
  border-top: 0.5pt solid var(--att-ink-300);
  background: var(--att-paper-2);
}
.att-table .att-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.att-table--zebra tbody tr:nth-child(even) td { background: var(--att-paper-2); }

/* ── Status icon (Lucide SVG, pre-coloured per variant) ─────────────────
   Replaces the v0.1.0 unicode-glyph placeholder. WeasyPrint 68.1 silently
   ignores `currentColor` on SVG stroke and `stroke:` CSS declarations
   (Kozea/WeasyPrint#1497), so colour is baked into each vendored SVG file
   under assets/icons/status/. The variant class stays for selector
   compatibility but no longer carries the colour. */
.att-status-icon {
  display: inline-block;
  line-height: 1;
  margin-right: 0.35em;
}
.att-status-icon > svg {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
}
/* Variant modifiers are layout-stable hooks; the colour lives in the SVG.
   Kept empty (not deleted) so consumer markup keeps working unchanged. */
.att-status-icon--danger,
.att-status-icon--warning,
.att-status-icon--success,
.att-status-icon--info { /* colour comes from the inline <svg stroke="..."> */ }

/* ─────────────────────────────────────────────────────────────────────────
 * Accessibility primitives — ds-a11y-baseline
 * ───────────────────────────────────────────────────────────────────────── */

/* :focus-visible — solid 2px outline, brand-500. Use :focus-visible (not :focus)
   so mouse-clickers don't see a ring after every click. WCAG 2.2 SC 2.4.7 (focus
   visible) + 1.4.11 (non-text contrast). Selector list includes both currently
   used components AND forward-compat selectors for forms that haven't shipped
   yet (`button`, `input`, `select`, `textarea`, `[tabindex]:not([tabindex="-1"])`)
   so the rule auto-fires when forms land. */
.att-button:focus-visible,
.att-button--ghost:focus-visible,
a:focus-visible,
.att-badge:focus-visible,
button:focus-visible,
[href]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--att-focus-ring);
  outline-offset: var(--att-focus-ring-offset);
}

/* Reduced motion — blanket-disable per D5 of ds-a11y-baseline. WCAG 2.2 SC 2.3.3.
   The design system has minimal motion (link hover colour transitions only);
   blanket-disabling avoids per-component tagging cost. Consumers can override
   per-component if they ever need to. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Cover page chrome (visible on screen + print) ────────────────── */
.att-cover { padding-top: 25mm; padding-bottom: 25mm; }
.att-cover__wordmark {
  font-family: var(--att-font-sans);
  font-weight: 600;
  font-size: var(--att-fs-lg);
  letter-spacing: 0.02em;
  color: var(--att-brand-900);
}
.att-cover__title {
  font-size: var(--att-fs-3xl);
  color: var(--att-brand-900);
  margin: var(--att-space-5) 0 var(--att-space-3);
  letter-spacing: -0.02em;
}
.att-cover__subtitle {
  font-family: var(--att-font-serif);
  font-style: italic;
  font-size: var(--att-fs-lg);
  color: var(--att-ink-700);
  margin: 0 0 var(--att-space-6);
}
.att-cover__hash { font-family: var(--att-font-mono); font-size: var(--att-fs-xs); color: var(--att-ink-700); }  /* same ink-500 rule as .att-finding__meta */

/* ─────────────────────────────────────────────────────────────────────────
 * Utilities
 * ───────────────────────────────────────────────────────────────────────── */

.att-stack > * + * { margin-top: var(--att-space-4); }
.att-stack-sm > * + * { margin-top: var(--att-space-2); }

.att-row { display: flex; gap: var(--att-space-3); align-items: center; flex-wrap: wrap; }

.att-muted { color: var(--att-ink-500); }
.att-mono  { font-family: var(--att-font-mono); }
.att-serif { font-family: var(--att-font-serif); }