/* ═══════════════════════════════════════════════════════════════
   GROWTHHUB v8.0 — "MERIDIAN" DESIGN LAYER
   ───────────────────────────────────────────────────────────────
   Loaded LAST, after every other stylesheet — same proven pattern
   as theme-v6: re-skin by overriding the tokens every component
   already consumes, then hand-polish key surfaces via selectors
   VERIFIED against the live markup (never blind CSS).

   The idea: growth reads as dawn light crossing a horizon.
   • Signature gradient: indigo → cyan → jade (the "meridian arc").
     Indigo keeps GrowthHub's identity; jade is where it grows to.
   • Gold is reserved: streaks, records, celebration only.
   • Ink-green dark canvas, porcelain light. Lit-edge cards
     (1px inner top highlight) instead of glow spam.
   • Space Grotesk display / Inter UI, tabular numerals.
   Every rule here is presentation-only. Zero JS contracts touched.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root {
    /* light — porcelain with a cool jade undertone */
    --bg-primary: #f4f7f7;
    --bg-secondary: #ffffff;
    --bg-tertiary: #ecf1f1;
    --bg-elevated: #ffffff;
    --bg-hover: #e6eded;

    --border-subtle: rgba(9, 30, 28, 0.06);
    --border-default: rgba(9, 30, 28, 0.11);
    --border-strong: rgba(9, 30, 28, 0.18);

    --text-primary: #0c1b1a;
    --text-secondary: #40565a;
    --text-tertiary: #7d9296;

    --primary: #5865f2;
    --primary-hover: #4552e8;
    --primary-light: rgba(88, 101, 242, 0.10);
    --primary-glow: rgba(88, 101, 242, 0.26);
    --secondary: #0ea5b7;            /* cyan bridge */
    --accent: #0fbf8f;               /* jade */

    --success: #0fbf8f;
    --success-light: rgba(15, 191, 143, 0.12);
    --warning: #eda13a;
    --warning-light: rgba(237, 161, 58, 0.14);
    --danger: #ef4666;
    --danger-light: rgba(239, 70, 102, 0.12);

    --gold: #d99a2b;
    --gold-light: rgba(217, 154, 43, 0.14);

    --gradient-brand: linear-gradient(120deg, #5865f2 0%, #22b8cf 52%, #0fbf8f 100%);
    --gradient-meridian: linear-gradient(120deg, #5865f2 0%, #22b8cf 52%, #0fbf8f 100%);

    --shadow-xs: 0 1px 2px rgba(9, 30, 28, 0.05);
    --shadow-sm: 0 1px 3px rgba(9, 30, 28, 0.07), 0 1px 2px rgba(9, 30, 28, 0.05);
    --shadow-md: 0 8px 20px -8px rgba(9, 30, 28, 0.16), 0 2px 6px -2px rgba(9, 30, 28, 0.08);
    --shadow-lg: 0 20px 48px -14px rgba(9, 30, 28, 0.22);

    --glass-bg: rgba(255, 255, 255, 0.74);
    --glass-border: rgba(9, 30, 28, 0.08);

    --lit-edge: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    --ring: 0 0 0 3px rgba(15, 191, 143, 0.28);
}

body.dark-mode {
    /* dark — deep ink with a green-blue undertone (not plain slate) */
    --bg-primary: #0a0f12;
    --bg-secondary: #10171b;
    --bg-tertiary: #161f24;
    --bg-elevated: #141c21;
    --bg-hover: #1b262c;

    --border-subtle: rgba(148, 190, 185, 0.07);
    --border-default: rgba(148, 190, 185, 0.13);
    --border-strong: rgba(148, 190, 185, 0.22);

    --text-primary: #eaf3f2;
    --text-secondary: #9fb5b6;
    --text-tertiary: #64797d;

    --primary: #7d88ff;
    --primary-hover: #99a2ff;
    --primary-light: rgba(125, 136, 255, 0.13);
    --primary-glow: rgba(125, 136, 255, 0.30);
    --secondary: #38cfe0;
    --accent: #23dfa9;

    --success: #23dfa9;
    --success-light: rgba(35, 223, 169, 0.13);
    --warning: #f3b74e;
    --warning-light: rgba(243, 183, 78, 0.13);
    --danger: #fb6a86;
    --danger-light: rgba(251, 106, 134, 0.13);

    --gold: #f2c14e;
    --gold-light: rgba(242, 193, 78, 0.14);

    --gradient-brand: linear-gradient(120deg, #7d88ff 0%, #38cfe0 52%, #23dfa9 100%);
    --gradient-meridian: linear-gradient(120deg, #7d88ff 0%, #38cfe0 52%, #23dfa9 100%);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.38);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.38);
    --shadow-md: 0 12px 26px -10px rgba(0, 0, 0, 0.58);
    --shadow-lg: 0 26px 60px -18px rgba(0, 0, 0, 0.68);

    --glass-bg: rgba(16, 23, 27, 0.72);
    --glass-border: rgba(148, 190, 185, 0.12);

    --lit-edge: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --ring: 0 0 0 3px rgba(35, 223, 169, 0.30);
}

/* ── 2. MERIDIAN WASH — the dawn-arc ambience ──────────────── */
html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(56rem 36rem at 10% -10%, rgba(88, 101, 242, 0.075), transparent 62%),
        radial-gradient(48rem 32rem at 98% 8%, rgba(34, 184, 207, 0.055), transparent 60%),
        radial-gradient(54rem 36rem at 55% 114%, rgba(15, 191, 143, 0.06), transparent 62%);
}
body.dark-mode { }
body { background-color: var(--bg-primary); }

/* ── 3. TYPE ───────────────────────────────────────────────── */
h1, h2, h3, .section-title, .v7-brand-name {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.022em;
}
.stat-card .stat-value, #progressPercent {
    font-variant-numeric: tabular-nums;
}

/* ── 4. FOCUS — visible, on-brand, everywhere ──────────────── */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: none !important;
    box-shadow: var(--ring) !important;
    border-radius: 8px;
}

