/**
 * KindredAccess Theme System
 *
 * A warm, calm visual language for connection without pressure.
 * "Where access is part of intimacy"
 *
 * Usage:
 *   Use CSS variables for all colors and key design tokens.
 *   Import this file BEFORE page-specific styles.
 *
 * Color Palette:
 *   - Primary Accent (Clay/Terracotta): #C26A4A - accents, buttons, selected states
 *   - Background Canvas (Linen): #F6F1EB - default body/page background
 *   - Surface/Card (Chalk): #FAF7F3 - cards/panels
 *   - Text Primary (Charcoal): #2F2A26
 *   - Text Secondary (Warm Slate): #6E665F
 *   - Support Accent (Moss): #6F8F7A - compatibility/"they get it" signals
 *   - Low Availability (Oat): #E9D9A8 - limited/resting chips
 *   - Neutral (Blue-Gray): #7A8A92 - dividers, tertiary UI
 */

:root {
    /* === Core Colors === */
    --ka-accent: #A8543A;              /* Darkened from #C26A4A: 5.26:1 with white text, 4.92:1 as text on surfaces (WCAG AA) */
    --ka-accent-hover: #8F4630;
    --ka-accent-light: rgba(168, 84, 58, 0.12);

    --ka-bg: #F6F1EB;
    --ka-surface: #FAF7F3;
    --ka-surface-elevated: #FFFFFF;

    --ka-text: #2F2A26;
    --ka-text-muted: #5A534D;          /* Darkened from #6E665F for better contrast (6.5:1 on white) */
    --ka-text-placeholder: #6E665F;    /* Separate placeholder color (5.1:1 - AA compliant) */
    --ka-text-on-accent: #FFFFFF;

    --ka-border: #E5DDD4;
    --ka-border-strong: #D1C7BC;

    /* === Semantic Colors === */
    --ka-support: #6F8F7A;
    --ka-support-light: rgba(111, 143, 122, 0.15);
    --ka-low: #E9D9A8;
    --ka-low-text: #5C5032;
    --ka-neutral: #7A8A92;

    /* === Status/Feedback Colors === */
    --ka-success: #3D7050;             /* Darkened from #5A8F6A: 5.78:1 with white text and as text on white (WCAG AA) */
    --ka-success-hover: #2F5C42;
    --ka-success-bg: #E8F4EC;
    --ka-error: #B04A38;               /* Darkened from #C25A4A: 5.41:1 with white text and as text on white (WCAG AA) */
    --ka-error-bg: #FAEDEB;
    --ka-info: #5A7A8F;
    --ka-info-bg: #EBF2F5;
    --ka-warning: #B8923A;
    --ka-warning-text: #8A6D1F;         /* 4.90:1 on white for warning/status text */
    --ka-warning-bg: #F9F4E8;

    /* === Needs/Offers Colors (Compatibility) === */
    --ka-need: #A8543A;      /* What I need - terracotta */
    --ka-offer: #3D7050;     /* What I can offer - moss green */

    /* === Spacing & Layout === */
    --ka-radius-sm: 6px;
    --ka-radius: 10px;
    --ka-radius-lg: 16px;
    --ka-radius-full: 9999px;

    --ka-shadow-sm: 0 1px 3px rgba(47, 42, 38, 0.06);
    --ka-shadow: 0 2px 8px rgba(47, 42, 38, 0.08);
    --ka-shadow-lg: 0 8px 24px rgba(47, 42, 38, 0.12);
    --ka-shadow-accent: 0 4px 12px rgba(168, 84, 58, 0.25);

    /* === Focus & Accessibility === */
    --ka-focus-ring: 0 0 0 3px rgba(168, 84, 58, 0.4);
    --ka-focus-ring-inset: inset 0 0 0 2px var(--ka-accent);

    /* === Typography === */
    --ka-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ka-font-size-sm: 0.875rem;
    --ka-font-size-base: 1rem;
    --ka-font-size-lg: 1.125rem;
    --ka-font-size-xl: 1.25rem;
    --ka-font-size-2xl: 1.5rem;
    --ka-line-height: 1.6;

    /* === Transitions === */
    --ka-transition-fast: 150ms ease;
    --ka-transition: 200ms ease;
    --ka-transition-slow: 300ms ease;
}

/* === Base Styles === */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--ka-font-family);
    font-size: var(--ka-font-size-base);
    line-height: var(--ka-line-height);
    color: var(--ka-text);
    background-color: var(--ka-bg);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* iOS Dynamic Type support - scales with system text size */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ==========================================================================
   iOS Dynamic Type Support
   Respects user's system text size preference on iOS
   ========================================================================== */

/* Use iOS system font with Dynamic Type scaling */
@supports (font: -apple-system-body) {
    body {
        font: -apple-system-body;
        font-family: var(--ka-font-family);
    }
}

/* Ensure text can scale up without breaking layout */
html {
    /* Allow iOS to scale text based on user preference */
    -webkit-text-size-adjust: 100%;
    /* Prevent horizontal scroll on text scaling */
    overflow-x: hidden;
}

/* Fluid typography that scales with viewport and respects user preference */
@media screen and (min-width: 320px) {
    html {
        /* Base size that scales between 14px and 18px depending on viewport */
        font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1200 - 320)));
    }
}

@media screen and (min-width: 1200px) {
    html {
        font-size: 18px;
    }
}

