/* OperatorOS — Phase 7P Executive Identity System */
/* Nike energy · luxury editorial · executive women */

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── Base ───────────────────────────────────────────────── */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #0B0B0D;
    color: #F5F1EB;
    font-size: 1rem;
    line-height: 1.6;
    /* Prevent overscroll bounce on iOS from yanking the full app */
    overscroll-behavior: none;
}

/* ─── Mobile tap hygiene ─────────────────────────────────── */
/* Remove tap highlight flash on iOS — every interactive element */
a, button, [onclick], [role="button"], input, textarea, select, label {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

/* Prevent double-tap zoom delay — instant tap response everywhere */
button, [onclick], [role="button"], a {
    touch-action: manipulation;
}

/* Inputs get pan-y so keyboard scroll still works */
input, textarea, select {
    touch-action: pan-y;
}

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ─── Focus ──────────────────────────────────────────────── */
:focus-visible {
    outline: 1.5px solid rgba(142,108,242,0.6);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ─── Atmospheric Background ─────────────────────────────── */
.luxury-bg {
    background-color: #0B0B0D;
    background-image:
        radial-gradient(ellipse 60% 45% at 15% -5%,  rgba(142,108,242,0.04) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 90% 95%,  rgba(90,62,54,0.05)    0%, transparent 60%),
        radial-gradient(ellipse 25% 20% at 50% 50%,  rgba(245,241,235,0.008) 0%, transparent 50%);
}

/* ─── Transitions ────────────────────────────────────────── */
.transition-smooth {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Micro-interactions ─────────────────────────────────── */
/* Hover lift — cards and action tiles */
.op-action-tile, .op-performance-card, .approval-card {
    transition: transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1),
                box-shadow 0.22s ease,
                border-color 0.18s ease,
                opacity 0.18s ease;
}
.op-action-tile:hover {
    transform: translateY(-2px);
}
.op-performance-card:hover {
    transform: translateY(-1px);
}

/* Tap scale — all interactive buttons */
.btn-campaign:active, .btn-secondary:active, .btn-base:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* Chip press */
button.rounded-full:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

/* Hero card — subtle depth shift on hover */
.op-hero-card {
    transition: box-shadow 0.3s ease;
}
.op-hero-card:hover {
    box-shadow: 0 8px 48px rgba(142,108,242,0.12), 0 2px 8px rgba(0,0,0,0.4);
}

/* ─── Elevation ──────────────────────────────────────────── */
.elevation-sm { box-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.elevation-md { box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3); }
.elevation-lg { box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.35); }

/* ─── Glass ──────────────────────────────────────────────── */
.glass-effect {
    background: rgba(11,11,13,0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ═══════════════════════════════════════════════════════════
   BUTTON SYSTEM — Decisive, premium, athletic
═══════════════════════════════════════════════════════════ */

.btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 0.625rem;
    transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    border: none;
    outline: none;
    min-height: 44px;
    min-width: 44px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Primary — op-accent fill */
.btn-primary {
    background: #8E6CF2;
    color: #F5F1EB;
    box-shadow: 0 2px 20px rgba(142,108,242,0.25), 0 1px 3px rgba(0,0,0,0.4);
}
.btn-primary:hover {
    background: #A080F8;
    transform: translateY(-1px);
    box-shadow: 0 4px 28px rgba(142,108,242,0.35), 0 2px 6px rgba(0,0,0,0.3);
}
.btn-primary:active { transform: scale(0.97); }

/* Secondary — tonal, confident */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 0.625rem;
    cursor: pointer;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: rgba(245,241,235,0.05);
    color: rgba(245,241,235,0.75);
    border: 1px solid rgba(245,241,235,0.10);
    transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}
.btn-secondary:hover {
    background: rgba(245,241,235,0.09);
    border-color: rgba(245,241,235,0.18);
    color: #F5F1EB;
    transform: translateY(-1px);
}
.btn-secondary:active { transform: scale(0.97); }

/* Campaign CTA — bone fill, maximum contrast */
.btn-campaign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 0.625rem;
    cursor: pointer;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #F5F1EB;
    color: #0B0B0D;
    border: none;
    box-shadow: 0 2px 16px rgba(245,241,235,0.10);
    transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}
.btn-campaign:hover {
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 24px rgba(245,241,235,0.16);
}
.btn-campaign:active { transform: scale(0.97); }

/* Ghost — accent-tinted, for in-card actions */
.btn-ghost-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.4rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    letter-spacing: 0.02em;
    background: rgba(142,108,242,0.10);
    color: rgba(184,164,248,0.9);
    border: 1px solid rgba(142,108,242,0.18);
    transition: all 0.16s ease;
}
.btn-ghost-accent:hover {
    background: rgba(142,108,242,0.16);
    color: #C4AFF8;
}

