/* Home and question-bank color system */
html:root { --nx-bg:#f1f6f8; --nx-surface-2:#f6fafb; --nx-surface-3:#e6eff2; --nx-line:#dce7eb; --nx-line-soft:#edf3f5; }
html:root body:has(#tab-home.active), html:root body:has(#tab-questions.active) { background:#f1f6f8!important; }
html:root #tab-home { --pa-navy:#173b50; --pa-accent:#0f766e; --pa-line:#dce7eb; --pa-muted:#5c7480; }
html:root #tab-home .pa-home-hero { background:linear-gradient(115deg,#173b54,#176779)!important; border:0; border-radius:18px; padding:clamp(24px,4vw,48px); margin-top:20px; box-shadow:0 16px 32px rgba(20,54,76,.14)!important; }
#tab-home .pa-home-hero :is(h1,p) { color:#fff; }
#tab-home .pa-home-hero .pa-eyebrow { color:#9ce6dc; }
#tab-home .pa-home-hero .pa-muted { color:#d8edf0; }
html:root #tab-home .pa-home-hero .pa-button { background:#fff; color:#16485a; border-color:#fff; border-radius:8px; }
html:root #tab-home .pa-home-hero .pa-button.secondary { background:transparent; color:#fff; border-color:#a3cbd1; }
html:root #tab-home .pa-home-search button { background:#0f766e; color:#fff; border-color:#0f766e; border-radius:7px; }
html:root #tab-home .pa-tools { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; border:0; }
html:root #tab-home .pa-tool { display:grid; grid-template-columns:28px 1fr; border:1px solid #dce7eb; border-radius:12px; padding:18px; background:#fff; box-shadow:0 4px 14px rgba(20,54,76,.04); text-decoration:none; }
html:root #tab-home .pa-tool:hover { border-color:#8bcacd; background:#f4fbfa; transform:translateY(-2px); }
html:root #tab-home .pa-tool svg { display:block; }
html:root #tab-home .pa-tool strong { display:block; min-width:0; }
html:root #tab-home .pa-tool span { display:block; }
html:root #tab-home .pa-review-links a { border:1px solid #dce7eb; background:#fff; padding:9px 13px; border-radius:8px; text-decoration:none; }
html:root #tab-home #continue-session-card { background:linear-gradient(115deg,#e6f6f3,#ecf5f9)!important; border-color:#c7e7e1; border-radius:12px!important; }
.question-performance { padding:22px; margin:24px 0 16px; border:1px solid #dce7eb; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(20,54,76,.05); }
.question-performance h1 { margin:0; font-size:26px; color:#173b50; }
.question-performance-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.question-performance-stats > div { background:#f2f8fa; padding:12px 14px; border-radius:9px; }
.question-performance-stats span { display:block; font-size:12px; color:#58717e; margin-bottom:4px; }
.question-performance-stats strong { display:block; font-size:21px; color:#173b50; }
.question-performance-stats small { font-size:13px; font-weight:400; }
.pa-performance { margin:24px 0; border:1px solid #dce7eb; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 8px 24px rgba(20,54,76,.05); }
.question-performance .pa-performance { box-shadow:none; margin:0; border-radius:12px; }
.pa-performance-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:23px 25px; background:linear-gradient(105deg,#e9f5f6,#f5fafb); border-bottom:1px solid #dce7eb; }
.pa-performance-heading small { display:block; color:#0f766e; font-size:11px; font-weight:800; letter-spacing:.1em; margin-bottom:5px; }
.pa-performance-heading h2 { margin:0 0 4px; color:#173b50; font-size:22px; }
.pa-performance-heading p,.pa-trend-heading p,.pa-trend-note { margin:0; color:#607784; font-size:12px; }
.pa-performance-body { padding:18px 22px 20px; }
.pa-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.pa-metrics > div { background:#f1f7f9; border:1px solid #e1edf0; border-radius:10px; padding:13px 15px; }
.pa-metrics span { display:block; font-size:12px; color:#57707d; }
.pa-metrics strong { display:block; font-size:25px; color:#153d53; margin-top:3px; }
.pa-trend-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; margin:22px 0 13px; }
.pa-trend-heading h3 { margin:0 0 3px; color:#173b50; font-size:17px; }
.pa-periods { display:flex; gap:3px; padding:3px; background:#eaf2f5; border-radius:9px; }
.pa-periods button { border:0; border-radius:7px; padding:7px 12px; background:transparent; color:#526e7c; font-size:12px; font-weight:700; cursor:pointer; }
.pa-periods button[aria-pressed="true"] { background:#fff; color:#0b766f; box-shadow:0 1px 4px #cbdde3; }
.pa-trend-chart { display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:7px; min-height:165px; border-bottom:1px solid #cbdde3; padding:4px 3px 0; }
.pa-trend-item { display:flex; flex-direction:column; align-items:center; justify-content:end; min-width:0; }
.pa-trend-value { font-size:10px; color:#246c70; font-weight:700; height:17px; }
.pa-trend-track { width:100%; max-width:38px; height:110px; display:flex; align-items:end; background:repeating-linear-gradient(to top,#edf3f5 0,#edf3f5 1px,transparent 1px,transparent 27px); }
.pa-trend-bar { display:block; width:100%; background:linear-gradient(180deg,#2ca8a0,#0e6d76); border-radius:5px 5px 0 0; }
.pa-trend-label { font-size:10px; color:#687e88; height:29px; padding-top:5px; text-align:center; white-space:nowrap; overflow:hidden; width:100%; }
.pa-trend-note { margin-top:10px; }
html:root #hp-progress-strip { border-radius:12px!important; box-shadow:0 5px 18px rgba(20,54,76,.05)!important; }
@media(max-width:900px) { html:root #tab-home .pa-tools { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .pa-metrics,.question-performance-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .pa-performance-heading,.pa-trend-heading { align-items:start; flex-direction:column; } .pa-trend-chart { gap:2px; } .pa-trend-label { font-size:8px; } .question-performance { padding:14px; } }

.pa-trend-chart[data-period=week],.pa-trend-chart[data-period=month] { grid-template-columns:repeat(12,minmax(0,1fr)); }
.pa-trend-item:focus-visible { outline:2px solid #0f766e; outline-offset:2px; }

/* Accuracy trend: connected observations, with gaps for inactive periods. */
.pa-trend-chart,.pa-trend-chart[data-period=week],.pa-trend-chart[data-period=month] { display:block; overflow-x:auto; min-height:0; border:0; padding:0; }
.pa-line-plot { position:relative; min-width:560px; width:100%; }
.pa-line-plot svg { display:block; width:100%; height:auto; }
.pa-line-plot text { fill:#607784; font:10px sans-serif; }
.pa-line-grid { stroke:#e3ecef; stroke-width:1; }
.pa-line-series { fill:none; stroke:#0f827d; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.pa-line-point { position:absolute; transform:translate(-50%,-50%); width:24px; height:24px; padding:0; border:0; background:transparent; border-radius:50%; cursor:pointer; }
.pa-line-point::after { content:''; position:absolute; inset:7px; background:#fff; border:2px solid #0f827d; border-radius:50%; }
.pa-line-point:focus-visible { outline:2px solid #173b50; outline-offset:2px; }
.pa-line-tip { display:none; position:absolute; bottom:26px; left:50%; transform:translateX(-50%); white-space:nowrap; padding:7px 10px; background:#173b50; color:white; font-size:12px; border-radius:5px; z-index:2; pointer-events:none; }
.pa-line-point:hover .pa-line-tip,.pa-line-point:focus .pa-line-tip { display:block; }
.pa-line-point:first-of-type .pa-line-tip { left:0; transform:none; }
.pa-line-point:last-of-type .pa-line-tip { left:auto; right:0; transform:none; }