/* Repsense extensions over Nocturne.
 * Load after nocturne.css. Everything here is additive; nothing overrides a base token.
 */

:root {
  --repsense-warn: #d9a84f;
  --repsense-warn-tint: #4a3a1c;
  --repsense-alert: #d97a7a;
  --repsense-alert-ink: #eba7a7;
  --repsense-alert-tint: #4a2626;

  --signal-idle: var(--color-accent-900);
  --signal-engaged: var(--color-accent-800);
  --signal-working: var(--color-accent-700);
  --signal-loaded: var(--color-accent-500);
  --signal-peak: var(--color-accent-300);
}

@keyframes repsense-live { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }

/* — figures — */
.num { font-variant-numeric: tabular-nums; }
.metric { display: flex; align-items: baseline; gap: 6px; }
.metric-figure {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: 0.9;
  font-size: 76px;
}
.metric-unit { font-size: 26px; color: var(--color-neutral-500); }
.metric-sm .metric-figure { font-size: 34px; letter-spacing: 0; line-height: 1; }
.metric-sm .metric-unit { font-size: 14px; }
.metric-live .metric-figure { color: var(--color-accent-300); }
.metric-caption { font-size: 12px; color: var(--color-neutral-500); margin-top: 12px; }

/* — labels — */
.label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  color: var(--color-neutral-500);
}
.label-accent { color: var(--color-accent); }

/* — status tags (extend .tag) — */
.tag-caution { background: var(--repsense-warn-tint); color: var(--repsense-warn); }
.tag-break { background: var(--repsense-alert-tint); color: var(--repsense-alert); }

/* — interrupts — */
.interrupt {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 12px 14px; border-radius: var(--radius-md);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px;
  border-left: 2px solid var(--color-accent);
  background: var(--color-accent-900);
}
.interrupt-caution { border-left-color: var(--repsense-warn); background: var(--repsense-warn-tint); }
.interrupt-break { border-left-color: var(--repsense-alert); background: var(--repsense-alert-tint); }

/* — live indicator — */
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent);
  animation: repsense-live 1.4s ease-in-out infinite;
}
.led {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 12px currentColor; color: var(--color-accent);
}

/* — symmetry bar — */
.symmetry {
  display: flex; height: 14px; border-radius: 7px; overflow: hidden;
  background: var(--color-neutral-900);
}
.symmetry-deficit { background: var(--color-accent-700); }
.symmetry-gap { width: 2px; background: var(--color-bg); }
.symmetry-dominant { background: var(--color-accent-400); }

/* — section index strip — */
.idx {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--color-divider);
  border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider);
}
.idx a {
  background: var(--color-bg); padding: 16px 14px;
  text-decoration: none; color: var(--color-text); font-size: 13px;
}
.idx a:hover { background: var(--color-neutral-900); color: var(--color-accent); }
.idx a span { color: var(--color-neutral-500); margin-right: 8px; }

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; opacity: 1; }
}