@layer components {
  /* A binder is one sheet on the desk, as a Basecamp project is one page: its name, its sheets
     spread out, a squiggle, then what happened lately. Wider than a sheet of writing, and always
     the same width, whatever is in it, so Home, a shelf and a binder are one size (Joey, 2026-10-11:
     a new binder "appears a lot smaller"). */
  .binder-paper .sheet-body { grid-template-columns: min(1040px, calc(100vw - 32px - 30px)) 30px 0; }
  html[data-margin=open] .binder-paper .sheet-body { grid-template-columns: min(1040px, calc(100vw - 32px - 30px - 36ch)) 30px 36ch; }
  .binder-text { padding-block-end: calc(var(--block-space) * 2.5); }
  .binder-name { font-size: 1.9em; line-height: 1.15; }
  .binder-about { color: var(--ink-soft); font-size: 0.95rem; margin-block-start: 0.35rem; max-width: var(--measure); }

  .spread { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.75rem 1.4rem; margin-block-start: calc(var(--block-space) * 2); }
  /* One column no wider than the tile, or a file's long name (one line, cut with an ellipsis)
     widens the small page past its column and over its neighbour's caption. */
  .mini, .mini-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; min-width: 0; text-decoration: none; color: inherit; }
  .mini-form .mini { width: 100%; }
  .mini-page {
    display: grid; align-content: start; gap: 0.25em; aspect-ratio: 8.5 / 11; overflow: hidden;
    padding: 13px 12px; background: var(--raised); border-radius: 2px;
    box-shadow: 0 0 0 1px var(--rule), 0 6px 16px -12px oklch(var(--lch-shade) / 0.35);
    font-size: 6.2px; line-height: 1.45;
  }
  .mini:hover .mini-page { transform: translateY(-4px) rotate(-0.6deg); }
  .mini-h { font-weight: 700; font-size: 1.5em; line-height: 1.2; }
  .mini-h:first-child { font-size: 2.1em; margin-block-end: 0.3em; }
  .mini-p { color: color-mix(in oklab, var(--ink), var(--paper) 25%); }

  /* The squiggle across the binder: more below. */
  .binder-cut { margin-block: calc(var(--block-space) * 2.5) calc(var(--block-space) * 1.5); color: var(--rule); }
  .binder-cut .wave { opacity: 0.9; }
  .activity-title { font-size: 1.25em; line-height: 1.2; margin-block-end: var(--block-space); }

  /* The binder's margin, brought out by its right squiggle: as tall as the screen allows, and
     scrolled on its own, so the binder stays in view beside it. */
  .binder-paper .margin.is-binder-margin { display: grid; gap: 12px; align-content: start; }
  /* Put away, the binder's margin takes no room at all: a column with no width but all its cards
     would otherwise stretch the binder page far below its last line. */
  html:not([data-margin=open]) .binder-paper .margin.is-binder-margin { display: none; }
  html[data-margin=open] .binder-paper .margin.is-binder-margin {
    position: sticky; top: 1rem; align-self: start; max-height: calc(100dvh - 2rem); overflow-y: auto;
    padding-block-end: 1.5rem; overscroll-behavior: contain;
  }
  .binder-paper .margin .slip, .binder-paper .margin .margin-head { position: static; }

  @media (max-width: 1080px) {
    .binder-paper .sheet-body, html[data-margin=open] .binder-paper .sheet-body { grid-template-columns: minmax(0, 1fr); }
    html[data-margin=open] .binder-paper .margin.is-binder-margin { position: static; max-height: none; }
  }
  @media (max-width: 60ch) { .spread { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
}

@layer components {
  .binder-top { display: flex; align-items: baseline; gap: 1rem; }
  .binder-top > .inline-edit, .binder-top > .binder-name { flex: 1 1 auto; min-width: 0; }
  /* New and "…" at the top right of the thing you are in (Joey, 2026-10-11: New "should live at the
     top right of the binder element"). */
  .page-actions { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: auto; align-self: center; }

  /* Words changed where they are: they look as they read, with a caret when clicked; an empty
     description shows its placeholder in soft ink, for whoever may write one. */
  .inline-text { outline: none; cursor: text; border-radius: 3px; }
  .inline-text:hover { text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .inline-text:focus { text-decoration: none; box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--rule); }
  .inline-text:empty::before { content: attr(data-placeholder); color: var(--ink-soft); opacity: 0.7; }
  .inline-text:empty:focus::before { content: ""; }
  .binder-edit { font-size: 0.78rem; color: var(--ink-soft); text-decoration-color: var(--rule); text-underline-offset: 3px; }
  .binder-edit:hover { color: var(--ink); }

  .binder-section { margin-block-start: calc(var(--block-space) * 2.2); max-width: 72ch; }
  .section-title { font-size: 1.15em; line-height: 1.2; margin-block-end: 0.7rem; }

  /* To-dos are drawn in todos.css. */

  /* Latest activity, by day: a small heading per day, then a sentence a line with its time on the right. */
  .activity-day { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 1.3rem 0 0.4rem; }
  .activity-day:first-of-type { margin-block-start: 0; }
  .activity-list { display: grid; gap: 0; max-width: 72ch; }
  .activity-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.4rem 0; border-block-end: 1px solid color-mix(in oklab, var(--rule), transparent 40%); font-size: 0.9rem; }
  .activity-why { color: var(--ink-soft); font-style: italic; }
  .activity-time { flex: none; font-size: 0.74rem; color: var(--ink-soft); }
}

