/* ============================================================
   zenpAI Arbeitsbereich — design system: tokens, reset, primitives and the
   per-component sections the app shell composes. A copy of the homepage
   stylesheet, not an include: the two are expected to diverge.
   No CDN, no stylesheet pulled in from elsewhere, no url() pointing off-origin,
   no external request of any kind. System font stacks only.
   ============================================================ */

/* ── 1. Design tokens ─────────────────────────────────────────────── */
:root{
  --kohle:#2A2A2C;          /* base background */
  --kohle-tief:#1C1C1E;     /* deep bands */
  --eierschale:#EDE9E2;     /* universal foreground */
  --orange:#D97757;         /* accent — Anthropic coral */
  --cta-bg:#B85434;         /* solid-button terracotta — WCAG AA vs white */
  --cta-bg-hover:#9E4529;
  --graphit:var(--eierschale);  /* primary text — flips per theme */
  --kaolin:#EDE9E2;             /* always-light cream */
  --blau:var(--orange);         /* accent alias used throughout the system */
  --schiefer:#9B958B;       /* muted foreground */
  --hellgrau:#CBC5BB;       /* secondary text on dark */
  --mittelgrau:#928D85;     /* muted text on the deepest surfaces */
  --linie:rgba(237,233,226,0.13);   /* eggshell hairline */
  --ease:cubic-bezier(0.4, 0, 0.2, 1);
  /* Free, privacy-clean system fonts — no external request, no web fonts. */
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Consolas, monospace;
}
[data-theme="light"]{
  --kohle:#EDE9E2;
  --eierschale:#0E1013;
  --orange:#C0492A;
  --schiefer:#6B7280;
  --linie:rgba(14,16,19,0.12);
}

/* Cards, radii, elevation. */
:root{
  --kohle-card:#303032;
  --kohle-card-2:#343437;
  --radius:3px;
  --radius-lg:8px;
  --shadow-soft:0 10px 34px rgba(0,0,0,0.22);
}
[data-theme="light"]{
  --kohle-card:#F5F2EC;
  --kohle-card-2:#EFEBE3;
  --shadow-soft:0 10px 34px rgba(14,16,19,0.07);
}

/* ── 2. App tokens ────────────────────────────────────────────────── */
:root{
  --app-header-h:68px;
  --rail-w:400px;
  --measure:74ch;
  --hatch: repeating-linear-gradient(135deg,
             var(--blau) 0 2px, transparent 2px 6px);
}

/* ── 3. Reset. `scroll-behavior:smooth` is deliberately absent from the
   html{} rule: inherited, it would animate every one of the ~60 programmatic
   scrolls per second the transcript autoscroll performs and turn it into a
   visible rubber-band. Smooth scrolling is opt-in per call (the "Zum Ende"
   pill only) and is set in Rust, never here. The one occurrence below sits
   inside the prefers-reduced-motion kill switch, restoring the non-smooth
   default. ── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:var(--sans);
  font-weight:400;
  font-size:16.5px;
  line-height:1.62;
  color:var(--eierschale);
  background:var(--kohle);
}
[data-theme="light"] body{background:var(--kohle);color:var(--eierschale)}
body{transition:background 380ms var(--ease), color 380ms var(--ease), border-color 380ms var(--ease)}

@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}
}

.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}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px}

/* .wrap — a centred max-width column for modal bodies and any other centred
   surface. The app shell itself is a header + CSS grid and does not need it. */
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
@media (max-width:720px){.wrap{padding:0 20px}}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ── 4. Base typography. Two families: system sans for prose, mono uppercase
   (0.06–0.14em tracking) for everything labelled — eyebrows, classifications,
   field names, chips, table headers, the composer label, the trace
   ledger. ── */
.mono-label{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:0.1em;
  font-size:11px;font-weight:500;color:var(--schiefer);
}
.mono-label.fg{color:var(--graphit)}
.mono-label.accent{color:var(--blau)}
.num{font-variant-numeric:tabular-nums}