/* Larger text sizes for accessibility - matches iOS accessibility settings */
@media screen and (prefers-reduced-motion: no-preference) {
    /* iOS Large Text support via media query */
    @supports (-webkit-touch-callout: none) {
        /* iOS-specific: inherit system font size */
        body {
            font-size: inherit;
        }
    }
}

/* === Focus Styles (Accessibility) === */
/*
 * Focus-visible provides keyboard-only focus indicators.
 * Fallback for browsers without :focus-visible support.
 */
:focus {
    outline: 3px solid var(--ka-accent);
    outline-offset: 2px;
}

/* Modern browsers: only show focus ring for keyboard navigation */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--ka-accent);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (forced-colors: active) {
    :focus,
    :focus-visible {
        outline: 3px solid CanvasText;
    }
}

/* === Links === */
a {
    color: var(--ka-accent);
    text-decoration: none;
    transition: color var(--ka-transition-fast);
}

a:hover {
    color: var(--ka-accent-hover);
    text-decoration: underline;
}

/* === Screen Reader Only === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === Skip Link === */
.ka-skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: var(--ka-accent);
    color: var(--ka-text-on-accent);
    padding: 12px 20px;
    border-radius: var(--ka-radius);
    font-weight: 600;
    z-index: 10000;
    transition: top var(--ka-transition-fast);
}

.ka-skip-link:focus {
    top: 16px;
    outline: 3px solid var(--ka-surface);
    outline-offset: 2px;
}

/* ==========================================================================
   COMPONENT: Cards
   ========================================================================== */

.ka-card {
    background: var(--ka-surface-elevated);
    border-radius: var(--ka-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--ka-shadow);
    border: 1px solid var(--ka-border);
}

.ka-card--surface {
    background: var(--ka-surface);
}

.ka-card--interactive {
    transition: transform var(--ka-transition), box-shadow var(--ka-transition);
}

.ka-card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--ka-shadow-lg);
}

/* ==========================================================================
   COMPONENT: Buttons
   ========================================================================== */

.ka-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: var(--ka-font-family);
    font-size: var(--ka-font-size-base);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: none;
    border-radius: var(--ka-radius);
    cursor: pointer;
    transition: all var(--ka-transition);
    min-height: 44px; /* Accessibility: minimum touch target */
}

.ka-btn:focus-visible {
    box-shadow: var(--ka-focus-ring);
}

/* Primary Button */
.ka-btn-primary {
    background-color: var(--ka-accent);
    color: var(--ka-text-on-accent);
    box-shadow: var(--ka-shadow-accent);
}

.ka-btn-primary:hover {
    background-color: var(--ka-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(194, 106, 74, 0.35);
}

.ka-btn-primary:active {
    transform: translateY(0);
}

/* Secondary Button */
.ka-btn-secondary {
    background-color: var(--ka-surface-elevated);
    color: var(--ka-text);
    border: 2px solid var(--ka-border-strong);
}

.ka-btn-secondary:hover {
    background-color: var(--ka-surface);
    border-color: var(--ka-accent);
    color: var(--ka-accent);
}

/* Ghost Button */
.ka-btn-ghost {
    background-color: transparent;
    color: var(--ka-accent);
    padding: 0.5rem 1rem;
}

.ka-btn-ghost:hover {
    background-color: var(--ka-accent-light);
}

/* Danger Button */
.ka-btn-danger {
    background-color: var(--ka-error);
    color: var(--ka-text-on-accent);
}

.ka-btn-danger:hover {
    background-color: #A84A3D;
}

/* Button Sizes */
.ka-btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--ka-font-size-sm);
    min-height: 44px;
}

.ka-btn-lg {
    padding: 1rem 2rem;
    font-size: var(--ka-font-size-lg);
}

/* Icon-only Button - ensures 44px minimum touch target */
.ka-btn-icon,
.btn-icon {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   COMPONENT: Chips / Tags
   ========================================================================== */

.ka-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: var(--ka-font-size-sm);
    font-weight: 500;
    border-radius: var(--ka-radius-full);
    background-color: var(--ka-accent-light);
    color: var(--ka-accent);
    border: 1px solid transparent;
}

.ka-chip--support {
    background-color: var(--ka-support-light);
    color: var(--ka-support);
}

.ka-chip--low {
    background-color: var(--ka-low);
    color: var(--ka-low-text);
}

.ka-chip--neutral {
    background-color: var(--ka-surface);
    color: var(--ka-text-muted);
    border-color: var(--ka-border);
}

.ka-chip--active {
    background-color: var(--ka-accent);
    color: var(--ka-text-on-accent);
}

/* Emoji in chips should be decorative */
.ka-chip [aria-hidden="true"] {
    font-style: normal;
}

/* ==========================================================================
   COMPONENT: Form Inputs
   ========================================================================== */

.ka-input,
.ka-select,
.ka-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--ka-font-family);
    font-size: var(--ka-font-size-base);
    color: var(--ka-text);
    background-color: var(--ka-surface-elevated);
    border: 2px solid var(--ka-border);
    border-radius: var(--ka-radius);
    transition: border-color var(--ka-transition-fast), box-shadow var(--ka-transition-fast);
}

.ka-input:hover,
.ka-select:hover,
.ka-textarea:hover {
    border-color: var(--ka-border-strong);
}

.ka-input:focus,
.ka-select:focus,
.ka-textarea:focus {
    border-color: var(--ka-accent);
    box-shadow: var(--ka-focus-ring);
    outline: none;
}