/* ═══════════════════════════════════════════════════════════
   CARD SYSTEM — 3 distinct types, not homogeneous SaaS cards
═══════════════════════════════════════════════════════════ */

/* Type 1 — Hero / Campaign Card
   Image-led, high contrast, editorial. Never generic. */
.op-hero-card {
    background: linear-gradient(145deg, #1A1519 0%, #130F10 55%, #0B0B0D 100%);
    border: 1px solid rgba(245,241,235,0.07);
    border-radius: 1.5rem;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.55),
        0 4px 12px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(245,241,235,0.04);
    position: relative;
    overflow: hidden;
}
.op-hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 110% -20%, rgba(90,62,54,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at -10% 120%, rgba(142,108,242,0.055) 0%, transparent 55%);
    pointer-events: none;
}

/* Type 2 — Performance Card
   Clean, disciplined, elegant action surface */
.op-performance-card {
    background: rgba(245,241,235,0.025);
    border: 1px solid rgba(245,241,235,0.07);
    border-radius: 1.125rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.op-performance-card:hover {
    border-color: rgba(245,241,235,0.12);
    box-shadow: 0 6px 28px rgba(0,0,0,0.3);
}
.op-performance-card:active {
    transform: scale(0.99);
    transition: transform 0.08s ease;
}

/* Type 3 — Quiet Utility Row
   Secondary signals, minimal footprint */
.op-utility-row {
    background: transparent;
    border-bottom: 1px solid rgba(245,241,235,0.05);
    transition: background 0.18s ease;
}
.op-utility-row:hover { background: rgba(245,241,235,0.025); }

/* Stat tile — clean number surface, no heavy background */
.op-stat-tile {
    background: rgba(245,241,235,0.03);
    border: 1px solid rgba(245,241,235,0.06);
    border-radius: 1rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.op-stat-tile:hover {
    background: rgba(245,241,235,0.055);
    border-color: rgba(245,241,235,0.11);
}

/* Inner action tile — replaces bg-graphite-800 */
.op-action-tile {
    background: rgba(245,241,235,0.03);
    border: 1px solid rgba(245,241,235,0.05);
    border-radius: 0.875rem;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.op-action-tile:hover {
    background: rgba(245,241,235,0.055);
    border-color: rgba(245,241,235,0.09);
}
/* Mobile active state — immediate visual feedback on tap */
.op-action-tile:active {
    background: rgba(245,241,235,0.08);
    transform: scale(0.985);
    transition: transform 0.08s ease, background 0.08s ease;
}

/* Legacy card classes — mapped for backwards compat */
.luxury-card-hero      { background: linear-gradient(145deg, rgba(26,21,25,0.95) 0%, rgba(11,11,13,0.98) 100%); border: 1px solid rgba(245,241,235,0.07); border-radius: 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.55); }
.luxury-card-action    { background: rgba(245,241,235,0.025); border: 1px solid rgba(245,241,235,0.07); border-radius: 1.125rem; transition: border-color 0.2s ease; }
.luxury-card-action:hover { border-color: rgba(245,241,235,0.12); }
.luxury-card-reference { background: transparent; border: 1px solid rgba(245,241,235,0.05); border-radius: 0.875rem; transition: border-color 0.18s ease; }
.luxury-card-reference:hover { border-color: rgba(245,241,235,0.08); }
.premium-card          { background: rgba(245,241,235,0.025); border: 1px solid rgba(245,241,235,0.07); border-radius: 1.125rem; transition: border-color 0.2s ease; }
.premium-card:hover    { border-color: rgba(245,241,235,0.11); }

/* Evening Mode Panel — warmer, softer, distinctly non-daytime */
.op-evening-panel {
    background: linear-gradient(145deg, #161213 0%, #0F0D0E 100%);
    border: 1px solid rgba(245,200,160,0.09);
    border-radius: 1.5rem;
    box-shadow:
        0 12px 40px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(245,200,160,0.04);
    position: relative;
    overflow: hidden;
}
.op-evening-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 105% -15%, rgba(120,80,50,0.09) 0%, transparent 55%),
        radial-gradient(ellipse 50% 45% at -5% 110%, rgba(60,50,80,0.07) 0%, transparent 50%);
    pointer-events: none;
}
.op-evening-panel:hover {
    border-color: rgba(245,200,160,0.14);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(245,200,160,0.05);
}

/* Evening action tile — softer than daytime tiles */
.op-evening-tile {
    background: rgba(245,200,160,0.025);
    border: 1px solid rgba(245,200,160,0.07);
    border-radius: 0.875rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.op-evening-tile:hover {
    background: rgba(245,200,160,0.045);
    border-color: rgba(245,200,160,0.12);
}
.op-evening-tile:active {
    background: rgba(245,200,160,0.07);
    transform: scale(0.985);
    transition: transform 0.08s ease, background 0.08s ease;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY SYSTEM
═══════════════════════════════════════════════════════════ */

/* Campaign headline — large, bold, directive */
.op-headline-xl {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: #F5F1EB;
}

.op-headline-lg {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: #F5F1EB;
}

.op-headline {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.015em;
    color: #F5F1EB;
}

.op-body {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #D8CFC7;
}

.op-caption {
    font-size: 0.75rem;
    line-height: 1.5;
    color: #9B8E87;
    letter-spacing: 0.01em;
}

.op-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9B8E87;
    display: block;
}

/* Number display — large metric */
.op-metric {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #F5F1EB;
}

/* Legacy type utilities */
.text-title-xl { font-size: 2rem;    font-weight: 700; line-height: 1.18; letter-spacing: -0.028em; color: #F5F1EB; }
.text-title-lg { font-size: 1.5rem;  font-weight: 700; line-height: 1.22; letter-spacing: -0.02em;  color: #F5F1EB; }
.text-title    { font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em;  }
.text-body     { font-size: 0.9375rem; line-height: 1.65; color: #D8CFC7; }
.text-caption  { font-size: 0.8125rem; line-height: 1.5;  color: #9B8E87; }

.text-luxury-primary   { color: #F5F1EB; }
.text-luxury-secondary { color: #D8CFC7; }
.text-luxury-tertiary  { color: #9B8E87; }
.text-luxury-muted     { color: rgba(155,142,135,0.55); }

/* ═══════════════════════════════════════════════════════════
   SHEET SURFACES
═══════════════════════════════════════════════════════════ */

.luxury-sheet {
    background: linear-gradient(180deg, rgba(23,20,23,0.99) 0%, rgba(14,12,14,0.995) 100%);
    border: 1px solid rgba(245,241,235,0.07);
    border-bottom: none;
    box-shadow:
        0 -28px 80px rgba(0,0,0,0.7),
        0 -6px 20px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(245,241,235,0.04);
    border-radius: 1.75rem 1.75rem 0 0;
}

.sheet-handle {
    width: 32px;
    height: 3px;
    border-radius: 3px;
    background: rgba(245,241,235,0.12);
    margin: 0 auto;
}

/* ─── Bottom sheet slide-up ──────────────────────────────── */
@keyframes sheet-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.bottom-sheet { animation: sheet-slide-up 0.34s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ═══════════════════════════════════════════════════════════
   STATUS SYSTEM
═══════════════════════════════════════════════════════════ */

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 9999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.status-high   { background: rgba(239,68,68,0.09);   color: rgba(252,165,165,0.9); }
.status-medium { background: rgba(251,191,36,0.09);  color: rgba(252,211,77,0.9);  }
.status-low    { background: rgba(74,222,128,0.09);  color: rgba(134,239,172,0.9); }
.status-info   { background: rgba(142,108,242,0.10); color: rgba(184,164,248,0.9); }

/* ═══════════════════════════════════════════════════════════
   FAB
═══════════════════════════════════════════════════════════ */

.fab-luxury {
    box-shadow: 0 4px 28px rgba(142,108,242,0.35), 0 2px 8px rgba(0,0,0,0.45);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
}
.fab-luxury:hover {
    transform: scale(1.04) translateY(-2px);
    box-shadow: 0 6px 40px rgba(142,108,242,0.45), 0 3px 14px rgba(0,0,0,0.35);
}
.fab-luxury:active {
    transform: scale(0.95);
    box-shadow: 0 2px 12px rgba(142,108,242,0.25);
}

@keyframes fab-voice-ring {
    0%   { box-shadow: 0 0 0 0   rgba(142,108,242,0.4); }
    70%  { box-shadow: 0 0 0 18px rgba(142,108,242,0);  }
    100% { box-shadow: 0 0 0 0   rgba(142,108,242,0);   }
}
.fab-voice-active { animation: fab-voice-ring 1.4s ease-in-out infinite; }

@keyframes mic-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(142,108,242,0.35); }
    50%       { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(142,108,242,0);  }
}
.mic-listening { animation: mic-pulse 1.6s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════
   INPUTS
═══════════════════════════════════════════════════════════ */

input, textarea, select {
    background: rgba(245,241,235,0.04);
    border: 1px solid rgba(245,241,235,0.08);
    color: #F5F1EB;
    border-radius: 0.75rem;
    padding: 0.875rem 1.125rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    min-height: 44px;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: rgba(142,108,242,0.5);
    background: rgba(245,241,235,0.055);
    box-shadow: 0 0 0 3px rgba(142,108,242,0.10);
}
input::placeholder, textarea::placeholder { color: rgba(245,241,235,0.22); }

/* ═══════════════════════════════════════════════════════════
   DIVIDERS — editorial, minimal
═══════════════════════════════════════════════════════════ */

.op-divider {
    border: none;
    border-top: 1px solid rgba(245,241,235,0.06);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   ACCENT LINK — replaces sapphire text links
═══════════════════════════════════════════════════════════ */

.op-link {
    color: rgba(184,164,248,0.8);
    font-size: 0.75rem;
    font-weight: 500;
    transition: color 0.16s ease;
    text-decoration: none;
    cursor: pointer;
}
.op-link:hover { color: #C4AFF8; }

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS — Athletic, restrained, premium
═══════════════════════════════════════════════════════════ */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0);   }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes contentRise {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0);   }
}
@keyframes presenceFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes staggerIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0);   }
}
@keyframes subtlePulse {
    0%, 100% { opacity: 1;   }
    50%       { opacity: 0.65; }
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1);   }
    50%       { opacity: 0.5; transform: scale(1.18); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}
@keyframes loading {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* Campaign reveal — strong upward entry, 480ms */
@keyframes campaignReveal {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Stagger — for sequential reveal */
@keyframes staggerReveal {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.animate-fade-in      { animation: fadeIn      0.30s cubic-bezier(0.16, 1, 0.3, 1); }
.animate-content-rise { animation: contentRise 0.34s cubic-bezier(0.16, 1, 0.3, 1); }
.animate-presence     { animation: presenceFade 0.38s ease; }
.animate-stagger-in   { animation: staggerIn   0.28s cubic-bezier(0.16, 1, 0.3, 1); }
.animate-campaign     { animation: campaignReveal 0.48s cubic-bezier(0.16, 1, 0.3, 1); }
.animate-stagger      { animation: staggerReveal 0.38s cubic-bezier(0.16, 1, 0.3, 1) both; }

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

/* ═══════════════════════════════════════════════════════════
   LAYOUT UTILITIES
═══════════════════════════════════════════════════════════ */

.hover-lift {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

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

/* Safe area bottom padding */
.pb-safe    { padding-bottom: env(safe-area-inset-bottom, 0); }
.pb-safe-md { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

/* Main scroll container — must clear FAB + safe area on all devices */
.main-scroll-safe {
    padding-bottom: max(5.5rem, calc(4rem + env(safe-area-inset-bottom, 0px)));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* ─── Phase 9: FAB safe-area respecting position ─────────── */
.fab-safe-bottom {
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

/* ─── Phase 9/10: keyboard-aware bottom sheets ───────────── */
/* Sheets must never clip content at bottom on notched phones  */
.bottom-sheet-safe {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* Sheet content scroll container — prevents overflow on iPhone SE */
.sheet-scroll-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    max-height: calc(85vh - 4rem);    /* 85vh sheet minus handle + header */
}

/* ─── Tap target enforcement ─────────────────────────────── */
/* Any icon-only button gets a minimum 44×44 hit area          */
.tap-target {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ─── Sheet max-height cap ───────────────────────────────── */
/* Prevents full-screen takeover on tall content */
.sheet-constrained {
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ─── Skeleton ───────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(245,241,235,0.025) 25%,
        rgba(245,241,235,0.048) 50%,
        rgba(245,241,235,0.025) 75%
    );
    background-size: 200% 100%;
    animation: loading 1.6s ease-in-out infinite;
}

/* ─── Status indicator ───────────────────────────────────── */
.status-indicator-live { animation: subtlePulse 3.5s ease-in-out infinite; }

/* ─── Outcome / approval ─────────────────────────────────── */
.outcome-item-new { animation: fadeInUp 0.28s ease-out; }
.approval-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(142,108,242,0.10);
}

/* ─── Mobile overlay ─────────────────────────────────────── */
.mobile-menu-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    z-index: 40;
}

/* ═══════════════════════════════════════════════════════════
   DEPRECATED CAPTURE COMPONENT — Hidden
═══════════════════════════════════════════════════════════ */
#capture-btn, #capture-modal, .capture-button, .capture-modal { display: none !important; }

/* ─── Phase 8E: Auto-dismiss confirmation strip ──────────── */
@keyframes autoFadeOut {
    0%   { opacity: 1;   max-height: 60px; padding-top: 0.625rem; padding-bottom: 0.625rem; }
    80%  { opacity: 1;   max-height: 60px; }
    100% { opacity: 0;   max-height: 0;    padding-top: 0; padding-bottom: 0; overflow: hidden; }
}

.auto-dismiss {
    animation: autoFadeOut 6s 1.5s forwards;
    /* starts visible, fades out after 1.5s delay, completes at 7.5s total */
}

/* ─── Phase 8E: Approval card confidence opacity ─────────── */
.approval-card {
    transition: opacity 0.3s ease, border-color 0.2s ease;
}
.approval-card:hover {
    opacity: 1 !important;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    body { font-size: 1rem; }

    /* Sheet handle easier to grab on mobile */
    .sheet-handle { width: 40px; height: 4px; }

    /* FAB — slightly larger hit area on mobile */
    .fab-luxury { width: 56px; height: 56px; }

    /* Ensure op-utility-row has enough tap height */
    .op-utility-row { min-height: 52px; }

    /* Inputs — 16px minimum on iOS to prevent auto-zoom */
    input, textarea, select { font-size: max(16px, 0.9375rem) !important; }

    /* Prevent horizontal overflow on small screens */
    .op-hero-card, .op-performance-card, .op-action-tile {
        max-width: 100%;
        word-break: break-word;
    }
}

/* ─── Touch targets (Phase 11 onboarding) ───────────────────────────────────
   .touch-target ensures interactive elements meet WCAG/Apple HIG minimum
   tap area on mobile. Use on onboarding buttons, toggles, and menu items
   that ship with smaller default heights.
*/
.touch-target {
    -webkit-tap-highlight-color: rgba(142, 108, 242, 0.20);
    touch-action: manipulation;
}
@media (max-width: 768px) {
    .touch-target { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════
   EDITORIAL VISUALS — Brand imagery layer
   Swap --ev-slot-* CSS vars with real photo URLs when ready.
   Until then, gradient compositions carry the visual identity.
═══════════════════════════════════════════════════════════ */

/* Image slot variables — override with url() for real photography */
:root {
    --ev-slot-morning:    none;
    --ev-slot-afternoon:  none;
    --ev-slot-evening:    none;
    --ev-slot-life:       none;
    --ev-slot-onboarding: none;
}

/* Hard enforcement — any op-hero-card that contains ev-moment is correctly stacked */
.op-hero-card > .ev-moment {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Visual moment container — full-bleed inside op-hero-card */
.ev-moment {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

/* Mobile: thin atmospheric strip at bottom of card only */
@media (max-width: 600px) {
    .ev-moment {
        top: auto;
        height: 68px;
    }
}

/* Real photo fill — activated when --ev-img var is set */
.ev-moment__fill {
    position: absolute;
    inset: 0;
    background-image: var(--ev-img, none);
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
}

/* Fade bridge — blends visual into card text area */
.ev-moment__fade {
    position: absolute;
    inset: 0;
}

.ev-moment__fade--left {
    background: linear-gradient(
        to right,
        #130F10 0%,
        rgba(19,15,16,0.88) 22%,
        rgba(19,15,16,0.32) 55%,
        transparent 100%
    );
}

@media (max-width: 600px) {
    .ev-moment__fade--left {
        background: linear-gradient(
            to bottom,
            #130F10 0%,
            rgba(19,15,16,0.72) 35%,
            transparent 100%
        );
    }
}

/* ── Gradient compositions — editorial without photography ── */

.ev-gradient--morning {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 80% at 80% 45%,  rgba(218,148,72,0.28)  0%, transparent 60%),
        radial-gradient(ellipse 60% 70% at 100% 88%, rgba(160,78,48,0.18)   0%, transparent 55%),
        radial-gradient(ellipse 42% 42% at 58% 12%,  rgba(240,190,110,0.12) 0%, transparent 50%),
        linear-gradient(150deg, rgba(90,55,35,0.07)  0%, rgba(200,138,58,0.16) 100%);
}

.ev-gradient--afternoon {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 82% 80% at 76% 35%,  rgba(142,108,242,0.24) 0%, transparent 60%),
        radial-gradient(ellipse 55% 62% at 100% 95%, rgba(60,40,100,0.20)   0%, transparent 55%),
        radial-gradient(ellipse 36% 36% at 55% 8%,   rgba(180,148,255,0.08) 0%, transparent 50%),
        linear-gradient(150deg, rgba(35,22,70,0.06)  0%, rgba(100,68,200,0.14) 100%);
}

.ev-gradient--evening {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 82% at 84% 42%,  rgba(220,148,52,0.32)  0%, transparent 58%),
        radial-gradient(ellipse 56% 66% at 100% 90%, rgba(140,62,32,0.22)   0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 60% 8%,   rgba(245,185,100,0.10) 0%, transparent 50%),
        linear-gradient(150deg, rgba(85,44,22,0.10)  0%, rgba(195,124,42,0.20) 100%);
}

.ev-gradient--life {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 76% at 78% 40%,  rgba(155,174,135,0.22) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 100% 88%, rgba(195,146,122,0.17) 0%, transparent 55%),
        radial-gradient(ellipse 38% 38% at 58% 10%,  rgba(210,184,158,0.08) 0%, transparent 50%),
        linear-gradient(150deg, rgba(70,84,64,0.07)  0%, rgba(154,124,108,0.14) 100%);
}

/* Slow editorial drift — atmospheric, restrained */
@keyframes evDrift {
    0%   { transform: scale(1.04) translate(0, 0); }
    50%  { transform: scale(1.07) translate(-0.7%, 0.4%); }
    100% { transform: scale(1.04) translate(0, 0); }
}

.ev-gradient--morning,
.ev-gradient--afternoon,
.ev-gradient--evening,
.ev-gradient--life,
.ev-moment__fill {
    animation: evDrift 22s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ev-gradient--morning,
    .ev-gradient--afternoon,
    .ev-gradient--evening,
    .ev-gradient--life,
    .ev-moment__fill { animation: none; }
}

/* Grain texture — editorial premium finish */
.ev-moment::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 192px 192px;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
}

/* Evening accent bar — warm horizontal line at panel top */
.ev-evening-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(245,185,100,0.45) 22%,
        rgba(220,128,50,0.90)  52%,
        rgba(245,185,100,0.38) 80%,
        transparent 100%
    );
    z-index: 5;
    border-radius: 1.5rem 1.5rem 0 0;
}