* { margin: 0; padding: 0; box-sizing: border-box; }
        /* Form controls do not inherit font-family by default, so any button,
           tab, or field without an explicit family rendered in the browser's
           fallback face (Arial on macOS) — including the primary nav,
           attendance/billing tabs, pagination, sign-out, and modal-close.
           Controls speak the app family unless a rule deliberately overrides. */
        button, input, select, textarea { font-family: inherit; }
        /* The hidden attribute must always win, even over display styles set
           by component classes (same bug class as the kiosk-policy-fields and
           public-signup.css fixes). Role-gated controls rely on this. */
        [hidden] { display: none !important; }
        :root {
            --sidebar-width: 240px;
            --banner-h: 30px;
            --hamburger-zone: 56px;
        }

        body {
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg);
            color: var(--text-primary);
            overflow-x: hidden; /* Desktop only — mobile overrides below */
            -webkit-font-smoothing: antialiased;
            display: flex;
            min-height: 100vh;
        }

        /* SIDEBAR */
        .sidebar {
            width: var(--sidebar-width);
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: var(--banner-h);
            left: 0;
            bottom: 0;
            /* Use dvh (dynamic viewport height) so Safari address bar is excluded from height */
            height: calc(100dvh - var(--banner-h));
            z-index: 50;
            transition: transform 0.3s ease;
            /* Scrollable: sidebar itself is the scroll container so users can reach all nav items */
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        .sidebar-header {
            padding: 24px 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .sidebar-close {
            display: none;
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 6px;
            border-radius: 6px;
            transition: color 0.15s, background 0.15s;
        }
        .sidebar-close:hover {
            color: var(--text-primary);
            background: var(--surface-elevated);
        }

        /* Deliberate literal: the MatAdmin wordmark is a brand identity mark,
           not a text tier. No role renders 1.3rem — title (1.125rem) would
           shrink the brand mark 2.8px and headline (1.5rem) would grow it
           3.2px, both large moves on the shell every wave already shipped. */
        .sidebar-logo {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text-primary);
            text-decoration: none;
            letter-spacing: -0.5px;
        }
        .sidebar-logo span { color: var(--accent); }

        .sidebar-nav {
            flex: 1;
            padding: 16px 12px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 8px;
            color: var(--text-secondary);
            text-decoration: none;
            font-family: var(--type-family-body);
            font-size: var(--type-control-size);
            font-weight: var(--type-control-weight);
            line-height: var(--type-control-line);
            letter-spacing: 0;
            cursor: pointer;
            transition: all 0.15s ease;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
        }

        .nav-item:hover { background: var(--surface-elevated); color: var(--text-primary); }
        .nav-item.active { background: var(--accent-subtle); color: var(--accent); }
        .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

        .sidebar-footer {
            padding: 16px 12px;
            border-top: 1px solid var(--border);
        }

        .sidebar-footer a {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            color: var(--text-muted);
            text-decoration: none;
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
            border-radius: 6px;
            transition: color 0.15s;
        }
        .sidebar-footer a:hover { color: var(--text-secondary); }

        .sidebar-reset-btn,
        .sidebar-signout-btn {
            font-family: var(--type-family-body);
            font-size: var(--type-control-sm-size);
            font-weight: var(--type-control-weight);
            line-height: var(--type-control-line);
            letter-spacing: 0;
        }

        .mobile-reset-demo-btn {
            display: none;
            position: fixed;
            right: 16px;
            bottom: calc(16px + env(safe-area-inset-bottom));
            z-index: 70;
            align-items: center;
            gap: 8px;
            min-height: 44px;
            padding: 10px 14px;
            border: 1px solid var(--error-border);
            border-radius: 8px;
            background: var(--surface-overlay);
            color: var(--danger);
            font-family: var(--type-family-body);
            font-size: var(--type-control-size);
            font-weight: var(--type-control-weight);
            line-height: var(--type-control-line);
            letter-spacing: 0;
            cursor: pointer;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
        }

        .mobile-reset-demo-btn:hover {
            background: var(--error-bg);
        }

        @media (min-width: 769px) {
            .mobile-reset-demo-btn {
                display: none !important;
            }
        }

        .sidebar-legal-links {
            display: flex;
            flex-wrap: wrap;
            /* iOS 12: flex gap unsupported < Safari 14.1. Children carry the
               4px/10px gaps as margins; padding drops by the same amounts so
               the outer edges land exactly where gap+padding used to. */
            padding: 4px 12px 4px 2px;
        }
        .sidebar-legal-links > * {
            margin: 4px 0 0 10px;
        }

        .sidebar-legal-links a {
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
            color: var(--text-muted);
            text-decoration: none;
            padding: 0;
            transition: color 0.15s;
        }

        .sidebar-legal-links a:hover { color: var(--accent); }

        /* MOBILE SIDEBAR TOGGLE */
        .sidebar-toggle {
            display: none;
            position: fixed;
            top: calc(12px + var(--banner-h));
            left: 16px;
            z-index: 60;
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 8px;
            color: var(--text-primary);
            cursor: pointer;
        }

        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 40;
        }

        /* MAIN CONTENT */
        .main {
            flex: 1;
            margin-left: var(--sidebar-width);
            min-width: 0;
            min-height: 100vh;
            padding-top: var(--banner-h);
        }

        /* Desktop sidebar state — applied by syncSidebarMode() when width >= 768px.
           These rules override mobile-overlay rules (including .open class) so the
           sidebar is always correct at desktop widths regardless of prior state. */
        body.sidebar-desktop .sidebar {
            transform: translateX(0) !important;
        }
        body.sidebar-desktop .sidebar-overlay {
            display: none !important;
        }
        body.sidebar-desktop .sidebar-toggle {
            display: none !important;
        }
        body.sidebar-desktop .sidebar-close {
            display: none !important;
        }
        body.sidebar-desktop .main {
            margin-left: var(--sidebar-width) !important;
            width: calc(100% - var(--sidebar-width));
            max-width: calc(100% - var(--sidebar-width));
            flex: 0 0 calc(100% - var(--sidebar-width));
            min-width: 0;
        }

        .page-header {
            padding: 28px 32px 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
        }

        .page-header h1 {
            font-family: var(--type-family-display);
            font-size: var(--type-headline-size);
            font-weight: var(--type-headline-weight);
            line-height: var(--type-headline-line);
            letter-spacing: var(--type-headline-tracking);
        }

        .page-header p {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            color: var(--text-secondary);
            margin-top: 4px;
        }

        .sidebar-gym-name {
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
        }

        .help-title-row {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        /* Help Tip is a deliberately non-role component (DESIGN.md §5;
           parity-test NON_ROLE_COMPONENTS): its trigger and popover type are
           scaled to the 22px circular trigger and 320px popover, not to the
           product text tiers. The four font-size literals in this block stay
           literal by contract. */
        .help-tip-button {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1px solid var(--border-strong);
            background: var(--surface);
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.78rem;
            font-weight: 800;
            line-height: 1;
            cursor: pointer;
            transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
        }

        .help-tip-button:hover,
        .help-tip-button[aria-expanded="true"] {
            border-color: var(--accent);
            background: var(--accent-subtle);
            color: var(--accent);
        }

        .help-tip-button:focus-visible {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-glow);
        }

        .help-tip-popover {
            position: fixed;
            z-index: 3000;
            width: min(320px, calc(100vw - 24px));
            padding: 14px 16px;
            border: 1px solid var(--border-strong);
            border-radius: 8px;
            background: var(--surface-elevated);
            color: var(--text-primary);
            box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
        }

        .help-tip-popover h4 {
            font-family: 'Space Grotesk', sans-serif;
            /* Deliberate literal: non-role component, see Help Tip note. */
            font-size: 0.95rem;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .help-tip-popover p {
            color: var(--text-secondary);
            /* Deliberate literal: non-role component, see Help Tip note. */
            font-size: 0.84rem;
            line-height: 1.5;
            margin: 0;
        }

        .help-tip-popover a {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: var(--accent);
            /* Deliberate literal: non-role component, see Help Tip note. */
            font-size: 0.82rem;
            font-weight: 700;
            margin-top: 10px;
            text-decoration: none;
        }

        .help-tip-popover a:hover { text-decoration: underline; }

        .members-page-header {
            align-items: flex-start;
        }

        .members-page-title {
            flex: 1 1 280px;
            min-width: 0;
        }

        .members-page-actions {
            display: flex;
            flex: 0 1 auto;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 10px;
            max-width: 100%;
            min-width: 0;
        }

        .members-page-actions .btn {
            flex: 0 0 auto;
            white-space: nowrap;
        }

        .page-content {
            padding: 24px 32px;
        }

        /* BUTTONS */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 18px;
            border-radius: 8px;
            font-family: var(--type-family-body);
            font-size: var(--type-control-size);
            font-weight: var(--type-control-weight);
            cursor: pointer;
            border: 1px solid var(--border);
            background: var(--surface-elevated);
            color: var(--text-primary);
            transition: all 0.15s;
            text-decoration: none;
            white-space: nowrap;
        }

        .btn:hover { background: var(--surface-hover); border-color: var(--border-focus); }
        .btn svg { width: 16px; height: 16px; }

        .btn-primary {
            background: var(--accent);
            border-color: var(--accent);
            color: var(--text-on-accent);
        }
        .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

        .btn-danger {
            background: transparent;
            border-color: var(--danger);
            color: var(--danger);
        }
        .btn-danger:hover { background: var(--error-bg); }

        .btn-sm { padding: 6px 12px; font-size: var(--type-control-sm-size); }
        .btn-ghost { background: transparent; border-color: transparent; }
        .btn-ghost:hover { background: var(--surface-elevated); border-color: var(--border); }

        /* ACTION MENU */
        .action-menu-trigger svg { transition: transform 0.15s; }
        .action-menu-trigger[aria-expanded="true"] { background: var(--surface-hover); border-color: var(--border-focus); }
        .action-menu-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

        /* Icon-only kebab variant: a compact square trigger for a split-button
           secondary entry point (e.g. beside its own primary button), kept at
           the front-desk touch floor. Its icon isn't a chevron, so it must
           opt out of the rotate-on-open rule above. */
        .action-menu-trigger-icon {
            gap: 0;
            width: 44px;
            height: 44px;
            padding: 0;
            justify-content: center;
        }
        .action-menu-trigger-icon svg { margin: 0; transform: none !important; }

        /* Fixed + JS-positioned (see positionActionMenu), same technique as
           .help-tip-popover: this component appears inside many different
           containers (page headers, card rows, list rows), so it clamps to
           the viewport instead of trusting any one container's overflow. */
        .action-menu {
            position: fixed;
            z-index: 1200;
            min-width: 200px;
            padding: 6px;
            border: 1px solid var(--border-strong);
            border-radius: 10px;
            background: var(--surface-elevated);
            box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
        }

        .action-menu-item {
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 44px; /* front-desk touch floor (PRODUCT.md accessibility) */
            padding: 9px 10px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-control-size);
            font-weight: var(--type-control-weight);
            text-align: left;
            cursor: pointer;
            transition: background 0.15s;
        }

        .action-menu-item svg {
            width: 16px;
            height: 16px;
            margin-right: 10px;
            flex-shrink: 0;
            color: var(--text-secondary);
        }

        .action-menu-item:hover { background: var(--surface-hover); }

        .action-menu-item:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--accent-glow);
        }

        .action-menu-divider {
            height: 1px;
            margin: 6px 4px;
            background: var(--border);
        }

        .action-menu-item-danger { color: var(--danger); }
        .action-menu-item-danger svg { color: var(--danger); }
        .action-menu-item-danger:hover { background: var(--error-bg); }

        /* STATS CARDS */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        .stat-card {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            transition: border-color 0.2s;
        }
        .stat-card:hover { border-color: var(--border-focus); }

        .stat-card .label {
            font-size: var(--type-label-size);
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .stat-card .value {
            font-family: var(--type-family-display);
            font-size: var(--type-metric-lg-size);
            font-weight: var(--type-metric-lg-weight);
            line-height: var(--type-metric-lg-line);
            letter-spacing: 0;
        }

        .stat-card .value.accent { color: var(--accent); }

        /* TABLE */
        .table-container {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
        }

        /* Horizontal scroll for tables too wide for their container. Applies at
           every width, not just phone widths: .table-container is overflow:hidden,
           so without this a table that overflows is clipped and unreachable rather
           than scrollable — which stranded the Classes table's Actions column on
           landscape phones and small tablets. Harmless where the table already
           fits, since overflow-x:auto only engages on actual overflow. */
        .table-scroll {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .table-scroll::-webkit-scrollbar { height: 4px; }
        .table-scroll::-webkit-scrollbar-track { background: var(--border); border-radius: 2px; }
        .table-scroll::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 2px; }

        /* MEMBER IMPORT */
        .import-modal { max-width: 980px; }
        .import-step-label {
            margin-top: 4px;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }
        .import-progress {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-bottom: 20px;
        }
        .import-progress-step {
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 9px 10px;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
            text-align: center;
        }
        .import-progress-step.active {
            border-color: var(--accent-glow);
            background: var(--accent-subtle);
            color: var(--accent);
        }
        .import-card {
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--surface);
            padding: 18px;
        }
        .import-card h3 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
            margin-bottom: 8px;
        }
        .import-card p {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }
        .import-upload-box {
            margin-top: 18px;
            border: 1px dashed var(--accent-glow);
            border-radius: 12px;
            padding: 24px;
            background: var(--accent-subtle);
        }
        .import-upload-box input { width: 100%; }
        .import-template-link {
            color: var(--accent);
            font-family: var(--type-family-body);
            font-size: var(--type-control-size);
            font-weight: var(--type-control-weight);
            line-height: var(--type-control-line);
            letter-spacing: 0;
            text-decoration: none;
        }
        .import-template-link:hover { text-decoration: underline; }
        .import-warning {
            margin-top: 14px;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid var(--warning-border);
            color: var(--warning);
            background: var(--warning-bg);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }
        .import-map-grid {
            display: grid;
            grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1fr);
            gap: 10px;
            align-items: center;
        }
        .import-map-label {
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-label-size);
            font-weight: var(--type-label-weight);
            line-height: var(--type-label-line);
            letter-spacing: var(--type-label-tracking);
            text-transform: uppercase;
        }
        .import-map-label small {
            display: block;
            margin-top: 2px;
            color: var(--text-muted);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            text-transform: none;
        }
        .import-map-label small.type-body-product {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }
        .import-map-grid .filter-select.type-body-product,
        .import-review-table .filter-select.type-body-product {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }
        .import-summary-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 14px;
        }
        .import-summary-card {
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px;
            background: var(--surface);
        }
        .import-summary-card .label {
            color: var(--text-muted);
            font-size: var(--type-label-size);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }
        .import-summary-card .value {
            margin-top: 4px;
            font-family: 'Space Grotesk', sans-serif;
            /* Deliberate literal: a compact densification of the stat-card
               value (metric-lg base), same call as the billing snapshot
               tiles — no role sits between title (1.125rem) and metric
               (1.5rem), and either would visibly move these cards. */
            font-size: 1.4rem;
            font-weight: 800;
        }
        .import-review-table {
            max-height: 420px;
            overflow: auto;
            border: 1px solid var(--border);
            border-radius: 10px;
        }
        .import-review-table table { min-width: 900px; }
        .import-review-table td {
            white-space: normal;
            vertical-align: top;
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }
        .import-review-table th {
            font-family: var(--type-family-body);
            font-size: var(--type-label-size);
            font-weight: var(--type-label-weight);
            line-height: var(--type-label-line);
            letter-spacing: var(--type-label-tracking);
        }
        .import-row-note {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }
        .import-action-select {
            min-width: 150px;
            padding: 8px 30px 8px 10px;
        }
        .import-success-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 18px;
        }
        .settings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px;
        }
        .settings-card {
            position: relative;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--surface-elevated);
            padding: 18px;
            overflow: visible;
        }
        .settings-card:focus-within {
            z-index: 5;
        }
        .settings-card--gym-profile {
            grid-column: span 2;
        }
        .settings-card--public-signup {
            grid-column: span 2;
        }
        .settings-card--waivers {
            grid-column: span 2;
        }
        .settings-card--waivers .waiver-settings-status {
            color: var(--text-secondary);
            margin-bottom: 16px;
        }
        .settings-card--waivers .waiver-settings-status strong {
            color: var(--text-primary);
            display: block;
            margin-bottom: 4px;
        }
        .settings-card--waivers .waiver-published-meta {
            display: block;
            color: var(--text-secondary);
            font-size: var(--type-body-compact-size);
            line-height: var(--type-body-compact-line);
            margin-top: 6px;
        }
        .settings-card--waivers .waiver-published-hash {
            display: block;
            color: var(--text-muted);
            font-size: var(--type-caption-size);
            margin-top: 4px;
            word-break: break-all;
        }
        .waiver-publish-ack {
            align-items: flex-start;
            display: flex;
            margin: 16px 0 0;
        }
        .waiver-publish-ack input {
            flex: 0 0 auto;
            margin-top: 3px;
        }
        .waiver-publish-ack span {
            margin-left: 10px;
        }
        #waiverPublishModal { z-index: 200; }
        #waiverPublishModal .btn { min-height: 44px; }
        #waiverPublishError { margin-top: 12px; }
        .waiver-settings-modal {
            max-width: 720px;
        }
        .waiver-settings-modal .modal-close {
            min-width: 44px;
            min-height: 44px;
            flex-shrink: 0;
        }
        .waiver-editor-status,
        .waiver-editor-error {
            font-size: var(--type-body-product-size);
            line-height: var(--type-body-product-line);
            margin-bottom: 16px;
            color: var(--text-secondary);
        }
        .waiver-editor-error {
            color: var(--error);
            background: var(--error-bg);
            border: 1px solid var(--error);
            border-radius: 8px;
            padding: 12px;
        }
        #waiverAgreementEditorHelp { margin-bottom: 8px; }
        #waiverUnsavedModal { z-index: 200; }
        #waiverUnsavedModal .modal-footer { flex-wrap: wrap; }
        #waiverUnsavedModal .btn { min-height: 44px; }
        .waiver-agreement-history {
            border-top: 1px solid var(--border);
            margin-top: 22px;
            padding-top: 18px;
        }
        .waiver-agreement-history-heading h3 {
            color: var(--text-primary);
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            margin: 0 0 4px;
        }
        .waiver-agreement-history-heading p {
            color: var(--text-secondary);
            font-size: var(--type-body-product-size);
            line-height: var(--type-body-product-line);
            margin: 0 0 12px;
        }
        .waiver-agreement-history-row {
            align-items: center;
            border-top: 1px solid var(--border);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 12px 0;
        }
        .waiver-agreement-history-meta {
            color: var(--text-secondary);
            font-size: var(--type-body-compact-size);
            line-height: var(--type-body-compact-line);
        }
        .waiver-agreement-history-actions {
            display: flex;
            flex: 0 0 auto;
        }
        .waiver-agreement-history-actions .btn + .btn {
            margin-left: 8px;
        }
        .waiver-agreement-guidance {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-secondary);
            margin-bottom: 18px;
            padding: 14px;
        }
        .waiver-agreement-guidance strong {
            color: var(--text-primary);
            display: block;
            margin-bottom: 4px;
        }
        .waiver-agreement-guidance p,
        .waiver-agreement-editor-help {
            color: var(--text-secondary);
            font-size: var(--type-body-product-size);
            line-height: var(--type-body-product-line);
            margin: 0;
        }
        .waiver-agreement-label-row {
            align-items: baseline;
            display: flex;
            justify-content: space-between;
        }
        .waiver-agreement-label-row span {
            color: var(--text-muted);
            flex: 0 0 auto;
            font-size: var(--type-caption-size);
            margin-left: 12px;
        }
        .waiver-agreement-label-row span.over-limit {
            color: var(--error);
        }
        #waiverAgreementDraftText {
            line-height: var(--type-body-line);
            min-height: 280px;
            resize: vertical;
        }
        .waiver-agreement-preview {
            border-top: 1px solid var(--border);
            margin-top: 22px;
            padding-top: 18px;
        }
        .waiver-agreement-preview-heading {
            align-items: center;
            color: var(--text-secondary);
            display: flex;
            font-size: var(--type-label-size);
            font-weight: var(--type-label-weight);
            justify-content: space-between;
            margin-bottom: 10px;
            text-transform: uppercase;
        }
        .waiver-preview-lang {
            min-height: 44px;
            min-width: 44px;
            padding: 4px 12px;
        }
        .waiver-preview-lang + .waiver-preview-lang {
            margin-left: 8px;
        }
        .waiver-preview-lang[aria-pressed="true"] {
            background: var(--info-bg);
            border-color: var(--accent);
            color: var(--text-primary);
        }
        #waiverAgreementPreviewNotice {
            margin-bottom: 10px;
        }
        .waiver-settings-modal-footer {
            justify-content: space-between;
        }
        .waiver-settings-primary-actions {
            display: flex;
        }
        .waiver-settings-primary-actions .btn + .btn {
            margin-left: 12px;
        }
        .settings-card h3 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
            margin-bottom: 8px;
        }
        .settings-card p {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            margin-bottom: 16px;
        }
        .settings-card select {
            width: 100%;
            max-width: 100%;
            min-width: 0;
        }
        .kiosk-manager {
            margin-top: 18px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--surface-elevated);
            overflow: hidden;
        }
        .kiosk-policy-card {
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--surface-elevated);
            overflow: hidden;
        }
        .kiosk-policy-header {
            padding: 18px;
            border-bottom: 1px solid var(--border);
        }
        .kiosk-policy-header h2 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-size);
            font-weight: var(--type-title-weight);
            line-height: var(--type-title-line);
            letter-spacing: 0;
            margin-bottom: 6px;
        }
        .kiosk-policy-form {
            padding: 18px;
            display: grid;
            gap: 12px;
        }
        .kiosk-policy-option {
            display: grid;
            gap: 10px;
            padding: 14px;
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-primary);
        }
        .kiosk-policy-option:focus-within { border-color: var(--border-focus); }
        .kiosk-policy-fields {
            display: grid;
            gap: 8px;
            padding-left: 24px;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }
        .kiosk-policy-fields[hidden] { display: none; }
        .kiosk-policy-fields input {
            width: 92px;
            margin: 0 4px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg-input, var(--bg));
            color: var(--text-primary);
            padding: 8px 10px;
            font: inherit;
        }
        .kiosk-policy-fields small { color: var(--text-muted); }
        .kiosk-policy-form > .btn { justify-self: start; }
        .kiosk-manager-header {
            padding: 18px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
        }
        .kiosk-manager-header h2 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-size);
            font-weight: var(--type-title-weight);
            line-height: var(--type-title-line);
            letter-spacing: 0;
            margin-bottom: 6px;
        }
        .kiosk-manager-header p {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            margin: 0;
        }
        .kiosk-create-form {
            padding: 18px;
            border-bottom: 1px solid var(--border);
            display: grid;
            grid-template-columns: minmax(220px, 1fr) auto;
            gap: 12px;
            align-items: end;
        }
        .kiosk-create-form label {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-label-size);
            font-weight: var(--type-label-weight);
            line-height: var(--type-label-line);
            letter-spacing: var(--type-label-tracking);
            text-transform: uppercase;
        }
        .kiosk-create-form input,
        .kiosk-onetime-url {
            width: 100%;
            margin-top: 6px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg-input, var(--bg));
            color: var(--text-primary);
            padding: 10px 12px;
            font: inherit;
        }
        .kiosk-onetime-panel {
            margin: 18px;
            padding: 16px;
            border: 1px solid var(--accent-glow);
            border-radius: 10px;
            background: var(--accent-subtle);
        }
        .kiosk-onetime-panel h3 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
            margin-bottom: 8px;
        }
        .kiosk-token-list {
            padding: 18px;
            display: grid;
            gap: 18px;
        }
        .kiosk-app-callout {
            margin: 18px 18px 0;
            padding: 14px 16px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.02);
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }
        .kiosk-app-callout strong {
            color: var(--text-primary);
        }
        .kiosk-app-callout p {
            margin: 8px 0 0;
        }
        .kiosk-app-callout img {
            display: block;
            margin-top: 10px;
        }
        .kiosk-token-section {
            display: grid;
            gap: 10px;
        }
        .kiosk-token-section-title {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
            color: var(--text-primary);
        }
        .kiosk-token-row {
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 14px;
            display: grid;
            grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1.5fr) auto;
            gap: 14px;
            align-items: flex-start;
        }
        .kiosk-token-label {
            font-weight: 700;
            color: var(--text-primary);
        }
        .kiosk-token-meta {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }
        .kiosk-token-purpose {
            color: var(--text-muted);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            margin-top: 6px;
        }
        .kiosk-status {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            padding: 3px 9px;
            font-size: var(--type-caption-size);
            font-weight: 700;
            margin-top: 8px;
            background: var(--success-bg);
            color: var(--success);
        }
        .kiosk-status.revoked {
            background: var(--error-bg);
            color: var(--danger);
        }
        .kiosk-token-actions {
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 8px;
        }
        .kiosk-token-help {
            color: var(--text-muted);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            text-align: right;
        }
        @media (max-width: 760px) {
            .kiosk-create-form,
            .kiosk-token-row {
                grid-template-columns: 1fr;
            }
            .kiosk-token-actions {
                justify-content: flex-start;
            }
            .kiosk-token-help {
                text-align: left;
            }
        }

        /* AI assistant access (Settings) — layout only; typography, color,
           and chrome come from the settings-card and kiosk-token components. */
        .settings-card--agent-access {
            grid-column: span 2;
        }
        .settings-card--agent-access .kiosk-token-row {
            min-width: 0;
            grid-template-columns: 1.2fr 1.5fr 1.5fr;
        }
        .settings-card--agent-access .kiosk-token-actions {
            min-width: 0;
        }
        @media (max-width: 900px) {
            .settings-card--agent-access .kiosk-token-row {
                grid-template-columns: 1fr;
            }
        }
        .agent-access-token-list {
            display: grid;
            gap: 12px;
            margin-top: 16px;
        }
        .agent-access-onetime-panel {
            margin: 16px 0 0;
        }
        .agent-access-onetime-field {
            display: grid;
            gap: 4px;
            margin-top: 12px;
        }
        .agent-access-onetime-field .type-label {
            color: var(--text-secondary);
        }

        .table-toolbar {
            padding: 16px 20px;
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
            border-bottom: 1px solid var(--border);
        }

        .search-input {
            flex: 1;
            min-width: 200px;
            padding: 8px 14px 8px 36px;
            background: var(--surface-input);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            outline: none;
            transition: border-color 0.15s;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: 12px center;
        }
        .search-input:focus { border-color: var(--accent); }
        .search-input::placeholder { color: var(--text-muted); }

        .filter-select {
            padding: 8px 32px 8px 12px;
            background: var(--surface-input);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            outline: none;
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
        }
        .filter-select:focus { border-color: var(--accent); }
        .filter-select option { background: var(--bg); }

        .classes-sort-toolbar .filter-select {
            min-width: 220px;
        }

        /* VIEW TOGGLE (List | Week segmented control) */
        .view-toggle {
            display: inline-flex;
            gap: 2px;
            padding: 3px;
            background: var(--surface-input);
            border: 1px solid var(--border);
            border-radius: 8px;
        }
        .view-toggle-btn {
            padding: 5px 14px;
            border: none;
            border-radius: 6px;
            background: none;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-control-sm-size);
            font-weight: var(--type-control-weight);
            cursor: pointer;
            transition: color 0.15s, background-color 0.15s;
        }
        .view-toggle-btn:hover { color: var(--text-primary); }
        .view-toggle-btn:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 1px;
        }
        .view-toggle-btn.active {
            background: var(--accent-subtle);
            color: var(--accent);
        }

        /* CLASSES WEEK BOARD */
        .week-board {
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
            gap: 10px;
            padding: 16px 20px 20px;
        }
        .week-day-name {
            padding-bottom: 8px;
            margin-bottom: 10px;
            border-bottom: 1px solid var(--border);
            font-size: var(--type-label-size);
            font-weight: 600;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .week-day-today .week-day-name {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }
        .week-slot {
            display: block;
            width: 100%;
            margin-bottom: 8px;
            padding: 8px 10px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            text-align: left;
            cursor: pointer;
            transition: border-color 0.15s;
        }
        .week-slot:hover { border-color: var(--border-focus); }
        .week-slot:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 1px;
        }
        .week-slot-time {
            display: block;
            font-size: var(--type-caption-size);
            font-weight: 600;
            letter-spacing: 0.3px;
            color: var(--text-secondary);
        }
        .week-slot-name {
            display: block;
            margin-top: 2px;
            /* Space Grotesk at product scale per DESIGN.md §5 Week Board:
               size token only, display face deliberately off body-product. */
            font-family: 'Space Grotesk', sans-serif;
            font-size: var(--type-body-product-size);
            font-weight: 600;
            line-height: 1.3;
            color: var(--text-primary);
            -webkit-hyphens: auto;
            hyphens: auto;
            overflow-wrap: break-word;
        }
        .week-slot-kids {
            display: inline-block;
            margin-top: 6px;
            padding: 1px 7px;
            border-radius: 10px;
            background: var(--info-bg);
            color: var(--info);
            font-size: var(--type-label-size);
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        .week-board-empty {
            padding: 40px 20px;
            text-align: center;
        }
        .week-board-empty h3 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-size);
            font-weight: var(--type-title-weight);
            line-height: var(--type-title-line);
            letter-spacing: 0;
            margin-bottom: 6px;
        }
        .week-board-empty p {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            color: var(--text-secondary);
        }
        .week-board-footnote {
            padding: 0 20px 16px;
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            color: var(--text-muted);
        }

        /* PAST CLASSES MONTH VIEW */
        .occ-month-grid {
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
            gap: 6px;
        }
        .occ-month-dow {
            padding: 0 2px 6px;
            font-size: var(--type-label-size);
            font-weight: 600;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .occ-month-cell {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            min-height: 74px;
            padding: 8px 10px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            text-align: left;
            cursor: pointer;
            transition: border-color 0.15s;
        }
        .occ-month-cell:hover { border-color: var(--border-focus); }
        .occ-month-cell:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 1px;
        }
        .occ-month-daynum {
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: 600;
            line-height: var(--type-caption-line);
            letter-spacing: 0;
            color: var(--text-secondary);
        }
        .occ-month-today .occ-month-daynum { color: var(--accent); }
        .occ-month-checkins {
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: 600;
            line-height: var(--type-caption-line);
            letter-spacing: 0;
            color: var(--text-primary);
        }
        .occ-month-classes {
            font-size: var(--type-caption-size);
            color: var(--text-secondary);
        }
        .occ-month-none {
            font-size: var(--type-caption-size);
            color: var(--text-muted);
        }
        .occ-month-none-zero { display: none; }
        .occ-month-ambiguous {
            display: inline-block;
            width: 7px;
            height: 7px;
            margin-left: 5px;
            border-radius: 50%;
            background: var(--warning);
        }
        @media (max-width: 768px) {
            .occ-month-cell {
                min-height: 48px;
                padding: 6px;
                gap: 1px;
            }
            .occ-month-checkins { font-size: var(--type-body-compact-size); }
            .occ-month-unit,
            .occ-month-classes,
            .occ-month-none-word { display: none; }
            .occ-month-none {
                font-size: var(--type-body-compact-size);
                font-weight: 600;
            }
            .occ-month-none-zero { display: inline; }
        }
        /* In the 1081-1240px band, seven columns fit but run tight for real
           class names; compact the slot type slightly so wraps stay at word
           boundaries. */
        @media (max-width: 1240px) and (min-width: 1081px) {
            .week-slot { padding: 7px 8px; }
            .week-slot-name { font-size: var(--type-body-compact-size); }
            .week-slot-time { font-size: var(--type-caption-size); }
        }
        /* Below 1080px, seven columns cannot fit realistic class names next
           to the 240px sidebar without mid-word breaks — the board reads
           better as a per-day agenda. Legibility-driven threshold, from
           measurement, deliberately unrelated to the 768px layout
           breakpoints. */
        @media (max-width: 1080px) {
            .week-board {
                display: block;
                padding: 12px 16px 16px;
            }
            .week-day {
                margin-bottom: 18px;
            }
            .week-day:last-child { margin-bottom: 0; }
            .week-day-blank { display: none; }
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        thead th {
            text-align: left;
            padding: 12px 16px;
            font-size: var(--type-label-size);
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            border-bottom: 1px solid var(--border);
            white-space: nowrap;
        }

        tbody tr {
            cursor: pointer;
            transition: background 0.1s;
        }
        tbody tr:hover { background: var(--surface-hover); }

        tbody td {
            padding: 14px 16px;
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            border-bottom: 1px solid var(--border-subtle);
            white-space: nowrap;
        }

        .member-name {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .member-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--accent-subtle);
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Space Grotesk', sans-serif;
            /* Deliberately not tokenized: avatar initials are component-local
               sizing per the DESIGN.md §3 exception list, not a text tier. */
            font-size: 0.75rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        .member-info .name { font-weight: 600; }
        .member-info .email {
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--text-secondary);
        }
        .member-info .name.type-body-product {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: 600;
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }
        .member-info .email.type-body-compact,
        .qa-member-sub.type-body-compact {
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }

        /* STATUS BADGES */
        .badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 20px;
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
            text-transform: capitalize;
        }
        .badge.type-caption,
        .plan-badge.type-caption,
        .waiver-badge.type-caption {
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
        }

        .badge-active { background: var(--success-bg); color: var(--success); }
        .badge-inactive { background: var(--surface-hover); color: var(--text-secondary); }
        .badge-frozen { background: var(--info-bg); color: var(--info); }
        .badge-expired { background: var(--error-bg); color: var(--danger); }
        .badge-cancelled { background: var(--error-bg); color: var(--danger); }
        .badge-trial { background: var(--warning-bg); color: var(--warning); }
        .badge-processing { background: var(--info-bg); color: var(--info); box-shadow: inset 0 0 0 1px var(--info-border); }

        .badge::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
        }

        .plan-badge {
            padding: 3px 10px;
            border-radius: 6px;
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
            background: var(--bg);
            border: 1px solid var(--border);
            color: var(--text-secondary);
        }

        /* Plan chip + price on the member detail grid: flex with margin
           spacing (not gap — keeps the flexbox-gap compat baseline flat)
           so a wrapped price line clears the chip instead of crowding it. */
        .plan-line {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        .plan-line > * {
            margin: 2px 8px 2px 0;
        }

        /* PAGINATION */
        .table-footer {
            padding: 12px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--border);
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
            color: var(--text-secondary);
        }
        .table-footer > .type-caption {
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
        }

        .pagination {
            display: flex;
            gap: 4px;
        }

        .pagination button {
            padding: 6px 10px;
            background: var(--surface-input);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-secondary);
            cursor: pointer;
            font-family: var(--type-family-body);
            font-size: var(--type-control-sm-size);
            font-weight: var(--type-control-weight);
            line-height: var(--type-control-line);
            letter-spacing: 0;
            transition: all 0.15s;
        }
        .pagination button.type-control-sm {
            font-family: var(--type-family-body);
            font-size: var(--type-control-sm-size);
            font-weight: var(--type-control-weight);
            line-height: var(--type-control-line);
            letter-spacing: 0;
        }
        .pagination button:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); }
        .pagination button:disabled { opacity: 0.4; cursor: default; }
        .pagination button.active { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }

        /* MODAL */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(4px);
            z-index: 100;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            /* Push modal above iOS home indicator */
            padding-bottom: max(20px, env(safe-area-inset-bottom));
        }
        .modal-overlay.show { display: flex; }

        /* Confirmations must sit above the editor that opened them. */
        #confirmModal { z-index: 200; }

        .modal {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 16px;
            width: 100%;
            max-width: 640px;
            max-height: 90vh; /* fallback for browsers without dvh */
            max-height: calc(100dvh - 40px); /* dynamic viewport: excludes iOS Safari chrome */
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }

        .modal-header h2 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-size);
            font-weight: var(--type-title-weight);
            line-height: var(--type-title-line);
            letter-spacing: 0;
        }

        .modal-header h2.type-title {
            font-family: var(--type-family-display);
            font-size: var(--type-title-size);
            font-weight: var(--type-title-weight);
            line-height: var(--type-title-line);
            letter-spacing: 0;
        }

        .modal-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            /* Deliberately not tokenized: a close (×) symbol scaled to its
               hit target — a glyph, not product text, like .os-connector. */
            font-size: 1.2rem;
            line-height: 1;
        }
        .modal-close:hover { color: var(--text-primary); }

        .modal-body {
            padding: 24px;
            overflow-y: auto;
            flex: 1;
            min-height: 0;
            overscroll-behavior: contain;
        }

        .modal-footer {
            padding: 16px 24px;
            /* Extra bottom padding absorbs iOS home indicator within the safe zone */
            padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            flex-shrink: 0;
        }

        /* FORM */
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .form-group.full-width { grid-column: 1 / -1; }

        .form-group label {
            font-family: var(--type-family-body);
            font-size: var(--type-label-size);
            font-weight: var(--type-label-weight);
            line-height: var(--type-label-line);
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: var(--type-label-tracking);
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            padding: 10px 14px;
            background: var(--surface-input);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            outline: none;
            transition: border-color 0.15s;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus { border-color: var(--accent); }

        .plan-more-options {
            grid-column: 1 / -1;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
        }

        .plan-more-options summary {
            cursor: pointer;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-control-size);
            font-weight: var(--type-control-weight);
            line-height: var(--type-control-line);
            letter-spacing: 0;
            padding: 12px 14px;
        }

        .plan-more-options summary:hover { color: var(--text-primary); }

        .plan-more-options-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            padding: 0 14px 14px;
        }

        .form-group select { cursor: pointer; }
        .form-group select option { background: var(--bg); }
        .form-group textarea { resize: vertical; min-height: 80px; }

        .form-section-title {
            grid-column: 1 / -1;
            font-family: var(--type-family-body);
            font-size: var(--type-label-size);
            font-weight: var(--type-label-weight);
            line-height: var(--type-label-line);
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: var(--type-label-tracking);
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }

        .form-hint {
            margin: -8px 0 0;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }

        .form-hint.type-body-product {
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
        }

        .form-hint.full-width { grid-column: 1 / -1; }

        .member-online-payment-panel {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;
            padding: 12px 14px;
            background: var(--surface-hover);
            border-radius: 8px;
        }

        .member-online-payment-panel[hidden],
        #memberOnlinePaymentActionBtn[hidden],
        #memberSaveAndSetUpPaymentsBtn[hidden] {
            display: none !important;
        }

        .member-online-payment-copy {
            min-width: 0;
        }

        .member-online-payment-copy strong {
            color: var(--text-primary);
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
        }

        .member-online-payment-copy p {
            margin-top: 4px;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
        }

        .member-online-payment-panel .btn {
            flex-shrink: 0;
            margin-left: 12px;
        }

        /* PLAN CARDS */
        .plans-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
        }

        .plan-card {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 24px;
            transition: all 0.2s;
            position: relative;
        }
        .plan-card:hover { border-color: var(--border-focus); }
        .plan-card.inactive { opacity: 0.5; }

        .plan-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
        }

        .plan-card h3 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-size);
            font-weight: var(--type-title-weight);
            line-height: var(--type-title-line);
            letter-spacing: 0;
        }

        /* Consumes the price-card size/weight tokens but deliberately no
           line-height token: the block never declared one, and adopting the
           role's 1.1 would move the rendered price line. */
        .plan-price {
            font-family: var(--type-family-display);
            font-size: var(--type-price-card-size);
            font-weight: var(--type-price-card-weight);
            color: var(--accent);
        }

        .plan-price .period {
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            color: var(--text-secondary);
        }

        .plan-description {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            color: var(--text-secondary);
            margin: 12px 0 16px;
        }

        .plan-features {
            list-style: none;
            margin-bottom: 16px;
        }

        .plan-features li {
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--text-secondary);
            padding: 4px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .plan-features li::before {
            content: '';
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--accent);
            flex-shrink: 0;
        }

        .plan-payment-panel {
            margin-top: 14px;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .plan-payment-copy {
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 100%;
        }

        .plan-payment-copy strong {
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        .plan-payment-copy span {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }

        .plan-earlier-price-copy {
            margin-top: 14px;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }

        /* Status chip, not a button: tinted semantic background + current-color
           dot per the design system's Chips spec. Borderless so it can't read
           as a clickable control. */
        strong.plan-payment-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            align-self: flex-start;
            max-width: 100%;
            padding: 4px 10px;
            border-radius: 999px;
            background: var(--surface-hover);
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: 600;
            line-height: 1.2;
            white-space: normal;
        }

        strong.plan-payment-badge::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
            flex-shrink: 0;
        }

        strong.plan-payment-badge.is-online {
            background: var(--success-bg);
            color: var(--success);
        }

        .plan-payment-panel .btn {
            white-space: normal;
            max-width: 100%;
            text-align: left;
        }

        .plan-payment-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        .public-signup-owner-panel,
        .public-signup-pending-panel {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 18px 20px;
            margin-bottom: 16px;
        }

        .public-signup-owner-main {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
        }

        .public-signup-owner-main h2 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
            margin-bottom: 4px;
        }

        .public-signup-owner-main p {
            margin: 0;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            max-width: 620px;
        }

        .public-signup-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-control-size);
            font-weight: var(--type-control-weight);
            line-height: 1.3;
            letter-spacing: 0;
            cursor: pointer;
        }

        .public-signup-toggle input {
            width: 18px;
            height: 18px;
            accent-color: var(--accent);
            flex-shrink: 0;
        }

        .public-signup-owner-actions {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 14px;
        }

        .public-signup-owner-actions span {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }

        /* Consequential guidance (the public link is dead until fixed), so
           body-product per the W3 contract, not the passive-hint size. */
        .public-signup-listing-hint {
            margin: 12px 0 0;
            padding: 8px 10px;
            border: 1px solid var(--warn-border);
            border-radius: 8px;
            background: var(--warn-bg);
            color: var(--warn-text);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        .public-signup-url {
            display: block;
            width: 100%;
            margin-top: 12px;
            padding: 8px 10px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Mixed-case field labels in the share modal: body-product size with
           the local 700 weight kept — the label role would impose uppercase,
           a far larger change than a size migration. */
        .public-signup-share-modal label {
            display: block;
            margin: 16px 0 6px;
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: 700;
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        .public-signup-share-help {
            margin: 0;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        .public-signup-share-code {
            display: block;
            width: 100%;
            min-height: 108px;
            margin: 0 0 8px;
            padding: 10px;
            resize: vertical;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            color: var(--text-primary);
            /* Deliberate literal: a monospace embed-snippet box, and DESIGN.md
               declares no monospace role, so there is no honest token for it.
               The font: shorthand also resets font-style/variant/weight to
               their initial values; splitting it to consume a size token would
               drop those resets for no design-system gain. */
            font: 0.78rem/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        }

        .public-signup-plan-panel {
            border-top: 1px solid var(--border);
            padding-top: 14px;
        }

        .plan-public-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        .plan-setup-checklist {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 18px 20px;
            margin-bottom: 16px;
        }

        .plan-setup-checklist-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }

        .plan-setup-checklist-header h2 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
            margin-bottom: 4px;
        }

        .plan-setup-checklist-header p {
            margin: 0;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            max-width: 620px;
        }

        .plan-setup-steps {
            display: flex;
            flex-direction: column;
            margin-top: 10px;
        }

        .plan-setup-step {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            border-top: 1px solid var(--border);
        }

        .plan-setup-step:first-child { border-top: 0; }

        .plan-setup-step.done { opacity: 0.55; }

        .plan-setup-step .os-circle {
            width: 30px;
            height: 30px;
            /* Deliberately not tokenized: a step-number glyph scaled to its
               30px circle — component-local sizing, like avatar initials. */
            font-size: 0.8rem;
        }

        .plan-setup-step-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            flex: 1;
        }

        .plan-setup-step-text strong {
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        .plan-setup-step-text span {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }

        .plan-setup-step .os-btn {
            margin-top: 0;
        }

        .plan-setup-target-flash {
            outline: 2px solid var(--accent);
            outline-offset: 3px;
        }

        @media (max-width: 640px) {
            .plan-setup-step {
                flex-wrap: wrap;
            }

            .plan-setup-step .os-btn {
                width: 100%;
                margin-left: 42px;
                min-height: 44px;
            }
        }

        .public-signup-pending-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 14px;
        }

        .public-signup-pending-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
            padding: 12px 0;
            border-top: 1px solid var(--border);
        }

        .public-signup-pending-row:first-child {
            border-top: 0;
            padding-top: 0;
        }

        .public-signup-pending-row > div:first-child {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
        }

        .public-signup-pending-row strong {
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        .public-signup-pending-row span {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }

        .public-signup-pending-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .plan-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            padding-top: 16px;
            border-top: 1px solid var(--border);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--text-muted);
        }

        .plan-meta-summary {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .plan-meta-summary span {
            white-space: nowrap;
        }

        .plan-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        @media (max-width: 640px) {
            .plan-payment-panel {
                align-items: stretch;
            }

            .public-signup-owner-panel,
            .public-signup-pending-panel {
                padding: 16px;
            }

            .public-signup-owner-main,
            .public-signup-pending-row {
                align-items: stretch;
            }

            .public-signup-toggle,
            .public-signup-owner-actions,
            .public-signup-pending-actions,
            .plan-public-actions,
            .plan-payment-actions {
                width: 100%;
            }

            .public-signup-pending-actions .btn {
                flex: 1 1 120px;
            }

            .plan-public-actions .btn,
            .plan-payment-actions .btn {
                flex: 1 1 150px;
            }
        }

        /* MEMBER DETAIL PANEL */
        .detail-panel {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 24px;
        }

        .trial-assignment-panel {
            padding: 18px 24px;
        }

        .trial-assignment-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            margin-bottom: 12px;
        }

        .trial-assignment-header h3 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
            margin: 2px 0 0;
        }

        .trial-assignment-label {
            color: var(--warning);
            font-size: var(--type-label-size);
            font-weight: 700;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        .trial-assignment-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            flex-wrap: wrap;
        }

        .trial-assignment-body {
            color: var(--text-secondary);
            display: grid;
            gap: 6px;
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        .detail-header {
            padding: 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 16px;
        }

        .detail-profile {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .detail-avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: var(--accent-subtle);
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--type-family-display);
            /* Deliberately not tokenized: avatar initials are component-local
               sizing per the DESIGN.md §3 exception list, not a text tier. */
            font-size: 1.2rem;
            font-weight: 700;
        }

        .detail-name {
            font-family: var(--type-family-display);
            font-size: var(--type-title-size);
            font-weight: var(--type-title-weight);
            line-height: var(--type-title-line);
            letter-spacing: 0;
        }

        .detail-email {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            color: var(--text-secondary);
        }

        .detail-body {
            padding: 24px;
        }

        .detail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }

        .detail-field label {
            display: block;
            font-size: var(--type-label-size);
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 4px;
        }

        .detail-field .value {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            color: var(--text-primary);
        }

        /* EMPTY STATE */
        .empty-state {
            text-align: center;
            padding: 64px 32px;
        }

        .empty-state svg {
            width: 48px;
            height: 48px;
            color: var(--text-muted);
            margin-bottom: 16px;
        }

        .empty-state h3 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-size);
            font-weight: var(--type-title-weight);
            line-height: var(--type-title-line);
            letter-spacing: 0;
            margin-bottom: 8px;
        }

        .empty-state p {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            color: var(--text-secondary);
            margin-bottom: 20px;
        }

        /* TOAST */
        .toast-container {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 200;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .toast {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 20px;
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            display: flex;
            align-items: center;
            gap: 10px;
            animation: slideIn 0.3s ease;
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
        }

        .toast.success { border-left: 3px solid var(--success); }
        .toast.info { border-left: 3px solid var(--info); }
        .toast.error { border-left: 3px solid var(--danger); }

        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        /* LOADING */
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid var(--border);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }

        @keyframes spin { to { transform: rotate(360deg); } }

        .loading-overlay {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 48px;
        }

        /* Applied to an already-rendered .page-content while it refetches
           (loadPlans/loadBeltRanks), instead of blanking it to a spinner.
           Keeps existing content visible and at full height -- no scroll
           clamp -- while signalling that a refresh is in progress. */
        .page-content-refreshing {
            opacity: 0.55;
            pointer-events: none;
            transition: opacity 0.15s ease;
        }

        /* CONFIRM DIALOG */
        .confirm-dialog {
            max-width: 400px;
        }

        .confirm-dialog .modal-body p {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            color: var(--text-secondary);
            line-height: 1.6;
        }

        .member-code-modal-body {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .member-code-display {
            color: var(--text-primary);
            font-family: var(--type-family-display);
            /* Deliberately not tokenized: a check-in code sized to be read
               aloud across a desk. No token equivalent — price-card and
               price-hero are price roles, not a size ladder to borrow from. */
            font-size: 2rem;
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: 0.08em;
            user-select: text;
        }

        .member-code-helper {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        /* BELT RANK VISUAL */
        .belt-color-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.2);
            flex-shrink: 0;
        }

        .belt-visual {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .belt-bar {
            height: 22px;
            width: 80px;
            border-radius: 4px;
            position: relative;
            border: 1px solid rgba(255,255,255,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
        }

        .belt-bar .stripe-tick {
            width: 2px;
            height: 14px;
            background: var(--accent);
            border-radius: 1px;
        }

        .belt-bar.white-belt {
            border-color: rgba(0,0,0,0.3);
        }

        .belt-bar.white-belt .stripe-tick {
            background: var(--border-strong);
        }

        .belt-hierarchy-card {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            transition: all 0.2s;
        }
        .belt-hierarchy-card:hover { border-color: var(--border-focus); }

        .belt-hierarchy-number {
            /* Size-only: a position-ordinal numeral, so the metric size by
               function — but its display face and 700 weight are deliberate
               (metric's tuple is DM Sans tabular-nums), so only the size
               token applies. */
            font-family: 'Space Grotesk', sans-serif;
            font-size: var(--type-metric-size);
            font-weight: 700;
            color: var(--text-muted);
            width: 36px;
            text-align: center;
        }

        .belt-hierarchy-swatch {
            width: 48px;
            height: 24px;
            border-radius: 6px;
            border: 2px solid rgba(255,255,255,0.15);
        }

        .belt-hierarchy-info {
            flex: 1;
        }

        .belt-hierarchy-info h4 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
        }

        .belt-hierarchy-info p {
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--text-secondary);
            margin-top: 2px;
        }

        .belt-rank-guideline-muted {
            color: var(--text-muted);
        }

        .belt-rank-guidelines-arrival {
            max-width: 760px;
            margin-bottom: 24px;
            padding: 16px 20px;
            border: 1px solid var(--info-border);
            border-radius: 12px;
            background: var(--info-bg);
        }

        .belt-rank-guidelines-arrival h2 {
            margin-bottom: 6px;
            color: var(--text-primary);
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
        }

        /* Consequential guidance (how promotion suggestions get configured),
           so body-product per the W3 contract, not the passive-hint size. */
        .belt-rank-guidelines-arrival p {
            max-width: 68ch;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        .belt-rank-guidelines-arrival strong {
            color: var(--text-primary);
            font-weight: 700;
        }

        .belt-hierarchy-actions {
            display: flex;
            gap: 8px;
        }

        .belt-rank-ladders {
            max-width: 760px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .belt-rank-ladder-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .belt-rank-ladder-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }

        .belt-rank-ladder-title {
            font-family: var(--type-family-display);
            font-size: var(--type-title-size);
            font-weight: var(--type-title-weight);
            line-height: var(--type-title-line);
            letter-spacing: 0;
            color: var(--text-primary);
        }

        .belt-rank-ladder-meta {
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--text-secondary);
            margin-top: 2px;
        }

        .belt-rank-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .belt-rank-card-controls {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .belt-rank-reorder-controls {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .belt-rank-context {
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg);
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        .promotion-card {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            transition: border-color 0.2s;
        }
        .promotion-card:hover { border-color: var(--border-focus); }

        .promotion-card .member-info-col {
            flex: 1;
        }

        .promotion-card .promotion-detail {
            text-align: right;
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--text-secondary);
        }

        .worth-a-look-panel {
            background: rgba(255,255,255,0.025);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 18px;
        }
        .worth-a-look-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
        }
        .worth-a-look-header h3 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
            margin-bottom: 3px;
        }
        .worth-a-look-header p {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }
        .worth-a-look-list {
            display: flex;
            flex-direction: column;
        }
        .worth-a-look-row {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 20px;
            cursor: pointer;
            border-bottom: 1px solid rgba(255,255,255,0.045);
        }
        .worth-a-look-row:last-child { border-bottom: 0; }
        .worth-a-look-row:hover { background: rgba(255,255,255,0.025); }
        .worth-a-look-main {
            flex: 1;
            min-width: 0;
        }
        .worth-a-look-name {
            font-weight: 600;
            margin-bottom: 3px;
        }
        .worth-a-look-subtext {
            color: var(--text-muted);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }
        .worth-a-look-chip {
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
            padding: 4px 9px;
            white-space: nowrap;
            background: var(--bg-primary);
        }
        .worth-a-look-belt {
            gap: 6px;
        }

        .worth-a-look-belt .belt-bar {
            width: 44px;
            height: 16px;
        }

        .worth-a-look-belt .stripe-tick {
            height: 10px;
        }

        .worth-a-look-belt-label {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: 600;
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        .worth-a-look-muted {
            color: var(--text-muted);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }

        .worth-a-look-empty {
            color: var(--text-muted);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            padding: 18px 20px;
        }

        .ready-review-panel {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 18px;
        }

        .ready-review-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
        }

        .ready-review-header h3 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
            margin-bottom: 3px;
        }

        .ready-review-header p {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }

        .ready-review-filters {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .ready-review-list {
            display: flex;
            flex-direction: column;
        }

        .ready-review-row {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 20px;
            cursor: pointer;
            border-bottom: 1px solid rgba(255,255,255,0.045);
        }

        .ready-review-row:last-child { border-bottom: 0; }
        .ready-review-row:hover { background: rgba(255,255,255,0.025); }

        .ready-review-main {
            flex: 1;
            min-width: 0;
        }

        .ready-review-name {
            font-weight: 600;
            margin-bottom: 3px;
        }

        .ready-review-meta {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            margin-bottom: 3px;
        }

        .ready-review-subtext,
        .ready-review-muted {
            color: var(--text-muted);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }

        .ready-review-rank {
            min-width: 150px;
        }

        .ready-review-belt {
            gap: 6px;
        }

        .ready-review-belt .belt-bar {
            width: 50px;
            height: 18px;
        }

        .ready-review-belt .stripe-tick {
            height: 12px;
        }

        .ready-review-belt-label {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: 600;
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        .ready-review-empty {
            color: var(--text-muted);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            padding: 18px 20px;
        }

        .ready-review-empty .btn {
            margin-left: 10px;
        }

        .member-readiness-panel {
            overflow: hidden;
        }

        .member-readiness-header {
            padding: 16px 24px;
            border-bottom: 1px solid var(--border);
        }

        .member-readiness-header h3 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
        }

        .member-readiness-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 16px 24px;
        }

        .member-readiness-card {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .member-readiness-topline {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        .member-readiness-program {
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 6px;
        }

        .member-readiness-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }

        .member-readiness-belt .belt-bar {
            width: 50px;
            height: 18px;
        }

        .member-readiness-belt .stripe-tick {
            height: 12px;
        }

        .member-readiness-belt span {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: 600;
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            color: var(--text-primary);
        }

        .member-readiness-lines {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .member-readiness-line {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        .member-readiness-line strong {
            color: var(--text-primary);
            font-weight: 700;
            white-space: nowrap;
        }

        .member-readiness-note,
        .member-readiness-muted {
            color: var(--text-muted);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }

        .member-readiness-setup-link {
            appearance: none;
            border: 0;
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            font: inherit;
            /* Size-only: a button by element but styled as an inline text
               link — the control role's 600 weight would change its voice. */
            font-size: var(--type-control-size);
            padding: 0;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .member-readiness-setup-link:hover {
            color: var(--text-primary);
        }

        .member-readiness-flag {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            padding-top: 4px;
        }

        .member-readiness-flagged {
            justify-content: space-between;
            border-top: 1px solid var(--border);
            padding-top: 12px;
        }

        .member-readiness-flag-title {
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: 700;
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        .member-readiness-flag-note {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            margin-top: 2px;
        }

        .member-readiness-note-input {
            min-width: 180px;
            flex: 1;
            max-width: 360px;
            background: var(--surface);
            color: var(--text-primary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 8px 10px;
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        .promotion-timeline {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .promotion-timeline-item {
            display: flex;
            gap: 16px;
            padding: 12px 16px;
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 10px;
        }

        .promotion-timeline-item .belt-col {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .promotion-timeline-item .detail-col {
            flex: 1;
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            color: var(--text-secondary);
        }

        .promotion-timeline-item .detail-col .promoted-by {
            font-weight: 600;
            color: var(--text-primary);
        }

        .waiver-status-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 16px 20px;
            border-top: 1px solid var(--border);
            background: rgba(255,255,255,0.015);
        }

        .waiver-status-card .waiver-title {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
            margin-bottom: 6px;
        }

        .waiver-status-card .help-title-row {
            display: flex;
            margin-bottom: 6px;
        }

        .waiver-status-card .help-title-row .waiver-title {
            margin-bottom: 0;
        }

        .waiver-status-card .waiver-meta {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            margin-top: 6px;
        }

        .waiver-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .waiver-actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }

        .waiver-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            padding: 4px 10px;
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
            border: 1px solid transparent;
        }

        .waiver-badge-missing {
            color: var(--info);
            background: var(--info-bg);
            border-color: var(--info-border);
        }

        .waiver-badge-signed {
            color: var(--success);
            background: var(--success-bg);
            border-color: var(--success-border);
        }

        .waiver-summary-card {
            border: 1px solid var(--info-border);
            background: var(--info-bg);
        }

        .waiver-summary-card .label {
            color: var(--text-secondary);
        }

        .waiver-summary-card .value {
            color: var(--info);
        }

        .waiver-link-modal .waiver-member-name {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
            margin-bottom: 4px;
        }

        .waiver-link-modal .waiver-member-email,
        .waiver-link-modal .waiver-helper {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        .waiver-link-box {
            margin-top: 16px;
            padding: 12px 14px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface-input);
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            word-break: break-all;
        }

        .waiver-record-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }

        .waiver-record-field {
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px;
            background: rgba(255,255,255,0.015);
        }

        .waiver-record-field.full-width {
            grid-column: 1 / -1;
        }

        .waiver-record-field label {
            display: block;
            color: var(--text-muted);
            font-size: var(--type-label-size);
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 6px;
        }

        .waiver-record-value {
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            word-break: break-word;
        }

        .waiver-record-signature {
            min-height: 48px;
            /* Size-only: the signature keeps its deliberate display face at
               body size — adopting the body family would change its voice. */
            font-family: var(--type-family-display);
            font-size: var(--type-body-size);
        }

        .waiver-record-text {
            display: flex;
            flex-direction: column;
            gap: 10px;
            color: var(--text-secondary);
        }

        /* Secondary annotations on the waiver record (placeholder-copy note).
           Caption role per DESIGN.md typography. */
        .waiver-record-caption {
            margin-top: 8px;
            color: var(--text-muted);
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
        }

        /* The retained snapshot's sha256 — caption role, and break-all so the
           64-hex-char value never overflows the field. Declared after
           .waiver-record-value so the caption sizing wins at equal
           specificity. */
        .waiver-record-hash {
            color: var(--text-secondary);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
            word-break: break-all;
        }

        .nav-section-label {
            font-size: var(--type-label-size);
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            padding: 16px 12px 4px;
        }

        /* RESPONSIVE */
        @media (min-width: 769px) {
            /* Desktop: keep overflow-x hidden to prevent stray horizontal scrollbars */
            body { overflow-x: hidden; }
        }

        @media (max-width: 768px) {
            /* dvh handles Safari UI chrome (address bar, toolbar) dynamically */
            .sidebar { transform: translateX(-100%); height: 100dvh; }
            .sidebar.open { transform: translateX(0); height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
            .sidebar-toggle { display: block; }
            .sidebar-overlay.open { display: block; }
            .sidebar-close { display: block; }
            .main { margin-left: 0; min-width: 0; overflow-x: hidden; }
            body.preview-mode .page-content {
                padding-bottom: calc(96px + env(safe-area-inset-bottom));
            }
            .page-header {
                padding: 16px;
                padding-top: var(--hamburger-zone);
                padding-left: var(--hamburger-zone);
            }
            .help-tip-popover {
                box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
            }
            .action-menu {
                box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
            }
            .page-content { padding: 16px; }
            .members-page-actions {
                justify-content: flex-start;
                width: 100%;
            }
            .members-page-actions .btn {
                justify-content: center;
            }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .form-grid { grid-template-columns: 1fr; }
            .modal-footer .btn { min-height: 44px; }
            #memberModal .modal-footer {
                flex-direction: column-reverse;
            }
            #memberModal .modal-footer .btn,
            .member-online-payment-panel .btn {
                justify-content: center;
                width: 100%;
            }
            .member-online-payment-panel {
                align-items: stretch;
                flex-direction: column;
            }
            .member-online-payment-panel .btn {
                margin-left: 0;
                margin-top: 12px;
            }
            .table-toolbar { flex-direction: column; }
            .search-input { width: 100%; }
            .classes-sort-toolbar {
                align-items: stretch;
                width: min(100%, calc(100vw - 32px));
                box-sizing: border-box;
            }
            .classes-sort-toolbar .filter-select {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }
            .import-progress { grid-template-columns: 1fr 1fr; }
            .import-map-grid { grid-template-columns: 1fr; }
            .import-summary-grid { grid-template-columns: 1fr 1fr; }
            .settings-card--gym-profile,
            .settings-card--public-signup,
            .settings-card--waivers,
            .settings-card--agent-access { grid-column: auto; }
            .waiver-settings-modal-footer,
            .waiver-settings-primary-actions {
                align-items: stretch;
                flex-direction: column-reverse;
                width: 100%;
            }
            .waiver-settings-modal-footer .btn { width: 100%; }
            .waiver-settings-primary-actions .btn + .btn { margin-left: 0; }
            .waiver-settings-primary-actions .btn:first-child { margin-top: 12px; }
            .import-modal .modal-footer { flex-direction: column-reverse; }
            .import-modal .modal-footer .btn { width: 100%; }
            .waiver-link-modal .modal-footer { flex-direction: column-reverse; }
            .waiver-link-modal .modal-footer .btn { width: 100%; }
            .waiver-offline-modal .modal-footer { flex-direction: column-reverse; }
            .waiver-offline-modal .modal-footer .btn { width: 100%; }
            .waiver-record-grid { grid-template-columns: 1fr; }
            .plans-grid { grid-template-columns: 1fr; }
            .detail-grid { grid-template-columns: 1fr 1fr; }
            .waiver-status-card { align-items: flex-start; flex-direction: column; }
            .waiver-actions { width: 100%; justify-content: flex-start; }
            .waiver-actions .btn { min-height: 44px; }
            .waiver-agreement-history-row { flex-wrap: wrap; }
            .waiver-agreement-history-actions .btn { min-height: 44px; padding: 10px 14px; }
            .ready-review-header {
                flex-direction: column;
            }
            .ready-review-filters,
            .ready-review-filters .filter-select {
                width: 100%;
            }
            .ready-review-row {
                align-items: flex-start;
                flex-wrap: wrap;
            }
            .ready-review-main {
                flex-basis: calc(100% - 54px);
            }
            .ready-review-rank {
                min-width: 0;
                width: 100%;
                padding-left: 54px;
            }
            /* The Review button sits inside a row that itself navigates to
               member detail, so on touch it needs a full-size target with
               clearance from the row's tap surface — a near-miss must not
               silently become a navigation. 44px floor per the house
               touch-target rule (same as the task checkbox hit area). */
            .ready-review-row .btn {
                margin-left: 54px;
                margin-top: 6px;
                min-height: 44px;
                padding: 10px 18px;
            }
        }

        @media (max-width: 480px) {
            .stats-grid { grid-template-columns: 1fr; }
            .detail-grid { grid-template-columns: 1fr; }
            .import-summary-grid { grid-template-columns: 1fr; }
            .member-limit-upgrade-actions .btn { justify-content: center; width: 100%; }
            /* Mobile: allow horizontal scroll so tables can be swiped */
            body { overflow-x: auto; }
            /* Mobile: hide least important columns — keep Name(1), Belt(2), Status(4), Waiver(5).
               Scoped to the tables this was written for. Other .table-scroll users (Classes)
               keep every column and rely on horizontal scroll alone, since their 6th column
               is Actions. */
            #membersTable .table-scroll table th:nth-child(3),
            #membersTable .table-scroll table td:nth-child(3),
            #membersTable .table-scroll table th:nth-child(6),
            #membersTable .table-scroll table td:nth-child(6),
            #billingEventTimeline .table-scroll table th:nth-child(3),
            #billingEventTimeline .table-scroll table td:nth-child(3),
            #billingEventTimeline .table-scroll table th:nth-child(6),
            #billingEventTimeline .table-scroll table td:nth-child(6) {
                display: none;
            }
        }

        /* TABS */
        .tab-bar {
            display: flex;
            gap: 4px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 24px;
            padding-bottom: 0;
        }
        .tab-btn {
            padding: 10px 18px;
            font-family: var(--type-family-body);
            font-size: var(--type-control-size);
            font-weight: var(--type-control-weight);
            line-height: var(--type-control-line);
            letter-spacing: 0;
            color: var(--text-secondary);
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            cursor: pointer;
            transition: all 0.15s;
            margin-bottom: -1px;
        }
        .tab-btn:hover { color: var(--text-primary); }
        .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

        .tab-panel { display: none; }
        .tab-panel.active { display: block; }

        /* ATTENDANCE / BILLING SPECIFIC */
        .section-card {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 20px;
        }
        .section-card-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .section-card-header h3 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
        }
        .section-card-body { padding: 16px 20px; }

        /* TASKS + SUPPLY SHELF */
        .tasks-page-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        .tasks-page-actions > * + * { margin-left: 8px; }
        .tasks-filter-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-left: auto;
        }
        .tasks-filter-row > * + * { margin-left: 8px; }
        .tasks-filter-row .filter-select { min-width: 160px; }
        .task-group { margin-bottom: 24px; }
        .task-group:last-child { margin-bottom: 0; }
        .task-group-label {
            margin-bottom: 8px;
            color: var(--text-muted);
        }
        .task-group-overdue { color: var(--danger); }
        .task-group-list {
            border-top: 1px solid var(--border);
        }
        .task-row {
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 72px;
            padding: 10px 0;
            border-bottom: 1px solid var(--border);
        }
        .task-row:last-child { border-bottom: 0; }
        .task-checkbox-hit {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 44px;
            width: 44px;
            min-width: 44px;
            height: 44px;
            min-height: 44px;
            cursor: pointer;
        }
        .task-checkbox-hit input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
        }
        .task-checkbox-visual {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border: 1px solid var(--border-strong);
            border-radius: 5px;
            background: var(--surface-input);
            transition: background-color 0.15s, border-color 0.15s;
        }
        .task-checkbox-hit input:focus-visible + .task-checkbox-visual {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .task-checkbox-hit input:checked + .task-checkbox-visual {
            border-color: var(--accent);
            background: var(--accent);
        }
        .task-checkbox-hit input:checked + .task-checkbox-visual::after {
            content: '';
            width: 8px;
            height: 4px;
            border-left: 2px solid var(--text-on-accent);
            border-bottom: 2px solid var(--text-on-accent);
            transform: rotate(-45deg) translateY(-1px);
        }
        .task-row-main {
            flex: 1;
            min-width: 0;
        }
        .task-row-title {
            color: var(--text-primary);
            overflow-wrap: anywhere;
        }
        .task-row-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 4px;
            color: var(--text-muted);
        }
        /* Inline note preview: one line, muted, secondary to the meta row.
           Clamped rather than wrapped so an over-long note cannot turn a
           scannable list into uneven blocks; the full text stays in the edit
           modal and in the title attribute. */
        .task-row-note {
            margin-top: 3px;
            color: var(--text-muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .task-meta-separator {
            margin: 0 7px;
            color: var(--border-strong);
        }
        .task-row-end {
            display: flex;
            align-items: center;
            flex: 0 0 auto;
            margin-left: 12px;
        }
        .task-row-due {
            color: var(--text-muted);
            white-space: nowrap;
        }
        .task-row-end .action-menu-wrap { margin-left: 8px; }
        .task-member-link {
            padding: 0;
            border: 0;
            background: none;
            color: var(--accent);
            text-decoration: underline;
            text-underline-offset: 2px;
            cursor: pointer;
        }
        .task-member-link:hover { color: var(--accent-hover); }
        .task-list-panel { padding: 20px; }
        .task-empty-state { padding: 48px 24px; }
        .task-empty-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 20px;
        }
        .task-empty-actions > * + * { margin-left: 8px; }
        .task-load-more { display: flex; justify-content: center; margin-top: 16px; }
        .task-row-completed { min-height: 68px; }
        .task-supply-shelf { margin-top: 20px; }
        .task-supply-list { display: flex; flex-direction: column; }
        .task-supply-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            align-items: center;
            min-height: 56px;
            padding: 8px 0;
            border-bottom: 1px solid var(--border);
        }
        .task-supply-row:last-child { border-bottom: 0; }
        .task-supply-state { margin: 0 12px; }
        .task-supply-action { min-width: 124px; text-align: right; }
        .task-shelf-muted,
        .dashboard-tasks-empty {
            color: var(--text-muted);
        }
        .task-category-chip {
            background: var(--surface-hover);
            color: var(--text-secondary);
        }
        .badge-restock-needed {
            background: var(--warning-bg);
            color: var(--warning);
        }
        /* Overdue is a real state, not emphasis: danger tokens, same badge
           shell as every other status chip. Pushed to the row's end so the
           title still leads. */
        .dashboard-task-overdue {
            background: var(--error-bg);
            color: var(--danger);
            margin-left: auto;
            flex: 0 0 auto;
        }
        .task-repeat-days {
            display: flex;
            flex-wrap: wrap;
        }
        .task-repeat-days > label[class~="class-day-pill"] {
            margin: 0 8px 8px 0;
        }
        .task-repeat-preview {
            min-height: 18px;
            margin-top: -8px;
            color: var(--text-secondary);
        }
        .dashboard-tasks-card { margin-bottom: 24px; }

        .dashboard-readiness-card { margin-bottom: 24px; }
        .dashboard-task-list { display: flex; flex-direction: column; }
        .dashboard-task-row {
            display: flex;
            align-items: center;
            min-height: 52px;
            padding: 4px 0;
            border-bottom: 1px solid var(--border);
        }
        .dashboard-task-row:last-child { border-bottom: 0; }
        .dashboard-task-row .task-checkbox-hit { margin-left: -4px; }
        .dashboard-task-row > .type-body-product {
            min-width: 0;
            overflow-wrap: anywhere;
        }
        .task-form .form-group + .form-group { margin-top: 16px; }

        .checkin-member-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 320px;
            overflow-y: auto;
        }
        .checkin-member-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--surface);
            transition: all 0.15s;
        }
        .checkin-member-row:hover { border-color: var(--border-focus); }
        .checkin-member-row .name {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: 600;
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            flex: 1;
        }
        .checkin-member-row .sub {
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--text-secondary);
        }

        .badge-overdue { background: var(--error-bg); color: var(--danger); }
        .badge-paid { background: var(--success-bg); color: var(--success); }

        .attendance-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-subtle);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
        }
        .attendance-row:last-child { border-bottom: none; }

        .day-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: var(--accent-subtle);
            color: var(--accent);
            /* Day-abbreviation badge: caption size token only, display 700
               face deliberately off caption's DM 500 tuple. */
            font-family: 'Space Grotesk', sans-serif;
            font-size: var(--type-caption-size);
            font-weight: 700;
            flex-shrink: 0;
        }

        .family-link-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            border-radius: 8px;
            background: var(--surface);
            border: 1px solid var(--border);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }

        /* Billing form layout */
        .billing-two-col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        .account-billing-card {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
            gap: 20px;
            align-items: stretch;
        }
        /* Progressive-enhancement pair: the static declaration is the iOS 12
           fallback (price-hero, exactly 2.2rem) and the clamp() is the fluid
           enhancement. Keep both lines; collapsing them onto one declaration
           regresses iOS 12 to an unstyled size. No line-height token on
           purpose: the block sits on a local 1, and the role's 1.1 would
           move the rendered price. */
        .account-billing-price {
            font-family: var(--type-family-display);
            font-size: var(--type-price-hero-size);
            font-size: clamp(2.2rem, 7vw, 3.3rem);
            font-weight: var(--type-price-hero-weight);
            line-height: 1;
            margin: 14px 0 8px;
        }
        /* Unit suffix beside the hero price. Consumes the body size/family
           only; weight deliberately inherits the price block's 700. */
        .account-billing-price span {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-size);
        }
        .billing-status-pill {
            display: inline-flex;
            align-items: center;
            min-height: 30px;
            padding: 5px 10px;
            border-radius: 999px;
            background: var(--surface);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: 700; /* deliberately heavier than the caption role: the pill's weight is the status signal */
            text-transform: capitalize;
        }
        .billing-status-pill.active,
        .billing-status-pill.trialing {
            color: var(--success);
            background: var(--success-bg);
            border-color: var(--success-border);
        }
        .billing-status-pill.past_due,
        .billing-status-pill.unpaid {
            color: var(--warning);
            background: var(--warning-bg);
            border-color: var(--warning-border);
        }
        .billing-status-pill.canceled {
            color: var(--danger);
            background: var(--error-bg);
            border-color: var(--error-border);
        }
        .billing-status-pill.complimentary {
            color: var(--info);
            background: var(--info-bg);
            border-color: var(--info-border);
        }
        .billing-lifecycle-banner {
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin: 18px 24px 0;
            padding: 12px 14px;
            border: 1px solid var(--info-border);
            border-radius: 8px;
            background: var(--info-bg);
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }
        .billing-lifecycle-banner.visible { display: flex; }
        .billing-lifecycle-banner strong {
            color: var(--info);
            font-weight: 700;
        }
        .billing-lifecycle-banner a {
            flex: 0 0 auto;
            color: var(--accent);
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
        }
        @media (max-width: 768px) {
            .billing-two-col { grid-template-columns: 1fr; }
            .account-billing-card { grid-template-columns: 1fr; }
            .tab-btn { padding: 8px 12px; font-size: var(--type-control-sm-size); }
        }

        /* TODAY'S CLASSES — dashboard section */
        .today-classes-section {
            margin-bottom: 24px;
        }
        .today-classes-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }
        .today-classes-header h2 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: 700;
            line-height: var(--type-title-sm-line);
            letter-spacing: -0.3px;
        }
        .today-date-label {
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--text-secondary);
        }
        .today-classes-grid,
        .attendance-class-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 12px;
        }
        /* CLASS CARD — shared shell for Dashboard's Today's Classes and the
           Attendance class picker (DESIGN.md §5 Class Card). Both surfaces
           stay on these rules; do not fork a per-page copy. */
        .today-class-card,
        .attendance-class-card {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px 18px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            transition: border-color 0.15s;
        }
        .today-class-card:hover,
        .attendance-class-card:hover { border-color: var(--border-focus); }
        .today-class-name,
        .attendance-class-name {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: 700;
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-word;
            overflow-wrap: anywhere;
            color: var(--text-primary);
        }
        .today-class-meta,
        .attendance-class-info {
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--text-secondary);
        }
        .attendance-class-header {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .attendance-class-type {
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
        }
        .today-class-empty {
            grid-column: 1/-1;
            padding: 28px;
            text-align: center;
            background: var(--surface-elevated);
            border: 1px dashed var(--border);
            border-radius: 12px;
            color: var(--text-muted);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }
        .today-class-card.up-next {
            border-color: var(--accent);
            background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--accent-subtle) 100%);
        }
        .up-next-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: var(--type-label-size);
            font-weight: 700;
            letter-spacing: 0.3px;
            text-transform: uppercase;
            color: var(--accent);
            background: var(--accent-subtle);
            border: 1px solid var(--accent-glow);
            border-radius: 20px;
            padding: 2px 8px;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .up-next-badge::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent);
            animation: pulse-dot 1.8s ease-in-out infinite;
        }
        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.7); }
        }

        /* EMPTY DASHBOARD (no classes in system) */
        .today-classes-empty-state {
            background: var(--surface-elevated);
            border: 1px dashed var(--accent-glow);
            border-radius: 14px;
            padding: 40px 32px;
            text-align: center;
        }
        .today-classes-empty-state .empty-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 16px;
            color: var(--accent);
            opacity: 0.7;
        }
        .today-classes-empty-state h3 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: 700;
            line-height: var(--type-title-sm-line);
            margin-bottom: 8px;
        }
        .today-classes-empty-state p {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            color: var(--text-secondary);
            margin-bottom: 20px;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
        }

        .inactive-follow-up-panel {
            margin-bottom: 24px;
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
        }
        .inactive-follow-up-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
        }
        .inactive-follow-up-title {
            font-family: var(--type-family-body);
            font-size: var(--type-label-size);
            font-weight: var(--type-label-weight);
            line-height: var(--type-label-line);
            letter-spacing: var(--type-label-tracking);
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        .inactive-follow-up-subcopy {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }
        .inactive-follow-up-list {
            display: flex;
            flex-direction: column;
        }
        .inactive-follow-up-row {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto auto;
            align-items: center;
            gap: 12px;
            padding: 14px 20px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background 0.15s;
        }
        .inactive-follow-up-row:last-child { border-bottom: 0; }
        .inactive-follow-up-row:hover { background: var(--surface-hover); }
        .inactive-follow-up-name {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: 700;
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            color: var(--text-primary);
            margin-bottom: 3px;
        }
        .inactive-follow-up-meta {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }
        .inactive-follow-up-days {
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
            padding: 5px 9px;
            white-space: nowrap;
        }
        .inactive-follow-up-empty,
        .inactive-follow-up-notice {
            padding: 28px 20px;
            color: var(--text-muted);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            text-align: center;
        }
        .trial-attention-panel {
            margin-bottom: 24px;
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
        }
        .trial-attention-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
        }
        .trial-attention-title {
            font-family: var(--type-family-body);
            font-size: var(--type-label-size);
            font-weight: var(--type-label-weight);
            line-height: var(--type-label-line);
            letter-spacing: var(--type-label-tracking);
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        .trial-attention-subcopy {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }
        .trial-attention-sections {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        }
        .trial-attention-section {
            border-right: 1px solid var(--border);
            min-width: 0;
        }
        .trial-attention-section:last-child {
            border-right: 0;
        }
        .trial-attention-section-title {
            color: var(--text-muted);
            font-family: var(--type-family-body);
            font-size: var(--type-label-size);
            font-weight: var(--type-label-weight);
            line-height: var(--type-label-line);
            letter-spacing: var(--type-label-tracking);
            padding: 12px 20px 8px;
            text-transform: uppercase;
        }
        .trial-attention-row {
            border-top: 1px solid var(--border);
            cursor: pointer;
            padding: 12px 20px;
            transition: background 0.15s;
        }
        .trial-attention-row:hover {
            background: var(--surface-hover);
        }
        .trial-attention-name {
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: 700;
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            margin-bottom: 3px;
        }
        .trial-attention-fact {
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }
        @media (max-width: 768px) {
            .inactive-follow-up-header {
                flex-direction: column;
            }
            .inactive-follow-up-row {
                grid-template-columns: auto minmax(0, 1fr);
            }
            .inactive-follow-up-row .belt-visual,
            .inactive-follow-up-days {
                grid-column: 2;
                justify-self: flex-start;
            }
            .trial-attention-sections {
                grid-template-columns: 1fr;
            }
            .trial-attention-section {
                border-right: 0;
                border-bottom: 1px solid var(--border);
            }
            .trial-attention-section:last-child {
                border-bottom: 0;
            }
        }

        /* POST-CREATION HINT on class card */
        .today-class-card.first-class-hint {
            border-color: var(--accent);
            box-shadow: 0 0 0 1px var(--accent-glow), 0 4px 20px var(--accent-subtle);
        }
        @keyframes hint-pulse {
            0%, 100% { box-shadow: 0 0 0 1px var(--accent-glow), 0 4px 20px var(--accent-subtle); }
            50% { box-shadow: 0 0 0 3px var(--accent-glow), 0 4px 24px var(--accent-glow); }
        }
        .today-class-card.first-class-hint {
            animation: hint-pulse 2s ease-in-out 3;
        }
        .first-class-tip {
            margin-top: 4px;
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--accent);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .first-class-tip svg { flex-shrink: 0; }

        /* GUIDED ONBOARDING STEPS */
        .onboarding-steps-card {
            background: var(--surface-elevated);
            border: 1px dashed var(--accent-glow);
            border-radius: 14px;
            padding: 28px 20px 24px;
            text-align: center;
        }
        .onboarding-steps-headline {
            font-family: var(--type-family-display);
            font-size: var(--type-title-size);
            font-weight: var(--type-title-weight);
            line-height: var(--type-title-line);
            letter-spacing: 0;
            margin-bottom: 8px;
            color: var(--text-primary);
        }
        .onboarding-steps-subcopy {
            max-width: 360px;
            margin: 0 auto 24px;
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }
        /* Indicators row — circles + labels only, no desc/buttons */
        .onboarding-steps-row {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            max-width: 400px;
            margin: 0 auto;
        }
        .onboarding-step {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            min-width: 0;
        }
        .onboarding-step.step-done { opacity: 0.42; }
        .onboarding-step.step-inactive { opacity: 0.35; }
        .os-circle {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            /* Deliberately not tokenized: a step-number glyph scaled to its
               36px circle — component-local sizing, like avatar initials and
               the plan-setup-step variant of this same circle. */
            font-size: 0.9rem;
            color: var(--accent);
            background: transparent;
            flex-shrink: 0;
        }
        .os-circle.done { background: var(--accent); color: var(--text-on-accent); }
        .os-circle.inactive { border-color: var(--border-focus); color: var(--text-muted); }
        .os-label {
            font-family: 'Space Grotesk', sans-serif;
            font-size: var(--type-caption-size);
            font-weight: 500;
            color: var(--text-secondary);
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }
        .onboarding-step.step-active .os-label {
            color: var(--text-primary);
            font-weight: 700;
        }
        .os-connector {
            flex-shrink: 0;
            align-self: flex-start;
            padding-top: 9px;
            color: var(--border-focus);
            /* Deliberately not tokenized: a decorative arrow glyph sized to
               the 36px step circles beside it — a symbol, not product text,
               like .ta-checkmark. Its 540px override shrinks the glyph with
               the circles and stays literal for the same reason. */
            font-size: 1.1rem;
            line-height: 36px;
            width: 28px;
            text-align: center;
        }
        /* Active content block — sits below the indicators row */
        .onboarding-active-content {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,0.05);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }
        .os-active-title {
            font-family: var(--type-family-display);
            font-size: var(--type-title-sm-size);
            font-weight: var(--type-title-sm-weight);
            color: var(--text-primary);
            line-height: var(--type-title-sm-line);
            letter-spacing: 0;
        }
        .os-active-desc {
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            color: var(--text-muted);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }
        .os-btn {
            margin-top: 10px;
            /* Size-only: the os-btn family carries its weight hierarchy in
               its variants (primary 600, secondary/muted default) — the
               control role's blanket 600 would erase that distinction. */
            font-size: var(--type-control-size);
            padding: 7px 18px;
            border-radius: 7px;
            border: 1px solid var(--border-focus);
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            white-space: nowrap;
            font-family: inherit;
        }
        .os-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
        .os-btn.os-btn-primary {
            background: var(--accent);
            color: var(--text-on-accent);
            border-color: var(--accent);
            font-weight: 600;
        }
        .os-btn.os-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
        .os-btn.os-btn-secondary {
            border-color: var(--accent-glow);
            color: var(--text-primary);
        }
        .os-btn.os-btn-secondary:hover { background: var(--accent-subtle); color: var(--accent); }
        .os-btn.os-btn-muted { opacity: 0.4; cursor: default; pointer-events: none; }
        @media (max-width: 540px) {
            .onboarding-steps-row {
                max-width: 100%;
            }
            .os-label {
                font-size: var(--type-caption-size);
            }
            .os-connector {
                width: 20px;
                /* Deliberately literal glyph override — see .os-connector. */
                font-size: 0.9rem;
            }
            .onboarding-active-content {
                margin-top: 16px;
                padding-top: 16px;
            }
        }

        /* Vertical step list for first-run onboarding */
        .ob-steps-list {
            display: flex;
            flex-direction: column;
            gap: 0;
            width: 100%;
            max-width: 520px;
            margin: 0 auto;
        }
        .ob-step-row {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            padding: 16px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            text-align: left;
        }
        .ob-step-row:last-child { border-bottom: none; }
        .ob-step-row.ob-step-done { opacity: 0.45; }
        .ob-step-title-row {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            min-width: 0;
        }
        .ob-step-text { min-width: 0; }
        .ob-step-label {
            /* Size-only: the step titles deliberately keep the display face
               at 500 (600 when active) as their own hierarchy — body-product
               provides the operational size, not the face or weight. */
            font-family: 'Space Grotesk', sans-serif;
            font-size: var(--type-body-product-size);
            font-weight: 500;
            color: var(--text-secondary);
            line-height: 1.3;
        }
        .ob-step-desc {
            margin-top: 6px;
            color: var(--text-muted);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
        }
        .ob-step-label-active {
            color: var(--text-primary);
            font-weight: 600;
        }
        .ob-step-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            padding-left: 48px;
        }
        .ob-step-actions .os-btn {
            margin-top: 0;
        }
        /* Attendance CTA below the steps */
        .ob-attendance-cta {
            margin-top: 22px;
            padding-top: 18px;
            border-top: 1px solid rgba(255,255,255,0.07);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--text-muted);
        }
        .ob-attendance-cta strong {
            color: var(--text-primary);
            font-weight: 600;
        }
        .ob-attendance-btn {
            margin-top: 0 !important;
        }

        /* FIRST-TIME DASHBOARD — full-page onboarding wrapper */
        .onboarding-full-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 48px 16px 32px;
            min-height: 340px;
        }
        .onboarding-full-wrap .onboarding-steps-card {
            width: 100%;
            max-width: 520px;
            padding: 40px 32px 36px;
            border-width: 1px;
        }
        .onboarding-full-wrap .onboarding-steps-headline {
            font-size: var(--type-title-size);
            margin-bottom: 28px;
        }
        .onboarding-full-wrap .os-active-title {
            font-size: var(--type-title-size);
        }
        .onboarding-full-wrap .os-btn {
            font-size: var(--type-control-size);
            padding: 9px 24px;
            margin-top: 12px;
            width: 178px;
            white-space: nowrap;
        }
        .onboarding-full-wrap .ob-step-actions .os-btn {
            margin-top: 0;
            width: auto;
            min-width: 132px;
        }
        @media (max-width: 540px) {
            .onboarding-full-wrap .os-btn {
                width: 100%;
                min-width: unset;
                white-space: nowrap;
            }
            .ob-step-row {
                align-items: stretch;
                flex-direction: column;
                gap: 10px;
                padding: 16px 0;
            }
            .ob-step-title-row {
                align-items: flex-start;
            }
            .ob-step-actions {
                padding-left: 48px;
            }
            .onboarding-full-wrap .ob-step-actions .os-btn {
                width: 100%;
                min-width: unset;
            }
            .ob-step-row .os-btn {
                min-height: 44px;
                margin-top: 0;
            }
            .ob-attendance-cta {
                align-items: stretch;
                text-align: left;
            }
            .ob-attendance-btn {
                min-height: 44px;
            }
        }
        /* Success state */
        .onboarding-success {
            justify-content: center;
            min-height: 400px;
            text-align: center;
            gap: 0;
        }
        .ob-success-icon {
            /* Deliberately not tokenized: an emoji/glyph celebration mark,
               not product text — component-local sizing like .ta-checkmark. */
            font-size: 3rem;
            line-height: 1;
            margin-bottom: 20px;
        }
        /* Deliberate literal: the celebration headline sits between title
           (1.125rem) and the fluid display scale; headline (1.5rem) would
           shrink the moment by 6px+ and no role renders 1.9rem. The 540px
           override below lands it exactly on headline for small screens. */
        .ob-success-headline {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.9rem;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.2;
            margin-bottom: 10px;
        }
        .ob-success-sub {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            color: var(--text-secondary);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            max-width: 300px;
        }
        @media (max-width: 540px) {
            .onboarding-full-wrap {
                padding: 32px 12px 24px;
            }
            .onboarding-full-wrap .onboarding-steps-card {
                padding: 28px 20px 24px;
            }
            .onboarding-full-wrap .onboarding-steps-headline {
                font-size: var(--type-title-size);
            }
            .onboarding-steps-subcopy {
                margin-bottom: 20px;
                font-size: var(--type-body-product-size);
            }
            .ob-success-headline {
                font-size: var(--type-headline-size);
            }
        }

        /* CLASS MEMBER COUNT BADGE & EMPTY INDICATOR */
        .class-member-count {
            display: flex;
            align-items: center;
            gap: 4px;
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
            color: var(--text-muted);
        }
        .today-class-card.over-capacity {
            border-color: var(--error-border);
        }
        .class-over-capacity-warn {
            font-size: var(--type-caption-size);
            color: var(--danger);
            font-weight: 500;
            margin-top: 2px;
            display: flex;
            align-items: center;
        }
        .class-over-capacity-warn.at-cap {
            color: var(--warning);
        }
        .capacity-manage-link {
            background: none;
            border: none;
            border-bottom: 1px solid var(--accent-glow);
            padding: 0;
            color: var(--accent);
            font-size: var(--type-caption-size);
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
            margin-left: 7px;
            white-space: nowrap;
            opacity: 0.85;
            line-height: 1;
        }
        .capacity-manage-link:hover {
            opacity: 1;
            border-bottom-color: var(--accent);
        }

        /* CAPACITY PROGRESS BAR */
        .class-capacity-bar-wrap {
            margin-top: 5px;
            height: 3px;
            border-radius: 2px;
            background: rgba(255,255,255,0.07);
            overflow: hidden;
        }
        .class-capacity-bar-fill {
            height: 100%;
            border-radius: 2px;
            background: var(--accent);
            transition: width 0.3s ease;
        }
        .class-capacity-bar-fill.at-capacity {
            background: var(--warning);
        }
        .class-capacity-bar-fill.over-capacity {
            background: var(--danger);
        }

        /* QA CAPACITY WARNING */
        .qa-capacity-warn {
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: 500;
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--warning);
            display: none;
            padding: 5px 10px;
            border-radius: 6px;
            background: var(--warning-bg);
            border: 1px solid var(--warning-border);
        }
        .qa-capacity-warn.over {
            color: var(--danger);
            background: var(--error-bg);
            border-color: var(--error-border);
        }
        .qa-capacity-warn.visible {
            display: block;
        }

        /* TAKE ATTENDANCE — assigned member badge in header */
        .ta-assigned-info {
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--text-muted);
            margin-top: 3px;
        }
        .ta-assigned-info.at-capacity {
            color: var(--accent);
            font-weight: 500;
        }
        .ta-assigned-info.over-capacity {
            color: var(--danger);
            font-weight: 500;
        }

        /* QUICK ASSIGN MODAL */
        #quickAssignModal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1100;
            background: rgba(0,0,0,0.65);
            backdrop-filter: blur(4px);
            align-items: center;
            justify-content: center;
            padding: 16px;
            /* Push modal above iOS home indicator */
            padding-bottom: max(16px, env(safe-area-inset-bottom));
        }
        #quickAssignModal.open { display: flex; }
        .qa-modal {
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 16px;
            width: 100%;
            max-width: 480px;
            max-height: 85vh; /* fallback */
            max-height: calc(100dvh - 32px); /* dynamic viewport height */
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .qa-header {
            padding: 20px 24px 16px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }
        .qa-header h2 {
            font-family: var(--type-family-display);
            font-size: var(--type-title-size);
            font-weight: var(--type-title-weight);
            line-height: var(--type-title-line);
            letter-spacing: 0;
        }
        .qa-header p {
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--text-muted);
            margin-top: 2px;
        }
        .qa-close-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            border-radius: 6px;
            transition: color 0.15s;
            flex-shrink: 0;
        }
        .qa-close-btn:hover { color: var(--text-primary); }
        .qa-search {
            padding: 12px 24px;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        .qa-search input {
            width: 100%;
            box-sizing: border-box;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--bg-input, var(--bg-hover));
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }
        .qa-search input:focus { outline: none; border-color: var(--accent); }
        .qa-member-list {
            flex: 1;
            overflow-y: auto;
            padding: 8px 0;
        }
        .qa-member-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 24px;
            cursor: pointer;
            transition: background 0.1s;
        }
        .qa-member-item:hover { background: var(--surface-hover); }
        .qa-member-item input[type=checkbox] {
            width: 16px;
            height: 16px;
            accent-color: var(--accent);
            cursor: pointer;
            flex-shrink: 0;
        }
        .qa-member-avatar-sm {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--accent-subtle);
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Space Grotesk', sans-serif;
            font-size: var(--type-caption-size);
            font-weight: 700;
            flex-shrink: 0;
        }
        .qa-member-info { flex: 1; min-width: 0; }
        .qa-member-name.type-body-product {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: 600;
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }
        .qa-member-sub { color: var(--text-muted); }
        .qa-footer {
            padding: 10px 24px 14px;
            /* Extra bottom padding absorbs iOS home indicator */
            padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
            border-top: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex-shrink: 0;
        }
        .qa-footer-main {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .qa-select-info {
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--text-muted);
        }
        .qa-footer-btns { display: flex; gap: 8px; }

        /* ATTENDANCE CONTEXTUAL HINT */
        .ta-checkin-hint {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 16px;
            border-radius: 10px;
            background: var(--accent-subtle);
            border: 1px solid var(--accent-glow);
            color: var(--accent);
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: 500;
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            margin-bottom: 4px;
            pointer-events: none;
            transition: opacity 0.4s;
        }
        .ta-checkin-hint.hidden { opacity: 0; }

        /* TAKE ATTENDANCE PAGE */
        .ta-header {
            display: flex;
            align-items: center;
            /* iOS 12: flex gap unsupported < Safari 14.1. Children carry the
               16px gap as margins; padding drops by 16 on top/left so the
               outer edges are unchanged (4+16=20 top, 16+16=32 left). */
            padding: 4px 32px 20px 16px;
            border-bottom: 1px solid var(--border);
            flex-wrap: wrap;
        }
        .ta-header > * {
            margin: 16px 0 0 16px;
        }
        .ta-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 14px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--surface-elevated);
            color: var(--text-secondary);
            cursor: pointer;
            font-family: var(--type-family-body);
            font-size: var(--type-control-sm-size);
            font-weight: var(--type-control-weight);
            line-height: var(--type-control-line);
            letter-spacing: 0;
            transition: all 0.15s;
        }
        .ta-back-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
        .ta-title {
            flex: 1;
        }
        .ta-title h1 {
            font-family: var(--type-family-display);
            font-size: var(--type-headline-size);
            font-weight: var(--type-headline-weight);
            line-height: var(--type-headline-line);
            letter-spacing: var(--type-headline-tracking);
        }
        .ta-title p {
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--text-secondary);
            margin-top: 2px;
        }
        .ta-counter {
            font-family: var(--type-family-body);
            font-size: var(--type-metric-size);
            font-weight: var(--type-metric-weight);
            line-height: var(--type-metric-line);
            font-variant-numeric: tabular-nums;
            letter-spacing: 0;
            color: var(--accent);
            white-space: nowrap;
        }
        .ta-counter-label {
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
            color: var(--text-secondary);
            text-align: right;
            margin-top: 1px;
        }
        .ta-content { padding: 24px 32px; }
        .ta-member-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 10px;
        }
        .ta-member-tile {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 16px 12px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--surface-elevated);
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            position: relative;
        }
        .ta-member-tile:hover { border-color: var(--accent); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
        .ta-member-tile.checked-in {
            border-color: var(--success);
            background: var(--success-bg);
            box-shadow: 0 0 0 1px var(--success-border), inset 0 0 0 1px var(--success-bg);
        }
        .ta-member-tile.ta-loading { opacity: 0.6; cursor: default; pointer-events: none; }
        .ta-member-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--accent-subtle);
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Space Grotesk', sans-serif;
            /* Deliberately not tokenized: avatar initials are component-local
               sizing per the DESIGN.md §3 exception list, not a text tier. */
            font-size: 1rem;
            font-weight: 700;
            position: relative;
        }
        .ta-member-tile.checked-in .ta-member-avatar {
            background: var(--success-bg);
            color: var(--success);
        }
        .ta-checkmark {
            display: none;
            position: absolute;
            bottom: -4px;
            right: -4px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--success);
            color: var(--text-on-accent);
            align-items: center;
            justify-content: center;
            /* Deliberately not tokenized: a ✓ glyph in its 18px disc, not
               product text (recorded in W5b's sub-floor allowlist). */
            font-size: 10px;
            font-weight: 900;
        }
        .ta-member-tile.checked-in .ta-checkmark { display: flex; }
        .ta-member-name {
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: 600;
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            text-align: center;
            color: var(--text-primary);
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ta-member-tile.checked-in .ta-member-name { color: var(--success); }
        .ta-member-sub {
            font-size: var(--type-caption-size);
            color: var(--text-muted);
            text-align: center;
        }
        /* MOBILE TAP HINT — only shows on unchecked tiles at mobile widths */
        .ta-tap-hint {
            display: none;
            align-items: center;
            justify-content: center;
            font-size: var(--type-caption-size);
            color: var(--text-muted);
            opacity: 0.7;
            gap: 3px;
            margin-top: 2px;
        }
        @media (max-width: 768px) {
            .ta-member-tile:not(.checked-in) .ta-tap-hint {
                display: flex;
            }
        }
        .ta-member-tile.checked-in .ta-tap-hint { display: none !important; }
        /* SKELETON TILES */
        .ta-skeleton-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 10px;
            padding: 4px 0;
        }
        .ta-skeleton-tile {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 16px 12px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--surface-elevated);
        }
        .ta-skeleton-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--surface-input);
            animation: ta-skeleton-pulse 1.4s ease-in-out infinite;
        }
        .ta-skeleton-name {
            width: 80px;
            height: 12px;
            border-radius: 6px;
            background: var(--surface-input);
            animation: ta-skeleton-pulse 1.4s ease-in-out infinite;
            animation-delay: 0.1s;
        }
        .ta-skeleton-sub {
            width: 56px;
            height: 10px;
            border-radius: 5px;
            background: var(--surface-input);
            animation: ta-skeleton-pulse 1.4s ease-in-out infinite;
            animation-delay: 0.2s;
        }
        @keyframes ta-skeleton-pulse {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 0.7; }
        }
        /* SEARCH BAR */
        .ta-search-wrap {
            position: relative;
            padding: 16px 32px 0;
            display: flex;
            align-items: center;
        }
        .ta-search-icon {
            position: absolute;
            left: 44px;
            top: 50%;
            transform: translateY(calc(-50% + 8px));
            color: var(--text-muted);
            pointer-events: none;
        }
        .ta-search-input {
            width: 100%;
            box-sizing: border-box;
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            /* Deliberate literal: 16px is the iOS Safari threshold below
               which focusing an input auto-zooms the page — critical on the
               phone/tablet Take Attendance surface. A rem token here would
               silently lose that floor if the role ever moved. */
            font-size: 16px;
            padding: 9px 36px 9px 34px;
            outline: none;
            font-family: inherit;
        }
        .ta-search-input::placeholder { color: var(--text-muted); }
        .ta-search-input:focus { border-color: var(--accent); }
        .ta-search-clear {
            position: absolute;
            right: 44px;
            top: 50%;
            transform: translateY(calc(-50% + 8px));
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text-muted);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 4px;
            border-radius: 4px;
        }
        .ta-search-clear:hover { color: var(--text-primary); }
        /* SECTION LABELS */
        .ta-section-label {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: var(--type-label-size);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: var(--text-muted);
            padding: 8px 2px 4px;
            margin-top: 4px;
        }
        .ta-section-label:first-child { margin-top: 0; }
        .ta-section-label-in { color: var(--success); opacity: 0.75; }
        .ta-section-count {
            font-size: var(--type-caption-size);
            font-weight: 700;
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1px 7px;
            color: var(--text-muted);
            letter-spacing: 0;
            text-transform: none;
        }
        .ta-section-label-in .ta-section-count { color: var(--success); border-color: var(--success-border); background: var(--success-bg); }
        .ta-no-results {
            grid-column: 1 / -1;
            text-align: center;
            color: var(--text-muted);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
            padding: 32px 16px;
        }
        @media (max-width: 768px) {
            .ta-header {
                padding: 2px 16px 14px 4px;
                padding-top: calc(var(--hamburger-zone) - 12px);
                padding-left: calc(var(--hamburger-zone) - 12px);
            }
            .ta-header > * {
                margin: 12px 0 0 12px;
            }
            .ta-back-btn,
            .ta-header .btn {
                min-height: 44px;
            }
            .ta-content { padding: 16px; }
            .ta-search-wrap { padding: 12px 0 0; }
            .ta-search-icon { left: 12px; transform: translateY(calc(-50% + 6px)); }
            .ta-search-clear { right: 12px; transform: translateY(calc(-50% + 6px)); }
            .ta-member-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
            .ta-skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
            .today-classes-grid { grid-template-columns: 1fr 1fr; }
        }

        /* ASSIGNED CLASSES CHIP CONTAINER */
        .assigned-classes-scroll {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 4px 0;
            position: relative;
        }
        /* Empty state */
        .assigned-classes-scroll:empty,
        .assigned-classes-scroll .assigned-classes-empty {
            min-height: 28px;
        }

        /* ASSIGNED CLASSES CHECKBOX PILLS */
        .class-pill-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            border-radius: 20px;
            border: 1px solid var(--border);
            background: var(--surface-input);
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-control-sm-size);
            font-weight: var(--type-control-weight);
            line-height: var(--type-control-line);
            letter-spacing: 0;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s, color 0.15s;
            user-select: none;
        }
        .class-pill-label:hover {
            border-color: var(--border-focus);
            color: var(--text-primary);
        }
        .class-pill-label input[type="checkbox"] {
            display: none;
        }
        .class-pill-label.pill-checked {
            background: var(--accent-subtle);
            border-color: var(--accent);
            color: var(--accent);
        }
        .class-pill-label .pill-check-icon {
            display: none;
        }
        .class-pill-label.pill-checked .pill-check-icon {
            display: inline;
        }

        /* CLASS DAY PICKER PILLS */
        .class-day-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 12px;
            border-radius: 20px;
            border: 1px solid var(--border);
            background: var(--surface-input);
            color: var(--text-secondary);
            font-family: var(--type-family-body);
            font-size: var(--type-control-sm-size);
            font-weight: var(--type-control-weight);
            line-height: var(--type-control-line);
            letter-spacing: 0;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s, color 0.15s;
            user-select: none;
        }
        .class-day-pill:hover {
            border-color: var(--border-focus);
            color: var(--text-primary);
        }
        .class-day-pill input[type="checkbox"] {
            display: none;
        }
        .class-day-pill.day-checked {
            background: var(--accent-subtle);
            border-color: var(--accent);
            color: var(--accent);
        }

        /* Class modal: stacked (non-grid) form groups need the same vertical
           rhythm .form-grid provides via its 16px gap */
        #classForm .form-group + .form-group { margin-top: 16px; }

        .class-time-fields {
            display: flex;
            align-items: flex-start;
        }
        .class-time-field {
            display: flex;
            flex: 1;
            flex-direction: column;
        }
        .class-time-field + .class-time-field {
            margin-left: 12px;
        }
        .class-time-field > * + * {
            margin-top: 6px;
        }

        /* Per-day time overrides in the class modal */
        .class-time-customize {
            display: block;
            margin-top: 8px;
            padding: 0;
            border: none;
            background: none;
            color: var(--accent);
            font-family: var(--type-family-body);
            font-size: var(--type-control-sm-size);
            font-weight: var(--type-control-weight);
            line-height: var(--type-control-line);
            letter-spacing: 0;
            cursor: pointer;
        }
        .class-time-customize:hover { color: var(--accent-hover); }
        .class-time-customize:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 1px;
        }
        .class-day-times {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .class-day-times[hidden] { display: none; }
        .class-day-time-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .class-day-time-row span {
            width: 38px;
            font-family: var(--type-family-body);
            font-size: var(--type-label-size);
            font-weight: var(--type-label-weight);
            line-height: var(--type-label-line);
            letter-spacing: var(--type-label-tracking);
            color: var(--text-secondary);
        }
        .class-day-time-row input[type="time"] {
            flex: 1 1 0;
            min-width: 0;
            max-width: 160px;
        }
        .class-day-time-row input[type="number"] {
            flex: 0 1 100px;
            min-width: 0;
            max-width: 100px;
        }
        .class-day-times-empty {
            font-family: var(--type-family-body);
            font-size: var(--type-body-compact-size);
            font-weight: var(--type-body-compact-weight);
            line-height: var(--type-body-compact-line);
            letter-spacing: 0;
            color: var(--text-muted);
        }

        /* Public schedule publishing extends the Classes layout with one
           owner-only action and a focused publishing workspace. */
        .classes-header-actions {
            display: grid;
            grid-auto-flow: column;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
        }
        .class-editor-modal { max-width: 680px; }
        .class-exceptions {
            margin-top: 24px;
            padding-top: 22px;
            border-top: 1px solid var(--border);
        }
        .class-exceptions-heading {
            display: grid;
            grid-template-columns: 1fr 165px;
            align-items: flex-end;
            justify-content: space-between;
            gap: 18px;
        }
        .class-exceptions-heading h3,
        .class-exceptions-heading p { margin: 0; }
        .class-exceptions-heading p { margin-top: 5px; color: var(--text-secondary); }
        .class-exception-date {
            display: grid;
            row-gap: 6px;
            color: var(--text-secondary);
        }
        .class-exception-date input,
        .class-exception-time-fields input {
            min-height: 44px;
            padding: 9px 10px;
            border: 1px solid var(--border-strong);
            border-radius: 8px;
            background: var(--surface-input);
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
        }
        .class-exception-sessions { margin-top: 14px; }
        .class-exception-session {
            padding: 14px 0;
            border-top: 1px solid var(--border);
        }
        .class-exception-session:first-child { border-top: 0; }
        .class-exception-session-heading,
        .class-exception-session-heading > div {
            display: grid;
            grid-auto-flow: column;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .class-exception-session-heading > div { align-items: baseline; }
        .class-exception-session-heading strong { font-size: var(--type-body-product-size); }
        .class-exception-session-heading span { color: var(--text-secondary); font-size: var(--type-body-compact-size); }
        .class-exception-session.is-cancelled .class-exception-session-heading > div { text-decoration: line-through; color: var(--danger); }
        .class-exception-time-fields {
            display: grid;
            grid-template-columns: repeat(2, 160px);
            gap: 10px;
            margin-top: 12px;
        }
        .class-exception-time-fields label {
            display: grid;
            row-gap: 5px;
            color: var(--text-secondary);
            font-size: var(--type-label-size);
            font-weight: var(--type-label-weight);
            letter-spacing: var(--type-label-tracking);
            text-transform: uppercase;
        }
        .class-exception-actions { display: flex; flex-wrap: wrap; margin-top: 4px; }
        .class-exception-actions .btn { margin-top: 8px; margin-right: 8px; }
        .class-exception-actions .btn { min-height: 44px; }
        .class-exception-error { color: var(--danger); }

        .public-schedule-modal { max-width: 1020px; }
        .public-schedule-modal-status { margin: 4px 0 0; color: var(--text-secondary); }
        .public-schedule-settings-form {
            display: grid;
            grid-template-columns: 1fr;
            gap: 28px;
        }
        .public-schedule-fieldset + .public-schedule-fieldset {
            margin-top: 24px;
            padding-top: 22px;
            border-top: 1px solid var(--border);
        }
        .public-schedule-section-heading h3,
        .public-schedule-section-heading p,
        .public-schedule-preview-heading h3,
        .public-schedule-preview-heading p { margin: 0; }
        .public-schedule-section-heading p,
        .public-schedule-preview-heading p { margin-top: 5px; color: var(--text-secondary); }
        .public-schedule-class-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-top: 14px;
        }
        .public-schedule-class-option {
            display: grid;
            grid-template-columns: 20px 1fr;
            align-items: center;
            gap: 10px;
            min-height: 52px;
            padding: 8px 10px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            cursor: pointer;
        }
        .public-schedule-class-option input:checked + span strong { color: var(--accent); }
        .public-schedule-class-option input,
        .public-schedule-selection-row input,
        .public-schedule-toggle-list input {
            width: 20px;
            height: 20px;
            flex: 0 0 auto;
            accent-color: var(--accent);
        }
        .public-schedule-class-option strong,
        .public-schedule-class-option small { display: block; }
        .public-schedule-class-option strong { color: var(--text-primary); font-size: var(--type-body-product-size); }
        .public-schedule-class-option small { margin-top: 2px; color: var(--text-muted); font-size: var(--type-body-compact-size); }
        .public-schedule-no-classes { grid-column: 1 / -1; margin: 0; color: var(--text-secondary); }
        .public-schedule-selection-row { display: flex; flex-wrap: wrap; align-items: center; margin-top: 10px; }
        .public-schedule-selection-row label { display: flex; align-items: center; min-height: 44px; margin-right: 16px; cursor: pointer; }
        .public-schedule-selection-row input { margin-right: 10px; }
        .public-schedule-selection-row [role="status"] { color: var(--text-secondary); }
        .public-schedule-form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 14px;
        }
        .public-schedule-form-grid .form-group { display: grid; row-gap: 6px; }
        .public-schedule-toggle-list { display: grid; gap: 4px; margin-top: 12px; }
        .public-schedule-toggle-list label {
            display: grid;
            grid-template-columns: 20px 1fr;
            align-items: center;
            gap: 10px;
            min-height: 44px;
            cursor: pointer;
        }
        .public-schedule-copy-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 14px 0; }
        .public-schedule-copy-row input,
        .public-schedule-code {
            width: 100%;
            min-width: 0;
            padding: 10px 12px;
            border: 1px solid var(--border-strong);
            border-radius: 8px;
            background: var(--surface-input);
            color: var(--text-primary);
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
        }
        .public-schedule-code { display: block; min-height: 92px; margin-top: 7px; resize: vertical; }
        .public-schedule-code-label { display: block; margin-top: 14px; }
        .public-schedule-extra { margin-top: 18px; border-top: 1px solid var(--border); }
        .public-schedule-extra summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: var(--type-body-product-size); font-weight: 600; }
        .public-schedule-extra summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .public-schedule-extra p { margin: 0 0 12px; color: var(--text-secondary); }
        .public-schedule-link-actions { display: flex; flex-wrap: wrap; margin-top: 2px; }
        .public-schedule-link-actions > * { margin-top: 8px; margin-right: 8px; }
        .public-schedule-preview-column {
            min-width: 0;
            padding-top: 24px;
            border-top: 1px solid var(--border);
        }
        .public-schedule-preview-heading {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }
        .public-schedule-preview-stage {
            width: 100%;
            height: 620px;
            margin-top: 14px;
            border: 1px solid var(--border-strong);
            border-radius: 12px;
            background: var(--surface);
            overflow: hidden;
            transition: width 0.18s ease-out;
        }
        .public-schedule-preview-stage.is-narrow { width: 100%; max-width: 350px; }
        .public-schedule-preview {
            display: block;
            width: 100%;
            height: 100%;
            padding: 0;
            border: 0;
            background: var(--surface);
            color: var(--text-primary);
        }
        .public-schedule-preview-error { margin: 8px 0 0; color: var(--danger); }
        .public-schedule-preview-refresh { margin-top: 10px; }
        .public-schedule-modal-footer { align-items: center; }
        .public-schedule-footer-spacer { flex: 1; }

        @media (max-width: 640px) {
            .classes-header-actions { align-items: stretch; grid-auto-flow: row; width: 100%; }
            .classes-header-actions .btn { justify-content: center; width: 100%; min-height: 44px; }
            .class-exceptions-heading { align-items: stretch; grid-template-columns: 1fr; }
            .class-exception-date { flex-basis: auto; }
            .class-exception-time-fields { grid-template-columns: repeat(2, 1fr); }
            .class-exception-actions .btn { width: 100%; justify-content: center; }
            .public-schedule-class-list,
            .public-schedule-form-grid { grid-template-columns: 1fr; }
            .public-schedule-copy-row { grid-template-columns: 1fr; row-gap: 8px; }
            .public-schedule-copy-row .btn,
            .public-schedule-link-actions .btn,
            .public-schedule-preview-refresh { width: 100%; justify-content: center; min-height: 44px; }
            .public-schedule-preview-heading { grid-template-columns: 1fr; row-gap: 12px; }
            .public-schedule-preview-heading .view-toggle { width: 100%; }
            .public-schedule-preview-heading .view-toggle-btn { flex: 1; min-height: 44px; }
            .public-schedule-modal-footer { flex-direction: column-reverse; }
            .public-schedule-modal-footer .btn { width: 100%; justify-content: center; }
            .public-schedule-footer-spacer { display: none; }
        }

        @media (prefers-reduced-motion: reduce) {
            .public-schedule-preview-stage { transition: none; }
            .public-schedule-preview > .schedule-spinner { animation-duration: 1.8s; }
        }
        /* Style native time input to match dark theme */
        input[type="time"] {
            color-scheme: dark;
        }

        /* CLASS TAGS in member list */
        .member-class-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 3px;
        }
        .member-class-tag {
            font-size: var(--type-caption-size);
            font-weight: 500;
            padding: 1px 7px;
            border-radius: 10px;
            background: var(--accent-subtle);
            color: var(--accent);
            border: 1px solid var(--accent-glow);
            white-space: nowrap;
        }
        /* DEMO FIRST-VISIT OVERLAY */
        #demoOverlay {
            position: fixed;
            inset: 0;
            z-index: 10000;
            background: var(--bg);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 24px;
            overflow-y: auto;
        }
        #demoOverlay.hidden { display: none; }
        .demo-overlay-inner {
            max-width: 440px;
            width: 100%;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding-top: 48px;
        }
        .demo-overlay-back {
            background: none;
            border: none;
            color: var(--accent);
            cursor: pointer;
            font-size: var(--type-caption-size);
            font-weight: 500;
            padding: 0;
            white-space: nowrap;
            font-family: 'Space Grotesk', sans-serif;
            transition: color 0.15s;
        }
        .demo-overlay-back:hover { color: var(--accent-hover); }
        .demo-overlay-badge {
            display: inline-block;
            font-family: 'Space Grotesk', sans-serif;
            font-size: var(--type-label-size);
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--accent);
            border: 1px solid var(--accent-glow);
            border-radius: 20px;
            padding: 3px 10px;
            margin-bottom: 28px;
            text-transform: uppercase;
        }
        /* Progressive-enhancement pair: the static declaration is the iOS 12
           fallback and the clamp() is the fluid enhancement. Keep both lines;
           collapsing them regresses iOS 12 to an inherited size. The fallback
           stays a literal because it must equal the clamp minimum (1.6rem)
           and no role token renders 1.6rem — headline (1.5rem) would give
           iOS 12 a size no other browser ever renders here. */
        .demo-overlay-headline {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.6rem;
            font-size: clamp(1.6rem, 5vw, 2.2rem);
            font-weight: 700;
            line-height: 1.2;
            color: var(--text-primary);
            margin-bottom: 14px;
            letter-spacing: -0.5px;
        }
        .demo-overlay-sub {
            font-family: var(--type-family-body);
            font-size: var(--type-body-size);
            font-weight: var(--type-body-weight);
            color: var(--text-secondary);
            line-height: var(--type-body-line);
            letter-spacing: 0;
            margin-bottom: 36px;
        }
        .demo-overlay-start {
            display: block;
            width: 100%;
            padding: 16px 24px;
            background: var(--accent);
            color: var(--text-on-accent);
            /* Deliberate literal: the overlay's single hero CTA at 1rem
               display 700 — the control role (0.85rem, body face) would
               demote it, and no button role renders this scale. */
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1rem;
            font-weight: 700;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            letter-spacing: -0.2px;
            transition: background 0.15s, transform 0.1s;
            margin-bottom: 14px;
        }
        .demo-overlay-start:hover { background: var(--accent-hover); }
        .demo-overlay-start:active { transform: scale(0.98); }
        .demo-overlay-reset {
            background: none;
            border: none;
            color: var(--text-muted);
            /* Size-only: a button by element but styled as an inline text
               link — the control role's 600 weight would change its voice. */
            font-size: var(--type-control-sm-size);
            cursor: pointer;
            padding: 6px 12px;
            border-radius: 6px;
            transition: color 0.15s;
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .demo-overlay-reset:hover { color: var(--text-secondary); }
        .demo-class-badge {
            display: inline-block;
            font-size: var(--type-label-size);
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--accent);
            background: var(--accent-subtle);
            border: 1px solid var(--accent-glow);
            border-radius: 4px;
            padding: 2px 6px;
            margin-left: 8px;
            vertical-align: middle;
        }

        /* MOBILE RESPONSIVE — Dashboard "Today's Classes" cards */
        @media (max-width: 640px) {
            /* Force single-column grid for class cards on narrow viewports */
            .today-classes-grid,
            .attendance-class-grid {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            /* Ensure card and all children stay within viewport */
            .today-class-card,
            .attendance-class-card {
                width: 100%;
                max-width: 100%;
                overflow: hidden;
            }

            /* Stack action buttons vertically for full-width tap targets */
            .today-class-actions {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 8px !important;
            }

            /* Make each CTA button full-width, centered text, easy to tap */
            .today-class-cta,
            .attendance-class-btn {
                width: 100%;
                max-width: 100%;
                white-space: normal;
                word-break: break-word;
                justify-content: center;
                align-self: stretch !important;
            }

            /* Fallback: any .btn inside a class card must not overflow */
            .today-class-card .btn,
            .attendance-class-card .btn {
                max-width: 100%;
                white-space: normal;
                word-break: break-word;
            }
        }

        /* Prevent section cards from overflowing on mobile (Attendance's
           class-picker section, which the Class Card grid lives inside) */
        @media (max-width: 768px) {
            .section-card {
                max-width: 100%;
                overflow: hidden;
            }
            .section-card-body {
                max-width: 100%;
                overflow: hidden;
            }
        }

        /* CSP-compliant hover effects (replacing inline onmouseover/onmouseout) */
        .sidebar-reset-btn:hover { background: var(--error-bg) !important; }
        .sidebar-signout-btn:hover { background: rgba(255,255,255,0.04) !important; color: var(--text-primary) !important; }
        .member-details-toggle-btn:hover { color: var(--text-primary) !important; }
        .member-limit-upgrade-actions { display: flex; margin-top: 10px; }
        .parent-member-option:hover { background: var(--surface-elevated) !important; }
        .reset-demo-link:hover { color: var(--text-secondary) !important; }

        /* Quick Add — session-added roster list inside the Quick Add modal */
        #quickAddModal .modal {
            max-width: 880px;
        }

        #quickAddModal .form-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        #quickAddModal .form-group {
            min-width: 0;
        }

        #quickAddModal .form-group input,
        #quickAddModal .form-group select,
        #quickAddModal .form-group textarea {
            width: 100%;
            min-width: 0;
        }

        .quick-add-added-list {
            margin-top: 16px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .quick-add-added-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-family: var(--type-family-body);
            font-size: var(--type-body-product-size);
            font-weight: var(--type-body-product-weight);
            line-height: var(--type-body-product-line);
            letter-spacing: 0;
        }
        .quick-add-added-row span:first-child {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .quick-add-added-row.type-caption {
            font-family: var(--type-family-body);
            font-size: var(--type-caption-size);
            font-weight: var(--type-caption-weight);
            line-height: var(--type-caption-line);
            letter-spacing: 0;
        }

        @media (max-width: 768px) {
            #quickAddModal .form-grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        @media (max-width: 640px) {
            .quick-add-added-row {
                flex-wrap: wrap;
            }
        }

        @media (max-width: 640px) {
            .tasks-page-actions {
                width: 100%;
            }
            .tasks-page-actions .btn {
                flex: 1 1 0;
                justify-content: center;
            }
            .tasks-filter-row {
                width: 100%;
                margin-left: 0;
            }
            .tasks-filter-row .filter-select {
                flex: 1 1 0;
                min-width: 0;
            }
            .task-list-panel { padding: 16px; }
            .task-row { align-items: flex-start; }
            .task-row-end {
                flex-direction: column;
                align-items: flex-end;
                margin-left: 8px;
            }
            .task-row-end .action-menu-wrap { margin: 6px 0 0; }
            .task-supply-row {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
            }
            .task-supply-name {
                flex: 1 1 100%;
                margin-bottom: 6px;
            }
            .task-supply-state { margin: 0 8px 0 0; }
            .task-supply-action { min-width: 0; margin-left: auto; }
            .task-supply-action .btn { white-space: normal; }
            .task-empty-actions { flex-direction: column; }
            .task-empty-actions > * + * { margin: 8px 0 0; }
        }
/* Native disclosure must win over form/grid display rules. */
#beltRankStripeGuidelinesSection[hidden] { display: none !important; }
.belt-rank-modal #beltRankStripeGuidelinesSection > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--type-body-size);
    font-weight: 600;
}
.stripe-guideline-row { display:grid; grid-template-columns: 3rem 1fr 1fr; gap:var(--space-2); align-items:end; margin-top:var(--space-2); }
@media (max-width: 560px) { .stripe-guideline-row { grid-template-columns: 1fr; } .stripe-guideline-row > strong { margin-top:var(--space-1); } }

