/* journal — this screen owns this file. See the comment beside the <link> in index.html.
   Rules that two screens want belong in style.css, not duplicated here.

   The one rule this file exists to keep visible: a MEASUREMENT and a CLAIM must not be able to be
   skimmed as the same thing. `.journal__rule` says it in words above the thread, and the claim block
   in style.css says it again in colour and border inside a step. Neither is enough alone — the words
   are missed by somebody scanning, and the colour is missed on a monochrome screen. */

.journal__rule {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--notice);
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.9rem;
    max-width: 46rem;
    overflow-wrap: anywhere;
}

.journal__hint {
    margin: 0.5rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    max-width: 46rem;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ the contents page */

.journal__chapters {
    margin-bottom: 0.75rem;
}

.journal__chaptershead {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

/* Its OWN sideways scroll, never the page's (`11` rule 3). A journal with thirty chapters is the
   most likely thing on this screen to be wider than a phone, and the page must not move under a
   thumb because of it. `nowrap` is what forces the strip to overflow here instead of reflowing. */
.journal__chapterstrip {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    -webkit-overflow-scrolling: touch;
}

.journal__chapter {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 0 0 auto;
    min-width: 9.5rem;
    max-width: 15rem;
    text-align: left;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.journal__chapter:hover,
.journal__chapter:focus-visible {
    border-color: var(--text-muted);
}

/* Border weight as well as colour, so which chapter everybody is in survives a monochrome screen. */
.journal__chapter--current {
    border-color: var(--accent);
    border-left-width: 4px;
    background: var(--accent-weak);
}

.journal__chapnum {
    font-weight: 600;
}

.journal__chapwhen,
.journal__chapsums {
    color: var(--text-muted);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ a mark, opened */

/* A mark row is a button now, because a merged entry that says "x12" and cannot be opened does to
   the reader exactly what merging was careful not to do to the journal. It keeps the row's own
   layout — kind, detail, hour on one wrapping line — rather than the step row's stacked one. */
.journal__open--mark {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
}

/* A mark's detail is a whole paragraph the platform wrote — a watchdog reason, the before-and-after
   of every limit. In full it makes one row fifteen lines tall on a phone and buries the thread it is
   part of. Capped to four lines HERE ONLY: the row is a button, and the untouched text is one tap
   away on the sheet, where the same class is left alone. The sacrifice is real and small — a row
   that ends mid-sentence — and it is the opposite of the failure this codebase watches for, because
   nothing is hidden without a visible way to see it. */
.journal__open--mark .journal__detail {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.journal__writes {
    margin: 0.4rem 0 1rem;
    padding-left: 1.2rem;
}

.journal__write {
    margin-bottom: 0.3rem;
    overflow-wrap: anywhere;
}

.journal__write .journal__when {
    margin-right: 0.5rem;
}