/* ==========================================================================
   Comments — the reader's surface
   ==========================================================================
   A frozen draft opened with a link, and the notes left on it. The paper
   itself is untouchable (paper.css holds the pagination contract), so
   everything here dresses the chrome around it: the top bar, the marks on the
   noted passages, and the panel the notes are read and written in.

   One surface. Nothing floats over the paper: a note is read, written and
   changed in its card in the panel, which is why there is no composer and no
   stack in this file any more.

   Orange means "do this" and nothing else — it is on the save button, and on
   the one passage whose note is currently being worked on.
   ========================================================================== */

/* --- Top bar ------------------------------------------------------------ */
/* Deliberately not .script-nav: a reader has no title field, no save state,
   and no account cluster. Same shape, a quarter of the parts. */

.read-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-background);
    /* No rule at rest. The edge arrives as a shadow once the paper starts
       sliding under it, the same way the editor's bar behaves — see the shared
       rule in pages/scripts.css. */
}

.read-bar-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-text);
}

.read-bar-brand svg {
    width: 28px;
    height: 28px;
}

/* The size and weight the editor and the preview give a script's title, so the
   draft is named the same way whoever is looking at it. Matches
   .script-nav-title in pages/scripts.css. */
.read-bar-title {
    flex: 1;
    min-width: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.read-bar-byline {
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-light);
}

/* Italic and undecorated, matching .script-nav-byline a. A name is not a link
   that wants pressing, it is who wrote this: the italic is what sets it apart
   from the metadata beside it, and the underline waits for a hover, which is
   where that affordance belongs. */
.read-bar-byline a {
    color: var(--color-text-light);
    font-style: italic;
    text-decoration: none;
}

.read-bar-byline a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.read-bar-status {
    flex-shrink: 0;
}