@layer components {
  /* Basecamp's activity: a dark tag for each day with a hairline after it, then a line down the left
     with each thing on it. The round mark is the writer's colour: Joey in ink. */
  .timeline { display: grid; gap: 0.2rem; }
  .timeline-day { display: flex; align-items: center; gap: 0.9rem; margin-block: 1.1rem 0.5rem; }
  .timeline-day::after { content: ""; flex: 1; border-block-start: 1px solid var(--rule); order: 1; }
  .timeline-date { order: 0; padding: 0.3em 0.75em; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
  .timeline-people { order: 2; font-size: 0.74rem; color: var(--ink-soft); }
  .timeline-items { display: grid; gap: 0.9rem; margin-inline-start: 1.15rem; padding: 0.4rem 0 0.4rem 1.2rem; border-inline-start: 1px solid var(--rule); }
  .timeline-item { display: grid; grid-template-columns: 4.6rem 2rem 1fr; gap: 0.7rem; align-items: start; }
  .timeline-time { font-size: 0.78rem; color: var(--ink-soft); padding-block-start: 0.35rem; }
  .timeline-who { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: 0.66rem; font-weight: 700; color: var(--paper) !important; background: var(--au, var(--ink)); }
  /* A person's mark is round; an agent's or a model's a rounded square, its initials over a squiggle. */
  .timeline-who.is-agent { border-radius: 28%; display: grid; place-content: center; justify-items: center; gap: 0; line-height: 1; }
  .who-wave { display: block; width: 66%; height: auto; opacity: 0.95; }
  /* An agent with a picture is its picture, in the picture's own shape: no colour behind it, no corners cut. */
  .timeline-who.has-picture { background: none; border-radius: 0; }
  .who-picture { display: block; width: 100%; height: 100%; object-fit: contain; }
  /* What others wrote since I last looked: a dot in the one brand hue, and where I last looked. */
  .timeline-item.is-new .timeline-time::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-inline-end: 0.35rem; border-radius: 50%; background: var(--accent); vertical-align: 0.05em; }
  .timeline-since { display: flex; align-items: center; gap: 0.6rem; margin-inline-start: -1.2rem; font-size: 0.7rem; color: var(--ink-soft); }
  .timeline-since::before { content: ""; width: 1rem; border-block-start: 1px solid var(--accent); }
  .timeline-since::after { content: ""; flex: 1; border-block-start: 1px solid var(--accent); }
  .activity-new { margin-inline-start: 0.5rem; padding: 0.15em 0.6em; border-radius: 999px; background: color-mix(in oklab, var(--accent), var(--paper) 55%); font-size: 0.72rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
  .timeline-more { display: block; margin-block-start: 1.1rem; }
  .timeline-more-link { display: inline-block; padding: 0.35em 1em; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: var(--ink); text-decoration: none; }
  .timeline-more-link:hover { border-color: var(--ink-soft); }
  .timeline-what { display: grid; gap: 0.1rem; padding-block-start: 0.3rem; font-size: 0.92rem; line-height: 1.35; }
  .timeline-what strong { font-weight: 700; }
  .timeline-why { font-style: italic; color: var(--ink-soft); font-size: 0.85rem; }
  /* A writer's burst across many things is one line that opens on the things; a quiet stretch is said. */
  .timeline-burst summary { cursor: pointer; list-style: none; }
  .timeline-burst summary::-webkit-details-marker { display: none; }
  .timeline-burst summary::after { content: " ›"; color: var(--ink-soft); font-weight: 400; }
  .timeline-burst[open] summary::after { content: " ⌄"; }
  .timeline-burst-things { margin: 0.3rem 0 0.2rem; padding: 0; list-style: none; display: grid; gap: 0.15rem; font-size: 0.85rem; color: var(--ink-soft); }
  /* Margin's own upkeep (the guide brought up to date) is one quiet line: soft ink, not bold, its writer's mark faded. */
  .timeline-item.is-upkeep .timeline-what strong { font-weight: 400; color: var(--ink-soft); }
  .timeline-item.is-upkeep .timeline-who { opacity: 0.55; }
  .timeline-quiet { margin: 0.4rem 0 0.9rem; font-size: 0.78rem; font-style: italic; color: var(--ink-soft); }
  .timeline-link { font-size: 0.75rem; color: var(--ink-soft); }

  /* In the margin: the same, smaller. */
  .timeline.is-compact .timeline-items { margin-inline-start: 0.6rem; padding-inline-start: 0.8rem; gap: 0.7rem; }
  .timeline.is-compact .timeline-item { grid-template-columns: 1.5rem 1fr; }
  .timeline.is-compact .timeline-time { grid-column: 2; grid-row: 2; padding: 0; font-size: 0.68rem; }
  .timeline.is-compact .timeline-who { width: 1.5rem; height: 1.5rem; font-size: 0.55rem; grid-row: 1 / 3; }
  .timeline.is-compact .timeline-what { padding: 0; font-size: 0.78rem; }
  .timeline.is-compact .timeline-date { font-size: 0.62rem; }
  .timeline.is-compact .timeline-people { display: none; }
  /* On a phone the timeline is the compact one: the mark, the sentence, and its time under it, so
     the sentence has the width. */
  @media (max-width: 60ch) {
    .timeline-items { margin-inline-start: 0.6rem; padding-inline-start: 0.9rem; gap: 0.85rem; }
    .timeline-item { grid-template-columns: 1.7rem 1fr; gap: 0.15rem 0.65rem; }
    .timeline-who { width: 1.7rem; height: 1.7rem; font-size: 0.58rem; grid-row: 1 / 3; }
    .timeline-what { grid-column: 2; grid-row: 1; padding: 0; font-size: 0.88rem; }
    .timeline-time { grid-column: 2; grid-row: 2; padding: 0; font-size: 0.7rem; }
  }
}

@layer components {
  /* Where it stands, in one line under the name; then the tools as one line each, opened over the page. */
  /* A binder's Status: its words in bold, the line why, who set it when, small; clicked, a form in its place. */
  .binder-status { margin-block-start: 0.8rem; max-width: 72ch; }
  .status-show { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; padding: 0.15rem 0.3rem; margin-inline: -0.3rem;
    font: inherit; font-size: 0.92rem; text-align: start; color: var(--ink); background: none; border: 0; border-radius: 6px; cursor: pointer; }
  .status-show:hover { background: color-mix(in oklab, var(--desk), transparent 30%); }
  .status-show[hidden], .status-edit[hidden] { display: none; }
  .status-words { font-weight: 700; }
  .status-words.is-none { font-weight: 400; color: var(--ink-soft); }
  .status-said { font-size: 0.78rem; color: var(--ink-soft); }
  .status-edit { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
  .status-edit select, .status-edit input { font: inherit; font-size: 0.9rem; padding: 0.35rem 0.5rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); }
  .status-edit input { flex: 1 1 16rem; min-width: 0; }
  .todo-quiet { color: var(--ink); }
  /* A binder's tools, as Basecamp's project cards: a hairline card each, side by side. */
  .tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-block-start: 1.3rem; }
  .tools.has-review { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
  .tool { padding: 0.9rem 1.1rem 0.7rem; border: 1px solid var(--rule); border-radius: 10px; }
  .tool-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-block-end: 0.4rem; }
  .tool-title { font-size: 0.95rem; }
  .tool-title a { color: var(--ink); text-decoration: none; }
  .tool-title a:hover { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
  .tool-count { font-size: 0.74rem; color: var(--ink-soft); }
  .tool-more { font-size: 0.78rem; margin-block: 0.2rem; } .tool-more a { color: var(--ink-soft); }
  .tool .todo-add { margin-block-start: 0.2rem; }
  /* Waiting for review, as HEY's Screener: who, which paper, why, and the answer in the row. */
  .screen { display: grid; }
  .screen-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.4rem 0.8rem; padding: 0.7rem 0; border-block-start: 1px solid var(--rule); }
  .screen-row:first-child { border-block-start: 0; padding-block-start: 0.3rem; }
  .screen-what { display: grid; gap: 0.2rem; min-width: 0; }
  .screen-line { font-size: 0.9rem; line-height: 1.35; } .screen-line a { color: inherit; }
  .screen-when { font-size: 0.72rem; color: var(--ink-soft); font-weight: 400; }
  .screen-why { font-size: 0.84rem; font-style: italic; color: var(--ink-soft); }
  .screen-diff { font-size: 0.82rem !important; line-height: 1.45 !important; padding: 0.45rem 0.6rem; border-radius: 6px; background: color-mix(in oklab, var(--desk), var(--paper) 55%); }
  .screen-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .button.is-small { padding: 0.2rem 0.75rem; font-size: 0.78rem; }
  .sheet-plain.is-wide { width: min(calc(var(--measure) + 8ch), 100%); }
  /* A plain sheet (Find, signing in, joining) on a phone: the screen's width, the usual gutter. */
  @media (max-width: 60ch) { main.settings { padding-inline: 0; } main.settings .sheet-plain { width: 100%; padding-inline: 16px; border-radius: 0; } }

  .binder-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: 80dvh; border: 0; border-radius: 14px; padding: 1.6rem 1.8rem; background: var(--raised); color: var(--ink); outline: 1px solid var(--sheet-edge);
                   box-shadow: 0 30px 60px -20px oklch(var(--lch-shade) / 0.5); }
  .binder-dialog::backdrop { background: var(--backdrop); }
  .binder-dialog.is-form { width: min(32rem, calc(100vw - 2rem)); }
  .dialog-title { font-size: 1.3rem; line-height: 1.25; margin-block-end: 0.4rem; }
  .dialog-close { position: absolute; top: 0.9rem; right: 1rem; font-size: 0.8rem; color: var(--ink-soft); line-height: 1; }
  .dialog-close:hover { color: var(--ink); }
  /* On a phone every dialog is a sheet from the bottom of the screen, as the phone's own are: full
     width, rounded at the top with a grabber, as tall as it needs up to most of the screen, its
     contents scrolling inside; it rises into place. */
  @media (max-width: 60ch) {
    .binder-dialog, .binder-dialog.is-form, .binder-dialog.is-pile {
      width: 100vw; max-width: 100vw; max-height: 90dvh; margin: auto 0 0; padding: 1.6rem 16px calc(1.2rem + env(safe-area-inset-bottom));
      border-radius: 16px 16px 0 0; overflow-y: auto; overscroll-behavior: contain;
    }
    .binder-dialog::before { content: ""; position: absolute; top: 0.5rem; left: 50%; width: 2.4rem; height: 0.3rem; margin-left: -1.2rem; border-radius: 999px; background: var(--rule); }
    .binder-dialog[open] { animation: sheet-rise 220ms ease-out; }
    .binder-dialog .form-actions { position: sticky; bottom: 0; padding-block: 0.6rem; background: var(--raised); }
  }
  @keyframes sheet-rise { from { transform: translateY(40%); opacity: 0.4; } }
  @media (prefers-reduced-motion: reduce) { .binder-dialog[open] { animation: none; } }

  /* The lists on a binder's page: changes to review and to-dos, each a row like the papers' rows,
     its count after its name in soft ink; done to-dos folded away under the list. */
  .row.is-list { max-width: calc(var(--measure) + 8ch); }
  .row.is-list:first-of-type { margin-block-start: 0; }
  .row-count { font-weight: 400; letter-spacing: 0; text-transform: none; margin-inline-start: 0.4rem; }
  .activity-title .row-count, .row-title .row-count { font-size: 0.8rem; color: var(--ink-soft); }
  .list-done { margin-block-start: 0.8rem; font-size: 0.85rem; color: var(--ink-soft); }
  .list-done summary { cursor: pointer; }
  .list-done .todo-list { margin-block-start: 0.4rem; }

  /* Rows: the binders inside, then a row for each kind of paper. */
  .row { margin-block-start: calc(var(--block-space) * 1.8); }
  /* One heading for every section of a page (Joey, 2026-10-11: Shelves and Lately were small capitals
     beside a bold To-dos): bold, a size over the body, Title Case, as Latest Activity is. */
  .row-title { font-size: 1.25em; line-height: 1.2; font-weight: 700; margin-block-end: 0.7rem; }
  .row .spread { margin-block-start: 0; }

  .mini.is-dragging { opacity: 0.4; }
  /* Slides and code shrunk as writing is (mini.css): a slide's title as large on its tile as on the
     room's screen, code at its own size on the page. */
  .mini-page.is-slide { aspect-ratio: 16 / 10; align-content: center; justify-items: center; text-align: center; gap: 0.6em; container-type: inline-size; }
  .mini-page.is-slide .mini-h { font-size: 6.2cqw; line-height: 1.15; }
  .mini-count { color: var(--ink-soft); font-size: 3.4cqw; }
  .spread.is-slides { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .mini-page.is-code { font-family: var(--mono); gap: 0; padding: 4.4% 2.6% 0 5.2%; container-type: inline-size; background: color-mix(in oklab, var(--desk), var(--paper) 50%); }
  .mini-page.is-code .mini-code { font-size: 1.95cqw; line-height: 1.5; }
  .mini-code { white-space: pre; overflow: hidden; }
  .mini-page.is-file { padding: 0; place-items: center; overflow: hidden; }
  .mini-picture { width: 100%; height: 100%; object-fit: cover; }
  .mini-ext { font-family: var(--mono); font-size: 2.2em; color: var(--ink-soft); }
  .upload-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .mini-form label.mini { cursor: pointer; }

  /* A file on its page: shown full width, its size and a download under it, its caption below that. */
  /* A file's page is the file: first, at the full measure, with its name and caption under it. */
  /* A file's picture is never taller than most of the screen, so its name and caption are in sight
     under it (a phone's photo stood taller than the window); the frame shrinks to it, so a ring kept
     as fractions of the picture stays on its part. */
  .file-view { margin: 0 auto 0.9rem; }
  .file-view:has(.file-picture) { width: fit-content; max-width: 100%; }
  .file-picture { display: block; width: auto; max-width: 100%; height: auto; max-height: 72vh; border-radius: 2px; box-shadow: 0 0 0 1px var(--rule); }
  .file-pdf { display: block; width: 100%; height: 78dvh; border: 1px solid var(--rule); border-radius: 2px; }
  .file-tile { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px solid var(--rule); border-radius: 2px; background: color-mix(in oklab, var(--desk), var(--paper) 50%); font-family: var(--mono); font-size: 2.4rem; color: var(--ink-soft); }
  .file-facts { margin-block: -0.4rem 0.5rem; font-size: 0.74rem; color: var(--ink-soft); }
  .paper.is-file .paper-head { margin-block-end: 0.2rem; }
  .paper.is-file .paper-name-input { font-size: 1.05rem; }
  .paper.is-file .editor .cm-content { font-size: 0.88rem; color: color-mix(in oklab, var(--ink), var(--paper) 15%); }
  /* Code and files have no bottom squiggle; their paper ends in a plain edge. */
  .paper.is-code .sheet-text, .paper.is-file .sheet-text { padding-block-end: calc(var(--block-space) * 2.25); }
  .paper-name { margin-block-end: 0.8rem; }
  .paper.is-file .paper-name { margin-block-end: 0.5rem; }
  .paper-name-input { width: 100%; font: inherit; font-size: 1.6em; font-weight: 700; border: 0; border-block-end: 1px solid transparent; background: transparent; color: var(--ink); padding: 0; outline: none; caret-color: var(--caret); }
  .paper-name-input:focus { border-block-end-color: var(--rule); }
  .slides-bar { display: flex; align-items: center; gap: 0.8rem; font-size: 0.8rem; color: var(--ink-soft); margin-block-end: 0.8rem; }

  /* Presenting: a slide fills the screen, its words large and centred; the speaker's notes under it. */
  html.is-presenting, html.is-presenting body { background: var(--paper); height: 100%; }
  .present { min-height: 100dvh; display: grid; cursor: pointer; }
  .slide { display: grid; grid-template-rows: 1fr auto; min-height: 100dvh; }
  .slide[hidden] { display: none; }
  .slide-face { display: grid; align-content: center; justify-items: center; text-align: center; gap: 1.2rem; padding: 6vh 8vw; font-size: clamp(1.4rem, 3.2vw, 3rem); line-height: 1.3; }
  .slide-face h1 { font-size: 1.8em; line-height: 1.1; } .slide-face h2 { font-size: 1.35em; } .slide-face h3 { font-size: 1.1em; }
  .slide-face ul { list-style: disc; text-align: start; padding-inline-start: 1.2em; }
  .slide-face img { max-width: 80vw; max-height: 60vh; }
  .slide-notes { padding: 1rem 8vw 2rem; font-size: 0.9rem; color: var(--ink-soft); white-space: pre-line; border-block-start: 1px solid var(--rule); }
  /* Themes, from the deck's own comment; layouts, from each slide's. Tokens only. */
  .present.theme-ink, .presenter.theme-ink .slide { background: var(--ink); color: var(--paper); }
  .present.theme-ink .slide-notes, .present.theme-ink .present-count, .present.theme-ink .present-back { color: color-mix(in oklab, var(--paper), var(--ink) 35%); }
  .present.theme-desk, .presenter.theme-desk .slide { background: var(--desk); }
  .slide.is-title .slide-face { font-size: clamp(2rem, 5vw, 4.6rem); }
  .slide.is-title .slide-face p { font-size: 0.55em; color: inherit; opacity: 0.75; }
  .slide.is-columns .slide-face { justify-items: stretch; text-align: start; }
  .slide-head { text-align: center; }
  .slide-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: start; }
  .present.has-presenter .slide-notes { display: none; }
  .present-presenter { color: inherit; }
  /* The presenter's screen: the slide large, and beside it the next one, the notes and the time. */
  .presenter { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: 1.5rem; height: 100dvh; padding: 1.5rem; box-sizing: border-box; background: var(--desk); }
  .presenter-now .slide, .presenter-next .slide { min-height: 0; aspect-ratio: 16 / 10; border-radius: 6px; box-shadow: var(--shadow); background: var(--paper); overflow: hidden; }
  .presenter-now .slide-face { font-size: clamp(1rem, 2.2vw, 2.2rem); padding: 4% 6%; height: 100%; box-sizing: border-box; }
  .presenter-next .slide-face { font-size: 0.8rem; padding: 6%; height: 100%; box-sizing: border-box; }
  .presenter-side { display: grid; align-content: start; gap: 0.6rem; overflow-y: auto; }
  .presenter-clock { font-size: 1.6rem; font-weight: 700; }
  .presenter-notes { font-size: 1.1rem; line-height: 1.5; white-space: pre-line; }
  .presenter-notes[hidden], .presenter .slide[hidden] { display: none; }
  .present-back { position: fixed; left: 1.2rem; top: 0.9rem; font-size: 0.8rem; font-weight: 400; color: var(--ink-soft); }
  .present-count { position: fixed; right: 1.2rem; bottom: 0.9rem; font-size: 0.8rem; color: var(--ink-soft); }
}