/* ── 5. CARDS get the lit edge (verified: .section, .stat-card) ── */
.section {
    box-shadow: var(--shadow-sm), var(--lit-edge);
    border-color: var(--border-subtle);
}
.section:hover { box-shadow: var(--shadow-md), var(--lit-edge); }
.stat-card {
    box-shadow: var(--shadow-xs), var(--lit-edge);
    border: 1px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
}
/* thin meridian baseline on stat cards — data sits on the horizon */
.stat-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--gradient-meridian);
    opacity: 0.55;
}

/* ── 6. THE PROGRESS BAR = the meridian itself ─────────────── */
.progress-bar, #progressBar {
    background: var(--gradient-meridian) !important;
    background-size: 200% 100% !important;
}
body:not(.no-animations) #progressBar {
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 7. SIDEBAR / TAB BAR re-skin (verified v7 shell classes) ── */
#v7Sidebar {
    background: linear-gradient(180deg, var(--bg-secondary), color-mix(in srgb, var(--bg-secondary) 92%, var(--accent) 8%) 140%);
    border-right: 1px solid var(--border-subtle);
    backdrop-filter: blur(14px);
}
.v7-brand { border-bottom-color: var(--border-subtle); }
.v7-brand img { box-shadow: 0 6px 16px -6px var(--primary-glow); }
#v7TabBar {
    background: var(--glass-bg);
    border-top: 1px solid var(--glass-border);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

/* ── 8. VERSION BADGE → meridian chip ──────────────────────── */
#versionBadge {
    background: var(--gradient-meridian) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 10px -2px var(--primary-glow);
}

/* ── 9. PAGE TRACKER — setup redesigned as a cockpit pre-flight ──
   (verified scope: .ptk .setup/.modes/.mode/.preview/.start-btn) */