.read-bar-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.read-bar-reader {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Quieter than the name it follows: the name says who the draft thinks you are,
   which is the part worth reading, and this is the footnote to it. The colon
   lives here so it turns up with the phrase and not on its own on the last day,
   when there is nothing left to say. */
.read-bar-expiry {
    color: var(--color-text-lighter);
}

.read-bar-expiry::before {
    content: ": ";
}

/* The count rides on the corner of the icon. Ink rather than the action orange:
   the button is the thing you press, the number only says how many are in
   there. Hidden at zero, since a badge reading 0 is a badge saying nothing.

   The 40px size, not the 32: the badge is --font-size-xs and there is no
   smaller type token, so on a 32px button the count wore the icon rather than
   sat on it. It is also the only control in this bar a thumb has to find. */
.read-bar-controls .button.icon-only {
    position: relative;
    overflow: visible;
    /* .button.large scales its type for a label; this one holds an icon. */
    font-size: var(--font-size-md);
}

.read-count {
    position: absolute;
    top: -0.15rem;
    right: -0.15rem;
    display: block;
    min-width: 1.15rem;
    padding: 0 0.25rem;
    border-radius: var(--border-radius-pill);
    background: var(--color-ink-black);
    color: var(--color-text-inverse);
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    line-height: 1.15rem;
}

.read-count[hidden] {
    display: none;
}

/* --- Naming yourself ---------------------------------------------------- */

.read-name-ask {
    max-width: 34rem;
    margin: var(--spacing-lg) auto 0;
    padding: var(--spacing-md);
    background: var(--color-background-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
}

.read-name-ask label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.read-name-row {
    display: flex;
    gap: var(--spacing-sm);
}

.read-name-row input {
    flex: 1;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    font-family: var(--font-ui);
    font-size: var(--font-size-base);
}

/* --- Layout: paper, and the rail beside it ------------------------------ */

/* The row both surfaces lay out in: the reader's page and the writer's draft.
   One class, because the rail behaves the same on each and a second copy of
   these rules is a second thing to keep in step. */
.notes-layout {
    --rail-width: 22rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-lg);
}

/* The paper's column: it takes the row, and the sheet centres inside it on its
   own margins. `#read-paper` holds both projections on the reader's page;
   `.write` is the draft itself in the editor. min-width:0 so it can shrink
   rather than push the rail off screen. What keeps the panel next to the sheet
   is the width of the row, further down, not a cap here. */
.notes-layout > #read-paper,
.notes-layout > .write {
    flex: 1;
    min-width: 0;
}

/* Below the width where a column fits (see the push rule further down), the
   panel lays over the page from the right.

   Inset on every side, so it reads as a card laid on the page instead of a
   second edge of the window. It parks a full inset beyond its own width, so no
   corner of it shows while it is away. `--bar-h` is set at runtime to the
   height of the bar it hangs under: the bar is the one measurement here that
   has no token behind it. Only the height — what to put between the bar and the
   panel is a spacing decision, and it belongs in the tokens with every other
   one rather than as a number added on in a script. The value here is the
   resting default, so the panel is placed before that script has measured
   anything. */

.notes-rail {
    /* --rail-width is the row's, inherited: the row is sized from it too, and
       two declarations of the same width is two places to change it. */
    --bar-h: 3.25rem;
    /* A column, so the list can take the height the panel is not using. */
    display: flex;
    flex-direction: column;
    position: fixed;
    top: calc(var(--bar-h) + var(--spacing-xs));
    right: var(--spacing-md);
    bottom: var(--spacing-md);
    z-index: 1050;
    width: var(--rail-width);
    max-width: calc(100vw - var(--spacing-md) * 2);
    overflow-y: auto;
    /* Outline and corner from the shared panel rule in pages/scripts.css. The
       surface is its own: this one stays open while you work, so it separates
       itself from the sheet behind it rather than sitting on it. A surface
       token rather than a background one, because backgrounds are the page's
       and this is a component on it.
       So is the inset. The other three panels are small and anchored to
       something, and --spacing-md suits them; this one is a standing column of
       reading, and at that size the same inset put the reference line hard
       against the outline. */
    padding: var(--spacing-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    transform: translateX(calc(100% + var(--spacing-md)));
    transition: transform 0.22s ease;
}

.notes-rail.is-open {
    transform: none;
}

/* --- Wide: the rail stops covering the page and becomes a column --------- */
/* A panel laid over the page is in the way of the one thing this page is for.
   It is fixed, so it does not scroll off; the reader scrolls the script and the
   panel sits on the right-hand third of it the whole way down. Where there is
   room for both, the rail takes a column of its own and the sheet moves left
   out from under it.

   The width: a sheet is 8.5in and the rail is 22rem, so the two need about
   1192px side by side. Under that there is nothing to push into, and the panel
   goes back to laying over the page, which is what every narrower rule below
   already assumes.

   It slides on a negative margin rather than a transform. The margin cancels
   the rail's own width, so a shut rail takes no room and the paper has the row
   to itself; opening it gives the width back and the sheet, which is a fixed
   8.5in centred in whatever is left, translates left rather than reflowing. The
   rail's own box is 22rem throughout, so its contents never re-wrap while it
   moves.

   The row is a sheet plus the panel and no wider, and it is the row that is
   centred. Left full width with its items centred instead, the sheet lands in
   the middle of the window and the panel is left over at the end of it, so the
   two drift apart as the window grows and the notes stop being beside
   anything.

   Two things hide a shut panel, because the margin is only one of them: it
   takes the rail out of the layout but not off the screen, and with the row
   centred the space it vacates is in plain view. The transform it already
   parks on carries it past the row's own edge, and `overflow-x: clip` cuts it
   there. `clip` rather than `hidden` because hidden would make this a scroll
   container, and a scroll container is exactly what `position: sticky`
   measures itself against — the rail would pin to the top of a 20-page script
   instead of the window. */

@media (min-width: 78rem) {
    .notes-layout {
        max-width: calc(var(--page-width) + var(--spacing-lg) + var(--rail-width));
        margin-inline: auto;
        overflow-x: clip;
    }

    /* Addressed through the row rather than on its own, so the card chrome
       below comes off by specificity and not by which stylesheet loaded last.
       The outline and corner are a four-panel rule in pages/scripts.css at the
       same weight as a bare `.notes-rail`, and that file says in as many words
       that a tie between the two is settled by load order. */
    .notes-layout > .notes-rail {
        position: sticky;
        /* Level with the top of the paper, not tucked up under the bar: the
           column starts where `.write` starts, which is --spacing-xl below the
           bar, so the heading and the first sheet begin on one line. */
        top: calc(var(--bar-h) + var(--spacing-xl));
        right: auto;
        bottom: auto;
        /* Under the bar, not over it. The overlay has to outrank the nav
           because it covers it; a column sits beside the page and outranking
           anything only buys it the export and share popovers rendering
           underneath it. */
        z-index: 1;
        flex: 0 0 var(--rail-width);
        max-width: none;
        /* The height it has, not the height its notes happen to need. A panel
           that stops halfway down leaves the list scrolling inside a box
           shorter than the space beside it, and the head sticks to the top of
           whatever it is given. Bottom of the window less the bar it hangs
           under and the step it hangs by. */
        height: calc(100dvh - var(--bar-h) - var(--spacing-xl) - var(--spacing-lg));
        margin-right: calc(-1 * (var(--rail-width) + var(--spacing-lg)));

        /* Parked half the width it gives back, which is exactly what the
           sheet gives up, so the two cross the same ground in the same time
           and read as one movement.

           The row centres the pair, so opening frees the panel's width and the
           sheet takes half of it. Left to the margin alone the panel's leading
           edge travels the whole of it, twice the sheet, and with the overlay's
           transform on top as well it was four times: 744px against 188 in the
           same fifth of a second, arriving thrown rather than pushed.

           It can be parked this close because it is hidden by going
           transparent rather than by being moved away. Where it sits while
           nobody can see it does not matter; how far it comes does. */
        transform: translateX(calc((var(--rail-width) + var(--spacing-lg)) / -2));
        opacity: 0;
        transition: margin-right 0.22s ease, transform 0.22s ease, opacity 0.22s ease;

        /* No card. A panel laid over the page has to say where it ends, so it
           carries an outline, a tint and a shadow. A column has the page's own
           margin around it and says so by sitting in it, and the same chrome
           out here reads as a thing dropped on the desk beside the script. The
           inset goes with it: with no panel to be inside of, it is only width
           between the notes and the sheet they are about. The rules between
           notes carry the structure the card was carrying. */
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;

        /* Nothing on the left, so the notes sit as close to the sheet as the
           row's gap puts them. On the right, enough to keep the cards out from
           under the scrollbar: the panel scrolls, and an active card's edge ran
           beneath it. The cards carry their own inset, so this is only the
           scrollbar's own width. */
        padding: 0 var(--spacing-sm) 0 0;
    }

    .notes-layout > .notes-rail .notes-rail-head {
        background: var(--color-surface);
    }

    .notes-layout > .notes-rail.is-open {
        margin-right: 0;
        transform: none;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notes-rail {
        transition: none;
    }
}

/* Stays put while the notes go by. The pager lives up here, and a control for
   stepping through a list you have to scroll back up to reach is a control for
   somebody who has already given up.

   It needs a background of its own or the notes read straight through it, and
   which one depends on what the panel is: the page's white beside the paper,
   the panel's own tint when it lays over one. `inherit` would take the
   column's transparent and show everything. */
.notes-rail-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    background: var(--color-surface);
}

/* --- The way through them, one at a time -------------------------------- */
/* A list of notes is something to read; a pass through a draft is something to
   work. The pager is the second one: press next and you are on the next note,
   with the paper taken to it, until you run out. */

.note-pager {
    display: flex;
    align-items: center;
    gap: var(--spacing-xxs);
    margin-left: auto;
}

.note-pager[hidden] {
    display: none;
}

.note-pager-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-tick);
    height: var(--control-tick);
    padding: 0;
    border: 0;
    border-radius: var(--radius-tag);
    background: none;
    color: var(--color-text);
    font-size: var(--font-size-xs);
    cursor: pointer;
}

