/**
 * KJM / KJS Unified Theme — v2.0
 *
 * Single static resource loaded via <link rel="stylesheet" href="/resource/KJSTheme" />
 * in Experience Builder Head Markup. Synthetic Shadow DOM lets bare class selectors
 * reach inside all LWC components on the page.
 *
 * Section map:
 *   0. Platform & global overrides — SLDS resets, EC chrome, html/body/typography, background
 *   1. :root — KJS shorthand tokens, compat aliases, VP --color-* aliases
 *   2. Shared utilities — btn, pill, modal, form, field, input, tabs, state-msg, etc.
 *   3. Student app shell + header (header scoped)
 *   4. Student page components
 *   5. kjsCertCard + kjsClassRow (dark pill--dark, not pill--accent)
 *   6. Kiosk shell + kiosk components
 *   7. Vision Portal — shared utilities + per-component styles
 *   8. Portal page patterns — navigation tiles, testimony, footer (donate removed 2026-07-05)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. ROOT TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── KJS core palette ──────────────────────────────────────────── */
    --paper:        #ffffff;
    --paper-2:      #f4f4f5;
    --ink:          #0a0a0a;
    --ink-2:        #262626;
    --ink-3:        #525252;
    --ink-4:        #8a8a8a;
    --rule:         #e5e5e5;
    --rule-2:       #d4d4d4;
    --card:         #ffffff;
    --card-2:       #f4f4f5;
    --accent:       #0a0a0a;
    --accent-2:     #404040;
    --accent-soft:  #e5e5e5;
    --accent-ink:   #ffffff;   /* text/ink color on a solid --accent surface (overlays re-tint this) */
    --ring-track:   #e5e5e5;
    --warn-soft:    #fef9c3;
    --shadow:       0 1px 0 rgba(26,24,20,0.04), 0 6px 16px -8px rgba(26,24,20,0.18);
    --shadow-lg:    0 2px 0 rgba(26,24,20,0.04), 0 30px 50px -20px rgba(26,24,20,0.25);
    --radius:       8px;
    --radius-lg:    14px;
    --radius-xl:    22px;
    --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-ui:      "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

    /* ── Compat aliases (legacy variable names still used in markup) ── */
    --font-sans:         var(--font-ui);
    --bg-card:           var(--card);
    --bg-page:           var(--paper);
    --bg-wash:           var(--paper-2);
    --border:            var(--rule);
    --border-strong:     var(--ink);
    --border-input:      var(--rule-2);
    --shadow-card:       var(--shadow);
    --shadow-card-hover: var(--shadow-lg);
    --r-card:            var(--radius-lg);
    --r-button:          var(--radius);
    --r-pill:            999px;
    --r-hero:            var(--radius-xl);
    --r-circle:          9999px;
    --mute-1:            var(--rule);
    --mute-2:            var(--rule);
    --mute-3:            var(--rule-2);
    --mute-4:            var(--ink-4);
    --mute-5:            var(--ink-4);
    --mute-6:            var(--ink-3);
    --mute-7:            var(--ink-2);
    --mute-8:            var(--ink-3);
    --fg-1:              var(--ink);
    --fg-2:              var(--ink-2);
    --fg-3:              var(--ink-3);
    --fg-mute:           var(--ink-3);
    --fg-micro:          var(--ink-4);
    --paper-warm:        var(--paper);
    --paper-3:           var(--card-2);
    --paper-4:           var(--card-2);
    --bg-row-hover:      var(--card-2);
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
    --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-14: 3.5rem;
    /* A11y type pass 2026-07-06: root is 106.25% (17px) so all rem text +
       standard SLDS scales together (§4.9). h2 +one step; eyebrow/micro/pill
       raised to clear the 13px floor. body/body-sm/meta/button unchanged rem
       (the root bump carries them to 17/14.9/14.5/14.9). */
    --fs-display: 1.75rem; --fs-h1: 1.5rem; --fs-h2: 1.15rem; --fs-h3: 1rem;
    --fs-body: 1rem; --fs-body-sm: 0.875rem; --fs-meta: 0.85rem;
    --fs-eyebrow: 0.83rem; --fs-micro: 0.77rem; --fs-button: 0.875rem;
    /* Shared sizes for grouped element kinds — change here, not per-selector. */
    --fs-cert-code: 14px;   /* the page-header cert-code eyebrow (cert-hero, history-view) */
    --fs-pill: 0.77rem; --fs-stat: 1.75rem;
    --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.55; --lh-loose: 1.6;
    --tracking-button: 0.3em; --tracking-micro: 0.2em;
    --tracking-eyebrow: 0.1em; --tracking-pill: 0.06em; --tracking-display: -0.025em;

    /* ── Vision Portal --color-* aliases (point to KJS tokens) ──────── */
    --color-page-background:    var(--paper-2);
    --color-card-background:    var(--card);
    --color-surface-subtle:     var(--paper-2);
    --color-row-hover:          var(--card-2);
    --color-text-primary:       var(--ink);
    --color-text-secondary:     var(--ink-2);
    --color-text-body:          var(--ink-2);
    --color-text-muted:         var(--ink-3);
    --color-text-placeholder:   var(--ink-4);
    --color-border-subtle:      var(--rule);
    --color-border-default:     var(--rule-2);
    --color-border-input:       var(--rule-2);
    --color-border-strong:      var(--ink);
    --color-brand:              var(--ink);
    --color-brand-subtle:       var(--accent-soft);
    --color-link:               #0070d2;
    --color-link-hover:         #005fb2;
    --color-success-text:       #2e7d32;
    --color-success-background: #f0fdf4;
    --color-success-border:     #a5d6a7;
    --color-warning-text:       #92400e;
    --color-warning-background: var(--warn-soft);
    --color-warning-border:     #fde68a;
    --color-error-text:         #dc2626;
    --color-error-background:   #fef2f2;
    --color-error-border:       #fecaca;
    --color-error-glow:         rgba(220, 38, 38, 0.15);
    --color-purple-text:        #6a0dad;
    --color-purple-background:  #fdf5ff;
    /* ── Portal brand accent (donate, testimony) ──────────────────────── */
    --color-brand-blue:         #3669c5;
    --color-brand-blue-hover:   #2755a7;
    --shadow-card-elevated:     var(--shadow-lg);
    --shadow-panel:             var(--shadow);
    --shadow-panel-large:       var(--shadow-lg);
    --shadow-decorative:        20px 20px 0 0 rgba(0,0,0,0.03);
    --radius-progress-track:    3px;
    --radius-tag:                4px;
    --radius-button:            var(--radius);
    --radius-input:             var(--radius);
    --radius-card:              var(--radius-lg);
    --radius-section:           var(--radius-xl);
    --radius-pill:              999px;
    --font-family-display:      var(--font-display);
    --font-family-body:         var(--font-ui);
    --font-family-mono:         var(--font-mono);
    --font-size-display:        1.75rem;
    --font-size-heading-1:      1.5rem;
    --font-size-heading-2:      1.15rem;
    --font-size-heading-3:      1rem;
    --font-size-body:           1rem;
    --font-size-body-small:     0.875rem;
    --font-size-metadata:       0.85rem;
    --font-size-eyebrow:        0.83rem;
    --font-size-micro:          0.77rem;
    --font-size-button:         0.875rem;
    --font-size-pill-label:     0.77rem;
    --font-size-statistic:      1.75rem;
    --line-height-tight:        1.15;
    --line-height-snug:         1.3;
    --line-height-normal:       1.55;
    --line-height-relaxed:      1.6;
    --letter-spacing-display:   -0.025em;
    --letter-spacing-button:     0.3em;
    --letter-spacing-eyebrow:    0.1em;
    --letter-spacing-pill:       0.06em;
    --letter-spacing-micro:      0.2em;
    --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
    --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;
    --space-10: 2.5rem; --space-14: 3.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   0. PLATFORM & GLOBAL OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base & typography ────────────────────────────────────────────────────── */
/* iOS Safari drags position: fixed chrome (the bottom tab bar) up the screen
   during the rubber-band overscroll at the end of a page, which read as "the
   nav moved" on a pastor's phone (NET-ACTIVITY-5, 2026-09-15). No bounce, no
   drift; scroll chaining to the browser is not something this app needs. */
html, body {
    overscroll-behavior-y: none;
}

html {
    /* A11y type pass 2026-07-06: 106.25% = 17px base (device default x 1.0625),
       kept as a % so device font-size accessibility settings still scale. Lifts
       every rem-based size — ours AND standard SLDS — ~6% in one place. */
    font-size: 106.25% !important;
}

html, body, body .slds, body .slds * {
    font-family: Montserrat, sans-serif !important;
}

/* Faint textured off-white wash behind all page content, so the white header and
   white cards read as distinct surfaces. Neutral (monochrome) per KJM-THEME. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: #f3f4f6;
    background-image:
        radial-gradient(1100px 520px at 50% -8%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: -1;
}

/* Normalise stray Experience/SLDS headings, but EXEMPT the portal's own display headings
   (this !important rule otherwise out-ranks .hero__hi etc. and shrank the "Welcome back" hero). */
h1:not(.slds-page-header__title):not(.hero__hi):not(.cert-hero__name):not(.cls__title) { font-size: 2.3rem !important; }
h2                                { font-size: 2rem !important; }

/* ── Experience Cloud chrome ──────────────────────────────────────────────── */
.forceCommunityFlowCommunity,
.navigationBar            { border: 0 !important; }
flowruntime-lwc-header    { display: none; }
.flowruntimeBody          { margin: 0 !important; padding: 0 !important; }
.themeBottomBorder        { display: none; }

.forceCommunityThemeHeroBase h1                          { font-size: 3rem !important; }
.forceCommunityThemeHeroBase .ctaBtnOne,
.forceCommunityThemeHeroBase .ctaBtnTwo                  { font-size: 1.5rem !important; padding: 0.75rem 2.5rem !important; }

.forceCommunityThemeHeaderCompact .themeNav              { font-size: 1.3rem; }
.forceCommunityThemeHeaderCompact .themeUtils .themeUtil { margin-left: 30px; }
.forceHeaderButton                                       { margin-left: 20px; }

.themeUtils .slds-button__icon,
.themeUtils .slds-icon.slds-icon_x-small                 { width: 2rem !important; height: 2rem !important; }

.slds-avatar_circle { height: 2.5rem; width: 2.5rem; }

.siteforceCptBody .cHeader .cHeaderTop {
    background-color: #c0c0c0 !important;
    padding: 2rem 0 !important;
    font-family: Montserrat, sans-serif !important;
}

/* ── Remove the content-region gap above the portal apps ──────────────────────
   Experience Builder wraps a placed component in (often nested) .comm-layout-column
   wrappers that carry default vertical padding, and the theme can add an SLDS
   x-large top margin — together these push the portal header down from the top.
   :has() scopes the reset to the column(s) that actually contain a portal app
   (it also catches BOTH nested columns, since each has the app as a descendant)
   so the rest of the site keeps its default region spacing. */
.siteforceContentArea .comm-layout-column:has(c-kjs-student-app),
.siteforceContentArea .comm-layout-column:has(c-kjs-kiosk-app) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* The SLDS x-large top margin can sit on the app element OR on an outer wrapper
   (row / region / section) above it — not just the column. Target it by the
   utility class on any ancestor-or-self of a portal app: element-agnostic but
   still scoped to the portal page (the app exists nowhere else), so other pages
   keep their spacing. Both SLDS spellings (_x-large and --x-large) are covered. */
.siteforceStarterBody .slds-m-top_x-large:has(c-kjs-student-app),
.siteforceStarterBody .slds-m-top--x-large:has(c-kjs-student-app),
.siteforceStarterBody .slds-m-top_x-large:has(c-kjs-kiosk-app),
.siteforceStarterBody .slds-m-top--x-large:has(c-kjs-kiosk-app) {
    margin-top: 0 !important;
}
/* The same wrapper also carries SLDS horizontal padding (.slds-col--padded =
   0.75rem each side), which left two strips of textured body showing beside the
   kiosk shell. The kiosk owns the whole viewport, so zero the sides and keep
   every wrapper transparent — the kiosk's own header/footer are the only
   surfaces that should paint, letting the page texture show through the middle. */
.siteforceContentArea .comm-layout-column:has(c-kjs-kiosk-app),
.siteforceContentArea .comm-layout-row:has(c-kjs-kiosk-app),
.siteforceStarterBody .slds-col_padded:has(c-kjs-kiosk-app),
.siteforceStarterBody .slds-col--padded:has(c-kjs-kiosk-app),
.siteforceStarterBody .comm-layout-column:has(c-kjs-kiosk-app) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
}

/* Vision Give page (2026-10-05): the quick-give frame owns the whole space
   between the top bar and the bottom nav. Zero the wrapper padding/margins
   around it, end the content area at the nav, and paint what is left in the
   give page's own background (#faf6ee, Vision paper) so no Vision texture shows. */
.siteforceContentArea .comm-layout-column:has(c-vision-give),
.siteforceContentArea .comm-layout-row:has(c-vision-give),
.siteforceStarterBody .slds-col_padded:has(c-vision-give),
.siteforceStarterBody .slds-col--padded:has(c-vision-give) {
    padding: 0 !important;
    margin-top: 0 !important;
    background: transparent !important;
}
.siteforceStarterBody .slds-m-top_x-large:has(c-vision-give),
.siteforceStarterBody .slds-m-top--x-large:has(c-vision-give) {
    margin-top: 0 !important;
}
.siteforceContentArea:has(c-vision-give) {
    padding-bottom: calc(var(--bottomnav-height, 64px) + env(safe-area-inset-bottom, 0px)) !important;
}
body:has(c-vision-give),
.siteforceContentArea:has(c-vision-give) {
    background: #faf6ee !important;
}

/* ── SLDS resets ──────────────────────────────────────────────────────────── */
figcaption span.slds-truncate                              { white-space: normal !important; }
.slds-button:focus                                         { box-shadow: none !important; }
.slds-button, .slds-button:active                          { border: 0 !important; }
.comm-user-profile-menu .slds-button:hover                 { border: 0 !important; }
.forceCommunityThemeHeaderCompact .themeUtil .slds-button:focus { outline: 0 !important; }
lightning-flow .slds-form-element__label                   { color: #000000; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer.footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9998;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SHARED UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-ui);
    cursor: pointer;
    border: 1px solid var(--rule-2);
    background: var(--paper);
    color: var(--ink);
    transition: background 120ms, border-color 120ms, box-shadow 120ms;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { background: var(--card-2); border-color: var(--ink-4); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); }

/* Ghost buttons: readable ink + visible outline. --rule on cream was ~1.2:1 (buttons vanished);
   --vision-control-border is the token the theme already uses for search/stepper outlines. */
.btn--ghost { background: transparent; color: var(--ink-2); border-color: var(--vision-control-border, var(--rule-2)); }
.btn--ghost:hover { color: var(--ink); border-color: var(--ink); }

.btn-link { color: var(--color-link) !important; border: none !important; background-color: transparent !important; }
.btn-link:hover { background-color: #f4f9ff !important; }

/* ── Pills ────────────────────────────────────────────────────────────────── */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    background: var(--card-2);
    color: var(--ink-2);
    border: 1px solid var(--rule);
}

/* Light accent pill — admin context (active, enrolled, etc.) */
.pill--accent { background: var(--accent-soft); color: var(--ink); border-color: var(--accent-soft); }

/* Dark pill — student/kiosk context (replaces old pill--accent in those components) */
.pill--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.pill--warn  { background: var(--warn-soft); color: #92400e; border-color: #fde68a; }
.pill--muted { background: var(--card-2); color: var(--ink-4); border: 1px solid var(--rule); }

/* ── Mono chip ────────────────────────────────────────────────────────────── */
.mono-chip {
    font-family: var(--font-mono);
    font-size: 10px;
    background: var(--card-2);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--ink-2);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Lang chip ────────────────────────────────────────────────────────────── */
.langchip {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--card-2);
    color: var(--ink-2);
    border: 1px solid var(--rule);
    font-family: var(--font-mono);
    text-transform: uppercase;
}

/* ── State messages ───────────────────────────────────────────────────────── */
.state-msg {
    padding: 40px;
    text-align: center;
    color: var(--ink-4);
    font-size: 14px;
}
.state-msg--err {
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    padding: 16px 20px;
    text-align: left;
}
.empty-state-sm {
    padding: 32px 18px;
    font-size: 13px;
    color: var(--ink-4);
    text-align: center;
}

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,0.45);
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
}
.modal {
    background: var(--paper);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
}
.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--rule);
}
.modal__title { font-size: 15px; font-weight: 600; color: var(--ink); }
.modal__x {
    background: none; border: none; font-size: 14px; color: var(--ink-4);
    cursor: pointer; padding: 4px 6px; border-radius: var(--radius);
    transition: background 120ms, color 120ms; font-family: var(--font-ui);
}
.modal__x:hover { background: var(--card-2); color: var(--ink); }

/* ── Form ─────────────────────────────────────────────────────────────────── */
.form {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form__row { display: flex; flex-direction: column; gap: 0; }
.form__row--2col { flex-direction: row; gap: 12px; }
.form__row--2col .field { flex: 1; min-width: 0; }
.form__foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding-top: 4px; border-top: 1px solid var(--rule);
}
.form__err {
    font-size: 12px; color: #dc2626; background: #fef2f2;
    border: 1px solid #fecaca; border-radius: var(--radius); padding: 8px 12px;
}

/* ── Field ────────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__lbl { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.03em; }
.field__opt { font-weight: 400; color: var(--ink-4); }
.field__static {
    font-size: 13px; color: var(--ink); padding: 8px 12px;
    background: var(--card-2); border: 1px solid var(--rule); border-radius: var(--radius);
}

/* ── Input ────────────────────────────────────────────────────────────────── */
.input {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--rule-2);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font-ui);
    color: var(--ink);
    background: var(--paper);
    outline: none;
    transition: border-color 120ms, box-shadow 120ms;
    box-sizing: border-box;
    width: 100%;
}
.input:focus { border-color: var(--ink-3); box-shadow: 0 0 0 3px rgba(10,10,10,0.08); }
.input--area { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; line-height: 1.5; }

/* ── Radio ────────────────────────────────────────────────────────────────── */
.radio-group { display: flex; gap: 16px; flex-wrap: wrap; }
.radio-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); cursor: pointer; }

/* ── Action link ──────────────────────────────────────────────────────────── */
.action-link {
    background: none; border: none; padding: 0; font-size: 12px; font-family: var(--font-ui);
    color: var(--ink-3); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
    transition: color 120ms;
}
.action-link:hover { color: var(--ink); }
.action-link--danger { color: #dc2626; }
.action-link--danger:hover { color: #991b1b; }

/* ── Tabs (admin style: 9px 16px) ────────────────────────────────────────── */
.tabs {
    display: flex; gap: 4px; border-bottom: 1px solid var(--rule); padding-bottom: 0;
}
.tabs .tab-btn {
    padding: 9px 16px;
    background: none; border: none; border-bottom: 2px solid transparent;
    font-size: 13px; font-weight: 500; font-family: var(--font-ui);
    color: var(--ink-3); cursor: pointer; transition: color 120ms, border-color 120ms;
    margin-bottom: -1px;
}
.tabs .tab-btn:hover { color: var(--ink); }
.tabs .tab-btn.is-on  { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Catalog tabs (student style: 10px 0, margin-right 24px) ─────────────── */
.catalog-tabs {
    display: flex; gap: 0; margin-bottom: 18px;
}
.catalog-tabs .tab-btn {
    padding: 8px 0; margin-right: 24px;
    font-size: 14px; font-weight: 500; color: var(--ink-3);
    background: none; border: 0; border-bottom: 2px solid transparent;
    margin-bottom: 0; cursor: pointer; font-family: var(--font-ui); transition: color 0.15s;
}
.catalog-tabs .tab-btn:hover  { color: var(--ink); }
.catalog-tabs .tab-btn.is-active { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Filterbar ────────────────────────────────────────────────────────────── */
.filterbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filterbar__search { flex: 1; min-width: 220px; }
.filterbar__select { min-width: 140px; }

/* ── Admin page header ────────────────────────────────────────────────────── */
.adminpage { display: flex; flex-direction: column; gap: 20px; }
.adminpage__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.page__title {
    font-family: var(--font-display); font-size: 24px; font-weight: 500;
    color: var(--ink); margin: 0 0 4px; line-height: 1.2;
}
.page__sub { font-size: 13px; color: var(--ink-4); margin: 0; }

/* ── Audit table base (shared structure) ──────────────────────────────────── */
.audit-table {
    background: var(--card); border: 1px solid var(--rule);
    border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden;
}
.audit-table__head {
    padding: 10px 18px; background: var(--card-2); border-bottom: 1px solid var(--rule);
    font-size: 11px; font-weight: 600; color: var(--ink-4); letter-spacing: 0.06em;
    text-transform: uppercase; gap: 8px;
}
.audit-table__row {
    align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--rule); gap: 8px;
}
.audit-table__row:last-child { border-bottom: none; }
.audit-table__cell { font-size: 13px; color: var(--ink-3); min-width: 0; }
.audit-table__cell--ts  { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); line-height: 1.4; }
.audit-table__cell--reason { font-size: 12px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Table head + row shared utilities ───────────────────────────────────── */
.tbl-head {
    background: var(--card-2);
    border-bottom: 1px solid var(--rule);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-4);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tbl-row { border-bottom: 1px solid var(--rule); font-size: 13px; }
.tbl-row:last-child { border-bottom: none; }
.tbl-row:hover { background: var(--card-2); }

/* ── Back button ──────────────────────────────────────────────────────────── */
.back {
    display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; color: var(--ink-3);
    margin-bottom: 14px; cursor: pointer; border: 0; background: none; padding: 0; font-family: var(--font-ui);
}
.back:hover { color: var(--ink); }

/* ── Avatar (small, shared) ───────────────────────────────────────────────── */
.avatar {
    border-radius: 999px; background: var(--ink); color: var(--paper);
    display: grid; place-items: center; font-family: var(--font-display);
    font-weight: 500; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. STUDENT APP SHELL
   ═══════════════════════════════════════════════════════════════════════════ */

/* App shell */
/* Full-bleed: break out of the centered Experience content column so the header
   spans the viewport (no-op if the region is already full width). */
.app { min-height: 100vh; display: flex; flex-direction: column; width: 100vw; margin-left: calc(50% - 50vw); overflow-x: clip; }
.appmain { flex: 1; }

/* Loading */
.kjs-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 16px; color: var(--ink-3); font-size: 14px;
}
.kjs-spinner {
    width: 36px; height: 36px; border: 3px solid var(--rule); border-top-color: var(--ink);
    border-radius: 50%; animation: kjs-spin 0.8s linear infinite;
}
@keyframes kjs-spin { to { transform: rotate(360deg); } }

/* Error */
.kjs-error-wrap { padding: 2rem; max-width: 600px; margin: 2rem auto; }
.kjs-error-banner {
    display: flex; align-items: center; gap: 10px; background: var(--card-2);
    border: 1px solid var(--rule); color: var(--ink-2); padding: 14px 18px;
    border-radius: var(--radius-lg); font-size: 14px;
}

/* Mobile bottom nav */
.bottomnav { display: none; }
@media (max-width: 860px) {
    .bottomnav {
        display: flex; align-items: stretch;
        position: fixed; bottom: 0; left: 0; right: 0;
        /* iPhone home indicator: the bar grows into the safe area instead of
           sitting behind it (NET-ACTIVITY-5, 2026-09-15). */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--card); border-top: 1px solid var(--rule); z-index: 50;
    }
    .bottomnav__btn {
        flex: 1 1 0; min-width: 0;
        background: transparent; border: 0; padding: 10px 6px; font-size: 13px;
        color: var(--ink-3); font-family: var(--font-ui);
        display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
    }
    .bottomnav__btn.is-on { color: var(--ink); }
    .bottomnav__icon { font-size: 20px; line-height: 1; }
}

/* ── Student header — scoped to avoid conflict with admin topbar ──────────── */
c-kjs-student-header .topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 32px; border-bottom: 1px solid var(--rule); background: var(--paper);
    position: sticky; top: 0; z-index: 50; gap: 24px;
}
c-kjs-student-header .topbar__left { display: flex; align-items: center; gap: 32px; }
c-kjs-student-header .brand {
    display: flex; align-items: center; gap: 10px;
    background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font-family: var(--font-ui); text-align: left;
}
c-kjs-student-header .brand__mark {
    width: 36px; height: 36px; background: var(--ink); border-radius: 999px;
    flex-shrink: 0; display: grid; place-items: center;
}
c-kjs-student-header .brand__mark span {
    color: var(--paper); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; font-family: var(--font-ui);
}
c-kjs-student-header .brand__logo { height: 38px; width: auto; display: block; flex-shrink: 0; }
c-kjs-student-header .brand__name { font-family: var(--font-display); font-size: 15px; font-weight: 500; line-height: 1.2; }
c-kjs-student-header .brand__sub  { font-size: 10px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
c-kjs-student-header .topbar__nav { display: flex; gap: 4px; }
c-kjs-student-header .navlink {
    padding: 8px 14px; border-radius: 999px; color: var(--ink-3); font-size: 14px;
    font-weight: 500; font-family: var(--font-ui); background: transparent; border: 0; cursor: pointer; transition: all 0.15s;
}
c-kjs-student-header .navlink:hover { color: var(--ink); background: var(--card-2); }
c-kjs-student-header .navlink.is-active { color: var(--ink); background: var(--card); box-shadow: var(--shadow); }
c-kjs-student-header .topbar__right { display: flex; align-items: center; gap: 12px; }
c-kjs-student-header .langtoggle {
    display: inline-flex; padding: 3px; gap: 2px;
    background: var(--card-2); border-radius: 999px; border: 1px solid var(--rule);
}
c-kjs-student-header .langtoggle button {
    border: none; background: transparent; color: var(--ink-3); padding: 4px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; font-family: var(--font-ui);
}
c-kjs-student-header .langtoggle button.is-on { background: var(--ink); color: var(--paper); }
c-kjs-student-header .userchip {
    display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 999px;
    border: 1px solid var(--rule); background: var(--card); cursor: pointer; font-family: var(--font-ui);
}
c-kjs-student-header .avatar {
    width: 28px; height: 28px; border-radius: 999px; background: var(--ink); color: var(--paper);
    display: grid; place-items: center; font-family: var(--font-display); font-weight: 500;
    font-size: 11px; flex-shrink: 0; letter-spacing: 0.02em;
}
c-kjs-student-header .userchip__txt { line-height: 1.15; }
c-kjs-student-header .userchip__name { font-size: 13px; font-weight: 600; color: var(--ink); text-align: left; }
c-kjs-student-header .userchip__sub  { font-size: 11px; color: var(--ink-4); font-family: var(--font-mono); text-align: left; }
c-kjs-student-header .topbar__signout {
    padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule);
    background: var(--card); color: var(--ink-3); font-family: var(--font-ui);
    font-size: 13px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
c-kjs-student-header .topbar__signout:hover { color: var(--ink); background: var(--card-2); border-color: var(--ink-3); }

@media (max-width: 860px) {
    c-kjs-student-header .topbar { padding: 10px 14px; gap: 8px; }
    c-kjs-student-header .topbar__nav { display: none; }
    c-kjs-student-header .userchip__txt { display: none; }
    c-kjs-student-header .topbar__signout { padding: 8px 12px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. STUDENT PAGE COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shared page shell used by multiple student pages */
/* 1200px column matching the desktop topbar container; 33px inset lands the
   content at the same x as the Vision portal's column (measured x=153 at
   1440vw on both apps, 2026-08-02). */
.page { max-width: 1200px; margin: 0 auto; padding: 40px 33px 96px; }
.section { margin-bottom: 56px; }
.section__head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 20px; gap: 24px; }
.section__title { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.section__sub { color: var(--ink-3); font-size: 14px; margin-top: 4px; }

/* Lang toggle (also in profile view) */
.langtoggle {
    display: inline-flex; padding: 3px; gap: 2px;
    background: var(--card-2); border-radius: 999px; border: 1px solid var(--rule);
}
.langtoggle button {
    border: none; background: transparent; color: var(--ink-3); padding: 4px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; font-family: var(--font-ui);
}
.langtoggle button.is-on { background: var(--ink); color: var(--paper); }

/* ── kjsLearningHome ──────────────────────────────────────────────────────── */
/* Vision-parity hero: greeting first at the column's top-left, the Next-up
   card below it spanning the column — the mission-card treatment — instead
   of the old greeting-low-left / card-top-right split (2026-08-02). */
.hero { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 64px; align-items: start; }
.hero__date { font-family: var(--font-ui); font-size: 20px; color: var(--ink-2); margin-bottom: 10px; letter-spacing: 0.01em; text-transform: capitalize; font-weight: 500; }
.hero__hi { font-family: var(--font-display); font-size: 60px; line-height: 1.03; letter-spacing: -0.025em; font-weight: 400; margin: 0; }
.hero__hi span { font-style: italic; color: var(--accent); }

/* Next-up "hero" card — solid accent treatment (matches the design mockup). Local token
   overrides re-point ink/rule/ring/bar onto the accent surface so child elements adapt. */
.hero__cert {
    background: linear-gradient(155deg, var(--accent) 0%, var(--accent-2) 72%, var(--accent-2) 100%);
    border: 1px solid transparent; border-radius: var(--radius-xl);
    padding: 24px; color: var(--accent-ink);
    box-shadow: 0 30px 60px -24px color-mix(in oklab, var(--accent), transparent 45%);
    --ink: var(--accent-ink);
    --ink-2: color-mix(in oklab, var(--accent-ink), transparent 18%);
    --ink-3: color-mix(in oklab, var(--accent-ink), transparent 32%);
    --ink-4: color-mix(in oklab, var(--accent-ink), transparent 48%);
    --rule: color-mix(in oklab, var(--accent-ink), transparent 78%);
    --ring-track: color-mix(in oklab, var(--accent-ink), transparent 75%);
}
.hero__cert-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 5px; }
.hero__cert-name  { font-family: var(--font-display); font-size: 21px; margin-bottom: 16px; color: var(--accent-ink); }
.hero__class {
    display: flex; align-items: center; gap: 16px;
    background: color-mix(in oklab, var(--accent-ink), transparent 86%);
    border-radius: var(--radius-lg);
    padding: 16px; cursor: pointer; transition: all 0.15s; width: 100%; border: 0; text-align: left;
    font-family: var(--font-ui); color: var(--accent-ink);
}
.hero__class:hover { background: color-mix(in oklab, var(--accent-ink), transparent 78%); transform: translateY(-1px); }
/* min-width, not width: 4-digit course numbers (1101) must grow the box
   instead of painting over the class title. */
.hero__class-num   { font-family: var(--font-display); font-size: 38px; font-weight: 400; min-width: 56px; flex-shrink: 0; text-align: center; line-height: 1; color: var(--accent-ink); }
/* Catalog-code sequences (3+ chars, e.g. 1151) shrink to stay inside the
   56px numeral box the 2-digit design assumed. */
.hero__class-num--code { font-size: 20px; font-weight: 500; }
.hero__class-info  { flex: 1; min-width: 0; }
.hero__class-title { font-family: var(--font-display); font-size: 18px; line-height: 1.2; color: var(--accent-ink); }
.hero__class-meta  { font-size: 12px; color: var(--ink-3); margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hero__class-arrow { font-size: 22px; color: var(--ink-3); }
.hero__cert .langchip { background: color-mix(in oklab, var(--accent-ink), transparent 86%); border-color: transparent; color: var(--accent-ink); }

/* Next-up metrics row: progress ring + in-person rate bar (ported from the design mockup). */
.hero__metrics { display: grid; grid-template-columns: 100px 1fr; gap: 20px; margin-top: 18px; align-items: center; }
.metric { text-align: center; }
.metric--bar { text-align: left; }
.metric__num { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--accent-ink); }
.metric__label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
.metric--bar .metric__label { margin-top: 0; margin-bottom: 8px; }
.metric__hint { font-size: 11px; margin-top: 8px; }
.metric__hint.is-good { color: var(--accent-ink); font-weight: 600; }
.metric__hint.is-warn { color: var(--ink-3); font-style: italic; }

/* Thin progress bar with a threshold marker (in-person rate). */
.bar { position: relative; height: 7px; border-radius: 4px; background: var(--rule); }
.bar__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-ink); border-radius: 4px; transition: width 0.4s ease; }

/* Threshold marker: a small up-triangle under the bar at the online-unlock %, with a label that
   flips to whichever side has more room (left when the marker is past the midpoint, right otherwise). */
.thrbar { position: relative; padding-bottom: 22px; }
.thrbar__tri {
    position: absolute; top: calc(100% + 2px); transform: translateX(-50%);
    width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-bottom: 6px solid var(--accent-ink);
}
.thrbar__text { position: absolute; top: calc(100% + 9px); white-space: nowrap; font-size: 10px; font-weight: 600; color: var(--accent-ink); }
.thrbar__text--right { transform: translateX(8px); }
.thrbar__text--left  { transform: translateX(calc(-100% - 8px)); }

.certgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: stretch; }
/* Equal-height cards regardless of body content: each grid item is a flex box so its single child
   (the c-kjs-cert-card host, or an inline pathway .certcard) stretches to the row's height. */
