/* Chaos AV design system — flattened build 20260927. Source: tokens/ + css/. Do not edit here. */
/* ── tokens/fonts.css ── */
/* Chaos AV webfonts — self-hosted (no Google request, GDPR-safe for a German site).
   Drop these woff2 files into assets/fonts/ (Google Fonts / fontsource, latin subset):
     BarlowCondensed-500.woff2  BarlowCondensed-600.woff2  BarlowCondensed-700.woff2
     Inter-400.woff2  Inter-500.woff2  Inter-600.woff2
     JetBrainsMono-400.woff2  JetBrainsMono-500.woff2  JetBrainsMono-600.woff2  JetBrainsMono-700.woff2
   local() is tried first, so a machine with the fonts installed never downloads them.
   Until the files exist, the fallback stacks in typography.css render instead. */
@font-face{font-family:"Barlow Condensed";font-weight:500;font-style:normal;font-display:swap;src:local("Barlow Condensed Medium"),local("BarlowCondensed-Medium"),url("../fonts/BarlowCondensed-500.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:local("Barlow Condensed SemiBold"),local("BarlowCondensed-SemiBold"),url("../fonts/BarlowCondensed-600.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:local("Barlow Condensed Bold"),local("BarlowCondensed-Bold"),url("../fonts/BarlowCondensed-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:local("Inter Regular"),local("Inter-Regular"),url("../fonts/Inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:local("Inter Medium"),local("Inter-Medium"),url("../fonts/Inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:local("Inter SemiBold"),local("Inter-SemiBold"),url("../fonts/Inter-600.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap;src:local("JetBrains Mono Regular"),local("JetBrainsMono-Regular"),url("../fonts/JetBrainsMono-400.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-style:normal;font-display:swap;src:local("JetBrains Mono Medium"),local("JetBrainsMono-Medium"),url("../fonts/JetBrainsMono-500.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-style:normal;font-display:swap;src:local("JetBrains Mono SemiBold"),local("JetBrainsMono-SemiBold"),url("../fonts/JetBrainsMono-600.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-style:normal;font-display:swap;src:local("JetBrains Mono Bold"),local("JetBrainsMono-Bold"),url("../fonts/JetBrainsMono-700.woff2") format("woff2")}

/* ── tokens/colors.css ── */
/* Chaos AV colours — dark is the brand's home; light is the approved variant (Sep 2026).
   Dark is declared on bare :root. Light applies when the system asks for it
   (prefers-color-scheme: light) unless a page pins data-theme="dark", and always
   under data-theme="light". Components only ever use the variables. */
:root{
color-scheme:dark;
/* ── Flächen ─────────────────────────────── from rec-calc-v6.html / tokens.css */
--cav-bg:#0B0D0F;
--cav-panel:#15181B;
--cav-panel-2:#1B1F23;

/* ── Linien ─────────────────────────────── */
--cav-line:#262B2F;
--cav-line-2:#33393E;
--cav-line-strong:#33393E; /* alias of --cav-line-2 */

/* ── Text ───────────────────────────────── */
--cav-text:#E8EAED;
--cav-text-dim:#8B939B;
--cav-text-faint:#7C858D; /* was #565D64 — lifted to 4.5:1 on panel for 11px labels */

/* ── Grün · Primärfarbe (Logo rgb(47,180,74)) ─────────────────────── */
--cav-green:#2FB44A;
--cav-green-dim:#16552A;
--cav-green-wash:rgba(47,180,74,.08);
--cav-green-ink:#06140B;   /* Text auf grüner Fläche */

/* ── Amber · Achtung / Schätzwert ─────────────────────────────────── */
--cav-amber:#FF9F1C;
--cav-amber-dim:#7A5115;
--cav-amber-wash:rgba(255,159,28,.08);

/* ── Rot · live / kritisch (Logo #DD4C3A) ─────────────────────────── */
--cav-red:#DD4C3A;
--cav-red-dim:#461A12;
--cav-red-wash:rgba(221,76,58,.08);

/* ── Cyan · Daten, Links, Info (Logo #5FCEEB) ─────────────────────── */
--cav-cyan:#5FCEEB;
--cav-cyan-hover:#9ADFF2;
--cav-cyan-dim:#163A45;
--cav-cyan-wash:rgba(95,206,235,.07);

/* ── Sand · nur Markenflächen ─────────────────────────────────────── */
--cav-tan:#B59586;
--cav-tan-dim:#3B2F2A;

/* ── App-Schicht: Leisten, Overlays, Zeichnungen ──────────────────── */
--cav-bar-bg:rgba(11,13,15,.86);      /* sticky header + tab bar, with blur(10px) */
--cav-readout-top:#101315;
--cav-readout-bottom:#0D0F11;
--cav-overlay-shadow:rgba(0,0,0,.55);
--cav-scrim:rgba(0,0,0,.6);
--cav-knob:#8B939B;                    /* switch knob, off */

/* ── Semantische Aliase — im Produktcode diese benutzen ───────────── */
--surface-page:var(--cav-bg);
--surface-card:var(--cav-panel);
--surface-inset:var(--cav-panel-2);
--border-default:var(--cav-line);
--border-strong:var(--cav-line-2);
--text-body:var(--cav-text);
--text-muted:var(--cav-text-dim);
--text-meta:var(--cav-text-faint);
--text-link:var(--cav-cyan);
--action-primary:var(--cav-green);
--action-primary-ink:var(--cav-green-ink);
--state-live:var(--cav-red);
--state-caution:var(--cav-amber);
--state-data:var(--cav-cyan);
--focus-ring:var(--cav-green);

/* ── Logo-Rampe ───────────────────────────────────────────────────── */
--cav-logo-1:var(--cav-red);
--cav-logo-2:var(--cav-tan);
--cav-logo-3:var(--cav-cyan);
--cav-logo-4:var(--cav-green);
}

/* ── Light variant ────────────────────────────────────────────────────
   Same roles, same solid-companion rule (no alpha tints for dims).
   Accent hues are darkened until text on white clears AA:
   green #187A31 5.4:1 · cyan #0B6F96 5.6:1 · amber #A04F00 5.4:1 · red #C0301F 5.6:1.
   The mark keeps its black tile — it has no transparent version. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --cav-bg:#ECEEF0; --cav-panel:#FFFFFF; --cav-panel-2:#F4F5F6;
    --cav-line:#D5DADE; --cav-line-2:#BCC3C9; --cav-line-strong:#BCC3C9;
    --cav-text:#111417; --cav-text-dim:#4B535B; --cav-text-faint:#5E666E;
    --cav-green:#187A31; --cav-green-dim:#DDF1E1; --cav-green-wash:rgba(24,122,49,.06); --cav-green-ink:#FFFFFF;
    --cav-amber:#A04F00; --cav-amber-dim:#FAE8CF; --cav-amber-wash:rgba(160,79,0,.06);
    --cav-red:#C0301F; --cav-red-dim:#F8E0DB; --cav-red-wash:rgba(192,48,31,.05);
    --cav-cyan:#0B6F96; --cav-cyan-hover:#08506D; --cav-cyan-dim:#DCEFF6; --cav-cyan-wash:rgba(11,111,150,.05);
    --cav-tan:#8A6A5C; --cav-tan-dim:#EDE3DE;
    --cav-bar-bg:rgba(236,238,240,.86);
    --cav-readout-top:#FFFFFF; --cav-readout-bottom:#F6F7F8;
    --cav-overlay-shadow:rgba(17,20,23,.18); --cav-scrim:rgba(17,20,23,.35);
    --cav-knob:#FFFFFF;
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --cav-bg:#ECEEF0; --cav-panel:#FFFFFF; --cav-panel-2:#F4F5F6;
  --cav-line:#D5DADE; --cav-line-2:#BCC3C9; --cav-line-strong:#BCC3C9;
  --cav-text:#111417; --cav-text-dim:#4B535B; --cav-text-faint:#5E666E;
  --cav-green:#187A31; --cav-green-dim:#DDF1E1; --cav-green-wash:rgba(24,122,49,.06); --cav-green-ink:#FFFFFF;
  --cav-amber:#A04F00; --cav-amber-dim:#FAE8CF; --cav-amber-wash:rgba(160,79,0,.06);
  --cav-red:#C0301F; --cav-red-dim:#F8E0DB; --cav-red-wash:rgba(192,48,31,.05);
  --cav-cyan:#0B6F96; --cav-cyan-hover:#08506D; --cav-cyan-dim:#DCEFF6; --cav-cyan-wash:rgba(11,111,150,.05);
  --cav-tan:#8A6A5C; --cav-tan-dim:#EDE3DE;
  --cav-bar-bg:rgba(236,238,240,.86);
  --cav-readout-top:#FFFFFF; --cav-readout-bottom:#F6F7F8;
  --cav-overlay-shadow:rgba(17,20,23,.18); --cav-scrim:rgba(17,20,23,.35);
  --cav-knob:#FFFFFF;
}
@media (prefers-contrast:more){
  :root{--cav-line:var(--cav-line-2);--cav-text-dim:var(--cav-text);--cav-text-faint:var(--cav-text-dim)}
}

/* ── tokens/typography.css ── */
:root{
--cav-font-display:"Barlow Condensed",'Arial Narrow',sans-serif;
--cav-font-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
--cav-font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

/* type scale — sizes as used in rec-calc-v6.html and the styleguide */
--cav-fs-display-xl:38px;  /* styleguide lockup h1 */
--cav-fs-display-l:26px;   /* panel-title step number */
--cav-fs-display-m:24px;   /* type specimen / card headings */
--cav-fs-display-s:22px;   /* section h2, topbar brand */
--cav-fs-readout:22px;     /* readout-value */
--cav-fs-body:16px;
--cav-fs-body-s:15px;      /* lead paragraph */
--cav-fs-control:13px;     /* buttons, inputs */
--cav-fs-meta:12.5px;      /* log items */
--cav-fs-micro:11.5px;     /* note boxes, footnote */
--cav-fs-nano:11px;        /* labels, badges, mono meta */
--cav-fs-pico:9.5px;       /* sub-labels, confidence badges */

--cav-lh-tight:1; /* @kind other */
--cav-lh-readout:1.1; /* @kind other */
--cav-lh-snug:1.5; /* @kind other */
--cav-lh-body:1.7; /* @kind other */

/* tracking — Barlow Condensed is always tracked out */
--cav-ls-display:.06em; /* @kind other */
--cav-ls-heading:.08em; /* @kind other */
--cav-ls-label:.06em; /* @kind other */
--cav-ls-readout:.07em; /* @kind other */
--cav-ls-mono:.03em; /* @kind other */

--cav-fw-body:400; /* @kind other */
--cav-fw-medium:500; /* @kind other */
--cav-fw-semibold:600; /* @kind other */
--cav-fw-bold:700; /* @kind other */

/* semantic aliases */
--font-heading:var(--cav-font-display);
--font-text:var(--cav-font-body);
--font-numeric:var(--cav-font-mono);
}

/* ── tokens/spacing.css ── */
:root{
/* No abstract scale — these are the steps rec-calc-v6.html and the styleguide
   actually use. Off-grid values are deliberate; do not snap them to 4/8px. */
--cav-space-3:3px;
--cav-space-4:4px;
--cav-space-5:5px;
--cav-space-6:6px;
--cav-space-8:8px;
--cav-space-10:10px;
--cav-space-13:13px;
--cav-space-14:14px;
--cav-space-16:16px;
--cav-space-18:18px;
--cav-space-20:20px;
--cav-space-22:22px;
--cav-space-28:28px;

/* Named application of those steps */
--cav-panel-pad:18px 18px 20px;  /* .panel — asymmetric, bottom is heavier */
--cav-panel-gap:16px;            /* .panel + .panel */
--cav-field-gap:13px;            /* .field bottom margin */
--cav-field-row-gap:10px;        /* .row2 / .row3 inner gap */
--cav-gutter:16px;               /* .grid gap */
--cav-readout-pad:22px;          /* .readout */
--cav-readout-cell-pad:16px 14px;
--cav-log-gap:6px;
--cav-hero-pad:40px;             /* styleguide .hero */
--cav-section-gap:64px;          /* styleguide section spacing */

/* Page widths: tools are wider than content pages */
--cav-page-max-tool:1180px;      /* rec-calc .wrap */
--cav-page-max:1080px;           /* styleguide / site .wrap */
--cav-page-pad-tool:28px 20px 60px;
--cav-page-pad:48px 24px 100px;
}

/* ── tokens/radius-shadow.css ── */
:root{
/* The theme is nearly square: 3px everywhere, 2px on badges. */
--cav-radius:3px;
--cav-radius-s:2px;
--cav-radius-pill:999px; /* dots only — never buttons or bars */

/* Flat by design — borders carry the structure. */
--cav-shadow-none:none;
--cav-shadow-overlay:0 18px 44px var(--cav-overlay-shadow);
--cav-ring-live:0 0 0 3px var(--cav-red-dim);
--cav-focus-ring:0 0 0 2px var(--cav-bg),0 0 0 3px var(--cav-green);

/* The only gradients in the brand: the result panel ground and the tape fill. */
--cav-grad-readout:linear-gradient(180deg,var(--cav-readout-top),var(--cav-readout-bottom)); /* @kind color */
--cav-grad-tape:linear-gradient(90deg,var(--cav-cyan-dim),var(--cav-cyan));
--cav-grad-tape-partial:linear-gradient(90deg,var(--cav-amber-dim),var(--cav-amber));

/* Die Farbfolge des Logos als Verlauf — Hero-Kanten, Trennlinien, Print. */
--cav-grad-logo:linear-gradient(180deg,var(--cav-red),var(--cav-tan),var(--cav-cyan),var(--cav-green)); /* @kind color */
--cav-grad-logo-x:linear-gradient(90deg,var(--cav-red),var(--cav-tan),var(--cav-cyan),var(--cav-green)); /* @kind color */

--border-hairline:1px solid var(--cav-line);
}

/* ── tokens/motion.css ── */
:root{
--cav-dur-fast:150ms; /* @kind other */  /* border/colour on controls */
--cav-dur:250ms; /* @kind other */       /* state changes, dots */
--cav-dur-slow:500ms; /* @kind other */  /* gauges, tape fills */
--cav-ease:cubic-bezier(.4,0,.2,1); /* @kind other */
--cav-ease-io:ease-in-out; /* @kind other */
--cav-pulse:1.6s; /* @kind other */
--cav-hover-opacity:.88; /* @kind other */
}
@keyframes cav-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){:root{--cav-dur-fast:0ms; /* @kind other */ --cav-dur:0ms; /* @kind other */ --cav-dur-slow:0ms; /* @kind other */}}

/* ── tokens/app.css ── */
/* App layer tokens — behaviour borrowed from native apps, look stays Chaos AV.
   See guidelines/app-layer.md. */
:root{
--cav-tap:44px;            /* minimum touch target (Apple HIG 44pt, Material 48dp → 44 is the floor) */
--cav-field-font:16px;     /* inputs never below 16px, or iPhone zooms on focus */
--cav-appbar-h:52px;       /* compact sticky header */
--cav-tabbar-h:56px;       /* bottom tab bar, excluding the home-indicator inset */
--cav-bar-blur:blur(10px); /* the only sanctioned blur: header + tab bar */
--cav-safe-t:env(safe-area-inset-top,0px);
--cav-safe-r:env(safe-area-inset-right,0px);
--cav-safe-b:env(safe-area-inset-bottom,0px);
--cav-safe-l:env(safe-area-inset-left,0px);
--cav-gutter-x:max(20px,calc(var(--cav-safe-l) + 12px));
--cav-page-dur:200ms;      /* cross-document page change */
}
@media (max-width:520px){:root{--cav-gutter-x:max(16px,calc(var(--cav-safe-l) + 10px))}}
@media (prefers-reduced-motion:reduce){:root{--cav-page-dur:0ms}}

/* ── css/base.css ── */
html{box-sizing:border-box;background:var(--cav-bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--cav-bg);color:var(--cav-text);font-family:var(--cav-font-body);font-size:var(--cav-fs-body);line-height:var(--cav-lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,.cav-heading{font-family:var(--cav-font-display);font-weight:var(--cav-fw-bold);text-transform:uppercase;letter-spacing:var(--cav-ls-display);line-height:var(--cav-lh-tight);color:var(--cav-text);margin:0 0 12px}
h1{font-size:var(--cav-fs-display-xl)}h2{font-size:var(--cav-fs-display-s);letter-spacing:var(--cav-ls-heading)}h3{font-size:var(--cav-fs-display-m)}
p{margin:0 0 16px;text-wrap:pretty}
a{color:var(--cav-cyan);text-decoration:none;border-bottom:1px solid var(--cav-cyan-dim);transition:color var(--cav-dur-fast) var(--cav-ease),border-color var(--cav-dur-fast) var(--cav-ease)}
a:hover{color:var(--cav-cyan-hover);border-bottom-color:var(--cav-cyan)}
a:active{opacity:var(--cav-hover-opacity)}
code,kbd,samp,pre,.cav-mono,.cav-value{font-family:var(--cav-font-mono)}
:focus-visible{outline:none;box-shadow:var(--cav-focus-ring)}
hr{border:none;border-top:1px solid var(--cav-line);margin:24px 0}
::selection{background:var(--cav-green);color:var(--cav-green-ink)}

/* ── css/cav-components.css ── */
/* Chaos AV component classes — values taken from tokens.css and rec-calc-v6.html.
   Plain CSS, cav- prefixed, no build step: drop into a WordPress child theme and
   use the classes directly in Gutenberg blocks / template parts. */

.cav-wrap{max-width:1180px;margin:0 auto;padding:28px 20px 60px}
.cav-wrap--page{max-width:1080px;padding:48px 24px 100px}

/* ── Buttons ─────────────────────────────────────────── */
.cav-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--cav-font-display);font-weight:var(--cav-fw-semibold);text-transform:uppercase;letter-spacing:var(--cav-ls-label);font-size:var(--cav-fs-control);color:var(--cav-green-ink);background:var(--cav-green);border:none;border-radius:var(--cav-radius);padding:10px 20px;cursor:pointer;transition:opacity var(--cav-dur-fast) var(--cav-ease)}
.cav-btn:hover{opacity:var(--cav-hover-opacity)}
.cav-btn:disabled{opacity:.4;cursor:not-allowed}
.cav-btn--ghost{color:var(--cav-text);background:transparent;border:1px solid var(--cav-line-2)}
.cav-btn--danger{color:var(--cav-text);background:var(--cav-red)}
.cav-btn--sm{font-size:var(--cav-fs-nano);padding:6px 12px}
.cav-btn--lg{font-size:var(--cav-fs-body-s);padding:13px 26px}

/* Export/tool button — panel-2 fill, accent on hover (rec-calc topbar) */
.cav-export-btn{background:var(--cav-panel-2);border:1px solid var(--cav-line-2);color:var(--cav-text-dim);font-family:var(--cav-font-display);font-weight:var(--cav-fw-semibold);text-transform:uppercase;letter-spacing:.05em;font-size:var(--cav-fs-nano);padding:6px 12px;border-radius:var(--cav-radius);cursor:pointer;transition:border-color var(--cav-dur-fast) var(--cav-ease),color var(--cav-dur-fast) var(--cav-ease)}
.cav-export-btn:hover{border-color:var(--cav-green);color:var(--cav-green)}

/* ── Badges — solid dim fill, accent text ────────────── */
.cav-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--cav-font-mono);font-size:var(--cav-fs-nano);letter-spacing:var(--cav-ls-mono);padding:3px 8px;border-radius:var(--cav-radius);color:var(--cav-text-dim);background:var(--cav-panel-2)}
.cav-badge--green{color:var(--cav-green);background:var(--cav-green-dim)}
.cav-badge--amber{color:var(--cav-amber);background:var(--cav-amber-dim)}
.cav-badge--red{color:var(--cav-red);background:var(--cav-red-dim)}
.cav-badge--cyan{color:var(--cav-cyan);background:var(--cav-cyan-dim)}
.cav-badge--micro{font-size:var(--cav-fs-pico);padding:2px 6px;border-radius:var(--cav-radius-s);letter-spacing:.04em}

/* ── Status dot ──────────────────────────────────────── */
.cav-dot{width:10px;height:10px;border-radius:50%;background:var(--cav-text-faint);flex:none;transition:var(--cav-dur)}
.cav-dot.live{background:var(--cav-red);box-shadow:var(--cav-ring-live);animation:cav-pulse var(--cav-pulse) var(--cav-ease-io) infinite}
.cav-dot.ok{background:var(--cav-green)}
.cav-dot.data{background:var(--cav-cyan)}
.cav-dot.warn{background:var(--cav-amber)}

/* ── Panels ──────────────────────────────────────────── */
.cav-panel{background:var(--cav-panel);border:1px solid var(--cav-line);border-radius:var(--cav-radius);padding:18px 18px 20px}
.cav-panel+.cav-panel{margin-top:16px}
.cav-panel--inset{background:var(--cav-panel-2)}
.cav-panel--flush{padding:0;overflow:hidden}
.cav-panel__head,.cav-panel-title{font-family:var(--cav-font-display);font-weight:var(--cav-fw-semibold);text-transform:uppercase;letter-spacing:var(--cav-ls-heading);font-size:14px;color:var(--cav-text-dim);margin:0 0 14px;display:flex;align-items:center;gap:8px}
.cav-panel-title .num{color:var(--cav-green);font-family:var(--cav-font-mono);font-size:var(--cav-fs-display-l);font-weight:var(--cav-fw-bold);line-height:1;letter-spacing:-.02em}

/* ── Fields ──────────────────────────────────────────── */
.cav-label{display:block;font-family:var(--cav-font-display);font-weight:var(--cav-fw-semibold);font-size:var(--cav-fs-nano);text-transform:uppercase;letter-spacing:var(--cav-ls-label);color:var(--cav-text-faint);margin-bottom:5px}
.cav-label--sub{font-size:var(--cav-fs-pico);margin-bottom:4px}
.cav-input,.cav-select{width:100%;background:var(--cav-panel-2);border:1px solid var(--cav-line-2);color:var(--cav-text);padding:9px 10px;border-radius:var(--cav-radius);font-family:var(--cav-font-mono);font-size:var(--cav-fs-control);outline:none;transition:border-color var(--cav-dur-fast) var(--cav-ease)}
.cav-input:focus,.cav-select:focus{border-color:var(--cav-green)}
.cav-input::placeholder{color:var(--cav-text-faint)}
.cav-field{margin-bottom:13px}
.cav-field:last-child{margin-bottom:0}
.cav-hint{font-size:var(--cav-fs-nano);color:var(--cav-text-faint);margin-top:4px;line-height:var(--cav-lh-snug)}

/* ── Segmented toggle ────────────────────────────────── */
.cav-toggle{display:flex;border:1px solid var(--cav-line-2);border-radius:var(--cav-radius);overflow:hidden}
.cav-toggle button{flex:1;padding:9px 8px;background:var(--cav-panel-2);border:none;color:var(--cav-text-dim);font-family:var(--cav-font-display);font-weight:var(--cav-fw-semibold);letter-spacing:.04em;text-transform:uppercase;font-size:12px;cursor:pointer;transition:var(--cav-dur-fast)}
.cav-toggle button.active{background:var(--cav-green);color:var(--cav-green-ink)}
.cav-toggle button:not(.active):hover{color:var(--cav-text)}

/* ── Note boxes ──────────────────────────────────────── */
.cav-note{font-size:var(--cav-fs-micro);margin-top:8px;line-height:var(--cav-lh-snug);padding:8px 10px;border-radius:var(--cav-radius)}
.cav-note--green{color:var(--cav-green);background:var(--cav-green-wash);border:1px solid var(--cav-green-dim)}
.cav-note--amber{color:var(--cav-amber);background:var(--cav-amber-wash);border:1px solid var(--cav-amber-dim)}
.cav-note--cyan{color:var(--cav-cyan);background:var(--cav-cyan-wash);border:1px solid var(--cav-cyan-dim)}
.cav-note--red{color:var(--cav-red);background:var(--cav-red-wash);border:1px solid var(--cav-red-dim)}

/* ── Result readout ──────────────────────────────────── */
.cav-readout{background:var(--cav-grad-readout);border:1px solid var(--cav-line);border-radius:var(--cav-radius);padding:22px;margin-top:16px}
.cav-readout-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--cav-line)}
.cav-readout-cell{padding:16px 14px;border-right:1px solid var(--cav-line);border-bottom:1px solid var(--cav-line)}
.cav-readout-cell:last-child{border-right:none}
.cav-readout-label{font-family:var(--cav-font-display);text-transform:uppercase;letter-spacing:var(--cav-ls-readout);font-size:10.5px;color:var(--cav-text-faint);margin-bottom:6px}
.cav-readout-value{font-family:var(--cav-font-mono);font-size:var(--cav-fs-readout);font-weight:var(--cav-fw-semibold);color:var(--cav-cyan);line-height:var(--cav-lh-readout);font-variant-numeric:tabular-nums}
.cav-readout-value .unit{font-size:12px;color:var(--cav-text-dim);font-weight:var(--cav-fw-body);margin-left:4px}

/* ── Log list ────────────────────────────────────────── */
.cav-log{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.cav-log-item{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:var(--cav-radius);font-size:var(--cav-fs-meta);line-height:var(--cav-lh-snug);border:1px solid var(--cav-line);background:var(--cav-panel-2)}
.cav-log-item .dot{width:7px;height:7px;border-radius:50%;margin-top:5px;flex:none}
.cav-log-item.warn{border-color:var(--cav-red-dim)}
.cav-log-item.warn .dot{background:var(--cav-red)}
.cav-log-item.warn b{color:var(--cav-red)}
.cav-log-item.info{border-color:var(--cav-line-2)}
.cav-log-item.info .dot{background:var(--cav-cyan)}
.cav-log-item.info b{color:var(--cav-cyan)}
.cav-log-item.ok{border-color:var(--cav-green-dim)}
.cav-log-item.ok .dot{background:var(--cav-green)}
.cav-log-item.ok b{color:var(--cav-green)}

/* ── Wordmark lockup ─────────────────────────────────── */
.cav-lockup{font-family:var(--cav-font-display);font-weight:var(--cav-fw-bold);text-transform:uppercase;letter-spacing:var(--cav-ls-display);line-height:var(--cav-lh-tight);color:var(--cav-text)}
.cav-lockup .sep{color:var(--cav-green)}
.cav-lockup__sub{font-family:var(--cav-font-mono);font-size:var(--cav-fs-nano);letter-spacing:var(--cav-ls-mono);color:var(--cav-text-faint);margin-top:8px}

/* ── Logo slot (rec-calc keeps a dashed placeholder until a mark exists) ── */
.cav-logo-slot{height:44px;min-width:44px;padding:0 12px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--cav-line-2);border-radius:var(--cav-radius);font-family:var(--cav-font-mono);font-size:10px;letter-spacing:.14em;color:var(--cav-text-faint);flex:none}
img.cav-logo-slot{border:none;padding:0;object-fit:contain}

/* ── Do / Don't boxes (styleguide) ───────────────────── */
.cav-guide{border-radius:var(--cav-radius);padding:16px;font-size:13px;line-height:1.6;color:var(--cav-text-dim)}
.cav-guide--do{border:1px solid var(--cav-green-dim);background:var(--cav-green-wash)}
.cav-guide--dont{border:1px solid var(--cav-red-dim);background:var(--cav-red-wash)}

/* ── css/cav-app.css ── */
/* Chaos AV app layer — how a Chaos AV page behaves when it is used like an app.
   Native conventions shape behaviour (safe areas, tab bar, touch sizes, standalone
   mode, page changes); the look stays Chaos AV: hairlines, 3px, Barlow uppercase,
   mono numbers. No Liquid Glass, no capsules, no slide-ins. See guidelines/app-layer.md. */

/* ── Touch ─────────────────────────────────────────────── */
a,button,summary,label,select,input,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{-webkit-user-select:none;user-select:none}
html{overscroll-behavior-x:none}
@media (pointer:coarse){
  .cav-btn,.cav-export-btn,.cav-toggle button{min-height:var(--cav-tap)}
  .cav-btn--sm{min-height:36px}
  .cav-input,.cav-select,input,select,textarea{font-size:max(var(--cav-field-font),1em)}
}

/* ── Compact header (sticky) ───────────────────────────── */
.cav-appbar{position:sticky;top:0;z-index:30;padding-top:var(--cav-safe-t);background:var(--cav-bar-bg);
  -webkit-backdrop-filter:var(--cav-bar-blur);backdrop-filter:var(--cav-bar-blur);border-bottom:1px solid var(--cav-line);
  view-transition-name:cav-appbar}
.cav-appbar__in{display:flex;align-items:center;gap:12px;min-height:var(--cav-appbar-h);max-width:var(--cav-page-max-tool);margin:0 auto;
  padding:0 max(var(--cav-gutter-x),calc(var(--cav-safe-r) + 12px)) 0 var(--cav-gutter-x)}
.cav-appbar__logo{width:32px;height:32px;border-radius:var(--cav-radius);object-fit:cover;flex:none;display:block}
.cav-appbar__title{font-family:var(--cav-font-display);font-weight:var(--cav-fw-bold);text-transform:uppercase;letter-spacing:var(--cav-ls-display);
  font-size:20px;line-height:1;color:var(--cav-text);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cav-appbar__title .sep,.cav-appbar__title span{color:var(--cav-green)}
.cav-appbar__meta{margin-left:auto;font-family:var(--cav-font-mono);font-size:var(--cav-fs-nano);letter-spacing:var(--cav-ls-mono);color:var(--cav-text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-variant-numeric:tabular-nums}
.cav-appbar__meta b{color:var(--cav-cyan);font-weight:600}
@media (prefers-reduced-transparency:reduce){.cav-appbar,.cav-tabbar{background:var(--cav-bg);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Back button: hairline chevron + CHAOS·AV, 44px target */
.cav-back{display:inline-flex;align-items:center;gap:6px;min-height:var(--cav-tap);margin-left:-10px;padding:0 10px;border:none;border-radius:var(--cav-radius);
  font-family:var(--cav-font-display);font-weight:var(--cav-fw-semibold);text-transform:uppercase;letter-spacing:var(--cav-ls-label);font-size:13px;
  color:var(--cav-green);text-decoration:none;flex:none;transition:opacity var(--cav-dur-fast) var(--cav-ease)}
.cav-back svg{width:9px;height:16px;flex:none}
.cav-back:hover{color:var(--cav-green);opacity:var(--cav-hover-opacity);border:none}
.cav-back:active{opacity:.6}

/* ── Bottom tab bar ────────────────────────────────────── */
.cav-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--cav-bar-bg);
  -webkit-backdrop-filter:var(--cav-bar-blur);backdrop-filter:var(--cav-bar-blur);border-top:1px solid var(--cav-line);
  padding:0 var(--cav-safe-r) var(--cav-safe-b) var(--cav-safe-l);view-transition-name:cav-tabbar}
.cav-tabbar ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;max-width:560px}
.cav-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--cav-tabbar-h);padding:0 8px;border:none;
  font-family:var(--cav-font-display);font-weight:var(--cav-fw-semibold);text-transform:uppercase;letter-spacing:var(--cav-ls-label);font-size:14px;
  color:var(--cav-text-dim);text-decoration:none;transition:color var(--cav-dur-fast) var(--cav-ease)}
