/* "Your plan this month" — the study-desk card for paying students.
   A sibling of the desk's Up next card (ds/quiz-paper.css, "The desk"): the
   same charcoal card, hairline, and shared workspace typography. Purple is reserved for the one primary action, which only the
   new-subscriber state has. Kept in its own file so it never conflicts with
   edits to quiz-paper.css. */

#statsPage .plan-month {
    --pm-card: #18181b; --pm-well: #111113; --pm-rule: #2a2a30; --pm-rule-strong: #6b6b75; --pm-line: #38383f;
    --pm-ink: #f5f5f7; --pm-ink-2: #b5b5bf; --pm-ink-3: #8e8e99;
    --pm-action: #5940d6; --pm-action-hover: #4932b8; --pm-link: #b6a6ff; --pm-focus: #b6a6ff;
    --pm-low: #f0c779; --pm-bar: #2a2a30;
    --pm-serif: var(--qp-serif, 'Source Serif 4', 'Iowan Old Style', Georgia, serif);
    --pm-sans: var(--qp-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    --pm-mono: var(--qp-mono, 'JetBrains Mono', ui-monospace, Menlo, monospace);
    margin: 0 0 18px; padding: 36px;
    border: 1px solid var(--pm-rule); border-radius: 12px;
    background: var(--pm-card); color: var(--pm-ink);
    font: 400 1rem/1.55 var(--pm-sans);
}
#statsPage .plan-month[hidden] { display: none; }
/* One slot, never both: the upgrade card yields to the plan card. */
#statsPage:has(#planMonth:not([hidden])) #dashUpsell { display: none; }

#statsPage .plan-month a { color: var(--pm-link); font-weight: 600; text-underline-offset: 4px; }
#statsPage .plan-month a:hover { color: var(--pm-ink); }
#statsPage .plan-month :is(a, button, h2):focus-visible { outline: 2px solid var(--pm-focus); outline-offset: 3px; border-radius: 4px; }
#statsPage .plan-month h2:focus { outline: none; }
#statsPage .plan-month h2:focus-visible { outline: 2px solid var(--pm-focus); }

.plan-month .pm-top {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px;
    margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--pm-rule-strong);
}
.plan-month .pm-label { margin: 0; font: 600 .6875rem/1.4 var(--pm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pm-ink-2); }
.plan-month .pm-renew { margin: 0; font: 500 .875rem/1.4 var(--pm-sans); color: var(--pm-ink-2); }
.plan-month .pm-head h2 {
    margin: 0 0 4px; font: 600 2rem/1.15 var(--font-display);
    letter-spacing: -.015em; color: var(--pm-ink);
}
.plan-month .pm-head p { margin: 0; font-size: .9375rem; color: var(--pm-ink-2); }

.plan-month .pm-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; margin-top: 26px; }

.plan-month .pm-ledger {
    display: grid; grid-template-columns: repeat(var(--pm-cols, 4), minmax(0, 1fr));
    margin: 0; border-top: 1px solid var(--pm-rule); border-bottom: 1px solid var(--pm-rule);
}
.plan-month .pm-ledger > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 16px 16px 14px 0; }
.plan-month .pm-ledger > div + div { padding-left: 16px; border-left: 1px solid var(--pm-rule); }
.plan-month .pm-ledger dt { font: 400 .8125rem/1.35 var(--pm-sans); color: var(--pm-ink-2); }
.plan-month .pm-ledger dd {
    margin: 0; font: 400 2.125rem/1 var(--pm-serif); letter-spacing: -.02em; color: var(--pm-ink);
    font-variant-numeric: lining-nums tabular-nums;
}
.plan-month .pm-days, .plan-month .pm-empty { margin: 14px 0 0; font: 400 .9375rem/1.5 var(--pm-sans); color: var(--pm-ink-2); }
.plan-month .pm-empty { margin-top: 0; }
.plan-month .pm-days b { color: var(--pm-ink); font-weight: 600; }

