/* ════════════════════════════════════════════════════════════════
   audit-fixes.css — additive visual fixes (UI audit 2026-05-28).
   Loaded LAST so it overrides. Fully reversible: remove the <link>.
   Scope: contrast (WCAG), density, responsive rail-collapse, polish.
═══════════════════════════════════════════════════════════════ */

/* ── P0.1 Contrast: darken low-contrast text tokens ──
   --muted #98a0b0 (~2.6:1 on white) → ~4.6:1; --faint likewise. */
:root,
[data-theme="light"]{
  --muted: #6b7484;
  --faint: #8e97a6;
  --dim:   #515a6b;
}

/* ── P0.2 Density & readability ── */
body { font-size: 14px; }
/* keep dense tables compact in size but give rows breathing room */
table.dt { font-size: 13px; }
table.dt td, table.dt th { padding-top: 9px; padding-bottom: 9px; }
table.dt tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
table.dt tbody tr:hover td { background: var(--surface-3); }
.t-dim { color: var(--dim); }

/* ── P0.3 Loading/empty polish ── */
@keyframes af-shimmer { 0%{opacity:.5} 50%{opacity:1} 100%{opacity:.5} }
.registry-sk-row { animation: af-shimmer 1.2s ease-in-out infinite; }

/* ── Responsive: collapse the 380px action rail on narrow viewports ──
   The app already supports `.app.no-inbox`; the manual toggle (#inboxToggleBtn)
   still works to re-open. Below 1280px the center gets the full width. */
@media (max-width: 1280px){
  .app { grid-template-columns: 232px minmax(0,1fr) !important; }
  .app > .inbox { display: none !important; }
  .inbox-toggle-btn { display: inline-flex !important; }
}
/* Mid: trim rail a touch on 1281–1440 to give center more room */
@media (min-width: 1281px) and (max-width: 1440px){
  .app { grid-template-columns: 232px minmax(0,1fr) 320px; }
}
/* Small: single column, narrow icon nav */
@media (max-width: 980px){
  .app { grid-template-columns: 64px minmax(0,1fr) !important; }
  .app > .inbox { display: none !important; }
  .side { width: 64px !important; overflow: hidden; }
  .side .nav-h, .side .nav-item span, .side .side-foot span { display: none !important; }
  .side .nav-item { justify-content: center; }
}

/* ── Focus visibility (a11y) ── */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ring-accent);
  outline-offset: 2px;
}