/* =============================================================================
   The desk's stylesheet.

   Loaded after /tokens.css, which is `brand/tokens.css` read off disk at request
   time. Every colour below is one of that file's tokens; `test/stylesheet.test.ts`
   fails on a hex, an rgb() or a colour keyword here, and on any class this styles
   that the renderer never emits (or emits and this does not style).

   ---------------------------------------------------------------------------
   THE DESK IS THE SITE, CONTINUED

   The marketing site (apps/site/app/landing.css) is paper and ink: Archivo for
   display type, Inter for reading, JetBrains Mono only for the smallest chrome,
   pill buttons, hairline rules. The desk uses the same faces — self-hosted from
   /fonts, because the page's CSP is `default-src 'self'` and a CDN link is
   silently refused — mapped onto the brand tokens: --paper, --ink, --ink-3 for
   muted text, --rule for hairlines, --sheet for a card laid on the page.

   ---------------------------------------------------------------------------
   THE LIST IS THE PAGE

   The document is a status strip, the List, Sent to Claude and a footer
   (src/render/list.ts). The List leads: the day in display type, then grouped
   cards of rows, one row per thing she owes or has coming, each opening onto the
   sentence it came from. The column is 880px at most, because a list is read
   down, not across, and a row that runs the width of a 1440px screen is a row
   nobody finishes.

   ---------------------------------------------------------------------------
   STATE BY FORM, NEVER BY COLOUR ALONE

   A state is a word beside a mark, and the mark differs in FORM: filled means on,
   held or settled; an outline means paused or waiting; dashed means not running
   or not yet answered. A pill that cannot be pressed is dashed and says why in its
   label. Greyscale the page and it still parses (BRAND.md §7.2). The one ink with
   a meaning of its own is --held, on the calendar chips of holds that are on her
   calendar: settled, on this Mac and hers.

   Display type is Archivo at the brand's display weight (400 — never bold,
   BRAND.md §4). Body is Inter, 15-18px, for a reader who is likely over 45 and
   has no zoom control in this window.
   ============================================================================= */

@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/archivo.woff2) format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/inter.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono.woff2) format("woff2");
}

/* ------------------------------------------------------------------ page --- */

html {
  background: var(--paper);
}

body.desk {
  /* Archivo's k runs into a following word ("checkat"), so each rule that sets it adds word-spacing: 0.08em. */
  --serif: Archivo, "Helvetica Neue", Arial, sans-serif;
  --sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}

/* Prose is selectable; the chrome is not, which is how a Mac window behaves. */
.desk p,
.desk li,
.desk pre,
.desk blockquote,
.desk .status,
.desk .claim {
  -webkit-user-select: text;
  user-select: text;
}

/*
  Resets on bare elements, deliberately unscoped. Written as `.desk p` they were (0,1,1) and beat
  every single-class rule below — the pills rendered as bare text. Same trap the site's stylesheet
  documents; the sheet is only ever loaded by this document.
*/
p,
h1,
h2,
h3,
ol,
ul,
pre,
blockquote {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.sheet {
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 40px 48px;
  box-sizing: border-box;
}

/* --------------------------------------------------------- the status strip -- */

.strip {
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}

.strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
}

/* The sentence and the line under it stay together, so the control wraps below both, not between. */
.strip__say {
  flex: 1 1 auto;
  min-width: 0;
}

/*
  The pill and its caption sit at the right of the sentence. The caption's flex-basis is short so
  the row fits beside a long sentence and the caption takes what is left, wrapping to two short
  lines before the whole group drops to a row of its own.
*/
.strip__ctl {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-left: auto;
  min-width: 0;
}

.status {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-family: var(--serif);
  font-weight: var(--fw-h3);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  word-spacing: 0.08em;
}

.status__lost,
.strip__lost {
  display: none;
}

.strip__how {
  flex: 1 1 12ch;
  min-width: 12ch;
  max-width: 22ch;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-3);
  text-wrap: balance;
}

.strip__line {
  margin-top: 2px;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

.strip > .fold {
  margin-top: 6px;
  border-top: 0;
}

/* The mark: filled = on or settled, outline = paused or waiting, dashed = not running. */
.mark {
  flex: none;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: transparent;
}

.mark--on {
  background: var(--ink);
}

.mark--off {
  border-style: dashed;
}

.mark--sm {
  width: 8px;
  height: 8px;
}

/* ----------------------------------------------------------------- pills --- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  flex: none;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--t-fast) var(--ease);
}

.pill:hover {
  opacity: 0.86;
}

.pill--line {
  background: transparent;
  color: var(--ink);
}

/* A pill that cannot be pressed says so in its label and is dashed, at full opacity. */
.pill:disabled {
  background: transparent;
  color: var(--ink);
  border-style: dashed;
  cursor: default;
  opacity: 1;
}

/* --------------------------------------------------------- disclosures ---- */

.fold {
  border-top: 1px solid var(--rule);
}

.fold__sum {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  padding: 1px 0;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink-2);
}

.fold__sum::-webkit-details-marker {
  display: none;
}

.fold__sum::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: -3px 5px 0 3px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg);
}

.fold[open] > .fold__sum::before {
  transform: rotate(45deg);
  margin-top: -6px;
}

.fold__body {
  padding: 6px 0 18px 25px;
  max-width: calc(var(--measure) + 25px);
  font-size: 16px;
  line-height: 1.5;
}

.fold__body > p,
.fold__body > .note {
  margin: 0 0 10px;
  max-width: 64ch;
  text-wrap: pretty;
}

.note {
  color: var(--ink-2);
}

.raw {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- panels --- */

.panel {
  margin-top: var(--s6);
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
}

.head__t {
  font-family: var(--serif);
  font-weight: var(--fw-h3);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  word-spacing: 0.08em;
}

.head__n {
  font-size: 15px;
  line-height: 1.2;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lede {
  margin-top: 8px;
  max-width: var(--measure);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* A grouped card of rows, laid on the page: the List's groups, what it did, and the calls. */
.items,
.did,
.calls {
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-3);
  box-shadow: var(--e-1);
  overflow: hidden;
}

/* The open-and-close chevron after a row's first line, the same shape as a fold's. */
.item__title::after,
.call__sum .call__why::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 3px 10px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg);
  vertical-align: middle;
}

.item__fold[open] .item__title::after,
.call__fold[open] .call__sum .call__why::after {
  transform: rotate(45deg);
  margin-bottom: 6px;
}

/* ----------------------------------------------------------------- the List -- */

.today {
  display: grid;
  gap: 3px;
}

.today__date {
  font-family: var(--serif);
  font-weight: var(--fw-h2);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  word-spacing: 0.08em;
}

