/* ============================================================
   TTX component kit — BoardUI-inspired, native CSS
   Buttons, chips, cards, alerts, empty states, tables,
   radio/checkbox cards, command strip, inbox, AI chrome.
   ============================================================ */

/* ── Polish: no transition:all on frequent controls ─────────── */
a, .nav-item, .btn, .header-btn, .decision-option, .kit-choice,
.kit-card, .chip, .alert-feed-item, .ttx-accordion-toggle {
    transition: color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out),
                transform var(--motion-press) var(--ease-out),
                opacity var(--motion-fast) var(--ease-out);
}

/* Tabular numbers for timers, scores, leaderboards */
.tabular-nums,
.kit-stat-value,
.timer-badge,
.rank-score,
.stat-value,
.clock,
[data-tabular] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Icons inherit ink */
.kit-btn i,
.cmd-strip i,
.kit-empty i,
.kit-alert i,
.header-btn i,
.nav-item i,
.ttx-accordion-toggle i {
    color: currentColor;
}

/* ── Buttons ───────────────────────────────────────────────── */
.kit-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-md);
    font-weight: 650;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
}

.kit-btn,
.btn:not(.btn-sm) {
    min-height: var(--hit);
    padding: 0 16px;
}

.kit-btn-sm,
.btn-sm {
    min-height: 32px;
    padding: 0 10px;
    font-size: 13px;
}

.kit-btn-primary,
.btn-primary {
    background: var(--color-accent);
    color: var(--color-text-on-accent, #0a0e17);
    border-color: var(--color-accent);
}

.kit-btn-primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow: var(--shadow-1);
}

.kit-btn-primary:active:not(:disabled),
.btn-primary:active:not(:disabled) {
    transform: scale(0.96);
}

.kit-btn-secondary,
.btn-secondary {
    background: var(--color-surface-sunken);
    color: var(--color-text);
    border-color: var(--color-border);
}

.kit-btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.kit-btn:disabled,
.btn:disabled,
.kit-btn.is-disabled,
.btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.header-btn {
    min-width: var(--hit);
    min-height: var(--hit);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Chip / status-dot ─────────────────────────────────────── */
.kit-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
}

.kit-chip-ok { color: var(--color-status-ok); border-color: color-mix(in srgb, var(--color-status-ok) 40%, transparent); background: color-mix(in srgb, var(--color-status-ok) 10%, transparent); }
.kit-chip-warn { color: var(--color-status-warn); border-color: color-mix(in srgb, var(--color-status-warn) 40%, transparent); background: color-mix(in srgb, var(--color-status-warn) 10%, transparent); }
.kit-chip-danger { color: var(--color-status-danger); border-color: color-mix(in srgb, var(--color-status-danger) 40%, transparent); background: color-mix(in srgb, var(--color-status-danger) 10%, transparent); }
.kit-chip-info { color: var(--color-status-info); border-color: color-mix(in srgb, var(--color-status-info) 40%, transparent); background: color-mix(in srgb, var(--color-status-info) 10%, transparent); }
.kit-chip-delta-up { color: var(--color-status-ok); }
.kit-chip-delta-down { color: var(--color-status-danger); }

.kit-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-status-idle);
    flex-shrink: 0;
}
.kit-dot-ok { background: var(--color-status-ok); }
.kit-dot-warn { background: var(--color-status-warn); }
.kit-dot-danger { background: var(--color-status-danger); }
.kit-dot-info { background: var(--color-status-info); }
.kit-dot-live { background: var(--color-status-ok); animation: kit-pulse 1.6s ease-in-out infinite; }

@keyframes kit-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ── Cards ─────────────────────────────────────────────────── */
.kit-card,
.card {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.kit-card .kit-card,
.kit-card .card,
.card .card,
.card .kit-card,
.kit-card .decision-card,
.card .decision-card {
    border-radius: var(--radius-inner);
}

.kit-card-header,
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}

.kit-card-body { padding: 16px 18px; }

