/* The reading surface. CSS Grid: text column + gutter for marginalia. */

.document {
    display: grid;
    grid-template-columns:
        [side-start] minmax(var(--gap-side), 1fr)
        [text-start] var(--measure-text)
        [text-end gap-start] var(--gap-column)
        [gap-end margin-start] var(--measure-margin)
        [margin-end] minmax(var(--gap-side), 1fr) [side-end];
    align-items: start;
    padding: calc(var(--line) * 4) 0 calc(var(--line) * 8);
    color: var(--ink);
    font-family: var(--font-prose);
    font-size: var(--t-prose);
    line-height: var(--line);
    font-feature-settings: "kern", "liga", "onum", "pnum";
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphenate-limit-chars: 8 4 4;
    view-transition-name: document;
}

.document__text {
    grid-column: text;
    min-width: 0;
}

.document__gutter {
    grid-column: margin;
    position: relative;
    align-self: stretch;
    min-height: 100%;
}

.document__masthead {
    margin: 0 0 calc(var(--line) * 2);
}
.document__title {
    font-family: var(--font-prose);
    font-weight: 600;
    font-size: var(--t-display);
    line-height: var(--t-display-lh);
    letter-spacing: -0.018em;
    margin: 0 0 calc(var(--line) * 1.2);
    padding-bottom: calc(var(--line) * 0.5);
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
}

.document__body { margin: 0; }

/* Continuous mode: workspace-as-one-text. Each file becomes a `.file-segment`
 * preceded by a thin boundary header (kicker + path + title). The boundary
 * is muted so it reads as architecture, not content. */
.document__body--continuous .file-segment + .file-segment {
    margin-top: 4em;
}
.file-segment__head {
    margin: 2em 0 1em;
    padding-bottom: 0.6em;
    border-bottom: 1px solid var(--ink-thin);
}
.document__body--continuous > .file-segment:first-child .file-segment__head {
    margin-top: 0;
}
.file-segment__kicker {
    display: inline-block;
    color: var(--ink-3);
    font-family: var(--font-margin);
    font-size: var(--t-meta);
    text-transform: lowercase;
    letter-spacing: 0.06em;
    margin-right: 0.8ch;
}
.file-segment__path {
    color: var(--ink-2);
    font-family: var(--font-margin);
    font-size: var(--t-meta);
}
.file-segment__title {
    margin: 0.3em 0 0;
    line-height: 1.2;
    color: var(--ink);
}

.document__body p,
.document__body ul,
.document__body ol,
.document__body pre,
.document__body blockquote,
.document__body table,
.document__body figure,
.document__body div.block {
    margin: 0 0 var(--line);
}

.document__body p { line-height: var(--line); }

.document__body h1,
.document__body h2,
.document__body h3,
.document__body h4,
.document__body h5,
.document__body h6 {
    font-family: var(--font-prose);
    font-weight: 400;
    color: var(--ink);
}

.document__body h1 {
    font-size: var(--t-h2);
    line-height: var(--t-h2-lh);
    margin: calc(var(--line) * 2.5) 0 var(--line);
    padding-top: calc(var(--line) * 0.5);
    border-top: 1px solid var(--ink-thin);
}
.document__body h2 {
    font-size: var(--t-h2);
    line-height: var(--t-h2-lh);
    letter-spacing: -0.01em;
    margin: calc(var(--line) * 2.5) 0 var(--line);
    padding-top: calc(var(--line) * 0.5);
    border-top: 1px solid var(--ink-thin);
}
.document__body h3 {
    font-style: italic;
    font-weight: 600;
    font-size: var(--t-h3);
    line-height: var(--t-h3-lh);
    margin: calc(var(--line) * 1.5) 0 calc(var(--line) * 0.5);
}

/* Sticky-deepest behaviour: stickiness lives on the wrapper, not the heading
 * itself. Every body block is rendered as `<div class="block">` (renderer.js);
 * each heading lives inside its own .block. We make heading-blocks (and the
 * file-segment header in continuous mode) sticky at the same top offset
 * (chrome + filter strip). They share `top` and paint an opaque paper
 * background, so the latest one in DOM order visually covers earlier ones —
 * the reader always sees the heading they're currently inside.
 *
 * The heading's native margin-top (2.5 lines) lives INSIDE the sticky block,
 * so when stuck it would render as a tall paper-coloured void above the
 * heading text. We zero the heading's vertical margins inside heading-blocks
 * and put the in-flow breathing room on the *block's* own margin, which sits
 * outside the sticky-painted area and only shows in normal flow.
 *
 * `:has()` is fine here — broadly supported, and the gate already restricts
 * the app to Chromium browsers. */
.document__body .block:has(> :is(h1, h2)) {
    position: sticky;
    top: calc(var(--chrome-h) + 36px);
    background: var(--paper);
    z-index: 5;
    margin: calc(var(--line) * 1.5) 0 var(--line);
    padding-bottom: calc(var(--line) * 0.25);
    transition: opacity 180ms ease-out;
}
.file-segment__head {
    position: sticky;
    top: calc(var(--chrome-h) + 36px);
    background: var(--paper);
    z-index: 5;
    transition: opacity 180ms ease-out;
}
.document__body .block:has(> :is(h1, h2)) > :is(h1, h2) {
    margin-top: 0;
    margin-bottom: 0;
}
/* Sticky-deepest paint relies on the latest-in-DOM block fully covering
 * earlier ones. That breaks when the earlier heading is taller (e.g. a
 * 2-line title above a 1-line one): the taller block's bottom peeks out
 * below the shorter one. toc.js tags every stuck block except the active
 * one with this class so it fades out of the stack instead of bleeding
 * through. Fade (not hide) so the transition reads as motion, not a glitch. */