.certgrid > div { display: flex; min-width: 0; }
.certgrid > div > * { width: 100%; }

@media (max-width: 860px) {
    .page { padding: 24px 16px 96px; }
    .hero { grid-template-columns: 1fr; gap: 24px; }
    .hero__hi { font-size: 40px; }
    .hero__metrics { grid-template-columns: 80px 1fr; }
    .certgrid { grid-template-columns: 1fr; }
}

/* ── kjsHistoryView ───────────────────────────────────────────────────────── */
.hist-title { font-family: var(--font-display); font-size: 36px; letter-spacing: -0.02em; font-weight: 500; margin: 0 0 32px; }
.histcert { margin-bottom: 40px; }
.histcert__head {
    display: flex; justify-content: space-between; align-items: end;
    margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
/* Smaller than the page title ("Class history"). !important to beat the global h2 normaliser. */
.histcert__head h2 { font-family: var(--font-display); font-size: 20px !important; font-weight: 500; margin: 4px 0 0; }
.histcert__code    { font-family: var(--font-mono); font-size: var(--fs-cert-code); color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.histcert__dates   { display: flex; gap: 24px; align-items: end; }
.histcert__date    { text-align: right; }
.date-label { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; }
.date-val   { font-size: 14px; font-weight: 600; }
.histtable { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.histtable__head,
.histtable__row { display: grid; grid-template-columns: 40px 2fr 130px 110px 110px 100px; gap: 12px; padding: 10px 16px; align-items: center; font-size: 13px; }
.histtable__head { background: var(--card-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); font-weight: 600; }
.histtable__row  { border-top: 1px solid var(--rule); }
.histtable__num  { font-family: var(--font-mono); color: var(--ink-3); font-size: 12px; }
.histtable__title { font-family: var(--font-display); }
.histtable__row--empty .histtable__title,
.histtable__row--empty .histtable__num { color: var(--ink-4); }
.histtable__methodcell .pill { font-size: 11px; }
.histtable__visible { color: var(--accent); font-weight: 700; }
/* History per-cert actions: review-catalog link + expand/collapse toggle. */
.histcert__actions { display: flex; align-items: center; gap: 16px; margin: 10px 0; }
.histcert__link    { color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer; margin-left: auto; }
.histcert__link:hover { text-decoration: underline; }
.histcert__toggle  { background: var(--accent-soft); border: 1px solid var(--rule); border-radius: 999px; padding: 5px 14px; font-size: 12px; color: var(--ink-2); cursor: pointer; font-family: var(--font-ui); }
.histcert__toggle:hover { border-color: var(--accent); color: var(--accent); }
.muted { color: var(--ink-4); }
.hist-empty { padding: 24px; text-align: center; color: var(--ink-4); font-style: italic; font-size: 14px; }

@media (max-width: 860px) {
    .histcert__head  { flex-direction: column; align-items: start; gap: 12px; }
    .histcert__dates { flex-direction: column; gap: 8px; align-items: start; }
    .histcert__date  { text-align: left; }
    .histtable__head, .histtable__row { grid-template-columns: 30px 1fr 100px; font-size: 12px; }
    .histtable__head > div:nth-child(n+4), .histtable__row > div:nth-child(n+4) { display: none; }
}

/* ── kjsProfileView ───────────────────────────────────────────────────────── */
.profile-title { font-family: var(--font-display); font-size: 36px; letter-spacing: -0.02em; font-weight: 500; margin: 0 0 32px; }
.profile { max-width: 720px; }
.profile__card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-xl); padding: 32px; }
.profile__head {
    display: flex; gap: 20px; align-items: center;
    padding-bottom: 24px; border-bottom: 1px solid var(--rule); margin-bottom: 16px;
}
.profile__head h2 { font-family: var(--font-display); font-size: 28px; font-weight: 500; margin: 0; }
.profile__email { color: var(--ink-3); font-size: 14px; margin-top: 4px; }
.avatar--lg { width: 56px; height: 56px; font-size: 20px; letter-spacing: 0.02em; }
.profile__rows { display: flex; flex-direction: column; }
.profile__row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0; border-bottom: 1px dashed var(--rule); gap: 16px;
}
.profile__row:last-child { border: 0; }
.profile__row > span { color: var(--ink-3); font-size: 14px; }
.profile__row code { font-family: var(--font-mono); font-size: 14px; }
.profile__row b    { font-weight: 600; font-size: 14px; }
.lang-note { font-size: 12px; color: var(--ink-3); max-width: 36ch; text-align: right; line-height: 1.5; }

@media (max-width: 860px) {
    .profile__row { flex-direction: column; align-items: start; gap: 8px; }
    .lang-note { text-align: left; }
}

/* ── kjsScheduleView ──────────────────────────────────────────────────────── */
.schedule-head { margin-bottom: 24px; }
.schedule-head h1 { font-family: var(--font-display); font-size: 36px; letter-spacing: -0.02em; font-weight: 500; margin: 0; }
.schedule-head p  { color: var(--ink-3); margin-top: 4px; font-size: 14px; }
.filters {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    margin-bottom: 32px; padding: 16px;
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.sel { display: flex; flex-direction: column; gap: 4px; }
.sel__label { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.08em; }
.sel select {
    background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 8px 10px; font-family: var(--font-ui); font-size: 13px; color: var(--ink); width: 100%;
}
.empty { text-align: center; padding: 80px 20px; color: var(--ink-3); font-style: italic; }
/* Date-grouped schedule (matches the prototype): a day label rule, then rows. */
.schedule { display: flex; flex-direction: column; gap: 28px; }
.schedule__daylabel {
    font-family: var(--font-display); font-size: 17px; color: var(--ink-2); margin-bottom: 10px;
    display: flex; align-items: center; gap: 12px; text-transform: capitalize;
}
.schedule__daylabel::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.schedule__rows { display: flex; flex-direction: column; gap: 6px; }
.schedrow {
    display: grid; grid-template-columns: 84px 1fr 24px; gap: 16px; align-items: center;
    background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow); border-radius: 10px;
    padding: 12px 16px; transition: all 0.15s;
}
/* Only video-unlocked sessions are clickable → only they get the pointer, hover lift, and arrow. */
.schedrow.is-clickable        { cursor: pointer; }
.schedrow.is-clickable:hover  { border-color: var(--accent); background: var(--card-2); transform: translateX(2px); }
.schedrow__time  { font-family: var(--font-mono); font-size: 14px; color: var(--accent-2); font-weight: 600; }
.schedrow__main  { min-width: 0; }
.schedrow__cls   { display: flex; gap: 10px; align-items: baseline; }
.schedrow__num   { font-family: var(--font-display); font-size: 16px; color: var(--accent); min-width: 28px; flex-shrink: 0; }
.schedrow__title { font-family: var(--font-display); font-size: 16px; }
.schedrow__sub   { font-size: 12px; color: var(--ink-3); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.schedrow__arrow { color: var(--ink-3); font-size: 18px; text-align: right; }
.schedule-foot { font-size: 11px; color: var(--ink-4); margin-top: 32px; line-height: 1.5; }
/* "Find a session" preset banner on the schedule — quiet left-rule callout, not a boxed button.
   Radius on all four corners (accent border follows the curve) — matches the .catalog-alert fix. */
.sched-preset { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 11px 16px; margin-bottom: 18px; font-size: 14px; color: var(--ink-2); }
.sched-preset strong { font-family: var(--font-display); font-weight: 500; color: var(--ink); }
.sched-preset__clear { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--ink-3); font-weight: 500; cursor: pointer; font-size: 12.5px; font-family: var(--font-ui); white-space: nowrap; }
.sched-preset__clear:hover { color: var(--accent); }

@media (max-width: 860px) {
    .filters  { grid-template-columns: 1fr 1fr; }
    /* date on its own line; time | class | arrow below. Hide the empty desktop spacer cell (4th child). */
    .schedrow { grid-template-columns: 64px 1fr 16px; gap: 4px 10px; }
    .schedrow__date { grid-column: 1 / -1; font-size: 11px; }
    .schedrow > div:nth-child(4) { display: none; }
}

/* ── kjsClassCatalog ──────────────────────────────────────────────────────── */
.cert-hero { margin-bottom: 20px; }
.cert-hero__row {
    display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
}
.cert-hero__info    { min-width: 0; }
.cert-hero__code    { font-family: var(--font-mono); font-size: var(--fs-cert-code); color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 7px; }
.cert-hero__name    { font-family: var(--font-display); font-size: 44px; margin: 0 0 10px; letter-spacing: -0.02em; font-weight: 500; line-height: 1.1; }
.cert-hero__summary { color: var(--ink-3); font-size: 15px; line-height: 1.5; }
.cert-hero__metrics { display: flex; align-items: center; gap: 32px; flex-shrink: 0; }
.cert-hero__ring-wrap  { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cert-hero__ring-label { font-size: 10px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.1em; }
.cert-hero__rate       { min-width: 180px; display: flex; flex-direction: column; gap: 6px; padding-left: 32px; border-left: 1px solid var(--rule); }
.cert-hero__rate-pct   { font-family: var(--font-display); font-size: 40px; line-height: 1; font-weight: 400; letter-spacing: -0.02em; }
.cert-hero__rate-label { font-size: 10px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.1em; margin-top: -2px; }
.rate__status          { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.rate__status--met     { color: var(--ink-2); font-weight: 500; }
.catalog-alert { margin-top: 14px; padding: 12px 16px; background: var(--card-2); border-radius: var(--radius); font-size: 13px; color: var(--ink-3); border: 1px solid var(--rule); }
.catalog-alert--warn { border-color: var(--rule-2); }
.catalog { display: flex; flex-direction: column; gap: 36px; }
.catgroup__head  { margin-bottom: 14px; }
.catgroup__title { font-family: var(--font-display); font-size: 20px; font-weight: 500; margin: 0 0 6px; }
.catgroup__desc  { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin: 0; max-width: 640px; }
.cattiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; align-items: stretch; }
/* Equal-height cards: carry the stretched grid-cell height down through the wrappers to the tile,
   so every card in a row matches the tallest (text length no longer makes them uneven). */
.cattiles > div                    { height: 100%; }
.cattiles > div > c-kjs-class-row  { display: block; height: 100%; }
.cattiles .tile                    { height: 100%; box-sizing: border-box; }

/* History tab within catalog */
/* Credit history table (matches the prototype): # · class · method pill · first · most-recent · staff. */
.hist-table { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.hist-table__head,
.histrow { display: grid; grid-template-columns: 44px 2fr 132px 1fr 1fr 116px; gap: 12px; padding: 11px 16px; align-items: center; }
.hist-table__head { background: var(--card-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--rule); }
.histrow { font-size: 13px; border-bottom: 1px solid var(--rule); }
.histrow:last-child { border-bottom: 0; }
.histrow:hover { background: var(--card-2); }
.histrow--empty .histrow__title { color: var(--ink-4); }
.histrow__num     { font-family: var(--font-display); color: var(--ink-4); font-size: 16px; }
.histrow__titlecell { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.histrow__title   { font-family: var(--font-display); font-size: 15px; }
.histrow__method  { font-size: 11px; }
.histrow__date    { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; }
.histrow__visible { color: var(--accent); font-weight: 700; text-align: center; }
.histrow__dash    { color: var(--ink-4); }

@media (max-width: 860px) {
    .cert-hero__row  { grid-template-columns: 1fr; gap: 24px; }
    .cert-hero__name { font-size: 32px; }
    .cert-hero__metrics { gap: 20px; }
    .cert-hero__rate    { min-width: 0; flex: 1; padding-left: 20px; }
    .cert-hero__rate-pct { font-size: 32px; }
    .cattiles { grid-template-columns: 1fr; }
    .hist-table__head, .histrow { grid-template-columns: 40px 1fr 110px; }
    .hist-table__head span:nth-child(n+4), .histrow__date, .histrow__visible { display: none; }
}

/* ── kjsVideoPlayer ───────────────────────────────────────────────────────── */
.cls { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; margin-top: 8px; }
.cls__main { min-width: 0; }
.cls__head   { display: flex; gap: 18px; align-items: center; margin-bottom: 24px; }
.cls__num    { font-family: var(--font-display); font-size: 56px; color: var(--accent); min-width: 80px; text-align: center; font-weight: 400; line-height: 1; flex-shrink: 0; }
.cls__info   { min-width: 0; }
.cls__cert   { font-size: 12px; color: var(--ink-3); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; }
.cls__title  { font-family: var(--font-display); font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; margin: 0; font-weight: 500; }
.lock-card   { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-xl); padding: 56px 32px; text-align: center; }
.lock-card__icon  { font-size: 40px; margin-bottom: 16px; }
.lock-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin-bottom: 10px; }
.lock-card__body  { font-size: 14px; color: var(--ink-3); line-height: 1.6; max-width: 52ch; margin: 0 auto; }
/* Success-themed: unmissable "you already have credit" notice (avoid accidental rewatching). */
.credited-banner  { display: flex; align-items: flex-start; gap: 10px;
    background: var(--color-success-background); border: 1px solid var(--color-success-border);
    border-left: 4px solid var(--color-success-text); border-radius: var(--radius);
    padding: 12px 14px; font-size: 13px; color: var(--color-success-text); font-weight: 500; margin-bottom: 12px; }
.credited-banner__icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px;
    background: var(--color-success-text); color: #fff; display: flex; align-items: center;
    justify-content: center; font-size: 12px; font-weight: 700; }
.credited-banner__text b { font-weight: 700; }
.credited-banner__hint { display: block; margin-top: 2px; font-weight: 400; opacity: .85; }
.lang-alert { background: var(--card-2); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; color: var(--ink-3); line-height: 1.5; margin-bottom: 12px; }
.player__stage  { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-xl); overflow: hidden; }
.player__screen {
    aspect-ratio: 16/9; background: linear-gradient(135deg, #1a1814 0%, #2a2620 100%);
    position: relative; display: grid; place-items: center; color: #f6f1e7; overflow: hidden;
}
.player__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Transparent click-to-toggle layer over the video (we own play/pause; below the overlay at z-index 5). */
.player__click  { position: absolute; inset: 0; z-index: 2; cursor: pointer; background: transparent; }
.player__placeholder { text-align: center; padding: 32px; max-width: 70%; }
.player__cls-title { font-family: var(--font-display); font-size: 26px; font-weight: 400; opacity: 0.65; }
.overlay {
    position: absolute; inset: 0; z-index: 5;
    background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
    display: grid; place-content: center; text-align: center; color: #f6f1e7; padding: 24px;
}
.overlay__icon  { font-size: 48px; margin-bottom: 12px; }
.overlay__title { font-family: var(--font-display); font-size: 22px; margin-bottom: 6px; }
.overlay__body  { font-size: 13px; opacity: 0.8; max-width: 40ch; margin: 0 auto 16px; line-height: 1.5; }
.btn--light { background: rgba(255,255,255,0.9); color: #1a1814; border-color: transparent; margin-top: 8px; }
.hud { background: var(--card-2); padding: 16px 20px; border-top: 1px solid var(--rule); }
.hud__top   { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
.hud__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 2px; }
.hud__val   { font-family: var(--font-display); font-size: 28px; line-height: 1; font-weight: 400; }
.hud__playbtn {
    padding: 8px 22px; border-radius: var(--radius); border: 1px solid transparent;
    background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 500;
    font-family: var(--font-ui); cursor: pointer; transition: opacity 0.15s; white-space: nowrap;
}
.hud__playbtn:hover:not(:disabled) { opacity: 0.82; }
.hud__playbtn:disabled { opacity: 0.35; cursor: not-allowed; }
.hud__bar       { position: relative; height: 6px; border-radius: 3px; background: var(--rule); overflow: visible; }
.hud__fill      { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; transition: width 0.2s linear; }
.hud__legend    { display: flex; gap: 12px; font-size: 12px; color: var(--ink-2); margin-top: 10px; flex-wrap: wrap; align-items: center; }
.hud__req       { display: inline-flex; align-items: center; gap: 4px; }
.hud__req-icon  { color: var(--accent); }
.cls__sidebar   { display: flex; flex-direction: column; gap: 16px; }
.meta-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 4px 16px; }
.meta__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; padding: 10px 0; border-bottom: 1px solid var(--rule); gap: 16px; }
.meta__row--last { border-bottom: 0; }
.meta__label { color: var(--ink-3); flex-shrink: 0; }
.meta__val   { font-weight: 500; text-align: right; }
.earn-card   { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 16px; }
.earn-card__title { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.earn-card__sub   { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin-bottom: 12px; }
.earn-card__rules { margin: 0; padding: 0 0 0 16px; list-style: disc; font-size: 12px; color: var(--ink-3); line-height: 1.9; }

@media (max-width: 860px) {
    .cls          { grid-template-columns: 1fr; }
    .cls__title   { font-size: 26px; }
    .cls__num     { font-size: 40px; min-width: 60px; width: auto; }
    .hud__val     { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. kjsCertCard + kjsClassRow  (use .pill--dark for dark pill)
   ═══════════════════════════════════════════════════════════════════════════ */

/* kjsCertCard */
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 20px; transition: all 0.15s; }
.card:hover { box-shadow: var(--shadow); }
/* Solid top accent bar (matches the design mockup's card treatment). */
.certcard { display: flex; flex-direction: column; height: 100%; cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; position: relative; overflow: hidden; border-top: 3px solid var(--accent); }
.certcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.certcard.is-locked { opacity: 0.7; cursor: not-allowed; border-top-color: var(--rule-2); }
.certcard.is-locked:hover { transform: none; box-shadow: none; }
.certcard__head { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 8px; }
.certcard__head > div:first-child { min-width: 0; flex: 1; }
.certcard__code { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.04em; }
.certcard__name { font-family: var(--font-display); font-size: 22px; line-height: 1.15; margin: 2px 0 0; font-weight: 500; }
.certcard__metrics { display: flex; gap: 16px; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--rule); }
.certcard__bars     { flex: 1; }
.certcard__barlabel { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-bottom: 6px; }
.certcard__lock { font-size: 13px; color: var(--ink-3); padding: 12px; background: var(--paper-2); border-radius: 8px; margin-top: 6px; }
.certcard__cta  { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); font-weight: 600; font-size: 14px; color: var(--ink); }
.pill--muted { background: transparent; color: var(--ink-4); border-color: var(--rule); }

/* "What's next" pathway cards — non-interactive future certs. Grayed via a muted SURFACE (not by
   dimming text), so the name + unlock reason stay readable (keeps it accessible). */
.certcard--future { cursor: default; background: var(--card-2); border-top-color: var(--rule-2); }
.certcard--future:hover { transform: none; box-shadow: var(--shadow); }
.certcard--future .certcard__name { color: var(--ink-2); }
.certcard--future .certcard__lock { margin-top: 14px; }
/* Eligible-to-start (not enrolled yet): normal-ink card, accent edge — inviting, not locked. */
.certcard--eligible { background: var(--card); border-top-color: var(--accent); }
.certcard--eligible .certcard__name { color: var(--ink); }
.certcard--eligible .certcard__lock { color: var(--accent); font-weight: 500; }
/* Future cards now open a browse-only catalog preview — restore the clickable affordance. */
.certcard--future.is-clickable { cursor: pointer; }
.certcard--future.is-clickable:hover { transform: translateY(-2px); }

/* kjsClassRow */
.tile {
    display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
    padding: 14px 16px; min-height: 72px;
}
/* Large display sequence number (like the prototype), not a small pill. */
.tile__num    {
    font-family: var(--font-display); font-size: 30px; font-weight: 400; color: var(--ink-4);
    min-width: 44px; text-align: center; line-height: 1; align-self: center; flex-shrink: 0;
}
.tile__titlerow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tile__title  { font-family: var(--font-display); font-size: 17px; line-height: 1.25; }
/* The full class code (MBR02) kept as a small pill next to the title. */
.tile__code   {
    font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--ink-3);
    background: var(--card-2); border: 1px solid var(--rule); border-radius: 4px;
    padding: 2px 6px; letter-spacing: 0.04em; white-space: nowrap;
}
.tile__meta   { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.tile__lock-hint { color: var(--ink-4); }
.tile__langs  { margin-top: 6px; }
.lang-tag     { display: inline-block; font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--card-2); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 6px; letter-spacing: 0.04em; }
.tile__optional  { font-size: 11px; color: var(--ink-4); margin-top: 5px; }
.tile__state     { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px; min-width: 110px; }
.tile__credit-method { font-size: 11px; color: var(--ink-3); text-align: right; }
.tile__credit-date   { font-size: 11px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
/* History: a repeat instance of the same class (2nd+ time taken) gets a subtle tint. */
.histtable__row--repeat, .histrow--repeat { background: var(--card-2); }
.histtable__attempt { font-size: 12px; }
.tile__locked-pill { white-space: nowrap; }
/* Quiet text link (icon + label), not a button. Muted by default, accent on hover; icon is currentColor so it follows. */
.tile__sessions { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); cursor: pointer; font-family: var(--font-ui); white-space: nowrap; line-height: 1; transition: color 0.12s ease; }
.tile__sessions:hover { color: var(--accent); }
/* In the history tables the link sits inline next to the class title (icon-only there). */
.histtable__title .tile__sessions,
.histrow__titlecell .tile__sessions { margin-top: 0; margin-left: 6px; vertical-align: middle; }
.tile.is-clickable      { cursor: pointer; }
.tile.is-clickable:hover { background: var(--card-2); }
/* Completed tiles use a deeper accent-tinted surface (was a flat light grey). */
.tile--credited { background: var(--accent-soft); }
.tile--credited .tile__num { color: var(--ink); }
.tile--available { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tile--available .tile__num { color: var(--accent); }
/* Attend-in-person: the next class to take when the video is still locked. Shares the active glow;
   its state column carries the accent "Attend in person" chip instead of a watch button. */
.tile--attend .tile__attendhint { font-size: 12px; color: var(--ink-3); margin-top: 6px; font-style: italic; }
.tile__attend-chip { display: inline-flex; align-items: center; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent-ink, var(--ink)); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 999px; padding: 4px 11px; }
.hud__req { cursor: help; }
/* Locked tiles: more contrast than before (was opacity 0.55) + diagonal hatch like the prototype. */
.tile--locked_sequence,
.tile--locked_threshold,
.tile--locked_prerequisite,
.tile--locked_group_prerequisite {
    opacity: 0.88;
    background-image: repeating-linear-gradient(
        135deg,
        transparent, transparent 9px,
        color-mix(in oklab, var(--rule-2), transparent 80%) 9px,
        color-mix(in oklab, var(--rule-2), transparent 80%) 10px
    );
}
.tile--locked_threshold { border-style: dashed; }
.tile__play-btn { font-size: 12px; padding: 6px 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   6. KIOSK SHELL + COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.kiosk-app { height: 100vh; height: 100dvh; overflow: hidden; }
/* On a kiosk page ONLY (never the portal), the shell owns the whole viewport — the page must not scroll. */
html:has(.kiosk-app), body:has(.kiosk-app) { margin: 0; height: 100%; overflow: hidden; }

/* ── Brand (shared by all kiosk components, 36×36 8px-radius) ────────────── */
c-kjs-kiosk-lock .brand,
c-kjs-kiosk-picker .brand,
c-kjs-kiosk-running .brand { display: flex; align-items: center; gap: 10px; }

c-kjs-kiosk-lock .brand__logo,
c-kjs-kiosk-picker .brand__logo,
c-kjs-kiosk-running .brand__logo { height: 36px; width: auto; display: block; flex-shrink: 0; }
c-kjs-kiosk-lock .brand__name,
c-kjs-kiosk-picker .brand__name,
c-kjs-kiosk-running .brand__name { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; }

c-kjs-kiosk-lock .brand__sub,
c-kjs-kiosk-picker .brand__sub,
c-kjs-kiosk-running .brand__sub { font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 1px; }

/* ── Kiosk clock ─────────────────────────────────────────────────────────── */
.kiosk__clock { text-align: center; }
.kiosk__time  { font-family: var(--font-mono); font-size: 32px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; }
.kiosk__date  { font-size: 12px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 6px; }

/* ── KioskLock ───────────────────────────────────────────────────────────── */
.lock { height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; background: var(--paper); color: var(--ink); }
.lock__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: clamp(12px, 2.5vh, 22px) 40px; border-bottom: 1px solid var(--rule); gap: 24px; }
.lock__center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(12px, 3vh, 40px) 24px; min-height: 0; overflow: hidden; }
.lock__logo   { display: grid; place-items: center; margin-bottom: clamp(8px, 1.5vh, 20px); }
.lock__logo img { height: clamp(48px, 9vh, 80px); width: auto; display: block; }
.lock__eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.lock__title  { font-family: var(--font-display); font-size: clamp(30px, 6vh, 56px); line-height: 1.05; letter-spacing: -0.02em; margin: clamp(2px, 1vh, 6px) 0 clamp(4px, 1vh, 10px); font-weight: 400; }
.lock__sub    { color: var(--ink-3); font-size: 15px; max-width: 44ch; line-height: 1.5; margin-bottom: clamp(10px, 2.5vh, 28px); }
.lock__dots   { display: flex; gap: 14px; margin-bottom: clamp(12px, 2.5vh, 28px); }
.lock__dot    { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--rule-2); transition: all .15s; }
.lock__dot.is-on { background: var(--ink); border-color: var(--ink); transform: scale(1.05); }
.lock__dots.is-shake { animation: lock-shake 0.5s; }
@keyframes lock-shake {
    10%, 90% { transform: translateX(-4px); }
    20%, 80% { transform: translateX(6px); }
    30%, 50%, 70% { transform: translateX(-10px); }
    40%, 60% { transform: translateX(10px); }
}
.lock__hint { margin-top: 18px; font-size: 12px; color: var(--ink-4); }
.keypad { display: grid; grid-template-columns: repeat(3, clamp(56px, 9.5vh, 92px)); gap: clamp(8px, 1.2vh, 12px); }
.keypad__key { height: clamp(56px, 9.5vh, 92px); border-radius: 16px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); font-family: var(--font-display); font-size: clamp(22px, 4vh, 32px); font-weight: 400; cursor: pointer; transition: all .1s; }
.keypad__key:hover  { background: var(--card-2); }
.keypad__key:active { transform: scale(0.96); background: var(--accent); color: var(--accent-ink); }
.keypad__key--soft  { font-family: var(--font-ui); font-size: 14px; color: var(--ink-3); background: transparent; border-color: transparent; }
.keypad__key--soft:active { background: var(--rule); color: var(--ink); }

