/* ══ COCKPIT — glass.css · C1: Glas-Flächen · View-Enter · Chart-Draw-on ══
   Lädt als LETZTES Stylesheet (eigene Overrides).
   Bewusst KEIN backdrop-filter auf Karten: hinter ihnen liegt nur die
   flache Papierfläche — Blur hätte nichts zu blurren und kostete GPU.
   Der Glas-Eindruck kommt aus transluzentem Papier, der Messing-
   Haarlinie oben und weichem Schatten. Die Topbar behält ihr echtes
   Blur (shell.css) — dort scrollt Inhalt dahinter. */

/* ── Glas-Flächen: alle hellen Karten/Panels (dunkle .localcard bleibt) ── */
.kpi, .tblwrap, .vstrip, .qcard, .chcard, .loopcard, .acard, .syspanel {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--brass-srf) 38%, transparent);
  box-shadow: 0 1px 3px rgba(27, 24, 19, .05), 0 8px 22px rgba(27, 24, 19, .035);
}

/* ── View-Enter: überlebt den Full-innerHTML-Rerender (app.js route()) ──
      Erste Kinder gestaffelt, Rest kommt mit dem Block. */
.view--enter > * { animation: viewUp .32s var(--ease-out) both; }
.view--enter > *:nth-child(2) { animation-delay: .045s; }
.view--enter > *:nth-child(3) { animation-delay: .09s; }
.view--enter > *:nth-child(4) { animation-delay: .135s; }
.view--enter > *:nth-child(n+5) { animation-delay: .17s; }
@keyframes viewUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Chart-Draw-on (charts.js setzt --bi je Element) ──
      Reines CSS: replayt automatisch bei jedem innerHTML-Insert. */
.ch-bar {
  transform-box: fill-box; transform-origin: bottom;
  animation: chBar .5s var(--ease-out) both;
  animation-delay: calc(var(--bi, 0) * .04s);
}
@keyframes chBar { from { transform: scaleY(0); } }

.ch-line {
  stroke-dasharray: 1; stroke-dashoffset: 1;   /* polyline pathLength="1" */
  animation: chLine .9s var(--ease-out) .12s forwards;
}
@keyframes chLine { to { stroke-dashoffset: 0; } }
.ch-area { opacity: 0; animation: chFade .5s ease-out .65s forwards; }
@keyframes chFade { to { opacity: 1; } }
.ch-dot {
  opacity: 0;
  animation: chFade .3s ease-out forwards;
  animation-delay: calc(.25s + var(--bi, 0) * .07s);
}

.ch-conf, .ch-verdict {
  transform-box: fill-box; transform-origin: left;
  animation: chBarX .55s var(--ease-out) both;
  animation-delay: calc(var(--bi, 0) * .05s);
}
@keyframes chBarX { from { transform: scaleX(0); } }

/* ══ C2 · Dock-Redesign: Lagebild · Zuletzt-geöffnet · einklappbar ══
   Das Dock ist dunkel (Nacht-Anker) — alle Zusätze in Bone/Messing. */
