/* ==========================================================================
   Group — a named run of items, and the rail that puts time beside it
   ==========================================================================

   A group is a `.section-heading` on the ground (type.css) over ONE
   container — a `.card-stack` of cards or a `.list-surface` of rows
   (cards.css). It has no box of its own: the surface beneath the heading is
   the container. This file holds the run's spacing and the one landmark
   column the app draws beside a run: the day rail.

   ⭐ THE RAIL. Time as the structure: a 64px column (44px on a phone) with
   the day's numeral over its weekday eyebrow, beside a stack of cards or a
   list surface; the dashed "N quiet days" marker in the hand font. Built
   once for /entries/ (entry-list.css, v0.79.x), reused by a person's
   mentions and the reflections list — so it lives here, under a name that
   is not "entry".

   ⚠️ The `.entry-day__*` / `.entry-gap__*` names stay as aliases:
   entry_list.html still renders them and tests/browser/
   test_the_entry_list_reads_as_days.py locates them. The numeral is 400,
   not 300 — 300 was never loaded (base.html requests Outfit 400–600 and
   Plus Jakarta Sans 400–600), so 400 is what has always rendered.
   ========================================================================== */

/* ── The run ───────────────────────────────────────────────────────────── */

.group {
    margin: 0 0 var(--space-2xl);
}

/* ── The day rail ──────────────────────────────────────────────────────── */

.rail-group,
.entry-day {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);   /* 64px rail */
    gap: 0 var(--space-base);
    margin: 0 0 var(--space-lg);
    align-items: start;
}

.rail-group__rail,
.entry-day__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--space-md);
    line-height: 1.1;
}

.rail-group__number,
.entry-day__number {
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

/* The weekday composes `.eyebrow` (the template adds the class): the one
   place tracked capitals sit UNDER the thing they label, because the pair
   reads as one block. */
.rail-group__label,
.entry-day__weekday {
    margin-top: var(--space-2xs);
}

.rail-group__items,
.entry-day__entries {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;   /* lets a line clamp actually clamp inside a grid cell */
    max-width: var(--measure-page);
}

/* ── A gap in the writing ──────────────────────────────────────────────── */

.rail-gap,
.entry-gap {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-lg) 0 var(--space-lg) 4rem;   /* aligns past the rail */
    padding: 0;
}

.rail-gap__rule,
.entry-gap__rule {
    flex: 1;
    height: 0;
    border-top: var(--border-width) dashed var(--border-color);
}

.rail-gap__label,
.entry-gap__label {
    flex-shrink: 0;
    font-family: var(--font-hand);
    font-size: var(--text-lg);
    color: var(--text-muted);
    line-height: 1;
}

/* ── Phone ─────────────────────────────────────────────────────────────── */

/* The rail narrows but does not disappear: the day number is the thing that
   makes the list scannable, and dropping it on the screen most of this is
   read on would remove the redesign's whole point. */
@media (max-width: 640px) {
    .rail-group,
    .entry-day {
        grid-template-columns: 2.75rem minmax(0, 1fr);
        gap: 0 var(--space-md);
    }

    .rail-group__number,
    .entry-day__number {
        font-size: var(--text-xl);
    }

    .rail-gap,
    .entry-gap {
        margin-left: 2.75rem;
    }
}