/* ── 5. Primitives ────────────────────────────────────────────────── */

/* .card — raised surface, hairline border, hover lifts 4px and borders coral.
   Reveal is a CSS @keyframes animation with `backwards` fill, not a
   class-removal transition: that leaves elements stuck at opacity:0 when the
   class is gone before first paint. Leptos sets
   `style="animation-delay: …ms"` per item for the stagger. */
.card{
  background:var(--kohle-card);border:1px solid var(--linie);border-radius:var(--radius-lg);
  transition:transform 280ms var(--ease), border-color 280ms var(--ease), box-shadow 280ms var(--ease);
  animation:card-in 420ms var(--ease) backwards;
}
.card:hover{transform:translateY(-4px);border-color:var(--blau);box-shadow:var(--shadow-soft)}
@keyframes card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* A source card's border flashes coral for 600ms when its [n] citation anchor
   is clicked. Applied as a class toggle the caller removes after the animation
   ends. */
@keyframes card-flash{from{box-shadow:inset 0 0 0 1px var(--blau);border-color:var(--blau)}to{box-shadow:inset 0 0 0 1px transparent}}
.card.flash{animation:card-flash 600ms var(--ease)}

/* .chip — pill: 1px hairline, radius 20px, 6/14px padding, mono uppercase.
   .chip.on = coral text + color-mix border. Used for the compliance chip,
   source-count chips and any other small status pill. */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--linie);border-radius:20px;padding:6px 14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--schiefer);
  transition:border-color 200ms var(--ease), color 200ms var(--ease);
}
.chip.on{color:var(--blau);border-color:color-mix(in srgb, var(--blau) 42%, transparent)}
.chip.interactive{cursor:pointer}
.chip.interactive:hover{border-color:var(--blau);color:var(--blau)}
.chip .dot{width:5px;height:5px;border-radius:1px;background:currentColor}

/* .ledger — hairline rows, mono uppercase labels in a left column. A <dl>:
   <dt> the field name, <dd> the value. Used by the trace panel's request
   ledger and the document panel's key/value listing. */
