/* =============================================================================================
   Faith 2 Faith — CMS admin design language.
   TICKET-026 (Angel), implementing cms-admin-design.md §11 (Jade).

   THIS FILE IS NOT tokens.css AND MUST NOT BECOME IT.

   1. `--f2f-*` is TENANT-CONTROLLED. theme_token.value is emitted verbatim into :root on a live
      public site and a SiteAdmin edits it at runtime. If the admin rendered one of those values,
      a SiteAdmin setting their gold badly would make the CMS chrome unreadable WHILE THEY WERE IN
      THE MIDDLE OF SETTING IT. Load-bearing, not negotiable.
   2. tokens.css deliberately preserves six A11Y-DEFERRED defects for visual-parity reasons the
      admin does not share.
   3. Different density, different motion budget, different colour semantics.

   F2F.CMS.csproj has no reference to F2F.Razor and must not gain one, and this file links neither
   tokens.css nor brand.css. The one place a TENANT'S OWN --f2f-* values are rendered at all is
   inside the theme-preview <iframe srcdoc> (ThemePreviewFrame.razor) — a sandboxed, isolated
   document, precisely so they cannot reach admin chrome.

   Every ratio in a comment below was COMPUTED from the WCAG relative-luminance formula, not
   remembered. ContrastRatioTests PARSES THIS FILE, recomputes every rendered pair — in light AND
   in dark — and fails if one misses its threshold. So a colour edited here without re-deriving its
   contrast fails a test rather than somebody's eyes. (The test asserts the THRESHOLD, not the
   comment: the comments are for the next reader, the assertion is the control.)
   ============================================================================================= */

/* --- 11.2 Colour — light only -------------------------------------------------------------
   Dark mode is deliberately OFF. The CMS is a white tool surface: canvas, rail, cards, fields
   and panels share #FFFFFF. Structure is carried by borders and by coloured text/edges on
   statuses, never by a grey slab. A moderator's OS night setting must not repaint this product
   charcoal — `color-scheme: light` and no prefers-color-scheme: dark block. */
:root {
  color-scheme: light;

  /* Every surface token is white. State that used to be a fill (hover, current page, loading
     shimmer) still has a separate signal: an accent tint for hover/current, the border on
     interactive controls, and the inset accent bar on the current rail link. */
  --f2f-a-bg:                #FFFFFF;
  --f2f-a-surface:           #FFFFFF;
  --f2f-a-surface-sunken:    #FFFFFF;
  --f2f-a-surface-overlay:   #FFFFFF;

  /* Text */
  --f2f-a-text:              #12181F;   /* 17.85:1 on surface */
  --f2f-a-text-muted:        #5A6672;   /*  5.86:1 on surface */
  --f2f-a-text-on-accent:    #FFFFFF;   /*  6.46:1 on accent  */

  /* Action — fill only on primary buttons, not on chrome slabs */
  --f2f-a-accent:            #1A5FA8;   /*  6.46:1 on surface */
  --f2f-a-accent-hover:      #14477E;   /*  9.40:1 on surface */
  --f2f-a-accent-subtle:     #EAF1F9;

  /* Feedback */
  --f2f-a-danger:            #B3261E;   /*  6.53:1 on surface */
  --f2f-a-success:           #1B6B3A;   /*  6.54:1 on surface */
  --f2f-a-warning:           #7A4A00;   /*  7.48:1 on surface — a DARK amber, because
                                            amber-on-white does not pass as text */

  /* Focus */
  --f2f-a-focus-ring:        #1A5FA8;
  --f2f-a-focus-ring-inverse:#FFFFFF;
  --f2f-a-focus-ring-width:  2px;
  --f2f-a-focus-ring-offset: 2px;

  /* --- 11.3 Borders — the distinction that must not collapse ----------------------------- */
  --f2f-a-border-subtle:      #E2E7ED;  /* 1.24:1 — table hairlines.  DECORATIVE ONLY */
  --f2f-a-border:             #C3CBD5;  /* 1.63:1 — card/section edge. DECORATIVE ONLY */
  --f2f-a-border-interactive: #767F8B;  /* 4.05:1 — REQUIRED on every input, checkbox,
                                           radio, select and outlined button (WCAG 1.4.11) */

  /* --- 11.4 Semantic status colours — white fill, meaning in the ink and the edge ---------- */
  --f2f-a-status-draft-bg:        #FFFFFF;  --f2f-a-status-draft-fg:        #3F4A57;
  --f2f-a-status-published-bg:    #FFFFFF;  --f2f-a-status-published-fg:    #14572F;
  --f2f-a-status-archived-bg:     #FFFFFF;  --f2f-a-status-archived-fg:     #5A4A33;
  --f2f-a-status-deleted-bg:      #FFFFFF;  --f2f-a-status-deleted-fg:      #8C1D16;

  /* Shared scope — deliberately unlike every content status. */
  --f2f-a-scope-shared-bg:        #FFFFFF;  --f2f-a-scope-shared-fg:        #4A2E7A;
  --f2f-a-scope-shared-edge:      #4A2E7A;

  /* Special category — white plate, amber edge and ink. */
  --f2f-a-spi-bg:                 #FFFFFF;  --f2f-a-spi-fg:                 #7A4A00;
  --f2f-a-spi-edge:               #7A4A00;

  /* --- 11.5 Type, spacing, radius ---------------------------------------------------------- */
  --f2f-a-font:      system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f2f-a-font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', monospace;

  --f2f-a-fs-100: 0.8125rem;
  --f2f-a-fs-200: 0.9375rem;
  --f2f-a-fs-300: 1rem;        /* every form input — below 16px iOS zooms on focus */
  --f2f-a-fs-400: 1.125rem;
  --f2f-a-fs-500: 1.375rem;
  --f2f-a-fs-600: clamp(1.5rem, 1.2rem + 1.2vw, 1.75rem);

  --f2f-a-lh-tight:   1.25;
  --f2f-a-lh-normal:  1.5;
  --f2f-a-lh-relaxed: 1.6;

  --f2f-a-fw-regular: 400;
  --f2f-a-fw-medium:  500;
  --f2f-a-fw-bold:    650;

  --f2f-a-space-1: 0.25rem;  --f2f-a-space-2: 0.5rem;   --f2f-a-space-3: 0.75rem;
  --f2f-a-space-4: 1rem;     --f2f-a-space-5: 1.5rem;   --f2f-a-space-6: 2rem;
  --f2f-a-space-7: 3rem;     --f2f-a-space-8: 4rem;

  --f2f-a-radius-sm:   3px;   --f2f-a-radius-md: 6px;
  --f2f-a-radius-lg:  10px;   --f2f-a-radius-full: 9999px;

  --f2f-a-rail-w:      248px;
  --f2f-a-header-h:     64px;
  --f2f-a-actionbar-h:  64px;
  --f2f-a-content-max: 1440px;
  --f2f-a-form-max:     720px;
  --f2f-a-prose-max:     68ch;
  --f2f-a-tap-min:       44px;
  --f2f-a-row-h:         40px;
  --f2f-a-row-h-touch:   48px;

  /* --- 11.6 Elevation, motion, z ----------------------------------------------------------- */
  --f2f-a-elev-0: none;
  --f2f-a-elev-1: 0 1px 2px rgb(16 24 32 / 0.06), 0 1px 1px rgb(16 24 32 / 0.04);
  --f2f-a-elev-2: 0 4px 12px rgb(16 24 32 / 0.10), 0 1px 2px rgb(16 24 32 / 0.06);
  --f2f-a-elev-3: 0 12px 32px rgb(16 24 32 / 0.18);

  --f2f-a-motion-instant: 80ms;
  --f2f-a-motion-fast:   140ms;
  --f2f-a-motion-base:   200ms;
  --f2f-a-ease:     cubic-bezier(0.2, 0, 0, 1);
  --f2f-a-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --f2f-a-z-sticky:  10;
  --f2f-a-z-header:  20;
  --f2f-a-z-drawer:  30;
  --f2f-a-z-popover: 40;
  --f2f-a-z-dialog:  50;
  --f2f-a-z-toast:   60;

  /* --- 11.7 The site dots — fixed, never derived from theme_token ---------------------------
     A tenant must not be able to change how the admin identifies their tenant. Never hashed
     from the key either: a hash reshuffles every dot the day a seventh site is added. */
  --f2f-a-site-faith2faith: #1A5FA8;
  --f2f-a-site-mark5:       #B3261E;
  --f2f-a-site-onespirit:   #6A3FA0;
  --f2f-a-site-proseasoned: #1B6B3A;
  --f2f-a-site-therock:     #0E6B78;
  --f2f-a-site-travail:     #8A5A00;
  --f2f-a-site-shared:      #4A2E7A;
  --f2f-a-site-unknown:     #5A6672;
}

/* Every transition in this stylesheet reads a duration token, so ONE media query turns the lot
   off rather than each component bolting on its own guard. No affordance is ever carried by
   motion alone, so nothing is lost when it goes. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --f2f-a-motion-instant: 0.01ms;
    --f2f-a-motion-fast:    0.01ms;
    --f2f-a-motion-base:    0.01ms;
  }
}

/* =============================================================================================
   Base
   ============================================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--f2f-a-bg);
  color: var(--f2f-a-text);
  font-family: var(--f2f-a-font);
  font-size: var(--f2f-a-fs-300);
  line-height: var(--f2f-a-lh-normal);
}

/* WCAG 2.4.11 Focus Not Obscured — the most likely failure in this design. Every scroll
   container reserves the sticky header at the top and the sticky action bar at the bottom, so
   keyboard focus can never land underneath one of them. */
html, body, .a-main {
  scroll-padding-block-start: calc(var(--f2f-a-header-h) + var(--f2f-a-space-4));
  scroll-padding-block-end:   calc(var(--f2f-a-actionbar-h) + var(--f2f-a-space-4));
}

h1, h2, h3, h4 { margin: 0 0 var(--f2f-a-space-3); line-height: var(--f2f-a-lh-tight); font-weight: var(--f2f-a-fw-bold); }
h1 { font-size: var(--f2f-a-fs-500); }
h2 { font-size: var(--f2f-a-fs-400); }
h3 { font-size: var(--f2f-a-fs-300); }
p  { margin: 0 0 var(--f2f-a-space-3); }

a { color: var(--f2f-a-accent); }
a:hover { color: var(--f2f-a-accent-hover); }

code, .a-mono { font-family: var(--f2f-a-font-mono); font-size: 0.9em; }

/* Focus is ALWAYS visible and is never removed. `outline: none` with no replacement is the
   defect tokens.css already documents on three public fields; it is not repeating here. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--f2f-a-focus-ring-width) solid var(--f2f-a-focus-ring);
  outline-offset: var(--f2f-a-focus-ring-offset);
  border-radius: var(--f2f-a-radius-sm);
}

.a-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.a-skip {
  position: absolute; inset-inline-start: var(--f2f-a-space-2); inset-block-start: -100%;
  z-index: calc(var(--f2f-a-z-header) + 1);
  background: var(--f2f-a-surface); color: var(--f2f-a-text);
  padding: var(--f2f-a-space-2) var(--f2f-a-space-4);
  border: 1px solid var(--f2f-a-border-interactive);
  border-radius: var(--f2f-a-radius-md);
}
.a-skip:focus { inset-block-start: var(--f2f-a-space-2); }

/* =============================================================================================
   The shell — §4
   ============================================================================================= */

