/* Endyoursearch components, built only from tokens.css.
   Flat surfaces separated by a thin line, no soft shadows. Kinds differ by shape, not colour alone. */

* { box-sizing: border-box; }

/* Hidden means hidden, whatever display a component gives itself */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
}

/* States (Design library 3): every interactive component has a twin class per state (is-hover, is-focus,
   is-disabled, is-error) beside its own rule, so the Library can force each one; a view never styles a state. */
:focus-visible, .is-focus {
  outline: 2px solid var(--text-1);
  outline-offset: 2px;
}

/* Button: primary carries the accent; use it once per screen */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-4);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface-2);
  color: var(--text-1);
  font: inherit;
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
}
.button:hover, .button.is-hover { background: var(--surface-3); }
.button:disabled, .button.is-disabled { color: var(--text-3); background: var(--surface-1); border-color: var(--line); cursor: not-allowed; }

.button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.button--primary:hover, .button--primary.is-hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button--primary:disabled, .button--primary.is-disabled { color: var(--text-3); background: var(--surface-1); border-color: var(--line); }

.button--quiet { background: transparent; border-color: transparent; color: var(--text-2); }
.button--quiet:hover, .button--quiet.is-hover { background: var(--surface-2); color: var(--text-1); }
.button--quiet:disabled, .button--quiet.is-disabled { background: transparent; border-color: transparent; color: var(--text-3); }

/* Text field */
.field {
  display: grid;
  gap: var(--space-1);
  font-size: var(--type-small);
  color: var(--text-2);
}
.field input,
.field textarea {
  height: var(--control-height);
  padding: 0 var(--space-3);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface-1);
  color: var(--text-1);
  font: inherit;
  font-size: var(--type-body);
}
.field input::placeholder { color: var(--text-3); }
.field input:hover, .field.is-hover input, .field textarea:hover, .field.is-hover textarea { border-color: var(--text-3); }
.field input:focus, .field.is-focus input, .field textarea:focus, .field.is-focus textarea { outline: none; border-color: var(--text-2); }
.field.is-focus { outline: none; } /* the field's own border shows its focus, not a ring around the label */
.field input:disabled, .field.is-disabled input, .field textarea:disabled, .field.is-disabled textarea { background: var(--surface-0); color: var(--text-3); cursor: not-allowed; }
.field--error input, .field.is-error input, .field--error textarea, .field.is-error textarea { border-color: var(--data-red); }
.field__error { color: var(--data-red); } /* the words say what is wrong: never the red border alone */

/* List row */
.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--line-width) solid var(--line);
}
.list-row:hover, .list-row.is-hover { background: var(--surface-2); }
.list-row__title { flex: 1; }
.list-row__meta { color: var(--text-3); font-size: var(--type-small); }

/* Card: square corners of medium radius, a thin line, no shadow */
.card {
  padding: var(--space-4);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface-1);
}
.card__title { margin: 0 0 var(--space-1); font-size: var(--type-body-large); font-weight: var(--weight-bold); }
.card__body { margin: 0; color: var(--text-2); }

/* Chip: pill-shaped, so a chip never looks like a button */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 24px;
  padding: 0 var(--space-3);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-full);
  color: var(--text-2);
  font-size: var(--type-label);
}
button.chip { background: none; font: inherit; font-size: var(--type-label); cursor: pointer; } /* a chip you press (a day to pick) */
button.chip:hover, button.chip.is-hover { border-color: var(--text-3); color: var(--text-1); }
button.chip:disabled, button.chip.is-disabled { color: var(--text-3); cursor: not-allowed; }

/* Checkbox: a square with a tick, filled in the text colour */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}
.checkbox input {
  appearance: none;
  display: grid;
  place-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface-1);
}
.checkbox:hover input, .checkbox.is-hover input { border-color: var(--text-2); }
.checkbox.is-focus { outline: none; }
.checkbox.is-focus input { outline: 2px solid var(--text-1); outline-offset: 2px; }
.checkbox input:disabled, .checkbox.is-disabled input { opacity: 0.5; cursor: not-allowed; }
.checkbox input:disabled + span, .checkbox.is-disabled span { color: var(--text-3); }
.checkbox input:checked { background: var(--text-1); border-color: var(--text-1); }
.checkbox input:checked::after {
  content: "";
  width: 8px;
  height: 4px;
  margin-top: calc(-1 * var(--space-half));
  border-left: 2px solid var(--surface-0);
  border-bottom: 2px solid var(--surface-0);
  transform: rotate(-45deg);
}
.checkbox input:checked + span { color: var(--text-3); text-decoration: line-through; }
/* A checkbox that picks something (rather than marking it done) is never struck through */
.checkbox--pick input:checked + span { color: var(--text-1); text-decoration: none; }

/* Dialog */
.dialog {
  width: min(440px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-5);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--surface-1);
  color: var(--text-1);
}
.dialog::backdrop { background: color-mix(in srgb, var(--surface-0) 75%, transparent); }
.dialog__title { margin: 0 0 var(--space-2); font-size: var(--type-subheading); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }

/* Sidebar item: the active one is raised, never accented */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: 32px;
  padding: 0 var(--space-3);
  border: var(--line-width) solid transparent;
  border-radius: var(--radius-m);
  background: none;
  color: var(--text-2);
  font: inherit;
  text-decoration: none;
}
.sidebar-item:hover, .sidebar-item.is-hover { background: var(--surface-2); color: var(--text-1); }
.sidebar-item.is-active { background: var(--surface-3); border-color: var(--line); color: var(--text-1); }

/* Empty state */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-width: 420px;
  margin: var(--space-7) auto;
  padding: var(--space-6);
  border: var(--line-width) dashed var(--line-strong);
  border-radius: var(--radius-l);
  text-align: center;
}
.empty-state__title { margin: 0; font-size: var(--type-subheading); font-weight: var(--weight-bold); }
.empty-state__body { margin: 0; color: var(--text-2); }

/* List row as a button or link you can open; the open one is raised */
.list-row--action {
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.list-row.is-active { background: var(--surface-3); }
.list-row__stack { display: grid; gap: var(--space-half); flex: 1; min-width: 0; }
.list-row__stack > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Search box: a field with a magnifier mark, rounded fully so it never reads as a text field */
.search-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-3);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface-1);
  color: var(--text-3);
}
.search-box:hover, .search-box.is-hover { border-color: var(--text-3); }
.search-box:focus-within, .search-box.is-focus { border-color: var(--text-2); }
.search-box.is-focus { outline: none; }
.search-box:has(input:disabled), .search-box.is-disabled { color: var(--text-3); background: var(--surface-0); cursor: not-allowed; }
.search-box__mark { width: 14px; height: 14px; flex-shrink: 0; }
.search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font: inherit;
  outline: none;
}
.search-box input::placeholder { color: var(--text-3); }
.search-box input::-webkit-search-cancel-button { filter: grayscale(1); }

/* Editor: a big title, then the text; Markdown shows as written or rendered */
.editor { display: grid; gap: var(--space-3); align-content: start; }
.editor__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-3);
  font-size: var(--type-small);
}
.editor__status { margin-right: auto; }
.editor__home:empty { display: none; }
.editor__title {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font: inherit;
  font-size: var(--type-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  outline: none;
}
.editor__title::placeholder,
.editor__body::placeholder { color: var(--text-3); }
.editor__body {
  width: 100%;
  min-height: 50vh;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font: inherit;
  font-size: var(--type-body-large);
  line-height: var(--leading-normal);
  resize: none;
  outline: none;
}
.editor__preview { font-size: var(--type-body-large); }
.editor__preview h1 { font-size: var(--type-heading); }
.editor__preview h2 { font-size: var(--type-subheading); }
.editor__preview h3 { font-size: var(--type-body-large); }
.editor__preview :is(h1, h2, h3) { margin: var(--space-5) 0 var(--space-2); line-height: var(--leading-tight); }
.editor__preview p { margin: 0 0 var(--space-3); }
.editor__preview :is(ul, ol) { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.editor__preview code {
  padding: var(--space-hair) var(--space-1);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Outline bullet (Writing and thinking): every note as bullets, two spaces of text per level.
   The triangle folds a bullet's children away (pointing right when folded, down when open);
   the dot zooms in, with a ring round it while its children are folded away. The path above a
   zoomed-in bullet leads back up. Folding is never an edit: it is kept beside the note */
.outline { display: grid; align-content: start; min-height: 50vh; margin: 0; padding: 0; list-style: none; }
.editor__preview .outline { margin: 0; padding: 0; } /* the preview's own list indent stays off the outline */
.outline-bullet {
  display: grid;
  grid-template-columns: var(--space-5) var(--space-5) 1fr;
  align-items: start;
  padding-left: calc(var(--depth, 0) * var(--space-5));
}
.outline-bullet__fold,
.outline-bullet__dot {
  display: grid;
  place-items: center;
  height: calc(var(--type-body-large) * var(--leading-normal));
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--text-3);
  cursor: pointer;
}
.outline-bullet__fold:hover,
.outline-bullet__dot:hover { background: var(--surface-2); color: var(--text-1); }
.outline-bullet__triangle {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  transform: rotate(90deg);
}
.outline-bullet.is-folded .outline-bullet__triangle { transform: none; }
.outline-bullet__dot { color: var(--text-2); }
.outline-bullet__dot::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.outline-bullet.is-folded .outline-bullet__dot::before { outline: 4px solid var(--line-strong); }
.outline-bullet__text {
  display: block;
  width: 100%;
  min-height: calc(var(--type-body-large) * var(--leading-normal));
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font: inherit;
  font-size: var(--type-body-large);
  line-height: var(--leading-normal);
  overflow: hidden;
  resize: none;
  outline: none;
  field-sizing: content;
}
.outline-bullet__text::placeholder { color: var(--text-3); }
.outline-bullet__text :is(p, ul, ol, h1, h2, h3) { margin: 0; }
.outline-bullet__text :is(h1, h2, h3) { font-size: var(--type-body-large); font-weight: var(--weight-bold); }
.outline .outline-bullet__text .task-list { margin: 0; padding: 0; list-style: none; }
.outline-bullet--root { grid-template-columns: 1fr; padding: 0 0 var(--space-2); }
.outline-bullet--root .outline-bullet__text { font-size: var(--type-heading); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.outline-path { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-3); font-size: var(--type-small); }
.outline-path__step { padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; cursor: pointer; }
.outline-path__step:hover { color: var(--text-1); text-decoration: underline; }
.outline-path__step[aria-current] { color: var(--text-1); cursor: default; text-decoration: none; }
.outline__sink { display: none; }
.outline-bullet__extra { grid-column: 3; display: grid; gap: var(--space-2); }
.outline-bullet__extra:empty { display: none; }
/* What a bullet shows (its text is stored as it is): a heading has no dot; a blank line shows no dot until the caret is in it */
.outline-bullet--heading .outline-bullet__dot,
.outline-bullet--blank:not(:focus-within) .outline-bullet__dot { visibility: hidden; }
.outline-bullet--heading .outline-bullet__text { font-weight: var(--weight-bold); }
.outline-bullet--h1 .outline-bullet__text { font-size: var(--type-heading); }
.outline-bullet--h2 .outline-bullet__text { font-size: var(--type-subheading); }
.outline-bullet.is-target .outline-bullet__text { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }

/* Block embed (Writing and thinking 2): a bullet shown live where it is linked. A double line on its left
   (it lives elsewhere), its words and children, then the note it lives in; "Removed passage" when it is gone.
   Used in: how many other pages link or show a bullet; pressing it lists them */
.block-embed { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line); border-left: 3px double var(--line-strong); border-radius: var(--radius-s); }
.block-embed__words { color: var(--text-1); }
.block-embed__words :is(p, ul, ol, h1, h2, h3) { margin: 0; font-size: inherit; }
.block-embed__children { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; color: var(--text-1); }
.block-embed__children li { padding-left: calc((var(--depth, 0) + 1) * var(--space-4)); }
.block-embed__children li::before { content: "·"; margin-right: var(--space-2); color: var(--text-3); }
.block-embed__from { color: var(--text-3); font-size: var(--type-small); }
.block-embed--gone { border-style: dashed; color: var(--text-3); }
/* An embed's (or a board's) own link text stays out of sight until the caret is in that text (pressing the frame puts it
   there); a press on a button inside never moves anything */
.outline-bullet--embed { position: relative; }
.outline-bullet--embed:not(:has(> textarea:focus)) > textarea.outline-bullet__text { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }
.outline-bullet--embed:not(:has(> textarea:focus)) .block-embed { cursor: text; }
.outline-bullet--embed > div.outline-bullet__text:empty { display: none; } /* reading view: the frame sits beside its dot */
.used-in { justify-self: start; padding: 0 var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-full); background: none; color: var(--text-2); font: inherit; font-size: var(--type-label); cursor: pointer; }
.used-in:hover { color: var(--text-1); border-color: var(--line-strong); }
.used-in__list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--type-small); }

/* Comment on a passage (Writing and thinking 3): the words a comment sits on get a quiet dotted underline;
   the note's Comments pane lists each thread with its quote, my assistant's replies marked with a square
   (mine with a circle), and under an open comment the choice: Ask my assistant now, or Later */
.passage { text-decoration: underline dotted var(--text-3); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.passage.is-open { text-decoration-style: solid; text-decoration-color: var(--text-2); }
.comment-button { position: fixed; z-index: 10; }
.note-comments { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--line-width) solid var(--line); }
.note-comments__title { margin: 0; color: var(--text-3); font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.04em; }
.note-comments__none { margin: 0; color: var(--text-3); font-size: var(--type-small); }
.note-comments .comment-thread { margin: 0; }
.note-comments .comment-thread.is-open { border-left-color: var(--text-2); }
.comment-quote { margin: 0; color: var(--text-2); font-size: var(--type-small); font-style: italic; }
.comment-quote::before { content: "“"; }
.comment-quote::after { content: "”"; }
.comment__mark--assistant { border-radius: var(--radius-s); }
.comment-choice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--type-small); color: var(--text-3); }
.note-comments__new { display: grid; gap: var(--space-2); }
/* Board card and connector (Writing and thinking 6): a board in a note, a canvas of cards, words and arrows.
   A card is a flat box; what it points at shows by a small shape (a note a page, a person a circle, a task a
   square), words on their own have no box; an arrow is a thin line with a head, from edge to edge */
.board { display: grid; gap: var(--space-2); }
.board__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--text-2); font-size: var(--type-small); }
.board__title { margin-right: auto; color: var(--text-1); font-weight: var(--weight-medium); }
.board__title-field { margin-right: auto; padding: 0; border: 0; background: none; color: var(--text-1); font: inherit; font-size: var(--type-heading); font-weight: var(--weight-bold); outline: none; }
.board__canvas { position: relative; overflow: hidden; border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-1); touch-action: none; }
.board__canvas:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
.board__world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.board__arrows { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; color: var(--text-3); }
.board-arrow { fill: none; stroke: currentColor; stroke-width: 1.5; pointer-events: stroke; cursor: pointer; }
.board-arrow.is-selected { stroke: var(--text-1); stroke-width: 2.5; }
.board-arrow__head { fill: currentColor; }
.board-card { position: absolute; display: grid; align-content: start; gap: var(--space-half); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-2); color: var(--text-1); font-size: var(--type-small); cursor: grab; user-select: none; overflow: hidden; }
.board-card:active { cursor: grabbing; }
.board-card.is-selected, .board-card.is-connecting { outline: 2px solid var(--text-1); outline-offset: 1px; }
.board-card.is-gone { border-style: dashed; color: var(--text-3); }
.board-card__title { display: flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.board-card__title a { color: inherit; }
.board-card__line { color: var(--text-2); overflow-wrap: anywhere; }
.board-card__mark { flex-shrink: 0; width: 8px; height: 8px; border: 1.5px solid var(--text-2); }
.board-card--note .board-card__mark { width: 7px; height: 9px; border-radius: var(--radius-xs); }
.board-card--person .board-card__mark { border-radius: var(--radius-full); }
.board-card--task .board-card__mark { border-radius: var(--radius-xs); }
.board-card--task.is-done .board-card__title { text-decoration: line-through; color: var(--text-2); }
.board-card__tools { position: absolute; right: 2px; top: 2px; display: none; gap: var(--space-half); }
.board-card:hover .board-card__tools, .board-card.is-selected .board-card__tools { display: flex; }
.board-card__tool { padding: 0 var(--space-1); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-3); color: var(--text-2); font: inherit; font-size: var(--type-label); cursor: pointer; }
.board-card__tool:hover { color: var(--text-1); }
.board-text { position: absolute; color: var(--text-1); font-size: var(--type-body); cursor: grab; user-select: none; overflow-wrap: anywhere; }
.board-text.is-selected { outline: 2px solid var(--text-1); outline-offset: 2px; }
/* Writing 7: what my assistant drew: a dashed outline, a small "Your assistant" tag, its arrows dashed */
.board-card.is-assistant, .board-text.is-assistant { border-style: dashed; outline: var(--line-width) dashed var(--text-3); outline-offset: 3px; }
.board-card.is-assistant.is-selected, .board-text.is-assistant.is-selected { outline: 2px solid var(--text-1); }
.board-card__by { justify-self: start; padding: 0 var(--space-1); border: var(--line-width) dashed var(--line-strong); border-radius: var(--radius-s); color: var(--text-3); font-size: var(--type-label); }
.board-text .board-card__by { display: block; width: max-content; margin-top: var(--space-half); }
.board-arrow.is-assistant { stroke-dasharray: 5 4; }
.board-card__edit { width: 100%; padding: 0; border: 0; background: none; color: var(--text-1); font: inherit; outline: none; }
/* Ink layer (Writing and thinking 8): a pen on a board. Each stroke a filled outline, wider where I pressed harder;
   faded (never deleted) once it became words with To text; outlined when picked. A page from a paper tablet lies
   under everything; with the Pen on, a drawing surface lies over everything */
.ink-layer { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; color: var(--text-1); }
.ink-stroke { fill: currentColor; pointer-events: visiblePainted; cursor: pointer; }
.ink-stroke.is-faded { opacity: 0.3; }
.ink-stroke.is-selected { stroke: var(--text-2); stroke-width: 3; stroke-dasharray: 3 3; }
.ink-surface { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.board__world.is-pen .ink-stroke { pointer-events: none; }
.board__page { position: absolute; left: 0; top: 0; width: 900px; border: 0; pointer-events: none; user-select: none; }
.board__tool[aria-pressed="true"] { background: var(--surface-3); color: var(--text-1); border-color: var(--line-strong); }
/* Import report (Writing and thinking 9): one run of an import, its counts in words: imported, already here,
   doubled (always 0), kept (changed by me since, left as I wrote them); a page mark for Obsidian, a circle for Day One */
[data-modules-off~="writing"] [data-module="writing"] { display: none; }
.import__choices { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.import__reports { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.import-report { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); font-size: var(--type-small); }
.import-report p { margin: 0; }
.import-report__head { display: flex; align-items: center; gap: var(--space-2); color: var(--text-2); }
.import-report__head b { color: var(--text-1); }
.import-report__mark { width: 7px; height: 9px; border: 1.5px solid var(--text-2); border-radius: var(--radius-xs); }
.import-report--dayone .import-report__mark { width: 8px; height: 8px; border-radius: var(--radius-full); }
.import-report__counts { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--text-2); }
.import-report__counts b { color: var(--text-1); font-weight: var(--weight-bold); }
.import-report__days, .import-report__kept { color: var(--text-2); }
.imported-from { margin: 0; color: var(--text-3); font-size: var(--type-small); }
.board-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.board-add__results { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; width: 100%; }
.board-add__result { padding: var(--space-1) var(--space-2); border: 0; background: none; color: var(--text-1); font: inherit; font-size: var(--type-small); text-align: left; cursor: pointer; }
.board-add__result:hover, .board-add__result:focus-visible { background: var(--surface-2); }
.board-hint { margin: 0; color: var(--text-3); font-size: var(--type-label); }

/* Clash box (Writing and thinking 5): a line my assistant and I both changed from the same version. Both sides
   side by side, mine with a solid line, my assistant's dashed; my words stand in the note until I choose */
.clash-box { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-1); }
.clash-box__head { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-2); font-size: var(--type-small); }
.clash-box__mark { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--text-2); }
.clash-box__sides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 760px) { .clash-box__sides { grid-template-columns: 1fr; } }
.clash-box__side { display: grid; gap: var(--space-1); padding: var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); font-size: var(--type-small); white-space: pre-wrap; overflow-wrap: anywhere; }
.clash-box__side--theirs { border-style: dashed; }
.clash-box__who { color: var(--text-3); font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.04em; }
.clash-box__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Versions of a note (Writing and thinking 4): the clock in the note's bar with how many; the dialog holds
   the Version list (pick one or two) and the text: two picked show the difference word by word,
   added words underlined on a raised ground, removed words struck through; one picked shows its text */
.note-versions__body { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: var(--space-4); align-items: start; }
@media (max-width: 760px) { .note-versions__body { grid-template-columns: 1fr; } }
.note-versions .version-list { max-height: 60vh; overflow-y: auto; }
.note-versions .version-list__button { cursor: pointer; }
.note-versions__view { display: grid; gap: var(--space-3); min-width: 0; }
.note-versions__head { margin: 0; color: var(--text-3); font-size: var(--type-small); }
.version-diff { margin: 0; padding: var(--space-3); max-height: 55vh; overflow-y: auto; border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-1); color: var(--text-1); font: inherit; font-size: var(--type-small); white-space: pre-wrap; overflow-wrap: anywhere; }
.version-diff ins { background: var(--surface-3); color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; }
.version-diff del { color: var(--text-3); text-decoration: line-through; }
.clock-button { display: inline-flex; align-items: center; gap: var(--space-1); }
.clock-button svg { width: 14px; height: 14px; }
.note-comments__new textarea { width: 100%; padding: var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-1); font: inherit; font-size: var(--type-small); resize: vertical; }

/* Notice: a short message at the bottom with at most one action, gone by itself */
.notice {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface-3);
  color: var(--text-1);
}
.notice--inline { position: static; transform: none; display: inline-flex; }

/* Composer: one line in, Enter keeps it, and the box clears itself */
.composer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface-1);
}
.composer:focus-within { border-color: var(--text-2); }
.composer input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font: inherit;
  outline: none;
}
.composer input::placeholder { color: var(--text-3); }
.composer__hint { color: var(--text-3); font-size: var(--type-label); }

/* Entry: one dated line, its time on the left in a fixed column */
.entry {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--line-width) solid var(--line);
  color: inherit;
  text-decoration: none;
}
a.entry:hover { background: var(--surface-2); }
.entry.is-active { background: var(--surface-3); }
.entry__time { white-space: nowrap; color: var(--text-3); font-family: var(--font-mono); font-size: var(--type-label); }
.entry__main { display: grid; gap: var(--space-half); min-width: 0; }
.entry__main > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.entry__text { color: var(--text-2); font-size: var(--type-small); }
.entry__journal { color: var(--text-3); font-size: var(--type-label); }

/* Day heading above a day's entries */
.day-heading {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) var(--space-3) var(--space-1);
  color: var(--text-2);
  font-size: var(--type-label);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Mini calendar: a small month; a dot and a count mark the days with entries */
.mini-calendar { display: grid; gap: var(--space-2); }
.mini-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--type-small);
  font-weight: var(--weight-bold);
}
.mini-calendar__nav {
  width: 28px;
  height: 28px;
  border: var(--line-width) solid transparent;
  border-radius: var(--radius-m);
  background: none;
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
}
.mini-calendar__nav:hover { background: var(--surface-2); color: var(--text-1); }
.mini-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-half);
  text-align: center;
}
.mini-calendar__weekday { color: var(--text-3); font-size: var(--type-label); }
.mini-calendar__day {
  position: relative;
  display: grid;
  place-items: center;
  height: 34px;
  padding: 0 0 calc(var(--space-1) + var(--space-half));
  border: var(--line-width) solid transparent;
  border-radius: var(--radius-s);
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: var(--type-small);
  cursor: pointer;
}
.mini-calendar__day:hover { background: var(--surface-2); color: var(--text-1); }
.mini-calendar__day.is-outside { color: var(--text-3); opacity: 0.5; }
.mini-calendar__day.is-today { border-color: var(--line-strong); color: var(--text-1); font-weight: var(--weight-bold); }
.mini-calendar__day.is-selected { background: var(--surface-3); color: var(--text-1); }
.mini-calendar__mark {
  position: absolute;
  bottom: 2px;
  display: flex;
  align-items: center;
  gap: var(--space-half);
  color: var(--text-3);
  font-size: calc(var(--type-label) * 0.75);
  line-height: 1;
}
.mini-calendar__mark::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--text-2);
}

/* Select: a dropdown in the same shape as a button, with a chevron */
.select {
  height: var(--control-height);
  padding: 0 var(--space-6) 0 var(--space-3);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-m);
  background:
    linear-gradient(45deg, transparent 50%, var(--text-2) 50%) right 16px center / 5px 5px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--text-2) 50%) right 11px center / 5px 5px no-repeat,
    var(--surface-2);
  color: var(--text-1);
  font: inherit;
  appearance: none;
  cursor: pointer;
}
.select:hover, .select.is-hover { border-color: var(--text-3); }
.select:disabled, .select.is-disabled { color: var(--text-3); background-color: var(--surface-0); cursor: not-allowed; }

/* Image: a picture shown where it was put, at a readable size, its name under it; click for full size */
.image { display: grid; gap: var(--space-1); justify-items: start; margin: 0 0 var(--space-3); }
.image__open {
  display: block;
  padding: 0;
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface-1);
  cursor: zoom-in;
  overflow: hidden;
}
.image__open img { display: block; max-width: min(100%, 560px); max-height: 420px; object-fit: contain; }
.image__caption { display: flex; gap: var(--space-2); color: var(--text-3); font-size: var(--type-label); }
.image--small .image__open img { max-width: 160px; max-height: 120px; }

/* File chip: everything that is not a picture. A square kind badge, the name, the size, Open */
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface-1);
}
.file-chip__kind {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 28px;
  padding: 0 var(--space-1);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-s);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--type-label);
}
.file-chip__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file-chip__size { color: var(--text-3); font-size: var(--type-small); white-space: nowrap; }

/* Attachments: the pictures and files a note shows, in a strip under the text while writing */
.attachments { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--line-width) solid var(--line); }
.attachments:empty { display: none; }
.attachments > * { margin: 0; }

/* A dialog that shows one picture full size */
.dialog--viewer { width: auto; max-width: calc(100vw - 2 * var(--space-5)); padding: var(--space-3); }
.dialog--viewer img { display: block; max-width: calc(100vw - 4 * var(--space-5)); max-height: calc(100vh - 8 * var(--space-5)); }
.dialog--viewer .dialog__actions { margin-top: var(--space-3); align-items: center; justify-content: space-between; color: var(--text-3); font-size: var(--type-small); }