.ka-input::placeholder,
.ka-select::placeholder,
.ka-textarea::placeholder {
    color: var(--ka-text-placeholder);
}

/* Ensure all form placeholders use the accessible placeholder color */
input::placeholder,
textarea::placeholder {
    color: var(--ka-text-placeholder);
}

.ka-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--ka-text);
}

.ka-help-text {
    display: block;
    margin-top: 0.375rem;
    font-size: var(--ka-font-size-sm);
    color: var(--ka-text-muted);
}

.ka-error-text {
    display: block;
    margin-top: 0.375rem;
    font-size: var(--ka-font-size-sm);
    color: var(--ka-error);
}

/* ==========================================================================
   COMPONENT: Messages / Alerts
   ========================================================================== */

.ka-alert {
    padding: 1rem 1.25rem;
    border-radius: var(--ka-radius);
    border-left: 4px solid;
    margin-bottom: 1rem;
}

.ka-alert--success {
    background-color: var(--ka-success-bg);
    border-color: var(--ka-success);
    color: #2D4A35;
}

.ka-alert--error {
    background-color: var(--ka-error-bg);
    border-color: var(--ka-error);
    color: #6B2E25;
}

.ka-alert--info {
    background-color: var(--ka-info-bg);
    border-color: var(--ka-info);
    color: #2D3E4A;
}

.ka-alert--warning {
    background-color: var(--ka-warning-bg);
    border-color: var(--ka-warning);
    color: #5C491D;
}

/* ==========================================================================
   COMPONENT: Section Headers
   ========================================================================== */

.ka-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ka-border);
}