.a-shell { min-height: 100dvh; display: flex; flex-direction: column; }

.a-header {
  position: sticky; inset-block-start: 0; z-index: var(--f2f-a-z-header);
  display: flex; align-items: center; gap: var(--f2f-a-space-3);
  min-height: var(--f2f-a-header-h);
  padding-inline: var(--f2f-a-space-3);
  background: var(--f2f-a-surface);
  border-block-end: 2px solid transparent;
  border-image: linear-gradient(
    90deg,
    #f7e7a6 0%,
    #e8c84a 16%,
    #c49b24 36%,
    #8a6a14 50%,
    #d4ae4a 68%,
    #f3e4a0 84%,
    #b89228 100%
  ) 1;
}

.a-header__spacer { flex: 1 1 auto; }

.a-header__menu-button { display: none; }

/* Header “What would you like to do?” — primary control after the site switcher. */
.a-intent {
  position: relative;
  flex: 1 1 18rem;
  min-inline-size: 12rem;
  max-inline-size: 36rem;
  margin-inline-start: var(--f2f-a-space-2);
}

.a-intent__form { margin: 0; }

.a-intent__input {
  inline-size: 100%;
  min-block-size: var(--f2f-a-tap-min);
  padding-inline: var(--f2f-a-space-3);
  border: 1px solid var(--f2f-a-border-interactive);
  border-radius: var(--f2f-a-radius-md);
  background: var(--f2f-a-surface);
  color: var(--f2f-a-text);
  font: inherit;
}

.a-intent__input::placeholder {
  color: var(--f2f-a-text-muted);
}

.a-intent__input:focus {
  outline: 2px solid var(--f2f-a-focus);
  outline-offset: 2px;
}

.a-intent__results {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 4px);
  z-index: var(--f2f-a-z-popover);
  margin: 0;
  padding: var(--f2f-a-space-1);
  list-style: none;
  background: var(--f2f-a-surface);
  border: 1px solid var(--f2f-a-border-interactive);
  border-radius: var(--f2f-a-radius-md);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--f2f-a-text) 12%, transparent);
}

.a-intent__option {
  margin: 0;
  border-radius: var(--f2f-a-radius-sm);
}

.a-intent__option-link {
  display: block;
  padding: var(--f2f-a-space-2) var(--f2f-a-space-3);
  color: var(--f2f-a-text);
  text-decoration: none;
  border-radius: var(--f2f-a-radius-sm);
}

.a-intent__option.is-active .a-intent__option-link,
.a-intent__option:hover .a-intent__option-link {
  background: var(--f2f-a-accent-subtle);
  color: var(--f2f-a-text);
}

/* The site dot: a fixed fill plus a 1px interactive ring, so the BOUNDARY passes 3:1 whatever
   the fill is and the fill only has to be distinguishable. The site name is always in text
   beside it — colour is never the only carrier. */
.a-dot {
  inline-size: 12px; block-size: 12px; border-radius: var(--f2f-a-radius-full);
  border: 1px solid var(--f2f-a-border-interactive);
  background: var(--f2f-a-site-unknown);
  flex: 0 0 auto;
}
.a-dot[data-site="faith2faith"] { background: var(--f2f-a-site-faith2faith); }
.a-dot[data-site="mark5"]       { background: var(--f2f-a-site-mark5); }
.a-dot[data-site="onespirit"]   { background: var(--f2f-a-site-onespirit); }
.a-dot[data-site="proseasoned"] { background: var(--f2f-a-site-proseasoned); }
.a-dot[data-site="therock"]     { background: var(--f2f-a-site-therock); }
.a-dot[data-site="travail"]     { background: var(--f2f-a-site-travail); }
.a-dot[data-site="shared"]      { background: var(--f2f-a-site-shared); }

/* The switcher and the user menu are <details> disclosures for the same reason the drawer is:
   the browser gives us the expanded state, the keyboard behaviour and the announcement, and none
   of it depends on a circuit having connected. */
.a-switcher { position: relative; }
.a-switcher > summary, .a-usermenu > summary { list-style: none; }
.a-switcher > summary::-webkit-details-marker,
.a-usermenu > summary::-webkit-details-marker { display: none; }

.a-switcher > summary,
.a-usermenu > summary,
.a-switcher__button,
.a-usermenu__button {
  display: inline-flex; align-items: center; gap: var(--f2f-a-space-2);
  min-block-size: var(--f2f-a-tap-min);
  padding-inline: var(--f2f-a-space-3);
  /* Same elevated white plate + metallic gold rim as .a-btn--primary / rail current. */
  border: 1px solid transparent;
  border-radius: var(--f2f-a-radius-md);
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      145deg,
      #f7e7a6 0%,
      #e8c84a 16%,
      #c49b24 36%,
      #8a6a14 50%,
      #d4ae4a 68%,
      #f3e4a0 84%,
      #b89228 100%
    ) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--f2f-a-auth-navy, #2F4156);
  font: inherit;
  font-weight: var(--f2f-a-fw-medium);
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 2px 4px rgba(16, 24, 32, 0.05),
    0 6px 16px rgba(16, 24, 32, 0.08);
  transition:
    background var(--f2f-a-motion-fast) var(--f2f-a-ease),
    box-shadow var(--f2f-a-motion-fast) var(--f2f-a-ease),
    color var(--f2f-a-motion-fast) var(--f2f-a-ease);
}
.a-switcher > summary:hover,
.a-usermenu > summary:hover,
.a-switcher__button:hover,
.a-usermenu__button:hover,
.a-switcher[open] > summary,
.a-usermenu[open] > summary {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      145deg,
      #f7e7a6 0%,
      #e8c84a 16%,
      #c49b24 36%,
      #8a6a14 50%,
      #d4ae4a 68%,
      #f3e4a0 84%,
      #b89228 100%
    ) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--f2f-a-auth-navy, #2F4156);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 3px 6px rgba(16, 24, 32, 0.07),
    0 8px 20px rgba(16, 24, 32, 0.1);
}
.a-switcher > summary:focus-visible,
.a-usermenu > summary:focus-visible {
  outline: 2px solid #c49b24;
  outline-offset: 2px;
}
.a-switcher__static {
  display: inline-flex; align-items: center; gap: var(--f2f-a-space-2);
  min-block-size: var(--f2f-a-tap-min); padding-inline: var(--f2f-a-space-3);
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      145deg,
      #f7e7a6 0%,
      #e8c84a 16%,
      #c49b24 36%,
      #8a6a14 50%,
      #d4ae4a 68%,
      #f3e4a0 84%,
      #b89228 100%
    ) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--f2f-a-auth-navy, #2F4156);
  font-weight: var(--f2f-a-fw-medium);
  border-radius: var(--f2f-a-radius-md);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 2px 4px rgba(16, 24, 32, 0.05),
    0 6px 16px rgba(16, 24, 32, 0.08);
}

.a-menu {
  position: absolute; inset-block-start: calc(100% + 4px); inset-inline-start: 0;
  z-index: var(--f2f-a-z-popover);
  min-inline-size: 260px;
  background: var(--f2f-a-surface-overlay);
  border: 1px solid var(--f2f-a-border);
  border-radius: var(--f2f-a-radius-lg);
  box-shadow: var(--f2f-a-elev-2);
  padding: var(--f2f-a-space-1);
  margin: 0; list-style: none;
}
.a-menu--end { inset-inline-start: auto; inset-inline-end: 0; }
.a-menu__item {
  display: flex; align-items: center; gap: var(--f2f-a-space-2);
  min-block-size: var(--f2f-a-tap-min);
  padding: var(--f2f-a-space-2) var(--f2f-a-space-3);
  border-radius: var(--f2f-a-radius-md);
  color: inherit; text-decoration: none;
  inline-size: 100%; background: none; border: 0; font: inherit; text-align: start; cursor: pointer;
}
.a-menu__item:hover { background: var(--f2f-a-accent-subtle); }
.a-menu__item[aria-current="true"] { font-weight: var(--f2f-a-fw-medium); }
.a-menu__sep { border: 0; border-block-start: 1px solid var(--f2f-a-border-subtle); margin: var(--f2f-a-space-1) 0; }
.a-menu__meta { color: var(--f2f-a-text-muted); font-size: var(--f2f-a-fs-100); margin-inline-start: auto; }

.a-body { display: flex; flex: 1 1 auto; align-items: stretch; }

/* White, like the canvas beside it. Separation is a metallic gold stripe — the same edge
   language as the current-page plate, switcher, and primary — not a grey hairline. Hover and
   the current page still carry their own fill; the stripe is chrome, not state. */
.a-rail {
  flex: 0 0 var(--f2f-a-rail-w); inline-size: var(--f2f-a-rail-w);
  background: var(--f2f-a-surface);
  border-inline-end: 2px solid transparent;
  border-image: linear-gradient(
    180deg,
    #f7e7a6 0%,
    #e8c84a 16%,
    #c49b24 36%,
    #8a6a14 50%,
    #d4ae4a 68%,
    #f3e4a0 84%,
    #b89228 100%
  ) 1;
  padding: var(--f2f-a-space-4) var(--f2f-a-space-2) var(--f2f-a-space-8);
  overflow-y: auto;
}
.a-rail__group { margin-block-end: var(--f2f-a-space-4); }
.a-rail__heading {
  display: flex;
  align-items: center;
  gap: var(--f2f-a-space-2);
  inline-size: 100%;
  margin: 0 0 var(--f2f-a-space-1);
  padding: var(--f2f-a-space-2) var(--f2f-a-space-3);
  min-block-size: var(--f2f-a-tap-min);
  border-radius: var(--f2f-a-radius-md);
  font-size: var(--f2f-a-fs-100);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: start;
  color: var(--f2f-a-text-muted);
  font-weight: var(--f2f-a-fw-medium);
  cursor: pointer;
  list-style: none;
  transition: background var(--f2f-a-motion-fast) var(--f2f-a-ease), color var(--f2f-a-motion-fast) var(--f2f-a-ease);
}
.a-rail__heading::-webkit-details-marker { display: none; }
.a-rail__heading::marker { content: ""; }
.a-rail__heading:hover {
  background: var(--f2f-a-accent-subtle);
  color: var(--f2f-a-text);
}
.a-rail__heading:focus-visible {
  outline: 2px solid var(--f2f-a-accent);
  outline-offset: 2px;
}
a.a-rail__heading {
  text-decoration: none;
  box-sizing: border-box;
}
.a-rail__heading-label { flex: 1 1 auto; min-inline-size: 0; }
.a-rail__heading .a-rail__count { margin-inline-start: 0; }
/* Waiting total only while the section is closed */
.a-rail__group[open] > .a-rail__heading .a-rail__heading-count { display: none; }
.a-rail__chevron {
  flex: 0 0 auto;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--f2f-a-motion-fast) var(--f2f-a-ease);
  opacity: 0.75;
  margin-block-start: -0.15em;
}
.a-rail__group:not([open]) > .a-rail__heading .a-rail__chevron {
  transform: rotate(-45deg);
  margin-block-start: 0;
}
.a-rail__list { list-style: none; margin: 0; padding: 0; }
.a-rail__link {
  position: relative;
  display: flex; align-items: center; gap: var(--f2f-a-space-2);
  min-block-size: var(--f2f-a-tap-min);
  padding: var(--f2f-a-space-2) var(--f2f-a-space-3);
  border-radius: var(--f2f-a-radius-md);
  color: var(--f2f-a-text); text-decoration: none;
  font-size: var(--f2f-a-fs-200);
  transition:
    background var(--f2f-a-motion-fast) var(--f2f-a-ease),
    box-shadow var(--f2f-a-motion-fast) var(--f2f-a-ease),
    color var(--f2f-a-motion-fast) var(--f2f-a-ease);
}
.a-rail__link:hover { background: var(--f2f-a-accent-subtle); color: var(--f2f-a-text); }
/* Current page: elevated plate + 1px metallic gold rim.
   Dual background-clip (same as auth inputs) — reliable on <a>, no solid gold fill. */
