/* The title face, self-hosted because the CSP serves fonts from 'self' only. Latin subset, 14 KB. */
@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/marcellus-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  /* Japanese greydients, 24 Sep 2026 (over mineral calm; Marcus: "the page looks pale and flat",
     "I love those Japanese gradients"). Kinarīro paper on a cool shiro-nezu ground, shiro nezu and
     usuku mo nezu slabs, sabi-nezu ink, and minato nezumi for links, selection and focus. The zone
     greydients (sidebar, header, Now, key panel, slabs, graph) are tokens in the block at the end.
     Every text pair is AA on every stop it sits on; DESIGN.md records the check. */
  --canvas: #F3F3F3;
  --surface: oklch(0.984 0.007 97);
  --surface-strong: oklch(0.993 0.004 97);
  --surface-muted: oklch(0.955 0.006 170);
  /* The tonal slab a card becomes once it loses its outline: a step of sand below the paper. */
  --slab: oklch(0.952 0.007 175);
  --slab-strong: oklch(0.925 0.01 178);
  --ink: oklch(0.27 0.014 218);
  --ink-soft: oklch(0.41 0.018 214);
  --ink-faint: oklch(0.47 0.016 210);
  --line: oklch(0.91 0.008 180);
  --line-strong: oklch(0.84 0.012 185);
  /* Form fields keep a real boundary (WCAG 1.4.11, 3:1), unlike every other line here. */
  --field-line: oklch(0.6 0.016 205);
  --accent: oklch(0.46 0.08 205);
  --accent-soft: oklch(0.93 0.025 195);
  --now-tint: oklch(0.9 0.035 124);
  /* Daylight through a high window: the wash at the top right of the page. */
  --header-tint: oklch(0.935 0.012 150);
  --danger: oklch(0.5 0.12 32);
  --danger-soft: oklch(0.95 0.02 40);
  --warning: oklch(0.5 0.1 50);
  --warning-soft: oklch(0.95 0.025 55);
  --success: oklch(0.49 0.07 160);
  --focus: oklch(0.5 0.09 205);
  --domain-work: oklch(0.45 0.02 240);
  --domain-family: oklch(0.58 0.08 42);
  --domain-sport: oklch(0.54 0.05 225);
  --domain-practice: oklch(0.54 0.05 310);
  /* One hue per entity type, shared by the graph's nodes and every chip that names an entity.
     OKLCH so the four sit at one perceived lightness and differ only in hue: violet people, teal
     companies, amber projects, blue meetings. */
  --entity-person: oklch(0.52 0.13 300);
  --entity-company: oklch(0.52 0.09 185);
  --entity-project: oklch(0.54 0.12 60);
  --entity-meeting: oklch(0.52 0.12 250);
  --entity-link: oklch(0.52 0.10 140);
  /* Stage 6 node types. Task sits between person and project on the wheel, far enough from both
     to read without its box; time and moment fill the two widest remaining gaps. */
  --entity-task: oklch(0.53 0.14 22);
  --entity-time-entry: oklch(0.55 0.10 100);
  --entity-moment: oklch(0.52 0.12 338);
  /* Each sky's middle colour (public/skies), shown until its tile loads and used flat
     wherever a texture would be too small to read: the graph at overview scale, the nav's pebble.
     Natural stone, so one value in both themes. */
  --stone-person: #f4ccd8;
  --stone-company: #c6e1f0;
  --stone-project: #f6cca8;
  --stone-meeting: #cedbd3;
  --stone-task: #eec4cd;
  --stone-link: #d0e4e4;
  --stone-time-entry: #f1c2d0;
  --stone-moment: #ffc6c2;
  --radius-sm: 10px;
  --radius: 16px;
  /* River-stone radii: a card that has lost its outline is a worn slab, and its corners say so. */
  --radius-slab: 22px;
  /* The ground the graph's stones lie on: dry sand, a step below the page. */
  --riverbed: oklch(0.925 0.01 170);
  /* Titles and names: Marcellus, a flared glyphic serif in the incised-capital family (OFL, self-hosted,
     public/fonts/README.md). UI text keeps the sans; eyebrows keep the mono. */
  --font-title: "Marcellus", "Optima", "Candara", Georgia, serif;
  --font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  /* The type scale: six sizes and nothing else (UX audit, 26 Sep 2026: 78 declared sizes, 19 of
     them on Today, 1px apart, read as noise rather than hierarchy). 11 mono labels and meta; 13 body
     and rows; 15 row and card titles; 19 section heads and entity H2; 28 the entity H1 and the Now
     title; 40 the page H1. A new rule picks one of these; a size between them is a bug. */
  --fs-11: 11px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-19: 19px;
  --fs-28: 28px;
  --fs-40: 40px;
  /* Motion is unhurried where it already exists, and none at all under prefers-reduced-motion. */
  --calm-duration: 240ms;
  --calm-ease: cubic-bezier(0.33, 0, 0.2, 1);
  --sidebar: 156px;
  --detail: 390px;
  --touch: 44px;
  --shadow-dialog: 0 24px 80px rgba(0, 0, 0, 0.16);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/*
 * Dark is NIGHT GREYDIENTS (24 Sep 2026): sabi-nezu and minato-nezumi depths for the grounds, kinarīro
 * ink, and the zone greydients falling from nurebairo through indigo (tokens in the block at the end).
 *
 * Two selectors with one set of values: the system preference, unless the page has been told to stay
 * light, and an explicit `data-theme="dark"` for a future manual override (DESIGN.md, open questions).
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: oklch(0.165 0.012 230);
    --surface: oklch(0.215 0.013 218);
    --surface-strong: oklch(0.255 0.014 215);
    --surface-muted: oklch(0.2 0.012 220);
    --slab: oklch(0.25 0.014 214);
    --slab-strong: oklch(0.285 0.015 212);
    --ink: oklch(0.935 0.008 97);
    --ink-soft: oklch(0.8 0.012 170);
    --ink-faint: oklch(0.72 0.012 180);
    --line: oklch(0.29 0.013 214);
    --line-strong: oklch(0.37 0.015 212);
    --field-line: oklch(0.58 0.018 205);
    --accent: oklch(0.8 0.08 198);
    --accent-soft: oklch(0.31 0.03 205);
    --now-tint: oklch(0.3 0.035 200);
    --header-tint: oklch(0.25 0.025 215);
    --danger: oklch(0.78 0.1 30);
    --danger-soft: oklch(0.3 0.04 30);
    --warning: oklch(0.8 0.1 55);
    --warning-soft: oklch(0.3 0.035 50);
    --success: oklch(0.8 0.08 160);
    --focus: oklch(0.8 0.085 198);
    --domain-work: oklch(0.76 0.03 230);
    --domain-family: oklch(0.74 0.08 42);
    --domain-sport: oklch(0.76 0.06 225);
    --domain-practice: oklch(0.74 0.06 310);
    --riverbed: oklch(0.18 0.014 222);
    --entity-person: oklch(0.78 0.10 300);
    --entity-company: oklch(0.78 0.08 185);
    --entity-project: oklch(0.80 0.10 65);
    --entity-meeting: oklch(0.78 0.09 250);
    --entity-link: oklch(0.78 0.08 140);
    --entity-task: oklch(0.78 0.11 22);
    --entity-time-entry: oklch(0.80 0.09 100);
    --entity-moment: oklch(0.78 0.10 338);
    --shadow-dialog: 0 24px 80px rgba(0, 0, 0, 0.44);
  }

}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: oklch(0.165 0.012 230);
  --surface: oklch(0.215 0.013 218);
  --surface-strong: oklch(0.255 0.014 215);
  --surface-muted: oklch(0.2 0.012 220);
  --slab: oklch(0.25 0.014 214);
  --slab-strong: oklch(0.285 0.015 212);
  --ink: oklch(0.935 0.008 97);
  --ink-soft: oklch(0.8 0.012 170);
  --ink-faint: oklch(0.72 0.012 180);
  --line: oklch(0.29 0.013 214);
  --line-strong: oklch(0.37 0.015 212);
  --field-line: oklch(0.58 0.018 205);
  --accent: oklch(0.8 0.08 198);
  --accent-soft: oklch(0.31 0.03 205);
  --now-tint: oklch(0.3 0.035 200);
  --header-tint: oklch(0.25 0.025 215);
  --danger: oklch(0.78 0.1 30);
  --danger-soft: oklch(0.3 0.04 30);
  --warning: oklch(0.8 0.1 55);
  --warning-soft: oklch(0.3 0.035 50);
  --success: oklch(0.8 0.08 160);
  --focus: oklch(0.8 0.085 198);
  --domain-work: oklch(0.76 0.03 230);
  --domain-family: oklch(0.74 0.08 42);
  --domain-sport: oklch(0.76 0.06 225);
  --domain-practice: oklch(0.74 0.06 310);
  --riverbed: oklch(0.18 0.014 222);
  --entity-person: oklch(0.78 0.10 300);
  --entity-company: oklch(0.78 0.08 185);
  --entity-project: oklch(0.80 0.10 65);
  --entity-meeting: oklch(0.78 0.09 250);
  --entity-link: oklch(0.78 0.08 140);
  --entity-task: oklch(0.78 0.11 22);
  --entity-time-entry: oklch(0.80 0.09 100);
  --entity-moment: oklch(0.78 0.10 338);
  --shadow-dialog: 0 24px 80px rgba(0, 0, 0, 0.44);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--canvas);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-size: var(--fs-15);
  line-height: 1.45;
}

button,
input,
textarea,
select {
  color: inherit;
  font: inherit;
}

button,
summary,
select,
input[type="checkbox"] {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

a {
  color: var(--accent);
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 4px;
  font-size: var(--fs-28);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

h2 {
  margin-bottom: 0;
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  transform: translateY(-160%);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: white;
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 78%, white);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.muted {
  color: var(--ink-soft);
}

.block {
  display: block;
}

.eyebrow {
  margin-bottom: 7px;
  color: var(--ink-soft);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.entry-shell {
  display: grid;
  min-height: 100vh;
  padding: 24px;
  place-items: center;
}

.entry-shell--signed-out {
  background: var(--canvas);
}

.entry-card {
  width: min(100%, 460px);
  padding: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.entry-card--wide {
  width: min(100%, 540px);
  padding-block: 54px;
}

.entry-card--quiet {
  background: transparent;
}

.entry-card--unlock {
  width: min(100%, 520px);
}

.entry-mark {
  width: 58px;
  height: 58px;
  margin: 0 0 24px -8px;
}

/* Ink (DESIGN.md, "Ink"). Brush drawings from public/ink/, drawn by scripts/draw-ink.py. Each is a
   mask over `currentColor`, so one file inks sumi by day and kinari by night and the sidebar's light
   type without a filter. Ink is figure, never ground: it sits on paper or a flat slab, never across a
   greydient's transition, and never carries text. */
:root { --ink-sumi: var(--jg-roiro, #2b2b2b); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink-sumi: var(--jg-kinariiro, #fbfaf5); }
}
:root[data-theme="dark"] { --ink-sumi: var(--jg-kinariiro, #fbfaf5); }

.ink, .brand-mark, .entry-mark {
  display: inline-block;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ink-src, none) center / contain no-repeat;
  mask: var(--ink-src, none) center / contain no-repeat;
}
.brand-mark, .entry-mark { -webkit-mask-image: url("ink/cairn-mark.svg"); mask-image: url("ink/cairn-mark.svg"); }
.entry-mark { display: block; color: var(--ink-sumi); }
.ink-mark-16 { -webkit-mask-image: url("ink/cairn-mark-16.svg"); mask-image: url("ink/cairn-mark-16.svg"); }

/* Empty states: `inkEmpty(name)` in web/ink.js. About 96px, quiet, above one sentence. */
.ink-empty {
  display: block;
  width: 96px;
  aspect-ratio: 3 / 2;
  margin: 0 0 12px;
  color: var(--ink-sumi);
  opacity: .88;
}
.ink-empty--nothing { -webkit-mask-image: url("ink/empty-nothing.svg"); mask-image: url("ink/empty-nothing.svg"); }
.ink-empty--balance { -webkit-mask-image: url("ink/empty-balance.svg"); mask-image: url("ink/empty-balance.svg"); }
.ink-empty--stale { -webkit-mask-image: url("ink/empty-stale.svg"); mask-image: url("ink/empty-stale.svg"); }
.ink-empty--path { -webkit-mask-image: url("ink/empty-path.svg"); mask-image: url("ink/empty-path.svg"); }
.ink-empty--all-clear {
  width: 160px;
  aspect-ratio: 4 / 3;
  -webkit-mask-image: url("ink/all-clear.svg");
  mask-image: url("ink/all-clear.svg");
}
.ink-empty--center { margin-inline: auto; }

/* The unlock screen: an open ensō with a small cairn in it, on the card's flat paper. */
.ink-unlock {
  display: block;
  width: 136px;
  aspect-ratio: 4 / 3;
  margin: -10px 0 16px -14px;
  color: var(--ink-sumi);
  -webkit-mask-image: url("ink/unlock.svg");
  mask-image: url("ink/unlock.svg");
}

.entry-copy {
  max-width: 42ch;
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-15);
}

.entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.privacy-note {
  margin: 24px 0 0;
  color: var(--ink-faint);
  font-size: var(--fs-13);
}

.fingerprint {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  margin: 18px 0 0;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-13);
}

.fingerprint--small {
  align-self: flex-start;
  margin: 4px 0 8px;
  font-size: var(--fs-11);
}

.skeleton {
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted);
}

.skeleton--line {
  width: 100%;
  height: 14px;
  margin-top: 26px;
  animation: breathe 1.7s ease-in-out infinite;
}

.skeleton--short {
  width: 64%;
  margin-top: 11px;
  animation-delay: 180ms;
}

@keyframes breathe {
  50% { opacity: 0.46; }
}

.button,
.capture-button,
.window-button {
  display: inline-flex;
  min-height: var(--touch);
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--ink);
  cursor: pointer;
  font-weight: 650;
  line-height: 1.1;
  text-decoration: none;
}

.button:hover,
.capture-button:hover,
.window-button:hover {
  border-color: var(--ink-soft);
}

.button:disabled,
.capture-button:disabled,
.window-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.button--primary {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}

.button--secondary {
  background: var(--surface);
}

.button--dark {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--canvas);
}

.button--large {
  min-height: 50px;
  padding-inline: 21px;
}

.button--small {
  min-height: 36px;
  padding: 7px 11px;
  font-size: var(--fs-13);
}

.button--full {
  width: 100%;
}

.text-button,
.menu-action,
.nav-item,
.task-title-button,
.next-marker-title,
.icon-button,
.update-title,
.toast-action {
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.text-button {
  min-height: var(--touch);
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}

.text-button:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.text-button--danger {
  color: var(--danger);
}

.unlock-form {
  display: grid;
  gap: 18px;
  margin-top: 25px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.unlock-alternate {
  display: grid;
  gap: 4px;
  margin-top: 20px;
}

.field {
  display: grid;
  gap: 7px;
}

.field-label {
  color: var(--ink-soft);
  font-size: var(--fs-13);
  font-weight: 650;
}

.field-hint {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--fs-13);
}

.text-input,
.textarea,
.select,
.capture-input,
.detail-title-input,
.mobile-view-select {
  width: 100%;
  min-height: var(--touch);
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--surface-strong);
}

.text-input:focus,
.textarea:focus,
.select:focus,
.capture-input:focus,
.detail-title-input:focus,
.mobile-view-select:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 16%, transparent);
}

.text-input--key {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-13);
}

.textarea {
  min-height: 98px;
  resize: vertical;
}

.check-row {
  display: flex;
  min-height: var(--touch);
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.check-row input {
  width: 19px;
  height: 19px;
  accent-color: var(--accent);
}

.inline-error {
  margin: 0;
  color: var(--danger);
  font-size: var(--fs-13);
}

.noscript {
  margin: 2rem;
  padding: 1rem;
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
}

.app-shell {
  display: grid;
  width: min(1320px, calc(100% - 56px));
  min-height: calc(100vh - 64px);
  margin: 32px auto;
  border: 1px solid color-mix(in srgb, var(--surface-strong) 90%, transparent);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 35px 80px -45px color-mix(in srgb, var(--accent) 30%, transparent);
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  min-height: calc(100vh - 66px);
  height: auto;
  align-self: stretch;
  border-radius: 28px 0 0 28px;
  flex-direction: column;
  padding: 22px 16px 18px;
  border-right: 1px solid var(--line);
  background: var(--surface-muted);
}

.brand {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding-inline: 8px;
}

.brand--compact {
  padding: 0;
}

.brand-mark {
  width: 35px;
  height: 35px;
}

.brand-name {
  font-size: var(--fs-15);
  font-weight: 720;
  letter-spacing: -0.02em;
}

.sidebar-nav {
  display: grid;
  gap: 2px;
  margin-top: 30px;
}

.nav-item {
  min-height: 42px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: var(--fs-15);
}

.nav-item:hover {
  background: color-mix(in srgb, var(--surface-strong) 66%, transparent);
  color: var(--ink);
}

.nav-item.is-current {
  background: var(--surface-strong);
  color: var(--ink);
  font-weight: 680;
}

.sidebar-bottom {
  display: grid;
  margin-top: auto;
  padding: 14px 8px 0;
  border-top: 1px solid var(--line);
}

.sidebar-account {
  display: grid;
  min-width: 0;
}

.account-name,
.account-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-name {
  font-size: var(--fs-13);
  font-weight: 650;
}

.account-email {
  color: var(--ink-faint);
  font-size: var(--fs-11);
}

.text-button--sidebar {
  justify-self: start;
  min-height: 34px;
  font-size: var(--fs-13);
}

.main-column {
  width: min(100%, 1040px);
  min-width: 0;
  padding: 38px clamp(24px, 6vw, 70px) 80px;
}

.mobile-bar {
  display: none;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.page-eyebrow {
  margin-bottom: 5px;
}

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

.freshness {
  color: var(--ink-faint);
  font-size: var(--fs-11);
  white-space: nowrap;
}

.freshness.is-stale {
  color: var(--danger);
  font-weight: 650;
}

.account-menu {
  position: relative;
}

.account-menu > summary {
  display: grid;
  min-width: var(--touch);
  min-height: var(--touch);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 0;
  list-style: none;
  place-items: center;
}

.account-menu > summary::before {
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "";
}

.account-menu > summary::after {
  width: 16px;
  height: 7px;
  margin-top: -5px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  content: "";
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

.account-menu-panel {
  position: absolute;
  z-index: 15;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: 240px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--ink) 12%, transparent);
}

.account-menu-panel > span:not(.fingerprint) {
  color: var(--ink-faint);
  font-size: var(--fs-11);
}

.menu-action {
  min-height: 39px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.menu-action:hover {
  color: var(--ink);
}

.menu-action--danger {
  color: var(--danger);
}

.page-content {
  width: min(100%, 760px);
}

.overview-signals {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-signal {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.overview-signal strong {
  font-size: var(--fs-13);
}

.overview-signal span {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: var(--fs-11);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-signal .overview-facts {
  margin-top: 4px;
  color: var(--ink-faint);
  font-size: var(--fs-11);
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

.attention-overview {
  display: block;
  padding: 0;
}

.attention-overview[open] {
  grid-column: 1 / -1;
}

.attention-overview > summary {
  min-height: 54px;
  padding: 11px 13px;
  cursor: pointer;
}

.attention-overview > summary strong,
.attention-overview > summary span {
  display: block;
}

.attention-overview > summary span {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: var(--fs-11);
}

.attention-freshness {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 9px 13px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: var(--fs-11);
}

.attention-freshness span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.attention-list {
  margin: 0;
  padding: 0 13px 3px;
  list-style: none;
}

.attention-item {
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.attention-item:first-child {
  border-top: 0;
}

.attention-source-link,
.attention-item-title {
  color: var(--ink);
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.3;
  text-underline-offset: 3px;
}

.attention-item p {
  margin: 4px 0;
  color: var(--ink-soft);
  font-size: var(--fs-13);
}

.attention-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  color: var(--ink-faint);
  font-size: var(--fs-11);
}

.attention-item-meta span,
.attention-item-meta time {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.attention-task-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: var(--fs-11);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.attention-empty {
  margin: 0;
  padding: 10px 13px 13px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--fs-11);
}

.page-intro {
  color: var(--ink-soft);
}

.notice {
  display: flex;
  min-height: var(--touch);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  font-size: var(--fs-13);
}

.notice--warning {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--line));
  background: var(--warning-soft);
  color: var(--warning);
}

.notice--stale,
.notice--conflict {
  width: min(100%, 760px);
}

.notice--stale {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  background: var(--danger-soft);
}

.notice--conflict {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--line));
  background: var(--warning-soft);
}

.week-strip {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 15px;
  margin-bottom: 14px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--fs-13);
}

.week-label {
  color: var(--ink);
  font-weight: 680;
}

.rank-list {
  display: flex;
  gap: 20px;
  margin: 0;
  padding-left: 20px;
  text-transform: capitalize;
}

.week-cost {
  overflow: hidden;
  margin-left: auto;
  color: var(--ink-faint);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.next-marker {
  margin: 0 0 18px;
  padding: 18px 20px 20px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-strong);
}

.next-marker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.window-controls {
  display: flex;
  overflow-x: auto;
  gap: 3px;
  padding: 2px;
}

.window-button {
  min-width: 42px;
  min-height: 34px;
  padding: 6px 8px;
  border-color: transparent;
  background: transparent;
  color: var(--ink-faint);
  font-size: var(--fs-11);
}

.window-button.is-current {
  border-color: var(--line);
  background: var(--surface-muted);
  color: var(--ink);
}

.next-marker-body {
  margin-top: 12px;
}

.next-marker-title {
  max-width: 100%;
  color: var(--ink);
  font-size: var(--fs-19);
  font-weight: 680;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.next-marker-title:hover,
.task-title-button:hover,
.update-title:hover {
  color: var(--accent);
}

.next-marker-reason {
  max-width: 62ch;
  margin: 7px 0 10px;
  color: var(--ink-soft);
}

.next-marker-empty {
  margin-top: 10px;
  color: var(--ink-soft);
}

.capture {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0 0 32px;
}

.domain-sections {
  display: grid;
  gap: 30px;
}

.domain-section {
  min-width: 0;
}

.domain-heading {
  display: grid;
  min-height: 34px;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--line);
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.domain-heading h2 {
  color: var(--ink);
  font-size: var(--fs-15);
  font-weight: 690;
  letter-spacing: -0.015em;
  text-transform: none;
}

.domain-heading-marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--domain-work);
}

.domain-section[data-domain="family"] .domain-heading-marker { background: var(--domain-family); }
.domain-section[data-domain="sport"] .domain-heading-marker { background: var(--domain-sport); }
.domain-section[data-domain="practice"] .domain-heading-marker { background: var(--domain-practice); }