/* While a file is dragged over the note */
.editor.is-dropping { outline: 2px dashed var(--line-strong); outline-offset: var(--space-2); border-radius: var(--radius-m); }

/* Sidebar item count: how many wait, at the end of the item */
.sidebar-item__count {
  min-width: 20px;
  margin-left: auto;
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text-1);
  font-size: var(--type-label);
  text-align: center;
}
.sidebar-item__count:empty { display: none; }

/* Key: one key on the keyboard, shown inside a button or a hint */
.key {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  border: var(--line-width) solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-s);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--type-label);
}
.button--primary .key { border-color: var(--on-accent); color: var(--on-accent); }

/* Capture box: a small box over whatever you are doing. It asks for the thought, nothing else */
.capture-box {
  width: min(560px, calc(100vw - 2 * var(--space-4)));
  margin-top: 18vh;
  padding: var(--space-3);
}
.capture-box__text {
  display: block;
  width: 100%;
  min-height: 72px;
  padding: var(--space-2);
  border: 0;
  background: none;
  color: var(--text-1);
  font: inherit;
  font-size: var(--type-body-large);
  resize: vertical;
  outline: none;
}
.capture-box__text::placeholder { color: var(--text-3); }
.capture-box__hint {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) 0;
  border-top: var(--line-width) solid var(--line);
  color: var(--text-3);
  font-size: var(--type-label);
}

/* Inbox card: the capture being sorted, large, with one key for every decision */
.inbox-card {
  display: grid;
  gap: var(--space-4);
  max-width: 640px;
  padding: var(--space-5);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--surface-1);
}
.inbox-card__meta { color: var(--text-3); font-size: var(--type-small); }
.inbox-card__text {
  margin: 0;
  font-size: var(--type-subheading);
  line-height: var(--leading-normal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.inbox-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-4); border-top: var(--line-width) solid var(--line); }

/* Link: a page linked in the text. Underlined, never the accent; a deleted target is struck through */
.link {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: var(--text-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.link:hover { text-decoration-color: var(--text-1); }
.link--missing { color: var(--text-3); text-decoration-line: line-through; cursor: default; }

/* Mention chip: a person or a company named with @ (People in depth). The initial in a circle is a
   person, in a square a company: shape tells them apart, never colour. Flat, a thin line, no accent */
.mention {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2) 0 var(--space-half);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: 0.95em;
  line-height: 1.5;
  text-decoration: none;
  vertical-align: baseline;
  white-space: nowrap;
}
.mention:hover { border-color: var(--text-3); }
.mention__initial {
  display: inline-grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  border: var(--line-width) solid var(--text-3);
  border-radius: var(--radius-full);
  font-size: var(--type-label);
  font-weight: var(--weight-bold);
  color: var(--text-2);
}
.mention--company .mention__initial { border-radius: var(--radius-s); }
.mention.link--missing { text-decoration-line: line-through; color: var(--text-3); }

/* Link suggestions: the pages that match, opened at the cursor after [[ */
.link-suggestions {
  position: fixed;
  z-index: 10;
  width: 320px;
  max-height: 280px;
  margin: 0;
  padding: var(--space-1);
  overflow-y: auto;
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface-2);
  list-style: none;
}
.link-suggestions__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-s);
  cursor: pointer;
}
.link-suggestions__item[aria-selected="true"] { background: var(--surface-3); }
.link-suggestions__kind { width: 40px; flex-shrink: 0; color: var(--text-3); font-size: var(--type-label); }
.link-suggestions__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.link-suggestions__none { padding: var(--space-2); color: var(--text-3); font-size: var(--type-small); }

/* Backlink pane: every page that links here, with the sentence around the link */
.backlinks { margin-top: var(--space-6); padding-top: var(--space-3); border-top: var(--line-width) solid var(--line); }
.backlinks__title {
  margin: 0 0 var(--space-2);
  color: var(--text-2);
  font-size: var(--type-label);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.backlinks__item {
  display: grid;
  gap: var(--space-half);
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--line-strong);
  color: inherit;
  text-decoration: none;
}
.backlinks__item + .backlinks__item { margin-top: var(--space-2); }
.backlinks__item:hover { border-left-color: var(--text-2); background: var(--surface-1); }
.backlinks__source { font-weight: var(--weight-medium); }
.backlinks__context { color: var(--text-2); font-size: var(--type-small); }
.backlinks__none { margin: 0; color: var(--text-3); font-size: var(--type-small); }

/* Person card: the head of a person's or a company's page. A person's mark is round, a company's
   is square, so the two kinds differ by shape */
.person-card { display: flex; align-items: center; gap: var(--space-4); }
.person-card__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: var(--type-subheading);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}
.person-card--company .person-card__mark { border-radius: var(--radius-m); }
.person-card--small .person-card__mark { width: 32px; height: 32px; font-size: var(--type-label); }
.person-card__text { display: grid; gap: var(--space-half); min-width: 0; }
.person-card__name { margin: 0; font-size: var(--type-title); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.person-card--small .person-card__name { font-size: var(--type-body); font-weight: var(--weight-medium); }
.person-card__role { color: var(--text-2); font-size: var(--type-small); }

/* A form of fields side by side, for a person's details */
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3) var(--space-4); }
.field textarea { height: auto; min-height: var(--control-height); padding: var(--space-2) var(--space-3); resize: vertical; }

/* Life card: a Key Element with its Goals, Projects and Topics on one card */
.life-card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-4);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface-1);
}
.life-card__title { margin: 0; font-size: var(--type-subheading); font-weight: var(--weight-bold); }
.life-card__title a { color: inherit; text-decoration: none; }
.life-card__title a:hover { text-decoration: underline; text-decoration-color: var(--text-3); }
.life-card__group { display: grid; gap: var(--space-1); }
.life-card__label { color: var(--text-3); font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.06em; }
.life-card__item { display: flex; align-items: center; gap: var(--space-2); color: var(--text-1); text-decoration: none; }
.life-card__item:hover { text-decoration: underline; text-decoration-color: var(--text-3); }
.life-card__none { color: var(--text-3); font-size: var(--type-small); }
.life-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }

/* Kind mark: a small shape for each My Life kind, so kinds differ by shape, not colour.
   Key Element a square, Goal a diamond, Project a circle, Topic a triangle */
.kind-mark { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; background: var(--text-2); }
.kind-mark--key_element { border-radius: var(--radius-xs); }
.kind-mark--goal { transform: rotate(45deg) scale(0.85); }
.kind-mark--project { border-radius: var(--radius-full); }
.kind-mark--topic { width: 0; height: 0; background: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--text-2); }

/* Chain: why an item exists, from the item up to its Key Element; each step opens */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-3); font-size: var(--type-small); }
.chain__step { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-2); text-decoration: none; }
a.chain__step:hover { color: var(--text-1); text-decoration: underline; }
.chain__step[aria-current] { color: var(--text-1); }
.chain__sep { color: var(--text-3); }

/* Home chip: the one place in My Life a note lives. Click to choose or change it.
   With a home it carries the home's kind mark; without one its outline is dashed */
.home-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  height: 26px;
  padding: 0 var(--space-3);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface-1);
  color: var(--text-1);
  font: inherit;
  font-size: var(--type-small);
  cursor: pointer;
}
.home-chip:hover { border-color: var(--text-3); background: var(--surface-2); }
.home-chip__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.home-chip--none { border-style: dashed; color: var(--text-3); }

/* Task in a note: a line with a checkbox; its @date shows as a small due mark */
.task-list, .editor__preview .task-list { margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.task-line { padding: var(--space-half) 0; }
.task-due {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 var(--space-2);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-s);
  color: var(--text-2);
  font-size: var(--type-label);
  white-space: nowrap;
}

/* Task row: the same task in a list, with when it is due and the page it lives in */
.task-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: var(--space-1) var(--space-3);
  border-bottom: var(--line-width) solid var(--line);
  outline: none;
}
.task-row:hover { background: var(--surface-1); }
.task-row:focus-visible { box-shadow: inset 2px 0 0 var(--text-1); }
.task-row[aria-selected="true"] { background: var(--surface-2); }
.task-row__main { display: grid; gap: var(--space-half); min-width: 0; }
.task-row__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task-row.is-done .task-row__title { color: var(--text-3); text-decoration: line-through; }
.task-row__where { color: var(--text-3); font-size: var(--type-small); }
.task-row__where a { color: var(--text-2); }
.task-row__actions { display: flex; align-items: center; gap: var(--space-1); }
.task-row__actions input[type="date"] {
  height: 28px;
  padding: 0 var(--space-2);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface-1);
  color: var(--text-2);
  font: inherit;
  font-size: var(--type-small);
}

/* Tabs: a few ways to look at one list, each with its count and a number key */
.tabs { display: grid; gap: var(--space-1); }
.tabs__tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-3);
  border: var(--line-width) solid transparent;
  border-radius: var(--radius-m);
  background: none;
  color: var(--text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tabs__tab:hover, .tabs__tab.is-hover { background: var(--surface-2); color: var(--text-1); }
.tabs__tab:disabled, .tabs__tab.is-disabled { color: var(--text-3); background: none; cursor: not-allowed; }
.tabs__tab[aria-selected="true"] { background: var(--surface-3); border-color: var(--line); color: var(--text-1); }
.tabs__count { margin-left: auto; color: var(--text-3); font-size: var(--type-small); }
.tabs__tab .key { margin-left: var(--space-1); }

/* Must or Like: one flag about today, never a priority. Must is filled, Like is outlined,
   no flag is a faint dashed mark that shows on hover */
.flag {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  height: 22px;
  padding: 0 var(--space-2);
  border: var(--line-width) dashed transparent;
  border-radius: var(--radius-s);
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: var(--type-label);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.task-row:hover .flag--none, .flag--none:focus-visible, .flag.is-hover, .flag.is-focus { border-color: var(--line-strong); }
.flag:disabled, .flag.is-disabled { opacity: 0.5; cursor: not-allowed; }
.flag--must { border: var(--line-width) solid var(--text-1); background: var(--text-1); color: var(--surface-0); }
.flag--like { border: var(--line-width) solid var(--text-2); color: var(--text-1); }

/* In a task row, the empty home and the empty flag appear only when the row is pointed at or chosen */
.task-row .home-chip--none,
.task-row .flag--none { opacity: 0; transition: opacity 120ms; }
.task-row:hover .home-chip--none, .task-row:focus-within .home-chip--none, .task-row:focus .home-chip--none,
.task-row[aria-selected="true"] .home-chip--none,
.task-row:hover .flag--none, .task-row:focus-within .flag--none, .task-row:focus .flag--none,
.task-row[aria-selected="true"] .flag--none { opacity: 1; }
.task-row .home-chip { height: 22px; font-size: var(--type-label); }

/* Event block: an event in the day, at its fixed time. Its line on the left says whose it is:
   my own events in the text colour, a subscribed calendar in that calendar's data colour */
.event-block {
  position: absolute;
  display: grid;
  align-content: start;
  gap: var(--space-hair);
  overflow: hidden;
  padding: var(--space-half) var(--space-2);
  border: var(--line-width) solid var(--line-strong);
  border-left: 3px solid var(--text-2);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: var(--type-label);
  line-height: var(--leading-tight);
  text-align: left;
  cursor: pointer;
  touch-action: none;
}
.event-block:focus-visible, .event-block.is-selected { outline: 2px solid var(--text-1); outline-offset: 1px; z-index: 2; }
.event-block.is-dragging { opacity: 0.85; z-index: 3; cursor: grabbing; }
.event-block__title { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; }
.event-block__time { color: var(--text-2); white-space: nowrap; }
.event-block--readonly { cursor: default; background: var(--surface-1); }
.event-block--blue { border-left-color: var(--data-blue); }
.event-block--green { border-left-color: var(--data-green); }
.event-block--violet { border-left-color: var(--data-violet); }
.event-block--yellow { border-left-color: var(--data-yellow); }
.event-block--red { border-left-color: var(--data-red); }
.event-block--inline { position: static; display: flex; align-items: baseline; gap: var(--space-2); }
.event-block--allday { position: static; }
/* A short event (half an hour or less) keeps its title and time on one line */
.event-block--short { display: flex; align-items: center; gap: var(--space-1); padding-top: 0; padding-bottom: 0; }
.event-block--short .event-block__title { flex: 0 1 auto; min-width: 4ch; white-space: nowrap; }
.event-block--short .event-block__time { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Now line: the present moment across today's column */
.now-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--text-1); z-index: 4; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--text-1); }

/* A colour swatch for choosing a calendar's colour */
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: var(--radius-full); }
.swatch--blue { background: var(--data-blue); }
.swatch--green { background: var(--data-green); }
.swatch--violet { background: var(--data-violet); }
.swatch--yellow { background: var(--data-yellow); }
.swatch--red { background: var(--data-red); }

/* Planner slot: a task placed in the day. Dashed, because a task can move (an event is solid) */
.planner-slot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--line-width) dashed var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface-1);
  cursor: grab;
}
.planner-slot:focus-visible, .planner-slot.is-selected { outline: 2px solid var(--text-1); outline-offset: 1px; }
.planner-slot.is-dragging { opacity: 0.5; }
.planner-slot.is-done .planner-slot__title { color: var(--text-3); text-decoration: line-through; }
.planner-slot__title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.planner-slot__meta { display: flex; align-items: center; gap: var(--space-2); color: var(--text-3); font-size: var(--type-label); }
.planner-slot__actions { display: flex; align-items: center; gap: var(--space-1); }
.planner-slot select {
  height: 22px;
  padding: 0 var(--space-1);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--text-2);
  font: inherit;
  font-size: var(--type-label);
}
.planner-slot--guess select { border-style: dashed; }

/* Time block: a container of time with a kind, holding tasks; dashed like what it holds */
.time-block {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
  border: var(--line-width) dashed var(--text-3);
  border-radius: var(--radius-l);
}
.time-block__head { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--type-small); }
.time-block__kind { font-weight: var(--weight-bold); }
.time-block__left { margin-left: auto; color: var(--text-3); }
.time-block.is-over .time-block__left { color: var(--data-yellow); }
.drop-target { outline: 2px dashed var(--text-2); outline-offset: 2px; }

/* Budget line: what the day holds against what it can. Over budget it turns amber and says by how much */
.budget-line { display: grid; gap: var(--space-1); }
.budget-line__words { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--type-small); color: var(--text-2); }
.budget-line__bar { position: relative; height: 6px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; }
.budget-line__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-full); background: var(--text-2); }
.budget-line--over .budget-line__fill { background: var(--data-yellow); }
.budget-line--over .budget-line__state { color: var(--data-yellow); font-weight: var(--weight-bold); }
.budget-line__state::before { content: "● "; }
.budget-line--over .budget-line__state::before { content: "▲ "; }

/* Day strip: six in the morning to ten at night, events solid, blocks dashed, a mark for now */
.day-strip { position: relative; height: 28px; border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-1); }
.day-strip__event, .day-strip__block { position: absolute; top: 3px; bottom: 3px; border-radius: var(--radius-xs); }
.day-strip__event { background: var(--text-3); }
.day-strip__block { border: var(--line-width) dashed var(--text-2); }
.day-strip__now { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px solid var(--text-1); }
.day-strip__hours { display: flex; justify-content: space-between; color: var(--text-3); font-size: var(--type-label); }

/* Week strip: seven days with what is planned in each, and a bar for how full each one is */
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); }
.week-strip__day {
  display: grid;
  gap: var(--space-half);
  padding: var(--space-2);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-m);
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: var(--type-label);
  text-align: left;
  cursor: pointer;
}
.week-strip__day:hover { background: var(--surface-1); }
.week-strip__day[aria-current="date"] { border-color: var(--text-2); background: var(--surface-2); color: var(--text-1); }
.week-strip__name strong { color: var(--text-1); font-size: var(--type-small); }
.week-strip__bar { height: 4px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; }
.week-strip__fill { display: block; height: 100%; background: var(--text-3); }
.week-strip__day.is-over .week-strip__fill { background: var(--data-yellow); }
.week-strip__day.is-over .week-strip__load::before { content: "▲ "; color: var(--data-yellow); }

/* Dialog as a slim panel beside what it is about, never hiding it */
.dialog--panel {
  position: fixed;
  inset: var(--space-4) var(--space-4) var(--space-4) auto;
  width: min(var(--panel-width), calc(100vw - 2 * var(--space-4)));
  max-height: none;
  margin: 0;
  overflow-y: auto;
  z-index: 20;
}
.flow-step { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: var(--line-width) solid var(--line); }
.flow-step__head { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-medium); }
.flow-step__mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-full); font-size: var(--type-label); color: var(--text-3); }
.flow-step.is-done .flow-step__mark { background: var(--text-1); border-color: var(--text-1); color: var(--surface-0); }
.flow-step.is-skipped .flow-step__head { color: var(--text-3); }
.flow-step__end { color: var(--text-2); font-size: var(--type-small); }
.flow-step__now { color: var(--text-1); font-size: var(--type-small); }
.flow-step__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.flow-step:not(.is-current) .flow-step__actions, .flow-step:not(.is-current) .flow-step__body { display: none; }

/* A star for a Weekly Goal, a mark for the day's Highlight */
.goal-star { color: var(--text-1); }
.highlight-mark { padding: 0 var(--space-2); border: var(--line-width) solid var(--text-1); border-radius: var(--radius-s); color: var(--text-1); font-size: var(--type-label); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.04em; }

/* Radio: one of a few, round so it never reads as a checkbox */
.checkbox input[type="radio"] { border-radius: var(--radius-full); }
.checkbox input[type="radio"]:checked { background: var(--surface-1); border-color: var(--text-1); }
.checkbox input[type="radio"]:checked::after { width: 8px; height: 8px; margin: 0; border: 0; border-radius: var(--radius-full); background: var(--text-1); transform: none; }

/* Chat bubble: my question on the right, the assistant's answer on the left. Steps fold under it */
.chat-bubble { display: grid; gap: var(--space-2); max-width: min(680px, 90%); }
.chat-bubble--me { justify-self: end; padding: var(--space-2) var(--space-3); border-radius: var(--radius-l) var(--radius-l) var(--radius-s) var(--radius-l); background: var(--surface-3); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-bubble--assistant { justify-self: start; padding: var(--space-1) 0; }
.chat-bubble--assistant .editor__preview { font-size: var(--type-body); }
.chat-bubble--assistant .editor__preview p:last-child { margin-bottom: 0; }
.chat-bubble__meta { color: var(--text-3); font-size: var(--type-label); }
.chat-bubble--error { padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--data-red); border-radius: var(--radius-m); }
.chat-bubble--error .chat-bubble__meta::before { content: "▲ "; color: var(--data-red); }
.chat-bubble__cursor::after { content: "▍"; color: var(--text-3); animation: chat-blink 1s steps(2) infinite; }
@keyframes chat-blink { 50% { opacity: 0; } }
.chat-steps { font-size: var(--type-small); color: var(--text-2); }
.chat-steps summary { cursor: pointer; color: var(--text-3); }
.chat-steps ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.chat-steps code { font-family: var(--font-mono); font-size: var(--type-label); }

/* Question chip: a question to ask with one click, pill-shaped with a quote mark */
.question-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: var(--type-small);
  cursor: pointer;
}
.question-chip::before { content: "“"; color: var(--text-3); }
.question-chip:hover, .question-chip.is-hover { border-color: var(--text-3); color: var(--text-1); }
.question-chip:disabled, .question-chip.is-disabled { color: var(--text-3); cursor: not-allowed; }

/* Citation: a page an answer comes from, numbered, opening the page. Never take an answer on trust */
.citations { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.citation {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  max-width: 280px;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  border: var(--line-width) solid var(--line);
  border-left: 2px solid var(--text-2);
  border-radius: var(--radius-s);
  color: var(--text-1);
  font-size: var(--type-small);
  text-decoration: none;
}
.citation:hover { background: var(--surface-1); border-left-color: var(--text-1); }
.citation__n { color: var(--text-3); font-family: var(--font-mono); font-size: var(--type-label); }
.citation__kind { color: var(--text-3); font-size: var(--type-label); }
.citation__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* A change the assistant made or proposes, as a card with its decision */
.change-card { display: grid; gap: var(--space-2); max-width: min(560px, 90%); }
.change-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.change-card__status { color: var(--text-3); font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.04em; }
.change-card__preview { margin: 0; padding: var(--space-2); border: var(--line-width) dashed var(--line-strong); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-small); white-space: pre-wrap; max-height: 160px; overflow: auto; }
.change-card__actions { display: flex; gap: var(--space-2); }

/* Ask your notes: a small box on every page */
.ask-notes { display: flex; }
.ask-notes input { width: 100%; height: 30px; padding: 0 var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-full); background: var(--surface-0); color: var(--text-1); font: inherit; font-size: var(--type-small); }
.ask-notes input::placeholder { color: var(--text-3); }
.ask-notes input:focus { outline: none; border-color: var(--text-2); }

/* Suggestion: what the assistant proposes a capture becomes, with one line of why. One press accepts;
   nothing moves until then. A dotted line says it is a proposal, not a fact */
.suggestion {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: var(--line-width) dotted var(--text-2);
  border-radius: var(--radius-m);
  background: var(--surface-2);
}
.suggestion__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.suggestion__label { color: var(--text-3); font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.04em; }
.suggestion__what { font-weight: var(--weight-medium); }
.suggestion__why { color: var(--text-2); font-size: var(--type-small); }
.suggestion__connects { display: flex; flex-wrap: wrap; gap: var(--space-1); font-size: var(--type-label); color: var(--text-3); }
.suggestion--reading { border-style: dashed; color: var(--text-3); font-size: var(--type-small); }

/* Segmented switch: two (or a few) positions side by side; exactly one is on */
.segmented { display: inline-flex; padding: var(--space-half); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-1); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-small); white-space: nowrap; }
.segmented input:checked + span { background: var(--surface-3); color: var(--text-1); font-weight: var(--weight-medium); }
.segmented input:focus-visible + span, .segmented.is-focus input:checked + span { outline: 2px solid var(--text-1); outline-offset: 1px; }
.segmented.is-focus { outline: none; }
.segmented label:hover span, .segmented.is-hover label:first-child span { color: var(--text-1); }
.segmented input:disabled + span, .segmented.is-disabled span { color: var(--text-3); cursor: not-allowed; }
.segmented--locked { opacity: 0.7; }

/* A row of a permission: what, and its switch */
.permission { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--line-width) solid var(--line); }

/* Mic pill: dictation at the foot of the sidebar (inside a dialog while one is open). Idle says which key to hold; listening shows a
   level line and the words as they come; then writing, then where the words went.
   Listening is marked by a filled round mic (a shape), not by colour alone */
.mic-pill-host { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); min-width: 0; }
dialog > .mic-pill-host { margin-top: var(--space-3); }
.mic-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: 32px;
  padding: var(--space-half) var(--space-3) var(--space-half) var(--space-half);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--type-small);
}
.mic-pill__mic {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface-1);
  color: var(--text-1);
  cursor: pointer;
}
.mic-pill__mic svg { width: 14px; height: 14px; }
.mic-pill__mic:hover { background: var(--surface-3); }
.mic-pill__mic:focus-visible { outline: 2px solid var(--text-1); outline-offset: 1px; }
.mic-pill__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mic-pill--listening, .mic-pill--done { border-radius: var(--radius-l); }
.mic-pill--listening .mic-pill__text, .mic-pill--done .mic-pill__text { white-space: normal; overflow-wrap: anywhere; }
.mic-pill__text .key { margin: 0 var(--space-half); }
.mic-pill__level { display: inline-flex; align-items: center; gap: var(--space-half); height: 16px; flex: none; }
.mic-pill__level span { width: 2px; height: calc(2px + var(--level, 0) * 14px); border-radius: var(--radius-full); background: var(--text-2); transition: height 80ms linear; }
.mic-pill--listening { color: var(--text-1); border-color: var(--text-2); }
.mic-pill--listening .mic-pill__mic { background: var(--data-red); border-color: var(--data-red); color: var(--surface-0); }
.mic-pill--writing .mic-pill__text { font-style: italic; }
.mic-pill--done { color: var(--text-1); }
.mic-pill--done .mic-pill__text::before { content: "✓ "; color: var(--text-2); }

/* Glossary row: a word dictation should know. A fix shows what it was heard as, struck,
   then the word as written; a hint is the word alone. Where it came from, small, on the right */
.glossary-row { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: var(--space-1) 0; border-bottom: var(--line-width) solid var(--line); }
.glossary-row__words { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); flex: 1; min-width: 0; }
.glossary-row__term { font-weight: var(--weight-medium); color: var(--text-1); }
.glossary-row__heard { color: var(--text-3); text-decoration: line-through; }
.glossary-row__arrow { color: var(--text-3); }
.glossary-row__source { color: var(--text-3); font-size: var(--type-label); white-space: nowrap; }
.glossary-row__bin { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; }
.glossary-row__bin svg { width: 14px; height: 14px; }

/* The offer to learn a correction, above the Mic pill: a Suggestion with Add and Not now */
.mic-pill-host > [data-pill] { display: flex; min-width: 0; }
.glossary-offer { font-size: var(--type-small); }
.glossary-offer__actions { display: flex; gap: var(--space-1); margin-top: var(--space-1); }

/* Call widget: a strip above the chat's message box while a call runs. A phone mark, the state in
   one word, whose turn it is, a level line, the words of the turn, and End call. Your turn and the
   assistant's are told apart by the turn word and by the mark: hollow while you speak, filled while it does */
.call-widget {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "mark head level end" "words words words words";
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--surface-2);
}
.call-widget__mark { grid-area: mark; display: grid; place-items: center; width: 28px; height: 28px; border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-full); color: var(--text-1); }
.call-widget__mark svg { width: 14px; height: 14px; }
.call-widget--speaking .call-widget__mark, .call-widget--thinking .call-widget__mark { background: var(--text-1); color: var(--surface-0); border-color: var(--text-1); }
.call-widget__head { grid-area: head; display: flex; align-items: baseline; gap: var(--space-2); }
.call-widget__state { font-weight: var(--weight-medium); color: var(--text-1); }
.call-widget__turn { font-size: var(--type-small); color: var(--text-2); }
.call-widget__level { grid-area: level; display: inline-flex; align-items: center; gap: var(--space-half); height: 18px; }
.call-widget__level span { width: 2px; height: calc(2px + var(--level, 0) * 16px); border-radius: var(--radius-full); background: var(--text-2); transition: height 80ms linear; }
.call-widget [data-call="end"] { grid-area: end; }
.call-widget__words { grid-area: words; color: var(--text-2); font-size: var(--type-small); }
.call-widget__words:empty { display: none; }
.call-widget--thinking .call-widget__state::after { content: "…"; }
.call-widget--ended { grid-template-areas: "mark head level end" "words words words words"; opacity: 0.8; }