.a-rail__link[aria-current="page"],
.a-rail__heading[aria-current="page"] {
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      145deg,
      #f7e7a6 0%,
      #e8c84a 16%,
      #c49b24 36%,
      #8a6a14 50%,
      #d4ae4a 68%,
      #f3e4a0 84%,
      #b89228 100%
    ) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-weight: var(--f2f-a-fw-medium);
  color: var(--f2f-a-auth-navy, #2F4156);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 2px 4px rgba(16, 24, 32, 0.05),
    0 6px 16px rgba(16, 24, 32, 0.08);
  z-index: 1;
}
.a-rail__link[aria-current="page"]:hover,
.a-rail__heading[aria-current="page"]:hover {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      145deg,
      #f7e7a6 0%,
      #e8c84a 16%,
      #c49b24 36%,
      #8a6a14 50%,
      #d4ae4a 68%,
      #f3e4a0 84%,
      #b89228 100%
    ) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--f2f-a-auth-navy, #2F4156);
}
.a-rail__count {
  margin-inline-start: auto; font-variant-numeric: tabular-nums;
  font-size: var(--f2f-a-fs-100); color: var(--f2f-a-text-muted);
}
.a-rail__count[data-urgency="warning"] { color: var(--f2f-a-warning); font-weight: var(--f2f-a-fw-medium); }
.a-rail__count[data-urgency="danger"]  { color: var(--f2f-a-danger);  font-weight: var(--f2f-a-fw-bold); }

/* §3.2 — Administration sits below a REAL divider, not another heading. A visual break is the
   cheapest way to stop somebody believing "Sites" means "this site's settings". Metallic gold,
   same edge language as the current-page plate — chrome, not state. */
.a-rail__divider {
  border: 0;
  block-size: 2px;
  background: linear-gradient(
    90deg,
    #f7e7a6 0%,
    #e8c84a 16%,
    #c49b24 36%,
    #8a6a14 50%,
    #d4ae4a 68%,
    #f3e4a0 84%,
    #b89228 100%
  );
  margin: var(--f2f-a-space-5) var(--f2f-a-space-3);
}

.a-main {
  flex: 1 1 auto; min-inline-size: 0;
  padding: var(--f2f-a-space-5) var(--f2f-a-space-4) var(--f2f-a-space-8);
  max-inline-size: var(--f2f-a-content-max);
}

/* Branded main column — same surface language as sign-in: navy type, gold edges, lockup watermark. */
.a-main--branded {
  position: relative;
  overflow: hidden;
  min-block-size: calc(100dvh - var(--f2f-a-header-h));
  color: var(--f2f-a-auth-navy, #2F4156);

  --f2f-a-auth-navy: #2F4156;
  --f2f-a-auth-navy-hover: #243445;
  /* Soft plate fills shared by branded tables with gold rims. */
  --f2f-a-auth-fill-white: #FFFFFF;
  --f2f-a-auth-fill-beige: #F2EBD8;
  --f2f-a-auth-gold-edge: linear-gradient(
    145deg,
    #f7e7a6 0%,
    #e8c84a 16%,
    #c49b24 36%,
    #8a6a14 50%,
    #d4ae4a 68%,
    #f3e4a0 84%,
    #b89228 100%
  );
}
/* A confirm overlay is position:fixed; overflow:hidden would clip it to the column. */
.a-main--branded:has(.a-dialog-scrim) {
  overflow: visible;
}
.a-main--branded > .a-auth__watermark {
  position: absolute;
  inset-block-start: 6rem;
  inset-inline: 0;
  margin-inline: auto;
  margin-block: 0;
  inline-size: min(54rem, 80vmin);
  block-size: auto;
  max-block-size: 85dvh;
  object-fit: contain;
  object-position: center top;
  opacity: 0.28;
  filter: saturate(1.55) contrast(1.08);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.a-main--branded > :not(.a-auth__watermark) {
  position: relative;
  z-index: 1;
}
.a-main--picker {
  max-inline-size: none;
}
.a-main--branded .a-page__head {
  border-block-end-color: transparent;
}
.a-main--branded .a-page__title {
  color: var(--f2f-a-auth-navy);
}
.a-main--branded .a-page__subtitle {
  color: var(--f2f-a-auth-navy);
  opacity: 0.82;
}
.a-main--branded .a-section__heading {
  color: var(--f2f-a-auth-navy);
}
.a-main--branded .a-field__help,
.a-main--branded p {
  color: var(--f2f-a-auth-navy);
}
.a-main--branded a:not(.a-card):not(.a-btn):not(.a-menu__item):not(.a-page__back):not(.a-segmented__item):not(.a-tabs__tab) {
  color: var(--f2f-a-auth-navy);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.a-main--branded .a-callout a {
  color: var(--f2f-a-accent);
}
.a-main--branded a:not(.a-card):not(.a-btn):not(.a-menu__item):not(.a-page__back):not(.a-segmented__item):not(.a-tabs__tab):hover {
  color: var(--f2f-a-auth-navy-hover);
}

/* Glass + gold rim on cards (needs tiles, picker sites, etc.) */
.a-main--branded .a-card {
  position: relative;
  border: none;
  background-color: rgba(255, 255, 255, 0.08);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 8px 28px rgba(16, 24, 32, 0.06);
  color: var(--f2f-a-auth-navy);
  transition:
    background-color var(--f2f-a-motion-fast) var(--f2f-a-ease),
    box-shadow var(--f2f-a-motion-fast) var(--f2f-a-ease);
}
.a-main--branded a.a-card:hover {
  background-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 12px 32px rgba(16, 24, 32, 0.08);
  color: var(--f2f-a-auth-navy);
}
.a-main--branded .a-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--f2f-a-auth-gold-edge);
  pointer-events: none;
  z-index: 0;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.a-main--branded .a-card > * {
  position: relative;
  z-index: 1;
}
.a-main--branded .a-needs {
  border-inline-start-width: 3px;
}
.a-main--branded .a-needs__label {
  color: var(--f2f-a-auth-navy);
  opacity: 0.75;
}
.a-main--branded .a-needs__count {
  color: var(--f2f-a-auth-navy);
}
.a-main--branded .a-needs__age {
  color: var(--f2f-a-auth-navy);
  opacity: 0.78;
}
.a-main--branded .a-needs[data-urgency="clear"] {
  opacity: 0.9;
}
/* Urgency still carries on the left edge; gold rim stays the frame */
.a-main--branded .a-needs[data-urgency="warning"] {
  border-inline-start-color: var(--f2f-a-warning);
}
.a-main--branded .a-needs[data-urgency="danger"] {
  border-inline-start-color: var(--f2f-a-danger);
}

.a-main--branded .a-picker-card__row {
  display: flex; align-items: center; gap: var(--f2f-a-space-2);
}
.a-main--branded .a-picker-card__name {
  font-weight: var(--f2f-a-fw-bold);
  font-size: var(--f2f-a-fs-400);
  color: var(--f2f-a-auth-navy);
}
.a-main--branded .a-picker-card__key {
  color: var(--f2f-a-auth-navy);
  opacity: 0.7;
}
/* Overview cards: name + key, then the needs-you count/age like the site dashboard. */
.a-main--branded .a-picker-card {
  display: flex;
  flex-direction: column;
  gap: var(--f2f-a-space-2);
  min-height: 8.5rem;
}
.a-main--branded .a-picker-card .a-needs__count {
  margin-block-start: auto;
}

.a-main--branded .a-callout {
  position: relative;
  border: none;
  background-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--f2f-a-auth-navy);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
.a-main--branded .a-callout::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--f2f-a-auth-gold-edge);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.a-main--branded .a-callout--info,
.a-main--branded .a-callout--warning {
  border-inline-start: none;
}
.a-main--branded .a-callout--danger {
  border-inline-start: 3px solid var(--f2f-a-danger);
}
.a-main--branded .a-callout--info strong {
  color: var(--f2f-a-danger);
}
.a-main--branded .a-callout--warning {
  border-inline-start: none;
}
.a-main--branded .a-callout--warning strong {
  color: var(--f2f-a-danger);
}
.a-main--branded .a-callout--danger { border-inline-start-color: var(--f2f-a-danger); }
.a-main--branded .a-callout--spi strong { color: var(--f2f-a-danger); }

.a-main--branded .a-empty {
  position: relative;
  border: none;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--f2f-a-auth-navy);
}
.a-main--branded .a-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--f2f-a-auth-gold-edge);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* Tables: gold rim + alternating beige/white row fills (same language as .a-btn--primary).
   Near-solid plates so the watermark does not mute navy body copy.
   Sticky table headers must not use the shell header offset: .a-main--branded is
   position:relative + overflow:hidden, so sticky th with inset-block-start: header-h
   draws labels through the first data row (headers looking like they sit under the cells). */