.document__body .block.is-stuck-occluded,
.file-segment__head.is-stuck-occluded {
    opacity: 0;
}
/* Programmatic jumps (TOC click) land the heading just *above* the sticky
 * threshold so sticky immediately engages and the clicked heading wins the
 * latest-in-DOM tiebreak. If we landed it below the threshold, the previous
 * sticky heading would still be painted on top and the user wouldn't see
 * anything change. */
.document__body :is(h1, h2, h3),
.file-segment__title {
    scroll-margin-top: calc(var(--chrome-h) + 36px - 4px);
}

.document__body hr {
    border: 0;
    text-align: center;
    margin: calc(var(--line) * 2.5) 0;
}
.document__body hr::before {
    content: "·   ·   ·";
    color: var(--ink-3);
    letter-spacing: 0.6em;
    font-family: var(--font-margin);
    font-size: var(--t-meta);
}

.document__body blockquote {
    font-style: italic;
    font-size: var(--t-prose-quote);
    color: var(--ink-2);
    padding-left: calc(var(--gap-column) * 0.5);
    border-left: 1px solid var(--ink-thin);
}

.document__body code {
    font-family: var(--font-code);
    font-size: 0.92em;
    background: var(--paper-deep);
    padding: 0.1em 0.35em;
    border-radius: 0;
}
.document__body pre {
    font-family: var(--font-code);
    font-size: var(--t-code);
    line-height: 1.55;
    background: var(--paper-deep);
    color: var(--ink);
    padding: var(--line) calc(var(--gap-column));
    border-left: 2px solid var(--ink-thin);
    border-radius: 0;
    overflow-x: auto;
}
.document__body pre code { background: transparent; padding: 0; }

.document__body strong { font-weight: 600; color: var(--ink); }
.document__body em { font-style: italic; }

.document__body table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.95em;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
}
.document__body th,
.document__body td {
    padding: calc(var(--line) * 0.4) 1ch;
    text-align: left;
    border-bottom: 1px solid var(--ink-thin);
    vertical-align: top;
}
.document__body th {
    font-weight: 600;
    color: var(--ink);
    font-size: var(--t-meta);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    border-bottom-color: var(--ink);
}

/* Inline highlight: 2 px coloured underline, focus-state low-alpha fill.
 * Redundant channel: every category is recognisable by underline colour
 * AND by the meta tag in the gutter, never by tint alone. */
.hl {
    text-decoration: underline 2px var(--cat, var(--ink-3));
    text-underline-offset: 0.18em;
    text-decoration-skip-ink: none;
    cursor: pointer;
    transition: background 140ms ease-out, color 140ms ease-out;
}
.hl[data-focused="true"] {
    background: color-mix(in oklch, var(--cat, var(--mark)) calc(var(--hl-alpha-active) * 100%), transparent);
}
.hl[data-status="resolved"] {
    text-decoration-color: var(--ink-thin);
    color: var(--ink-2);
}
.hl[data-category="prose"]     { --cat: var(--cat-prose); }
.hl[data-category="accuracy"]  { --cat: var(--cat-accuracy); }
.hl[data-category="citation"]  { --cat: var(--cat-citation); }
.hl[data-category="structure"] { --cat: var(--cat-structure); }
.hl[data-category="length"]    { --cat: var(--cat-length); }
.hl[data-category="voice"]     { --cat: var(--cat-voice); }
.hl[data-category="keep"]      { --cat: var(--cat-keep); }

/* A "draft" highlight, shown while the composer is open before save. */
.hl[data-draft="true"] {
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--mark);
}

/* Empty-workspace notice rendered into the text column when files.list
 * returns nothing. Reads as a typeset note, not a card. */
.document__empty {
    padding: calc(var(--line) * 2) 0;
    color: var(--ink-2);
    font-family: var(--font-prose);
}
.document__empty-kicker {
    font-family: var(--font-margin);
    font-size: var(--t-meta);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    margin: 0 0 calc(var(--line) * 0.4);
}
.document__empty-title {
    font-family: var(--font-prose);
    font-weight: 600;
    font-size: var(--t-h2);
    line-height: var(--t-h2-lh);
    letter-spacing: -0.01em;
    margin: 0 0 var(--line);
    padding-bottom: calc(var(--line) * 0.4);
    border-bottom: 1px solid var(--ink-thin);
    color: var(--ink);
}
.document__empty-body {
    margin: 0 0 var(--line);
    font-size: var(--t-prose);
    line-height: var(--line);
}
.document__empty-body code {
    font-family: var(--font-margin);
    font-size: 0.92em;
    background: var(--paper-deep);
    padding: 0.1em 0.35em;
}
.document__empty-body kbd {
    font-family: var(--font-margin);
    font-size: 0.92em;
    color: var(--ink);
    border: 1px solid var(--ink-thin);
    padding: 0.05em 0.4em;
    border-radius: 0;
}
.document__empty-body em { color: var(--mark); font-style: italic; }

/* Block markers. Line numbers in the left side, opt-in. */
.block { position: relative; }
.block[data-line-start]::before {
    content: attr(data-line-start);
    position: absolute;
    left: calc(var(--gap-column) * -1.4);
    top: 0.5em;
    font-family: var(--font-margin);
    font-size: var(--t-meta);
    color: var(--ink-3);
    opacity: 0;
    transition: opacity 140ms ease-out;
    user-select: none;
    pointer-events: none;
}
.document[data-show-lines="true"] .block::before { opacity: 1; }