/* ==========================================================================
   The reader's shell: the writing's column, the rail beside it, and what the
   rail draws — shared by the entry page and the reflection page (2026-09-02).

   ⭐ Moved out of entry-detail.css the day the reflection page became a
   sibling of the reader (docs/redesign/reflection-page-review.md): the grid
   (`.entry-layout` / `.entry-main` / `.entry-rail`, plus the second row
   `.entry-layout--foot` / `.entry-foot`), the *Take this into Explore* box,
   the rail's sections, headings and feelings list, and the two meters —
   `.entry-scale` (ten steps) and `.entry-lean` (the line with its poles and
   the `--lean-*` tint). One definition, two pages, so the two say one fact one
   way in the label, the value and the mark.

   ⚠️ The class names keep their `entry-` prefix: they are the reader's
   vocabulary, and the reflection page is a reader with a different author.
   Renaming them would touch every browser test that measures the rail.

   ⭐ **ON A PHONE THE RAIL IS THE BOX OF ROWS** (2026-09-05, the Design 2.0
   grammar — docs/admin/design_system.md). Under the writing the rail had one
   hairline above it and then stacked unbounded; it now takes the
   `.list-surface` paint, its sections separated by hairlines. See the phone
   block at the foot of this file. Same selectors, all three readers.
   ========================================================================== */

.entry-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 274px;
    gap: var(--space-2xl);
    align-items: start;
}

/* ── The writing column ────────────────────────────────────────────────── */

.entry-main {
    min-width: 0;
}

/* ── The header's eyebrow ──────────────────────────────────────────────── */

/* Small, tracked, and above the thing it labels — the one shape the capitals
   rule reserves caps for. The date on an entry, *Pensio's weekly reflection*
   on a reflection, the category on a person. ⚠️ Lived in entry-detail.css
   until 2026-09-03, so the reflection page rendered it as a plain paragraph. */
/* Composes `.eyebrow` (components/type.css) — the template carries both
   classes; this keeps only the reader's spacing. */
.entry-eyebrow {
    margin: 0 0 var(--space-sm);
}

/* The second row of the grid: Connected Entries and the footer, in the
   writing's column (see the template's comment on why not inside <main>). */
.entry-layout--foot {
    /* The gap above the second row, on both screens: on a phone the rail is
       the last thing in the first row and has no margin of its own. */
    margin-top: var(--space-xl);
}

.entry-foot {
    min-width: 0;
}

.take-into-explore {
    margin: 0;
    padding: var(--space-lg);
    background: var(--primary-light);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.take-into-explore__heading {
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--primary-dark);
}

/* A question is a full-width, left-aligned target — it is a sentence, not a
   label, so centring it would make it read as a button rather than a thought. */
.take-into-explore__question {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: var(--space-md);
    text-align: left;
    font-size: var(--text-base-sm);
    line-height: 1.45;
    color: var(--text-color);
    background: var(--card-background);
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: border-color var(--duration-quick) var(--ease-out);
}

.take-into-explore__question:hover,
.take-into-explore__question:focus-visible {
    border-color: var(--primary);
}

/* A question with Explore's mark at its left — the reflection's and the
   person's questions; the entry's carry none. */
.take-into-explore__question--marked {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.take-into-explore__question--marked .btn__mark {
    margin-top: 2px;
    color: var(--primary);
}

.take-into-explore__own {
    align-self: flex-start;
    min-height: 44px;
    padding: 0 var(--space-md);
    cursor: pointer;
}

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

.entry-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    min-width: 0;
}