.a-main--branded .a-table {
  display: table;
  border: 1px solid transparent;
  border-radius: var(--f2f-a-radius-lg);
  overflow: hidden;
  color: var(--f2f-a-auth-navy);
  background:
    linear-gradient(var(--f2f-a-auth-fill-white), var(--f2f-a-auth-fill-white)) padding-box,
    var(--f2f-a-auth-gold-edge) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 2px 4px rgba(16, 24, 32, 0.05),
    0 6px 16px rgba(16, 24, 32, 0.08);
}
.a-main--branded .a-table th,
.a-main--branded .a-table td {
  border-block-end-color: rgba(47, 65, 86, 0.12);
  color: var(--f2f-a-auth-navy);
}
.a-main--branded .a-table thead th {
  position: static;
  inset-block-start: auto;
  z-index: auto;
  background: var(--f2f-a-auth-fill-beige);
  color: var(--f2f-a-auth-navy);
  opacity: 1;
  font-weight: var(--f2f-a-fw-medium);
}
.a-main--branded .a-table tbody tr:nth-child(odd) > * {
  background: var(--f2f-a-auth-fill-white);
}
.a-main--branded .a-table tbody tr:nth-child(even) > * {
  background: var(--f2f-a-auth-fill-beige);
}
.a-main--branded .a-table td {
  color: var(--f2f-a-auth-navy);
  opacity: 1;
}
.a-main--branded .a-table .a-btn {
  color: var(--f2f-a-auth-navy);
  background: var(--f2f-a-auth-fill-white);
  border-color: rgba(47, 65, 86, 0.35);
}
.a-main--branded .a-table .a-btn:hover {
  background: var(--f2f-a-auth-fill-beige);
  border-color: rgba(47, 65, 86, 0.5);
}
.a-main--branded .a-table caption {
  color: var(--f2f-a-auth-navy);
  opacity: 0.8;
}

/* §4.3 — the only two persistent scope frames in the product. Neither is dismissible: a banner
   you can dismiss is a banner everybody dismisses on day one. */
.a-main[data-scope="shared"] { border-inline-start: 4px solid var(--f2f-a-scope-shared-edge); }
.a-main[data-scope="spi"]    { border-inline-start: 4px solid var(--f2f-a-spi-edge); }

.a-page__head {
  display: flex; flex-wrap: wrap; gap: var(--f2f-a-space-3);
  align-items: flex-start; justify-content: space-between;
  margin-block-end: var(--f2f-a-space-4);
  padding-block-end: var(--f2f-a-space-3);
  border-block-end: 1px solid var(--f2f-a-border-subtle);
}
.a-page__head--stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--f2f-a-space-2);
}
.a-page__head-row {
  display: flex; flex-wrap: wrap; gap: var(--f2f-a-space-3);
  align-items: flex-start; justify-content: space-between;
  inline-size: 100%;
}
.a-page__intro { flex: 1 1 12rem; min-inline-size: 0; }
.a-page__head-end {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--f2f-a-space-3);
  justify-content: flex-end;
  flex: 1 1 16rem;
}
.a-page__head-aside {
  flex: 1 1 14rem;
  max-inline-size: min(28rem, 100%);
}
/* Conditional head notices leave an empty fragment when off — collapse the aside. */
.a-page__head-aside:empty {
  display: none;
}
.a-page__head-aside .a-callout {
  margin-block-end: 0;
  max-inline-size: none;
}
/* Head notices already sit in the title row — no accent stripe (duplicates the chrome). */
.a-page__head-aside .a-callout--info {
  border-inline-start: none;
  padding-inline-start: var(--f2f-a-space-4);
}
.a-page__head-aside .a-callout--info strong,
.a-callout--info strong {
  color: var(--f2f-a-danger);
}
.a-page__head-below {
  inline-size: 100%;
  min-inline-size: 0;
}
.a-page__title { margin: 0; }
.a-page__subtitle { color: var(--f2f-a-text-muted); font-size: var(--f2f-a-fs-200); margin: var(--f2f-a-space-1) 0 0; }

/* Back trail — quiet control, not a bare underlined link. */
.a-page__back {
  display: inline-flex;
  align-items: center;
  gap: var(--f2f-a-space-2);
  min-block-size: var(--f2f-a-tap-min);
  padding-inline: var(--f2f-a-space-3);
  margin: 0 0 var(--f2f-a-space-3);
  border-radius: var(--f2f-a-radius-md);
  border: 1px solid var(--f2f-a-border);
  background: var(--f2f-a-surface);
  color: var(--f2f-a-text-muted);
  font-size: var(--f2f-a-fs-200);
  font-weight: var(--f2f-a-fw-medium);
  text-decoration: none;
  box-shadow: var(--f2f-a-elev-0);
  transition:
    color var(--f2f-a-motion-fast) var(--f2f-a-ease),
    background-color var(--f2f-a-motion-fast) var(--f2f-a-ease),
    border-color var(--f2f-a-motion-fast) var(--f2f-a-ease),
    box-shadow var(--f2f-a-motion-fast) var(--f2f-a-ease);
}
.a-page__back:hover {
  color: var(--f2f-a-text);
  background: var(--f2f-a-accent-subtle);
  border-color: var(--f2f-a-border-interactive);
  text-decoration: none;
}
.a-page__back:focus-visible {
  outline: var(--f2f-a-focus-ring-width) solid var(--f2f-a-focus-ring);
  outline-offset: var(--f2f-a-focus-ring-offset);
}
.a-page__back-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.25rem;
  font-size: 1.05em;
  line-height: 1;
  opacity: 0.9;
}
.a-page__back-label {
  line-height: 1.2;
}

/* Branded main: soft white plate + gold rim (same language as primary, quieter weight). */
.a-main--branded .a-page__back {
  color: var(--f2f-a-auth-navy);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--f2f-a-auth-fill-white, #fff), var(--f2f-a-auth-fill-white, #fff)) padding-box,
    var(--f2f-a-auth-gold-edge) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 1px 3px rgba(16, 24, 32, 0.05);
}
.a-main--branded .a-page__back:hover {
  color: var(--f2f-a-auth-navy);
  background:
    linear-gradient(var(--f2f-a-auth-fill-beige, #F2EBD8), var(--f2f-a-auth-fill-beige, #F2EBD8)) padding-box,
    var(--f2f-a-auth-gold-edge) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 2px 6px rgba(16, 24, 32, 0.08);
}
.a-main--branded .a-page__back:focus-visible {
  outline-color: #c49b24;
}

.a-section { margin-block-end: var(--f2f-a-space-6); }
.a-section__heading { font-size: var(--f2f-a-fs-400); margin-block-end: var(--f2f-a-space-3); }

/* --- 10.3 Responsive: the rail becomes a labelled DRAWER, never an icon rail ------------------
   §10.3: "No icon-only rail — icon rails are unreadable to non-technical users, and this audience
   is the reason."

   The drawer is a <details>/<summary> disclosure, not a scripted panel. That buys three things
   for nothing: it is keyboard-operable and screen-reader-announced by the browser rather than by
   ARIA anybody has to maintain, it works before Blazor's circuit connects, and it works on the
   static-SSR pages and the interactive pages identically — which matters because a render mode
   cannot be declared on a child of an already-interactive parent, so a scripted shell would have
   forced every page in the CMS to be interactive whether it needed it or not. */
.a-rail-mobile { display: none; }

@media (max-width: 1023px) {
  .a-rail { display: none; }

  .a-rail-mobile {
    display: block;
    background: var(--f2f-a-surface);
    border-block-end: 1px solid var(--f2f-a-border);
  }
  .a-rail-mobile > summary {
    display: flex; align-items: center; gap: var(--f2f-a-space-2);
    min-block-size: var(--f2f-a-tap-min);
    padding-inline: var(--f2f-a-space-4);
    font-weight: var(--f2f-a-fw-medium); cursor: pointer;
    list-style-position: inside;
  }
  .a-rail-mobile > nav { padding: var(--f2f-a-space-2) var(--f2f-a-space-2) var(--f2f-a-space-5); }

  .a-body { flex-direction: column; }
  .a-main { padding-inline: var(--f2f-a-space-3); }

  /* Header: one row on a tablet — switcher, command search, account. The spacer is desktop
     luxury; dropping it is what keeps 768px from overflowing (1.4.10). */
  .a-header {
    gap: var(--f2f-a-space-2);
    padding-inline: var(--f2f-a-space-2);
  }
  .a-header__spacer { display: none; }
  .a-intent {
    flex: 1 1 8rem;
    min-inline-size: 0;
    max-inline-size: none;
    margin-inline-start: 0;
  }
  .a-intent__input { padding-inline: var(--f2f-a-space-2); }

  .a-switcher,
  .a-switcher__static,
  .a-usermenu {
    flex: 0 1 auto;
    min-inline-size: 0;
    max-inline-size: 10.5rem;
  }
  .a-switcher > summary,
  .a-usermenu > summary,
  .a-switcher__static {
    padding-inline: var(--f2f-a-space-2);
    max-inline-size: 100%;
  }
  .a-switcher > summary > span:first-of-type,
  .a-usermenu > summary > span:first-of-type,
  .a-switcher__static > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
  }

  .a-search {
    flex: 1 1 100%;
    max-inline-size: none;
  }
  .a-search .a-input { flex: 1 1 auto; min-inline-size: 0; }

  .a-page__head-end {
    flex: 0 1 auto;
  }
}

/* §10.3 tablet (640–1023): the list stays a table, with fewer columns so it does not
   scroll sideways. Phone (<640) already turns the same table into cards. */
@media (min-width: 640px) and (max-width: 1023px) {
  .a-col--secondary { display: none; }
}

/* Phone: switcher + account on the first row, command search full-width underneath. */
@media (max-width: 639px) {
  .a-header {
    flex-wrap: wrap;
    min-height: auto;
    padding-block: var(--f2f-a-space-2);
  }
  .a-intent {
    flex: 1 1 100%;
    order: 3;
  }
  .a-usermenu { margin-inline-start: auto; }
  .a-switcher,
  .a-switcher__static,
  .a-usermenu {
    max-inline-size: min(14rem, 48%);
  }
}

/* =============================================================================================
   The unauthenticated screens — sign-in, two-factor, enrolment, step-up, denied

   These are the only pages in the CMS with no shell: no rail, no switcher, no user menu, because
   there is no user yet. A centred card on a white field, with the ministry lockup as a soft
   watermark behind everything (not as a hero badge inside the card).

   The mark is F2F.CMS's OWN copy under wwwroot/images — this project holds no reference to
   F2F.Razor and does not reach into a sibling site's wwwroot (App.razor says why), so the asset
   is duplicated rather than shared. It is the only image in this project.
   ============================================================================================= */

.a-auth {
  position: relative;
  overflow: hidden;
  min-block-size: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--f2f-a-space-4);
  padding: var(--f2f-a-space-6) var(--f2f-a-space-4);
  background: var(--f2f-a-surface);

  /* Ministry lockup navy (Faith2FaithSite.Theme.Primary) — type and primary button on this screen. */
  --f2f-a-auth-navy: #2F4156;
  --f2f-a-auth-navy-hover: #243445;
  --f2f-a-auth-gold-edge: linear-gradient(
    145deg,
    #f7e7a6 0%,
    #e8c84a 16%,
    #c49b24 36%,
    #8a6a14 50%,
    #d4ae4a 68%,
    #f3e4a0 84%,
    #b89228 100%
  );
}

/* The lockup sits behind the glass plate. Opacity is high ENOUGH that a translucent card
   actually shows it — at 0.09–0.16 on pure white the plate just reads as solid fill. */
