/* PracticePilot — Adaptive Practice (v0.57.0 premium redesign). Design tokens copied from the v0.56.0 My Weak Areas page (weak-areas.css) so both pages read as ONE product; scoped under this page's own root ID. Theme isolation follows the v0.49.3 two-tier pattern: TIER 1 — every rule is scoped under #ppilot-adaptive-practice-root (specificity 1,x,x beats a theme's bare / .entry-content rules); no bare selectors, no global !important. TIER 2 — every text-bearing element sets its own color, decoration, font-family and margin. The only !important declarations are scoped to this root's own links/buttons (neutralising a theme's own !important hover fade) and the page-only title collapse. Mobile-first; priority never conveyed by color alone (dot + text). */ body.ppilot-adaptive-practice-page .entry-header, body.ppilot-adaptive-practice-page .entry-title, body.ppilot-adaptive-practice-page h1.entry-title, body.ppilot-adaptive-practice-page .page-title, body.ppilot-adaptive-practice-page .wp-block-post-title, body.ppilot-adaptive-practice-page .elementor-widget-theme-page-title { display: none !important; } #ppilot-adaptive-practice-root { --ppap-navy: #0b1f45; --ppap-royal: #2547d0; --ppap-purple: #6d3fd8; --ppap-cyan: #0e7490; --ppap-green: #0f7a55; --ppap-amber: #a14a06; --ppap-red: #b42318; --ppap-ink: #0f172a; --ppap-body: #334155; --ppap-muted: #4b5565; --ppap-line: #e3e8f2; --ppap-bg: #f4f6fb; --ppap-card: #ffffff; --ppap-radius: 20px; --ppap-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06); --ppap-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; display: block; width: 100%; max-width: 1360px; margin: 0 auto 32px; padding: 0; background: transparent; border: 0; border-radius: 0; font-family: var(--ppap-font); font-size: 15px; line-height: 1.5; color: var(--ppap-body); text-align: left; -webkit-font-smoothing: antialiased; } #ppilot-adaptive-practice-root *, #ppilot-adaptive-practice-root *::before, #ppilot-adaptive-practice-root *::after { box-sizing: border-box; } /* ---- TIER 2 baseline ---- */ #ppilot-adaptive-practice-root div, #ppilot-adaptive-practice-root section, #ppilot-adaptive-practice-root article, #ppilot-adaptive-practice-root aside { line-height: inherit; margin: 0; padding: 0; border: 0; font-family: var(--ppap-font); } #ppilot-adaptive-practice-root h1, #ppilot-adaptive-practice-root h2, #ppilot-adaptive-practice-root h3 { font-family: var(--ppap-font); color: var(--ppap-ink); margin: 0; padding: 0; border: 0; text-decoration: none; text-transform: none; letter-spacing: -.01em; line-height: 1.25; font-weight: 700; background: none; } #ppilot-adaptive-practice-root p, #ppilot-adaptive-practice-root span, #ppilot-adaptive-practice-root li, #ppilot-adaptive-practice-root strong, #ppilot-adaptive-practice-root label { font-family: var(--ppap-font); color: inherit; margin: 0; padding: 0; text-decoration: none; text-transform: none; letter-spacing: normal; line-height: inherit; font-size: inherit; background: none; } #ppilot-adaptive-practice-root ul, #ppilot-adaptive-practice-root ol { list-style: none; margin: 0; padding: 0; } #ppilot-adaptive-practice-root li { margin: 0; line-height: inherit; } #ppilot-adaptive-practice-root li::before, #ppilot-adaptive-practice-root li::marker { content: none; color: transparent; } #ppilot-adaptive-practice-root a, #ppilot-adaptive-practice-root a:visited, #ppilot-adaptive-practice-root a:hover, #ppilot-adaptive-practice-root a:focus, #ppilot-adaptive-practice-root a:active { text-decoration: none; border-bottom: 0; box-shadow: none; font-family: var(--ppap-font); opacity: 1 !important; filter: none !important; } #ppilot-adaptive-practice-root button, #ppilot-adaptive-practice-root button:hover, #ppilot-adaptive-practice-root button:focus { font-family: var(--ppap-font); text-transform: none; letter-spacing: normal; box-shadow: none; text-decoration: none; opacity: 1 !important; filter: none !important; } #ppilot-adaptive-practice-root svg { display: inline-block; vertical-align: middle; max-width: 100%; overflow: visible; } #ppilot-adaptive-practice-root .ppap-icon { width: 20px; height: 20px; flex: 0 0 auto; } #ppilot-adaptive-practice-root :focus { outline: none; } #ppilot-adaptive-practice-root :focus-visible { outline: 3px solid #2547d0; outline-offset: 2px; } /* ---- HERO ---- */ #ppilot-adaptive-practice-root .ppap-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; padding: 24px 20px; margin: 0 0 16px; border-radius: var(--ppap-radius); background: radial-gradient(120% 140% at 100% 0%, #3b2a8c 0%, rgba(59, 42, 140, 0) 55%), linear-gradient(135deg, #0b1f45 0%, #16306a 60%, #1d3f7a 100%); color: #ffffff; } #ppilot-adaptive-practice-root .ppap-hero--image { /* v0.57.1 hotfix (live-screenshot report, real photo background): raised the end-of-gradient stop to the >=0.6 floor the Dashboard hero (command-center.css .ppilot-cc-hero) already proved necessary for white heading text against a bright real photo. This page's title/ sub column has no fixed width, so text can reach well past the old mid stop into the weak tail end. */ background-color: #0b1f45; /* v0.57.2 hotfix: verbatim Dashboard hero gradient (command-center.css .ppilot-cc-hero, owner-confirmed correct), replacing the v0.57.1 page-specific alpha tune that still looked washed out live. */ background-image: linear-gradient(90deg, rgba(7, 15, 34, 0.86) 0%, rgba(9, 24, 54, 0.72) 45%, rgba(11, 31, 69, 0.6) 72%, rgba(11, 31, 69, 0.28) 100%), var(--ppap-hero-mobile, none); background-size: cover; background-position: center right; } #ppilot-adaptive-practice-root .ppap-hero-main { position: relative; z-index: 1; min-width: 0; flex: 1 1 auto; } #ppilot-adaptive-practice-root .ppap-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #e0e7ff; font-size: 12px; font-weight: 700; } #ppilot-adaptive-practice-root .ppap-hero-eyebrow .ppap-icon { width: 16px; height: 16px; color: #fbbf24; } #ppilot-adaptive-practice-root .ppap-hero-eyebrow-text { color: #e0e7ff !important; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 700; } /* v0.57.1 hotfix: same two-layer text-shadow as the Dashboard hero, kept via text-shadow only (color/opacity unchanged). */ #ppilot-adaptive-practice-root .ppap-hero-eyebrow-text { text-shadow: 0 1px 2px rgba(0, 0, 0, .4); } /* v0.57.3 hotfix: same !important hardening as weak-areas.css — mirrors command-center.css's proven .ppilot-cc-hero-greeting-prefix pattern. */ #ppilot-adaptive-practice-root .ppap-hero-title { color: #ffffff !important; font-size: 28px; line-height: 1.12; font-weight: 800 !important; margin: 0 0 8px; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35) !important; } #ppilot-adaptive-practice-root .ppap-hero-sub { color: #dbe4ff !important; font-size: 15px; line-height: 1.55; margin: 0; max-width: 640px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3) !important; } #ppilot-adaptive-practice-root .ppap-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } #ppilot-adaptive-practice-root .ppap-hero-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); color: #ffffff; } #ppilot-adaptive-practice-root .ppap-hero-chip .ppap-icon { width: 16px; height: 16px; color: #c7d2fe; } #ppilot-adaptive-practice-root .ppap-hero-chip-text { color: #ffffff; font-size: 13px; font-weight: 650; } #ppilot-adaptive-practice-root .ppap-hero-art { display: none; position: relative; z-index: 1; flex: 0 0 auto; width: 150px; height: 150px; } #ppilot-adaptive-practice-root .ppap-hero-svg { width: 100%; height: 100%; } #ppilot-adaptive-practice-root .ppap-hero--image .ppap-hero-art { visibility: hidden; } /* ---- STAT TILES ---- */ #ppilot-adaptive-practice-root .ppap-stats { margin: 0 0 16px; } #ppilot-adaptive-practice-root .ppap-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #ppilot-adaptive-practice-root .ppap-tile { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px; background: var(--ppap-card); border: 1px solid var(--ppap-line); border-radius: 16px; box-shadow: var(--ppap-shadow); color: var(--ppap-body); } #ppilot-adaptive-practice-root .ppap-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; } #ppilot-adaptive-practice-root .ppap-tile-body { min-width: 0; } #ppilot-adaptive-practice-root .ppap-tile-value { color: var(--ppap-ink); font-size: 22px; font-weight: 800; line-height: 1.15; } #ppilot-adaptive-practice-root .ppap-tile-value-text { color: var(--ppap-ink); } #ppilot-adaptive-practice-root .ppap-tile-label { color: var(--ppap-body); font-size: 13px; font-weight: 650; line-height: 1.3; margin-top: 2px; } #ppilot-adaptive-practice-root .ppap-tile-sub { color: var(--ppap-muted); font-size: 12px; line-height: 1.35; margin-top: 2px; } #ppilot-adaptive-practice-root .ppap-tile--red .ppap-tile-icon { background: #fef3f2; color: var(--ppap-red); } #ppilot-adaptive-practice-root .ppap-tile--blue .ppap-tile-icon { background: #eef4ff; color: var(--ppap-royal); } #ppilot-adaptive-practice-root .ppap-tile--purple .ppap-tile-icon { background: #f5f1ff; color: var(--ppap-purple); } #ppilot-adaptive-practice-root .ppap-tile--amber .ppap-tile-icon { background: #fff8eb; color: var(--ppap-amber); } #ppilot-adaptive-practice-root .ppap-tile--green .ppap-tile-icon { background: #e8f7ef; color: var(--ppap-green); } #ppilot-adaptive-practice-root .ppap-tile--slate .ppap-tile-icon { background: #eef2f7; color: var(--ppap-body); } #ppilot-adaptive-practice-root .ppap-tile--green .ppap-tile-value-text { color: var(--ppap-green); } /* ---- CARDS ---- */ #ppilot-adaptive-practice-root .ppap-card { background: var(--ppap-card); border: 1px solid var(--ppap-line); border-radius: var(--ppap-radius); box-shadow: var(--ppap-shadow); padding: 18px; min-width: 0; color: var(--ppap-body); } #ppilot-adaptive-practice-root .ppap-card-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; } #ppilot-adaptive-practice-root .ppap-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #eef2ff; color: var(--ppap-royal); flex: 0 0 auto; } #ppilot-adaptive-practice-root .ppap-card-titles { min-width: 0; flex: 1 1 180px; } #ppilot-adaptive-practice-root .ppap-card-title { color: var(--ppap-ink); font-size: 18px; font-weight: 800; line-height: 1.3; margin: 0; } #ppilot-adaptive-practice-root .ppap-card-sub { color: var(--ppap-muted); font-size: 13px; line-height: 1.45; margin: 2px 0 0; } #ppilot-adaptive-practice-root .ppap-head-action { margin: 0; } /* Layout: one column on mobile (cards re-ordered so the plan and its settings stay together), two columns from 1024px. */ #ppilot-adaptive-practice-root .ppap-layout { display: flex; flex-direction: column; gap: 16px; } #ppilot-adaptive-practice-root .ppap-col { display: contents; } #ppilot-adaptive-practice-root .ppap-plan { order: 1; } #ppilot-adaptive-practice-root .ppap-settings { order: 2; } #ppilot-adaptive-practice-root .ppap-subjects-card { order: 3; } #ppilot-adaptive-practice-root .ppap-weak-card { order: 4; } #ppilot-adaptive-practice-root .ppap-recent { order: 5; } #ppilot-adaptive-practice-root .ppap-why { order: 6; } /* ---- PLAN ---- */ #ppilot-adaptive-practice-root .ppap-plan-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } #ppilot-adaptive-practice-root .ppap-readiness { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--ppap-bg); min-width: 0; } #ppilot-adaptive-practice-root .ppap-ring { position: relative; width: 104px; height: 104px; flex: 0 0 auto; } #ppilot-adaptive-practice-root .ppap-ring-svg { width: 100%; height: 100%; } #ppilot-adaptive-practice-root .ppap-ring-arc { transition: stroke-dasharray .8s ease; } #ppilot-adaptive-practice-root .ppap-ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } #ppilot-adaptive-practice-root .ppap-ring-value { color: var(--ppap-ink); font-size: 24px; font-weight: 800; line-height: 1; } #ppilot-adaptive-practice-root .ppap-readiness-text { min-width: 0; } #ppilot-adaptive-practice-root .ppap-readiness-title { color: var(--ppap-ink); font-size: 14px; font-weight: 750; line-height: 1.3; } #ppilot-adaptive-practice-root .ppap-readiness-level { color: var(--ppap-green); font-size: 15px; font-weight: 750; margin-top: 4px; } #ppilot-adaptive-practice-root .ppap-readiness-note { color: var(--ppap-muted); font-size: 12.5px; line-height: 1.45; margin-top: 4px; } #ppilot-adaptive-practice-root .ppap-readiness-lock { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #ffffff; color: var(--ppap-royal); border: 6px solid #e6eaf4; flex: 0 0 auto; } #ppilot-adaptive-practice-root .ppap-rec { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, #fffaf0 0%, #fff4dc 100%); border: 1px solid #fbe3b0; min-width: 0; } #ppilot-adaptive-practice-root .ppap-rec--empty { background: var(--ppap-bg); border-color: var(--ppap-line); } #ppilot-adaptive-practice-root .ppap-rec-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #ffffff; color: #a14a06; flex: 0 0 auto; } #ppilot-adaptive-practice-root .ppap-rec-body { min-width: 0; } #ppilot-adaptive-practice-root .ppap-rec-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #ppilot-adaptive-practice-root .ppap-rec-title { color: var(--ppap-ink); font-size: 14.5px; font-weight: 800; } #ppilot-adaptive-practice-root .ppap-rec-focus { color: var(--ppap-ink); font-size: 15px; font-weight: 700; line-height: 1.4; margin-top: 6px; overflow-wrap: anywhere; } #ppilot-adaptive-practice-root .ppap-rec-focus-name { color: var(--ppap-ink); } #ppilot-adaptive-practice-root .ppap-rec-focus-sub { color: var(--ppap-body); font-weight: 600; } #ppilot-adaptive-practice-root .ppap-rec-diff { display: block; color: #7a3d00; font-size: 13px; font-weight: 700; margin-top: 2px; } #ppilot-adaptive-practice-root .ppap-rec-reason { color: var(--ppap-body); font-size: 13px; line-height: 1.5; margin-top: 6px; } #ppilot-adaptive-practice-root .ppap-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } #ppilot-adaptive-practice-root .ppap-pill--tier { background: #ffffff; color: #7a3d00; border: 1px solid #f5d48a; } #ppilot-adaptive-practice-root .ppap-pill--completed { background: #e8f7ef; color: var(--ppap-green); } #ppilot-adaptive-practice-root .ppap-pill--in_progress { background: #fff4d6; color: #7a3d00; } #ppilot-adaptive-practice-root .ppap-cta-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; } #ppilot-adaptive-practice-root .ppap-cta, #ppilot-adaptive-practice-root .ppap-cta:hover, #ppilot-adaptive-practice-root .ppap-cta:focus { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 84px; margin: 0; padding: 16px 18px; border: 0; border-radius: 18px; cursor: pointer; text-align: left; background: #2a3fcc linear-gradient(135deg, #1d3fd1 0%, #3730a3 100%); color: #ffffff; box-shadow: 0 10px 24px rgba(37, 71, 208, .28); transition: transform .15s ease, box-shadow .15s ease; } #ppilot-adaptive-practice-root .ppap-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(37, 71, 208, .34); } #ppilot-adaptive-practice-root .ppap-cta[disabled] { cursor: progress; background: #4b5ccf; transform: none; } #ppilot-adaptive-practice-root .ppap-cta-play { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #ffffff; color: #2547d0; flex: 0 0 auto; } #ppilot-adaptive-practice-root .ppap-cta-play .ppap-icon { width: 24px; height: 24px; } #ppilot-adaptive-practice-root .ppap-cta-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } #ppilot-adaptive-practice-root .ppap-cta-title { color: #ffffff; font-size: 17px; font-weight: 800; line-height: 1.25; } #ppilot-adaptive-practice-root .ppap-cta-sub { color: #e0e7ff; font-size: 13px; line-height: 1.4; margin-top: 3px; } #ppilot-adaptive-practice-root .ppap-cta-arrow { color: #ffffff; } /* ---- SETTINGS ---- */ #ppilot-adaptive-practice-root .ppap-setting { margin: 0 0 14px; } #ppilot-adaptive-practice-root .ppap-setting-label { color: var(--ppap-ink); font-size: 13.5px; font-weight: 700; margin: 0 0 8px; } #ppilot-adaptive-practice-root .ppap-setting-hint { color: var(--ppap-muted); font-size: 12.5px; margin: -6px 0 14px; } #ppilot-adaptive-practice-root .ppap-seg { display: grid; gap: 8px; } #ppilot-adaptive-practice-root .ppap-seg--count { grid-template-columns: repeat(3, minmax(0, 1fr)); } #ppilot-adaptive-practice-root .ppap-seg--diff { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ppilot-adaptive-practice-root .ppap-seg-btn, #ppilot-adaptive-practice-root .ppap-seg-btn:hover, #ppilot-adaptive-practice-root .ppap-seg-btn:focus { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 6px 8px; border: 1.5px solid #cdd6e8; border-radius: 12px; background: #ffffff; color: var(--ppap-ink); cursor: pointer; line-height: 1.2; } #ppilot-adaptive-practice-root .ppap-seg-btn:hover { border-color: #9fb0dc; background: #f8faff; } #ppilot-adaptive-practice-root .ppap-seg-main { color: var(--ppap-ink); font-size: 15px; font-weight: 800; } #ppilot-adaptive-practice-root .ppap-seg-sub { color: var(--ppap-muted); font-size: 12px; font-weight: 600; margin-top: 2px; } #ppilot-adaptive-practice-root .ppap-seg-btn.is-on, #ppilot-adaptive-practice-root .ppap-seg-btn.is-on:hover, #ppilot-adaptive-practice-root .ppap-seg-btn.is-on:focus { border-color: #2547d0; background: #eef2ff; box-shadow: inset 0 0 0 1px #2547d0; } #ppilot-adaptive-practice-root .ppap-seg-btn.is-on .ppap-seg-main, #ppilot-adaptive-practice-root .ppap-seg-btn.is-on .ppap-seg-sub { color: #1e3a8a; } #ppilot-adaptive-practice-root .ppap-seg-btn--easy.is-on, #ppilot-adaptive-practice-root .ppap-seg-btn--easy.is-on:hover { border-color: #0f7a55; background: #e8f7ef; box-shadow: inset 0 0 0 1px #0f7a55; } #ppilot-adaptive-practice-root .ppap-seg-btn--easy.is-on .ppap-seg-main { color: #0b5e41; } #ppilot-adaptive-practice-root .ppap-seg-btn--medium.is-on, #ppilot-adaptive-practice-root .ppap-seg-btn--medium.is-on:hover { border-color: #a14a06; background: #fff8eb; box-shadow: inset 0 0 0 1px #a14a06; } #ppilot-adaptive-practice-root .ppap-seg-btn--medium.is-on .ppap-seg-main { color: #7a3d00; } #ppilot-adaptive-practice-root .ppap-seg-btn--mixed.is-on, #ppilot-adaptive-practice-root .ppap-seg-btn--mixed.is-on:hover { border-color: #6d3fd8; background: #f5f1ff; box-shadow: inset 0 0 0 1px #6d3fd8; } #ppilot-adaptive-practice-root .ppap-seg-btn--mixed.is-on .ppap-seg-main { color: #5b2bc0; } #ppilot-adaptive-practice-root .ppap-toggle-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--ppap-bg); } #ppilot-adaptive-practice-root .ppap-toggle-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #ffffff; color: var(--ppap-royal); flex: 0 0 auto; } #ppilot-adaptive-practice-root .ppap-toggle-text { flex: 1 1 auto; min-width: 0; } #ppilot-adaptive-practice-root .ppap-toggle-title { color: var(--ppap-ink); font-size: 14px; font-weight: 700; line-height: 1.3; } #ppilot-adaptive-practice-root .ppap-toggle-sub { color: var(--ppap-muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; } #ppilot-adaptive-practice-root .ppap-switch, #ppilot-adaptive-practice-root .ppap-switch:hover, #ppilot-adaptive-practice-root .ppap-switch:focus { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 64px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; } #ppilot-adaptive-practice-root .ppap-switch-track { position: relative; display: block; width: 56px; height: 32px; border-radius: 999px; background: #64748b; transition: background-color .15s ease; } #ppilot-adaptive-practice-root .ppap-switch.is-on .ppap-switch-track { background: #2547d0; } #ppilot-adaptive-practice-root .ppap-switch-knob { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transition: transform .15s ease; } #ppilot-adaptive-practice-root .ppap-switch.is-on .ppap-switch-knob { transform: translateX(24px); } /* ---- SUBJECTS ---- */ #ppilot-adaptive-practice-root .ppap-subjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } #ppilot-adaptive-practice-root .ppap-subject { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; border: 1px solid var(--ppap-line); background: #fbfcfe; min-width: 0; } #ppilot-adaptive-practice-root .ppap-subject-top { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 2px; } #ppilot-adaptive-practice-root .ppap-subject-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; background: var(--ppap-tone-bg); color: var(--ppap-tone); } #ppilot-adaptive-practice-root .ppap-subject-name { color: var(--ppap-ink); font-size: 14.5px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; } #ppilot-adaptive-practice-root .ppap-subject-meta { color: var(--ppap-muted); font-size: 12.5px; line-height: 1.4; } #ppilot-adaptive-practice-root .ppap-subject-meta-text { color: var(--ppap-muted); } #ppilot-adaptive-practice-root .ppap-subject-num { color: var(--ppap-tone); font-weight: 800; } #ppilot-adaptive-practice-root .ppap-subject-start { margin-top: auto; width: 100%; } #ppilot-adaptive-practice-root .ppap-tone--red { --ppap-tone: #b42318; --ppap-tone-bg: #fef3f2; } #ppilot-adaptive-practice-root .ppap-tone--blue { --ppap-tone: #2547d0; --ppap-tone-bg: #eef2ff; } #ppilot-adaptive-practice-root .ppap-tone--green { --ppap-tone: #0f7a55; --ppap-tone-bg: #e8f7ef; } #ppilot-adaptive-practice-root .ppap-tone--orange { --ppap-tone: #a14a06; --ppap-tone-bg: #fff8eb; } #ppilot-adaptive-practice-root .ppap-tone--purple { --ppap-tone: #6d3fd8; --ppap-tone-bg: #f5f1ff; } #ppilot-adaptive-practice-root .ppap-tone--teal { --ppap-tone: #0e7490; --ppap-tone-bg: #ecfeff; } /* ---- WEAK TOPICS ---- */ #ppilot-adaptive-practice-root .ppap-weak-list { display: grid; grid-template-columns: 1fr; gap: 12px; } #ppilot-adaptive-practice-root .ppap-weak { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 14px 18px; border-radius: 16px; border: 1px solid var(--ppap-line); background: #ffffff; overflow: hidden; min-width: 0; } #ppilot-adaptive-practice-root .ppap-weak::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #94a3b8; } #ppilot-adaptive-practice-root .ppap-weak--high::before { background: linear-gradient(180deg, #ef4444, #b42318); } #ppilot-adaptive-practice-root .ppap-weak--medium::before { background: linear-gradient(180deg, #f59e0b, #a14a06); } #ppilot-adaptive-practice-root .ppap-weak--low::before { background: linear-gradient(180deg, #38bdf8, #0e7490); } #ppilot-adaptive-practice-root .ppap-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; } #ppilot-adaptive-practice-root .ppap-badge-text { color: inherit; } #ppilot-adaptive-practice-root .ppap-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; } #ppilot-adaptive-practice-root .ppap-badge--high { background: #fef3f2; color: var(--ppap-red); } #ppilot-adaptive-practice-root .ppap-badge--medium { background: #fff8eb; color: var(--ppap-amber); } #ppilot-adaptive-practice-root .ppap-badge--low { background: #ecfeff; color: var(--ppap-cyan); } #ppilot-adaptive-practice-root .ppap-weak-title { color: var(--ppap-ink); font-size: 16px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; } #ppilot-adaptive-practice-root .ppap-weak-sub { color: var(--ppap-muted); font-size: 13px; } #ppilot-adaptive-practice-root .ppap-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; } #ppilot-adaptive-practice-root .ppap-metric { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: var(--ppap-bg); min-width: 0; } #ppilot-adaptive-practice-root .ppap-metric-icon { display: none; } #ppilot-adaptive-practice-root .ppap-metric-body { min-width: 0; } #ppilot-adaptive-practice-root .ppap-metric-value { color: var(--ppap-ink); font-size: 16px; font-weight: 800; line-height: 1.2; } #ppilot-adaptive-practice-root .ppap-metric-label { color: var(--ppap-muted); font-size: 11.5px; font-weight: 650; } #ppilot-adaptive-practice-root .ppap-metric--blue .ppap-metric-value { color: var(--ppap-royal); } #ppilot-adaptive-practice-root .ppap-metric--red .ppap-metric-value { color: var(--ppap-red); } #ppilot-adaptive-practice-root .ppap-metric--amber .ppap-metric-value { color: var(--ppap-amber); } #ppilot-adaptive-practice-root .ppap-weak-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; } #ppilot-adaptive-practice-root .ppap-weak-count { color: var(--ppap-muted); font-size: 12.5px; } #ppilot-adaptive-practice-root .ppap-weak-count-num { color: var(--ppap-ink); font-weight: 800; } #ppilot-adaptive-practice-root .ppap-weak-count-text { color: var(--ppap-muted); } #ppilot-adaptive-practice-root .ppap-weak-note { color: var(--ppap-muted); font-size: 12.5px; padding: 8px 10px; border-radius: 10px; background: var(--ppap-bg); } /* ---- RECENT SESSIONS ---- */ #ppilot-adaptive-practice-root .ppap-sessions { display: flex; flex-direction: column; gap: 8px; } #ppilot-adaptive-practice-root .ppap-session { border: 1px solid var(--ppap-line); border-radius: 14px; background: #ffffff; min-width: 0; } #ppilot-adaptive-practice-root .ppap-session-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } #ppilot-adaptive-practice-root .ppap-session-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #eef2ff; color: var(--ppap-royal); flex: 0 0 auto; } #ppilot-adaptive-practice-root .ppap-session-text { flex: 1 1 auto; min-width: 0; } #ppilot-adaptive-practice-root .ppap-session-text .ppap-pill { margin-top: 4px; } #ppilot-adaptive-practice-root .ppap-session-title { color: var(--ppap-ink); font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } #ppilot-adaptive-practice-root .ppap-session-meta { color: var(--ppap-muted); font-size: 12.5px; line-height: 1.4; } #ppilot-adaptive-practice-root .ppap-session-action { flex: 0 0 auto; min-height: 40px; padding: 8px 12px; font-size: 13px; } #ppilot-adaptive-practice-root .ppap-session-result { padding: 0 12px 12px; border-top: 1px solid var(--ppap-line); overflow-x: auto; } /* ---- WHY ---- */ #ppilot-adaptive-practice-root .ppap-why-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } #ppilot-adaptive-practice-root .ppap-why-item { display: flex; gap: 10px; padding: 12px; border-radius: 14px; background: var(--ppap-bg); min-width: 0; } #ppilot-adaptive-practice-root .ppap-why-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #ffffff; flex: 0 0 auto; color: var(--ppap-purple); } #ppilot-adaptive-practice-root .ppap-why--weak .ppap-why-icon { color: var(--ppap-royal); } #ppilot-adaptive-practice-root .ppap-why--accuracy .ppap-why-icon { color: var(--ppap-green); } #ppilot-adaptive-practice-root .ppap-why--readiness .ppap-why-icon { color: var(--ppap-amber); } #ppilot-adaptive-practice-root .ppap-why-text { min-width: 0; } #ppilot-adaptive-practice-root .ppap-why-title-text { color: var(--ppap-ink); font-size: 14px; font-weight: 750; line-height: 1.3; } #ppilot-adaptive-practice-root .ppap-why-desc { color: var(--ppap-muted); font-size: 12.5px; line-height: 1.45; margin-top: 2px; } /* ---- BUTTONS & LINKS (explicit in every state) ---- */ #ppilot-adaptive-practice-root .ppap-btn, #ppilot-adaptive-practice-root .ppap-btn:visited { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 1px solid transparent; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap; text-decoration: none; text-transform: none; background: #eef2ff; color: var(--ppap-royal); margin: 0; width: auto; height: auto; transition: background-color .15s ease, transform .15s ease; } #ppilot-adaptive-practice-root .ppap-btn .ppap-btn-text { color: inherit; font-weight: 700; } #ppilot-adaptive-practice-root .ppap-btn .ppap-icon { width: 18px; height: 18px; } #ppilot-adaptive-practice-root .ppap-btn--primary, #ppilot-adaptive-practice-root .ppap-btn--primary:visited, #ppilot-adaptive-practice-root .ppap-btn--primary:hover, #ppilot-adaptive-practice-root .ppap-btn--primary:focus { background: #2f40cd linear-gradient(135deg, #2547d0, #4338ca); color: #ffffff; border-color: transparent; } #ppilot-adaptive-practice-root .ppap-btn--primary:hover { background: #2935ab linear-gradient(135deg, #1e3bb3, #3730a3); transform: translateY(-1px); } #ppilot-adaptive-practice-root .ppap-btn--tone, #ppilot-adaptive-practice-root .ppap-btn--tone:hover, #ppilot-adaptive-practice-root .ppap-btn--tone:focus { background: var(--ppap-tone, #2547d0); color: #ffffff; border-color: transparent; } #ppilot-adaptive-practice-root .ppap-btn--tone:hover { transform: translateY(-1px); } #ppilot-adaptive-practice-root .ppap-btn--gold, #ppilot-adaptive-practice-root .ppap-btn--gold:visited, #ppilot-adaptive-practice-root .ppap-btn--gold:hover, #ppilot-adaptive-practice-root .ppap-btn--gold:focus { background: #fff4d6; color: #7a3d00; border-color: #f5d48a; } #ppilot-adaptive-practice-root .ppap-btn--ghost, #ppilot-adaptive-practice-root .ppap-btn--ghost:hover, #ppilot-adaptive-practice-root .ppap-btn--ghost:focus { background: #ffffff; color: var(--ppap-navy); border-color: #cdd6e8; } #ppilot-adaptive-practice-root .ppap-btn[disabled] { cursor: not-allowed; background: #e9edf5; color: #4b5565; border-color: #d5dbe7; transform: none; } #ppilot-adaptive-practice-root .ppap-link, #ppilot-adaptive-practice-root .ppap-link:visited, #ppilot-adaptive-practice-root .ppap-link:hover, #ppilot-adaptive-practice-root .ppap-link:focus { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid #cdd6e8; background: #ffffff; color: var(--ppap-royal); font-weight: 700; font-size: 13.5px; white-space: nowrap; } #ppilot-adaptive-practice-root .ppap-link-text { color: var(--ppap-royal); } #ppilot-adaptive-practice-root .ppap-link .ppap-icon { width: 16px; height: 16px; color: var(--ppap-royal); } #ppilot-adaptive-practice-root .ppap-inline-error { color: var(--ppap-red); background: #fef3f2; border: 1px solid #fecdca; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; line-height: 1.4; } /* ---- EMPTY / LOADING / ERROR ---- */ #ppilot-adaptive-practice-root .ppap-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 14px; border-radius: 14px; background: var(--ppap-bg); } #ppilot-adaptive-practice-root .ppap-empty--compact { padding: 16px 12px; } #ppilot-adaptive-practice-root .ppap-empty--hero { padding: 36px 16px; background: transparent; } #ppilot-adaptive-practice-root .ppap-empty-icon { width: 44px; height: 44px; color: var(--ppap-royal); margin-bottom: 4px; } #ppilot-adaptive-practice-root .ppap-empty-title { color: var(--ppap-ink); font-size: 16px; font-weight: 750; line-height: 1.35; } #ppilot-adaptive-practice-root .ppap-empty-text { color: var(--ppap-muted); font-size: 14px; line-height: 1.55; max-width: 460px; } #ppilot-adaptive-practice-root .ppap-empty .ppap-btn { margin-top: 8px; } #ppilot-adaptive-practice-root .ppap-loading, #ppilot-adaptive-practice-root .ppap-error { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; border-radius: var(--ppap-radius); background: var(--ppap-card); border: 1px solid var(--ppap-line); text-align: center; } #ppilot-adaptive-practice-root .ppap-loading-text { color: var(--ppap-body); font-weight: 600; } #ppilot-adaptive-practice-root .ppap-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #dbe2f0; border-top-color: var(--ppap-royal); animation: ppap-spin .8s linear infinite; } @keyframes ppap-spin { to { transform: rotate(360deg); } } /* ---- ≥ 600px ---- */ @media (min-width: 600px) { #ppilot-adaptive-practice-root .ppap-hero { padding: 28px; } #ppilot-adaptive-practice-root .ppap-hero-title { font-size: 32px; } #ppilot-adaptive-practice-root .ppap-hero-art { display: block; width: 130px; height: 130px; } /* v0.57.1 hotfix: same >=0.6 end-stop floor as the mobile/base rule above. */ /* v0.57.2: same verbatim Dashboard gradient as the base rule above. */ #ppilot-adaptive-practice-root .ppap-hero--image { background-image: linear-gradient(90deg, rgba(7, 15, 34, 0.86) 0%, rgba(9, 24, 54, 0.72) 45%, rgba(11, 31, 69, 0.6) 72%, rgba(11, 31, 69, 0.28) 100%), var(--ppap-hero-desktop, var(--ppap-hero-mobile, none)); } #ppilot-adaptive-practice-root .ppap-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } #ppilot-adaptive-practice-root .ppap-plan-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } #ppilot-adaptive-practice-root .ppap-cta-wrap { grid-column: 1 / -1; } #ppilot-adaptive-practice-root .ppap-seg--diff { grid-template-columns: repeat(4, minmax(0, 1fr)); } #ppilot-adaptive-practice-root .ppap-weak-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ppilot-adaptive-practice-root .ppap-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ppilot-adaptive-practice-root .ppap-metric-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #ffffff; flex: 0 0 auto; } #ppilot-adaptive-practice-root .ppap-metric-icon .ppap-icon { width: 15px; height: 15px; } #ppilot-adaptive-practice-root .ppap-metric--blue .ppap-metric-icon { color: var(--ppap-royal); } #ppilot-adaptive-practice-root .ppap-metric--red .ppap-metric-icon { color: var(--ppap-red); } #ppilot-adaptive-practice-root .ppap-metric--amber .ppap-metric-icon { color: var(--ppap-amber); } } /* ---- ≥ 1024px: two columns ---- */ @media (min-width: 1024px) { #ppilot-adaptive-practice-root .ppap-hero { padding: 32px 36px; } #ppilot-adaptive-practice-root .ppap-hero-title { font-size: 36px; } #ppilot-adaptive-practice-root .ppap-hero-art { width: 150px; height: 150px; margin-right: 12px; } #ppilot-adaptive-practice-root .ppap-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } #ppilot-adaptive-practice-root .ppap-layout--single { grid-template-columns: minmax(0, 1fr) 360px; } #ppilot-adaptive-practice-root .ppap-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } #ppilot-adaptive-practice-root .ppap-card { padding: 20px; } #ppilot-adaptive-practice-root .ppap-plan-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); } #ppilot-adaptive-practice-root .ppap-seg--diff { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ppilot-adaptive-practice-root .ppap-why-grid { grid-template-columns: 1fr; } #ppilot-adaptive-practice-root .ppap-weak-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } #ppilot-adaptive-practice-root .ppap-weak-list .ppap-metric { flex-direction: column; align-items: flex-start; gap: 4px; } #ppilot-adaptive-practice-root .ppap-weak-foot { flex-direction: column; align-items: stretch; } #ppilot-adaptive-practice-root .ppap-weak-start { width: 100%; } } /* ---- ≥ 1280px: full desktop ---- */ @media (min-width: 1280px) { #ppilot-adaptive-practice-root .ppap-tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } #ppilot-adaptive-practice-root .ppap-tiles--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } #ppilot-adaptive-practice-root .ppap-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } #ppilot-adaptive-practice-root .ppap-layout { grid-template-columns: minmax(0, 1fr) 390px; } #ppilot-adaptive-practice-root .ppap-plan-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; } #ppilot-adaptive-practice-root .ppap-cta-wrap { grid-column: auto; } #ppilot-adaptive-practice-root .ppap-cta { height: 100%; } #ppilot-adaptive-practice-root .ppap-readiness { flex-direction: column; text-align: center; justify-content: center; } } @media (prefers-reduced-motion: reduce) { #ppilot-adaptive-practice-root *, #ppilot-adaptive-practice-root *::before, #ppilot-adaptive-practice-root *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } #ppilot-adaptive-practice-root .ppap-btn--primary:hover, #ppilot-adaptive-practice-root .ppap-cta:hover { transform: none; } }