.ka-section-title {
    font-size: var(--ka-font-size-lg);
    font-weight: 600;
    color: var(--ka-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ka-section-title [aria-hidden="true"] {
    font-size: 1.25em;
}

/* ==========================================================================
   COMPONENT: Status Badge
   ========================================================================== */

.ka-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background-color: var(--ka-surface);
    border: 1px solid var(--ka-border);
    border-radius: var(--ka-radius);
    font-size: var(--ka-font-size-sm);
}

.ka-status-badge--available {
    background-color: var(--ka-support-light);
    border-color: var(--ka-support);
    color: #3D6B4F; /* darker than --ka-support for 4.5:1 text contrast */
}

.ka-status-badge--limited {
    background-color: var(--ka-low);
    border-color: #D4C594;
    color: var(--ka-low-text);
}

.ka-status-badge--resting {
    background-color: var(--ka-surface);
    border-color: var(--ka-border-strong);
    color: var(--ka-text-muted);
}

.ka-status-badge--away {
    background-color: var(--ka-surface);
    border-color: var(--ka-neutral);
    color: #4E5B62; /* darker than --ka-neutral for 4.5:1 text contrast */
}

/* Status indicator dot */
.ka-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

/* ==========================================================================
   LAYOUT: Container
   ========================================================================== */

.ka-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.ka-container--narrow {
    max-width: 800px;
}

.ka-container--wide {
    max-width: 1400px;
}

/* ==========================================================================
   LAYOUT: Header
   ========================================================================== */

.ka-header {
    background-color: var(--ka-surface-elevated);
    border-top: 3px solid var(--ka-accent);
    border-bottom: 1px solid var(--ka-border);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.ka-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.ka-logo {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ka-accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.ka-logo:hover {
    color: var(--ka-accent-hover);
    text-decoration: none;
}

/* ==========================================================================
   LAYOUT: Navigation
   ========================================================================== */

.ka-nav {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    align-items: center;
}

.ka-nav-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    color: var(--ka-text);
    font-weight: 500;
    border-radius: var(--ka-radius);
    transition: all var(--ka-transition-fast);
}

.ka-nav-link:hover {
    background-color: var(--ka-accent-light);
    color: var(--ka-accent);
    text-decoration: none;
}

.ka-nav-link--active {
    background-color: var(--ka-accent);
    color: var(--ka-text-on-accent);
}

.ka-nav-link--active:hover {
    background-color: var(--ka-accent-hover);
    color: var(--ka-text-on-accent);
}

.ka-nav-badge {
    background-color: var(--ka-error);
    /* Token, not white: dark theme's --ka-error is light, so white text fails */
    color: var(--ka-text-on-accent);
    padding: 0.125rem 0.5rem;
    border-radius: var(--ka-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 1.25rem;
    text-align: center;
}

/* ==========================================================================
   LAYOUT: Footer
   ========================================================================== */

.ka-footer {
    /* Fixed dark band in every theme — var(--ka-text) flips light in dark mode
       and themed link colors fail contrast against it */
    background-color: #2F2A26;
    color: #FAF7F3;
    padding: 2rem 0;
    margin-top: 3rem;
}

.ka-footer a {
    color: #FAF7F3;
    opacity: 0.85;
}

.ka-footer a:hover {
    opacity: 1;
    color: #FAF7F3;
}

.ka-footer-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ka-footer-text {
    text-align: center;
    color: #FAF7F3; /* explicit: beats accessibility.css's generic p color on the dark footer */
    opacity: 0.85;
    font-size: var(--ka-font-size-sm);
}

.ka-footer-link--crisis {
    color: #E8C56A; /* lighter gold than --ka-warning: 8.5:1 on the dark footer */
    opacity: 1;
}

/* ==========================================================================
   LAYOUT: Main Content
   ========================================================================== */

.ka-main {
    min-height: calc(100vh - 200px);
    padding: 2rem 0;
}

/* Links inside body text must not rely on color alone (WCAG 1.4.1) */
main p a,
main li a {
    text-decoration: underline;
}

/* ==========================================================================
   UTILITY: Spacing
   ========================================================================== */

.ka-mt-0 { margin-top: 0; }
.ka-mt-1 { margin-top: 0.5rem; }
.ka-mt-2 { margin-top: 1rem; }
.ka-mt-3 { margin-top: 1.5rem; }
.ka-mt-4 { margin-top: 2rem; }

.ka-mb-0 { margin-bottom: 0; }
.ka-mb-1 { margin-bottom: 0.5rem; }
.ka-mb-2 { margin-bottom: 1rem; }
.ka-mb-3 { margin-bottom: 1.5rem; }
.ka-mb-4 { margin-bottom: 2rem; }

/* ==========================================================================
   UTILITY: Text
   ========================================================================== */

.ka-text-muted {
    color: var(--ka-text-muted);
}

.ka-text-accent {
    color: var(--ka-accent);
}

.ka-text-support {
    color: var(--ka-support);
}

.ka-text-center {
    text-align: center;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .ka-header-inner {
        flex-wrap: wrap;
    }

    .ka-nav {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }

    .ka-nav-link {
        padding: 0.5rem 0.625rem;
        font-size: var(--ka-font-size-sm);
    }

    .ka-card {
        padding: 1rem;
    }

    .ka-footer-links {
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .ka-btn {
        width: 100%;
    }

    .ka-btn-sm {
        width: auto;
    }
}

/* ==========================================================================
   ACCESSIBILITY: Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY: High Contrast Mode
   ========================================================================== */

@media (forced-colors: active) {
    .ka-btn,
    .ka-card,
    .ka-chip,
    .ka-alert {
        border: 2px solid CanvasText;
    }

    .ka-nav-link--active {
        border: 2px solid Highlight;
    }

    .ka-status-badge,
    .ka-chip--active {
        border: 2px solid Highlight;
    }
}

/* ==========================================================================
   ACCESSIBILITY: Focus Within (for card/container focus)
   ========================================================================== */

.ka-card:focus-within {
    outline: 2px solid var(--ka-accent);
    outline-offset: 2px;
}

/* Ensure minimum touch target size on all interactive elements */
a,
button,
input,
select,
textarea,
[role="button"],
[role="link"] {
    min-height: 44px;
}

/* Exception: inline links in paragraphs */
p a,
li a,
span a {
    min-height: auto;
}

/* ==========================================================================
   THEME: Dark Mode
   Apply with class="theme-dark" on body or html
   ========================================================================== */

.theme-dark {
    --ka-accent: #E08A6A;
    --ka-accent-hover: #D47A5A;
    --ka-accent-light: rgba(224, 138, 106, 0.15);

    --ka-bg: #1A1816;
    --ka-surface: #242220;
    --ka-surface-elevated: #2E2C2A;

    --ka-text: #F0EBE6;
    --ka-text-muted: #A8A098;
    --ka-text-placeholder: #8A8278;
    --ka-text-on-accent: #1A1816;

    --ka-border: #3A3836;
    --ka-border-strong: #4A4846;

    /* Semantic colors adjusted for dark mode */
    --ka-support: #8AB09A;
    --ka-support-light: rgba(138, 176, 154, 0.2);
    --ka-low: #D4C488;
    --ka-low-text: #E8E0C0;
    --ka-neutral: #9AAAB2;

    /* Status colors adjusted */
    --ka-success: #7AB08A;
    --ka-success-hover: #6AA07A;
    --ka-success-bg: rgba(122, 176, 138, 0.15);
    --ka-error: #E08A7A;
    --ka-error-bg: rgba(224, 138, 122, 0.15);
    --ka-info: #7A9AB0;
    --ka-info-bg: rgba(122, 154, 176, 0.15);
    --ka-warning: #D8B25A;
    --ka-warning-text: #D8B25A;
    --ka-warning-bg: rgba(216, 178, 90, 0.15);

    /* Needs/Offers */
    --ka-need: #E08A6A;
    --ka-offer: #7AB08A;

    /* Shadows adjusted for dark */
    --ka-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --ka-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --ka-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --ka-shadow-accent: 0 4px 12px rgba(224, 138, 106, 0.3);

    /* Focus ring adjusted */
    --ka-focus-ring: 0 0 0 3px rgba(224, 138, 106, 0.5);

    color-scheme: dark;
}

/* Dark mode specific overrides */
.theme-dark img {
    opacity: 0.95;
}

.theme-dark .ka-card,
.theme-dark .card {
    border-color: var(--ka-border);
}

.theme-dark input,
.theme-dark textarea,
.theme-dark select {
    background-color: var(--ka-surface);
    border-color: var(--ka-border);
    color: var(--ka-text);
}

.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
    color: var(--ka-text-placeholder);
}

.theme-dark input:focus,
.theme-dark textarea:focus,
.theme-dark select:focus {
    border-color: var(--ka-accent);
    background-color: var(--ka-surface-elevated);
}

.theme-dark .ka-status-badge--available {
    background-color: var(--ka-support-light);
    border-color: var(--ka-support);
    color: #9CC2AC; /* lighter than --ka-support: 4.5:1 even on elevated card surfaces */
}

.theme-dark .ka-status-badge--limited {
    background-color: rgba(212, 196, 136, 0.18);
    border-color: var(--ka-low);
    color: var(--ka-low-text);
}

.theme-dark .ka-status-badge--away {
    color: var(--ka-neutral);
}

/* ==========================================================================
   THEME: High Contrast
   Apply with class="theme-high_contrast" on body or html
   Designed for users with low vision or who prefer maximum contrast
   ========================================================================== */

.theme-high_contrast {
    --ka-accent: #0066CC;
    --ka-accent-hover: #0052A3;
    --ka-accent-light: rgba(0, 102, 204, 0.15);

    --ka-bg: #FFFFFF;
    --ka-surface: #FFFFFF;
    --ka-surface-elevated: #FFFFFF;

    --ka-text: #000000;
    --ka-text-muted: #333333;
    --ka-text-placeholder: #555555;
    --ka-text-on-accent: #FFFFFF;

    --ka-border: #000000;
    --ka-border-strong: #000000;

    /* High contrast semantic colors */
    --ka-support: #006600;
    --ka-support-light: rgba(0, 102, 0, 0.1);
    --ka-low: #CC9900;
    --ka-low-text: #000000;
    --ka-neutral: #333333;

    /* Status colors - high contrast */
    --ka-success: #006600;
    --ka-success-hover: #005500;
    --ka-success-bg: #E6FFE6;
    --ka-error: #CC0000;
    --ka-error-bg: #FFE6E6;
    --ka-info: #0066CC;
    --ka-info-bg: #E6F0FF;
    --ka-warning: #CC6600;
    --ka-warning-text: #7A3D00;
    --ka-warning-bg: #FFF5E6;

    /* Needs/Offers */
    --ka-need: #CC0000;
    --ka-offer: #006600;

    /* Shadows reduced */
    --ka-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --ka-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --ka-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
    --ka-shadow-accent: 0 2px 4px rgba(0, 102, 204, 0.3);

    /* Focus ring - very visible */
    --ka-focus-ring: 0 0 0 4px #000000;
}

/* High contrast specific overrides */
.theme-high_contrast * {
    border-radius: 0 !important;
}

.theme-high_contrast .ka-card,
.theme-high_contrast .card {
    border: 2px solid #000000;
    box-shadow: none;
}

.theme-high_contrast .btn,
.theme-high_contrast .ka-btn,
.theme-high_contrast button {
    border: 2px solid currentColor;
}

.theme-high_contrast input,
.theme-high_contrast textarea,
.theme-high_contrast select {
    border: 2px solid #000000;
    background-color: #FFFFFF;
    color: #000000;
}

.theme-high_contrast a {
    text-decoration: underline;
}

.theme-high_contrast .tag,
.theme-high_contrast .ka-chip {
    border: 2px solid currentColor;
}

.theme-high_contrast .ka-status-badge {
    background-color: var(--ka-bg);
    border: 2px solid currentColor;
}

.theme-high_contrast .ka-status-badge--available {
    color: var(--ka-support);
}

.theme-high_contrast .ka-status-badge--limited {
    color: var(--ka-low-text);
}

.theme-high_contrast .ka-status-badge--resting,
.theme-high_contrast .ka-status-badge--away {
    color: var(--ka-text);
}

/* System dark preference: handled per-page on the logged-out pages
   (landing/login/signup carry their own prefers-color-scheme blocks).
   A global override is unsafe here: logged-in users who explicitly
   chose the light theme carry no theme-* class, so CSS alone cannot
   tell them apart from anonymous visitors. */

/* ==========================================================================
   TYPOGRAPHY: Heading scale (defaults — page styles may override)
   h1 treatment previously varied per page (56px landing, 2rem discover,
   1.75rem settings, browser-default signup). One 4-step rem scale keeps
   hierarchy consistent and lets the text-size setting scale headings too.
   ========================================================================== */
h1 { font-size: 2rem;    font-weight: 700; line-height: 1.2;  }
h2 { font-size: 1.5rem;  font-weight: 700; line-height: 1.25; }
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3;  }
h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }

/* Reduced motion preference */
.reduce-motion,
.reduce-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY: Text Size Classes
   ========================================================================== */

/* Applied to <html> (base.html mirrors the user's setting classes there).
   Scaling the ROOT font size is what makes the setting real: nearly every
   component is sized in rem, which is root-relative — a body-level
   font-size only ever scaled unstyled text and left buttons, nav, and
   metadata untouched. */
html.text-size-small {
    font-size: 87.5%;
}

html.text-size-large {
    font-size: 112.5%;
}

html.text-size-xlarge {
    font-size: 125%;
}

/* ==========================================================================
   ACCESSIBILITY: Line Spacing Classes
   ========================================================================== */

.line-spacing-relaxed {
    line-height: 1.8;
}

.line-spacing-loose {
    line-height: 2.0;
}

/* ==========================================================================
   ACCESSIBILITY: Dyslexia-Friendly Font
   ========================================================================== */

.dyslexia-font {
    font-family: 'OpenDyslexic', 'Comic Sans MS', cursive, sans-serif;
    letter-spacing: 0.05em;
    word-spacing: 0.1em;
}

/* ==========================================================================
   ACCESSIBILITY: Large Touch Targets
   ========================================================================== */

.large-targets a,
.large-targets button,
.large-targets input,
.large-targets select,
.large-targets textarea,
.large-targets [role="button"],
.large-targets [role="link"] {
    min-height: 48px;
    min-width: 48px;
    padding: 0.875rem 1.25rem;
}

/* ==========================================================================
   ACCESSIBILITY: Simplified Layout
   ========================================================================== */

.simplified-layout {
    max-width: 800px;
    margin: 0 auto;
}

.simplified-layout .ka-card,
.simplified-layout .card {
    box-shadow: none;
    border: 1px solid var(--ka-border);
}

/* ==========================================================================
   COMPONENT: Skeleton Loading States
   Use these for perceived performance while content loads
   ========================================================================== */

/* Base skeleton shimmer animation */
@keyframes ka-skeleton-shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* Base skeleton element */
.ka-skeleton {
    background: linear-gradient(
        90deg,
        var(--ka-border) 0px,
        var(--ka-surface) 40px,
        var(--ka-border) 80px
    );
    background-size: 200px 100%;
    animation: ka-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--ka-radius);
}