.domain-subtitle {
  margin: 12px 0 2px;
  color: var(--ink-faint);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.domain-empty {
  margin: 0;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: var(--fs-13);
}

.task-groups {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.task-group {
  padding: 10px 0 4px;
  border-top: 1px solid var(--line);
}

.task-group:first-child {
  border-top: none;
  padding-top: 4px;
}

.group-heading {
  margin: 0 0 4px;
  padding: 2px 4px;
  font-size: var(--fs-11);
  font-weight: 640;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.task-tree {
  padding: 4px 0 12px;
}

.task-tree--detail {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 6px;
}

.task-tree--detail > .eyebrow {
  margin: 0 0 6px;
}

.scope-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.scope-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--fs-13);
}

.scope-breadcrumb .crumb {
  color: var(--ink-faint);
}

.scope-breadcrumb .crumb--current {
  color: var(--ink);
  font-weight: 620;
}

.scope-breadcrumb .crumb-sep {
  color: var(--line-strong);
}

.rollup-pill {
  font-family: ui-monospace, monospace;
  font-size: var(--fs-11);
  color: var(--ink-soft);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}

.scope-breadcrumb .rollup-pill {
  margin-left: 8px;
}

.scope-next {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--fs-13);
}

.scope-next .eyebrow {
  margin: 0;
}

.scope-next-title {
  background: none;
  border: none;
  padding: 0;
  color: var(--focus, var(--ink));
  font-weight: 620;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/**
 * One line per node, indentation carrying the structure — the thing this tree is for. `<details>`
 * gives the collapse for free; the row inside `<summary>` is flex so the checkbox, title and
 * disclosure marker sit on one line at every depth.
 */
.tree-branch,
.tree-row {
  list-style: none;
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 2px 4px;
  border-radius: 6px;
  font-size: var(--fs-13);
}

.tree-row--branch {
  cursor: pointer;
}

.tree-row--branch::-webkit-details-marker {
  display: none;
}

.tree-row--branch::before {
  content: '▾';
  font-size: var(--fs-11);
  color: var(--ink-faint);
  width: 10px;
  flex: none;
  text-align: center;
}

.tree-branch:not([open]) > .tree-row--branch::before {
  content: '▸';
}

.tree-row:hover {
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
}

.tree-checkbox {
  width: 15px;
  height: 15px;
  flex: none;
  margin: 0;
}

.tree-checkbox--placeholder {
  display: inline-block;
  width: 15px;
}

.tree-title {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-row--branch .tree-title {
  font-weight: 560;
}

.tree-node--done .tree-title {
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}

.tree-node--anchor .tree-title {
  color: var(--focus);
  font-weight: 700;
}

.tree-children {
  margin-left: 9px;
  padding-left: 11px;
  border-left: 1px solid var(--line);
}

.tree-ref-note {
  font-size: var(--fs-11);
  color: var(--ink-faint);
  font-style: italic;
  white-space: nowrap;
}

.recent-completed {
  margin-top: 5px;
  color: var(--ink-soft);
}

.recent-completed > summary {
  min-height: var(--touch);
  padding: 12px 4px;
  cursor: pointer;
  font-size: var(--fs-13);
  font-weight: 620;
}

.task-list--completed .task-title-button {
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}

.task-row--past {
  grid-template-columns: auto minmax(0, 1fr);
}

.past-status {
  min-width: 3.4rem;
  color: var(--ink-faint);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.capture-input {
  min-height: 48px;
  padding-inline: 15px;
  border-color: var(--line);
  background: var(--surface);
}

.capture-button {
  min-height: 48px;
  padding-inline: 18px;
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.task-section {
  margin-top: 30px;
}

.section-heading {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--ink-soft);
}

.section-count {
  display: grid;
  min-width: 26px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-faint);
  font-size: var(--fs-11);
  place-items: center;
}

.task-list,
.time-list,
.updates-list,
.event-history ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-row {
  position: relative;
  display: grid;
  min-height: 64px;
  align-items: start;
  padding: 11px 34px 11px 17px;
  border-top: 1px solid var(--line);
  grid-template-columns: 4px 18px 24px minmax(0, 1fr);
  gap: 11px;
}

/*
 * The grip is quiet, not hidden — corrected 2026-09-01.
 *
 * It shipped at `opacity: 0`, revealed only on row hover, and the argument for that was sound: a
 * permanent handle on every row advertises manual reordering as the way the board is meant to be
 * used, when it is the once-in-a-while repair. But zero is not quiet. Marcus, who asked for the
 * feature, could not find it on his own board and reported it as missing — and on a laptop with no
 * cursor over a row there was nothing to find.
 *
 * So the argument keeps its value and the number changes: faint at rest, full on hover or focus.
 * A gesture that cannot be discovered is a gesture that does not exist, however carefully it was
 * built.
 */
.task-grip {
  width: 18px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font-size: var(--fs-15);
  line-height: 1;
  cursor: grab;
  opacity: 0.22;
  touch-action: none;
  transition: opacity var(--calm-duration) var(--calm-ease);
}

.task-row:hover .task-grip,
.task-grip:focus-visible {
  opacity: 1;
}

.task-grip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.task-row.is-dragging {
  background: var(--surface-strong);
  box-shadow: 0 1px 0 var(--line), 0 -1px 0 var(--line);
  opacity: 0.92;
}

.task-row.is-dragging .task-grip {
  opacity: 1;
  cursor: grabbing;
}

@media (hover: none) {
  /* No hover to reveal it, so touch gets the higher resting value. */
  .task-grip { opacity: 0.55; }
}

.section-hint {
  margin: 0 0 6px;
  padding: 0 0 0 29px;
  color: var(--ink-faint);
  font-size: var(--fs-13);
  line-height: 1.35;
}

.task-row:last-child {
  border-bottom: 1px solid var(--line);
}

.task-row:hover {
  background: color-mix(in srgb, var(--surface-strong) 62%, transparent);
}

.task-row.is-held {
  background: color-mix(in srgb, var(--surface-muted) 55%, transparent);
}

.task-row.is-pending {
  opacity: 0.58;
}

.domain-marker {
  width: 3px;
  height: 29px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--domain-work);
}

.task-row[data-domain="family"] .domain-marker { background: var(--domain-family); }
.task-row[data-domain="sport"] .domain-marker { background: var(--domain-sport); }
.task-row[data-domain="practice"] .domain-marker { background: var(--domain-practice); }

.task-checkbox {
  width: 19px;
  height: 19px;
  margin: 4px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.task-checkbox:disabled {
  cursor: not-allowed;
}

.task-copy {
  min-width: 0;
}

.task-title-button {
  display: block;
  width: 100%;
  min-height: 25px;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--fs-15);
  font-weight: 590;
  line-height: 1.32;
  text-overflow: ellipsis;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 13px;
  margin-top: 5px;
  color: var(--ink-faint);
  font-size: var(--fs-11);
}

.meta-project {
  color: var(--ink-soft);
}

.meta-overdue {
  color: var(--danger);
  font-weight: 650;
}

.agent-badge {
  color: var(--accent);
  font-weight: 650;
}

.held-note {
  margin: 4px 0 0;
  color: var(--warning);
  font-size: var(--fs-13);
}

.row-arrow {
  position: absolute;
  top: 17px;
  right: 12px;
  color: var(--ink-faint);
  font-size: var(--fs-19);
}

.empty-state {
  width: min(100%, 760px);
  margin-top: 34px;
  padding: 28px;
  border: 0;
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-align: center;
}

.empty-state h2 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: var(--fs-15);
  letter-spacing: -0.01em;
  text-transform: none;
}

.empty-state p {
  margin-bottom: 0;
}

.empty-state .button {
  margin-top: 18px;
}

.timer-strip {
  display: grid;
  width: min(100%, 760px);
  min-height: 56px;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 9px 11px 9px 15px;
  border: 1px solid color-mix(in srgb, var(--success) 55%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.timer-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 12%, transparent);
}

.timer-copy {
  display: grid;
}

.timer-copy span {
  color: var(--ink-soft);
  font-size: var(--fs-11);
}

.updates-list {
  margin-top: 24px;
  border-top: 1px solid var(--line);
}

.update-row {
  display: grid;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
  grid-template-columns: 112px minmax(0, 1fr) auto auto;
}

.update-source,
.update-kind,
.update-row time {
  color: var(--ink-faint);
  font-size: var(--fs-11);
}

.update-source {
  color: var(--accent);
  font-weight: 650;
}

.update-title {
  overflow: hidden;
  font-weight: 590;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-total {
  display: grid;
  margin: 8px 0 32px;
  padding: 22px 0 26px;
  border-bottom: 1px solid var(--line);
}

.time-total strong {
  font-size: var(--fs-40);
  font-weight: 610;
  letter-spacing: -0.06em;
  line-height: 1;
}

.time-total > span {
  margin-top: 10px;
  color: var(--ink-soft);
}

.time-list {
  border-top: 1px solid var(--line);
}

.time-list li {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.time-list strong {
  font-variant-numeric: tabular-nums;
}

.time-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 20px;
  color: var(--ink-faint);
  font-size: var(--fs-13);
}

.time-skeleton {
  padding-top: 40px;
}

.empty-inline {
  color: var(--ink-soft);
}

.detail-dialog {
  width: min(var(--detail), calc(100vw - 32px));
  max-width: none;
  height: min(100vh - 30px, 860px);
  max-height: none;
  margin: 15px 15px 15px auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}

.detail-dialog::backdrop {
  background: color-mix(in srgb, var(--ink) 26%, transparent);
  backdrop-filter: blur(1px);
}

.detail-form {
  height: 100%;
  padding: 22px;
  overflow-y: auto;
}

.detail-dialog.is-busy .detail-form {
  cursor: wait;
}

.detail-topline {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
}

.detail-close {
  min-width: var(--touch);
  min-height: var(--touch);
  color: var(--ink-soft);
  text-align: center;
}

.detail-title-input {
  min-height: 48px;
  padding: 5px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: var(--fs-19);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.detail-title-input:focus {
  border-bottom-color: var(--focus);
  box-shadow: none;
}

.detail-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin: 8px 0 26px;
  color: var(--ink-faint);
  font-size: var(--fs-11);
}

.detail-form > .field {
  margin-top: 18px;
}

.field-grid {
  display: grid;
  gap: 14px 10px;
  margin-top: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-facts {
  display: grid;
  margin-top: 24px;
  border-top: 1px solid var(--line);
}

.detail-fact {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.detail-fact span {
  color: var(--ink-faint);
  font-size: var(--fs-11);
}

.detail-fact strong {
  font-size: var(--fs-13);
  font-weight: 570;
}

.dependency-graph {
  margin-top: 28px;
}

.dependency-graph > h2 {
  margin-bottom: 10px;
  color: var(--ink-soft);
}

.dependency-flow {
  display: grid;
  align-items: stretch;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dependency-column {
  position: relative;
  min-width: 0;
}

.dependency-column h3 {
  margin: 0 0 6px;
  color: var(--ink-faint);
  font-size: var(--fs-11);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dependency-direction,
.dependency-truncated {
  margin: 4px 0 10px;
  color: var(--ink-faint);
  font-size: var(--fs-11);
}

.dependency-column ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dependency-node {
  display: grid;
  min-height: 58px;
  align-content: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
}

.dependency-column--current .dependency-node {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dependency-link,
.dependency-title {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--fs-11);
  font-weight: 620;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.dependency-link {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.dependency-link:hover {
  color: var(--accent);
}

.dependency-status,
.dependency-empty {
  color: var(--ink-faint);
  font-size: var(--fs-11);
}

.dependency-node--done .dependency-title,
.dependency-node--done .dependency-link {
  text-decoration: line-through;
}

.source-row {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px 12px;
  margin-top: 18px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-13);
}

.source-label {
  color: var(--ink-faint);
}

.source-link {
  margin-left: auto;
  font-weight: 650;
  text-underline-offset: 3px;
}

.event-history {
  margin-top: 28px;
}

.event-history h2,
.detail-actions h2 {
  margin-bottom: 8px;
  color: var(--ink-soft);
}

.event-history li {
  display: grid;
  gap: 2px 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr) auto;
}

.event-kind {
  font-size: var(--fs-13);
  font-weight: 600;
  text-transform: capitalize;
}

.event-note {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: var(--fs-13);
}

.event-history time,
.event-interface {
  color: var(--ink-faint);
  font-size: var(--fs-11);
}

.detail-save-row {
  display: grid;
  gap: 9px;
  margin-top: 24px;
}

.detail-save-row .muted {
  font-size: var(--fs-11);
}

.detail-actions {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}

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

.action-link {
  min-height: var(--touch);
  padding-inline: 6px;
}

.action-fields {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  grid-template-columns: 1fr;
}

.detail-conflict[hidden] {
  display: none;
}

.detail-conflict {
  width: 100%;
  align-items: flex-start;
  margin-top: 16px;
}

.toast {
  position: fixed;
  z-index: 50;
  right: 24px;
  bottom: 24px;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 18px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: white;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ink) 22%, transparent);
}

.toast-action {
  min-height: 32px;
  color: white;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.live-message {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

@media (max-width: 759px) {
  :root {
    --detail: 100vw;
  }

  .entry-shell {
    align-items: start;
    padding: max(18px, env(safe-area-inset-top)) 14px 18px;
  }

  .entry-card,
  .entry-card--wide {
    margin-top: 7vh;
    padding: 28px 22px;
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    display: none;
  }

  .main-column {
    width: 100%;
    padding: 0 16px calc(70px + env(safe-area-inset-bottom));
  }

  .mobile-bar {
    position: sticky;
    z-index: 10;
    top: 0;
    display: grid;
    min-height: 66px;
    align-items: center;
    gap: 14px;
    margin: 0 -16px;
    padding: max(9px, env(safe-area-inset-top)) 16px 9px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--canvas) 94%, transparent);
    backdrop-filter: blur(10px);
    grid-template-columns: auto minmax(0, 1fr);
  }

  .mobile-bar .brand-name {
    display: none;
  }

  .mobile-view-select {
    justify-self: end;
    width: min(100%, 190px);
    min-height: 42px;
    background: var(--surface);
  }

  .page-header {
    align-items: flex-start;
    margin: 25px 0 22px;
  }

  .dependency-flow {
    grid-template-columns: 1fr;
  }

  .dependency-column--before,
  .dependency-column--current,
  .dependency-column--after {
    grid-column: 1;
  }

  .header-actions {
    gap: 8px;
  }

  .freshness {
    display: none;
  }

  .account-menu-panel {
    position: fixed;
    top: 66px;
    right: 12px;
  }

  .week-strip {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .overview-signals {
    grid-template-columns: 1fr;
  }

  .week-cost {
    width: 100%;
    margin-left: 0;
    white-space: normal;
  }

  .next-marker {
    padding: 15px 16px 18px;
  }

  .next-marker-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .window-controls {
    width: 100%;
  }

  .window-button {
    min-width: 52px;
    min-height: 40px;
  }

  .capture {
    margin-bottom: 25px;
  }

  .task-row {
    min-height: 68px;
    margin-inline: -6px;
    padding-left: 8px;
  }

  .notice {
    align-items: stretch;
    flex-direction: column;
  }

  .timer-strip {
    position: sticky;
    z-index: 8;
    top: 74px;
  }

  .update-row {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .update-source,
  .update-title {
    grid-column: 1;
  }

  .update-kind,
  .update-row time {
    grid-column: 2;
  }

  .detail-dialog {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .detail-form {
    padding: max(18px, env(safe-area-inset-top)) 17px calc(28px + env(safe-area-inset-bottom));
  }

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

  .toast {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    left: 14px;
    justify-content: space-between;
  }

  /*
   * The tree was built and screenshot-tested on a laptop; a chain six levels deep on a 375px
   * phone runs out of room fast if each level keeps its desktop indent, and a 15px checkbox is
   * below the ~44px touch target both platforms recommend. Shrink the indent, grow the tap
   * targets, and let long titles wrap instead of ellipsis-truncating — silently cutting off a
   * task's own name is worse on the surface this is read on most.
   */
  .tree-children {
    margin-left: 5px;
    padding-left: 9px;
  }

  .tree-row {
    min-height: 40px;
    gap: 9px;
  }

  .tree-checkbox {
    width: 20px;
    height: 20px;
  }

  .tree-checkbox--placeholder {
    width: 20px;
  }

  .tree-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.3;
    padding: 2px 0;
  }

  .tree-ref-note {
    white-space: normal;
  }

  .scope-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .scope-breadcrumb {
    width: 100%;
  }

  .scope-next {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

@media (max-width: 390px) {
  .main-column {
    padding-inline: 13px;
  }

  .mobile-bar {
    margin-inline: -13px;
    padding-inline: 13px;
  }

  .page-header h1 {
    font-size: var(--fs-28);
  }

  .capture-button {
    padding-inline: 13px;
  }

  .task-meta {
    gap-inline: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Sidebar items are an icon plus a label, so the label can be dropped by CSS alone at a narrow
   desktop width without the icon moving. */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-icon {
  flex: 0 0 auto;
  opacity: 0.8;
}

.nav-item.is-current .nav-icon {
  opacity: 1;
  color: var(--accent);
}

.nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A collapsed project disclosure. The summary is the same heading row as an open section, so the
   Projects view reads as a directory whether or not anything is expanded. */
.task-section--collapsible {
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.section-heading--summary {
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  justify-content: flex-start;
  list-style: none;
}

.section-heading--summary::-webkit-details-marker {
  display: none;
}

.section-heading--summary::before {
  content: "›";
  color: var(--ink-faint);
  font-size: var(--fs-19);
  line-height: 1;
  transition: transform var(--calm-duration) var(--calm-ease);
}

.task-section--collapsible[open] > .section-heading--summary::before {
  transform: rotate(90deg);
}

.section-next {
  max-width: 45%;
  margin-left: auto;
  overflow: hidden;
  color: var(--ink-faint);
  font-size: var(--fs-13);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* People */

.people-controls {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.people-control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.people-network-note {
  color: var(--ink-faint);
  font-size: var(--fs-13);
}

.people-list,
.meeting-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 2px;
  list-style: none;
}

.person-row {
  border-bottom: 1px solid var(--line);
}

.person-row.is-private {
  border-left: 2px solid var(--domain-family);
  padding-left: 8px;
}

.person-summary {
  display: flex;
  min-height: var(--touch);
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.person-summary::-webkit-details-marker {
  display: none;
}

/* Pronouns lead the row. An unrecorded one still occupies the slot as "they/them?" — an omitted
   field is what invites a guess from the name. */
.person-pronouns {
  min-width: 68px;
  color: var(--ink-faint);
  font-size: var(--fs-11);
}

.person-pronouns.is-unknown {
  color: var(--warning);
  font-style: italic;
}

.person-name {
  font-size: var(--fs-15);
  font-weight: 640;
}

.person-meta {
  color: var(--ink-faint);
  font-size: var(--fs-13);
}

.person-detail {
  display: grid;
  gap: 4px;
  padding: 8px 0 14px 114px;
}

.person-notes {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-13);
}

.person-editor {
  display: grid;
  gap: 14px;
  margin: 0 0 24px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.person-editor-form,
.person-relationship-actions {
  display: grid;
  gap: 14px;
}

.person-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.person-action-fields {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(170px, 240px);
  gap: 12px;
}

.person-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.person-relationship-actions {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.person-delete-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
  border-radius: var(--radius-sm);
  color: var(--danger);
}

/* Meetings

   The archive is read as an agenda rather than as a table: a day heading, then one line per
   meeting, time first. Most of Marcus's days are mostly meetings, so the whole layout is tuned for
   scanning one day in a glance. */

.meetings-search-field input {
  width: 100%;
}

.meeting-day {
  margin-bottom: 18px;
}

/* `min-width: 0` because the row is a grid item, and a grid item's default `min-width: auto` will
   not go below its own min-content width. Without it the row was 387px wide inside a 324px column
   at 390px viewport and pushed the length column off the screen. */
.meeting-row {
  min-width: 0;
  padding: 3px 0;
}

/* The clock keeps its column even when a source recorded no start time, so titles stay aligned
   down a day fed by more than one scanner. */
.meeting-time {
  flex: 0 0 auto;
  min-width: 62px;
  color: var(--ink-faint);
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
}

.meeting-match {
  color: var(--ink-faint);
  font-size: var(--fs-13);
  font-weight: 400;
  white-space: nowrap;
}

.meeting-provenance {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--fs-13);
}

/* Rendered markdown. Meeting summaries, decisions, actions and transcripts arrive as markdown and
   used to print their own asterisks and hashes. */

.markdown {
  color: var(--ink-soft);
  font-size: var(--fs-13);
  line-height: 1.5;
}

.markdown-paragraph {
  margin: 0 0 8px;
}

.markdown-heading {
  margin: 12px 0 4px;
  color: var(--ink);
  font-size: var(--fs-13);
  font-weight: 640;
}

.markdown-heading:first-child {
  margin-top: 0;
}

/* A transcript's `#### 00:00:09` is a timestamp wearing a heading, so it is set as a quiet marker
   rather than as a section title with nothing under it. */
.markdown-clock {
  margin: 14px 0 4px;
  color: var(--ink-faint);
  font-size: var(--fs-11);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.markdown-list {
  margin: 0 0 8px;
  padding-left: 18px;
}

.markdown-list li {
  margin-bottom: 4px;
}

/* One speaker turn. The name is held apart from the words on purpose: a transcript where both read
   the same cannot be skimmed, which is the only way anyone reads four hundred turns. */
.markdown-turn {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 3px;
  gap: 0 8px;
}

.markdown-speaker {
  flex: 0 0 auto;
  min-width: 118px;
  color: var(--ink);
  font-size: var(--fs-13);
  font-weight: 640;
}

.markdown-words {
  flex: 1 1 60%;
  min-width: 0;
}

.transcript-body {
  max-height: 46vh;
  margin-top: 8px;
  overflow: auto;
  overflow-wrap: anywhere;
}

/* Notion's relative timestamp, on the day heading rather than on every row. `margin-right: auto`
   holds it beside the date: `.section-heading` is a space-between row, so a third child otherwise
   floats to the middle of the page with nothing near it to be relative to. */
.meeting-day-age {
  margin-right: auto;
  padding-left: 10px;
  color: var(--ink-faint);
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
}

.knowledge-chip--flag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-faint);
}

.meetings-footer {
  margin-top: 20px;
}

/* One meeting as a page

   Marcus, 21 September: "I need to see each meeting as a full page card, not a toggle." Below 1200px
   the meeting is still a page; at 1200px and wider it is the right-hand pane of the list (see
   "Meetings, list and detail" at the end of this file). */

.meeting-page-title {
  margin: 0 0 6px;
  font-size: var(--fs-28);
  font-weight: 620;
  line-height: 1.25;
}

.meeting-provenance-panel {
  display: grid;
  gap: 14px;
}

.meeting-linked-people {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.meeting-fact-label {
  color: var(--ink-faint);
  font-size: var(--fs-13);
}

/* A relation that was proposed and never confirmed, or turned down. Dimmed rather than hidden: the
   question a page like this gets asked is as often "why is this NOT linked to IBM". */
.knowledge-relation.is-proposed,
.knowledge-relation.is-rejected {
  opacity: 0.68;
}

.knowledge-relation-head {
  margin: 0 0 4px;
  font-size: var(--fs-13);
}

.page-intro--quiet {
  color: var(--ink-faint);
  font-size: var(--fs-13);
}

@media (max-width: 759px) {


  .meeting-page-title {
    font-size: var(--fs-19);
  }

  .person-detail {
    padding-left: 0;
  }

  .person-pronouns {
    min-width: 0;
  }

  .person-editor-grid,
  .person-action-fields {
    grid-template-columns: 1fr;
  }
}

/* The relationship tabs on the People view. Four labels, counts on each — an empty group and an
   unloaded one look identical without them. Horizontally scrollable rather than wrapping, because a
   wrapped tab bar changes the page height as the address book grows. */
.people-groups {
  display: flex;
  gap: 4px;
  margin: 0 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.people-groups::-webkit-scrollbar { display: none; }

.people-group {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--fs-15);
  white-space: nowrap;
  cursor: pointer;
}
.people-group:hover { border-color: var(--ink-soft); color: var(--ink); }

.people-group.is-current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--canvas);
}

.people-group-count {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-13);
  opacity: 0.6;
}

/* ── Growth ───────────────────────────────────────────────────────────────────
   The weekly page: where a window is open and someone is known.

   Tokens only, so both themes come for free. Every state that carries meaning —
   window urgency, warmth, verdict — is a word as well as a colour, because the
   accessibility contract in DESIGN.md says none of them may rely on colour
   alone, and because "shuts in 7d" is a decision where a red border is a guess. */

.growth-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.growth-generated {
  margin: 0;
  font-size: var(--fs-13);
}

.growth-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.growth-heading {
  margin: 0;
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Current accounts are the same component, set back. They are real dated moments
   with real routes and none of them is new business, so they read as context
   rather than as the page's answer. */
.growth-section--accounts .growth-row,
.growth-row--account {
  background: var(--surface-muted);
}

.growth-section--config {
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-15);
}

.growth-section--config p {
  margin: 0 0 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
}

.growth-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.growth-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}

.growth-company {
  margin: 0;
  font-size: var(--fs-19);
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
}

.growth-score {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-15);
  color: var(--ink-faint);
}

.growth-verdict {
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-13);
  font-weight: 600;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}

.growth-verdict--go { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.growth-verdict--go-small { background: var(--accent-soft); border-color: var(--line-strong); }
.growth-verdict--no-go { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

.growth-when,
.growth-route,
.growth-gap,
.growth-work {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  font-size: var(--fs-15);
}

.growth-title {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-15);
}

/* Urgency is the ranking, so it is the most legible thing on the row. */
.growth-window {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.growth-window--urgent { color: var(--danger); }
.growth-window--open { color: var(--success); }
.growth-window--early,
.growth-window--unknown,
.growth-window--shut { color: var(--ink-faint); }

/* A qualifier sits beside the value it qualifies rather than being lost into it —
   the same discipline as a pronoun's basis. */
.growth-basis {
  padding: 0 0.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.growth-warmth {
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-13);
  font-weight: 600;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

.growth-warmth--active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.growth-warmth--dormant { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.growth-warmth--cold { color: var(--ink-faint); }

/* Second degree is spelled out, not implied. Working under the agency holding an
   account is a different commercial shape from working for the brand, and the
   first row ever tested was exactly that case. */
.growth-degree {
  flex: 1 1 100%;
  font-size: var(--fs-13);
  color: var(--warning);
}

.growth-route--none { color: var(--ink-faint); }

.growth-gap .eyebrow,
.growth-work .eyebrow {
  flex: 0 0 auto;
}

.growth-why {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--ink-faint);
}

/* The four components, so a score can be argued with rather than only read. Bars
   are decoration: they are aria-hidden and the same numbers are given as text. */
.growth-components {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
}

.growth-component {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-11);
  color: var(--ink-faint);
}

.growth-component-track {
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  overflow: hidden;
}

.growth-component-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}

.growth-sources {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* A source whose last read failed. The reason is in the line; the colour is what makes it seen. */
.growth-source--failed .muted {
  color: var(--danger);
}

@media (max-width: 600px) {
  .growth-row { padding: 0.85rem; }
  .growth-components { gap: 0.5rem; }
}

/* ── Focus shell ─────────────────────────────────────────────────────────────
   The daily surface follows the approved quiet editorial prototype. Task and
   goal order carry priority; there are deliberately no numbered priority slots. */

body:has(.app-shell) {
  background: radial-gradient(ellipse at 8% 26%, color-mix(in srgb, var(--accent-soft) 65%, transparent), transparent 45%),
    radial-gradient(ellipse at 96% 2%, color-mix(in srgb, var(--domain-family) 15%, transparent), transparent 48%), var(--canvas);
}

.sidebar { padding: 28px 17px; background: linear-gradient(145deg, var(--surface-muted), color-mix(in srgb, var(--accent-soft) 40%, var(--surface-muted))); }
.sidebar .brand { padding: 0 5px; gap: 10px; }
.brand-mark { width: 32px; height: 32px; margin-inline: -5px; }
.brand-name { font-size: var(--fs-19); font-weight: 550; letter-spacing: -1px; }
.sidebar-nav { gap: 5px; margin-top: 36px; }
.nav-item { min-height: 44px; padding: 12px 14px; border: 1px solid transparent; border-radius: 100px; font-size: var(--fs-13); font-weight: 400; }
.nav-icon { display: none; }
.nav-item.is-current { border-color: var(--surface-strong); background: color-mix(in srgb, var(--surface-strong) 75%, transparent); color: var(--ink); box-shadow: 0 3px 9px color-mix(in srgb, var(--accent) 3%, transparent); font-weight: 500; }
.sidebar-bottom { border: 0; padding: 30px 10px 0; }
.account-name { font-size: var(--fs-11); font-weight: 400; color: var(--ink-soft); }
.sidebar .account-email { display: none; }
.text-button--sidebar { font-size: var(--fs-11); color: var(--ink-faint); }
.main-column { position: relative; isolation: isolate; width: 100%; padding: 24px 36px 64px; }
.main-column::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 0 0 auto; height: 220px; border-radius: 0 28px 0 0; background: radial-gradient(ellipse at 86% -7%, color-mix(in srgb, var(--header-tint) 48%, transparent), transparent 53%); }
.page-header { position: relative; align-items: flex-start; margin-bottom: 16px; }
.page-eyebrow { margin: 6px 0 25px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: var(--fs-11); font-weight: 400; letter-spacing: 1px; }
.main-column .page-header h1 { font-size: var(--fs-40); line-height: 1.05; font-weight: 450; letter-spacing: -1.8px; margin: 0; }
.header-actions { align-items: flex-start; }
.freshness { font-size: var(--fs-11); margin-top: 11px; }
.freshness:not(.is-stale) { position: absolute; right: 0; bottom: -1px; color: var(--ink-faint); }
.account-menu > summary { width: 36px; min-width: 36px; height: 36px; min-height: 36px; border-color: var(--surface-strong); background: color-mix(in srgb, var(--surface-strong) 65%, transparent); font-size: var(--fs-11); font-weight: 400; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 4%, transparent); }
.account-menu > summary::before, .account-menu > summary::after { display: none; }
.page-content.focus-page, .focus-page { width: 100%; }

.workspace-intro {
  max-width: 58ch;
  margin: -4px 0 26px;
  color: var(--ink-soft);
  font-size: var(--fs-15);
  line-height: 1.65;
}

.workspace-intro > :last-child {
  margin-bottom: 0;
}

.workspace-filters,
.archive-tabs {
  display: flex;
  max-width: 100%;
  gap: 5px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
}

.workspace-filters::-webkit-scrollbar,
.archive-tabs::-webkit-scrollbar {
  display: none;
}

.workspace-filter,
.workspace-filters > button,
.archive-tabs > button {
  display: inline-flex;
  min-height: var(--touch);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: var(--fs-13);
  font-weight: 560;
  white-space: nowrap;
}

.workspace-filter:hover,
.workspace-filters > button:hover,
.archive-tabs > button:hover {
  border-color: var(--line);
  color: var(--ink);
}

.workspace-filter[aria-pressed="true"],
.workspace-filters > button[aria-pressed="true"],
.archive-tabs > button[aria-pressed="true"],
.archive-tabs > button.is-current {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
  background: var(--accent-soft);
  color: var(--ink);
}

.focus-balance {
  display: flex; flex-wrap: wrap; min-height: 52px; align-items: center; gap: 10px 20px; margin: 16px 0 20px; padding: 0 0 16px; border-bottom: 1px solid var(--line);
}

.focus-balance > :first-child:not(.focus-tabs) {
  flex: 0 0 auto; color: var(--ink-soft); font-size: var(--fs-13); font-weight: 400;
}

.focus-tabs {
  display: flex; flex-wrap: wrap; min-width: 0; gap: 8px; padding: 2px;
}

.focus-tabs::-webkit-scrollbar {
  display: none;
}

.focus-tabs button {
  display: inline-flex; min-height: 36px; flex: 0 0 auto; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 100px; background: color-mix(in srgb, var(--surface-muted) 30%, transparent); color: var(--ink-soft); cursor: pointer; font-size: var(--fs-13); font-weight: 400; white-space: nowrap; touch-action: pan-y;
}

.focus-tabs button:hover {
  border-color: var(--line-strong);
  background: var(--surface-strong);
  color: var(--ink);
}

.focus-tabs button[aria-selected="true"] {
  border-color: var(--surface-strong); background: linear-gradient(150deg, var(--surface-strong), var(--accent-soft)); color: var(--ink); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 0 1px var(--line);
}

.focus-tabs button [aria-hidden="true"] {
  color: var(--ink-faint);
  font-size: var(--fs-13);
}

.focus-layout {
  display: grid; align-items: start; gap: 32px; grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr);
}

.focus-main,
.focus-aside {
  min-width: 0;
}

.focus-main {
  display: grid;
}

.focus-aside {
  display: grid;
  gap: 8px;
}

.focus-aside .overview-signals {
  grid-template-columns: minmax(0, 1fr);
}

.focus-aside .overview-signal span,
.focus-aside .attention-overview > summary span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.focus-goal {
  position: relative; min-width: 0; padding: 13px 0 6px; border: 0;
}

.focus-goal:first-child {
  padding-top: 4px;
  border-top: 0;
}

.focus-goal-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 9px;
}

.focus-goal-head > h3,
.focus-goal-title {
  min-width: 0; flex: 1 1 auto; margin: 0; color: var(--ink); font-size: var(--fs-19); font-weight: 450; letter-spacing: -.6px; line-height: 1.25; overflow-wrap: anywhere;
}

.focus-goal-title[contenteditable],
.focus-goal-description[contenteditable] {
  border-radius: 5px;
  cursor: text;
  outline: none;
}

.focus-goal-title[contenteditable]:hover,
.focus-goal-description[contenteditable]:hover {
  background: color-mix(in srgb, var(--surface-strong) 48%, transparent);
}

.focus-goal-title[contenteditable]:focus,
.focus-goal-description[contenteditable]:focus {
  background: var(--surface-strong);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 22%, transparent);
}

.focus-goal-description {
  max-width: 62ch; margin: 5px 0 7px; color: var(--ink-soft); font-size: var(--fs-11); line-height: 1.45; overflow-wrap: anywhere;
}

.focus-goal-grip {
  display: grid;
  width: var(--touch);
  min-width: var(--touch);
  min-height: var(--touch);
  margin: -8px -7px -8px 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-faint);
  cursor: grab;
  font-size: var(--fs-15);
  opacity: 0.38;
  place-items: center;
  touch-action: none;
}

.focus-goal:hover .focus-goal-grip,
.focus-goal:focus-within .focus-goal-grip,
.focus-goal-grip:focus-visible {
  opacity: 1;
}

.focus-goal-grip:hover {
  background: color-mix(in srgb, var(--surface-strong) 68%, transparent);
}

.focus-goal-grip:active {
  cursor: grabbing;
}

.focus-goal-tasks {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.focus-goal-tasks .task-row {
  min-height: 58px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.focus-goal-tasks .task-grip {
  min-height: var(--touch);
}

.focus-goal-tasks .task-title-button {
  min-height: 28px;
}

.focus-goal-tasks .task-row.is-completed .task-copy {
  opacity: .62;
}

.focus-goal-more {
  display: flex;
  width: 100%;
  min-height: var(--touch);
  align-items: center;
  justify-content: flex-start;
  padding: 7px 0;
  color: var(--ink-faint);
  font-size: var(--fs-13);
}

.focus-goal-menu {
  position: relative;
  flex: 0 0 auto;
}

.focus-goal-menu > summary {
  display: grid;
  width: var(--touch);
  min-height: var(--touch);
  margin: -8px -9px -8px 0;
  border-radius: 7px;
  color: var(--ink-faint);
  cursor: pointer;
  list-style: none;
  place-items: center;
}

.focus-goal-menu > summary::-webkit-details-marker {
  display: none;
}

.focus-goal-menu > summary::marker {
  content: "";
}

.focus-goal-menu > summary:hover {
  background: color-mix(in srgb, var(--surface-strong) 68%, transparent);
  color: var(--ink);
}

.focus-goal-menu[open] {
  z-index: 5;
}

.focus-goal-menu[open] > .text-button {
  display: block;
  min-width: 190px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: var(--surface-strong);
}

.focus-task-picker {
  position: relative; border: 0;
}

.focus-task-picker > summary {
  display: flex;
  min-height: var(--touch);
  align-items: center;
  padding: 7px 2px;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: var(--fs-13);
}

.focus-task-picker[open] > summary {
  color: var(--ink);
}

.focus-task-picker > .text-input {
  margin: 3px 0 7px;
}

.focus-task-picker > div {
  display: grid;
  gap: 2px;
  padding-bottom: 8px;
}

.focus-task-picker > div .text-button {
  min-height: var(--touch);
}

.focus-goal-add > .capture {
  position: relative; min-height: var(--touch); align-items: center; gap: 6px; margin: 0; padding: 0; flex: 1; min-width: 0;
}

.focus-goal-add > .capture .capture-input,
.focus-goal-add > .capture .capture-button {
  min-height: var(--touch);
  opacity: 0;
  transition: opacity var(--calm-duration) var(--calm-ease);
}

.focus-goal-add > .capture:hover .capture-input,
.focus-goal-add > .capture:hover .capture-button,
.focus-goal-add > .capture:focus-within .capture-input,
.focus-goal-add > .capture:focus-within .capture-button {
  opacity: 1;
}

.focus-now,
.focus-also,
.focus-unassigned {
  min-width: 0;
}

.focus-now {
  padding: 19px 21px; margin: 0; border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--surface)); border-radius: 19px; background: radial-gradient(ellipse at 98% 0, color-mix(in srgb, var(--now-tint) 63%, transparent), transparent 68%), linear-gradient(120deg, var(--accent-soft), var(--surface-muted)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-strong) 75%, transparent);
}

