/* ===================================================================== Utah Rio FC Academy — Theme layer (Dark mode) --------------------------------------------------------------------- APPEND-ONLY / ADDITIVE. This file never edits app.css. Every dark rule is scoped under [data-theme="dark"], so light mode (the v28 design) is byte-for-byte unchanged — toggling just swaps the data-theme attribute on . Toggle lives in Settings ⚙ (System / Light / Dark). Direction: calm monochrome (Notion/Linear/iOS). Layered near-blacks, soft floating surfaces with hairline borders, high-contrast white type, ONE blue action color, gold used only as a whisper. Sections: 0. Dark palette + global :root token remap 1. Base surfaces — html/body, topbar, tabbar, drawer, scrollbars 2. Global primitives — cards, chips, buttons, inputs, search, FAB 3. Shared "blue editorial" local-token remap (home/session-run/ library/glossary/notes/analytics/players) 4. Home (.bighero-*) 5. Session — Run mode (.cm-*) 6. Session — Plan mode (.sb-*) 7. Library (.lib2-*) 8. Glossary (.glx-*) 9. Notes (.notes2-*) 10. Analytics (.an-*) 11. Training / Program (.curr-* / .mv-*) 12. Drill detail (.dd-*) 13. Content/reference pages (.hwp-* — How We Play / Parent Guide) 14. Shared session content blocks (.session-fragment, .voice, pitch…) 15. Gear sheet + the new Appearance control (base + dark) ===================================================================== */ /* ============================ 0. PALETTE + GLOBAL TOKENS ============== */ [data-theme="dark"]{ color-scheme: dark; /* dark palette helpers (used throughout this file) */ --d-canvas:#0A0A0B; /* app canvas / deepest layer */ --d-s1:#141416; /* cards, panels */ --d-s2:#1C1C1F; /* raised / hover / pills / search */ --d-s3:#2A2A2E; /* active selection / nav highlight */ --d-line:rgba(255,255,255,0.06); --d-line2:rgba(255,255,255,0.10); --d-text:#FFFFFF; /* headings */ --d-text-body:#D7D7DC; /* paragraph copy (softer than pure white) */ --d-text-2:#A0A0A8; /* secondary */ --d-text-3:#6B6B73; /* tertiary / metadata / placeholder */ --d-blue:#2F88FF; /* the single action color */ --d-blue-soft:#7FB2FF; --d-gold:#D8B65A; /* a touch brighter so gold reads on black */ --d-green:#34D058; --d-shadow:0 8px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.04); --d-shadow-sm:0 4px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04); /* remap the global :root tokens (covers everything token-driven) */ --bg:var(--d-canvas); --bg-elev:var(--d-s2); --bg-alt:var(--d-s2); --surface:var(--d-s1); --surface-soft:var(--d-s2); --overlay:rgba(0,0,0,0.62); --border:var(--d-line); --border-strong:var(--d-line2); --border-focus:var(--d-blue); --text:var(--d-text); --text-primary:var(--d-text); --text-secondary:var(--d-text-2); --text-tertiary:var(--d-text-3); --text-2:var(--d-text-2); --text-3:var(--d-text-3); --accent:var(--d-blue); --accent-2:var(--d-blue-soft); --accent-bg:rgba(47,136,255,0.14); --gold:var(--d-gold); --gold-soft:rgba(216,182,90,0.14); --warn:#E0A33A; --warn-bg:rgba(224,163,58,0.14); --danger:#E0726A; --danger-bg:rgba(224,114,106,0.14); /* categorical + voice tints — keep the hues, lift the fills for dark */ --c-touch:#4FB3C9; --c-touch-bg:rgba(79,179,201,0.15); --c-courage:#E58088; --c-courage-bg:rgba(229,128,136,0.15); --c-curiosity:#8FA2EA; --c-curiosity-bg:rgba(143,162,234,0.15); --c-joy:#E6B45A; --c-joy-bg:rgba(230,180,90,0.15); --k-arrival:#93A0BC; --k-arrival-bg:rgba(147,160,188,0.15); --k-warmup:#6FBE89; --k-warmup-bg:rgba(111,190,137,0.15); --k-technical:#7E97DE; --k-technical-bg:rgba(126,151,222,0.15); --k-game:#E58088; --k-game-bg:rgba(229,128,136,0.15); --k-cooldown:#E0B25C; --k-cooldown-bg:rgba(224,178,92,0.15); --k-homework:#C58BE0; --k-homework-bg:rgba(197,139,224,0.15); --k-fungame:#EF8DB6; --k-fungame-bg:rgba(239,141,182,0.15); --voice-say:#7FB2FF; --voice-say-bg:rgba(47,136,255,0.10); --voice-tip:#E58088; --voice-tip-bg:rgba(229,128,136,0.10); --voice-watch:#E0B25C; --voice-watch-bg:rgba(224,178,92,0.10); --voice-ask:#E6C46A; --voice-ask-bg:rgba(216,182,90,0.10); } /* ============================ 1. BASE SURFACES ======================= */ [data-theme="dark"] html, [data-theme="dark"] body, [data-theme="dark"] .app{ background:var(--d-canvas); color:var(--d-text-body); } /* top bar (plain + glass-app variants) */ [data-theme="dark"] .topbar, [data-theme="dark"] body.glass-app .topbar{ background:rgba(10,10,11,0.82); -webkit-backdrop-filter:saturate(140%) blur(18px); backdrop-filter:saturate(140%) blur(18px); border-bottom:1px solid var(--d-line); } [data-theme="dark"] .topbar-brand{ color:var(--d-text); } [data-theme="dark"] .topbar-nav-btn{ color:var(--d-text-2); } [data-theme="dark"] .topbar-nav-btn:active{ background:rgba(255,255,255,0.07); } /* bottom tab bar (plain + glass-app variants) */ [data-theme="dark"] .tabbar, [data-theme="dark"] body.glass-app .tabbar{ background:rgba(18,18,20,0.86); -webkit-backdrop-filter:saturate(140%) blur(18px); backdrop-filter:saturate(140%) blur(18px); border-top:1px solid var(--d-line); box-shadow:0 -1px 0 rgba(255,255,255,0.03); } [data-theme="dark"] .tabbar .tab{ color:var(--d-text-3); } /* keep the gradient-text active tab — it reads well on black */ /* drawer / menu / backdrops */ [data-theme="dark"] .menu-backdrop, [data-theme="dark"] .v3-sheet-backdrop{ background:rgba(0,0,0,0.62); } [data-theme="dark"] .menu-drawer{ background:var(--d-s1); border-right:1px solid var(--d-line); box-shadow:0 24px 60px rgba(0,0,0,0.6); } [data-theme="dark"] .menu-item{ color:var(--d-text-body); } [data-theme="dark"] .menu-item.is-active, [data-theme="dark"] .menu-item[aria-current="page"]{ background:var(--d-s3); color:var(--d-text); } /* native scrollbars */ [data-theme="dark"] ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.12); } [data-theme="dark"] ::-webkit-scrollbar-track{ background:transparent; } /* ============================ 2. GLOBAL PRIMITIVES =================== */ /* Most use tokens (handled by §0). These fix glass/hardcoded variants. */ [data-theme="dark"] body.glass-app .card, [data-theme="dark"] body.glass-app .card-soft, [data-theme="dark"] body.glass-app .month-card, [data-theme="dark"] body.glass-app .session-card, [data-theme="dark"] body.glass-app .dash-card, [data-theme="dark"] body.glass-app .tile, [data-theme="dark"] body.glass-app .quick-stat, [data-theme="dark"] body.glass-app .note-item{ background:var(--d-s1); border:1px solid var(--d-line); } /* primary action button → solid blue */ [data-theme="dark"] .primary{ background:var(--d-blue); color:#fff; } [data-theme="dark"] .primary:hover, [data-theme="dark"] .primary:active{ background:var(--d-blue-soft); } [data-theme="dark"] .primary:disabled{ background:var(--d-s2); color:var(--d-text-3); } /* chips / fields / search inherit tokens; nudge active + placeholders */ [data-theme="dark"] .chip[aria-pressed="true"]{ background:var(--d-blue); border-color:var(--d-blue); color:#fff; } [data-theme="dark"] .field input::placeholder, [data-theme="dark"] .field textarea::placeholder, [data-theme="dark"] .search input::placeholder{ color:var(--d-text-3); } /* update banner / toasts */ [data-theme="dark"] .update-banner, [data-theme="dark"] .undo-toast{ background:var(--d-s3); color:var(--d-text); border:1px solid var(--d-line2); } /* ============================ 3. SHARED LOCAL-TOKEN REMAP ============ */ /* These screens redefine the same local token set. One remap flips the bulk of each (text, borders, chips, icons). Literal #fff backgrounds and gradients are patched in the per-screen sections that follow. */ [data-theme="dark"] body.home-v3, [data-theme="dark"] .cm-page, [data-theme="dark"] .lib2-screen, [data-theme="dark"] .glx-screen, [data-theme="dark"] .notes2-page, [data-theme="dark"] body.prog-ed, [data-theme="dark"] .ped-page, [data-theme="dark"] .mv2-page, [data-theme="dark"] .form2-page, [data-theme="dark"] .v2-page{ --accent:var(--d-blue); --accent-bright:var(--d-blue-soft); --accent-deep:var(--d-blue-soft); --ink:var(--d-text); --ink-soft:var(--d-text-2); --ink-faint:var(--d-text-3); --hair:var(--d-line); --chip:var(--d-s2); } /* ============================ 4. HOME ================================ */ /* daypart page backgrounds → flat near-black */ [data-theme="dark"] body.glass-app.home-v3[data-daypart="morning"], [data-theme="dark"] body.glass-app.home-v3[data-daypart="afternoon"], [data-theme="dark"] body.glass-app.home-v3[data-daypart="evening"], [data-theme="dark"] body.home-v3{ background:var(--d-canvas); } [data-theme="dark"] .bighero-greet .accent{ color:var(--d-blue-soft); } /* hero: gradient → calm flat dark surface */ [data-theme="dark"] .bighero-hero{ background: radial-gradient(120% 85% at 100% 0%, rgba(255,255,255,0.05) 0%, transparent 50%), linear-gradient(162deg,#18181C 0%,#121214 60%,#0F0F11 100%); border:1px solid var(--d-line2); box-shadow:var(--d-shadow); } [data-theme="dark"] .bighero-upnext{ background:var(--d-s2); border-color:var(--d-line2); color:var(--d-text-2); } [data-theme="dark"] .bighero-meta{ color:var(--d-text-3); } [data-theme="dark"] .bighero-cond{ color:var(--d-text-body); } [data-theme="dark"] .bighero-cond-icon svg{ stroke:var(--d-text-2); } [data-theme="dark"] .bighero-cond-sep{ color:var(--d-text-3); } [data-theme="dark"] .bighero-divider{ background:var(--d-line); } [data-theme="dark"] .bighero-mwp{ color:var(--d-blue-soft); } [data-theme="dark"] .bighero-sub{ color:var(--d-text-2); } [data-theme="dark"] .bighero-stale{ background:var(--d-s2); } /* CTA: white → solid blue */ [data-theme="dark"] .bighero-cta{ background:var(--d-blue); color:#fff; box-shadow:0 14px 30px -12px rgba(47,136,255,0.8); } [data-theme="dark"] .bighero-cta-play{ background:rgba(255,255,255,0.20); color:#fff; } [data-theme="dark"] .bighero-review{ color:var(--d-text-2); } /* month strip: glass → dark card */ [data-theme="dark"] .bighero-month{ background:var(--d-s1); border:1px solid var(--d-line); box-shadow:var(--d-shadow-sm); } [data-theme="dark"] .bighero-month-eyebrow{ color:var(--d-blue-soft); } [data-theme="dark"] .bighero-month-num, [data-theme="dark"] .bighero-month-title{ color:var(--d-text); } [data-theme="dark"] .bighero-month-goal, [data-theme="dark"] .bighero-month-prog{ color:var(--d-text-2); } [data-theme="dark"] .bighero-seg{ background:rgba(255,255,255,0.10); } [data-theme="dark"] .bighero-seg.is-filled{ background:var(--d-blue); } [data-theme="dark"] .topbar-pill{ background:linear-gradient(90deg,var(--d-blue-soft),var(--d-blue)); } [data-theme="dark"] .v3-switch-program{ background:var(--d-s2); border:1px solid var(--d-line); color:var(--d-text-2); } /* ============================ 5. SESSION — RUN (cm) ================== */ [data-theme="dark"] body.cm-active{ background:var(--d-canvas); } [data-theme="dark"] .cm-chip{ background:var(--d-s1); border:1px solid var(--d-line); } [data-theme="dark"] .cm-chip.is-done{ background:var(--d-s2); } [data-theme="dark"] .cm-chip.is-done .cm-chip-n{ background:rgba(52,208,88,0.16); color:var(--d-green); } [data-theme="dark"] .cm-chip.is-active{ background:var(--d-blue); border-color:var(--d-blue); box-shadow:0 12px 26px -12px rgba(47,136,255,0.75); } [data-theme="dark"] .cm-card{ background:var(--d-s1); border:1px solid var(--d-line); box-shadow:var(--d-shadow); } [data-theme="dark"] .cm-eyebrow{ color:var(--d-blue-soft); } [data-theme="dark"] .cm-count{ background:var(--d-s2); color:var(--d-text-3); } [data-theme="dark"] .cm-timer{ background:rgba(47,136,255,0.08); border:1px solid rgba(47,136,255,0.18); } [data-theme="dark"] .cm-timer.is-static{ background:var(--d-s2); border-color:var(--d-line); } [data-theme="dark"] .cm-card.is-running .cm-timer{ background:rgba(47,136,255,0.12); } [data-theme="dark"] .cm-card.is-running .cm-time{ color:var(--d-text); } [data-theme="dark"] .cm-timer-reset{ background:var(--d-s2); border:1px solid var(--d-line2); color:var(--d-text); } [data-theme="dark"] .cm-timer-play{ background:var(--d-blue); color:#fff; } [data-theme="dark"] .cm-timer-bar{ background:rgba(255,255,255,0.07); } [data-theme="dark"] .cm-timer-fill{ background:var(--d-blue); } [data-theme="dark"] .cm-row-ic{ background:var(--d-s2); color:var(--d-text-2); } [data-theme="dark"] .cm-section-ic{ color:var(--d-text-2); } [data-theme="dark"] .cm-section-body .num{ background:var(--d-blue); color:#fff; } [data-theme="dark"] .cm-says{ background:rgba(47,136,255,0.08); border:1px solid rgba(47,136,255,0.20); } [data-theme="dark"] .cm-says-h{ color:var(--d-blue-soft); } [data-theme="dark"] .cm-says-body{ color:var(--d-text); } [data-theme="dark"] .cm-next{ background:var(--d-blue); color:#fff; box-shadow:0 8px 18px rgba(47,136,255,0.3); } [data-theme="dark"] .sb-mark{ background:var(--d-blue); color:#fff; } /* ============================ 6. SESSION — PLAN (sb) ================= */ [data-theme="dark"] body.session-b{ background:var(--d-canvas); } [data-theme="dark"] .sb-meta-eyebrow, [data-theme="dark"] .sb-hero-eyebrow, [data-theme="dark"] .sb-card-sub, [data-theme="dark"] .sb-phase-sub, [data-theme="dark"] .sb-nav-kicker{ color:var(--d-text-2); } [data-theme="dark"] .sb-meta-title, [data-theme="dark"] .sb-hero-title, [data-theme="dark"] .sb-card-title, [data-theme="dark"] .sb-phase-title, [data-theme="dark"] .sb-detail-lbl, [data-theme="dark"] .sb-nav-name{ color:var(--d-text); } [data-theme="dark"] .sb-detail-body{ color:var(--d-text-body); } [data-theme="dark"] .sb-card-mins, [data-theme="dark"] .sb-phase-mins, [data-theme="dark"] .sb-detail-icon, [data-theme="dark"] .sb-nav-arrow, [data-theme="dark"] .sb-nav-link, [data-theme="dark"] .sb-card-num-text{ color:var(--d-blue-soft); } /* glass phase cards → dark surfaces */ [data-theme="dark"] .sb-phase-card{ background:var(--d-s1); border:1px solid var(--d-line); box-shadow:var(--d-shadow-sm); } [data-theme="dark"] .sb-phase-card.is-expanded{ border-color:var(--d-line2); box-shadow:var(--d-shadow); } [data-theme="dark"] .sb-phase-num{ background:var(--d-s2); color:var(--d-blue-soft); } [data-theme="dark"] .sb-phase-card.is-expanded .sb-phase-num{ background:linear-gradient(135deg,#2F88FF,#1E5FC0); color:#fff; } [data-theme="dark"] .sb-phase-chev{ color:var(--d-text-3); } [data-theme="dark"] .sb-phase-card.is-expanded .sb-phase-chev{ color:var(--d-text); } [data-theme="dark"] .sb-segmented{ background:var(--d-s2); border:1px solid var(--d-line); } [data-theme="dark"] .sb-segmented-btn{ color:var(--d-text-3); } [data-theme="dark"] .sb-segmented-btn.is-active{ background:var(--d-s3); color:var(--d-text); box-shadow:none; } /* swap / nav / tabs glass → dark */ [data-theme="dark"] .sb-swap-link, [data-theme="dark"] .sb-phase-swap, [data-theme="dark"] .sb-nav-btn, [data-theme="dark"] .sb-tab, [data-theme="dark"] .sb-session-nav-btn{ background:var(--d-s2); border:1px solid var(--d-line2); color:var(--d-blue-soft); } [data-theme="dark"] .sb-session-nav-eyebrow{ color:var(--d-text-3); } [data-theme="dark"] .sb-session-nav-name{ color:var(--d-text); } [data-theme="dark"] .sb-plan-done{ background:var(--d-s2); border:1px solid var(--d-line2); color:var(--d-text); } [data-theme="dark"] .sb-complete-mini{ border-color:var(--d-blue); color:var(--d-blue-soft); } /* ============================ 7. LIBRARY (lib2) ===================== */ [data-theme="dark"] body.lib2-active{ background:var(--d-canvas); } [data-theme="dark"] .lib2-b{ background:var(--d-canvas); } [data-theme="dark"] .lib2-row-tile{ background:var(--d-s2); color:var(--d-blue-soft); } [data-theme="dark"] .lib2-row-chev{ color:var(--d-text-3); } [data-theme="dark"] .lib2-back{ color:var(--d-blue-soft); } [data-theme="dark"] .lib2-searchbar, [data-theme="dark"] .lib2-search-field{ background:var(--d-s2); border:1px solid var(--d-line); } [data-theme="dark"] .lib2-chip{ background:var(--d-s2); border:1px solid var(--d-line); color:var(--d-text-2); } [data-theme="dark"] .lib2-chip.is-active{ background:var(--d-s3); color:var(--d-text); border-color:var(--d-line2); } [data-theme="dark"] .lib2-card{ background:var(--d-s1); border:1px solid var(--d-line); } [data-theme="dark"] .lib2-thumb{ background:repeating-linear-gradient(45deg,#1A1A1D 0 6px,#202024 6px 12px); } [data-theme="dark"] .lib2-thumb::before{ border:1px dashed rgba(255,255,255,0.10); } [data-theme="dark"] .lib2-pill{ background:var(--d-s2); color:var(--d-text-2); } [data-theme="dark"] .lib2-pill-phase{ background:rgba(47,136,255,0.14); color:var(--d-blue-soft); } [data-theme="dark"] .lib2-save{ color:var(--d-text-3); } [data-theme="dark"] .lib2-save.is-saved{ color:var(--d-blue); } [data-theme="dark"] .lib2-soon{ background:rgba(216,182,90,0.14); color:var(--d-gold); } /* ============================ 8. GLOSSARY (glx) ===================== */ [data-theme="dark"] body.glx-active{ background:var(--d-canvas); } [data-theme="dark"] .glx-b{ background:var(--d-canvas); } [data-theme="dark"] .glx-eyebrow, [data-theme="dark"] .glx-detail-cat, [data-theme="dark"] .glx-back{ color:var(--d-blue-soft); } [data-theme="dark"] .glx-search-field{ background:var(--d-s2); border:1px solid var(--d-line); } [data-theme="dark"] .glx-seg{ background:var(--d-s2); border:1px solid var(--d-line); } [data-theme="dark"] .glx-seg-btn{ color:var(--d-text-2); } [data-theme="dark"] .glx-seg-btn.is-active{ background:var(--d-s3); color:var(--d-text); box-shadow:none; } /* feature card: blue gradient → flat dark */ [data-theme="dark"] .glx-feature{ color:#fff; background:radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,0.05), transparent 55%), linear-gradient(158deg,#18181C 0%,#101012 100%); border:1px solid var(--d-line2); box-shadow:var(--d-shadow-sm); } [data-theme="dark"] .glx-feature-label{ color:var(--d-blue-soft); } [data-theme="dark"] .glx-feature-tile{ background:var(--d-s3); color:var(--d-text); } /* sticky letter header bg → dark */ [data-theme="dark"] .glx-letter{ color:var(--d-blue-soft); background:linear-gradient(180deg,var(--d-canvas) 72%,rgba(10,10,11,0)); } [data-theme="dark"] .glx-row-tcqj{ color:var(--d-blue-soft); background:rgba(47,136,255,0.14); } [data-theme="dark"] .glx-cat-count{ background:var(--d-s2); color:var(--d-text-2); } [data-theme="dark"] .glx-chip{ background:var(--d-s2); border:1px solid var(--d-line); color:var(--d-text-2); } [data-theme="dark"] .glx-chip.is-active{ background:var(--d-s3); color:var(--d-text); border-color:var(--d-line2); } [data-theme="dark"] .glx-rel{ background:var(--d-s1); border:1px solid var(--d-line); } [data-theme="dark"] .glx-rel-thumb{ background:repeating-linear-gradient(45deg,#1A1A1D 0 6px,#202024 6px 12px); } [data-theme="dark"] .glx-rel-thumb::before{ border:1px dashed rgba(255,255,255,0.10); } [data-theme="dark"] .glx-rel-chev, [data-theme="dark"] .glx-scrub-l{ color:var(--d-text-3); } /* ============================ 9. NOTES (notes2) ===================== */ [data-theme="dark"] body.notes2-active{ background:var(--d-canvas); } [data-theme="dark"] .notes2-capture, [data-theme="dark"] .notes2-card, [data-theme="dark"] .po2-pcard, [data-theme="dark"] .po2-assess{ background:var(--d-s1); border:1px solid var(--d-line); } [data-theme="dark"] .notes2-card:active{ background:var(--d-s2); } [data-theme="dark"] .notes2-card-snip{ background:rgba(47,136,255,0.14); color:var(--d-blue-soft); } [data-theme="dark"] .notes2-chip.is-active{ background:var(--d-s3); color:var(--d-text); border-color:var(--d-line2); } [data-theme="dark"] .notes2-post, [data-theme="dark"] .notes2-fab{ background:var(--d-blue); color:#fff; } [data-theme="dark"] .notes2-tool.is-recording{ background:rgba(224,114,106,0.16); color:#E0726A; } /* ============================ 10. ANALYTICS (an) ==================== */ [data-theme="dark"] body.analytics-active{ background:var(--d-canvas); --an-blue:var(--d-blue); --an-blue-bright:var(--d-blue-soft); --an-blue-deep:var(--d-blue-soft); --an-ink:var(--d-text); --an-ink2:var(--d-text-body); --an-quiet:var(--d-text-3); --an-line:var(--d-line); } [data-theme="dark"] .an-loading, [data-theme="dark"] .an-empty, [data-theme="dark"] .an-sec-h, [data-theme="dark"] .an-tl, [data-theme="dark"] .an-pp, [data-theme="dark"] .an-rs{ color:var(--d-text-2); } [data-theme="dark"] .an-sec-note, [data-theme="dark"] .an-tsub, [data-theme="dark"] .an-bx, [data-theme="dark"] .an-mp, [data-theme="dark"] .an-pchev{ color:var(--d-text-3); } [data-theme="dark"] .an-back{ background:var(--d-s2); color:var(--d-text); box-shadow:none; } [data-theme="dark"] .an-card, [data-theme="dark"] .an-tile, [data-theme="dark"] .an-ecell, [data-theme="dark"] .an-pcard{ background:var(--d-s1); border:1px solid var(--d-line); } /* hero: keep a blue gradient but anchor it deep */ [data-theme="dark"] .an-hero{ background:radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,0.06) 0%, transparent 48%), linear-gradient(158deg,#1C4FA0 0%,#163C7E 100%); box-shadow:var(--d-shadow); } [data-theme="dark"] .an-bar{ background:linear-gradient(180deg,var(--d-blue-soft),var(--d-blue)); } [data-theme="dark"] .an-bar.zero{ background:var(--d-s2); } [data-theme="dark"] .an-ptrack, [data-theme="dark"] .an-mtrack{ background:var(--d-s2); } [data-theme="dark"] .an-mfill{ background:linear-gradient(90deg,var(--d-blue-soft),var(--d-blue)); } [data-theme="dark"] .an-ctr, [data-theme="dark"] .an-rdot, [data-theme="dark"] .an-cp.done .an-cpd{ color:var(--d-green); } [data-theme="dark"] .an-cp.done .an-cpd{ background:var(--d-green); border-color:var(--d-green); } [data-theme="dark"] .an-cpd{ border-color:var(--d-line2); } [data-theme="dark"] .an-chip{ background:var(--d-s2); border:1px solid var(--d-line); color:var(--d-text-body); } [data-theme="dark"] .an-chip b{ color:var(--d-blue-soft); } [data-theme="dark"] .an-date-txt{ color:var(--d-blue-soft); background:rgba(47,136,255,0.12); } [data-theme="dark"] .an-date-txt.unset{ color:var(--d-text-3); background:var(--d-s2); } /* ============================ 11. TRAINING / PROGRAM (curr/mv) ====== */ [data-theme="dark"] body.training-v2{ background:var(--d-canvas); } [data-theme="dark"] .v2-page, [data-theme="dark"] .curr-title, [data-theme="dark"] .curr-row-title, [data-theme="dark"] .mv-section-title{ color:var(--d-text); } [data-theme="dark"] .curr-eyebrow, [data-theme="dark"] .curr-summary, [data-theme="dark"] .curr-row-desc, [data-theme="dark"] .curr-row-count, [data-theme="dark"] .curr-overview-label-note, [data-theme="dark"] .mv-section-count{ color:var(--d-text-2); } [data-theme="dark"] .mv-section-chev{ color:var(--d-text-3); } [data-theme="dark"] .curr-hint, [data-theme="dark"] .curr-overview-label-kicker, [data-theme="dark"] .mv-section-card.is-expanded .mv-section-chev{ color:var(--d-blue-soft); } /* glass rows / cards → dark surfaces */ [data-theme="dark"] .curr-row, [data-theme="dark"] .mv-section-card{ background:var(--d-s1); border:1px solid var(--d-line); box-shadow:var(--d-shadow-sm); color:var(--d-text); } [data-theme="dark"] .curr-row:active{ background:var(--d-s2); } [data-theme="dark"] .curr-row.is-current{ background:var(--d-s1); border-color:var(--d-line2); } [data-theme="dark"] .curr-tile, [data-theme="dark"] .mv-section-icon{ background:var(--d-s2); color:var(--d-blue-soft); } [data-theme="dark"] .curr-seg{ background:rgba(255,255,255,0.10); } [data-theme="dark"] .curr-overview-label{ border-top-color:var(--d-line); } /* ============================ 12. DRILL DETAIL (dd) ================= */ [data-theme="dark"] .dd-source{ background:rgba(47,136,255,0.08); border:1px solid rgba(47,136,255,0.20); color:var(--d-blue-soft); } [data-theme="dark"] .dd-source strong{ color:var(--d-text); } [data-theme="dark"] .dd-source-pip{ color:var(--d-blue-soft); } [data-theme="dark"] .dd-card .dc-title{ color:var(--d-text); } [data-theme="dark"] .dd-edit-icon{ background:var(--d-s2); color:var(--d-blue-soft); } [data-theme="dark"] .dd-edit-btn{ background:var(--d-s2); border:1px solid var(--d-line2); color:var(--d-blue-soft); } [data-theme="dark"] .dd-pip-touch{ background:rgba(230,180,90,0.18); color:#E6B45A; } [data-theme="dark"] .dd-pip-courage{ background:rgba(229,128,136,0.18); color:#E58088; } [data-theme="dark"] .dd-pip-joy{ background:rgba(197,139,224,0.18); color:#C58BE0; } /* ============================ 13. HOW WE PLAY / PARENT GUIDE (hwp) == */ [data-theme="dark"] .hwp-head h1, [data-theme="dark"] .hwp-word-n, [data-theme="dark"] .hwp-m-h, [data-theme="dark"] .hwp-risk-line, [data-theme="dark"] .hwp-nn-i, [data-theme="dark"] .hwp-become span{ color:var(--d-text); } [data-theme="dark"] .hwp-word-d, [data-theme="dark"] .hwp-card p, [data-theme="dark"] .hwp-moment li, [data-theme="dark"] .hwp-note strong{ color:var(--d-text-body); } [data-theme="dark"] .hwp-sec, [data-theme="dark"] .hwp-note{ color:var(--d-text-2); } [data-theme="dark"] .hwp-back{ background:var(--d-s2); color:var(--d-text); } [data-theme="dark"] .hwp-word, [data-theme="dark"] .hwp-card, [data-theme="dark"] .hwp-moment, [data-theme="dark"] .hwp-nn-i{ background:var(--d-s1); border:1px solid var(--d-line); } [data-theme="dark"] .hwp-nn-n{ background:var(--d-blue); color:#fff; } /* keep the moment accent colors (they encode meaning) but on dark cards */ [data-theme="dark"] .hwp-hero{ background:linear-gradient(158deg,#1C4FA0,#163C7E); } [data-theme="dark"] .hwp-why{ background:linear-gradient(158deg,#161618,#202024); } /* ============================ 14. SESSION CONTENT BLOCKS ============ */ /* These use global tokens (handled by §0) plus a few hardcoded literals. */ [data-theme="dark"] .session-fragment .voice-say li, [data-theme="dark"] .session-fragment .voice-say p, [data-theme="dark"] .session-fragment .voice-tip li, [data-theme="dark"] .session-fragment .voice-tip p, [data-theme="dark"] .session-fragment .voice-watch li, [data-theme="dark"] .session-fragment .voice-watch p, [data-theme="dark"] .session-fragment .voice-ask li, [data-theme="dark"] .session-fragment .voice-ask p, [data-theme="dark"] .session-fragment .s-cues li{ color:var(--d-text-body); } /* neutralise the coloured left accent in dark (matches reviewed mockups) */ [data-theme="dark"] .session-fragment .voice, [data-theme="dark"] .session-fragment .voice-say, [data-theme="dark"] .session-fragment .voice-tip, [data-theme="dark"] .session-fragment .voice-watch, [data-theme="dark"] .session-fragment .voice-ask{ border-left-color:var(--d-line2); } /* pitch diagram turf → dark green (white/gold strokes still read) */ [data-theme="dark"] .session-fragment .pitch-card .pitch{ background:#1F2E26; } /* ============================ 15. GEAR SHEET + APPEARANCE CONTROL ==== */ /* (a) base styles for the NEW appearance control — apply in BOTH themes */ .v3-appearance{ padding:10px 4px 4px; } .v3-appearance-row{ display:flex; align-items:center; gap:12px; padding:6px 2px 10px; } .v3-appearance-row .v3-sheet-link-name{ font-weight:600; } .v3-theme-seg{ display:flex; gap:4px; padding:4px; border-radius:12px; background:var(--bg-elev,#F1EEE6); } .v3-theme-opt{ flex:1 1 0; padding:9px 0; border:0; border-radius:9px; background:transparent; font:inherit; font-size:13.5px; font-weight:600; color:var(--text-2,#6B6B7B); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .18s ease, color .18s ease; } .v3-theme-opt.is-active{ background:#fff; color:var(--text,#1F1F2E); box-shadow:0 1px 3px rgba(20,24,40,0.12); } /* (b) dark overrides for the sheet + the appearance control */ [data-theme="dark"] .v3-program-sheet{ background:var(--d-s1); border-top:1px solid var(--d-line2); box-shadow:0 -20px 60px rgba(0,0,0,0.6); } [data-theme="dark"] .v3-sheet-grab{ background:var(--d-line2); } [data-theme="dark"] .v3-sheet-link{ color:var(--d-text); } [data-theme="dark"] .v3-sheet-link:active{ background:var(--d-s2); } [data-theme="dark"] .v3-sheet-link-icon{ background:var(--d-s2); color:var(--d-blue-soft); } [data-theme="dark"] .v3-sheet-link-name{ color:var(--d-text); } [data-theme="dark"] .v3-sheet-link-meta{ color:var(--d-text-2); } [data-theme="dark"] .v3-sheet-divider{ background:var(--d-line); } [data-theme="dark"] .v3-sheet-title{ color:var(--d-text-3); } [data-theme="dark"] .v3-program-item{ color:var(--d-text); } [data-theme="dark"] .v3-program-item.is-current{ background:var(--d-s2); } [data-theme="dark"] .v3-program-name{ color:var(--d-text); } [data-theme="dark"] .v3-program-meta{ color:var(--d-text-2); } [data-theme="dark"] .v3-theme-seg{ background:var(--d-s2); border:1px solid var(--d-line); } [data-theme="dark"] .v3-theme-opt{ color:var(--d-text-2); } [data-theme="dark"] .v3-theme-opt.is-active{ background:var(--d-s3); color:var(--d-text); box-shadow:none; } /* ============================ 16. REAL-DEVICE FIXES (round 2) ======== Issues caught testing the deployed dark build on an iPhone: search-field chrome, near-black headings, white cards, plan-mode subtext, the stepper, and the checkbox-looking objective bullets. */ /* (a) Search inputs — kill the native iOS field chrome (the grey box). color-scheme:dark makes WebKit paint the control's native background even though CSS sets it transparent; appearance:none removes it so the bar shows only the typed text on its dark container. */ [data-theme="dark"] .search input, [data-theme="dark"] .lib2-search-input, [data-theme="dark"] .glx-search-input, [data-theme="dark"] .notes2-input{ -webkit-appearance:none; appearance:none; background:transparent; color:var(--d-text); } /* (b) Training page (.ped-*) + month overview (.mv2-*) — these scopes were not remapped, so titles/tiles rendered near-black or white. Belt-and- suspenders explicit overrides on the visible elements. */ [data-theme="dark"] .ped-title, [data-theme="dark"] .mv2-title, [data-theme="dark"] .mv2-srow-name{ color:var(--d-text); } [data-theme="dark"] .ped-prog-label b{ color:var(--d-text); } [data-theme="dark"] .mv2-focus, [data-theme="dark"] .mv2-body, [data-theme="dark"] .mv2-srow-meta, [data-theme="dark"] .mv2-obj-text, [data-theme="dark"] .mv2-progress-label, [data-theme="dark"] .ped-prog-label{ color:var(--d-text-2); } [data-theme="dark"] .ped-prog-track, [data-theme="dark"] .mv2-progress-track{ background:rgba(255,255,255,0.10); } /* white / light cards → soft dark surfaces (consistent with the rest) */ [data-theme="dark"] .mv2-srow{ background:var(--d-s1); border-color:var(--d-line); } [data-theme="dark"] .mv2-srow:active{ background:var(--d-s2); } [data-theme="dark"] .mv2-srow-tile{ background:var(--d-s2); color:var(--d-text-3); } [data-theme="dark"] .mv2-srow.is-done .mv2-srow-tile{ background:rgba(47,136,255,0.16); color:var(--d-blue-soft); } [data-theme="dark"] .mv2-srow.is-next .mv2-srow-tile{ background:var(--d-blue); color:#fff; } [data-theme="dark"] .mv2-row-chev{ color:var(--d-text-3); } [data-theme="dark"] .mv2-photo{ background:repeating-linear-gradient(45deg,#1A1A1D 0 8px,#202024 8px 16px); } [data-theme="dark"] .mv2-photo::before{ border-color:rgba(255,255,255,0.10); } /* "Now Training" featured card → keep a gentle blue highlight, not solid white */ [data-theme="dark"] .ped-featured{ background:rgba(47,136,255,0.08); border:1px solid rgba(47,136,255,0.18); } /* key-skill pills → blue-tinted, not white */ [data-theme="dark"] .mv2-skill{ background:rgba(47,136,255,0.14); color:var(--d-blue-soft); } /* (c) Objective bullets — they read as dead checkboxes. Make them small, clearly-decorative dots (filled blue once an objective is met). */ [data-theme="dark"] .mv2-obj-check{ width:7px; height:7px; margin-top:7px; border:0; background:var(--d-text-3); box-shadow:none; } [data-theme="dark"] .mv2-obj-check svg{ display:none; } [data-theme="dark"] .mv2-obj.is-met .mv2-obj-check{ background:var(--d-blue); } /* (d) Session PLAN (.sb-*) — detail/callout text was hardcoded #1c1426 (invisible on dark). Make labels blue, values readable body text. */ [data-theme="dark"] .sb-phase-detail-lbl, [data-theme="dark"] .sb-callout-lbl{ color:var(--d-blue-soft); } [data-theme="dark"] .sb-phase-detail-body, [data-theme="dark"] .sb-callout-body{ color:var(--d-text-body); } [data-theme="dark"] .sb-callout{ background:rgba(47,136,255,0.06); } /* the LENGTH stepper rendered as white pills */ [data-theme="dark"] .sb-stepper{ background:var(--d-s2); } [data-theme="dark"] .sb-step{ background:var(--d-s3); border:1px solid var(--d-line2); color:var(--d-text); } [data-theme="dark"] .sb-dur-val, [data-theme="dark"] .sb-dur-input{ color:var(--d-text); } [data-theme="dark"] .sb-dur-unit{ color:var(--d-text-2); } /* ============================ 17. REAL-DEVICE FIXES (round 3) ======== More iPhone testing feedback: search focus-fill, unreadable voice blocks, video pills, settings-sheet scroll, white pillar cards, phase-name colours, a floating pill nav, and an Edit-mode toggle. */ /* (a) Search/notes inputs — the native field chrome was still painting on focus (whole field went light). Force it off in every state. */ [data-theme="dark"] .search input, [data-theme="dark"] .search input:focus, [data-theme="dark"] .lib2-search-input, [data-theme="dark"] .lib2-search-input:focus, [data-theme="dark"] .glx-search-input, [data-theme="dark"] .glx-search-input:focus, [data-theme="dark"] .notes2-input, [data-theme="dark"] .notes2-input:focus{ -webkit-appearance:none; appearance:none; background:transparent !important; background-color:transparent !important; border:0; outline:none; box-shadow:none; color:var(--d-text); } /* (b) Voice blocks (Coach Says / Guided Questions / Tip / Watch) — the text was hardcoded dark green/blue in app.css. Override regardless of the .session-fragment ancestor so it works in plan/run/drill contexts. */ [data-theme="dark"] .voice-say li, [data-theme="dark"] .voice-say p, [data-theme="dark"] .voice-ask li, [data-theme="dark"] .voice-ask p, [data-theme="dark"] .voice-tip li, [data-theme="dark"] .voice-tip p, [data-theme="dark"] .voice-watch li,[data-theme="dark"] .voice-watch p, [data-theme="dark"] .s-cues li{ color:var(--d-text-body); } /* (c) Video example pills — light-grey pills with dark text → dark pills. */ [data-theme="dark"] .v3-vid-edit-btn{ background:rgba(47,136,255,0.12); border:1px solid rgba(47,136,255,0.22); color:var(--d-blue-soft); -webkit-backdrop-filter:none; backdrop-filter:none; } [data-theme="dark"] .v3-vid-link{ color:var(--d-blue-soft); background:var(--d-s2); border:1px solid var(--d-line); padding:6px 12px; border-radius:999px; } /* (d) TCQJ pillar cards (Program Overview / How We Play) — solid-white card. */ [data-theme="dark"] .po2-pillar{ background:var(--d-s1); border-color:var(--d-line); } [data-theme="dark"] .po2-pillar-title{ color:var(--d-text); } [data-theme="dark"] .po2-pillar-line{ color:var(--d-text-2); } /* (e) Phase-name colour-coding in dark (kind class added on .sb-phase-card). Tints the number badge + colours the phase title per kind. */ [data-theme="dark"] .sb-phase-card.kind-arrival .sb-phase-num{ background:var(--k-arrival-bg); color:var(--k-arrival); } [data-theme="dark"] .sb-phase-card.kind-warmup .sb-phase-num{ background:var(--k-warmup-bg); color:var(--k-warmup); } [data-theme="dark"] .sb-phase-card.kind-technical .sb-phase-num{ background:var(--k-technical-bg); color:var(--k-technical); } [data-theme="dark"] .sb-phase-card.kind-game .sb-phase-num{ background:var(--k-game-bg); color:var(--k-game); } [data-theme="dark"] .sb-phase-card.kind-cooldown .sb-phase-num{ background:var(--k-cooldown-bg); color:var(--k-cooldown); } [data-theme="dark"] .sb-phase-card.kind-homework .sb-phase-num{ background:var(--k-homework-bg); color:var(--k-homework); } [data-theme="dark"] .sb-phase-card.kind-arrival .sb-phase-title{ color:var(--k-arrival); } [data-theme="dark"] .sb-phase-card.kind-warmup .sb-phase-title{ color:var(--k-warmup); } [data-theme="dark"] .sb-phase-card.kind-technical .sb-phase-title{ color:var(--k-technical); } [data-theme="dark"] .sb-phase-card.kind-game .sb-phase-title{ color:var(--k-game); } [data-theme="dark"] .sb-phase-card.kind-cooldown .sb-phase-title{ color:var(--k-cooldown); } [data-theme="dark"] .sb-phase-card.kind-homework .sb-phase-title{ color:var(--k-homework); } /* (f) Bottom nav stays FLUSH / edge-to-edge at the very bottom in dark mode, same as light — only the colours change (see §1). The earlier floating-pill treatment was removed: it detached the bar and lifted it off the bottom edge, which read as the nav "creeping up" the page. */ /* ---- The following apply in BOTH themes (new components / bug fixes) ---- */ /* (g) Settings sheet — make it scrollable so the top items aren't cut off now that there are many. (Augments app.css; no existing rule changed.) */ .v3-program-sheet{ max-height:84vh; overflow-y:auto; -webkit-overflow-scrolling:touch; } /* (h) PER-CARD Edit toggle: each phase card has its own "Edit phase" button (inside the card body) that reveals that card's rename / length / remove / swap controls — so you can edit any phase without scrolling to the top. */ .sb-phase-card:not(.is-editing) .sb-phase-rename-row, .sb-phase-card:not(.is-editing) .sb-phase-tools, .sb-phase-card:not(.is-editing) .sb-phase-swap, .sb-phase-card:not(.is-editing) .sb-phase-addafter{ display:none !important; } .sb-phase-addafter{ display:inline-flex; align-items:center; gap:7px; margin-top:6px; padding:9px 14px; border-radius:12px; background:transparent; border:1px dashed var(--border-strong,rgba(0,0,0,0.18)); color:var(--text-2,#6B6B7B); font:inherit; font-size:13px; font-weight:600; text-decoration:none; cursor:pointer; } .sb-phase-addafter svg{ width:15px; height:15px; } [data-theme="dark"] .sb-phase-addafter{ border-color:var(--d-line2); color:var(--d-blue-soft); } .sb-phase-edit-bar{ display:flex; justify-content:flex-end; margin:2px 0 12px; } .sb-card-edit{ display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; cursor:pointer; background:transparent; border:1px solid var(--border-strong,rgba(0,0,0,0.10)); color:var(--text-2,#6B6B7B); font:inherit; font-size:12.5px; font-weight:600; } .sb-card-edit svg{ width:14px; height:14px; } .sb-phase-card.is-editing .sb-card-edit{ background:var(--accent-bg,rgba(31,31,46,0.06)); border-color:var(--accent,#1f1f2e); color:var(--text,#1f1f2e); } [data-theme="dark"] .sb-card-edit{ border-color:var(--d-line2); color:var(--d-text-2); } [data-theme="dark"] .sb-phase-card.is-editing .sb-card-edit{ background:rgba(47,136,255,0.14); border-color:var(--d-blue); color:var(--d-blue-soft); } /* ============================ 18. REAL-DEVICE FIXES (round 4) ======== */ /* (a) Callout / steps body text — the inner .v3-voice-list / .v3-step-text carry their OWN dark colour and override the .cm-says-body / .sb-callout-body wrappers I'd already fixed. This is the real cause of the unreadable Coach Says / Guided Questions / Reflection / Steps text. */ [data-theme="dark"] .v3-voice-list, [data-theme="dark"] .v3-voice-list li, [data-theme="dark"] .v3-step-text{ color:var(--d-text-body); } /* (b) Inputs — nuke the iOS native field chrome that was still drawing a box on Glossary/Library search and the white/grey boxes on the custom-drill form. */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input:not([type]), [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .select{ -webkit-appearance:none !important; appearance:none !important; } /* search inputs: only the typed text, fully transparent in every state */ [data-theme="dark"] .search input, [data-theme="dark"] .search input:focus, [data-theme="dark"] .lib2-search-input, [data-theme="dark"] .lib2-search-input:focus, [data-theme="dark"] .glx-search-input, [data-theme="dark"] .glx-search-input:focus, [data-theme="dark"] .notes2-input, [data-theme="dark"] .notes2-input:focus{ background:transparent !important; border:0 !important; outline:none !important; box-shadow:none !important; color:var(--d-text); caret-color:var(--d-blue); } /* form fields (New Custom Drill, player forms…) → dark filled, subtle border */ [data-theme="dark"] .field input, [data-theme="dark"] .field textarea{ background:var(--d-s2); border:1px solid var(--d-line2); color:var(--d-text); } [data-theme="dark"] .field select, [data-theme="dark"] .select{ background-color:var(--d-s2); border:1px solid var(--d-line2); color:var(--d-text); } [data-theme="dark"] .field input:focus, [data-theme="dark"] .field textarea:focus, [data-theme="dark"] .field select:focus, [data-theme="dark"] .select:focus{ border-color:var(--d-blue); box-shadow:0 0 0 3px rgba(47,136,255,0.18); outline:none; } [data-theme="dark"] .field input::placeholder, [data-theme="dark"] .field textarea::placeholder{ color:var(--d-text-3); } /* (c) Library drill phase pills — colour-code by kind to match the session phases (kind-${kind} class added on the pill in app.js). */ [data-theme="dark"] .lib2-pill-phase.kind-arrival{ background:var(--k-arrival-bg); color:var(--k-arrival); } [data-theme="dark"] .lib2-pill-phase.kind-warmup{ background:var(--k-warmup-bg); color:var(--k-warmup); } [data-theme="dark"] .lib2-pill-phase.kind-technical{ background:var(--k-technical-bg); color:var(--k-technical); } [data-theme="dark"] .lib2-pill-phase.kind-game{ background:var(--k-game-bg); color:var(--k-game); } [data-theme="dark"] .lib2-pill-phase.kind-cooldown{ background:var(--k-cooldown-bg); color:var(--k-cooldown); } [data-theme="dark"] .lib2-pill-phase.kind-homework{ background:var(--k-homework-bg); color:var(--k-homework); } [data-theme="dark"] .lib2-pill-phase.kind-fungame{ background:var(--k-fungame-bg); color:var(--k-fungame); } /* ============================ 19. NOTES swipe-to-delete + FAB clearance ===== */ /* iOS-style swipe-left row (both themes). The opaque card slides left over a red trash action revealed behind it. */ .notes2-swipe{ position:relative; overflow:hidden; border-radius:16px; } .notes2-swipe .notes2-card{ position:relative; z-index:1; touch-action:pan-y; will-change:transform; transition:transform .22s cubic-bezier(0.16,1,0.3,1); } .notes2-swipe-del{ position:absolute; top:0; right:0; bottom:0; width:76px; z-index:0; display:flex; align-items:center; justify-content:center; background:#FF3B30; color:#fff; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; } .notes2-swipe-del svg{ width:23px; height:23px; } [data-theme="dark"] .notes2-swipe-del{ background:#FF453A; } /* iOS dark-mode red */ /* FAB uses its base position (just above the flush tab bar). No dark override needed now that the nav is flush again — the earlier +50px/+170px bumps only existed to clear the removed floating-pill nav. */ /* ============================ 20. PLAYER DETAIL PAGE (legacy classes) ====== */ [data-theme="dark"] .expect-tile{ background:var(--d-s1); border:1px solid var(--d-line); } [data-theme="dark"] .empty{ background:var(--d-s1); border-color:var(--d-line2); color:var(--d-text-3); } [data-theme="dark"] .session-card, [data-theme="dark"] .saved-session{ background:var(--d-s1); border:1px solid var(--d-line); } [data-theme="dark"] .note-form textarea{ background:var(--d-s2); border:1px solid var(--d-line2); color:var(--d-text); -webkit-appearance:none; appearance:none; } [data-theme="dark"] .note-form textarea::placeholder{ color:var(--d-text-3); } [data-theme="dark"] .note-item{ border-bottom:1px solid var(--d-line); } /* Individual Development Plan card + form */ [data-theme="dark"] .idp-item{ background:var(--d-s1); border:1px solid var(--d-line); box-shadow:none; } [data-theme="dark"] .idp-area{ color:var(--d-text-3); } [data-theme="dark"] .idp-goal{ color:var(--d-text); } [data-theme="dark"] .idp-meta, [data-theme="dark"] .idp-tip{ color:var(--d-text-2); } [data-theme="dark"] .idp-del{ color:var(--d-text-3); } [data-theme="dark"] .idp-in{ background:var(--d-s2); border:1px solid var(--d-line2); color:var(--d-text); -webkit-appearance:none; appearance:none; } [data-theme="dark"] .idp-in::placeholder{ color:var(--d-text-3); } [data-theme="dark"] .idp-add-btn{ background:var(--d-blue); color:#fff; } [data-theme="dark"] .idp-nudge{ background:rgba(216,182,90,0.14); color:var(--d-gold); } [data-theme="dark"] .idp-rag.rag-red{ background:rgba(224,114,106,0.18); color:#E0726A; } [data-theme="dark"] .idp-rag.rag-amber{ background:rgba(224,178,92,0.18); color:#E0B25C; } [data-theme="dark"] .idp-rag.rag-green{ background:rgba(52,208,88,0.18); color:var(--d-green); } /* ============================ 21. LEGACY LIBRARY — pick / swap / ADD-PHASE == The pick / swap / add-phase drill picker (and the Saved view) use the older renderLibrary() markup — glass cards with hardcoded rgba(255,255,255,…) backgrounds and dark-ink text that never got a dark pass, so on the black canvas they render as washed light-gray panels with invisible text. Re-skin the whole flow to the calm-monochrome system so "Add a phase" matches the modern Library (lib2). Light mode untouched (every rule is dark-scoped). */ /* ── Drill result cards ── (glass-app-scoped so they beat body.glass-app) */ [data-theme="dark"] body.glass-app .drill-card, [data-theme="dark"] .drill-card{ background:var(--d-s1); border:1px solid var(--d-line); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; } [data-theme="dark"] body.glass-app .drill-card:active, [data-theme="dark"] .drill-card:active{ background:var(--d-s2); } [data-theme="dark"] .drill-card .dc-title{ color:var(--d-text); } [data-theme="dark"] .drill-card .dc-meta{ color:var(--d-text-2); } [data-theme="dark"] .drill-card .dc-meta-principles{ color:var(--d-text-body); } [data-theme="dark"] .drill-card .dc-session{ color:var(--d-text-3); } [data-theme="dark"] .drill-card .star{ color:var(--d-text-3); } /* "+" add-to-session control */ [data-theme="dark"] .drill-card .pick-add{ background:rgba(47,136,255,0.16); color:var(--d-blue); } [data-theme="dark"] .results-overflow{ color:var(--d-text-2); } [data-theme="dark"] .results-overflow-hint{ color:var(--d-text-3); } /* ── Category cards (Soccer / Athletic / U.S. Soccer / Game-Based) ── */ [data-theme="dark"] .lib-type-card{ background:var(--d-s1); border:1px solid var(--d-line2); color:var(--d-text); -webkit-backdrop-filter:none; backdrop-filter:none; } [data-theme="dark"] .lib-type-card:active{ background:var(--d-s2); } [data-theme="dark"] .lib-type-icon{ background:rgba(47,136,255,0.14); color:var(--d-blue); } [data-theme="dark"] .lib-type-name{ color:var(--d-text); } [data-theme="dark"] .lib-type-count{ color:var(--d-text-2); } [data-theme="dark"] .lib-type-card.is-active{ background:rgba(47,136,255,0.16); border-color:rgba(47,136,255,0.55); box-shadow:none; color:var(--d-text); } [data-theme="dark"] .lib-type-card.is-active .lib-type-icon{ background:rgba(47,136,255,0.24); color:var(--d-blue-soft); } [data-theme="dark"] .lib-type-card.is-active .lib-type-name{ color:var(--d-text); } [data-theme="dark"] .lib-type-card.is-active .lib-type-count{ color:var(--d-text-2); } /* ── Category landing tiles (browse / saved empty states) ── */ [data-theme="dark"] .lib-cat-tile{ background:var(--d-s1); border:1px solid var(--d-line); box-shadow:none; color:var(--d-text); } [data-theme="dark"] .lib-cat-tile:active{ background:var(--d-s2); } [data-theme="dark"] .lib-cat-tile-count{ color:var(--d-text); } [data-theme="dark"] .lib-cat-tile-label{ color:var(--d-text-2); } /* ── Section-scope toggle (Arrival only / Any section) ── */ [data-theme="dark"] .pick-scope{ background:var(--d-s2); border:1px solid var(--d-line); } [data-theme="dark"] .pick-scope-btn{ color:var(--d-text-2); } [data-theme="dark"] .pick-scope-btn.is-active{ background:var(--d-s3); color:var(--d-text); box-shadow:none; } /* ── Search field — kill the iOS native chrome + white typed text ── */ [data-theme="dark"] .search.nl-search{ background:var(--d-s2); border:1px solid var(--d-line2); } [data-theme="dark"] .search.nl-search:focus-within{ border-color:var(--d-blue); box-shadow:0 0 0 3px rgba(47,136,255,0.20); } [data-theme="dark"] .nl-input{ -webkit-appearance:none; appearance:none; background:transparent; color:var(--d-text); -webkit-text-fill-color:var(--d-text); caret-color:var(--d-blue); } [data-theme="dark"] .nl-input::placeholder{ color:var(--d-text-3); -webkit-text-fill-color:var(--d-text-3); } [data-theme="dark"] .nl-search .icon{ color:var(--d-text-3); } [data-theme="dark"] .nl-status{ color:var(--d-text-2); } /* ── Filters trigger — glass-app-scoped so it beats body.glass-app .filter-trigger ── */ [data-theme="dark"] body.glass-app .filter-trigger, [data-theme="dark"] .filter-trigger{ background:var(--d-s2); border:1px solid var(--d-line2); color:var(--d-text); } /* ── Backup & data page panel (also a glass-app .card surface) ── */ [data-theme="dark"] body.glass-app .backup-panel{ background:var(--d-s1); border:1px solid var(--d-line); box-shadow:none; } /* ── Pick-mode banner ── */ [data-theme="dark"] .pick-banner .lbl{ color:var(--d-blue); } [data-theme="dark"] .pick-banner .msg{ color:var(--d-text-2); } [data-theme="dark"] .pick-banner .msg strong{ color:var(--d-text); } /* ── Inline training-phase chips (Saved view); .is-on keeps its kind color ── */ [data-theme="dark"] .lib-phase-chip{ background:var(--d-s2); border:1px solid var(--d-line); color:var(--d-text-2); -webkit-backdrop-filter:none; backdrop-filter:none; } /* ═══════════════════════════════════════════════════════════════════════ §22 — Bottom-nav float + program-page bottom scrim (dark only) ═══════════════════════════════════════════════════════════════════════ */ /* (a) Keep the bottom nav flush to the very bottom on SHORT pages. Symptom: on low-content routes (e.g. Notes) the tab bar "rises up" and leaves a black gap below it, while on tall/scrolling routes (Home) it sits correctly at the bottom. Cause: with `viewport-fit=cover`, iOS resolves the `html, body { height:100% }` against the SAFE-AREA viewport (excluding the home-indicator inset) on pages that don't scroll, so a `position:fixed; bottom:0` bar lands one safe-area-inset ABOVE the real bottom. `100dvh` is the full visual viewport INCLUDING the safe areas, so forcing it makes every page resolve the same and the nav pins to the true bottom regardless of how much content is on screen. data-theme lives on , so this is dark-only; light mode (app.css) is untouched. */ html[data-theme="dark"], html[data-theme="dark"] body { min-height: 100dvh; } html[data-theme="dark"] .app { min-height: 100dvh; } /* (b) Bottom scrim on the program / training-month list page faded rows out to WHITE (`.ped-scrim` ends at #ffffff) — a glaring white band above the nav in dark mode. Fade into the dark canvas instead. */ [data-theme="dark"] .ped-scrim { background: linear-gradient(180deg, rgba(10,10,11,0), var(--d-canvas)); } /* ═══════════════════════════════════════════════════════════════════════ §23 — Custom Session builder (.form2-page) dark pass The build page hardcodes #fff on the summary card, slot cards, save panel and inputs (app.css .form2-page .* + the body.glass-app .builder-meta glass), so it renders fully light in dark mode. Dark-skin every surface. Specificity must beat `.form2-page .X` (0,2,0) and the `body.glass-app .builder-meta` glass (0,2,1) — hence the data-theme + glass-app / extra-class prefixes. ═══════════════════════════════════════════════════════════════════════ */ /* Summary card: outer is white glass ("silver frame"), inner two stats are #fff */ [data-theme="dark"] body.glass-app .builder-meta{ background:transparent; border:0; box-shadow:none; } [data-theme="dark"] .form2-page .builder-meta > div{ background:var(--d-s1); border:1px solid var(--d-line); } [data-theme="dark"] .form2-page .builder-meta .val{ color:var(--d-blue-soft); } [data-theme="dark"] .form2-page .builder-meta .lbl{ color:var(--d-text-3); } /* Phase slot cards (Arrival / Warm-up / … each `+ Pick a drill`) */ [data-theme="dark"] .form2-page .slot{ background:var(--d-s1); border:1px solid var(--d-line); } /* Save-session panel + its inputs */ [data-theme="dark"] .form2-page .save-panel{ background:var(--d-s1); border:1px solid var(--d-line); } [data-theme="dark"] body.glass-app .form2-page .save-panel input, [data-theme="dark"] body.glass-app .form2-page .save-panel select, [data-theme="dark"] body.glass-app .form2-page .save-panel .select{ background:var(--d-s2); border:1px solid var(--d-line2); color:var(--d-text); -webkit-text-fill-color:var(--d-text); } [data-theme="dark"] .form2-page .save-panel input::placeholder{ color:var(--d-text-3); -webkit-text-fill-color:var(--d-text-3); } /* "Build a custom session" row at the bottom of the month list was dimmed and its subtitle clipped because the fixed 56px .ped-scrim overlapped it. Give the page enough bottom padding that the last row scrolls fully clear of the scrim. */ [data-theme="dark"] .ped-page{ padding-bottom: 96px; }