@layer components {
  /* An empty row is just its +. */
  .spread.is-file .mini-page { aspect-ratio: 4 / 3; }
  .spread.is-empty { display: flex; }
}

.binder-views { display: flex; gap: 0.2rem; margin-block: 1.4rem 0; font-size: 0.8rem; }


@layer components {
  /* The types page: each type a small page in its look, its name, what it is, and its acts. */
  .type-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
  .type-item { display: grid; grid-template-columns: 2.6rem 1fr auto; grid-template-rows: auto auto; column-gap: 0.9rem; align-items: center; padding-block: 0.4rem; border-block-end: 1px solid var(--rule); }
  .type-item .mini-page { grid-row: 1 / 3; width: 2.6rem; height: 3.3rem; border: 1px solid var(--rule); background: var(--paper); }
  .type-name { font-weight: 700; }
  .type-about { grid-column: 2; font-size: 0.8rem; color: var(--ink-soft); }
  .type-acts { grid-column: 3; grid-row: 1 / 3; display: flex; gap: 0.3rem; }
  .type-looks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem 0.5rem; border: 0; padding: 0; }
  .type-looks > legend { grid-column: 1 / -1; }
  .type-look { display: grid; justify-items: center; gap: 0.3rem; font-size: 0.75rem; cursor: pointer; }
  .type-look input { position: absolute; opacity: 0; pointer-events: none; }
  .type-look .mini-page { width: 3rem; height: 3.8rem; border: 1px solid var(--rule); background-color: var(--paper); display: block; }
  .type-look:has(input:checked) .mini-page { box-shadow: 0 0 0 2px var(--ink); }
  .type-look:has(input:focus-visible) .mini-page { outline: 2px solid var(--caret); outline-offset: 2px; }
  .type-words { font-family: var(--mono); font-size: 0.82rem; }
}

@layer components {
  .type-item .mini-sheet, .type-look .mini-sheet { display: block; height: 100%; font-size: 5px; }
}