.a-auth__watermark {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: min(54rem, 96vmin);
  block-size: auto;
  max-block-size: 96dvh;
  object-fit: contain;
  opacity: 0.34;
  filter: saturate(1.55) contrast(1.08);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Glass plate: almost no fill, all structure from blur + rim. Uses rgba() (not modern
   space-separated alpha) so every browser that can paint the form greys a transparent plate.
   `isolation` is deliberately absent on .a-auth — it made backdrop-filter sample a flat white
   group on Chromium and the plate looked solid no matter what opacity we set. */

.a-auth__card {
  position: relative;
  z-index: 1;
  inline-size: min(26rem, 100%);
  border: none;
  border-radius: var(--f2f-a-radius-lg);
  /* Glass fill only — the gold is drawn as a 1px ring on ::before, not as a second
     background layer. (background-clip: border-box on a gold gradient filled the whole plate
     whenever the padding-box glass layer failed to cover it.) */
  background-color: rgba(255, 255, 255, 0.04);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 12px 40px rgba(16, 24, 32, 0.06),
    0 2px 8px rgba(16, 24, 32, 0.03);
  padding: var(--f2f-a-space-6);
  color: var(--f2f-a-auth-navy);
}

/* True thin metallic gold edge. Mask punches out the interior so only the 1px padding ring paints. */
.a-auth__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--f2f-a-auth-gold-edge);
  pointer-events: none;
  z-index: 0;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.a-auth__card > * {
  position: relative;
  z-index: 1;
}

/* Controls stay solid so the frosted plate never makes a field unreadable. */
.a-auth__card .a-input,
.a-auth__card .a-select,
.a-auth__card .a-textarea,
.a-auth__card .a-btn:not(.a-btn--primary):not(.a-btn--danger):not(.a-btn--armed) {
  background-color: #FFFFFF;
  color: var(--f2f-a-auth-navy);
}

/* Same metallic gold 1px rim as the card. Inputs cannot host ::before/::after, so the rim is a
   dual-layer background-clip: opaque white padding-box over the shared gold border-box gradient.
   The white layer is a solid gradient (not only background-color) so it always covers the gold. */