.focus-now h2,
.focus-now h3 {
  margin: 9px 0 7px;
  color: var(--ink);
  font-size: var(--fs-28);
  font-weight: 580;
  letter-spacing: -0.035em;
  line-height: 1.22;
  text-transform: none;
}

.focus-now p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: var(--fs-13);
  line-height: 1.6;
}

.focus-also {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}

.focus-also > h2,
.focus-unassigned > h2 {
  margin-bottom: 7px;
  color: var(--ink-soft);
  font-size: var(--fs-13);
}

.focus-unassigned {
  margin-top: 6px;
  border: 0;
  padding-top: 0;
}

.focus-completed-history {
  justify-self: start;
  color: var(--ink-faint);
  font-size: var(--fs-13);
}

.focus-capture {
  display: grid;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.focus-capture input,
.focus-capture textarea,
.focus-capture select {
  width: 100%;
  min-width: 0;
  min-height: var(--touch);
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  outline: none;
  background: transparent;
  color: var(--ink);
}

.focus-capture input:hover,
.focus-capture textarea:hover,
.focus-capture select:hover {
  border-color: var(--line);
}

.focus-capture input:focus,
.focus-capture textarea:focus,
.focus-capture select:focus {
  border-color: var(--focus);
  background: var(--surface-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 14%, transparent);
}

.focus-capture button {
  min-height: var(--touch);
}

.focus-add-goal {
  position: relative;
  width: 100%;
  justify-self: start;
  min-height: var(--touch);
  margin: 0 0 20px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: transparent;
  text-align: left;
  white-space: nowrap;
  transition: color var(--calm-duration) var(--calm-ease);
}

.focus-add-goal::after {
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 1px;
  background: color-mix(in srgb, var(--line) 48%, transparent);
  content: "";
}

.focus-add-goal:hover,
.focus-add-goal:focus-visible {
  color: var(--accent);
}

.focus-add-goal::before {
  content: "+";
  margin-right: 8px;
}

.focus-empty {
  margin: 8px 0 0;
  padding: 14px 2px;
  color: var(--ink-faint);
  font-size: var(--fs-13);
  line-height: 1.55;
}

.focus-goal.focus-group-dragging {
  z-index: 2;
  outline: 2px solid var(--focus);
  outline-offset: 10px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 12%, transparent);
  cursor: grabbing;
}

/* Today reads as one aligned list. Completion and row reordering live on the right,
   so revealing either control never shifts the title away from its goal heading. */
.focus-page .task-row {
  grid-template-columns: minmax(0, 1fr) var(--touch) var(--touch);
  gap: 4px;
  padding-inline: 0;
}

.focus-page .task-row > .domain-marker {
  position: absolute;
  top: 12px;
  left: -8px;
}

.focus-page .task-copy {
  grid-column: 1;
  grid-row: 1;
}

.focus-page .task-grip {
  grid-column: 2;
  grid-row: 1;
  width: var(--touch);
  min-height: var(--touch);
}

.task-complete-control {
  display: grid;
  grid-column: 3;
  grid-row: 1;
  width: var(--touch);
  min-height: var(--touch);
  border-radius: 7px;
  cursor: pointer;
  place-items: center;
  opacity: 0;
  transition: opacity var(--calm-duration) var(--calm-ease);
}

.task-complete-control .task-checkbox {
  margin: 0;
}

.focus-page .task-row:hover .task-complete-control,
.focus-page .task-row:focus-within .task-complete-control,
.task-complete-control:has(:checked) {
  opacity: 1;
}

.task-complete-control:hover {
  background: var(--surface-strong);
}

@media (hover: none), (pointer: coarse) {
  .task-complete-control {
    opacity: 1;
  }
}

.focus-drop-target {
  box-shadow: inset 0 2px 0 var(--accent);
}

/* Week remains an agenda, with time as supporting context rather than another
   card dashboard. These selectors tolerate either lists or grouped sections. */

.week-agenda {
  display: grid;
  gap: 25px;
}

.week-day {
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.week-day:first-child {
  padding-top: 0;
  border-top: 0;
}

.week-day > h2,
.week-day > h3 {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: var(--fs-15);
  font-weight: 650;
  letter-spacing: -0.015em;
  text-transform: none;
}

/*
 * What a day costs, before what it contains. Future days cannot list their meetings — calendar
 * titles are deliberately not stored — so this line is the only honest thing Cairn can say about
 * a Thursday that has not happened yet, and it is a great deal better than silence.
 */
.week-capacity {
  margin: 0 0 8px;
  color: var(--ink-faint);
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.week-capacity[data-status="full"] {
  color: var(--warning);
}

.week-capacity[data-status="past"] {
  opacity: 0.6;
}

/* Meetings that happened, reusing the archive's own row so the two views cannot drift apart. */
.week-meetings {
  margin: 0 0 6px;
}

.week-item {
  display: grid;
  min-height: 54px;
  align-items: baseline;
  gap: 5px 14px;
  padding: 10px 3px;
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr);
}

/*
 * The same domain route-marker the task rows carry, so a due item reads as Work or Sport at a
 * glance here too. Border rather than a child element: these rows are buttons built from a string,
 * with no room for a marker span.
 */
.week-item[data-domain] {
  padding-left: 10px;
  border-left: 3px solid transparent;
}

.week-item[data-domain="work"] { border-left-color: var(--domain-work); }
.week-item[data-domain="family"] { border-left-color: var(--domain-family); }
.week-item[data-domain="sport"] { border-left-color: var(--domain-sport); }
.week-item[data-domain="practice"] { border-left-color: var(--domain-practice); }

.week-item > time,
.week-item .workspace-meta {
  color: var(--ink-faint);
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
}

.week-item > :last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* `.task-row--past` appears earlier than the generic task-row declaration in
   the legacy sheet. Reassert its two-column shape after the generic rule. */
.task-row.task-row--past {
  min-height: 50px;
  padding: 10px 4px;
  grid-template-columns: auto minmax(0, 1fr);
}

.task-row.task-row--past .task-title-button {
  display: flex;
  min-height: var(--touch);
  align-self: center;
  align-items: center;
}

.focus-aside > .section-heading { margin-bottom: 0; }
.focus-goal-menu > summary { opacity: 0; }
.focus-goal:is(:hover,:focus-within) .focus-goal-menu > summary, .focus-goal-menu[open] > summary { opacity: 1; }
.focus-aside .overview-signal, .focus-aside .attention-overview { background: transparent; border-color: color-mix(in srgb, var(--line) 45%, transparent); border-radius: 10px; box-shadow: none; }
.focus-aside .overview-signals { margin-top: 16px; }
.focus-aside .overview-signal strong { font-weight: 500; }

/* Refined Today rows and insertion lines; details retain the complete task record. */
.focus-page .section-heading { margin-bottom: 8px; min-height: 26px; gap: 12px; }
.focus-page h2 { color: var(--ink); font-size: var(--fs-19); font-weight: 500; text-transform: none; letter-spacing: -.7px; }
.focus-page .section-heading > .muted, .focus-page .section-heading > .text-button { font-size: var(--fs-11); font-weight: 400; min-height: 26px; }
.focus-unassigned h3 { font-size: var(--fs-19); font-weight: 450; letter-spacing: -.6px; margin: 13px 0 5px; color: var(--ink); }
.focus-page .task-row { min-height: 44px; padding: 5px 0; margin: 2px 0; border: 1px solid transparent; border-radius: 10px; background: transparent; }
.focus-page .task-row > .domain-marker { display: none; }
.focus-page .task-title-button { font-size: var(--fs-13); font-weight: 400; line-height: 1.4; min-height: 28px; }
.focus-page .task-row:is(:hover,:focus-within) { background: var(--surface-strong); border-color: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.focus-page .task-meta { display: block; font-size: var(--fs-11); line-height: 1.3; margin: 2px 0 0; color: var(--ink-soft); }
.focus-page .task-grip, .focus-goal-grip { opacity: 0; }
.focus-page .task-row:focus-within .task-grip { opacity: 1; }
.focus-page .task-complete-control:has(:checked) { opacity: 0; }
.focus-page .task-row:is(:hover,:focus-within) .task-complete-control { opacity: 1; }
.focus-page .task-checkbox { width: 15px; height: 15px; }
.focus-page .focus-now .next-marker-title { font-size: var(--fs-19); font-weight: 450; line-height: 1.2; letter-spacing: -.8px; }
.focus-now .next-marker-head { flex-direction: row; align-items: center; }
.focus-now .next-marker-body { margin-top: 12px; }
.focus-now .next-marker-reason { margin: 9px 0 0; font-size: var(--fs-13); line-height: 1.5; }
.focus-now .eyebrow { font-family: "SFMono-Regular", Consolas, monospace; font-size: var(--fs-11); font-weight: 400; letter-spacing: 1px; }
.focus-now .task-meta { margin-top: 8px; }
.focus-window { position: relative; color: var(--ink-soft); font-size: var(--fs-11); }
.focus-window > summary { min-height: 28px; padding: 5px 0 5px 8px; cursor: pointer; white-space: nowrap; }
.focus-window .window-controls { width: max-content; position: absolute; right: 0; top: 100%; z-index: 3; padding: 5px; background: var(--surface-strong); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-dialog); }
.focus-balance-note { margin-left: auto; color: var(--ink-soft); font-size: var(--fs-11); max-width: 100%; }
.focus-balance-note > summary { min-height: 36px; padding: 10px 0; cursor: pointer; }
.focus-balance-note[open] { flex-basis: 100%; }
.focus-balance-note p { max-width: 70ch; line-height: 1.6; overflow-wrap: anywhere; margin: 0 0 4px; }
.focus-tabs button::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--domain-work); }
.focus-tabs button[data-domain="family"]::after { background: var(--domain-family); }
.focus-tabs button[data-domain="sport"]::after { background: var(--domain-sport); }
.focus-tabs button[data-domain="practice"]::after { background: var(--domain-practice); }
.focus-goal-add { display: flex; align-items: start; gap: 12px; border-top: 1px solid color-mix(in srgb, var(--line) 44%, transparent); margin-top: 10px; min-height: var(--touch); }
.focus-goal-add .capture-input, .focus-loose-capture .capture-input { border: 1px solid transparent; background: transparent; font-size: var(--fs-11); padding: 6px 8px; }
.focus-goal-add .capture-button, .focus-loose-capture .capture-button { background: transparent; color: var(--accent); font-size: var(--fs-11); border: 0; padding: 6px 8px; }
.focus-goal-add > .capture .capture-input, .focus-goal-add > .capture .capture-button, .focus-goal-add > .focus-task-picker > summary { opacity: 0; }
.focus-goal-add:is(:hover,:focus-within) > .capture .capture-input, .focus-goal-add:is(:hover,:focus-within) > .capture .capture-button, .focus-goal-add:is(:hover,:focus-within) > .focus-task-picker > summary { opacity: 1; }
.focus-task-picker[open] { flex: 1 0 100%; }
.focus-goal-add:has(.focus-task-picker[open]) { flex-wrap: wrap; }
.focus-task-picker > summary { font-size: var(--fs-11); }
.focus-loose-capture { margin: 10px 0 0; border-top: 0; }
.focus-loose-capture:not(:focus-within,:hover) > .capture-input, .focus-loose-capture:not(:focus-within,:hover) > .capture-button { opacity: 0; }
.focus-completed-history { font-size: var(--fs-11); }