.today__sum {
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.today__catch {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.list__say {
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--edge);
  border-radius: var(--r-2);
  font-size: 15px;
  line-height: 1.4;
}

.list__say:empty {
  display: none;
}

.group {
  margin-top: var(--s5);
}

.group__t {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin: 0 0 var(--s2) 4px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: var(--lh-label);
  letter-spacing: 0.1em;
  font-weight: var(--fw-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.group__n {
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.group__empty {
  padding: var(--s2) 4px;
  max-width: var(--measure);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-3);
}

.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2) var(--s4);
  align-items: end;
  padding: 14px 16px 14px 20px;
  transition: background var(--t-fast) var(--ease);
}

.item + .item {
  border-top: 1px solid var(--rule);
}

.item:hover {
  background: var(--rule-soft);
}

.item__fold {
  min-width: 0;
}

.item__sum {
  display: grid;
  gap: 3px;
  cursor: pointer;
  list-style: none;
}

.item__sum::-webkit-details-marker {
  display: none;
}

.item__title {
  font-family: var(--serif);
  font-weight: var(--fw-h3);
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  word-spacing: 0.08em;
}

.item__meta {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
}

.item__due {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.item__words {
  color: var(--ink-3);
}

.item__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

/* Where it came from. A tag is information, not a control: squared, hairline, never a pill. */
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  font-size: 13px;
  line-height: 1;
  color: var(--ink-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Where it stands on her calendar: settled is solid with a filled mark; waiting is dashed. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--r-1);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.chip--held {
  border: 1px solid var(--held-rule);
  background: var(--held-tint);
  color: var(--held);
}

.chip--held .mark {
  border-color: var(--held);
  background: var(--held);
}

.chip--wait {
  border: 1px dashed var(--edge);
  color: var(--ink-2);
}

.chip--note {
  padding: 0 2px;
  color: var(--ink-3);
}

.item__more {
  display: grid;
  gap: var(--s2);
  max-width: var(--measure);
  padding-top: var(--s3);
}

.item__quote {
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--edge);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.item__seen,
.item__next {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* Why it did not act by itself. Ink, not grey, and ruled like the quote, so it reads as a notice. */
.item__warn {
  padding-left: 14px;
  border-left: 2px solid var(--ink);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

.item__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

/* A row's buttons: quieter than the strip's pill, still the one soft shape that means "press". */
.act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 13px;
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.act:hover {
  background: var(--paper-2);
}

.act--main {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.act--main:hover {
  background: var(--ink);
  opacity: 0.86;
}

/* Sent and not answered yet: dashed, the same form as anything else not yet answered. */
.act[aria-busy="true"] {
  border-style: dashed;
  cursor: progress;
}

/* Forget: a quiet first press that opens what it will take, then the press that does it. Open, it
   takes a row of its own under the other buttons. */
.forget {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.forget[open] {
  flex-basis: 100%;
}

.forget__sum {
  list-style: none;
  color: var(--ink-2);
}

.forget__sum::-webkit-details-marker {
  display: none;
}

.forget[open] > .forget__sum {
  border-style: dashed;
}

.forget__note {
  flex-basis: 100%;
  max-width: 52ch;
  margin: 4px 0 2px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  text-align: right;
  text-wrap: pretty;
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-2);
  white-space: nowrap;
}

/* What it did today: a time, a sentence, and the way back. */
.did__row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--s3);
  align-items: center;
  padding: 11px 16px 11px 20px;
}

.did__row + .did__row {
  border-top: 1px solid var(--rule);
}

.did__at {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.did__what {
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.did__gone {
  font-size: 14px;
  color: var(--ink-3);
  white-space: nowrap;
}

.list__empty {
  margin-top: var(--s5);
  padding: var(--s6) var(--s5);
  border: 1px dashed var(--edge);
  border-radius: var(--r-3);
  text-align: center;
}

.list__empty-t {
  font-family: var(--serif);
  font-weight: var(--fw-h3);
  font-size: 20px;
  line-height: 1.3;
  word-spacing: 0.08em;
}

.list__empty-d {
  margin: var(--s2) auto 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---------------------------------------------------- the List in layers -- */

/*
  docs/plan/LIST-LAYERS.md. A main thing is a row like any other, a little larger, that opens onto
  what belongs to it: the List's own rows, one level in, on a hairline; a checklist made for it; a
  suggested step. Inside those, their steps, one more level in. Every level is also a nested list
  with a label, so a screen reader says the same thing the indent does.

  State by form, as everywhere here: a suggested step is on a dashed tag (not on the List, not
  answered); what was made for her is on a solid one; a checklist's line is an outline square (not
  done); a row she marked done is struck through and says "Done".
*/

/* A hidden row stays hidden: `.item` and `.main` set their own display, which would beat the UA rule. */
.items > [hidden],
.kids > [hidden],
.group[hidden] {
  display: none;
}

.group--main .items {
  border-color: var(--edge);
}

.main {
  padding: 16px 16px 16px 20px;
}

.main + .main {
  border-top: 1px solid var(--rule-strong);
}

.main__fold {
  min-width: 0;
}

.main__sum {
  display: grid;
  gap: 3px;
  cursor: pointer;
  list-style: none;
}

.main__sum::-webkit-details-marker {
  display: none;
}

.main__title {
  font-family: var(--serif);
  font-weight: var(--fw-h3);
  font-size: 21px;
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  word-spacing: 0.08em;
}

.main__title::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 3px 10px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg);
  vertical-align: middle;
}

.main__fold[open] .main__title::after {
  transform: rotate(45deg);
  margin-bottom: 6px;
}

.main__meta {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
}

.main__next {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

.main__progress {
  color: var(--ink);
  font-weight: 500;
}

/* The event's own buttons, under its sentence, where the words they act on are. */
.main__body > .item__acts {
  justify-content: flex-start;
}

.main__body {
  display: grid;
  gap: var(--s2);
  padding-top: var(--s3);
}

.main__why {
  max-width: var(--measure);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* Level 2: what belongs to it, one step in, on a hairline. */
.kids {
  margin: var(--s1) 0 0 2px;
  border-left: 2px solid var(--rule-strong);
}

.item--kid {
  padding: 10px 0 10px 16px;
}

.item--kid .item__title {
  font-size: 17px;
}

.item--kid:hover {
  background: transparent;
}

.kids > li + li {
  border-top: 1px solid var(--rule);
}

.item--done .item__title {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.kid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px var(--s4);
  align-items: start;
  padding: 10px 0 10px 16px;
}

.kid > :not(.item__acts) {
  grid-column: 1;
}

.kid > .item__acts {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
}

.kid__tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: 0.08em;
  font-weight: var(--fw-label);
  text-transform: uppercase;
  color: var(--ink-2);
}

.kid--made .kid__tag {
  border-color: var(--edge);
  color: var(--ink);
}

.kid--suggested .kid__tag {
  border-style: dashed;
  border-color: var(--edge);
}

.kid__title {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}

.kid__from {
  max-width: var(--measure);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-3);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* Level 3: a checklist's lines, a suggested step's parts. */
.steps {
  display: grid;
  gap: 2px;
  margin-top: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
}

.step {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}

.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--ink-3);
  border-radius: 1px;
}

/* Key numbers: small squared chips in the mono face, so a 1 and an l never meet. */
.nums {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.num {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  background: var(--sheet);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Words for a screen reader only. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The find box: an input, so the one soft shape. */
.find {
  display: grid;
  gap: 6px;
  margin-top: var(--s4);
}

.find__label {
  margin-left: 4px;
  font-size: 12px;
  line-height: var(--lh-label);
  letter-spacing: 0.1em;
  font-weight: var(--fw-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.find__box {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-user-select: text;
  user-select: text;
}

.find__box::placeholder {
  color: var(--ink-3);
}

/* The browser's own clear button is blue; this one is the placeholder's ink. */
.find__box::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin: 0 -4px 0 8px;
  background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}

/* ------------------------------------------------------------------ setup -- */

/*
  Setup (D19, src/render/setup.ts): the agent sets the app up, and this is what she watches. One
  column, the step's heading in display type, its lines in reading type, one pill for the one thing
  she presses (Set it up), everything else a quiet row button or an underlined link. What setup did
  is a checklist card, a filled mark per line done and an outline for one not done; a question not
  yet answered is a dashed box, the form every unanswered thing on this page has; the example
  heads-up is a card laid on the page, the shape a notification has. Nothing here is coloured by
  meaning.
*/
.setup {
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--rule);
}

.setup__head {
  display: grid;
  gap: 6px;
  margin-top: var(--s4);
}

.setup__kicker {
  font-size: 12px;
  line-height: var(--lh-label);
  letter-spacing: 0.1em;
  font-weight: var(--fw-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.setup__title {
  font-family: var(--serif);
  font-weight: var(--fw-h2);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  text-wrap: balance;
  word-spacing: 0.08em;
}

.setup__line {
  margin-top: var(--s3);
  max-width: var(--measure);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.setup__line--lead {
  font-size: 19px;
  color: var(--ink);
}

/* Something for her to do or know first: ruled like a quote, in ink. */
.setup__line--warn {
  padding-left: 14px;
  border-left: 2px solid var(--ink);
  color: var(--ink);
}

.setup__line--wait {
  color: var(--ink-3);
}

.setup__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
}

/* A link that does one thing: open a pane, go on, add to Never read. Underlined, never a pill. */
.setup__link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}

.setup__link::-webkit-details-marker {
  display: none;
}

/* The checklist's heading: what the agent did, said as done. */
.setup__checks-t {
  margin-top: var(--s5);
  font-size: 12px;
  line-height: var(--lh-label);
  letter-spacing: 0.1em;
  font-weight: var(--fw-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.setup__checks {
  margin-top: var(--s2);
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-3);
  box-shadow: var(--e-1);
  overflow: hidden;
}

.setup__check {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: var(--s3);
  align-items: baseline;
  padding: 12px 16px 12px 20px;
  font-size: 16px;
  line-height: 1.45;
}

.setup__check + .setup__check {
  border-top: 1px solid var(--rule);
}

.setup__check .mark {
  transform: translateY(1px);
}

/* A done row is ticked, not dotted: a dot reads as a bullet. Drawn, since a tick character is an emoji to copy-lint. */
.setup__check .mark--on {
  width: 7px;
  height: 12px;
  margin-left: 3px;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  background: transparent;
  transform: translateY(-1px) rotate(45deg);
}

.setup__check-t {
  min-width: 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* First Catch, counting, the whole tour long. */
.setup__strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-2);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* The example heads-up, shaped like the notification it stands for. */
.setup__note {
  margin-top: var(--s4);
  max-width: 60ch;
  padding: 4px var(--s4) var(--s4);
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-3);
  box-shadow: var(--e-1);
}

.setup__note > .setup__acts {
  margin-top: var(--s3);
}

/* A question not answered yet: dashed, as everything not yet answered is. */
.setup__ask {
  margin-top: var(--s4);
  max-width: 64ch;
  padding: 4px var(--s4) var(--s4);
  border: 1px dashed var(--edge);
  border-radius: var(--r-3);
}

.setup__ask > .setup__acts {
  margin-top: var(--s3);
}

.setup__add {
  margin-top: var(--s2);
}

.setup__form {
  display: grid;
  justify-items: start;
  gap: var(--s3);
  max-width: 420px;
  margin-top: var(--s3);
}

.setup__label {
  display: grid;
  gap: 4px;
  width: 100%;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
}

.setup__input {
  box-sizing: border-box;
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--edge);
  border-radius: var(--r-2);
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-user-select: text;
  user-select: text;
}

/* Never read, at the foot of the List: the same lines as the tour's third stop. */
.setup__never {
  margin-top: var(--s5);
}

.setup__say {
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--edge);
  border-radius: var(--r-2);
  font-size: 15px;
  line-height: 1.4;
}

.setup__say:empty {
  display: none;
}

.setup > .fold {
  margin-top: var(--s5);
}

/* ------------------------------------------------------------ Ready for you -- */

/*
  The morning page (src/render/ready.ts): what the night prepared, above the List. A row is a card
  row like the List's, with the prepared text folded under it and Approve, Edit and Discard below;
  Edit and Discard open in place, full width, so what she types stays on the page. The value number
  sits above the rows as a plate: solid when a time was measured, dashed when not yet.
*/
.ready > .fold {
  margin-top: var(--s3);
  border-top: 0;
}

.value {
  display: grid;
  gap: 4px;
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-3);
  max-width: var(--measure);
}

.value--none {
  background: transparent;
  border-style: dashed;
  border-color: var(--edge);
}

.value__main {
  font-family: var(--serif);
  font-weight: var(--fw-h3);
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  font-variant-numeric: tabular-nums;
  word-spacing: 0.08em;
}

.value__line {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
  font-variant-numeric: tabular-nums;
}

.preps {
  margin-top: var(--s4);
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-3);
  box-shadow: var(--e-1);
  overflow: hidden;
}

.group > .preps {
  margin-top: 0;
}

.prep {
  display: grid;
  gap: 4px;
  padding: 16px 16px 16px 20px;
}

.prep + .prep {
  border-top: 1px solid var(--rule);
}

.prep__kind {
  font-size: 12px;
  line-height: var(--lh-label);
  letter-spacing: 0.1em;
  font-weight: var(--fw-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.prep__what {
  font-family: var(--serif);
  font-weight: var(--fw-h3);
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  word-spacing: 0.08em;
}

.prep__who {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.prep__task,
.prep__used {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-3);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.prep__took {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.prep__took--none {
  color: var(--ink-3);
  font-style: italic;
}

/* Something to check before approving: ruled in ink like the List's notice, with a word in front. */
.prep__check {
  margin: 4px 0;
  padding-left: 14px;
  border-left: 2px solid var(--ink);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

.prep__flag {
  margin-right: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: var(--fw-label);
  text-transform: uppercase;
}

.prep__fold {
  margin-top: 4px;
}

.prep__sum {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink-2);
}

.prep__sum::-webkit-details-marker {
  display: none;
}

.prep__sum::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: -3px 3px 0 1px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg);
}

.prep__fold[open] > .prep__sum::before {
  transform: rotate(45deg);
  margin-top: -6px;
}

.prep__body {
  display: grid;
  gap: var(--s2);
  padding: var(--s2) 0 var(--s1);
  max-width: var(--measure);
}

.prep__mail {
  display: grid;
  gap: 2px;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.prep__hdr {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s2);
}

.prep__hdr dt {
  color: var(--ink-3);
}

.prep__hdr dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Her draft, as it would read in Mail: the reading face, not the machine one. */
.prep__text {
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 26em;
  overflow-y: auto;
}

.prep__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
}

.prep__open > .act {
  list-style: none;
}

.prep__open > .act::-webkit-details-marker {
  display: none;
}

/* Opened, Edit or Discard takes the whole row under the buttons, so the box is wide enough to write in. */
.prep__open[open] {
  order: 3;
  flex-basis: 100%;
}

.prep__open[open] > .act {
  border-style: dashed;
}

.prep__form {
  display: grid;
  gap: var(--s2);
  justify-items: start;
  margin-top: var(--s2);
  max-width: var(--measure);
}

.prep__label {
  display: grid;
  gap: 4px;
  width: 100%;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
}

.prep__input,
.prep__area {
  box-sizing: border-box;
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--edge);
  border-radius: var(--r-2);
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-user-select: text;
  user-select: text;
}

.prep__area {
  resize: vertical;
  min-height: 10em;
}

.prep--done {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px var(--s3);
}

.prep--done > .prep__took,
.prep--done > .prep__acts,
.prep--done > .prep__fold {
  grid-column: 2;
}

.prep__line {
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.prep--left .prep__line {
  color: var(--ink-2);
}

.prep__drops {
  padding-left: 20px;
  list-style: decimal;
  font-size: 15px;
  line-height: 1.5;
}

/* ------------------------------------------------------------ Sent to Claude -- */

.sent {
  margin-top: var(--s7);
}

.calls {
  margin-top: var(--s4);
}

.call + .call {
  border-top: 1px solid var(--rule);
}

.call__sum,
.call--kept {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s3);
  padding: 12px 16px 12px 20px;
}

.call__sum {
  cursor: pointer;
  list-style: none;
}

.call__sum::-webkit-details-marker {
  display: none;
}

.call__sum:hover {
  background: var(--rule-soft);
}

/* Held back: it stayed on this Mac, so it carries the settled ink's bar, and no fold to open. */
.call--kept {
  border-left: 3px solid var(--held-rule);
  padding-left: 17px;
}

.call__at {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.call__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.call__why {
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.call__meta {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.sent > .fold {
  margin-top: var(--s3);
  border-top: 0;
}

/* The exact text that left, as it left. Scrolls rather than stretching the page. */
.call__text {
  margin: 0 16px 14px 104px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 22em;
  overflow-y: auto;
}

/* ------------------------------------------------------------ Share my counts -- */

.counts {
  margin-top: var(--s7);
}

.counts > .fold {
  margin-top: var(--s3);
  border-top: 0;
}

/* The lines she would paste, as they will paste: kept as written, selectable, never wider than the page. */
.counts__text {
  margin: 0;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  color: var(--ink-2);
  white-space: pre-wrap;
  user-select: text;
}

/* Your controls: each a title, what is set now, and its choices as a row of pills. */
.controls {
  margin-top: var(--s7);
}

.control {
  padding: var(--s4) 0;
  border-top: 1px solid var(--rule);
}

.control__t {
  font-size: 16px;
  font-weight: 600;
}

.control__now {
  margin: var(--s2) 0 var(--s3);
  max-width: 64ch;
  color: var(--ink-2);
}

.control__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
}

.control__k {
  flex: 0 0 26ch;
  color: var(--ink-2);
}

.control__more {
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
}

.choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* Your rules (D27): each rule its name, what it means as it is set, and On and Off. */
.rule {
  margin-top: var(--s4);
}

.rule__t {
  font-size: inherit;
  font-weight: 600;
}

/* The choice that is set: filled, as the pill a press would make. */
.choice > .pill[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* Things it learned: each task a fold, its name and when it was seen on the line; its steps inside. */
.learned {
  margin-top: var(--s7);
}

.learned__list {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
}

.learned__skill + .learned__skill {
  border-top: 1px solid var(--rule);
}

.learned__t {
  font-weight: 600;
}

.learned__seen {
  color: var(--ink-2);
}

.learned__k {
  margin: var(--s3) 0 var(--s2);
  color: var(--ink-2);
}

.learned__steps,
.learned__blanks {
  margin: 0;
  padding-left: 1.4em;
}

.learned__note {
  color: var(--ink-3);
}

/* Export everything: one button, and where the last folder went. */
.export {
  margin-top: var(--s7);
}

.export__last {
  margin: var(--s3) 0;
  color: var(--ink-2);
}

/* The Friday Page: her week on one sheet, a page of its own at /friday. */
.friday__nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
}

.friday__print {
  font-size: 15px;
  color: var(--ink-3);
}

.friday__top {
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--ink);
}

.friday__t {
  font-family: var(--serif);
  font-weight: var(--fw-h3);
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  word-spacing: 0.08em;
}

.friday__dates {
  margin-top: var(--s2);
  color: var(--ink-2);
}

.friday__part {
  margin-top: var(--s6);
}

.friday__rows {
  margin-top: var(--s3);
}

.friday__row {
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule);
}

.friday__what {
  font-weight: 600;
}

.friday__note {
  color: var(--ink-2);
}

.friday__warn {
  display: block;
  font-size: 15px;
  color: var(--ink-3);
}

.friday__none,
.friday__line {
  margin-top: var(--s2);
  color: var(--ink-2);
}

.friday__day,
.friday__h {
  margin-top: var(--s4);
  font-family: var(--serif);
  font-weight: var(--fw-h3);
  font-size: 18px;
  line-height: 1.25;
  word-spacing: 0.08em;
}

.friday__block {
  margin-top: var(--s4);
}

.friday__num {
  margin-top: var(--s2);
  font-size: 20px;
  line-height: 1.35;
}

/* On paper: no way back to the desk, and each part kept whole where it fits. */
@media print {
  @page {
    margin: 14mm;
  }

  body.desk {
    font-size: 11pt;
  }

  .sheet {
    max-width: none;
    padding: 0;
  }

  .friday__nav {
    display: none;
  }

  .friday__part,
  .friday__row {
    break-inside: avoid;
  }
}

/* ----------------------------------------------------------------- the foot -- */

.foot {
  margin-top: var(--s7);
}

/* The three claims: the site's 1px-gap grid. */
.claims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  overflow: hidden;
}

.claim {
  background: var(--paper);
  padding: var(--s3) var(--s4);
  display: grid;
  gap: var(--s1);
  align-content: start;
}

.claim__t {
  font-family: var(--serif);
  font-weight: var(--fw-h3);
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  word-spacing: 0.08em;
}

.claim__d {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}

.colophon {
  margin-top: var(--s3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* --------------------------------------------------------------- lost touch -- */

.banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: var(--s3) 18px;
  margin-bottom: 14px;
  border: 1px solid var(--ink);
  border-radius: var(--r-3);
  font-size: 16px;
  line-height: 1.45;
}

.banner--shown,
[data-connection="lost"] .banner {
  display: flex;
}

.banner__reload {
  height: 34px;
  padding: 0 16px;
}

/* Everything the client can no longer vouch for, said by the strip itself. */
[data-connection="lost"] .status__live,
[data-connection="lost"] .strip__live {
  display: none;
}

[data-connection="lost"] .status__lost,
[data-connection="lost"] .strip__lost {
  display: inline;
}

[data-connection="lost"] .status .mark {
  background: transparent;
  border-style: dashed;
}

[data-connection="lost"] .strip .pill,
[data-connection="lost"] .act {
  background: transparent;
  color: var(--ink);
  border-style: dashed;
  pointer-events: none;
}

[data-connection="lost"] .strip .pill::after {
  content: " — cannot reach it";
}

/* --------------------------------------------------------- narrow window -- */

@media (max-width: 760px) {
  .sheet {
    padding: 16px 20px 32px;
  }

  .status {
    font-size: 19px;
  }

  /* Everything in the strip hangs from the sentence's first letter, with the mark in the margin. */
  .strip__ctl {
    width: 100%;
    margin-left: 0;
    padding-left: 24px;
  }

  .strip__how {
    flex: 1 1 auto;
    max-width: none;
  }

  /* The buttons drop under the row they belong to, left-aligned with its words. */
  .item {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 16px;
  }

  .item__acts {
    justify-content: flex-start;
  }

  .item--kid {
    padding-right: 0;
  }

  .kid {
    grid-template-columns: minmax(0, 1fr);
  }

  .kid > .item__acts {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .did__row {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .did__row > .act,
  .did__gone {
    grid-column: 2;
    justify-self: start;
  }

  .call__sum,
  .call--kept {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .call__text {
    margin-left: 20px;
  }

  .claims {
    grid-template-columns: 1fr;
  }

  .prep {
    padding-right: 16px;
  }

  .prep--done {
    grid-template-columns: minmax(0, 1fr);
  }

  .prep--done > .prep__took,
  .prep--done > .prep__acts,
  .prep--done > .prep__fold {
    grid-column: 1;
  }

  .prep__hdr {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .banner {
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------- a reader who asked for more -- */

@media (prefers-contrast: more) {
  body.desk {
    --ink-3: var(--ink);
    --ink-2: var(--ink);
    --rule: var(--edge);
    --rule-strong: var(--edge);
  }

  :focus-visible {
    outline-width: 3px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .fold__sum::before,
  .main__title::after,
  .item__title::after,
  .call__sum .call__why::after {
    transition: transform var(--t-mid) var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* =============================================================================
   LIQUID GLASS — the desk James chose on 2026-10-02 (off-white and charcoal since 2026-10-03, no blue;
   frosted, not clear). src/render/glass.ts draws the views; these rules are
   the mockups in ui-drafts/direction/glass/ (G3 the handover, G4 the people
   board, G5 the receipts, G6 the small window), with the kit's values from
   brand/tokens.css (--lg-*), the same numbers the Mac app's GlassTokens.swift
   holds.

   The frost (Frost v1.5, light and dark by the system setting): the whole
   window is one frosted panel. In the Desk window the Mac's own behind-window
   material blurs her desktop (DeskWindow.swift sets data-glass="native" on
   <html>) and the page lays the palette's tint over it, off-white or charcoal.
   Anywhere else (a browser, the site, a snapshot) the page draws a grey storm
   and frosts it the same way. Inside, rows and cards are flat fills with a
   hairline, not glass on glass.

   Coral is the countdown ring and Stop, and nothing else. Every state is also
   a word, so the page still reads with the colour gone.
   ============================================================================= */

/* `:where` keeps this at the specificity of `html`, so `html[data-glass="native"]` below wins in the Desk
   window and the Mac's frost shows through: `html:has(body.desk--glass)` alone outranked it and painted
   the window solid charcoal. */
html:where(:has(body.desk--glass)) {
  background: var(--lg-m-storm-3);
}

/* Light and dark follow the system (Frost v1.5): the --lg-m-* roles are light in brand/tokens.css and
   point at the dark set here. On `html` so the window's own background reads them too. */
@media (prefers-color-scheme: dark) {
  html:has(body.desk--glass) {
    --lg-m-blur: var(--lg-fd-blur);
    --lg-m-tint-top: var(--lg-fd-tint-top);
    --lg-m-tint-bot: var(--lg-fd-tint-bot);
    --lg-m-bg: var(--lg-fd-bg);
    --lg-m-ink: var(--lg-fd-ink);
    --lg-m-ink-2: var(--lg-fd-ink-2);
    --lg-m-line: var(--lg-fd-line);
    --lg-m-edge: var(--lg-fd-edge);
    --lg-m-mark-edge: var(--lg-fd-mark-edge);
    --lg-m-dot: var(--lg-fd-dot);
    --lg-m-hover: var(--lg-fd-hover);
    --lg-m-press: var(--lg-fd-press);
    --lg-m-panel: var(--lg-fd-panel);
    --lg-m-card: var(--lg-fd-card);
    --lg-m-card-2: var(--lg-fd-card-2);
    --lg-m-card-top: var(--lg-fd-card-top);
    --lg-m-card-shade: var(--lg-fd-card-shade);
    --lg-m-face: var(--lg-fd-face);
    --lg-m-main: var(--lg-fd-main);
    --lg-m-main-ink: var(--lg-fd-main-ink);
    --lg-m-rim-1: var(--lg-fd-rim-1);
    --lg-m-rim-2: var(--lg-fd-rim-2);
    --lg-m-rim-3: var(--lg-fd-rim-3);
    --lg-m-shade-1: var(--lg-fd-shade-1);
    --lg-m-shade-2: var(--lg-fd-shade-2);
    --lg-m-storm-1: var(--lg-fd-storm-1);
    --lg-m-storm-2: var(--lg-fd-storm-2);
    --lg-m-storm-3: var(--lg-fd-storm-3);
    --lg-m-storm-4: var(--lg-fd-storm-4);
  }
}

body.desk--glass {
  /* The older panels inside the views (Ready for you, the List, Sent) take the frost's inks: no blue,
     no ledger red, whatever the mode. */
  --ink: var(--lg-m-ink);
  --ink-2: var(--lg-m-ink-2);
  --ink-3: var(--lg-m-ink-2);
  --rule: var(--lg-m-line);
  --rule-soft: var(--lg-m-line);
  --rule-strong: var(--lg-m-edge);
  --edge: var(--lg-m-edge);
  --sheet: var(--lg-m-card-2);
  --paper: transparent;
  --paper-2: var(--lg-m-panel);
  --held: var(--lg-m-ink);
  --held-on: var(--lg-m-main-ink);
  --held-rule: var(--lg-m-ink);
  --held-tint: var(--lg-m-press);
  --open: var(--lg-m-ink);

  min-height: 100vh;
  background: transparent;
  color: var(--lg-m-ink);
  font-family: var(--lg-sans);
  font-size: 15px;
  /* Inter's single-storey a and tailed l (the house style, design/STYLE.md). */
  font-feature-settings: "cv11" 1, "cv05" 1, "calt" 1;
}

/* In the Desk window her desktop, frosted by the Mac, is the background: no wallpaper of ours. */
html[data-glass="native"],
html[data-glass="native"] body.desk--glass {
  background: transparent;
}

/* The Mac blurs (its thickest material, behind the window); the page lays the palette's tint. */
html[data-glass="native"] body.desk--glass::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--lg-m-tint-top), var(--lg-m-tint-bot));
}

html[data-glass="native"] .lg-water {
  display: none;
}

/* Reduce Transparency: the frost goes solid, off-white or charcoal. */
@media (prefers-reduced-transparency: reduce) {
  html:where(:has(body.desk--glass)),
  html[data-glass="native"] {
    background: var(--lg-m-bg);
  }

  html[data-glass="native"] body.desk--glass::before,
  .lg-water {
    display: none;
  }
}

/* The toolbar floats 12 in from the window's edge; the views sit further in. */
.desk--glass .sheet {
  max-width: none;
  padding: 12px 12px 48px;
}

/* ---------------------------------------------------------- the storm --- */

/* Outside the Desk window (a browser, the site, a snapshot) the page draws the grey storm itself and
   frosts it the way the Mac would: blurred 110px, then the palette's tint. The blur is a filter on our
   own layer, not a backdrop filter, so it draws the same in every engine. */
.lg-water {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.lg-water::before {
  content: "";
  position: absolute;
  inset: -240px;
  background:
    radial-gradient(60% 55% at 22% 18%, var(--lg-m-storm-1), transparent 70%),
    radial-gradient(45% 40% at 62% 42%, var(--lg-m-storm-1), transparent 70%),
    radial-gradient(70% 60% at 85% 90%, var(--lg-m-storm-4), transparent 70%),
    linear-gradient(160deg, var(--lg-m-storm-2) 0%, var(--lg-m-storm-3) 62%, var(--lg-m-storm-4) 100%);
  background-size: cover;
  background-position: center;
  filter: var(--lg-m-blur);
}

.lg-water::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--lg-m-tint-top), var(--lg-m-tint-bot));
}

/* ------------------------------------------------------------ the glass --- */

/* A panel inside the window's frost: a flat fill with a hairline, never a second frost (Shape v1.6).
   Corners nest: 20 inside the 26 window. */
.lg {
  position: relative;
  isolation: isolate;
  border-radius: var(--lg-r-card);
  color: var(--lg-m-ink);
  background: var(--lg-m-panel);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
}

/* A card to read (the board's cards, the picked one, the receipts): the card fill. */
.lg--frost {
  color: var(--lg-m-ink);
  background: var(--lg-m-card);
  box-shadow: inset 0 0 0 1px var(--lg-m-line), inset 0 1px 0 var(--lg-m-card-top);
}

/* Capsule controls. */
.lg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 15px;
  border: 0;
  border-radius: var(--r-pill);
  font: 500 13px var(--lg-sans);
  color: var(--lg-m-ink);
  background: var(--lg-m-hover);
  box-shadow: inset 0 0 0 1px var(--lg-m-line), inset 0 1px 0 var(--lg-cap-top);
  cursor: pointer;
  white-space: nowrap;
}

.lg-btn:hover {
  background: var(--lg-m-card-2);
}

.lg-btn:active {
  background: var(--lg-m-press);
  transform: scale(0.97);
}

.lg-btn:focus-visible,
.gtab:focus-visible,
.pc:focus-visible,
.pp__daytab:focus-visible {
  outline: 2px solid var(--lg-m-ink);
  outline-offset: 2px;
}

.lg-btn[aria-busy="true"] {
  cursor: progress;
  border: 1.5px dashed var(--lg-m-ink-2);
}

/* Edit on a frosted card: light glass, ink text. */
.lg-btn--light {
  color: var(--lg-m-ink);
  background: var(--lg-m-card-2);
}

/* The main thing to do on a card: ink in light, cream in dark. */
.lg-btn--main {
  color: var(--lg-m-main-ink);
  background: var(--lg-m-main);
  box-shadow: 0 1px 2px var(--lg-m-shade-1);
}

.lg-btn--main:hover {
  background: var(--lg-m-main);
  filter: brightness(1.08);
}

/* Stop: coral glass, the one warm thing on screen. */
.lg-btn--you {
  color: var(--lg-on-coral);
  background: linear-gradient(180deg, var(--lg-coral-light), var(--lg-coral));
  box-shadow: inset 0 1px 0 var(--lg-coral-rim), inset 0 -2px 0 var(--lg-coral-base), 0 6px 18px var(--lg-coral-glow);
}

.lg-btn--you:hover {
  background: linear-gradient(180deg, var(--lg-coral-light), var(--lg-coral-light));
}

.lg-btn__stop {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--lg-on-coral);
}

/* A glass sphere: a face's initials, or the countdown ring. */
.lg-bead {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font: 600 13px var(--lg-sans);
  letter-spacing: 0.02em;
  color: var(--lg-m-ink);
  background: var(--lg-m-face);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
}

.lg-bead[data-size="sm"] {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

.lg-bead[data-size="xs"] {
  width: 16px;
  height: 16px;
}

/* A ring: the part of the last two minutes already run, in twentieths (glass.ts). */
/* Flat: a thin arc on a hairline track, cut out of the face it sits in (Shape v1.6). Charcoal, cream
   in the dark; coral only on the handover's own countdown (`data-lead`), the one warm ring on screen. */
.ring {
  box-shadow: none;
  color: var(--lg-m-ink);
  background: conic-gradient(currentColor 360deg, var(--lg-m-dot) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 74%, var(--lg-m-ink) 76%);
  mask: radial-gradient(closest-side, transparent 74%, var(--lg-m-ink) 76%);
}

.ring[data-ring="0"] {
  background: conic-gradient(currentColor 0deg, var(--lg-m-dot) 0);
}

.ring[data-ring="1"] {
  background: conic-gradient(currentColor 18deg, var(--lg-m-dot) 0);
}

.ring[data-ring="2"] {
  background: conic-gradient(currentColor 36deg, var(--lg-m-dot) 0);
}

.ring[data-ring="3"] {
  background: conic-gradient(currentColor 54deg, var(--lg-m-dot) 0);
}

.ring[data-ring="4"] {
  background: conic-gradient(currentColor 72deg, var(--lg-m-dot) 0);
}

.ring[data-ring="5"] {
  background: conic-gradient(currentColor 90deg, var(--lg-m-dot) 0);
}

.ring[data-ring="6"] {
  background: conic-gradient(currentColor 108deg, var(--lg-m-dot) 0);
}

.ring[data-ring="7"] {
  background: conic-gradient(currentColor 126deg, var(--lg-m-dot) 0);
}

.ring[data-ring="8"] {
  background: conic-gradient(currentColor 144deg, var(--lg-m-dot) 0);
}

.ring[data-ring="9"] {
  background: conic-gradient(currentColor 162deg, var(--lg-m-dot) 0);
}

.ring[data-ring="10"] {
  background: conic-gradient(currentColor 180deg, var(--lg-m-dot) 0);
}

.ring[data-ring="11"] {
  background: conic-gradient(currentColor 198deg, var(--lg-m-dot) 0);
}

.ring[data-ring="12"] {
  background: conic-gradient(currentColor 216deg, var(--lg-m-dot) 0);
}

.ring[data-ring="13"] {
  background: conic-gradient(currentColor 234deg, var(--lg-m-dot) 0);
}

.ring[data-ring="14"] {
  background: conic-gradient(currentColor 252deg, var(--lg-m-dot) 0);
}

.ring[data-ring="15"] {
  background: conic-gradient(currentColor 270deg, var(--lg-m-dot) 0);
}

.ring[data-ring="16"] {
  background: conic-gradient(currentColor 288deg, var(--lg-m-dot) 0);
}

.ring[data-ring="17"] {
  background: conic-gradient(currentColor 306deg, var(--lg-m-dot) 0);
}

.ring[data-ring="18"] {
  background: conic-gradient(currentColor 324deg, var(--lg-m-dot) 0);
}

.ring[data-ring="19"] {
  background: conic-gradient(currentColor 342deg, var(--lg-m-dot) 0);
}

@media (prefers-color-scheme: dark) {
  .ring {
    color: var(--lg-cream);
  }
}

.ring[data-lead] {
  color: var(--lg-coral);
}

.ring__hole {
  display: none;
}

/* Small line icons, drawn from borders so they need no image. */
.gicon {
  position: relative;
  flex: none;
  display: inline-block;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
}

.gicon[data-icon="tray"] {
  border: 1.5px solid currentColor;
  border-top-width: 0;
  border-radius: 0 0 3px 3px;
  height: 9px;
  margin-top: 4px;
}

.gicon[data-icon="list"] {
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  height: 10px;
}

.gicon[data-icon="up"] {
  border: 1.5px solid currentColor;
  border-top: 0;
  height: 7px;
  margin-top: 6px;
}

.gicon[data-icon="find"] {
  width: 11px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

/* The magnifier's handle. */
.gicon[data-icon="find"]::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 5px;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.gicon[data-icon="next"] {
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.gicon[data-icon="lock"] {
  width: 11px;
  height: 9px;
  margin-top: 4px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

/* ---------------------------------------------------- the bar and views --- */

/* The toolbar floats (Shape v1.6, design/STYLE.md): one row of capsules inset 12 from the window's edge.
   The title with the reading status under it, the views as one segmented capsule, Find, then Pause.
   The pause panel sits inside the row, its wrappers dissolved into the grid, so a poll still replaces
   it whole; its fold opens under Pause, and any line that needs her (no key, access missing) takes a
   row of its own under the toolbar. */
.gbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "brand seg find pause"
    "status seg find pause";
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
  padding: 0 0 var(--s4);
}

.gbar__brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.gbar__mark {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
}

.gbar__mark > span {
  display: block;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--lg-m-ink);
}

.gbar__mark > span:nth-child(2) {
  width: 14px;
}

.gbar__mark > span:nth-child(3) {
  width: 17px;
}

.gbar__name {
  font: 600 14px var(--lg-sans);
  letter-spacing: -0.01em;
  color: var(--lg-m-ink);
}

.gtabs,
.gbar .strip,
.gbar .strip__row,
.gbar .strip__say,
.gbar .strip__ctl {
  display: contents;
}

.gbar .status {
  grid-area: status;
  gap: 6px;
  padding-left: 30px;
  font: 400 12px / 1.3 var(--lg-sans);
  letter-spacing: 0;
  color: var(--lg-m-ink-2);
}

.gbar .mark {
  width: 6px;
  height: 6px;
  border-color: var(--lg-m-ink-2);
}

.gbar .mark--on {
  border: 0;
  background: var(--lg-olive);
}

/* What she needs to act on (no key, access missing) gets a row under the toolbar; the day's count is
   in the handover's foot, and how to stop everything is in the fold. */
.gbar .strip__say > .strip__line,
.gbar .strip__say > :not(.status):not(.strip__line) {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-left: 30px;
  font-size: 13px;
  color: var(--lg-m-ink);
}

.gbar .strip__line--sent,
.gbar .strip__how {
  display: none;
}

.strip__line--sent {
  font-variant-numeric: tabular-nums;
}

.gbar .strip > .fold {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: 2px;
  font-size: 12px;
  color: var(--lg-m-ink-2);
}

.gbar .strip > .fold > summary {
  font-size: 12px;
}

.gbar .strip > .fold[open] {
  justify-self: stretch;
  padding: var(--s3) var(--s4);
  border-radius: var(--lg-r-card);
  background: var(--lg-m-card);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
}

/* The views: one segmented capsule; the chosen one is a solid off-white or charcoal capsule. */
.gseg {
  grid-area: seg;
  justify-self: center;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--lg-m-hover);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
}

.gtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  font: 500 13px var(--lg-sans);
  color: var(--lg-m-ink-2);
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
}

.gtab:hover {
  color: var(--lg-m-ink);
}

.gtab[aria-current="page"] {
  color: var(--lg-m-ink);
  background: var(--lg-m-bg);
  box-shadow: 0 1px 3px var(--lg-seg-shade);
}

/* Every control is a capsule, 34 high: Find, Pause, the buttons on a card. */
.gtab--find,
.gbar .pill {
  height: 34px;
  padding: 0 15px;
  border: 0;
  border-radius: var(--r-pill);
  font: 500 13px var(--lg-sans);
  letter-spacing: 0;
  color: var(--lg-m-ink);
  background: var(--lg-m-hover);
  box-shadow: inset 0 0 0 1px var(--lg-m-line), inset 0 1px 0 var(--lg-cap-top);
}

.gtab--find {
  grid-area: find;
  min-width: 210px;
  justify-content: flex-start;
  color: var(--lg-m-ink-2);
}

.gbar .pill {
  grid-area: pause;
  gap: 8px;
}

/* Pause's two bars; Resume (paused) is the main capsule instead. */
.gbar .pill--line::before {
  content: "";
  width: 8px;
  height: 10px;
  box-sizing: border-box;
  border-left: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
}

.gbar .pill:not(.pill--line) {
  color: var(--lg-m-main-ink);
  background: var(--lg-m-main);
  box-shadow: none;
}

.gbar .pill:hover {
  opacity: 1;
  background: var(--lg-m-card-2);
}

.gbar .pill:not(.pill--line):hover {
  background: var(--lg-m-main);
}

.gtab__n {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--lg-m-main-ink);
  background: var(--lg-m-main);
}

/* The older capsule buttons (Resume reading, the choices) draw ink on --paper, and --paper is
   see-through on the frost: give them the main button's pair, ink or cream with its own ink. */
.desk--glass .pill {
  --ink: var(--lg-m-main);
  --paper: var(--lg-m-main-ink);
}

/* The row's main act (Keep) is drawn the same way: without its pair its word was see-through. */
.desk--glass .act--main {
  --ink: var(--lg-m-main);
  --paper: var(--lg-m-main-ink);
}

.desk--glass .strip {
  --ink: var(--lg-m-ink);
  --ink-2: var(--lg-m-ink-2);
  --ink-3: var(--lg-m-ink-2);
  --rule: var(--lg-m-line);
  --sheet: var(--lg-m-card-2);
  --paper: transparent;
}

/* Without the page's script, every view shows, one under the other (the replay's snapshot). */
.gview {
  max-width: 1180px;
  margin: var(--s3) auto 0;
  padding: 0 28px;
}

html[data-view] .gview {
  display: none;
}

html[data-view="today"] .gview[data-view-of="today"],
html[data-view="waiting"] .gview[data-view-of="waiting"],
html[data-view="sent"] .gview[data-view-of="sent"] {
  display: block;
}

/* The panel each view grew from, under it, on frosted paper: ink text, the brand's own inks. */
.gsheet {
  margin-top: var(--s6);
  padding: 4px var(--s6) var(--s6);
  border-radius: var(--lg-r-card);
  color: var(--ink);
  background: var(--lg-m-card);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
}

/* Nothing in it, or only hidden panels (nothing ready): no blank bar. */
.gsheet:empty,
.gsheet:not(:has(> :not([hidden]))) {
  display: none;
}

/* The footer sits on the water: the claims on deep glass. */
.desk--glass .foot {
  --ink: var(--lg-m-ink);
  --ink-2: var(--lg-m-ink-2);
  --ink-3: var(--lg-m-ink-2);
  --rule: var(--lg-m-line);
  --paper: var(--lg-m-panel);

  color: var(--lg-m-ink);
}

/* --------------------------------------------------- the morning handover --- */

/* Today is the handover, straight on the window's frost (Shape v1.6): the label, the headline, the
   tally, one card with the next ones peeking out under it, the dots and Next. */
.ho {
  padding: var(--s4) 0 var(--s2);
}

.ho__over,
.ho__label {
  font: 500 11px / 1.4 var(--lg-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lg-m-ink-2);
}

.ho__title {
  margin-top: 10px;
  font: 600 clamp(28px, 3.6vw, 40px) / 1.08 var(--lg-display);
  letter-spacing: -0.03em;
  color: var(--lg-m-ink);
  text-wrap: balance;
  word-spacing: 0.08em;
}

.ho__when {
  color: var(--lg-m-ink);
  font-variant-numeric: tabular-nums;
}

.ho__tallies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: var(--s3);
  font-size: 13px;
  color: var(--lg-m-ink-2);
}

.ho__tally {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ho__tally::before {
  content: "";
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border-radius: 50%;
}

/* Done: a filled olive mark. Left for her: an outline. */
.ho__tally[data-mark="done"]::before {
  background: var(--lg-olive);
}

.ho__tally[data-mark="left"]::before {
  border: 1.5px solid var(--lg-m-ink);
}

.ho__sep {
  opacity: 0.6;
}

.ho__cards {
  position: relative;
  isolation: isolate;
  margin-top: var(--s5);
}

/* A card inside the glass: a flat fill with a hairline, never a second frost. Corners nest: 20 here,
   14 for the letter inside it. */
.ho__card {
  position: relative;
  z-index: 1;
  padding: 20px 22px 18px;
  border-radius: var(--lg-r-card);
  color: var(--lg-m-ink);
  background: var(--lg-m-card);
  box-shadow: inset 0 0 0 1px var(--lg-m-line), inset 0 1px 0 var(--lg-m-card-top), 0 8px 24px var(--lg-m-card-shade);
}

/* The cards still to come, peeking out 10 and 20 px under the one that shows. */
.ho__cards::before,
.ho__cards::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 18px;
  right: 18px;
  height: 12px;
  border-radius: 0 0 var(--lg-r-row) var(--lg-r-row);
  background: var(--lg-m-card);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
  visibility: hidden;
}

.ho__cards::after {
  bottom: -20px;
  left: 36px;
  right: 36px;
  height: 10px;
  z-index: -1;
}

.ho__cards[data-ho-left="1"]::before,
.ho__cards[data-ho-left="2"]::before,
.ho__cards[data-ho-left="2"]::after {
  visibility: visible;
}

.ho__card[hidden] {
  display: none;
}

.ho__top {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
}

.ho__said {
  min-width: 0;
}

.ho__quote {
  font: 500 19px / 1.35 var(--lg-sans);
  color: var(--lg-m-ink);
}

.ho__from {
  margin-top: 4px;
  font-size: 13px;
  color: var(--lg-m-ink-2);
}

.ho__label {
  margin-top: var(--s4);
}

.ho__paper {
  margin-top: 6px;
  padding: var(--s3) var(--s4);
  border-radius: var(--lg-r-row);
  background: var(--lg-m-hover);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
  max-height: 220px;
  overflow: auto;
}

.ho__subj {
  font: 500 14px var(--lg-sans);
  color: var(--lg-m-ink);
}

.ho__to {
  font-weight: 400;
  color: var(--lg-m-ink-2);
}

.ho__text {
  margin-top: 6px;
  font: 400 16px / 1.5 var(--lg-sans);
  white-space: pre-wrap;
  color: var(--lg-m-ink);
}

/* A document the night wrote (render/doc.ts), read as paper: a heading, bold, a quiet box to tick. */
.doc {
  white-space: normal;
}

.doc__h1 {
  margin: 0 0 4px;
  font-size: 1.12em;
  font-weight: 600;
  line-height: 1.35;
}

.doc__h2 {
  margin: 14px 0 4px;
  font-size: 0.94em;
  font-weight: 600;
}

.doc__p {
  margin: 6px 0 0;
}

.doc__list {
  margin: 4px 0 0;
  padding-left: 1.25em;
}

.doc__list--checks {
  padding-left: 0;
  list-style: none;
}

.doc__list li + li {
  margin-top: 3px;
}

.doc__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.doc__box {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 0.38em;
  border: 1px solid var(--lg-m-ink-2);
  border-radius: 3px;
}

.doc__check[data-done] .doc__box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 3px;
  height: 7px;
  border: solid var(--lg-m-ink);
  border-width: 0 1px 1px 0;
  rotate: 45deg;
}

/* A document is paper in both themes: bone stock and charcoal ink, a cream edge, never the theme's panel. */
.ho__paper[data-doc],
.prep__text.doc {
  background: var(--lg-bone);
  border-color: var(--lg-cream-line);
  box-shadow: inset 0 0 0 1px var(--lg-cream-line);
  color: var(--lg-ink);
}

.ho__paper[data-doc] .ho__text {
  color: var(--lg-ink);
}

.ho__paper[data-doc] .doc__box,
.prep__text .doc__box {
  border-color: var(--lg-ink-2);
}

.ho__paper[data-doc] .doc__check[data-done] .doc__box::after,
.prep__text .doc__check[data-done] .doc__box::after {
  border-color: var(--lg-ink);
}

.ho__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s4);
}