.ptk .setup {
    max-width: 560px;
    border-radius: 22px;
    padding: 26px 24px;
    box-shadow: var(--shadow-lg), var(--lit-edge);
    position: relative;
    overflow: hidden;
}
.ptk .setup::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gradient-meridian);
}
.ptk .modes { gap: 10px; }
.ptk .mode {
    border-radius: 16px;
    padding: 16px 12px;
    border-width: 1.5px;
    position: relative;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body:not(.no-animations) .ptk .mode:hover { transform: translateY(-2px); }
.ptk .mode.sel {
    border-color: var(--accent);
    box-shadow: 0 0 0 1.5px var(--accent) inset, 0 8px 22px -10px var(--success-light);
    background: linear-gradient(180deg, var(--success-light), transparent 70%);
}
.ptk .mode.sel::after {
    content: "✓";
    position: absolute;
    top: 8px; right: 10px;
    font-size: 11px;
    font-weight: 800;
    color: var(--accent);
}
.ptk .preview {
    border-radius: 16px;
    border: 1px solid var(--border-default);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
        var(--bg-tertiary);
}
.ptk .preview .pv { letter-spacing: -0.01em; }
.ptk .start-btn {
    background: var(--gradient-meridian) !important;
    border: none !important;
    box-shadow: 0 10px 26px -10px var(--primary-glow), var(--lit-edge);
    letter-spacing: 0.01em;
}
body:not(.no-animations) .ptk .start-btn { transition: transform 0.14s ease, box-shadow 0.14s ease; }
body:not(.no-animations) .ptk .start-btn:hover { transform: translateY(-1.5px); box-shadow: 0 14px 32px -12px var(--primary-glow), var(--lit-edge); }
body:not(.no-animations) .ptk .start-btn:active { transform: translateY(0) scale(0.99); }

/* v8 visceral countdown hooks — classes toggled by js/v8-fx.js */
.ptk .v8-drain {
    position: relative;
}
.ptk .v8-drain::after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    height: 3px;
    width: calc(var(--v8-left, 1) * 100%);
    background: var(--gradient-meridian);
    border-radius: 2px;
    transition: width 1s linear;
}
body:not(.no-animations) .ptk .v8-urgent .v8-drain::after,
body:not(.no-animations) .ptk .v8-urgent#deadline-stat::after {
    background: linear-gradient(120deg, var(--warning), var(--danger));
    animation: v8Pulse 1.1s ease-in-out infinite;
}
@keyframes v8Pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
body.no-animations .ptk .v8-drain::after { transition: none; animation: none; }

