/* ════════════════════════════════════════════════════════════════════════
   brainz-ink.css — KANONISCHE single source: Tokens · A11y · Motion · Primitives.
   Kanon: docs/brainz-mobile/specs/brainz-ink.md
   Konsumenten: dieses Design-System (Referenz) + (Konvergenz-Task #9) die App.
   Plugins lesen NUR ihren Namespace (--bzc-* compose, --rmd-* reminder …),
   NIE --bz-* direkt. Alles host-frei lauffähig durch Fallback-Ketten.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Schicht 1 · APP (--bz-*) — theme-aware, EINZIGE Wahrheit ─────────────── */
:root,
.bzi {
  --bz-bg:        #F4F3EE;
  --bz-card:      #FFFFFF;
  --bz-sub:       #F6F5F1;
  --bz-text:      #1B1E27;
  --bz-muted:     #6E7480;
  --bz-faint:     #9AA0AC;
  --bz-hair:      rgba(25,28,40,.09);
  --bz-hair2:     rgba(25,28,40,.16);
  --bz-accent:    #49AECB;            /* User-Akzent (Aqua, Default)        */
  --bz-accent-ai: #6F5CE8;            /* KI-Identität (light) — eigene Familie */
  --bz-danger:    #C0405A;
  --bz-success:   #2E9E6B;            /* semantische Status-Tokens (DS-Ergänzung) */
  --bz-warn:      #C68A12;
  --bz-route:     #FF6B4A;            /* Routenverläufe auf Globus und Karte (Florian 07.10.: Koralle statt Grün, Abstand zum Warnrot) */
  /* Text-Tinte der Statusfarben (AA ≥ 4,5:1 auf --bz-card und --bz-bg); Status nie über den Produktakzent */
  --bz-success-ink: #1D6B48;
  --bz-warn-ink:    #7A5208;
  --bz-danger-ink:  #8F2A3E;
  --bz-info:        #5B7590;            /* „läuft / in Arbeit“: blaugrau, weder Akzent noch Warnung */
  --bz-info-ink:    #3A5068;
  /* Druck: Papier ist immer hell (auch im Dunkelmodus) – Druck- und PDF-Stile nur über diese Tokens */
  --bz-print-paper: #FFFFFF;
  --bz-print-ink:   #1B1E27;
  --bz-print-muted: #5C6270;
  --bz-print-hair:  rgba(0,0,0,.18);
  /* Herkunft eines Werts (Auftrags-Editor, Inline-Felder; ≥ 3:1 als Markierung, WCAG 1.4.11) */
  --bz-src-source:   #3D7BB8;           /* aus der Quelle (Register, HubSpot …) */
  --bz-src-manual:   #C27C0E;           /* von Hand gesetzt */
  --bz-src-platform: #6B7685;           /* von der Plattform berechnet */
  --bz-src-document: #7A52B3;           /* aus einem Dokument gelesen */
  --bz-src-missing:  #7B828D;           /* fehlt */
  /* Markierungsfarben je Objekt (Projekt, Liste): feste Palette, ≥ 3:1 auf --bz-card/--bz-bg als Markierung (WCAG 1.4.11),
     nie Textfarbe und nie Status – ein Objekt behält überall dieselbe (app-controls tagFor) */
  --bz-tag-1: #3D7BB8;
  --bz-tag-2: #2E8F62;
  --bz-tag-3: #B86E0A;
  --bz-tag-4: #C0405A;
  --bz-tag-5: #7A52B3;
  --bz-tag-6: #1F8585;
  --bz-tag-7: #B5552B;
  --bz-tag-8: #5F6B7A;
  --bz-stage:        #0D1714;           /* dunkle Bühne (Globus, Hero); Apps tönen sie mit dem Akzent (app-controls productTokens) */
  /* Bedienhöhen und Avatar – EINE Quelle für app-controls (Apps) und render_ui-Packs (Visuell ≠ Trefferfläche, s. app-controls) */
  --bz-control-h-compact: 1.75rem;      /* 28 px */
  --bz-control-h-regular: 2.125rem;     /* 34 px, Standard */
  --bz-control-h-large:   3rem;         /* 48 px, nur die EINE Hauptaktion je Handy-Ansicht */
  --bz-avatar-size:    2.125rem;        /* 34 px rund, Initialen oder Foto */
  /* Schriftskala Katalog B = app-controls (Florian 03.10.: render_ui war neben den Bedienelementen zu groß). In rem, damit
     sie mit der Systemschrift wächst; Blöcke nutzen diese Stufen statt fester px. Größere Zahl nur EINMAL je Ansicht. */
  --bz-type-display:  2.25rem;          /* 36 px – die eine große Zahl (Countdown, Kennzahl) */
  --bz-type-headline: 1.5rem;           /* 24 px – Tagestitel über dem Bild, Seitentitel */
  --bz-type-title:    1.125rem;         /* 18 px – Kartentitel, Abschnitt („Vor der Reise“, „5. Athen“) */
  --bz-type-body:     1rem;             /* 16 px – Fließtext, Listeneinträge (Reise-App: ältere Leser) */
  --bz-type-meta:     0.875rem;         /* 14 px – Zweitzeile, Uhrzeit-Zusatz, Quelle */
  --bz-type-small:    0.75rem;          /* 12 px – Badges, Fußnoten; nie kleiner (UX-11) */
  --bz-avatar-size-sm: 1.75rem;         /* 28 px */
  --bz-avatar-bg:  color-mix(in srgb, var(--bz-accent) 14%, var(--bz-card));
  --bz-avatar-ink: var(--bz-accent-ink, var(--bz-accent));
  --bz-rec:       #E0556E;            /* Aufnahme-Rot (≠ danger)            */
  /* ── Geometrie/Typo · Design-Token-Skala T1 ───────────────────────────────
     SINGLE SOURCE = design-tokens.t1.mjs → gen-tokens.mjs schreibt diesen Block.
     Alle Surfaces (Styleguide examples/playfield, App main.ts, render_ui-Bridge)
     ERBEN diese Werte. NICHT von Hand editieren — Werte in design-tokens.t1.mjs
     ändern und `node …/gen-tokens.mjs` laufen lassen. */
  /* T1:start — GENERIERT aus design-tokens.t1.mjs · gen-tokens.mjs · NICHT HAND-EDITIEREN */
  --bz-font-scale: calc(var(--bz-text-size-user, 1) * var(--bz-type-scale, 1));
  --bz-space-scale: 1;
  --bz-radius-scale: 1;
  --bz-type-scale: 1;
  --bz-motion-scale: 1;
  --bz-font-title: calc(16.5px * var(--bz-font-scale));
  --bz-font-body: calc(14px * var(--bz-font-scale));
  --bz-font-meta: calc(11.5px * var(--bz-font-scale));
  --bz-font-label: calc(10.5px * var(--bz-font-scale));
  --bz-font-display: "Saira Condensed", "Roboto Condensed", system-ui, sans-serif;
  --bz-lh-tight: 1.3;
  --bz-lh-normal: 1.5;
  --bz-space-1: calc(4px * var(--bz-space-scale));
  --bz-space-2: calc(8px * var(--bz-space-scale));
  --bz-space-3: calc(12px * var(--bz-space-scale));
  --bz-space-4: calc(16px * var(--bz-space-scale));
  --bz-space-card: calc(13px * var(--bz-space-scale));
  --bz-pad-card-y: calc(15px * var(--bz-space-scale));
  --bz-pad-card-x: calc(16px * var(--bz-space-scale));
  --bz-radius-g: clamp(0, calc(var(--bz-radius-scale) * 8), 1);
  --bz-radius-min: calc(3px * var(--bz-radius-g));
  --bz-r1: max(var(--bz-radius-min), calc(4px * (0.4 + 0.6 * var(--bz-radius-scale)) * var(--bz-radius-g)));
  --bz-r2: max(var(--bz-radius-min), calc(6px * (0.3 + 0.7 * var(--bz-radius-scale)) * var(--bz-radius-g)));
  --bz-r3: max(var(--bz-radius-min), calc(10px * (0.2 + 0.8 * var(--bz-radius-scale)) * var(--bz-radius-g)));
  --bz-r4: max(var(--bz-radius-min), calc(13px * (0.1 + 0.9 * var(--bz-radius-scale)) * var(--bz-radius-g)));
  --bz-r5: max(var(--bz-radius-min), calc(14px * var(--bz-radius-scale) * var(--bz-radius-g)));
  --bz-r6: max(var(--bz-radius-min), calc(18px * var(--bz-radius-scale) * var(--bz-radius-g)));
  --bz-r7: max(var(--bz-radius-min), calc(22px * var(--bz-radius-scale) * var(--bz-radius-g)));
  --bz-radius-card: var(--bz-r6);
  --bz-radius-chip: max(var(--bz-r3), min(999px, calc(999px * clamp(0, calc(var(--bz-radius-scale) * 3), 1))));
  --bz-radius-input: var(--bz-r4);
  --bz-radius-sheet: var(--bz-r7);
  --bz-radius-media: var(--bz-r5);
  --bz-radius-cover: var(--bz-r3);
  --bz-size-icon: 16px;
  --bz-size-touch: 44px;
  --bz-size-thumb: 38px;
  /* T1:end */
  --bz-radius-field: calc(14px * var(--bz-radius-scale)); /* Alt-Alias (9 Leser), brainz-ink-only */
  /* Font-Familien (non-T1): body = Fließtext-Stack (Spiegel: index.html-body / main.ts .shell).
     --bz-font-family-label wird NUR von Themes gesetzt (Editorial → Mono-Eyebrows);
     Konsumenten (Eyebrow-/Label-Klassen) tragen Fallback-Ketten auf display bzw. body. */
  --bz-font-family-body: -apple-system, "SF Pro Text", Roboto, system-ui, sans-serif;
  /* Motion */
  --bz-spring: cubic-bezier(.2,.9,.3,1);
  /* Tiefe */
  --bz-shadow-card:  0 8px 24px -18px rgba(0,0,0,.40);
  --bz-shadow-sheet: 0 30px 70px -34px rgba(0,0,0,.40);
}
/* Dark: ganzseitig via :root[data-theme] ODER explizit .bzi--dark (Spalten-Vergleich).
   Bewusst NICHT [data-theme=dark] .bzi — das würde eine explizite Light-.bzi überschreiben. */
