/* ============================================================
   ui-anima-durability.css — UI-Anima Proof section:
   durability-run line chart, framed as an instrument panel.
   Scoped under .ua-dur-* · theme-aware via site tokens
   (warm-light "Cursor" theme fallbacks baked in).
   ============================================================ */
.ua-dur-wrap { position: relative; margin: var(--space-xl, 48px) auto 0; max-width: 920px; }
.ua-dur-wrap figcaption {
  margin-top: 14px; text-align: center;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, Menlo, monospace);
  font-size: 12px; letter-spacing: .02em;
  color: var(--color-muted, #6c6b61);
}

/* ---- instrument panel frame ---- */
.ua-dur-app {
  border: 1px solid var(--color-border, #e0ddd1);
  border-radius: var(--radius-lg, 10px);
  overflow: hidden;
  background: var(--color-bg, #f5f4ef);
  box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(26, 26, 23, 0.14));
  font-family: var(--font-sans, "Geist", -apple-system, sans-serif);
  color: var(--color-text, #1a1a17);
}

/* ---- title bar (traffic lights · mono label · status) ---- */
.ua-dur-tb {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  background: var(--color-surface, #eae7dd);
  border-bottom: 1px solid var(--color-border, #e0ddd1);
}
.ua-dur-dots { display: flex; gap: 6px; flex: none; }
.ua-dur-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--color-border, #e0ddd1); }
.ua-dur-title {
  flex: 1; text-align: center; min-width: 0;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, Menlo, monospace);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-muted, #6c6b61);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ua-dur-status {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, Menlo, monospace);
  font-size: 12px; color: var(--color-muted, #6c6b61);
  font-variant-numeric: tabular-nums;
}
.ua-dur-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-border, #e0ddd1);
  transition: background .3s, box-shadow .3s;
}
.ua-dur-wrap.ua-dur-live .ua-dur-status::before {
  background: var(--accent, #d9542b);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(217, 84, 43, 0.10));
}

/* ---- legend chips + day readout ---- */
.ua-dur-legendrow { display: flex; align-items: center; gap: 16px; padding: 13px 18px 0; }
.ua-dur-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, Menlo, monospace);
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-muted, #6c6b61);
  white-space: nowrap;
}
.ua-dur-key { width: 16px; height: 2px; border-radius: 2px; background: var(--color-text, #1a1a17); flex: none; }
.ua-dur-key--zero { background: var(--accent, #d9542b); }
.ua-dur-dayno {
  margin-left: auto; flex: none;
  font-family: var(--font-mono, "Geist Mono", ui-monospace, Menlo, monospace);
  font-size: 12px; color: var(--color-muted, #6c6b61);
  font-variant-numeric: tabular-nums;
}

/* ---- the chart canvas (axis band drawn inside its height) ---- */
.ua-dur-panel { padding: 2px 8px 8px; }
#ua-dur-canvas { display: block; width: 100%; height: clamp(230px, 34vw, 300px); }

/* ---- screen-reader summary (table-view twin, hidden) ---- */
.ua-dur-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 560px) {
  .ua-dur-legendrow { gap: 10px; padding: 11px 12px 0; flex-wrap: wrap; }
  .ua-dur-title { letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
  .ua-dur-status::before { transition: none; }
}