.a-auth__card .a-input,
.a-auth__card .a-select,
.a-auth__card .a-textarea {
  border: 1px solid transparent;
  color: var(--f2f-a-auth-navy);
  background-color: #FFFFFF;
  background-image:
    linear-gradient(#FFFFFF, #FFFFFF),
    var(--f2f-a-auth-gold-edge);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.a-auth__card .a-input:focus-visible,
.a-auth__card .a-select:focus-visible,
.a-auth__card .a-textarea:focus-visible {
  outline-color: #c49b24;
}

.a-auth__card .a-field__label {
  color: var(--f2f-a-auth-navy);
}

.a-auth__card .a-btn--primary {
  border: 1px solid var(--f2f-a-auth-navy);
  background: var(--f2f-a-auth-navy);
  color: #FFFFFF;
  box-shadow: none;
}
.a-auth__card .a-btn--primary:hover {
  border-color: var(--f2f-a-auth-navy-hover);
  background: var(--f2f-a-auth-navy-hover);
  color: #FFFFFF;
  box-shadow: none;
}

.a-auth__brand {
  text-align: center;
  margin-block-end: var(--f2f-a-space-4);
}

.a-auth__product {
  margin: 0;
  color: var(--f2f-a-auth-navy);
  font-size: var(--f2f-a-fs-100); font-weight: var(--f2f-a-fw-medium);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Heading and lede centre-align with the card brand; the form stays left-aligned. */
.a-auth__title {
  margin: 0 0 var(--f2f-a-space-2);
  text-align: center;
  color: var(--f2f-a-auth-navy);
}
.a-auth__lede {
  color: var(--f2f-a-auth-navy);
  font-size: var(--f2f-a-fs-200);
  margin-block-end: var(--f2f-a-space-5);
  text-align: center;
  opacity: 0.88;
}

/* The submit button carries its own spacing, so the field above it does not add a second gap. */
.a-auth__card .a-field:last-of-type { margin-block-end: var(--f2f-a-space-5); }

/* The authenticator code is read off one screen and typed into another, digit by digit, so it is
   monospaced and spaced out. Two classes deep on purpose: `.a-input` declares `font: inherit`
   further down the sheet, which resets the family of anything at equal specificity — `.a-mono`
   included. The font SIZE is deliberately left alone; `.a-mono`'s 0.9em would put this input under
   16px and iOS zooms the whole page on focus. */
.a-input.a-auth__code { font-family: var(--f2f-a-font-mono); letter-spacing: 0.25em; }

/* The TOTP secret on the enrolment page. `user-select: all` because it is transcribed into an
   authenticator by hand more often than it is scanned, and a half-selected shared secret is an
   enrolment that fails for a reason nobody can see. */
.a-auth__secret {
  font-family: var(--f2f-a-font-mono); font-size: var(--f2f-a-fs-300);
  letter-spacing: 0.08em; word-break: break-all; user-select: all;
  background: var(--f2f-a-surface-sunken);
  border: 1px solid var(--f2f-a-border);
  border-radius: var(--f2f-a-radius-md);
  padding: var(--f2f-a-space-3);
  margin: 0 0 var(--f2f-a-space-5);
}

.a-auth__note {
  margin: var(--f2f-a-space-4) 0 0;
  inline-size: 100%;
  color: var(--f2f-a-auth-navy, var(--f2f-a-text-muted));
  font-size: var(--f2f-a-fs-100);
  text-align: center;
  opacity: 0.72;
}

/* =============================================================================================
   Controls
   ============================================================================================= */

.a-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--f2f-a-space-2);
  min-block-size: var(--f2f-a-tap-min); min-inline-size: var(--f2f-a-tap-min);
  padding-inline: var(--f2f-a-space-4);
  border-radius: var(--f2f-a-radius-md);
  border: 1px solid var(--f2f-a-border-interactive);   /* 4.06:1, never --f2f-a-border */
  background: var(--f2f-a-surface); color: var(--f2f-a-text);
  font: inherit; font-size: var(--f2f-a-fs-200); font-weight: var(--f2f-a-fw-medium);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--f2f-a-motion-instant) var(--f2f-a-ease);
}
.a-btn:hover { background: var(--f2f-a-accent-subtle); }
.a-btn[disabled], .a-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Primary CTA: same elevated white plate + metallic gold rim as rail current page. */
.a-btn--primary {
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      145deg,
      #f7e7a6 0%,
      #e8c84a 16%,
      #c49b24 36%,
      #8a6a14 50%,
      #d4ae4a 68%,
      #f3e4a0 84%,
      #b89228 100%
    ) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--f2f-a-auth-navy, #2F4156);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 2px 4px rgba(16, 24, 32, 0.05),
    0 6px 16px rgba(16, 24, 32, 0.08);
  transition:
    background var(--f2f-a-motion-fast) var(--f2f-a-ease),
    box-shadow var(--f2f-a-motion-fast) var(--f2f-a-ease),
    color var(--f2f-a-motion-fast) var(--f2f-a-ease);
}
.a-btn--primary:hover {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      145deg,
      #f7e7a6 0%,
      #e8c84a 16%,
      #c49b24 36%,
      #8a6a14 50%,
      #d4ae4a 68%,
      #f3e4a0 84%,
      #b89228 100%
    ) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--f2f-a-auth-navy, #2F4156);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 3px 6px rgba(16, 24, 32, 0.07),
    0 8px 20px rgba(16, 24, 32, 0.1);
}
.a-btn--primary:focus-visible { outline-color: #c49b24; }

.a-btn--danger { background: var(--f2f-a-danger); color: #FFFFFF; border-color: var(--f2f-a-danger); }
.a-btn--secondary { background: var(--f2f-a-surface); color: var(--f2f-a-accent); border-color: var(--f2f-a-border-interactive); }
.a-btn--quiet { border-color: transparent; background: transparent; color: var(--f2f-a-accent); }
.a-btn--quiet:hover { background: var(--f2f-a-accent-subtle); }
.a-btn--wide { inline-size: 100%; }
.a-btn--armed { background: var(--f2f-a-warning); border-color: var(--f2f-a-warning); color: #FFFFFF; }

.a-btn-row { display: flex; flex-wrap: wrap; gap: var(--f2f-a-space-2); }

/* --- Fields ------------------------------------------------------------------------------- */
.a-field { margin-block-end: var(--f2f-a-space-4); max-inline-size: var(--f2f-a-form-max); }
.a-field__label { display: block; font-weight: var(--f2f-a-fw-medium); font-size: var(--f2f-a-fs-200); margin-block-end: var(--f2f-a-space-1); }

/* Markdown editor: label → write/preview → toolbar → textarea, with clear gaps. */
.a-md {
  display: flex;
  flex-direction: column;
  gap: var(--f2f-a-space-3);
}
.a-md > .a-field__label {
  margin-block-end: 0;
}
.a-md__mode {
  align-self: flex-start;
}
.a-md__toolbar {
  margin: 0;
}
.a-md__tool {
  min-inline-size: var(--f2f-a-tap-min);
  font-weight: var(--f2f-a-fw-medium);
}
.a-md__input {
  margin: 0;
}
.a-md > .a-field__help {
  margin-block-start: 0;
}

/* Preview pane: readable prose, not monospaced source dump. */
.a-md-preview {
  padding: var(--f2f-a-space-4);
  min-block-size: 8rem;
  max-inline-size: var(--f2f-a-form-max);
  line-height: var(--f2f-a-lh-body, 1.55);
  color: var(--f2f-a-auth-navy, var(--f2f-a-text));
  background: var(--f2f-a-surface, #fff);
}
.a-md-preview > :first-child { margin-block-start: 0; }
.a-md-preview > :last-child { margin-block-end: 0; }
.a-md-preview h1,
.a-md-preview h2,
.a-md-preview h3 {
  margin-block: var(--f2f-a-space-3) var(--f2f-a-space-2);
  line-height: var(--f2f-a-lh-tight);
}
.a-md-preview p,
.a-md-preview ul,
.a-md-preview ol,
.a-md-preview blockquote {
  margin-block: 0 var(--f2f-a-space-3);
}
.a-md-preview a {
  color: var(--f2f-a-accent, #2F4156);
  text-decoration: underline;
}
.a-md-preview blockquote {
  margin-inline: 0;
  padding-inline-start: var(--f2f-a-space-3);
  border-inline-start: 3px solid var(--f2f-a-border, #C3CBD5);
  color: var(--f2f-a-text-muted, #5a6570);
}
/* Required is stated IN TEXT. An asterisk alone is not a label. */
.a-field__req { font-weight: var(--f2f-a-fw-regular); color: var(--f2f-a-text-muted); }
.a-field__help { color: var(--f2f-a-text-muted); font-size: var(--f2f-a-fs-100); margin: var(--f2f-a-space-1) 0 0; }
.a-field__error { color: var(--f2f-a-danger); font-size: var(--f2f-a-fs-100); margin: var(--f2f-a-space-1) 0 0; font-weight: var(--f2f-a-fw-medium); }
.a-field__prefixed { display: flex; align-items: stretch; }
.a-field__prefix {
  display: inline-flex; align-items: center; padding-inline: var(--f2f-a-space-2);
  border: 1px solid var(--f2f-a-border-interactive); border-inline-end: 0;
  border-start-start-radius: var(--f2f-a-radius-md); border-end-start-radius: var(--f2f-a-radius-md);
  background: var(--f2f-a-surface-sunken); color: var(--f2f-a-text-muted);
  font-family: var(--f2f-a-font-mono);
}
.a-field__prefixed .a-input { border-start-start-radius: 0; border-end-start-radius: 0; }

.a-input, .a-select, .a-textarea {
  inline-size: 100%;
  min-block-size: var(--f2f-a-tap-min);
  padding: var(--f2f-a-space-2) var(--f2f-a-space-3);
  font: inherit;
  font-size: var(--f2f-a-fs-300);      /* 16px — below this iOS zooms the page on focus */
  color: var(--f2f-a-text);
  background: var(--f2f-a-surface);
  border: 1px solid var(--f2f-a-border-interactive);   /* WCAG 1.4.11 — 4.06:1 */
  border-radius: var(--f2f-a-radius-md);
}
.a-textarea { min-block-size: 12rem; line-height: var(--f2f-a-lh-relaxed); resize: vertical; }
.a-input[aria-invalid="true"], .a-textarea[aria-invalid="true"] { border-color: var(--f2f-a-danger); border-width: 2px; }
.a-input[readonly], .a-input[disabled], .a-textarea[disabled], .a-select[disabled] {
  background: var(--f2f-a-surface-sunken); color: var(--f2f-a-text-muted);
}

.a-check {
  display: flex;
  align-items: center;
  gap: var(--f2f-a-space-2);
  min-block-size: var(--f2f-a-tap-min);
}
.a-check input {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  accent-color: var(--f2f-a-accent);
}

.a-radio-set { border: 0; padding: 0; margin: 0 0 var(--f2f-a-space-4); }
.a-radio-set legend { font-weight: var(--f2f-a-fw-medium); font-size: var(--f2f-a-fs-200); padding: 0; margin-block-end: var(--f2f-a-space-1); }

/* --- Chips -------------------------------------------------------------------------------- */
.a-chip {
  display: inline-flex; align-items: center; gap: var(--f2f-a-space-1);
  padding: 2px var(--f2f-a-space-2);
  border-radius: var(--f2f-a-radius-full);
  border: 1px solid currentColor;
  font-size: var(--f2f-a-fs-100); font-weight: var(--f2f-a-fw-medium);
  background: var(--f2f-a-status-draft-bg); color: var(--f2f-a-status-draft-fg);
  white-space: nowrap;
}
.a-chip--draft     { background: var(--f2f-a-status-draft-bg);     color: var(--f2f-a-status-draft-fg); }
.a-chip--published { background: var(--f2f-a-status-published-bg); color: var(--f2f-a-status-published-fg); }
.a-chip--archived  { background: var(--f2f-a-status-archived-bg);  color: var(--f2f-a-status-archived-fg); }
.a-chip--deleted   { background: var(--f2f-a-status-deleted-bg);   color: var(--f2f-a-status-deleted-fg); }
.a-chip--shared    { background: var(--f2f-a-scope-shared-bg);     color: var(--f2f-a-scope-shared-fg); }
.a-chip--flag      { background: var(--f2f-a-spi-bg);              color: var(--f2f-a-spi-fg); }

/* --- Callouts ----------------------------------------------------------------------------- */
.a-callout {
  border-inline-start: 4px solid var(--f2f-a-border-interactive);
  background: var(--f2f-a-surface-sunken);
  padding: var(--f2f-a-space-3) var(--f2f-a-space-4);
  border-radius: var(--f2f-a-radius-md);
  margin-block-end: var(--f2f-a-space-4);
  max-inline-size: var(--f2f-a-prose-max);
}
.a-callout--info {
  border-inline-start: none;
  padding-inline-start: var(--f2f-a-space-4);
}
.a-callout--warning {
  border-inline-start: none;
  padding-inline-start: var(--f2f-a-space-4);
}
.a-callout--warning strong {
  color: var(--f2f-a-danger);
}
.a-callout--danger  { border-inline-start-color: var(--f2f-a-danger); }
.a-callout--spi     { border-inline-start-color: var(--f2f-a-spi-edge); background: var(--f2f-a-spi-bg); color: var(--f2f-a-spi-fg); }
.a-callout--spi strong { color: var(--f2f-a-danger); }
.a-callout--shared  { border-inline-start-color: var(--f2f-a-scope-shared-edge); background: var(--f2f-a-scope-shared-bg); color: var(--f2f-a-scope-shared-fg); }

/* §6.2 — the shared scope bar does NOT scroll away. */
.a-scopebar {
  position: sticky; inset-block-start: var(--f2f-a-header-h); z-index: var(--f2f-a-z-sticky);
  background: var(--f2f-a-scope-shared-bg); color: var(--f2f-a-scope-shared-fg);
  border: 1px solid var(--f2f-a-scope-shared-edge);
  border-radius: var(--f2f-a-radius-md);
  padding: var(--f2f-a-space-3) var(--f2f-a-space-4);
  margin-block-end: var(--f2f-a-space-4);
}
.a-scopebar__title { font-weight: var(--f2f-a-fw-bold); }
.a-scopebar__body { font-size: var(--f2f-a-fs-200); }

/* =============================================================================================
   Cards, tables, lists
   ============================================================================================= */

.a-card {
  background: var(--f2f-a-surface);
  border: 1px solid var(--f2f-a-border);
  border-radius: var(--f2f-a-radius-lg);
  padding: var(--f2f-a-space-4);
  box-shadow: var(--f2f-a-elev-1);
}

.a-cardgrid { display: grid; gap: var(--f2f-a-space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .a-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .a-cardgrid { grid-template-columns: 1fr; } }

.a-needs {
  display: flex; flex-direction: column; gap: var(--f2f-a-space-1);
  min-block-size: 7rem; text-decoration: none; color: inherit;
  border-inline-start: 4px solid transparent;
}
.a-needs__label { font-size: var(--f2f-a-fs-200); color: var(--f2f-a-text-muted); }
.a-needs__count { font-size: var(--f2f-a-fs-600); font-weight: var(--f2f-a-fw-bold); font-variant-numeric: tabular-nums; }
.a-needs__age   { font-size: var(--f2f-a-fs-100); }
.a-needs[data-urgency="clear"]   { opacity: 0.75; }
.a-needs[data-urgency="warning"] { border-inline-start-color: var(--f2f-a-warning); }
.a-needs[data-urgency="warning"] .a-needs__age { color: var(--f2f-a-warning); font-weight: var(--f2f-a-fw-medium); }
.a-needs[data-urgency="danger"]  { border-inline-start-color: var(--f2f-a-danger); }
.a-needs[data-urgency="danger"] .a-needs__age { color: var(--f2f-a-danger); font-weight: var(--f2f-a-fw-bold); }

.a-table { inline-size: 100%; border-collapse: collapse; background: var(--f2f-a-surface); }
.a-table caption { text-align: start; color: var(--f2f-a-text-muted); font-size: var(--f2f-a-fs-100); padding-block-end: var(--f2f-a-space-2); }
.a-table th, .a-table td {
  text-align: start; padding: var(--f2f-a-space-2) var(--f2f-a-space-3);
  border-block-end: 1px solid var(--f2f-a-border-subtle);   /* decorative — this is a hairline */
  font-size: var(--f2f-a-fs-200);
}
/* Row heights are MIN-heights: WCAG 1.4.12 means no fixed-height container holds text. */
.a-table tbody tr { min-block-size: var(--f2f-a-row-h); }
.a-table thead th {
  position: sticky; inset-block-start: var(--f2f-a-header-h); z-index: var(--f2f-a-z-sticky);
  background: var(--f2f-a-surface-sunken); font-weight: var(--f2f-a-fw-medium);
  font-size: var(--f2f-a-fs-100); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--f2f-a-text-muted);
}
/* Keep this a table-cell. `display: flex` on `td` shrinks the cell to its buttons, so the
   row's zebra fill stops short and a white block appears under the actions. Flex lives on
   the inner wrapper (or, on card layout, on the cell after it becomes a block). */
.a-table__actions {
  text-align: end;
  white-space: nowrap;
  vertical-align: top;
}
.a-table__actions-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--f2f-a-space-2);
}
.a-table__actions form { display: inline-flex; }
.a-table__actions > * + * { margin-inline-start: var(--f2f-a-space-2); }
.a-table__actions .a-btn { min-block-size: var(--f2f-a-tap-min); }   /* 2.5.8 — 44px, not 24px */

.a-people-table tbody td {
  vertical-align: top;
  padding-block: var(--f2f-a-space-4);
}
.a-people-name { font-weight: var(--f2f-a-fw-medium); }
.a-people-access {
  display: flex;
  flex-wrap: wrap;
  gap: var(--f2f-a-space-2);
  align-items: center;
}
.a-people-grant {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.65em 0.2em 0.45em;
  border-radius: var(--f2f-a-radius-full);
  background: rgba(47, 65, 86, 0.07);
  font-size: var(--f2f-a-fs-100);
  line-height: 1.3;
  white-space: nowrap;
}
.a-people-grant .a-dot {
  inline-size: 8px;
  block-size: 8px;
}
.a-people-grant__role {
  color: var(--f2f-a-text-muted);
  font-weight: var(--f2f-a-fw-medium);
}
.a-people-self-note {
  margin: 0;
  max-inline-size: 14rem;
  white-space: normal;
  text-align: end;
  color: var(--f2f-a-text-muted);
  font-size: var(--f2f-a-fs-100);
  line-height: var(--f2f-a-lh-normal);
}

/* <640px a table becomes cards. 1.4.10 Reflow: no horizontal scrolling anywhere. */
@media (max-width: 639px) {
  .a-table--cards thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .a-table--cards, .a-table--cards tbody, .a-table--cards tr, .a-table--cards td { display: block; inline-size: 100%; }
  /* Outer plate frame is per-row on small screens; drop the table shell gold rim. */
  .a-main--branded .a-table--cards {
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: visible;
  }
  .a-table--cards tr {
    border: 1px solid var(--f2f-a-border); border-radius: var(--f2f-a-radius-md);
    margin-block-end: var(--f2f-a-space-3); padding: var(--f2f-a-space-2);
  }
  .a-table--cards td { border: 0; padding: var(--f2f-a-space-1) var(--f2f-a-space-2); display: flex; gap: var(--f2f-a-space-2); }
  .a-table--cards td::before {
    content: attr(data-label); color: var(--f2f-a-text-muted); font-size: var(--f2f-a-fs-100);
    min-inline-size: 8rem; flex: 0 0 auto;
  }
  .a-table--cards td:empty { display: none; }
  .a-table__actions { justify-content: flex-end; }
  .a-table--cards .a-table__actions > * + * { margin-inline-start: 0; }
  .a-table__actions-inner { flex: 1; }
  .a-people-access { flex: 1; min-inline-size: 0; }
  .a-people-self-note { text-align: start; max-inline-size: none; }

  .a-main--branded .a-table--cards tr {
    border: 1px solid transparent;
    background:
      linear-gradient(var(--f2f-a-auth-fill-white), var(--f2f-a-auth-fill-white)) padding-box,
      var(--f2f-a-auth-gold-edge) border-box;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.95) inset,
      0 2px 4px rgba(16, 24, 32, 0.05),
      0 6px 16px rgba(16, 24, 32, 0.08);
  }
  .a-main--branded .a-table--cards tbody tr:nth-child(even) {
    background:
      linear-gradient(var(--f2f-a-auth-fill-beige), var(--f2f-a-auth-fill-beige)) padding-box,
      var(--f2f-a-auth-gold-edge) border-box;
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }
  .a-main--branded .a-table--cards td::before {
    color: var(--f2f-a-auth-navy);
    opacity: 0.72;
  }
}

/* --- Filter bar / segmented control -------------------------------------------------------- */
/* Stack filter rows in normal flow (not sticky) so content sits fully below both rows. */
.a-filterstack {
  display: flex;
  flex-direction: column;
  gap: var(--f2f-a-space-2);
  margin-block-end: var(--f2f-a-space-5);
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.a-filterstack .a-filterbar {
  position: static;
  inset-block-start: auto;
  z-index: auto;
  padding-block: 0;
  margin-block-end: 0;
  background: transparent;
  box-shadow: none;
}

/* Content that follows the media filter stack always clears it. */
.a-filterstack + .a-mediagrid,
.a-filterstack + .a-table,
.a-filterstack + .a-callout,
.a-filterstack + .a-empty,
.a-filterstack + .a-skeleton,
.a-filterstack + [data-testid="alt-backlog"] {
  margin-block-start: var(--f2f-a-space-2);
}

.a-filterbar {
  position: sticky; inset-block-start: var(--f2f-a-header-h); z-index: var(--f2f-a-z-sticky);
  display: flex; flex-wrap: wrap; gap: var(--f2f-a-space-2); align-items: center;
  background: transparent;
  padding-block: var(--f2f-a-space-2);
  margin-block-end: var(--f2f-a-space-2);
}
/* Inside the page head: no extra sticky band or vertical padding — it’s already under the title. */
.a-filterbar--in-head {
  position: static;
  inset-block-start: auto;
  z-index: auto;
  background: transparent;
  padding-block: 0;
  margin-block-end: 0;
}
.a-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--f2f-a-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.a-segmented > li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.a-segmented > li::marker {
  content: none;
}
.a-segmented__item {
  display: inline-flex; align-items: center; gap: var(--f2f-a-space-1);
  min-block-size: var(--f2f-a-tap-min); padding-inline: var(--f2f-a-space-3);
  border: 1px solid var(--f2f-a-border-interactive);
  border-radius: var(--f2f-a-radius-md);
  font-size: var(--f2f-a-fs-200); text-decoration: none; color: var(--f2f-a-text);
  background: var(--f2f-a-surface);
  transition:
    background var(--f2f-a-motion-fast) var(--f2f-a-ease),
    box-shadow var(--f2f-a-motion-fast) var(--f2f-a-ease),
    color var(--f2f-a-motion-fast) var(--f2f-a-ease);
}
.a-segmented__item:hover {
  background: var(--f2f-a-accent-subtle);
  color: var(--f2f-a-text);
}
/* Active filter: same elevated gold-rim plate as the rail current page. */
.a-segmented__item[aria-current="true"],
.a-segmented__item[aria-current="page"] {
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      145deg,
      #f7e7a6 0%,
      #e8c84a 16%,
      #c49b24 36%,
      #8a6a14 50%,
      #d4ae4a 68%,
      #f3e4a0 84%,
      #b89228 100%
    ) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-weight: var(--f2f-a-fw-medium);
  color: var(--f2f-a-auth-navy, #2F4156);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 2px 4px rgba(16, 24, 32, 0.05),
    0 6px 16px rgba(16, 24, 32, 0.08);
}
.a-segmented__item[aria-current="true"]:hover,
.a-segmented__item[aria-current="page"]:hover {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      145deg,
      #f7e7a6 0%,
      #e8c84a 16%,
      #c49b24 36%,
      #8a6a14 50%,
      #d4ae4a 68%,
      #f3e4a0 84%,
      #b89228 100%
    ) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--f2f-a-auth-navy, #2F4156);
}
.a-segmented__count { font-variant-numeric: tabular-nums; opacity: 0.85; }

/* Content list tabs — Active / Drafts / Archive. Sit in the page head so the head rule is the
   track and the current tab paints a gold underline on it. Not a segmented control: taking
   something off the site must land in a tab an editor can open, not a fourth chip they skip. */
.a-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--f2f-a-space-1);
  margin: 0 0 calc(-1 * var(--f2f-a-space-3));
  padding: 0;
}
.a-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--f2f-a-space-2);
  min-block-size: var(--f2f-a-tap-min);
  padding: var(--f2f-a-space-2) var(--f2f-a-space-4);
  border-block-end: 3px solid transparent;
  text-decoration: none;
  color: var(--f2f-a-text);
  font-size: var(--f2f-a-fs-200);
}
.a-tabs__tab:hover {
  color: var(--f2f-a-text);
}
.a-tabs__tab[aria-current="page"] {
  border-block-end-color: #c49b24;
  font-weight: var(--f2f-a-fw-medium);
  color: var(--f2f-a-auth-navy, #2F4156);
}
.a-tabs__count { font-variant-numeric: tabular-nums; opacity: 0.75; }

.a-search { display: flex; gap: var(--f2f-a-space-2); flex: 1 1 18rem; max-inline-size: 28rem; }

/* --- Empty / error / skeleton -------------------------------------------------------------- */
.a-empty {
  padding: var(--f2f-a-space-6) var(--f2f-a-space-4);
  text-align: center; color: var(--f2f-a-text-muted);
  border: 1px dashed var(--f2f-a-border); border-radius: var(--f2f-a-radius-lg);
}
.a-empty h2 { color: var(--f2f-a-text); }

.a-skeleton__row {
  block-size: var(--f2f-a-row-h); margin-block-end: var(--f2f-a-space-2);
  border-radius: var(--f2f-a-radius-sm);
  background: linear-gradient(90deg, var(--f2f-a-surface-sunken) 25%, var(--f2f-a-border-subtle) 37%, var(--f2f-a-surface-sunken) 63%);
  background-size: 400% 100%;
  animation: a-shimmer 1.4s ease infinite;
}
@keyframes a-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .a-skeleton__row { animation: none; } }