.ledger{display:grid;grid-template-columns:118px minmax(0,1fr);gap:0 12px;font-size:12.5px}
.ledger dt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--schiefer);padding:5px 0;border-top:1px solid var(--linie);
}
.ledger dd{padding:5px 0;border-top:1px solid var(--linie);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ledger dd.mono{font-family:var(--mono);font-size:11px}
.ledger dd.accent{color:var(--blau)}
.ledger .ledger-note{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:0.06em;
  color:var(--mittelgrau);text-transform:uppercase;margin-top:2px;
}
@media (max-width:720px){.ledger{grid-template-columns:100px minmax(0,1fr)}}

/* .rule — the visual escalation ladder: ONE hue, THREE textures.
   No red/amber/green severity ramp.
     .rule            hairline  = normal
     .rule--classified solid 3px coral = classified
     .rule--blocked    hatched 3px coral = blocked / anomalous
   Used standalone (DiscardedPanel, DocumentPanel 404/451, chain-verify
   failure) and composed into .banner below. */
.rule{border-left:1px solid var(--linie);padding-left:15px}
.rule--classified{border-left:3px solid var(--blau);padding-left:16px}
.rule--blocked{border-left:3px solid transparent;border-image:var(--hatch) 1;padding-left:16px}

/* ── 6. Logo — 26×26 box, 3 bars (first coral, other two foreground),
   theme-flipping wordmark. Pure CSS, no image. ── */
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{
  width:26px;height:26px;border:1.8px solid var(--graphit);border-radius:3px;
  display:flex;flex-direction:column;justify-content:space-between;padding:4px 3px;
  flex-shrink:0;
}
.logo-mark span{display:block;height:3px;width:100%;background:var(--graphit);border-radius:0.5px}
.logo-mark span:first-child{background:var(--blau)}
.logo-word{font-family:var(--sans);font-weight:800;font-size:19px;letter-spacing:-0.04em;color:var(--graphit)}
.logo-word .accent{color:var(--blau)}

/* ── 7. Buttons ────────────────────────────────────────────────────
   .btn         solid CTA (--cta-bg) — composer send, report "save as file".
   .btn--outline coral outline, no fill — the "Abbrechen" (stream abort) /
                secondary-action shape.
   .btn--ghost  mono, borderless until hover — header icon buttons, rail
                tabs' sibling actions. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:-0.005em;
  padding:11px 20px;border-radius:2px;border:0;cursor:pointer;
  background:var(--cta-bg);color:#fff;
  transition:background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease), border-color 200ms var(--ease);
}
.btn:hover{background:var(--cta-bg-hover);color:#fff;transform:translateX(3px)}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}

.btn--outline{
  background:none;color:var(--blau);
  border:1px solid color-mix(in srgb, var(--blau) 45%, transparent);
}
.btn--outline:hover{background:none;border-color:var(--blau);color:var(--blau);transform:none}
.btn--outline:disabled{opacity:0.5;cursor:not-allowed}

.btn--ghost{
  background:none;color:var(--schiefer);
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  padding:8px 11px;border:1px solid transparent;border-radius:var(--radius);
}
.btn--ghost:hover{color:var(--blau);border-color:var(--linie);transform:none}
.btn--ghost.outline{border-color:var(--linie);color:var(--graphit)}
.btn--ghost.outline:hover{border-color:var(--blau);color:var(--blau)}

/* ── 8. Form fields — transparent background, bottom-border only, coral
   focus, mono uppercase label. Used by the composer and the report dialog's
   date input. */
.field{display:flex;flex-direction:column;gap:6px}
.field label{
  font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--schiefer);
  text-transform:uppercase;
}
.field input,.field select,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--linie);
  padding:10px 0;color:var(--graphit);font-family:var(--sans);font-size:15px;
  transition:border-color 220ms var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blau)}
.field textarea{resize:vertical;min-height:80px;font-family:var(--sans)}

/* .field-group — the composer shape: one shared bottom border under a
   textarea *and* its adjoining send button, highlighting on focus-within
   rather than on the control itself. */
.field-group{
  display:flex;align-items:flex-end;gap:14px;
  border-bottom:1px solid var(--linie);
  transition:border-color 200ms var(--ease);
}
.field-group:focus-within{border-bottom-color:var(--blau)}
.field-group textarea,.field-group input{
  flex:1;background:none;border:0;outline:0;resize:none;
  color:var(--graphit);font-family:var(--sans);font-size:16.5px;line-height:1.5;
  padding:6px 0 12px;
}
.field-group textarea{max-height:160px}
.field-group textarea::placeholder,.field-group input::placeholder{color:var(--schiefer)}

/* ── 9. Classification banner. Escalates by TEXTURE, not by hue:
     null        no banner at all
     oeffentlich hairline, muted label
     intern      hairline, foreground label
     vertraulich coral-tinted hairline
     vs-nfd      solid 3px coral rule + coral label + faint coral tint
   The word "belegt"/"nachgewiesen" (the provable-claim wording) is a
   content rule enforced by `banner.rs`'s truth table, not by CSS — it
   renders into the same `.banner-note` slot as every other note below,
   styled identically. */
.banner{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
  padding:11px 0 11px 15px;margin-bottom:14px;
  border-left:1px solid var(--linie);
}
.banner .banner-level{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--schiefer);
}
.banner .banner-note{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--schiefer)}
.banner .banner-note a{color:var(--blau);border-bottom:1px solid color-mix(in srgb, var(--blau) 40%, transparent)}

.banner[data-level="intern"] .banner-level{color:var(--graphit)}

