/* ============================================
   CHEER MOM PLANNER — DESIGN SYSTEM CSS
   Brand: Dusty rose #D4537E, Blush #FBEAF0
   Programs: All-Star (pink), School (blue), Rec (green)
   Life events: Amber #BA7517
   ============================================ */

/* ---------- CSS Variables ---------- */
:root {
    /* Brand */
    --brand-primary: #D4537E;
    --brand-light: #FBEAF0;
    --brand-dark: #4B1528;
    --brand-mid: #72243E;
    --brand-border: #F4C0D1;

    /* Programs */
    --allstar: #D4537E;
    --allstar-bg: #FBEAF0;
    --allstar-text: #4B1528;
    --allstar-sub: #72243E;

    --school: #185FA5;
    --school-bg: #E6F1FB;
    --school-text: #042C53;
    --school-sub: #0C447C;

    --rec: #0F6E56;
    --rec-bg: #E1F5EE;
    --rec-text: #04342C;
    --rec-sub: #085041;

    /* Life events */
    --life: #BA7517;
    --life-bg: #FAEEDA;
    --life-text: #633806;
    --life-sub: #854F0B;

    /* Neutrals */
    --bg: #FAF8F5;
    --card: #FFFFFF;
    --border: rgba(0, 0, 0, 0.1);
    --text-primary: #1A1A18;
    --text-secondary: #5F5E5A;
    --text-muted: #888780;
    --text-disabled: #B4B2A9;
    --surface: #F1EFE8;

    /* Semantic */
    --success: #5DCAA5;
    --success-bg: #E1F5EE;
    --success-text: #085041;
    --danger: #A32D2D;
    --danger-bg: #FCEBEB;
    --warning: #BA7517;
    --warning-bg: #FAEEDA;

    /* Spacing */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 14px;

    /* Typography — fluid scale.
       Each token uses clamp(min, preferred, max) so text scales smoothly
       with viewport width instead of stepping at media-query breakpoints.
       Min ~= comfortable size on a 360px phone.
       Max ~= the bumped desktop size used on 1440px+ screens.
       The middle term mixes a px floor with a vw component so the size
       grows linearly as the viewport widens. */
    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --text-xs:   clamp(11px, 0.55vw + 9.5px,  14px);
    --text-sm:   clamp(12px, 0.70vw + 10px,   16px);
    --text-base: clamp(14px, 0.95vw + 11px,   19px);
    --text-md:   clamp(15px, 1.05vw + 11.5px, 20px);
    --text-lg:   clamp(16px, 1.30vw + 12px,   23px);
    --text-xl:   clamp(18px, 1.55vw + 13px,   26px);
    --text-2xl:  clamp(20px, 2.00vw + 14px,   31px);
}

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

body {
    font-family: var(--font);
    background-color: var(--bg);
    color: var(--text-primary);
    font-size: var(--text-base);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Mobile Container ---------- */
.app-container {
    max-width: 430px;
    margin: 0 auto;
    padding: 16px;
    min-height: 100vh;
}

/* ---------- Cards ---------- */
.card {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 14px;
    border: 0.5px solid var(--border);
    margin-bottom: 8px;
}

.card-flush { padding: 0; }
.card-lg { padding: 18px; }
.card-xl { padding: 24px 18px; }

/* ---------- Typography ---------- */
.heading-xl { font-size: var(--text-2xl); font-weight: 700; }
.heading-lg { font-size: var(--text-xl); font-weight: 600; }
.heading-md { font-size: var(--text-lg); font-weight: 600; }
.heading-sm { font-size: var(--text-md); font-weight: 600; }

.text-base { font-size: var(--text-base); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }

.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-brand { color: var(--brand-primary); }
.text-danger { color: var(--danger); }

.label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0 0 6px;
}

/* ---------- Form Fields ---------- */
.field {
    background: var(--card);
    border: 0.5px solid var(--border);
    border-radius: 7px;
    padding: 10px 12px;
    font-size: var(--text-base);
    margin-bottom: 12px;
    color: var(--text-primary);
    width: 100%;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s;
}

.field:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(212, 83, 126, 0.1);
}