@media (max-width: 900px) {
  .focus-layout {
    gap: 32px;
    grid-template-columns: minmax(0, 1fr);
  }

  .focus-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .focus-now {
    grid-column: 1 / -1;
  }
}

@media (max-width: 759px) {
  .main-column {
    padding-top: 0;
  }

  .main-column:has(.focus-page) .page-header h1 {
    font-size: var(--fs-40);
  }

  .focus-balance {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .focus-tabs {
    width: 100%;
  }

  .focus-tabs button {
    padding-inline: 13px;
  }

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

  .focus-goal {
    padding-block: 15px 17px;
  }

  .focus-goal-tasks .task-row {
    margin-inline: 0;
  }

  .focus-now {
    padding: 20px;
  }

  .week-item {
    grid-template-columns: minmax(62px, auto) minmax(0, 1fr);
  }
}

@media (max-width: 390px) {
  .main-column:has(.focus-page) .page-header h1 {
    font-size: var(--fs-40);
  }

  .workspace-filter,
  .workspace-filters > button,
  .archive-tabs > button {
    padding-inline: 11px;
  }

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

  .focus-capture button {
    width: 100%;
  }
}

@media (hover: none), (pointer: coarse) {
  .focus-goal-add > .capture .capture-input,
  .focus-goal-add > .capture .capture-button {
    opacity: 1;
  }

  .focus-add-goal {
    color: var(--accent);
  }

  .focus-goal-grip {
    opacity: 0.68;
  }
}

@media (prefers-contrast: more) {
  .nav-item.is-current,
  .workspace-filter[aria-pressed="true"],
  .workspace-filters > button[aria-pressed="true"],
  .archive-tabs > button[aria-pressed="true"],
  .focus-tabs button[aria-selected="true"],
  .focus-now {
    border-color: var(--ink);
  }
}

/* Explicit task references use the detail sheet's existing type, colour and spacing. */
.task-links { margin-block: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.task-links > h2 { margin-bottom: 16px; font-size: var(--fs-15); }
.task-link-group { margin-block: 14px; }
.task-link-group h3 { margin-bottom: 8px; font-size: var(--fs-13); font-weight: 500; color: var(--ink-soft); }
.task-link-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.task-link-chip { display: inline-flex; max-width: 100%; align-items: center; border: 1px solid var(--line); border-radius: 24px; }
.task-link-chip button { min-height: var(--touch); padding: 8px 12px; border: 0; background: transparent; color: var(--ink); text-align: left; overflow-wrap: anywhere; }
.task-link-chip .task-link-remove { flex: 0 0 var(--touch); color: var(--ink-soft); }
.task-link-editor { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 20px; }
.task-link-editor .field { min-width: 0; margin: 0; }
.task-link-editor .field:nth-child(3) { grid-column: 1 / -1; }
.task-link-editor > button { grid-column: 2; justify-self: end; }
.task-link-card { margin-block: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.task-link-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.task-link-card h3 { overflow-wrap: anywhere; }
.task-link-card .muted { margin-block: 10px; }
.task-link-related { display: block; text-align: left; min-height: var(--touch); }

/* The same reading surface adapts without an icon-only navigation rail. */
@media (min-width: 760px) and (max-width: 1100px) {
  :root { --sidebar: 130px; }
  .app-shell { width: calc(100% - 40px); }
  .sidebar { padding-inline: 12px; }
  .sidebar .brand { gap: 7px; }
  .brand-name { font-size: var(--fs-19); }
  .main-column { padding-inline: 28px; }
  .focus-layout { gap: 26px; }
}
@media (max-width: 759px) {
  .app-shell { width: calc(100% - 20px); margin: 10px auto; min-height: calc(100vh - 20px); border-radius: 23px; }
  .main-column { padding: 0 22px 40px; }
  .main-column::before { border-radius: 23px 23px 0 0; }
  .mobile-bar { margin: 0 -22px 24px; padding-inline: 22px; border-radius: 23px 23px 0 0; background: var(--surface-muted); }
  .mobile-bar .brand-name { display: inline; font-size: var(--fs-19); }
  .page-header { gap: 10px; }
  .main-column:has(.focus-page) .page-header h1 { font-size: var(--fs-40); }
  .page-eyebrow { font-size: var(--fs-11); letter-spacing: .14em; }
  .focus-balance { flex-direction: row; gap: 8px; }
  .focus-balance > :first-child { width: 100%; }
  .focus-tabs { width: auto; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 6px; }
  .focus-tabs button { min-height: 44px; padding-inline: 9px; gap: 5px; font-size: var(--fs-11); }
  .focus-page .task-row { grid-template-columns: minmax(0,1fr) var(--touch) var(--touch); }
  .focus-page .task-grip, .focus-page .task-complete-control { width: var(--touch); }
  .focus-goal-add { gap: 4px; }
  .focus-now { padding: 22px; }
}
@media (hover: none), (pointer: coarse) {
  .focus-page .task-grip, .focus-goal-grip { opacity: .55; }
  .focus-goal-menu > summary { opacity: 1; }
  .account-menu > summary { min-width: var(--touch); min-height: var(--touch); }
  .focus-window > summary { min-width: var(--touch); min-height: var(--touch); display: flex; align-items: center; justify-content: flex-end; }
  .focus-window .window-button { min-width: var(--touch); min-height: var(--touch); }
  .focus-page .task-complete-control, .focus-page .task-complete-control:has(:checked) { opacity: 1; }
  .focus-goal-add > .capture .capture-input, .focus-goal-add > .capture .capture-button, .focus-goal-add > .focus-task-picker > summary, .focus-loose-capture > .capture-input, .focus-loose-capture > .capture-button { opacity: 1; }
}

/* Stored relationships share the archive's text-first visual language. */
/* The chips line under a row. Indented past the time column so it hangs under the title rather
   than under the clock, and on its own line because a client name that truncates into an ellipsis
   is worth nothing and these chips are the most valuable thing in the view.

   `> details` used to be here for the `Why linked?` disclosure that expanded inside the list. That
   moved to the meeting's own page on 21 September and nothing in this container is a disclosure any
   more. */
.knowledge-links { display: flex; flex-wrap: wrap; gap: .4rem; padding: 2px 0 6px 62px; }

/* 62px of a 320px row is a fifth of the width, so the indent goes on a phone. This has to sit after
   the rule above rather than in the earlier phone block: a media query adds no specificity, and the
   declaration above is later in the file. */
@media (max-width: 759px) {
  .knowledge-links { padding-left: 0; }
}
.knowledge-chip { font-size: var(--fs-13); }
.knowledge-entity, .knowledge-correction { padding: 1rem; margin: 1rem 0; border: 1px solid currentColor; border-radius: .4rem; }
.knowledge-relation { margin: .6rem 0; }
.knowledge-evidence { padding-left: 1.2rem; font-size: var(--fs-13); }

/* Knowledge graph — a quiet inspection surface, with colour reserved for entity type and
   line treatment carrying relation state as well.

   The graph is the one view rendered outside `.app-shell`. The shell's centred card, sidebar and
   max-width main column are what held the canvas to a ~680x330 box inside a scrolling page, so
   `/graph` gets its own fixed layout and every control floats over the canvas instead of
   taking a strip of it. See `renderFullscreenGraph` in web/app.js. */
body.is-fullscreen-view { overflow: hidden; }
.graph-shell { position: fixed; z-index: 1; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr); background: var(--canvas); }
.graph-shell-main { display: grid; min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr); }
.knowledge-network-view { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; }
.knowledge-network-view > .notice, .knowledge-network-view > .time-skeleton { flex: 0 0 auto; margin: 14px; }
/* Once the canvas exists, a transient status line must float: taking a row of the flex column
   shrinks the canvas, which relayouts the graph and throws away the reader's zoom. */
.knowledge-network-view:has(.graph-view) > :is(.notice, .graph-loading) { position: absolute; z-index: 20; top: 68px; left: 50%; width: min(440px, calc(100% - 28px)); margin: 0; padding: 10px 14px; border-radius: var(--radius); background: var(--surface); box-shadow: 0 16px 36px -24px rgba(0,0,0,.5); transform: translateX(-50%); }
.graph-view { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; }

/* The entity drawer is opened from the inspector, so over the canvas is where it belongs. */
.graph-shell .knowledge-entity { position: fixed; z-index: 30; top: 14px; left: 50%; width: min(560px, calc(100% - 28px)); max-height: min(80vh, 720px); margin: 0; overflow: auto; border-color: var(--line); background: var(--surface); box-shadow: 0 24px 60px -30px rgba(0,0,0,.55); transform: translateX(-50%); }

.graph-bar { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; gap: 9px 14px; padding: max(9px, env(safe-area-inset-top)) max(15px, env(safe-area-inset-right)) 9px max(15px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.graph-bar-title { flex: 0 0 auto; font-size: var(--fs-15); font-weight: 700; letter-spacing: -.01em; }
.graph-exit, .graph-panel-toggle, .graph-lock { flex: 0 0 auto; }
.graph-search { min-width: 0; max-width: 420px; min-height: 40px; flex: 1 1 220px; margin-left: auto; }
.graph-stats { margin: 0; color: var(--ink-soft); font-size: var(--fs-13); }
.graph-loading { margin: 0; color: var(--ink-soft); font-size: var(--fs-13); }
.graph-partial { color: var(--warning); font-size: var(--fs-13); font-weight: 650; }
.graph-coverage-note { margin-top: -3px; }
.graph-evidence-truncated { color: var(--warning); font-size: var(--fs-13); }

/* The graph's ground: the stage greydient (see the greydient block at the end), over the flat riverbed. */
.graph-stage { --graph-ground: var(--riverbed); position: relative; min-height: 0; flex: 1 1 auto; overflow: hidden; background: var(--grain) 0 0 / 160px repeat, var(--gd-stage, none), var(--graph-ground); background-blend-mode: overlay, normal, normal; }
.graph-canvas { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.knowledge-network { display: block; width: 100%; height: 100%; cursor: grab; }
.knowledge-network:active { cursor: grabbing; }
.graph-empty { display: grid; height: 100%; place-content: center; padding: 30px; text-align: center; }

.graph-panel, .graph-detail { position: absolute; z-index: 5; top: 14px; bottom: 14px; display: flex; width: min(330px, calc(100% - 28px)); flex-direction: column; gap: 12px; overflow: auto; overscroll-behavior: contain; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 95%, transparent); box-shadow: 0 20px 44px -28px rgba(0,0,0,.5); backdrop-filter: blur(9px); touch-action: pan-y; }
.graph-panel[hidden], .graph-detail[hidden] { display: none; }
.graph-panel > *, .graph-detail > * { flex: 0 0 auto; margin: 0; }
.graph-panel { left: 14px; }
.graph-detail { right: 14px; width: min(380px, calc(100% - 28px)); }
.graph-detail-close { align-self: flex-end; }
.graph-panel .field { margin: 0; }

.graph-filter-set { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.graph-filter-set legend { padding: 0 5px; color: var(--ink-soft); font-size: var(--fs-11); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.graph-filter, .graph-state { display: inline-flex; min-height: 28px; align-items: center; gap: 6px; font-size: var(--fs-13); }
.graph-filter::after { width: 8px; height: 8px; border-radius: 50%; background: var(--graph-colour); content: ''; }
.graph-filter--person { --graph-colour: var(--entity-person); }
.graph-filter--company { --graph-colour: var(--entity-company); }
.graph-filter--project { --graph-colour: var(--entity-project); }
.graph-filter--meeting { --graph-colour: var(--entity-meeting); }
.graph-filter--link { --graph-colour: var(--entity-link); }
.graph-state::after { width: 17px; border-top: 2px var(--graph-line, solid) var(--ink-soft); content: ''; }
.graph-state--proposed { --graph-line: dashed; }
.graph-state--conflicted { --graph-line: dotted; color: var(--danger); }
.graph-state--rejected { text-decoration: line-through; opacity: .72; }
.graph-state--recorded { color: var(--ink-soft); }
.graph-refresh { justify-self: start; }

.graph-edge { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .58; }
.graph-edge--proposed { stroke-dasharray: 5 5; }
.graph-edge--conflicted { stroke: var(--danger); stroke-dasharray: 2 4; stroke-width: 1.7; }
.graph-edge--rejected { stroke-dasharray: 1 7; opacity: .35; }
.graph-edge--recorded { opacity: .35; }
.graph-node { cursor: pointer; transition: opacity var(--calm-duration) var(--calm-ease); }
/* A stone on the riverbed: no outline, only a hairline gap in the ground's own colour, so two stones
   that touch still read as two. The pattern fill is set per node in web/knowledge-network.js; until the
   graph is small or zoomed in, the flat mean colour overrides it (see `STONE_TEXTURE_SCALE`). */
.graph-node .graph-stone { stroke: var(--graph-ground); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.knowledge-network:not(.is-textured) .graph-stone { fill: var(--graph-stone); }
.graph-node--person { --graph-colour: var(--entity-person); --graph-stone: var(--stone-person); }
.graph-node--company { --graph-colour: var(--entity-company); --graph-stone: var(--stone-company); }
.graph-node--project { --graph-colour: var(--entity-project); --graph-stone: var(--stone-project); }
.graph-node--meeting { --graph-colour: var(--entity-meeting); --graph-stone: var(--stone-meeting); }
.graph-node--link { --graph-colour: var(--entity-link); --graph-stone: var(--stone-link); }
.graph-labels { pointer-events: none; }
.graph-labels text { fill: var(--ink); font-size: var(--fs-11); font-weight: 550; letter-spacing: .01em; paint-order: stroke; stroke: var(--graph-ground); stroke-width: 3px; stroke-linejoin: round; }
.graph-node.is-selected .graph-stone { stroke: var(--ink); stroke-width: 2.5; }
.graph-node.is-dimmed, .graph-edge.is-dimmed { opacity: .1; }

.graph-zoom { position: absolute; z-index: 6; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-strong); box-shadow: 0 4px 18px rgba(0,0,0,.12); transform: translateX(-50%); }
.graph-zoom button { min-width: 42px; min-height: 38px; padding: 0 10px; border-right: 1px solid var(--line); background: transparent; color: var(--ink); font-size: var(--fs-13); }
.graph-zoom button:last-child { border-right: 0; }
.graph-zoom button:is(:hover,:focus-visible) { background: var(--accent-soft); }

.graph-detail h2 { margin-bottom: 5px; overflow-wrap: anywhere; font-size: var(--fs-19); }
.graph-detail h3 { margin: 8px 0 0; font-size: var(--fs-13); }
.graph-type { color: var(--graph-colour); font-size: var(--fs-11); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.graph-type--person { --graph-colour: var(--entity-person); }
.graph-type--company { --graph-colour: var(--entity-company); }
.graph-type--project { --graph-colour: var(--entity-project); }
.graph-type--meeting { --graph-colour: var(--entity-meeting); }
.graph-type--link { --graph-colour: var(--entity-link); }
.graph-detail-empty { color: var(--ink-soft); font-size: var(--fs-13); }
.graph-relation { padding: 13px 0; border-top: 1px solid var(--line); }
.graph-relation p { margin: 2px 0 7px; color: var(--ink-soft); font-size: var(--fs-13); }
.graph-relation .graph-recorded-in { padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--ink); }
.graph-relation--proposed { border-left: 2px solid var(--warning); padding-left: 8px; }
.graph-relation--conflicted { border-left: 3px dotted var(--danger); padding-left: 8px; }
.graph-relation--rejected { opacity: .68; }
.graph-relation-target { max-width: 100%; padding: 0; background: transparent; color: var(--ink); font-weight: 650; text-align: left; overflow-wrap: anywhere; }
.graph-relation-target:is(:hover,:focus-visible) { text-decoration: underline; }
.graph-evidence { margin: 7px 0; padding-left: 18px; font-size: var(--fs-11); }
.graph-evidence p { margin: 3px 0 0; color: var(--ink); }
.graph-node-list { padding-top: 12px; border-top: 1px solid var(--line); }
.graph-node-list h2 { margin-bottom: 8px; font-size: var(--fs-15); }
.graph-node-buttons { display: flex; max-height: 260px; overflow: auto; flex-wrap: wrap; gap: 6px; }
.graph-node-buttons .entity-chip { min-height: 34px; }
.graph-node-buttons .entity-chip.is-selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.graph-detail-title, .knowledge-entity-title { display: flex; align-items: center; gap: 10px; }
.graph-detail-title .entity-mark, .knowledge-entity-title .entity-mark { width: 32px; height: 32px; font-size: var(--fs-13); }
.graph-list-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; color: var(--ink-soft); font-size: var(--fs-13); }

/* On a phone the overlays become sheets: a 330px column beside a 390px canvas is the old problem
   in a new place, and the zoom pill moves clear of the sheet it would otherwise sit under. */
@media (max-width: 759px) {
  .graph-panel, .graph-detail { top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: min(52vh, 460px); padding-bottom: max(16px, env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 18px 18px 0 0; }
  .graph-zoom { top: 12px; right: 12px; bottom: auto; left: auto; transform: none; }
  .graph-bar { gap: 8px 10px; }
  .graph-bar-title { display: none; }
  .graph-exit { order: 1; }
  .graph-stats { order: 2; min-width: 0; flex: 1 1 60px; overflow: hidden; font-size: var(--fs-11); text-overflow: ellipsis; white-space: nowrap; }
  .graph-lock { order: 3; }
  .graph-panel-toggle { order: 4; }
  .graph-search { order: 5; min-width: 0; max-width: none; flex: 1 0 100%; margin-left: 0; }
}

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

/* ---------------------------------------------------------------------------------------------
   Entity chips. `<project>` `(person)` `[company]` `{meeting}` — the bracket carries the type
   without colour and the hue carries it without the bracket. The fill is a light wash of the
   type's hue so a row of mixed chips separates at a glance and still reads as one quiet system.
   The brackets are generated content with empty alt text, so they are neither copied nor read
   aloud; the accessible name stays the entity's name.
   --------------------------------------------------------------------------------------------- */
.entity-chip {
  --chip-hue: var(--entity-project);
  display: inline-flex;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  /* No outline: the stone's own shading carries its edge (Marcus, 24 Sep). The border stays, transparent,
     so a selected chip can still show one without shifting its layout. */
  border: 1px solid transparent;
  border-radius: 6px;
  background: color-mix(in oklch, var(--chip-hue) 9%, var(--surface));
  color: var(--ink);
  font-size: var(--fs-13);
  line-height: 1.25;
  text-align: left;
  vertical-align: middle;
}
button.entity-chip { cursor: pointer; }
button.entity-chip:is(:hover, :focus-visible) { filter: brightness(1.06); }
/* One shape per type, so the kind reads before the label does (Marcus, 24 Sep: "person is a rounded
   pill while project has a sharp polygonal border"). Polygons use clip-path, which would cut a CSS
   border away, so a clipped chip paints its edge as its own background and its fill on ::before,
   inset by the border width with the same polygon. */
.entity-chip--person { --chip-hue: var(--entity-person); border-radius: 999px; }
.entity-chip--company { --chip-hue: var(--entity-company); border-radius: 0; }
.entity-chip--meeting { --chip-hue: var(--entity-meeting); border-radius: 12px 3px; }
.entity-chip--project { --chip-hue: var(--entity-project); --chip-shape: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%); padding-inline: 14px; }
.entity-chip--task { --chip-hue: var(--entity-task); --chip-shape: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); padding-inline: 11px; }
.entity-chip--link { --chip-hue: var(--entity-link); --chip-shape: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); padding-inline: 13px; }
.entity-chip--time_entry { --chip-hue: var(--entity-time-entry); --chip-shape: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); padding-right: 15px; }
.entity-chip--moment { --chip-hue: var(--entity-moment); border-radius: 999px 6px 6px 999px; }
:is(.entity-chip--project, .entity-chip--task, .entity-chip--link, .entity-chip--time_entry) {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  clip-path: var(--chip-shape);
  background: color-mix(in oklch, var(--chip-hue) 9%, var(--surface));
}
:is(.entity-chip--project, .entity-chip--task, .entity-chip--link, .entity-chip--time_entry)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--chip-shape);
  background: color-mix(in oklch, var(--chip-hue) 9%, var(--surface));
}