.bzi--dark,
:root[data-theme="dark"] {
  --bz-bg:        #0C0F15;
  --bz-card:      #12161F;
  --bz-sub:       #171C27;
  --bz-text:      #F2F4F8;
  --bz-muted:     #9AA3B2;
  --bz-faint:     #5C6470;
  --bz-hair:      rgba(255,255,255,.075);
  --bz-hair2:     rgba(255,255,255,.13);
  --bz-accent:    #49AECB;
  --bz-accent-ai: #8B7CF6;            /* KI-Identität (dark)                */
  --bz-danger:    #E86A80;            /* fehlte hier bis 09.08. — Light hatte
                                         es, Dark nicht: jede .bzc__callout--danger
                                         blieb dunkel auf dunklem Grund stehen. */
  --bz-success:   #34B27A;
  --bz-warn:      #E0A340;
  --bz-route:     #FF6B4A;
  --bz-success-ink: #7EE0A8;
  --bz-warn-ink:    #F2C77A;
  --bz-danger-ink:  #FFB4C0;
  --bz-info:        #8FA8C2;
  --bz-info-ink:    #B8CCE0;
  --bz-src-source:   #6EA3D8;
  --bz-src-manual:   #E0A340;
  --bz-src-platform: #9AA3B0;
  --bz-src-document: #A585DC;
  --bz-src-missing:  #8B929D;
  --bz-tag-1: #6EA3D8;
  --bz-tag-2: #5CC896;
  --bz-tag-3: #E0A33A;
  --bz-tag-4: #E57D92;
  --bz-tag-5: #A98BDB;
  --bz-tag-6: #4DBDBD;
  --bz-tag-7: #E68F62;
  --bz-tag-8: #9AA4B2;
  --bz-rec:       #E86A80;
  --bz-shadow-card:  0 8px 24px -18px rgba(0,0,0,.70);
  --bz-shadow-sheet: 0 30px 70px -34px rgba(0,0,0,.70);
}