.ho__state {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 400 13px var(--lg-sans);
  color: var(--lg-m-ink-2);
}

.ho__dot {
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border-radius: 50%;
}

/* Going out: the coral of what is about to leave. Done: filled olive. Left: an outline. */
.ho__state[data-mark="out"] .ho__dot {
  background: var(--lg-m-ink);
}

.ho__state[data-mark="done"] .ho__dot {
  background: var(--lg-olive);
}

.ho__state[data-mark="left"] .ho__dot {
  border: 1.5px solid var(--lg-m-ink);
}

.gacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* "Coming after launch": a hairline chip in the label face, never coral. */
.gsoon {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--lg-m-edge);
  font: 500 11px / 1 var(--lg-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--lg-m-ink-2);
}

/* Beside Ready's 30px buttons, whose row is top-aligned so an open Edit can grow under them. */
.prep__acts > .gsoon {
  margin-top: 4px;
}

.ho__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: 40px;
}

.ho__nav .lg-btn[hidden] {
  display: none;
}

.ho__pips {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ho__count {
  margin-left: 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--lg-m-ink-2);
}

.ho__count[hidden] {
  display: none;
}

.ho__pip {
  width: 8px;
  height: 8px;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* Going out: ink, dimmed until it is the card that shows. Done: cream with a hairline. Left for her:
   an outline. */
.ho__pip[data-mark="out"] {
  background: var(--lg-m-ink-2);
}

.ho__pip[data-mark="out"][aria-current="step"] {
  background: var(--lg-m-ink);
}

/* Cream on light glass needs a darker hairline than the other edges to read at 1x. */
.ho__pip[data-mark="done"] {
  border: 1px solid var(--lg-m-mark-edge);
  background: var(--lg-cream);
}

.ho__pip[data-mark="left"] {
  border: 1.5px solid var(--lg-m-ink);
  background: transparent;
}

/* The card that shows: a ring around its pip, not only a colour. */
.ho__pip[aria-current="step"] {
  outline: 1.5px solid var(--lg-m-edge);
  outline-offset: 2px;
}

.ho__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s6);
  font-size: 12px;
  color: var(--lg-m-ink-2);
}