/* Said on a call: a small phone mark under the bubble */
.chat-bubble__via { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); font-size: var(--type-label); color: var(--text-3); }
.chat-bubble__via svg { width: 11px; height: 11px; }
.assistant__call svg { width: 14px; height: 14px; margin-right: var(--space-1); vertical-align: -2px; }

/* Hand-off line: what became of work handed to the assistant, in the call widget and on the answer.
   Told apart by its mark: three quiet dots while it works, a tick when done, a question mark when
   it asks first, a dash when nothing was done */
.hand-off { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: var(--space-1) 0 0; font-size: var(--type-small); color: var(--text-2); }
.hand-off__label { font-weight: var(--weight-medium); color: var(--text-1); }
.hand-off--done .hand-off__label::before { content: "✓ "; }
.hand-off--asks .hand-off__label::before { content: "? "; }
.hand-off--declined .hand-off__label::before { content: "– "; }
.hand-off__dots { display: inline-flex; gap: var(--space-half); }
.hand-off__dots i { width: 4px; height: 4px; border-radius: var(--radius-full); background: var(--text-3); animation: hand-off-dot 1.2s infinite ease-in-out; }
.hand-off__dots i:nth-child(2) { animation-delay: 0.2s; }
.hand-off__dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes hand-off-dot { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hand-off__dots i { animation: none; opacity: 0.6; } }
.call-widget__hand-off { grid-column: 1 / -1; }
.call-widget__hand-off .hand-off { margin: 0; }

/* Metric chip: a measured number in plain words ("first word 0.9 s"). Squared ends and a
   monospaced number, so it never reads as a tag or a button; a cold one has a dashed outline */
.metric-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-hair) var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.metric-chip--cold { border-style: dashed; }
.chat-bubble__via .metric-chip { margin-left: var(--space-2); }
/* Bars, one per call: how long to the first word. A cold call is outlined, not filled */
.metric-bars { display: flex; align-items: flex-end; gap: var(--space-half); height: 48px; padding-top: var(--space-1); }
.metric-bars span { width: 8px; min-height: 2px; height: calc(var(--share, 0) * 100%); border-radius: var(--radius-s) var(--radius-s) 0 0; background: var(--text-3); }
.metric-bars span.is-cold { background: none; border: var(--line-width) dashed var(--text-3); border-bottom: 0; }
.metric-bars span.is-last { background: var(--text-1); }
.chat-bubble__said { display: block; margin-top: var(--space-1); font-size: var(--type-label); color: var(--text-3); font-style: italic; }

/* Fallback notice: one line in the call widget, what failed and what still works, with one button
   when there is a choice. A square mark before it: a notice about the call, not the call's state */
.fallback-notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; padding-top: var(--space-2); border-top: var(--line-width) solid var(--line); font-size: var(--type-small); color: var(--text-1); }
.fallback-notice__text::before { content: "■ "; color: var(--text-3); font-size: var(--type-label); }
.call-widget__fallback { grid-column: 1 / -1; }
/* A line in the chat about the call itself */
.chat-note { display: flex; align-items: center; justify-content: center; gap: var(--space-1); margin: 0; font-size: var(--type-label); color: var(--text-3); }
.chat-note svg { width: 11px; height: 11px; }
.call-widget--ended .call-widget__level { visibility: hidden; }

/* Speedy mark: Speedy or Task with its minutes, by shape and words. A Speedy is a round pill with
   a double chevron; a Task a square-cornered block; a guessed estimate is dashed */
.speedy-mark { display: inline-flex; align-items: center; gap: var(--space-half); margin-left: var(--space-1); padding: 0 var(--space-2); border: var(--line-width) solid var(--line-strong); color: var(--text-2); font-size: var(--type-label); font-weight: var(--weight-regular); white-space: nowrap; vertical-align: 1px; }
.speedy-mark--speedy { border-radius: var(--radius-full); }
.speedy-mark--speedy::before { content: "»"; }
.speedy-mark--task { border-radius: var(--radius-xs); }
.speedy-mark--task::before { content: "▭"; font-size: 0.9em; }
.speedy-mark--guess { border-style: dashed; }
[data-modules-off~="tasks_plus"] .speedy-mark { display: none; }
.quick-add__minutes--default { border-style: dashed; }

/* Reminder chip: an alarm on a task (a clock mark and a time), never a task of its own */
.reminder-chip { display: inline-flex; align-items: center; gap: var(--space-half); margin-left: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--surface-3); color: var(--text-1); font-size: var(--type-label); font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: 1px; }
.reminder-chip.is-done { text-decoration: line-through; color: var(--text-3); background: none; border: var(--line-width) solid var(--line); }
/* Reminder notice: the card that rings in the corner over any page */
.reminder-notices { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 30; display: grid; gap: var(--space-2); width: min(var(--panel-width), calc(100vw - 2 * var(--space-4))); }
.reminder-notice { display: grid; gap: var(--space-1); padding: var(--space-3); border: var(--line-width) solid var(--line-strong); border-left-width: 3px; border-left-color: var(--text-1); border-radius: var(--radius-m); background: var(--surface-2); }
.reminder-notice__head { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.reminder-notice__head .reminder-chip { margin: 0; }
.reminder-notice__label { color: var(--text-3); font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.04em; }
.reminder-notice__title { margin: 0; font-weight: var(--weight-medium); }
.reminder-notice__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: flex-end; }
[data-modules-off~="tasks_plus"] .reminder-chip, [data-modules-off~="tasks_plus"] .reminder-notices { display: none; }
.reminders .list-row.is-done .list-row__title { color: var(--text-3); }

/* Repeat chip: the rule in words on a task, a turning arrow; never a colour */
.repeat-chip { display: inline-flex; align-items: center; gap: var(--space-half); margin-left: var(--space-1); padding: 0 var(--space-2); border: var(--line-width) dotted var(--text-3); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-label); white-space: nowrap; vertical-align: 1px; }
[data-modules-off~="tasks_plus"] .repeat-chip { display: none; }
.task-row__next { color: var(--text-2); }

/* Several tasks selected: a bar says how many and which keys act on them; each selected row says Selected */
.tasks__selection { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); font-size: var(--type-small); color: var(--text-2); }
.tasks__selection strong { color: var(--text-1); font-weight: var(--weight-medium); }
[data-multi] .task-row[aria-selected="true"] .task-row__actions::before { content: "Selected"; color: var(--text-2); font-size: var(--type-label); margin-right: var(--space-2); }
[data-multi] .task-row[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--text-2); }

/* Missed row: a task planned for an earlier day, its old date, and the four ways out (t, m, d, l) */
.missed-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--type-small); color: var(--text-2); }
.missed-row__when::before { content: "◌ "; color: var(--text-3); }
.missed-row__ways { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.missed-row__ways .button { font-size: var(--type-small); }
.planner__missed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border: var(--line-width) dashed var(--line-strong); border-radius: var(--radius-m); color: var(--text-2); font-size: var(--type-small); }
.planner__missed > span:first-child { color: var(--text-1); font-weight: var(--weight-medium); }

/* World tag: Inner World (my own thought) a circle, Outer World (something others made) a square */
.world-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-full); background: none; color: var(--text-2); font: inherit; font-size: var(--type-label); line-height: 1.6; white-space: nowrap; }
button.world-tag { cursor: pointer; }
button.world-tag:hover { color: var(--text-1); border-color: var(--text-2); }
.world-tag__mark { width: 7px; height: 7px; border: 1.5px solid currentColor; }
.world-tag--inner .world-tag__mark { border-radius: var(--radius-full); }
.world-tag--outer { border-radius: var(--radius-s); }
.world-tag--outer .world-tag__mark { border-radius: var(--radius-xs); }
.inbox__pile + .inbox__pile { margin-top: var(--space-4); }
.inbox__pile-note { margin: 0 0 var(--space-1); }
.inbox__views { margin-bottom: var(--space-3); }

/* A Habit's kind mark: a ring, a rhythm that keeps going (a Project's circle is filled) */
.kind-mark--habit { background: none; border: 2px solid var(--text-2); border-radius: var(--radius-full); box-sizing: border-box; }
/* Thinking tab: Page and Thinking on every My Life page. The Thinking side holds only the text */
.life-tabs { display: inline-flex; gap: var(--space-half); margin-bottom: var(--space-3); padding: var(--space-half); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); }
.life-tabs__tab { padding: var(--space-1) var(--space-3); border: 0; border-radius: var(--radius-s); background: none; color: var(--text-2); font: inherit; font-size: var(--type-small); cursor: pointer; }
.life-tabs__tab[aria-selected="true"] { background: var(--surface-3); color: var(--text-1); font-weight: var(--weight-medium); }
.life-tabs__tab:focus-visible { outline: 2px solid var(--text-1); outline-offset: 1px; }
.life--on-page .life__thinking-pane { display: none; }
.life--on-thinking .life__chain, .life--on-thinking .life__fields, .life--on-thinking .life__related { display: none; }
.life--on-thinking ~ section { display: none; }
.life--on-thinking .life__thinking { min-height: 50vh; }
/* Needs a look: a quiet gap in My Life, not a broken rule (a dotted line, a word) */
.needs-look { margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-2); border: var(--line-width) dotted var(--text-3); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-small); }
.needs-look__label { color: var(--text-1); font-weight: var(--weight-medium); }

/* Stepper: numbered steps across the top of a guided flow; the one I am on marked, the done ones ticked */
.stepper { display: flex; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; counter-reset: none; }
.stepper__step { display: flex; align-items: center; gap: var(--space-2); flex: 1; padding-bottom: var(--space-2); border-bottom: 2px solid var(--line); color: var(--text-3); font-size: var(--type-small); }
.stepper__n { display: grid; place-items: center; width: 20px; height: 20px; border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-full); font-size: var(--type-label); }
.stepper__step[aria-current="step"] { border-bottom-color: var(--text-1); color: var(--text-1); font-weight: var(--weight-medium); }
.stepper__step[aria-current="step"] .stepper__n { border-color: var(--text-1); }
.stepper__step.is-done { color: var(--text-2); border-bottom-color: var(--text-3); }
.stepper__step.is-done .stepper__n { background: var(--surface-3); border-color: var(--surface-3); color: var(--text-1); }
.dialog--wide { width: min(560px, calc(100vw - 2 * var(--space-4))); }
.goal-flow__rule { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--text-1); background: var(--surface-2); font-size: var(--type-small); }

/* Habit week: seven days from Monday, a circle each, ticked when done; today bold; days to come quiet.
   One line counts against the cadence. There is no streak */
.habit-week { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.habit-week__day { display: grid; justify-items: center; gap: var(--space-half); padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; cursor: pointer; }
.habit-week__dot { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-full); font-size: var(--type-label); }
.habit-week__name { font-size: var(--type-label); }
.habit-week__day.is-done .habit-week__dot { background: var(--text-1); border-color: var(--text-1); color: var(--surface-0); }
.habit-week__day.is-today .habit-week__name { color: var(--text-1); font-weight: var(--weight-bold); }
.habit-week__day.is-today .habit-week__dot { border-color: var(--text-1); }
.habit-week__day:disabled { cursor: default; opacity: 0.45; }
.habit-week__day:focus-visible .habit-week__dot { outline: 2px solid var(--text-1); outline-offset: 2px; }
.habit-week__line { margin-left: var(--space-2); font-size: var(--type-small); color: var(--text-1); font-variant-numeric: tabular-nums; }
.habit-count { margin-left: var(--space-1); padding: 0 var(--space-1); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-label); font-variant-numeric: tabular-nums; }
.promote__choices { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0; }
.life__history { margin-top: var(--space-4); }

/* Health word: steady (a dot), drifting (a diamond), rotting (a triangle). The word and its mark,
   never colour alone; worked out from facts, never typed */
.health-word { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-1); padding: 0 var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-full); color: var(--text-2); font-size: var(--type-label); font-weight: var(--weight-regular); white-space: nowrap; vertical-align: 1px; }
.health-word__mark { display: inline-block; width: 7px; height: 7px; background: currentColor; }
.health-word--steady .health-word__mark { border-radius: var(--radius-full); }
.health-word--drifting { color: var(--text-1); }
.health-word--drifting .health-word__mark { transform: rotate(45deg); width: 6px; height: 6px; }
.health-word--rotting { color: var(--text-1); border-color: var(--text-1); font-weight: var(--weight-medium); }
.health-word--rotting .health-word__mark { width: 0; height: 0; background: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid currentColor; }
.life__look { margin-top: var(--space-5); }

/* Weekly Goal row: a task of this week, the Goal it serves, and a star for today's Highlight */
.weekly-goal { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-1) 0; border-bottom: var(--line-width) solid var(--line); }
.weekly-goal__main { display: grid; gap: var(--space-half); min-width: 0; }
.weekly-goal__title { font-weight: var(--weight-medium); }
.weekly-goal.is-done .weekly-goal__title { text-decoration: line-through; color: var(--text-3); }
.weekly-goal__serves { display: flex; align-items: center; gap: var(--space-1); color: var(--text-2); font-size: var(--type-small); }
.weekly-goal__star { width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--text-2); font-size: var(--type-icon); line-height: 1; cursor: pointer; }
.weekly-goal__star[aria-pressed="true"] { color: var(--text-1); }
.weekly-goal__star:focus-visible { outline: 2px solid var(--text-1); outline-offset: 1px; border-radius: var(--radius-s); }
.weekly-goals__add { margin-top: var(--space-4); }
.planner__serves { margin: var(--space-1) 0 0; color: var(--text-2); font-size: var(--type-small); }
.change-card__proposals { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.change-card__proposals li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.weekly-goals__nav { margin: 0 0 var(--space-3); }
.plan-week__pick { display: grid; gap: var(--space-2); max-height: 50vh; overflow-y: auto; }
.plan-week__row { display: grid; grid-template-columns: 1fr minmax(160px, 45%); align-items: center; gap: var(--space-2); }
.plan-week__new { padding: var(--space-1) var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-1); color: var(--text-1); font: inherit; }

/* Review step: one question, and under it what the data says */
.review-step { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: var(--line-width) solid var(--line); }
.review-step__q { margin: 0; font-weight: var(--weight-medium); }
.review-step__a { display: grid; gap: var(--space-half); }
.review-step__a p { margin: 0; }
.review-step__a .button { justify-self: start; margin-top: var(--space-1); }

/* Timeline row (People in depth): one thing that happened. Its kind is a shape, never a colour:
   a note a page (tall rectangle), a journal entry a circle, a finished task a ticked square,
   an event a diamond, a capture a triangle, a logged interaction a pill. Then the time, one line, and where it lives */
.timeline-row {
  display: grid;
  grid-template-columns: 14px 72px 1fr auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--line-width) solid var(--line);
  color: var(--text-1);
  text-decoration: none;
}
.timeline-row:hover { background: var(--surface-2); }
.timeline-row__shape { position: relative; display: inline-block; justify-self: center; width: 8px; height: 8px; border: 1.5px solid var(--text-2); }
.timeline-row__shape--note { width: 8px; height: 10px; border-radius: var(--radius-xs); }
.timeline-row__shape--entry { border-radius: var(--radius-full); }
.timeline-row__shape--task { width: 9px; height: 9px; border-radius: var(--radius-xs); background: var(--text-2); }
.timeline-row__shape--event { transform: rotate(45deg); }
.timeline-row__shape--interaction { width: 12px; height: 6px; border-radius: var(--radius-full); }
.timeline-row__shape--capture { width: 0; height: 0; border-width: 0 5px 9px; border-color: transparent transparent var(--text-2); }
.timeline-row__time { white-space: nowrap; color: var(--text-3); font-family: var(--font-mono); font-size: var(--type-label); }
.timeline-row__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.timeline-row__where { color: var(--text-3); font-size: var(--type-small); white-space: nowrap; }

/* Now line: a hairline at the present moment, its time at the start. Above it, what is still ahead today */
.timeline-now { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); color: var(--text-2); font-family: var(--font-mono); font-size: var(--type-label); white-space: nowrap; }
.timeline-now::after { content: ""; flex: 1; border-top: var(--line-width) solid var(--text-2); }

/* The Timeline page, and its sidebar item that goes with People in depth */
[data-modules-off~="people_plus"] [data-module="people_plus"] { display: none; }
.timeline { max-width: 820px; margin: 0 auto; padding: var(--space-6) var(--space-5); }
.timeline__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); }
.timeline__kinds { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.timeline__day { margin-bottom: var(--space-4); }
.timeline__more { margin: var(--space-3) auto; display: block; }
/* A person's or company's page with its Timeline tab (People in depth): the Thinking tab's look */
.person__tabs { margin: var(--space-4) var(--space-5) 0; }
.person__timeline { padding: 0 var(--space-5) var(--space-5); }
.person__timeline .person__card { margin: var(--space-2) 0 var(--space-4); }

/* Log line (People in depth): what happened with someone outside the app, in one line. A kind,
   a day (today unless changed), one sentence and Log. Flat, one row, no accent */
.log-line { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--space-2); align-items: center; padding: var(--space-2); margin-bottom: var(--space-4); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-1); }
.log-line input { min-width: 0; height: var(--control-height); padding: 0 var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-0); color: var(--text-1); font: inherit; font-size: var(--type-small); }
.log-line input:focus { outline: none; border-color: var(--text-2); }

/* Cadence chip (People in depth): how often I want to be in touch, pressed to change, and how it
   stands. Overdue has a mark and its words, never a colour of its own */
.cadence-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-half) var(--space-2) var(--space-half) var(--space-half); border: var(--line-width) solid var(--line); border-radius: var(--radius-full); background: var(--surface-2); font-size: var(--type-small); }
.cadence-chip__pick { height: 24px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-full); background: var(--surface-3); color: var(--text-1); font: inherit; cursor: pointer; }
.cadence-chip__due { color: var(--text-2); white-space: nowrap; }
.cadence-chip--overdue { border-color: var(--text-2); }
.cadence-chip--overdue .cadence-chip__due { color: var(--text-1); font-weight: var(--weight-medium); }
.cadence-chip__mark { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1.5px solid var(--text-1); border-radius: var(--radius-full); font-size: var(--type-label); font-weight: var(--weight-medium); line-height: 1; }
.person__rhythm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); }
.editor .person__rhythm { padding: 0 var(--space-5); }

/* The Reconnect list on top of People */
.reconnect { padding-bottom: var(--space-2); border-bottom: var(--line-width) solid var(--line); }
.reconnect__row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); font-size: var(--type-small); }
.reconnect__row.is-active { background: var(--surface-2); }
.reconnect__name { color: var(--text-1); text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reconnect__due { color: var(--text-2); white-space: nowrap; }

/* Merge pair (People in depth): two entries of one person side by side, a row per field, the value
   to keep picked with its radio; Keep both under it where a field can hold both */
.merge-pair { display: grid; gap: 0; border: var(--line-width) solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.merge-pair__head, .merge-pair__row { display: grid; grid-template-columns: 110px 1fr 1fr; gap: var(--space-3); align-items: start; margin: 0; padding: var(--space-2) var(--space-3); border: 0; border-top: var(--line-width) solid var(--line); }
.merge-pair__head { border-top: 0; background: var(--surface-2); font-size: var(--type-small); }
.merge-pair__label { float: left; padding: 0; color: var(--text-2); font-size: var(--type-label); }
.merge-pair__side, .merge-pair__both { display: flex; gap: var(--space-2); align-items: baseline; font-size: var(--type-small); overflow-wrap: anywhere; cursor: pointer; }
.merge-pair__both { grid-column: 2 / -1; color: var(--text-2); }
.merge-pair input { accent-color: var(--text-1); }

/* Hour grid (Calendar in depth): the Planner's order drawn in hours. Hours down the side, a column
   per day, the working day a lighter band, a line at now. Events are solid, time blocks outlined */
.hour-grid { --hour: 48px; margin-top: var(--space-4); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.hour-grid__heads { display: grid; grid-template-columns: 40px repeat(var(--days), 1fr); border-bottom: var(--line-width) solid var(--line); background: var(--surface-1); }
.hour-grid__head { padding: var(--space-2); border-left: var(--line-width) solid var(--line); color: var(--text-2); font-size: var(--type-small); font-weight: var(--weight-medium); }
.hour-grid__body { position: relative; display: grid; grid-template-columns: 40px repeat(var(--days), 1fr); height: calc(var(--hours) * var(--hour)); background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--hour)); }
.hour-grid__hours { position: relative; }
.hour-grid__hours span { position: absolute; right: var(--space-2); transform: translateY(-50%); color: var(--text-3); font-family: var(--font-mono); font-size: var(--type-label); }
.hour-grid__hours span:first-child { transform: none; }
.hour-grid__work { position: absolute; left: 40px; right: 0; background: var(--surface-2); opacity: 0.5; pointer-events: none; }
.hour-grid__day { position: relative; border-left: var(--line-width) solid var(--line); }
.hour-grid__event, .hour-grid__block { position: absolute; left: 2px; right: 2px; overflow: hidden; padding: var(--space-half) var(--space-1); border-radius: var(--radius-s); font-size: var(--type-label); line-height: 1.3; }
.hour-grid__event { background: var(--surface-3); border: var(--line-width) solid var(--line-strong); color: var(--text-1); }
.hour-grid__block { border: 1.5px solid var(--text-2); background: var(--surface-1); color: var(--text-2); }
.hour-grid__event span, .hour-grid__block span { font-family: var(--font-mono); color: var(--text-3); }
.hour-grid__over { position: absolute; left: 2px; right: 2px; margin: 0; transform: translateY(-100%); padding: 0 var(--space-1); color: var(--text-1); font-size: var(--type-label); font-weight: var(--weight-medium); text-align: right; }
.hour-grid__now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--text-1); pointer-events: none; }

/* Task block: a task in the hours. Dashed, because it has a place, not a time; as tall as its
   estimate, or its share of a gap that holds too much */
.task-block { position: absolute; left: 6px; right: 6px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-1); overflow: hidden; padding: var(--space-hair) var(--space-1); border: 1.5px dashed var(--text-2); border-radius: var(--radius-s); background: var(--surface-0); font-size: var(--type-label); line-height: 1.3; }
.task-block__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-1); }
.task-block__length { color: var(--text-3); font-family: var(--font-mono); white-space: nowrap; }
.task-block.is-done .task-block__title { color: var(--text-3); text-decoration: line-through; }
.task-block[draggable="true"] { cursor: grab; }
/* Where a dragged task would go: the gap lit up, naming what it follows */
.hour-grid__drop { position: absolute; left: 2px; right: 2px; z-index: 3; padding: var(--space-half) var(--space-1); border: 1.5px solid var(--text-1); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-1); font-size: var(--type-label); font-weight: var(--weight-medium); pointer-events: none; }

/* Lens switch (Calendar in depth): the Planner's two lenses on the same days, the order and the
   hours; v switches. The lens I am in is marked, never by colour alone */
.lens-switch { display: inline-flex; align-items: center; gap: var(--space-half); padding: var(--space-half); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-1); }
.lens-switch__option { padding: var(--space-1) var(--space-3); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-small); text-decoration: none; }
.lens-switch__option[aria-current="true"] { background: var(--surface-3); color: var(--text-1); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 4px; }
.lens-switch .key { margin: 0 var(--space-1); }

/* Pinned block (Calendar in depth): a task pinned to a time. Solid, with a pin mark (a round head
   on a stem), in the order and in the hours; never on the Calendar */
.pin-mark { position: relative; display: inline-block; width: 8px; height: 12px; vertical-align: -1px; }
.pin-mark::before { content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--text-1); }
.pin-mark::after { content: ""; position: absolute; top: 7px; left: 3.25px; width: 1.5px; height: 5px; background: var(--text-1); }
.time-block--pinned { border-style: solid; border-color: var(--text-1); }
.hour-grid__block--pinned { border-color: var(--text-1); background: var(--surface-2); color: var(--text-1); }

/* Sentence preview (Calendar in depth): what Enter will make from the words, as chips, before
   anything exists. The title chip is the widest; a person carries their initial in a circle */
.sentence-preview { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 28px; margin: var(--space-3) 0; }
.sentence-preview__chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-half) var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-full); background: var(--surface-2); color: var(--text-1); font-size: var(--type-small); }
.sentence-preview__chip--title { border-color: var(--text-2); font-weight: var(--weight-medium); }
.sentence-preview__missing, .sentence-preview__hint { color: var(--text-3); font-size: var(--type-small); }

/* A drawn event before it has a title (Calendar in depth): dashed, its time on top, one field */
.calendar__draft { position: absolute; left: 2px; right: 2px; z-index: 5; display: flex; flex-direction: column; gap: var(--space-half); padding: var(--space-half) var(--space-1); border: 1.5px dashed var(--text-1); border-radius: var(--radius-s); background: var(--surface-2); }
.calendar__draft-time { color: var(--text-2); font-family: var(--font-mono); font-size: var(--type-label); }
.calendar__draft-title { min-width: 0; padding: 0; border: 0; background: none; color: var(--text-1); font: inherit; font-size: var(--type-small); outline: none; }

/* Routines (Calendar in depth): the strip of templates on top of the Planner's hours */
.routines { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.routines__label { color: var(--text-2); font-size: var(--type-label); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; }
/* Template chip: a routine waiting to be dragged into a day, its length beside it; dotted like the block it makes */
.template-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-half) var(--space-1) var(--space-half) var(--space-2); border: 1.5px dotted var(--text-2); border-radius: var(--radius-s); background: var(--surface-1); font-size: var(--type-small); cursor: grab; }
.template-chip__length { color: var(--text-3); font-family: var(--font-mono); font-size: var(--type-label); }
.template-chip__remove { padding: 0 var(--space-1); border: 0; background: none; color: var(--text-3); font: inherit; cursor: pointer; }
.template-chip__remove:hover { color: var(--text-1); }
/* Routine block: a routine placed in a day; dotted, where a task is dashed */
.task-block--routine { border-style: dotted; border-width: 2px; }
.planner-slot--routine { border-style: dotted; }

/* Google mark (Calendar in depth): a small G in a square on everything that came from Google */
.g-mark { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border: var(--line-width) solid currentColor; border-radius: var(--radius-s); font-size: 0.75em; font-weight: var(--weight-bold); line-height: 1; vertical-align: 0.1em; }
.google-guests { margin: 0 0 var(--space-2); padding-left: var(--space-4); font-size: var(--type-small); }

/* Sync mark (Calendar in depth): where a Google event stands. A G in a square when Google has it as
   here; a clock (a circle with a hand) while my change waits to go; a ring of two circles when it
   changed in both places; a square with a bar when Google did not take it. Shapes, never colour alone */