/* =============================================================================================
   Overlays: dialog, sheet, toast, action bar
   ============================================================================================= */

.a-dialog-scrim {
  position: fixed; inset: 0; z-index: var(--f2f-a-z-dialog);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  display: flex; align-items: center; justify-content: center;
  padding: var(--f2f-a-space-4);
}
@media (prefers-reduced-transparency: reduce) {
  .a-dialog-scrim {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.92);
  }
}
.a-dialog {
  background: var(--f2f-a-surface-overlay); color: var(--f2f-a-text);
  border-radius: var(--f2f-a-radius-lg); box-shadow: var(--f2f-a-elev-3);
  inline-size: min(34rem, 100%); max-block-size: 90dvh; overflow: auto;
  padding: var(--f2f-a-space-5);
}
.a-dialog__title { margin-block-start: 0; }
.a-dialog__footer { display: flex; gap: var(--f2f-a-space-2); justify-content: flex-end; margin-block-start: var(--f2f-a-space-5); flex-wrap: wrap; }

/* On a phone the confirm arrives as a bottom sheet — thumb zone, and it does not cover the text
   the moderator is deciding about any more than it must. */
@media (max-width: 639px) {
  .a-dialog-scrim { align-items: flex-end; padding: 0; }
  .a-dialog { inline-size: 100%; border-end-start-radius: 0; border-end-end-radius: 0; }
}

.a-actionbar {
  position: sticky; inset-block-end: 0; z-index: var(--f2f-a-z-sticky);
  display: flex; align-items: center; gap: var(--f2f-a-space-3); flex-wrap: wrap;
  min-block-size: var(--f2f-a-actionbar-h);
  background: var(--f2f-a-surface); border-block-start: 1px solid var(--f2f-a-border);
  padding: var(--f2f-a-space-2) var(--f2f-a-space-4);
  margin-block-start: var(--f2f-a-space-6);
  margin-inline: calc(var(--f2f-a-space-4) * -1);
}
.a-actionbar__state { color: var(--f2f-a-text-muted); font-size: var(--f2f-a-fs-200); }
.a-actionbar__spacer { flex: 1 1 auto; }
.a-actionbar--queue .a-btn { flex: 1 1 0; min-block-size: 48px; }

.a-toast {
  position: fixed; inset-block-end: var(--f2f-a-space-4); inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: var(--f2f-a-z-toast);
  background: var(--f2f-a-surface-overlay); color: var(--f2f-a-text);
  border: 1px solid var(--f2f-a-border-interactive); border-radius: var(--f2f-a-radius-lg);
  box-shadow: var(--f2f-a-elev-3);
  padding: var(--f2f-a-space-3) var(--f2f-a-space-4);
  display: flex; align-items: center; gap: var(--f2f-a-space-3);
  max-inline-size: min(38rem, calc(100vw - var(--f2f-a-space-6)));
}
.a-toast[data-tone="success"] { border-inline-start: 4px solid var(--f2f-a-success); }
.a-toast[data-tone="danger"]  { border-inline-start: 4px solid var(--f2f-a-danger); }

/* =============================================================================================
   Queue, prayer detail, theming, media
   ============================================================================================= */

.a-prayer-text {
  white-space: pre-wrap;              /* the submitter's line breaks, and NOTHING else */
  max-inline-size: var(--f2f-a-prose-max);
  line-height: var(--f2f-a-lh-relaxed);
  font-size: var(--f2f-a-fs-300);
  background: var(--f2f-a-surface); border: 1px solid var(--f2f-a-border);
  border-radius: var(--f2f-a-radius-md); padding: var(--f2f-a-space-4);
  margin-block: var(--f2f-a-space-4);
}

.a-meta-grid { display: flex; flex-wrap: wrap; gap: var(--f2f-a-space-2) var(--f2f-a-space-5); margin-block-end: var(--f2f-a-space-3); }
.a-meta-grid > div { font-size: var(--f2f-a-fs-200); }
.a-meta-grid dt { color: var(--f2f-a-text-muted); font-size: var(--f2f-a-fs-100); margin: 0; }
.a-meta-grid dd { margin: 0; font-weight: var(--f2f-a-fw-medium); }