/* Skeleton text line */
.ka-skeleton-text {
    height: 1em;
    margin-bottom: 0.5rem;
    border-radius: var(--ka-radius-sm);
}

.ka-skeleton-text:last-child {
    margin-bottom: 0;
    width: 70%;
}

/* Skeleton heading */
.ka-skeleton-heading {
    height: 1.5em;
    width: 60%;
    margin-bottom: 1rem;
    border-radius: var(--ka-radius-sm);
}

/* Skeleton avatar/photo */
.ka-skeleton-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.ka-skeleton-avatar-lg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.ka-skeleton-avatar-xl {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

/* Skeleton button */
.ka-skeleton-btn {
    height: 44px;
    width: 100px;
    border-radius: var(--ka-radius);
}

/* Skeleton chip/tag */
.ka-skeleton-chip {
    display: inline-block;
    height: 28px;
    width: 80px;
    border-radius: var(--ka-radius-full);
    margin-right: 0.5rem;
}

/* Skeleton card - User card placeholder */
.ka-skeleton-card {
    background: var(--ka-surface-elevated);
    border-radius: var(--ka-radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--ka-border);
}

.ka-skeleton-card-photo {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.ka-skeleton-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.ka-skeleton-card-name {
    height: 1.25em;
    width: 120px;
    border-radius: var(--ka-radius-sm);
}

.ka-skeleton-card-meta {
    height: 1em;
    width: 180px;
    border-radius: var(--ka-radius-sm);
}

.ka-skeleton-card-about {
    height: 3em;
    width: 100%;
    border-radius: var(--ka-radius-sm);
    margin-top: 0.5rem;
}

.ka-skeleton-card-actions {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1rem;
}

.ka-skeleton-card-actions .ka-skeleton-btn {
    flex: 1;
}

/* Skeleton match card placeholder */
.ka-skeleton-match {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--ka-surface-elevated);
    border-radius: var(--ka-radius-lg);
    border: 1px solid var(--ka-border);
}

.ka-skeleton-match-content {
    flex: 1;
    min-width: 0;
}

.ka-skeleton-match-actions {
    display: flex;
    gap: 0.75rem;
}

/* Skeleton message placeholder */
.ka-skeleton-message {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.ka-skeleton-message.sent {
    align-items: flex-end;
}

.ka-skeleton-message-bubble {
    height: 2.5rem;
    width: 200px;
    max-width: 70%;
    border-radius: 12px;
}

.ka-skeleton-message-meta {
    height: 0.75em;
    width: 80px;
    border-radius: var(--ka-radius-sm);
}

/* Skeleton grid for user cards */
.ka-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* ==========================================================================
   COMPONENT: Loading Spinner
   ========================================================================== */

@keyframes ka-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.ka-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ka-spin 0.75s linear infinite;
}

.ka-spinner-sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.ka-spinner-lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

/* Loading state for buttons */
.ka-btn.loading,
.btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.ka-btn.loading::after,
.btn.loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ka-text-on-accent);
    border-right-color: transparent;
    border-radius: 50%;
    animation: ka-spin 0.75s linear infinite;
}