.sync-mark { display: inline-flex; align-items: center; gap: var(--space-half); padding: 0 var(--space-1); border: var(--line-width) solid currentColor; border-radius: var(--radius-full); font-size: var(--type-label); font-weight: var(--weight-medium); line-height: 1.4; vertical-align: 0.05em; white-space: nowrap; }
.sync-mark__shape { position: relative; display: inline-block; width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: var(--radius-full); }
.sync-mark--waiting .sync-mark__shape::after { content: ""; position: absolute; left: 2.25px; top: 0.5px; width: 1.5px; height: 3px; background: currentColor; }
.sync-mark--clash .sync-mark__shape { outline: 1.5px solid currentColor; outline-offset: 1.5px; }
.sync-mark--failed { border-radius: var(--radius-s); }
.sync-mark--failed .sync-mark__shape { border-radius: var(--radius-xs); }
.sync-pane { display: grid; gap: var(--space-2); }
.sync-change { display: grid; gap: var(--space-half); padding: var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); font-size: var(--type-small); }
.sync-change--clash { border-color: var(--text-2); }
.sync-change__what { font-weight: var(--weight-medium); }
.google-guards { margin: var(--space-2) 0 0; padding-left: var(--space-4); font-size: var(--type-small); color: var(--text-2); }

/* An invitation not yet answered Yes (Calendar in depth): dashed, like something proposed, not agreed */
.event-block--invitation { border-style: dashed; border-width: 1.5px; background: transparent; }
/* Answer bar: my answer to someone else's invitation. Three buttons side by side; mine is raised
   (pressed) and outlined, so the choice reads without colour */
.answer-bar { display: inline-flex; gap: var(--space-half); padding: var(--space-half); margin-bottom: var(--space-3); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-1); }
.answer-bar__option { padding: var(--space-1) var(--space-4); border: var(--line-width) solid transparent; border-radius: var(--radius-s); background: none; color: var(--text-2); font: inherit; font-size: var(--type-small); cursor: pointer; }
.answer-bar__option:hover { color: var(--text-1); }
.answer-bar__option[aria-pressed="true"] { border-color: var(--text-1); background: var(--surface-3); color: var(--text-1); font-weight: var(--weight-medium); }
.answer-bar__option:disabled { cursor: default; opacity: 0.6; }
.google-new { display: grid; gap: var(--space-3); }

/* Agent face (myPKA): one closed line in the agent's shape, with two eyes; the eyes say the state.
   Rest: eyes closed. Working: a mark runs along the line and the eyes follow it. Thinking: the eyes
   look up at a small cloud. Needs you: the line in the accent colour. People stay a letter in a circle */
.agent-face { flex-shrink: 0; overflow: visible; }
.agent-face__line { fill: var(--surface-2); stroke: var(--text-1); stroke-width: 3; stroke-linejoin: round; }
.agent-face__eye { stroke: var(--text-1); stroke-width: 3; stroke-linecap: round; fill: none; }
.agent-face__pupil, .agent-face__mark { fill: var(--text-1); }
.agent-face__cloud { fill: var(--surface-3); stroke: var(--text-2); stroke-width: 2; }
.agent-face--working .agent-face__eyes { animation: agent-eyes 2.4s ease-in-out infinite; }
@keyframes agent-eyes { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
.agent-face--needs .agent-face__line { stroke: var(--accent); }
@media (prefers-reduced-motion: reduce) { .agent-face--working .agent-face__eyes { animation: none; } }

/* Team card: an agent's face, name and role, one line about the job, what it never does, its state */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); }
.team-card { display: flex; gap: var(--space-3); padding: var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-1); color: var(--text-1); text-decoration: none; }
.team-card:hover { border-color: var(--text-3); }
.team-card__text { display: grid; gap: var(--space-half); font-size: var(--type-small); }
.team-card__name { font-size: var(--type-body); font-weight: var(--weight-medium); }
.team-card__role { color: var(--text-2); font-size: var(--type-small); font-weight: var(--weight-regular); }
.team-card__line { color: var(--text-2); }
.team-card__never { color: var(--text-1); font-style: italic; }
.team-card__state { color: var(--text-3); font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.04em; }
.face-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-2); }
.face-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--type-small); color: var(--text-2); }
.agency { max-width: 960px; margin: 0 auto; padding: var(--space-6) var(--space-5); }
.agent-page { display: flex; gap: var(--space-4); align-items: center; margin: var(--space-4) 0; }
.agent-row { display: grid; grid-template-columns: 100px 1fr; gap: var(--space-2) var(--space-3); margin: 0; font-size: var(--type-small); }
.agent-row dt { color: var(--text-3); }
.agent-row dd { margin: 0; }
[data-modules-off~="agency"] [data-module="agency"] { display: none; }

/* Subagent lane (myPKA): one agent's answer, indented under the message that asked for it, with a
   thin line on its left: the face and state, the task it was given, the answer, then its receipt */
.subagent-lane { display: grid; gap: var(--space-2); max-width: min(640px, 86%); margin-left: var(--space-6); padding: var(--space-1) 0 var(--space-1) var(--space-3); border-left: var(--line-width) solid var(--line); }
.subagent-lane__head { display: flex; align-items: center; gap: var(--space-2); }
.subagent-lane__name { font-weight: var(--weight-medium); }
.subagent-lane__meta { color: var(--text-3); font-size: var(--type-small); }
.subagent-lane__task { margin: 0; color: var(--text-2); font-size: var(--type-small); font-style: italic; }
.subagent-lane .editor__preview { font-size: var(--type-body); }
.subagent-lane .editor__preview p:last-child, .subagent-lane .editor__preview ul:last-child { margin-bottom: 0; }
.subagent-lane--error .editor__preview { color: var(--text-2); }

/* Receipt: what a lane read, its searches and seconds, on a dashed line like a till slip */
.receipt { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding-top: var(--space-1); border-top: var(--line-width) dashed var(--line); color: var(--text-3); font-size: var(--type-small); }
.receipt a { color: var(--text-2); }

/* Confidence: how sure a point is, by shape (sure a filled dot, likely a half, low an open ring) */
.confidence { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-1); border: var(--line-width) solid var(--line); border-radius: var(--radius-full); color: var(--text-2); font-size: var(--type-label); vertical-align: 1px; }
.confidence__mark { width: 8px; height: 8px; border: var(--line-width) solid var(--text-2); border-radius: var(--radius-full); }
.confidence--sure .confidence__mark { background: var(--text-2); }
.confidence--likely .confidence__mark { background: linear-gradient(90deg, var(--text-2) 50%, transparent 50%); }
.confidence--low .confidence__mark { background: transparent; }
.team-picker__item { display: flex; align-items: center; gap: var(--space-2); }
.assistant__who { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: var(--space-2); font-weight: var(--weight-medium); }
[data-modules-off~="agency"] .assistant__who { display: none; }

/* Brief card (myPKA/4): a job an agent can finish. Its number, title and state; the parts as a
   list (each changed in place); what is not sure marked low; the fixed line with a small lock */
.brief-card { display: grid; gap: var(--space-3); max-width: min(600px, 92%); }
.brief-card__head { display: flex; align-items: baseline; gap: var(--space-2); }
.brief-card__code { padding: 0 var(--space-1); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); color: var(--text-2); font-family: var(--font-mono); font-size: var(--type-label); }
.brief-card__title { flex: 1; min-width: 0; }
.brief-card__state { color: var(--text-3); font-size: var(--type-small); white-space: nowrap; }
.brief-card__parts { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-2) var(--space-3); margin: 0; font-size: var(--type-small); }
.brief-card__parts dt { color: var(--text-3); }
.brief-card__parts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.brief-card__text { flex: 1; min-width: 8ch; padding: 0 var(--space-1); border-radius: var(--radius-s); outline: none; white-space: pre-wrap; }
.brief-card__text:hover { background: var(--surface-2); }
.brief-card__text:focus { background: var(--surface-2); outline: var(--line-width) solid var(--text-3); }
.brief-card__text:empty::before { content: 'Nothing'; color: var(--text-3); }
.brief-card__fixed { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding-top: var(--space-2); border-top: var(--line-width) solid var(--line); color: var(--text-2); font-size: var(--type-small); }
.brief-card__lock { width: 8px; height: 6px; margin-top: var(--space-1); border: var(--line-width) solid var(--text-2); border-radius: var(--radius-xs); position: relative; }
.brief-card__lock::before { content: ''; position: absolute; left: 1px; bottom: 5px; width: 4px; height: 4px; border: var(--line-width) solid var(--text-2); border-bottom: 0; border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.brief-card__sources { padding-left: var(--space-1); }
.jobs { display: grid; gap: var(--space-1); max-width: 640px; margin-bottom: var(--space-5); }
.job-row { gap: var(--space-3); align-items: center; }
.brief-card__actions { display: flex; gap: var(--space-2); }
.job-faces { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.job-row .list-row__stack { flex: 1; }

/* Hand-over card (myPKA/5): where a brief went to its lead, in Holista's chat: the job, the lead's
   face with the specialists he brings in, where it stands, Open job */
.handover-card { display: grid; gap: var(--space-3); max-width: min(560px, 90%); }
.handover-card__head { display: flex; align-items: baseline; gap: var(--space-2); }
.handover-card__team { display: flex; align-items: center; gap: var(--space-3); }
.handover-card__who { display: grid; flex: 1; font-size: var(--type-small); }
.handover-card__lead { font-weight: var(--weight-medium); }
.handover-card__specialists { display: inline-flex; align-items: center; gap: var(--space-1); }
.handover-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); border-top: var(--line-width) solid var(--line); }
.handover-card__state { color: var(--text-2); font-size: var(--type-small); }
.chat-bubble__asked { color: var(--text-3); font-size: var(--type-small); }
.chat-bubble__asked::before { content: '↳ '; }

/* A job's page: its lead's chat (only the lead speaks there), then the brief */
.job-page__head { display: flex; align-items: center; gap: var(--space-3); }
.job-chat { display: grid; gap: var(--space-4); max-width: 680px; margin: var(--space-4) 0 var(--space-5); padding-bottom: var(--space-4); border-bottom: var(--line-width) solid var(--line); }
.job-message { display: flex; gap: var(--space-3); align-items: flex-start; }
.job-message__body { display: grid; gap: var(--space-1); min-width: 0; }
.job-message__who { font-weight: var(--weight-medium); font-size: var(--type-small); }
.job-chat__working { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-3); font-size: var(--type-small); }

/* Plan beads (myPKA/6): Larry's six steps on a line. Behind him filled, his step a ring with a dot,
   ahead open; the words under each */
.plan-beads { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-3) 0 var(--space-4); padding: 0; list-style: none; }
.plan-beads__bead { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-3); font-size: var(--type-small); }
.plan-beads__dot { width: 10px; height: 10px; border: var(--line-width) solid var(--text-3); border-radius: var(--radius-full); }
.plan-beads__bead.is-done { color: var(--text-2); }
.plan-beads__bead.is-done .plan-beads__dot { background: var(--text-2); border-color: var(--text-2); }
.plan-beads__bead.is-current { color: var(--text-1); font-weight: var(--weight-medium); }
.plan-beads__bead.is-current .plan-beads__dot { width: 14px; height: 14px; border: 2px solid var(--text-1); background: radial-gradient(circle, var(--text-1) 0 3px, transparent 3.5px); }

/* Lane (myPKA/6): one specialist's work inside a job: face and state, Larry's small brief for it,
   its own process and folder, its answer, its receipt */
.job-lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); max-width: 960px; margin-bottom: var(--space-4); }
.job-lane { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-1); }
.job-lane__head { display: flex; align-items: center; gap: var(--space-2); }
.job-lane__name { font-weight: var(--weight-medium); }
.job-lane__what { margin: 0; font-size: var(--type-small); }
details.job-lane__what summary { cursor: pointer; list-style: none; }
details.job-lane__what[open] summary { display: none; }
.job-lane__where { margin: 0; color: var(--text-3); font-family: var(--font-mono); font-size: var(--type-label); }
.job-lane__answer summary { cursor: pointer; color: var(--text-2); font-size: var(--type-small); }
.job-lane__answer .editor__preview { font-size: var(--type-small); }
.lead-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-width: 960px; margin: 0 0 var(--space-4); color: var(--text-2); font-size: var(--type-small); }
.lead-tools code { padding: 0 var(--space-1); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); font-family: var(--font-mono); font-size: var(--type-label); }
.job-message--me .job-message__who { color: var(--text-2); }
.job-box { margin-top: var(--space-2); }

/* Contract sheet (myPKA/7): an agent's nine parts as short sections, each with a pen; the version
   chip says which version is live. "What … is told" below it, read only, in the mono face */
.version-chip { display: inline-block; padding: 0 var(--space-1); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); color: var(--text-2); font-family: var(--font-mono); font-size: var(--type-label); font-weight: var(--weight-regular); vertical-align: 1px; }
.contract-sheet { display: grid; gap: 0; max-width: 720px; margin: var(--space-4) 0 var(--space-5); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-1); }
.contract-sheet__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: var(--line-width) solid var(--line); }
.contract-sheet__part { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-bottom: var(--line-width) solid var(--line); }
.contract-sheet__part:last-child { border-bottom: 0; }
.contract-sheet__label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.contract-sheet__label h3 { margin: 0; color: var(--text-3); font-size: var(--type-label); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; }
.contract-sheet__pen { padding: 0 var(--space-1); border: var(--line-width) solid transparent; border-radius: var(--radius-s); background: none; color: var(--text-3); cursor: pointer; font-size: var(--type-small); }
.contract-sheet__pen:hover, .contract-sheet__pen:focus-visible { border-color: var(--line); color: var(--text-1); }
.contract-sheet__text { margin: 0; font-size: var(--type-small); }
.contract-sheet__edit { display: grid; gap: var(--space-2); }
.contract-sheet__edit textarea { width: 100%; padding: var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-1); font: inherit; font-size: var(--type-small); resize: vertical; }
.contract-sheet__actions { display: flex; gap: var(--space-2); }
.told { max-width: 720px; margin-bottom: var(--space-5); }
.told__text { margin: var(--space-2) 0 0; padding: var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-1); color: var(--text-2); font-family: var(--font-mono); font-size: var(--type-label); line-height: 1.6; white-space: pre-wrap; }
a.life-tabs__tab { text-decoration: none; }

/* Check row (myPKA/8): one contract check: a mark (pass a filled circle, fail an open triangle, not run
   an open ring), the question, what is expected, why, and the word */
.checks { display: grid; gap: var(--space-3); max-width: 720px; margin: var(--space-4) 0 var(--space-5); }
.checks__head { display: flex; align-items: center; gap: var(--space-2); }
.checks__head .button { margin-left: auto; }
.check-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: var(--line-width) solid var(--line); border-bottom-width: 0; background: var(--surface-1); }
.check-row:first-child { border-radius: var(--radius-m) var(--radius-m) 0 0; }
.check-row:last-child { border-bottom-width: var(--line-width); border-radius: 0 0 var(--radius-m) var(--radius-m); }
.check-row__mark { flex-shrink: 0; width: 12px; height: 12px; margin-top: var(--space-half); border: var(--line-width) solid var(--text-3); border-radius: var(--radius-full); }
.check-row--pass .check-row__mark { background: var(--text-1); border-color: var(--text-1); }
.check-row--fail .check-row__mark { width: 0; height: 0; border: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid var(--text-1); border-radius: 0; }
.check-row__body { display: grid; gap: var(--space-half); flex: 1; min-width: 0; font-size: var(--type-small); }
.check-row__kind { font-weight: var(--weight-medium); }
.check-row__question { color: var(--text-1); }
.check-row__expected { color: var(--text-3); }
.check-row__why { color: var(--text-2); font-style: italic; }
.check-row__word { flex-shrink: 0; font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }
.check-row--fail .check-row__word { color: var(--text-1); font-weight: var(--weight-medium); }
.team-card__warning { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-1); font-size: var(--type-small); }
.team-card__warning-mark { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--text-1); }

/* Tool rule (myPKA/9): one tool on an agent's list with a three-way switch, Allow, Ask, Deny; the
   pressed one raised and outlined, the words always shown (never colour alone) */
.tools { display: grid; gap: var(--space-3); max-width: 760px; margin: var(--space-4) 0 var(--space-5); }
.tool-rule { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: var(--line-width) solid var(--line); }
.tool-rule__text { display: grid; gap: var(--space-half); min-width: 0; font-size: var(--type-small); }
.tool-rule__text code { font-family: var(--font-mono); font-size: var(--type-small); color: var(--text-1); }
.tool-rule__switch { display: inline-flex; flex-shrink: 0; border: var(--line-width) solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.tool-rule__option { padding: var(--space-1) var(--space-3); border: 0; border-right: var(--line-width) solid var(--line); background: none; color: var(--text-3); font: inherit; font-size: var(--type-small); cursor: pointer; }
.tool-rule__option:last-child { border-right: 0; }
.tool-rule__option[aria-checked="true"] { background: var(--surface-3); color: var(--text-1); font-weight: var(--weight-medium); outline: var(--line-width) solid var(--text-2); outline-offset: calc(-1 * var(--line-width)); }
.tool-rule__option--deny[aria-checked="true"] { text-decoration: underline; text-underline-offset: 3px; }
.pins { display: grid; gap: 0; }
.pins .list-row { gap: var(--space-3); }
.pin-form { display: flex; gap: var(--space-2); max-width: 520px; }
.pin-form input { flex: 1; }

/* Gate line (myPKA/9): a refused call, written where the work is read: a lock, then who may not do what, and why */
.gate-line { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-1) var(--space-2); border: var(--line-width) dashed var(--line); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-small); }

/* The job's working document (myPKA/10): the state line, the page (the Editor), and the Version list beside it */
.job-state { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-3) 0; color: var(--text-2); font-size: var(--type-small); }
.job-state b { color: var(--text-1); font-weight: var(--weight-medium); }
.job-doc { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--space-4); max-width: 1000px; margin-bottom: var(--space-5); }
.job-doc__page { padding: var(--space-3) var(--space-4); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-1); }
.job-doc__older { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); padding: var(--space-2); border: var(--line-width) dashed var(--line); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-small); }
.job-doc__edit { display: grid; gap: var(--space-2); }
.job-doc__edit .editor__body { min-height: 320px; }
@media (max-width: 760px) { .job-doc { grid-template-columns: 1fr; } }

/* Version list (myPKA/10): every save, newest first: the author's face or my letter, the number, what changed */
.version-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: var(--line-width) solid var(--line); border-radius: var(--radius-m); }
.version-list__item { border-bottom: var(--line-width) solid var(--line); }
.version-list__item:last-child { border-bottom: 0; }
.version-list__button { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2); border: 0; background: none; color: var(--text-2); font: inherit; text-align: left; cursor: pointer; }
.version-list__button:hover { background: var(--surface-2); }
.version-list__item.is-open .version-list__button { background: var(--surface-2); color: var(--text-1); border-left: 2px solid var(--text-1); }
.version-list__text { display: grid; min-width: 0; font-size: var(--type-small); }
.version-list__n { font-weight: var(--weight-medium); }

/* A job's document line by line (myPKA/11): each line with a speech bubble on hover or focus, its threads under it */
.doc-lines { display: grid; gap: var(--space-half); }
.doc-lines__head { margin: var(--space-3) 0 var(--space-1); font-size: var(--type-body); font-weight: var(--weight-medium); }
.doc-line { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-half) var(--space-1); border-radius: var(--radius-s); }
.doc-line:hover, .doc-line:focus-within { background: var(--surface-2); }
.doc-line__text { flex: 1; min-width: 0; }
.doc-line--item .doc-line__text { position: relative; padding-left: var(--space-4); }
.doc-line__bullet { position: absolute; left: var(--space-1); top: 0.6em; width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--text-2); }
.doc-line__comment { flex-shrink: 0; width: 24px; height: 22px; padding: 0; border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-1); cursor: pointer; opacity: 0; }
.doc-line:hover .doc-line__comment, .doc-line__comment:focus-visible { opacity: 1; }
.doc-line__comment span { display: block; width: 12px; height: 9px; margin: 0 auto; border: var(--line-width) solid var(--text-2); border-radius: var(--radius-xs); position: relative; }
.doc-line__comment span::after { content: ''; position: absolute; left: 2px; bottom: -4px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid var(--text-2); }

/* Comment thread (myPKA/11): my comment with my letter, the answer with the agent's face, where Holista
   routed it, "is answering…" while it works, its receipt */
.comment-thread { display: grid; gap: var(--space-2); margin: var(--space-1) 0 var(--space-2) var(--space-5); padding: var(--space-2) var(--space-3); border-left: var(--line-width) solid var(--line); }
.comment { display: flex; align-items: flex-start; gap: var(--space-2); }
.comment__body { display: grid; gap: var(--space-half); min-width: 0; font-size: var(--type-small); }
.comment__body .editor__preview { font-size: var(--type-small); }
.comment__who { font-weight: var(--weight-medium); }
.comment__routed { color: var(--text-3); font-size: var(--type-label); }
.comment__working { color: var(--text-3); font-style: italic; }
.comment-form { margin: var(--space-1) 0 var(--space-2) var(--space-5); }
.comment-form textarea { width: 100%; padding: var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-1); font: inherit; font-size: var(--type-small); resize: vertical; }
/* My letter beside agents' faces (a comment, a job's chat, a version): the size of a face there */
.comment .person-card__mark, .version-list .person-card__mark { flex-shrink: 0; width: 24px; height: 24px; font-size: var(--type-label); }
.job-message .person-card__mark { flex-shrink: 0; width: 28px; height: 28px; font-size: var(--type-small); }

/* Decision card (myPKA/12): one choice a job needs from me: a diamond mark, the question, the options
   (the recommended one says so in words), why, who decides; once decided, the choice pressed and said */
.decision-card { display: grid; gap: var(--space-2); max-width: min(560px, 92%); }
.decision-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: var(--type-small); }
.decision-card__kind { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--type-label); }
.decision-card__mark { width: 8px; height: 8px; border: var(--line-width) solid var(--text-1); transform: rotate(45deg); }
.decision-card--decided .decision-card__mark { background: var(--text-1); }
.decision-card__state { margin-left: auto; color: var(--text-3); }
.decision-card__question { font-size: var(--type-body); }
.decision-card__options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.decision-card__option { text-align: left; justify-content: flex-start; }
.decision-card__option[aria-pressed="true"] { background: var(--surface-3); color: var(--text-1); outline: var(--line-width) solid var(--text-1); }
.decision-card__option:disabled:not([aria-pressed="true"]) { opacity: 0.55; }
.decision-card__rec { margin-left: var(--space-1); padding: 0 var(--space-1); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-label); }
.decision-card__why { margin: 0; color: var(--text-2); font-size: var(--type-small); }
.decision-card__answer { margin: 0; font-size: var(--type-small); }
.decision-card__change { display: grid; gap: var(--space-2); }
.decision-card__change textarea { width: 100%; padding: var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-1); font: inherit; font-size: var(--type-small); }
.needs { display: grid; gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); }

/* Verdict (myPKA/13): Vera's word with a mark, never colour alone: APPROVED a filled circle,
   CONDITIONAL a half circle, BLOCKED a filled square */
.verdict { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); color: var(--text-1); font-size: var(--type-label); font-weight: var(--weight-medium); letter-spacing: 0.04em; white-space: nowrap; }
.verdict__mark { width: 9px; height: 9px; border: var(--line-width) solid var(--text-1); border-radius: var(--radius-full); }
.verdict--approved .verdict__mark { background: var(--text-1); }
.verdict--conditional .verdict__mark { background: linear-gradient(90deg, var(--text-1) 50%, transparent 50%); }
.verdict--blocked .verdict__mark { border-radius: var(--radius-xs); background: var(--text-1); }
.verdict--blocked { border-color: var(--text-1); }
.review { display: grid; gap: var(--space-3); max-width: 720px; margin: var(--space-4) 0 var(--space-5); padding: var(--space-3) var(--space-4); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-1); }
.review__head { display: flex; align-items: center; gap: var(--space-3); }
.review__head > .verdict, .review__working { margin-left: auto; }
.review__who { font-weight: var(--weight-medium); }
.review__working { color: var(--text-3); font-style: italic; font-size: var(--type-small); }
.review__against, .review__summary { margin: 0; font-size: var(--type-small); }
.findings { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.finding { display: flex; gap: var(--space-3); padding: var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); font-size: var(--type-small); }
.finding__severity { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; min-width: 76px; font-size: var(--type-label); font-weight: var(--weight-medium); letter-spacing: 0.04em; }
.finding__mark { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--text-1); }
.finding--medium .finding__mark { border-bottom-color: transparent; border: var(--line-width) solid var(--text-1); width: 8px; height: 8px; }
.finding--low .finding__mark { border: var(--line-width) solid var(--text-3); width: 8px; height: 8px; border-radius: var(--radius-full); }
.finding__body { display: grid; gap: var(--space-half); }
.finding__fix { color: var(--text-2); }
.job-row .verdict { flex-shrink: 0; }
.life-tabs__tab .verdict { margin-left: var(--space-1); }

/* Probability chip (myPKA/14): Jev's certainty as a number and a word, sure (a filled circle, at or above
   his threshold) or not sure (an open ring); the decider switch on a decision; why a decision is not for Jev */
.probability { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-full); color: var(--text-1); font-family: var(--font-mono); font-size: var(--type-label); white-space: nowrap; }
.probability__mark { width: 8px; height: 8px; border: var(--line-width) solid var(--text-1); border-radius: var(--radius-full); }
.probability--sure .probability__mark { background: var(--text-1); }
.decision-card__decider { display: flex; align-items: center; gap: var(--space-2); }
.decision-card__jev { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; color: var(--text-2); font-size: var(--type-small); }

/* Deliverable chip (myPKA/15): where a job's result went in my app: a note (a page mark) or a task (a circle) */
.deliverable-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-half) var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-full); color: var(--text-1); font-size: var(--type-small); text-decoration: none; }
.deliverable-chip:hover { border-color: var(--text-3); }
.deliverable-chip__mark { width: 8px; height: 10px; border: var(--line-width) solid var(--text-1); border-radius: var(--radius-xs); }
.deliverable-chip--task .deliverable-chip__mark { width: 9px; height: 9px; border-radius: var(--radius-full); }
.deliverable-chip__kind { color: var(--text-3); font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.04em; }
.results { display: grid; gap: var(--space-2); max-width: 1000px; margin: var(--space-3) 0; padding: var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); }
.results__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.results__title { font-weight: var(--weight-medium); }
.results__drafts { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.results__draft { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--type-small); }
/* Made by (myPKA/15): above the title of a note the agency delivered */
.made-by { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 calc(-1 * var(--space-2)); color: var(--text-3); font-size: var(--type-small); }
.made-by__mark { width: 7px; height: 7px; border: var(--line-width) solid var(--text-3); transform: rotate(45deg); }
/* myPKA/15: with "Hand to the agency" the bar can be full: buttons keep their words on one line, the bar wraps */
.editor__bar { flex-wrap: wrap; row-gap: var(--space-1); }
.editor__bar .button { white-space: nowrap; }

/* Synced block (myPKA/16): a guideline embedded in a contract: a double line on its left, "Synced from
   Knowledge" with its version, its words; no pen (it is edited only in its home) */