.ho__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  font: inherit;
  color: var(--lg-m-ink);
  background: transparent;
  cursor: pointer;
}

.ho__link:hover {
  text-decoration: underline;
}

.ho__stays {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --------------------------------------------- who is waiting on you (G4) --- */

.pp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s5);
  align-items: start;
}

.pp__days {
  display: none;
}

.pp__board {
  padding: 0;
  border-radius: var(--lg-r);
  overflow: auto;
}

.pg {
  display: grid;
  grid-template-columns: 170px repeat(5, minmax(136px, 1fr));
  min-width: 860px;
}

.pg[data-cols="1"] {
  grid-template-columns: 170px repeat(1, minmax(136px, 1fr));
  min-width: 0;
}

.pg[data-cols="2"] {
  grid-template-columns: 170px repeat(2, minmax(136px, 1fr));
  min-width: 0;
}

.pg[data-cols="3"] {
  grid-template-columns: 170px repeat(3, minmax(136px, 1fr));
  min-width: 0;
}

.pg[data-cols="4"] {
  grid-template-columns: 170px repeat(4, minmax(136px, 1fr));
  min-width: 0;
}

.pg__corner,
.pg__day {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 14px 12px 10px;
  font: 500 14px var(--lg-sans);
  color: var(--lg-m-ink);
  border-bottom: 1px solid var(--lg-m-line);
  background: var(--lg-m-card-2);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.pg__corner {
  left: 0;
  z-index: 2;
}

.pg__dn {
  font-weight: 600;
}

.pg__dd {
  font-weight: 400;
  color: var(--lg-m-ink-2);
}

/* Today: a lighter column with a rule on each side, so it reads without its tint. */
.pg__day[data-today-col],
.pg__cell[data-today-col] {
  background: var(--sheet);
  border-left: 1px solid var(--lg-m-line);
  border-right: 1px solid var(--lg-m-line);
}

.pg__person {
  position: sticky;
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--lg-m-line);
  background: var(--lg-m-card-2);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.pg__pw {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pg__name {
  font: 500 14px var(--lg-sans);
  color: var(--lg-m-ink);
}

.pg__app {
  font-size: 12px;
  color: var(--lg-m-ink-2);
}

.pg__cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--lg-m-line);
}

