/* ==========================================================================
   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.
   ========================================================================== */

/* ⭐ **THE READERS' SIDE GUTTER IS THE ONE EVERY OTHER SCREEN HAS** (2026-10-09).
   An entry, a reflection and a person are not `.page` (their grid is wider on
   purpose: components/page.css), so they never got its side padding. Their
   words started 16px from the edge where the Journal's list starts 28px, 12px
   closer than every other screen, and on an iPhone Duo's inner display it read
   as text touching the bezel. Same padding as `.page`, at the same breakpoint.
   🧪 tests/browser/test_a_reader_has_the_same_gutter_as_every_screen.py */
.reader {
    padding-inline: var(--space-md);
}

@media (max-width: 40rem) {
    .reader {
        padding-inline: var(--space-sm);
    }
}

.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;
}

/* The slot the poller fills when a recording's words land; nothing until then. */
.take-into-explore-slot:empty {
    display: none;
}

.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);
}

/* Whose questions these are (DR-007), on the reading's only — quiet, under the
   heading, never louder than the questions it labels. */
.take-into-explore__note {
    margin: calc(-1 * var(--space-xs)) 0 var(--space-2xs);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* 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);
}

/* No colour of its own: Explore's mark draws in `--mark-ink`
   (components/icon.css). A `--primary` here outranked it and left the
   picture 2.31:1 off its body in light. */
.take-into-explore__question--marked .btn__mark {
    margin-top: 2px;
}

.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);
}

/* A mood alone (2026-09-27): the sentence under "Your mood" saying it is the
   entry's feeling. Off the list's own rhythm, so it reads as a note on it. */
.entry-rail__feelings + .analysis-pending-text {
    margin-top: var(--space-sm);
}

.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;
}