.cav-tab::before{content:"";position:absolute;top:-1px;left:50%;width:32px;height:2px;margin-left:-16px;background:transparent;transition:background-color var(--cav-dur-fast) var(--cav-ease)}
.cav-tab:hover{color:var(--cav-text);border:none}
.cav-tab[aria-current="page"]{color:var(--cav-green)}
.cav-tab[aria-current="page"]::before{background:var(--cav-green)}
.cav-tab__count{font-family:var(--cav-font-mono);font-size:var(--cav-fs-nano);font-weight:500;letter-spacing:var(--cav-ls-mono);color:var(--cav-text-faint)}
.cav-tab[aria-current="page"] .cav-tab__count{color:var(--cav-green)}
body.has-tabbar{padding-bottom:calc(var(--cav-tabbar-h) + var(--cav-safe-b))}

/* ── Switch (checkbox) — replaces the iOS capsule switch ── */
.cav-switch,input[type="checkbox"].cav-switch{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:44px;height:24px;margin:0;cursor:pointer;
  background:var(--cav-panel-2);border:1px solid var(--cav-line-2);border-radius:var(--cav-radius);transition:background-color var(--cav-dur-fast) var(--cav-ease),border-color var(--cav-dur-fast) var(--cav-ease)}
.cav-switch::before{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:var(--cav-radius-s);background:var(--cav-knob);
  transition:transform var(--cav-dur) var(--cav-ease),background-color var(--cav-dur-fast) var(--cav-ease)}
