/* ==========================================================================
   Reading progress — how far Pensio has got through her journal

   ⭐ THE COMPONENT IS ALMOST NOTHING, AND THAT IS DELIBERATE. The markup is a
   `.section-heading` over a `.list-surface > .list-row`, both of which already
   have every rule they need. Only three things here are its own: the mark's
   colour, and the offer line under it.

   ⛔ NOT A CARD, NOT AN ALERT. The grammar is *the card goes on the item; the
   name goes on the ground* — this is a fact about her whole journal, not an
   item she picks or opens. And it carries no warning colour: her writing is
   safe and being read, which is the opposite of an error.
   📐 docs/admin/design_system.md, core/reading_progress.py

   ⚠️ IT APPEARS ON THREE SURFACES — the dashboard, /entries/ and /usage/ —
   from one partial, so anything page-specific belongs in that page's sheet,
   never here.
   ========================================================================== */

.reading__mark {
    color: var(--terra-text);
}

/* ⭐ A SENTENCE, NOT A BANNER. The offer sits under the row as ordinary text
   at the body's quiet weight — the person most likely to read it has just
   handed Pensio her life's writing, and a call-to-action block at that moment
   reads as a toll gate. `components/pro-upsell.css` is the loud one; this is
   deliberately not it. */
.reading__offer {
    margin: var(--space-xs) 0 0;
    padding-left: var(--space-sm);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.reading__link {
    color: var(--accent-dark);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ⚠️ Must differ from the resting colour or the state is dead. A first pass
   set both to `--accent-dark` and the link had no hover at all. */
.reading__link:hover,
.reading__link:focus-visible {
    color: var(--text-primary);
}