.pc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--lg-r-row);
  cursor: pointer;
}

.pc:hover {
  box-shadow: inset 0 0 0 1px var(--lg-m-line), 0 8px 22px var(--lg-m-shade-1);
}

/* The card she picked: a dark rim, so it reads without colour. */
.pc[aria-current="true"] {
  box-shadow: inset 0 0 0 2px var(--lg-m-ink), 0 8px 22px var(--lg-m-shade-1);
}

.pc[data-done] .pc__title {
  text-decoration: line-through;
}

.pc__group {
  font-size: 12px;
  color: var(--lg-m-ink-2);
}

.pc__title {
  font: 500 14px / 1.3 var(--lg-sans);
  color: var(--lg-m-ink);
}

.pc__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 4px;
}

.pc__time {
  font: 500 12px var(--lg-mono);
  color: var(--lg-m-ink);
}

.pc__time[data-late] {
  font-family: var(--lg-sans);
  text-decoration: underline;
}

/* Held: a solid dark capsule. Waiting: a dashed one. Already there: a filled olive dot and words. */
.pc__held {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font: 500 12px var(--lg-sans);
  color: var(--lg-m-main-ink);
  background: var(--lg-m-main);
}

.pc__wait {
  padding: 2px 9px;
  border: 1.5px dashed var(--lg-m-ink-2);
  border-radius: var(--r-pill);
  font-size: 12px;
  color: var(--lg-m-ink);
}