/* Pebbles (Marcus, 24 Sep: "a slightly different coloured rock texture for each, so each pill looks like
   a different shaped pebble stone"). Each type gets its own grain, laid over its hue with a soft light
   from the top left. Kept faint, because the label has to stay readable over it. */
.entity-chip {
  /* Flat and photographic: the rock's own grain and veins, no lighting or depth (Marcus, 24 Sep). */
  background-image: var(--chip-texture, none);
  background-size: 100% 100%; background-position: center;
}
:is(.entity-chip--project, .entity-chip--task, .entity-chip--link, .entity-chip--time_entry) { background-image: none; }
:is(.entity-chip--project, .entity-chip--task, .entity-chip--link, .entity-chip--time_entry)::before {
  background-image: var(--chip-texture, none);
  background-size: 100% 100%; background-position: center;
}
@media (forced-colors: active) { .entity-chip, .entity-chip::before { background-image: none; text-shadow: none; filter: none; } }

/* Photographed stone, one rock per type: real CC0 scans (public/skies/README.md), desaturated to one
   natural family. --stone is each tile's mean colour, shown until the tile loads.
   Natural stone colours, no UI tint (Marcus, 24 Sep: "don't tint them, only use natural colors").
   The type reads from shape and rock; --chip-hue stays for the graph and icons elsewhere. Dark stones
   carry light text. Wet stones read a touch darker at night, so dark mode drops lightness slightly. */
.entity-chip--person { --stone: var(--stone-person); --stone-ink: oklch(0.2 0.01 60); --chip-texture: url("skies/person.webp"); }
.entity-chip--company { --stone: var(--stone-company); --stone-ink: oklch(0.2 0.01 60); --chip-texture: url("skies/company.webp"); }
.entity-chip--project { --stone: var(--stone-project); --stone-ink: oklch(0.2 0.01 60); --chip-texture: url("skies/project.webp"); }
.entity-chip--meeting { --stone: var(--stone-meeting); --stone-ink: oklch(0.2 0.01 60); --chip-texture: url("skies/meeting.webp"); }
.entity-chip--task { --stone: var(--stone-task); --stone-ink: oklch(0.2 0.01 60); --chip-texture: url("skies/task.webp"); }
.entity-chip--link { --stone: var(--stone-link); --stone-ink: oklch(0.2 0.01 60); --chip-texture: url("skies/link.webp"); }
.entity-chip--time_entry { --stone: var(--stone-time-entry); --stone-ink: oklch(0.2 0.01 60); --chip-texture: url("skies/time_entry.webp"); }
.entity-chip--moment { --stone: var(--stone-moment); --stone-ink: oklch(0.2 0.01 60); --chip-texture: url("skies/moment.webp"); }
.entity-chip { background-color: var(--stone); color: var(--stone-ink); }
.entity-chip .entity-chip-label::before, .entity-chip .entity-chip-label::after { color: currentColor; }
.entity-chip .entity-chip-meta { color: color-mix(in oklch, var(--stone-ink) 70%, var(--stone)); }
:is(.entity-chip--project, .entity-chip--task, .entity-chip--link, .entity-chip--time_entry) { background-color: transparent; }
:is(.entity-chip--project, .entity-chip--task, .entity-chip--link, .entity-chip--time_entry)::before { background-color: var(--stone); }
a.entity-chip { text-decoration: none; cursor: pointer; }
a.entity-chip:is(:hover, :focus-visible) { filter: brightness(1.06); }
.entity-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.entity-chip-label { min-width: 0; overflow-wrap: anywhere; }
.entity-chip-label::before, .entity-chip-label::after { color: var(--chip-hue); font-weight: 700; }
.entity-chip--link .entity-chip-label::after { content: "↗"; content: "↗" / ""; margin-left: 3px; }
.entity-chip--task .entity-chip-label::before { content: "☐"; content: "☐" / ""; margin-right: 4px; }
.entity-chip--time_entry .entity-chip-label::before { content: "◷"; content: "◷" / ""; margin-right: 4px; }
.entity-chip--moment .entity-chip-label::before { content: "✦"; content: "✦" / ""; margin-right: 4px; }
.entity-chip-meta { color: var(--ink-soft); font-size: var(--fs-11); font-variant-numeric: tabular-nums; }
.entity-chip .entity-mark { width: 18px; height: 18px; margin-left: -4px; font-size: var(--fs-11); }

/* The picture, or the initials in its place. Same box either way, so a logo arriving never moves
   a row. Portraits are round, logos are rounded squares: the shape agrees with the chip's. */
.entity-mark {
  --chip-hue: var(--entity-project);
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--chip-hue) 30%, var(--line));
  border-radius: 999px;
  background: color-mix(in oklch, var(--chip-hue) 14%, var(--surface));
  color: color-mix(in oklch, var(--chip-hue) 70%, var(--ink));
  font-size: var(--fs-11);
  font-weight: 650;
  letter-spacing: .01em;
  object-fit: cover;
  user-select: none;
}
.entity-mark--person { --chip-hue: var(--entity-person); }
.entity-mark--company { --chip-hue: var(--entity-company); border-radius: 5px; }
/* A logo is drawn for a light ground, so it keeps one in the dark palette too. */
.entity-mark--company.has-image { padding: 1px; background: #fff; object-fit: contain; }
.entity-mark.has-image { border-color: var(--line); }
.person-summary .person-avatar { align-self: center; }
.person-portrait-action { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }

/* The same chip, in the places a line of text used to name the entity. Inline chips sit in a row
   of small metadata, so they lose the height and most of the padding but keep bracket and hue. */
.entity-chip--inline { min-height: 0; padding: 0 6px; gap: 4px; font-size: inherit; line-height: 1.5; vertical-align: baseline; }
:is(.entity-chip--project, .entity-chip--time_entry).entity-chip--inline { padding-inline: 12px; }
:is(.entity-chip--task, .entity-chip--link).entity-chip--inline { padding-inline: 10px; }
.task-meta .entity-chip--inline { color: var(--ink-soft); }
.meta-waiting { display: inline-flex; align-items: baseline; gap: 2px; }
.detail-fact-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-fact .entity-chip-label { color: var(--ink); font-size: inherit; }
.detail-fact .entity-chip-meta { color: var(--ink-soft); font-size: var(--fs-11); }
.detail-fact .entity-mark { color: color-mix(in oklch, var(--chip-hue) 70%, var(--ink)); font-size: var(--fs-11); }
.growth-company { display: flex; align-items: center; gap: 8px; }
.growth-company .entity-chip { font-size: inherit; font-weight: inherit; }
.scope-breadcrumb .crumb--current.entity-chip { min-height: 0; padding: 1px 7px; }
.task-link-chip.entity-chip { gap: 0; padding: 0; }
.task-link-chip.entity-chip button { color: var(--ink); }

/* ── Links ───────────────────────────────────────────────────────────────────
   The context store. Rows are a quiet list rather than cards: most of the page
   is labels to click, and a label is the one thing that must read at a glance.
   Tokens only, so both palettes come for free. Local classes throughout, so
   nothing here restyles an entity chip elsewhere. */

.links-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.links-controls {
  display: grid;
  gap: 6px;
}

.links-count {
  margin: 0;
  font-size: var(--fs-13);
}

.links-notice {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-15);
}

.links-notice--success { background: var(--accent-soft); color: var(--ink); }
.links-notice--error { background: var(--danger-soft); color: var(--danger); }

.links-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.links-heading {
  margin: 0;
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.links-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.links-group-title {
  margin: 0;
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--ink);
}

.links-group-title--none { color: var(--ink-soft); font-weight: 500; }

.links-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.links-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding: 10px 14px 4px;
}

.links-row + .links-row {
  border-top: 1px solid var(--line);
}

.links-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.links-label {
  flex: 1 1 14rem;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.links-label:hover { text-decoration-color: var(--accent); color: var(--accent); }
.links-label--dead { text-decoration: none; color: var(--ink-soft); }

.links-kind {
  flex: 0 0 auto;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  font-size: var(--fs-11);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.links-note {
  margin: 0;
  font-size: var(--fs-15);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.links-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  min-width: 0;
  font-size: var(--fs-13);
  color: var(--ink-faint);
}

.links-meta:empty { display: none; }

.links-seen { font-variant-numeric: tabular-nums; }

.links-auto {
  padding: 0 0.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-11);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.links-more { align-self: flex-start; }

.links-url {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.links-actions {
  display: flex;
  gap: 1rem;
}

.links-actions .text-button {
  min-height: 36px;
  font-size: var(--fs-13);
}

.links-editor {
  display: grid;
  gap: 8px;
  padding: 6px 0 10px;
}

.links-field {
  display: grid;
  gap: 4px;
}

.links-note-input {
  resize: vertical;
  min-height: 64px;
}

.links-editor-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 600px) {
  .links-row { padding: 10px 12px 4px; }
  .links-actions .text-button { min-height: var(--touch); }
}

/* One entity's page (stage 6): `web/entity-view.js`. Each edge kind is a card of chips; a chip opens
   its own entity, so the graph is walked one page at a time. */
.entity-page { display: grid; gap: 16px; max-width: 1040px; min-width: 0; padding-bottom: 32px; }
.entity-back { justify-self: start; }
.entity-page-head { display: grid; gap: 6px; min-width: 0; }
.entity-page-type { margin: 0; color: var(--ink-soft); font-size: var(--fs-13); overflow-wrap: anywhere; }
.entity-page-title { margin: 0; font-size: var(--fs-19); line-height: 1.3; }
.entity-page-title .entity-chip { font-size: var(--fs-15); padding: 6px 12px; }
.entity-page-note { margin: 0; color: var(--ink-soft); font-size: var(--fs-13); }
.entity-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; align-items: start; }
.entity-groups--compact { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 8px 0; }
.entity-group { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.entity-group-title { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: var(--fs-13); }
.entity-group-count { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.entity-items { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.entity-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.entity-item-meta { color: var(--ink-soft); font-size: var(--fs-11); }
.entity-item-missing { color: var(--ink-soft); font-style: italic; font-size: var(--fs-13); }
.entity-omitted { margin: 0; color: var(--ink-soft); font-size: var(--fs-11); }
/* A proposal is shown as one: tinted and labelled, never styled like a fact. */
.entity-state { padding: 1px 6px; border: 0; border-radius: 999px; color: var(--ink); font-size: var(--fs-11); }
.entity-item.is-rejected .entity-chip { opacity: .6; text-decoration: line-through; }
.detail-graph-link { margin: 0; }

/* ── Mineral calm ─────────────────────────────────────────────────────────────
   24 Sep 2026. Marcus: "more earthy, grounded", then "a sense of calm, almost a wellness aesthetic",
   with references of a limestone showroom and an incised-capital wordmark. The same taste as the
   stone chips, applied to the whole app: a photographed ground, no outlines, no lighting effects,
   natural colour. Things are separated by tone and by space, not by lines; the lines that remain are
   form fields, which keep a 3:1 boundary, and focus rings, which are never softened. This block comes
   last so it states the look in one place over the older component rules above. */

/* The page ground: flat canvas (see the greydient block at the end). */
body,
body:has(.app-shell) {
  background: var(--canvas);
}

/* The frame: paper on limestone, lifted by tone and the softest warm shadow, with no rim. */
.app-shell {
  border-color: transparent;
  border-radius: 32px;
  box-shadow: 0 40px 90px -60px color-mix(in oklch, var(--ink) 28%, transparent);
}
.main-column::before {
  height: 280px;
  border-radius: 0 32px 0 0;
  background: radial-gradient(ellipse 60% 100% at 100% 0, color-mix(in oklch, var(--header-tint) 55%, transparent), transparent 75%);
}
.main-column { padding: 30px 44px 80px; }

/* The sidebar is a band of sand, parted from the page by tone alone. */
.sidebar {
  border-right: 0;
  border-radius: 32px 0 0 32px;
  background: var(--grain) 0 0 / 160px repeat, var(--gd-sidebar), var(--surface-muted); background-blend-mode: overlay, normal, normal;
}
.brand-name { font-family: var(--font-ui); font-size: var(--fs-19); font-weight: 500; letter-spacing: -.02em; text-transform: none; }
.brand-mark { width: 30px; height: 30px; }

/* Navigation as tiny tracked capitals, and the current page marked by a pebble (Marcus: "the nav as a
   cairn"). The pebble is a crop of the project stone, the warmest of the set so it still shows on sand,
   in the rounded-but-irregular outline of a stone worn by water. No pill, no border, no shadow. */
.nav-item {
  position: relative;
  min-height: 40px;
  padding: 11px 14px 11px 26px;
  border: 0;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: var(--fs-13);
  font-weight: 450;
  letter-spacing: 0;
  text-transform: none;
  transition: color var(--calm-duration) var(--calm-ease);
}
.nav-item:hover { border-color: transparent; background: transparent; color: var(--ink); }
.nav-item.is-current {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-weight: 550;
}
.nav-item.is-current::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  width: 12px;
  height: 9px;
  border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%;
  background: var(--stone-project) url("skies/project.webp") 40% 50% / 90px auto;
  transform: translateY(-50%) rotate(-8deg);
}
.nav-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.account-name { letter-spacing: .02em; }

/* Page titles stay modern: the sans, light and tight, in sentence case (Marcus, 24 Sep: the incised
   capitals read "like a Roman scripture"; find the balance). The serif is kept for names only. */
.main-column .page-header h1 {
  font-family: var(--font-ui);
  font-size: var(--fs-40);
  font-weight: 350;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-transform: none;
}
.page-eyebrow { margin: 6px 0 22px; color: var(--ink-soft); font-family: var(--font-mono); letter-spacing: .14em; }
.focus-now .eyebrow { font-family: var(--font-mono); letter-spacing: .14em; }

/* The serif is for names only, in their own case: the one humane note in a modern layout. */
:is(.entity-page-title, .meeting-page-title, .graph-detail h2, .knowledge-entity-title) {
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: none;
}
.main-column .section-heading h2 { font-size: var(--fs-19); font-weight: 450; letter-spacing: -.02em; }
.next-marker-title { font-size: var(--fs-28); font-weight: 400; line-height: 1.25; letter-spacing: -.02em; }
.entity-page-title .entity-chip { font-family: var(--font-title); font-size: var(--fs-19); letter-spacing: .02em; padding: 8px 16px; }
.person-name { font-family: var(--font-title); font-size: var(--fs-15); font-weight: 400; letter-spacing: .01em; }

/* Cards become slabs: a gentle vertical greydient on paper, river-stone corners, no outline. */
:is(.entity-group, .links-list, .growth-row, .overview-signal, .next-marker, .person-editor, .task-link-card, .entry-card, .notice) {
  border-color: transparent;
  border-radius: var(--radius-slab);
  background: var(--grain) 0 0 / 160px repeat, var(--gd-slab), var(--slab); background-blend-mode: overlay, normal, normal;
}
/* Ink sits on flat paper, never across a greydient: the unlock card holds its drawing on one tone. */
.entry-card.entry-card--unlock { background: var(--slab); }
.entity-groups { gap: 16px; }
.entity-group { padding: 18px 20px 14px; }
.entity-group-title { margin-bottom: 12px; color: var(--ink-soft); font-size: var(--fs-11); font-weight: 550; letter-spacing: .06em; text-transform: uppercase; }
.entity-page { gap: 22px; }
.entity-page-type { letter-spacing: .02em; }

/* Links: each row its own slab, spaced rather than ruled. */
.links-list { display: grid; gap: 0; overflow: hidden; padding: 4px 0; border: 0; border-radius: var(--radius-slab); background: var(--grain) 0 0 / 160px repeat, var(--gd-slab), var(--slab); background-blend-mode: overlay, normal, normal; }
/* Compact rows: one line each inside one slab per group, divided by space and a whisper of line. */
.links-row {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr) auto auto auto;
  align-items: center;
  column-gap: 12px;
  min-height: 38px;
  padding: 4px 16px;
  border-radius: 0;
  background: none;
}
.links-row + .links-row { border-top: 1px solid color-mix(in oklch, var(--line) 60%, transparent); }
.links-row .links-label { overflow: hidden; font-size: var(--fs-15); text-overflow: ellipsis; white-space: nowrap; }
.links-row .links-note { overflow: hidden; margin: 0; color: var(--ink-faint); font-size: var(--fs-13); text-overflow: ellipsis; white-space: nowrap; }
.links-row .links-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-11); white-space: nowrap; }
.links-row .links-seen { color: var(--ink-faint); }
.links-row .links-kind { font-size: var(--fs-11); }
.links-row .links-actions { display: flex; gap: 2px; margin: 0; }
.links-row .links-actions .text-button { min-height: 28px; padding: 0 6px; font-size: var(--fs-11); }
@media (hover: hover) {
  .links-row .links-actions { opacity: 0; transition: opacity var(--calm-duration, .2s) ease; }
  .links-row:is(:hover, :focus-within) .links-actions { opacity: 1; }
}
.links-row.is-editing { grid-template-columns: 1fr; row-gap: 8px; padding-block: 10px; }
.links-row.is-editing :is(.links-note, .links-meta, .links-kind) { display: none; }
.links-kind { border-color: transparent; background: color-mix(in oklch, var(--slab-strong) 80%, transparent); }

/* The Now card is lit, not framed: a warmer slab. */
.focus-now {
  border-color: transparent;
  border-radius: var(--radius-slab);
  background: var(--grain) 0 0 / 160px repeat, var(--gd-now), var(--now-tint); background-blend-mode: overlay, normal, normal;
  box-shadow: none;
}
.focus-aside .overview-signal, .focus-aside .attention-overview { border-color: transparent; border-radius: var(--radius-slab); background: color-mix(in oklch, var(--slab) 70%, transparent); }

/* Dividers whisper: the lines that still separate rows are the palest step of the ground. */
.focus-balance { border-bottom-color: color-mix(in oklch, var(--line) 70%, transparent); }
.focus-tabs button { border-color: transparent; background: color-mix(in oklch, var(--slab) 80%, transparent); }
.focus-tabs button:hover { border-color: transparent; background: var(--slab-strong); }
.focus-tabs button[aria-selected="true"] { border-color: transparent; background: var(--accent-soft); box-shadow: none; }
.workspace-filter:hover, .workspace-filters > button:hover, .archive-tabs > button:hover { border-color: transparent; background: var(--slab); }
.workspace-filter[aria-pressed="true"], .workspace-filters > button[aria-pressed="true"], .archive-tabs > button[aria-pressed="true"], .archive-tabs > button.is-current { border-color: transparent; background: var(--accent-soft); }

/* Buttons are pebbles of sand, not outlined boxes. The primary action stays solid ink. */
.button, .capture-button, .window-button {
  border-color: transparent;
  border-radius: 999px;
  background: var(--slab-strong);
  font-weight: 550;
  letter-spacing: .01em;
  transition: background-color var(--calm-duration) var(--calm-ease);
}
.button:hover, .capture-button:hover, .window-button:hover { border-color: transparent; background: color-mix(in oklch, var(--slab-strong) 80%, var(--ink) 8%); }
.button--secondary { background: var(--slab-strong); }
.button--primary, .button--dark, .button--primary:hover, .button--dark:hover { border-color: var(--ink); background: var(--ink); color: var(--canvas); }
:is(.button, .capture-button, .window-button, .text-button, .focus-tabs button, .archive-tabs > button):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.account-menu > summary { border-color: transparent; background: var(--slab); box-shadow: none; }

/* Form fields keep their boundary: it is the affordance, so it is the one line held at 3:1. */
:is(.text-input, .textarea, .select, .capture-input, .detail-title-input, .mobile-view-select) {
  border-color: var(--field-line);
  border-radius: 14px;
  background: var(--surface-strong);
}

/* Overlays over the graph and sheets: slabs too, lifted by a soft shadow rather than a rim. */
:is(.graph-panel, .graph-detail, .graph-zoom, .account-menu-panel, .detail-dialog) { border-color: transparent; }
:is(.graph-panel, .graph-detail) { border-radius: var(--radius-slab); background: color-mix(in oklch, var(--surface) 94%, transparent); }
.graph-filter-set { border-color: transparent; background: var(--slab); border-radius: 16px; }
.graph-bar { border-bottom: 0; background: var(--surface); }
.graph-zoom button { border-right-color: transparent; }
.graph-edge { stroke: color-mix(in oklch, var(--ink) 30%, var(--riverbed)); }

@media (max-width: 759px) {
  .main-column { padding: 20px 16px 64px; }
  .main-column .page-header h1 { font-size: var(--fs-28); letter-spacing: .06em; }
  .entity-group { padding-inline: 16px; }
  .links-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 8px 14px; }
  .links-row .links-note { grid-column: 1 / -1; grid-row: 2; }
  .links-row .links-meta { grid-column: 1; grid-row: 3; }
  .links-row .links-kind { display: none; }
  .links-row .links-actions { grid-column: 2; grid-row: 1 / span 3; }
}

@media (prefers-contrast: more) {
  :is(.entity-group, .links-row, .growth-row, .overview-signal, .next-marker, .focus-now, .button, .capture-button, .window-button) { border-color: var(--ink-soft); }
}

@media (forced-colors: active) {
  body, .sidebar, .graph-stage, .graph-bar, :is(.entity-group, .links-row, .focus-now) { background-image: none; }
  .nav-item.is-current::before { background: CanvasText; }
}

