/* PracticePilot — My Weak Areas (v0.56.0 premium redesign). Theme isolation follows the v0.49.3 two-tier pattern: TIER 1 — every component rule is scoped under the #ppilot-weak-areas-root ID (specificity 1,x,x), which always beats a theme's bare element (0,0,1) and ".entry-content X" (0,1,1) rules regardless of source order; no bare/unscoped selectors, no global !important. TIER 2 — every text-bearing element has an explicit color, decoration, font-family and margin, so nothing is ever inherited from (or faded / underlined / uppercased by) the host theme. The only !important declarations are scoped to this root's own links and buttons, to neutralise a theme's own `!important` hover fade. Mobile-first; priority never conveyed by color alone (dot + text). */ body.ppilot-weak-areas-page .entry-header, body.ppilot-weak-areas-page .entry-title, body.ppilot-weak-areas-page h1.entry-title, body.ppilot-weak-areas-page .page-title, body.ppilot-weak-areas-page .wp-block-post-title, body.ppilot-weak-areas-page .elementor-widget-theme-page-title { display: none !important; } #ppilot-weak-areas-root { --ppwa-navy: #0b1f45; --ppwa-navy-2: #16306a; --ppwa-royal: #2547d0; --ppwa-purple: #6d3fd8; --ppwa-cyan: #0e7490; --ppwa-green: #0f7a55; --ppwa-amber: #a14a06; --ppwa-red: #b42318; --ppwa-ink: #0f172a; --ppwa-body: #334155; --ppwa-muted: #4b5565; --ppwa-line: #e3e8f2; --ppwa-bg: #f4f6fb; --ppwa-card: #ffffff; --ppwa-radius: 20px; --ppwa-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06); --ppwa-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; font-family: var(--ppwa-font); font-size: 15px; line-height: 1.5; color: var(--ppwa-body); text-align: left; -webkit-font-smoothing: antialiased; } #ppilot-weak-areas-root *, #ppilot-weak-areas-root *::before, #ppilot-weak-areas-root *::after { box-sizing: border-box; } /* ---- TIER 2 baseline: neutralise inherited theme text styling ---- */ #ppilot-weak-areas-root div, #ppilot-weak-areas-root section, #ppilot-weak-areas-root article, #ppilot-weak-areas-root aside, #ppilot-weak-areas-root nav, #ppilot-weak-areas-root figure { line-height: inherit; margin: 0; padding: 0; border: 0; font-family: var(--ppwa-font); } #ppilot-weak-areas-root h1, #ppilot-weak-areas-root h2, #ppilot-weak-areas-root h3 { font-family: var(--ppwa-font); color: var(--ppwa-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-weak-areas-root p, #ppilot-weak-areas-root span, #ppilot-weak-areas-root li, #ppilot-weak-areas-root strong, #ppilot-weak-areas-root small, #ppilot-weak-areas-root label, #ppilot-weak-areas-root dt, #ppilot-weak-areas-root dd, #ppilot-weak-areas-root figcaption { font-family: var(--ppwa-font); color: inherit; margin: 0; padding: 0; text-decoration: none; text-transform: none; letter-spacing: normal; line-height: inherit; font-size: inherit; } #ppilot-weak-areas-root ul, #ppilot-weak-areas-root ol, #ppilot-weak-areas-root dl { list-style: none; margin: 0; padding: 0; } #ppilot-weak-areas-root li { margin: 0; line-height: inherit; } #ppilot-weak-areas-root li::before, #ppilot-weak-areas-root li::marker { content: none; color: transparent; } #ppilot-weak-areas-root a, #ppilot-weak-areas-root a:visited, #ppilot-weak-areas-root a:hover, #ppilot-weak-areas-root a:focus, #ppilot-weak-areas-root a:active { text-decoration: none; border-bottom: 0; box-shadow: none; font-family: var(--ppwa-font); opacity: 1 !important; filter: none !important; } #ppilot-weak-areas-root button, #ppilot-weak-areas-root button:hover, #ppilot-weak-areas-root button:focus { font-family: var(--ppwa-font); text-transform: none; letter-spacing: normal; box-shadow: none; opacity: 1 !important; filter: none !important; } #ppilot-weak-areas-root svg { display: inline-block; vertical-align: middle; max-width: 100%; overflow: visible; } #ppilot-weak-areas-root .ppwa-icon { width: 20px; height: 20px; flex: 0 0 auto; } #ppilot-weak-areas-root :focus { outline: none; } #ppilot-weak-areas-root :focus-visible { outline: 3px solid #2547d0; outline-offset: 2px; } #ppilot-weak-areas-root .ppwa-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- HERO ---- */ #ppilot-weak-areas-root .ppwa-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; padding: 24px 20px; margin: 0 0 16px; border-radius: var(--ppwa-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: #fff; } #ppilot-weak-areas-root .ppwa-hero--image { /* v0.57.1 hotfix (live-screenshot report, real photo background): the end-of-gradient stop was .55 (mobile) / .35 (desktop, see the 768px override below) — below the floor PracticePilot's own Dashboard hero (command-center.css .ppilot-cc-hero) already proved necessary for white heading text to hold contrast against a bright real photo. Unlike the Dashboard hero, this page's title/sub column (.ppwa-hero-main) has no fixed width and can extend most of the hero's width, so the text reaches well past the old 55%/50% mid stop into the weak tail end. Raised to the Dashboard's proven >=0.6 floor at 100%, plus a matching text-shadow on the heading/sub/eyebrow below (next to this rule), same two-layer treatment as the Dashboard, never via reducing text opacity. */ background-color: #0b1f45; /* v0.57.2 hotfix: the v0.57.1 fix only raised this gradient's own alpha stops and still looked washed out on the live site. Per the owner's explicit instruction this time ("gradient ko strong bana de, left side solid"), this is no longer a page-specific alpha tune — it is the EXACT, verbatim gradient already proven correct on the Dashboard hero (command-center.css .ppilot-cc-hero, confirmed correct by the owner's own screenshot), copied stop-for-stop so every hero page uses one identical, unambiguous dark-left/photo-right scrim. */ 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(--ppwa-hero-mobile, none); background-size: cover; background-position: center right; } #ppilot-weak-areas-root .ppwa-hero-main { position: relative; z-index: 1; min-width: 0; flex: 1 1 auto; } #ppilot-weak-areas-root .ppwa-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; letter-spacing: .06em; text-transform: uppercase; } #ppilot-weak-areas-root .ppwa-hero-eyebrow-text { color: #e0e7ff !important; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 700; } #ppilot-weak-areas-root .ppwa-hero-eyebrow .ppwa-icon { width: 16px; height: 16px; color: #fbbf24; } /* v0.57.1 hotfix: same two-layer text-shadow the Dashboard hero already uses for exactly this reason — contrast against ANY configured photo, not just a dark one, kept via text-shadow, never by reducing opacity (both stay at their full color/opacity). */ #ppilot-weak-areas-root .ppwa-hero-eyebrow-text { text-shadow: 0 1px 2px rgba(0, 0, 0, .4); } /* v0.57.3 hotfix: color/font-weight pinned !important on every hero text element — the SAME defensive mechanism command-center.css already uses on .ppilot-cc-hero-greeting-prefix (proven correct on the live hpgovtjob.com theme) — so no live-theme rule of equal or higher specificity (e.g. a theme h1/.entry-content color rule) can win a cascade tie against this hero heading the way it apparently did before. */ #ppilot-weak-areas-root .ppwa-hero-title { color: #ffffff !important; font-size: 26px; line-height: 1.15; 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-weak-areas-root .ppwa-hero-sub { color: #dbe4ff !important; font-size: 15px; line-height: 1.55; margin: 0; max-width: 620px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3) !important; } #ppilot-weak-areas-root .ppwa-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } #ppilot-weak-areas-root .ppwa-hero-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); } #ppilot-weak-areas-root .ppwa-hero-chip-value { color: #ffffff; font-size: 18px; font-weight: 800; line-height: 1.1; } #ppilot-weak-areas-root .ppwa-hero-chip-label { color: #dbe4ff; font-size: 13px; font-weight: 600; } #ppilot-weak-areas-root .ppwa-hero-art { display: none; position: relative; z-index: 1; flex: 0 0 auto; width: 150px; height: 150px; } #ppilot-weak-areas-root .ppwa-hero-target { width: 100%; height: 100%; } #ppilot-weak-areas-root .ppwa-hero--image .ppwa-hero-art { visibility: hidden; } /* ---- CARDS ---- */ #ppilot-weak-areas-root .ppwa-overview { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 16px; } #ppilot-weak-areas-root .ppwa-card { background: var(--ppwa-card); border: 1px solid var(--ppwa-line); border-radius: var(--ppwa-radius); box-shadow: var(--ppwa-shadow); padding: 18px; min-width: 0; color: var(--ppwa-body); } #ppilot-weak-areas-root .ppwa-card-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; } #ppilot-weak-areas-root .ppwa-card-head--split { flex-wrap: wrap; } #ppilot-weak-areas-root .ppwa-card-head--split .ppwa-card-titles { flex: 1 1 160px; } #ppilot-weak-areas-root .ppwa-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: #eef2ff; color: var(--ppwa-royal); flex: 0 0 auto; } #ppilot-weak-areas-root .ppwa-card-titles { min-width: 0; } #ppilot-weak-areas-root .ppwa-card-title { color: var(--ppwa-ink); font-size: 17px; font-weight: 750; line-height: 1.3; margin: 0; } #ppilot-weak-areas-root .ppwa-card-sub { color: var(--ppwa-muted); font-size: 13px; line-height: 1.45; margin: 2px 0 0; } /* Overall performance */ #ppilot-weak-areas-root .ppwa-perf-body { display: flex; flex-direction: column; align-items: center; gap: 16px; } #ppilot-weak-areas-root .ppwa-ring { position: relative; width: 148px; height: 148px; flex: 0 0 auto; } #ppilot-weak-areas-root .ppwa-ring-svg { width: 100%; height: 100%; } #ppilot-weak-areas-root .ppwa-ring-arc { transition: stroke-dasharray .8s ease; } #ppilot-weak-areas-root .ppwa-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } #ppilot-weak-areas-root .ppwa-ring-value { color: var(--ppwa-ink); font-size: 28px; font-weight: 800; line-height: 1.05; } #ppilot-weak-areas-root .ppwa-ring-caption { color: var(--ppwa-muted); font-size: 12px; font-weight: 600; margin-top: 2px; } #ppilot-weak-areas-root .ppwa-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; } #ppilot-weak-areas-root .ppwa-stat { background: var(--ppwa-bg); border-radius: 12px; padding: 10px 12px; min-width: 0; } #ppilot-weak-areas-root .ppwa-stat-label { color: var(--ppwa-muted); font-size: 12px; font-weight: 600; line-height: 1.3; } #ppilot-weak-areas-root .ppwa-stat-value { color: var(--ppwa-ink); font-size: 18px; font-weight: 800; line-height: 1.25; margin: 2px 0 0; } #ppilot-weak-areas-root .ppwa-stat--good .ppwa-stat-value { color: var(--ppwa-green); } #ppilot-weak-areas-root .ppwa-stat--accent .ppwa-stat-value { color: var(--ppwa-royal); } /* Weak areas summary tiles */ #ppilot-weak-areas-root .ppwa-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #ppilot-weak-areas-root .ppwa-tile { border-radius: 14px; padding: 12px; min-width: 0; border: 1px solid transparent; } #ppilot-weak-areas-root .ppwa-tile-label { display: flex; align-items: center; gap: 8px; color: var(--ppwa-body); font-size: 12.5px; font-weight: 650; line-height: 1.3; } #ppilot-weak-areas-root .ppwa-tile-label-text { color: var(--ppwa-body); } #ppilot-weak-areas-root .ppwa-tile-icon { display: inline-flex; width: 28px; height: 28px; border-radius: 9px; align-items: center; justify-content: center; background: #ffffff; flex: 0 0 auto; } #ppilot-weak-areas-root .ppwa-tile-icon .ppwa-icon { width: 16px; height: 16px; } #ppilot-weak-areas-root .ppwa-tile-value { font-size: 24px; font-weight: 800; line-height: 1.2; margin: 8px 0 0; color: var(--ppwa-ink); } #ppilot-weak-areas-root .ppwa-tile--red { background: #fef3f2; border-color: #fde2df; } #ppilot-weak-areas-root .ppwa-tile--red .ppwa-tile-icon, #ppilot-weak-areas-root .ppwa-tile--red .ppwa-tile-value { color: var(--ppwa-red); } #ppilot-weak-areas-root .ppwa-tile--amber { background: #fff8eb; border-color: #fdebc8; } #ppilot-weak-areas-root .ppwa-tile--amber .ppwa-tile-icon, #ppilot-weak-areas-root .ppwa-tile--amber .ppwa-tile-value { color: var(--ppwa-amber); } #ppilot-weak-areas-root .ppwa-tile--blue { background: #eef4ff; border-color: #dbe6fe; } #ppilot-weak-areas-root .ppwa-tile--blue .ppwa-tile-icon, #ppilot-weak-areas-root .ppwa-tile--blue .ppwa-tile-value { color: var(--ppwa-royal); } #ppilot-weak-areas-root .ppwa-tile--purple { background: #f5f1ff; border-color: #e7ddfe; } #ppilot-weak-areas-root .ppwa-tile--purple .ppwa-tile-icon, #ppilot-weak-areas-root .ppwa-tile--purple .ppwa-tile-value { color: var(--ppwa-purple); } /* Improvement journey */ #ppilot-weak-areas-root .ppwa-chart { margin: 0; } #ppilot-weak-areas-root .ppwa-chart-svg { display: block; width: 100%; height: auto; } #ppilot-weak-areas-root .ppwa-axis { fill: #4b5565; font-size: 12px; font-family: var(--ppwa-font); } #ppilot-weak-areas-root .ppwa-chart-caption { color: var(--ppwa-muted); font-size: 12.5px; line-height: 1.45; margin: 8px 0 0; } #ppilot-weak-areas-root .ppwa-chart-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } #ppilot-weak-areas-root .ppwa-trend { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; } #ppilot-weak-areas-root .ppwa-trend-text { color: inherit; } #ppilot-weak-areas-root .ppwa-trend--improving { background: #e8f7ef; color: var(--ppwa-green); } #ppilot-weak-areas-root .ppwa-trend--declining { background: #fef3f2; color: var(--ppwa-red); } #ppilot-weak-areas-root .ppwa-trend--stable { background: #eef2f7; color: var(--ppwa-body); } #ppilot-weak-areas-root .ppwa-locked-chart { width: 100%; max-width: 240px; height: auto; margin: 0 auto 6px; display: block; } #ppilot-weak-areas-root .ppwa-journey-progress { width: 100%; max-width: 260px; height: 8px; border-radius: 999px; background: #e6eaf4; overflow: hidden; margin: 10px auto 0; } #ppilot-weak-areas-root .ppwa-journey-progress-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2547d0, #6d3fd8); } /* Empty states */ #ppilot-weak-areas-root .ppwa-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 12px; border-radius: 14px; background: var(--ppwa-bg); } #ppilot-weak-areas-root .ppwa-empty--compact { padding: 14px; } #ppilot-weak-areas-root .ppwa-empty--topics { padding: 32px 16px; background: var(--ppwa-card); border: 1px dashed #cdd6e8; } #ppilot-weak-areas-root .ppwa-empty-icon { width: 40px; height: 40px; color: var(--ppwa-royal); margin-bottom: 4px; } #ppilot-weak-areas-root .ppwa-empty--active .ppwa-empty-icon { color: var(--ppwa-green); } #ppilot-weak-areas-root .ppwa-empty-title { color: var(--ppwa-ink); font-size: 16px; font-weight: 750; line-height: 1.35; } #ppilot-weak-areas-root .ppwa-empty-text { color: var(--ppwa-muted); font-size: 14px; line-height: 1.55; max-width: 460px; } #ppilot-weak-areas-root .ppwa-empty .ppwa-btn { margin-top: 8px; } /* Buttons & links (explicit in every state) */ #ppilot-weak-areas-root .ppwa-btn, #ppilot-weak-areas-root .ppwa-btn:visited { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; 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(--ppwa-royal); margin: 0; width: auto; height: auto; transition: background-color .15s ease, transform .15s ease; } #ppilot-weak-areas-root .ppwa-btn .ppwa-btn-text { color: inherit; font-weight: 700; } #ppilot-weak-areas-root .ppwa-btn .ppwa-icon { width: 18px; height: 18px; } #ppilot-weak-areas-root .ppwa-btn--primary, #ppilot-weak-areas-root .ppwa-btn--primary:visited, #ppilot-weak-areas-root .ppwa-btn--primary:hover, #ppilot-weak-areas-root .ppwa-btn--primary:focus { background: #2f40cd linear-gradient(135deg, #2547d0, #4338ca); color: #ffffff; border-color: transparent; } #ppilot-weak-areas-root .ppwa-btn--primary:hover { background: #2935ab linear-gradient(135deg, #1e3bb3, #3730a3); transform: translateY(-1px); } #ppilot-weak-areas-root .ppwa-btn--gold, #ppilot-weak-areas-root .ppwa-btn--gold:visited, #ppilot-weak-areas-root .ppwa-btn--gold:hover, #ppilot-weak-areas-root .ppwa-btn--gold:focus { background: #fff4d6; color: #7a3d00; border-color: #f5d48a; } #ppilot-weak-areas-root .ppwa-btn--ghost, #ppilot-weak-areas-root .ppwa-btn--ghost:hover, #ppilot-weak-areas-root .ppwa-btn--ghost:focus { background: #ffffff; color: var(--ppwa-navy); border-color: #cdd6e8; } #ppilot-weak-areas-root .ppwa-btn[disabled] { cursor: not-allowed; background: #e9edf5; color: #4b5565; border-color: #d5dbe7; transform: none; } #ppilot-weak-areas-root .ppwa-link, #ppilot-weak-areas-root .ppwa-link:visited, #ppilot-weak-areas-root .ppwa-link:hover { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; min-height: 44px; color: var(--ppwa-royal); font-weight: 700; font-size: 14px; } #ppilot-weak-areas-root .ppwa-link-text { color: var(--ppwa-royal); } #ppilot-weak-areas-root .ppwa-link .ppwa-icon { width: 18px; height: 18px; } /* ---- LAYOUT: topics + aside ---- */ #ppilot-weak-areas-root .ppwa-layout { display: grid; grid-template-columns: 1fr; gap: 16px; } #ppilot-weak-areas-root .ppwa-main, #ppilot-weak-areas-root .ppwa-aside { min-width: 0; display: flex; flex-direction: column; gap: 16px; } #ppilot-weak-areas-root .ppwa-topics-section { background: transparent; } #ppilot-weak-areas-root .ppwa-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; } #ppilot-weak-areas-root .ppwa-section-title { color: var(--ppwa-ink); font-size: 20px; font-weight: 800; } #ppilot-weak-areas-root .ppwa-section-count { color: var(--ppwa-muted); font-size: 13px; font-weight: 600; } /* Toolbar */ #ppilot-weak-areas-root .ppwa-toolbar { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 14px; padding: 14px; background: var(--ppwa-card); border: 1px solid var(--ppwa-line); border-radius: 16px; } #ppilot-weak-areas-root .ppwa-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } #ppilot-weak-areas-root .ppwa-label { color: var(--ppwa-body); font-size: 12.5px; font-weight: 700; line-height: 1.3; } #ppilot-weak-areas-root .ppwa-search-wrap { position: relative; } #ppilot-weak-areas-root .ppwa-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ppwa-muted); pointer-events: none; } #ppilot-weak-areas-root .ppwa-input, #ppilot-weak-areas-root .ppwa-select, #ppilot-weak-areas-root .ppwa-input:focus, #ppilot-weak-areas-root .ppwa-select:focus { display: block; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0 12px; border: 1px solid #cdd6e8; border-radius: 12px; background: #ffffff; color: var(--ppwa-ink); font-family: var(--ppwa-font); font-size: 15px; line-height: 1.2; box-shadow: none; text-transform: none; -webkit-appearance: none; appearance: none; } #ppilot-weak-areas-root .ppwa-input { padding-left: 38px; } #ppilot-weak-areas-root .ppwa-select { padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, #4b5565 50%), linear-gradient(135deg, #4b5565 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } #ppilot-weak-areas-root .ppwa-input:focus-visible, #ppilot-weak-areas-root .ppwa-select:focus-visible { outline: 3px solid #2547d0; outline-offset: 1px; border-color: #2547d0; background-color: #ffffff; color: var(--ppwa-ink); } #ppilot-weak-areas-root .ppwa-select[disabled] { background-color: #f1f4f9; color: #4b5565; } /* Topic cards */ #ppilot-weak-areas-root .ppwa-topics-host[aria-busy="true"] { opacity: .6; } #ppilot-weak-areas-root .ppwa-topics { display: grid; grid-template-columns: 1fr; gap: 14px; } #ppilot-weak-areas-root .ppwa-topic { min-width: 0; } #ppilot-weak-areas-root .ppwa-topic-inner { position: relative; height: 100%; display: flex; flex-direction: column; gap: 14px; background: var(--ppwa-card); border: 1px solid var(--ppwa-line); border-radius: 18px; box-shadow: var(--ppwa-shadow); padding: 16px 16px 16px 20px; overflow: hidden; } #ppilot-weak-areas-root .ppwa-topic-inner::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #94a3b8; } #ppilot-weak-areas-root .ppwa-topic--high .ppwa-topic-inner::before { background: linear-gradient(180deg, #ef4444, #b42318); } #ppilot-weak-areas-root .ppwa-topic--medium .ppwa-topic-inner::before { background: linear-gradient(180deg, #f59e0b, #a14a06); } #ppilot-weak-areas-root .ppwa-topic--low .ppwa-topic-inner::before { background: linear-gradient(180deg, #38bdf8, #0e7490); } #ppilot-weak-areas-root .ppwa-topic-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } #ppilot-weak-areas-root .ppwa-topic-titles { min-width: 0; flex: 1 1 auto; } #ppilot-weak-areas-root .ppwa-topic-title { color: var(--ppwa-ink); font-size: 16px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; } #ppilot-weak-areas-root .ppwa-topic-subject { color: var(--ppwa-muted); font-size: 13px; margin: 3px 0 0; line-height: 1.35; } #ppilot-weak-areas-root .ppwa-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; flex: 0 0 auto; max-width: none; overflow: visible; } #ppilot-weak-areas-root .ppwa-badge-text { color: inherit; white-space: nowrap; } #ppilot-weak-areas-root .ppwa-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; } #ppilot-weak-areas-root .ppwa-badge--high { background: #fef3f2; color: var(--ppwa-red); } #ppilot-weak-areas-root .ppwa-badge--medium { background: #fff8eb; color: var(--ppwa-amber); } #ppilot-weak-areas-root .ppwa-badge--low { background: #ecfeff; color: var(--ppwa-cyan); } #ppilot-weak-areas-root .ppwa-acc-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } #ppilot-weak-areas-root .ppwa-acc-value { color: var(--ppwa-ink); font-size: 24px; font-weight: 800; line-height: 1.1; } #ppilot-weak-areas-root .ppwa-acc-label { color: var(--ppwa-muted); font-size: 13px; } #ppilot-weak-areas-root .ppwa-acc-bar { height: 8px; border-radius: 999px; background: #e6eaf4; overflow: hidden; margin-top: 8px; } #ppilot-weak-areas-root .ppwa-acc-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2547d0, #6d3fd8); } #ppilot-weak-areas-root .ppwa-topic--high .ppwa-acc-fill { background: linear-gradient(90deg, #ef4444, #f97316); } #ppilot-weak-areas-root .ppwa-topic--medium .ppwa-acc-fill { background: linear-gradient(90deg, #f59e0b, #eab308); } #ppilot-weak-areas-root .ppwa-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } #ppilot-weak-areas-root .ppwa-metric { background: var(--ppwa-bg); border-radius: 10px; padding: 8px 10px; min-width: 0; } #ppilot-weak-areas-root .ppwa-metric-label { color: var(--ppwa-muted); font-size: 11.5px; font-weight: 650; line-height: 1.25; } #ppilot-weak-areas-root .ppwa-metric-value { color: var(--ppwa-ink); font-size: 17px; font-weight: 800; line-height: 1.25; margin-top: 1px; } #ppilot-weak-areas-root .ppwa-metric--red .ppwa-metric-value { color: var(--ppwa-red); } #ppilot-weak-areas-root .ppwa-metric--amber .ppwa-metric-value { color: var(--ppwa-amber); } #ppilot-weak-areas-root .ppwa-metric--blue .ppwa-metric-value { color: var(--ppwa-royal); } #ppilot-weak-areas-root .ppwa-topic-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: auto; } #ppilot-weak-areas-root .ppwa-start { width: 100%; } #ppilot-weak-areas-root .ppwa-topic-note { color: var(--ppwa-muted); font-size: 13px; line-height: 1.5; margin-top: auto; padding: 10px 12px; background: var(--ppwa-bg); border-radius: 10px; } #ppilot-weak-areas-root .ppwa-inline-error { color: var(--ppwa-red); background: #fef3f2; border: 1px solid #fecdca; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; } #ppilot-weak-areas-root .ppwa-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; } #ppilot-weak-areas-root .ppwa-pager-text { color: var(--ppwa-body); font-size: 14px; font-weight: 600; } /* Recommended practice */ #ppilot-weak-areas-root .ppwa-rec-list { display: flex; flex-direction: column; gap: 10px; } #ppilot-weak-areas-root .ppwa-rec { border: 1px solid var(--ppwa-line); border-radius: 14px; padding: 12px 14px; background: #fbfcfe; } #ppilot-weak-areas-root .ppwa-rec-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } #ppilot-weak-areas-root .ppwa-rec-title { color: var(--ppwa-ink); font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; } #ppilot-weak-areas-root .ppwa-rec-meta { color: var(--ppwa-muted); font-size: 12.5px; margin-top: 4px; line-height: 1.45; } #ppilot-weak-areas-root .ppwa-rec-covers { color: var(--ppwa-body); font-size: 12.5px; margin-top: 6px; line-height: 1.45; } #ppilot-weak-areas-root .ppwa-rec-covers-label { color: var(--ppwa-ink); font-weight: 700; } #ppilot-weak-areas-root .ppwa-rec-covers-text { color: var(--ppwa-body); } #ppilot-weak-areas-root .ppwa-rec-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; } #ppilot-weak-areas-root .ppwa-rec-attempted { color: var(--ppwa-muted); font-size: 12.5px; } #ppilot-weak-areas-root .ppwa-rec-cta { min-height: 40px; padding: 8px 14px; font-size: 13.5px; } #ppilot-weak-areas-root .ppwa-rec-locked { color: var(--ppwa-muted); font-size: 13px; font-weight: 700; } #ppilot-weak-areas-root .ppwa-access { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; flex: 0 0 auto; } #ppilot-weak-areas-root .ppwa-access-text { color: inherit; } #ppilot-weak-areas-root .ppwa-access .ppwa-icon { width: 13px; height: 13px; } #ppilot-weak-areas-root .ppwa-access--free { background: #e8f7ef; color: var(--ppwa-green); } #ppilot-weak-areas-root .ppwa-access--unlocked { background: #eef2ff; color: var(--ppwa-royal); } #ppilot-weak-areas-root .ppwa-access--locked { background: #fff4d6; color: #7a3d00; } /* Quick actions */ #ppilot-weak-areas-root .ppwa-quick-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } #ppilot-weak-areas-root .ppwa-quick-link, #ppilot-weak-areas-root .ppwa-quick-link:visited, #ppilot-weak-areas-root .ppwa-quick-link:hover, #ppilot-weak-areas-root .ppwa-quick-link:focus { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--ppwa-line); background: #ffffff; color: var(--ppwa-ink); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } #ppilot-weak-areas-root .ppwa-quick-link:hover { border-color: #b9c6ea; box-shadow: 0 6px 18px rgba(37, 71, 208, .10); transform: translateY(-1px); } #ppilot-weak-areas-root .ppwa-quick-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; background: #eef2ff; color: var(--ppwa-royal); } #ppilot-weak-areas-root .ppwa-quick--mistake_book .ppwa-quick-icon { background: #fef3f2; color: var(--ppwa-red); } #ppilot-weak-areas-root .ppwa-quick--topic_wise .ppwa-quick-icon { background: #ecfeff; color: var(--ppwa-cyan); } #ppilot-weak-areas-root .ppwa-quick--study_plan .ppwa-quick-icon { background: #e8f7ef; color: var(--ppwa-green); } #ppilot-weak-areas-root .ppwa-quick--analytics .ppwa-quick-icon { background: #f5f1ff; color: var(--ppwa-purple); } #ppilot-weak-areas-root .ppwa-quick--history .ppwa-quick-icon { background: #fff8eb; color: var(--ppwa-amber); } #ppilot-weak-areas-root .ppwa-quick-text { display: flex; flex-direction: column; min-width: 0; } #ppilot-weak-areas-root .ppwa-quick-label { color: var(--ppwa-ink); font-size: 14.5px; font-weight: 700; line-height: 1.3; } #ppilot-weak-areas-root .ppwa-quick-desc { color: var(--ppwa-muted); font-size: 12.5px; line-height: 1.35; } /* Loading / error */ #ppilot-weak-areas-root .ppwa-loading, #ppilot-weak-areas-root .ppwa-error { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; border-radius: var(--ppwa-radius); background: var(--ppwa-card); border: 1px solid var(--ppwa-line); text-align: center; } #ppilot-weak-areas-root .ppwa-loading-text { color: var(--ppwa-body); font-weight: 600; } #ppilot-weak-areas-root .ppwa-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #dbe2f0; border-top-color: var(--ppwa-royal); animation: ppwa-spin .8s linear infinite; } @keyframes ppwa-spin { to { transform: rotate(360deg); } } /* ---- ≥ 600px ---- */ @media (min-width: 600px) { #ppilot-weak-areas-root .ppwa-hero { padding: 28px; } #ppilot-weak-areas-root .ppwa-hero-title { font-size: 30px; } #ppilot-weak-areas-root .ppwa-hero-art { display: block; width: 130px; height: 130px; } #ppilot-weak-areas-root .ppwa-perf-body { flex-direction: row; align-items: center; } #ppilot-weak-areas-root .ppwa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ppilot-weak-areas-root .ppwa-toolbar { grid-template-columns: 2fr 1fr 1fr; align-items: end; } #ppilot-weak-areas-root .ppwa-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ppilot-weak-areas-root .ppwa-topic-actions { grid-template-columns: minmax(0, 1fr) auto; } #ppilot-weak-areas-root .ppwa-start { width: auto; } #ppilot-weak-areas-root .ppwa-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 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-weak-areas-root .ppwa-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(--ppwa-hero-desktop, var(--ppwa-hero-mobile, none)); } } /* ---- ≥ 900px: tablet / small desktop ---- */ @media (min-width: 900px) { #ppilot-weak-areas-root .ppwa-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ppilot-weak-areas-root .ppwa-journey { grid-column: 1 / -1; } #ppilot-weak-areas-root .ppwa-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } #ppilot-weak-areas-root .ppwa-quick-grid { grid-template-columns: 1fr; } #ppilot-weak-areas-root .ppwa-hero { padding: 32px 36px; } #ppilot-weak-areas-root .ppwa-hero-title { font-size: 34px; } #ppilot-weak-areas-root .ppwa-hero-art { width: 160px; height: 160px; margin-right: 12px; } #ppilot-weak-areas-root .ppwa-card { padding: 20px; } } /* ---- ≥ 1280px: full desktop ---- */ @media (min-width: 1280px) { #ppilot-weak-areas-root .ppwa-overview { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr); } #ppilot-weak-areas-root .ppwa-journey { grid-column: auto; } #ppilot-weak-areas-root .ppwa-perf-body { flex-direction: column; } #ppilot-weak-areas-root .ppwa-layout { grid-template-columns: minmax(0, 1fr) 380px; } #ppilot-weak-areas-root .ppwa-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } #ppilot-weak-areas-root .ppwa-topic-actions { grid-template-columns: 1fr; } #ppilot-weak-areas-root .ppwa-start { width: 100%; } } @media (min-width: 1280px) and (max-width: 1399px) { #ppilot-weak-areas-root .ppwa-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { #ppilot-weak-areas-root *, #ppilot-weak-areas-root *::before, #ppilot-weak-areas-root *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } #ppilot-weak-areas-root .ppwa-btn--primary:hover, #ppilot-weak-areas-root .ppwa-quick-link:hover { transform: none; } }