/* ============================================================== base.css
   Phase 2 accessibility foundation. Loaded AFTER app.css so its focus and
   motion rules win. Additive and global — no screen-specific markup here.
   ======================================================================= */

/* --- Skip to content: first tab stop on every page. ---------------------- */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 200;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 14px; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  transition: top 0.12s ease;
}
.skip-link:focus { top: 8px; outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Main landmark is programmatically focusable so the skip link can land on it. */
#main:focus { outline: none; }

/* --- Visible keyboard focus on EVERY interactive control. ----------------
   The old sheet only styled focus on inputs; keyboard users had no idea where
   they were. This gives one consistent ring, keyboard-only (not on mouse click). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.tab:focus-visible,
.seg a:focus-visible,
.seg button:focus-visible,
.nav a:focus-visible,
.sort-link:focus-visible,
.tenant-name:focus-visible,
.statlink:focus-visible,
.stream-row:focus-visible,
.chip:focus-visible,
.pagebtns a:focus-visible,
summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* Inputs/selects/textarea keep an inset-friendly ring. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 0;
}

/* --- Screen-reader-only text (used by macros for icon-only / colour-only). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Reduced motion: honour it globally, not just for the drawer. -------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Current-page nav item — paired with aria-current in the template. */
.nav a[aria-current="page"] { font-weight: var(--fw-semibold); }

/* Field flagged as needing input (e.g. a required follow-up after an outcome). */
.field-required > span::after { content: " — needed"; color: var(--warning); font-weight: var(--fw-semibold); }
.field-required input, .field-required select { border-color: var(--warning); }