.ka-btn-secondary.loading::after,
.btn-secondary.loading::after {
    border-color: var(--ka-accent);
    border-right-color: transparent;
}

/* Loading overlay for containers */
.ka-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(246, 241, 235, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

.theme-dark .ka-loading-overlay {
    background: rgba(26, 24, 22, 0.8);
}

/* Loading text with dots animation */
.ka-loading-text {
    display: inline-flex;
    align-items: baseline;
}

.ka-loading-dots {
    display: inline-flex;
    margin-left: 0.25rem;
}

.ka-loading-dots span {
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    margin: 0 1px;
    animation: ka-loading-dot 1.4s ease-in-out infinite;
}

.ka-loading-dots span:nth-child(1) {
    animation-delay: 0s;
}

.ka-loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.ka-loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes ka-loading-dot {
    0%, 80%, 100% {
        opacity: 0.2;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   COMPONENT: Empty States
   ========================================================================== */

.ka-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--ka-surface-elevated);
    border-radius: var(--ka-radius-lg);
    border: 1px solid var(--ka-border);
}

.ka-empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.ka-empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ka-text);
    margin: 0 0 0.5rem 0;
}

.ka-empty-state-description {
    color: var(--ka-text-muted);
    margin: 0 0 1.5rem 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.ka-empty-state-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Reduced motion - disable animations */
@media (prefers-reduced-motion: reduce) {
    .ka-skeleton {
        animation: none;
        background: var(--ka-border);
    }

    .ka-spinner {
        animation: none;
        border-color: currentColor;
        border-right-color: currentColor;
        opacity: 0.5;
    }

    .ka-loading-dots span {
        animation: none;
        opacity: 0.6;
    }

    .ka-btn.loading::after,
    .btn.loading::after {
        animation: none;
        opacity: 0.5;
    }
}

.reduce-motion .ka-skeleton,
.reduce-motion .ka-spinner,
.reduce-motion .ka-loading-dots span,
.reduce-motion .ka-btn.loading::after,
.reduce-motion .btn.loading::after {
    animation: none;
}

/* ==========================================================================
   COMPONENT: Pull-to-Refresh
   For native app wrappers (iOS/Android WebView)
   ========================================================================== */

.ka-pull-refresh-container {
    position: relative;
    overflow: visible;
}

.ka-pull-refresh-indicator {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ka-surface-elevated);
    border-radius: 50%;
    box-shadow: var(--ka-shadow);
    opacity: 0;
    transition: opacity var(--ka-transition), transform var(--ka-transition);
    z-index: 100;
}