.pc__there {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--lg-m-ink);
}

.pc__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lg-olive);
}

.pc__hold {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--lg-m-line);
  border-radius: var(--r-pill);
  font: 500 12px var(--lg-sans);
  color: var(--lg-m-ink);
  background: var(--sheet);
  cursor: pointer;
}

.pc__hold[aria-busy="true"] {
  border-style: dashed;
}

/* The ring sits in a flat face-coloured circle. */
.pc__ring {
  display: inline-grid;
  margin-left: auto;
  padding: 3px;
  border-radius: 50%;
  background: var(--lg-m-face);
}

/* The one she picked, large, beside the board. */
.pp__side {
  position: sticky;
  top: var(--s4);
  padding: var(--s5);
  border-radius: var(--lg-r);
}

.pd[hidden] {
  display: none;
}

.pd__who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pd__name {
  font: 500 15px var(--lg-sans);
}

.pd__app {
  font-size: 13px;
  color: var(--lg-m-ink-2);
}

.pd__quote {
  margin-top: var(--s4);
  font: 500 26px / 1.18 var(--lg-display);
  letter-spacing: -0.015em;
  color: var(--lg-m-ink);
  overflow-wrap: anywhere;
  word-spacing: 0.08em;
}

.pd__from {
  margin-top: var(--s3);
  font-size: 13px;
  color: var(--lg-m-ink-2);
}

.pd__rule {
  margin: var(--s4) 0;
  border-top: 1px solid var(--lg-m-line);
}

.pd__out {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pd__outw {
  min-width: 0;
}

.pd__outl {
  font: 500 13px var(--lg-sans);
  color: var(--lg-m-ink-2);
}

.pd__in {
  font: 500 12px var(--lg-mono);
  color: var(--lg-m-ink-2);
}

.pd__subj {
  margin-top: var(--s3);
  font: 500 14px var(--lg-sans);
}

.pd__to {
  font-size: 13px;
  color: var(--lg-m-ink-2);
}

.pd .gacts {
  margin-top: var(--s3);
}

.pd__fold {
  margin-top: var(--s3);
}

.pd__sum {
  font: 500 13px var(--lg-sans);
  cursor: pointer;
}

.pd__text {
  margin-top: 8px;
  padding: var(--s3);
  border-radius: var(--lg-r-row);
  font: 400 14px / 1.5 var(--lg-sans);
  white-space: pre-wrap;
  color: var(--lg-m-ink);
  background: var(--sheet);
}

/* --------------------------------------------- Sent to the AI model (G5) --- */

.rh {
  display: block;
}

.rh__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
}

.rh__words {
  flex: 1 1 420px;
  max-width: 680px;
}

.rh__title {
  font: 500 clamp(28px, 4.2vw, 44px) / 1.08 var(--lg-display);
  letter-spacing: -0.02em;
  color: var(--lg-m-ink);
  word-spacing: 0.08em;
}

.rh__lede {
  margin-top: var(--s3);
  font-size: 14px;
  color: var(--lg-m-ink-2);
}

.rh__code {
  font: 500 13px var(--lg-mono);
  color: var(--lg-m-ink);
}

.rh__next {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--lg-r);
}

.rh__nw {
  min-width: 0;
}

.rh__nl {
  font: 500 13px var(--lg-sans);
  color: var(--lg-m-ink-2);
}

.rh__ns {
  font: 500 14px var(--lg-sans);
}

.rh__ni {
  font: 500 12px var(--lg-mono);
  color: var(--lg-m-ink-2);
}

.rcs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s4);
  align-items: start;
  margin-top: var(--s5);
}

/* A receipt: frosted paper with a torn bottom edge. */
.rc {
  position: relative;
  padding: var(--s4) var(--s4) var(--s5);
  border-radius: var(--lg-r-row) var(--lg-r-row) 0 0;
  color: var(--lg-m-ink);
  background: var(--lg-m-card);
  -webkit-mask: conic-gradient(from -45deg at bottom, transparent, var(--lg-m-ink) 1deg 89deg, transparent 90deg) bottom / 16px 100%;
  mask: conic-gradient(from -45deg at bottom, transparent, var(--lg-m-ink) 1deg 89deg, transparent 90deg) bottom / 16px 100%;
  padding-bottom: 28px;
}

/* Held back, never sent: dashed rules, so it reads apart from one that went. */
.rc[data-kept] .rc__cut {
  border-top-style: dashed;
  border-top-width: 2px;
}

.rc__kind {
  font: 500 12px var(--lg-mono);
  color: var(--lg-m-ink-2);
}

.rc__title {
  margin-top: 4px;
  font: 500 14px / 1.3 var(--lg-sans);
}

.rc__who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
}

.rc__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc__at {
  margin-left: auto;
  font: 500 12px var(--lg-mono);
  color: var(--lg-m-ink-2);
}

.rc__cut {
  margin: 10px 0;
  border-top: 1px dashed var(--lg-m-line);
}

.rc__quote {
  font: 400 13px / 1.45 var(--lg-mono);
  overflow-wrap: anywhere;
}

.rc__res {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 13px var(--lg-sans);
}

.rc__mk {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  flex: none;
}

.rc__res[data-mark="done"] .rc__mk {
  background: var(--lg-olive);
}

.rc__res[data-mark="left"] .rc__mk,
.rc__res[data-mark="kept"] .rc__mk {
  border: 1.5px solid var(--lg-m-ink);
}

.rc__res[data-mark="kept"] .rc__mk {
  border-style: dashed;
}

.rc__res .lg-bead {
  width: 22px;
  height: 22px;
}

.rc__note {
  margin-top: 4px;
  font-size: 13px;
  color: var(--lg-m-ink-2);
}

.rc__go {
  margin-top: 4px;
  font: 500 13px var(--lg-sans);
  color: var(--open);
}

.rc__fold {
  margin-top: 10px;
}

.rc__sum {
  font: 500 12px var(--lg-sans);
  color: var(--lg-m-ink-2);
  cursor: pointer;
}

.rc__text {
  margin-top: 6px;
  max-height: 240px;
  overflow: auto;
  font: 400 12px / 1.45 var(--lg-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* -------------------------------------------- Today: List, chat and arms --- */

/* Today as James approved it on Oct 4 (ui-drafts/desk-chat/BUILD-BRIEF.md): her List in a rail on the
   left, the chat in the middle with no card of its own, and the arms in a rail on the right. The rails
   are flat cards (corners 20) the height of the window; the chat reads from the bottom. */
.gview--dk {
  max-width: none;
  margin: 0;
  padding: 0;
}

.dk {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 340px;
  gap: 20px;
  height: calc(100vh - 104px);
  min-height: 560px;
  padding: 4px 0 0;
  box-sizing: border-box;
}

/* With the toolbar's views centred on the window (they sit over the middle column at full width). */
.gbar {
  position: relative;
}

@media (min-width: 1280px) {
  .gbar .gseg {
    grid-area: auto;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
}

.dicon {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dicon[data-icon="pause"] {
  width: 12px;
  height: 12px;
  fill: currentColor;
  stroke: none;
}

.ref .dicon,
.lg-btn .dicon[data-icon="next"] {
  width: 12px;
  height: 12px;
}

/* The mono labels: a group on a rail, the line between days, the Arms eyebrow, Can reach. */
.rail__grp,
.chat__dayw,
.av__over,
.reach__l {
  font: 500 11px / 1.4 var(--lg-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lg-m-ink-2);
}

.rail {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 16px 14px;
  border-radius: var(--lg-r-card);
  color: var(--lg-m-ink);
  background: var(--lg-m-panel);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
  overflow: hidden;
}

.rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px;
}

.rail__title {
  font: 600 17px / 1.3 var(--lg-display);
  letter-spacing: -0.018em;
  word-spacing: 0.08em;
  color: var(--lg-m-ink);
}

.rail__sub {
  margin-top: 4px;
  padding: 0 4px;
  font-size: 13px;
  color: var(--lg-m-ink-2);
}

.rail__grp {
  margin: 14px 4px 4px;
}

.rail__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.rail__empty {
  margin-top: 18px;
  padding: 0 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--lg-m-ink-2);
}

.rail__foot {
  margin-top: auto;
  /* The words start where a row's tick does, and the chip ends where a row does. */
  padding: 6px 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 12px;
  color: var(--lg-m-ink-2);
}

.rail__footw {
  white-space: nowrap;
}

/* ---- the List rail */

.todo {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Rows are divided by straight hairlines inset 6, not by shadows on rounded rows, which draw arcs. */
.todo__row {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 11px;
  padding: 8px 6px 9px;
  border-radius: var(--lg-r-row);
}

.todo__row + .todo__row::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 0;
  height: 1px;
  background: var(--lg-m-line);
}

.todo__row:hover {
  background: var(--lg-m-hover);
}

.todo__row:hover::before,
.todo__row:hover + .todo__row::before {
  visibility: hidden;
}

.todo__tick {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--lg-m-edge);
  cursor: pointer;
}

.todo__tick:hover {
  box-shadow: inset 0 0 0 1.5px var(--lg-m-ink);
}

.todo__tick:focus-visible,
.ref:focus-visible,
.dk__pill:focus-visible {
  outline: 2px solid var(--lg-m-ink);
  outline-offset: 2px;
}

.todo__w {
  min-width: 0;
}

.todo__t {
  font: 500 14px / 1.35 var(--lg-sans);
  color: var(--lg-m-ink);
  text-wrap: balance;
}

.todo__m {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--lg-m-ink-2);
}

.todo__tag {
  margin-top: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--lg-m-ink);
}

.todo__tag .ho__tally {
  font-size: 12px;
  color: var(--lg-m-ink-2);
}

.todo__arm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px 0 8px;
  border-radius: var(--r-pill);
  background: var(--lg-m-card-2);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
}

.todo__arm .live {
  width: 6px;
  height: 6px;
  box-shadow: none;
}

