@layer components {
  /* To-dos you can feel (2026-10-09, from Basecamp and HEY by hand). A row is one line: a ring drawn
     in ballpoint, the words, small chips, and at its end the owner's mark, which turns into a ring to
     choose it. Ticking draws the check in the colour of whoever ticked (.au carries an actor's hue;
     the reader's own is ink) and a strike across the words, left to right, as paper moves. */
  .todo-list { display: grid; gap: 0.1rem; }
  .todo { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.3rem 0; border-radius: 6px; }
  .todo-form { display: contents; }
  .todo-ring { flex: none; width: 1.4rem; height: 1.4rem; margin-block-start: 0.05rem; padding: 0; color: var(--ink); cursor: pointer; }
  .todo-ring .ring { width: 100%; height: 100%; overflow: visible; }
  .ring-loop { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-linecap: round; transition: stroke 120ms; }
  .todo-ring:hover .ring-loop, .todo-ring:focus-visible .ring-loop { stroke: var(--ink); }
  .ring-check { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .todo.is-done .ring-check, .card-ring.is-done .ring-check { stroke-dashoffset: 0; }
  .todo.is-ticking .ring-check, .card-ring.is-ticking .ring-check { transition: stroke-dashoffset 200ms ease-out; }

  .todo-line { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; line-height: 1.45; }
  .todo-title { color: var(--ink); text-decoration: none;
                background: linear-gradient(var(--ink-soft), var(--ink-soft)) no-repeat 0 58% / 0 1.4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  a.todo-title:hover { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
  .todo.is-done .todo-title, .card-ring.is-done + .card-title { color: var(--ink-soft); background-size: 100% 1.4px; }
  .todo.is-ticking .todo-title { transition: background-size 200ms ease-out 60ms, color 200ms; }
  .card-ring + .card-title { background: linear-gradient(var(--ink-soft), var(--ink-soft)) no-repeat 0 58% / 0 1.4px; }
  .card-ring.is-ticking + .card-title { transition: background-size 200ms ease-out 60ms, color 200ms; }
  .chip { font-size: 0.74rem; color: var(--ink-soft); white-space: nowrap; }
  .chip + .chip::before { content: "·"; margin-inline-end: 0.5rem; color: var(--rule); }
  .todo-due { color: var(--ink); }
  .todo.is-done .todo-due { color: var(--ink-soft); }
  .todo-quiet { color: var(--ink); }

  /* The owner's mark at the end of the row. */
  .todo-who { width: 1.35rem !important; height: 1.35rem !important; font-size: 0.5rem !important; margin-inline-start: auto; flex: none; }

  /* Choosing: the same ring is the selection, as HEY's avatars are; chosen, it fills in ink with a
     check in the paper's colour, and the row lifts a little off the page. A held press starts it, so
     the phone's own menu for a held link does not come. */
  .ring-chosen { fill: none; stroke: var(--paper); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
  [data-controller~=select].is-selecting .ring-check { opacity: 0; }
  [data-controller~=select].is-selecting .ring-loop { stroke: var(--ink); stroke-width: 1.6; }
  [data-controller~=select].is-selecting .todo.is-chosen .ring-loop { fill: var(--ink); }
  [data-controller~=select].is-selecting .todo.is-chosen .ring-chosen { opacity: 1; }
  [data-controller~=select].is-selecting .todo { cursor: pointer; }
  /* Lifted, never tinted (DESIGN: never a highlight): a step up off the page, as a small page lies
     on it, with its edge and shadow; each row has room round it while choosing, so none moves. */
  [data-controller~=select].is-selecting .todo { margin-inline: -0.45rem; padding-inline: 0.45rem; }
  [data-controller~=select].is-selecting .todo.is-chosen { background: var(--raised); transform: translateY(-1px); box-shadow: var(--thing-shadow); }
  [data-controller~=select].is-selecting .todo-title { pointer-events: none; }
  .todo { -webkit-touch-callout: none; }
  .select-start { cursor: pointer; }
  .select-verb:disabled { opacity: 0.45; cursor: default; }

  /* The bar of verbs while to-dos are chosen: the masthead's place on a desktop, the foot of the
     screen on a phone, as HEY's. Words, each with its letter. */
  .select-bar { position: fixed; z-index: 60; inset-inline: 0; top: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.5rem;
                padding: 0.7rem 1rem; background: var(--raised); border-block-end: 1px solid var(--rule); box-shadow: var(--shadow); }
  .select-bar[hidden] { display: none; }
  body.has-select-bar .masthead { visibility: hidden; }
  .select-count { font-size: 0.82rem; font-weight: 700; margin-inline-end: 0.5rem; }
  .select-act { display: contents; }
  .select-verb, .select-bar .when-open, .select-cancel { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border: 1px solid var(--rule); border-radius: 999px;
                font-size: 0.85rem; color: var(--ink); background: var(--paper); cursor: pointer; list-style: none; }
  .select-verb:hover, .select-bar .when-open:hover { border-color: var(--ink-soft); }
  .select-verb.is-bin { color: var(--c-red); }
  .select-cancel { border-color: transparent; color: var(--ink-soft); background: transparent; }
  .select-bar kbd, .select-cancel kbd { font-family: var(--font); font-size: 0.68rem; color: var(--ink-soft); }
  .select-bar .when { position: relative; }

  /* A day from words (HEY's Bubble Up): a small menu of days, each with its date on the right. */
  .when { display: inline-block; position: relative; }
  .when-open { cursor: pointer; list-style: none; font-size: 0.78rem; color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 6px; padding: 0.2rem 0.5rem; background: var(--paper); }
  .when-open::-webkit-details-marker { display: none; }
  .when[open] .when-open { color: var(--ink); border-color: var(--ink-soft); }
  .when-menu { position: absolute; z-index: 65; top: calc(100% + 0.3rem); left: 0; min-width: 16rem; display: grid; padding: 0.35rem; border-radius: 10px;
               background: var(--raised); outline: 1px solid var(--sheet-edge); box-shadow: 0 18px 40px -16px oklch(var(--lch-shade) / 0.45); }
  .select-bar .when-menu { left: 50%; transform: translateX(-50%); }
  .when-choice { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.85rem; color: var(--ink); text-align: start; }
  .when-choice:hover, .when-choice:focus-visible { background: color-mix(in oklab, var(--accent), var(--raised) 75%); }
  .when-choice.is-clear { color: var(--ink-soft); }
  .when-choice[hidden] { display: none; }
  .when-date { color: var(--ink-soft); font-size: 0.78rem; }
  .when-pick { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.35rem 0.6rem; font-size: 0.85rem; }
  .when-pick-input { width: 7.5rem; font: inherit; font-size: 0.8rem; border: 1px solid var(--rule); border-radius: 6px; padding: 0.15rem 0.4rem; background: var(--paper); color: var(--ink); }

  /* The adder: the dashed + where the next ring would be, the words, who and when. */
  .todo-add { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; margin-block-start: 0.5rem; padding-block: 0.4rem; }
  .todo-input { flex: 1 1 18rem; min-width: 0; border: 0; border-block-end: 1px solid var(--rule); background: transparent; padding: 0.3rem 0; font: inherit; color: var(--ink); caret-color: var(--caret); outline: none; }
  .todo-input:focus { border-block-end-color: var(--ink-soft); }
  .todo-owner, .todo-state { font: inherit; font-size: 0.78rem; color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 6px; padding: 0.2rem 0.4rem; background: var(--paper); }

  /* A to-do opened over the page: its row, who added it, then each thing set where it stands. */
  .todo-dialog { width: min(36rem, calc(100vw - 2rem)); overflow: visible; }
  .todo-dialog turbo-frame { display: block; }
  .todo-sheet-head .todo { padding-block: 0; }
  .todo-sheet-head .todo-title { font-size: 1.2rem; font-weight: 700; }
  .todo-sheet-by { font-size: 0.8rem; color: var(--ink-soft); margin-block: 0.3rem 1rem; }
  .todo-sheet-plan { display: grid; gap: 0.55rem; margin-block-end: 1rem; }
  .todo-sheet-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: 0.8rem; }
  .todo-sheet-row .field-label { text-align: end; font-weight: 700; font-size: 0.85rem; }
  .todo-sheet-row .todo-owner, .todo-sheet-row .todo-state, .todo-sheet-row .when-open { justify-self: start; font-size: 0.85rem; color: var(--ink); }
  .todo-sheet-about { font-size: 0.85rem; margin-block: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: baseline; }
  .todo-sheet-about a { color: var(--ink-soft); }
  .todo-sheet-words { font-size: 0.88rem; margin-block: 0.6rem; }
  .todo-sheet-history { margin-block-start: 1rem; padding-block-start: 0.7rem; border-block-start: 1px solid var(--rule); display: grid; gap: 0.3rem; font-size: 0.78rem; list-style: none; }
  .todo-sheet-when { color: var(--ink-soft); }
  @media (max-width: 60ch) { .todo-sheet-row { grid-template-columns: 6.5rem minmax(0, 1fr); } }

  /* The ring on a to-do card in the margin, before its words. */
  .card-ring { float: left; margin: 0.05rem 0.45rem 0 0; }
  .card-ring .todo-ring { width: 1.25rem; height: 1.25rem; }

  /* New for you (HEY's Imbox): per binder, its newest few things by others since you looked. */
  .new-binders { display: grid; gap: 0.8rem; list-style: none; }
  .new-binder-head { display: flex; align-items: baseline; gap: 0.5rem; }
  .new-count, .new-in { font-size: 0.78rem; color: var(--ink-soft); }
  .new-binder-name { font-weight: 700; color: var(--ink); text-decoration: none; }
  .new-binder-name:hover { text-decoration: underline; text-decoration-color: var(--rule); }
  .new-things { display: grid; gap: 0.25rem; margin-block-start: 0.3rem; list-style: none; font-size: 0.85rem; }
  .new-things li { display: flex; align-items: baseline; gap: 0.5rem; }
  .new-what { min-width: 0; }
  .new-things .timeline-who { align-self: center; }
  .new-when { font-size: 0.74rem; color: var(--ink-soft); white-space: nowrap; }
  .assigned-binder.is-up-next .assigned-name { color: var(--ink); }
  .row-link { font-size: 0.8rem; color: var(--ink-soft); }
  .row-link:hover { color: var(--ink); }

  .timeline-who-link { display: inline-flex; text-decoration: none; }

  /* Boosts under something that happened: the words given and who, on a line of their own only when
     there are some; Boost itself waits at the line's right edge, shown on hover (always on a touch
     screen), and opens its choices under it, over the page. */
  .timeline-item { position: relative; }
  .boosts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; font-size: 0.74rem; }
  .boosts:has(.boost-words) { margin-block-start: 0.15rem; }
  .boost-words { color: var(--ink); }
  .boost-by { color: var(--ink-soft); }
  .boost-give { position: absolute; top: 0.1rem; right: 0; }
  .boost-open { display: inline; cursor: pointer; list-style: none; font-size: 0.74rem; color: var(--ink-soft); opacity: 0; transition: opacity 120ms; }
  .boost-open::-webkit-details-marker { display: none; }
  .timeline-item:hover .boost-open, .boost-give[open] .boost-open, .boost-open:focus-visible { opacity: 1; }
  @media (hover: none) { .boost-open { opacity: 1; } }
  .boost-form { position: absolute; z-index: 30; top: 1.4rem; right: 0; display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem; border-radius: 10px; white-space: nowrap;
                background: var(--raised); outline: 1px solid var(--sheet-edge); box-shadow: 0 18px 40px -16px oklch(var(--lch-shade) / 0.45); }
  .boost-choice { padding: 0.15rem 0.6rem; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.74rem; color: var(--ink); }
  .boost-choice:hover { border-color: var(--ink-soft); }
  .boost-choice.is-quiet { border-color: transparent; color: var(--ink-soft); }
  .boost-own { width: 9rem; font: inherit; font-size: 0.74rem; border: 0; border-block-end: 1px solid var(--rule); background: transparent; color: var(--ink); padding: 0.1rem 0; }

  .review-count { font-size: 0.8rem; color: var(--ink-soft); align-self: center; }

  /* The bar on a phone, last so it overrides the menus' own places. */
  @media (max-width: 60ch) {
    /* One row at the foot, sliding sideways when the verbs are wider than the phone. */
    .select-bar { top: auto; bottom: 0; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
                  padding: 0.6rem 12px calc(0.6rem + env(safe-area-inset-bottom)); border-block-end: 0; border-block-start: 1px solid var(--rule); }
    .select-bar > *, .select-act > * { flex: none; }
    .select-bar .when-menu { position: fixed; left: 12px; right: 12px; transform: none; bottom: calc(4rem + env(safe-area-inset-bottom)); top: auto; min-width: 0; }
    .select-bar kbd { display: none; }
    body.has-select-bar .masthead { visibility: visible; }
    body.has-select-bar .notice { bottom: 5.5rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .todo.is-ticking .ring-check, .card-ring.is-ticking .ring-check, .todo.is-ticking .todo-title, .card-ring.is-ticking + .card-title,
    .todo { transition: none; }
  }
}

@layer components {
  /* A revision's change (2026-10-09, Grokipedia's): the words around it in soft ink, what went out
     struck in soft ink, what came in in ink on a light box; a rewrite is said in soft words. The
     whole is a way to the change on its paper. Never a colour of its own: the writer's colour is on
     their mark and name. */
  .change { display: block; margin-block: 0.2rem 0.15rem; font-size: 0.84rem; line-height: 1.5; color: var(--ink-soft); text-decoration: none; max-width: 68ch; }
  .change:hover .change-words { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
  .change-section { display: block; font-size: 0.72rem; color: var(--ink-soft); margin-block-end: 0.05rem; }
  .change-out { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--ink-soft); }
  .change-in { color: var(--ink); text-decoration: none; background: color-mix(in oklab, var(--desk), var(--paper) 25%); border-radius: 4px; padding: 0.05rem 0.25rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .change.is-rewrite .change-words { font-style: italic; }
  .new-things .change { margin-inline-start: 0; font-size: 0.8rem; }
}

@layer components {
  /* Live (2026-10-09, Grokipedia's live edits): one change in front, large, with its why; the list
     beside it as the margin sits beside a paper; three numbers under the front. Words and ink only:
     the writer's colour is on their mark and name, the dot is the accent's "new". */
  .live-paper .sheet-text { max-width: none; }
  .live-title { display: flex; align-items: center; gap: 0.55rem; font-size: 1rem; margin-block-end: 1.6rem; }
  .live-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); }
  .live-grid { display: grid; grid-template-columns: minmax(0, 1fr) 34ch; gap: 3rem; align-items: start; }
  .live-front { display: grid; gap: 0.9rem; min-height: 26rem; align-content: space-between; }
  .live-feature { display: grid; gap: 0.7rem; align-content: start; }
  .live-feature[hidden] { display: none; }
  .live-paper { font-size: 2rem; line-height: 1.15; margin: 0; }
  .live-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--ink-soft); }
  .live-meta a { color: inherit; }
  .live-who { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; }
  .live-feature .change { font-size: 1.05rem; line-height: 1.6; max-width: 62ch; }
  .live-why { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0.8rem; font-size: 0.92rem; line-height: 1.55; color: var(--ink); max-width: 62ch; }
  .live-why-label { font-size: 0.78rem; color: var(--ink-soft); padding-block-start: 0.15rem; }
  .live-read { justify-self: start; }
  .live-foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--rule); }
  .live-numbers { display: flex; flex-wrap: wrap; gap: 0.6rem 2.2rem; margin: 0; }
  .live-numbers dd { margin: 0; font-size: 1.35rem; font-weight: 700; order: -1; }
  .live-numbers div { display: flex; flex-direction: column; }
  .live-numbers dt { font-size: 0.74rem; color: var(--ink-soft); }
  .live-controls { display: flex; align-items: center; gap: 0.4rem; }
  .live-step, .live-pause { padding: 0.25rem 0.7rem; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.85rem; color: var(--ink); }
  .live-step:hover, .live-pause:hover { border-color: var(--ink-soft); }
  .live-count { font-size: 0.8rem; color: var(--ink-soft); min-width: 3.5rem; text-align: end; }

  .live-list-title { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; margin-block-end: 0.5rem; }
  .live-new { font-size: 0.74rem; font-weight: 400; color: var(--ink); background: color-mix(in oklab, var(--accent), var(--paper) 65%); border-radius: 999px; padding: 0.05rem 0.5rem; }
  .live-items { list-style: none; display: grid; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain; border-block-start: 1px solid var(--rule); }
  .live-item { display: grid; gap: 0.15rem; width: 100%; text-align: start; padding: 0.6rem 0.4rem 0.6rem 0.8rem; border-block-end: 1px solid var(--rule); border-inline-start: 2px solid transparent; }
  .live-item:hover { background: color-mix(in oklab, var(--desk), var(--paper) 55%); }
  .live-item.is-shown { border-inline-start-color: var(--ink); }
  .live-item-head { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; }
  .live-item-paper { font-weight: 700; font-size: 0.92rem; color: var(--ink); }
  .live-item-when, .live-item-section { font-size: 0.72rem; color: var(--ink-soft); }
  .live-item-words { font-size: 0.8rem; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .live-item-words ins { text-decoration: none; }

  @media (max-width: 70rem) {
    .live-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .live-front { min-height: 0; }
    .live-items { max-height: none; }
  }
  @media (max-width: 60ch) {
    .live-paper { font-size: 1.5rem; }
    .live-why { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  }
}

/* Headings in the list (round two, stream B): a group is its heading, a few words in bold, and its
   rows; the heading is renamed where it stands and removed by the small × at its end; a to-do dragged
   over a group lifts the group a little, as a chosen row lifts. The heading is words, never a status. */
@layer components {
  .todo-group { margin-block-start: 0.6rem; border-radius: 8px; }
  .todo-group:first-of-type { margin-block-start: 0; }
  .todo-group.is-drop { background: var(--raised); box-shadow: var(--thing-shadow); margin-inline: -0.45rem; padding-inline: 0.45rem; }
  .todo-heading-row { display: flex; align-items: baseline; gap: 0.5rem; margin-block: 0.9rem 0.2rem; }
  .todo-heading-row .inline-edit { flex: 1; min-width: 0; }
  .todo-heading { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
  .todo-heading-remove-form { display: contents; }
  .todo-heading-remove { color: var(--ink-soft); font-size: 1rem; line-height: 1; padding: 0 0.3rem; border-radius: 4px; opacity: 0; }
  .todo-heading-row:hover .todo-heading-remove, .todo-heading-row:focus-within .todo-heading-remove, .todo-heading-remove:focus-visible { opacity: 1; }
  @media (hover: none) { .todo-heading-remove { opacity: 1; } }
  .todo-heading-remove:hover { color: var(--ink); background: var(--desk); }
  .todo.is-dragging { opacity: 0.4; }
  .todo-group .todo-add { margin-block-start: 0.2rem; }
  .heading-add { display: flex; align-items: center; gap: 0.6rem; margin-block-start: 1rem; }
  .heading-input { flex: 0 1 14rem; min-width: 0; border: 0; border-block-end: 1px solid var(--rule); background: transparent; padding: 0.3rem 0; font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--ink); caret-color: var(--caret); outline: none; }
  .heading-input:focus { border-block-end-color: var(--ink-soft); }
  .heading-add-button { font-size: 0.8rem; }
}

/* The brief, and the return (round two, stream D): three lines on the sheet in the to-do's own
   words; back from an agent, one line saying so and three plain answers. Words, never a colour. */
@layer components {
  .todo-brief { display: grid; gap: 0.5rem; margin-block-end: 1rem; }
  .todo-brief-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: start; gap: 0.8rem; }
  .todo-brief-row .field-label { text-align: end; font-weight: 700; font-size: 0.85rem; padding-block-start: 0.3rem; }
  .todo-brief-words { font: inherit; font-size: 0.88rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 0.3rem 0.5rem; resize: vertical; min-height: 2.6rem; }
  .todo-brief-words:focus { border-color: var(--ink-soft); outline: none; }
  .todo-brief-save { justify-self: end; font-size: 0.8rem; }
  .todo-back { margin-block: 0.4rem 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--rule); border-radius: 8px; display: grid; gap: 0.5rem; }
  .todo-back-line { margin: 0; font-size: 0.9rem; }
  .todo-back-test { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
  .todo-back-test .field-label { font-weight: 700; color: var(--ink); margin-inline-end: 0.4rem; }
  .todo-back-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
  .todo-back-act { display: contents; }
  .todo-back-send { display: flex; gap: 0.4rem; align-items: center; flex: 1 1 14rem; }
  .todo-back-note { flex: 1; min-width: 0; font: inherit; font-size: 0.85rem; border: 0; border-block-end: 1px solid var(--rule); background: transparent; padding: 0.3rem 0; color: var(--ink); outline: none; }
  .todo-back-note:focus { border-block-end-color: var(--ink-soft); }
  .todo-back-chip { color: var(--ink); }
  @media (max-width: 60ch) { .todo-brief-row { grid-template-columns: 6.5rem minmax(0, 1fr); } }
}