/* ═══════════════════════════════════════════════════════════════════
   THE WRITTEN PAGE — one dress, every surface (FEAT-049 step 4a,
   2026-09-26). `StudyEditor.readingHTML` hands out the page already
   wrapped in `.study-written`; the desk's editable mount wears the same
   class because it is the same page open for writing. Before this sheet
   the page wore four costumes (the desk's editable, the desk's Read
   preview, the community's text block, print's manuscript section), each
   with its own type — the same paragraph read at one size on the desk
   and another in the community (owner 2026-09-26: "so we have 4
   renderers. again?"). Now: one method hands out the page, one class
   names it, this sheet dresses it. Print's sheet (css/study-print.css)
   adds the point sizes for the SAME class — a different medium, not a
   copy. Cards inside the page wear css/study-cards.css. A surface may
   keep its own wrapper for LAYOUT only (padding, borders, margins) and
   says nothing about type. Load this sheet AFTER study-cards.css.
   ═══════════════════════════════════════════════════════════════════ */

/* The page's type — the desk's values, which the owner approved on the
   Writing Desk (FEAT-035): Crimson Text, 1rem/1.85. */
.study-written {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text-primary, var(--text, #2C2416));
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* Paragraphs. A <div> line (old desks wrote them) carries no margin —
   a blank line between two IS the paragraph gap (the line law, §5b). */
.study-written p { margin: 0 0 14px; }
.study-written > div { margin: 0; }

/* Headings: the tray writes h3 (Heading) and h4 (Subheading); an old
   manuscript keeps whatever level it had and it draws in the scale. */
.study-written h1, .study-written h2, .study-written h3,
.study-written h4, .study-written h5, .study-written h6 {
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
}
.study-written h1 { font-size: 1.9rem; }
.study-written h2 { font-size: 1.7rem; }
.study-written h3 { font-size: 1.5rem; }
.study-written h4 { font-size: 1.2rem; }
.study-written h5 { font-size: 1.05rem; }
.study-written h6 { font-size: 1rem; }

/* Lists */
.study-written ul, .study-written ol { padding-left: 1.5em; margin: 0.3em 0 14px; }
.study-written li { margin: 0.15em 0; }
.study-written li > p { margin: 0; }

/* Divider */
.study-written hr {
    border: 0;
    border-top: 1px solid var(--border, #E5E1DB);
    width: 40%;
    margin: 18px auto;
}

/* Page break: on screen a labelled dashed line; on paper the break
   itself (study-print.css). */
.study-written .study-page-break {
    display: block;
    position: relative;
    height: 0;
    border-top: 1px dashed var(--border, #E5E1DB);
    margin: 22px 0;
}
.study-written .study-page-break::after {
    content: 'Page break';
    position: absolute;
    top: -0.7em;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary, #6B5D54);
    background: var(--surface, var(--card-bg, #fff));
    line-height: 1.4;
}

/* Marks */
.study-written mark {
    background: rgba(250, 204, 21, 0.42);
    color: inherit;
    padding: 0 0.08em;
    border-radius: 2px;
}
.study-written s { text-decoration: line-through; opacity: 0.72; }
.study-written a {
    color: var(--primary, #5B4B8A);
    text-decoration: underline;
    text-underline-offset: 2px;
}