/* ── 10. LEADERBOARD — 3D podium stage (js/v8-podium.js) ───── */
.v8-podium-stage {
    position: relative;
    height: 240px;
    margin: 4px 0 18px;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 110%, rgba(15, 191, 143, 0.10), transparent 60%),
        linear-gradient(180deg, rgba(88, 101, 242, 0.06), transparent 55%);
    border: 1px solid var(--border-subtle);
}
.v8-podium-stage canvas { display: block; width: 100%; height: 100%; }
.v8-podium-chips {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: end;
}
.v8-podium-chip {
    text-align: center;
    padding-bottom: 10px;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.v8-podium-chip b {
    display: block;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 0.86rem;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    max-width: 96%;
    margin: 0 auto 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v8-podium-chip .sc { font-variant-numeric: tabular-nums; font-weight: 700; }
.v8-podium-chip .cr { font-size: 1rem; display: block; margin-bottom: 2px; }

/* CSS 2.5D fallback (no WebGL / low-power / animations off) */
.v8-podium-css {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: end;
    gap: 12px;
    height: 100%;
    padding: 18px 16px 0;
    perspective: 720px;
}
.v8-podium-block {
    border-radius: 12px 12px 0 0;
    position: relative;
    transform: rotateX(9deg);
    transform-origin: bottom;
    box-shadow: var(--lit-edge), 0 -8px 24px -14px rgba(0, 0, 0, 0.35);
}
.v8-podium-block.g { height: 74%; background: linear-gradient(180deg, #f6d47c, #c99429); order: 2; }
.v8-podium-block.s { height: 54%; background: linear-gradient(180deg, #dfe6ea, #9aa7b0); order: 1; }
.v8-podium-block.b { height: 42%; background: linear-gradient(180deg, #e2a56e, #a4642c); order: 3; }
.v8-podium-block span {
    position: absolute;
    top: 8px; left: 0; right: 0;
    text-align: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: rgba(0, 0, 0, 0.55);
}
body:not(.no-animations) .v8-podium-block {
    animation: v8Rise 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) backwards;
}
body:not(.no-animations) .v8-podium-block.s { animation-delay: 0.08s; }
body:not(.no-animations) .v8-podium-block.b { animation-delay: 0.16s; }
@keyframes v8Rise {
    from { transform: rotateX(9deg) translateY(60%); opacity: 0; }
    to { transform: rotateX(9deg) translateY(0); opacity: 1; }
}

/* ── 11. v8 OPENING (js/v8-fx.js owns lifecycle) ───────────── */
#v8Intro {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--bg-primary);
    cursor: pointer;
}
#v8Intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.v8i-stage { position: relative; text-align: center; z-index: 2; }
.v8i-logo {
    width: 68px; height: 68px;
    border-radius: 20px;
    box-shadow: 0 14px 36px -10px var(--primary-glow);
    animation: v8LogoIn 0.85s cubic-bezier(0.22, 1.6, 0.36, 1) backwards;
}
.v8i-word {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.7rem;
    letter-spacing: -0.03em;
    margin-top: 12px;
    color: var(--text-primary);
    animation: v8FadeUp 0.6s 0.25s ease backwards;
}
.v8i-word em {
    font-style: normal;
    background: var(--gradient-meridian);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.v8i-sub {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 5px;
    animation: v8FadeUp 0.6s 0.4s ease backwards;
}
.v8i-skip {
    position: absolute;
    bottom: 26px; left: 0; right: 0;
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-tertiary);
    animation: v8FadeUp 0.6s 0.9s ease backwards;
}
@keyframes v8LogoIn { from { transform: scale(0.6) translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes v8FadeUp { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
#v8Intro.out { animation: v8Out 0.4s ease forwards; }
@keyframes v8Out { to { opacity: 0; visibility: hidden; } }

/* ── 12. STATS — dimensional reveal hooks (js/v8-fx.js) ─────── */
body:not(.no-animations) .stat-card.v8-in {
    animation: v8StatIn 0.55s cubic-bezier(0.22, 1.3, 0.36, 1) backwards;
}
@keyframes v8StatIn {
    from { transform: translateY(14px) scale(0.97); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* ── 13. EMPTY STATES — an invitation, not a void ──────────── */
.v8-empty-seed {
    display: inline-block;
    font-size: 1.4rem;
}
body:not(.no-animations) .v8-empty-seed {
    animation: v8Sway 2.6s ease-in-out infinite;
    transform-origin: bottom center;
}
@keyframes v8Sway {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(6deg); }
}

/* ── 14. HARD SAFETY — animations off = truly static ───────── */
body.no-animations #v8Intro,
body.no-animations .v8-podium-block,
body.no-animations .stat-card.v8-in,
body.no-animations .v8-empty-seed { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    #v8Intro, .v8-podium-block, .stat-card.v8-in, .v8-empty-seed { animation: none !important; }
    .ptk .v8-drain::after { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   v8.1 — Page Tracker onboarding · help button · Hub & mobile polish
   (all verified against the live markup)
   ═══════════════════════════════════════════════════════════════ */

/* ── PTK topbar: center title, right-align the new (?) button ──── */
.ptk-topbar .ptk-title { flex: 1; justify-content: center; }
.ptk-help-btn {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border-default);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 17px; font-weight: 800;
    cursor: pointer; line-height: 1;
}
.ptk-help-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── PTK "How it works" onboarding overlay ─────────────────────── */
.ptk-howto {
    position: absolute; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
    background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body:not(.no-animations) .ptk-howto { animation: v8FadeUp 0.28s ease; }
.ptk-howto.out { opacity: 0; transition: opacity 0.24s ease; }
.ptk-howto-card {
    width: min(460px, 96vw);
    max-height: 92%;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 22px;
    padding: 24px 22px;
    box-shadow: var(--shadow-lg), var(--lit-edge);
    text-align: center;
    position: relative;
}
.ptk-howto-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--gradient-meridian);
    border-radius: 22px 22px 0 0;
}
body:not(.no-animations) .ptk-howto-card { animation: v8LogoIn 0.4s cubic-bezier(0.22,1.3,0.36,1); }
.ptk-howto-emoji { font-size: 2.2rem; margin-bottom: 6px; }
.ptk-howto-card h2 {
    margin: 0 0 6px; font-size: 1.25rem;
    font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em;
    color: var(--text-primary);
}
.ptk-howto-lede { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; margin: 0 0 18px; }
.ptk-howto-steps { text-align: left; display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.ptk-howto-step { display: flex; gap: 12px; align-items: flex-start; }
.ptk-howto-step .n {
    flex: 0 0 26px; height: 26px; border-radius: 50%;
    background: var(--gradient-meridian); color: #fff;
    font-weight: 800; font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
}
.ptk-howto-step > div { display: flex; flex-direction: column; gap: 2px; }
.ptk-howto-step b { color: var(--text-primary); font-size: 0.9rem; }
.ptk-howto-step span { color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; }
.ptk-howto-go {
    width: 100%; padding: 13px;
    background: var(--gradient-meridian); color: #fff;
    border: none; border-radius: 14px;
    font-weight: 700; font-size: 0.95rem; cursor: pointer;
    box-shadow: 0 10px 26px -10px var(--primary-glow);
}
body:not(.no-animations) .ptk-howto-go { transition: transform 0.14s ease; }
body:not(.no-animations) .ptk-howto-go:hover { transform: translateY(-1.5px); }
.ptk-howto-skip {
    width: 100%; margin-top: 8px; padding: 8px;
    background: transparent; border: none;
    color: var(--text-tertiary); font-size: 0.8rem; cursor: pointer;
}
.ptk-howto-skip:hover { color: var(--text-secondary); }
body.no-animations .ptk-howto, body.no-animations .ptk-howto-card { animation: none !important; }

/* ── HUB polish: warmer cards, meridian header accent ──────────── */
.hub-header {
    border-bottom-color: var(--border-subtle);
    position: relative;
}
.hub-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--gradient-meridian); opacity: 0.5;
}
.group-card {
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs), var(--lit-edge);
    position: relative; overflow: hidden;
}
body:not(.no-animations) .group-card { transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; }
body:not(.no-animations) .group-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), var(--lit-edge); }
.group-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--gradient-meridian);
    opacity: 0; transition: opacity 0.16s ease;
}
.group-card:hover::before { opacity: 0.8; }
.hub-btn { box-shadow: var(--shadow-sm), var(--lit-edge); }

/* ── MOBILE refinements (verified shell + section classes) ─────── */
@media (max-width: 899px) {
    /* keep the FABs clear of the bottom tab bar + safe area */
    .quick-note-fab { bottom: calc(var(--v7tab-h, 62px) + 14px + env(safe-area-inset-bottom)); }
    /* the PTK setup fits small screens without side-clipping */
    .ptk .setup { margin: 3vh auto; padding: 20px 16px; max-width: 96vw; }
    .ptk .modes { flex-direction: column; }
    /* stat cards breathe on narrow screens */
    .stats-grid { gap: 10px; }
    /* section headings don't crowd the edge */
    .section { border-radius: 16px; }
    /* tap targets comfortable */
    .ptk-howto-card { padding: 20px 16px; }
}
/* very small phones: shrink hero numerics so nothing overflows */
@media (max-width: 380px) {
    .ptk-howto-card h2 { font-size: 1.1rem; }
    #progressPercent { font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════════════════════════
   v8.2 — OVERLAY TRAP FIX · football top-button · greeting-bar +
   full-screen overlays hardened for phone (no clutter, no traps)
   ═══════════════════════════════════════════════════════════════ */

/* ── THE TRAP FIX ──────────────────────────────────────────────
   The fixed gear/sync/quick-note floaters sit at z 10000–10001.
   Page Tracker's overlay was z 9990 → the floaters painted OVER its
   back button, so you couldn't exit (the reported trap). Two guards:
   (1) lift the full-screen overlays above every floater, and
   (2) hide the floaters entirely while any overlay is open, so a
       stray fixed control can never cover a back/close button.     */
#pageTrackerOverlay { z-index: 100000 !important; }
#wcOverlay { z-index: 100000; }
#floatwin { z-index: 100001 !important; } /* PTK mini-timer above its overlay */

body.ptk-mode .settings-btn-topbar,
body.ptk-mode .desktop-sync-btn,
body.ptk-mode .quick-note-fab,
body.ptk-mode .top-bar-toggle,
body.ptk-mode #v7TabBar,
body.wc-mode .settings-btn-topbar,
body.wc-mode .desktop-sync-btn,
body.wc-mode .quick-note-fab,
body.wc-mode .top-bar-toggle,
body.wc-mode #v7TabBar {
    display: none !important;
}
/* The World Cup HQ overlay covers the screen via its own high z-index,
   so the sidebar underneath needs no pointer-events change (removing it
   guarantees the sidebar can never stay frozen). */

/* Make every overlay back/close button an unmissable, safe-area-aware
   tap target that always sits ON TOP of its own overlay. */
.ptk-back, .wc-back {
    position: relative;
    z-index: 20;
    min-width: 44px; min-height: 44px;
}
.wc-topbar { padding-top: calc(12px + env(safe-area-inset-top)); }
.ptk-topbar { padding-top: env(safe-area-inset-top); box-sizing: content-box; }

/* ── FOOTBALL BUTTON in the greeting bar (matches the sibling btns) ── */
.wc-topbtn {
    position: relative;
    background: linear-gradient(135deg, rgba(15,191,143,0.14) 0%, rgba(14,165,183,0.14) 100%);
    border: 2px solid rgba(15,191,143,0.38);
    padding: 12px 16px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex; align-items: center; gap: 6px;
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(15,191,143,0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Premium "LIVE" broadcast badge — replaces the old 🔥 circle */
.wc-topbtn-hot {
    position: absolute;
    top: -9px;
    right: -10px;
    width: auto;           /* overrides old fixed 20px */
    height: auto;
    padding: 2px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    color: #fff;
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(255, 65, 108, 0.55), 0 0 0 1.5px rgba(255,255,255,0.18);
    border: none;
    pointer-events: none;
    animation: wcLivePulse 2s ease-in-out infinite;
}
@keyframes wcLivePulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(255,65,108,0.55), 0 0 0 1.5px rgba(255,255,255,0.18); }
    50%       { box-shadow: 0 4px 14px rgba(255,65,108,0.75), 0 0 0 2.5px rgba(255,255,255,0.25); }
}
body:not(.no-animations) .wc-topbtn:hover { transform: translateY(-1.5px); box-shadow: 0 6px 16px rgba(15,191,143,0.22); }
.wc-topbtn-dot {
    display: none;
    position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 26%, transparent);
}
body:not(.no-animations) .wc-topbtn-dot { animation: wcPulse 1.4s ease-in-out infinite; }

/* ── GREETING ACTION ROW — tidy, wraps cleanly, never overflows ──
   (verified: the row is the flex container holding Sign in / Light /
    ? / 🍅 / 📖 / ☕ / ⚽. We normalize wrap + spacing so it reads calm
    on every width instead of spilling or clipping.) */
.greeting-card + * , .header-actions { }
.hero-header-actions, .greeting-actions,
div:has(> #darkModeToggle):has(> #coffeeBtn) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

/* ── PHONE HARDENING (≤ 640px): calmer, roomier, zero clutter ──── */
@media (max-width: 640px) {
    /* Action buttons: uniform, thumb-sized, wrap to a neat grid */
    #darkModeToggle, #helpGuideBtn, #pomodoroBtn, #pageTrackerBtn,
    #coffeeBtn, #worldCupBtn {
        padding: 10px 13px !important;
        min-height: 42px;
        border-radius: 12px !important;
    }
    /* Light toggle keeps its label; icon-only buttons stay compact */
    #darkModeToggle { padding: 10px 14px !important; }

    /* World Cup HQ: single-column bracket, comfortable spacing */
    .wc-col { flex-basis: 84vw; }
    .wc-topbar { gap: 8px; padding-left: 10px; padding-right: 10px; }
    .wc-title { font-size: 0.98rem; }
    .wc-tz select { max-width: 96px; }
    .wc-hero { padding: 16px 14px; }
    .wc-hero-teams { gap: 6px; }
    .wc-mine { padding: 12px; gap: 10px; }
    .wc-mine-flag { font-size: 1.9rem; }

    /* Standings rows: comfortable tap height */
    .wc-stand-row { padding: 11px 12px; }

    /* Page Tracker: the setup + controls never clip on a phone */
    .ptk .setup { margin: 2vh auto; }
    .ptk-title { font-size: 14px; }
}

/* ── very small phones (≤ 380): clamp so nothing ever overflows ── */
@media (max-width: 380px) {
    .wc-pick-grid { grid-template-columns: repeat(3, 1fr); }
    .wc-title { font-size: 0.9rem; }
    .wc-hero-score { font-size: 1.35rem; }
    #darkModeToggle span:first-child { font-size: 0.9rem; }
}

/* Respect reduced motion everywhere new */
@media (prefers-reduced-motion: reduce) {
    .wc-topbtn, .wc-topbtn-dot { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   v8.2.1 — Page Tracker setup, redesigned for clarity
   (plain-language mode cards, numbered steps, obvious selection)
   ═══════════════════════════════════════════════════════════════ */
.ptk .ptk-lede { color: var(--text-secondary); font-size: 13.5px; line-height: 1.6; margin: 0 0 20px; }
.ptk .ptk-step {
    font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
    color: var(--text-primary); margin: 18px 0 9px;
    display: flex; align-items: center; gap: 6px;
}
.ptk .ptk-hint { font-size: 11.5px; color: var(--text-tertiary); margin: 7px 2px 0; line-height: 1.5; }

/* Mode cards — unmistakably tappable, big, with icon + example */
.ptk .modes { display: flex; gap: 10px; margin-bottom: 4px; }
.ptk .mode {
    flex: 1; position: relative;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-default);
    border-radius: 16px;
    padding: 16px 12px 14px;
    cursor: pointer; text-align: center;
    font: inherit; color: inherit;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
body:not(.no-animations) .ptk .mode:hover { transform: translateY(-2px); border-color: var(--accent); }
.ptk .mode.sel {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-secondary));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent), var(--shadow-sm);
}
.ptk .mode .mode-emoji { font-size: 1.9rem; line-height: 1; margin-bottom: 4px; }
.ptk .mode .mt { font-weight: 800; font-size: 14.5px; color: var(--text-primary); }
.ptk .mode .md { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
.ptk .mode .mex { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; font-style: italic; }
.ptk .mode .mode-check {
    position: absolute; top: 8px; right: 8px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent); color: #fff;
    font-size: 12px; font-weight: 900;
    display: none; align-items: center; justify-content: center;
}
.ptk .mode.sel .mode-check { display: flex; }

/* Selected-mode field block gets a soft frame so step 2 reads as "active" */
.ptk #mode-fields { margin-top: 4px; }

/* The new "change / new setup" footer button — clearly an accent action */
.ptk .footer .ptk-newrun { color: var(--accent); font-weight: 700; }
.ptk .footer .ptk-newrun:hover { color: var(--accent); text-decoration: underline; }

/* Preview card a touch friendlier */
.ptk .preview { margin-top: 16px; }
.ptk .preview .pk { font-size: 11.5px; }

/* Phone: mode cards stack for full-width tap targets */
@media (max-width: 560px) {
    .ptk .modes { flex-direction: column; }
    .ptk .mode { flex-direction: row; text-align: left; gap: 12px; align-items: center; padding: 14px; }
    .ptk .mode .mode-emoji { margin-bottom: 0; }
    .ptk .mode > div:not(.mode-emoji) { text-align: left; }
    .ptk .mode .mex { margin-top: 2px; }
    .ptk .mode-check { top: 50%; transform: translateY(-50%); }
}

/* v8.2.1 — gamified football button (wears your team's flag once picked) */
.wc-topbtn-ic { font-size: 1.25rem; line-height: 1; display: inline-block; }
body:not(.no-animations) .wc-topbtn:hover .wc-topbtn-ic { animation: wcKick 0.5s ease; }
body:not(.no-animations) .wc-topbtn:active .wc-topbtn-ic { animation: wcKick 0.5s ease; }
@keyframes wcKick { 0%,100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-12deg) scale(1.15); } 60% { transform: rotate(10deg) scale(1.1); } }
/* v8.4.0 — phones/tablets have no :hover, so the ball plays the desktop
   kick on a gentle loop instead of sitting still (task: same animation
   on phone). Reduced-motion / no-animations still switches it off. */