/* The graph's legend is the stones themselves, and the type label reads as quiet ink, not a hue. */
.graph-filter--person { --graph-stone: var(--stone-person); --graph-tile: url("skies/person.webp"); }
.graph-filter--company { --graph-stone: var(--stone-company); --graph-tile: url("skies/company.webp"); }
.graph-filter--project { --graph-stone: var(--stone-project); --graph-tile: url("skies/project.webp"); }
.graph-filter--meeting { --graph-stone: var(--stone-meeting); --graph-tile: url("skies/meeting.webp"); }
.graph-filter--link { --graph-stone: var(--stone-link); --graph-tile: url("skies/link.webp"); }
.graph-filter::after { width: 12px; height: 10px; border-radius: 50% 46% 52% 48% / 58% 54% 46% 42%; background: var(--graph-stone) var(--graph-tile, none) center / 80px auto; }
.graph-type { color: var(--ink-soft); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* An inline chip in a row of metadata is still a stone: its label keeps the stone's own ink, never the
   row's softer grey, which on a pale stone would fall below AA. */
.task-meta .entity-chip--inline { color: var(--stone-ink); }
.graph-search { appearance: none; -webkit-appearance: none; padding-inline: 16px; border-radius: 999px; border: 1px solid var(--field-line); background: var(--surface-strong); color: var(--ink); }
.graph-search:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.graph-panel select { min-height: 40px; padding: 6px 12px; border: 1px solid var(--field-line); border-radius: 14px; background: var(--surface-strong); color: var(--ink); }

/* ── Greydients ───────────────────────────────────────────────────────────────
   24 Sep 2026, over mineral calm. Marcus: "the page looks pale and flat, not helping with the flood of
   text", and "I love those Japanese gradients" (Nuevo.Tokyo, Japanese Colours for UI: greydients).
   The texture is gone; tone does the work. Each zone gets its own field, blended in OKLCH, and zones
   meet at hard edges so they never smear into one another:
     sidebar  rōiro #2B2B2B → sabi nezu #47585C → seijinezu #BED2C3 → haikimidori #E6EAE3 (ref 04 α),
              and by night nurebairo #000B00 → an indigo band → sabi grey (ref 03 α);
     header   haikimidori falling into kinarīro #FBFAF5, the paper;
     Now      yanagi nezumi #CBD5BB, willow grey; by night minato nezumi depths;
     key      shira ume nezu blush → lavender, for the one panel that summarises the week;
     slabs    shiro nezu / usuku mo nezu, a whisper from top to bottom so the eye finds each block.
   Sabi nezu is the dark anchor (the selected area, the primary button) and minato nezumi the accent. */
/* The colours, named as Nuevo.Tokyo names them (romaji; kanji and English in the comment). Where a
   field needs a paler or deeper step of a colour so text stays AA on it, the step keeps the name with
   a suffix: -pale by day, -d1/-d2 by night. */
:root {
  --jg-roiro: #2B2B2B;          /* 蝋色 rōiro, charcoal lacquer */
  --jg-sabinezu: #47585C;       /* 錆鼠 sabi nezu, rust grey */
  --jg-seijinezu: #BED2C3;      /* 青磁鼠 seijinezu, celadon porcelain */
  --jg-haikimidori: #E6EAE3;    /* 灰黄緑 haikimidori, grey yellow green */
  --jg-kinariiro: #FBFAF5;      /* 生成り色 kinarīro, dough */
  --jg-yanaginezumi: #CBD5BB;   /* 柳鼠 yanagi nezumi, willow grey */
  --jg-yanaginezumi-pale: oklch(0.94 0.024 125);
  --jg-usukumonezu: #D4DCDA;    /* 薄雲鼠 usuku mo nezu, light grey cloud */
  --jg-usukumonezu-pale: oklch(0.94 0.009 178);
  --jg-shironezu: #DCDDDD;      /* 白鼠 shiro nezu, white grey */
  --jg-shironezu-pale: oklch(0.962 0.006 170);
  --jg-shiraumenezu: #E5E4E6;   /* 白梅鼠 shira ume nezu, white plum grey */
  --jg-shiraumenezu-blush: oklch(0.95 0.016 356);
  --jg-lavender-pale: oklch(0.915 0.028 292); /* the lavender foot of Greydients 03 β, unnamed there */
  --jg-minatonezumi: #00909B;   /* 湊鼠 minato nezumi, minato village's grey */
  --jg-nurebairo: #000B00;      /* 濡羽色 nurebairo, shiny crow's feather */
  /* nurebairo turned toward the indigo while still near black, so the blend never passes through teal */
  --jg-nurebairo-indigo: oklch(0.15 0.025 272);
  --jg-indigo-night: oklch(0.33 0.075 274); /* the indigo band of Greydients 03 α, unnamed there, at night depth */
  --jg-sabinezu-night: oklch(0.37 0.028 230);
  --jg-sabinezu-d1: oklch(0.265 0.015 212);
  --jg-sabinezu-d2: oklch(0.238 0.013 216);
  --jg-minatonezumi-d1: oklch(0.34 0.045 202);
  --jg-minatonezumi-d2: oklch(0.275 0.03 208);
  --jg-indigo-d1: oklch(0.3 0.04 285);
  --jg-plum-d2: oklch(0.265 0.03 330);

  --sabi: var(--jg-sabinezu);
  --sabi-deep: oklch(0.35 0.02 214);
  --minato: var(--jg-minatonezumi);
  /* Text laid on a deep field. */
  --on-deep: oklch(0.975 0.007 97);
  --on-deep-soft: oklch(0.86 0.014 160);
  /* The fields. Each is two or three named colours, blended in OKLCH, tall and vertical. The
     sidebar's own field (`--gd-sidebar`) is declared on `.sidebar`, at the end of this file, because
     its dark hold is as tall as the arrangement's nav and only the sidebar knows that. */
  --gd-header: linear-gradient(in oklch to bottom, var(--jg-haikimidori), oklch(0.984 0.007 97 / 0));
  --gd-slab: linear-gradient(in oklch to bottom, var(--jg-shironezu-pale), var(--jg-usukumonezu-pale));
  --gd-now: linear-gradient(in oklch to bottom, var(--jg-yanaginezumi-pale), var(--jg-yanaginezumi));
  --gd-key: linear-gradient(in oklch to bottom, var(--jg-shiraumenezu-blush), var(--jg-lavender-pale));
  --gd-stage: linear-gradient(in oklch to bottom, var(--jg-haikimidori), var(--jg-usukumonezu));
  --gd-mobile-bar: linear-gradient(in oklch to bottom, var(--jg-seijinezu), var(--jg-haikimidori));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sabi: oklch(0.52 0.03 214);
    --sabi-deep: oklch(0.3 0.02 214);
    --on-deep: oklch(0.955 0.008 97);
    --on-deep-soft: oklch(0.84 0.02 260);
    --gd-header: linear-gradient(in oklch to bottom, var(--jg-sabinezu-d1), oklch(0.215 0.013 218 / 0));
    --gd-slab: linear-gradient(in oklch to bottom, var(--jg-sabinezu-d1), var(--jg-sabinezu-d2));
    --gd-now: linear-gradient(in oklch to bottom, var(--jg-minatonezumi-d1), var(--jg-minatonezumi-d2));
    --gd-key: linear-gradient(in oklch to bottom, var(--jg-indigo-d1), var(--jg-plum-d2));
    --gd-stage: linear-gradient(in oklch to bottom, var(--jg-nurebairo-indigo), var(--jg-sabinezu-d2));
    --gd-mobile-bar: linear-gradient(in oklch to bottom, var(--jg-nurebairo-indigo), var(--jg-indigo-night));
  }
}
:root[data-theme="dark"] {
  --sabi: oklch(0.52 0.03 214);
  --sabi-deep: oklch(0.3 0.02 214);
  --on-deep: oklch(0.955 0.008 97);
  --on-deep-soft: oklch(0.84 0.02 260);
  --gd-header: linear-gradient(in oklch to bottom, var(--jg-sabinezu-d1), oklch(0.215 0.013 218 / 0));
  --gd-slab: linear-gradient(in oklch to bottom, var(--jg-sabinezu-d1), var(--jg-sabinezu-d2));
  --gd-now: linear-gradient(in oklch to bottom, var(--jg-minatonezumi-d1), var(--jg-minatonezumi-d2));
  --gd-key: linear-gradient(in oklch to bottom, var(--jg-indigo-d1), var(--jg-plum-d2));
  --gd-stage: linear-gradient(in oklch to bottom, var(--jg-nurebairo-indigo), var(--jg-sabinezu-d2));
  --gd-mobile-bar: linear-gradient(in oklch to bottom, var(--jg-nurebairo-indigo), var(--jg-indigo-night));
}

/* The canvas beside the frame is flat, as in the references: #F3F3F3 by day, nurebairo-dark by night.
   Colour lives in the fields, and the fields meet it at hard edges. */
body, body:has(.app-shell) { background: var(--canvas); }

/* Labels are mono, tracked capitals, like the reference's colour names: section labels, entity group
   heads, and the eyebrows that already were. Titles and content stay in the sans. */
.main-column .section-heading h2,
.focus-also > h2,
.entity-group-title,
.links-heading,
.section-label,
.nav-group-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The frame is kinarīro paper; the header is a quiet haikimidori band that falls into it. */
.app-shell { background: var(--surface); box-shadow: 0 40px 90px -60px color-mix(in oklch, var(--sabi-deep) 45%, transparent); }

/* Film grain on the colour fields only, as in the Nuevo.Tokyo greydients (Marcus, 24 Sep: "add some
   grain"). A mid-grey noise tile laid over each gradient with overlay blending, so it adds tooth and no
   colour, and never sits on top of text. */
:root { --grain: url("grain/film.webp"); }
.main-column::before { height: 240px; background: var(--gd-header); }

/* The sidebar: a tall greydient, dark at the top like the reference, the nav in light type on it. */
.sidebar { background: var(--grain) 0 0 / 160px repeat, var(--gd-sidebar), var(--surface-muted); background-blend-mode: overlay, normal, normal; color: var(--on-deep); }
.sidebar .brand-name { color: var(--on-deep); }
.sidebar .nav-item { color: var(--on-deep-soft); }
.sidebar .nav-item:hover, .sidebar .nav-item.is-current { color: var(--on-deep); }
.sidebar .nav-item:focus-visible { outline-color: var(--on-deep); }
.sidebar-bottom { border-top: 0; color: var(--ink); }
.sidebar-bottom :is(.account-name, .text-button) { color: var(--ink); }
.sidebar-bottom .account-email { color: var(--ink-soft); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sidebar-bottom :is(.account-name, .text-button, .account-email) { color: var(--on-deep); }
}
:root[data-theme="dark"] .sidebar-bottom :is(.account-name, .text-button, .account-email) { color: var(--on-deep); }

/* Titles: the page title gains weight enough to anchor the band; section heads are quieter than
   the goals they introduce, so the eye lands on content, not on labels. */
.main-column .page-header h1 { font-weight: 400; color: var(--ink); }
.main-column .section-heading { margin-bottom: 12px; }
.main-column .section-heading :is(span, a, small, p) { font-size: var(--fs-13); }

/* Balance: the selected area is the page's one dark pebble, sabi nezu with paper type. */
.focus-balance { border-bottom: 0; margin-bottom: 26px; padding-bottom: 0; }
.focus-tabs button { background: var(--slab); color: var(--ink-soft); font-size: var(--fs-13); }
.focus-tabs button[aria-selected="true"], .focus-tabs button[aria-selected="true"]:hover { background: var(--sabi); color: var(--on-deep); }
.focus-tabs button[aria-selected="true"] [aria-hidden="true"] { color: var(--on-deep-soft); }

/* Goals are slabs. Inside one, related lines sit close; between goals, real space. */
.focus-goals { display: grid; gap: 14px; }
.focus-goal, .focus-goal:first-child { padding: 20px 22px 4px; border-radius: var(--radius-slab); background: var(--grain) 0 0 / 160px repeat, var(--gd-slab), var(--slab); background-blend-mode: overlay, normal, normal; }
.focus-goal-head > h3, .focus-goal-title { font-size: var(--fs-19); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.focus-goal-description { max-width: 60ch; margin: 6px 0 4px; font-size: var(--fs-13); line-height: 1.55; color: var(--ink-soft); }
.focus-goal-tasks { margin-top: 10px; }
.focus-page .task-row { min-height: 44px; margin: 0; padding: 7px 0 8px; }
.focus-page .task-title-button { font-size: var(--fs-15); font-weight: 450; line-height: 1.4; min-height: 0; color: var(--ink); }
.focus-page .task-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 4px 0 0; font-size: var(--fs-11); line-height: 1.4; color: var(--ink-faint); }
.focus-page .held-note { margin-top: 3px; font-size: var(--fs-13); line-height: 1.4; }
.focus-page .task-row:is(:hover,:focus-within) { border-color: transparent; background: color-mix(in oklch, var(--surface-strong) 70%, transparent); }
.focus-goal-add { border-top: 0; margin-top: 2px; }
.focus-add-goal { margin-top: 4px; }
.focus-add-goal::after { display: none; }
.focus-unassigned { margin-top: 8px; padding: 18px 22px 10px; border-radius: var(--radius-slab); background: var(--grain) 0 0 / 160px repeat, var(--gd-slab), var(--slab); background-blend-mode: overlay, normal, normal; }
.focus-unassigned > .section-heading { margin-bottom: 4px; }
.focus-unassigned > .section-heading h3 { margin: 0; font-size: var(--fs-19); font-weight: 500; letter-spacing: -.015em; color: var(--ink-soft); }
.focus-page :is(.focus-unassigned, .focus-also) .task-list { border: 0; }
.focus-page :is(.focus-unassigned, .focus-also) .task-row { border-top: 0; border-bottom: 0; }

/* Now: the willow field, the one lit panel on the page. */
.focus-now { padding: 22px 24px 20px; background: var(--grain) 0 0 / 160px repeat, var(--gd-now), var(--now-tint); background-blend-mode: overlay, normal, normal; }
.focus-now .eyebrow { color: var(--ink-soft); }
.focus-page .focus-now .next-marker-title { font-size: var(--fs-28); font-weight: 450; letter-spacing: -.025em; line-height: 1.2; }
.focus-now .next-marker-reason { font-size: var(--fs-13); line-height: 1.5; color: var(--ink-soft); }
.focus-now .task-meta { color: var(--ink-soft); }
.focus-also { margin-top: 28px; padding-top: 0; border-top: 0; }
.focus-aside { gap: 12px; }

/* The week's summary is the key panel: blush to lavender. Attention stays a plain slab. */
.focus-aside .overview-signal { padding: 16px 18px; background: var(--grain) 0 0 / 160px repeat, var(--gd-key), var(--slab); background-blend-mode: overlay, normal, normal; }
.focus-aside .attention-overview { padding: 14px 18px; background: var(--grain) 0 0 / 160px repeat, var(--gd-slab), var(--slab); background-blend-mode: overlay, normal, normal; }
.overview-signal strong { font-size: var(--fs-13); font-weight: 600; }
.overview-signal span { font-size: var(--fs-13); line-height: 1.5; color: var(--ink-soft); }

/* Entity page: groups read as a set of slabs with clear heads; their rows breathe. */
.entity-groups { gap: 14px; }
.entity-group { padding: 18px 20px 16px; }
.entity-item + .entity-item { margin-top: 6px; }

/* Links: compact rows inside one slab (see the Links block above), label first, provenance quieter. */
.links-label { font-weight: 500; }

/* Buttons: sabi for the primary action, a light pebble otherwise. */
.button--primary, .button--dark, .button--primary:hover, .button--dark:hover { border-color: var(--sabi); background: var(--sabi); color: var(--on-deep); }

