/* ==========================================================================
   Type — the ladder, and the text rungs every screen composes from
   ==========================================================================

   THE RULE. Canonical text; docs/admin/design_system.md and
   components/cards.css quote it, and tests/core/
   test_the_grammar_is_stated_once.py goes red if the three drift:

       The card goes on the item; the name goes on the ground.

   Two tests decide everything else. If you cannot write the item's title and
   she does not pick it to start writing, it is a row. If a heading is inside
   a box, move it out.

   ⛔ WHY A LADDER, AND WHY IT IS ONE FILE. Design 2.0 shipped tokens and no
   hierarchy, so each screen invented its own: Memory's group heading was an
   11px caps label the SAME size as the provenance eyebrow beside it and
   SMALLER than the 16px rows it named; People's was the same; Open Questions'
   was 12px; Prompts' was 17px and LIGHTER than the 18px prompt under it.
   Every one of those screens "felt like another app" for the same reason —
   the name of a group sat at the level of its contents, or under it.

   ⭐ THE LADDER. Adjacent rungs differ on at least two of size, weight,
   colour, casing and surface, at 390 and at 1280. Caps live on ONE rung, so
   two caps lines are never neighbours. A heading is never smaller or lighter
   than what it labels.

       page title       h1 / .page-title     28 → 32   400   Outfit    ink
       numeral          .rail-group__number  24 (20)   400   Jakarta   ink
       section heading  h2 / .section-heading 20       500   Outfit    ink
       prose            .prose               18        400   Jakarta   ink
       sub-heading      h3                   18        500   Outfit    ink
       item title       h4 / .item__title    16        600   Outfit    ink
       row sentence     .item__text          16        400   Jakarta   ink
       lede             .page-lede           16        400   Jakarta   secondary
       body             .item__desc          15        400   Jakarta   secondary
       control          .btn / .btn-sm       14 / 13   500   Jakarta   on-fill
       meta             .meta                12        400   Jakarta   muted
       eyebrow          .eyebrow             11 caps   600   Jakarta   muted
       badge            .badge               11        600   Jakarta   on-tint
       hand note        .rail-gap__label     18        400   Caveat    muted

   ⚠️ The element rules for h1–h6 live in main.css (weights declared there,
   once). The classes here exist for the same rungs on elements that cannot
   be an h-tag, and for the rungs that are not headings at all.

   📐 docs/admin/design_system.md "The ladder" — the numbers here that are
   product decisions (the 24-character eyebrow cap, the page measure, 20px
   for a section heading) are recorded there with the reason.
   ========================================================================== */

/* ── Page head: one h1, at most one lede, on the ground ─────────────────── */

.page-title {
    margin: 0 0 var(--space-2xs);
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text-color);
    text-wrap: balance;
}

@media (min-width: 768px) {
    .page-title {
        font-size: var(--text-3xl);
    }
}

/* ONE sentence under the title, secondary, 60ch. Five pages had their own
   copy of this (.memory-lede, .notifications-lede, .page-header .subtitle,
   .prompts-page__lede, .templates-page__lede); this is the one. */
.page-lede,
.page-subtitle {
    margin: 0 0 var(--space-xl);
    max-width: 60ch;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ── Section heading: the name of a run of items, ON THE GROUND ─────────── */

/* The /entries/ month heading, promoted to a component and given a real step
   over the 16px item title. Sentence case, Outfit 20/500 ink, a hairline rule
   and a 12px count beside it, an optional 15px note beneath. It sits ABOVE
   the container (card stack or list surface), never inside it: the surface
   beneath is the container, so a group gets no box of its own.

   ⛔ NOT AN EYEBROW. The eyebrow is the smallest text on the page and the
   only caps; using it as a section heading is the exact device that
   collapsed Memory, People and the person page. */
.section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-md);
    margin: 0 0 var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--text-color);
}

.section-heading__name {
    flex-shrink: 0;
}

.section-heading__rule {
    flex: 1;
    min-width: var(--space-xl);
    height: var(--border-width);
    background: var(--border-color);
    align-self: center;
}

/* The count is body face at 400 so it stops inheriting the heading's Outfit
   and weight — a number is a fact beside the name, not part of it. */
.section-heading__count {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Inside the heading (a span) or right after it (a <p>, so a link or a
   sentence never becomes part of the heading's accessible name). */
.section-heading__note {
    flex-basis: 100%;
    margin: 0;
    max-width: 60ch;
    font-family: var(--font-body);
    font-size: var(--text-base-sm);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--text-secondary);
}

.section-heading + .section-heading__note {
    margin: calc(-1 * var(--space-xs)) 0 var(--space-md);
}

/* ── Eyebrow: the ONE uppercase shape in the app ────────────────────────── */

/* At most 24 characters, no trailing period, directly above the one thing
   it labels, INSIDE a card, row or rail. Never a heading in the page flow.
   Face is declared so an h-tag eyebrow cannot inherit Outfit. 49 copies of
   `letter-spacing: 0.09em` in 32 sheets, in four sizes and four colours,
   collapse onto this rule. */
.eyebrow {
    display: block;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--text-muted);
}

/* The prompt note and anything time-sensitive. No ink, sage or larger
   variant exists on purpose — a louder eyebrow is a heading wearing caps. */
.eyebrow--terra {
    color: var(--terra-text);
}

/* ── Meta: the facts under an item ──────────────────────────────────────── */

.meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Prose and quote: her words ─────────────────────────────────────────── */

/* The reader's measure. The entry, the reflection, a thread — on the
   ground, never in a box. (The `.prose a[href…]` mention-link rules stay in
   main.css; they are about links, not the measure.) */
.prose {
    max-width: 66ch;
    font-size: var(--text-lg);
    line-height: 1.75;
    color: var(--text-color);
    text-wrap: pretty;
}

.prose p + p {
    margin-top: var(--space-md);
}

/* Rendered markdown inside the measure. These were in `list-pages.css`, so
   they reached the entry reader and a person's notes and NOT the reflection,
   the thread page or Open Questions — the same body of text, styled on three
   pages and unstyled on three others. The sheet was retired on 2026-09-05 and
   `.prose` means one thing everywhere now.
   ⚠️ `main.css`'s `.entry-content.prose *` block out-specifies every rule here
   (0,2,1 against 0,1,1), so the reader keeps its own longer-standing set. */
.prose h1,
.prose h2,
.prose h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.prose ul,
.prose ol {
    margin: var(--space-md) 0;
    padding-left: 1.5em;
}

.prose blockquote {
    margin: var(--space-md) 0;
    padding-left: var(--space-md);
    border-left: var(--border-width-lg) solid var(--primary);
    color: var(--text-secondary);
    font-style: italic;
}

.prose a {
    color: var(--primary);
    text-decoration: underline;
}

.prose a:hover {
    color: var(--primary-dark);
}

.prose code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bento-bg);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* Her own words quoted back — a pulled line, the prompt on the writing door.
   Lora italic, and nothing else in the app is. */
.quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--text-color);
}