/* Round-1 fixes from the 2026-09-05 UX and security reviews. Loaded after
   styles.css, forms.css and credential.css so every rule here wins a tie with a
   resting rule of the same specificity. Tokens only, no new colours. */

/* ---------- Focus is visible on every control (F3, F4) ----------
   The global :focus-visible ring loses to the later .btn-*, .statchip and
   .action-card box-shadow declarations, so each one layers the ring on top of its
   own resting shadow here. */
/* The ring appears at once: the resting rules fade box-shadow over 150 ms, which a
   keyboard user reads as a delay (and a probe reads as no ring at all). */
.btn:focus-visible, .statchip:focus-visible, .action-card:focus-visible, .cu-item:focus-visible, .btn-ic:focus-visible, .btn-icon:focus-visible, .cu-chip:focus-visible { transition-property: background, border-color, color, transform; }
.btn:focus-visible { box-shadow: var(--ring), var(--sh-1); }
.btn-primary:focus-visible { box-shadow: var(--ring), 0 1px 2px rgba(220,70,48,.35), 0 8px 18px -8px rgba(220,70,48,.55); }
.btn-navy:focus-visible { box-shadow: var(--ring), 0 1px 2px rgba(13,59,99,.30), 0 8px 18px -8px rgba(13,59,99,.5); }
.btn-ghost:focus-visible, .btn-ghost-danger:focus-visible, .btn-danger:focus-visible, .segmented .btn:focus-visible { box-shadow: var(--ring); }
.btn:disabled:focus-visible { box-shadow: var(--ring); }
/* On the navy top bar and hero a white ring reads; the blue one sinks into the navy. */
.btn-ghost-light:focus-visible, .viewas-btn:focus-visible, .dash-find-row .btn-primary:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
.dash-find-field input[type=text]:focus-visible { box-shadow: var(--sh-2), 0 0 0 3px rgba(255,255,255,.75); }
.statchip:focus-visible { box-shadow: var(--ring), var(--sh-1); }
.action-card:focus-visible { box-shadow: var(--ring), var(--sh-1); }
/* Rows inside a clipped list: the ring goes inside so overflow never eats it. */
.recent-row:focus-visible { box-shadow: inset var(--ring); border-radius: 0; }
.cu-item:focus-visible { box-shadow: var(--ring); }
.cu-item.is-current:focus-visible { box-shadow: var(--ring), inset 3px 0 0 var(--coral); }
.viewas-opt:focus-visible { box-shadow: inset var(--ring); border-radius: 0; }
.viewas-opt.active:focus-visible { box-shadow: inset var(--ring), inset 3px 0 0 var(--coral); }
.result-main:focus-visible { box-shadow: var(--ring); }
/* Hover-only copy icons show themselves to a keyboard user. */
.detail-row .copy-text:focus-visible, .cell-code .copy-cell:focus-visible { opacity: 1; }

/* ---------- Dashboard result rows (F2) ---------- */
.result-user { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.result-user .none, .result-user .tag-quiet { font-family: var(--font); }
/* The dot travels with the office text, so a wrap never leaves it alone on a line. */
.result-user + .result-where::before { content: "\00b7"; margin-right: 8px; color: var(--faint); }
.mono-val { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }

/* ---------- Report filter comboboxes (F5) ---------- */
/* Fields align at the top so a hint under one of them never lifts its input above the others. */
.toolbar { align-items: flex-start; }
.combo-wrap .form-combo { display: block; min-width: 210px; }
.combo-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.combo-hint[hidden] { display: none; }

/* ---------- Empty and error states (F13) ---------- */
.state-actions { display: block; margin-top: 14px; }
/* No cleanup card (a Viewer, or nothing flagged): the slot leaves no double gap behind. */
#dash-cleanup:empty { display: none; }

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  /* Enter and the live results already search; the full-width button only repeats them (F24). */
  .dash-find-row > .btn[type=submit] { display: none; }
  .combo-wrap .form-combo { min-width: 0; }
  /* A result row stacks: carrier, username and office across the full width, the
     three buttons in a row beneath, instead of a two-word column beside them. */
  .result-row { grid-template-columns: 1fr; gap: 10px; }
  .result-creds { width: 100%; }
  .result-creds .btn { flex: 1 1 auto; }
}