.note-pager-step:hover:not(:disabled) {
    background: var(--color-surface-light);
}

/* Kept in place rather than hidden at the ends of the list: a control that
   vanishes takes the one beside it with it, and the readout between them moves
   every time. */
.note-pager-step:disabled {
    color: var(--color-text-lighter);
    cursor: default;
}

.note-pager-at {
    min-width: 3.5em;
    text-align: center;
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    white-space: nowrap;
}

/* The way back to the list, and only ever up where a note has taken the panel
   over. Nothing to go back to otherwise. */
.notes-rail-back {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    cursor: pointer;
}

.notes-rail-back[hidden] {
    display: none;
}

.notes-rail-head h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
}

/* The ✕ is a way out, and only worth drawing where the control that opened the
   panel is not one. Everywhere else the toggle is in the bar overhead and this
   is a second door to the same room, drawn in the corner of a panel that no
   longer has a card for it to be the corner of.

   It comes back below 700px, and only there: that is where the editor's
   controls drop to a fixed bar at the foot of the screen, underneath the panel,
   and touch has no Escape to fall back on. Take it away at that width and the
   panel cannot be closed at all. The reader's page does not render it at any
   width — its bar is sticky to the top of the window and never goes anywhere. */
.notes-rail-head .modal-close {
    display: none;
}