.dock__brief, .dock__recent { padding: 1rem 1.15rem 0; }
.dock__briefh {
  font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-srf); margin-bottom: .55rem;
}
.dock__facts { display: grid; gap: .4rem; }
.dock__facts li { font-size: .85rem; color: var(--bone-dim); list-style: none; }
.dock__facts b { color: var(--bone); font-variant-numeric: tabular-nums; }
.dock__facts em { font-style: normal; color: #e04f45; font-family: var(--f-mono); font-size: .72rem; }
.dock__rcard {
  display: grid; gap: .2rem; width: 100%; text-align: left;
  padding: .65rem .75rem; margin-bottom: .5rem;
  background: color-mix(in srgb, var(--bone) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--bone) 14%, transparent);
  border-radius: var(--radius); cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.dock__rcard:hover, .dock__rcard:focus-visible {
  border-color: var(--brass-srf);
  background: color-mix(in srgb, var(--brass-srf) 10%, transparent);
}
.dock__rid { font-family: var(--f-mono); font-size: .74rem; font-weight: 700; color: var(--bone); letter-spacing: .03em; }
.dock__rmeta { font-size: .76rem; color: var(--bone-dim); }
/* Verdikt-Badge im dunklen Dock: die Verdikt-Töne sind „textsicher auf hell"
   (tokens.css) — auf --night nur ~2,7:1. Heller Chip darunter stellt die
   AA-Ratios wieder her (gemessen ≥5,3:1 auf --paper). Der alte Selektor
   `.vbadge` war tot (Komponente heißt `.vb`) und fiel nie auf, weil der
   Bereich vor Audit B2 immer leer blieb. */
.dock__rcard .vb {
  justify-self: start; margin-top: .15rem;
  background: var(--paper); padding: .14rem .5rem; border-radius: 3px;
}
.dock__hint2 {
  margin-top: auto; padding: 1rem 1.15rem 1.2rem;
  font-size: .78rem; line-height: 1.5; color: var(--bone-dim);
}

/* Einklappen/Aufklappen — nur im Panel-Modus (≥1240px) */
.dock__collapse, .dock__expander { display: none; }
.dock.dock--repaint .dock__inner { animation: dockIn .28s var(--ease-out); }
@keyframes dockIn { from { opacity: 0; transform: translateX(12px); } }

@media (min-width: 1240px) {
  .dock__collapse {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: 0 0 auto;
    background: none; border: 1px solid color-mix(in srgb, var(--bone) 22%, transparent);
    border-radius: var(--radius); color: var(--bone-dim); cursor: pointer;
    transition: color var(--dur), border-color var(--dur);
  }
  .dock__collapse:hover { color: var(--brass-srf); border-color: var(--brass-srf); }

  body.dock-collapsed .dock { width: 46px; }
  body.dock-collapsed.has-dock .view { margin-right: 46px; }
  body.dock-collapsed.has-dock .topbar { right: 46px; }
  body.dock-collapsed .dock .dock__inner { display: none; }
  body.dock-collapsed .dock__expander {
    display: flex; flex-direction: column; align-items: center; gap: .7rem;
    width: 100%; height: 100%; padding: 1.1rem 0;
    background: none; border: 0; cursor: pointer;
    color: var(--bone-dim);
    font-family: var(--f-mono); font-size: .66rem; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase;
    transition: color var(--dur);
  }
  body.dock-collapsed .dock__expander:hover { color: var(--brass-srf); }
  body.dock-collapsed .dock__expander span { writing-mode: vertical-rl; }
}

/* ══ C3 · Command-Palette (⌘K) ══ */
.pal {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: color-mix(in srgb, var(--night) 42%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 12vh var(--pad) 0;
}
.pal.on { display: block; }
.pal__box {
  max-width: 620px; margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--brass-srf);
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(11, 12, 14, .35), 0 4px 18px rgba(11, 12, 14, .18);
  overflow: hidden;
}
.pal--anim .pal__box { animation: palIn .22s var(--ease-out); }
@keyframes palIn { from { opacity: 0; transform: translateY(-10px) scale(.985); } }
.pal__inrow {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--fg-dim);
}
.pal__inrow input {
  flex: 1; border: 0; background: none; outline: none;
  font-family: var(--f-body); font-size: 1rem; color: var(--fg);
}
.pal__inrow kbd {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .08em;
  color: var(--fg-dim); border: 1px solid var(--line-soft);
  border-radius: 3px; padding: .15rem .4rem;
}
.pal__list { max-height: 46vh; overflow-y: auto; }
.pal__opt {
  display: grid; grid-template-columns: 4.6rem 1fr auto; align-items: baseline;
  gap: .25rem .8rem; padding: .6rem 1rem; cursor: pointer;
  border-left: 2px solid transparent;
}
.pal__opt.on, .pal__opt:hover {
  background: color-mix(in srgb, var(--brass-srf) 12%, transparent);
  border-left-color: var(--brass-srf);
}
.pal__kind {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em;
  /* AA-Fix (design-critic 29.07., Blocker): Kategorie-Label ist Pflichttext —
     --fg-faint erreichte auf .pal__box nur 2,06:1 (tokens.css: „nie für
     Pflichttext"). Gleicher Fix wie die agtl-Tick-Labels in Block 3. */
  text-transform: uppercase; color: var(--fg-dim);
}
.pal__label { font-weight: 600; font-size: .92rem; color: var(--fg); }
.pal__meta { grid-column: 2; font-size: .78rem; color: var(--fg-dim); }
.pal__v { grid-column: 3; grid-row: 1 / span 2; font-family: var(--f-mono); font-size: .68rem; font-weight: 700; }
.pal__v--clear { color: var(--st-clear); } .pal__v--cpa { color: var(--st-cpa); }
.pal__v--dok { color: var(--st-dok); }     .pal__v--phy { color: var(--st-phy); }
.pal__v--xray { color: var(--st-xray); }   .pal__v--block { color: var(--st-block); }
.pal__v--open { color: var(--st-open); }
.pal__none { padding: 1rem; font-size: .85rem; color: var(--fg-dim); }
.pal__foot {
  padding: .5rem 1rem .6rem; border-top: 1px solid var(--line-soft);
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em;
  /* AA-Fix (design-critic 29.07., Blocker): Bedien-Hilfe ist Pflichttext —
     s. .pal__kind. */
  text-transform: uppercase; color: var(--fg-dim);
}

