/* --------------------------------------------------------------------------
   Plan — where she stands, said loudly (2026-09-03)

   ⛔ **THE TIER WAS A 20 px LINE OF TEXT** with one sentence of prose under it,
   in a block whose whole job is to answer *what am I on and what does it get
   me*. Gabriel: *"Plan should have more highlight if it is a free user."*

   ⭐ **THE FREE STATE IS THE ONE THAT NEEDS THE VOLUME**, so the tint is on
   `--free` only: a Pro account already has the answer it came for, and painting
   its card too would make the tint mean nothing.

   ⛔ **AND THESE ARE THE ONLY TWO SCREENS IN THE PRODUCT THAT MAY SELL** — the
   Plan tab and /usage/. DR-009 keeps upgrade prompts out of Explore's own
   painful moments; these are the places a person opens IN ORDER TO think about
   their plan.

   ⭐ **ONE CARD, TWO SCREENS** (2026-10-12): `core/includes/_plan_card.html`,
   so the plan's name, where it is managed and the full-width offer cannot
   disagree between them.

   ⭐ **IT IS THE ONE REAL CARD ON EITHER SCREEN** — a single item she looks at
   and acts on — so it composes `.card-surface` and only its own volume lives
   here.
   -------------------------------------------------------------------------- */
/* ⚠️ Held to the same `--measure-page` as the table under it: at full width the
   card ran past the table's right edge on a wide window and the two read as
   misaligned (2026-10-12). */
.plan-state {
    max-width: var(--measure-page);
    margin-bottom: var(--space-2xl);
}

.plan-state--free {
    border-color: var(--accent-on-surface);
    background: var(--accent-tint);
}

.plan-state__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* ⚠️ The card's title, a rung above `.item__title` on purpose: this line is the
   answer to the question the whole tab asks. */
.plan-state__name {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin: var(--space-2xs) 0 0;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-color);
}

.plan-state__actions {
    display: flex;
    gap: var(--space-2xs);
}

.plan-state__actions form {
    margin: 0;
}

/* ⭐ Counted DOWN — "two conversations left" is the answer; "3 / 5" is the raw
   material for it. The same numbers /usage/ shows, from `core/plan_state.py`. */
.plan-state__usage {
    margin: var(--space-md) 0 0;
    font-size: var(--text-base-sm);
    color: var(--text-color);
}

.plan-state__more {
    display: block;
    margin-top: var(--space-2xs);
    font-size: var(--text-md);
}

.plan-state__note {
    margin: var(--space-sm) 0 0;
    font-size: var(--text-md);
    color: var(--text-secondary);
}

/* ⭐ The offer closes the card at full width, after the reason to press it —
   Quick Capture's shape, not a pill in the corner. */
.plan-state__cta {
    margin-top: var(--space-lg);
}

/* ⭐ HER OWN CASE (/usage/, Free): up to three sentences built from her own
   numbers, between the plan's name and the offer. A list, because each is one
   reason; no bullets, because they read as sentences. */
.plan-state__reasons {
    margin: var(--space-md) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2xs);
    font-size: var(--text-base-sm);
    color: var(--text-color);
}