@media (max-width: 700px) {
    .notes-rail-head .modal-close {
        display: flex;
    }
}

.notes-rail-note,
.notes-rail-empty {
    margin: var(--spacing-xs) 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Two lines, not one paragraph: the invitation is what the reader acts on,
   the terms of the link are what they read once. Stacked here rather than
   banded across the foot of the page, where they were the one thing the rail
   could not run past.

   Spaced by margins and NOT by `display: flex` + gap. The block is hidden with
   the `hidden` attribute once the reader has a note, and `hidden` is only a
   `display: none` in the browser's own stylesheet: any author `display` here
   outranks it and the block never goes away. It did exactly that. Leave the
   display alone and the attribute works on its own. */
.notes-rail-empty p {
    margin: 0;
}

.notes-rail-empty p + p {
    margin-top: var(--spacing-sm);
}

.notes-rail-terms {
    font-size: var(--font-size-xs);
    color: var(--color-text-lighter);
}

/* The list takes whatever height the panel has spare, so the space left over
   by a short list sits inside the scroll region rather than after it. Nothing
   moves, but the panel is one surface you scroll rather than a list with a
   tail of nothing under it.

   `1 0 auto`, not `1`: shrinking below the content would put the overflow
   inside the list instead of the panel, and the panel is the one that scrolls.

   Only when it has notes in it. Empty, it must not grow, or the line inviting
   a reader to leave their first note is pushed to the foot of the panel, away
   from the sentence above it that it belongs to. */
.notes-rail-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* While the notes are on their way. The large spinner centres itself on its
   own auto margins, so this only has to give it room to sit in. */
.notes-rail-loading {
    padding: var(--spacing-2xl) 0 0;
}

.notes-rail-list:not(:empty) {
    flex: 1 0 auto;
}

/* --- One note ----------------------------------------------------------- */

/* Always a row, whether or not anything is sitting in the left column. A
   button sizes itself to its content, so the card has to be stretched by
   something; making every note a flex row means `flex: 1` on the body does it
   in all four cases (reader, writer, ticked, withdrawn) instead of a width
   that has to be right about what else is in the row. */
/* Always a row, whether or not anything is sitting in the left column. A
   button sizes itself to its content, so the card has to be stretched by
   something; making every note a flex row means `flex: 1` on the body does it
   in all four cases (reader, writer, ticked, withdrawn) instead of a width
   that has to be right about what else is in the row.

   The inset is on every note, not only the one you are on. It used to arrive
   with the active state and took 14px and 9px of the card's contents with it,
   so picking a note moved the words you were reading. Nothing about a card's
   box changes between the two states now: same padding, no border either way,
   and the outline below is drawn inside rather than around. */
.note {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    /* The site sets a bottom margin on every `li` for prose lists, and this is
       not one: a note is a card, and its own padding is the space around it.
       Inherited, it put 16px of nothing under each note on top of the 12 the
       card already had. */
    margin: 0;
}

/* --- Resting, and the one you are on ------------------------------------ */
/* A panel of notes is a list until you pick one out of it.

   The default is the quiet one: a wash, saying which note you are on and
   nothing more. That is the whole job on the writer's panel, where a note is
   read and ticked off and never edited, and where the outline of a card
   promised a surface to work in that was not there.

   No rule between them. Each note is a block of text with a reference over it
   and space around it, and that is already where one ends and the next begins.
   A line as well was drawing a boundary that was not in question.

   Surface tokens throughout, not background ones: a background belongs to the
   page and everything here is a component on it. That is also what keeps the
   wash visible. --color-surface-light is the paper tone, and the panel used to
   be paper-toned too when it laid over the page, which would have made a wash
   the same colour as what is under it. The panel is --color-surface now, so the
   two separate in both themes: white under paper in light, 0.26 under 0.30 in
   dark.

*/
.note.is-active {
    border-radius: var(--radius-input);
    background: var(--color-surface-light);
}

/* A card holding a field is a different claim: it is a surface you work in, so
   it takes the house card and reads as the same kind of object as the share
   popover and the modal. Said as "the one with a field in it" rather than as
   "the one on the reader's page", because it is the field that earns it.

   An inset ring rather than a border, for two reasons that both come down to
   it costing nothing. A border is layout, and a card that grows one when you
   press it moves its own contents out from under you. And the panel scrolls,
   so anything drawn outside the card's box is clipped at the panel's edge:
   this is the full 2px, all the way round, at either width. */
.note.is-active:has(.note-edit) {
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 2px var(--color-ink-black);
}

/* The body of a note, and the press that picks it out of the list. One button
   per card on both surfaces, so a keyboard reaches every note the same way.
   The writer's tick is its sibling and never its child: a button inside a
   button is not a thing, which is why the reader's row could not simply grow a
   tick and the writer's could not simply become a button.

   It has to be talked out of looking like a button. The panel is a list you
   read, and the press is the whole card rather than a control sitting in it. */
/* Never a width. The row above stretches this, and a width here has to be
   right about what else is in the row: a withdrawn note has no tick but does
   reserve the column one would sit in, and `width: 100%` there overflowed the
   card by exactly that reserve and clipped the quote. min-width: 0 lets a long
   quote wrap rather than setting the card's width from its longest line. */
.note-main {
    flex: 1;
    min-width: 0;
    /* No inset of its own. The card carries it, for every state at once, and
       when this had one too the two stacked: 20px above and below every note's
       text instead of 12, so 40px stood around each rule between them. */
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.note-main:hover .note-body,
.note-main:focus-visible .note-body {
    color: var(--color-primary);
}

.note-label {
    margin: 0 0 var(--spacing-xxs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.note-quote {
    margin: 0 0 var(--spacing-xs);
    padding-left: var(--spacing-sm);
    border-left: 2px solid var(--color-border-dark);
    font-family: var(--script-font);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.note-body {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.note-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-xs) 0 0;
}

/* The status tags that sit in a line of text rather than in a row of their own:
   "edited" and "withdrawn" beside the reader's name on the writer's card, and
   "edited" under a note on the reader's own. Inline-flex flows them with the
   words, and the margin is what stops them butting up against the name, since
   there is no flex gap to do it out here. */
.note-who .status,
.note-actions .status {
    margin-left: var(--spacing-xs);
}

/* --- The writer's row: a note with a tick beside it ---------------------- */
/* The same .note the reader's rail uses, plus the one control the writer has
   that a reader does not. It lived in pages/notes.css until the links page was
   retired and the panel over the draft became the only place notes are read.

   The two-column layout is not declared here any more: every note is a row now,
   so a tick simply takes the first column when there is one. */

/* A withdrawn note has nothing to tick, so it holds the column with a dot
   instead. It shares .note-tick's box, which is what keeps the row lined up
   with the ticked ones, and drops everything that makes that box a control:
   no border, no fill, no pointer. The dot itself is drawn inside it, small,
   because the mark is a state and not a switch. Its size is a layout value
   with no token behind it, like the panel widths.

   This replaces a rule that reserved the column with a margin for rows that
   had no tick at all. Nothing on this surface is missing one now. */
.note-tick.is-gone {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    cursor: default;
}

.note-tick.is-gone::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-border-dark);
}

.note-who {
    margin: 0 0 var(--spacing-xxs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-light);
}

/* The round a note came back on. A heading inside the list, not a note. */
.note-round {
    margin: var(--spacing-md) 0 var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.note-round:first-child {
    margin-top: 0;
}

.note-tick {
    flex-shrink: 0;
    width: var(--control-tick);
    height: var(--control-tick);
    margin-top: 2px;
    padding: 0;
    border: 1px solid var(--color-border-dark);
    border-radius: 50%;
    background: var(--color-surface);
    color: transparent;
    font-size: var(--font-size-xxs);
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-base);
}

.note-tick:hover {
    border-color: var(--color-primary);
    color: var(--color-border-dark);
}

.note.is-resolved .note-tick {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* A note ticked off recedes. Still readable, since a notes pass gets revisited,
   but it stops competing with the ones still to do. */
.note.is-resolved .note-body,
.note.is-resolved .note-quote {
    color: var(--color-text-lighter);
}

.note.is-withdrawn .note-body {
    color: var(--color-text-lighter);
    text-decoration: line-through;
}


/* --- The paper's own left margin --------------------------------------- */
/* The gutter flag used to hang here, out of the flow, in a channel the page
   reserved for it. The mark on the words says what it said and says it better,
   so the flag, the channel and the `+` that sat opposite it are all gone. What
   is left is the position an anchored block still needs, since the reflowed
   view and the paper both hang things inside one. */

[data-a] {
    position: relative;
}

/* --- What the note being written is pointing at ------------------------- */
/* The block washes for as long as a note is being written, and the passage
   keeps --color-highlight, which is what ::selection was already drawing it
   in. The reader is looking at the panel, not the script, so this has to hold
   the place they just marked without asking to be read.

   The wash is a transparency rather than a background token because it lands
   on the paper, and the paper is the one surface that does not follow the
   theme: a solid --color-background-subtle inverts in dark mode and paints
   near-black under the script's near-black ink. A tint composites over
   whatever the paper is. Weak enough that the passage still reads as the
   stronger mark of the two. */

[data-a].is-noting {
    background: color-mix(in oklch, var(--color-primary) 10%, transparent);
}

.note-target {
    background: var(--color-highlight);
    border-radius: var(--border-radius-xs);
}

/* --- A noted passage ---------------------------------------------------- */
/* Every passage with a note on it, drawn on the paper itself. This is what the
   gutter count used to be for and does better: it says which words were being
   answered rather than how many answers a block collected, and it is the way
   in as well, since pressing the words is the obvious thing to try.

   Cosmetic, like the composer's mark above it. Anchors are read off the
   server's attributes on the block and never off the DOM inside it, so nothing
   drawn here can move a note.

   Active takes the action orange, and it is the only orange the paper carries.
   One note is active at a time, so there is only ever one. */
.note-mark {
    background: var(--color-note-mark);
    border-radius: var(--border-radius-xs);
    cursor: pointer;
}

.note-mark.is-active {
    background: var(--color-highlight);
}

/* Marks nest when two notes fall back to the same block, which the reflowed
   view makes routine: it coalesces a speech into flowing paragraphs, so a quote
   that is verbatim on the paper is not always findable there and both notes
   mark the whole block instead.

   Nested and both at rest they are the same colour and nothing shows. Nested
   with the outer one active, the inner would paint its resting wash back over
   the orange and leave a pale hole through the middle of it. The inner one only
   gets to draw when it is the note being worked on. */
.note-mark.is-active .note-mark:not(.is-active) {
    background: transparent;
}

/* --- The active card's field -------------------------------------------- */
/* Where the composer and the stack used to be. Both were panels floating over
   the paper, and both are gone: the note is written and changed in its own card
   in the panel, so this is only the field and the row of controls under it. */

/* Under the card, not beside it. The row is a row so the writer's tick can sit
   in a column of its own, and without this the field became a second column of
   the same row and the note was laid out sideways. A full basis wraps it onto
   its own line, under the tick as well as the text, which is where a field that
   spans the card belongs.

   No margin of its own: the row's gap already separates it, and a margin here
   is a second helping of the same space. */
.note-edit {
    flex-basis: 100%;
}

/* The field follows the card's text directly, so exactly one step should stand
   between them. Four were: the quote's own bottom margin, the card's bottom
   padding, the row's gap, and a margin on the field. They came from four rules
   that are each right on their own and had never had to sit under each other
   before. The row's gap is kept, since it is the one that belongs to the pair,
   and the other three are dropped.

   Only where there is a field, though. The writer's card has none, so this took
   12px off its bottom for nothing and the card shrank as it was picked, jogging
   every card below it up the list. Nothing about a card's height should change
   because you looked at it. */
.note.is-active:has(.note-edit) .note-main {
    padding-bottom: 0;
}

.note.is-active:has(.note-edit) .note-main > :last-child {
    margin-bottom: 0;
}

/* One line to start, and as many as the note needs after that: the height is
   set from the content by comments.js on every keystroke.

   No resize grip, and no scrollbar. Both belong to a box of a fixed size, and
   this one has none: a grip would be overwritten by the next keystroke, and a
   scrollbar can never appear because the field is never shorter than what is
   in it. overflow-y: hidden also keeps scrollHeight honest while it is being
   measured. */
.note-edit-input {
    display: block;
    width: 100%;
    padding: var(--spacing-sm);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-surface);
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    line-height: 1.45;
    color: var(--color-text);
    resize: none;
    overflow-y: hidden;
}

.note-edit-input:focus-visible {
    outline: none;
    border-color: var(--color-primary);
}

.note-edit-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin: var(--spacing-xs) 0 0;
}

/* The tag takes the space, so the buttons stay right however long it is. It
   hides itself when empty (see .status), which is most of the time. */
.note-edit-foot .status {
    margin-right: auto;
}

/* What the draft said when the writer's panel went looking for a note's
   passage, on the note's own card. Only ever present when there is something
   to report, so a card that finds its line is the height it always was. Full
   basis for the same reason the field has one: it wraps onto its own line
   rather than becoming a second column of the row. */
.note-find {
    flex-basis: 100%;
    margin: var(--spacing-xs) 0 0;
}

/* --- A link that is not live -------------------------------------------- */

.read-gone {
    max-width: 32rem;
    margin: var(--spacing-4xl) auto;
    padding: 0 var(--spacing-lg);
    text-align: center;
}

.read-gone h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
}