/* ── Stat card ─────────────────────────────────────────────── */
.kit-stat-card,
.stat-card {
    position: relative;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.kit-stat-label,
.stat-label {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.kit-stat-value,
.stat-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 4px;
    color: var(--color-text);
}

.kit-stat-detail,
.stat-detail {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* ── Alert feed ────────────────────────────────────────────── */
.kit-alert,
.alert-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
}

.kit-alert-ok { border-left-color: var(--color-status-ok); }
.kit-alert-warn { border-left-color: var(--color-status-warn); }
.kit-alert-danger { border-left-color: var(--color-status-danger); }
.kit-alert-info { border-left-color: var(--color-status-info); }

.kit-alert-title { font-weight: 700; font-size: 13px; }
.kit-alert-body { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
.kit-alert-meta { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }

/* ── Empty state ───────────────────────────────────────────── */
.kit-empty,
.empty-state {
    text-align: center;
    padding: 40px 24px;
    color: var(--color-text-muted);
}

.kit-empty i,
.empty-state i {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.35;
    display: block;
}

.kit-empty h3,
.empty-state h3 {
    color: var(--color-text);
    font-size: 16px;
    margin-bottom: 6px;
}

.kit-empty p,
.empty-state p {
    font-size: 13px;
    color: var(--color-text-secondary);
    max-width: 420px;
    margin: 0 auto;
}

.kit-empty .kit-btn,
.empty-state .btn { margin-top: 16px; }

/* ── Data table ────────────────────────────────────────────── */
.kit-table-wrap,
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-card);
}

.kit-table,
.table-wrap table {
    width: 100%;
    border-collapse: collapse;
}

.kit-table th,
.table-wrap th {
    text-align: left;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
}

.kit-table td,
.table-wrap td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}

.kit-table tr:last-child td,
.table-wrap tr:last-child td { border-bottom: none; }

.kit-table tbody tr:hover,
.table-wrap tbody tr:hover { background: var(--color-surface-hover); }

/* ── Radio / checkbox cards ────────────────────────────────── */
.kit-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    min-height: var(--hit);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    cursor: pointer;
    margin: 8px 0;
}

.kit-choice:hover { border-color: var(--color-accent-2); }

.kit-choice.is-selected,
.decision-option.selected,
.kit-choice:has(input:checked) {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-sunken));
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.kit-choice input { margin-top: 3px; accent-color: var(--color-accent); flex-shrink: 0; }
.kit-choice-title { font-weight: 700; font-size: 15px; color: var(--color-text); }
.kit-choice-desc { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }

.decision-option {
    padding: 16px 18px;
    min-height: var(--hit);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin: 8px 0;
    cursor: pointer;
    background: var(--color-surface-sunken);
}

.decision-option:hover { border-color: var(--color-accent-2); }
.decision-option.selected {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-sunken));
}

/* ── Command strip ─────────────────────────────────────────── */
.cmd-strip {
    position: sticky;
    top: var(--header-height, 60px);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 0 0 16px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
}

.cmd-strip .cmd-meta { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; }
.cmd-strip .cmd-phase { font-weight: 700; font-size: 14px; }
.cmd-strip .cmd-timer {
    font-family: var(--font-mono);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    color: var(--color-accent-2);
    min-width: 72px;
}
.cmd-strip .cmd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cmd-strip .cmd-actions .btn,
.cmd-strip .cmd-actions .kit-btn {
    min-width: var(--hit);
    min-height: var(--hit);
}

.cmd-strip-spacer { height: 0; }