.todo__armn {
  margin-right: 3px;
  font: 400 12px var(--lg-mono);
}

/* A live dot: an arm is working. Ink, with a faint halo. Waiting on her: cream with an edge. */
.live {
  position: relative;
  flex: none;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lg-m-ink);
  box-shadow: 0 0 0 3px var(--lg-m-press);
}

.live--wait,
.todo__arm .live--wait {
  background: var(--lg-cream);
  box-shadow: inset 0 0 0 1px var(--lg-m-mark-edge);
}

/* Eight arms as eight short capsules: working ink, waiting on her cream, resting a hairline. */
.meter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.meter i {
  width: 5px;
  height: 16px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--lg-m-edge);
}

.meter i[data-a="work"] {
  background: var(--lg-m-ink);
  box-shadow: none;
}

.meter i[data-a="need"] {
  background: var(--lg-cream);
  box-shadow: inset 0 0 0 1px var(--lg-m-mark-edge);
}

.meter--l {
  gap: 6px;
}

.meter--l i {
  width: 7px;
  height: 26px;
  border-radius: 4px;
}

/* In dark, cream and the ink are too close: waiting on her becomes an outline. */
@media (prefers-color-scheme: dark) {
  .meter i[data-a="need"],
  .live--wait,
  .todo__arm .live--wait {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--lg-cream);
  }
}

/* "Needs you": a cream chip with charcoal ink. Never coral. The same chip in light and dark: every
   colour here is a fixed token, none follows the theme. */
.need {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--lg-cream);
  box-shadow: inset 0 0 0 1px var(--lg-cream-line);
  font: 500 11px / 1 var(--lg-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lg-char-3);
  white-space: nowrap;
}

.lg-btn--sm {
  height: 28px;
  padding: 0 12px;
  font-size: 12.5px;
}

/* ---- the chat */

.chat {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chat__log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0 28px;
  scrollbar-width: none;
}

/* What has scrolled up fades out under the toolbar rather than being cut by a hard edge. */
.chat__log[data-scrolled] {
  -webkit-mask-image: linear-gradient(to bottom, transparent 18px, var(--lg-m-ink) 40px);
  mask-image: linear-gradient(to bottom, transparent 18px, var(--lg-m-ink) 40px);
}

.chat__in {
  width: 100%;
  max-width: 760px;
  margin: auto auto 0;
}

.chat__host {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.chat__day {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 4px;
}

.chat__day:first-child {
  margin-top: 0;
}

.chat__day::before,
.chat__day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lg-m-line);
}

.chat__empty {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--lg-m-ink-2);
}

.msg {
  margin-top: 14px;
}

/* A name and time that would sit half in the chat's top fade is not shown (glass.js, markScrolled). */
.msg__who[data-faded] {
  visibility: hidden;
}

.msg__who {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 500 12.5px var(--lg-sans);
  color: var(--lg-m-ink);
}

.msg__at {
  font: 400 12px var(--lg-mono);
  font-variant-numeric: tabular-nums;
  color: var(--lg-m-ink-2);
}

.omark {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.omark > span {
  display: block;
  width: 13px;
  height: 2px;
  border-radius: 1px;
  background: var(--lg-m-ink);
}

.omark > span:nth-child(2) {
  width: 9px;
}

.omark > span:nth-child(3) {
  width: 11px;
}

.msg__body {
  margin-top: 6px;
  max-width: 640px;
  font: 400 15px / 1.55 var(--lg-sans);
  color: var(--lg-m-ink);
}

.msg__body > * + * {
  margin-top: 10px;
}

.msg__soon,
.msg__refs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Her own line: a capsule on the right, her words as she typed them. */
.msg--you {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.msg--you .msg__who {
  color: var(--lg-m-ink-2);
}

.msg__bub {
  margin-top: 6px;
  max-width: 460px;
  padding: 9px 16px 10px;
  border-radius: 20px;
  background: var(--lg-m-card-2);
  box-shadow: inset 0 0 0 1px var(--lg-m-line), 0 1px 2px var(--lg-m-shade-1);
  font: 400 15px / 1.45 var(--lg-sans);
  color: var(--lg-m-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Where an answer came from: who said it, where and when, in their own words. */
.att {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 14px 11px 12px;
  border-radius: var(--lg-r-row);
  background: var(--lg-m-card);
  box-shadow: inset 0 0 0 1px var(--lg-m-line), inset 0 1px 0 var(--lg-m-card-top);
}

.att__w {
  min-width: 0;
}

.att__q {
  font: 500 15px / 1.4 var(--lg-sans);
  color: var(--lg-m-ink);
}

.att__src {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--lg-m-ink-2);
}

/* A link to something already on the Desk (a card of the handover), or where a line was read. */
.ref {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--lg-m-hover);
  box-shadow: inset 0 0 0 1px var(--lg-m-line), inset 0 1px 0 var(--lg-cap-top);
  font: 500 13px var(--lg-sans);
  color: var(--lg-m-ink);
  white-space: nowrap;
}

button.ref {
  cursor: pointer;
}

button.ref:hover {
  background: var(--lg-m-card-2);
}

.ref__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lg-m-ink);
}

.ref__aside {
  font-weight: 400;
  color: var(--lg-m-ink-2);
}

/* An arm, in a message: one row each. */
.armrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 9px 12px 9px 14px;
  border-radius: var(--lg-r-row);
  background: var(--lg-m-card);
  box-shadow: inset 0 0 0 1px var(--lg-m-line), inset 0 1px 0 var(--lg-m-card-top);
}

.armrow + .armrow {
  margin-top: 8px;
}

.armrow__n,
.arm__n {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 11px / 1 var(--lg-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lg-m-ink-2);
}

.armrow__w {
  min-width: 0;
}

.armrow__t {
  font: 500 14px / 1.35 var(--lg-sans);
  text-wrap: balance;
}

.armrow__s {
  font-size: 12.5px;
  color: var(--lg-m-ink-2);
}

.armrow__of {
  font: 400 12px var(--lg-mono);
  color: var(--lg-m-ink-2);
}

/* The morning note's handover, folded to one line once she has been through it. */
.ho-mini {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
  padding: 14px 16px 14px 20px;
  border-radius: var(--lg-r-card);
  background: var(--lg-m-card);
  box-shadow: inset 0 0 0 1px var(--lg-m-line), inset 0 1px 0 var(--lg-m-card-top);
}

.ho-mini[hidden],
.msg__ho[hidden] {
  display: none;
}

.ho-mini__say {
  flex: 1;
  min-width: 0;
}

.ho-mini__t {
  margin-top: 5px;
  font: 600 22px / 1.15 var(--lg-display);
  letter-spacing: -0.023em;
  word-spacing: 0.08em;
  color: var(--lg-m-ink);
}

.ho-mini .ho__tallies {
  margin-top: 7px;
}

.faces {
  display: inline-flex;
  gap: 4px;
}

.ho-mini__when {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 13px var(--lg-mono);
  font-variant-numeric: tabular-nums;
}

/* The countdown beside a ring: what is left of the last two minutes. */
.ho__left {
  font: 500 13px var(--lg-mono);
  font-variant-numeric: tabular-nums;
  color: var(--lg-m-ink);
}

/* The whole handover, in the chat at 8:00 before she has looked. */
.msg__ho {
  margin-top: 6px;
}

.msg__ho .ho {
  padding: 0;
}

.msg__ho .ho__title {
  margin-top: 4px;
  font-size: 34px;
}

.msg__ho .ho__tallies {
  margin-top: 8px;
}

.msg__ho .ho__cards {
  margin-top: 14px;
}

.msg__ho .ho__card {
  padding: 18px 20px 16px;
}

.msg__ho .ho__quote {
  font-size: 17px;
}

.msg__ho .ho__paper {
  max-height: none;
  margin-top: 14px;
}

/* In the chat the letter speaks for itself; what it was made from is under Ready for you. */
.msg__ho .ho__label {
  display: none;
}

.msg__ho .ho__text {
  font-size: 15px;
}

.msg__ho .ho__nav {
  margin-top: 20px;
}

/* The composer: one capsule, what it is reading now at its left. */
.compose {
  padding: 12px 28px 6px;
}

.compose__cap {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  min-height: 56px;
  padding: 9px 9px 9px 10px;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  background: var(--lg-m-card-2);
  box-shadow: inset 0 0 0 1px var(--lg-m-line), inset 0 1px 0 var(--lg-cap-top), 0 10px 28px var(--lg-m-card-shade);
}

/* Typing in it: the capsule's own edge darkens, rather than a box drawn around the field. */
/* Two lines or more: a rounded card rather than a stretched capsule. */
.compose__cap[data-tall] {
  border-radius: var(--lg-r-card);
}

.compose__cap:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--lg-m-ink-2), inset 0 1px 0 var(--lg-cap-top), 0 10px 28px var(--lg-m-card-shade);
}

/* The window's title gives way first, so the field always has room for its whole placeholder. */
.seeing {
  flex: 0 1 auto;
  min-width: 0;
  margin-bottom: 1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 45%;
  height: 36px;
  padding: 0 14px 0 12px;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  background: var(--lg-m-hover);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
  font: 500 12.5px var(--lg-sans);
  color: var(--lg-m-ink);
  white-space: nowrap;
  overflow: hidden;
}

.seeing[hidden] {
  display: none;
}

.seeing__title {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  color: var(--lg-m-ink-2);
}

.compose__field {
  flex: 1 0 auto;
  align-self: center;
  width: 19.75em;
  min-width: 0;
  max-height: calc(4 * 24px + 12px);
  margin: 0;
  padding: 6px 4px;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  resize: none;
  font: 400 16px / 24px var(--lg-sans);
  color: var(--lg-m-ink);
  background: transparent;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.compose__field::placeholder {
  color: var(--lg-m-ink-2);
  opacity: 1;
}

.compose__soon {
  flex: none;
  margin-right: 6px;
}

/* With the chip in it too (asking does not ship), a narrower window takes the window's title out of the
   capsule, and the narrowest gives the field what is left rather than pushing the capsule wider. */
@media (max-width: 1419px) {
  .compose__cap:has(.compose__soon) .seeing {
    display: none;
  }

  .compose__cap:has(.compose__soon) .compose__field {
    flex-shrink: 1;
  }
}

/* An invoice or reference id stays on one line: "INV-1043" (render/html.ts, escText). */
.nobr {
  white-space: nowrap;
}

.compose__soon[hidden],
.send[hidden] {
  display: none;
}

/* Send stays quiet while the field is empty, and turns to the main fill once she types. */
.send {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--lg-m-ink-2);
  background: var(--lg-m-hover);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
}

.send .dicon {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

.send[data-typed] {
  color: var(--lg-m-main-ink);
  background: var(--lg-m-main);
  box-shadow: 0 1px 2px var(--lg-m-shade-1);
  cursor: pointer;
}

.compose__note {
  max-width: 860px;
  margin: 9px auto 0;
  text-align: center;
  font-size: 12px;
  color: var(--lg-m-ink-2);
}

/* A narrow window folds the List behind this pill. */
.dk__pill {
  display: none;
}

/* ---- the arms rail */

.arms {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.arm {
  padding: 13px 14px 14px;
  border-radius: var(--lg-r-row);
  background: var(--lg-m-card);
  box-shadow: inset 0 0 0 1px var(--lg-m-line), inset 0 1px 0 var(--lg-m-card-top);
}

.arm + .arm {
  margin-top: 10px;
}

.arm__top,
.ac__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
}

.arm__time {
  font: 400 12px var(--lg-mono);
  font-variant-numeric: tabular-nums;
  color: var(--lg-m-ink-2);
}

.arm__t {
  margin-top: 8px;
  font: 500 14px / 1.35 var(--lg-sans);
  color: var(--lg-m-ink);
  text-wrap: balance;
}

.arm__s {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--lg-m-ink-2);
}