.read-gone p {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-lg);
}

/* --- Narrow screens ----------------------------------------------------- */
/* Artists and editors read on tablets and phones. The rail stops being a rail
   and becomes a panel under the script; the `+` moves inside the block's right
   edge, since there is no margin left to sit in. */

@media (max-width: 60rem) {
    .notes-layout {
        flex-direction: column;
        align-items: stretch;
    }

    /* The panel spans the width it is given, still inset from all four edges.
       There is no margin left to overlap on a phone, so it covers the script
       while it is open and the close button is how you get back to it. */
    .notes-rail {
        left: var(--spacing-md);
        width: auto;
    }

}

/* --- Narrow: one note takes the panel over ------------------------------- */
/* Where the panel covers the paper, the list and a single note are two things
   rather than one. The list is what you have; a note is what you are on.

   Picked, the panel drops to the foot of the screen and shows that note alone.
   The paper is above it and uncovered, which is the whole point: a note about
   page four is unreadable next to a page four you cannot see. The pager moves
   between them without going back, and View all is the way back to the list.

   As tall as the note, capped at half the screen. A flat half was half a
   screen of nothing under most notes, and the passage the note is about is
   usually just above the sheet, so the empty part was covering the one thing
   the reader needed to see. The cap keeps a long note from taking the paper
   with it, and the rail already scrolls when it hits one.

   Only here. As a column beside the draft nothing is covering anything, and a
   list that empties itself when you pick something is a list that keeps taking
   your place away. */