/* ── Editorial-Theme (Papier · Serif · Tinten-Blau · flach/eckig) ─────────────
   App-Gegenstück: .shell[data-theme="editorial"] in main.ts (Light-only, Dark
   bleibt Standard-Dark). Herkunft/Entscheide: specs/editorial-theme-handover.md. */
.bzi--editorial,
:root[data-theme="editorial"] {
  --bz-bg:        #FAFAF7;            /* News-Look: annähernd weiß           */
  --bz-card:      #FFFFFF;
  --bz-sub:       #F4F4EF;
  --bz-text:      #1A1A17;
  --bz-muted:     #6B6A62;
  --bz-faint:     #9A9990;
  --bz-hair:      rgba(26,26,18,.13);
  --bz-hair2:     rgba(26,26,18,.21);
  --bz-accent:    #485B5F;            /* Schiefer-Petrol (gedämpft)         */
  --bz-accent-ai: #5E57B2;            /* KI-Violett reduziert               */
  --bz-radius-scale: .55;
  /* brainz-theme-Achsen: größeres Serif-Lesemaß + ruhigere Bewegung (News/Print).
     Speisen die --as-text-* und --as-motion-* Variablen (theme-scales.css); additiv, Fallback = Default. */
  --bz-type-scale: 1.06;
  --bz-motion-scale: .7;
  --bz-font-display: "Source Serif 4", "Iowan Old Style", Charter, Georgia, serif;
  /* Fließtext = system-ui (Basis --bz-font-family-body); Serif nur Display. */
  --bz-font-family-label: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --bz-shadow-card:  0 1px 0 rgba(26,26,18,.05), 0 6px 18px -14px rgba(26,26,18,.22);
  --bz-shadow-sheet: 0 24px 60px -30px rgba(26,26,18,.32);
  /* Monochrom („Tinte", User 2026-07-18): Familien-Akzente → Akzent; die in der
     App zusätzlich nötigen !important-Interceptions für inline --tc/--ec-* stehen
     in main.ts (Inline-Styles sind im Kanon nicht abbildbar). */
  --evt-accent-override: var(--bz-accent);
  --tsk-accent-override: var(--bz-accent);
  --med-accent-override: var(--bz-accent);
  --cap-accent-override: var(--bz-accent);
  --fin-accent-override: var(--bz-accent);
  --ppl-accent-override: var(--bz-accent);
  --plc-accent-override: var(--bz-accent);
  --vlt-accent-override: var(--bz-accent);
  --sug-accent-override: var(--bz-accent);
  --pro-accent-override: var(--bz-accent);
  --cont-accent-override: var(--bz-accent);
  --mta-accent-override: var(--bz-accent);
  --ing-accent-override: var(--bz-accent);
  --wx-accent-override: var(--bz-accent);
  --trn-accent-override: var(--bz-accent);
  --gen-accent-override: var(--bz-accent);
}