.synced-block { display: grid; gap: var(--space-half); margin: var(--space-1) 0; padding: var(--space-1) var(--space-2); border-left: 3px double var(--text-2); background: var(--surface-2); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.synced-block__head { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); color: var(--text-3); font-size: var(--type-label); }
.synced-block__mark { width: 9px; height: 9px; border: var(--line-width) solid var(--text-2); border-radius: var(--radius-full); outline: var(--line-width) solid var(--text-3); outline-offset: 1px; }
.synced-block__body { color: var(--text-1); }
.synced-block--gone { color: var(--text-3); font-style: italic; }
.contract-sheet__embed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.contract-sheet__embed select { padding: var(--space-1) var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-1); font: inherit; font-size: var(--type-small); }
.knowledge { display: grid; gap: var(--space-3); max-width: 720px; margin-bottom: var(--space-5); }
.guideline { display: grid; gap: var(--space-2); padding: var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-1); }
.guideline.is-open { outline: var(--line-width) solid var(--text-2); }
.guideline__head { display: flex; align-items: center; gap: var(--space-2); }
.guideline__head .button { margin-left: auto; }
.guideline__body { margin: 0; font-size: var(--type-small); }
.guideline__edit, .guideline-new { display: grid; gap: var(--space-2); }
.guideline__edit textarea, .guideline-new textarea { width: 100%; padding: var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-1); font: inherit; font-size: var(--type-small); }
/* What a step read (myPKA/17): the Receipt's second line; a source read as data says so, with a square mark */
.receipt--reads { border-top: 0; padding-top: 0; }
.receipt__data { display: inline-flex; align-items: center; gap: var(--space-half); padding: 0 var(--space-1); border: var(--line-width) dashed var(--text-2); border-radius: var(--radius-s); color: var(--text-1); font-size: var(--type-label); }
.receipt__data-mark { width: 6px; height: 6px; border: var(--line-width) solid var(--text-1); }

/* Review list (myPKA/18): knowledge nobody read for 90 days: an hourglass-like mark (two triangles), its
   title and version, how long unread, and Keep, Supersede, Retire */
.review-list { display: grid; gap: 0; border: var(--line-width) dashed var(--line); border-radius: var(--radius-m); }
.review-list__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: var(--line-width) dashed var(--line); }
.review-list__row:last-of-type { border-bottom: 0; }
.review-list__mark { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--text-2); position: relative; }
.review-list__mark::after { content: ''; position: absolute; left: -5px; top: -1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid var(--text-2); transform: translateY(6px); }
.review-list__text { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; font-size: var(--type-small); }
.review-list__actions { display: inline-flex; gap: var(--space-1); }
.review-list__supersede { padding: var(--space-2) var(--space-3); }
.guideline--gone { opacity: 0.7; }
.guideline__state { color: var(--text-3); font-size: var(--type-small); }
.knowledge__old summary { cursor: pointer; color: var(--text-2); font-size: var(--type-small); }
.knowledge__old .guideline { margin-top: var(--space-2); }
.guideline-new select, .review-list__supersede select { padding: var(--space-1) var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-1); font: inherit; font-size: var(--type-small); }

/* Job log (myPKA/19): Larry's short log at close: Decided, Realigned (my words, quoted), Open, with counts */
.job-log { display: grid; gap: var(--space-3); max-width: 720px; margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border: var(--line-width) solid var(--line); border-left: 3px solid var(--text-1); border-radius: var(--radius-m); background: var(--surface-1); }
.job-log__head { display: flex; align-items: center; gap: var(--space-2); }
.job-log__group ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); font-size: var(--type-small); }
.job-log__label { margin: 0; font-size: var(--type-label); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }
.job-log__n { display: inline-block; min-width: 18px; padding: 0 var(--space-1); border: var(--line-width) solid var(--line); border-radius: var(--radius-full); text-align: center; color: var(--text-1); }
.job-log q { font-style: italic; }
.journal { display: grid; gap: var(--space-3); max-width: 720px; margin: var(--space-4) 0 var(--space-5); }
.lesson { display: grid; gap: var(--space-1); padding: var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-1); }
.lesson__text { margin: 0; font-weight: var(--weight-medium); }
.lesson__not { margin: 0; color: var(--text-2); font-size: var(--type-small); }

/* Hire steps (myPKA/20): Nolan's eight steps as beads, the hire's parts below; a candidate's card is dashed */
.hire { display: grid; gap: var(--space-3); max-width: 760px; margin-bottom: var(--space-5); }
.hire__part { display: grid; gap: var(--space-1); padding: var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-1); }
.hire__part p { margin: 0; font-size: var(--type-small); }
.hire__face { display: flex; align-items: center; gap: var(--space-2); }
.hire__nohire { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--type-small); color: var(--text-2); }
.team-card--candidate { border-style: dashed; border-width: 2px; }
.no-hires { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
.hire-new { display: flex; gap: var(--space-2); max-width: 720px; margin-bottom: var(--space-5); }
.hire-new input { flex: 1; }

/* Connection (myPKA/21): a service Mack wired in: a plug mark, the key (a field once, then "Key stored" with a
   lock), Read and Write out as two switches, the log of every use */
.connections { display: grid; gap: var(--space-3); max-width: 760px; margin: var(--space-4) 0 var(--space-5); }
.connection { display: grid; gap: var(--space-2); padding: var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-1); }
.connection__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.connection__mark { width: 12px; height: 8px; border: var(--line-width) solid var(--text-1); border-radius: var(--radius-xs) var(--radius-xs) var(--radius-s) var(--radius-s); position: relative; }
.connection__mark::before { content: ''; position: absolute; left: 2px; top: -5px; width: 2px; height: 4px; background: var(--text-1); box-shadow: 4px 0 0 var(--text-1); }
.connection__key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--type-small); }
.connection__keyform { display: flex; gap: var(--space-2); }
.connection__keyform input { flex: 1; padding: var(--space-1) var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-1); font: inherit; }
.connection__switches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.connection__log summary { cursor: pointer; color: var(--text-2); font-size: var(--type-small); }
.connection__log ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); font-size: var(--type-small); }

/* An import's preview (myPKA/22): a table, a match (a filled circle) or new (an open ring) in words; the
   migration card shows its exact SQL */
.imports { display: grid; gap: var(--space-3); max-width: 900px; margin: var(--space-4) 0 var(--space-5); }
.import { display: grid; gap: var(--space-2); padding: var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-1); }
.import__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.import__head .button { margin-left: auto; }
.import__table { width: 100%; border-collapse: collapse; font-size: var(--type-small); }
.import__table th { padding: var(--space-1) var(--space-2); border-bottom: var(--line-width) solid var(--line); color: var(--text-3); font-weight: var(--weight-medium); text-align: left; }
.import__table td { padding: var(--space-1) var(--space-2); border-bottom: var(--line-width) solid var(--line); }
.import__status { display: inline-flex; align-items: center; gap: var(--space-1); }
.import__mark { width: 8px; height: 8px; border: var(--line-width) solid var(--text-1); border-radius: var(--radius-full); }
.import__row--match .import__mark { background: var(--text-1); }
.import__row--skipped { color: var(--text-3); }
.migration-card__sql { margin: 0; padding: var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); font-family: var(--font-mono); font-size: var(--type-label); white-space: pre-wrap; }

/* Your health dashboard (advanced/health): the Health page. Health 1: the measures, a number typed by
   hand, the day rows with their origin. Health 2: imports as rows, and the foot that says how old the numbers are. */
[data-modules-off~="health"] [data-module="health"]:not(input) { display: none; } /* never its own switch in Settings */
.health { max-width: 880px; margin: 0 auto; padding: var(--space-6) var(--space-5); }
.health__section { margin-bottom: var(--space-6); }
.health__heading { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: var(--line-width) solid var(--line); font-size: var(--type-subheading); font-weight: var(--weight-bold); }
.health-type { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.health-type .field { min-width: 160px; }
.health-type__unit { min-width: 48px; padding-bottom: var(--space-2); color: var(--text-2); font-size: var(--type-small); }
.health-day__day { width: 96px; color: var(--text-2); font-size: var(--type-small); }
.health-day__value { font-variant-numeric: tabular-nums; }
.health__hint { margin: 0 0 var(--space-3); color: var(--text-2); font-size: var(--type-small); }
.health-import { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--type-small); }
.health-import__result { color: var(--text-1); }
.health-import-row__when { width: 150px; flex: none; color: var(--text-2); font-size: var(--type-small); }
.health-import-row .list-row__stack { flex: 1; display: grid; gap: var(--space-half); min-width: 0; }
.health__foot { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: var(--line-width) solid var(--line); color: var(--text-2); font-size: var(--type-small); }

/* Dashboard kit (public/dashboard-kit.js), for every module that draws a chart; first used by Your health
   dashboard (Health 3). A status is always its word and its shape, good a circle, watch a diamond, bad a
   triangle, so it reads without colour. Charts in plain SVG and CSS. */
.status-mark { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-1); font-size: var(--type-small); white-space: nowrap; }
.status-mark__shape { flex: none; display: inline-block; width: 10px; height: 10px; box-sizing: border-box; }
.status-mark--good, .day-cal__day--good { --status: var(--status-good); }
.status-mark--watch, .day-cal__day--watch { --status: var(--status-watch); }
.status-mark--bad, .day-cal__day--bad { --status: var(--status-bad); }
.status-mark--good .status-mark__shape, .day-cal__day--good .status-mark__shape { border-radius: var(--radius-full); background: var(--status); }
.status-mark--watch .status-mark__shape, .day-cal__day--watch .status-mark__shape { width: 8px; height: 8px; margin: var(--space-hair); transform: rotate(45deg); background: var(--status); }
.status-mark--bad .status-mark__shape, .day-cal__day--bad .status-mark__shape { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--status); }
.status-mark__word { font-weight: var(--weight-medium); }
.status-mark--bad .status-mark__word { font-weight: var(--weight-bold); }
.status-mark__why { color: var(--text-2); white-space: normal; }

.line-band { margin: 0; }
.line-band__chart { display: block; width: 100%; height: auto; overflow: visible; }
.line-band__band { fill: var(--surface-3); }
.line-band__usual { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 4; }
.line-band__line { fill: none; stroke: var(--text-1); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.line-band__end, .line-band__dot { fill: var(--text-1); }
.line-band--small .line-band__value { font-size: var(--type-small); }
.line-band__value { fill: var(--text-1); font-size: var(--type-label); font-weight: var(--weight-medium); }
.line-band__day { fill: var(--text-3); font-size: var(--type-label); }
.line-band__caption { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); color: var(--text-2); font-size: var(--type-small); }
.line-band__key--band { display: inline-block; width: 16px; height: 10px; border-radius: var(--radius-s); background: var(--surface-3); border-top: var(--line-width) dashed var(--text-3); }

.bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(36px, 1fr); gap: var(--space-2); align-items: end; }
.bars__item { display: grid; grid-template-rows: auto 96px auto; gap: var(--space-1); justify-items: center; min-width: 0; }
.bars__value { color: var(--text-1); font-size: var(--type-label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bars__track { display: flex; align-items: flex-end; width: 100%; height: 100%; border-bottom: var(--line-width) solid var(--line-strong); }
.bars__fill { display: block; width: 100%; border-radius: var(--radius-s) var(--radius-s) 0 0; background: var(--data-blue); }
.bars__fill--none { height: 0; }
.bars__label { color: var(--text-3); font-size: var(--type-label); white-space: nowrap; }

.day-cal { display: inline-grid; gap: var(--space-1); }
.day-cal__weekdays, .day-cal__days { display: grid; grid-template-columns: repeat(7, 22px); gap: var(--space-1); }
.day-cal__weekdays span { color: var(--text-3); font-size: var(--type-label); text-align: center; }
.day-cal__day { display: grid; place-content: center; width: 22px; height: 22px; box-sizing: border-box; border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-1); }
.day-cal__day--none { border-style: dashed; background: none; }
.day-cal__day--outside { border: 0; background: none; }

/* The Health page (Health 4): Focus now as Focus rows, four area cards, a page per area. Health 5: Trends,
   each with the weeks it rests on as Bars. */
.focus-list { display: grid; border-top: var(--line-width) solid var(--line); }
.focus-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3); border-bottom: var(--line-width) solid var(--line); color: inherit; text-decoration: none; }
.focus-row:hover { background: var(--surface-2); }
.focus-row__area { font-weight: var(--weight-bold); }
.focus-row__status .status-mark { white-space: normal; flex-wrap: wrap; }
.focus-row__go { color: var(--text-3); font-size: var(--type-body-large); }
.area-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.area-card { display: grid; gap: var(--space-2); align-content: start; color: inherit; text-decoration: none; }
.area-card:hover { border-color: var(--line-strong); background: var(--surface-2); }
.area-card .card__title { margin: 0; }
.area-card__why { color: var(--text-2); font-size: var(--type-small); }
.health__back { display: inline-block; margin-bottom: var(--space-3); color: var(--text-2); font-size: var(--type-small); text-decoration: none; }
.health__back:hover { color: var(--text-1); }
.health-area__status { margin: 0 0 var(--space-2); }
.health-area__sentence { margin: 0 0 var(--space-5); color: var(--text-2); max-width: 64ch; }
.health--area .day-cal { margin-top: var(--space-1); }
.health-trends { display: grid; gap: var(--space-4); }
.health-trend { padding-bottom: var(--space-4); border-bottom: var(--line-width) solid var(--line); }
.health-trend__head { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-1); }
.health-trend__name { font-weight: var(--weight-bold); }
.health-trend__way { color: var(--text-1); font-size: var(--type-small); font-weight: var(--weight-medium); }
.health-trend__way--none { color: var(--text-3); font-weight: var(--weight-regular); }
.health-trend__why { margin: 0 0 var(--space-3); color: var(--text-2); font-size: var(--type-small); }
.health-trend .bars { max-width: 560px; }
.health-journal__composer { margin-bottom: var(--space-3); }
.health-journal__row { color: inherit; text-decoration: none; }
.health-journal__value { display: inline-flex; align-items: center; gap: var(--space-1); width: 130px; flex: none; font-variant-numeric: tabular-nums; }
.health-journal__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-read { color: inherit; text-decoration: none; }
.health-read .list-row__stack { flex: 1; display: grid; gap: var(--space-half); min-width: 0; }

/* Always yours (myPKA/24): the floor in Settings › Agency, locked rows; each agent's four kinds of action */
.floor-row__word { color: var(--text-1); font-size: var(--type-small); font-weight: var(--weight-medium); white-space: nowrap; }
.agent-perms { display: grid; grid-template-columns: 140px repeat(4, minmax(0, 1fr)); gap: var(--space-2); align-items: end; padding: var(--space-2) 0; border-bottom: var(--line-width) solid var(--line); }
.agent-perms__field { font-size: var(--type-label); }
@media (max-width: 760px) { .agent-perms { grid-template-columns: 1fr 1fr; } }
.decision-card__draft summary { cursor: pointer; color: var(--text-2); font-size: var(--type-small); }
.decision-card__draft pre { margin: var(--space-1) 0 0; padding: var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); font-family: var(--font-mono); font-size: var(--type-label); white-space: pre-wrap; }

/* Job timeline (myPKA/25): every step of a job in time, each with the face (or my letter) of who did it,
   on one line down the left */
.job-timeline { display: grid; gap: 0; max-width: 820px; margin: var(--space-4) 0 var(--space-5); padding: 0; list-style: none; border-left: var(--line-width) solid var(--line); }
.job-timeline__row { display: grid; grid-template-columns: 110px 28px minmax(0, 1fr); gap: var(--space-2); align-items: start; padding: var(--space-2) var(--space-3); }
.job-timeline__time { color: var(--text-3); font-size: var(--type-label); font-family: var(--font-mono); padding-top: var(--space-1); }
.job-timeline__body { display: grid; gap: var(--space-half); font-size: var(--type-small); }
.job-timeline__who { font-weight: var(--weight-medium); }
.job-timeline__text { color: var(--text-2); }
.job-timeline__row--decided .job-timeline__text, .job-timeline__row--verdict .job-timeline__text, .job-timeline__row--log .job-timeline__text { color: var(--text-1); }
.job-timeline .person-card__mark { width: 24px; height: 24px; font-size: var(--type-label); }

/* Google account row (Mail 1): one account, its health as a word and a shape, a switch per permission. */
.google-account { align-items: flex-start; }
.google-account .list-row__stack > * { white-space: normal; overflow: visible; }
.google-account__health { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--type-small); color: var(--text-1); }
.google-account__mark { flex: none; display: inline-block; width: 8px; height: 8px; box-sizing: border-box; }
.google-account__health--connected .google-account__mark { border-radius: var(--radius-full); background: currentColor; }
.google-account__health--signin .google-account__mark { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid currentColor; }
.google-account__health--gmail_off .google-account__mark { background: currentColor; transform: rotate(45deg); width: 7px; height: 7px; }
.google-account__health--unreachable .google-account__mark { border-radius: var(--radius-full); border: var(--line-width) solid currentColor; }
.google-account__health--unchecked { color: var(--text-2); }
.google-account__health--unchecked .google-account__mark { border-radius: var(--radius-full); border: var(--line-width) dashed currentColor; }
.google-account__switches { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.google-account__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-1); }
.google-account__uses { display: grid; gap: var(--space-half); margin: 0; padding: var(--space-2) 0 0 var(--space-4); font-size: var(--type-small); }
.google-account__use--failed { color: var(--text-1); }
[data-modules-off~="mail"] [data-module="mail"] { display: none; }

/* Mail row (Mail 2): one conversation, unread told by a filled dot and weight, never by colour alone. */
.mail-rows { display: grid; border-top: var(--line-width) solid var(--line); }
.mail-row { display: grid; grid-template-columns: 12px minmax(120px, 200px) 1fr auto; align-items: baseline; gap: var(--space-3); padding: var(--space-2) var(--space-2); border-bottom: var(--line-width) solid var(--line); color: var(--text-2); font-size: var(--type-small); }
.mail-row__mark { width: 8px; height: 8px; align-self: center; }
.mail-row--unread .mail-row__mark { border-radius: var(--radius-full); background: var(--text-1); }
.mail-row__from { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-1); }
.mail-row--unread .mail-row__from, .mail-row--unread .mail-row__subject { font-weight: var(--weight-bold); }
.mail-row__count { color: var(--text-2); font-weight: var(--weight-regular); }
.mail-row__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mail-row__subject { color: var(--text-1); }
.mail-row__label { padding: 0 var(--space-1); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); font-size: var(--type-label); }
.mail-row__time { white-space: nowrap; }
.mail-import { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.mail-import__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.mail-labels { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mail-labels__row { display: inline-flex; gap: var(--space-2); padding: var(--space-half) var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); font-size: var(--type-small); }
.mail-labels__n { color: var(--text-2); }

/* Count check (Mail 3): Gmail's count next to mine, per label; the state is a shape and a word. */
.count-check { display: grid; max-width: 640px; border-top: var(--line-width) solid var(--line); }
.count-check__row { display: grid; grid-template-columns: 1fr 110px 110px 120px; gap: var(--space-3); align-items: center; padding: var(--space-1) var(--space-2); border-bottom: var(--line-width) solid var(--line); font-size: var(--type-small); }
.count-check__row--total { font-weight: var(--weight-bold); }
.count-check__n { color: var(--text-2); font-variant-numeric: tabular-nums; }
.count-check__word { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-1); }
.count-check__mark { flex: none; width: 8px; height: 8px; box-sizing: border-box; }
.count-check__row--equal .count-check__mark { border-radius: var(--radius-full); background: currentColor; }
.count-check__row--fill .count-check__mark { border-radius: var(--radius-full); border: var(--line-width) solid currentColor; }
.count-check__row--extra .count-check__mark { border: var(--line-width) solid currentColor; }
.mail-attachments { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Sync line (Mail 4): whether Mail is live with Gmail, as a shape and words. */
.sync-line { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; padding-top: var(--space-2); border-top: var(--line-width) solid var(--line); color: var(--text-2); font-size: var(--type-small); }
.sync-line__mark { flex: none; width: 8px; height: 8px; box-sizing: border-box; color: var(--text-1); }
.sync-line--live .sync-line__mark { border-radius: var(--radius-full); background: currentColor; }
.sync-line--waiting .sync-line__mark { border-radius: var(--radius-full); border: var(--line-width) solid currentColor; }
.sync-line--error { color: var(--text-1); }
.sync-line--error .sync-line__mark { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid currentColor; }
.mail-row--actions { grid-template-columns: 12px minmax(120px, 200px) 1fr auto auto; }
.mail-row__actions { display: inline-flex; gap: var(--space-1); }
.mail-row__star { display: inline-block; width: 10px; height: 10px; background: var(--text-1); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.mail-row__waiting { display: inline-block; width: 7px; height: 7px; border: var(--line-width) solid var(--text-1); border-radius: var(--radius-full); }
.mail-outbox, .mail-merges { display: grid; gap: var(--space-half); margin: 0; padding-left: var(--space-4); font-size: var(--type-small); }
.mail-outbox__row--failed { font-weight: var(--weight-bold); }

/* Split tabs (Mail 5): six splits with counts; the open one has a line under it, not a colour. */
.split-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-3) 0 var(--space-2); border-bottom: var(--line-width) solid var(--line); }
.split-tabs__tab { padding: var(--space-1) 0 var(--space-2); border-bottom: 2px solid transparent; color: var(--text-2); text-decoration: none; font-size: var(--type-small); }
.split-tabs__tab[aria-current="page"] { border-bottom-color: var(--text-1); color: var(--text-1); font-weight: var(--weight-bold); }
.split-tabs__n { color: var(--text-2); font-weight: var(--weight-regular); }
.mail-why { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); font-size: var(--type-small); color: var(--text-1); }
.mail-why__mark { flex: none; width: 7px; height: 7px; border: var(--line-width) solid currentColor; }
.mail-row__account { display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); font-size: var(--type-label); color: var(--text-2); vertical-align: 1px; }
.mail-row__link { color: inherit; text-decoration: none; }
.mail-row__link:hover, .mail-row__link:focus-visible { text-decoration: underline; }
.mail-app { display: grid; gap: var(--space-4); }
.mail-app--open { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .mail-app--open { grid-template-columns: 1fr; } }
.mail-app__open { border-left: var(--line-width) solid var(--line); padding-left: var(--space-4); min-width: 0; }
.mail-app--open .mail-row { grid-template-columns: 12px minmax(80px, 140px) 1fr auto; }
.mail-conversation__subject { margin: 0 0 var(--space-3); font-size: var(--type-heading); }
.mail-message { padding: var(--space-3) 0; border-top: var(--line-width) solid var(--line); }
.mail-message__head { margin: 0; }
.mail-message__from { font-weight: var(--weight-bold); }
.mail-message__text { margin-top: var(--space-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--type-small); line-height: 1.5; }
.mail-message__files { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Key hint (Mail 6): a command with its key; with a time, a shape and the number. */
.key-hint { display: flex; align-items: center; gap: var(--space-3); font-size: var(--type-small); }
.key-hint__label { flex: 1; color: var(--text-1); }
.key-hint__keys { display: inline-flex; gap: var(--space-1); align-items: center; }
.key-hint__ms { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-2); font-variant-numeric: tabular-nums; }
.key-hint__mark { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--text-2); }
.key-hint__ms--slow { color: var(--text-1); font-weight: var(--weight-bold); }
.key-hint__ms--slow .key-hint__mark { width: 0; height: 0; border-radius: 0; background: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 8px solid currentColor; }
.mail-row.is-selected { box-shadow: inset 2px 0 0 var(--text-1); background: var(--surface-2); }
.mail-row__remind { font-size: var(--type-label); color: var(--text-1); }
.mail-app__keys { margin: 0 0 var(--space-1); }
.mail-commands { width: min(480px, 92vw); padding: var(--space-3); }
.mail-commands__find { width: 100%; box-sizing: border-box; padding: var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-1); color: var(--text-1); font: inherit; }
.mail-commands__list { display: grid; gap: var(--space-half); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.mail-commands__row { padding: var(--space-1) var(--space-2); border-radius: var(--radius-s); cursor: pointer; }
.mail-commands__row[aria-selected="true"] { background: var(--surface-2); }
.mail-times__list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.mail-remind__times { display: grid; gap: var(--space-2); }

/* Sealed frame (Mail 7): a mail's HTML on its own paper, scripts never run, outside images held back
   (an open square) or loaded for this sender (a filled square); links that lie marked by a triangle. */
.sealed-frame { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.sealed-frame__frame { width: 100%; height: 200px; border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--mail-paper); display: block; }
.sealed-frame__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--type-small); color: var(--text-2); }
.sealed-frame__mark { flex: none; width: 7px; height: 7px; border: var(--line-width) solid currentColor; }
.sealed-frame__bar--loaded .sealed-frame__mark { background: currentColor; }
.sealed-frame__lies { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--type-small); color: var(--text-1); }
.sealed-frame__lie { display: flex; align-items: baseline; gap: var(--space-2); overflow-wrap: anywhere; }
.sealed-frame__warn { flex: none; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid currentColor; }
.mail-images__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--line-width) solid var(--line); }

/* Mail composer (Mail 8): under the conversation; to, Cc, subject, the words, Send and Send later. */
.mail-composer { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-1); }
.mail-composer[hidden] { display: none; }
.mail-composer__field { display: grid; grid-template-columns: 4.5em 1fr; align-items: center; gap: var(--space-2); font-size: var(--type-small); color: var(--text-2); }
.mail-composer__field input { width: 100%; box-sizing: border-box; }
.mail-composer__body { width: 100%; box-sizing: border-box; min-height: 120px; padding: var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-0); color: var(--text-1); font: inherit; line-height: 1.5; resize: vertical; }
.mail-composer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mail-composer__hint { margin-left: auto; }
.mail-composer__notice { margin: 0; font-size: var(--type-small); color: var(--text-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mail-composer__notice[hidden] { display: none; }

/* Send bar (Mail 8): where a mail I wrote is. An open ring waits (Undo), an open square waits for later,
   a filled circle is sent, a triangle did not go. */
.mail-sends { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.send-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--type-small); color: var(--text-1); }
.send-bar__mark { flex: none; width: 8px; height: 8px; border: var(--line-width) solid currentColor; border-radius: var(--radius-full); }
.send-bar--later .send-bar__mark { border-radius: 0; }
.send-bar--sent { color: var(--text-2); }
.send-bar--sent .send-bar__mark { background: currentColor; }
.send-bar--failed .send-bar__mark { width: 0; height: 0; border: none; border-radius: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid currentColor; }

/* Opened chip (Mail 9): a mail I sent with a read confirmation. Opened (a filled circle) and when, or
   Not opened yet (an empty circle); the fetches that were not counted listed under it. Never "Read". */
.opened { display: grid; gap: var(--space-1); margin: var(--space-1) 0; }
.opened-chip { display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content; padding: var(--space-half) var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-full); font-size: var(--type-label); color: var(--text-2); }
.opened-chip__mark { width: 7px; height: 7px; border: var(--line-width) solid currentColor; border-radius: var(--radius-full); }
.opened-chip--opened { color: var(--text-1); }
.opened-chip--opened .opened-chip__mark { background: currentColor; }
.opened-chip__times { color: var(--text-2); }
.opened__skipped { margin: 0; padding-left: var(--space-4); font-size: var(--type-label); color: var(--text-2); }
.settings__confirm-form { display: grid; gap: var(--space-2); max-width: 520px; margin-bottom: var(--space-3); }