.ka-pull-refresh-indicator.visible {
    opacity: 1;
}

.ka-pull-refresh-indicator.pulling {
    transform: translateX(-50%) translateY(20px);
}

.ka-pull-refresh-indicator.refreshing {
    transform: translateX(-50%) translateY(70px);
}

.ka-pull-refresh-indicator .ka-spinner {
    width: 24px;
    height: 24px;
    border-width: 3px;
    color: var(--ka-accent);
}

.ka-pull-refresh-indicator .pull-arrow {
    width: 24px;
    height: 24px;
    transition: transform var(--ka-transition);
}

.ka-pull-refresh-indicator.ready .pull-arrow {
    transform: rotate(180deg);
}

/* Refreshing state on container */
.ka-pull-refresh-container.refreshing {
    padding-top: 60px;
    transition: padding-top var(--ka-transition);
}

/* Disable pull-to-refresh animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ka-pull-refresh-indicator {
        transition: none;
    }
    .ka-pull-refresh-container.refreshing {
        transition: none;
    }
}

.reduce-motion .ka-pull-refresh-indicator,
.reduce-motion .ka-pull-refresh-container.refreshing {
    transition: none;
}

/* ==========================================================================
   Mobile form controls — iOS zoom guard
   iOS Safari zooms the whole page when a focused control's computed
   font-size is under 16px (and the signup form autofocuses its first
   field, so this fired on page load). Panning traps hit low-vision users
   hardest. Keep text-entry controls at >=16px at touch widths.
   ========================================================================== */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: max(16px, 1em);
    }
}

/* ==========================================================================
   User card component
   Shared visual shell for user cards (templates/partials/user_card.html),
   used by Discover and Browse. Each page wraps the partial in an
   <article class="profile-card"> and appends its own .user-card-actions.
   ========================================================================== */

.profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.profile-card {
    background: var(--ka-surface-elevated);
    border-radius: var(--ka-radius-lg);
    box-shadow: var(--ka-shadow);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--ka-border);
    transition: transform var(--ka-transition), box-shadow var(--ka-transition);
}

.profile-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ka-shadow-lg);
}

.profile-card:focus-within {
    outline: 2px solid var(--ka-accent);
    outline-offset: 2px;
}

@media (prefers-contrast: high) {
    .profile-card {
        border: 2px solid var(--ka-text);
    }
}

/* Status badge - uses icon + text, not just color */
.status-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--ka-radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 2;
}

.status-badge--available {
    background: var(--ka-success-bg);
    color: var(--ka-success);
}

.status-badge--low {
    background: var(--ka-warning-bg);
    color: var(--ka-low-text);
}

.status-badge--away {
    background: var(--ka-surface);
    color: var(--ka-text-muted);
}

/* Cover image (4:3) */
.profile-image-container {
    position: relative;
    aspect-ratio: 4/3;
    background: var(--ka-surface);
}

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ka-accent);
    color: var(--ka-text-on-accent);
    font-size: 3rem;
    font-weight: 600;
}

.profile-content {
    padding: 1.25rem;
}

.profile-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ka-text);
    margin-bottom: 0.25rem;
}

.profile-name a {
    color: inherit;
    text-decoration: none;
    transition: color var(--ka-transition-fast);
}

.profile-name a:hover,
.profile-name a:focus {
    text-decoration: underline;
    color: var(--ka-accent);
}

.profile-name a:focus-visible {
    outline: 2px solid var(--ka-accent);
    outline-offset: 2px;
}

.profile-name .verified-badge {
    color: var(--ka-success);
    margin-left: 0.25rem;
}