/* ── Schicht 2 · PLUGIN (--bzc-* = compose-Namespace) — abgeleitet ────────────
   Muster für JEDES Plugin: ein Namespace, Fallback-Kette override→--tc→user→hex,
   --<ns>-ai bleibt das KI-Violett (nie überschreibbar). */
.bzc {
  --bzc-accent:  var(--bzc-accent-override, var(--tc, var(--bz-accent, #49AECB)));
  --bzc-ai:      var(--bz-accent-ai, #8B7CF6);
  --bzc-surface: var(--bz-card, #FFFFFF);
  --bzc-sub:     var(--bz-sub, #F6F5F1);
  --bzc-text:    var(--bz-text, #1B1E27);
  --bzc-muted:   var(--bz-muted, #6E7480);
  --bzc-faint:   var(--bz-faint, #9AA0AC);
  --bzc-hair:    var(--bz-hair, rgba(25,28,40,.09));
  --bzc-hair2:   var(--bz-hair2, rgba(25,28,40,.16));
  /* abgeleitet — NON-AI */
  --bzc-glow: color-mix(in srgb, var(--bzc-accent) 42%, transparent);
  --bzc-tint: color-mix(in srgb, var(--bzc-accent) 6%, var(--bzc-surface));
  /* abgeleitet — KI-Aura */
  --bzc-ai-veil: color-mix(in srgb, var(--bzc-ai) 7%, transparent);
  --bzc-ai-glow: color-mix(in srgb, var(--bzc-ai) 42%, transparent);
  --bzc-ai-ring: color-mix(in srgb, var(--bzc-ai) 55%, transparent);
  --bzc-ai-tint: color-mix(in srgb, var(--bzc-ai) 6%, var(--bzc-surface));
  --bzc-radius:       var(--bz-radius-card, 16px);
  --bzc-radius-field: var(--bz-radius-field, 14px);
  --bzc-spring:       var(--bz-spring, cubic-bezier(.2,.9,.3,1));
  color: var(--bzc-text);
}

/* ── A11y-Standards (Pflicht — die „Besser-als-Apple"-Latte) ──────────────────
   ≥44px Touch-Targets · sichtbarer Tastatur-Fokus. */
.bz-tap {                              /* ≥44px Hit-Area um kleinere Visuals    */
  position: relative;
}
.bz-tap::before {
  content: "";
  position: absolute;
  inset: 50% 50% 50% 50%;
  min-width: 44px; min-height: 44px;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
}
:where(.bzc, .bzi) :focus-visible {
  outline: 2px solid var(--bzc-accent, var(--bz-accent, #49AECB));
  outline-offset: 2px;
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════════════════
   PRIMITIVE · Async-State-Pack — kanonisch (Spiegel: apps/mobile/src/compose-async.ts).
   Konvergenz #9: App importiert künftig genau diesen Block.
   ════════════════════════════════════════════════════════════════════════ */
.bzc__async { display: block; }
.bzc__async svg { display: block; }

/* Skeleton — Compositor-konform (transform, NICHT background-position) */
.bzc__skel-set { display: flex; flex-direction: column; gap: 10px; }
.bzc__skel-row { display: flex; flex-direction: column; gap: 7px; padding: 11px 13px; border: 1px solid var(--bzc-hair); border-radius: var(--bzc-radius, 16px); }
.bzc__skel-card { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid var(--bzc-hair); border-radius: var(--bzc-radius, 16px); }
.bzc__skel-lines { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.bzc__skel { position: relative; overflow: hidden; height: 13px; border-radius: 7px; background: var(--bzc-sub, rgba(127,127,127,.10)); }
.bzc__skel--line { height: 13px; }
.bzc__skel--short { width: 54%; }
.bzc__skel--ic { flex: none; width: 36px; height: 36px; border-radius: 11px; }
.bzc__async--ai .bzc__skel { background: var(--bzc-ai-tint, color-mix(in srgb, var(--bzc-ai, #8B7CF6) 8%, transparent)); }
.bzc__skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--bzc-surface, #fff) 65%, transparent) 50%, transparent 100%); }
.bzc__async--ai .bzc__skel::after { background: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--bzc-ai, #8B7CF6) 22%, transparent) 50%, transparent 100%); }

/* Leer- & Fehler-Zustand */
.bzc__async-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 24px 16px; border: 1px solid var(--bzc-hair); border-radius: var(--bzc-radius, 16px); }
.bzc__async-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--bzc-accent, #49AECB); background: color-mix(in srgb, var(--bzc-accent, #49AECB) 13%, transparent); }
.bzc__async-ic svg { width: 22px; height: 22px; }
.bzc__async--ai .bzc__async-empty .bzc__async-ic { color: var(--bzc-ai, #8B7CF6); background: color-mix(in srgb, var(--bzc-ai, #8B7CF6) 13%, transparent); }
.bzc__async-ic--err { color: var(--bz-danger, #C0405A); background: color-mix(in srgb, var(--bz-danger, #C0405A) 12%, transparent); }
.bzc__async-t { font-size: 14.5px; font-weight: 600; color: var(--bzc-text, #1B1E27); }
.bzc__async-d { font-size: 12.5px; line-height: 1.45; color: var(--bzc-muted, #6E7480); max-width: 34ch; }

/* Retry — echtes <button>, ≥44px, sichtbarer Fokus */
.bzc__async-retry { margin-top: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--bzc-hair); background: var(--bzc-sub, rgba(127,127,127,.10)); color: var(--bzc-text, #1B1E27); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.bzc__async-retry svg { width: 16px; height: 16px; }
.bzc__async-retry:focus-visible { outline: 2px solid var(--bzc-accent, #49AECB); outline-offset: 2px; }
.bzc__async-retry:active { transform: scale(.97); }

@media (prefers-reduced-motion: no-preference) {
  .bzc__skel::after { animation: bzc-shimmer 1.25s ease-in-out infinite; }
  @keyframes bzc-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
  .bzc__async-state { animation: bzc-async-rise 320ms var(--bzc-spring, cubic-bezier(.2,.9,.3,1)) both; }
  @keyframes bzc-async-rise { from { transform: translateY(7px); opacity: 0; } to { transform: none; opacity: 1; } }
  .bzc__async-retry { transition: transform .14s ease, background .18s ease, border-color .18s ease; }
}

/* ════════════════════════════════════════════════════════════════════════
   PRIMITIVE · AudioRecorder (kind:"audio", needs:["microphone"])
   States idle → recording → recorded. Wellenform = transform:scaleY (Compositor).
   Transkribieren = der EINZIGE KI-Moment (violett). Aufnahme-Indikator = --bz-rec.
   ════════════════════════════════════════════════════════════════════════ */
.bzc__audio { border: 1px solid var(--bzc-hair); border-radius: var(--bzc-radius, 16px); padding: 12px 14px; }

/* idle — Aufnahme einladen */
.bzc__audio-idle { display: flex; align-items: center; gap: 13px; cursor: pointer; }
.bzc__audio-cue { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: var(--bz-rec, #E0556E); box-shadow: 0 7px 18px -8px color-mix(in srgb, var(--bz-rec, #E0556E) 70%, transparent); }
.bzc__audio-cue svg { width: 20px; height: 20px; }
.bzc__audio-idle-t { font-size: 14.5px; font-weight: 600; color: var(--bzc-text); }
.bzc__audio-idle-s { font-size: 12px; color: var(--bzc-muted); margin-top: 1px; }

/* recording — lebende Wellenform + Timer + Stop */
.bzc__audio-live { display: flex; align-items: center; gap: 12px; }
.bzc__audio-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--bz-rec, #E0556E); }
.bzc__audio-time { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bzc-text); min-width: 40px; }
.bzc__audio-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 34px; overflow: hidden; }
.bzc__audio-bar { flex: 1 1 0; min-width: 0; height: 100%; border-radius: 2px; background: var(--bzc-accent);
  transform: scaleY(var(--h, .3)); transform-origin: center; opacity: .92; }
.bzc__audio-stop { flex: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--bz-rec, #E0556E) 30%, transparent);
  background: color-mix(in srgb, var(--bz-rec, #E0556E) 12%, transparent); }
.bzc__audio-stop::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--bz-rec, #E0556E); }
.bzc__audio-stop:focus-visible { outline: 2px solid var(--bz-rec, #E0556E); outline-offset: 2px; }

/* recorded — Playback-Scrubber + Dauer + erneut + Transkribieren */
.bzc__audio-play-row { display: flex; align-items: center; gap: 12px; }
.bzc__audio-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: var(--bzc-accent); display: grid; place-items: center; box-shadow: 0 6px 16px -9px var(--bzc-glow); }
.bzc__audio-play svg { width: 17px; height: 17px; margin-left: 2px; }
.bzc__audio-play:focus-visible { outline: 2px solid var(--bzc-accent); outline-offset: 3px; }
.bzc__audio-track { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; cursor: pointer; }
.bzc__audio-track .bzc__audio-bar { background: var(--bzc-hair2); opacity: 1; }
.bzc__audio-track .bzc__audio-bar--on { background: var(--bzc-accent); }
.bzc__audio-dur { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bzc-muted); min-width: 34px; text-align: right; }
.bzc__audio-foot { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.bzc__audio-redo { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 13px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--bzc-hair); background: transparent; color: var(--bzc-muted); font: inherit; font-size: 13px; font-weight: 600; }
.bzc__audio-redo svg { width: 14px; height: 14px; }
.bzc__audio-redo:focus-visible { outline: 2px solid var(--bzc-accent); outline-offset: 2px; }
/* Transkribieren — KI-Moment (violett, nicht überschreibbar) */
.bzc__audio-tr { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 15px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--bzc-ai-ring); background: var(--bzc-ai-tint); color: var(--bzc-ai); font: inherit; font-size: 13px; font-weight: 600; }
.bzc__audio-tr svg { width: 15px; height: 15px; }
.bzc__audio-tr:focus-visible { outline: 2px solid var(--bzc-ai); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .bzc__audio--recording .bzc__audio-bar { animation: bzc-wave 1.1s ease-in-out infinite; animation-delay: var(--d, 0ms); }
  @keyframes bzc-wave { 0%, 100% { transform: scaleY(var(--h, .25)); } 50% { transform: scaleY(var(--h2, 1)); } }
  .bzc__audio--recording .bzc__audio-dot { animation: bzc-rec-pulse 1.15s ease-in-out infinite; }
  @keyframes bzc-rec-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
}

/* ════════════════════════════════════════════════════════════════════════
   PRIMITIVE · Callout — tonale Verallgemeinerung von aiNote.
   Tones info/success/warn/danger über --tone; ai = das KI-Violett (Kanon).
   ════════════════════════════════════════════════════════════════════════ */
.bzc__callout { --tone: var(--bzc-accent); display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px;
  border-radius: var(--bzc-radius, 16px);
  border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
  background: color-mix(in srgb, var(--tone) 6%, var(--bzc-surface)); }
.bzc__callout-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); }
.bzc__callout-ic svg { width: 17px; height: 17px; }
.bzc__callout-body { min-width: 0; }
.bzc__callout-t { font-size: 13.5px; font-weight: 600; color: var(--bzc-text); }
.bzc__callout-d { font-size: 12.5px; line-height: 1.45; color: var(--bzc-muted); margin-top: 2px; }
.bzc__callout--info    { --tone: var(--bzc-accent); }
.bzc__callout--success { --tone: var(--bz-success, #2E9E6B); }
.bzc__callout--warn    { --tone: var(--bz-warn, #C68A12); }
.bzc__callout--danger  { --tone: var(--bz-danger, #C0405A); }
.bzc__callout--ai      { --tone: var(--bzc-ai); }