/* ══════════════════════════════════════════════════════════════════════════
   ACF-07 P2 — staff operator console (email resolve, capability cards,
   desired-state toggles, single confirmation).

   Page-scoped stylesheet for backend/templates/staff_access_manage_activation.html
   ONLY. Every rule is anchored to the `.sa-` prefix (or `[hidden]`), so this
   file can never affect index.css surfaces, the Cabinet, the front door, or
   the result viewer.

   This page loads the same shared stylesheet (index.css) as the ordinary
   Cabinet for its primary site style: the `:root` palette custom properties,
   base body typography, and the `.card`/`.btn` component classes all come
   from there. This file adds only what is genuinely specific to this
   standalone staff workflow — page width, the two-option desired-state
   toggle, and fact-list/summary layout — and declares no font-family, no
   color palette, and no generic button or card rule of its own.

   Mobile-first: single column, 16px control text (prevents iOS zoom-on-focus),
   44px minimum touch targets, no horizontal overflow at 320px.
   ══════════════════════════════════════════════════════════════════════════ */

.sa-shell {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 1rem 0.9rem 3rem;
}

/* RESPONSIVE-FOUNDATION: intentional (not accidental) tablet/desktop
   behavior — the operator form stays a single readable column at every
   width (no horizontal overflow, no dense multi-column layout is needed
   for this workflow) but gets modestly wider on larger viewports instead
   of staying phone-width forever. Breakpoints match the shared ladder. */
@media (min-width: 760px) {
  .sa-shell { max-width: 40rem; padding-top: 1.5rem; }
}
@media (min-width: 1024px) {
  .sa-shell { max-width: 46rem; }
}

/* index.css (loaded before this file for shared style reuse) declares a
   sitewide `section{display:none}` rule for the main page's step
   navigation, requiring an `.active` class to show a <section>. This page's
   panels are plain <section> elements toggled only via the `hidden`
   attribute, so without this override the JS-cleared `hidden` attribute
   alone never makes them visible. Higher specificity than the bare
   `section` selector restores the default `display: block`; `[hidden]`
   (below, `!important`) still wins whenever the attribute is present. */
.sa-shell section:not([hidden]) {
  display: block;
}

.sa-title {
  margin: 0 0 0.2rem;
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 720;
  letter-spacing: -.01em;
}

.sa-subtitle {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.sa-panel-title {
  margin: 0 0 0.5rem;
  font-size: 0.98rem;
  font-weight: 720;
}

.sa-note {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.sa-status {
  margin: 0;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.sa-status[data-tone="error"] { color: var(--danger); }
.sa-status[data-tone="ok"] { color: var(--ok); }
.sa-status[data-tone="warn"] { color: var(--accent); }

.sa-field { margin-bottom: 0.85rem; }

.sa-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
  font-weight: 720;
  color: var(--muted);
}

.sa-hint {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.sa-input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
  background: var(--surface);
  /* 16px keeps iOS Safari from zooming the viewport on focus. */
  font-size: 1rem;
}

.sa-input:focus-visible,
.sa-btn-block:focus-visible,
.sa-toggle-option input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Full-width, stacked button layout for this page's single-column shell.
   Sizing/spacing only — button chrome (padding, radius, cursor, disabled
   state) comes from the shared `.btn` class. */
.sa-btn-block { width: 100%; }
.sa-btn-block + .sa-btn-block { margin-top: 0.6rem; }

.sa-btn-danger { background: var(--danger); color: #fff; }

.sa-danger-panel { border-color: var(--danger); }

.sa-summary-list {
  margin: 0;
  font-size: 0.9rem;
}

.sa-summary-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.sa-summary-list div:last-child { border-bottom: 0; }

.sa-summary-list dt {
  margin: 0;
  color: var(--muted);
  min-width: 9.5rem;
}

.sa-summary-list dd {
  margin: 0;
  font-weight: 720;
  overflow-wrap: anywhere;
}

.sa-warning {
  border: 1px solid var(--danger);
  background: rgba(255, 71, 87, .08);
  border-radius: var(--r);
  padding: 0.65rem 0.75rem;
  margin: 0.6rem 0;
  font-size: 0.88rem;
  line-height: 1.4;
}

.sa-warning strong { color: var(--danger); }

/* ── Capability cards ────────────────────────────────────────────────────
   `.card` (shared) supplies the "Account state" panel's chrome. Each
   capability is a bordered sub-section grouping a fact list and its
   desired-state toggle — a nested-grouping pattern specific to this page,
   using shared tokens rather than new color values. */

.sa-card {
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 0.9rem;
  margin-bottom: 0.85rem;
}

.sa-card:last-child { margin-bottom: 0; }

.sa-card-risk { border-color: rgba(240, 165, 0, .3); }

.sa-card-title {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  font-weight: 720;
}

.sa-card-facts {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
}

.sa-card-facts div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.2rem 0;
}

.sa-card-facts dt {
  margin: 0;
  color: var(--muted);
}

.sa-card-facts dd {
  margin: 0;
  font-weight: 720;
  text-align: right;
  overflow-wrap: anywhere;
}

/* ── Desired-state toggle (one two-option control per capability) ──────── */

.sa-toggle {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.sa-toggle-legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sa-toggle-option {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 720;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.sa-toggle-option input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  margin: 0;
}

.sa-toggle-option:has(input:checked) {
  border-color: rgba(240, 165, 0, .55);
  background: rgba(240, 165, 0, .08);
  color: inherit;
}

.sa-toggle-option:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

[hidden] { display: none !important; }