/* "Am I improving?" desk card. Own file so it never conflicts with
   quiz-paper.css. Charcoal card, one hairline, shared workspace heading; purple is used
   only for the sparkline stroke and links. Every status carries a symbol and a
   word, never colour alone. */
#statsPage .progress-card {
    --pc-card: #18181b; --pc-rule: #2a2a30; --pc-ink: #f5f5f7; --pc-ink-2: #b5b5bf; --pc-ink-3: #8e8e99;
    --pc-link: #b6a6ff; --pc-earned: #9ddbb5; --pc-missed: #f3aba3;
    margin: 0 0 18px; padding: 24px;
    border: 1px solid var(--pc-rule); border-radius: 12px;
    background: var(--pc-card); color: var(--pc-ink);
    font: 400 1rem/1.5 var(--qp-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
}
#statsPage .progress-card[hidden] { display: none; }
.progress-card .pc-label { margin: 0 0 14px; font: 600 .6875rem/1.4 var(--qp-mono, 'JetBrains Mono', ui-monospace, Menlo, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-ink-3); }
.progress-card .pc-empty { margin: 0; font: 600 1.375rem/1.25 var(--font-display); }
.progress-card .pc-verdict { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.progress-card .pc-verdict h2 { margin: 0; font: 600 1.625rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--pc-ink); }
.progress-card[data-state="steady"] .pc-verdict h2 { color: var(--pc-ink-2); }
.progress-card[data-state="slipping"] .pc-verdict h2 { color: var(--pc-missed); }
.progress-card .pc-delta { font: 600 .9375rem/1.2 var(--qp-sans, system-ui, sans-serif); color: var(--pc-earned); }
.progress-card[data-state="steady"] .pc-delta { color: var(--pc-ink-2); }
.progress-card[data-state="slipping"] .pc-delta { color: var(--pc-missed); }
.progress-card .pc-sub { margin: 6px 0 0; font-size: .8125rem; color: var(--pc-ink-2); }
.progress-card .pc-spark { display: block; width: 100%; height: 48px; overflow: visible; }
.progress-card .pc-spark path { fill: none; stroke: #b6a6ff; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.progress-card .pc-spark circle { fill: #18181b; stroke: #b6a6ff; stroke-width: 1.5; }
.progress-card .pc-spark circle.pc-latest { fill: #b6a6ff; }
.progress-card .pc-topic { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: .875rem; color: var(--pc-ink-2); }
.progress-card .pc-topic strong { color: var(--pc-ink); font-weight: 600; }
.progress-card a { color: var(--pc-link); font-weight: 600; text-underline-offset: 4px; }
.progress-card a:hover { color: var(--pc-ink); }
.progress-card a:focus-visible { outline: 2px solid var(--pc-link); outline-offset: 3px; border-radius: 4px; }
.progress-card .pc-foot { margin: 14px 0 0; font-size: .75rem; color: var(--pc-ink-3); }
.progress-card .pc-count { margin: 12px 0 0; display: flex; align-items: center; gap: 12px; font-size: .875rem; color: var(--pc-ink-2); }
.progress-card .pc-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--pc-rule); overflow: hidden; }
.progress-card .pc-bar span { display: block; height: 100%; background: #b6a6ff; }
/* Free accounts: honest locked rows (real text, no fake charts) and one upgrade
   ask. The generic desk upgrade card yields while this section shows. */
#statsPage:has(.progress-card .pc-locked) #dashUpsell { display: none; }
.progress-card .pc-locked { order: 2; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pc-rule); }
.progress-card .pc-locked-label { margin: 0 0 12px; font: 600 .6875rem/1.4 var(--qp-mono, 'JetBrains Mono', ui-monospace, Menlo, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-ink-3); }
.progress-card .pc-rows { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.progress-card .pc-row { display: flex; gap: 10px; align-items: flex-start; }
.progress-card .pc-row svg { flex: none; margin-top: 3px; }
.progress-card .pc-row-name { display: block; font-size: .875rem; line-height: 1.4; color: var(--pc-ink-2); }
.progress-card .pc-row-desc { display: block; font-size: .75rem; line-height: 1.4; color: var(--pc-ink-3); }
.progress-card .pc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.progress-card a.pc-cta { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 18px; border: 1px solid #38383f; border-radius: 8px; background: transparent; color: var(--pc-ink); font-size: .875rem; font-weight: 600; text-decoration: none; }
.progress-card a.pc-cta:hover { background: #222226; color: var(--pc-ink); }
.progress-card .pc-price { margin: 8px 0 0; font-size: .75rem; color: var(--pc-ink-3); }
@media (max-width: 480px) { .progress-card a.pc-cta { display: flex; width: 100%; } }

/* Stacked (below 900px): sparkline sits between the sub-line and the topic line. */
.progress-card { display: flex; flex-direction: column; }
.progress-card .pc-main { display: contents; }
.progress-card :is(.pc-label, .pc-verdict, .pc-sub) { order: 0; }
.progress-card .pc-aside { order: 1; margin: 18px 0 14px; }
.progress-card .pc-topic { order: 2; }
.progress-card :is(.pc-foot, .pc-count) { order: 4; }
@media (min-width: 900px) {
    #statsPage .progress-card[data-spark="1"] { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 40px; align-items: center; }
    .progress-card[data-spark="1"] .pc-main { display: block; }
    .progress-card[data-spark="1"] .pc-aside { margin: 0; }
    .progress-card[data-spark="1"] .pc-spark { width: 360px; height: 72px; }
    .progress-card[data-spark="1"] .pc-topic { margin-top: 18px; }
}
@media (max-width: 480px) { #statsPage .progress-card { padding: 20px; } }