/* ══ C3 · Agenten: der 24-h-Takt ══ */
.agtl {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border: 1px solid var(--line-soft);
  border-top: 1px solid color-mix(in srgb, var(--brass-srf) 38%, transparent);
  border-radius: var(--radius);
  /* unten Platz für die alternierenden Unter-Labels der Dots (b + em unterhalb
     der Achse, ~40px) — vorher wurden „07:00"/„Mo 23:00" abgeschnitten. */
  padding: 1rem 1.2rem 3rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 1px 3px rgba(27, 24, 19, .05);
}
.agtl__h {
  font-family: var(--f-mono); font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg);
  margin-bottom: 2.4rem;
}
.agtl__h span { color: var(--fg-dim); font-weight: 400; }
.agtl__axis { position: relative; height: 3px; background: var(--bg-3); border-radius: 2px; margin: 0 .5rem; }
.agtl__tick { position: absolute; top: -4px; width: 1px; height: 11px; background: var(--line); }
.agtl__tick u {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: .62rem; color: var(--fg-dim);
  /* AA-Fix (Audit Block 3): Stunden-Labels sind Pflichttext der Achse —
     --fg-faint (1,7:1) ist laut tokens.css „nie für Pflichttext". */
  text-decoration: none;
}
.agtl__band {
  position: absolute; inset: -1px 0; border-radius: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brass-srf) 42%, transparent),
    color-mix(in srgb, var(--brass-srf) 20%, transparent));
}
.agtl__band b {
  position: absolute; left: 0; top: -1.35rem;   /* links: 00:00-Bereich ist frei */
  font-family: var(--f-mono); font-size: .62rem; font-weight: 700;
  /* AA-Fix (Audit Block 3): --brass erreichte über dem Band-Verlauf nur 4,37:1 —
     --on-brass ist der Token für Text auf Brass-Flächen (≥ 4,5:1). */
  letter-spacing: .1em; color: var(--on-brass);
}
.agtl__dot { position: absolute; top: 50%; transform: translate(-50%, -50%); animation: agDot .4s var(--ease-out) both; animation-delay: calc(var(--bi, 0) * .07s); }
@keyframes agDot { from { opacity: 0; scale: .3; } }
.agtl__dot i {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--brass-disp);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass-srf) 30%, transparent);
}
.agtl__dot--mon i { background: var(--st-clear); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-clear) 25%, transparent), 0 0 0 5px color-mix(in srgb, var(--st-clear) 12%, transparent); }
.agtl__dot b, .agtl__dot em {
  position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--f-mono); font-style: normal;
}
.agtl__dot b { bottom: 13px; font-size: .66rem; font-weight: 700; color: var(--fg); }
.agtl__dot em { bottom: calc(13px + .95em); font-size: .58rem; color: var(--fg-dim); }
.agtl__dot--dn b { bottom: auto; top: 13px; }
.agtl__dot--dn em { bottom: auto; top: calc(13px + .95em); }
/* Schmale Screens: Uhrzeiten an den Dots ausblenden — sie kollidieren sonst;
   die vollständigen Zeitpläne stehen direkt darunter in den Agent-Karten. */
@media (max-width: 560px) {
  .agtl__dot em { display: none; }
}

/* ══ C3 · Live-Feel: Badge-Pulse + Topbar-Puls-Mark ══ */
.rail__badge.badge-pulse { animation: badgePop .45s var(--ease-out); }
@keyframes badgePop { 35% { transform: scale(1.45); } }
/* pointer-events: none — rein dekorativ (aria-hidden); bei 360px lag das Mark
   sonst ÜBER dem Schließen-✕ des Dokumenten-Drawers und fing dessen Klicks ab
   (Fund Intake-Verifikation 21.08.). */
.topbar__pulse { position: relative; width: 14px; height: 14px; flex: 0 0 auto; pointer-events: none; }
.topbar__pulse i {
  position: absolute; inset: 2px;
  background: var(--brass-srf); rotate: 45deg;
  animation: markBreath 4s ease-in-out infinite;
}
.topbar__pulse::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid color-mix(in srgb, var(--brass-srf) 55%, transparent);
  rotate: 45deg;
  animation: markBreath 4s ease-in-out infinite reverse;
}
@keyframes markBreath { 50% { opacity: .45; transform: scale(.82); } }

/* ── Reduced Motion: alles steht sofort im Endzustand ── */
@media (prefers-reduced-motion: reduce) {
  .view--enter > * { animation: none; }
  .ch-bar, .ch-conf, .ch-verdict { animation: none; transform: none; }
  .ch-line { animation: none; stroke-dashoffset: 0; }
  .ch-area, .ch-dot { animation: none; opacity: 1; }
  .dock.dock--repaint .dock__inner { animation: none; }
  .pal--anim .pal__box { animation: none; }
  .agtl__dot { animation: none; }
  .rail__badge.badge-pulse { animation: none; }
  .topbar__pulse i, .topbar__pulse::after { animation: none; }
}