@media (max-width: 78rem) {
    .notes-rail.is-focused {
        top: auto;
        height: auto;
        max-height: 50dvh;
    }

    /* The round headings go too. A heading over one note is a heading over a
       list of one, and the card already says which round it came in on by
       being in it. */
    .notes-rail.is-focused .note:not(.is-active),
    .notes-rail.is-focused .note-round,
    .notes-rail.is-focused .notes-rail-note,
    .notes-rail.is-focused .notes-rail-empty {
        display: none;
    }

    /* The heading is replaced by the way back, not joined by it. */
    .notes-rail.is-focused .notes-rail-head h2 {
        display: none;
    }
}

/* --- Narrow: the bar keeps the title and drops the rest ------------------ */
/* The title is the one thing in that bar a reader needs, and it was the one
   thing being squeezed: on a phone it truncated to a single letter while the
   byline and the reader's own name kept their width. The panel already says
   who the writer is, and nobody needs to be told their own name. */

@media (max-width: 640px) {
    .read-bar-byline,
    .read-bar-reader {
        display: none;
    }
}


/* --- What a reader's copy looks like on paper --------------------------- */
/* The one surface in this file that prints. Everything the reader works with
   is chrome around a script, and none of it belongs on a sheet: the bar, the
   panel, the closing note about keeping the link to themselves.

   The marks stay. They are the reader's own, and a printed copy that shows
   which passages they answered is more use than a clean one.

   Nothing here reaches into paper.css. `position: relative` on a page adds no
   box and moves no line; it only gives the footer something to be positioned
   inside, and the footer is out of flow, so the paginator's 54 lines are the
   same 54 lines. */