/* People in this mail (Mail 10): each address as its person or company, or Not in your People. */
.mail-people { display: grid; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); }
.mail-people__one { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mail-people__row { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: inherit; }
.mail-people__company { font-size: var(--type-small); }
.person-mail { margin-top: var(--space-4); }
.person-mail__touch { margin-left: var(--space-2); }
.person-mail__row { display: flex; justify-content: space-between; gap: var(--space-3); }

/* Tasks from a mail (Mail 11): a line on the mail per task made from it; the task links back. */
.mail-tasks { display: grid; gap: var(--space-1); margin: 0 0 var(--space-3); padding: 0; list-style: none; font-size: var(--type-small); }
.mail-tasks__row { display: flex; align-items: center; gap: var(--space-2); }
.mail-tasks__mark { flex: none; width: 9px; height: 9px; border: var(--line-width) solid currentColor; border-radius: var(--radius-xs); }
.mail-tasks__mark--done { background: currentColor; }
.change-card__mail { display: grid; gap: var(--space-1); }

/* Invitation card (Mail 12): a meeting someone asks me to, on top of its mail; a calendar-page mark (a square
   with a bar on top); y Yes, Shift Y Maybe, n No; the answer given is pressed (a strong line, bold), never the accent. */
.invite-card { display: flex; gap: var(--space-3); margin: var(--space-2) 0; padding: var(--space-3); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-1); }
.invite-card__mark { flex: none; width: 14px; height: 14px; margin-top: var(--space-half); border: var(--line-width) solid currentColor; border-top-width: 4px; border-radius: var(--radius-xs); }
.invite-card__body { display: grid; gap: var(--space-half); min-width: 0; }
.invite-card__title { margin: 0; font-weight: var(--weight-bold); }
.invite-card__when { margin: 0; }
.invite-card__body .list-row__meta { margin: 0; }
.invite-card__said { margin: var(--space-1) 0 0; font-size: var(--type-small); }
.invite-card__keys { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.invite-card--cancelled { opacity: 0.8; }
.invite-card__keys [aria-pressed="true"] { border-color: var(--text-1); font-weight: var(--weight-bold); }

/* Workflows (advanced/workflows) ------------------------------------------------------------------ */
[data-modules-off~="workflows"] [data-module="workflows"]:not(input) { display: none; } /* never the switch that brings it back */
/* Step glyph: a step's kind by shape, never by colour: a circle for work, a diamond for a decision,
   a square for a review. Not started is an outline; done is filled. */
.step-glyph { display: inline-block; flex: none; width: 12px; height: 12px; border: 1.5px solid var(--text-1); background: var(--surface-0); box-sizing: border-box; }
.step-glyph--work { border-radius: var(--radius-full); }
.step-glyph--decision { width: 11px; height: 11px; margin: calc(var(--space-hair) / 2); transform: rotate(45deg); }
.step-glyph--review { border-radius: var(--radius-xs); }
.step-glyph.is-done { background: var(--text-1); }
/* Rail: a workflow's steps as beads on one line, in order, the owner under each. */
.rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-3) 0; margin: var(--space-3) 0 var(--space-5); padding: 0; list-style: none; }
.rail__step { position: relative; display: grid; gap: var(--space-half); align-content: start; padding-right: var(--space-3); }
.rail__bead { position: relative; display: flex; align-items: center; height: 18px; }
.rail__bead::after { content: ''; position: absolute; left: 18px; right: 4px; top: 50%; border-top: var(--line-width) solid var(--line-strong); }
.rail__step:last-child .rail__bead::after { display: none; }
.rail__n { color: var(--text-3); font-family: var(--font-mono); font-size: var(--type-label); }
.rail__title { font-size: var(--type-small); font-weight: var(--weight-medium); line-height: 1.3; }
.rail__owner { color: var(--text-2); font-size: var(--type-label); }
/* Definition frame: what something is meant to be (an SOP), dashed, with its version. A run is solid. */
.definition-frame { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border: var(--line-width) dashed var(--line-strong); border-radius: var(--radius-m); }
.definition-frame__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
.definition-frame__kind { font-size: var(--type-label); font-weight: var(--weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.definition-frame__title { color: var(--text-2); font-size: var(--type-small); }
.sop-steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.sop-step { display: grid; grid-template-columns: 14px 18px 1fr; gap: var(--space-2); align-items: start; }
.sop-step > .step-glyph { margin-top: var(--space-1); }
.sop-step__n { color: var(--text-3); font-family: var(--font-mono); font-size: var(--type-small); }
.sop-step__main { display: grid; gap: var(--space-half); }
.sop-step__title { font-weight: var(--weight-medium); }
.sop-step__io { color: var(--text-2); font-size: var(--type-small); }
.sop-step__label { display: inline-block; min-width: 2.2em; color: var(--text-3); font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.04em; }
.workflow-card { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4) 0; border: var(--line-width) solid var(--line); border-radius: var(--radius-m); }
.workflow-card__title { margin: 0 0 var(--space-1); font-size: var(--type-subheading); }
.workflows__back { display: inline-block; margin-bottom: var(--space-3); font-size: var(--type-small); }
/* Procedure link (Workflows 2): a step's link to its procedure, the how written once; a small page with
   a line as its mark; "Used in 2 SOPs" beside it when more than one SOP points to it. */
.procedure-link { display: inline-flex; align-items: baseline; gap: var(--space-1); color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.procedure-link:hover { text-decoration-color: currentColor; }
.procedure-link__mark { display: inline-block; flex: none; width: 8px; height: 10px; border: var(--line-width) solid currentColor; border-radius: var(--radius-xs); background: linear-gradient(currentColor, currentColor) center 3px / 4px 1px no-repeat, linear-gradient(currentColor, currentColor) center 6px / 4px 1px no-repeat; }
.procedure-link__mark--large { width: 14px; height: 18px; background-size: 8px 1.5px, 8px 1.5px; background-position: center 5px, center 10px; vertical-align: 2px; }
.procedure-link__used { color: var(--text-3); font-size: var(--type-label); white-space: nowrap; }
.procedure-body { margin-bottom: var(--space-3); }
.procedure-edit { display: grid; gap: var(--space-3); max-width: 640px; }
.procedure-used { margin-top: var(--space-5); }
/* Step glyph states (Workflows 3): working is a quarter arc, waiting (for me) half filled, failed dashed. */
.step-glyph.is-working { background: conic-gradient(var(--text-1) 0 25%, var(--surface-0) 0); }
.step-glyph.is-waiting { background: linear-gradient(90deg, var(--text-1) 50%, var(--surface-0) 50%); }
.step-glyph.is-failed { border-style: dashed; }
/* Run frame: one pass through a workflow, solid and numbered: the opposite of the SOP's dashed frame. */
.run-frame { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 2px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-1); }
.run-frame__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.run-frame__n { font-family: var(--font-mono); font-size: var(--type-subheading); font-weight: var(--weight-medium); }
.run-frame__name { font-size: var(--type-body-large); font-weight: var(--weight-medium); }
.run-frame__state { margin-left: auto; color: var(--text-2); font-size: var(--type-small); }
.run-frame__meta { margin: var(--space-half) 0 0; }
.rail--run { margin-bottom: var(--space-3); }
.rail__state { color: var(--text-3); font-size: var(--type-label); }
.rail__step[data-state="waiting"] .rail__state { color: var(--text-1); font-weight: var(--weight-medium); }
.run-steps { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-3) 0 0; border-top: var(--line-width) solid var(--line); list-style: none; }
.run-step { display: grid; gap: var(--space-1); }
.run-step__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.run-output { margin: 0 0 0 var(--space-7); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); background: var(--surface-0); font: inherit; font-size: var(--type-small); white-space: pre-wrap; overflow-wrap: anywhere; }
.run-step > p, .run-step > form, .run-step > .button { margin: 0 0 0 var(--space-7); font-size: var(--type-small); }
.run-step__done { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); max-width: 560px; }
.run-step__done .field { flex: 1 1 260px; }
.run-step > .button { justify-self: start; }
.workflow__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.workflow__head .page-title { margin: 0; }
.start-run { display: grid; gap: var(--space-3); }
p.workflows__back { display: block; margin: 0 0 var(--space-3); color: var(--text-2); }
/* Check chip (Workflows 4): a verdict as a word in capitals and a mark, never a colour alone. */
.check-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-1); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); color: var(--text-1); font-size: var(--type-label); font-weight: var(--weight-medium); letter-spacing: 0.04em; line-height: 1.5; white-space: nowrap; }
.check-chip__mark { position: relative; flex: none; width: 7px; height: 7px; }
.check-chip--dot .check-chip__mark { border-radius: var(--radius-full); background: currentColor; }
.check-chip--diamond .check-chip__mark { width: 6px; height: 6px; border: 1.5px solid currentColor; transform: rotate(45deg); }
.check-chip--cross .check-chip__mark::before, .check-chip--cross .check-chip__mark::after { content: ''; position: absolute; left: -1px; right: -1px; top: 3px; border-top: 1.5px solid currentColor; transform: rotate(45deg); }
.check-chip--cross .check-chip__mark::after { transform: rotate(-45deg); }
.check-chip--cross { border-width: 1.5px; border-color: var(--text-1); }
.rail__check { margin-top: var(--space-half); }
.run-checks { display: grid; gap: var(--space-1); margin: 0 0 0 var(--space-7); padding: 0; list-style: none; font-size: var(--type-small); }
.run-check { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.run-check__name { font-weight: var(--weight-medium); }
.run-check__evidence { color: var(--text-2); }
.run-step__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: var(--space-7); }
.sop-quality { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--line-width) dashed var(--line); }
.sop-quality__title { margin: 0 0 var(--space-2); font-size: var(--type-small); font-weight: var(--weight-medium); }
.sop-quality__list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--type-small); }
.sop-quality__kind { display: inline-block; min-width: 7.5em; color: var(--text-3); font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.04em; }
/* Decision step (Workflows 5): a diamond on the rail with who decides under it; the SOP's switch; the locked line. */
.rail__decides { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-1); font-size: var(--type-label); font-weight: var(--weight-medium); }
.sop-step__decider { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.tool-rule__option[data-locked] { opacity: 0.5; cursor: not-allowed; text-decoration: line-through; }
.always-yours { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; padding: var(--space-1) var(--space-2); border: var(--line-width) dashed var(--line-strong); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-small); }
.run-step__decision { margin-left: var(--space-7); max-width: 560px; }
.decision-card__decides { margin: 0; }
/* Needs you list (Workflows 6): one row per decision that waits for me, a diamond as its mark. */
.needs-you { display: grid; gap: 0; margin: 0 0 var(--space-5); padding: 0; list-style: none; border-top: var(--line-width) solid var(--line); }
.needs-you__row { display: grid; grid-template-columns: 14px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--line-width) solid var(--line); }
.needs-you__mark { width: 9px; height: 9px; margin: calc(var(--space-1) + var(--space-half)) 0 0 var(--space-half); border: 1.5px solid var(--text-1); transform: rotate(45deg); }
.needs-you__main { display: grid; gap: var(--space-1); min-width: 0; }
.needs-you__options { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.needs-you__why, .needs-you__chosen { margin: 0; color: var(--text-2); font-size: var(--type-small); }
.needs-you__change { display: grid; gap: var(--space-2); max-width: 520px; }
.workflows__needs { margin-bottom: var(--space-4); }
/* SOP versions (Workflows 7): the current version filled, an older one outlined; Rules; Reject. */
.version-chip--current { border-color: var(--text-1); background: var(--text-1); color: var(--surface-0); }
.version-chip--older { border-color: var(--line-strong); background: none; color: var(--text-2); }
.sop-versions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-3); color: var(--text-2); font-size: var(--type-small); }
.sop-versions__v { text-decoration: none; }
.sop-versions__v[aria-current="page"] { outline: 1.5px solid var(--text-1); outline-offset: 2px; border-radius: var(--radius-s); }
.sop-rules { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--line-width) dashed var(--line); }
.sop-rules__list { display: grid; gap: var(--space-1); margin: 0; padding-left: var(--space-5); font-size: var(--type-small); }
.run-step__reject { margin-left: var(--space-7); }
.run-step__reject > summary { display: inline-flex; list-style: none; cursor: pointer; font-size: var(--type-small); }
.run-step__reject > summary::-webkit-details-marker { display: none; }
.run-step__reject-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); max-width: 560px; margin-top: var(--space-2); }
.run-step__reject-form .field { flex: 1 1 280px; }
.run-cards { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.change-card__rule { margin: 0; font-size: var(--type-small); }
/* Schedule chip (Workflows 8): a clock and the schedule in words; a catch-up after sleep is dashed. */
.schedule-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-full); color: var(--text-1); font-size: var(--type-label); font-weight: var(--weight-regular); line-height: 1.6; white-space: nowrap; vertical-align: 2px; }
.schedule-chip--caught-up { border-style: dashed; }
.schedule-chip__clock { position: relative; flex: none; display: inline-block; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: var(--radius-full); box-sizing: border-box; }
.schedule-chip__clock::before { content: ''; position: absolute; left: 3px; top: 1px; height: 3px; border-left: 1.5px solid currentColor; }
.schedule-chip__clock::after { content: ''; position: absolute; left: 3px; top: 3.5px; width: 2.5px; border-top: 1.5px solid currentColor; }
.background-line { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-small); }
.schedule-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.schedule-field input { width: 12em; padding: var(--space-half) var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-1); color: var(--text-1); font: inherit; font-size: var(--type-small); }
/* Columns (Workflows 9): a workstream's workflows side by side; a line for what waits for what, with the output's name. */
.columns { margin: var(--space-3) 0 var(--space-4); }
.columns__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.columns__column { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-3); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-1); min-width: 0; }
.columns__column--done { border-color: var(--text-2); }
.columns__head { display: grid; gap: var(--space-half); }
.columns__title { margin: 0; font-size: var(--type-body); font-weight: var(--weight-medium); }
.columns__state, .columns__takes, .columns__gives { color: var(--text-2); font-size: var(--type-small); overflow-wrap: anywhere; }
.columns__gives { margin: 0; padding-top: var(--space-2); border-top: var(--line-width) dashed var(--line); }
.columns code, .columns__name { font-family: var(--font-mono); font-size: var(--type-label); }
.columns__steps { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--type-small); }
.columns__step { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.columns__step .list-row__meta { margin-left: auto; }
.columns__links { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: var(--type-small); }
.columns__link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.columns__line { flex: 0 0 28px; border-top: 1.5px solid var(--text-2); }
.columns__arrow { width: 0; height: 0; margin-left: calc(-1 * var(--space-2)); border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid var(--text-2); }
.columns__name { padding: 0 var(--space-1); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); }
.columns__link .list-row__meta { flex-basis: 100%; }
.stream-project { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.stream-waits { margin-top: var(--space-3); }
.stream-waits > summary { display: inline-flex; list-style: none; cursor: pointer; }
.stream-waits > summary::-webkit-details-marker { display: none; }
.stream-waits__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--type-small); }
.life__workstreams { margin: var(--space-4) 0; }
/* Variant chip and Gate (Workflows 10): a letter in a square; a dashed diamond card that holds the next column. */
.variant-chip { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--text-1); border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: var(--type-label); font-weight: var(--weight-medium); line-height: 1; }
.variant-chip--chosen { border-width: 3px; }
.variant-chip--not-chosen { border-color: var(--line-strong); color: var(--text-3); text-decoration: line-through; }
.columns__variants { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--type-small); }
.columns__variant { display: grid; grid-template-columns: 18px 1fr; gap: var(--space-half) var(--space-2); align-items: center; }
.columns__variant .list-row__meta { grid-column: 2; }
.columns__variant.is-not-chosen .columns__input { color: var(--text-3); text-decoration: line-through; }
.gate { position: relative; display: grid; gap: var(--space-1); padding: var(--space-2); border: 1.5px dashed var(--text-2); border-radius: var(--radius-m); }
.gate--later { display: block; margin: 0; color: var(--text-2); font-size: var(--type-small); }
.gate__mark { display: inline-block; width: 9px; height: 9px; margin-right: var(--space-1); border: 1.5px dashed var(--text-1); transform: rotate(45deg); vertical-align: 1px; }
.gate__label { font-size: var(--type-label); font-weight: var(--weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.gate .decision-card { margin: 0; border-style: dashed; }
.columns__variant > * { min-width: 0; }
.columns__input { overflow-wrap: anywhere; }
.gate .decision-card__options { display: grid; }
.gate .decision-card__option { height: auto; min-height: 32px; padding-block: var(--space-1); white-space: normal; text-align: left; line-height: 1.3; }
.columns__column { grid-template-columns: minmax(0, 1fr); }
/* The WDD (Workflows 11) in its Definition frame; a column that is a workstream inside the workstream is dashed. */
.wdd__part { margin-top: var(--space-3); }
.wdd__part:first-of-type { margin-top: 0; }
.wdd__list { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); font-size: var(--type-small); }
.wdd__rule { margin: var(--space-4) 0 0; padding-top: var(--space-2); border-top: var(--line-width) dashed var(--line); }
.wdd-edit > summary { display: inline-flex; list-style: none; cursor: pointer; }
.wdd-edit > summary::-webkit-details-marker { display: none; }
.wdd-edit__form { display: grid; gap: var(--space-3); max-width: 640px; margin-top: var(--space-3); }
.columns__column--stream { border-style: dashed; border-width: 1.5px; background: transparent; }
.stream-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
/* Run tree (Workflows 12): every run as one tree, indented by depth; a workstream a dashed square, a workflow a rail. */
.run-tree { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: var(--line-width) solid var(--line); }
.run-tree__node { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0 var(--space-2) calc(var(--depth) * var(--space-5)); border-bottom: var(--line-width) solid var(--line); font-size: var(--type-small); }
.run-tree__kind { flex: none; width: 12px; height: 12px; }
.run-tree__node--workstream .run-tree__kind { border: 1.5px dashed var(--text-1); border-radius: var(--radius-xs); }
.run-tree__node--workflow .run-tree__kind { height: 0; border-top: 1.5px solid var(--text-2); position: relative; }
.run-tree__node--workflow .run-tree__kind::after { content: ''; position: absolute; left: 3px; top: -4.5px; width: 6px; height: 6px; border: 1.5px solid var(--text-1); border-radius: var(--radius-full); background: var(--surface-0); box-sizing: border-box; }
.run-tree__name { font-weight: var(--weight-medium); }
.run-tree__state { color: var(--text-2); }
.run-tree__steps { display: inline-flex; gap: var(--space-1); align-items: center; }
.run-tree__board { margin-left: auto; }
.run-tree__node.is-not-chosen .run-tree__name { color: var(--text-3); text-decoration: line-through; }
/* Board and Board node (Workflows 12): a run full screen; each step a card with what it really made. */
.run-board { position: fixed; inset: 0; z-index: 50; overflow: auto; padding: var(--space-4) var(--space-5); background: var(--surface-0); }
.run-board__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.run-board__name { margin: 0; font-size: var(--type-heading); }
.run-board__close { margin-left: auto; }
.run-board__columns { display: grid; grid-template-columns: repeat(var(--columns, 1), minmax(240px, 1fr)); gap: var(--space-4); align-items: start; min-width: min-content; }
.run-board__column { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); align-content: start; }
.run-board__title { margin: 0; padding-bottom: var(--space-2); border-bottom: var(--line-width) solid var(--line-strong); font-size: var(--type-body-large); }
.run-board__lanes, .run-board__inner { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: var(--space-3); align-items: start; }
.run-board__inner { padding: var(--space-2); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-m); }
.run-board__lane { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.run-board__lane.is-not-chosen { opacity: 0.55; }
.run-board__lane-head, .run-board__from { margin: 0; color: var(--text-2); font-size: var(--type-small); overflow-wrap: anywhere; }
.run-board__from code { font-family: var(--font-mono); font-size: var(--type-label); }
.board-node { position: relative; display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-1); min-width: 0; }
.board-node + .board-node::before { content: ''; position: absolute; left: 50%; top: calc(-1 * var(--space-4) - 1px); height: var(--space-4); border-left: 1.5px solid var(--text-3); }
.board-node--working { background: transparent; }
.board-node--waiting, .board-node--not_started { border-style: dashed; background: transparent; }
.board-node__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.board-node__title { font-weight: var(--weight-medium); font-size: var(--type-small); }
.board-node__head .list-row__meta { margin-left: auto; }
.board-node__out { margin: 0; font: inherit; font-size: var(--type-small); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.board-node__wip { margin: 0; color: var(--text-2); font-size: var(--type-small); font-style: italic; }
.board-node__checks { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; }
.run-board__gate--open .gate { border-color: var(--accent); border-width: 2px; }
/* The board's columns size to what they hold (variants side by side never overlap the next column); it scrolls sideways. */
.run-board__columns { display: flex; align-items: flex-start; gap: var(--space-4); min-width: 0; width: max-content; }
.run-board__column { flex: 0 0 auto; width: max-content; min-width: 260px; max-width: none; }
.run-board__lanes, .run-board__inner { display: flex; align-items: flex-start; gap: var(--space-3); }
.run-board__lane { flex: 0 0 240px; width: 240px; }
/* Proposal card (Workflows 13): work the assistant noticed three times, proposed as a workflow. */
.proposal-card { display: grid; gap: var(--space-2); }
.proposal-card__head { display: flex; align-items: center; gap: var(--space-2); }
.proposal-card__mark { width: 14px; height: 0; border-top: 1.5px dashed var(--text-1); position: relative; }
.proposal-card__mark::after { content: ''; position: absolute; left: 3px; top: -5px; width: 7px; height: 7px; border: 1.5px dashed var(--text-1); border-radius: var(--radius-full); background: var(--surface-1); }
.proposal-card__kind { font-size: var(--type-label); font-weight: var(--weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.proposal-card__head .change-card__status { margin-left: auto; }
.proposal-card__steps { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--type-small); }
.proposal-card__step { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.proposal-card__step .list-row__meta { margin-left: auto; }
.proposal-card.is-editing .proposal-card__title, .proposal-card.is-editing .proposal-card__step > .list-row__meta { display: none; }
.proposal-card__edit { display: flex; flex: 1; gap: var(--space-2); }
.proposal-card__edit input { flex: 1; min-width: 0; padding: var(--space-half) var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-0); color: var(--text-1); font: inherit; }
.proposal-card__seen { margin: 0; font-size: var(--type-small); }
.needs-you__proposals { display: grid; gap: var(--space-3); }
.earlier-chat { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.earlier-chat__message { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); }
.earlier-chat__message--me { margin-left: var(--space-6); background: var(--surface-1); }
/* Document card (Paperwork 1): a paper as a row. Its kind is a shape and a word, never a colour:
   passport a filled book, contract an open page, invoice a page with a cut corner, receipt a strip with a
   torn edge, policy a shield, other a dashed square. The next date that matters sits on the right. */
[data-modules-off~="paperwork"] [data-module="paperwork"]:not(input) { display: none; } /* never the switch in Settings */
.doc-cards { display: grid; align-content: start; border-top: var(--line-width) solid var(--line); }
.doc-card { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: var(--line-width) solid var(--line); color: var(--text-1); text-decoration: none; }
.doc-card:hover, .doc-card:focus-visible { background: var(--surface-2); }
.doc-card.is-active { background: var(--surface-3); }
.doc-card__kind { width: 11px; height: 14px; box-sizing: border-box; justify-self: center; color: var(--text-2); }
.doc-card__kind--passport { border-radius: var(--radius-xs); background: currentColor; }
.doc-card__kind--contract { border: var(--line-width) solid currentColor; border-radius: var(--radius-xs); }
.doc-card__kind--invoice { background: currentColor; clip-path: polygon(0 0, 62% 0, 100% 32%, 100% 100%, 0 100%); }
.doc-card__kind--receipt { background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 100%, 83% 88%, 66% 100%, 50% 88%, 33% 100%, 17% 88%, 0 100%); }
.doc-card__kind--policy { width: 12px; background: currentColor; clip-path: polygon(50% 0, 100% 16%, 100% 52%, 50% 100%, 0 52%, 0 16%); }
.doc-card__kind--other { height: 11px; border: var(--line-width) dashed currentColor; }
.doc-card__text { display: grid; gap: var(--space-half); min-width: 0; }
.doc-card__title, .doc-card__meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.doc-card__meta { color: var(--text-3); font-size: var(--type-small); }
.doc-card__next { color: var(--text-1); font-size: var(--type-small); white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-card__next--none { color: var(--text-3); }
.doc-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.doc-links__item { display: inline-flex; align-items: center; gap: var(--space-half); }
.doc-links__life { display: inline-flex; align-items: center; gap: var(--space-1); }
.doc-links__remove { padding: 0 var(--space-1); border: 0; background: none; color: var(--text-3); font: inherit; cursor: pointer; }
.doc-links__remove:hover, .doc-links__remove:focus-visible { color: var(--text-1); }
.doc-links__add { position: relative; margin-top: var(--space-2); max-width: 360px; }
.doc-links__input { width: 100%; box-sizing: border-box; padding: var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-1); color: var(--text-1); font: inherit; }
.doc-links__suggest { position: absolute; top: 100%; left: 0; margin-top: var(--space-1); }
.doc-drop { margin: var(--space-2); padding: var(--space-3); border: var(--line-width) dashed var(--line-strong); border-radius: var(--radius-s); color: var(--text-3); font-size: var(--type-small); text-align: center; }
.doc-drop.is-over { border-style: solid; border-color: var(--text-1); color: var(--text-1); background: var(--surface-2); }
.document { display: grid; gap: var(--space-4); }
.document__file, .document__links { display: grid; gap: var(--space-2); justify-items: start; }
.person-docs, .life-docs { margin-top: var(--space-5); }

/* Field row (Paperwork 2): one fact read from a scan with how sure the reading is (the Confidence shapes:
   Sure filled, Likely half, Check this an open ring), and Correct it. A field to check has a dashed outline. */
.field-rows { display: grid; width: 100%; max-width: 640px; border-top: var(--line-width) solid var(--line); }
.field-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2); border-bottom: var(--line-width) solid var(--line); }
.field-row__name { flex: 0 0 90px; }
.field-row__value { flex: 1 1 12em; min-width: 0; }
.field-row--check { border: var(--line-width) dashed var(--line-strong); border-radius: var(--radius-s); margin: var(--space-half) 0; }
.field-row__name { color: var(--text-2); font-size: var(--type-small); }
.field-row__value { font-variant-numeric: tabular-nums; }
.field-row__by { color: var(--text-2); font-size: var(--type-label); }
.field-row__fix { display: flex; flex: 1 1 100%; gap: var(--space-2); }
.field-row__fix[hidden] { display: none; }
.field-row__fix input { flex: 1; min-width: 0; padding: var(--space-1) var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-1); color: var(--text-1); font: inherit; }
.read-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-2); font-size: var(--type-small); }
.read-state__mark { flex: none; width: 8px; height: 8px; box-sizing: border-box; border-radius: var(--radius-full); border: var(--line-width) solid var(--text-1); }
.read-state--read .read-state__mark { background: var(--text-1); }
.read-state--reading .read-state__mark { border-style: dashed; }
.read-state--none { color: var(--text-1); }
.read-state--none .read-state__mark { width: 0; height: 0; border: 0; border-radius: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--text-1); }
.document__read { display: grid; gap: var(--space-2); }