/* Personal account email change — the existing operational card and controls. */
.settings-card--email-change { grid-column: span 2; min-width: 0; padding: 20px; }
.email-change-identity { display: grid; gap: 8px; margin-bottom: 16px; }
.email-change-address { overflow-wrap: break-word; word-break: break-word; font-size: var(--type-body-product-size); line-height: var(--type-body-product-line); }
.email-change-progress h4 { margin: 0 0 12px; font-family: var(--type-family-display); font-size: var(--type-title-sm-size); line-height: var(--type-title-sm-line); }
.email-change-progress ol { padding-left: 20px; margin: 0 0 16px; font-size: var(--type-body-product-size); line-height: var(--type-body-product-line); color: var(--text-secondary); }
.email-change-progress li + li { margin-top: 8px; }
.email-change-actions { display: flex; flex-wrap: wrap; align-items: center; }
.email-change-actions > * { margin-right: 8px; margin-bottom: 8px; }
.email-change-actions .btn, .settings-card--email-change > div > .btn { min-height: 44px; }
.email-change-form input { min-height: 44px; width: 100%; min-width: 0; }
.email-change-form .form-group { margin-bottom: 16px; }
.settings-card--email-change .email-change-error { color: var(--error); }
.email-change-help { margin-top: 16px; font-size: var(--type-body-product-size); line-height: var(--type-body-product-line); color: var(--text-secondary); }
.email-change-help summary { min-height: 44px; padding: 12px 0; cursor: pointer; color: var(--accent); }
.email-change-help summary:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.email-change-help p { margin-top: 8px; }
.settings-card--email-change .email-change-billing { margin: 16px 0 0; }
.email-change-text-button { padding: 0; background: none; border: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.email-change-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.settings-card--email-change [hidden] { display: none !important; }
@media (max-width: 768px) {
    .settings-card--email-change { grid-column: auto; }
    .email-change-actions > .btn-primary { flex: 1; }
}