/* Mobile: the bar carries the header greydient, pale by day and indigo by night. */
@media (max-width: 759px) {
  .mobile-bar { background: var(--grain) 0 0 / 160px repeat, var(--gd-mobile-bar), var(--surface-muted); background-blend-mode: overlay, normal, normal; border-bottom: 0; }
  .main-column .page-header h1 { letter-spacing: -.02em; }
  .focus-goal, .focus-goal:first-child { padding: 18px 18px 6px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mobile-bar :is(.brand-name, .brand-mark) { color: var(--on-deep); }
}

@media (forced-colors: active) {
  :is(.sidebar, .focus-goal, .focus-now, .overview-signal, .attention-overview, .mobile-bar, .graph-stage) { background-image: none; }
}

/* By night the skies dim a step, so a pastel chip sits in the deep fields instead of glowing on them.
   The label is dark ink on the stone, so dimming only lowers its contrast from ~11:1 to ~9:1. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entity-chip { filter: brightness(.88) saturate(.9); }
  :root:not([data-theme="light"]) a.entity-chip:is(:hover, :focus-visible) { filter: brightness(.96) saturate(.95); }
}
:root[data-theme="dark"] .entity-chip { filter: brightness(.88) saturate(.9); }
:root[data-theme="dark"] a.entity-chip:is(:hover, :focus-visible) { filter: brightness(.96) saturate(.95); }

/* ── The arranged sidebar (25 Sep 2026) ────────────────────────────────────────────────────────
   The nav is the person's arrangement (`packages/domain/src/sidebar.ts`): groups under small mono
   headings, Do / Know / Grow / Keep by default. The shell sets `--nav-rows` and `--nav-groups` on the
   sidebar through the CSSOM, so the greydient's dark hold reaches exactly as far as the light nav
   type does, however many pages are shown; the fall to celadon still happens where no text is, and
   the sidebar is always tall enough for the account to sit on haikimidori in ink. */
.sidebar {
  --nav-hold: calc(120px + var(--nav-rows, 12) * 40px + var(--nav-groups, 4) * 42px);
  --gd-sidebar: linear-gradient(in oklch to bottom, var(--jg-roiro) 0, var(--jg-sabinezu) var(--nav-hold), var(--jg-seijinezu) max(calc(100% - 120px), calc(var(--nav-hold) + 140px)), var(--jg-haikimidori) 100%);
  min-height: max(calc(100vh - 66px), calc(var(--nav-hold) + 250px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sidebar {
    --gd-sidebar: linear-gradient(in oklch to bottom, var(--jg-nurebairo) 0, var(--jg-nurebairo-indigo) 80px, var(--jg-indigo-night) var(--nav-hold), var(--jg-sabinezu-night) max(calc(100% - 120px), calc(var(--nav-hold) + 140px)), var(--jg-sabinezu) 100%);
  }
}
:root[data-theme="dark"] .sidebar {
  --gd-sidebar: linear-gradient(in oklch to bottom, var(--jg-nurebairo) 0, var(--jg-nurebairo-indigo) 80px, var(--jg-indigo-night) var(--nav-hold), var(--jg-sabinezu-night) max(calc(100% - 120px), calc(var(--nav-hold) + 140px)), var(--jg-sabinezu) 100%);
}
.sidebar-nav { display: grid; gap: 0; }
.nav-group { display: grid; gap: 2px; }
.nav-group + .nav-group { margin-top: 16px; }
.nav-group-label { margin: 0 0 4px; padding-left: 26px; }
.sidebar .nav-group-label { color: var(--on-deep-soft); }
.sidebar .nav-item { min-height: 36px; padding-block: 9px; }
@media (hover: none), (pointer: coarse) {
  .sidebar .nav-item { min-height: 44px; }
}
.sidebar-bottom .text-button--sidebar.is-current { text-decoration-color: currentColor; }

/* Projects: the tree, one slab per root, each project a chip that opens its page. */
.projects-forest > .project-tree { display: grid; gap: 12px; }
.project-tree { margin: 0; padding: 0; list-style: none; }
.projects-forest > .project-tree > .project-node {
  padding: 14px 20px;
  border-radius: var(--radius-slab);
  background: var(--grain) 0 0 / 160px repeat, var(--gd-slab), var(--slab);
  background-blend-mode: overlay, normal, normal;
}
.project-tree--nested { margin: 6px 0 2px 14px; padding-left: 14px; border-left: 1px solid var(--line); display: grid; gap: 6px; }
.project-node-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 32px; min-width: 0; }
.project-node-meta { color: var(--ink-faint); font-size: var(--fs-11); }

/* Settings → Sidebar. The groups are slabs like every other block; a hidden page stays listed,
   quieter, so it can be shown again. */
.settings-page { display: grid; gap: 14px; max-width: 760px; }
.settings-intro p { max-width: 60ch; margin: 6px 0 0; color: var(--ink-soft); font-size: var(--fs-13); line-height: 1.55; }
.sidebar-settings-groups { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sidebar-settings-group {
  padding: 14px 18px 12px;
  border-radius: var(--radius-slab);
  background: var(--grain) 0 0 / 160px repeat, var(--gd-slab), var(--slab);
  background-blend-mode: overlay, normal, normal;
}
.sidebar-settings-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.sidebar-settings-group-head .field-label { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.sidebar-settings-name { flex: 1 1 160px; max-width: 260px; min-height: 38px; }
.sidebar-settings-items { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sidebar-settings-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; }
.sidebar-settings-item .nav-icon { display: inline-block; width: 18px; height: 18px; color: var(--ink-soft); }
.sidebar-settings-label { flex: 1 1 auto; min-width: 7ch; font-size: var(--fs-15); }
.sidebar-settings-item.is-hidden .sidebar-settings-label { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--line); }
.sidebar-settings-state { color: var(--ink-faint); font-size: var(--fs-11); }
.sidebar-settings-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.icon-button.icon-button--small { display: inline-grid; place-items: center; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: var(--fs-15); line-height: 1; }
.icon-button.icon-button--small:disabled { color: var(--ink-faint); opacity: .55; }
.select--small { width: auto; min-width: 8ch; min-height: 36px; padding-block: 4px; font-size: var(--fs-13); }
.sidebar-settings-empty { margin: 0; color: var(--ink-faint); font-size: var(--fs-13); }
.settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.settings-actions-spacer { flex: 1 1 auto; }
.settings-notice { min-height: 1.2em; margin: 0; color: var(--ink-soft); font-size: var(--fs-13); }
@media (max-width: 759px) {
  .sidebar-settings-group { padding: 12px 14px 10px; }
  .sidebar-settings-controls { width: 100%; justify-content: flex-end; }
  .sidebar-settings-name { max-width: none; }
}
@media (hover: none), (pointer: coarse) {
  .icon-button.icon-button--small { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .select--small { min-height: 44px; }
}

/* Settings → Plugins. One slab per plugin, like the sidebar's groups; the switch is the one control
   that saves at once. A plugin that needs setting up says so in the warning ink, never in red: it is a
   to-do, not a failure. */
.settings-tabs { margin-bottom: 4px; }
.plugin-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.plugin-card {
  display: grid; gap: 8px;
  padding: 14px 18px;
  border-radius: var(--radius-slab);
  background: var(--grain) 0 0 / 160px repeat, var(--gd-slab), var(--slab);
  background-blend-mode: overlay, normal, normal;
  min-width: 0;
}
.plugin-card--disabled .plugin-name, .plugin-card--disabled .plugin-description { color: var(--ink-faint); }
.plugin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plugin-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.plugin-name { margin: 0; font-size: var(--fs-19); font-weight: 500; }
.plugin-meta { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--fs-11); }
.plugin-description { margin: 0; color: var(--ink-soft); font-size: var(--fs-13); line-height: 1.5; }
.plugin-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: var(--fs-13); }
.plugin-status-badge {
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.plugin-status--enabled .plugin-status-badge { color: var(--accent); border-color: currentColor; }
.plugin-status--needs_setup .plugin-status-badge { color: var(--warning); border-color: currentColor; background: var(--warning-soft); }
.plugin-status--needs_setup .plugin-status-detail { color: var(--warning); }
.plugin-status-detail { color: var(--ink-soft); overflow-wrap: anywhere; }
.plugin-core-note { color: var(--ink-faint); font-size: var(--fs-11); font-family: var(--font-mono); letter-spacing: .06em; white-space: nowrap; }
.plugin-switch {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px;
  border: 0; background: none; color: var(--ink-soft); font-size: var(--fs-13); cursor: pointer;
}
.plugin-switch-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line); transition: background .15s ease; }
.plugin-switch-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform .15s ease; }
.plugin-switch.is-on .plugin-switch-track { background: var(--accent); }
.plugin-switch.is-on .plugin-switch-thumb { transform: translateX(16px); }
.plugin-switch.is-on { color: var(--ink); }
.plugin-switch:disabled { opacity: .55; cursor: default; }
.plugin-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.plugin-adds { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 2px 0 0; font-size: var(--fs-13); }
.plugin-adds dt { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.plugin-adds dd { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.plugin-settings { display: grid; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.plugin-settings-title { margin: 0; font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 400; }
.plugin-settings-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plugin-setting { display: grid; gap: 2px; }
.plugin-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.plugin-field-label { flex: 1 1 160px; font-size: var(--fs-15); }
.plugin-field--toggle { flex-wrap: nowrap; }
.plugin-field--toggle input { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; }
.plugin-number { width: 10ch; min-height: 38px; }
.plugin-text { flex: 0 1 220px; min-width: 0; min-height: 38px; }
.plugin-setting-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.plugin-setting-foot .field-hint { margin: 0; flex: 1 1 200px; }
.plugin-build { margin: 0; }
.plugin-disabled-page { max-width: 640px; }
@media (max-width: 759px) {
  .plugin-card { padding: 12px 14px; }
  .plugin-adds { grid-template-columns: 1fr; gap: 0 0; }
  .plugin-adds dd { margin-bottom: 6px; }
  .plugin-text { flex: 1 1 100%; }
  .plugin-number { min-height: 44px; }
}

/* A readable sidebar (Marcus, 25 Sep: "too flat — hard to differentiate each item"). Each item gets its
   icon back as an anchor for the eye, a slightly larger label, and a soft translucent pill for hover and
   for the current page instead of the tiny pebble. Group labels step back so the items lead. */
.sidebar .nav-item {
  gap: 11px;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 11px;
  font-size: var(--fs-15);
  font-weight: 450;
  transition: background var(--calm-duration) var(--calm-ease), color var(--calm-duration) var(--calm-ease);
}
.sidebar .nav-icon { display: inline-block; width: 17px; height: 17px; color: var(--on-deep-soft); opacity: .75; }
.sidebar .nav-item:hover { background: color-mix(in oklch, var(--on-deep) 8%, transparent); }
.sidebar .nav-item.is-current { background: color-mix(in oklch, var(--on-deep) 15%, transparent); font-weight: 600; }
.sidebar .nav-item.is-current .nav-icon { color: var(--on-deep); opacity: 1; }
.sidebar .nav-item.is-current::before { content: none; }
.sidebar .nav-group + .nav-group { margin-top: 22px; }
.sidebar .nav-group-label { margin: 0 0 6px; padding-left: 12px; font-size: var(--fs-11); opacity: .7; }
@media (forced-colors: active) { .sidebar .nav-item.is-current { outline: 2px solid CanvasText; } }

/* -------------------------------------------------------------------------------------------------
   Links, as a gallery (25 Sep 2026, after Are.na's Grid/Table). Square blocks on the paper, each
   with a small caption under it. A block with a picture shows it contained, floating on the paper
   the way an Are.na channel does; a block without one is a designed card — the label large in the
   sans, the host small in mono, a quiet mark per kind — on its kind's greydient or, for an
   unbranded link, one of the entity skies chosen by subject. Tiles blend inside themselves and meet
   the paper at a hard edge, like every other field.
   ---------------------------------------------------------------------------------------------- */
:root {
  --lt-sheet: linear-gradient(in oklch to bottom, var(--jg-seijinezu), var(--jg-haikimidori));
  --lt-doc: linear-gradient(in oklch to bottom, var(--jg-usukumonezu), var(--jg-shironezu-pale));
  --lt-slides: linear-gradient(in oklch to bottom, var(--jg-shiraumenezu-blush), var(--jg-kinariiro));
  --lt-drive: linear-gradient(in oklch to bottom, var(--jg-haikimidori), var(--jg-usukumonezu-pale));
  --lt-basecamp: linear-gradient(in oklch to bottom, var(--jg-yanaginezumi-pale), var(--jg-yanaginezumi));
  --lt-notion: linear-gradient(in oklch to bottom, var(--jg-kinariiro), var(--jg-shironezu));
  --lt-figma: linear-gradient(in oklch to bottom, var(--jg-lavender-pale), var(--jg-shiraumenezu-blush));
  --lt-gmail: linear-gradient(in oklch to bottom, var(--jg-shiraumenezu), var(--jg-shiraumenezu-blush));
  --lt-vault: linear-gradient(in oklch to bottom, var(--jg-lavender-pale), var(--jg-usukumonezu));
  --lt-github: linear-gradient(in oklch to bottom, var(--jg-sabinezu), oklch(0.3 0.016 218));
  --lt-night-veil: linear-gradient(transparent, transparent);
  --lt-ink: var(--ink);
  --lt-ink-soft: var(--ink-soft);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lt-sheet: linear-gradient(in oklch to bottom, var(--jg-minatonezumi-d1), var(--jg-minatonezumi-d2));
    --lt-doc: linear-gradient(in oklch to bottom, oklch(0.31 0.016 222), var(--jg-sabinezu-d2));
    --lt-slides: linear-gradient(in oklch to bottom, var(--jg-plum-d2), var(--jg-sabinezu-d2));
    --lt-drive: linear-gradient(in oklch to bottom, oklch(0.3 0.02 180), var(--jg-sabinezu-d2));
    --lt-basecamp: linear-gradient(in oklch to bottom, oklch(0.33 0.03 128), oklch(0.26 0.02 150));
    --lt-notion: linear-gradient(in oklch to bottom, oklch(0.3 0.008 97), var(--jg-sabinezu-d2));
    --lt-figma: linear-gradient(in oklch to bottom, var(--jg-indigo-d1), var(--jg-plum-d2));
    --lt-gmail: linear-gradient(in oklch to bottom, var(--jg-plum-d2), var(--jg-sabinezu-d2));
    --lt-vault: linear-gradient(in oklch to bottom, var(--jg-indigo-d1), var(--jg-sabinezu-d2));
    --lt-github: linear-gradient(in oklch to bottom, var(--jg-nurebairo-indigo), var(--jg-sabinezu-d2));
    --lt-night-veil: linear-gradient(in oklch to bottom, oklch(0.2 0.02 230 / .62), oklch(0.2 0.02 230 / .5));
    --lt-ink: var(--ink);
    --lt-ink-soft: var(--ink-soft);
  }
}
:root[data-theme="dark"] {
  --lt-sheet: linear-gradient(in oklch to bottom, var(--jg-minatonezumi-d1), var(--jg-minatonezumi-d2));
  --lt-doc: linear-gradient(in oklch to bottom, oklch(0.31 0.016 222), var(--jg-sabinezu-d2));
  --lt-slides: linear-gradient(in oklch to bottom, var(--jg-plum-d2), var(--jg-sabinezu-d2));
  --lt-drive: linear-gradient(in oklch to bottom, oklch(0.3 0.02 180), var(--jg-sabinezu-d2));
  --lt-basecamp: linear-gradient(in oklch to bottom, oklch(0.33 0.03 128), oklch(0.26 0.02 150));
  --lt-notion: linear-gradient(in oklch to bottom, oklch(0.3 0.008 97), var(--jg-sabinezu-d2));
  --lt-figma: linear-gradient(in oklch to bottom, var(--jg-indigo-d1), var(--jg-plum-d2));
  --lt-gmail: linear-gradient(in oklch to bottom, var(--jg-plum-d2), var(--jg-sabinezu-d2));
  --lt-vault: linear-gradient(in oklch to bottom, var(--jg-indigo-d1), var(--jg-sabinezu-d2));
  --lt-github: linear-gradient(in oklch to bottom, var(--jg-nurebairo-indigo), var(--jg-sabinezu-d2));
  --lt-night-veil: linear-gradient(in oklch to bottom, oklch(0.2 0.02 230 / .62), oklch(0.2 0.02 230 / .5));
  --lt-ink: var(--ink);
  --lt-ink-soft: var(--ink-soft);
}

/* The switch: two words in one pebble, the current one lifted onto paper. */
.links-controls { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.links-controls .links-search { grid-column: 1; grid-row: 1; }
.links-controls .links-count { grid-column: 1 / -1; grid-row: 2; }
.links-switch { grid-column: 2; grid-row: 1; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--slab-strong); }
.links-switch-option {
  min-height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-soft); font: inherit; font-size: var(--fs-13); letter-spacing: .01em; cursor: pointer;
}
.links-switch-option:hover { color: var(--ink); }
.links-switch-option.is-current { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px oklch(0.2 0.02 220 / .1); }
.links-switch-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The grid. Wide gaps, as in a channel: the blocks are read one at a time, not as a table. */
.links-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 34px 24px;
  margin: 4px 0 0; padding: 0; list-style: none;
}
.links-page--grid .links-group { gap: 14px; }
.links-page--grid .links-section { gap: 18px; }
.links-page--grid .links-group + .links-group { margin-top: 18px; }
.links-block { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.links-block-tile { display: block; aspect-ratio: 1; min-width: 0; border-radius: 16px; color: inherit; text-decoration: none; }
.links-block-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.links-tile { width: 100%; height: 100%; }

/* A picture floats, contained, on the paper. */
.links-tile--image { display: flex; align-items: center; justify-content: center; }
.links-tile-image { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 6px; }

/* The card. */
.links-card {
  --tone: var(--lt-doc);
  display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; width: 100%; height: 100%;
  padding: 16px 16px 14px; overflow: hidden; border-radius: 16px; background: var(--tone); color: var(--lt-ink);
}
.links-card--sheet { --tone: var(--lt-sheet); }
.links-card--doc { --tone: var(--lt-doc); }
.links-card--slides { --tone: var(--lt-slides); }
.links-card--drive { --tone: var(--lt-drive); }
.links-card--basecamp { --tone: var(--lt-basecamp); }
.links-card--notion { --tone: var(--lt-notion); }
.links-card--figma { --tone: var(--lt-figma); }
.links-card--gmail { --tone: var(--lt-gmail); }
.links-card--vault { --tone: var(--lt-vault); }
.links-card--github { --tone: var(--lt-github); --lt-ink: var(--on-deep); --lt-ink-soft: var(--on-deep-soft); }
.links-card--linkedin, .links-card--linkedin-company { --tone: var(--lt-night-veil), var(--stone-company) url("skies/company.webp") center / cover; }
.links-card--sky-link { --tone: var(--lt-night-veil), var(--stone-link) url("skies/link.webp") center / cover; }
.links-card--sky-company { --tone: var(--lt-night-veil), var(--stone-company) url("skies/company.webp") center / cover; }
.links-card--sky-meeting { --tone: var(--lt-night-veil), var(--stone-meeting) url("skies/meeting.webp") center / cover; }
.links-card--sky-person { --tone: var(--lt-night-veil), var(--stone-person) url("skies/person.webp") center / cover; }
.links-card--sky-time_entry { --tone: var(--lt-night-veil), var(--stone-time-entry) url("skies/time_entry.webp") center / cover; }
.links-card-mark { flex: none; color: var(--lt-ink-soft); opacity: .78; }
.links-card-icon, .links-card-logo.entity-mark {
  flex: none; width: 40px; height: 40px; margin: 0; border-radius: 10px; object-fit: contain; background: oklch(0.99 0.004 97);
}
.links-card-label {
  display: -webkit-box; margin-top: auto; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  font-size: var(--fs-19); font-weight: 350; line-height: 1.18; letter-spacing: -.012em; overflow-wrap: anywhere;
}
.links-card-host {
  flex: none; overflow: hidden; color: var(--lt-ink-soft); font-family: var(--font-mono); font-size: var(--fs-11);
  letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap;
}

/* A LinkedIn profile wears the person's own portrait, on the person's sky. */
.links-tile--portrait {
  position: relative; display: grid; place-items: center; box-sizing: border-box; padding: 14px; border-radius: 16px;
  background: var(--lt-night-veil), var(--stone-person) url("skies/person.webp") center / cover;
}
.links-tile--portrait .links-tile-portrait.entity-mark { width: 54%; height: 54%; margin: 0; border-radius: 50%; object-fit: cover; }
.links-tile--portrait .links-card-host { position: absolute; left: 16px; right: 16px; bottom: 14px; text-align: left; }

/* The caption: small, centred, the kind in mono and the subject as its chip. */
.links-block-caption { display: grid; gap: 5px; justify-items: center; min-width: 0; text-align: center; }
.links-block-label {
  display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  color: var(--ink); font-size: var(--fs-13); line-height: 1.3; text-decoration: none; overflow-wrap: anywhere;
}
a.links-block-label:hover { color: var(--accent); }
.links-block-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; max-width: 100%; min-width: 0; }
.links-block-kind { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: .1em; text-transform: uppercase; }
.links-block-meta .entity-chip { max-width: 100%; }

/* Pin and edit rest on the tile's corner, shown on hover or focus (always on a touch screen). */
.links-block-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--calm-duration, .2s) ease; }
.links-block:is(:hover, :focus-within) .links-block-actions { opacity: 1; }
.links-block-action {
  min-height: 26px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in oklch, var(--surface) 90%, transparent); color: var(--ink); font: inherit; font-size: var(--fs-11);
  box-shadow: 0 1px 2px oklch(0.2 0.02 220 / .12);
}
.links-block-action:hover { background: var(--surface); }
.links-block-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.links-block-action:disabled { opacity: .5; cursor: default; }
@media (hover: none) { .links-block-actions { opacity: .92; } }

/* Editing opens the block across the row: the tile stays, the form sits beside it. */
.links-block.is-editing { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 172px) minmax(0, 1fr); column-gap: 24px; row-gap: 10px; align-items: start; }
.links-block.is-editing .links-block-tile { grid-row: 1 / span 2; }
.links-block.is-editing .links-block-caption { justify-items: start; text-align: left; }

@media (max-width: 759px) {
  .links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .links-card { padding: 12px 12px 11px; border-radius: 14px; }
  .links-block-tile, .links-tile--portrait { border-radius: 14px; }
  .links-card-label { font-size: var(--fs-15); -webkit-line-clamp: 3; }
  .links-block.is-editing { grid-template-columns: 1fr; }
  .links-block.is-editing .links-block-tile { grid-row: auto; max-width: 50%; }
  .links-switch-option { min-height: 36px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .links-block-actions { transition: none; } }
@media (forced-colors: active) { .links-card, .links-tile--portrait { background: Canvas; border: 1px solid CanvasText; } }
/* The gallery takes the whole column: a channel reads wider than a list. The controls keep the list's measure. */
.page-content.links-page--grid { width: 100%; }
.links-page--grid .links-controls { max-width: 760px; }
.links-block-meta { font-size: var(--fs-11); }
.links-block-meta .entity-chip--inline { font-size: var(--fs-11); }

/* People as profiles (Marcus, 25 Sep: "make this look more like LinkedIn / Instagram profiles …
   very text heavy"). A grid of cards, each a big round portrait, the name in the serif, pronouns
   small beneath it, role and organisation on one line and the cadence as a quiet pill. The compact
   list stays one toggle away for scanning. */
.people-layout {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
}
.people-layout-option {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--fs-13);
  cursor: pointer;
}
.people-layout-option:hover { color: var(--ink); }
.people-layout-option.is-current { background: var(--sabi); color: var(--on-deep); }
.people-layout-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.people-layout-glyph { display: inline-grid; gap: 2px; width: 12px; height: 12px; }
.people-layout-glyph i { display: block; border-radius: 1.5px; background: currentColor; }
.people-layout-glyph--grid { grid-template-columns: 1fr 1fr; }
.people-layout-glyph--list { grid-template-rows: repeat(3, 1fr); }
.people-layout-glyph--list i { height: 2px; align-self: center; }

.page-content.people-page { width: min(100%, 1080px); }
.people-page .people-controls, .people-page .people-groups, .people-page .person-editor, .people-page > .notice, .people-page .people-list { max-width: 760px; }
.people-section { margin-top: 8px; }
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.person-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-radius: var(--radius-slab);
  background: var(--gd-slab), var(--slab);
  transition: background var(--calm-duration, 240ms) var(--calm-ease, ease-out);
}
.person-card:has(.person-card-link:hover) { background: var(--slab-strong); }
.person-card-link {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 22px 14px 16px;
  border-radius: var(--radius-slab);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}
.person-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.portrait { position: relative; display: inline-block; flex: 0 0 auto; line-height: 0; }
.portrait .portrait-image { width: 100%; height: 100%; font-size: inherit; font-weight: 500; letter-spacing: .02em; }
.portrait .portrait-image.has-image { border: 0; }
.portrait.is-private .portrait-image { outline: 2px solid var(--domain-family); outline-offset: 2px; }
.portrait .portrait-logo {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30%;
  height: 30%;
  border: 2px solid var(--slab);
  border-radius: 8px;
  box-sizing: border-box;
}
.person-card-portrait { width: 96px; height: 96px; margin-bottom: 10px; font-size: var(--fs-28); }

.person-card-name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  font-size: var(--fs-15);
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.person-card-pronouns { min-width: 0; font-size: var(--fs-11); }
.person-card-meta {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: var(--fs-13);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-card .cadence-badge { margin-top: auto; }
.person-card-badge-gap { flex: 0 0 10px; }

.cadence-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ink) 7%, transparent);
  /* Between ink-soft and ink: quiet, and still 5:1 on the darkest night slab and its hover. */
  color: color-mix(in oklch, var(--ink-soft) 60%, var(--ink));
  font-size: var(--fs-11);
  font-weight: 550;
  letter-spacing: .01em;
  white-space: nowrap;
}
.cadence-badge--over { background: var(--danger-soft); color: var(--danger); }
.cadence-badge--due { background: var(--warning-soft); color: var(--warning); }
.cadence-badge--snoozed { background: var(--accent-soft); color: var(--accent); }
.cadence-badge--none { background: transparent; color: var(--ink-faint); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* The compact list: avatar, name with pronouns beside it, role line beneath, pill on the right. */
.people-list .person-row { border-bottom: 1px solid var(--line); }
.people-list .person-summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 4px;
}
.people-list .person-avatar { width: 40px; height: 40px; font-size: var(--fs-13); }
.person-summary-text { display: grid; min-width: 0; gap: 1px; }
.person-summary-line { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
.person-summary-line .person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-summary-line .person-pronouns { min-width: 0; flex: 0 0 auto; font-size: var(--fs-11); }
.person-summary-text .person-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-list .person-detail { padding: 6px 0 16px 56px; }

/* Owed a call: the three ways out, under the card. */
.person-quick-actions { position: relative; display: grid; gap: 8px; padding: 0 12px 14px; }
.person-quick-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
/* The menu floats over what is below rather than stretching every card in its row. */
.person-quick-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% - 8px);
  right: 8px;
  left: 8px;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface-strong);
  box-shadow: 0 10px 28px color-mix(in oklch, var(--ink) 16%, transparent);
}
.person-detail > .person-quick-actions .person-quick-menu, .entity-page > .person-quick-actions .person-quick-menu { top: calc(100% + 6px); right: auto; left: 0; min-width: 240px; }
.quick-action--more { min-width: 40px; padding: 0 10px; font-size: var(--fs-15); line-height: 1; letter-spacing: .05em; }
.quick-action {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: 500;
  cursor: pointer;
}
.quick-action:hover:not(:disabled) { border-color: var(--ink-soft); }
.quick-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quick-action:disabled { cursor: default; opacity: .55; }
.quick-action--primary { border-color: var(--sabi); background: var(--sabi); color: var(--on-deep); }
.quick-action--primary:hover:not(:disabled) { border-color: var(--sabi); }
.quick-action.is-open { border-color: var(--ink-soft); }
.quick-action--quiet { color: var(--danger); }
.person-quick-date { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px; }
.person-quick-date .field { gap: 2px; margin: 0; }
.person-quick-date .field-label { font-size: var(--fs-11); }
.person-quick-date .text-input { min-height: 32px; padding: 4px 8px; font-size: var(--fs-13); }
.person-detail > .person-quick-actions, .entity-page > .person-quick-actions { max-width: 420px; padding: 0; }
:is(.person-detail, .entity-page) > .person-quick-actions .person-quick-row { grid-template-columns: auto auto; justify-content: start; }
:is(.person-detail, .entity-page) > .person-quick-actions .quick-action--primary { padding: 0 18px; }
.people-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }

/* A person's page opens like a profile. */
.person-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 28px;
}
.person-profile-portrait { width: 136px; height: 136px; font-size: var(--fs-40); }
.person-profile .portrait-logo { border-color: var(--surface); }
.person-profile-text { display: grid; min-width: 0; gap: 6px; }
.person-profile-name { font-size: var(--fs-28); line-height: 1.15; overflow-wrap: anywhere; }
.person-profile-role { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; color: var(--ink-soft); font-size: var(--fs-15); }
.person-profile-sep { color: var(--ink-faint); }
.person-profile-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; }
.person-profile-pronouns { min-width: 0; font-size: var(--fs-13); }
.person-profile .entity-page-note { grid-column: 1 / -1; }
.person-profile-details { border-radius: var(--radius-slab); background: var(--gd-slab), var(--slab); padding: 4px 20px; }
.person-profile-summary { min-height: var(--touch); display: flex; align-items: center; color: var(--ink-soft); font-size: var(--fs-13); cursor: pointer; }
.person-profile-details .person-detail { padding: 0 0 16px; }