.a-reveal { border: 1px solid var(--f2f-a-border); border-radius: var(--f2f-a-radius-md); padding: var(--f2f-a-space-4); margin-block: var(--f2f-a-space-4); }
.a-reveal__stated { color: var(--f2f-a-text-muted); font-size: var(--f2f-a-fs-200); }
.a-reveal__name { font-size: var(--f2f-a-fs-400); font-weight: var(--f2f-a-fw-bold); }
.a-reveal__recorded { color: var(--f2f-a-text-muted); font-size: var(--f2f-a-fs-100); }

.a-swatch { inline-size: 44px; block-size: 44px; border: 1px solid var(--f2f-a-border-interactive); border-radius: var(--f2f-a-radius-md); padding: 0; }
.a-specimen { border: 1px solid var(--f2f-a-border); border-radius: var(--f2f-a-radius-md); padding: var(--f2f-a-space-4); margin-block-start: var(--f2f-a-space-3); }
.a-ratio { font-family: var(--f2f-a-font-mono); font-size: var(--f2f-a-fs-100); }
.a-ratio--pass { color: var(--f2f-a-success); font-weight: var(--f2f-a-fw-medium); }
.a-ratio--fail { color: var(--f2f-a-danger); font-weight: var(--f2f-a-fw-bold); }

.a-preview-frame { inline-size: 100%; block-size: 30rem; border: 1px solid var(--f2f-a-border); border-radius: var(--f2f-a-radius-md); background: #FFFFFF; }

.a-mediagrid {
  display: grid;
  gap: var(--f2f-a-space-3);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: var(--f2f-a-space-2) 0 0;
  padding: 0;
  position: relative;
  z-index: 0;
  clear: both;
  isolation: isolate;
}
@media (max-width: 1023px) { .a-mediagrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .a-mediagrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a-mediatile { border: 1px solid var(--f2f-a-border); border-radius: var(--f2f-a-radius-md); overflow: hidden; background: var(--f2f-a-surface); }
.a-mediatile img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--f2f-a-surface-sunken); filter: none; -webkit-filter: none; }
.a-mediatile__placeholder {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--f2f-a-surface-sunken);
  color: var(--f2f-a-text-muted);
  font-size: var(--f2f-a-fs-200);
  font-weight: var(--f2f-a-fw-medium);
}
.a-mediatile__body { padding: var(--f2f-a-space-2); font-size: var(--f2f-a-fs-100); }

.a-library-pick {
  margin: var(--f2f-a-space-3) 0 0;
}
.a-mediatile__pick {
  display: block;
  color: inherit;
  text-decoration: none;
}
.a-mediatile__pick .a-btn {
  margin-block-start: var(--f2f-a-space-2);
}
.a-mediatile__pick:focus-visible {
  outline: 2px solid #c49b24;
  outline-offset: 2px;
}

.a-schedule {
  display: grid;
  gap: var(--f2f-a-space-5);
  grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr);
  align-items: start;
  margin-block-start: var(--f2f-a-space-3);
}
@media (max-width: 879px) {
  .a-schedule { grid-template-columns: 1fr; }
}
.a-schedule__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--f2f-a-space-2);
  margin-block-end: var(--f2f-a-space-3);
}
.a-schedule__month {
  margin: 0;
  font-size: var(--f2f-a-fs-400);
  font-weight: var(--f2f-a-fw-bold);
  text-align: center;
}
.a-calendar {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.a-calendar th {
  font-size: var(--f2f-a-fs-100);
  font-weight: var(--f2f-a-fw-medium);
  color: var(--f2f-a-text-muted);
  padding: var(--f2f-a-space-1);
  text-align: center;
}
.a-calendar td {
  padding: 2px;
  vertical-align: top;
}
.a-calendar__pad { height: 4.5rem; }
.a-calendar__day {
  display: flex;
  flex-direction: column;
  gap: var(--f2f-a-space-1);
  min-block-size: 4.5rem;
  padding: var(--f2f-a-space-1) var(--f2f-a-space-2);
  border: 1px solid var(--f2f-a-border);
  border-radius: var(--f2f-a-radius-md);
  background: var(--f2f-a-surface);
  color: inherit;
  text-decoration: none;
}
.a-calendar__day:hover,
.a-calendar__day:focus-visible {
  border-color: #c49b24;
  outline: 2px solid #c49b24;
  outline-offset: 1px;
}
.a-calendar__day--today { box-shadow: inset 0 0 0 1px var(--f2f-a-border-interactive); }
.a-calendar__day--current {
  border-color: #c49b24;
  background: var(--f2f-a-auth-fill-beige, #F2EBD8);
}
.a-calendar__num { font-weight: var(--f2f-a-fw-medium); }
.a-calendar__count {
  font-size: var(--f2f-a-fs-100);
  color: var(--f2f-a-text-muted);
}
.a-schedule__list {
  list-style: none;
  margin: 0 0 var(--f2f-a-space-4);
  padding: 0;
  display: grid;
  gap: var(--f2f-a-space-3);
}
.a-schedule__item {
  display: flex;
  justify-content: space-between;
  gap: var(--f2f-a-space-3);
  align-items: flex-start;
}

/* Gallery album media manager — fixed thumbs so large JPEGs cannot inflate the row. */
.a-album-items {
  list-style: none;
  padding: 0;
  margin-block-start: var(--f2f-a-space-4);
  display: grid;
  gap: var(--f2f-a-space-3);
}
.a-album-item {
  display: flex;
  gap: var(--f2f-a-space-4);
  align-items: flex-start;
  flex-wrap: wrap;
}
.a-album-item__thumb {
  box-sizing: border-box;
  flex: 0 0 6rem;
  inline-size: 6rem;
  block-size: 6rem;
  max-inline-size: 6rem;
  max-block-size: 6rem;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: hidden;
  border-radius: var(--f2f-a-radius-md);
  background: var(--f2f-a-surface-sunken, #F2EBD8);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0;
}
.a-album-item__thumb img {
  display: block;
  inline-size: 6rem;
  block-size: 6rem;
  max-inline-size: 6rem;
  max-block-size: 6rem;
  object-fit: cover;
  object-position: center;
}
.a-album-item__thumb .a-field__help {
  margin: 0;
  padding: var(--f2f-a-space-2);
  font-size: var(--f2f-a-fs-100);
}
.a-album-item__meta {
  flex: 1 1 12rem;
  min-inline-size: 0;
}

/* Collection/edit image fields — fixed 6rem box so base64/JPEG previews never blow the form. */
.a-field-thumb {
  box-sizing: border-box;
  margin: 0 0 var(--f2f-a-space-2);
  inline-size: 6rem;
  block-size: 6rem;
  max-inline-size: 6rem;
  max-block-size: 6rem;
  overflow: hidden;
  border-radius: var(--f2f-a-radius-md);
  background: var(--f2f-a-surface-sunken, #F2EBD8);
}
.a-field-thumb img {
  display: block;
  inline-size: 6rem;
  block-size: 6rem;
  max-inline-size: 6rem;
  max-block-size: 6rem;
  object-fit: cover;
  object-position: center;
  filter: none;
  -webkit-filter: none;
}
.a-album-item__name {
  margin: 0;
  font-weight: var(--f2f-a-fw-medium);
  overflow-wrap: anywhere;
}
.a-album-item__remove {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.a-purge { font-variant-numeric: tabular-nums; }
.a-purge--soon { color: var(--f2f-a-danger); font-weight: var(--f2f-a-fw-bold); }

.a-diff { font-family: var(--f2f-a-font-mono); font-size: var(--f2f-a-fs-100); }
.a-diff__was { color: var(--f2f-a-text-muted); text-decoration: line-through; }
.a-diff__now { color: var(--f2f-a-text); font-weight: var(--f2f-a-fw-medium); }

/* Two-column edit view. Below 1024px the rail drops under the main fields as accordions,
   with Status first and open (§5.3). */
.a-edit { display: grid; gap: var(--f2f-a-space-6); grid-template-columns: minmax(0, var(--f2f-a-form-max)) 320px; align-items: start; }
@media (max-width: 1023px) { .a-edit { grid-template-columns: 1fr; } }
.a-edit__rail { display: flex; flex-direction: column; gap: var(--f2f-a-space-4); }
.a-profile > div {
  display: flex;
  flex-direction: column;
  gap: var(--f2f-a-space-7);
}

/* Home-board item rows (Method 1, Scripture 3, …) — closed by default so the page stays scannable. */
.a-homeboard-section {
  margin-block: var(--f2f-a-space-5) var(--f2f-a-space-2);
}
.a-homeboard-item {
  margin-block: var(--f2f-a-space-2);
  border: 1px solid var(--f2f-a-border);
  border-radius: var(--f2f-a-radius-md);
  background: var(--f2f-a-surface);
  max-inline-size: var(--f2f-a-form-max);
}
.a-homeboard-item__summary {
  min-block-size: var(--f2f-a-tap-min);
  display: flex;
  align-items: center;
  gap: var(--f2f-a-space-2);
  padding: var(--f2f-a-space-2) var(--f2f-a-space-3);
  cursor: pointer;
  font-weight: var(--f2f-a-fw-medium);
  font-size: var(--f2f-a-fs-200);
  list-style: none;
}
.a-homeboard-item__summary::-webkit-details-marker { display: none; }
.a-homeboard-item__summary::before {
  content: "▸";
  color: var(--f2f-a-text-muted);
  inline-size: 1em;
}
.a-homeboard-item[open] > .a-homeboard-item__summary::before { content: "▾"; }
.a-homeboard-item > .a-field__help {
  padding-inline: var(--f2f-a-space-3);
  margin-block: 0 var(--f2f-a-space-2);
}
.a-homeboard-item__body {
  padding: 0 var(--f2f-a-space-3) var(--f2f-a-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--f2f-a-space-3);
}
.a-homeboard-item .a-homeboard-item {
  background: var(--f2f-a-surface-sunken, var(--f2f-a-surface));
}
.a-homeboard-sitelink__external {
  margin-block-start: var(--f2f-a-space-5);
}
.a-homeboard-add {
  margin-block: var(--f2f-a-space-3) var(--f2f-a-space-5);
}

.a-accordion { border: 1px solid var(--f2f-a-border); border-radius: var(--f2f-a-radius-md); background: var(--f2f-a-surface); }
.a-accordion > summary {
  min-block-size: var(--f2f-a-tap-min); display: flex; align-items: center;
  padding: var(--f2f-a-space-2) var(--f2f-a-space-3); cursor: pointer;
  font-weight: var(--f2f-a-fw-medium); font-size: var(--f2f-a-fs-200);
}
.a-accordion > div { padding: 0 var(--f2f-a-space-3) var(--f2f-a-space-3); }

/* §7.7 — no print stylesheet on any queue view. Every moderation response is Cache-Control:
   no-store, and the sanctioned route to paper is the scoped, audited export. */
@media print {
  [data-noprint] { display: none !important; }
}