.field-placeholder { color: var(--text-disabled); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 11px 16px;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: var(--font);
    border: 0.5px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn:hover { background: var(--surface); }

.btn-primary {
    background: var(--brand-primary);
    color: #fff;
    border: none;
    font-weight: 600;
}
.btn-primary:hover { background: #BF4570; }

.btn-danger {
    background: var(--danger);
    color: #fff;
    border: none;
    font-weight: 600;
}

.btn-amber {
    background: var(--life);
    color: #fff;
    border: none;
    font-weight: 600;
}

.btn-full { width: 100%; display: block; text-align: center; }
.btn-lg { padding: 14px 16px; font-size: var(--text-md); }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    font-size: var(--text-xs);
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
}

.badge-pink { background: var(--brand-primary); color: #fff; }
.badge-trial { background: var(--brand-primary); color: #fff; }
.badge-free { background: var(--surface); color: var(--text-secondary); }
.badge-pro { background: var(--brand-primary); color: #fff; }
.badge-amber { background: var(--life-bg); color: var(--life-text); }
.badge-green { background: var(--success-bg); color: var(--success-text); }
.badge-blue { background: var(--school-bg); color: var(--school-sub); }
.badge-blue-solid { background: var(--school); color: #fff; }
.badge-danger { background: var(--danger); color: #fff; }

/* ---------- Toggle Switch ---------- */
.toggle {
    width: 38px;
    height: 22px;
    border-radius: 11px;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s;
}

.toggle.on { background: var(--success); }
.toggle.off { background: #D3D1C7; }

.toggle-dot {
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    transition: all 0.2s;
}

.toggle.on .toggle-dot { right: 2px; }
.toggle.off .toggle-dot { left: 2px; }

/* ---------- Progress Bar (Onboarding) ---------- */
.progress-steps {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.progress-dot {
    flex: 1;
    height: 3px;
    border-radius: 2px;
}

.progress-dot.done { background: var(--brand-primary); }
.progress-dot.todo { background: var(--surface); }

/* ---------- Grid Layouts ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px; }

.row { display: flex; justify-content: space-between; align-items: center; }

/* ---------- Event Type Picker (4+2) ---------- */
.event-picker-section {
    margin-bottom: 4px;
}

.event-picker-label {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.event-picker-label.cheer { color: var(--brand-primary); }
.event-picker-label.life { color: var(--text-muted); }

.event-tile {
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    border: 0.5px solid var(--border);
    font-size: var(--text-sm);
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}

.event-tile .tile-icon { font-size: 15px; margin-bottom: 1px; }

.event-tile.selected-cheer {
    border: 2px solid var(--brand-primary);
    background: var(--brand-light);
    font-weight: 500;
    color: var(--brand-dark);
}

.event-tile.selected-life {
    border: 2px solid var(--life);
    background: var(--life-bg);
    font-weight: 500;
    color: var(--life-text);
}

.picker-divider {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
}

.picker-divider .line {
    flex: 1;
    height: 0.5px;
    background: rgba(0, 0, 0, 0.08);
}

.picker-divider .or {
    font-size: 7px;
    color: var(--text-disabled);
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ---------- Program Selector ---------- */
.program-pill {
    flex: 1;
    padding: 8px 6px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--border);
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}

.program-pill .pill-icon { font-size: 14px; margin-bottom: 2px; }
.program-pill .pill-name { font-size: var(--text-sm); }
.program-pill .pill-sub { font-size: 8px; margin-top: 1px; }

.program-pill.selected-allstar {
    border: 2px solid var(--allstar);
    background: var(--allstar-bg);
}
.program-pill.selected-allstar .pill-name { font-weight: 600; color: var(--allstar-text); }
.program-pill.selected-allstar .pill-sub { color: var(--allstar-sub); }

.program-pill.selected-school {
    border: 2px solid var(--school);
    background: var(--school-bg);
}
.program-pill.selected-school .pill-name { font-weight: 600; color: var(--school-text); }
.program-pill.selected-school .pill-sub { color: var(--school-sub); }

.program-pill.selected-rec {
    border: 2px solid var(--rec);
    background: var(--rec-bg);
}
.program-pill.selected-rec .pill-name { font-weight: 600; color: var(--rec-text); }
.program-pill.selected-rec .pill-sub { color: var(--rec-sub); }

/* ---------- Color Indicator ---------- */
.color-indicator {
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
}

.color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---------- Program Section Cards ---------- */
.program-section {
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
}

.program-section.allstar {
    background: var(--allstar-bg);
    border: 1px solid var(--brand-border);
}

.program-section.school {
    background: var(--school-bg);
    border: 1px solid #B5D4F4;
}

.program-section.rec {
    background: var(--rec-bg);
    border: 1px solid #9FE1CB;
}

.program-section-header {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

.program-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.program-field-label {
    font-size: 8px;
    font-weight: 500;
    margin-bottom: 3px;
}

.program-field-value {
    background: #fff;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
}

/* ---------- Password Strength ---------- */
.password-strength {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.strength-bar {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--surface);
    transition: background 0.3s;
}

.strength-bar.filled { background: var(--success); }
.strength-bar.filled.weak { background: var(--danger); }
.strength-bar.filled.medium { background: var(--warning); }

/* ---------- Tab Switcher ---------- */
.tab-switcher {
    display: flex;
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 3px;
    margin-bottom: 16px;
}

.tab-switcher .tab {
    flex: 1;
    padding: 7px;
    text-align: center;
    font-size: 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    text-decoration: none;
}

.tab-switcher .tab.active {
    background: var(--card);
    font-weight: 500;
    color: var(--text-primary);
}

/* ---------- Divider ---------- */
.divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0;
}

.divider .line {
    flex: 1;
    height: 0.5px;
    background: var(--border);
}

.divider .text {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ---------- SSO Buttons ---------- */
.sso-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.sso-btn {
    padding: 10px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--border);
    background: var(--card);
    font-size: var(--text-base);
    text-align: center;
    cursor: pointer;
    font-family: var(--font);
}

.sso-btn:hover { background: var(--surface); }

/* ---------- Star Logo ---------- */
.app-logo {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    background: var(--brand-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-logo.lg { width: 64px; height: 64px; }

/* ---------- Checkbox ---------- */
.check-row {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.check-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: var(--success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.check-icon.empty {
    background: transparent;
    border: 1.5px solid var(--border);
}

/* ---------- Celebration Gradient ---------- */
.celebration-card {
    background: linear-gradient(135deg, #FBEAF0 0%, #F4E0F0 50%, #E8E0F8 100%);
    border-radius: 14px;
    padding: 18px 16px;
    border: 1px solid var(--brand-border);
    text-align: center;
}

/* ---------- Season Picker ---------- */
.season-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4px;
    margin-bottom: 14px;
}

.season-tile {
    padding: 7px 4px;
    border-radius: var(--radius-sm);
    border: 0.5px solid var(--border);
    font-size: var(--text-sm);
    text-align: center;
    cursor: pointer;
}

.season-tile.active {
    border: 2px solid var(--brand-primary);
    background: var(--brand-light);
    font-weight: 500;
    color: var(--brand-dark);
}

.season-tile .sub { font-size: 8px; color: var(--text-secondary); font-weight: 400; }

/* ---------- Info Boxes ---------- */
.info-box {
    border-radius: 7px;
    padding: 8px 10px;
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: 12px;
}

.info-box.pink { background: var(--brand-light); color: var(--brand-dark); }
.info-box.blue { background: var(--school-bg); color: var(--school-sub); }
.info-box.green { background: var(--success-bg); color: var(--success-text); }
.info-box.amber { background: var(--life-bg); color: var(--life-sub); }
.info-box.gray { background: var(--surface); color: var(--text-secondary); }

/* ---------- Crossover Section ---------- */
.crossover-section {
    background: linear-gradient(135deg, #FBEAF0, #E8E0F8);
    border-radius: 10px;
    padding: 14px;
    border: 1.5px solid var(--brand-primary);
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.flex { display: flex; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.items-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.dimmed { opacity: 0.45; }
.dimmed-55 { opacity: 0.55; }

/* ---------- Validation ---------- */
.validation-error {
    color: var(--danger);
    font-size: var(--text-sm);
    margin-top: -8px;
    margin-bottom: 8px;
}

.field.error {
    border-color: var(--danger);
}

/* ---------- Dashboard Grid ---------- */
/* Mobile default: single column, sidebar hidden */
.dash-grid { display: block; }
.dash-main { width: 100%; }
.dash-side { display: none; }

/* ---------- Bottom Nav (mobile defaults) ---------- */
/* Desktop overrides live in the (min-width: 1024px) media query below. */
.bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    background: var(--card);
    border-radius: 10px;
    padding: 3px;
    border: 0.5px solid var(--border);
    margin-top: 8px;
    position: sticky;
    bottom: 8px;
}
.nav-tab {
    padding: 6px 2px;
    border-radius: 7px;
    text-align: center;
    font-size: 8px;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.15s;
}
.nav-tab.active {
    background: var(--brand-light);
    color: var(--brand-dark);
    font-weight: 600;
}
.nav-tab-icon { font-size: 14px; line-height: 1; }

/* Brand row inside the nav. Hidden on mobile (BottomNav layout),
   shown only when the nav becomes the desktop sidebar. The logo/text
   sizing lives here (not inside the desktop media query) so the inline
   SVG never falls back to its intrinsic 512x512 dimensions during the
   brief moment the sidebar is laying out. */
.nav-brand { display: none; }
.nav-brand-logo {
    /* Match the wordmark cap-height so the icon visually balances the
       text instead of towering over it. 1em == the parent <a>'s font-size,
       which inherits from the sidebar's 19px wordmark on desktop. */
    width: 1.4em;
    height: 1.4em;
    flex: 0 0 auto;
    display: block;
}
.nav-brand-text {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    color: var(--brand-primary);
}

/* Sign out lives in the desktop sidebar only — no room in the mobile tab bar. */
.nav-signout { 
    display: flex !important; 
    flex-direction: column;
    align-items: center;
    grid-column: 1 / -1; 
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   Mobile-first design. Defaults work for phones (under 768px).
   These media queries enhance layout for larger screens.
   ============================================================ */

/* ---------- Tablets (portrait + landscape) ---------- */
@media (min-width: 768px) {
    /* Wider container on tablets — feels less cramped */
    .app-container {
        max-width: 600px;
        padding: 24px;
    }

    /* Bigger touch targets meet Apple's 44px minimum */
    .btn {
        padding: 13px 20px;
        font-size: var(--text-md);
    }
    .btn-primary { font-weight: 600; }

    .field {
        padding: 12px 14px;
        font-size: var(--text-md);
        min-height: 44px;
    }

    /* Cards get more breathing room */
    .card { padding: 18px; margin-bottom: 12px; }
    .card-lg { padding: 24px; }

    /* Headings already scale fluidly via the --text-* tokens;
       no per-breakpoint overrides needed here. */

    /* Bottom nav stays at bottom but gets more padding */
    .bottom-nav {
        padding: 6px;
        max-width: 600px;
    }
    .nav-tab, .nav-item {
        padding: 10px 4px;
        min-height: 44px;
    }
    .nav-tab-icon, .nav-icon { font-size: 18px; }

    /* Side-by-side fields stay 2-column */
    .grid-2 { gap: 12px; }
}

/* ---------- Desktop (1024px+) — sidebar layout ---------- */
@media (min-width: 1024px) {
    body {
        background: linear-gradient(180deg, #FAF8F5 0%, #FBEAF0 100%);
    }

    .app-container {
        max-width: 1100px;
        padding: 32px 24px 32px 280px; /* leave room for fixed sidebar */
        position: relative;
    }

    /* Bottom nav becomes a left sidebar on desktop */
    .bottom-nav {
        position: fixed !important;  /* Override .ascx sticky positioning */
        top: 0;
        left: 0;
        bottom: 0;
        width: 240px;
        max-width: 240px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 20px 14px;
        background: linear-gradient(180deg, #ffffff 0%, #FDF6F8 100%);
        border-right: 1px solid rgba(212, 83, 126, 0.12);
        box-shadow: 1px 0 0 rgba(0, 0, 0, 0.02);
        border-radius: 0;
        margin-top: 0;
        gap: 2px;
        grid-template-columns: none;  /* Override the grid layout from .ascx */
    }

    /* Brand row: logo + wordmark */
    .nav-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 10px 16px;
        margin-bottom: 10px;
        border-bottom: 1px solid rgba(212, 83, 126, 0.15);
        text-decoration: none;
        color: var(--brand-primary);
        font-size: 19px; /* drives .nav-brand-logo em-based sizing */
        line-height: 1;
    }

    .nav-tab, .nav-item {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 10px 12px;
        text-align: left;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-secondary);
        border-radius: 10px;
        transition: background-color 0.15s ease, color 0.15s ease;
    }
    .nav-tab:hover, .nav-item:hover {
        background: rgba(212, 83, 126, 0.06);
        color: var(--brand-dark);
        text-decoration: none;
    }

    .nav-tab-icon, .nav-icon {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        line-height: 1;
        border-radius: 8px;
        background: rgba(212, 83, 126, 0.08);
        color: var(--brand-primary);
        flex: 0 0 28px;
    }

    .nav-tab.active, .nav-item.active {
        background: var(--brand-light);
        color: var(--brand-dark);
        font-weight: 600;
    }
    .nav-tab.active .nav-tab-icon,
    .nav-item.active .nav-icon {
        background: var(--brand-primary);
        color: #fff;
    }
    .nav-tab.active::before,
    .nav-item.active::before {
        content: '';
        position: absolute;
        left: 2px;
        top: 8px;
        bottom: 8px;
        width: 3px;
        border-radius: 3px;
        background: var(--brand-primary);
    }

    /* Hide trailing space below nav since it's now a sidebar */
    .bottom-nav-spacer { display: none; }

    /* Sign-out lives at the bottom of the sidebar with a divider above it. */
    .nav-signout {
        display: flex !important;
        margin-top: auto;       /* pushes to the very bottom of the flex column */
        padding-top: 12px;
        border-top: 1px solid rgba(212, 83, 126, 0.15);
        border-radius: 10px;
        color: var(--text-secondary);
        background: transparent;
        cursor: pointer;
    }
    .nav-signout:hover {
        background: rgba(163, 45, 45, 0.06);
        color: var(--danger);
    }
    .nav-signout .nav-tab-icon {
        background: rgba(163, 45, 45, 0.08);
        color: var(--danger);
    }
    .nav-signout:hover .nav-tab-icon {
        background: var(--danger);
        color: #fff;
    }

    /* On desktop, show 2-column dashboard layout where sensible */
    .desktop-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    /* Dashboard splits into main column + right sidebar */
    .dash-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 24px;
        align-items: start;
    }
    .dash-main { min-width: 0; }
    .dash-side {
        display: block;
        position: sticky;
        top: 24px;
    }
    .dash-side .card {
        margin-bottom: 12px;
    }

    /* Cards have more polish on desktop */
    .card {
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        transition: box-shadow 0.2s;
    }
    .card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }

    /* Headings already scale fluidly via the --text-* tokens. */
}

/* ---------- Wide desktop (1440px+) ---------- */
@media (min-width: 1440px) {
    .app-container {
        max-width: 1280px;
        padding: 32px 32px 32px 300px;
    }

    .bottom-nav {
        width: 260px;
        max-width: 260px;
    }
}

/* ---------- Small phones (under 360px — old iPhone SE) ---------- */
@media (max-width: 359px) {
    .app-container {
        padding: 12px;
    }

    .card { padding: 12px; }
    .card-lg { padding: 14px; }

    /* Headings already scale fluidly via the --text-* tokens. */

    /* Stack 2-column grids on tiny screens */
    .grid-2 {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    /* Tighter button padding to fit narrow screens */
    .btn { padding: 10px 12px; font-size: var(--text-sm); }

    /* Filter chips wrap onto multiple lines */
    .pill {
        font-size: 9px;
        padding: 4px 8px;
    }
}

/* ---------- Landscape phones — short height ---------- */
@media (max-height: 500px) and (orientation: landscape) {
    .app-container {
        padding: 8px 16px;
    }

    /* Hide decorative spacing in onboarding flows */
    .onboarding-spacer { display: none; }

    /* Smaller logo in landscape */
    .star-logo { width: 32px; height: 32px; }
}

/* ---------- Touch target fixes (apply at all sizes for accessibility) ---------- */
@media (pointer: coarse) {
    /* Ensure all buttons/links meet 44px minimum tap target */
    .btn, .pill, .nav-item, button, [role="button"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Form inputs feel right on touch */
    input, select, textarea {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Increase spacing between checklist items for fat-finger accuracy */
    .check-item {
        padding: 12px 8px;
    }
}

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

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
    /* For now, the app uses a warm cream background regardless of system theme.
       Dark mode is a future enhancement that would require updating every color
       variable in the design system. Leaving this hook in place so it's a
       trivial addition later. */
}

/* ---------- Print styles ---------- */
@media print {
    /* Hide navigation when printing checklists or timelines */
    .bottom-nav, .ad-banner, .tier-badge { display: none !important; }

    /* Cards print without shadows */
    .card { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }

    /* Make sure pink brand colors print as readable black/gray */
    body { color: #000; background: #fff; }
}