.banner[data-level="vertraulich"]{border-left-color:color-mix(in srgb, var(--blau) 45%, transparent)}
.banner[data-level="vertraulich"] .banner-level{color:var(--graphit)}

.banner[data-level="vs-nfd"]{
  border-left:3px solid var(--blau);padding-left:16px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--blau) 8%, transparent), transparent 62%);
}
.banner[data-level="vs-nfd"] .banner-level{color:var(--blau)}

/* The third texture — hatched — is not a classification level, it is the
   anomaly state: Missing trace, 404/451 document, a broken audit chain.
   Compounded as `.banner.banner--blocked` (0,2,0), not a bare `.banner--blocked`
   (0,1,0): the `Missing` state keeps `data-level` set (so the label still names
   the real classification) and needs the hatched rule to win over that level's
   own `[data-level="…"]` rule (also 0,2,0); a tie resolves by source order, and
   this block comes after all four of them. */
.banner.banner--blocked{
  border-left:3px solid transparent;border-image:var(--hatch) 1;padding-left:16px;
}
.banner.banner--blocked .banner-level{color:var(--graphit)}

/* ── 10. Transcript — no chat bubbles, the transcript is a ledger.
   Questions: mono eyebrow + set question, coral hairline on the left.
   Answers: body text on the page ground, separated by hairlines. */
.qa-question{padding-left:16px;border-left:2px solid var(--blau);margin:8px 0 30px}
.qa-question .mono-label{margin-bottom:8px;display:block}
.qa-question p{font-size:20px;font-weight:600;letter-spacing:-0.015em;line-height:1.38;max-width:60ch}
.qa-answer{padding-bottom:56px;border-bottom:1px solid var(--linie);margin-bottom:44px}
.qa-answer:last-child{border-bottom:0;padding-bottom:20px;margin-bottom:0}

/* The conversation-cut divider: a slim, centred rule so it reads as a boundary
   in the ledger rather than another question. */
.conversation-divider{
  display:flex;align-items:center;gap:12px;margin:18px 0 30px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--schiefer);
}
.conversation-divider::before,.conversation-divider::after{content:"";flex:1;height:1px;background:var(--linie)}

/* Phase line — mono status text above the streaming answer body. */
.phase{
  display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:0.09em;text-transform:uppercase;color:var(--schiefer);
  margin-bottom:16px;min-height:18px;
}
.phase .cursor{width:7px;height:13px;background:var(--blau);animation:phase-blink 1.05s steps(1) infinite}
@keyframes phase-blink{50%{opacity:0}}
.phase .nums{color:var(--mittelgrau);letter-spacing:0.05em}

/* Answer footer — model · usage · latency · hash · trace chip · copy. */
.answer-footer{
  display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;
  margin-top:26px;padding-top:14px;border-top:1px solid var(--linie);
}
.answer-footer span{font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--schiefer)}
.answer-footer .k{color:var(--mittelgrau)}
.answer-footer button{font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--schiefer)}
.answer-footer button:hover{color:var(--blau)}

/* Discarded-answer panel — mid-stream truncation. Hatched-rule
   container; the disclosed text is mono and deliberately not styled as
   an answer. */
.discarded{border-left:3px solid transparent;border-image:var(--hatch) 1;padding-left:16px;margin-top:18px}
.discarded h4{font-size:15px;font-weight:650;margin-bottom:6px}
.discarded details{margin-top:10px}
.discarded summary{font-family:var(--mono);font-size:11px;letter-spacing:0.09em;text-transform:uppercase;color:var(--blau);cursor:pointer}
.discarded pre{
  margin-top:10px;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--mittelgrau);
  background:var(--kohle-card);border:1px solid var(--linie);border-radius:var(--radius-lg);
  padding:14px;white-space:pre-wrap;user-select:none;
}

/* "Zum Ende" jump-to-latest pill — opacity and transform together, both eased,
   both killed under prefers-reduced-motion by the global switch above. */