/* Scan inbox (Paperwork 3): the folder my scanner saves into, each file with the step it reached. The state is a
   shape: waiting an open ring, on its way a half, kept a filled circle, a copy two rings, stays a triangle. */
.scan-inbox { display: grid; gap: var(--space-2); margin: var(--space-2); padding: var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); font-size: var(--type-small); }
.scan-inbox:empty { display: none; }
.scan-inbox__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.scan-inbox__title { font-weight: var(--weight-bold); }
.scan-inbox__folder { margin: 0; color: var(--text-2); }
.scan-inbox__path { color: var(--text-1); overflow-wrap: anywhere; }
.scan-inbox__form { display: flex; gap: var(--space-2); }
.scan-inbox__form input { flex: 1; min-width: 0; padding: var(--space-1) var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-1); color: var(--text-1); font: inherit; }
.scan-inbox__rows { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--line-width) solid var(--line); }
.scan-inbox__row { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: var(--line-width) solid var(--line); }
.scan-inbox__mark { flex: none; width: 8px; height: 8px; margin-top: var(--space-1); box-sizing: border-box; border: var(--line-width) solid var(--text-1); border-radius: var(--radius-full); }
.scan-inbox__row--taken .scan-inbox__mark, .scan-inbox__row--stored .scan-inbox__mark, .scan-inbox__row--read .scan-inbox__mark { background: linear-gradient(90deg, var(--text-1) 50%, transparent 50%); }
.scan-inbox__row--removed .scan-inbox__mark { background: var(--text-1); }
.scan-inbox__row--duplicate .scan-inbox__mark { outline: var(--line-width) solid var(--text-1); outline-offset: 2px; }
.scan-inbox__row--failed .scan-inbox__mark { width: 0; height: 0; border: 0; border-radius: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--text-1); }
.scan-inbox__text { display: grid; flex: 1; gap: var(--space-half); min-width: 0; }
.scan-inbox__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scan-inbox__state { color: var(--text-2); }
.scan-inbox__steps { display: inline-flex; flex-wrap: wrap; gap: 0 var(--space-2); }
.scan-inbox__step { color: var(--text-3); }
.scan-inbox__step.is-done { color: var(--text-1); }
.scan-inbox__reason { color: var(--text-1); }
.doc-source { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-2); font-size: var(--type-small); }
.doc-source__mark { width: 10px; height: 7px; border: var(--line-width) solid currentColor; border-top-width: 3px; border-radius: var(--radius-xs); }

/* Money (Paperwork 4): bank exports, accounts, transactions and imports. Money in and out differ by their sign
   (+ and −) and weight, never by colour. */
.money { display: grid; gap: var(--space-4); max-width: 960px; }
.money .page-lead { margin-bottom: 0; }
.bank-exports { display: grid; gap: var(--space-2); padding: var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); font-size: var(--type-small); }
.bank-exports__title { margin: 0; font-weight: var(--weight-bold); }
.bank-exports__folder { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.bank-exports__form { display: flex; gap: var(--space-2); max-width: 560px; }
.bank-exports__form input { flex: 1; min-width: 0; padding: var(--space-1) var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-1); color: var(--text-1); font: inherit; }
.bank-exports__files { display: grid; border-top: var(--line-width) solid var(--line); }
.bank-exports__file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; border-bottom: var(--line-width) solid var(--line); }
.bank-exports__name { flex: 1 1 12em; color: var(--text-1); }
.bank-exports__last { color: var(--text-2); }
.money__accounts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.account-chip { display: grid; gap: var(--space-half); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-1); color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.account-chip[aria-pressed="true"] { background: var(--surface-3); border-color: var(--text-1); }
.account-chip__name { font-weight: var(--weight-bold); }
.account-chip__meta { color: var(--text-2); font-size: var(--type-small); }
.money__search { max-width: 420px; }
.money__count { margin: var(--space-2) 0; color: var(--text-3); font-size: var(--type-small); }
.txn-rows, .import-rows { display: grid; border-top: var(--line-width) solid var(--line); }
.txn-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto auto; align-items: baseline; gap: var(--space-3); padding: var(--space-2); border-bottom: var(--line-width) solid var(--line); }
.txn-row__day, .txn-row__account { color: var(--text-2); font-size: var(--type-small); white-space: nowrap; }
.txn-row__main { display: grid; gap: var(--space-half); min-width: 0; }
.txn-row__payee, .txn-row__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.txn-row__text { color: var(--text-3); font-size: var(--type-small); }
.txn-row__amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.txn-row--in .txn-row__amount { font-weight: var(--weight-bold); }
@media (max-width: 640px) { .txn-row { grid-template-columns: minmax(0, 1fr) auto; } .txn-row__day { grid-column: 1 / -1; } .txn-row__account { display: none; } }
.import-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-2); border-bottom: var(--line-width) solid var(--line); font-size: var(--type-small); }
.import-row__mark { flex: none; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--text-1); align-self: center; }
.import-row--failed .import-row__mark { width: 0; height: 0; border-radius: 0; background: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--text-1); }
.import-row__main { display: grid; flex: 1 1 14em; gap: var(--space-half); }
.import-row__file { color: var(--text-1); }
.import-row__when { color: var(--text-3); }
.import-row__counts { color: var(--text-2); }
.import-row__counts b { color: var(--text-1); }

/* Categories and rules (Paperwork 5): how a transaction got its category is a tag by shape, dashed by rule,
   solid by you; rules are numbered in the order they are tried. */
.txn-row--sorted { grid-template-columns: 7.5em minmax(0, 1fr) auto 15em minmax(8em, auto); }
.txn-row__category { display: inline-flex; align-items: center; gap: var(--space-2); }
.txn-row__category .select { max-width: 11em; padding-top: var(--space-half); padding-bottom: var(--space-half); font-size: var(--type-small); }
@media (max-width: 640px) { .txn-row--sorted { grid-template-columns: minmax(0, 1fr) auto; } .txn-row__category { grid-column: 1 / -1; } }
.how-tag { padding: 0 var(--space-2); border: var(--line-width) solid var(--text-2); border-radius: var(--radius-full); color: var(--text-2); font-size: var(--type-label); white-space: nowrap; }
.how-tag--rule { border-style: dashed; }
.how-tag--you { border-color: var(--text-1); color: var(--text-1); }
.money__sorting { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: var(--space-5); align-items: start; }
@media (max-width: 760px) { .money__sorting { grid-template-columns: 1fr; } }
.money__add { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.money__add input { flex: 1 1 10em; min-width: 0; padding: var(--space-1) var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-1); color: var(--text-1); font: inherit; }
.category-list, .rule-rows { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--line-width) solid var(--line); }
.category-list__row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; border-bottom: var(--line-width) solid var(--line); }
.category-list__name { flex: 1; }
.category-list__n { color: var(--text-2); font-size: var(--type-small); }
.rule-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-1) 0; border-bottom: var(--line-width) solid var(--line); }
.rule-row__n { flex: none; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-label); }
.rule-row__text { flex: 1 1 14em; }
.rule-row__words { font-family: var(--font-mono); quotes: "“" "”"; }
.rule-row__sorted { color: var(--text-2); font-size: var(--type-small); }
.rule-row__actions { display: inline-flex; gap: var(--space-half); }

/* Helper line (Paperwork 8): the accounting helper's work on a document, her face as its origin. */
.helper-line { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); }
.helper-line--waiting { border-style: dashed; }
.helper-line .agent-face { flex: none; }
.helper-line__text { display: grid; gap: var(--space-half); min-width: 0; }
.helper-line__who { color: var(--text-2); font-size: var(--type-label); }
.helper-line__said { color: var(--text-2); font-size: var(--type-small); }
.helper-card { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; }
.helper-tools, .helper-log { display: grid; margin: 0 0 var(--space-3); padding: 0; list-style: none; border-top: var(--line-width) solid var(--line); max-width: 640px; }
.helper-tools__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; border-bottom: var(--line-width) solid var(--line); font-size: var(--type-small); }
.helper-tools__rule { padding: 0 var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-full); }
.helper-tools__rule--allow { border-color: var(--text-1); color: var(--text-1); }
.helper-tools__rule--deny { border-style: dashed; color: var(--text-2); }
.helper-log__row { display: flex; gap: var(--space-3); padding: var(--space-1) 0; border-bottom: var(--line-width) solid var(--line); font-size: var(--type-small); }
.helper-log__row .gate-line { flex: 1; }
.helper-log__kind { flex: 0 0 7em; color: var(--text-2); }
.helper-log__text { min-width: 0; overflow-wrap: anywhere; }

/* Payment card (Paperwork 9): a payment draft on an invoice, its checks as Check rows, and the hand-over. */
.payment-card { display: grid; gap: var(--space-3); padding: var(--space-3); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); }
.payment-card--handed { border-style: solid; border-color: var(--text-1); }
.payment-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.payment-card__code { font-family: var(--font-mono); font-weight: var(--weight-bold); }
.payment-card__state { color: var(--text-2); font-size: var(--type-small); }
.payment-card__fields input[readonly] { border-style: dashed; }
.payment-card__checks { display: grid; }
.payment-card__checks .check-row { padding: var(--space-2) var(--space-3); }
.payment-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.payment-card__note { color: var(--text-2); font-size: var(--type-small); }

/* Paid (Paperwork 10): paid only with a transaction behind it (a filled circle); a match by amount alone is a
   question for me (an open ring and a question), with Yes and No. */
.doc-card__next--paid { color: var(--text-2); }
.paid-line { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--text-1); border-radius: var(--radius-s); font-size: var(--type-small); }
.paid-line__mark { flex: none; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--text-1); }
.money__needs { display: grid; gap: var(--space-2); }
.paid-question { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-3); padding: var(--space-3); border: var(--line-width) dashed var(--line-strong); border-radius: var(--radius-s); }
.paid-question__mark { flex: none; width: 10px; height: 10px; margin-top: var(--space-1); box-sizing: border-box; border: var(--line-width) solid var(--text-1); border-radius: var(--radius-full); }
.paid-question__body { display: grid; flex: 1 1 18em; gap: var(--space-half); min-width: 0; }
.paid-question__body p { margin: 0; }
.paid-question__q { font-weight: var(--weight-bold); }
.paid-question__what, .paid-question__why { color: var(--text-2); font-size: var(--type-small); }
.paid-question__actions { display: inline-flex; gap: var(--space-2); }

/* The numbers (Paperwork 6): the dashboard kit's table under any chart, folded until opened. */
.chart-numbers { margin-top: var(--space-2); font-size: var(--type-small); }
.chart-numbers__summary { color: var(--text-2); cursor: pointer; }
.chart-numbers__table { width: 100%; max-width: 520px; margin-top: var(--space-2); border-collapse: collapse; }
.chart-numbers__table th, .chart-numbers__table td { padding: var(--space-half) var(--space-2); border-bottom: var(--line-width) solid var(--line); text-align: left; font-weight: var(--weight-regular); }
.chart-numbers__table thead th { color: var(--text-2); }
.chart-numbers__n { text-align: right; font-variant-numeric: tabular-nums; }
.chart-numbers__table th.chart-numbers__n, .chart-numbers__table td.chart-numbers__n { text-align: right; }
.paperwork-kit { margin: 0 0 var(--space-3); color: var(--text-2); font-size: var(--type-small); }

/* The money Overview (Paperwork 7): Focus now, then the month, the categories and what comes back, from the kit. */
.money-overview { display: grid; gap: var(--space-5); }
.money-overview__part { display: grid; gap: var(--space-2); }
.money-overview__line, .money-overview__describes { margin: 0; color: var(--text-2); font-size: var(--type-small); }
.money-overview .bars { grid-auto-columns: minmax(64px, 120px); justify-content: start; }
.money-overview .bars__label { max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere; }

/* Assistant at full strength (advanced/assistant-plus). Took on (Assistant 1): every job a helper took on,
   above the chat. The state is a shape and a word: an open ring waits, a half circle runs, a filled circle
   is done, a cross could not finish. A helper's result is a message of its own, under its job's number. */
.assistant__took-on { padding: 0 var(--space-4); }
.took-on { display: grid; gap: var(--space-1); padding: var(--space-2) 0; border-bottom: var(--line-width) solid var(--line); }
.took-on__head { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; font-size: var(--type-label); }
.took-on__label { color: var(--text-2); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.04em; }
.took-on__count { color: var(--text-3); }
.took-on__jobs { display: grid; gap: var(--space-half); margin: 0; padding: 0; list-style: none; max-height: 40vh; overflow-y: auto; }
.took-on__job { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-width: 0; padding: var(--space-half) var(--space-2); border: 0; border-radius: var(--radius-s); background: none; color: inherit; font: inherit; font-size: var(--type-small); text-align: left; cursor: pointer; }
.took-on__job:hover { background: var(--surface-2); }
.took-on__job.is-open { background: var(--surface-2); }
.took-on__mark { flex: none; width: 10px; height: 10px; box-sizing: border-box; border: 1.5px solid var(--text-1); border-radius: var(--radius-full); }
.took-on__mark--running { background: linear-gradient(90deg, var(--text-1) 50%, transparent 50%); }
.took-on__mark--done { background: var(--text-1); }
.took-on__mark--error { border: 0; border-radius: 0; background: linear-gradient(45deg, transparent 43%, var(--text-1) 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--text-1) 43% 57%, transparent 57%); }
.took-on__code { flex: none; color: var(--text-3); font-variant-numeric: tabular-nums; }
.took-on__title { flex: 1; min-width: 0; overflow: hidden; color: var(--text-1); text-overflow: ellipsis; white-space: nowrap; }
.took-on__state { flex: none; color: var(--text-2); }
.helper-result { padding: var(--space-2) var(--space-3); border-left: 2px solid var(--line-strong); }
.helper-result__from { color: var(--text-3); font-size: var(--type-label); }
.helper-result__job { padding: 0 var(--space-1); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); background: none; color: var(--text-2); font: inherit; cursor: pointer; }
.helper-result__job:hover { color: var(--text-1); }
/* Helper brief (Assistant 2): a job's brief, complete without the chat (goal, sources, boundaries, done when),
   then what my assistant asked its helper and the answers, each with the notes it rests on. */
.helper-brief { display: grid; gap: var(--space-2); margin: var(--space-1) 0 var(--space-2) calc(var(--space-2) + var(--space-half) + var(--space-4)); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); font-size: var(--type-small); }
.helper-brief__parts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-half) var(--space-3); margin: 0; }
.helper-brief__parts dt { color: var(--text-3); }
.helper-brief__parts dd { margin: 0; color: var(--text-1); overflow-wrap: anywhere; }
.helper-brief__none { color: var(--text-3); }
.helper-brief__asks { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-2) 0 0; border-top: var(--line-width) solid var(--line); list-style: none; }
.helper-brief__ask { display: grid; gap: var(--space-half); }
.helper-brief__q { color: var(--text-2); }
.helper-brief__sources { color: var(--text-3); }
.helper-late { padding: 0 var(--space-1); border: var(--line-width) dashed var(--line-strong); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-label); white-space: nowrap; }
/* Speed chip (Assistant 3): how an answer was made and how long it took. Instant (a filled square): by code
   from my data, no AI. Lesson 4 adds quick and deep. */
.speed-chip { display: inline-flex; align-items: center; gap: var(--space-1); justify-self: start; padding: var(--space-hair) var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.speed-chip__mark { flex: none; width: 8px; height: 8px; box-sizing: border-box; border: 1.5px solid var(--text-1); }
.speed-chip--instant .speed-chip__mark { background: var(--text-1); }
.speed-chip--quick .speed-chip__mark { background: linear-gradient(90deg, var(--text-1) 50%, transparent 50%); }
.speed-chip--deep .speed-chip__mark { background: none; }
.tier-rows { display: grid; gap: var(--space-2); margin: var(--space-2) 0; }
.tier-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--type-small); }
.tier-row .speed-chip { min-width: 11em; }
/* Live card (Assistant 5): an answer's thing itself, drawn from its row as it is now. A task is the Tasks page's
   row with its checkbox; a person their card; a note a page mark, its title and first line. A preview opens one
   over the page I am on; a ring outlines the part of a page my assistant points at. */
.live-cards { display: grid; gap: var(--space-1); max-width: min(560px, 90%); }
.live-card { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-1); color: inherit; text-decoration: none; }
a.live-card:hover { background: var(--surface-2); }
.live-card.task-row { border-bottom: var(--line-width) solid var(--line-strong); }
.live-card .person-card { padding: 0; border: 0; }
.live-card__open { margin-left: auto; font-size: var(--type-small); }
.live-card__mark { flex: none; width: 10px; height: 12px; box-sizing: border-box; border: 1.5px solid var(--text-1); border-radius: var(--radius-xs); }
.live-card__text { display: grid; min-width: 0; }
.live-card__title { color: var(--text-1); font-weight: var(--weight-bold); }
.live-card__first { overflow: hidden; color: var(--text-2); font-size: var(--type-small); text-overflow: ellipsis; white-space: nowrap; }
.live-card--gone { border-style: dashed; color: var(--text-3); font-size: var(--type-small); }
.live-card__kind { text-transform: capitalize; }
.live-preview { position: fixed; top: var(--space-5); right: var(--space-5); z-index: 50; display: grid; gap: var(--space-2); width: min(380px, calc(100vw - 2 * var(--space-4))); padding: var(--space-3); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-l); background: var(--surface-2); }
.live-preview__hint { margin: 0; color: var(--text-3); font-size: var(--type-label); }
.live-preview__close { justify-self: end; }
.live-ring { outline: 2px solid var(--text-1); outline-offset: 3px; border-radius: var(--radius-s); }
/* Skill row (Assistant 6): an ability of my assistant with what it is for, what it needs (a filled circle in place,
   an open ring missing, always with the word) and its switch; off is dashed: not there for my assistant. */
.skill-rows { display: grid; gap: var(--space-2); margin: var(--space-2) 0; }
.skill-row { display: grid; gap: var(--space-1); padding: var(--space-3); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); }
.skill-row--off { border-style: dashed; }
.skill-row__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.skill-row__name { font-weight: var(--weight-bold); }
.skill-row__about, .skill-row__tools { margin: 0; color: var(--text-2); font-size: var(--type-small); }
.skill-row__needs { display: grid; gap: var(--space-half); margin: 0; padding: 0; list-style: none; font-size: var(--type-small); }
.skill-row__need { display: flex; align-items: center; gap: var(--space-2); }
.skill-row__mark { flex: none; width: 8px; height: 8px; box-sizing: border-box; border: 1.5px solid var(--text-1); border-radius: var(--radius-full); }
.skill-row__need--ok .skill-row__mark { background: var(--text-1); }
.skill-row__need--missing { color: var(--text-2); }
.skill-log ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
/* Routine row (Assistant 7): a job my assistant does on a schedule, a clock mark, its schedule in its own time
   zone and the next run; paused is dashed. Runs: each run's shape says on time (a filled circle) or caught up
   after sleep (a half circle), always with the words. */
.routine-rows { display: grid; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.routine-row { display: grid; gap: var(--space-1); padding: var(--space-3); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); }
.routine-row--paused { border-style: dashed; }
.routine-row__head { display: flex; align-items: center; gap: var(--space-2); }
.routine-row__head .checkbox { margin-left: auto; }
.routine-row__title { font-weight: var(--weight-bold); }
.routine-row__clock { flex: none; display: inline-block; width: 11px; height: 11px; box-sizing: border-box; border: 1.5px solid var(--text-1); border-radius: var(--radius-full); background: linear-gradient(var(--text-1), var(--text-1)) 50% 25% / 1.5px 35% no-repeat, linear-gradient(var(--text-1), var(--text-1)) 62% 50% / 35% 1.5px no-repeat; vertical-align: -1px; }
.routine-row__what, .routine-row__when, .routine-row__last { margin: 0; color: var(--text-2); font-size: var(--type-small); }
.routine-row__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.routine-runs__list { display: grid; gap: var(--space-half); margin: var(--space-1) 0 0; padding: 0; list-style: none; font-size: var(--type-small); }
.routine-run { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-half) 0; border-top: var(--line-width) solid var(--line); }
.routine-run__mark { flex: none; width: 9px; height: 9px; box-sizing: border-box; border: 1.5px solid var(--text-1); border-radius: var(--radius-full); background: var(--text-1); }
.routine-run__mark--caught { background: linear-gradient(90deg, var(--text-1) 50%, transparent 50%); }
.routine-run--failed .routine-run__took { color: var(--text-1); font-weight: var(--weight-bold); }
.routine-run__how, .routine-run__took, .routine-run__last { color: var(--text-2); }
.routine-add { display: grid; gap: var(--space-2); max-width: 640px; }
.routine-add .button { justify-self: start; }
.routine-note { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-2); font-size: var(--type-small); }
.routine-note--failed { color: var(--text-1); }
/* Connected tool (Assistant 8): a tool connected by key or MCP, its health and where its key is (never the key),
   and each action with its kind as a shape and a word (reads an open circle, changes a filled square, reaches
   people a triangle, removes a cross), its call and a switch: only approved actions run. */
.tool-rows { display: grid; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.tool-row { display: grid; gap: var(--space-1); padding: var(--space-3); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); }
.tool-row__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.tool-row__head .button { margin-left: auto; }
.tool-row__name { font-weight: var(--weight-bold); }
.tool-row__switches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0; }
.tool-row__way, .tool-row__health { margin: 0; color: var(--text-2); font-size: var(--type-small); overflow-wrap: anywhere; }
.tool-actions { display: grid; gap: var(--space-half); margin: 0; padding: 0; list-style: none; font-size: var(--type-small); }
.tool-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-1) 0; border-top: var(--line-width) solid var(--line); }
.tool-action .checkbox { margin-left: auto; }
.tool-action__call { color: var(--text-2); }
.tool-action__about { color: var(--text-1); }
.tool-kind { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 8.5em; color: var(--text-2); font-size: var(--type-label); }
.tool-kind__mark { flex: none; width: 9px; height: 9px; box-sizing: border-box; border: 1.5px solid var(--text-1); }
.tool-kind--reads .tool-kind__mark { border-radius: var(--radius-full); }
.tool-kind--changes .tool-kind__mark { background: var(--text-1); }
.tool-kind--reaches .tool-kind__mark { width: 0; height: 0; border-width: 0 5px 9px; border-color: transparent transparent var(--text-1); }
.tool-kind--removes .tool-kind__mark { border: 0; background: linear-gradient(45deg, transparent 40%, var(--text-1) 40% 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, var(--text-1) 40% 60%, transparent 60%); }
.tool-connect { display: grid; gap: var(--space-2); max-width: 640px; }
.tool-connect .button { justify-self: start; }
.tool-call__from { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-3); font-size: var(--type-label); }
.tool-call__answer { margin: 0; padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); font-size: var(--type-small); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Mode banner (Assistant 9): a chat that works without cards (Autonomous), or Bypass for every session, says so in
   one quiet line at its top; the floor stays, a lock mark with its words, on a card it holds and in Settings. */
.assistant__banner { padding: 0 var(--space-4); }
.mode-banner { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; padding: var(--space-1) var(--space-3); border: var(--line-width) dashed var(--line-strong); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-small); }
.mode-banner__mark { flex: none; width: 10px; height: 10px; box-sizing: border-box; border: 1.5px solid var(--text-1); border-radius: var(--radius-full); background: conic-gradient(var(--text-1) 0 75%, transparent 0); }
.assistant__mode { margin-left: auto; }
.assistant__mode + .assistant__call { margin-left: var(--space-2); }
.floor-mark { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: var(--line-width) solid var(--text-2); border-radius: var(--radius-s); color: var(--text-1); font-size: var(--type-label); white-space: nowrap; }
.floor-mark__lock { flex: none; display: inline-block; width: 8px; height: 7px; margin-top: var(--space-half); box-sizing: border-box; border: 1.5px solid var(--text-1); border-radius: var(--radius-xs); position: relative; }
.floor-mark__lock::before { content: ""; position: absolute; left: 0.5px; bottom: 5px; width: 4px; height: 4px; box-sizing: border-box; border: 1.5px solid var(--text-1); border-bottom: 0; border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.floor-rows { display: grid; gap: var(--space-half); margin: 0 0 var(--space-3); padding: 0; list-style: none; font-size: var(--type-small); }
.floor-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; border-bottom: var(--line-width) solid var(--line); }
.autonomy-log ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.assistant__steps { display: grid; gap: var(--space-2); }
/* Session row (Assistant 10): a Claude Code session outside this app, above the chats: running (a filled dot) or
   stopped (an open ring), always with the word; its title, folder and where it runs; Continue here. Browser chip:
   a step in Chrome (a page mark and the word). */
.split__outside { padding: 0 var(--space-3) var(--space-2); border-bottom: var(--line-width) solid var(--line); }
.outside-sessions__head { color: var(--text-2); font-size: var(--type-label); cursor: pointer; padding: var(--space-1) 0; }
.outside-sessions__rows { display: grid; gap: var(--space-1); max-height: 40vh; overflow-y: auto; }
.outside-sessions__note { margin: var(--space-1) 0 0; }
.session-row { display: grid; gap: var(--space-half); padding: var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-s); font-size: var(--type-small); }
.session-row__state { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-2); font-size: var(--type-label); }
.session-row__mark { flex: none; width: 8px; height: 8px; box-sizing: border-box; border: 1.5px solid var(--text-1); border-radius: var(--radius-full); }
.session-row__state--running .session-row__mark { background: var(--text-1); }
.session-row__title { overflow: hidden; color: var(--text-1); font-weight: var(--weight-bold); text-overflow: ellipsis; white-space: nowrap; }
.session-row__where, .session-row__last { overflow: hidden; color: var(--text-3); text-overflow: ellipsis; white-space: nowrap; }
.session-row__go, .session-row__open { justify-self: start; }
.browser-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-full); color: var(--text-2); font-size: var(--type-label); }
.browser-chip__mark { flex: none; width: 10px; height: 8px; box-sizing: border-box; border: 1.5px solid var(--text-1); border-top-width: 3px; border-radius: var(--radius-xs); }