@media (max-width: 559px) {
  .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .person-card-link { padding: 18px 10px 14px; }
  .person-card-portrait { width: 76px; height: 76px; margin-bottom: 8px; font-size: var(--fs-19); }
  .person-card-name { font-size: var(--fs-15); }
  .people-layout-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .people-list .person-detail { padding-left: 0; }
  .person-profile { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .person-profile-text { justify-items: center; }
  .person-profile-role, .person-profile-facts { justify-content: center; }
  .person-profile-portrait { width: 112px; height: 112px; }
  .person-profile-name { font-size: var(--fs-28); }
}
@media (hover: none), (pointer: coarse) {
  .people-layout-option { min-height: 40px; min-width: 44px; justify-content: center; }
  .quick-action, .person-quick-date .text-input { min-height: 44px; }
}
@media (max-width: 559px) {
  .person-quick-actions { padding: 0 8px 10px; }
  .person-quick-date { grid-template-columns: minmax(0, 1fr); }
}

/* ── Stage 1 of the UX audit, 26 Sep 2026 (docs/UX-AUDIT.md §6) ───────────────────────────────
   The neatness pass: the type scale above, the serif back to entity names, Now in view, long
   groups folded, one empty state, and no dashed outlines. Later stages bring the layout primitives. */

/* The serif names an entity on its own page and nowhere else. Lists and grids set names in the sans,
   which is what a list is read in. */
.person-name, .person-card-name { font-family: var(--font-ui); font-weight: 500; letter-spacing: 0; }

/* The page header: one line of live context over the H1. On an entity or meeting page the H1 is the
   entity's own name, in the serif, at the entity size. */
.page-header-text { min-width: 0; }
.main-column .page-header h1.page-title--entity {
  font-family: var(--font-title);
  font-size: var(--fs-28);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Today. Below 900px the aside (Now, Also) comes before Focus, so the next marker is on the first
   phone screen. Above it the aside runs the page's height and Now stays in view while the goals
   scroll: sticky, opaque, and above whatever passes beneath it. */
@media (max-width: 900px) {
  .focus-aside { order: -1; }
}
@media (min-width: 901px) {
  .focus-layout > .focus-aside { align-self: stretch; align-content: start; }
  .focus-aside > .focus-now { position: sticky; top: 16px; z-index: 2; }
}
.focus-goal-more { justify-self: start; margin-top: 4px; }

/* Projects: active roots as a grid across the full column; the quiet ones folded under one line. */
.page-content.projects-page { width: 100%; }
.projects-forest > .project-tree { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
.projects-quiet { margin-top: 24px; }
.projects-quiet-summary {
  display: flex; align-items: center; gap: 8px; min-height: var(--touch); cursor: pointer; list-style: none;
  color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: .14em; text-transform: uppercase;
}
.projects-quiet-summary::-webkit-details-marker { display: none; }
.projects-quiet-summary::before { content: '▸'; font-family: var(--font-ui); letter-spacing: 0; }
.projects-quiet[open] > .projects-quiet-summary::before { content: '▾'; }
.project-quiet-list { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 0; padding: 0; list-style: none; }
.project-quiet-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
/* Projects, editing (26 Sep 2026). A chip is a handle: drag it onto another chip, a drop zone or
   the Archive zone; ✎ and ⋯ are the keyboard and touch routes. The popover sits under its chip in
   the flow, so nothing is positioned by script and the page never needs an inline style. */
.project-handle { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; max-width: 100%; border-radius: var(--radius-sm); }
.project-handle[draggable="true"] { cursor: grab; }
.project-handle.is-drop-target { outline: 2px solid var(--accent); outline-offset: 3px; background: var(--accent-soft); }
.project-handle.is-drop-refused { outline: 2px solid var(--danger); outline-offset: 3px; background: var(--danger-soft); cursor: not-allowed; }
/* The ✎ and ⋯ take no room until the chip is pointed at or focused, so a narrow column does not
   wrap its meta for them; on touch they are always there. */
.project-actions { display: none; gap: 2px; }
.project-handle:hover .project-actions,
.project-handle:focus-within .project-actions,
.project-actions:has([aria-expanded="true"]) { display: inline-flex; }
@media (hover: none) { .project-actions { display: inline-flex; } }
.project-action { display: inline-grid; place-items: center; width: 32px; min-width: 32px; height: 32px; border-radius: 999px; color: var(--ink-soft); font-size: var(--fs-15); line-height: 1; }
.project-action:hover, .project-action:focus-visible { background: var(--surface-muted); color: var(--ink); }
.project-menu,
.project-popover {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 2px; padding: 8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-strong);
  box-shadow: 0 6px 20px oklch(0.2 0.02 220 / 0.12);
}
.project-menu { flex-direction: column; align-items: stretch; width: min(100%, 220px); padding: 4px; gap: 0; }
.project-menu-item { min-height: 40px; padding: 8px 12px; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.project-menu-item:hover, .project-menu-item:focus-visible { background: var(--surface-muted); }
.project-popover-title { width: 100%; color: var(--ink-faint); font-size: var(--fs-11); font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.project-popover-note { width: 100%; color: var(--danger); font-size: var(--fs-13); }
.project-pick-select { flex: 1 1 200px; min-width: 0; }
.project-rename { display: grid; gap: 4px; width: min(100%, 360px); }
.project-rename-input { min-height: 36px; padding-block: 4px; }
.project-rename-hint { color: var(--ink-faint); font-size: var(--fs-11); }
.project-rename-hint.is-error { color: var(--danger); }
/* Always in place on a pointer device, so starting a drag never moves what is under the pointer;
   a drag only lights them. Touch has the ⋯ menu instead, so they are not drawn there. */
.projects-dropzones { display: flex; gap: 12px; margin-bottom: 12px; }
@media (hover: none) { .projects-dropzones { display: none; } }
.projects-dropzone {
  flex: 1 1 0; display: grid; place-items: center; min-height: 36px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-faint);
  font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: .14em; text-transform: uppercase;
  transition: background-color var(--calm-duration) var(--calm-ease), border-color var(--calm-duration) var(--calm-ease);
}
.projects-page.is-dragging .projects-dropzone { border-color: var(--line-strong); background: var(--surface-muted); color: var(--ink-soft); }
.projects-dropzone.is-drop-target { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.projects-dropzone--archive.is-drop-target { border-color: var(--warning); background: var(--warning-soft); }
.projects-notice,
.projects-confirm {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  width: min(100%, 760px); margin-bottom: 16px; padding: 12px 16px;
  border-radius: var(--radius); background: var(--surface-strong); border: 1px solid var(--line-strong);
}
.projects-notice-text { flex: 1 1 0; min-width: 0; }
.projects-notice--error { border-color: var(--danger); background: var(--danger-soft); }
.projects-confirm { display: grid; gap: 8px; }
.projects-confirm-text { margin: 0; font-size: var(--fs-15); color: var(--ink); }
.projects-confirm-detail { margin: 0; color: var(--ink-soft); font-size: var(--fs-13); }
.projects-confirm-warning { margin: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--ink); font-size: var(--fs-13); }
.projects-confirm-check { display: flex; align-items: center; gap: 8px; min-height: var(--touch); font-size: var(--fs-13); }
.projects-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.projects-page.is-busy .project-handle { cursor: progress; }
.project-archived-item { flex-wrap: wrap; }
@media (max-width: 759px) {
  .project-handle { width: 100%; }
  .project-menu { width: 100%; }
  .projects-notice, .projects-confirm { padding: 10px 12px; }
}
@media (max-width: 759px) {
  /* On a phone a root is a slim slab, so the active list stays about two screens. */
  .projects-forest > .project-tree { gap: 6px; }
  .projects-forest > .project-tree > .project-node { padding: 7px 14px; border-radius: var(--radius); }
}

/* One empty state: a slab with a sentence and at most one action. No dashed outline, ever. */
.empty-state {
  width: min(100%, 760px);
  margin-top: 16px;
  padding: 24px;
  border: 0;
  border-radius: var(--radius-slab);
  background: var(--grain) 0 0 / 160px repeat, var(--gd-slab), var(--slab);
  background-blend-mode: overlay, normal, normal;
  text-align: left;
}
.empty-state h2, .empty-state h3 { margin: 0 0 4px; font-size: var(--fs-15); font-weight: 500; }
.empty-state p { margin: 0; color: var(--ink-soft); font-size: var(--fs-13); line-height: 1.55; }
.empty-state .button { margin-top: 12px; }
.empty-state--hidden h2 { color: var(--ink); }

/* A proposal reads as a state, not as a broken outline: a tinted pill, and a chip that stays whole. */
.entity-state { border: 0; background: var(--warning-soft); color: var(--ink); }

/* Six sizes want few styles: the grips share one size, every mono label one tracking and colour,
   and a closed disclosure's contents are not on the page (the UA already hides them; this makes
   it true for anything that measures the page too). */
.task-grip, .focus-goal-grip { font-size: var(--fs-13); }
details:not([open]) > :not(summary) { display: none; }
.focus-page .muted, .focus-goal-more, .focus-task-picker > summary, .focus-completed-history { color: var(--ink-faint); }
.focus-page .text-button:not(.focus-add-goal), .focus-page .muted { color: var(--ink-faint); font-size: var(--fs-11); }
.focus-goal-menu > summary { font-size: var(--fs-13); }

/* Meetings, list and detail (26 Sep 2026)

   Marcus: "people + projects got better, now can we also improve meetings?" One summary line in the
   header, one filter bar, rows of two tight lines, attendance as a badge in words rather than a
   dimmed row, and at 1200px and wider the opened meeting on the right (UX audit: list 40%, detail
   60%). Below that the meeting is a page with a way back. */

.page-content.meetings-page--split { width: 100%; }
.meetings-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 28px;
  align-items: start;
}
.meetings-list-pane { min-width: 0; }

/* The pane stays in view while the list scrolls, and scrolls on its own when the record is long.
   `app.js` carries its scroll position across the five-second re-render. */
.meeting-pane {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  min-width: 0;
  padding: 22px 24px 26px;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 22px;
  background: var(--gd-slab, var(--slab));
}
.meeting-pane.is-empty { background: transparent; padding: 0; }
.meeting-pane.is-empty .empty-state { margin-top: 0; }
.meeting-pane-close { position: absolute; top: 16px; right: 18px; z-index: 1; }
.meeting-pane .meeting-record-title { padding-right: 64px; }

/* Filter bar: the search on its own line, then the segment, the client or project and the clock. */
.meetings-filter-bar { display: grid; gap: 10px; margin-bottom: 10px; }
.meetings-search-field input { width: 100%; }
.meetings-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.meetings-entity { width: auto; min-width: 0; flex: 0 1 220px; min-height: 34px; padding: 0 10px; font-size: var(--fs-13); }

/* The segmented control, after People's Grid/List pebble. */
.segmented {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
}
.segmented-option {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--fs-13);
  white-space: nowrap;
  cursor: pointer;
}
.segmented-option:hover { color: var(--ink); }
.segmented-option.is-current { background: var(--sabi); color: var(--on-deep); }
.segmented-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.segmented-count { font-size: var(--fs-11); font-variant-numeric: tabular-nums; opacity: .8; }
.segmented--small .segmented-option { min-height: 24px; padding: 0 9px; font-size: var(--fs-11); }

/* The quiet line: what a search covered, and the one link to the suggestions. */
.meetings-notes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0 0 12px;
  color: var(--ink-faint);
  font-size: var(--fs-13);
}
.meetings-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.meetings-note:empty { display: none; }
.meetings-note-actions { margin-left: auto; }
.meetings-notes .text-button { font-size: var(--fs-13); }
.meetings-review-link { margin-left: auto; color: var(--ink-soft); font-size: var(--fs-13); white-space: nowrap; }

.meetings-list .meeting-day { margin-bottom: 14px; }
.meetings-more { margin: 2px 0 0 70px; font-size: var(--fs-13); }

/* A row: two tight lines in a grid, so the clock, the length and the faces land in the same place
   on every row of a day, and the title takes the slack. */
.meeting-row { padding: 0; }
.meeting-row-button {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  grid-template-areas: "time title length" ". context faces";
  align-items: center;
  gap: 3px 10px;
  padding: 7px 10px 8px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.meeting-row-button:hover { background: var(--surface-strong); }
.meeting-row-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.meeting-row.is-selected .meeting-row-button {
  background: var(--surface-strong);
  border-color: color-mix(in oklch, var(--accent) 45%, var(--line));
}
.meeting-row-button .meeting-time { grid-area: time; min-width: 0; align-self: baseline; }
.meeting-title {
  grid-area: title;
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
  align-self: baseline;
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: 1.3;
}
.meeting-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting-length {
  grid-area: length;
  align-self: baseline;
  color: var(--ink-soft);
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.meeting-length.is-booked { color: var(--ink-faint); }
.meeting-context {
  grid-area: context;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.meeting-when { color: var(--ink-soft); font-size: var(--fs-11); font-family: var(--font-mono); letter-spacing: .06em; white-space: nowrap; }
.meeting-context-chip { min-height: 20px; padding: 0 8px 0 6px; font-size: var(--fs-11); min-width: 0; flex: 0 1 auto; }
.meeting-context-chip .entity-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting-context-chip .entity-mark { width: 14px; height: 14px; margin-left: -2px; font-size: 0; }

/* The attendee stack: overlapping portraits ringed in the row's ground, initials where there is no
   picture. Overlap is 5px of a 24px circle, which clears two centred initials. */
.meeting-faces { grid-area: faces; display: inline-flex; align-items: center; justify-self: end; }
.meeting-faces .face {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-left: -3px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-muted);
  box-shadow: 0 0 0 2px var(--paper, var(--surface));
  color: var(--ink-soft);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: 0;
  object-fit: cover;
  user-select: none;
}
.meeting-faces .face:first-child { margin-left: 0; }
.meeting-faces .face.entity-mark:not(.has-image) { background: color-mix(in oklch, var(--chip-hue) 26%, var(--surface)); color: var(--ink); }
.meeting-faces .face--more { background: var(--surface); color: var(--ink-faint); font-weight: 500; box-shadow: 0 0 0 2px var(--paper, var(--surface)), inset 0 0 0 1px var(--line-strong); }

/* Attendance, in words. Spoke and attended carry the success hue, invited the warning hue and says
   "no evidence" in the badge itself, unknown stays neutral. Every pair clears 4.5:1 on its ground. */
.attendance-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  padding: 0 8px 0 7px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ink) 6%, transparent);
  color: var(--ink-soft);
  font-size: var(--fs-11);
  font-weight: 550;
  white-space: nowrap;
}
.attendance-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.attendance-badge--spoke { background: color-mix(in oklch, var(--success) 14%, transparent); color: var(--success); }
.attendance-badge--attended { background: color-mix(in oklch, var(--success) 8%, transparent); color: var(--success); }
.attendance-badge--attended .attendance-dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.attendance-badge--invited { background: var(--warning-soft); color: var(--warning); }
.attendance-badge--invited .attendance-dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.attendance-badge--unknown .attendance-dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* The record, in the pane or as a page. */
.meeting-record { display: grid; gap: 18px; }
.meeting-record-head { display: grid; gap: 8px; }
.meeting-record-title {
  margin: 0;
  font-family: var(--font-title);
  font-size: var(--fs-28);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: none;
  overflow-wrap: anywhere;
}
.meeting-record-meta { margin: 0; color: var(--ink-soft); font-size: var(--fs-13); }
.meeting-attendance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; color: var(--ink-soft); font-size: var(--fs-13); line-height: 1.5; }
.meeting-attendance .attendance-badge { align-self: center; }
.meeting-people { display: grid; gap: 8px; }
.meeting-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.meeting-sections { display: grid; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.meeting-sections .meeting-block .group-heading { margin: 0 0 6px; }
.meeting-record-note { margin: 0; color: var(--ink-faint); font-size: var(--fs-13); }

.meeting-disclosure { border-top: 1px solid var(--line); padding-top: 12px; }
.meeting-disclosure > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink);
  font-size: var(--fs-15);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.meeting-disclosure > summary::-webkit-details-marker { display: none; }
.meeting-disclosure > summary::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  align-self: center;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 160ms ease-out;
}
.meeting-disclosure[open] > summary::before { transform: rotate(45deg); }
.meeting-disclosure > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.meeting-disclosure-meta { color: var(--ink-faint); font-size: var(--fs-13); font-weight: 400; }
.meeting-disclosure > :not(summary) { margin-top: 12px; }
.meeting-why { display: grid; gap: 12px; }
.meeting-pane .transcript-body { max-height: none; overflow: visible; }

.meeting-page { max-width: 760px; }
.meeting-back { margin-bottom: 14px; }

@media (max-width: 759px) {
  .meeting-row-button { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 3px 8px; padding: 7px 4px 8px 2px; }
  .meeting-faces .face { width: 22px; height: 22px; margin-left: -4px; }
  .meeting-faces .face:first-child { margin-left: 0; }
  .meetings-more { margin-left: 56px; }
  .meetings-entity { max-width: 100%; flex: 1 1 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .meeting-disclosure > summary::before { transition: none; }
}

/* Meetings he did not attend recede a step: quieter title and faces, still readable (AA on ink-soft). */
:is(.meeting-row--invited, .meeting-row--unknown) .meeting-title-text { color: var(--ink-soft); font-weight: 400; }
:is(.meeting-row--invited, .meeting-row--unknown) :is(.meeting-context, .meeting-faces, .meeting-length) { opacity: .7; }

/* Meeting action items (26 Sep 2026): a checkbox, the words, an owner chip, and a ⋯ menu. Compact on
   a desk, 44px targets on a phone. */
.meeting-actions-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.meeting-actions-count { color: var(--ink-faint); font-size: var(--fs-13); }
.meeting-actions-error { margin: 0; color: var(--danger); font-size: var(--fs-13); }
.meeting-action-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.meeting-action { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 4px 6px; padding: 4px 0; border-radius: var(--radius-sm); }
.meeting-action.is-busy { opacity: .6; }
.meeting-action-check { display: grid; place-items: center; width: 32px; min-height: 32px; cursor: pointer; }
.meeting-action-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.meeting-action-check input:disabled { cursor: not-allowed; }
.meeting-action-body { display: grid; gap: 4px; min-width: 0; padding-top: 5px; }
.meeting-action-text { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.meeting-action.is-done .meeting-action-text > span:first-child { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.meeting-action.is-archived .meeting-action-text { color: var(--ink-soft); }
.meeting-action-edited { margin-left: 8px; color: var(--ink-faint); font-size: var(--fs-13); font-style: italic; cursor: help; }
.meeting-action-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.meeting-action-meta .entity-chip { font-size: var(--fs-13); }
.meeting-action-waiting, .meeting-action-flag { color: var(--ink-soft); font-size: var(--fs-13); }
.meeting-action-task { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 9px; border: 1px solid color-mix(in oklch, var(--entity-task) 35%, var(--line)); border-radius: 999px; background: transparent; color: var(--ink); font-size: var(--fs-13); cursor: pointer; }
.meeting-action-task-label { color: var(--entity-task); font-weight: 600; }
.meeting-action-task--done .meeting-action-task-status { color: var(--success); }
.meeting-action-task:focus-visible, .meeting-action-more-button:focus-visible, .meeting-action-menu-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.meeting-action-more { position: relative; }
.meeting-action-more-button { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; color: var(--ink-soft); font-size: 18px; line-height: 1; text-align: center; }
.meeting-action-more-button:hover, .meeting-action-more-button[aria-expanded="true"] { background: var(--surface-muted); color: var(--ink); }
.meeting-action-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; display: grid; min-width: 168px; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-strong); box-shadow: 0 18px 40px -24px color-mix(in oklch, var(--ink) 45%, transparent); }
.meeting-action-menu-item { min-height: 36px; padding: 0 10px; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.meeting-action-menu-item:hover, .meeting-action-menu-item:focus { background: var(--surface-muted); }
.meeting-action-edit { display: grid; gap: 8px; }
.meeting-action-input { width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--field-line); border-radius: 8px; background: var(--surface-strong); color: var(--ink); font: inherit; }
.meeting-action-edit-buttons, .meeting-action-choose-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.meeting-action-original { margin: 0; color: var(--ink-faint); font-size: var(--fs-13); }
.meeting-action-choose { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-muted); }
.meeting-action-choose-copy { margin: 0; color: var(--ink-soft); font-size: var(--fs-13); }
.meeting-actions-archived-toggle { justify-self: start; font-size: var(--fs-13); }
@media (hover: none), (pointer: coarse), (max-width: 759px) {
  .meeting-action { grid-template-columns: var(--touch) minmax(0, 1fr) auto; }
  .meeting-action-check { width: var(--touch); min-height: var(--touch); }
  .meeting-action-check input { width: 22px; height: 22px; }
  .meeting-action-body { padding-top: 11px; }
  .meeting-action-more-button { width: var(--touch); height: var(--touch); }
  .meeting-action-menu-item, .meeting-action-task, .meeting-action-edit-buttons .button, .meeting-action-choose-buttons .button { min-height: var(--touch); }
  .meeting-action-input { min-height: var(--touch); }
}

/* ── The person page: contact bar, notes, conversation log, what we have stored (10 Oct 2026) ── */
.person-card { position: relative; }
/* "Spoke today" on a card nobody owes: one click from the grid, revealed on hover and keyboard
   focus so the grid stays calm, and always shown where there is no hover. */
.person-card-quick {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 28px;
  padding: 0 10px;
  font-size: var(--fs-11);
  opacity: 0;
  transition: opacity var(--calm-duration, 240ms) var(--calm-ease, ease-out);
}
.person-card:hover .person-card-quick, .person-card:focus-within .person-card-quick, .person-card-quick:focus-visible { opacity: 1; }
.people-list .person-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; }
.person-row-actions { display: flex; align-items: center; gap: 6px; min-height: 54px; }
.person-row-actions .quick-action { min-height: 30px; padding: 0 10px; font-size: var(--fs-11); }
.person-row-open { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.person-row-quick { opacity: 0; transition: opacity var(--calm-duration, 240ms) var(--calm-ease, ease-out); }
.person-row:hover .person-row-quick, .person-row:focus-within .person-row-quick { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .person-card-quick, .person-row-quick { opacity: 1; }
}

.person-section-title { margin: 0; font-size: var(--fs-15); font-weight: 600; letter-spacing: .01em; }
.person-contact-bar,
.person-note-form,
.person-timeline-section,
.person-stored,
.entity-edges-section {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-slab);
  background: var(--gd-slab), var(--slab);
}
.entity-edges-section { background: transparent; padding: 18px 0 0; }
.person-contact-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; }
.person-contact-facts { display: grid; gap: 2px; min-width: 0; }
.person-contact-facts p { margin: 0; }
.person-contact-label { color: var(--ink-faint); font-size: var(--fs-11); letter-spacing: .04em; text-transform: uppercase; }
.person-contact-value { font-size: var(--fs-19); font-weight: 550; line-height: 1.25; }
.person-contact-cadence { color: var(--ink-soft); font-size: var(--fs-13); }
.person-contact-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.person-spoke { min-height: 44px; padding: 0 22px; font-size: var(--fs-15); }
.person-another-day,
.person-note-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.person-another-day { grid-column: 1 / -1; padding-top: 4px; border-top: 1px solid var(--line); }
.person-another-day .field,
.person-note-row .field { margin: 0; gap: 2px; }
.person-another-day .text-input,
.person-note-row .text-input { min-height: 36px; }
.person-note-text { width: 100%; min-height: 84px; resize: vertical; box-sizing: border-box; font: inherit; }
.person-note-form > .field { margin: 0; }
.person-note-spoke { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: var(--fs-13); cursor: pointer; }
.person-note-spoke input { width: 18px; height: 18px; accent-color: var(--accent); }

.person-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.person-timeline-entry { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.person-timeline-entry:last-child { border-bottom: 0; }
.person-timeline-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--fs-13); }
.person-timeline-day { min-width: 56px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.person-timeline-kind { font-weight: 600; }
.person-timeline-kind.is-note { color: var(--accent); }
.person-timeline-source { min-width: 0; color: var(--ink-faint); overflow-wrap: anywhere; }
.person-timeline-link { color: var(--accent); }
.person-timeline-remove { margin-left: auto; font-size: var(--fs-11); }
.person-timeline-note { margin: 0; padding-left: 66px; color: var(--ink); font-size: var(--fs-15); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

.person-stored-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.person-stored-intro { margin: 0; color: var(--ink-soft); font-size: var(--fs-13); }
.person-stored-group { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.person-stored-title { margin: 0; color: var(--ink-soft); font-size: var(--fs-11); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.person-stored-group .person-detail { padding: 0; }
.person-stored-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-13); }
.person-stored-plugin { display: grid; gap: 12px; }
.detail-fact--block .person-notes { margin: 0; white-space: pre-wrap; }

@media (max-width: 559px) {
  .person-contact-bar { grid-template-columns: minmax(0, 1fr); }
  .person-contact-actions { justify-content: stretch; }
  .person-spoke { flex: 1 1 100%; }
  .person-contact-bar, .person-note-form, .person-timeline-section, .person-stored { padding: 14px; }
  .person-timeline-note { padding-left: 0; }
  .person-row-actions { min-height: 54px; }
  .person-note-row > .button { flex: 1 1 100%; }
}
.person-stored .detail-fact > .entity-chip { justify-self: start; max-width: 100%; }
.person-stored-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.person-stored .detail-fact { padding: 8px 0; }
/* `.detail-fact span` is the fact's label; a chip's own spans keep the chip's colour and size. */
.detail-fact .entity-chip :is(.entity-chip-label, .entity-chip-meta) { color: inherit; font-size: inherit; }