.jump-pill{
  position:absolute;left:50%;bottom:calc(100% + 14px);transform:translate(-50%,6px);
  display:inline-flex;align-items:center;gap:9px;background:var(--kohle-card);
  border:1px solid var(--linie);border-radius:999px;padding:8px 17px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--graphit);box-shadow:var(--shadow-soft);opacity:0;pointer-events:none;
  transition:opacity 220ms var(--ease), transform 220ms var(--ease);
  z-index:20;
}
.jump-pill.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.jump-pill:hover{border-color:var(--blau);color:var(--blau)}
.jump-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--blau);opacity:0}
.jump-pill.new .dot{opacity:1}

/* ── 11. Markdown answer body — the ONLY high-frequency region.
   Class names below are load-bearing: `.md`, `.md-block` and `.md-tail`
   are referenced verbatim from the Leptos view, and `a.cite` is the exact
   anchor `md/cite.rs` emits as raw HTML
   (`<a class="cite" href="#src-N" data-n="N">[N]</a>`). Do not rename
   without updating those call sites. */
.md{max-width:var(--measure)}
.md-block + .md-block{margin-top:1.05em}
.md-tail:empty{display:none}
.md p{line-height:1.62}
.md h1{font-size:21px}
.md h2{font-size:19px}
.md h3{font-size:17px}
.md h1,.md h2,.md h3{font-weight:700;letter-spacing:-0.02em;line-height:1.2;margin-top:0.3em}
.md ul,.md ol{padding-left:1.15em}
.md li{margin:0.22em 0}
.md li::marker{color:var(--schiefer)}
.md strong{font-weight:650}
.md code{
  font-family:var(--mono);font-size:0.87em;background:var(--kohle-card);
  border:1px solid var(--linie);border-radius:2px;padding:1px 5px;
}
.md pre{
  background:var(--kohle-card);border:1px solid var(--linie);border-radius:var(--radius-lg);
  padding:16px 18px;overflow-x:auto;
}
.md pre code{background:none;border:0;padding:0;font-size:12.5px;line-height:1.62;color:var(--hellgrau)}
.md table{border-collapse:collapse;width:100%;font-size:14.5px}
.md .table-wrap{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--radius-lg)}
.md th{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--schiefer);text-align:left;padding:11px 14px;border-bottom:1px solid var(--linie);
  background:var(--kohle-card);
}
.md td{padding:10px 14px;border-bottom:1px solid var(--linie);font-variant-numeric:tabular-nums}
.md tr:last-child td{border-bottom:0}
.md a.cite{
  display:inline-block;font-family:var(--mono);font-size:0.78em;font-weight:600;
  color:var(--blau);vertical-align:0.12em;padding:0 1px;
  border-bottom:1px solid transparent;transition:border-color 150ms var(--ease);
}
.md a.cite:hover{border-bottom-color:var(--blau)}

/* ── 12. Trace panel — the chain spine. A vertical hairline with one 10px
   rounded-square node per chained event (the logo mark's geometry — not
   circles). Nodes fill solid coral over 240ms as their event lands. */
.spine{position:relative;padding-left:22px;margin-top:4px}
.spine::before{
  content:"";position:absolute;left:5.5px;top:6px;bottom:6px;width:1px;
  background:color-mix(in srgb, var(--blau) 32%, transparent);
}
.spine-event{position:relative;padding-bottom:22px}
.spine-event::before{
  content:"";position:absolute;left:-22px;top:4px;width:10px;height:10px;border-radius:2px;
  border:1px solid var(--linie);background:var(--kohle);
  transition:background 240ms var(--ease), border-color 240ms var(--ease);
}
.spine-event.on::before{background:var(--blau);border-color:var(--blau)}
.spine-event.pending::before{border-style:dashed}
.spine-event .spine-event-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.spine-event .spine-event-title{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.11em;
  text-transform:uppercase;color:var(--schiefer);
}
.spine-event.on .spine-event-title{color:var(--graphit)}
.spine-event .spine-event-time{font-family:var(--mono);font-size:10px;color:var(--mittelgrau);font-variant-numeric:tabular-nums}