.arm__step {
  font-weight: 500;
  color: var(--lg-m-ink);
}

.arm__peek {
  margin-top: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--lg-m-card-2);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--lg-m-ink);
}

.caret {
  display: inline-block;
  width: 1.5px;
  height: 13px;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--lg-m-ink);
}

.arm__acts {
  margin-top: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Its steps as a track of short capsules: done ink, now ink-2, to come a hairline. */
.track {
  margin-top: 10px;
  display: flex;
  gap: 4px;
}

.track i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--lg-m-dot);
}

.track i[data-s="done"] {
  background: var(--lg-m-ink);
}

.track i[data-s="now"] {
  background: var(--lg-m-ink-2);
}

.rest {
  margin-top: 14px;
  padding: 12px 4px 0;
  /* A border, not an outer shadow: a shadow rule clips into a box at scaled sizes (the website's check). */
  border-top: 1px solid var(--lg-m-line);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--lg-m-ink-2);
}

.rest .meter i {
  height: 12px;
}

.donerow {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 10px;
  padding: 4px 4px 0;
}

.donerow__w {
  min-width: 0;
}

.donerow__m {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--lg-char-3);
  background: var(--lg-olive);
}

.donerow__m .dicon {
  width: 12px;
  height: 12px;
  stroke-width: 2.25;
}

.donerow__t {
  font: 500 14px / 1.35 var(--lg-sans);
  color: var(--lg-m-ink);
}

.donerow__s {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--lg-m-ink-2);
}

.rail__more {
  margin-top: auto;
  padding: 14px 4px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ---- the Arms tab */

.av {
  padding: 12px 28px 32px;
}

.av__title {
  margin-top: 10px;
  font: 600 40px / 1.08 var(--lg-display);
  letter-spacing: -0.03em;
  word-spacing: 0.08em;
  color: var(--lg-m-ink);
  text-wrap: balance;
}

.av__dim {
  color: var(--lg-m-ink-2);
}

.av__meta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--lg-m-ink-2);
}

.av__grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.ac {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-radius: var(--lg-r-card);
  color: var(--lg-m-ink);
  background: var(--lg-m-card);
  box-shadow: inset 0 0 0 1px var(--lg-m-line), inset 0 1px 0 var(--lg-m-card-top), 0 8px 24px var(--lg-m-card-shade);
}

.ac__state {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ac__working {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--lg-m-ink);
}

.ac__t {
  margin-top: 12px;
  font: 600 19px / 1.25 var(--lg-display);
  letter-spacing: -0.02em;
  word-spacing: 0.08em;
  color: var(--lg-m-ink);
}

.ac__from {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--lg-m-ink-2);
}

/* What the arm has open right now, as a small whole window. */
.acv {
  margin-top: 14px;
  border-radius: var(--lg-r-row);
  background: var(--lg-m-hover);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
  overflow: hidden;
}

.acv__top {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 12px;
  box-shadow: 0 1px 0 var(--lg-m-line);
}

.acv__dots {
  display: inline-flex;
  gap: 5px;
}

.acv__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lg-m-dot);
}

.acv__name,
.acv__live {
  font: 500 11px / 1 var(--lg-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lg-m-ink-2);
}

.acv__name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acv__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.acv__live .live {
  width: 5px;
  height: 5px;
  box-shadow: none;
}

.acv__body {
  height: 230px;
  padding: 14px;
  box-sizing: border-box;
}

.acv__body[data-kind="sheet"] {
  padding: 10px 12px;
}

.adoc {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 4px 6px;
}

.adoc__h {
  font: 600 16px / 1.2 var(--lg-display);
  letter-spacing: -0.015em;
  color: var(--lg-m-ink);
}

.adoc__k {
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--lg-m-ink-2);
}

.adoc__l {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--lg-m-ink);
}

.alock {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.alock__i {
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--lg-m-ink-2);
  background: var(--lg-m-card-2);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
}

.alock__i .dicon {
  width: 18px;
  height: 18px;
}

.alock__t {
  font: 600 15px var(--lg-display);
  letter-spacing: -0.01em;
  color: var(--lg-m-ink);
}

.alock__s {
  max-width: 260px;
  font-size: 12.5px;
  color: var(--lg-m-ink-2);
}

.asheet {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.asheet td,
.asheet th {
  height: 27px;
  padding: 0 8px;
  text-align: left;
  box-shadow: inset 0 -1px 0 var(--lg-m-line);
}

.asheet th {
  font: 500 11px var(--lg-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lg-m-ink-2);
}

.asheet .asheet__amt {
  text-align: right;
}

.asheet tr[data-sel] td {
  background: var(--lg-m-card-2);
  box-shadow: inset 0 1.5px 0 var(--lg-m-ink), inset 0 -1.5px 0 var(--lg-m-ink);
}

.asheet tr[data-sel] td:first-child {
  border-radius: 6px 0 0 6px;
  box-shadow: inset 1.5px 1.5px 0 var(--lg-m-ink), inset 0 -1.5px 0 var(--lg-m-ink);
}

.asheet tr[data-sel] td:last-child {
  border-radius: 0 6px 6px 0;
  box-shadow: inset -1.5px 1.5px 0 var(--lg-m-ink), inset 0 -1.5px 0 var(--lg-m-ink);
}

.ac__ask {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--lg-r-row);
  background: var(--lg-m-card-2);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
  font-size: 13px;
  line-height: 1.45;
  color: var(--lg-m-ink);
}

/* Its steps in order: done with a check and its clock time, now with an ink dot, to come hollow. */
.asteps {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.asteps li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: start;
  font-size: 13px;
  line-height: 1.4;
  color: var(--lg-m-ink);
}

.asteps li[data-s="todo"] {
  color: var(--lg-m-ink-2);
}

.asteps__m {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  display: grid;
  place-items: center;
}

.asteps__m .dicon {
  stroke-width: 2;
}

.asteps li[data-s="todo"] .asteps__m::before {
  content: "";
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--lg-m-edge);
}

.asteps__at {
  font: 400 12px var(--lg-mono);
  color: var(--lg-m-ink-2);
}

.reach {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.reach__l {
  margin-right: 4px;
}

.reach__c {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--lg-m-hover);
  box-shadow: inset 0 0 0 1px var(--lg-m-line);
  font-size: 12px;
  color: var(--lg-m-ink);
}

.ac__foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ac__stepn {
  margin-left: auto;
  font: 400 12px var(--lg-mono);
  color: var(--lg-m-ink-2);
}

.av__rest {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--lg-m-ink-2);
}

.slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--lg-m-edge);
  font: 500 11px / 1 var(--lg-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lg-m-ink-2);
}

.slot i {
  width: 4px;
  height: 12px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--lg-m-edge);
}

html[data-view="arms"] .gview[data-view-of="arms"] {
  display: block;
}

/* ---- narrow windows: the arms rail folds into the Arms tab, then the List behind its pill */

@media (max-width: 1279px) {
  .dk {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .rail--arms {
    display: none;
  }

  .gtab--find {
    min-width: 0;
  }
}

@media (max-width: 999px) {
  .dk {
    grid-template-columns: minmax(0, 1fr);
  }

  .rail--list {
    display: none;
  }

  html[data-list-open] .rail--list {
    display: flex;
    position: absolute;
    z-index: 2;
    width: min(320px, calc(100% - 24px));
    max-height: calc(100vh - 140px);
    margin-top: 48px;
    background: var(--lg-m-card);
    box-shadow: inset 0 0 0 1px var(--lg-m-line), 0 8px 24px var(--lg-m-card-shade);
  }

  .dk__pill {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    height: 34px;
    margin: 0 0 8px 28px;
    padding: 0 15px;
    border: 0;
    border-radius: var(--r-pill);
    font: 500 13px var(--lg-sans);
    color: var(--lg-m-ink);
    background: var(--lg-m-hover);
    box-shadow: inset 0 0 0 1px var(--lg-m-line), inset 0 1px 0 var(--lg-cap-top);
    cursor: pointer;
  }

}

/* --------------------------------------------------- the small window (G6) --- */

@media (max-width: 860px) {
  .desk--glass .sheet {
    padding: 12px 14px 40px;
  }

  .gbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand pause"
      "status pause"
      "seg seg"
      "find find";
    row-gap: 8px;
  }

  .gseg {
    justify-self: start;
    max-width: 100%;
    overflow-x: auto;
  }

  .gtab--find {
    min-width: 0;
  }

  .gview {
    padding: 0 8px;
  }

  .pp {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One day at a time: the day tabs, then each person's cards for that day, stacked. */
  .pp__days {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--lg-m-panel);
  }

  .pp__daytab {
    height: 32px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font: 500 13px var(--lg-sans);
    color: var(--lg-m-ink);
    background: transparent;
    cursor: pointer;
  }

  .pp__daytab[aria-selected="true"] {
    border-color: var(--lg-m-edge);
    background: var(--lg-m-card-2);
  }

  .pp__board {
    overflow: visible;
  }

  .pg {
    display: block;
    min-width: 0;
  }

  .pg__corner,
  .pg__day,
  .pg__cell:empty,
  .pg__person[data-day-off],
  .pc[data-day-off] {
    display: none;
  }

  .pg__person {
    position: static;
    border-bottom: 0;
    background: transparent;
  }

  .pg__cell,
  .pg__cell[data-today-col] {
    padding: 0 12px 12px;
    border: 0;
    background: transparent;
  }

  .pp__side {
    position: static;
  }

  .pd__quote {
    font-size: 22px;
  }
}

/* In the Desk window the page runs under the title bar (it is glass too): clear the window buttons. */
/* In the Desk window the toolbar shares the title bar (it is glass too): it starts after the window's
   own buttons. */
html[data-glass="native"] .gbar {
  padding-left: 72px;
}

/* ------------------------------------------------------------ motion --- */

/* Quick and soft: a view, a card or a person's details come in with a short rise; controls answer a
   hover or a press at once. The frost itself never moves or fades (a fading wrapper stops the blur);
   only what sits inside it does. */
@keyframes lg-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lg-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* A working arm breathes: its dot's halo swells and settles, ink on frost, never coral. An arm waiting
   on her stays still. */
@keyframes live-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 2px var(--lg-m-press);
  }

  50% {
    box-shadow: 0 0 0 5px var(--lg-m-press);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .live:not(.live--wait) {
    animation: live-breathe 1.8s var(--ease) infinite;
  }

  /* A List row's small arm tag has no halo to breathe. */
  .todo__arm .live {
    animation: none;
  }

  .caret {
    animation: lg-fade 0.9s steps(2, jump-none) infinite alternate;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .lg-btn,
  .gtab,
  .pc,
  .ho__pip,
  .pp__daytab,
  .ho__link {
    transition:
      background-color var(--t-fast) var(--ease),
      color var(--t-fast) var(--ease),
      border-color var(--t-fast) var(--ease),
      box-shadow var(--t-fast) var(--ease),
      transform var(--t-fast) var(--ease),
      filter var(--t-fast) var(--ease);
  }

  html[data-view] .gview,
  .ho__card,
  .pd,
  .pd__fold[open] .pd__text,
  .rc__fold[open] .rc__text {
    animation: lg-in var(--t-mid) var(--ease) both;
  }

  /* The same card, put back by a poll (glass.js, `settle`): it is already there, so it does not rise again. */
  .ho__card[data-entered],
  .pd[data-entered] {
    animation: none;
  }
}

/* Reduce Motion: nothing rises or scales, it only cross-fades. */
@media (prefers-reduced-motion: reduce) {
  .desk--glass .lg-btn:active {
    transform: none;
  }

  html[data-view] .desk--glass .gview,
  .desk--glass .ho__card:not([data-entered]),
  .desk--glass .pd:not([data-entered]),
  .desk--glass .pd__fold[open] .pd__text,
  .desk--glass .rc__fold[open] .rc__text {
    animation: lg-fade var(--t-mid) linear both !important;
  }
}