@media (hover: none) {
    body:not(.no-animations) .wc-topbtn-ic { animation: wcKickLoop 3.6s ease-in-out infinite; }
}
@keyframes wcKickLoop {
    0%, 78%, 100% { transform: rotate(0) scale(1); }
    84% { transform: rotate(-12deg) scale(1.15); }
    92% { transform: rotate(10deg) scale(1.08); }
}

/* v8.4.2 — signed-in account button: keep it compact on phones (avatar
   initial only; the first-name label shows from 701px up). */
@media (max-width: 700px) {
    #accountLabel { display: none !important; }
}

/* v8.3 — Page Tracker redesign: numbered step badges */
.ptk .ptk-step { display: flex; align-items: center; gap: 9px; }
.ptk .ptk-step-n {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--gradient-meridian); color: #fff;
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}

/* v8.3 — Page Tracker: prominent reset button + themed confirm */
.ptk .footer .ptk-reset-btn {
    display: block; width: 100%; margin-top: 10px;
    padding: 12px; border-radius: 12px;
    background: color-mix(in srgb, var(--danger, #ef4666) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger, #ef4666) 45%, transparent);
    color: var(--danger, #ef4666); font-weight: 800; font-size: 0.9rem; cursor: pointer;
}
.ptk .footer .ptk-reset-btn:hover { background: color-mix(in srgb, var(--danger, #ef4666) 20%, transparent); }
.ptk-reset-yes {
    width: 100%; padding: 13px; margin-top: 4px;
    background: var(--danger, #ef4666); color: #fff; border: none; border-radius: 14px;
    font-weight: 800; font-size: 0.95rem; cursor: pointer;
}
.ptk-reset-card::before { background: var(--danger, #ef4666) !important; }

/* ═══════════════════════════════════════════════════════════════
   v8.3.3 — cleaner home: greeting removed, floating controls stacked
   ═══════════════════════════════════════════════════════════════ */
/* Greeting card ("🌙 Good Night / User") removed for a clean interface.
   First-time users still get the name prompt (greetingModal). Account +
   sync stay reachable from the sidebar 👤 and the bottom menu. */
.greeting-card { display: none !important; }

/* Neatly stack the floating gear / sound / refresh controls into one tidy
   top-left column instead of a scattered cluster. */
.settings-btn-topbar { top: 12px !important; left: 14px !important; right: auto !important; z-index: 9000 !important; }
.global-sound-toggle { top: 60px !important; left: 14px !important; right: auto !important; z-index: 9000 !important; }
.desktop-sync-btn { top: 108px !important; left: 14px !important; right: auto !important; z-index: 9000 !important; }
@media (max-width: 640px) {
    .settings-btn-topbar { top: calc(10px + env(safe-area-inset-top)) !important; left: 10px !important; }
    /* v9.0.0 — the sound toggle must ALWAYS win a tap on phone: sit above
       every header/overlay layer, take a ≥44px hit target, and opt out of
       the 300ms double-tap zoom heuristics that ate quick taps. */
    .global-sound-toggle {
        top: calc(56px + env(safe-area-inset-top)) !important;
        left: 10px !important;
        z-index: 11000 !important;
        width: 44px !important;
        height: 44px !important;
        touch-action: manipulation;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent;
    }
    .desktop-sync-btn { display: none !important; } /* refresh not needed on phone */
}

/* App footer with version */
.gh-footer {
    text-align: center; padding: 22px 16px calc(20px + env(safe-area-inset-bottom));
    color: var(--text-tertiary); font-size: 0.72rem; letter-spacing: 0.02em;
    border-top: 1px solid var(--border-subtle); margin-top: 28px;
}
.gh-footer b { color: var(--text-secondary); font-weight: 700; }


/* ══════════════════════════════════════════════════════════════════════
   v9.3.2 — CALENDAR HEADER FITS ON PHONES
   ----------------------------------------------------------------------
   The only rule that stacked .section-header lived inside
   @media (min-width: 600px) and (max-width: 768px) — a tablet band. A real
   phone (~360-430px CSS width) never matched it, so the calendar header
   stayed one row: the title wrapped around the "‹" button and the "›"
   button was pushed off the right edge of the screen.

   Scoped deliberately to the two calendar sections ONLY, so every other
   section header (Add Task, Add Routine, Save Notes…) keeps its current
   layout untouched.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
    #calendarSection > .section-header,
    #emergencyCalendarSection > .section-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    /* collapse chevron + title stay on one tidy line, ellipsis if needed */
    #calendarSection > .section-header .section-header-left,
    #emergencyCalendarSection > .section-header .section-header-left {
        min-width: 0;
        flex-wrap: nowrap;
    }
    #calendarSection > .section-header .section-title,
    #emergencyCalendarSection > .section-header .section-title {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.05rem;
    }

    /* month nav: full width, arrows pinned to the edges, label in between */
    .calendar-nav {
        width: 100%;
        justify-content: space-between;
        gap: 8px !important;
    }
    .calendar-nav .nav-btn {
        flex: 0 0 auto;
        padding: 8px 14px !important;
        min-width: 44px;      /* comfortable tap target */
        min-height: 40px;
        line-height: 1;
    }
    .calendar-month-label {
        flex: 1 1 auto;
        min-width: 0 !important;   /* beats the inline min-width:180px */
        font-size: 1.05rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Very narrow phones (~320-360px): trim a little more so the month name
   never truncates. */
@media (max-width: 360px) {
    .calendar-nav .nav-btn { padding: 7px 11px !important; min-width: 40px; }
    .calendar-month-label { font-size: 0.98rem !important; }
    #calendarSection > .section-header .section-title,
    #emergencyCalendarSection > .section-header .section-title { font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   v9.3.4 — PICTURE DELETE UX ON PHONES
   Long-pressing a picture opened the browser's image context menu (copy /
   save image), hijacking the interaction users actually want (edit/delete).
   Touch callout and selection are disabled on the grid, and the edit/delete
   buttons are always visible with proper tap targets on touch devices —
   no hover, no long-press needed, just tap 🗑️.
   ══════════════════════════════════════════════════════════════════════ */
#routinePicturesGrid img,
.routine-picture-card img {
    -webkit-touch-callout: none;   /* iOS long-press save-image sheet */
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}
@media (hover: none) and (pointer: coarse) {
    .picture-actions {
        opacity: 1 !important;          /* never hidden behind hover */
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .picture-actions button {
        min-width: 40px;
        min-height: 36px;
        font-size: 0.95rem !important;
    }
}

/* v9.3.6 — single calendar count badge; muted styling for past (history) days */
.calendar-day-badge.past {
    background: var(--text-secondary, #9ca3af) !important;
    opacity: .85;
}

/* v9.3.6 — a task deleted before its date passed still appears in that day's
   history (so you can see what the day actually held), marked as removed. */
.day-task-deleted-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
    color: #fca5a5;
    background: rgba(239, 68, 68, .16);
    border: 1px solid rgba(239, 68, 68, .34);
}