.entry-rail__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.entry-rail__heading {
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.entry-rail__feelings {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* Dot and word. No count: `primary_emotion` is one field and
   `secondary_emotions` a flat list — the extraction never asked for weights, so
   a number here would have to be invented. */
.entry-rail__feeling {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-md);
    color: var(--text-secondary);
}

.entry-rail__feeling--primary {
    font-weight: 600;
    color: var(--text-color);
}

.entry-rail__measure {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

/* Label on the left, the reading on the right — *How strongly it reads · 6 out
   of 10*, *Which way it leans · a little heavy* — then the mark under both.
   The sentence is the accessible carrier; the mark is aria-hidden. */
.entry-rail__measure-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
}

.entry-rail__measure-label {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.entry-rail__measure-value {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-align: right;
}

/*
 * ⭐ TEN STEPS, NOT A BAR (2026-09-02). One 4 px bar at 60% read as a progress
 * bar with nothing to say what 60% of it meant. Ten steps are the scale
 * itself, so "6 out of 10" can be counted without a legend.
 */
.entry-scale {
    display: flex;
    gap: 3px;
    height: 6px;
}

.entry-scale__step {
    flex: 1 1 0;
    border-radius: var(--radius-pill);
    background: var(--background-hover);
}

.entry-scale__step--on {
    background: var(--primary);
}

/*
 * ⭐ THE LINE HAS ITS ENDS AND ITS TINT (2026-09-02). A grey line with a sage
 * dot said nothing about which end was heavy. The poles are written; the thumb
 * and the stretch from the centre take the leaning's tint — `--lean-cool` for
 * heavy, `--lean-warm` for light, `--lean-even` for the middle band. The same
 * three tokens paint the reflections list bars and the help scale.
 * ⛔ Not red and green. A day is not a verdict.
 */
.entry-lean {
    --lean-colour: var(--lean-even);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.entry-lean--cool {
    --lean-colour: var(--lean-cool);
}

.entry-lean--warm {
    --lean-colour: var(--lean-warm);
}

.entry-lean__pole {
    flex: none;
    font-size: var(--text-2xs);
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* `--lean` is the datum: 0% at heavy, 50% even, 100% at light. It is the one
   inline style on the page, and it IS the number — a position has nowhere
   else to live. */
.entry-lean__track {
    position: relative;
    flex: 1 1 auto;
    height: 12px;
}

.entry-lean__track::before {
    content: "";
    position: absolute;
    inset: 4px 0;
    border-radius: var(--radius-pill);
    background: var(--background-hover);
}

.entry-lean__fill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    border-radius: var(--radius-pill);
    background: var(--lean-colour);
    opacity: 0.45;
}

.entry-lean--cool .entry-lean__fill {
    left: var(--lean, 50%);
    right: 50%;
}

.entry-lean--warm .entry-lean__fill {
    left: 50%;
    right: calc(100% - var(--lean, 50%));
}

.entry-lean--even .entry-lean__fill {
    display: none;
}

.entry-lean__centre {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: var(--border-width);
    background: var(--border-color);
}

.entry-lean__thumb {
    position: absolute;
    top: 1px;
    left: var(--lean, 50%);
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--lean-colour);
    box-shadow: 0 0 0 2px var(--card-background);
}

.entry-rail__summary {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ── Mobile ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    /* One column, and the rail simply follows the writing. Nothing moves; the
       grid stops having a second track. */
    .entry-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xl);
    }

    /* ⭐ **THE RAIL BECOMES THE BOX OF ROWS** (2026-09-05, docs/admin/
       design_system.md — the card goes on the item; the name goes on the
       ground). Beside the writing the rail is a column with air round it and
       the whitespace does the grouping. Under the writing there is no air
       left: Feelings, the two meters, Themes and the summary stacked below one
       lone hairline, unbounded, and read as more of the page rather than as
       what Pensio found. It takes the `.list-surface` paint instead — one
       white box, zero padding, sections on hairlines — so the reader's phone
       says where the writing stops.
       ⚠️ Shared by the reflection and the person page, deliberately: all three
       are readers with the same rail, and the selectors do not change. */
    .entry-rail {
        gap: 0;
        background: var(--surface-raised);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--radius-card);
        overflow: hidden;
    }

    .entry-rail__section {
        padding: var(--space-md) var(--space-lg);
    }

    .entry-rail__section + .entry-rail__section {
        border-top: var(--border-width) solid var(--border-color);
    }
}

/* ⛔ **NAMED BY TWO TEMPLATES AND DECLARED BY NOTHING.** `.entry-rail__count`
   is the "· 12" after a feeling and after a theme, on the reflection page and
   the person page. It inherited the list's size and colour, so a count sat at
   the same weight as the word it counts. */
.entry-rail__count {
    color: var(--text-muted);
    font-weight: 400;
}