@media print {
    .read-bar,
    .notes-rail,
    .read-name-ask {
        display: none !important;
    }

    #read .comic-page,
    #read .page,
    #read .comic-cover,
    #read .title-page {
        position: relative;
    }

    /* In the page's own bottom margin, inset to the text block's own edges so
       the footer lines up with the script above it rather than with the paper.

       `padding-inline: inherit` rather than the --page-pad-* variables, which
       are the *screenplay* sheet's: `.comic .sheet` overrides both to 1in, so
       naming the variables put the wordmark half an inch inside the script's
       left margin on every comic page, reading as though it belonged to the
       dialogue column. Asking the page for its own padding is right for both
       formats and stays right if upstream changes either. The offsets are 0
       because an absolutely positioned box is laid out against its ancestor's
       padding box, which is the paper's edge.

       0.5in is a printer's running foot, not a derived number: it is where
       the old calc() landed, and it holds when a format's bottom margin is
       not an inch. */
    .read-print-foot {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.5in;
        padding-inline: inherit;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-md);
        font-family: var(--font-ui);
        font-size: var(--font-size-xxs);
        color: var(--color-text-light);
    }

    /* Height, not width: the wordmark is a wide asset and a width would let
       its aspect ratio decide how tall the footer sits. */
    .read-print-mark {
        display: block;
        height: 0.9rem;
        width: auto;
    }

    /* Whose copy this is. The link is the whole credential and paper carries
       none of its protections: expiry and revoke cannot reach a printout, and
       a name can. */
    .read-print-watermark {
        text-align: right;
    }
}

/* On screen it is not there at all. It is printing furniture, and the bar
   above already says who is reading and how long the link has left. */
@media screen {
    .read-print-foot {
        display: none;
    }
}