/* The »Kondensierung« node's disclosure. Reuses `.spine-event`'s own node/title
   styling; the head is a plain button here (the other two nodes have none —
   they fill automatically) so it needs its chrome reset and a pointer
   cursor. */
.spine-event.condense .spine-event-head{
  width:100%;background:none;border:0;padding:0;cursor:pointer;text-align:left;
}
.spine-event.condense .spine-event-head:hover .spine-event-title{color:var(--blau)}

/* Request-id header above the spine, and the chain-verify result bar. */
.trace-id{
  display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--linie);
}
.trace-id code{font-family:var(--mono);font-size:11px;color:var(--blau)}
.verify-bar{
  margin-top:6px;padding:13px 14px;border:1px solid var(--linie);border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.verify-bar .status{font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--schiefer)}
.verify-bar .status.ok{color:var(--blau)}

/* ── 13. Source cards. Composes the `.card` primitive
   (background/border/radius/hover-lift/flash) with the app's own internal
   layout: an eyebrow row (citation number, always coral mono; classification,
   right, mono, coral only at vs-nfd — the same escalate-by-texture-not-hue
   restraint as the banner), a sans title that falls back to `source_path` when
   `title` is null, a doc_ref/revision mono line, the source_path itself (mono,
   muted, wraps anywhere) and — only when `revision_note` is present — a
   coral-ruled note.
   `.hovered`/`.selected` are the reactive half of the [n] <-> card sync — NOT
   `:hover`, because the reader may be hovering the `[n]` anchor in the
   transcript rather than the card itself; `sources.rs` drives both
   directions. */
.sources{display:flex;flex-direction:column;gap:14px}
/* The condensed retrieval query, shown only when it differs from the typed
   question (a rewritten query the reader cannot see is retrieval theatre). */
.retrieval-query{margin:-2px 0 2px}

.source-card{
  display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;
  padding:16px 17px 15px;cursor:pointer;
}
.source-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.source-card-title{font-family:var(--sans);font-size:14.5px;font-weight:600;line-height:1.4}
.source-card-ref{margin-top:-2px}
.source-card-path{overflow-wrap:anywhere}
.source-card-note{
  margin-top:2px;padding-left:11px;border-left:2px solid var(--blau);
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.02em;line-height:1.5;
  color:var(--schiefer);
}
.source-card.hovered,.source-card.selected{border-color:var(--blau)}
.source-card.selected{box-shadow:inset 0 0 0 1px var(--blau)}

/* The reverse half of the same sync — the `[n]` anchor lighting up when its
   card is hovered/selected. Classes only: the anchors are raw `inner_html` and
   are toggled directly by `sources.rs`'s `Effect`, never by Leptos. */
.md a.cite.hovered,.md a.cite.selected{
  background:color-mix(in srgb, var(--blau) 16%, transparent);border-radius:2px;
}

/* ── 14. Compliance chip. The `.chip`/`.chip.on` primitive IS the muted/coral
   distinction; this adds only the category/count disclosure beneath it. Counts
   and category names only — `Compliance` carries nothing else, so there is
   nothing else this markup could show even by accident (see `compliance.rs`). */
.compliance{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.compliance-categories{list-style:none;display:flex;flex-direction:column;gap:4px}

/* ── 15. Document panel. The 200 state reuses `.ledger` behind a `meta` JSON
   disclosure; 404/451 reuse the standalone `.rule--blocked` hatched rule with a
   heading and explanatory prose — the same weight as the success state, because
   both failure states ARE the demonstration, not error handling bolted on
   beside it. */
.document-panel{display:flex;flex-direction:column;gap:18px}
.document-panel h3{font-family:var(--sans);font-size:15px;font-weight:650;margin-bottom:6px}
.document-panel .rule--blocked p{margin-top:8px;line-height:1.55}
.document-ledger details{margin-top:14px}
.document-ledger summary{
  font-family:var(--mono);font-size:11px;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--blau);cursor:pointer;
}
.document-ledger pre{
  margin-top:10px;font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--mittelgrau);
  background:var(--kohle-card);border:1px solid var(--linie);border-radius:var(--radius-lg);
  padding:12px;white-space:pre-wrap;overflow-wrap:anywhere;
}