/* Context and memory (advanced/context) */
/* Origin chip (Context 1): where a row came from, under its title; a shape per origin, never colour alone */
.context-origin-slot { display: block; margin: calc(-1 * var(--space-2)) 0 var(--space-2); }
.context-origin-slot:empty { display: none; }
.context-origin-slot--row { display: inline; margin: 0; }
.context-origin { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; padding: var(--space-half) var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-full); background: none; color: var(--text-2); font: inherit; font-size: var(--type-small); text-align: left; }
button.context-origin { cursor: pointer; }
button.context-origin:hover { border-color: var(--text-3); background: var(--surface-2); color: var(--text-1); }
.context-origin-slot--row .context-origin { padding: 0 var(--space-2); font-size: var(--type-label); }
.context-origin__words { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.context-origin__time { color: var(--text-3); white-space: nowrap; }
.context-origin__mark { flex: none; width: 8px; height: 8px; border: var(--line-width) solid currentColor; }
.context-origin--typed .context-origin__mark { width: 2px; height: 10px; border: 0; background: currentColor; }
.context-origin--captured .context-origin__mark { height: 5px; border-top: 0; border-radius: 0 0 var(--radius-s) var(--radius-s); }
.context-origin--imported .context-origin__mark { border-radius: 0; }
.context-origin--assistant .context-origin__mark { width: 7px; height: 7px; transform: rotate(45deg); }
.context-origin--unknown .context-origin__mark { border-style: dashed; border-radius: var(--radius-full); }
.context-origin--unknown { border-style: dashed; color: var(--text-3); }
.context-origin-dialog__meta { margin: 0 0 var(--space-2); color: var(--text-2); font-size: var(--type-small); }
.context-origin-dialog__text { margin: 0 0 var(--space-4); padding: var(--space-3); border-left: 2px solid var(--line-strong); background: var(--surface-1); color: var(--text-1); white-space: pre-wrap; }
.context-origin-target { outline: 1.5px solid var(--text-2); outline-offset: 3px; }
/* Link kind (Context 2): how two things relate, a shape per kind, and the reason in quiet italics */
.context-link-meaning { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: var(--space-1) 0 var(--space-2) var(--space-3); color: var(--text-3); font-size: var(--type-small); }
.context-link-meaning + .backlinks__item { margin-top: var(--space-2); }
.context-link-kind { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); background: none; color: var(--text-1); font: inherit; font-size: var(--type-label); font-weight: var(--weight-medium); line-height: 1.6; }
button.context-link-kind { cursor: pointer; }
button.context-link-kind:hover { background: var(--surface-2); }
.context-link-kind--none { border-style: dashed; color: var(--text-3); font-weight: var(--weight-regular); }
.context-link-kind__mark { position: relative; flex: none; width: 7px; height: 7px; }
.context-link-kind--supports .context-link-kind__mark { border-radius: var(--radius-full); background: currentColor; }
.context-link-kind--contradicts .context-link-kind__mark::before, .context-link-kind--contradicts .context-link-kind__mark::after { content: ''; position: absolute; top: 3px; left: -1px; width: 9px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.context-link-kind--contradicts .context-link-kind__mark::after { transform: rotate(-45deg); }
.context-link-kind--example_of .context-link-kind__mark { border: 1.5px solid currentColor; }
.context-link-kind--next_step .context-link-kind__mark { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid currentColor; }
.context-link-meaning__reason { color: var(--text-2); font-style: italic; }
.context-link-meaning__by { color: var(--text-3); }
.context-link-menu form { display: grid; gap: var(--space-3); }
.context-link-menu { width: min(520px, calc(100vw - 2 * var(--space-4))); }
.context-link-menu__kinds { justify-self: start; max-width: 100%; overflow-x: auto; }
/* Related pane (Context 3): notes close to this one, each with why, above Linked from; and the quiet line on a task */
.context-related { display: grid; gap: var(--space-1); margin: var(--space-5) 0 0; }
.context-related:empty { display: none; }
.context-related__row { display: flex; align-items: flex-start; gap: var(--space-2); border-left: 2px dotted var(--line-strong); }
.context-related__row:hover { border-left-color: var(--text-2); background: var(--surface-1); }
.context-related__item { display: grid; flex: 1; gap: var(--space-half); min-width: 0; padding: var(--space-2) var(--space-3); color: inherit; text-decoration: none; }
.context-related__title { font-weight: var(--weight-medium); }
.context-related__why { color: var(--text-2); font-size: var(--type-small); }
.context-related__hide { flex: none; margin: var(--space-2) var(--space-2) 0 0; padding: 0 var(--space-1); border: 0; border-radius: var(--radius-s); background: none; color: var(--text-3); font: inherit; cursor: pointer; }
.context-related__hide:hover { background: var(--surface-2); color: var(--text-1); }
.context-relevant-slot:empty { display: none; }
.context-relevant { display: block; overflow: hidden; color: var(--text-3); font-size: var(--type-small); white-space: nowrap; text-overflow: ellipsis; }
.context-relevant__lead { font-style: italic; }
.context-relevant__why { color: var(--text-3); }
.context-relevant__dismiss { padding: 0 var(--space-1); border: 0; background: none; color: var(--text-3); font: inherit; text-decoration: underline; cursor: pointer; }
.context-relevant__dismiss:hover { color: var(--text-1); }
/* Insight card (Context 4): an insight with its evidence, each quote checked word for word */
.context-insights { display: grid; gap: var(--space-4); max-width: 760px; }
.context-insights .page-lead { margin: 0; }
.context-insights__bar { display: flex; align-items: center; gap: var(--space-3); }
.context-insights__daily { color: var(--text-3); font-size: var(--type-small); }
.context-insights__run { margin: 0; color: var(--text-2); font-size: var(--type-small); }
.context-insights__run--needs { padding: var(--space-2) var(--space-3); border: var(--line-width) dashed var(--line-strong); border-radius: var(--radius-m); color: var(--text-1); }
.context-insights__dropped { color: var(--text-2); font-size: var(--type-small); }
.context-insights__dropped summary { cursor: pointer; color: var(--text-2); }
.context-insights__dropped ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.context-insights__dropped-title { color: var(--text-1); }
.context-insights__list { display: grid; gap: var(--space-3); }
.context-insight { display: grid; gap: var(--space-2); padding: var(--space-4); border: var(--line-width) solid var(--line); border-radius: var(--radius-l); background: var(--surface-1); }
.context-insight__kind { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-2); font-size: var(--type-label); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; }
.context-insight__mark { flex: none; width: 9px; height: 9px; }
.context-insight__kind--pattern .context-insight__mark { width: 13px; height: 3px; background: radial-gradient(circle, currentColor 1.4px, transparent 1.6px) 0 0 / 5px 3px repeat-x; }
.context-insight__kind--question .context-insight__mark { border: 1.5px solid currentColor; border-radius: var(--radius-full); }
.context-insight__kind--conclusion .context-insight__mark { background: currentColor; }
.context-insight__title { margin: 0; font-size: var(--type-subheading); font-weight: var(--weight-medium); }
.context-insight__text { margin: 0; color: var(--text-2); }
.context-insight__count { margin: 0; color: var(--text-3); font-size: var(--type-small); }
.context-insight__evidence { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.context-insight__quote { display: grid; gap: var(--space-half); padding: var(--space-2) var(--space-3); border-left: 2px solid var(--line-strong); color: inherit; text-decoration: none; }
.context-insight__quote:hover { border-left-color: var(--text-2); background: var(--surface-2); }
.context-insight__quote q { color: var(--text-1); font-style: italic; }
.context-insight__source { color: var(--text-3); font-size: var(--type-small); }
.context-insight__actions { display: flex; gap: var(--space-2); }
/* Saved insights citing a page, in its Linked from */
.context-linked-insight .backlinks__source::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: var(--space-2); background: currentColor; vertical-align: 1px; }
/* Strength (Context 5): the separate moments a thing was used, a dot in a ring; Forget this beside it */
.context-strength { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: var(--line-width) solid var(--line); border-radius: var(--radius-full); color: var(--text-2); font-family: var(--font-mono); font-size: var(--type-label); font-weight: var(--weight-regular); line-height: 1.6; vertical-align: 1px; }
.context-strength__mark { flex: none; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: var(--radius-full); background: radial-gradient(circle, currentColor 1.5px, transparent 2px); }
.context-forget { padding: 0 var(--space-1); border: 0; background: none; color: var(--text-3); font: inherit; font-size: var(--type-small); text-decoration: underline; cursor: pointer; }
.context-forget:hover { color: var(--text-1); }
.context-sort { flex: none; order: 3; }
.split__toolbar:has(> .context-sort) { flex-wrap: wrap; }
.split__toolbar:has(> .context-sort) .search-box { min-width: 60%; }
/* Trend (Context 6): rising, steady or fading beside strength, each with its own arrow; it only changes the order */
.context-trend { display: inline-flex; align-items: center; gap: var(--space-half); color: var(--text-2); font-size: var(--type-small); }
.context-trend__mark { font-family: var(--font-mono); }
.context-trend--fading { color: var(--text-3); }
/* In mind (Context 7): the short list my assistant keeps at hand, and the line on each answer that read it */
.context-read-line { display: inline-flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-1); color: var(--text-3); font-size: var(--type-label); text-decoration: none; }
.context-read-line::before { content: ''; width: 6px; height: 6px; border: 1.5px solid currentColor; border-radius: var(--radius-full); }
.context-read-line:hover { color: var(--text-1); }
.context-memory { display: grid; gap: var(--space-4); max-width: 760px; }
.context-memory .page-lead { margin: 0; }
.context-memory__group { display: grid; gap: var(--space-1); }
.context-memory__group > .day-heading { margin: 0; }
.context-in-mind { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: var(--line-width) solid var(--line); }
.context-in-mind__kind { flex: none; width: 8px; height: 8px; border: 1.5px solid var(--text-2); }
.context-in-mind--note .context-in-mind__kind { border-radius: 0; }
.context-in-mind--entry .context-in-mind__kind { border-radius: var(--radius-s); border-style: dashed; }
.context-in-mind--person .context-in-mind__kind { border-radius: var(--radius-full); }
.context-in-mind--task .context-in-mind__kind { border-radius: var(--radius-s); width: 9px; height: 9px; }
.context-in-mind--event .context-in-mind__kind { width: 7px; height: 7px; transform: rotate(45deg); }
.context-in-mind__main { display: grid; flex: 1; gap: var(--space-half); min-width: 0; }
.context-in-mind__title { overflow: hidden; color: var(--text-1); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.context-in-mind__title:hover { text-decoration: underline; }
.context-in-mind__reason { color: var(--text-2); font-size: var(--type-small); }
.context-in-mind__actions { display: flex; flex: none; gap: var(--space-1); }
.context-in-mind.is-pinned .context-in-mind__kind { background: var(--text-2); }
/* Sleep summary (Context 8): what the night made of yesterday; a guess always says it is one */
.context-memory__bar { display: flex; gap: var(--space-2); }
.context-sleep { display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--line-width) solid var(--line); border-radius: var(--radius-l); background: var(--surface-1); }
.context-sleep__day { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-2); font-size: var(--type-label); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; }
.context-sleep__mark { width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: var(--radius-full); background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.context-sleep__line { margin: 0; font-size: var(--type-subheading); font-weight: var(--weight-medium); }
.context-sleep__stats, .context-sleep__none, .context-sleep__score { margin: 0; color: var(--text-2); font-size: var(--type-small); }
.context-sleep__part { display: grid; gap: var(--space-2); }
.context-sleep__part > .day-heading { margin: 0; }
.context-sleep__repeat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; }
.context-sleep__steps { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.context-sleep__step { padding: 0 var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); font-size: var(--type-small); }
.context-sleep__then { color: var(--text-3); }
.context-sleep__count, .context-sleep__why { color: var(--text-3); font-size: var(--type-small); }
.context-sleep__kept { color: var(--text-2); font-size: var(--type-small); font-style: italic; }
.context-sleep__guess { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.context-sleep__guess-mark { padding: 0 var(--space-2); border: var(--line-width) dashed var(--line-strong); border-radius: var(--radius-full); color: var(--text-2); font-size: var(--type-label); }
/* Journal line (Context 9): what my assistant learned from me, in its own words */
.context-journal-entry { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); padding: var(--space-3); border-bottom: var(--line-width) solid var(--line); }
.context-journal-entry > :not(.context-in-mind__actions) { grid-column: 1; }
.context-journal-entry > .context-in-mind__actions { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
.context-journal-entry__kind { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-2); font-size: var(--type-label); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; }
.context-journal-entry__kind .context-strength { text-transform: none; letter-spacing: 0; }
.context-journal-entry__mark { flex: none; width: 9px; height: 9px; }
.context-journal-entry--correction .context-journal-entry__mark { width: 0; height: 0; border-right: 5px solid transparent; border-bottom: 9px solid currentColor; border-left: 5px solid transparent; }
.context-journal-entry--lesson .context-journal-entry__mark { border: 1.5px solid currentColor; border-radius: var(--radius-full); }
.context-journal-entry--how-to .context-journal-entry__mark { border: 1.5px solid currentColor; }
.context-journal-entry--preference .context-journal-entry__mark { border-radius: var(--radius-full); background: currentColor; }
.context-journal-entry__text { margin: 0; color: var(--text-1); }
.context-journal-entry__why { margin: 0; color: var(--text-3); font-size: var(--type-small); }
.context-journal-entry__form { display: grid; grid-column: 1 / -1; gap: var(--space-2); }
.context-journal-entry__form .select { justify-self: start; }

/* Design library (advanced/design-library) */
/* Check line (Design library 1): the token check's result on top of the Library; pass a filled circle, fail a triangle */
.dl-check { display: block; margin: 0 0 var(--space-5); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); color: var(--text-2); font-size: var(--type-small); }
.dl-check p { margin: 0; }
.dl-check ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.dl-check__mark { display: inline-block; width: 8px; height: 8px; margin-right: var(--space-2); border-radius: var(--radius-full); background: currentColor; }
.dl-check--fail { border-style: dashed; color: var(--text-1); }
.dl-check--fail .dl-check__mark { width: 0; height: 0; border-right: 5px solid transparent; border-bottom: 9px solid currentColor; border-left: 5px solid transparent; border-radius: 0; background: none; }
/* Token table (Design library 1): every token, its value in this theme, its use */
.dl-tokens { width: 100%; max-width: 860px; margin: 0 0 var(--space-5); border-collapse: collapse; font-size: var(--type-small); }
.dl-tokens caption { padding: 0 0 var(--space-2); color: var(--text-2); font-size: var(--type-label); font-weight: var(--weight-medium); text-align: left; text-transform: uppercase; letter-spacing: 0.04em; }
.dl-tokens th, .dl-tokens td { padding: var(--space-2) var(--space-3); border-bottom: var(--line-width) solid var(--line); text-align: left; vertical-align: middle; }
.dl-tokens thead th { color: var(--text-3); font-weight: var(--weight-regular); }
.dl-tokens tbody th { font-weight: var(--weight-regular); white-space: nowrap; }
.dl-tokens td:nth-child(2), .dl-tokens td[data-theme-value], .dl-tokens thead th { white-space: nowrap; }
.dl-tokens td:last-child { color: var(--text-2); }
.dl-tokens__value { font-family: var(--font-mono); }
.dl-tokens__swatch, .dl-tokens__radius { display: inline-block; width: 14px; height: 14px; margin-right: var(--space-2); border: var(--line-width) solid var(--line-strong); vertical-align: -2px; }
.dl-tokens__radius { width: 18px; background: var(--surface-3); }
.dl-tokens__space { display: inline-block; height: 8px; margin-right: var(--space-2); background: var(--text-3); vertical-align: 0; }
/* Accent check (Design library 2): the rule, an example and a counter-example, and every view with its count */
.dl-rule { max-width: 720px; margin: 0 0 var(--space-4); }
.dl-examples { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-4); }
.dl-example { display: grid; gap: var(--space-2); margin: 0; }
.dl-example__frame { display: flex; gap: var(--space-2); padding: var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); }
.dl-example--never .dl-example__frame { border-style: dashed; }
.dl-example figcaption { max-width: 320px; color: var(--text-2); font-size: var(--type-small); }
.dl-verdict { display: inline-flex; align-items: center; gap: var(--space-1); margin-right: var(--space-1); color: var(--text-1); font-weight: var(--weight-medium); }
.dl-verdict__mark { width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; }
.dl-verdict--fail .dl-verdict__mark { width: 0; height: 0; border-right: 5px solid transparent; border-bottom: 9px solid currentColor; border-left: 5px solid transparent; border-radius: 0; background: none; }
.dl-accent__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }
.dl-accent__status { color: var(--text-2); font-size: var(--type-small); }
.dl-frame { position: fixed; top: 0; left: -10000px; width: 1280px; height: 800px; border: 0; visibility: hidden; }
/* State strip (Design library 3): a component five times, each state forced with its class and labelled */
.dl-states-wrap { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--line-width) dashed var(--line); }
.dl-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.dl-states__cell { display: grid; align-content: start; gap: var(--space-2); min-width: 0; }
.dl-states__cell .field input, .dl-states__cell .search-box { width: 100%; min-width: 0; }
.dl-states__label { color: var(--text-3); font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.04em; }
.dl-states__none, .dl-states__one, .dl-states__note { margin: 0; color: var(--text-3); font-size: var(--type-small); }
.dl-states__note { margin-top: var(--space-2); }
/* Rule card (Design library 4): a rule from design/RULES.md with its Do and its Never, each with a live example */
.dl-rules__agents { margin: 0 0 var(--space-2); font-size: var(--type-small); }
.dl-rules__from { margin-right: var(--space-2); padding: 0 var(--space-1); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); color: var(--text-2); font-family: var(--font-mono); font-size: var(--type-label); }
.dl-rules { display: grid; gap: var(--space-3); max-width: 960px; }
.dl-rule-card { padding: var(--space-4); border: var(--line-width) solid var(--line); border-radius: var(--radius-l); background: var(--surface-1); scroll-margin-top: var(--space-5); }
.dl-rule-card__title { margin: 0 0 var(--space-3); font-size: var(--type-subheading); font-weight: var(--weight-medium); }
.dl-rule-card__id { margin-right: var(--space-1); color: var(--text-3); font-family: var(--font-mono); font-size: var(--type-small); }
.dl-rule-card__sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.dl-rule-card__side { display: grid; align-content: start; gap: var(--space-2); }
.dl-rule-card__line { margin: 0; font-size: var(--type-small); color: var(--text-2); }
.dl-rule-card__example { padding: var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-0); }
.dl-rule-card__side--never .dl-rule-card__example { border-style: dashed; }
/* The page, live (Design library 5): Used in, the markup to copy, the search */
.dl-used { margin: 0 0 var(--space-3); color: var(--text-2); font-size: var(--type-small); }
.dl-used__label { margin-right: var(--space-1); color: var(--text-3); font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.04em; }
.dl-used__none { color: var(--text-3); }
.dl-markup { margin-top: var(--space-3); font-size: var(--type-small); }
.dl-markup summary { color: var(--text-2); cursor: pointer; }
.dl-markup__state { margin-top: var(--space-2); }
.dl-markup__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-1); color: var(--text-3); font-size: var(--type-label); }
.dl-markup__code { max-height: 220px; margin: 0; padding: var(--space-2) var(--space-3); overflow: auto; border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-0); color: var(--text-2); font-family: var(--font-mono); font-size: var(--type-label); white-space: pre-wrap; overflow-wrap: anywhere; }
.dl-search { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-2) 0; background: var(--surface-0); }
.dl-search .search-box { flex: 1; max-width: 420px; }
.dl-search__count { color: var(--text-2); font-size: var(--type-small); }
/* Light and dark (Design library 6): the theme in use, and values the same in both */
.dl-tokens__now { margin-left: var(--space-1); padding: 0 var(--space-1); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-label); }
.dl-tokens__same { color: var(--text-3); }
/* App icon (Design library 7): the one mark at three sizes */
.dl-icon { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-5); }
.dl-icon__size { display: grid; justify-items: center; gap: var(--space-2); margin: 0; }
.dl-icon__size figcaption { color: var(--text-3); font-size: var(--type-label); }

/* Cloud and devices: the Sync badge, one quiet line at the foot of the sidebar (Synced, 3 waiting, Offline),
   always a shape with its words: a filled circle, an open ring, a dashed ring. Settings › Cloud around it. */
.cloud-badge-slot { display: flex; align-items: center; min-height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-m); color: var(--text-3); text-decoration: none; }
.cloud-badge-slot:hover { background: var(--surface-2); color: var(--text-2); }
.cloud-badge { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-3); font-size: var(--type-small); white-space: nowrap; }
.cloud-badge__shape { flex: none; width: 9px; height: 9px; box-sizing: border-box; border: 1.5px solid var(--text-2); border-radius: var(--radius-full); }
.cloud-badge--synced .cloud-badge__shape { background: var(--text-2); }
.cloud-badge--offline .cloud-badge__shape { border-style: dashed; border-color: var(--text-3); }
.cloud-badge--waiting .cloud-badge__words { color: var(--text-2); }
.cloud-status { display: grid; gap: var(--space-1); margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border: var(--line-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface-1); }
.cloud-status__head { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.cloud-status__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.cloud-connect, .cloud-code { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.cloud-tables { margin-top: var(--space-2); }
.cloud-tables summary { cursor: pointer; }
.cloud-status p { margin: 0; }

/* Conflict card (Cloud and devices 2): one row changed on two devices; yours a solid line, theirs dashed. */
.cloud-clash { display: grid; gap: var(--space-2); margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-1); }
.cloud-clash__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.cloud-clash__mark { position: relative; flex: none; width: 14px; height: 10px; }
.cloud-clash__mark::before, .cloud-clash__mark::after { content: ""; position: absolute; top: 0; width: 10px; height: 10px; box-sizing: border-box; border: 1.5px solid var(--text-1); border-radius: var(--radius-full); }
.cloud-clash__mark::before { left: 0; }
.cloud-clash__mark::after { left: 4px; border-style: dashed; }
.cloud-clash__merged { margin: 0; }
.cloud-clash__field { display: grid; gap: var(--space-1); }
.cloud-clash__name { color: var(--text-2); font-size: var(--type-label); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; }
.cloud-clash__sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); }
.cloud-clash__side { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); min-width: 0; }
.cloud-clash__side--theirs { border-style: dashed; }
.cloud-clash__who { color: var(--text-3); font-size: var(--type-label); }
.cloud-clash__value { color: var(--text-1); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow: auto; }
.cloud-clash__actions { display: flex; gap: var(--space-2); }
.cloud-order { margin: var(--space-2) 0 0; }
.cloud-recent { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.cloud-recent__seq { font-variant-numeric: tabular-nums; color: var(--text-2); }

/* Device row (Cloud and devices 3): a computer, phone or web app by its shape; Active a filled dot, Standby an open ring. */
.cloud-devices { display: grid; margin: var(--space-3) 0; }
.cloud-device { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--line-width) solid var(--line); }
.cloud-device .list-row__stack { flex: 1; min-width: 0; }
.cloud-device__kind { flex: none; box-sizing: border-box; border: 1.5px solid var(--text-2); }
.cloud-device__kind--computer { position: relative; width: 16px; height: 12px; border-radius: var(--radius-xs); }
.cloud-device__kind--computer::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: -4.5px; height: 1.5px; background: var(--text-2); }
.cloud-device__kind--phone { width: 9px; height: 15px; border-radius: var(--radius-xs); }
.cloud-device__kind--web { width: 14px; height: 14px; border-radius: var(--radius-full); }
.cloud-device__state { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-2); font-size: var(--type-small); white-space: nowrap; }
.cloud-device__dot { width: 8px; height: 8px; box-sizing: border-box; border: 1.5px solid var(--text-2); border-radius: var(--radius-full); }
.cloud-device--active .cloud-device__dot { background: var(--text-1); border-color: var(--text-1); }
.cloud-device--active .cloud-device__state { color: var(--text-1); }
.cloud-moves { margin: 0 0 var(--space-2); padding-left: var(--space-5); color: var(--text-2); font-size: var(--type-small); }
.cloud-standby { margin: var(--space-2) 0 0; }
.cloud-verified { margin: var(--space-3) 0 var(--space-2); }
.cloud-backup { max-height: 360px; overflow: auto; }

/* Four walls (Cloud and devices 4): Settings › Cloud › Security, four Check rows (the library's). */
.cloud-security { margin: var(--space-5) 0 var(--space-3); }
.cloud-walls__title { margin: 0 0 var(--space-1); font-size: var(--type-body-large); }
.cloud-walls { margin: var(--space-2) 0; }

/* Code field (Cloud and devices 5): six boxes for the code from my email. */
.code-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.code-field__label { padding: 0; margin-bottom: var(--space-2); color: var(--text-2); font-size: var(--type-small); }
.code-field__boxes { display: flex; gap: var(--space-2); }
.code-field__box { width: 40px; height: 48px; box-sizing: border-box; padding: 0; border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-1); color: var(--text-1); font: inherit; font-size: var(--type-heading); text-align: center; font-variant-numeric: tabular-nums; }
.code-field__box:focus { outline: 2px solid var(--text-2); outline-offset: 1px; }

/* Lock chip (Cloud and devices 6): only my computers read it. A padlock and words, never a button. */
.cloud-lock { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-s); color: var(--text-2); font-size: var(--type-label); line-height: 1.6; white-space: nowrap; vertical-align: 0.1em; }
.cloud-lock__mark { position: relative; flex: none; width: 8px; height: 6px; margin-top: var(--space-half); box-sizing: border-box; border: 1.5px solid currentColor; border-radius: var(--radius-xs); }
.cloud-lock__mark::before { content: ""; position: absolute; left: 0.5px; bottom: 4.5px; width: 4px; height: 4px; box-sizing: border-box; border: 1.5px solid currentColor; border-bottom: 0; border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.cloud-private-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.cloud-private { margin-left: auto; }
.cloud-keys { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0; }
.cloud-key { display: inline-flex; align-items: center; gap: var(--space-2); }
.cloud-vault { margin: var(--space-4) 0; }
.cloud-device--waiting .cloud-device__dot { border-style: dashed; }

/* Pair card (Cloud and devices 10): a phone asks to pair at home: Allow or Not now. */
.cloud-direct { margin: var(--space-4) 0; }
.cloud-pair { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; padding: var(--space-3) var(--space-4); border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-1); }
.cloud-pair .list-row__stack { flex: 1; min-width: 0; }
.cloud-pair__actions { display: flex; gap: var(--space-2); }

/* A new computer (Cloud and devices 11): the first sync's lines are the library's Count check. */
.cloud-restore { margin: var(--space-3) 0; }
.cloud-restore__done { margin: var(--space-2) 0; font-weight: var(--weight-medium); }
.cloud-recovery__value { font-family: var(--font-mono); letter-spacing: 0.05em; }
.cloud-recover { display: grid; gap: var(--space-2); max-width: 420px; margin: var(--space-3) 0; }