.cav-switch:checked{background:var(--cav-green);border-color:var(--cav-green)}
.cav-switch:checked::before{transform:translateX(20px);background:var(--cav-green-ink)}

/* ── Install hint (iPhone Safari only; never in standalone) ── */
.cav-install{position:fixed;left:var(--cav-gutter-x);right:max(var(--cav-gutter-x),calc(var(--cav-safe-r) + 12px));z-index:31;
  bottom:calc(var(--cav-tabbar-h) + var(--cav-safe-b) + 12px);max-width:520px;margin:0 auto;display:flex;gap:12px;align-items:flex-start;
  background:var(--cav-panel);border:1px solid var(--cav-line-2);border-radius:var(--cav-radius);padding:14px 14px 14px 16px;box-shadow:var(--cav-shadow-overlay);
  font-size:var(--cav-fs-body-s);line-height:var(--cav-lh-snug);color:var(--cav-text)}
.cav-install b{font-family:var(--cav-font-display);font-weight:var(--cav-fw-semibold);text-transform:uppercase;letter-spacing:var(--cav-ls-label);display:block;margin-bottom:2px}
.cav-install p{margin:0;color:var(--cav-text-dim)}
.cav-install button{flex:none;min-width:var(--cav-tap);min-height:var(--cav-tap);margin:-10px -8px -10px 0;background:none;border:none;color:var(--cav-text-dim);font-size:20px;cursor:pointer}
body:not(.has-tabbar) .cav-install{bottom:calc(var(--cav-safe-b) + 12px)}

/* ── Offline banner ────────────────────────────────────── */
.cav-offline{display:none;font-family:var(--cav-font-mono);font-size:var(--cav-fs-nano);letter-spacing:var(--cav-ls-mono);text-transform:uppercase;
  color:var(--cav-amber);background:var(--cav-amber-wash);border-bottom:1px solid var(--cav-amber-dim);text-align:center;padding:6px 12px}
html.is-offline .cav-offline{display:block}

/* ── Standalone (installed) mode ───────────────────────── */
.cav-standalone-only{display:none!important}
@media (display-mode:standalone){
  html{overscroll-behavior-y:none}
  .cav-standalone-only{display:revert!important}
  .cav-browser-only{display:none!important}
  .cav-appbar,.cav-tabbar,.cav-back,.cav-tab{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
}

/* ── Page changes: cross-document View Transitions ─────────
   A short crossfade; header and tab bar stay put. No slides — the brand has no slide-ins. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--cav-page-dur);animation-timing-function:var(--cav-ease)}
::view-transition-group(cav-appbar),::view-transition-group(cav-tabbar){animation-duration:0s}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

@media print{.cav-appbar,.cav-tabbar,.cav-install,.cav-offline{display:none!important}body.has-tabbar{padding-bottom:0}}