/* ── 16. Report dialog. A native <dialog>: `report.rs` calls
   `show_modal()`/`close()`, never an `open` attribute toggle — only the
   imperative API gives the UA's own backdrop, focus trap and Escape-to-close
   for free. The UA default dialog chrome (white canvas, 1em border) is reset
   below to the card surface. The chain-broken state reuses
   `.banner.banner--blocked` — the same hatched composition `trace.rs`'s
   `Kette prüfen` uses for a broken chain — rather than a second "this audit
   chain is broken" treatment, and the intact state reuses
   `.verify-bar .status.ok` for the identical reason. */
/* The UA-default reset and the card paint must stay in ONE rule: split apart,
   the reset (0-1-1) outweighs the paint (0-1-0) and the modal renders
   transparent. */
dialog.report-dialog{
  border:1px solid var(--linie);padding:0;color:inherit;max-width:none;max-height:82vh;
  background:var(--kohle-card);border-radius:var(--radius-lg);
  width:min(760px,100%);box-shadow:var(--shadow-soft);
}
dialog.report-dialog::backdrop{background:rgba(0,0,0,0.5)}
.report-dialog-body{display:flex;flex-direction:column;max-height:82vh}
.report-dialog-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;border-bottom:1px solid var(--linie);
}
.report-dialog-head h3{font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:-0.02em}
/* The "Auditorensicht" chip + subline, stacked under the title rather than
   beside it: the chip alone reuses `.chip.on` from the header's replay
   indicator, so the subline is what actually explains the label. */
.report-dialog-title-group{display:flex;flex-direction:column;gap:6px;min-width:0}
.report-dialog-auditor{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.report-dialog-auditor-subline{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.02em;color:var(--schiefer);
}
.report-dialog-content{padding:20px 24px 26px;overflow-y:auto;flex:1;min-height:0}
.report-body{display:flex;flex-direction:column;gap:14px}
.report-body.rule--blocked{padding:2px 0 2px 16px}
.report-body h4{font-family:var(--sans);font-size:15px;font-weight:650}
.report-dialog-foot{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:16px 24px;border-top:1px solid var(--linie);
}
.report-dialog-foot input[type="date"]{
  background:none;border:0;border-bottom:1px solid var(--linie);color:inherit;
  font-family:var(--mono);font-size:12px;padding:6px 2px;
}
.report-dialog-foot input[type="date"]:focus{outline:0;border-bottom-color:var(--blau)}
.report-dialog-foot input[type="date"]:disabled{opacity:0.5}
@media (max-width:600px){.report-dialog{width:100%;max-height:100%;border-radius:0}}

/* ── 17. Purpose dialog. A form fragment inside the report dialog's own
   `.report-dialog-content` — `purpose.rs` raises no native `<dialog>` of its
   own, so it needs only its own heading spacing and action-row layout; the
   textarea itself reuses `.field`'s bottom-border treatment (above) exactly
   as the login form's inputs do. The rejected-attempt error line reuses
   `.rule--blocked` (the same treatment `LoginScreen`'s own error slot uses)
   rather than a second "this was refused" texture. */
.purpose-form{display:flex;flex-direction:column;gap:14px}
.purpose-form h4{font-family:var(--sans);font-size:15px;font-weight:650}
.purpose-form-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}
@media (max-width:420px){.purpose-form-actions{justify-content:stretch}
  .purpose-form-actions .btn,.purpose-form-actions .btn--ghost{flex:1}}