@media (max-width: 720px) {
    .lock__top { grid-template-columns: 1fr auto; padding: 14px 20px; }
    .kiosk__clock { display: none; }
}

/* ── KioskPicker ─────────────────────────────────────────────────────────── */
.picker { height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; background: var(--paper); color: var(--ink); }
.picker__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: clamp(12px, 2.5vh, 22px) 40px; border-bottom: 1px solid var(--rule); gap: 24px; }
.picker__top-right { display: flex; justify-content: flex-end; }
.picker__body  { max-width: 800px; width: 100%; margin: 0 auto; padding: clamp(24px, 4vh, 56px) 32px; overflow-y: auto; min-height: 0; }
.picker__head  { margin-bottom: 28px; }
.picker__step  { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.picker__title { font-family: var(--font-display); font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; margin: 6px 0 10px; font-weight: 400; }
.picker__sub   { color: var(--ink-3); font-size: 15px; max-width: 56ch; line-height: 1.55; }
.picker__list  { display: flex; flex-direction: column; gap: 10px; }
.sessrow { display: grid; grid-template-columns: 100px 1fr 28px; gap: 20px; align-items: center; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 18px 22px; text-align: left; cursor: pointer; transition: all .15s; font: inherit; color: inherit; width: 100%; }
.sessrow:hover  { border-color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow); }
.sessrow:active { transform: scale(0.995); }
.sessrow__time  { font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
.sessrow__code  { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; }
.sessrow__title { font-family: var(--font-display); font-size: 22px; line-height: 1.15; margin: 2px 0 6px; }
.sessrow__sub   { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.sessrow__arrow { font-size: 20px; color: var(--ink-3); }
.sep { color: var(--ink-4); }
.empty-state { text-align: center; padding: 56px 24px; color: var(--ink-3); font-size: 15px; }

@media (max-width: 720px) {
    .picker__top   { grid-template-columns: 1fr auto; padding: 16px 20px; }
    .picker__title { font-size: 36px; }
    .sessrow { grid-template-columns: 64px 1fr 20px; padding: 14px; }
    .sessrow__title { font-size: 17px; }
}

/* ── KioskRunning ────────────────────────────────────────────────────────── */
.kiosk { height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; background: var(--paper); color: var(--ink); }
.kiosk__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: clamp(12px, 2.2vh, 22px) 40px; border-bottom: 1px solid var(--rule); gap: 24px; }
.kiosk__campus      { text-align: right; }
.kiosk__campus-name { font-family: var(--font-display); font-size: 18px; }
.kiosk__campus-room { font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
.kiosk__main { display: grid; grid-template-columns: 1fr 1.1fr; align-items: stretch; min-height: 0; }
.kiosk__session { padding: clamp(24px, 4vh, 56px) clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--rule); min-height: 0; overflow: hidden; }
.kiosk__session-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.kiosk__session-code  { font-family: var(--font-mono); font-size: 13px; color: var(--ink); letter-spacing: 0.06em; margin-top: 8px; }
.kiosk__session-title { font-family: var(--font-display); font-size: clamp(34px, 4.5vw, 72px); line-height: 0.98; letter-spacing: -0.03em; margin: 6px 0 clamp(12px, 2vh, 24px); font-weight: 400; }
.kiosk__session-meta  { display: grid; grid-template-columns: repeat(3, auto); gap: 0 36px; margin-bottom: 32px; }
.kiosk__session-meta > div { display: flex; flex-direction: column; gap: 4px; }
.kiosk__session-meta b { font-size: 15px; font-weight: 500; }
.meta-lbl { font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.kiosk__attendance { margin-top: auto; padding-top: 28px; border-top: 1px dashed var(--rule); }
.kiosk__att-num   { display: flex; align-items: baseline; gap: 8px; }
.kiosk__att-big   { font-family: var(--font-display); font-size: 64px; line-height: 1; font-weight: 400; }
.kiosk__att-of    { font-family: var(--font-display); font-size: 24px; color: var(--ink-3); }
.kiosk__att-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.kiosk__att-bar   { height: 6px; border-radius: 3px; background: var(--rule); margin-top: 14px; overflow: hidden; }
.kiosk__att-fill  { height: 100%; background: var(--accent); transition: width .4s; }
.kiosk__hint       { display: flex; gap: 14px; align-items: center; margin-top: 28px; padding: 16px; background: var(--card-2); border-radius: 12px; }
.kiosk__hint-icon  { font-size: 24px; line-height: 1; }
.kiosk__hint-title { font-family: var(--font-display); font-size: 15px; }
.kiosk__hint-sub   { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.kiosk__scanner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 2.5vh, 24px); padding: clamp(20px, 3vh, 56px); background: radial-gradient(circle at 50% 45%, var(--card-2) 0%, transparent 70%), var(--paper); position: relative; overflow: hidden; min-height: 0; }
/* Honest scan panel — handheld barcode scanner (keyboard-wedge) + manual entry, one focused field. */
.scan { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(10px, 1.8vh, 18px); width: min(460px, 94%); }
.scan__icon { display: grid; place-items: center; width: clamp(84px, 14vw, 116px); height: clamp(52px, 9vh, 74px); padding: 0 clamp(14px, 2vw, 22px); border-radius: 16px; background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.scan__barcode { width: 100%; height: 62%; display: block; }
.scan__barcode rect { fill: var(--ink); }
.scan__title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 400; line-height: 1.1; margin: 0; }
.scan__sub   { font-size: clamp(12px, 1.4vw, 14px); color: var(--ink-3); max-width: 42ch; line-height: 1.5; margin: 0; }
.scan__form  { display: flex; gap: 10px; width: 100%; margin-top: clamp(2px, 1vh, 8px); }
.scan__input { flex: 1; min-width: 0; height: clamp(48px, 7vh, 60px); padding: 0 16px; border: 2px solid var(--rule-2); border-radius: 12px; background: var(--card); color: var(--ink); font-family: var(--font-mono); font-size: clamp(18px, 2.2vw, 24px); letter-spacing: 0.06em; text-align: center; outline: none; transition: border-color .12s; }
.scan__input::placeholder { color: var(--ink-4); letter-spacing: 0.02em; }
.scan__input:focus { border-color: var(--accent); }
.scan__btn   { height: clamp(48px, 7vh, 60px); padding: 0 clamp(18px, 2vw, 30px); border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-ui); font-size: clamp(14px, 1.6vw, 17px); font-weight: 600; letter-spacing: 0.02em; cursor: pointer; white-space: nowrap; transition: filter .12s, transform .08s; }
.scan__btn:hover  { filter: brightness(0.96); }
.scan__btn:active { transform: scale(0.98); }
.scan__status { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); min-height: 1.4em; }
.scanner-input  { position: absolute; top: -100px; left: -100px; width: 1px; height: 1px; opacity: 0; border: none; outline: none; background: transparent; }
.scanner { display: flex; flex-direction: column; align-items: center; gap: 24px; user-select: none; }
.scanner__frame { width: min(420px, 42vh, 40vw); height: min(420px, 42vh, 40vw); position: relative; background: var(--card); border-radius: 24px; display: grid; place-items: center; box-shadow: var(--shadow-lg); overflow: hidden; }
.scanner.idle .scanner__frame     { animation: kiosk-idle 2.4s ease-in-out infinite; }
.scanner.scanning .scanner__frame { animation: none; }
@keyframes kiosk-idle { 0%,100% { transform: scale(1); } 50% { transform: scale(1.012); } }
.scanner__corner { position: absolute; width: 32px; height: 32px; border: 4px solid var(--ink); }
.scanner__corner--tl { top: 22px; left: 22px;   border-right: 0; border-bottom: 0; border-top-left-radius: 7px; }
.scanner__corner--tr { top: 22px; right: 22px;  border-left: 0;  border-bottom: 0; border-top-right-radius: 7px; }
.scanner__corner--bl { bottom: 22px; left: 22px;  border-right: 0; border-top: 0; border-bottom-left-radius: 7px; }
.scanner__corner--br { bottom: 22px; right: 22px; border-left: 0;  border-top: 0; border-bottom-right-radius: 7px; }
.scanner__qr { width: 60%; height: 60%; }
.qr { width: 100%; height: 100%; fill: var(--ink); display: block; }
.scanner.idle .scanner__qr     { opacity: 0.8; }
.scanner.scanning .scanner__qr { opacity: 1; }
.scanner__beam { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: kiosk-beam 1.2s ease-in-out infinite; z-index: 5; }
@keyframes kiosk-beam { 0% { top: 15%; opacity: 0.2; } 50% { top: 85%; opacity: 1; } 100% { top: 15%; opacity: 0.2; } }
.scanner__caption { font-size: 15px; color: var(--ink-3); letter-spacing: 0.04em; }
.manual-form  { display: flex; gap: 8px; align-items: center; width: 100%; max-width: 440px; }
.manual-input { flex: 1; height: 36px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: 13px; outline: none; }
.manual-input:focus { border-color: var(--ink); }
.result { width: min(420px, 92%); display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--card); border: 1px solid var(--rule); border-radius: 24px; padding: clamp(22px, 3vh, 40px) 32px clamp(18px, 2.5vh, 28px); position: relative; overflow: hidden; box-shadow: var(--shadow-lg); animation: result-in .3s cubic-bezier(.2,.7,.2,1); }
@keyframes result-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.result__icon     { width: 88px; height: 88px; border-radius: 999px; display: grid; place-items: center; font-size: 44px; background: var(--ink); color: var(--paper); margin-bottom: 18px; }
.result__hello    { font-size: 13px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.result__name     { font-family: var(--font-display); font-size: 52px; line-height: 1.05; letter-spacing: -0.02em; margin: 6px 0 8px; font-weight: 400; }
.result__id       { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); letter-spacing: 0.06em; }
.result__note     { margin-top: 16px; font-size: 14px; color: var(--ink-2); line-height: 1.45; max-width: 34ch; }
.result__method   { margin-top: 14px; }
.result__progress      { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rule); }
.result__progress-fill { height: 100%; background: var(--ink); animation: result-progress 4s linear forwards; }
.result__progress-fill--warn,
.result__progress-fill--err { animation-duration: 6s; }
@keyframes result-progress { from { width: 100%; } to { width: 0; } }
.result--warn { background: #fef3c7; border: 2px solid #f59e0b; color: #78350f; }
.result--warn .result__icon     { background: #f59e0b; color: #fffbeb; }
.result--warn .result__hello    { color: #92400e; }
.result--warn .result__id       { color: #92400e; }
.result--warn .result__note     { color: #78350f; font-weight: 500; }
.result--warn .result__progress { background: rgba(245,158,11,.2); }
.result--warn .result__progress-fill { background: #f59e0b; }
.result--err { background: #fee2e2; border: 2px solid #dc2626; color: #7f1d1d; animation: result-in .3s cubic-bezier(.2,.7,.2,1), err-pulse 1.4s ease-in-out infinite .4s; }
@keyframes err-pulse { 0%,100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(220,38,38,0); } 50% { box-shadow: var(--shadow-lg), 0 0 0 12px rgba(220,38,38,.15); } }
.result--err .result__icon     { background: #dc2626; color: #fff; }
.result--err .result__hello    { color: #991b1b; }
.result--err .result__id       { color: #991b1b; }
.result--err .result__note     { color: #7f1d1d; font-weight: 500; }
.result--err .result__progress { background: rgba(220,38,38,.2); }
.result--err .result__progress-fill { background: #dc2626; }
.btn--bypass { margin-top: 18px; height: 40px; padding: 0 20px; background: #dc2626; color: #fff; border-color: #dc2626; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.btn--bypass:hover { background: #b91c1c; }
.kiosk__foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 40px; border-top: 1px solid var(--rule); background: var(--paper); gap: 24px; }
.kiosk__foot-left  { display: flex; align-items: center; gap: 12px; }
.kiosk__foot-right { display: flex; gap: 8px; }
.kiosk__status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.kiosk__status-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ink-3); }
.kiosk__status.is-on .kiosk__status-dot { background: var(--accent); animation: kiosk-pulse 1s ease-in-out infinite; }
.kiosk__status.is-on { color: var(--ink); }
@keyframes kiosk-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.4; } }
.divider   { color: var(--ink-4); }
.foot-note { font-size: 12px; color: var(--ink-4); }

/* Keep the two-column layout (class info left, scanner right) at tablet widths — the fluid
   clamp()/min() sizes above shrink the content to fit rather than stacking the QR below. */
@media (max-width: 1100px) {
    .kiosk__session-meta { gap: 0 20px; }
    .kiosk__att-big { font-size: 48px; }
    .result__name   { font-size: 44px; }
}
/* Phone fallback only: below this the two columns genuinely can't fit, so stack and let the
   main region scroll internally (the header/footer stay pinned). */
@media (max-width: 720px) {
    .kiosk__main    { grid-template-columns: 1fr; overflow-y: auto; }
    .kiosk__session { border-right: 0; border-bottom: 1px solid var(--rule); }
    .kiosk__top     { grid-template-columns: 1fr 1fr; padding: 14px 18px; }
    .kiosk__session-meta { grid-template-columns: 1fr 1fr; gap: 16px; }
    .result__icon   { width: 72px; height: 72px; font-size: 36px; }
    .kiosk__foot    { flex-direction: column; gap: 8px; padding: 12px 18px; }
    .kiosk__foot-right { flex-wrap: wrap; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §7  VISION PORTAL — shared utilities + per-component styles
   ─────────────────────────────────────────────────────────────────────────── */

/* ── New pill variants ────────────────────────────────────────────────────── */
.pill--hop  { background: #e8f4fd; color: var(--color-link); border-color: #b3d9f7; }
.pill--disc { background: var(--color-purple-background); color: var(--color-purple-text); border-color: #d5b3f8; }

/* ── SLDS button overrides ────────────────────────────────────────────────── */
.slds-button_brand               { background-color: var(--color-link) !important; border-color: var(--color-link) !important; color: #ffffff !important; }
.slds-button_brand:hover         { background-color: var(--color-link-hover) !important; border-color: var(--color-link-hover) !important; }
.slds-button_outline-brand       { border: 1px solid var(--color-link) !important; color: var(--color-link) !important; background-color: transparent !important; }
.slds-button_outline-brand:hover { background-color: var(--color-surface-subtle) !important; }

/* ── VP shared page utilities ─────────────────────────────────────────────── */
.page-title        { font-size: var(--font-size-heading-2); font-weight: 700; color: var(--color-text-secondary); }
.header-row        { display: flex; align-items: center; justify-content: space-between; }
.header-actions    { display: flex; gap: 0.5rem; }
.mini-spinner          { position: relative; height: 40px; }
.mini-spinner-relative { position: relative; }
.modal-subheader   { display: block; margin-top: 8px; font-size: 1rem; color: var(--color-text-muted); }
.filters-container { background: var(--color-surface-subtle); border-radius: var(--radius-tag); padding: 0.75rem; }
.white-icon        { --sds-c-icon-color-foreground-default: #ffffff; --sds-c-icon-color-foreground: #ffffff; }

/* ── VP alert / empty / loading ───────────────────────────────────────────── */
.alert-dashed-border     { border: 2px dashed currentColor; }
.alert-root.alert-error  { color: var(--color-error-text); }
.alert-root.alert-alert  { color: var(--color-warning-text); }
.alert-icon              { --sds-c-icon-color-foreground-default: currentColor; }
.alert-text              { margin: 0; }
.empty-dashed-border     { border: 2px dashed var(--color-text-muted); }
.spinner-container       { min-height: 2.5rem; }

/* ── Shared form elements (benefitSingleSessionModal + benefitScheduleStandardEditor) ── */
.custom-label         { font-size: 0.75rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.custom-section-title { font-size: 0.75rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.custom-form-col      { display: flex; flex-direction: column; gap: 0.5rem; }
.custom-field-error   { color: var(--color-error-text); font-size: 0.75rem; margin-top: 0.25rem; padding: 0.25rem 0; }
.custom-error-message { color: var(--color-error-text); background-color: var(--color-error-background); border: 1px solid var(--color-error-border); padding: 0.75rem; border-radius: var(--radius-tag); font-size: 0.875rem; }
.custom-input,
.custom-select,
.custom-textarea { width: 100%; padding: 0.75rem 0; border: none; border-bottom: 2px solid var(--color-border-default); background-color: var(--color-card-background); font-size: 14px; color: var(--color-brand); transition: border-color 0.3s ease; }
.custom-input:focus,
.custom-select:focus,
.custom-textarea:focus { outline: none; border-bottom-color: var(--color-text-body); background-color: var(--color-surface-subtle); }
.custom-input:disabled,
.custom-select:disabled,
.custom-textarea:disabled { background-color: var(--color-surface-subtle); color: var(--color-text-placeholder); cursor: not-allowed; }
.custom-textarea { resize: vertical; min-height: 90px; }
.custom-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1rem; padding-right: 2rem;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}

/* ── Info block (themed banner: default=warn, --info variant=blue) ─────────── */
.info-block {
    --info-block-bg:          var(--color-warning-background);
    --info-block-accent:      #F59E0B;
    --info-block-title-color: var(--color-brand);
    padding: 1rem;
    background-color: var(--info-block-bg);
    border-left: 4px solid var(--info-block-accent);
    border-radius: var(--radius-card);
    margin-bottom: 1rem;
}
.info-block--info {
    --info-block-bg:          #E3F2FD;
    --info-block-accent:      #2196F3;
    --info-block-title-color: #1976D2;
}
.info-block__content          { display: flex; align-items: flex-start; gap: 0.75rem; }
.info-block__content lightning-icon { --sds-c-icon-color-foreground-default: var(--info-block-title-color); margin-top: 0.125rem; }
.info-block__text             { display: flex; flex-direction: column; gap: 0.25rem; }
.info-block__title            { font-weight: bold; text-transform: uppercase; color: var(--info-block-title-color); font-size: 0.875rem; letter-spacing: 0.05em; margin: 0; }
.info-block__subtitle         { font-size: 0.75rem; color: var(--color-text-muted); margin: 0; line-height: 1.3; }

/* ── Disc alert cards (benefitSessionReporting) ───────────────────────────── */
.disc-alert-list     { display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 1.25rem; }
.disc-alert-card     { display: flex; align-items: center; justify-content: space-between; background-color: var(--color-purple-background); border: 1px solid #d9b3f5; border-left: 4px solid var(--color-purple-text); border-radius: var(--radius-card); padding: 0.875rem 1rem; gap: 1rem; }
.disc-alert-content  { flex: 1; min-width: 0; }
.disc-alert-name-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.disc-alert-name     { font-size: 0.9375rem; font-weight: 700; color: var(--color-text-primary); }
.disc-alert-sub      { font-size: 0.8125rem; color: var(--color-purple-text); font-weight: 500; }
.disc-alert-action   { flex-shrink: 0; }
.btn-disc-alert.slds-button_brand       { background-color: var(--color-purple-text) !important; border-color: var(--color-purple-text) !important; }
.btn-disc-alert.slds-button_brand:hover { background-color: #57099a !important; border-color: #57099a !important; }

/* ── Inline metadata chip (icon + text, used in session/benefit reporting) ── */
.meta-item { display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; color: var(--color-text-muted); }
.meta-item lightning-icon { --sds-c-icon-color-foreground-default: var(--color-text-muted); }

/* ── Key-value label + value (used in roster card meta rows) ─────────────── */
.meta-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-placeholder); margin-bottom: 0.1rem; }
.meta-value { font-size: 0.85rem; color: var(--color-text-body); }

/* ── Exception shield block ───────────────────────────────────────────────── */
.exception-shield { background-color: var(--color-link); padding: 1rem; border-radius: var(--radius-tag); position: relative; overflow: hidden; }
.exception-shield::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background-color: #00396b; }

/* ── Modal action grid (responsive 1→2 col) ───────────────────────────────── */
.modal-actions { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 768px) {
    .modal-actions { grid-template-columns: 1fr 1fr; }
}

/* ── Icon color helpers ───────────────────────────────────────────────────── */
.completed-icon    { --sds-c-icon-color-foreground-default: var(--color-success-text); }
.present-icon      { --sds-c-icon-color-foreground-default: var(--color-success-text); }
.absent-icon       { --sds-c-icon-color-foreground-default: var(--color-error-text); }
.remove-icon-red   { --sds-c-icon-color-foreground-default: var(--color-error-text) !important; --sds-c-icon-color-foreground: var(--color-error-text) !important; }
.remove-icon-white { --sds-c-icon-color-foreground-default: #ffffff !important; --sds-c-icon-color-foreground: #ffffff !important; }
.transfer-icon     { --sds-c-icon-color-foreground-default: var(--color-link) !important; --sds-c-icon-color-foreground: var(--color-link) !important; }

/* ── Roster remove buttons (discipleshipRosterManagement) ────────────────── */
.slds-button.btn-remove-solid         { background-color: var(--color-error-text) !important; border-color: var(--color-error-text) !important; color: #ffffff !important; padding-left: 1rem !important; padding-right: 1rem !important; line-height: 1.875rem !important; }
.slds-button.btn-remove-solid:hover   { background-color: #b71c1c !important; border-color: #b71c1c !important; }
.slds-button.btn-remove-outline       { color: var(--color-error-text) !important; border: 1px solid var(--color-error-text) !important; background-color: transparent !important; padding-left: 1rem !important; padding-right: 1rem !important; line-height: 1.875rem !important; }
.slds-button.btn-remove-outline:hover { background-color: var(--color-error-background) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   §9a  tabSet
   ─────────────────────────────────────────────────────────────────────────── */
c-tab-set .tabSet                  { border-bottom: 1px solid var(--color-border-subtle); }
c-tab-set .tabBtn                  { border-radius: 0; border-bottom: 2px solid transparent !important; margin-bottom: -1px; }
c-tab-set .tabBtn.isActive         { border-bottom-color: var(--color-brand) !important; }
c-tab-set .tab-equal              { flex: 1 1 0; min-width: 0; }
@media (max-width: 767px) {
    c-tab-set .tab-label           { display: none; }
    c-tab-set .tabBtn lightning-icon { margin-right: 0 !important; }
    c-tab-set .tabBtn              { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §9b  hopMeetingReportModal
   ─────────────────────────────────────────────────────────────────────────── */
c-hop-meeting-report-modal .modal-subheader { font-weight: 600; font-size: 0.9rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   §9c  benefitSingleSessionEditorModal
   ─────────────────────────────────────────────────────────────────────────── */
c-benefit-single-session-editor-modal .slds-text-color_inverse { color: white !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   §9d  discipleshipAttendanceModal
   ─────────────────────────────────────────────────────────────────────────── */
c-discipleship-attendance-modal .modal-subtitle       { font-size: 0.85rem; color: var(--color-text-placeholder); margin-top: 0.25rem; }
c-discipleship-attendance-modal .form-section         { margin-bottom: 1.5rem; }
c-discipleship-attendance-modal .section-heading      { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-body); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
c-discipleship-attendance-modal .section-subheading   { font-size: 0.65rem; font-weight: 400; color: var(--color-text-placeholder); text-transform: none; letter-spacing: 0; }
c-discipleship-attendance-modal .no-group-msg         { color: var(--color-text-placeholder); font-size: 0.875rem; font-style: italic; }
c-discipleship-attendance-modal .roster-loading       { display: flex; align-items: center; padding: 1rem 0; color: var(--color-text-muted); font-size: 0.875rem; position: relative; height: 48px; }
c-discipleship-attendance-modal .roster-empty         { color: var(--color-text-placeholder); font-size: 0.875rem; font-style: italic; padding: 0.5rem 0; }
c-discipleship-attendance-modal .roster-list          { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-button); overflow: hidden; }
c-discipleship-attendance-modal .roster-header        { display: grid; grid-template-columns: 1fr 80px 80px; background-color: var(--color-surface-subtle); padding: 0.5rem 1rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border-subtle); }
c-discipleship-attendance-modal .roster-row           { display: grid; grid-template-columns: 1fr 80px 80px; align-items: center; padding: 0.625rem 1rem; border-bottom: 1px solid var(--color-border-subtle); transition: background-color 0.15s; }
c-discipleship-attendance-modal .roster-row:last-child { border-bottom: none; }
c-discipleship-attendance-modal .roster-row:hover     { background-color: var(--color-row-hover); }
c-discipleship-attendance-modal .roster-col-name      { font-size: 0.9rem; color: var(--color-text-secondary); font-weight: 500; padding-right: 0.5rem; }
c-discipleship-attendance-modal .roster-col-radio     { display: flex; align-items: center; justify-content: center; }
c-discipleship-attendance-modal .radio-label          { display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; width: 28px; height: 28px; }
c-discipleship-attendance-modal .radio-input          { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; top: 0; left: 0; }
c-discipleship-attendance-modal .radio-dot            { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--color-border-default); background-color: #fff; transition: all 0.15s ease; display: block; flex-shrink: 0; }
c-discipleship-attendance-modal .radio-input:checked + .radio-dot--present { background-color: #4caf50; border-color: #2e7d32; box-shadow: 0 0 0 3px rgba(76,175,80,0.2); }
c-discipleship-attendance-modal .radio-input:checked + .radio-dot--absent  { background-color: #ef5350; border-color: #c62828; box-shadow: 0 0 0 3px rgba(239,83,80,0.2); }
c-discipleship-attendance-modal .radio-label:hover .radio-dot--present { border-color: #4caf50; }
c-discipleship-attendance-modal .radio-label:hover .radio-dot--absent  { border-color: #ef5350; }
c-discipleship-attendance-modal .duplicate-report-warning { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; padding: 0.5rem 0.75rem; background-color: var(--color-warning-background); border: 1px solid var(--color-warning-border); border-radius: var(--radius-tag); font-size: 0.8rem; color: var(--color-warning-text); }
c-discipleship-attendance-modal .duplicate-report-warning .warning-icon { --lwc-colorTextIconWarning: var(--color-warning-border); flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   §9e  benefitSingleSessionModal
   ─────────────────────────────────────────────────────────────────────────── */
c-benefit-single-session-modal .modal-container     { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9001; display: flex; align-items: center; justify-content: center; }
c-benefit-single-session-modal .modal-overlay       { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
c-benefit-single-session-modal .modal-content       { position: relative; z-index: 9002; background-color: var(--color-card-background); border-radius: var(--radius-card); max-width: 90vw; width: 600px; min-height: 70vh; max-height: 95vh; overflow: hidden; box-shadow: none; transform: scale(0.8); opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; display: flex; flex-direction: column; }
c-benefit-single-session-modal .modal-content.zoom-in { transform: scale(1); opacity: 1; }
c-benefit-single-session-modal .modal-loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; z-index: 10; backdrop-filter: blur(1px); }
c-benefit-single-session-modal .modal-header        { background-color: var(--color-card-background); padding: 1.5rem; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--color-border-subtle); }
c-benefit-single-session-modal .modal-title-section { flex: 1; }
c-benefit-single-session-modal .modal-title         { font-size: 1.1rem; font-weight: 700; color: var(--color-text-secondary); margin: 0 0 0.25rem 0; }
c-benefit-single-session-modal .modal-subtitle      { font-size: 0.875rem; color: var(--color-text-muted); margin: 0; }
c-benefit-single-session-modal .modal-close-btn     { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 0.25rem; border-radius: var(--radius-tag); transition: background-color 0.15s; }
c-benefit-single-session-modal .modal-close-btn:hover { background-color: var(--color-surface-subtle); }
c-benefit-single-session-modal .modal-close-btn lightning-icon { --slds-c-icon-color-foreground-default: var(--color-text-muted); }
c-benefit-single-session-modal .modal-body          { padding: 1.5rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; min-height: 0; }
c-benefit-single-session-modal .form-grid           { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
c-benefit-single-session-modal .form-input,
c-benefit-single-session-modal .form-textarea { --slds-c-input-color-background: var(--color-surface-subtle); --slds-c-input-color-border: transparent; --slds-c-input-color-border-focus: var(--color-brand); --slds-c-input-shadow-focus: none; --slds-c-textarea-color-background: var(--color-surface-subtle); --slds-c-textarea-color-border: transparent; --slds-c-textarea-color-border-focus: var(--color-brand); --slds-c-textarea-shadow-focus: none; }
c-benefit-single-session-modal .form-input lightning-input .slds-input,
c-benefit-single-session-modal .form-textarea lightning-textarea .slds-textarea { background-color: var(--color-surface-subtle) !important; border: none !important; border-bottom: 1px solid var(--color-border-default) !important; border-radius: 0 !important; transition: border-color 0.2s ease; }
c-benefit-single-session-modal .form-input lightning-input .slds-input:focus,
c-benefit-single-session-modal .form-textarea lightning-textarea .slds-textarea:focus { box-shadow: none !important; border-bottom-color: var(--color-border-default) !important; }
c-benefit-single-session-modal .form-textarea lightning-textarea .slds-textarea { resize: none !important; min-height: 90px !important; }
c-benefit-single-session-modal .form-input lightning-input .slds-form-element__label,
c-benefit-single-session-modal .form-textarea lightning-textarea .slds-form-element__label { font-size: 0.75rem !important; font-weight: 700 !important; color: var(--color-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-bottom: 0.25rem !important; }
c-benefit-single-session-modal .custom-form-row     { margin-bottom: 1.5rem; }
c-benefit-single-session-modal .disabled-message    { color: var(--color-text-muted); font-size: 0.875rem; margin-top: 1rem; }
c-benefit-single-session-modal .modal-footer        { background-color: var(--color-card-background); padding: 1.5rem; border-top: 1px solid var(--color-border-subtle); display: flex; justify-content: space-between; align-items: center; }
c-benefit-single-session-modal .modal-footer .btn-discard { border: 1px solid var(--color-border-default); border-radius: var(--radius-tag); display: flex; align-items: center; gap: 0.5rem; }
c-benefit-single-session-modal .btn-discard         { background: none; border: none; color: var(--color-brand); font-size: 0.875rem; cursor: pointer; padding: 0.5rem 1rem; text-transform: uppercase; letter-spacing: 0.05em; transition: background-color 0.2s ease, color 0.2s ease; }
c-benefit-single-session-modal .btn-discard:hover   { background-color: var(--color-surface-subtle); border-radius: var(--radius-tag); color: var(--color-text-body); }
c-benefit-single-session-modal .btn-save            { background-color: var(--color-text-body); border: 1px solid var(--color-text-body); color: #ffffff; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: background-color 0.2s ease; border-radius: var(--radius-tag); }
c-benefit-single-session-modal .btn-save:hover:not(:disabled) { background-color: var(--color-text-secondary); border-color: var(--color-text-secondary); }
c-benefit-single-session-modal .btn-save:disabled   { background-color: var(--color-border-default); cursor: not-allowed; }
c-benefit-single-session-modal .btn-save lightning-icon { --slds-c-icon-color-foreground-default: #FFFFFF; }
@media (max-width: 768px) {
    c-benefit-single-session-modal .modal-content   { width: 95vw; max-height: 95vh; }
    c-benefit-single-session-modal .modal-header,
    c-benefit-single-session-modal .modal-body,
    c-benefit-single-session-modal .modal-footer    { padding: 1rem; }
    c-benefit-single-session-modal .form-grid       { grid-template-columns: 1fr; }
    c-benefit-single-session-modal .modal-footer    { flex-direction: column; gap: 1rem; align-items: stretch; }
    c-benefit-single-session-modal .btn-save        { justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §9f  benefitSessionReporting
   ─────────────────────────────────────────────────────────────────────────── */
c-benefit-session-reporting .sessions-list        { display: flex; flex-direction: column; gap: 1rem; }
c-benefit-session-reporting .session-card         { display: flex; align-items: center; background-color: var(--color-card-background); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); box-shadow: none; transition: all 0.2s ease; min-height: 100px; padding: 1rem 0; }
c-benefit-session-reporting .session-card:hover   { border-color: var(--color-brand); background-color: var(--color-surface-subtle); box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; }
c-benefit-session-reporting .session-card--completed { border-left: 4px solid #4caf50; background-color: #f4fbf4; }
c-benefit-session-reporting .session-card--completed:hover { background-color: #eaf6ea; }
c-benefit-session-reporting .date-block           { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 120px; border-right: 1px solid var(--color-border-subtle); padding: 0.5rem; }
c-benefit-session-reporting .date-block--completed .day-number { color: var(--color-success-text); }
c-benefit-session-reporting .date-block--completed .month-label { color: #4caf50; }
c-benefit-session-reporting .day-number           { font-size: 2rem; font-weight: bold; color: var(--color-brand); line-height: 1; letter-spacing: -0.05em; margin-bottom: 0.125rem; }
c-benefit-session-reporting .month-label          { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.15em; line-height: 1; }
c-benefit-session-reporting .content-block        { flex: 1; padding: 1rem 1rem 1rem 2rem; display: flex; flex-direction: column; justify-content: center; }
c-benefit-session-reporting .session-title        { margin: 0 0 0.25rem 0; font-size: 1rem; font-weight: bold; color: var(--color-brand); line-height: 1.2; }
c-benefit-session-reporting .schedule-name-line   { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.75rem 0; }
c-benefit-session-reporting .schedule-name        { font-size: 0.875rem; color: var(--color-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
c-benefit-session-reporting .metadata-line        { display: flex; gap: 1rem; margin-bottom: 0.5rem; }
c-benefit-session-reporting .right-block          { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
c-benefit-session-reporting .day-label            { display: flex; align-items: center; justify-content: center; height: 40px; background-color: var(--color-border-subtle); color: var(--color-brand); font-size: 0.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; margin-right: 1rem; border-radius: var(--radius-tag); white-space: nowrap; padding: 0 1rem; }
c-benefit-session-reporting .action-area          { display: flex; align-items: center; justify-content: center; height: 40px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; margin-right: 1rem; }
c-benefit-session-reporting .section-label        { font-size: 0.7rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.12em; margin-bottom: 0.5rem; }
c-benefit-session-reporting .toolbar-row          { flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
c-benefit-session-reporting .missing-report-warning { display: inline-flex; align-items: center; align-self: center; margin-left: 0.4rem; }
@media (max-width: 768px) {
    c-benefit-session-reporting .session-card     { flex-direction: column; align-items: stretch; min-height: auto; }
    c-benefit-session-reporting .date-block       { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--color-border-subtle); padding: 0.75rem; }
    c-benefit-session-reporting .day-label        { width: 100%; height: auto; padding: 0.75rem; border-top: 1px solid var(--color-border-subtle); }
    c-benefit-session-reporting .action-area      { width: 100%; height: auto; padding: 0.75rem; }
    c-benefit-session-reporting .content-block    { padding: 0.75rem; }
    c-benefit-session-reporting .metadata-line    { flex-direction: column; gap: 0.5rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §9g  programScheduleCard
   ─────────────────────────────────────────────────────────────────────────── */
c-program-schedule-card .schedule-card               { cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; border-radius: var(--radius-button); overflow: hidden; border: 1px solid var(--color-border-subtle); margin-bottom: 1rem; box-shadow: var(--shadow-card); }
c-program-schedule-card .schedule-card:hover         { border-color: var(--color-border-default); box-shadow: var(--shadow-card-elevated); }
c-program-schedule-card .schedule-card-header        { background: var(--color-surface-subtle); border-bottom: 1px solid var(--color-border-subtle); }
c-program-schedule-card .schedule-card-footer        { background: var(--color-row-hover); border-top: 1px solid var(--color-border-subtle); transition: background-color 0.2s ease; }
c-program-schedule-card .schedule-card:hover .schedule-card-footer { background: var(--color-surface-subtle); }
c-program-schedule-card .schedule-title-group        { gap: 0.5rem; min-width: 0; }
c-program-schedule-card .schedule-title              { font-weight: 700; color: var(--color-text-secondary); }
c-program-schedule-card .status-badge                { background: none; color: var(--color-text-body); font-weight: 600; border: 1px solid var(--color-border-default); border-radius: var(--radius-tag); width: auto; font-size: 0.7rem; letter-spacing: 0.08em; }
c-program-schedule-card .next-meeting-label          { font-weight: 600; white-space: nowrap; font-size: 0.875rem; }
c-program-schedule-card .meta-value,
c-program-schedule-card .next-meeting-value,
c-program-schedule-card .no-scheduled-meeting        { line-height: 1.5; font-size: 0.875rem; color: var(--color-text-body); }
c-program-schedule-card .edit-full-btn               { justify-content: center; }
c-program-schedule-card .divider-col                 { flex-direction: column; align-self: stretch; }
c-program-schedule-card .divider-line                { flex: 1; }
c-program-schedule-card .mobile-tablet-only          { display: block; }
c-program-schedule-card .desktop-only                { display: none; }
@media (max-width: 768px) {
    c-program-schedule-card .hide-mobile             { display: none; }
    c-program-schedule-card .status-badge            { width: 100% !important; text-align: center; margin-bottom: 0.75rem; }
}
@media (min-width: 1024px) {
    c-program-schedule-card .desktop-only            { display: flex; }
    c-program-schedule-card .mobile-tablet-only      { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §9h  programUpcomingSessionCard
   ─────────────────────────────────────────────────────────────────────────── */
c-program-upcoming-session-card .session-event-row    { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
c-program-upcoming-session-card .session-card-hover   { border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-card); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
c-program-upcoming-session-card .session-card-hover:hover { border-color: var(--color-border-default); box-shadow: var(--shadow-card-elevated); background: var(--color-row-hover); }
@media (max-width: 48em) {
    c-program-upcoming-session-card .session-row      { flex-direction: column; align-items: stretch; }
    c-program-upcoming-session-card .session-date     { width: 100%; order: 1; border-right: none; border-bottom: 1px solid var(--lwc-colorBorder, #dddbda); }
    c-program-upcoming-session-card .session-content  { order: 2; padding-left: 0; padding-right: 0; padding-top: 1rem; }
    c-program-upcoming-session-card .session-metadata { flex-direction: column; align-items: flex-start; }
    c-program-upcoming-session-card .session-metadata > span { margin-bottom: 0.75rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §9i  discipleshipRosterManagement
   ─────────────────────────────────────────────────────────────────────────── */
c-discipleship-roster-management .schedule-label          { display: flex; align-items: center; font-size: var(--font-size-heading-2); font-weight: 700; color: var(--color-text-secondary); }
c-discipleship-roster-management .group-row               { display: flex; align-items: flex-end; gap: 0.75rem; }
c-discipleship-roster-management .group-row__picker       { flex: 1; min-width: 0; }
c-discipleship-roster-management .group-row__action       { flex-shrink: 0; padding-bottom: 1px; }
c-discipleship-roster-management .stats-row               { display: flex; gap: 1rem; }
c-discipleship-roster-management .stat-card               { flex: 1; background: var(--color-card-background); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-button); padding: 1rem; text-align: center; box-shadow: var(--shadow-card); }
c-discipleship-roster-management .stat-card--ok           { border-color: var(--color-success-border); background: var(--color-success-background); }
c-discipleship-roster-management .stat-card--alert        { border-color: var(--color-error-border); background: var(--color-error-background); }
c-discipleship-roster-management .stat-number             { font-size: 1.75rem; font-weight: 700; color: var(--color-text-secondary); line-height: 1; margin-bottom: 0.25rem; }
c-discipleship-roster-management .stat-card--ok .stat-number    { color: var(--color-success-text); }
c-discipleship-roster-management .stat-card--alert .stat-number { color: var(--color-error-text); }
c-discipleship-roster-management .stat-label              { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); }
c-discipleship-roster-management .roster-table-wrapper    { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-button); overflow: hidden; }
c-discipleship-roster-management .roster-table-header     { display: grid; grid-template-columns: 2fr 1fr 1.3fr 0.8fr 0.9fr 220px; background: var(--color-surface-subtle); padding: 0.5rem 1rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border-subtle); }
c-discipleship-roster-management .roster-row              { display: grid; grid-template-columns: 2fr 1fr 1.3fr 0.8fr 0.9fr 220px; align-items: center; padding: 0.625rem 1rem; border-bottom: 1px solid var(--color-border-subtle); font-size: 0.875rem; color: var(--color-text-secondary); transition: background-color 0.15s; }
c-discipleship-roster-management .roster-row:last-child   { border-bottom: none; }
c-discipleship-roster-management .roster-row:hover        { background: var(--color-row-hover); }
c-discipleship-roster-management .roster-row--alert       { background: var(--color-error-background); }
c-discipleship-roster-management .roster-row--alert:hover { background: var(--color-error-background); }
c-discipleship-roster-management .col-name               { font-weight: 500; padding-right: 0.5rem; }
c-discipleship-roster-management .col-vision             { color: var(--color-text-muted); }
c-discipleship-roster-management .col-vision--mono       { font-family: var(--font-family-mono); font-size: 0.8rem; }
c-discipleship-roster-management .col-date               { color: var(--color-text-body); }
c-discipleship-roster-management .col-days               { color: var(--color-text-body); }
c-discipleship-roster-management .col-action             { display: flex; justify-content: flex-end; align-items: center; gap: 0.25rem; flex-wrap: nowrap; }
c-discipleship-roster-management .candidate-search-row   { margin-bottom: 0.75rem; }
c-discipleship-roster-management .candidate-list         { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-button); overflow: hidden; }
c-discipleship-roster-management .candidate-header       { display: grid; grid-template-columns: 2fr 1fr 1fr 90px; background: var(--color-surface-subtle); padding: 0.5rem 1rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border-subtle); }
c-discipleship-roster-management .candidate-row          { display: grid; grid-template-columns: 2fr 1fr 1fr 90px; align-items: center; padding: 0.625rem 1rem; border-bottom: 1px solid var(--color-border-subtle); font-size: 0.875rem; color: var(--color-text-secondary); transition: background-color 0.15s; }
c-discipleship-roster-management .candidate-row:last-child { border-bottom: none; }
c-discipleship-roster-management .candidate-row:hover    { background: var(--color-row-hover); }
c-discipleship-roster-management .cand-col-name          { font-weight: 500; }
c-discipleship-roster-management .cand-col-vision        { color: var(--color-text-muted); }
c-discipleship-roster-management .cand-col-vision--mono  { font-family: var(--font-family-mono); font-size: 0.8rem; }
c-discipleship-roster-management .cand-col-status        { color: var(--color-text-muted); font-size: 0.8rem; }
c-discipleship-roster-management .cand-col-action        { display: flex; justify-content: flex-end; }
c-discipleship-roster-management .confirm-text           { font-size: 0.9rem; color: var(--color-text-body); line-height: 1.6; }
c-discipleship-roster-management .modal-subtitle         { font-size: 0.85rem; color: var(--color-text-placeholder); margin-top: 0.25rem; }
c-discipleship-roster-management .roster-mobile          { display: none; }
c-discipleship-roster-management .roster-desktop         { display: block; }
c-discipleship-roster-management .roster-cards           { flex-direction: column; gap: 0.75rem; }
c-discipleship-roster-management .roster-card            { background: var(--color-card-background); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-button); padding: 0.875rem 1rem; box-shadow: var(--shadow-card); }
c-discipleship-roster-management .roster-card--alert     { border-color: var(--color-error-border); background: var(--color-error-background); }
c-discipleship-roster-management .card-header            { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
c-discipleship-roster-management .card-name              { font-weight: 600; font-size: 0.95rem; color: var(--color-text-secondary); flex: 1; padding-right: 0.5rem; }
c-discipleship-roster-management .card-meta              { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
c-discipleship-roster-management .meta-item              { flex-direction: column; align-items: flex-start; gap: 0; }
c-discipleship-roster-management .card-vision            { font-family: var(--font-family-mono); font-size: 0.8rem; }
c-discipleship-roster-management .card-actions           { display: flex; gap: 0.5rem; flex-wrap: wrap; }
c-discipleship-roster-management .card-btn               { flex: 1; justify-content: center; }
@media (max-width: 768px) {
    c-discipleship-roster-management .stats-row          { flex-direction: column; }
    c-discipleship-roster-management .roster-desktop     { display: none; }
    c-discipleship-roster-management .roster-mobile      { display: flex; }
    c-discipleship-roster-management .candidate-header,
    c-discipleship-roster-management .candidate-row      { grid-template-columns: 2fr 90px; }
    c-discipleship-roster-management .cand-col-vision,
    c-discipleship-roster-management .cand-col-status    { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §9j  leaderOversightConsole
   ─────────────────────────────────────────────────────────────────────────── */
c-leader-oversight-console .tab-bar             { display: flex; gap: 0; border-bottom: 2px solid var(--color-border-subtle); }
c-leader-oversight-console .tab-btn             { padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: var(--color-text-muted); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
c-leader-oversight-console .tab-btn:hover       { color: var(--color-text-secondary); }
c-leader-oversight-console .tab-btn--active     { color: var(--color-link); border-bottom-color: var(--color-link); }
c-leader-oversight-console .count-label         { font-size: 0.78rem; color: var(--color-text-placeholder); }
c-leader-oversight-console .bag-table-wrapper   { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-button); overflow: hidden; }
c-leader-oversight-console .bag-table-header,
c-leader-oversight-console .bag-row             { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr 1.5fr 1fr 1fr; align-items: center; padding: 0.5rem 1rem; font-size: 0.8rem; }
c-leader-oversight-console .bag-table-header    { background: var(--color-surface-subtle); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border-subtle); }
c-leader-oversight-console .bag-row             { border-bottom: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); transition: background-color 0.15s; }
c-leader-oversight-console .bag-row:last-child  { border-bottom: none; }
c-leader-oversight-console .bag-row:hover       { background: var(--color-row-hover); }
c-leader-oversight-console .bag-row--issued     { background: var(--color-warning-background); }
c-leader-oversight-console .bag-row--issued:hover { background: var(--color-warning-background); }
c-leader-oversight-console .bag-barcode         { font-family: var(--font-family-mono); font-size: 0.78rem; font-weight: 600; }
c-leader-oversight-console .bag-date            { color: var(--color-text-muted); }
c-leader-oversight-console .bag-type            { color: var(--color-text-body); }
c-leader-oversight-console .status-badge        { display: inline-block; padding: 0.1rem 0.45rem; border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--color-surface-subtle); color: var(--color-text-muted); border: 1px solid var(--color-border-default); }
c-leader-oversight-console .status-badge--issued   { background: var(--color-warning-background); color: var(--color-warning-text); border-color: var(--color-warning-border); }
c-leader-oversight-console .status-badge--returned { background: var(--color-success-background); color: var(--color-success-text); border-color: var(--color-success-border); }
@media (max-width: 768px) {
    c-leader-oversight-console .bag-table-header,
    c-leader-oversight-console .bag-row             { grid-template-columns: 1.2fr 1fr 1.5fr 1fr; }
    c-leader-oversight-console .bag-col-type,
    c-leader-oversight-console .bag-col-group,
    c-leader-oversight-console .bag-col-received    { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §9k  benefitScheduleStandardEditor
   ─────────────────────────────────────────────────────────────────────────── */
c-benefit-schedule-standard-editor .custom-modal            { border: 1px solid var(--color-border-subtle) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-card-elevated) !important; }
/* no own border-radius: the c-vision-dialog surface clips (overflow:hidden) — a second concentric
   radius here painted corner slivers against the dialog's curve */
c-benefit-schedule-standard-editor .custom-modal__header    { background-color: var(--color-surface-subtle); border-bottom: 1px solid var(--color-border-subtle); padding: 1.5rem; display: flex; justify-content: space-between; align-items: flex-start; }
/* title aligned to the .lc-dialog voice (display face, sentence case) */
c-benefit-schedule-standard-editor .custom-modal__title     { color: var(--ink); font-family: var(--font-display); font-size: 22px; font-weight: 500; text-transform: none; letter-spacing: 0; margin: 0; }
c-benefit-schedule-standard-editor .header-content          { display: flex; flex-direction: column; gap: 0.25rem; }
c-benefit-schedule-standard-editor .custom-modal__close-btn { background: none; border: none; padding: 0.25rem; cursor: pointer; color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-tag); }
c-benefit-schedule-standard-editor .custom-modal__close-icon { font-size: 24px; line-height: 1; color: var(--color-text-muted); }
c-benefit-schedule-standard-editor .custom-modal__close-btn:hover { background-color: var(--color-surface-subtle); }
c-benefit-schedule-standard-editor .custom-modal__content   { padding: 1.5rem; background-color: var(--color-card-background); position: relative; min-height: 200px; }
c-benefit-schedule-standard-editor .custom-form             { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
c-benefit-schedule-standard-editor .custom-form-row         { display: contents; }
c-benefit-schedule-standard-editor .custom-weekday-section  { grid-column: 1 / -1; border: 1px solid var(--color-border-default); padding: 1rem; background-color: var(--color-card-background); border-radius: var(--radius-card); }
c-benefit-schedule-standard-editor .custom-weekday-grid     { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
c-benefit-schedule-standard-editor .custom-weekday-btn      { background-color: var(--color-card-background); border: 1px solid var(--color-border-default); color: var(--color-text-muted); padding: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all 0.3s ease; border-radius: var(--radius-tag); display: flex; align-items: center; justify-content: center; min-height: 40px; }
c-benefit-schedule-standard-editor .custom-weekday-btn:hover { border-color: var(--color-brand); color: var(--color-brand); }
c-benefit-schedule-standard-editor .custom-weekday-btn.active { background-color: var(--color-text-body); color: #FFFFFF; border-color: var(--color-text-body); }
c-benefit-schedule-standard-editor .custom-weekday-note     { font-size: 0.75rem; color: var(--color-text-placeholder); font-style: italic; }
c-benefit-schedule-standard-editor .custom-status-toggle    { display: flex; border: 1px solid var(--color-border-default); border-radius: var(--radius-tag); overflow: hidden; }
c-benefit-schedule-standard-editor .custom-status-btn       { flex: 1; background-color: var(--color-card-background); border: none; color: var(--color-text-muted); padding: 0.75rem; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all 0.3s ease; }
c-benefit-schedule-standard-editor .custom-status-btn:hover { background-color: var(--color-surface-subtle); color: var(--color-brand); }
c-benefit-schedule-standard-editor .custom-status-btn.active { background-color: var(--color-brand); color: #FFFFFF; }
c-benefit-schedule-standard-editor .custom-readonly-section { grid-column: 1 / -1; border-top: 1px solid var(--color-border-subtle); padding-top: 1rem; margin-top: 1rem; }
c-benefit-schedule-standard-editor .custom-readonly-row     { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; gap: 1rem; }
c-benefit-schedule-standard-editor .custom-readonly-label   { font-size: 0.75rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
c-benefit-schedule-standard-editor .custom-readonly-value   { font-size: 0.875rem; color: var(--color-brand); text-align: right; overflow-wrap: anywhere; }
c-benefit-schedule-standard-editor .custom-modal__footer    { background-color: var(--color-card-background) !important; border-top: 1px solid var(--color-border-subtle); padding: 1rem 1.5rem; display: flex; justify-content: space-between; gap: 1rem; }
c-benefit-schedule-standard-editor .custom-cancel-btn       { background: none; border: 1px solid var(--color-border-default); color: var(--color-brand); padding: 0.5rem 1rem; font-size: 0.875rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; transition: background-color 0.2s ease, color 0.2s ease; border-radius: var(--radius-tag); display: flex; align-items: center; gap: 0.5rem; }
c-benefit-schedule-standard-editor .custom-cancel-btn:hover { background-color: var(--color-surface-subtle); color: var(--color-text-body); }
c-benefit-schedule-standard-editor .custom-save-btn         { background-color: var(--color-text-body); border: 1px solid var(--color-text-body); color: #FFFFFF; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: background-color 0.3s ease; border-radius: var(--radius-tag); }
c-benefit-schedule-standard-editor .custom-save-btn:hover:not(:disabled) { background-color: var(--color-text-secondary); border-color: var(--color-text-secondary); }
/* legible disabled state (was white text on pale tan, ~1.6:1) */
c-benefit-schedule-standard-editor .custom-save-btn:disabled { background-color: var(--color-surface-subtle); border-color: var(--color-border-default); color: var(--color-text-muted); cursor: not-allowed; }
c-benefit-schedule-standard-editor .custom-save-icon        { --slds-c-icon-color-foreground-default: #FFFFFF; }
c-benefit-schedule-standard-editor .custom-save-btn:disabled .custom-save-icon { --slds-c-icon-color-foreground-default: var(--color-text-muted); }
c-benefit-schedule-standard-editor .custom-loading-overlay  { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; }
c-benefit-schedule-standard-editor .custom-backdrop         { background-color: rgba(0,0,0,0.5) !important; }
c-benefit-schedule-standard-editor .modal-subtitle          { font-size: 14px; color: var(--ink-2); margin: 2px 0 0; text-transform: none; letter-spacing: 0; }
@media (max-width: 768px) {
    c-benefit-schedule-standard-editor .custom-form          { grid-template-columns: 1fr; gap: 1rem; }
    c-benefit-schedule-standard-editor .custom-modal__content { padding: 1rem; }
    c-benefit-schedule-standard-editor .custom-modal__header  { padding: 1rem; }
    c-benefit-schedule-standard-editor .custom-modal__title   { font-size: 20px; }
    c-benefit-schedule-standard-editor .custom-weekday-grid   { grid-template-columns: repeat(3, 1fr); }
    c-benefit-schedule-standard-editor .custom-modal__footer  { padding: 0.75rem 1rem; flex-direction: column; gap: 0.75rem; }
    c-benefit-schedule-standard-editor .custom-cancel-btn,
    c-benefit-schedule-standard-editor .custom-save-btn       { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
    c-benefit-schedule-standard-editor .custom-weekday-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §9l  benefitSingleSessionEditor
   ─────────────────────────────────────────────────────────────────────────── */
c-benefit-single-session-editor .editor-card           { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-button); overflow: hidden; background: var(--color-card-background); box-shadow: var(--shadow-card); }
c-benefit-single-session-editor .editor-card-header    { background: var(--color-surface-subtle); border-bottom: 1px solid var(--color-border-subtle); padding: 0.875rem 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
c-benefit-single-session-editor .editor-card-title     { font-size: 1rem; font-weight: 700; color: var(--color-text-secondary); margin: 0; }
c-benefit-single-session-editor .editor-card-body      { padding: 1.25rem; }
c-benefit-single-session-editor .editor-card-footer    { display: flex; align-items: center; padding: 0.75rem 1.25rem; background: var(--color-row-hover); border-top: 1px solid var(--color-border-subtle); color: var(--color-text-placeholder); }
c-benefit-single-session-editor .control-header        { background-color: var(--color-surface-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-button); padding: 1rem 1.25rem; }
c-benefit-single-session-editor .control-header__content { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
c-benefit-single-session-editor .control-label         { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 0.5rem; }
c-benefit-single-session-editor .search-container      { flex: 1; max-width: 400px; }
c-benefit-single-session-editor .search-input-wrapper  { position: relative; display: flex; align-items: center; }
c-benefit-single-session-editor .search-icon           { position: absolute; left: 0.75rem; z-index: 1; pointer-events: none; --sds-c-icon-color-foreground-default: var(--color-text-placeholder); }
c-benefit-single-session-editor .search-input          { width: 100%; padding: 0.5rem 2.5rem; border: none; border-bottom: 1px solid var(--color-border-default); background-color: transparent; font-size: 0.875rem; color: var(--color-text-secondary); outline: none; transition: border-color 0.2s ease; }
c-benefit-single-session-editor .search-input:focus    { border-bottom: 2px solid var(--color-text-body); }
c-benefit-single-session-editor .search-clear-btn      { position: absolute; right: 0.5rem; background: none; border: none; color: var(--color-text-placeholder); cursor: pointer; padding: 0.25rem; display: flex; align-items: center; justify-content: center; }
c-benefit-single-session-editor .search-clear-btn:hover { color: var(--color-text-body); }
c-benefit-single-session-editor .page-size-container   { min-width: 150px; }
c-benefit-single-session-editor .page-size-select      { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border-default); background-color: var(--color-card-background); font-size: 0.875rem; color: var(--color-text-secondary); cursor: pointer; outline: none; border-radius: var(--radius-tag); }
c-benefit-single-session-editor .page-size-select:focus { border-color: var(--color-text-placeholder); }
c-benefit-single-session-editor .table-wrapper         { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-button); overflow: hidden; overflow-x: auto; }
c-benefit-single-session-editor .slds-table thead th   { background-color: var(--color-surface-subtle); color: var(--color-text-muted); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid var(--color-border-subtle) !important; padding: 0.5rem 0.75rem; vertical-align: middle; }
c-benefit-single-session-editor .sortable-header       { cursor: pointer; user-select: none; transition: background-color 0.15s; }
c-benefit-single-session-editor .sortable-header:hover { background-color: var(--color-surface-subtle) !important; }
c-benefit-single-session-editor .slds-table tbody tr:nth-child(even) { background-color: var(--color-card-background); }
c-benefit-single-session-editor .slds-table tbody tr:nth-child(odd)  { background-color: var(--color-row-hover); }
c-benefit-single-session-editor .slds-table tbody td,
c-benefit-single-session-editor .slds-table tbody th  { border-left: none !important; border-right: none !important; border-top: 1px solid var(--color-border-subtle) !important; border-bottom: 1px solid var(--color-border-subtle) !important; padding: 0.625rem 0.75rem; vertical-align: middle; font-size: 0.875rem; color: var(--color-text-secondary); }
c-benefit-single-session-editor .slds-table tbody tr:hover { background-color: var(--color-row-hover) !important; }
c-benefit-single-session-editor .slds-table tbody tr.slds-is-selected { background-color: var(--color-surface-subtle) !important; }
c-benefit-single-session-editor .slds-badge            { border-radius: var(--radius-tag) !important; font-weight: 600 !important; padding: 0.15rem 0.5rem !important; font-size: 0.7rem !important; text-transform: uppercase; letter-spacing: 0.08em; }
c-benefit-single-session-editor .slds-badge.slds-theme_success { background-color: var(--color-surface-subtle) !important; color: var(--color-text-body) !important; border: 1px solid var(--color-border-default) !important; }
c-benefit-single-session-editor .badge-exception       { background-color: var(--color-warning-background) !important; color: var(--color-text-muted) !important; border: 1px solid var(--color-warning-border) !important; border-radius: var(--radius-tag) !important; display: inline-block; padding: 0.15rem 0.5rem !important; font-size: 0.7rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; }
c-benefit-single-session-editor .pagination-footer     { background-color: var(--color-surface-subtle); border-top: 1px solid var(--color-border-subtle); padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
c-benefit-single-session-editor .results-info          { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 500; }
c-benefit-single-session-editor .pagination-controls   { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
c-benefit-single-session-editor .pagination-nav-btn    { background: none; border: 1px solid var(--color-border-default); padding: 0.375rem 0.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; font-size: 0.75rem; color: var(--color-text-muted); transition: all 0.15s; border-radius: var(--radius-tag); }
c-benefit-single-session-editor .pagination-nav-btn:hover:not(:disabled) { background-color: var(--color-surface-subtle); border-color: var(--color-text-placeholder); color: var(--color-text-secondary); }
c-benefit-single-session-editor .pagination-nav-btn:disabled { color: var(--color-border-default); cursor: not-allowed; border-color: var(--color-border-subtle); }
c-benefit-single-session-editor .page-indicator        { background-color: var(--color-card-background); border: 1px solid var(--color-border-default); padding: 0.375rem 0.75rem; font-weight: 700; color: var(--color-text-secondary); font-size: 0.8rem; min-width: 3rem; text-align: center; border-radius: var(--radius-tag); }
c-benefit-single-session-editor .refresh-overlay       { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; }
c-benefit-single-session-editor .table-content-area    { position: relative; flex: 1; display: flex; flex-direction: column; }
c-benefit-single-session-editor .session-cards-grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; padding: 1rem 0; }
c-benefit-single-session-editor .session-card          { background: var(--color-card-background); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-button); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; position: relative; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
c-benefit-single-session-editor .session-card:hover    { border-color: var(--color-border-default); box-shadow: var(--shadow-card-elevated); }
c-benefit-single-session-editor .session-card__edit-section { display: flex; justify-content: center; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border-subtle); background-color: var(--color-surface-subtle); }
c-benefit-single-session-editor .session-card__header  { display: flex; justify-content: center; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border-subtle); }
c-benefit-single-session-editor .session-title         { margin: 0; font-size: 1rem; font-weight: 700; color: var(--color-text-secondary); text-align: center; word-wrap: break-word; }
c-benefit-single-session-editor .session-card__body    { padding: 1rem; flex: 1; }
c-benefit-single-session-editor .session-meta          { display: flex; flex-direction: column; gap: 0.75rem; }
c-benefit-single-session-editor .meta-item             { display: flex; align-items: flex-start; gap: 0.75rem; }
c-benefit-single-session-editor .meta-icon             { --sds-c-icon-color-foreground-default: var(--color-text-muted); flex-shrink: 0; margin-top: 0.125rem; }
c-benefit-single-session-editor .meta-content          { flex: 1; min-width: 0; }
c-benefit-single-session-editor .meta-label            { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 0.2rem; }
c-benefit-single-session-editor .meta-value            { font-size: 0.875rem; color: var(--color-text-body); line-height: 1.4; word-break: break-word; }
c-benefit-single-session-editor .session-card__footer  { padding: 0.625rem 1rem; border-top: 1px solid var(--color-border-subtle); background-color: var(--color-row-hover); display: flex; justify-content: center; align-items: center; }
c-benefit-single-session-editor .desktop-only          { display: block; }
c-benefit-single-session-editor .mobile-tablet-only    { display: none; }
@media (max-width: 1024px) {
    c-benefit-single-session-editor .desktop-only      { display: none !important; }
    c-benefit-single-session-editor .mobile-tablet-only { display: block !important; }
}
@media (max-width: 768px) {
    c-benefit-single-session-editor .control-header__content { flex-direction: column; align-items: stretch; gap: 1rem; }
    c-benefit-single-session-editor .search-container   { max-width: none; }
    c-benefit-single-session-editor .session-cards-grid { grid-template-columns: 1fr; gap: 0.75rem; padding: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   §9m  transferApprovalCard
   ─────────────────────────────────────────────────────────────────────────── */
c-transfer-approval-card .section-label      { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #555; margin-bottom: 1rem; }
c-transfer-approval-card .summary-card       { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 0.5rem; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
c-transfer-approval-card .summary-intro      { font-size: 0.9rem; color: #555; margin-bottom: 0.2rem; }
c-transfer-approval-card .summary-subject    { font-size: 1.2rem; font-weight: 700; color: #1b1b1b; margin-bottom: 1rem; }
c-transfer-approval-card .transfer-direction { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
c-transfer-approval-card .transfer-party     { display: flex; flex-direction: column; gap: 0.1rem; }
c-transfer-approval-card .party-role         { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #888; font-weight: 600; }
c-transfer-approval-card .party-name         { font-size: 0.95rem; font-weight: 600; color: #1b1b1b; }
c-transfer-approval-card .to-name            { color: var(--color-link); }
c-transfer-approval-card .transfer-arrow     { font-size: 1.4rem; color: #b0b0b0; padding: 0 0.25rem; align-self: flex-end; padding-bottom: 0.1rem; }
c-transfer-approval-card .net-warning        { display: flex; align-items: flex-start; gap: 0.4rem; margin-top: 1rem; padding: 0.6rem 0.75rem; background: var(--color-warning-background); border: 1px solid var(--color-warning-border); border-radius: 0.375rem; font-size: 0.85rem; color: var(--color-warning-text); line-height: 1.4; }
c-transfer-approval-card .comments-wrapper   { margin-bottom: 1.5rem; }
c-transfer-approval-card .optional-hint      { font-weight: 400; color: #888; font-size: 0.8rem; margin-left: 0.25rem; }
c-transfer-approval-card .actions-row        { display: flex; justify-content: space-between; align-items: center; }

/* ─────────────────────────────────────────────────────────────────────────────
   §9n  transferMentorTutorPicker
   ─────────────────────────────────────────────────────────────────────────── */
c-transfer-mentor-tutor-picker .section-label           { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #555; margin-bottom: 0.75rem; }
c-transfer-mentor-tutor-picker .selected-banner         { display: flex; align-items: center; justify-content: space-between; background: #f0f7ff; border: 1px solid #a9d0f5; border-radius: 0.5rem; padding: 0.75rem 1rem; }
c-transfer-mentor-tutor-picker .selected-banner__name   { font-weight: 600; font-size: 0.95rem; color: var(--color-link); }
c-transfer-mentor-tutor-picker .selected-banner__meta   { font-size: 0.8rem; color: #555; margin-top: 0.2rem; }
c-transfer-mentor-tutor-picker .meta-sep                { margin: 0 0.35rem; color: #aaa; }
c-transfer-mentor-tutor-picker .meta-disc               { color: var(--color-link); }
c-transfer-mentor-tutor-picker .search-wrapper          { position: relative; }
c-transfer-mentor-tutor-picker .clear-btn               { cursor: pointer; border: none !important; background: transparent !important; padding: 0 !important; }
c-transfer-mentor-tutor-picker .search-hint             { font-size: 0.8rem; color: #888; margin-top: 0.35rem; }
c-transfer-mentor-tutor-picker .dropdown                { margin-top: 2px; background: #ffffff; border: 1px solid #dddbda; border-radius: 0.25rem; box-shadow: 0 4px 12px rgba(0,0,0,0.12); max-height: 260px; overflow-y: auto; }
c-transfer-mentor-tutor-picker .dropdown-item           { padding: 0.6rem 1rem; cursor: pointer; border-bottom: 1px solid #f3f3f3; transition: background-color 0.1s; }
c-transfer-mentor-tutor-picker .dropdown-item:last-child { border-bottom: none; }
c-transfer-mentor-tutor-picker .dropdown-item:hover     { background: #f4f9ff; }
c-transfer-mentor-tutor-picker .dropdown-item--info,
c-transfer-mentor-tutor-picker .dropdown-item--empty    { cursor: default; color: #777; font-size: 0.85rem; display: flex; align-items: center; }
c-transfer-mentor-tutor-picker .dropdown-item--empty    { font-style: italic; }
c-transfer-mentor-tutor-picker .inline-spinner          { display: inline-block; position: relative; height: 20px; width: 20px; }
c-transfer-mentor-tutor-picker .result-name             { font-weight: 500; font-size: 0.9rem; color: #1b1b1b; }
c-transfer-mentor-tutor-picker .result-meta             { font-size: 0.76rem; color: #666; margin-top: 0.1rem; display: flex; align-items: center; flex-wrap: wrap; }
c-transfer-mentor-tutor-picker .result-vision           { font-family: monospace; }
c-transfer-mentor-tutor-picker .result-sep              { margin: 0 0.3rem; color: #bbb; }
c-transfer-mentor-tutor-picker .result-disc             { color: var(--color-link); }
c-transfer-mentor-tutor-picker .validation-error        { color: var(--color-error-text); font-size: 0.82rem; margin-top: 0.5rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   §9o  hierarchicalMissingReportsConsole / hierarchicalNetListConsole
   ─────────────────────────────────────────────────────────────────────────── */
.slds-text-color_error { font-weight: 600; }
.filter-actions        { gap: 0.5rem; }
c-hierarchical-missing-reports-console .filters-container { border: 1px solid var(--color-border-default); border-radius: var(--radius-card); }

/* ─────────────────────────────────────────────────────────────────────────────
   §9p  Flow + geo utility components
   ─────────────────────────────────────────────────────────────────────────── */
c-flow-block-h-t-m-l .icon-container { margin-right: 6px; display: inline-block; }
c-flow-block-h-t-m-l .black   { --sds-c-icon-color-foreground-default: #000000; }
c-flow-block-h-t-m-l .success { --sds-c-icon-color-foreground-default: #01B46C; }
c-flow-block-h-t-m-l .center  { text-align: center; }
c-cc-custom-flow-input .container { margin-bottom: 8px; }
.scroller-size { height: 10rem; }
details > summary { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════════
   8. PORTAL PAGE PATTERNS (donate affordance removed 2026-07-05, batch 1)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Testimony ────────────────────────────────────────────────────────────── */
.testimony-parent-div {
    text-align: center;
    background-color: var(--color-brand-blue);
    padding: 0.25rem;
}

.testimony-button {
    background-color: var(--color-brand-blue);
    border: 0;
    border-radius: var(--radius);
    font-size: 1.5rem;
    color: var(--paper);
    padding: 0.3rem 0.75rem;
    margin: 0.2rem 0;
    cursor: pointer;
}
.testimony-button:hover { background: var(--color-brand-blue-hover); }

/* ── Ministry page layout ─────────────────────────────────────────────────── */
.ministry-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0.5rem 2rem;
}

.ministry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.ministry-title,
.formatted-rich-text h1 {
    font-size: clamp(2.1rem, 3vw, 2.6rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--ink) !important;
}

/* ── Ministry pill counter (label + count badge) ──────────────────────────── */
.ministry-pill-container { width: 100%; text-align: right; }

/* G2 (2026-07-06): the Souls Saved counter drops the ink fill for the brand
   accent — border + count segment use --accent/--accent-ink (§6.2). Label
   text stays on ink (readable text is not an accent). */
.ministry-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 0.6rem;
    border: 1px solid var(--accent);
    overflow: hidden;
    background: var(--card-2);
    font-size: 1.3rem;
    box-shadow: var(--shadow);
}

.pill-text  { padding: 0.45rem 0.9rem; color: var(--ink); white-space: nowrap; }
.pill-count { padding: 0.45rem 0.9rem; background: var(--accent); color: var(--accent-ink); font-weight: 700; min-width: 3.25rem; text-align: center; }

/* ── Navigation tile grid ─────────────────────────────────────────────────── */
.ministry-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -0.75rem;
}

.ministry-tile {
    flex: 1 1 380px;
    margin: 0.5rem;
    display: flex;
    flex-direction: column;
    padding: 1.4rem 1.3rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--rule-2);
    background: var(--paper);
    text-decoration: none;
    color: var(--ink-2);
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.04);
    transition: transform 150ms ease-out, box-shadow 150ms ease-out,
                border-color 150ms ease-out, background 150ms ease-out;
}

.ministry-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--ink);
    background: var(--card-2);
}

.ministry-tile:hover,
.ministry-tile:hover .tile-title,
.ministry-tile:hover .tile-text { color: var(--ink) !important; }

.tile-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.4rem; }
.tile-text  { font-size: 1.4rem; color: var(--ink-3); line-height: 1.5; margin-bottom: 0.75rem; }
.tile-meta  { font-size: 0.82rem; color: var(--ink-2); }

@media (max-width: 480px) {
    .ministry-title    { padding-top: 2.5rem; }
    .ministry-body     { padding-inline: 1rem; }
    .ministry-tile     { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. VISION PORTAL SHELL  (added 2026-07-05, Path A rebuild — not part of the
      kjsdev2 export; recorded in DESIGN_SYSTEM.md §7.1 note)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bottom tab bar (c-vision-bottom-nav in the theme layouts' footer region).
   Base .bottomnav styles live in §3 (grid, fixed bottom, ≤860px only); these
   rules adapt them to anchor tabs + lightning-icon and enforce the 44px
   touch floor (Gate 1). Active tab uses the brand accent — the legacy
   Vision app's bottom nav colored its active tab the same blue. */
.bottomnav a.bottomnav__btn { text-decoration: none; min-height: 44px; justify-content: center; }
.bottomnav__btn.is-on { color: var(--accent); font-weight: 600; }
.bottomnav__licon { --sds-c-icon-color-foreground-default: currentColor; --slds-c-icon-color-foreground-default: currentColor; }
.bottomnav__licon .slds-icon { fill: currentColor; }

/* Keep the mobile bottom bar to the footer mount only. visionBottomNav is
   mounted twice (header nav region + themeFooter) and its `surface` @api does
   not bind, so the header mount ALSO renders .bottomnav — two overlapping
   fixed bars whose active state could desync and light two tabs. Mirror the
   topnav gating (which is scoped to the header): scope the bottom bar OUT of
   the header so only the footer renders it. */
.forceCommunityThemeHeaderCompact .bottomnav { display: none !important; }

/* Candidate-1 rebuild (2026-07-06; historical decision: docs/archive/NAV_IA_PROPOSAL.md §2 D1): the bar is now
   flex (§3) — persona tabs distribute EVENLY across the full width
   (Giovani's call, same day, superseding the seat-spacer draft): the FAB
   floats fully above the bar per its §3 contract (16px lift), so no notch
   gap is reserved and 3- or 4-tab personas both balance. */

/* Desktop top nav (same c-vision-bottom-nav, ≥861px, mounted in the header's
   nav region — historical decision: docs/archive/NAV_IA_PROPOSAL.md §5 D4; stock forceCommunity:themeNav REPLACED,
   not hidden). Labels and gating mirror the mobile tabs; "Log a Soul" reuses
   the FAB's accent tokens (§6.2) and triggers the same quick-capture action.
   44px link floor per Gate 1. */
/* Scope the topnav to the header container. visionBottomNav is mounted in
   BOTH the header nav region (surface="desktop") and the themeFooter
   (surface="mobile"), but the `surface` @api does not bind from theme-layout
   componentAttributes (no design property), so every mount falls to
   surface=undefined and showDesktopBar is true everywhere — the footer mount
   then rendered the topnav in-flow at the page bottom on desktop. Gating the
   topnav's display on .forceCommunityThemeHeaderCompact keeps it in the header
   only; the footer mount's topnav stays display:none while its mobile bar
   (shown ≤860px) is untouched. (2026-07-06 desktop polish; GOTCHAS.) */
.topnav { display: none; }
@media (min-width: 861px) {
    .forceCommunityThemeHeaderCompact .topnav {
        display: flex; align-items: center; gap: 4px;
        font-family: var(--font-ui);
    }
    .topnav__link {
        display: inline-flex; align-items: center;
        min-height: 44px; padding: 0 14px;
        color: var(--ink-3); text-decoration: none;
        font-size: 15px; font-weight: 500;
        border-bottom: 2px solid transparent;
    }
    .topnav__link:hover { color: var(--ink); }
    .topnav__link.is-on { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
    .topnav__cta {
        display: inline-flex; align-items: center; gap: 6px;
        margin-left: 12px; padding: 0 16px; min-height: 40px;
        background: var(--accent); color: var(--accent-ink);
        border: 0; border-radius: 999px; cursor: pointer;
        font-family: var(--font-ui); font-size: 14px; font-weight: 600;
        transition: background-color 0.15s ease;
    }
    .topnav__cta:hover { background: var(--accent-2); }
    .topnav__cta-icon { --sds-c-icon-color-foreground-default: currentColor; --slds-c-icon-color-foreground-default: currentColor; }
    .topnav__cta-icon .slds-icon { fill: currentColor; }
}

/* ── Home restructure (2026-07-06; historical decision: docs/archive/NAV_IA_PROPOSAL.md §4 as amended by G3;
      rhythm/type/motion polish pass same day — every gap resolves to a
      --rhythm-* token, docs/contracts/RHYTHM_TYPE_MOTION.md) ──────────── */

/* Primary-zone header (c-vision-home-header): the time-of-day greeting
   supersedes the zone title (G3). The Souls counter now rides the hero
   mission card as a stat chip (polish pass); the old right-aligned pill
   row is retired (revert = git revert of the polish-pass commits).
   Desktop greeting size = the §0 normalizer's 2.3rem (adopted); the mobile
   size override lives in §9 round 10 (order-sensitive vs round 6). */
.home-header {
    max-width: 1200px; margin: 0 auto;
    padding: var(--rhythm-top) var(--rhythm-gutter) 0;
}
.home-greeting {
    font-size: 2.3rem;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-family: var(--font-display);
    margin: 0;
}

/* "Your mission" cards (c-vision-mission-cards). The hero Evangelize card
   mirrors the FAB's accent treatment (§6.2: accent fill, accent-ink text,
   accent-2 hover); Affirm/Leader cards are standard card surfaces. */
.mission-grid {
    display: flex; flex-wrap: wrap; gap: var(--rhythm-list);
    max-width: 1200px; margin: 0 auto;
    padding: var(--rhythm-list) var(--rhythm-gutter) 0;
}
.mission-card {
    flex: 1 1 260px; display: flex; flex-direction: column; position: relative;
    padding: var(--rhythm-card-pad); min-height: 44px;
    border-radius: var(--radius-lg); border: 1px solid var(--rule-2);
    background: var(--card); color: var(--ink-2); text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out;
}
.mission-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.mission-card__eyebrow {
    font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; margin-bottom: 0.5rem;
}
.mission-card__title { font-size: 1.4rem !important; font-weight: 700; margin: 0 0 0.35rem; color: inherit; }
.mission-card__text  { font-size: 1rem; line-height: 1.5; margin: 0; color: inherit; opacity: 0.9; }
.mission-card--hero .mission-card__text { opacity: 1; }
.mission-card__go {
    position: absolute; right: 1.1rem; bottom: 1.1rem;
    --sds-c-icon-color-foreground-default: currentColor;
    --slds-c-icon-color-foreground-default: currentColor;
}
.mission-card__go .slds-icon { fill: currentColor; }
.mission-card--hero {
    background: var(--accent); border-color: var(--accent);
    color: var(--accent-ink); flex-basis: 100%;
}
.mission-card--hero:hover { background: var(--accent-2); border-color: var(--accent-2); }

/* Souls stat chip (hero bottom row): c-cc-harvests-tracker re-seated inside
   the hero card (data source + refresh untouched — placement/presentation
   only; the counter reads "N Souls Saved" via row-reverse). Chip bg mixes
   15% black over the accent → white text 6.44:1 (§4.9 floor). */
.mission-card__stat { margin-top: var(--rhythm-list); }
.mission-card__stat .ministry-pill-container { width: auto; text-align: left; }
.mission-card--hero .ministry-pill {
    flex-direction: row-reverse;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    box-shadow: none;
    font-size: 1rem;
}
.mission-card--hero .pill-count {
    background: transparent; color: var(--accent-ink);
    font-size: 1.05rem; font-weight: 800;
    min-width: 0; padding: 0.4rem 0.2rem 0.4rem 1rem; text-align: left;
}
.mission-card--hero .pill-text {
    color: var(--accent-ink); font-size: 0.875rem; font-weight: 600;
    padding: 0.4rem 1rem 0.4rem 0.2rem;
}
.mission-card--hero .ministry-pill .slds-spinner_container { background: transparent; }

/* "More ministries" compact rows (c-vision-ministry-rows): whole-row link
   targets at the 44px floor (Gate 1). */
.ministry-rows { max-width: 1200px; margin: 0 auto; padding: var(--rhythm-zone) var(--rhythm-gutter) 0; }
.ministry-rows__title {
    font-size: var(--fs-h2) !important; font-weight: 700; letter-spacing: -0.01em;
    color: var(--ink-2); margin: 0 0 var(--rhythm-list);
}
.ministry-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 44px; padding: var(--rhythm-row-pad); margin-bottom: var(--rhythm-list);
    border-radius: var(--radius); border: 1px solid var(--rule-2);
    background: var(--card); text-decoration: none; color: var(--ink-2);
    transition: border-color 150ms ease-out, background 150ms ease-out;
}
.ministry-row:hover { border-color: var(--accent); background: var(--card-2); }
.ministry-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ministry-row__label { font-size: 1rem; font-weight: 600; color: var(--ink); }
.ministry-row__text { font-size: 0.875rem; color: var(--ink-3); }
.ministry-row__chevron {
    flex: none;
    --sds-c-icon-color-foreground-default: var(--ink-4);
    --slds-c-icon-color-foreground-default: var(--ink-4);
}
.ministry-row__chevron .slds-icon { fill: var(--ink-4); }

/* Zone titles authored in Builder rich text (e.g. "Announcements &
   Resources") share the More-areas zone-label voice, and the same 1200px
   centered container + side gutter as .ministry-rows so the heading's left
   edge lines up with the tile list above it (desktop polish 2026-07-06). */
.zone-title {
    font-size: var(--fs-h2) !important; font-weight: 700; letter-spacing: -0.01em;
    color: var(--ink-2);
    max-width: 1200px; margin: 0 auto var(--rhythm-list);
    padding: var(--rhythm-zone) var(--rhythm-gutter) 0;
}

/* Home "Announcements & Resources" content (authenticatedHome only —
   forceCommunity:dynamicCollection + workspacesList appear on no other view,
   grep-verified). The Home - Authenticated layout is fixed-width
   (isPageWidthFixed) so these Builder sections cap at the 1200px home
   container; this adds the same --rhythm-gutter so their left/right edges
   line up with .ministry-rows / .mission-grid instead of sitting flush to the
   container edge. Uses the proven .comm-layout-column:has() hook (see §2). */
.siteforceContentArea .comm-layout-column:has(.forceCommunityDynamicCollection),
.siteforceContentArea .comm-layout-column:has(.forceCommunityWorkspacesList) {
    padding-left: var(--rhythm-gutter);
    padding-right: var(--rhythm-gutter);
}

/* Content clearance: the last row clears bar + FAB + safe-area (rhythm
   contract §D; 144px = 56 bar + 16 lift + 56 FAB + 16 breathing). Desktop
   gets the §3.5 layout.page bottom padding (96px) so the final zone never
   crowds the viewport. */
@media (max-width: 860px) {
    .siteforceContentArea { padding-bottom: var(--rhythm-clearance); }
}
@media (min-width: 861px) {
    .siteforceContentArea { padding-bottom: 96px; }
}

/* Fluid-width guard: with isPageWidthFixed=false the content region spans
   the viewport; standard CPT content columns keep a readable measure per
   layout.page metrics (DESIGN_SYSTEM.md §3.5) without fighting full-bleed
   components (§4.8), which break out on their own. */
.siteforceContentArea .comm-layout-column { min-width: 0; }

/* ── §9 additions round 2 (2026-07-05): console tabs labeled on mobile,
      serif display mapping for portal headings, schedule-title wrap ──── */

/* Labeled console tabs ≤767px: the §9a rule hid .tab-label on phones,
   leaving an icon-only bar (spec §8.2). Override: icon-over-label stacks,
   44px touch floor, tab row scrolls horizontally if five don't fit. */
@media (max-width: 767px) {
    c-tab-set .tab-label { display: inline !important; font-size: 10px; letter-spacing: 0.02em; }
    c-tab-set .tabBtn,
    c-tab-set .tab-btn,
    c-tab-set [role="tab"] {
        flex-direction: column !important;
        gap: 2px;
        min-height: 44px;
        padding: 6px 6px !important;
    }
    c-tab-set [role="tab"] > span { flex-direction: column !important; gap: 2px; }
    c-tab-set [role="tab"] lightning-icon { margin-right: 0 !important; }
    c-tab-set [role="tablist"] { overflow-x: auto; }
}

/* Family display type on the portal's own display headings (§3.4 rule:
   display font on heading/display selectors — these classes are the Vision
   Portal's equivalents of the KJS section/cert titles). */
body .slds .ministry-title,
.ministry-title,
.tile-title {
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
}

/* Group-card titles wrap on phones instead of truncating ("Federation D…"). */
@media (max-width: 768px) {
    c-program-schedule-card .schedule-title { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
}

/* ── §9 additions round 3 (2026-07-05): net-list console card rows ─────
      c-hierarchical-net-list-console — the tree-grid replacement. Rows are
      whole-row targets (§4.7), indented by depth, no horizontal scroll. */
c-hierarchical-net-list-console .vnl { max-width: 900px; margin: 0 auto; padding: 8px 0 24px; display: block; }
c-hierarchical-net-list-console .vnl__title { font-family: var(--font-display); font-size: 28px !important; font-weight: 500 !important; letter-spacing: -0.02em; margin: 0 0 14px; }
c-hierarchical-net-list-console .vnl__filters { background: var(--card-2); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 10px; }
c-hierarchical-net-list-console .vnl__filters-toggle { padding: 12px 14px; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style-position: inside; }
c-hierarchical-net-list-console .vnl__filters-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
c-hierarchical-net-list-console .vnl__filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }
c-hierarchical-net-list-console .vnl__filter-actions .btn { min-height: 44px; }
c-hierarchical-net-list-console .vnl__search { margin-bottom: 12px; }
c-hierarchical-net-list-console .vnl__search .input { min-height: 44px; font-size: 16px; }
c-hierarchical-net-list-console .vnl__state { padding: 32px 16px; text-align: center; color: var(--ink-4); position: relative; min-height: 60px; }
c-hierarchical-net-list-console .vnl__empty { border-radius: var(--radius-lg); font-size: 14px; }
c-hierarchical-net-list-console .vnl__list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
c-hierarchical-net-list-console .vnl__row { border-bottom: 1px solid var(--rule); }
c-hierarchical-net-list-console .vnl__row:last-child { border-bottom: 0; }
c-hierarchical-net-list-console .vnl__row--d1 > * { padding-left: 28px !important; }
c-hierarchical-net-list-console .vnl__row--d2 > * { padding-left: 44px !important; }
c-hierarchical-net-list-console .vnl__row--d3 > * { padding-left: 60px !important; }
c-hierarchical-net-list-console .vnl__row--d4 > * { padding-left: 76px !important; }
c-hierarchical-net-list-console .vnl__grouprow { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 10px 14px; background: var(--card-2); border: 0; cursor: pointer; font-family: var(--font-ui); text-align: left; transition: background 120ms; }
c-hierarchical-net-list-console .vnl__grouprow:hover { background: var(--accent-soft); }
c-hierarchical-net-list-console .vnl__chevron { display: inline-block; color: var(--ink-3); font-size: 12px; transition: transform 120ms; flex-shrink: 0; }
c-hierarchical-net-list-console .vnl__chevron.is-open { transform: rotate(90deg); }
c-hierarchical-net-list-console .vnl__gicon { --sds-c-icon-color-foreground-default: var(--accent); --slds-c-icon-color-foreground-default: var(--accent); flex-shrink: 0; }
c-hierarchical-net-list-console .vnl__gname { font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--ink); flex: 1; min-width: 0; }
c-hierarchical-net-list-console .vnl__gcount { background: var(--accent-soft); color: var(--ink-2); border-radius: 999px; font-size: 13px; font-weight: 600; padding: 2px 9px; flex-shrink: 0; }
c-hierarchical-net-list-console .vnl__memberrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 14px; }
c-hierarchical-net-list-console .vnl__mname { font-size: 14px; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }

/* ── §9 additions round 4 (2026-07-05): missing-reports console ────────
      c-hierarchical-missing-reports-console — tree-grid replacement. Same
      row grammar as the net-list console plus leaf action cards with
      overdue dots (colors from the semantic tokens; thresholds come from
      Missing_Report_Alert_Config__mdt server-side). */
c-hierarchical-missing-reports-console .vmr { max-width: 900px; margin: 0 auto; padding: 8px 0 24px; display: block; }
c-hierarchical-missing-reports-console .vmr__title { font-family: var(--font-display); font-size: 28px !important; font-weight: 500 !important; letter-spacing: -0.02em; margin: 0 0 14px; }
c-hierarchical-missing-reports-console .vmr__filters { background: var(--card-2); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 10px; }
c-hierarchical-missing-reports-console .vmr__filters-toggle { padding: 12px 14px; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
c-hierarchical-missing-reports-console .vmr__filters-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
c-hierarchical-missing-reports-console .vmr__filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
c-hierarchical-missing-reports-console .vmr__filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }
c-hierarchical-missing-reports-console .vmr__filter-actions .btn { min-height: 44px; }
c-hierarchical-missing-reports-console .vmr__filters .input,
c-hierarchical-missing-reports-console .vmr__filters select { min-height: 44px; }
c-hierarchical-missing-reports-console .vmr__search { margin-bottom: 12px; }
c-hierarchical-missing-reports-console .vmr__search .input { min-height: 44px; font-size: 16px; }
c-hierarchical-missing-reports-console .vmr__state { padding: 32px 16px; text-align: center; color: var(--ink-4); position: relative; min-height: 60px; }
c-hierarchical-missing-reports-console .vmr__empty { border-radius: var(--radius-lg); font-size: 14px; }
c-hierarchical-missing-reports-console .vmr__list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
c-hierarchical-missing-reports-console .vmr__row { border-bottom: 1px solid var(--rule); }
c-hierarchical-missing-reports-console .vmr__row:last-child { border-bottom: 0; }
c-hierarchical-missing-reports-console .vmr__row--d1 > *:not(.vmr__leaf) { padding-left: 28px !important; }
c-hierarchical-missing-reports-console .vmr__row--d2 > *:not(.vmr__leaf) { padding-left: 44px !important; }
c-hierarchical-missing-reports-console .vmr__row--d1 > .vmr__leaf { padding-left: 28px; }
c-hierarchical-missing-reports-console .vmr__row--d2 > .vmr__leaf { padding-left: 44px; }
c-hierarchical-missing-reports-console .vmr__row--d3 > .vmr__leaf { padding-left: 60px; }
c-hierarchical-missing-reports-console .vmr__grouprow { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 10px 14px; background: var(--card-2); border: 0; cursor: pointer; font-family: var(--font-ui); text-align: left; transition: background 120ms; }
c-hierarchical-missing-reports-console .vmr__grouprow--leader { background: var(--card); }
c-hierarchical-missing-reports-console .vmr__grouprow:hover { background: var(--accent-soft); }
c-hierarchical-missing-reports-console .vmr__chevron { display: inline-block; color: var(--ink-3); font-size: 12px; transition: transform 120ms; flex-shrink: 0; }
c-hierarchical-missing-reports-console .vmr__chevron.is-open { transform: rotate(90deg); }
c-hierarchical-missing-reports-console .vmr__gicon { --sds-c-icon-color-foreground-default: var(--accent); --slds-c-icon-color-foreground-default: var(--accent); flex-shrink: 0; }
c-hierarchical-missing-reports-console .vmr__gname { font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--ink); flex: 1; min-width: 0; }
c-hierarchical-missing-reports-console .vmr__gcount { background: var(--accent-soft); color: var(--ink-2); border-radius: 999px; font-size: 13px; font-weight: 600; padding: 2px 9px; flex-shrink: 0; }
c-hierarchical-missing-reports-console .vmr__leaderrow { display: flex; align-items: stretch; }
c-hierarchical-missing-reports-console .vmr__leaderrow .vmr__grouprow { flex: 1; min-width: 0; }
c-hierarchical-missing-reports-console .vmr__leader-view { min-width: 44px; border: 0; border-left: 1px solid var(--rule); background: var(--card); cursor: pointer; --sds-c-icon-color-foreground-default: var(--ink-3); --slds-c-icon-color-foreground-default: var(--ink-3); }
c-hierarchical-missing-reports-console .vmr__leader-view:hover { background: var(--accent-soft); --sds-c-icon-color-foreground-default: var(--accent); --slds-c-icon-color-foreground-default: var(--accent); }
c-hierarchical-missing-reports-console .vmr__leaf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
c-hierarchical-missing-reports-console .vmr__leaf-main { flex: 1; min-width: 0; }
c-hierarchical-missing-reports-console .vmr__leaf-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
c-hierarchical-missing-reports-console .vmr__leaf-title { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
c-hierarchical-missing-reports-console .vmr__leaf-sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; overflow-wrap: anywhere; }
c-hierarchical-missing-reports-console .vmr__leaf-action { flex-shrink: 0; min-height: 44px; }
c-hierarchical-missing-reports-console .vmr__overdue { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
c-hierarchical-missing-reports-console .vmr__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--ink-4); display: inline-block; }
c-hierarchical-missing-reports-console .vmr__overdue--red { color: var(--color-error-text); }
c-hierarchical-missing-reports-console .vmr__overdue--red .vmr__dot { background: var(--color-error-text); }
c-hierarchical-missing-reports-console .vmr__overdue--yellow { color: var(--color-warning-text); }
c-hierarchical-missing-reports-console .vmr__overdue--yellow .vmr__dot { background: #f59e0b; }
c-hierarchical-missing-reports-console .vmr__overdue--neutral .vmr__dot { background: var(--ink-4); }
@media (max-width: 640px) {
    c-hierarchical-missing-reports-console .vmr__leaf { flex-direction: column; align-items: stretch; }
    c-hierarchical-missing-reports-console .vmr__leaf-action { width: 100%; }
}

/* ── §9 additions round 5 (2026-07-05): roster search + show-more ────── */
c-discipleship-roster-management .roster-search { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
c-discipleship-roster-management .roster-search .input { flex: 1; min-width: 200px; min-height: 44px; font-size: 16px; }
c-discipleship-roster-management .roster-search__count { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
c-discipleship-roster-management .roster-showmore { text-align: center; padding: 12px 0 4px; }
c-discipleship-roster-management .roster-showmore .btn { min-height: 44px; min-width: 160px; }

/* ── §9 additions round 6 (2026-07-05, batch 1 change A): shell type scale
      + header surface. The §0 h1/h2 normalizers had no mobile clamp, so
      flow/utility page titles rendered at 2.3rem and wrapped at 375px.
      §4.9 scale: page titles 26px on phones (the cls__title 36→26 and
      section-title 26px precedents); h2 20px (catgroup title). Normalized
      headings also join the family display face (§3.4 application rule). */
h1:not(.slds-page-header__title):not(.hero__hi):not(.cert-hero__name):not(.cls__title) {
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
}
@media (max-width: 768px) {
    h1:not(.slds-page-header__title):not(.hero__hi):not(.cert-hero__name):not(.cls__title) { font-size: 1.625rem !important; }
    h2 { font-size: 1.25rem !important; }
}
/* Header region: card surface + hairline, whatever the layout attr says
   (belt-and-suspenders with the citizen.json headerBgColor fix). */
.forceCommunityThemeHeaderCompact, .themeHeaderInner { background: var(--card) !important; border-bottom: 1px solid var(--rule); }

/* ── §9 additions round 7 (2026-07-05, batch-1 follow-up finding 3):
      header brand lockup. The starter header renders the 300px branding
      asset at ~150px; the §5 pattern is a compact 40px mark + wordmark
      (KJS brand__logo precedent: 38px). !important outranks the
      platform's inline sizing. */
.forceCommunityThemeHeaderCompact .forceCommunityThemeLogo,
.forceCommunityThemeHeaderCompact .themeLogo {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}
.forceCommunityThemeHeaderCompact .forceCommunityThemeLogo,
.forceCommunityThemeHeaderCompact .forceCommunityThemeLogo .logoImage,
.forceCommunityThemeHeaderCompact .themeLogo img,
.forceCommunityThemeHeaderCompact .logoImage {
    height: 40px !important;
    max-height: 40px !important;
    width: 40px !important;
    max-width: 40px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0;
}
/* Wordmark beside the mark on wide viewports (vision.name treatment,
   §6.2); mobile keeps the clean centered mark alone. */
@media (min-width: 769px) {
    .forceCommunityThemeHeaderCompact .forceCommunityThemeLogo::after,
    .forceCommunityThemeHeaderCompact .themeLogo::after {
        content: "Vision";
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--ink);
        line-height: 1;
        white-space: nowrap;
    }
    /* The multi-spelling coverage above double-paints when the platform
       nests BOTH shapes (div.themeLogo > a.forceCommunityThemeLogo — the
       live markup): two identical "Vision" strings 4px apart rendered as
       garbled interleaved glyphs. When nested, the wrapper's wordmark
       wins and the inner anchor stands down; standalone shapes keep
       theirs. (No :has() guard here — an engine without it would drop
       the whole selector list and lose the wordmark everywhere.) */
    .forceCommunityThemeHeaderCompact .themeLogo .forceCommunityThemeLogo::after {
        content: none;
    }
}

/* ── §9 additions round 8 (2026-07-05, batch 2 A+B): header nav + one
      utility-icon system. ──────────────────────────────────────────────
   A: the bottom tab bar is the navigation on phones — hide the collapsed
   themeNav trigger (hamburger) ≤768px. Desktop keeps the horizontal nav
   (its fate is an E-proposal decision point). Multi-spelling coverage,
   same pattern as the logo fix. */
@media (max-width: 768px) {
    .forceCommunityThemeHeaderCompact .forceCommunityThemeNav,
    .forceCommunityThemeHeaderCompact .themeNav,
    .forceCommunityThemeHeaderCompact button[class*="menuTrigger" i],
    .forceCommunityThemeHeaderCompact button[class*="hamburger" i],
    .forceCommunityThemeHeaderCompact [class*="navTrigger" i] {
        display: none !important;
    }
}
/* B: one utility-icon system (search / bell / profile menu).
   Tokens: hit area 44px (§4.7 floor); glyph 20px; rest color.text.muted
   --ink-3 #837663; hover/active color.brand.accent --accent #0d73bb on
   an --accent-soft pill; spacing space.2 8px. Standard components accept
   color/size via the SLDS icon hooks; glyph FILL style is fixed per
   component (noted limitation — bell stays a filled glyph). */
.forceCommunityThemeHeaderCompact .themeUtils .themeUtil,
.forceCommunityThemeHeaderCompact .themeUtils .slds-button,
.forceCommunityThemeHeaderCompact .forceCommunityThemeSearch button,
.forceCommunityThemeHeaderCompact .forceCommunityNotifications button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: 8px !important;
    border-radius: 999px;
    transition: background 120ms;
    --sds-c-icon-color-foreground-default: var(--ink-3) !important;
    --slds-c-icon-color-foreground-default: var(--ink-3) !important;
    --sds-c-icon-color-foreground: var(--ink-3) !important;
}
.forceCommunityThemeHeaderCompact .themeUtils .slds-button:hover,
.forceCommunityThemeHeaderCompact .themeUtils .themeUtil:hover {
    background: var(--accent-soft) !important;
    --sds-c-icon-color-foreground-default: var(--accent) !important;
    --slds-c-icon-color-foreground-default: var(--accent) !important;
    --sds-c-icon-color-foreground: var(--accent) !important;
}
.forceCommunityThemeHeaderCompact .themeUtils .slds-button__icon,
.forceCommunityThemeHeaderCompact .themeUtils .slds-icon {
    width: 20px !important;
    height: 20px !important;
}
/* Notification counter dot keeps the accent, not SLDS red-orange */
.forceCommunityThemeHeaderCompact .themeUtils .countContainer,
.forceCommunityThemeHeaderCompact .themeUtils .slds-notification-badge {
    background: var(--accent) !important;
}
/* Avatar in the profile menu: consistent 32px circle inside the 44px hit */
.forceCommunityThemeHeaderCompact .themeUtils .themeProfileMenu img,
.forceCommunityThemeHeaderCompact .themeUtils .uiImage,
.forceCommunityThemeHeaderCompact .themeUtils .profileIcon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px;
}
/* C: settings page surface — keep the stock userSettingsCustomizable on
   the cream system instead of raw template chrome (full redesign is a
   future-batch item, noted). */
.selfServiceUserSettings, .forceCommunityUserSettingsCustomizable {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 8px 16px;
}

/* ── §9 additions round 9 (2026-07-05, batch-2 screenshot feedback):
      utility-icon optical unification + ministry-tile link states. ──── */
/* Search/bell glyphs: enforce the resting ink on the raw SVGs too (the
   icon hooks don't reach every standard component's fill). */
.forceCommunityThemeHeaderCompact .themeUtils svg,
.forceCommunityThemeHeaderCompact .themeUtils .slds-icon svg {
    fill: var(--ink-3) !important;
}
.forceCommunityThemeHeaderCompact .themeUtils .slds-button:hover svg {
    fill: var(--accent) !important;
}
/* Avatar: the default gray photo placeholder read as a disabled control
   next to 20px glyphs — normalize to a 28px circle with a hairline ring
   on the card surface so its optical weight matches the glyph row. */
.forceCommunityThemeHeaderCompact .themeUtils .themeProfileMenu img,
.forceCommunityThemeHeaderCompact .themeUtils .uiImage,
.forceCommunityThemeHeaderCompact .themeUtils .profileIcon,
.forceCommunityThemeHeaderCompact .themeUtils img[class*="profile" i],
.forceCommunityThemeHeaderCompact .themeUtils .forceCommunityCustomizableUserProfileMenu img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 999px;
    border: 1px solid var(--rule-2);
    background: var(--card-2);
    box-sizing: border-box;
}
/* Equalized gaps: no stray trailing padding on the profile menu button */
.forceCommunityThemeHeaderCompact .themeUtils .themeUtil:last-child,
.forceCommunityThemeHeaderCompact .themeUtils .slds-button:last-child {
    margin-right: 0 !important;
    padding-right: 0 !important;
}
/* Ministry tiles: pin link states so visited/hover never fall back to
   browser link styling — titles hold the accent (§6.2) in every state,
   underline suppressed on the whole tile subtree. */
.ministry-grid a.ministry-tile,
.ministry-grid a.ministry-tile:visited,
.ministry-grid a.ministry-tile:hover,
.ministry-grid a.ministry-tile:focus {
    text-decoration: none !important;
}
.ministry-grid a.ministry-tile .tile-title,
.ministry-grid a.ministry-tile:visited .tile-title {
    color: var(--accent) !important;
    text-decoration: none !important;
}
.ministry-grid a.ministry-tile:hover .tile-title {
    color: var(--accent-2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §9 round 10 (2026-07-06): rhythm + type-floor + motion polish pass.
   Contracts: docs/contracts/RHYTHM_TYPE_MOTION.md. Tokens live here; the
   home-zone rules earlier in §9 consume them. The KJS-export region (§0-§8)
   is untouched; every restore below out-specifies or out-orders a
   normalizer instead of editing it. Motion rules: opacity/transform only,
   no layout shift, never gates input; ONE reduced-motion block neutralizes
   everything.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* vertical rhythm (§3.5 scale members only) */
    --rhythm-top: 1rem;
    --rhythm-zone: 1.5rem;
    --rhythm-list: 0.75rem;
    --rhythm-card-pad: 1.25rem;
    --rhythm-row-pad: 0.75rem 1rem;
    --rhythm-gutter: 1rem;
    /* Measured from .bottomnav: 20px icon + 4px gap + 13px/1.2 label + 2x10px
       padding + 1px border ≈ 62px; 64px keeps a hair of clearance. Was a stale
       56px that nothing consumed while sheet offsets hardcoded 64. */
    --bottomnav-height: 64px;
    --rhythm-clearance: calc(env(safe-area-inset-bottom, 0px) + 144px);
    /* motion tokens */
    --motion-duration-entrance: 400ms;
    --motion-duration-sheet: 280ms;
    --motion-duration-exit: 220ms;
    /* press/hover feedback; matches the documented 120ms button transition */
    --motion-duration-feedback: 120ms;
    /* per-item offset when a series reveals together (chart bars) */
    --motion-delay-data-stagger: 50ms;
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
}

/* Type floors (§4.9): mobile greeting size — the stacked selector's
   specificity (0,4,1) TIES the §0 base normalizer and the round-6 mobile
   clamp; being last in the file, it wins. Do not simplify the selector. */
@media (max-width: 768px) {
    /* A11y pass: pinned to ~28px (1.65rem x 17px root) so the +6% root bump
       does NOT inflate the greeting into a second line at 375px for typical
       names. Display headings take only the modest root lift elsewhere. */
    h1.home-greeting.home-greeting.home-greeting.home-greeting { font-size: 1.65rem !important; }
}
/* Page-greeting parity (2026-07-26): the Evangelize (.page-greet, view-JSON
   htmlBlock), Affirm (.vls__title) and Leader (.lw-h1) page titles carry the
   home greeting's exact type metrics so the title line never resizes or
   jumps when switching tabs. Same quadruple-class trick as the greeting pin
   above to out-tie the round-6 mobile clamp; line-height matches the
   greeting's 1.15 at every width. The 3px top-margin delta on .page-greet
   lands the Evangelize h1 at the greeting's exact y: inner-page content
   regions start 3px higher than the home layout's. */
h1.vls__title.vls__title.vls__title, h1.lw-h1.lw-h1.lw-h1,
h1.page-greet.page-greet.page-greet { line-height: 1.15 !important; }
h1.page-greet.page-greet.page-greet {
    margin: calc(var(--rhythm-top) + 3px) 0 0 !important;
}
@media (max-width: 768px) {
    h1.vls__title.vls__title.vls__title.vls__title,
    h1.lw-h1.lw-h1.lw-h1.lw-h1,
    h1.page-greet.page-greet.page-greet.page-greet { font-size: 1.65rem !important; }
}
/* Tab-bar labels: raised to the 13px floor (a11y pass). Kept as px (not a rem
   token) to keep 4 tabs from wrapping at 375px — the wrap-sensitive exception. */
@media (max-width: 860px) {
    .bottomnav__btn { font-size: 13px; }
}
/* Greeting emoji: optical size, no line-box inflation. */
.home-greeting__emoji { font-size: 0.8em; line-height: 1; display: inline-block; }

/* Quick-capture sheet type restores and capture-confirmation parity. The
   success headings share Affirm's 1.25rem confirmation treatment. Explicit
   component hosts cross synthetic shadow from every mount and beat the global
   h2 normalizer; the family restore also beats the later Serif overlay. */
body .slds .qc-panel .qc-title { font-size: 1.6rem !important; font-family: var(--font-display) !important; }
c-vision-quick-capture .qc-success h2,
c-vision-evangelize-form .ev-success h2 { font-size: 1.25rem !important; }
c-vision-quick-capture .qc-success h2 { font-family: var(--font-display) !important; }
.qc-eyebrow { font-size: var(--fs-eyebrow) !important; }
.qc-field span { font-size: var(--fs-eyebrow) !important; }

/* ── Motion: keyframes (compositor-friendly only) ──────────────────────── */
@keyframes vision-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vision-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vision-fade-out { to { opacity: 0; } }
@keyframes vision-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes vision-sheet-down { to { transform: translateY(100%); } }
@keyframes vision-dialog-in { from { opacity: 0; transform: translate(-50%, -47%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes vision-dialog-out { to { opacity: 0; transform: translate(-50%, -47%); } }

/* Greeting entrance: visionHomeHeader holds .is-pending until the User wire
   emits (final text before first visibility — no double-pop), then swaps to
   .is-in. Plays per home mount (Checkpoint A asks about once-per-session). */
.home-greeting.is-pending { opacity: 0; }
.home-greeting.is-in { animation: vision-rise var(--motion-duration-entrance) var(--motion-ease-out); }

/* Quick-capture sheet entrance/exit. Entrance rides the mount (the sheet is
   if:true-mounted per open). Exit rides the .qc-closing host class set by
   visionBottomNav's two-phase close (its 220ms MUST equal
   --motion-duration-exit). Desktop keyframes compose the panel's own
   centering transform so it never un-centers. Fields stay focusable from
   frame one. visionQuickCapture itself: zero code changes. */
c-vision-quick-capture .qc-backdrop { animation: vision-fade-in var(--motion-duration-sheet) ease-out; }
c-vision-quick-capture.qc-closing .qc-backdrop { animation: vision-fade-out var(--motion-duration-exit) var(--motion-ease-in) forwards; }
@media (max-width: 768px) {
    c-vision-quick-capture .qc-panel { animation: vision-sheet-up var(--motion-duration-sheet) var(--motion-ease-out); }
    c-vision-quick-capture.qc-closing .qc-panel { animation: vision-sheet-down var(--motion-duration-exit) var(--motion-ease-in) forwards; }
}
@media (min-width: 769px) {
    c-vision-quick-capture .qc-panel { animation: vision-dialog-in var(--motion-duration-sheet) var(--motion-ease-out); }
    c-vision-quick-capture.qc-closing .qc-panel { animation: vision-dialog-out var(--motion-duration-exit) var(--motion-ease-in) forwards; }
}

/* ─────────────────────────────────────────────────────────────────────────
   9. round 11 (2026-07-06): Affirmation console (c:visionAffirmationConsole).
   The component ships :host{display:block} only — all styling lives here,
   keyed to the .vac* class names, mirroring the .vnl/.vmr card-first console
   grammar. Macro rhythm (top/zone/list/card-pad/row-pad/gutter) resolves to
   --rhythm-* tokens; §4.9 type floors + 44px targets throughout; error uses
   --color-error-*; NO new animations (the .vac__memberrow hover transition is
   neutralized by the reduced-motion block below). Inputs lean on base .input.
   ───────────────────────────────────────────────────────────────────────── */
c-vision-affirmation-console .vac { max-width: 900px; margin: 0 auto; padding: var(--rhythm-top) var(--rhythm-gutter) 0; display: block; }
c-vision-affirmation-console .vac__head { margin: 0; }
c-vision-affirmation-console .vac__title { font-family: var(--font-display); font-size: 28px !important; font-weight: 500 !important; letter-spacing: -0.02em; margin: 0; color: var(--ink); }

c-vision-affirmation-console .vac__section { margin-top: var(--rhythm-zone); }
c-vision-affirmation-console .vac__section-head { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--rhythm-list); }
c-vision-affirmation-console .vac__section-title { font-family: var(--font-ui); font-size: var(--fs-h2); font-weight: 700; color: var(--ink-2); }
c-vision-affirmation-console .vac__count { background: var(--accent-soft); color: var(--ink-2); border-radius: 999px; font-size: 13px; font-weight: 600; padding: 2px 9px; flex-shrink: 0; }

c-vision-affirmation-console .vac__list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
c-vision-affirmation-console .vac__row { border-bottom: 1px solid var(--rule); }
c-vision-affirmation-console .vac__row:last-child { border-bottom: 0; }
c-vision-affirmation-console .vac__memberrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: var(--rhythm-row-pad); background: var(--card); border: 0; cursor: pointer; text-align: left; font-family: var(--font-ui); transition: background 120ms; }
c-vision-affirmation-console .vac__memberrow:hover { background: var(--accent-soft); }
c-vision-affirmation-console .vac__mmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
c-vision-affirmation-console .vac__mname { font-size: var(--fs-body); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
c-vision-affirmation-console .vac__mphone { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
c-vision-affirmation-console .vac__section-empty { padding: var(--rhythm-row-pad); color: var(--ink-2); font-size: 14px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); }

c-vision-affirmation-console .vac__state { padding: 32px 16px; text-align: center; min-height: 60px; position: relative; }
c-vision-affirmation-console .vac__empty { margin-top: var(--rhythm-zone); border-radius: var(--radius-lg); padding: 32px 20px; color: var(--ink-2); font-size: var(--fs-body); line-height: 1.6; text-align: center; }
c-vision-affirmation-console .vac__empty p { margin: 0 0 12px; }
c-vision-affirmation-console .vac__empty p:last-child { margin-bottom: 0; }
c-vision-affirmation-console .vac__error { margin: var(--rhythm-list) 0; padding: 12px 14px; border-radius: var(--radius); background: var(--color-error-background); border: 1px solid var(--color-error-border); color: var(--color-error-text); font-size: 14px; }

/* (pre-visionDialog .vac__modal/.vac__dialog rules removed 2026-08-07 — the affirm surface
   now renders through c-vision-dialog; positioning lives in visionDialog.css +
   visionAffirmationConsole.css custom props) */
c-vision-affirmation-console .vac__dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: var(--rhythm-card-pad); border-bottom: 1px solid var(--rule); }
c-vision-affirmation-console .vac__dialog-title { font-family: var(--font-display); font-size: 22px !important; font-weight: 500 !important; margin: 0; color: var(--ink); }
c-vision-affirmation-console .vac__dialog-body { padding: var(--rhythm-card-pad); display: flex; flex-direction: column; gap: var(--rhythm-list); }
c-vision-affirmation-console .vac__field { display: flex; flex-direction: column; gap: 4px; }
c-vision-affirmation-console .vac__field label { font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
c-vision-affirmation-console .vac__field .input { height: auto; min-height: 44px; font-size: 16px; }
c-vision-affirmation-console .vac__field textarea.input { min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
c-vision-affirmation-console .vac__panel-error { padding: 10px 12px; border-radius: var(--radius); background: var(--color-error-background); border: 1px solid var(--color-error-border); color: var(--color-error-text); font-size: 14px; }
c-vision-affirmation-console .vac__dialog-foot { display: flex; gap: var(--rhythm-list); padding: var(--rhythm-card-pad); border-top: 1px solid var(--rule); flex-wrap: wrap; }
c-vision-affirmation-console .vac__dialog-foot .btn { min-height: 44px; flex: 1 1 auto; }

/* ─────────────────────────────────────────────────────────────────────────
   9. round 12 (2026-07-06): Leader console reporting family (C11-C14) rebuild.
   Renderer swapped only; controllers (PMC calls incl. the C13/C14 writes) are
   unchanged; components keep :host{display:block}. Shared leader-modal chrome +
   sections live here (C13 roster + C12 cards appended as those rebuild). Rhythm
   tokens; §4.9 floors; 44px; NO new animations (hover transitions ride the
   reduced-motion block below). Bare .lc-* selectors (leader-console namespace,
   like .btn/.pill).
   ───────────────────────────────────────────────────────────────────────── */
.lc-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.lc-dialog { background: var(--card); width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.lc-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: var(--rhythm-card-pad); border-bottom: 1px solid var(--rule); }
.lc-dialog__title { font-family: var(--font-display); font-size: 22px !important; font-weight: 500 !important; margin: 0; color: var(--ink); }
.lc-dialog__sub { font-size: 14px; color: var(--ink-2); margin: 2px 0 0; }
.lc-dialog__meta { font-size: var(--fs-meta); color: var(--ink-3); margin: 2px 0 0; }
.lc-dialog__body { padding: var(--rhythm-card-pad); display: flex; flex-direction: column; gap: var(--rhythm-zone); }
.lc-section { display: flex; flex-direction: column; gap: var(--rhythm-list); }
.lc-section__title { font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.lc-section__sub { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-4); margin-left: 6px; }
.lc-dialog__foot { display: flex; gap: var(--rhythm-list); justify-content: flex-end; align-items: center; padding: var(--rhythm-card-pad); border-top: 1px solid var(--rule); flex-wrap: wrap; }
.lc-dialog__foot .btn { min-height: 44px; }
/* C13 attendance roster + notices */
.lc-note { font-size: 14px; color: var(--ink-2); margin: 0; }
.lc-warn { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: #92400e; background: var(--warn-soft); border: 1px solid #fde68a; border-radius: var(--radius); padding: 8px 12px; }
.lc-roster { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); }
.lc-roster__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: var(--rhythm-row-pad); border-bottom: 1px solid var(--rule); }
.lc-roster__row:last-child { border-bottom: 0; }
.lc-roster__name { font-size: var(--fs-body); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.lc-roster__state { padding: 16px; text-align: center; color: var(--ink-2); font-size: 14px; }
.lc-att { display: flex; gap: 6px; flex-shrink: 0; }
.lc-att__opt { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; position: relative; }
.lc-att__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.lc-att__pill { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--rule-2); color: var(--ink-2); background: var(--card); }
.lc-att__radio:checked + .lc-att__pill--present { background: var(--color-success-background); border-color: var(--color-success-border); color: var(--color-success-text); }
.lc-att__radio:checked + .lc-att__pill--absent { background: var(--color-error-background); border-color: var(--color-error-border); color: var(--color-error-text); }
.lc-att__radio:focus + .lc-att__pill { box-shadow: 0 0 0 2px var(--accent-soft); }
@media (min-width: 769px) {
    .lc-modal { align-items: center; padding: 16px; }
    .lc-dialog { border-radius: var(--radius-xl); }
}

/* ── §9 additions round 13 (2026-07-06): offering-bag oversight console ──
      c-offering-bag-oversight-console (C18) — Stage-3 tree-grid replacement.
      Same NET → LEADER → BAG row/group grammar as the net-list (.vnl) and
      missing-reports (.vmr) consoles; bag leaves render as label/value meta
      cards (read-only oversight; monetary fields excluded by design). Depth:
      NET d0, LEADER d1, BAG leaf d2. Reuses global mono-chip / pill / btn. */
c-offering-bag-oversight-console .vbo { max-width: 900px; margin: 0 auto; padding: 8px 0 24px; display: block; }
c-offering-bag-oversight-console .vbo__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
c-offering-bag-oversight-console .vbo__title { font-family: var(--font-display); font-size: 28px !important; font-weight: 500 !important; letter-spacing: -0.02em; margin: 0; }
c-offering-bag-oversight-console .vbo__actions { display: flex; gap: 8px; flex-wrap: wrap; }
c-offering-bag-oversight-console .vbo__actions .btn { min-height: 44px; }
c-offering-bag-oversight-console .vbo__list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
c-offering-bag-oversight-console .vbo__row { border-bottom: 1px solid var(--rule); }
c-offering-bag-oversight-console .vbo__row:last-child { border-bottom: 0; }
c-offering-bag-oversight-console .vbo__row--d1 > *:not(.vbo__leaf) { padding-left: 28px !important; }
c-offering-bag-oversight-console .vbo__row--d1 > .vbo__leaf { padding-left: 28px; }
c-offering-bag-oversight-console .vbo__row--d2 > .vbo__leaf { padding-left: 44px; }
c-offering-bag-oversight-console .vbo__grouprow { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 10px 14px; background: var(--card-2); border: 0; cursor: pointer; font-family: var(--font-ui); text-align: left; transition: background 120ms; }
c-offering-bag-oversight-console .vbo__grouprow:hover { background: var(--accent-soft); }
c-offering-bag-oversight-console .vbo__chevron { display: inline-block; color: var(--ink-3); font-size: 12px; transition: transform 120ms; flex-shrink: 0; }
c-offering-bag-oversight-console .vbo__chevron.is-open { transform: rotate(90deg); }
c-offering-bag-oversight-console .vbo__gicon { --sds-c-icon-color-foreground-default: var(--accent); --slds-c-icon-color-foreground-default: var(--accent); flex-shrink: 0; }
c-offering-bag-oversight-console .vbo__gname { font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--ink); flex: 1; min-width: 0; }
c-offering-bag-oversight-console .vbo__gcount { background: var(--accent-soft); color: var(--ink-2); border-radius: 999px; font-size: 13px; font-weight: 600; padding: 2px 9px; flex-shrink: 0; }
c-offering-bag-oversight-console .vbo__leaf { padding: 12px 14px; }
c-offering-bag-oversight-console .vbo__leaf-head { margin-bottom: 8px; }
c-offering-bag-oversight-console .vbo__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; }
c-offering-bag-oversight-console .vbo__meta-item { min-width: 0; }
c-offering-bag-oversight-console .vbo__label { font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); margin: 0 0 2px; }
c-offering-bag-oversight-console .vbo__value { font-size: 14px; color: var(--ink); margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
    c-offering-bag-oversight-console .vbo__meta { grid-template-columns: 1fr; }
}

/* ── §9 additions round 14 (2026-07-06): leader console hub (IA redesign) ──
      c-program-management - the /group-management seven-tab scrolling strip is
      retired for a hub-and-spoke launcher (Checkpoint 1 APPROVED;
      historical contract: docs/archive/contracts/LeaderConsoleIA.md). Whole-row 44px launchers mirroring the
      "More ministries" grammar (.ministry-row floors) + a leading accent icon;
      a two-column card grid >=861px. Plus the shared in-page back row
      (c-leader-console-back) on every function page. Token-pure; no new
      animations (only the existing row hover transition idiom). */
c-program-management .lch { max-width: 1200px; margin: 0 auto; padding: var(--rhythm-zone) var(--rhythm-gutter) 0; display: block; }
c-program-management .lch__title { font-family: var(--font-display); font-size: 28px !important; font-weight: 500 !important; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--rhythm-list); }
c-program-management .lch__grid { display: flex; flex-direction: column; gap: var(--rhythm-list); }
c-program-management .lch__row {
    display: flex; align-items: center; gap: 0.875rem;
    min-height: 44px; padding: var(--rhythm-row-pad);
    border-radius: var(--radius); border: 1px solid var(--rule-2);
    background: var(--card); text-decoration: none; color: var(--ink-2);
    transition: border-color 150ms ease-out, background 150ms ease-out;
}
c-program-management .lch__row:hover { border-color: var(--accent); background: var(--card-2); }
c-program-management .lch__icon { flex: none; --sds-c-icon-color-foreground-default: var(--accent); --slds-c-icon-color-foreground-default: var(--accent); }
c-program-management .lch__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
c-program-management .lch__label { font-size: 1rem; font-weight: 600; color: var(--ink); }
c-program-management .lch__text { font-size: 0.875rem; color: var(--ink-3); }
c-program-management .lch__chevron { flex: none; --sds-c-icon-color-foreground-default: var(--ink-4); --slds-c-icon-color-foreground-default: var(--ink-4); }
c-program-management .lch__chevron .slds-icon { fill: var(--ink-4); }
@media (min-width: 861px) {
    c-program-management .lch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rhythm-list); }
}
c-leader-console-back .lcb { display: block; max-width: 1200px; margin: 0 auto; padding: var(--rhythm-top) calc(var(--rhythm-gutter) + 3.5px) 0; }
/* 2026-08-13 (Giovani): the member-page chip aligns with the leader
   function pages' chip (the default 1200px page frame above), so Back sits
   in the same spot on net-member and absenteeism. The former 720px pinning
   (2026-08-12) is retired; My Net no longer renders a back chip at all. */
/* Back chip (2026-07-26): the Student Portal watch-page back button's exact
   anatomy (44px chip, 8px gap, 8x14 padding, card surface, 15px/600, accent
   hover) with colors mapped to Vision's semantic tokens per the identity
   divergence map. */
c-leader-console-back .lcb__link {
    display: inline-flex; align-items: center; gap: 8px;
    box-sizing: border-box; min-height: 44px; padding: 8px 14px;
    border: 1px solid var(--rule-2); border-radius: var(--radius);
    background: var(--card); text-decoration: none;
    font-size: 15px; font-weight: 600; color: var(--ink);
    transition: border-color 150ms ease-out, background 150ms ease-out;
}
c-leader-console-back .lcb__link:hover { border-color: var(--accent); background: var(--accent-soft); }
c-leader-console-back .lcb__icon { flex: none; --sds-c-icon-color-foreground-default: currentColor; --slds-c-icon-color-foreground-default: currentColor; }
c-leader-console-back .lcb__icon svg { width: 18px; height: 18px; }

/* ── Motion: the ONE reduced-motion block (non-negotiable). 0.01ms + the
      keyframes' end states = instant final states; nothing stays hidden. ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   9. round 15 (2026-07-07): Net Pastor "My Net" home dashboard
   (c-vision-net-pulse, .vnp*). Trusted-aggregator payload rendered as three
   KPI tiles, movement cards with plain-words MoM, and a needs-attention
   sentence list. Card grammar + rhythm tokens + a11y floors (§4.9: body 17,
   secondary >= 14, nothing < 13); traffic lights reuse §3.3 tokens; NO new
   animations (reduced-motion block above governs). Renders only for pastors;
   sits between the greeting and the mission cards on authenticatedHome.
   Design: docs/NET_PASTOR_DASHBOARD_DESIGN.md.
   ───────────────────────────────────────────────────────────────────────── */
c-vision-net-pulse .vnp { max-width: 1200px; margin: 0 auto; padding: var(--rhythm-zone) var(--rhythm-gutter) 0; display: block; }
c-vision-net-pulse .vnp__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
c-vision-net-pulse h1.vnp__title.vnp__title { font-family: var(--font-display) !important; font-size: 2.6rem !important; font-weight: 500 !important; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink) !important; margin: 0; }
c-vision-net-pulse .vnp__eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
c-vision-net-pulse .vnp__scope { font-size: 15px; color: var(--ink-3); margin: 0; }
c-vision-net-pulse .vnp__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rhythm-list); margin-top: var(--rhythm-list); }
c-vision-net-pulse .vnp-kpi {
    background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: var(--rhythm-card-pad) 8px;
    display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-height: 44px;
}
c-vision-net-pulse .vnp-kpi__num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 500; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
c-vision-net-pulse .vnp-kpi__label { font-size: 14px; font-weight: 600; color: var(--ink-2); line-height: 1.25; }
c-vision-net-pulse .vnp__cards { display: grid; gap: var(--rhythm-list); margin-top: var(--rhythm-list); }
c-vision-net-pulse .vnp-card {
    background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: var(--rhythm-card-pad);
}
c-vision-net-pulse .vnp-card__label { font-size: var(--fs-body); font-weight: 600; color: var(--ink-2); margin: 0 0 6px; }
c-vision-net-pulse .vnp-card__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
c-vision-net-pulse .vnp-card__num { font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; line-height: 1.05; color: var(--ink); letter-spacing: -0.02em; }
c-vision-net-pulse .vnp-card__empty { font-size: 15px; color: var(--ink-3); margin: 0; }
c-vision-net-pulse .vnp-delta { font-size: 15px; font-weight: 600; margin: 6px 0 0; }
c-vision-net-pulse .vnp-delta--up { color: var(--color-success-text, #2e7d32); }
c-vision-net-pulse .vnp-delta--down { color: var(--color-error-text, #dc2626); }
c-vision-net-pulse .vnp-delta--flat { color: var(--ink-3); }
c-vision-net-pulse .vnp-chip {
    display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 12px;
    font-size: 13px; font-weight: 600; border: 1px solid var(--rule-2);
}
c-vision-net-pulse .vnp-chip--good { background: var(--color-success-background, #f0fdf4); color: var(--color-success-text, #2e7d32); border-color: var(--color-success-border, #a5d6a7); }
c-vision-net-pulse .vnp-chip--warn { background: var(--warn-soft, #fef9c3); color: #92400e; border-color: #fde68a; }
c-vision-net-pulse .vnp__att-title { font-size: var(--fs-h2) !important; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-2); margin: var(--rhythm-zone) 0 var(--rhythm-list); }
c-vision-net-pulse .vnp__att { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
c-vision-net-pulse .vnp-row { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: var(--rhythm-row-pad); border-bottom: 1px solid var(--rule); }
c-vision-net-pulse .vnp-row:last-child { border-bottom: 0; }
c-vision-net-pulse .vnp-row__text { font-size: var(--fs-body); color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
c-vision-net-pulse .vnp-dot { flex: none; width: 10px; height: 10px; border-radius: 999px; margin-top: 7px; }
c-vision-net-pulse .vnp-dot--error { background: var(--color-error-text, #dc2626); }
c-vision-net-pulse .vnp-dot--warn { background: #d97706; }
c-vision-net-pulse .vnp-dot--info { background: var(--ink-4); }
c-vision-net-pulse .vnp__allclear {
    background: var(--color-success-background, #f0fdf4); border: 1px solid var(--color-success-border, #a5d6a7);
    color: var(--color-success-text, #2e7d32); border-radius: var(--radius-lg);
    padding: var(--rhythm-row-pad); font-size: var(--fs-body); font-weight: 600; min-height: 44px;
    display: flex; align-items: center;
}
@media (min-width: 861px) {
    /* 2x2 since the Discipleship reports card made it four cards */
    c-vision-net-pulse .vnp__cards { grid-template-columns: repeat(2, 1fr); }
    c-vision-net-pulse .vnp-kpi__num { font-size: 2.4rem; }
}

/* §9 round 15b (2026-07-07): My Net charts — pure CSS bars (no library, no
   hover dependence; every bar carries its printed value; reduced-motion safe
   by construction). Count trends (souls/affirmations): current month accent,
   past months muted; percent trend (reports in): green at 100%, amber below;
   sub-net comparison: horizontal accent bars. */
c-vision-net-pulse .vnp-bars { display: flex; align-items: flex-end; gap: 6px; margin-top: 12px; }
c-vision-net-pulse .vnp-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
c-vision-net-pulse .vnp-bar__val { font-size: 13px; font-weight: 600; color: var(--ink-2); }
c-vision-net-pulse .vnp-bar__stick { width: 100%; max-width: 34px; height: 52px; display: flex; align-items: flex-end; justify-content: center; }
c-vision-net-pulse .vnp-bar__fill { width: 100%; border-radius: 6px 6px 0 0; background: var(--ink-4); min-height: 3px; }
c-vision-net-pulse .vnp-bar__fill--now { background: var(--accent); }
c-vision-net-pulse .vnp-bar__fill--good { background: var(--color-success-text, #2e7d32); }
c-vision-net-pulse .vnp-bar__fill--warn { background: #d97706; }
c-vision-net-pulse .vnp-bar__fill--zero { height: 3px; background: var(--rule-2); border-radius: 2px; }
c-vision-net-pulse .vnp-bar__lbl { font-size: 13px; color: var(--ink-3); }

/* Bar reveal motion lives in visionNetPulse.css, NOT here: this static
   resource is CDN-cached by the Experience site, so theme edits do not go
   live until the cache turns over, while the LWC bundle's own stylesheet
   ships with the component (2026-08-24). */
c-vision-net-pulse .vnp-card--subnets { margin-top: var(--rhythm-list); }
c-vision-net-pulse .vnp-snrow { display: flex; align-items: center; gap: 10px; min-height: 32px; }
c-vision-net-pulse .vnp-snrow__name { flex: 0 0 38%; min-width: 0; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
c-vision-net-pulse .vnp-snrow__track { flex: 1 1 auto; height: 14px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
c-vision-net-pulse .vnp-snrow__fill { height: 100%; border-radius: 999px; background: var(--accent); }
c-vision-net-pulse .vnp-snrow__count { flex: none; font-size: 15px; font-weight: 700; color: var(--ink); min-width: 2ch; text-align: right; }

/* §9 round 15c (2026-07-07): /my-net error state (the v1 quiet-blank was a
   Home-mount decision; the dedicated page must speak). */
c-vision-net-pulse .vnp-errorcard {
    background: var(--color-error-background, #fef2f2); border: 1px solid var(--color-error-border, #fecaca);
    border-radius: var(--radius-lg); padding: var(--rhythm-card-pad);
    display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
c-vision-net-pulse .vnp-errorcard__text { margin: 0; font-size: var(--fs-body); color: var(--color-error-text, #dc2626); font-weight: 600; }
c-vision-net-pulse .vnp-errorcard__btn {
    min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--accent); color: var(--accent-ink); font-family: var(--font-ui);
    font-size: var(--fs-button); font-weight: 600;
}

/* §9 round 15e (2026-07-08): My Net member search + /net-member profile.
   Search: 44px input, dropdown of whole-row hits; profile: identity head +
   WhatsApp deep link (accent button; wa.me), fact rows, Affirmations/Reports
   cards with green all-clear headlines. A11y floors; rhythm tokens. */
c-vision-net-pulse .vnp-search { position: relative; margin-top: var(--rhythm-list); max-width: 560px; margin-left: auto; margin-right: auto; }
c-vision-net-pulse .vnp-search__input {
    width: 100%; min-height: 48px; padding: 0 16px;
    border: 1px solid var(--rule-2); border-radius: 999px;
    background: var(--card); color: var(--ink);
    font-family: var(--font-ui); font-size: var(--fs-body);
}
c-vision-net-pulse .vnp-search__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
c-vision-net-pulse .vnp-search__input::placeholder { color: var(--ink-4); }
c-vision-net-pulse .vnp-search__list {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
    list-style: none; margin: 0; padding: 6px;
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto;
}
c-vision-net-pulse .vnp-search__hit {
    display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
    min-height: 48px; padding: 8px 12px; border: 0; border-radius: var(--radius);
    background: transparent; cursor: pointer; font-family: var(--font-ui);
}
c-vision-net-pulse .vnp-search__hit:hover { background: var(--accent-soft); }
c-vision-net-pulse .vnp-search__name { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
c-vision-net-pulse .vnp-search__meta { font-size: 14px; color: var(--ink-3); }
c-vision-net-pulse .vnp-search__none {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; margin: 0;
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: 14px 16px; font-size: 15px; color: var(--ink-3);
}
c-vision-net-member .vnm { max-width: 720px; margin: 0 auto; padding: var(--rhythm-top) var(--rhythm-gutter) 0; display: block; }
c-vision-net-member .vnm__back { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-3); text-decoration: none; font-size: 15px; font-weight: 600; }
c-vision-net-member .vnm__back:hover { color: var(--ink); }
c-vision-net-member .vnm__state { padding: 24px 0; color: var(--ink-2); font-size: var(--fs-body); }
c-vision-net-member .vnm__head { margin: var(--rhythm-list) 0 var(--rhythm-zone); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
c-vision-net-member h1.vnm__name.vnm__name { font-family: var(--font-display) !important; font-size: 2rem !important; font-weight: 500 !important; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
c-vision-net-member .vnm__chips { display: flex; gap: 8px; flex-wrap: wrap; }
c-vision-net-member .vnm-chip {
    display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 12px;
    font-size: 13px; font-weight: 600; background: var(--card-2); color: var(--ink-2);
    border: 1px solid var(--rule-2);
}
c-vision-net-member .vnm-chip--role { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
c-vision-net-member .vnm__namerow {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    /* Name left, WhatsApp pushed to the page's right edge, same line. */
    width: 100%; justify-content: space-between;
}
c-vision-net-member .vnm__whatsapp {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px; border-radius: 999px; text-decoration: none;
    /* WhatsApp brand green, deliberately off the theme accent tokens. */
    background: #25d366; color: #ffffff;
    font-family: var(--font-ui); font-size: var(--fs-body); font-weight: 700;
}
c-vision-net-member .vnm__whatsapp:hover { background: #1da851; color: #ffffff; }
c-vision-net-member .vnm__whatsapp-icon {
    width: 18px; height: 18px; flex: none; fill: currentColor;
}
@media (max-width: 768px) {
    /* Icon-only circle on mobile, holding the right edge of the name row
       (the row is space-between and stops wrapping so the circle never
       drops under the name). */
    c-vision-net-member .vnm__namerow { flex-wrap: nowrap; }
    c-vision-net-member .vnm__whatsapp {
        width: 48px; height: 48px; min-height: 0; padding: 0;
        border-radius: 50%; flex: none;
    }
    c-vision-net-member .vnm__whatsapp-label { display: none; }
    c-vision-net-member .vnm__whatsapp-icon { width: 22px; height: 22px; }
}
c-vision-net-member .vnm-card {
    background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: var(--rhythm-card-pad); margin-bottom: var(--rhythm-list);
}
c-vision-net-member .vnm-fact { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; }
c-vision-net-member .vnm-fact__label { flex: 0 0 34%; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
c-vision-net-member .vnm-fact__value { font-size: var(--fs-body); color: var(--ink); overflow-wrap: anywhere; }
/* Phone value dials on tap (2026-08-18). Accent-coloured so it reads as a
   link, with a 44px line box so it clears the touch-target floor without
   changing the row rhythm for the plain text values beside it. */
c-vision-net-member .vnm-fact__value--link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: none; }
c-vision-net-member .vnm-fact__value--link:hover, c-vision-net-member .vnm-fact__value--link:focus-visible { text-decoration: underline; }
c-vision-net-member .vnm__section-title { font-size: var(--fs-h2) !important; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-2); margin: var(--rhythm-zone) 0 var(--rhythm-list); }
c-vision-net-member .vnm-headline { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
c-vision-net-member .vnm-headline--ok { color: var(--color-success-text, #2e7d32); }
c-vision-net-member .vnm-list { list-style: none; margin: 10px 0 0; padding: 0; }
c-vision-net-member .vnm-list__row { min-height: 40px; display: flex; align-items: center; padding: 6px 0; border-top: 1px solid var(--rule); font-size: var(--fs-body); color: var(--ink-2); overflow-wrap: anywhere; }
c-vision-net-member .vnm-list__more { margin: 8px 0 0; font-size: 14px; color: var(--ink-3); }

/* §9 round 15f (2026-07-08): /net-member hierarchy chain (Net Pastor ->
   Sub-Net Pastor -> Disciple Leader -> Member). Wrapping breadcrumb; the
   middles are 44px tap targets linking to their own profiles; ends are
   plain (the root pastor and the member being viewed). */
c-vision-net-member .vnm-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--rhythm-zone); }
c-vision-net-member .vnm-chain__node { display: inline-flex; align-items: center; gap: 6px; }
c-vision-net-member .vnm-chain__link,
c-vision-net-member .vnm-chain__stop {
    display: inline-flex; flex-direction: column; gap: 1px; min-height: 44px; justify-content: center;
    padding: 4px 12px; border-radius: var(--radius); text-decoration: none;
}
c-vision-net-member .vnm-chain__link { background: var(--card); border: 1px solid var(--rule-2); }
c-vision-net-member .vnm-chain__link:hover { border-color: var(--accent); background: var(--accent-soft); }
c-vision-net-member .vnm-chain__stop { background: var(--card-2); border: 1px dashed var(--rule-2); }
c-vision-net-member .vnm-chain__name { font-size: 15px; font-weight: 600; color: var(--ink); }
c-vision-net-member .vnm-chain__link .vnm-chain__name { color: var(--accent); }
c-vision-net-member .vnm-chain__role { font-size: 13px; color: var(--ink-3); }
c-vision-net-member .vnm-chain__arrow { color: var(--ink-4); font-size: 15px; }

/* §9 round 16 (2026-07-09, v2): theme the AURA FRAMEWORK route-transition
   spinner (siteforce:loadingBalls in .siteforceSpinnerManager - stock chrome
   outside every component, so the c-loading redesign never reached it).
   RECOLOR ONLY: the stock centering is position:fixed + negative margins
   sized to the element's NATURAL box, and it ships a .3s transition, so any
   width/height/padding override breaks centering and delays visibility
   (learned the hard way). Balls stay visible and instant; they just wear
   theme colors, and the card wears paper + rule + radius.  */
body .siteforceLoadingBalls.global {
    background: var(--paper, #ffffff);
    border: 1px solid var(--rule, #e7ddca);
    border-radius: var(--radius, 12px);
    box-shadow: 0 10px 30px rgba(44, 38, 32, 0.10);
}
body .siteforceLoadingBalls .loadingBall {
    background-color: var(--accent, #0d73bb);
}

/* §9 round 17 (2026-07-09): recolor every stock SLDS lightning-spinner
   (15 components use it - modals, consoles, editors) to the accent, in one
   rule. Global CSS reaches these because the site runs synthetic shadow
   (the whole theme depends on that). The member-facing Affirm console got
   the full c-loading treatment instead; these are the long tail. */
body .slds-spinner:before, body .slds-spinner:after,
body .slds-spinner .slds-spinner__dot-a:before, body .slds-spinner .slds-spinner__dot-a:after,
body .slds-spinner .slds-spinner__dot-b:before, body .slds-spinner .slds-spinner__dot-b:after {
    background-color: var(--accent, #0d73bb);
}

/* §9 round 18 (2026-07-10): pin link-state colors on component anchors.
   The stock app CSS ships `a:hover/:focus { color: brandTextLinkActive;
   text-decoration: underline }` and `a:active { color: brandTextLinkActive }`
   at (0,1,1), which out-specifies class-styled anchors like
   .mission-card--hero (0,1,0). Mid-press the hero Evangelize card's text
   computed to the EXACT hover background (#0a588f on #0a588f - invisible),
   and every card/row anchor could flash blue/underline. Pin color +
   text-decoration through every state; is-on tabs re-pinned last so the
   active-tab accent still wins. */
.mission-card:hover, .mission-card:focus, .mission-card:active, .mission-card:visited {
    color: var(--ink-2); text-decoration: none;
}
.mission-card--hero:hover, .mission-card--hero:focus, .mission-card--hero:active, .mission-card--hero:visited {
    color: var(--accent-ink);
}
.ministry-row:hover, .ministry-row:focus, .ministry-row:active, .ministry-row:visited {
    color: var(--ink-2); text-decoration: none;
}
c-program-management .lch__row:hover, c-program-management .lch__row:focus,
c-program-management .lch__row:active, c-program-management .lch__row:visited {
    color: var(--ink-2); text-decoration: none;
}
c-leader-console-back .lcb__link:focus, c-leader-console-back .lcb__link:active,
c-leader-console-back .lcb__link:hover {
    border-color: var(--accent); background: var(--accent-soft);
    color: var(--ink); text-decoration: none;
}
c-leader-console-back .lcb__link:visited { color: var(--ink); }
/* :not(.is-on) on the :visited arm is load-bearing (2026-07-28). Both
   `.bottomnav__btn:visited` and `.bottomnav__btn.is-on` are specificity
   (0,2,0); this block is LATER, so once a tab's URL entered the browser's
   history the muted colour beat the active accent and the current tab stopped
   looking selected - permanently, on real devices only. (Automation never saw
   it: fresh profiles have no history, and getComputedStyle is required to
   report the UNVISITED colour, so only real pixels showed it.) The tell in the
   wild was the active tab still rendering BOLD - :visited may not change
   font-weight, so `.is-on`'s 600 survived while its colour did not.
   Excluding .is-on here rather than adding an `.is-on:visited` restore is
   deliberate: :visited colours are not inherited by child elements, so a
   restore would repaint the label but leave the icon (currentColor) muted. */
.bottomnav__btn:hover, .bottomnav__btn:focus, .bottomnav__btn:active,
.bottomnav__btn:visited:not(.is-on) {
    color: var(--ink-3); text-decoration: none;
}
.bottomnav__btn.is-on:hover, .bottomnav__btn.is-on:focus, .bottomnav__btn.is-on:active {
    color: var(--accent);
}
/* Same visited-beats-active trap as .bottomnav__btn above. */
.topnav__link:focus, .topnav__link:active, .topnav__link:visited:not(.is-on) {
    color: var(--ink-3); text-decoration: none;
}
.topnav__link:hover { color: var(--ink); text-decoration: none; }
.topnav__link.is-on:hover, .topnav__link.is-on:focus, .topnav__link.is-on:active {
    color: var(--accent);
}
c-vision-net-member .vnm__back:focus, c-vision-net-member .vnm__back:active,
c-vision-net-member .vnm__back:visited {
    color: var(--ink-3); text-decoration: none;
}
c-vision-net-member .vnm__back:hover { color: var(--ink); text-decoration: none; }
c-vision-net-member .vnm-chain__link:hover, c-vision-net-member .vnm-chain__link:focus,
c-vision-net-member .vnm-chain__link:active, c-vision-net-member .vnm-chain__link:visited {
    text-decoration: none;
}

/* §9 round 19 (2026-07-10): route-entrance animation (perf round 2 tier 1).
   The Aura router REPLACES the whole .siteforceContentArea node on every
   client-side navigation (probe-verified), so a mount animation here replays
   on every tab tap, back/forward, and full load. Compositor-only properties
   (opacity/transform), 150ms so it can never outlast the ~60-200ms route
   swap and make "instant" feel slower. NO fill-mode: a filled transform
   animation keeps the element a containing block + stacking context for
   position:fixed descendants FOREVER (Chrome), which page-anchored the
   Affirm sheet and let the theme footer swallow its taps. With the default
   fill, the containing block releases when the 150ms run ends; no overlay
   can open that fast after a navigation. */
@media (prefers-reduced-motion: no-preference) {
    .siteforceContentArea {
        animation: kjs-route-in 150ms ease-out;
    }
}

@keyframes kjs-route-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* §9 round 20 (2026-07-11): LEADER WORKBENCH — shared grammar for the leader
   redesign (historical review: docs/archive/audit/2026-07-11-leader-redesign-mockups.html, approved
   surfaces). One vocabulary used by the hub, Reports, My Group, My Disciples,
   the oversight consoles, transfers, and the boundary states. Bare .lw-*
   selectors on purpose (shared-utility tier, like .btn/.lc-modal): the site
   runs synthetic shadow, and these classes are consumed by seven components. */

/* workbench semantic soft tones (accent stays the brand blue) */
:root {
    --lw-green: #2e7d32;  --lw-green-soft: #e3f0e0;
    --lw-amber: #9a6a00;  --lw-amber-soft: #f6ecd2;
    --lw-red:   #b3261e;  --lw-red-soft:   #f7e0dd;
}

/* page title + intro block */
.lw-h1 { font-family: var(--font-display); font-size: 28px !important; font-weight: 500 !important;
    text-align: center; color: var(--ink); margin: 0 0 var(--rhythm-list); }
.lw-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 var(--rhythm-list); }
.lw-intro__eyebrow { font-size: var(--fs-eyebrow, 13px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 2px; } /* eyebrow floor >=14 (a11y pass) */
.lw-intro__title { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink); margin: 0; line-height: 1.15; }
.lw-intro__text { font-size: 14px; color: var(--ink-2); margin: 4px 0 0; }

/* segmented control */
.lw-seg { display: flex; background: var(--card-2); border: 1px solid var(--rule-2); border-radius: 999px; padding: 3px; gap: 2px; margin: 0 0 var(--rhythm-list); }
.lw-seg button { flex: 1; min-height: 38px; border: none; background: transparent; font: 700 13px var(--font-ui);
    color: var(--ink-2); padding: 6px 8px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.lw-seg button.is-on { background: var(--accent); color: var(--accent-ink); }

/* row groups */
.lw-group { display: flex; flex-direction: column; gap: 8px; }
.lw-grouphead { display: flex; justify-content: space-between; align-items: baseline; margin: var(--rhythm-list) 2px 6px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* generic workbench row (launcher / report / schedule / custody) */
.lw-row { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 12px; min-height: 56px; color: var(--ink); text-decoration: none; overflow: hidden; }
a.lw-row:hover, a.lw-row:focus, a.lw-row:visited, button.lw-row { color: var(--ink); text-decoration: none; }
button.lw-row { cursor: pointer; font: inherit; }
button.lw-row:hover { border-color: var(--rule-2); background: var(--card); }
/* Full-height edge stripe, clipped by the row's rounded corners (rows set overflow: hidden).
   Was inset 8px top/bottom for the old 8px radius; the Vision pack's 12px radius let the bar
   poke past the curve. */
.lw-row__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.lw-row__rail--red { background: var(--lw-red); }
.lw-row__rail--amber { background: var(--lw-amber); }
.lw-row__rail--green { background: var(--lw-green); }
.lw-row__icon { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-2);
    display: flex; align-items: center; justify-content: center; flex: none; }
.lw-row__icon lightning-icon svg, .lw-row__icon .slds-icon { fill: currentColor; }
.lw-row__main { flex: 1; min-width: 0; }
.lw-row__title { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.lw-row__meta { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; } /* 13px floor */
.lw-row__chev { color: var(--ink-4); flex: none; }
.lw-date { min-width: 40px; text-align: center; flex: none; }
.lw-date b { display: block; font-size: 17px; line-height: 1.1; color: var(--ink); }
.lw-date span { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* badges + row mini action */
.lw-badge { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2.5px 9px; white-space: nowrap; }
.lw-badge--green { background: var(--lw-green-soft); color: var(--lw-green); }
.lw-badge--amber { background: var(--lw-amber-soft); color: var(--lw-amber); }
.lw-badge--red { background: var(--lw-red-soft); color: var(--lw-red); }
.lw-badge--blue { background: var(--accent-soft); color: var(--accent-2); }
.lw-badge--purple { background: var(--color-purple-background); color: var(--color-purple-text); }
.lw-badge--neutral { background: var(--card-2); color: var(--ink-2); }
.lw-mini { border: none; background: var(--accent); color: var(--accent-ink); font: 700 13px var(--font-ui);
    border-radius: 999px; padding: 8px 14px; min-height: 36px; cursor: pointer; white-space: nowrap; flex: none; } /* 13px floor */
.lw-mini:hover { background: var(--accent-2); }

/* history month rows */
.lw-monthrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px; min-height: 52px;
    cursor: pointer; font: inherit; text-align: left; color: var(--ink); }
.lw-monthrow strong { font-size: 14.5px; }
.lw-monthrow .lw-row__meta { margin-top: 2px; }

/* summary strip (3 stats, 54px) */
.lw-strip { display: flex; gap: 8px; margin: 0 0 var(--rhythm-list); }
.lw-stat { flex: 1; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
    text-align: center; padding: 7px 4px; }
.lw-stat b { display: block; font-size: 19px; line-height: 1.15; color: var(--ink); }
/* 13px floor (a11y type pass) — was 10.5px */
.lw-stat span { display: block; font-size: 13px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.lw-stat--ok b { color: var(--lw-green); }
.lw-stat--warn b { color: var(--lw-amber); }
.lw-stat--bad b { color: var(--lw-red); }

/* search + toolbar */
.lw-toolbar { display: flex; gap: 8px; align-items: center; margin: 0 0 var(--rhythm-list); }
.lw-search { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--rule-2);
    border-radius: 999px; padding: 0 14px; min-height: 44px; }
.lw-search input { flex: 1; border: none; background: transparent; font: 500 14.5px var(--font-ui); color: var(--ink); min-width: 0; }
.lw-search input::placeholder { color: var(--ink-4); }
.lw-search input:focus { outline: none; }
.lw-search lightning-icon { --slds-c-icon-color-foreground-default: var(--ink-4); }

/* person rows (overflow hidden clips the .lw-row__rail edge stripe to the rounded corners) */
.lw-person { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--card);
    border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 12px; min-height: 56px; cursor: pointer; font: inherit; color: var(--ink); overflow: hidden; }
.lw-person:hover { border-color: var(--rule-2); }
.lw-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-2);
    display: flex; align-items: center; justify-content: center; font: 800 12.5px var(--font-ui); flex: none; }

/* sheet action list (member actions) */
.lw-act { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent;
    border: none; border-bottom: 1px solid var(--rule); font: 600 15px var(--font-ui); color: var(--ink);
    padding: 13px 6px; min-height: 48px; cursor: pointer; }
.lw-act:last-child { border-bottom: none; }
.lw-act--danger { color: var(--lw-red); }
.lw-act .lw-row__chev { margin-left: auto; }
.lw-sheet-person { padding: 2px 6px 12px; }
.lw-sheet-person h3 { font-family: var(--font-display); font-size: 20px; font-weight: 500; margin: 0; color: var(--ink); }
.lw-sheet-person p { font-size: 13px; color: var(--ink-3); margin: 3px 0 0; font-family: var(--font-mono); } /* 13px floor */

/* steppers + toggles (report sheet) */
.lw-steprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.lw-steprow:last-of-type { border-bottom: none; }
.lw-steplabel { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.lw-stepper { display: flex; align-items: center; gap: 0; border: 1px solid var(--rule-2); border-radius: 999px; overflow: hidden; background: var(--card); }
.lw-stepper button { width: 44px; min-height: 40px; border: none; background: transparent; color: var(--accent);
    font: 700 20px var(--font-ui); cursor: pointer; line-height: 1; }
.lw-stepper button:disabled { color: var(--ink-4); cursor: default; }
.lw-stepper output { min-width: 40px; text-align: center; font: 700 15px var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
/* typeable stepper center (2026-08-07): same cell, now a real number input */
.lw-stepper input[type="number"] { width: 52px; min-width: 40px; border: none; background: transparent; padding: 0;
    text-align: center; font: 700 15px var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums;
    -moz-appearance: textfield; appearance: textfield; }
.lw-stepper input[type="number"]::-webkit-outer-spin-button,
.lw-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lw-stepper input[type="number"]:focus { outline: none; }
.lw-togglerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.lw-togglerow:last-of-type { border-bottom: none; }
.lw-togglerow > span { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.lw-switch { width: 44px; height: 26px; border-radius: 999px; background: var(--rule-2); position: relative; border: none; cursor: pointer; flex: none; transition: background .15s; }
.lw-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); transition: left .15s; }
.lw-switch.is-on { background: var(--lw-green); }
.lw-switch.is-on::after { left: 21px; }

/* attendance rows (default-present, tap the exceptions) */
.lw-att { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--card);
    border: 1px solid var(--rule); border-radius: var(--radius); padding: 9px 12px; min-height: 52px; }
.lw-att__name { font-size: 14.5px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-att__seg { display: flex; gap: 4px; flex: none; }
.lw-att__seg button { border: 1px solid var(--rule-2); background: var(--card); color: var(--ink-3);
    font: 800 11.5px var(--font-ui); border-radius: 999px; padding: 7px 12px; min-height: 36px; cursor: pointer; }
.lw-att__seg button.is-present { background: var(--lw-green-soft); border-color: var(--lw-green); color: var(--lw-green); }
.lw-att__seg button.is-absent { background: var(--lw-red-soft); border-color: var(--lw-red); color: var(--lw-red); }

/* boundary / empty / error states */
.lw-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    gap: 6px; padding: 40px 20px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.lw-state__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-2);
    display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.lw-state__icon--warn { background: var(--lw-amber-soft); color: var(--lw-amber); }
.lw-state__icon--ok { background: var(--lw-green-soft); color: var(--lw-green); }
.lw-state h2 { font-family: var(--font-display); font-size: 21px; font-weight: 500; margin: 0; color: var(--ink); }
.lw-state p { font-size: 14px; color: var(--ink-2); margin: 0; max-width: 34ch; }
.lw-state .btn, .lw-state .lw-mini { margin-top: 12px; }

/* in-page toast (post-save confirmation) */
.lw-toast { display: flex; align-items: center; gap: 8px; background: var(--lw-green-soft); color: var(--lw-green);
    border: 1px solid var(--lw-green); border-radius: var(--radius); padding: 10px 14px; font-weight: 700; font-size: 14px;
    margin: 0 0 var(--rhythm-list); }

/* hierarchy tree groups (People in My Net) */
.lw-tree { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--card-2);
    border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 12px; min-height: 48px; cursor: pointer;
    font: 700 14px var(--font-ui); color: var(--ink); }
.lw-tree .lw-badge { margin-left: auto; }

/* group identity + facts (My Group) */
.lw-identity { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0 0 var(--rhythm-list); }
.lw-identity__name { font-family: var(--font-display); font-size: 24px; font-weight: 500; margin: 2px 0 0; color: var(--ink); line-height: 1.15; }
.lw-identity__meta { font-size: 13.5px; color: var(--ink-3); margin: 3px 0 0; }
.lw-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 var(--rhythm-list); }
.lw-fact { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 9px 12px; }
/* 13px floor (a11y type pass) — was 10.5px */
.lw-fact__label { display: block; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.lw-fact__value { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.lw-fact__value a { color: var(--accent); text-decoration: none; font-weight: 700; }

/* section head with trailing action */
.lw-sectionhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: var(--rhythm-zone) 0 8px; }
.lw-sectionhead h2 { font-size: 16px; font-weight: 800; color: var(--ink-2); margin: 0; }

/* danger button variant on shared .btn */
.btn--danger { background: var(--lw-red); border-color: var(--lw-red); color: #fff; }
.btn--danger:hover { background: #8f1d17; border-color: #8f1d17; color: #fff; }

/* full-width button helper */
.btn--full { width: 100%; justify-content: center; display: inline-flex; }

/* FIX (mock 'access' + audit finding): leader sheets must clear the mobile
   tab bar — the .lc-dialog footer rendered UNDER the fixed bottom nav and
   the bar swallowed Save taps. Reserve the bar band + safe area. */
@media (max-width: 860px) {
    .lc-dialog { margin-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); max-height: calc(92vh - 64px); }
}

/* FIX (leader.spec.js caught this): pin the sheet footer. The dialog itself
   was the scroll container, so on a tall sheet (long attendance roster or
   the expanded date/time "Change" fields) the head AND the Save footer
   scrolled out of the viewport — Save became reachable only by scrolling.
   Move the scroll to the body alone; head and foot stay pinned so Save is
   always visible and always clears the tab bar. */
.lc-dialog { overflow: hidden; }
.lc-dialog__body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* FIX (audit finding, safety net while the alert cards are retired): the
   purple disc alert card kept desktop flex at phone width — one word per
   line and the action overlapping the pill. Stack it. */
@media (max-width: 768px) {
    .disc-alert-card { flex-direction: column; align-items: stretch; }
    .disc-alert-action { width: 100%; }
    .disc-alert-action .slds-button { width: 100%; }
}

/* round 20 addendum: workbench page wrapper (mirrors the .vmr/.vbo console
   wrappers - the outer view supplies the site gutters and bottom clearance). */
/* Leader-console page box (2026-07-26): every leader page shares the hub
   card box - sides at gutter + the 3.5px inner-region inset delta, 1200px
   cap - so no element on a spoke page is ever wider than the hub's cards
   and the entry gutter never shifts between pages. */
.lw-page { max-width: 1200px; margin: 0 auto; padding: 8px calc(var(--rhythm-gutter) + 3.5px) 24px; display: block; }

/* round 20 addendum: My Net attention-first header (mock "My Net"). The net
   color moves OFF the title into an underline accent; attention rows with a
   member target read and behave as links. */
c-vision-net-pulse .vnp__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); text-align: center; margin: 0 0 2px; }
c-vision-net-pulse .vnp__underline { display: block; width: 44px; height: 4px; border-radius: 4px; margin: 6px auto 0; background: var(--vnp-net-color, var(--accent)); }
c-vision-net-pulse .vnp__attwrap { margin-top: var(--rhythm-list); }
c-vision-net-pulse .vnp__att-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
c-vision-net-pulse .vnp__viewall { border: none; background: transparent; color: var(--accent); font: 700 13.5px var(--font-ui); cursor: pointer; padding: 6px 0; }
c-vision-net-pulse .vnp-row__li { list-style: none; }
c-vision-net-pulse button.vnp-row--link { width: 100%; text-align: left; cursor: pointer; font: inherit; border: 1px solid var(--rule); background: var(--card); }
c-vision-net-pulse button.vnp-row--link:hover { border-color: var(--rule-2); }
c-vision-net-pulse .vnp-row__chev { margin-left: auto; color: var(--ink-4); font-size: 18px; line-height: 1; }

/* Leader Wave 4: shared accessibility primitives. This block is deliberately
   Vision-host-scoped because KJSTheme is also consumed outside the Vision
   portal. #8b8172 is 3.55:1 on --paper and 3.77:1 on --card, while the softer
   --rule tokens remain available for non-interactive hairlines. */
:is(
    c-program-management,
    c-program-schedule-card,
    c-program-upcoming-sessions,
    c-benefit-session-reporting,
    c-hierarchical-missing-reports-console,
    c-hierarchical-net-list-console,
    c-offering-bag-oversight-console,
    c-discipleship-roster-management,
    c-discipleship-attendance-modal,
    c-hop-meeting-report-modal,
    c-benefit-schedule-standard-editor,
    c-benefit-single-session-editor,
    c-benefit-single-session-modal,
    c-location-modal,
    c-vision-transfer-request,
    c-transfer-mentor-tutor-picker,
    c-transfer-approval-card,
    c-vision-approval-review,
    c-vision-affirmation-console,
    c-vision-header-actions,
    c-vision-net-pulse,
    c-vision-net-member,
    c-leader-console-back,
    c-leader-boundary-state,
    c-vision-dialog,
    c-vision-tabs
) {
    --vision-control-border: #8b8172;
    --vision-focus-ring: var(--accent);
}

/* 13px metadata floor for the workbench grammar. */
:is(
    c-program-management,
    c-program-schedule-card,
    c-program-upcoming-sessions,
    c-benefit-session-reporting,
    c-hierarchical-missing-reports-console,
    c-hierarchical-net-list-console,
    c-offering-bag-oversight-console,
    c-discipleship-roster-management,
    c-discipleship-attendance-modal,
    c-hop-meeting-report-modal,
    c-leader-boundary-state
) :is(
    .lw-intro__eyebrow,
    .lw-grouphead,
    .lw-row__meta,
    .lw-date span,
    .lw-badge,
    .lw-mini,
    .lw-stat span,
    .lw-avatar,
    .lw-sheet-person p,
    .lw-att__seg button,
    .lw-fact__label
) {
    font-size: 13px !important;
}

c-vision-net-pulse .vnp__eyebrow,
c-discipleship-roster-management .roster-search__count,
c-program-schedule-card .status-badge,
c-vision-affirmation-console .vac__optional {
    font-size: 13px !important;
}

:is(
    c-hop-meeting-report-modal,
    c-discipleship-attendance-modal,
    c-discipleship-roster-management
) .lc-dialog__head {
    padding-right: 64px;
}

/* (sheet-lift removed 2026-08-07: these sheets used to hover above the bottom
   tab bar; Brian wants them flush to the screen bottom like Quick Capture,
   Affirm, and the HOP details editor. visionDialog's default offset is 0.) */

:is(
    c-benefit-schedule-standard-editor,
    c-benefit-single-session-modal,
    c-location-modal
) :is(
    .custom-label,
    .custom-section-title,
    .custom-field-error,
    .info-block__subtitle,
    .meta-label,
    .form-input lightning-input .slds-form-element__label,
    .form-textarea lightning-textarea .slds-form-element__label
) {
    font-size: 13px !important;
}

c-benefit-schedule-standard-editor :is(
    .custom-weekday-btn,
    .custom-weekday-note,
    .custom-readonly-label
) {
    font-size: 13px !important;
}

c-discipleship-attendance-modal :is(
    .section-heading,
    .section-subheading,
    .roster-header
),
c-benefit-session-reporting :is(
    .month-label,
    .day-label,
    .action-area,
    .section-label
),
c-discipleship-roster-management :is(
    .stat-label,
    .roster-table-header,
    .candidate-header
),
c-benefit-single-session-editor :is(
    .control-label,
    .slds-table thead th,
    .slds-badge,
    .badge-exception,
    .pagination-nav-btn,
    .meta-label,
    .results-info,
    .page-indicator
),
c-transfer-approval-card :is(
    .party-role,
    .optional-hint
),
c-transfer-mentor-tutor-picker :is(
    .selected-banner__meta,
    .search-hint,
    .result-meta
) {
    font-size: 13px !important;
}

/* 44px interaction floor. Switches retain their compact painted geometry;
   their pseudo-element expands only the pointer hit area. */
:is(
    c-program-management,
    c-program-schedule-card,
    c-program-upcoming-sessions,
    c-benefit-session-reporting,
    c-hierarchical-missing-reports-console,
    c-hierarchical-net-list-console,
    c-offering-bag-oversight-console,
    c-discipleship-roster-management,
    c-discipleship-attendance-modal,
    c-hop-meeting-report-modal,
    c-benefit-schedule-standard-editor,
    c-benefit-single-session-editor,
    c-benefit-single-session-modal,
    c-location-modal,
    c-vision-transfer-request,
    c-vision-affirmation-console
) :is(
    .btn,
    .lw-mini,
    .lw-seg button,
    .lw-stepper button,
    .lw-att__seg button,
    .slds-button
) {
    min-height: 44px;
}

:is(
    c-program-management,
    c-program-schedule-card,
    c-program-upcoming-sessions,
    c-benefit-session-reporting,
    c-discipleship-roster-management,
    c-discipleship-attendance-modal,
    c-hop-meeting-report-modal
) .lw-switch::before {
    position: absolute;
    inset: -9px 0;
    content: "";
}

c-benefit-schedule-standard-editor :is(
    .custom-weekday-btn,
    .custom-cancel-btn,
    .custom-save-btn
),
c-benefit-single-session-modal :is(
    .btn-discard,
    .btn-save
),
c-location-modal :is(
    .btn-discard,
    .btn-save
),
c-benefit-single-session-editor :is(
    .search-clear-btn,
    .page-size-select,
    .pagination-nav-btn,
    .sortable-header__button
),
c-transfer-mentor-tutor-picker :is(
    .clear-btn,
    .dropdown-item
),
c-vision-affirmation-console :is(
    .vac__search-clear,
    .vac__dialog-tools lightning-button-menu,
    .vac__dialog-tools lightning-button-icon
) {
    min-height: 44px !important;
}

c-benefit-single-session-editor .search-clear-btn,
c-vision-affirmation-console .vac__search-clear,
c-vision-affirmation-console .vac__dialog-tools lightning-button-menu,
c-vision-affirmation-console .vac__dialog-tools lightning-button-icon,
c-transfer-mentor-tutor-picker .clear-btn {
    min-width: 44px !important;
}

c-hierarchical-missing-reports-console .queue__search input,
c-hierarchical-net-list-console .people__search input {
    min-height: 44px !important;
}

:is(
    c-benefit-schedule-standard-editor,
    c-benefit-single-session-modal,
    c-location-modal,
    c-discipleship-attendance-modal,
    c-hop-meeting-report-modal
) :is(
    .combobox-input,
    .combobox-option,
    .slds-input,
    .slds-combobox__input,
    .slds-textarea
) {
    min-height: 44px !important;
}

/* Date/time pickers OPT OUT of the 44px stretch above: SLDS anchors their
   calendar/clock icons for the default input height, so the stretched box
   left the icons off-center. Default height is exactly how the HOP details
   editor's Meeting time field renders (the reference look). */
:is(
    c-benefit-schedule-standard-editor,
    c-benefit-single-session-modal,
    c-location-modal,
    c-discipleship-attendance-modal,
    c-hop-meeting-report-modal
) :is(lightning-datepicker, lightning-timepicker) .slds-input {
    min-height: 0 !important;
}

/* The datepicker's calendar icon: the site's bundled SLDS leaves it without a
   positioning anchor (it fell into normal flow BELOW the input). Pin it inside
   the input, vertically centered — the timepicker needs no help. */
:is(
    c-benefit-schedule-standard-editor,
    c-benefit-single-session-modal,
    c-location-modal,
    c-discipleship-attendance-modal,
    c-hop-meeting-report-modal
) lightning-datepicker .slds-form-element__control {
    position: relative;
}
:is(
    c-benefit-schedule-standard-editor,
    c-benefit-single-session-modal,
    c-location-modal,
    c-discipleship-attendance-modal,
    c-hop-meeting-report-modal
) lightning-datepicker .slds-input {
    padding-right: 2rem;
}
:is(
    c-benefit-schedule-standard-editor,
    c-benefit-single-session-modal,
    c-location-modal,
    c-discipleship-attendance-modal,
    c-hop-meeting-report-modal
) lightning-datepicker .slds-input__icon {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
    margin-top: 0;
}

c-benefit-single-session-editor .sortable-header {
    padding: 0 !important;
    cursor: default;
}
c-benefit-single-session-editor .sortable-header__button {
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}
c-benefit-single-session-editor .session-card {
    cursor: default;
}

@media (min-width: 861px) {
    c-vision-bottom-nav .topnav__cta {
        min-height: 44px;
    }
}

body:has(c-vision-bottom-nav)
    .forceCommunityThemeHeaderCompact .forceCommunityThemeLogo,
body:has(c-vision-bottom-nav)
    .forceCommunityThemeHeaderCompact .themeLogo {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* Interactive borders use the contrast-safe token without changing passive
   card and row hairlines. */
:is(
    c-benefit-schedule-standard-editor,
    c-benefit-single-session-modal,
    c-location-modal
) :is(
    .custom-input,
    .custom-select,
    .custom-textarea
),
c-benefit-single-session-editor :is(
    .search-input,
    .page-size-select,
    .pagination-nav-btn
),
c-vision-affirmation-console .vac__search-input,
c-hierarchical-missing-reports-console :is(
    .input,
    select,
    .queue__search,
    .queue__filter-button
),
c-hierarchical-net-list-console :is(
    .input,
    select,
    .people__search,
    .vision-chip
),
:is(
    c-program-management,
    c-program-schedule-card,
    c-program-upcoming-sessions,
    c-benefit-session-reporting,
    c-discipleship-roster-management,
    c-discipleship-attendance-modal,
    c-hop-meeting-report-modal
) :is(
    .lw-search,
    .lw-stepper,
    .lw-att__seg button
) {
    border-color: var(--vision-control-border) !important;
}

:is(
    c-benefit-schedule-standard-editor,
    c-benefit-single-session-modal,
    c-location-modal
) :is(
    .form-input lightning-input .slds-input,
    .form-textarea lightning-textarea .slds-textarea,
    .combobox-input-wrapper
) {
    border-bottom-color: var(--vision-control-border) !important;
}

:is(
    c-discipleship-attendance-modal,
    c-hop-meeting-report-modal
) :is(
    lightning-combobox,
    lightning-input,
    lightning-textarea
) {
    --slds-c-input-color-border: var(--vision-control-border);
    --slds-c-input-color-border-focus: var(--accent);
}

/* One visible keyboard-focus contract for every migrated leader surface.
   !important intentionally wins over legacy outline suppression. */
:is(
    c-program-management,
    c-program-schedule-card,
    c-program-upcoming-sessions,
    c-benefit-session-reporting,
    c-hierarchical-missing-reports-console,
    c-hierarchical-net-list-console,
    c-offering-bag-oversight-console,
    c-discipleship-roster-management,
    c-discipleship-attendance-modal,
    c-hop-meeting-report-modal,
    c-benefit-schedule-standard-editor,
    c-benefit-single-session-editor,
    c-benefit-single-session-modal,
    c-location-modal,
    c-vision-transfer-request,
    c-transfer-mentor-tutor-picker,
    c-transfer-approval-card,
    c-vision-approval-review,
    c-vision-affirmation-console,
    c-vision-header-actions,
    c-vision-net-pulse,
    c-vision-net-member,
    c-leader-console-back,
    c-leader-boundary-state
) :is(
    a[href],
    button:not(:disabled),
    input:not(:disabled),
    select:not(:disabled),
    textarea:not(:disabled),
    [tabindex]:not([tabindex="-1"]),
    .slds-button,
    .slds-input,
    .slds-textarea,
    .slds-combobox__input
):focus-visible,
body:has(c-vision-bottom-nav)
    .forceCommunityThemeHeaderCompact :is(
    a[href],
    button:not(:disabled)
):focus-visible,
c-vision-bottom-nav .bottomnav__btn:focus-visible,
c-vision-bottom-nav .topnav__link:focus-visible,
c-vision-bottom-nav .topnav__cta:focus-visible {
    outline: 3px solid var(--vision-focus-ring, var(--accent)) !important;
    outline-offset: 2px !important;
}

:is(
    c-program-management,
    c-program-schedule-card,
    c-program-upcoming-sessions,
    c-benefit-session-reporting,
    c-discipleship-roster-management,
    c-discipleship-attendance-modal,
    c-hop-meeting-report-modal
) .lw-stepper:focus-within {
    outline: 3px solid var(--vision-focus-ring, var(--accent));
    outline-offset: 2px;
}