.profile-meta {
    color: var(--ka-text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.remote-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: var(--ka-info-bg);
    color: var(--ka-info);
    border-radius: var(--ka-radius);
    font-size: 0.8rem;
    font-weight: 600;
}

.profile-bio {
    margin: 1rem 0;
    color: var(--ka-text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.profile-connection-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.connection-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: var(--ka-accent-light);
    color: var(--ka-accent);
    border-radius: var(--ka-radius);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Compatibility status (3-layer system) */
.compatibility-status {
    margin-bottom: 1rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--ka-radius);
    border: 1px solid var(--ka-border);
}

.compatibility-status--eligible {
    background: var(--ka-success-bg);
    border-color: var(--ka-success);
}

.compatibility-status--caution {
    background: var(--ka-warning-bg);
    border-color: var(--ka-warning);
}

.compatibility-status-badge {
    font-weight: 600;
    font-size: 0.9rem;
}

.compatibility-status--eligible .compatibility-status-badge {
    color: var(--ka-success);
}

.compatibility-status--caution .compatibility-status-badge {
    color: var(--ka-low-text);
}

.compatibility-summary {
    font-size: 0.85rem;
    color: var(--ka-text-muted);
    margin-top: 0.25rem;
    margin-bottom: 0;
    line-height: 1.4;
}

/* Match highlights */
.match-highlights {
    font-size: 0.85rem;
    color: var(--ka-text-muted);
    margin-bottom: 1rem;
}

.match-highlights strong {
    color: var(--ka-text);
}

/* Page-supplied action area, rendered after the partial */
.user-card-actions {
    padding: 0 1.25rem 1.25rem;
}

.profile-actions {
    display: flex;
    gap: 0.75rem;
}

.profile-actions .btn--full {
    flex: 1;
}

.btn-connect {
    background: var(--ka-accent);
    color: var(--ka-text-on-accent);
    box-shadow: var(--ka-shadow-accent);
}

.btn-connect:hover,
.btn-connect:focus {
    background: var(--ka-accent-hover);
}

@media (max-width: 600px) {
    .profiles-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Avatar component (templates/partials/avatar.html)
   Circular profile photo with flat initials fallback.
   ========================================================================== */

.ka-avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

img.ka-avatar {
    border: 2px solid var(--ka-surface-elevated);
}

.ka-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ka-accent);
    color: var(--ka-text-on-accent);
    font-weight: bold;
}

.ka-avatar--small {
    width: 60px;
    height: 60px;
    font-size: 1.25rem;
}

.ka-avatar--medium {
    width: 100px;
    height: 100px;
    font-size: 2rem;
}

.ka-avatar--large {
    width: 150px;
    height: 150px;
    font-size: 3rem;
}

img.ka-avatar--large {
    border-width: 4px;
    box-shadow: var(--ka-shadow-lg);
}

/* ==========================================================================
   Inline SVG icons (replace decorative emojis in UI chrome)
   ========================================================================== */

.ka-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/* Numbered step circles (replace keycap emojis) */
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--ka-accent);
    color: var(--ka-text-on-accent);
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* ==========================================================================
   Onboarding step indicator (partials/wizard_progress.html)
   Shown on the four preference editors when they run as onboarding steps 1-4.
   ========================================================================== */

.ka-wizard-progress {
    margin-bottom: 1rem;
}

.ka-wizard-step {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ka-text-muted);
}

.ka-wizard-bar {
    height: 6px;
    border-radius: var(--ka-radius-full);
    background: var(--ka-border);
    overflow: hidden;
}

.ka-wizard-bar-fill {
    height: 100%;
    background: var(--ka-accent);
    border-radius: var(--ka-radius-full);
    transition: width var(--ka-transition);
}

.reduce-motion .ka-wizard-bar-fill {
    transition: none;
}

.ka-wizard-exit {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--ka-text-muted);
    text-align: center;
}

.ka-wizard-exit a {
    color: var(--ka-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   Reusable overflow menu (.ka-menu)
   Generalised from chat.html's single-instance quick-actions menu so lists can
   use it too. On /matches/ the destructive actions (Unmatch, Report, Block)
   used to sit in the row as buttons the same size and colour as "Open Chat" —
   Block was rgb(176,74,56) against the primary's rgb(168,84,58), a CIE76 dE of
   about 8: distinguishable side by side, but reading as the same terracotta,
   with nothing signalling that one starts a conversation and one ends a
   relationship. Behaviour lives in base.html and is driven by data attributes,
   so any number of menus can coexist on a page.
   ========================================================================== */

.ka-menu {
    position: relative;
}

.ka-menu-btn {
    background: none;
    border: 2px solid var(--ka-border);
    border-radius: var(--ka-radius);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ka-text-muted);
    transition: border-color var(--ka-transition), background var(--ka-transition);
    min-height: 44px;
    min-width: 44px;
}

.ka-menu-btn:hover {
    border-color: var(--ka-accent);
    background: var(--ka-surface);
}

.ka-menu-btn:focus-visible {
    outline: 2px solid var(--ka-accent);
    outline-offset: 2px;
}

.ka-menu-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--ka-surface-elevated);
    border: 2px solid var(--ka-border);
    border-radius: var(--ka-radius);
    box-shadow: var(--ka-shadow-lg);
    z-index: 100;
    min-width: 220px;
    overflow: hidden;
}

.ka-menu-list.is-open {
    display: block;
}

.ka-menu-list a,
.ka-menu-list button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ka-text);
    cursor: pointer;
    text-decoration: none;
    min-height: 44px;
    transition: background var(--ka-transition-fast);
}

.ka-menu-list a:hover,
.ka-menu-list button:hover {
    background: var(--ka-surface);
}

.ka-menu-list a:focus-visible,
.ka-menu-list button:focus-visible {
    outline: 2px solid var(--ka-accent);
    outline-offset: -2px;
}

.ka-menu-list .danger {
    color: var(--ka-error);
}

.ka-menu-divider {
    height: 1px;
    background: var(--ka-border);
}

.reduce-motion .ka-menu-btn,
.reduce-motion .ka-menu-list a,
.reduce-motion .ka-menu-list button {
    transition: none;
}