.plan-month .pm-sub { margin: 0 0 10px; font: 600 .6875rem/1.3 var(--pm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pm-ink-2); }
.plan-month .pm-left ul { list-style: none; margin: 0; padding: 0; }
.plan-month .pm-left li { padding: 12px 0; border-top: 1px solid var(--pm-rule); }
.plan-month .pm-left li:first-child { border-top: 0; padding-top: 2px; }
.plan-month .pm-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.plan-month .pm-row-name { font: 600 .9375rem/1.4 var(--pm-sans); color: var(--pm-ink); }
.plan-month :is(.pm-row-val, .pm-nudge p, .pm-reset, .pm-steps p) { text-wrap: pretty; }
.plan-month :is(.pm-ledger dt, .pm-steps h3) { text-wrap: balance; }
.plan-month .pm-row-val { font: 400 .8125rem/1.4 var(--pm-sans); color: var(--pm-ink-2); }
.plan-month .pm-row-val strong { color: var(--pm-low); font-weight: 700; }
.plan-month .pm-meter { position: relative; height: 4px; margin-top: 9px; border-radius: 2px; background: var(--pm-bar); overflow: hidden; }
.plan-month .pm-meter > span { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--pm-link); }
.plan-month .pm-meter.is-low > span { background: var(--pm-low); }
.plan-month .pm-reset { margin: 10px 0 0; font: 400 .875rem/1.5 var(--pm-sans); color: var(--pm-ink-3); }

.plan-month .pm-nudge {
    display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: baseline; gap: 4px 20px;
    margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--pm-rule);
}
.plan-month .pm-nudge .pm-sub { margin: 0; }
.plan-month .pm-nudge p { margin: 0; color: var(--pm-ink-2); }
.plan-month .pm-nudge p b { color: var(--pm-ink); font-weight: 600; }
.plan-month :is(.pm-nudge, .pm-foot) a { white-space: nowrap; }

.plan-month .pm-foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pm-rule);
    font-size: .875rem; color: var(--pm-ink-3);
}
.plan-month .pm-foot > :last-child { margin-left: auto; }
.plan-month .pm-dismiss {
    min-height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--pm-ink-2); font: 500 .875rem/1.4 var(--pm-sans); text-decoration: underline; text-underline-offset: 4px;
}
.plan-month .pm-dismiss:hover { color: var(--pm-ink); }

/* New subscriber: what the plan adds, one step per feature. */
.plan-month .pm-steps { list-style: none; margin: 0; padding: 0; counter-reset: pm-step; border-top: 1px solid var(--pm-rule); }
.plan-month .pm-steps li {
    counter-increment: pm-step; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: 4px 14px;
    padding: 16px 0; border-bottom: 1px solid var(--pm-rule);
}
.plan-month .pm-steps li::before { content: counter(pm-step, decimal-leading-zero); font: 600 .75rem/1 var(--pm-mono); color: var(--pm-ink-3); }
.plan-month .pm-steps h3 { margin: 0; font: 600 1rem/1.4 var(--pm-sans); color: var(--pm-ink); }
.plan-month .pm-steps p { margin: 2px 0 0; font: 400 .875rem/1.5 var(--pm-sans); color: var(--pm-ink-2); }
.plan-month .pm-state { display: block; margin-top: 4px; font: 600 .625rem/1.3 var(--pm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pm-ink-3); }
.plan-month .pm-state.is-done { color: var(--pm-ink-2); }
#statsPage .plan-month a.pm-go {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 8px;
    background: var(--pm-action); color: #fff; font: 600 .9375rem/1 var(--pm-sans); text-decoration: none; white-space: nowrap;
}
#statsPage .plan-month a.pm-go:hover { background: var(--pm-action-hover); color: #fff; }
.plan-month .pm-steps a:not(.pm-go) { white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
    .plan-month .pm-meter > span { transition: width .4s cubic-bezier(.16, 1, .3, 1); }
}

/* Beside a sidebar the two columns squeeze the ledger labels to three lines. */
@media (max-width: 1240px) {
    .plan-month .pm-body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 900px) {
    #statsPage .plan-month { padding: 20px; }
    .plan-month .pm-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan-month .pm-ledger > div:nth-child(odd) { padding-left: 0; border-left: 0; }
    .plan-month .pm-ledger > div:nth-child(n+3) { border-top: 1px solid var(--pm-rule); }
    .plan-month .pm-row { flex-direction: column; align-items: flex-start; }
    .plan-month .pm-sep { display: none; }
    .plan-month .pm-day { display: block; }
    .plan-month .pm-nudge { grid-template-columns: minmax(0, 1fr); }
    .plan-month .pm-steps li { grid-template-columns: 2rem minmax(0, 1fr); }
    .plan-month .pm-steps li > :last-child { grid-column: 2; justify-self: start; }
}