/* ── Inbox / notification center ───────────────────────────── */
.inbox-shell { position: relative; }
.inbox-panel {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(380px, calc(100vw - 24px));
    max-height: 420px;
    overflow: auto;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    z-index: 200;
}
.inbox-panel.is-open { display: block; }
.inbox-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--color-border);
    font-weight: 700; font-size: 13px;
}
.inbox-item {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}
.inbox-item:hover { background: var(--color-surface-hover); }
.inbox-item.is-unread { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.inbox-item-title { font-size: 13px; font-weight: 650; }
.inbox-item-msg { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.inbox-empty { padding: 24px; text-align: center; color: var(--color-text-muted); font-size: 13px; }

/* ── AI coaching chrome ────────────────────────────────────── */
.ai-think {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--accent-purple) 35%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-purple) 6%, var(--color-surface-card));
}
.ai-think-dots { display: flex; gap: 4px; padding-top: 4px; }
.ai-think-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-purple);
    animation: kit-think 1.1s ease-in-out infinite;
}
.ai-think-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-think-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes kit-think {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}
.ai-task-list { list-style: none; margin: 8px 0 0; padding: 0; }
.ai-task-list li {
    font-size: 13px;
    color: var(--color-text-secondary);
    padding: 4px 0;
    opacity: 0;
    transform: translateY(4px);
    animation: kit-reveal 280ms var(--ease-out) forwards;
}
.ai-task-list li:nth-child(1) { animation-delay: 80ms; }
.ai-task-list li:nth-child(2) { animation-delay: 220ms; }
.ai-task-list li:nth-child(3) { animation-delay: 360ms; }
.ai-task-list li:nth-child(4) { animation-delay: 500ms; }
.ai-task-list li.is-done { color: var(--color-status-ok); }
@keyframes kit-reveal {
    to { opacity: 1; transform: none; }
}

/* ── Settings tabs ─────────────────────────────────────────── */
.settings-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
}
.settings-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    padding: 12px 14px;
    min-height: var(--hit);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
}
.settings-tab.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
.settings-panel { display: none; }
.settings-panel.is-active { display: block; }

/* ── Wizard ────────────────────────────────────────────────── */
.wizard-steps {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
}
.wizard-step {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted); font-size: 13px;
}
.wizard-step.is-active { color: var(--color-accent); border-color: var(--color-accent); }
.wizard-step.is-done { color: var(--color-status-ok); border-color: var(--color-status-ok); }
.wizard-pane { display: none; }
.wizard-pane.is-active { display: block; }
.wizard-qr {
    width: 200px; height: 200px;
    background: #fff; border-radius: var(--radius-md);
    padding: 8px; box-shadow: var(--shadow-2);
}

/* ── Roster ────────────────────────────────────────────────── */
.roster-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px dashed var(--color-border);
}
.roster-row:last-child { border-bottom: none; }

/* ── Present / inject mode ─────────────────────────────────── */
body.is-present .sidebar,
body.is-present .top-header,
body.is-present .flash-messages { display: none !important; }
body.is-present .main-content { margin-left: 0; }
body.is-present .page-content { padding: 32px 48px; }
.present-chrome { display: none; }
body.is-present .present-chrome {
    display: flex; position: fixed; bottom: 16px; right: 20px;
    gap: 8px; font-size: 12px; color: var(--color-text-muted); opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
    .kit-dot-live, .ai-think-dots span { animation: none; }
    .ai-task-list li { animation: none; opacity: 1; transform: none; }
}

/* ── Modal (ops clone / schedule / handoff) ────────────────── */
.kit-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 80;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.kit-modal.is-open { display: flex; }
.kit-modal-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-text) 35%, transparent);
}
.kit-modal-card {
    position: relative;
    width: min(480px, 100%);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    padding: 20px 22px;
}
.kit-modal-card h2 { font-size: 18px; margin: 0 0 8px; letter-spacing: -0.02em; }
.kit-modal-card p.lede { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 14px; }
.kit-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.ops-alert-panel { margin-bottom: 16px; }
.ops-alert-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ops-alert-list { display: flex; flex-direction: column; gap: 8px; }
.ops-stale-chip { color: var(--color-status-warn); font-weight: 650; }
.ops-card.is-stale { border-color: color-mix(in srgb, var(--color-status-warn) 55%, var(--color-border)); }

/* ── Accordion (sidebar + in-page) ─────────────────────────── */
/*
 * Native <button> chrome must be killed on the class itself.
 * Nested-only selectors (v4.3.2) left UA borders/background showing
 * when specificity or cache missed a variant — DESK/ROOM looked like
 * raw boxed labels instead of accordion headers.
 */
button.ttx-accordion-toggle {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    background: transparent;
    background-image: none;
    border: 0 none transparent;
    box-shadow: none;
    border-radius: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.3;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
}

.ttx-accordion-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    flex-shrink: 0;
    font-size: 10px;
    line-height: 1;
    color: var(--color-text-muted);
    opacity: 0.85;
    transform-origin: 50% 50%;
    transition: transform var(--motion-fast) var(--ease-out);
}
button.ttx-accordion-toggle[aria-expanded="false"] .ttx-accordion-chevron {
    transform: rotate(-90deg);
}

.ttx-accordion-panel[hidden],
.nav-section-body[hidden],
.ttx-accordion.is-collapsed > .ttx-accordion-panel {
    display: none !important;
}

.ttx-accordion-count {
    font-weight: 650;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}
.ttx-accordion-nav .ttx-accordion-title {
    flex: 1;
    min-width: 0;
}
.ttx-accordion-nav .ttx-accordion-count:not([hidden])::before {
    content: '· ';
}

/* Sidebar: muted uppercase row, full-width, no boxed chip */
.ttx-accordion-nav > button.ttx-accordion-toggle,
.sidebar button.nav-section-label.ttx-accordion-toggle {
    min-height: 36px;
    padding: 8px 10px;
    margin: 0 0 2px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 0 none transparent;
    box-shadow: none;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ttx-accordion-nav > button.ttx-accordion-toggle:hover,
.sidebar button.nav-section-label.ttx-accordion-toggle:hover {
    color: var(--color-text);
    background: var(--color-surface-sunken);
}
.ttx-accordion-nav > button.ttx-accordion-toggle:focus-visible,
.sidebar button.nav-section-label.ttx-accordion-toggle:focus-visible {
    outline: 2px solid var(--color-accent, #3f6b52);
    outline-offset: 2px;
}

/* In-page: real section heading + divider, not a kit chip */
.ttx-accordion-page {
    margin-bottom: 20px;
}
.ttx-accordion-page > .ttx-accordion-heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
.ttx-accordion-page button.ttx-accordion-toggle,
.ttx-accordion-page > .ttx-accordion-heading .ttx-accordion-toggle {
    width: 100%;
    min-height: 48px;
    padding: 10px 4px 12px;
    margin: 0 0 14px;
    background: transparent;
    border: 0 none transparent;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    color: var(--color-text);
    font-family: var(--font-display, inherit);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
}
.ttx-accordion-page.is-collapsed > .ttx-accordion-heading .ttx-accordion-toggle,
.ttx-accordion-page button.ttx-accordion-toggle[aria-expanded="false"] {
    margin-bottom: 0;
}
.ttx-accordion-page button.ttx-accordion-toggle:hover {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}
.ttx-accordion-page button.ttx-accordion-toggle:focus-visible {
    outline: 2px solid var(--color-accent, #3f6b52);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 8px);
}
.ttx-accordion-page .ttx-accordion-title {
    flex: 1;
    min-width: 0;
}
.ttx-accordion-page .ttx-accordion-chevron {
    font-size: 12px;
}
.ttx-accordion-page .ttx-accordion-count:not([hidden]) {
    font-size: 12px;
    font-weight: 650;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-surface-sunken);
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .ttx-accordion-page button.ttx-accordion-toggle {
        min-height: 44px;
        padding: 10px 4px 12px;
        font-size: 17px;
    }
    .sidebar button.nav-section-label.ttx-accordion-toggle,
    .ttx-accordion-nav > button.ttx-accordion-toggle {
        min-height: 44px;
    }
}

/* ── U-A+ role home + join share ───────────────────────────── */
.role-home-switcher {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 20px;
}
.role-home-switcher a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border, #d5d8d4);
    font-weight: 650;
    font-size: 13px;
    color: var(--color-text);
    background: var(--color-surface);
}
.role-home-switcher a.active {
    background: var(--color-accent, #3f6b52);
    border-color: var(--color-accent, #3f6b52);
    color: #fff;
}
.join-hero { margin-bottom: 8px; }
.join-hero-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.join-hero-form .form-control { flex: 1; min-width: 160px; }
.join-share { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.join-share-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.join-share-label {
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    min-width: 72px;
}
.join-share-code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 16px;
    letter-spacing: 1px;
}
.join-share-url { flex: 1; min-width: 180px; font-size: 12px; }