/*
 * Cove: a deep-ink navigation shell around luminous work surfaces. One accent, a proprietary arc-and-horizon motif
 * drawn in CSS, layered ambient shadows with fine edge highlights. System-native sans for work, a book serif for dates
 * and the journal. Mobile first.
 * Every colour is a theme token (COVE-388): the palettes section below defines seven themes, chosen by data-palette on
 * <html> (web/src/theme.ts). The journal's data-theme="journal" composes with it and takes that theme's dark tokens.
 */
:root {
  /* Colours come from the palettes below. */
  /* shape */
  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 5px;
  /* One type scale for the whole app: every size in this sheet is one of these steps. 14px is the working size. */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-body: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.1875rem;
  --text-2xl: 1.375rem;
  /* One control size for buttons, fields, filter chips and menu rows: compact with a mouse, a 44px target on touch.
     --ctl-sm is for controls nested inside a row or the move bar. --field-min keeps form text at 16px on touch, below
     which iOS zooms the page when a field is focused. --rem-col is the checkbox column of a reminder row. */
  --ctl: 34px;
  --ctl-sm: 30px;
  --field-min: 0px;
  --rem-col: 2.5rem;
  /* The page column, and the content measure inside it once the side padding is taken off. */
  --page: 74rem;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --tabbar-h: 54px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (pointer: coarse) {
  :root { --ctl: 44px; --ctl-sm: 44px; --field-min: 16px; --rem-col: 3rem; }
}

/*
 * ---------- palettes ----------
 * Seven themes (COVE-388), each with a light set and the dark set the journal uses. Sea glass is the default and the
 * signed-out home page's. Generated from design/themes/build/palettes.mjs: change a palette there, then run
 * build.mjs and ship.mjs (design/themes/README.md); do not edit between the markers by hand.
 */
/* palettes:start */
/* Sea glass (Morning tide) */
:root,
:root[data-palette="seaglass"],
[data-swatch="seaglass"] {
  --ink: #0d1c1f;
  --ink-2: #13282b;
  --ink-3: #1b3337;
  --ink-text: rgb(236 246 242 / 0.92);
  --ink-muted: rgb(220 236 230 / 0.62);
  --seaglass: #96e2cd;
  --hl-hover: #a9ead8;
  --bg: #f1f5f3;
  --surface: #ffffff;
  --surface-2: #f4f7f6;
  --hover: #f3f8f6;
  --text: #0f1f22;
  --text-2: #36474a;
  --muted: #5b6b6d;
  --faint: #88948f;
  --border: #dfe7e4;
  --border-soft: #e9efec;
  --border-strong: #c9d4d0;
  --border-hover: #b4c2bd;
  --placeholder: #68736e;
  --accent: #0c7462;
  --accent-top: #0f7f6b;
  --accent-strong: #095646;
  --accent-soft: #def3ec;
  --mark-top: #e9f8f2;
  --on-accent: #ffffff;
  --warn: #965a0b;
  --warn-soft: #fcf1dc;
  --warn-line: #efd7a8;
  --danger: #b0392d;
  --danger-soft: #fceae7;
  --danger-line: #f0cbc4;
  --ok: #1e7148;
  --ok-soft: #e2f3e8;
  --info: #3756a3;
  --info-soft: #e8edfa;
  --tone-warm: #f2c27a;
  --tone-cool: #a9bdf5;
  --event-ink: #0b1a1c;
  --busy: #e9eeed;
  --toast-danger-bg: #3a1814;
  --toast-danger-text: #fde9e5;
  --hl-rgb: 150 226 205;
  --shade-rgb: 13 28 31;
  --accent-rgb: 12 116 98;
  --accent-strong-rgb: 9 86 70;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--accent-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #f1f5f3;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.035), 0 1px 2px rgb(var(--shade-rgb) / 0.05), 0 6px 18px -10px rgb(var(--shade-rgb) / 0.14);
  --shadow-lift: 0 0 0 1px rgb(var(--shade-rgb) / 0.04), 0 2px 4px rgb(var(--shade-rgb) / 0.05), 0 18px 40px -18px rgb(var(--shade-rgb) / 0.28);
  --shadow-pop: 0 0 0 1px rgb(var(--shade-rgb) / 0.06), 0 24px 64px -12px rgb(var(--shade-rgb) / 0.4);
  color-scheme: light;
}
:root[data-scheme="dark"],
:root[data-theme="journal"],
:root[data-palette="seaglass"][data-scheme="dark"],
:root[data-palette="seaglass"][data-theme="journal"],
[data-swatch="seaglass"][data-swatch-scheme="dark"] {
  --ink: #0d1c1f;
  --ink-2: #13282b;
  --ink-3: #1b3337;
  --ink-text: rgb(236 246 242 / 0.92);
  --ink-muted: rgb(220 236 230 / 0.62);
  --seaglass: #96e2cd;
  --hl-hover: #a9ead8;
  --bg: #0a1517;
  --surface: #11201f;
  --surface-2: #162a2b;
  --hover: #183032;
  --text: #e4f0ec;
  --text-2: #bccdc8;
  --muted: #93a8a3;
  --faint: #65797c;
  --border: #22383a;
  --border-soft: #1b2f31;
  --border-strong: #31494b;
  --border-hover: #48615f;
  --placeholder: #84989b;
  --accent: #8fdcc7;
  --accent-top: #9fe4d1;
  --accent-strong: #b0ecdc;
  --accent-soft: rgb(150 226 205 / 0.12);
  --mark-top: rgb(150 226 205 / 0.18);
  --on-accent: #0d1c1f;
  --warn: #f0c37e;
  --warn-soft: rgb(240 195 126 / 0.1);
  --warn-line: rgb(240 195 126 / 0.3);
  --danger: #f4a89c;
  --danger-soft: rgb(244 168 156 / 0.1);
  --danger-line: rgb(244 168 156 / 0.32);
  --ok: #a4e3bb;
  --ok-soft: rgb(164 227 187 / 0.1);
  --info: #b3c4f6;
  --info-soft: rgb(179 196 246 / 0.1);
  --tone-warm: #f2c27a;
  --tone-cool: #a9bdf5;
  --event-ink: #e6f1f3;
  --busy: #203134;
  --toast-danger-bg: #3a1814;
  --toast-danger-text: #fde9e5;
  --hl-rgb: 150 226 205;
  --shade-rgb: 2 7 8;
  --accent-rgb: 143 220 199;
  --accent-strong-rgb: 176 236 220;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--hl-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #0a1517;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.035);
  --shadow: 0 0 0 1px rgb(255 255 255 / 0.045), 0 1px 2px rgb(var(--shade-rgb) / 0.45), 0 10px 24px -14px rgb(var(--shade-rgb) / 0.7);
  --shadow-lift: 0 0 0 1px rgb(255 255 255 / 0.05), 0 2px 4px rgb(var(--shade-rgb) / 0.4), 0 22px 44px -20px rgb(var(--shade-rgb) / 0.8);
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 28px 64px -12px rgb(var(--shade-rgb) / 0.85);
  color-scheme: dark;
}

/* Rose (Dusk) */
:root[data-palette="rose"],
[data-swatch="rose"] {
  --ink: #26121a;
  --ink-2: #351b25;
  --ink-3: #432330;
  --ink-text: #f0e2e7;
  --ink-muted: #bda5ad;
  --seaglass: #f1bfd5;
  --hl-hover: #facee1;
  --bg: #f9f2f3;
  --surface: #ffffff;
  --surface-2: #faf5f5;
  --hover: #fdf4f5;
  --text: #27161d;
  --text-2: #513d44;
  --muted: #766168;
  --faint: #a08b8c;
  --border: #eee1e2;
  --border-soft: #f6eaeb;
  --border-strong: #decccd;
  --border-hover: #ceb7b9;
  --placeholder: #7e6a6c;
  --accent: #a93569;
  --accent-top: #b84174;
  --accent-strong: #82234e;
  --accent-soft: #fde7ee;
  --mark-top: #fff0f4;
  --on-accent: #ffffff;
  --warn: #945b03;
  --warn-soft: #fbf1dc;
  --warn-line: #edd6ad;
  --danger: #af3c1b;
  --danger-soft: #fceae6;
  --danger-line: #f1cbc1;
  --ok: #1b7149;
  --ok-soft: #e2f3e8;
  --info: #2759a2;
  --info-soft: #e6eefa;
  --tone-warm: #efc37e;
  --tone-cool: #a6c6f5;
  --event-ink: #1f1117;
  --busy: #f2ebeb;
  --toast-danger-bg: #3b160d;
  --toast-danger-text: #ffe9e3;
  --hl-rgb: 241 191 213;
  --shade-rgb: 38 18 26;
  --accent-rgb: 169 53 105;
  --accent-strong-rgb: 130 35 78;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--accent-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #f9f2f3;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.035), 0 1px 2px rgb(var(--shade-rgb) / 0.05), 0 6px 18px -10px rgb(var(--shade-rgb) / 0.14);
  --shadow-lift: 0 0 0 1px rgb(var(--shade-rgb) / 0.04), 0 2px 4px rgb(var(--shade-rgb) / 0.05), 0 18px 40px -18px rgb(var(--shade-rgb) / 0.28);
  --shadow-pop: 0 0 0 1px rgb(var(--shade-rgb) / 0.06), 0 24px 64px -12px rgb(var(--shade-rgb) / 0.4);
  color-scheme: light;
}
:root[data-palette="rose"][data-scheme="dark"],
:root[data-palette="rose"][data-theme="journal"],
[data-swatch="rose"][data-swatch-scheme="dark"] {
  --ink: #26121a;
  --ink-2: #351b25;
  --ink-3: #432330;
  --ink-text: #f0e2e7;
  --ink-muted: #bda5ad;
  --seaglass: #f1bfd5;
  --hl-hover: #facee1;
  --bg: #1c0e13;
  --surface: #28171e;
  --surface-2: #341f27;
  --hover: #3b232d;
  --text: #f6e9ed;
  --text-2: #d6c2c9;
  --muted: #b39ba4;
  --faint: #856d75;
  --border: #432c34;
  --border-soft: #39242c;
  --border-strong: #553c45;
  --border-hover: #6e525c;
  --placeholder: #a48c95;
  --accent: #ecb9d0;
  --accent-top: #f3c4d9;
  --accent-strong: #f9d0e2;
  --accent-soft: rgb(241 191 213 / 0.12);
  --mark-top: rgb(241 191 213 / 0.18);
  --on-accent: #26121a;
  --warn: #eec47e;
  --warn-soft: rgb(238 196 126 / 0.1);
  --warn-line: rgb(238 196 126 / 0.3);
  --danger: #f3aa95;
  --danger-soft: rgb(243 170 149 / 0.1);
  --danger-line: rgb(243 170 149 / 0.32);
  --ok: #a2e3bd;
  --ok-soft: rgb(162 227 189 / 0.1);
  --info: #adc6f6;
  --info-soft: rgb(173 198 246 / 0.1);
  --tone-warm: #efc37e;
  --tone-cool: #a6c6f5;
  --event-ink: #f6ebef;
  --busy: #3a282f;
  --toast-danger-bg: #3b160d;
  --toast-danger-text: #ffe9e3;
  --hl-rgb: 241 191 213;
  --shade-rgb: 11 3 6;
  --accent-rgb: 236 185 208;
  --accent-strong-rgb: 249 208 226;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--hl-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #1c0e13;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.035);
  --shadow: 0 0 0 1px rgb(255 255 255 / 0.045), 0 1px 2px rgb(var(--shade-rgb) / 0.45), 0 10px 24px -14px rgb(var(--shade-rgb) / 0.7);
  --shadow-lift: 0 0 0 1px rgb(255 255 255 / 0.05), 0 2px 4px rgb(var(--shade-rgb) / 0.4), 0 22px 44px -20px rgb(var(--shade-rgb) / 0.8);
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 28px 64px -12px rgb(var(--shade-rgb) / 0.85);
  color-scheme: dark;
}

/* Lilac (Moonrise) */
:root[data-palette="lilac"],
[data-swatch="lilac"] {
  --ink: #19152c;
  --ink-2: #241f3d;
  --ink-3: #2e284d;
  --ink-text: #e6e5f0;
  --ink-muted: #acaabf;
  --seaglass: #d4c3fd;
  --hl-hover: #dfd3ff;
  --bg: #f5f3f9;
  --surface: #ffffff;
  --surface-2: #f7f6f9;
  --hover: #f7f5fc;
  --text: #1c1a29;
  --text-2: #434153;
  --muted: #676578;
  --faint: #938e9e;
  --border: #e6e3ed;
  --border-soft: #eeecf5;
  --border-strong: #d3cedc;
  --border-hover: #c0bbcb;
  --placeholder: #726d7c;
  --accent: #6653a4;
  --accent-top: #715eb2;
  --accent-strong: #4b3c7d;
  --accent-soft: #edebfe;
  --mark-top: #f4f3ff;
  --on-accent: #ffffff;
  --warn: #965a0a;
  --warn-soft: #fcf1dc;
  --warn-line: #eed5ad;
  --danger: #b03738;
  --danger-soft: #fceae8;
  --danger-line: #f1cac7;
  --ok: #237145;
  --ok-soft: #e3f3e7;
  --info: #036483;
  --info-soft: #e1f0f7;
  --tone-warm: #f1c17f;
  --tone-cool: #90ceeb;
  --event-ink: #161421;
  --busy: #edecf1;
  --toast-danger-bg: #3b1514;
  --toast-danger-text: #ffe8e6;
  --hl-rgb: 212 195 253;
  --shade-rgb: 25 21 44;
  --accent-rgb: 102 83 164;
  --accent-strong-rgb: 75 60 125;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--accent-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #f5f3f9;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.035), 0 1px 2px rgb(var(--shade-rgb) / 0.05), 0 6px 18px -10px rgb(var(--shade-rgb) / 0.14);
  --shadow-lift: 0 0 0 1px rgb(var(--shade-rgb) / 0.04), 0 2px 4px rgb(var(--shade-rgb) / 0.05), 0 18px 40px -18px rgb(var(--shade-rgb) / 0.28);
  --shadow-pop: 0 0 0 1px rgb(var(--shade-rgb) / 0.06), 0 24px 64px -12px rgb(var(--shade-rgb) / 0.4);
  color-scheme: light;
}
:root[data-palette="lilac"][data-scheme="dark"],
:root[data-palette="lilac"][data-theme="journal"],
[data-swatch="lilac"][data-swatch-scheme="dark"] {
  --ink: #19152c;
  --ink-2: #241f3d;
  --ink-3: #2e284d;
  --ink-text: #e6e5f0;
  --ink-muted: #acaabf;
  --seaglass: #d4c3fd;
  --hl-hover: #dfd3ff;
  --bg: #13111e;
  --surface: #1d1a2a;
  --surface-2: #262337;
  --hover: #2b283e;
  --text: #ecebf7;
  --text-2: #c8c6d8;
  --muted: #a2a0b5;
  --faint: #747286;
  --border: #333145;
  --border-soft: #2b283b;
  --border-strong: #444157;
  --border-hover: #5a5770;
  --placeholder: #9391a5;
  --accent: #d0bff9;
  --accent-top: #d9caff;
  --accent-strong: #e1d6ff;
  --accent-soft: rgb(212 195 253 / 0.12);
  --mark-top: rgb(212 195 253 / 0.18);
  --on-accent: #19152c;
  --warn: #f0c37f;
  --warn-soft: rgb(240 195 127 / 0.1);
  --warn-line: rgb(240 195 127 / 0.3);
  --danger: #f4a7a2;
  --danger-soft: rgb(244 167 162 / 0.1);
  --danger-line: rgb(244 167 162 / 0.32);
  --ok: #a5e3b9;
  --ok-soft: rgb(165 227 185 / 0.1);
  --info: #96cfee;
  --info-soft: rgb(150 207 238 / 0.1);
  --tone-warm: #f1c17f;
  --tone-cool: #90ceeb;
  --event-ink: #eeedf6;
  --busy: #2d2b3c;
  --toast-danger-bg: #3b1514;
  --toast-danger-text: #ffe8e6;
  --hl-rgb: 212 195 253;
  --shade-rgb: 6 5 12;
  --accent-rgb: 208 191 249;
  --accent-strong-rgb: 225 214 255;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--hl-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #13111e;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.035);
  --shadow: 0 0 0 1px rgb(255 255 255 / 0.045), 0 1px 2px rgb(var(--shade-rgb) / 0.45), 0 10px 24px -14px rgb(var(--shade-rgb) / 0.7);
  --shadow-lift: 0 0 0 1px rgb(255 255 255 / 0.05), 0 2px 4px rgb(var(--shade-rgb) / 0.4), 0 22px 44px -20px rgb(var(--shade-rgb) / 0.8);
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 28px 64px -12px rgb(var(--shade-rgb) / 0.85);
  color-scheme: dark;
}

/* Apricot (Golden hour) */
:root[data-palette="apricot"],
[data-swatch="apricot"] {
  --ink: #25150d;
  --ink-2: #331f14;
  --ink-3: #41281b;
  --ink-text: #f0e3dd;
  --ink-muted: #bca89e;
  --seaglass: #fbc595;
  --hl-hover: #ffd5b2;
  --bg: #f8f3ed;
  --surface: #ffffff;
  --surface-2: #f9f6f2;
  --hover: #fcf6ef;
  --text: #281810;
  --text-2: #513f36;
  --muted: #76635a;
  --faint: #9b8e80;
  --border: #ede3d9;
  --border-soft: #f4ece3;
  --border-strong: #dccfc0;
  --border-hover: #cbbba9;
  --placeholder: #7a6e60;
  --accent: #9b5121;
  --accent-top: #a85c2c;
  --accent-strong: #763a13;
  --accent-soft: #fde9de;
  --mark-top: #fff1eb;
  --on-accent: #ffffff;
  --warn: #7e6902;
  --warn-soft: #f1f5de;
  --warn-line: #dbddb0;
  --danger: #b03644;
  --danger-soft: #fceaea;
  --danger-line: #f1caca;
  --ok: #297042;
  --ok-soft: #e3f3e7;
  --info: #3158a3;
  --info-soft: #e7eefa;
  --tone-warm: #d4cf80;
  --tone-cool: #aac5f6;
  --event-ink: #1f130c;
  --busy: #f1ece6;
  --toast-danger-bg: #3b1518;
  --toast-danger-text: #ffe8e8;
  --hl-rgb: 251 197 149;
  --shade-rgb: 37 21 13;
  --accent-rgb: 155 81 33;
  --accent-strong-rgb: 118 58 19;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--accent-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #f8f3ed;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.035), 0 1px 2px rgb(var(--shade-rgb) / 0.05), 0 6px 18px -10px rgb(var(--shade-rgb) / 0.14);
  --shadow-lift: 0 0 0 1px rgb(var(--shade-rgb) / 0.04), 0 2px 4px rgb(var(--shade-rgb) / 0.05), 0 18px 40px -18px rgb(var(--shade-rgb) / 0.28);
  --shadow-pop: 0 0 0 1px rgb(var(--shade-rgb) / 0.06), 0 24px 64px -12px rgb(var(--shade-rgb) / 0.4);
  color-scheme: light;
}
:root[data-palette="apricot"][data-scheme="dark"],
:root[data-palette="apricot"][data-theme="journal"],
[data-swatch="apricot"][data-swatch-scheme="dark"] {
  --ink: #25150d;
  --ink-2: #331f14;
  --ink-3: #41281b;
  --ink-text: #f0e3dd;
  --ink-muted: #bca89e;
  --seaglass: #fbc595;
  --hl-hover: #ffd5b2;
  --bg: #1b100a;
  --surface: #281911;
  --surface-2: #332118;
  --hover: #3a261c;
  --text: #f6eae4;
  --text-2: #d7c4bb;
  --muted: #b39e93;
  --faint: #856f65;
  --border: #422e24;
  --border-soft: #39261d;
  --border-strong: #553f33;
  --border-hover: #6d5548;
  --placeholder: #a48f84;
  --accent: #f4bd8e;
  --accent-top: #fbc89d;
  --accent-strong: #ffd4b0;
  --accent-soft: rgb(251 197 149 / 0.12);
  --mark-top: rgb(251 197 149 / 0.18);
  --on-accent: #25150d;
  --warn: #d2d082;
  --warn-soft: rgb(210 208 130 / 0.1);
  --warn-line: rgb(210 208 130 / 0.3);
  --danger: #f4a6a8;
  --danger-soft: rgb(244 166 168 / 0.1);
  --danger-line: rgb(244 166 168 / 0.32);
  --ok: #a8e2b6;
  --ok-soft: rgb(168 226 182 / 0.1);
  --info: #b0c5f6;
  --info-soft: rgb(176 197 246 / 0.1);
  --tone-warm: #d4cf80;
  --tone-cool: #aac5f6;
  --event-ink: #f6ece8;
  --busy: #3b2921;
  --toast-danger-bg: #3b1518;
  --toast-danger-text: #ffe8e8;
  --hl-rgb: 251 197 149;
  --shade-rgb: 11 4 2;
  --accent-rgb: 244 189 142;
  --accent-strong-rgb: 255 212 176;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--hl-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #1b100a;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.035);
  --shadow: 0 0 0 1px rgb(255 255 255 / 0.045), 0 1px 2px rgb(var(--shade-rgb) / 0.45), 0 10px 24px -14px rgb(var(--shade-rgb) / 0.7);
  --shadow-lift: 0 0 0 1px rgb(255 255 255 / 0.05), 0 2px 4px rgb(var(--shade-rgb) / 0.4), 0 22px 44px -20px rgb(var(--shade-rgb) / 0.8);
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 28px 64px -12px rgb(var(--shade-rgb) / 0.85);
  color-scheme: dark;
}

/* Sage (Garden) */
:root[data-palette="sage"],
[data-swatch="sage"] {
  --ink: #131c11;
  --ink-2: #1c2819;
  --ink-3: #243321;
  --ink-text: #e1e9df;
  --ink-muted: #a5b0a2;
  --seaglass: #c2d9bd;
  --hl-hover: #d1e5cd;
  --bg: #f4f5ef;
  --surface: #ffffff;
  --surface-2: #f6f7f3;
  --hover: #f7f7f1;
  --text: #151f13;
  --text-2: #3c473a;
  --muted: #606b5e;
  --faint: #919282;
  --border: #e5e6dc;
  --border-soft: #edeee5;
  --border-strong: #d1d2c4;
  --border-hover: #bec0ae;
  --placeholder: #707262;
  --accent: #506d41;
  --accent-top: #5b794b;
  --accent-strong: #3a512d;
  --accent-soft: #e8f1e3;
  --mark-top: #f0f7ed;
  --on-accent: #ffffff;
  --warn: #985911;
  --warn-soft: #fdf1dc;
  --warn-line: #f0d5ad;
  --danger: #b0392d;
  --danger-soft: #fceae7;
  --danger-line: #f1cac4;
  --ok: #016e71;
  --ok-soft: #ddf3f4;
  --info: #3158a3;
  --info-soft: #e7eefa;
  --tone-warm: #f3c080;
  --tone-cool: #aac5f6;
  --event-ink: #10190e;
  --busy: #edede8;
  --toast-danger-bg: #3b1611;
  --toast-danger-text: #ffe9e5;
  --hl-rgb: 194 217 189;
  --shade-rgb: 19 28 17;
  --accent-rgb: 80 109 65;
  --accent-strong-rgb: 58 81 45;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--accent-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #f4f5ef;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.035), 0 1px 2px rgb(var(--shade-rgb) / 0.05), 0 6px 18px -10px rgb(var(--shade-rgb) / 0.14);
  --shadow-lift: 0 0 0 1px rgb(var(--shade-rgb) / 0.04), 0 2px 4px rgb(var(--shade-rgb) / 0.05), 0 18px 40px -18px rgb(var(--shade-rgb) / 0.28);
  --shadow-pop: 0 0 0 1px rgb(var(--shade-rgb) / 0.06), 0 24px 64px -12px rgb(var(--shade-rgb) / 0.4);
  color-scheme: light;
}
:root[data-palette="sage"][data-scheme="dark"],
:root[data-palette="sage"][data-theme="journal"],
[data-swatch="sage"][data-swatch-scheme="dark"] {
  --ink: #131c11;
  --ink-2: #1c2819;
  --ink-3: #243321;
  --ink-text: #e1e9df;
  --ink-muted: #a5b0a2;
  --seaglass: #c2d9bd;
  --hl-hover: #d1e5cd;
  --bg: #0e150d;
  --surface: #172015;
  --surface-2: #1f2a1c;
  --hover: #232f21;
  --text: #e7f0e6;
  --text-2: #c1ccbf;
  --muted: #9aa797;
  --faint: #6c7969;
  --border: #2c3829;
  --border-soft: #242f21;
  --border-strong: #3b4938;
  --border-hover: #51604e;
  --placeholder: #8b9889;
  --accent: #bbd2b6;
  --accent-top: #c6dbc1;
  --accent-strong: #d1e4cd;
  --accent-soft: rgb(194 217 189 / 0.12);
  --mark-top: rgb(194 217 189 / 0.18);
  --on-accent: #131c11;
  --warn: #f2c280;
  --warn-soft: rgb(242 194 128 / 0.1);
  --warn-line: rgb(242 194 128 / 0.3);
  --danger: #f4a89c;
  --danger-soft: rgb(244 168 156 / 0.1);
  --danger-line: rgb(244 168 156 / 0.32);
  --ok: #8be3e6;
  --ok-soft: rgb(139 227 230 / 0.1);
  --info: #b0c5f6;
  --info-soft: rgb(176 197 246 / 0.1);
  --tone-warm: #f3c080;
  --tone-cool: #aac5f6;
  --event-ink: #eaf1e9;
  --busy: #273124;
  --toast-danger-bg: #3b1611;
  --toast-danger-text: #ffe9e5;
  --hl-rgb: 194 217 189;
  --shade-rgb: 4 7 3;
  --accent-rgb: 187 210 182;
  --accent-strong-rgb: 209 228 205;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--hl-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #0e150d;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.035);
  --shadow: 0 0 0 1px rgb(255 255 255 / 0.045), 0 1px 2px rgb(var(--shade-rgb) / 0.45), 0 10px 24px -14px rgb(var(--shade-rgb) / 0.7);
  --shadow-lift: 0 0 0 1px rgb(255 255 255 / 0.05), 0 2px 4px rgb(var(--shade-rgb) / 0.4), 0 22px 44px -20px rgb(var(--shade-rgb) / 0.8);
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 28px 64px -12px rgb(var(--shade-rgb) / 0.85);
  color-scheme: dark;
}

/* Harbour (Clear morning) */
:root[data-palette="harbour"],
[data-swatch="harbour"] {
  --ink: #0a192e;
  --ink-2: #11253f;
  --ink-3: #172f4f;
  --ink-text: #dfe7f1;
  --ink-muted: #a0aec0;
  --seaglass: #a7d3fa;
  --hl-hover: #bce0ff;
  --bg: #f0f5f9;
  --surface: #ffffff;
  --surface-2: #f4f7fa;
  --hover: #f2f7fc;
  --text: #131d2a;
  --text-2: #394454;
  --muted: #5c6979;
  --faint: #86929e;
  --border: #dee6ed;
  --border-soft: #e8eef5;
  --border-strong: #c8d3dc;
  --border-hover: #b2c0cc;
  --placeholder: #66727d;
  --accent: #2a5fb7;
  --accent-top: #356bc6;
  --accent-strong: #1a458c;
  --accent-soft: #e4eeff;
  --mark-top: #eff5ff;
  --on-accent: #ffffff;
  --warn: #965a0a;
  --warn-soft: #fcf1dc;
  --warn-line: #eed5ad;
  --danger: #b0392d;
  --danger-soft: #fceae7;
  --danger-line: #f1cac4;
  --ok: #237145;
  --ok-soft: #e3f3e7;
  --info: #6c4594;
  --info-soft: #f0eaf7;
  --tone-warm: #f1c17f;
  --tone-cool: #cfb8ec;
  --event-ink: #0e1621;
  --busy: #e9edf1;
  --toast-danger-bg: #3b1611;
  --toast-danger-text: #ffe9e5;
  --hl-rgb: 167 211 250;
  --shade-rgb: 10 25 46;
  --accent-rgb: 42 95 183;
  --accent-strong-rgb: 26 69 140;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--accent-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #f0f5f9;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.035), 0 1px 2px rgb(var(--shade-rgb) / 0.05), 0 6px 18px -10px rgb(var(--shade-rgb) / 0.14);
  --shadow-lift: 0 0 0 1px rgb(var(--shade-rgb) / 0.04), 0 2px 4px rgb(var(--shade-rgb) / 0.05), 0 18px 40px -18px rgb(var(--shade-rgb) / 0.28);
  --shadow-pop: 0 0 0 1px rgb(var(--shade-rgb) / 0.06), 0 24px 64px -12px rgb(var(--shade-rgb) / 0.4);
  color-scheme: light;
}
:root[data-palette="harbour"][data-scheme="dark"],
:root[data-palette="harbour"][data-theme="journal"],
[data-swatch="harbour"][data-swatch-scheme="dark"] {
  --ink: #0a192e;
  --ink-2: #11253f;
  --ink-3: #172f4f;
  --ink-text: #dfe7f1;
  --ink-muted: #a0aec0;
  --seaglass: #a7d3fa;
  --hl-hover: #bce0ff;
  --bg: #0b131e;
  --surface: #131d2b;
  --surface-2: #1a2738;
  --hover: #1e2c3f;
  --text: #e6eef8;
  --text-2: #bfcad8;
  --muted: #97a4b6;
  --faint: #687687;
  --border: #273446;
  --border-soft: #202c3c;
  --border-strong: #374559;
  --border-hover: #4c5c71;
  --placeholder: #8895a6;
  --accent: #a3d0f6;
  --accent-top: #b0d9fd;
  --accent-strong: #c1e2ff;
  --accent-soft: rgb(167 211 250 / 0.12);
  --mark-top: rgb(167 211 250 / 0.18);
  --on-accent: #0a192e;
  --warn: #f0c37f;
  --warn-soft: rgb(240 195 127 / 0.1);
  --warn-line: rgb(240 195 127 / 0.3);
  --danger: #f4a89c;
  --danger-soft: rgb(244 168 156 / 0.1);
  --danger-line: rgb(244 168 156 / 0.32);
  --ok: #a5e3b9;
  --ok-soft: rgb(165 227 185 / 0.1);
  --info: #d4b9ea;
  --info-soft: rgb(212 185 234 / 0.1);
  --tone-warm: #f1c17f;
  --tone-cool: #cfb8ec;
  --event-ink: #e9eff7;
  --busy: #242f3d;
  --toast-danger-bg: #3b1611;
  --toast-danger-text: #ffe9e5;
  --hl-rgb: 167 211 250;
  --shade-rgb: 3 6 13;
  --accent-rgb: 163 208 246;
  --accent-strong-rgb: 193 226 255;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--hl-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #0b131e;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.035);
  --shadow: 0 0 0 1px rgb(255 255 255 / 0.045), 0 1px 2px rgb(var(--shade-rgb) / 0.45), 0 10px 24px -14px rgb(var(--shade-rgb) / 0.7);
  --shadow-lift: 0 0 0 1px rgb(255 255 255 / 0.05), 0 2px 4px rgb(var(--shade-rgb) / 0.4), 0 22px 44px -20px rgb(var(--shade-rgb) / 0.8);
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 28px 64px -12px rgb(var(--shade-rgb) / 0.85);
  color-scheme: dark;
}

/* Graphite (Night fog) */
:root[data-palette="graphite"],
[data-swatch="graphite"] {
  --ink: #17191d;
  --ink-2: #222429;
  --ink-3: #2c2f34;
  --ink-text: #e5e6e9;
  --ink-muted: #aaacb0;
  --seaglass: #d0d5da;
  --hl-hover: #dee2e6;
  --bg: #f3f4f5;
  --surface: #ffffff;
  --surface-2: #f6f6f7;
  --hover: #f6f7f8;
  --text: #1a1c21;
  --text-2: #404449;
  --muted: #64686d;
  --faint: #8e9194;
  --border: #e3e5e7;
  --border-soft: #eceeef;
  --border-strong: #cfd1d4;
  --border-hover: #bbbec1;
  --placeholder: #6e7073;
  --accent: #32363c;
  --accent-top: #3c4046;
  --accent-strong: #1b1e23;
  --accent-soft: #ecedf0;
  --mark-top: #f3f4f6;
  --on-accent: #ffffff;
  --warn: #965a0a;
  --warn-soft: #fcf1dc;
  --warn-line: #eed5ad;
  --danger: #b0392d;
  --danger-soft: #fceae7;
  --danger-line: #f1cac4;
  --ok: #1e7148;
  --ok-soft: #e2f3e8;
  --info: #3756a3;
  --info-soft: #e7edfa;
  --tone-warm: #f1c17f;
  --tone-cool: #acc4f6;
  --event-ink: #141619;
  --busy: #ecedee;
  --toast-danger-bg: #3b1611;
  --toast-danger-text: #ffe9e5;
  --hl-rgb: 208 213 218;
  --shade-rgb: 23 25 29;
  --accent-rgb: 50 54 60;
  --accent-strong-rgb: 27 30 35;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--accent-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #f3f4f5;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.035), 0 1px 2px rgb(var(--shade-rgb) / 0.05), 0 6px 18px -10px rgb(var(--shade-rgb) / 0.14);
  --shadow-lift: 0 0 0 1px rgb(var(--shade-rgb) / 0.04), 0 2px 4px rgb(var(--shade-rgb) / 0.05), 0 18px 40px -18px rgb(var(--shade-rgb) / 0.28);
  --shadow-pop: 0 0 0 1px rgb(var(--shade-rgb) / 0.06), 0 24px 64px -12px rgb(var(--shade-rgb) / 0.4);
  color-scheme: light;
}
:root[data-palette="graphite"][data-scheme="dark"],
:root[data-palette="graphite"][data-theme="journal"],
[data-swatch="graphite"][data-swatch-scheme="dark"] {
  --ink: #17191d;
  --ink-2: #222429;
  --ink-3: #2c2f34;
  --ink-text: #e5e6e9;
  --ink-muted: #aaacb0;
  --seaglass: #d0d5da;
  --hl-hover: #dee2e6;
  --bg: #111316;
  --surface: #1a1d22;
  --surface-2: #23262c;
  --hover: #282c32;
  --text: #eaedf2;
  --text-2: #c5c9cf;
  --muted: #9fa3aa;
  --faint: #71757c;
  --border: #313439;
  --border-soft: #282b31;
  --border-strong: #40444b;
  --border-hover: #565b64;
  --placeholder: #90949b;
  --accent: #d4d8dd;
  --accent-top: #dee2e6;
  --accent-strong: #e5e8ec;
  --accent-soft: rgb(208 213 218 / 0.12);
  --mark-top: rgb(208 213 218 / 0.18);
  --on-accent: #17191d;
  --warn: #f0c37f;
  --warn-soft: rgb(240 195 127 / 0.1);
  --warn-line: rgb(240 195 127 / 0.3);
  --danger: #f4a89c;
  --danger-soft: rgb(244 168 156 / 0.1);
  --danger-line: rgb(244 168 156 / 0.32);
  --ok: #a3e3bc;
  --ok-soft: rgb(163 227 188 / 0.1);
  --info: #b3c4f6;
  --info-soft: rgb(179 196 246 / 0.1);
  --tone-warm: #f1c17f;
  --tone-cool: #acc4f6;
  --event-ink: #eaeff7;
  --busy: #2b2e33;
  --toast-danger-bg: #3b1611;
  --toast-danger-text: #ffe9e5;
  --hl-rgb: 208 213 218;
  --shade-rgb: 5 6 7;
  --accent-rgb: 212 216 221;
  --accent-strong-rgb: 229 232 236;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--hl-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #111316;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.035);
  --shadow: 0 0 0 1px rgb(255 255 255 / 0.045), 0 1px 2px rgb(var(--shade-rgb) / 0.45), 0 10px 24px -14px rgb(var(--shade-rgb) / 0.7);
  --shadow-lift: 0 0 0 1px rgb(255 255 255 / 0.05), 0 2px 4px rgb(var(--shade-rgb) / 0.4), 0 22px 44px -20px rgb(var(--shade-rgb) / 0.8);
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 28px 64px -12px rgb(var(--shade-rgb) / 0.85);
  color-scheme: dark;
}

/* Cream (Late morning) */
:root[data-palette="cream"],
[data-swatch="cream"] {
  --ink: #1f1811;
  --ink-2: #2c221a;
  --ink-3: #382c22;
  --ink-text: #ebe5df;
  --ink-muted: #b4aaa3;
  --seaglass: #eed193;
  --hl-hover: #f8deab;
  --bg: #f5f4f0;
  --surface: #ffffff;
  --surface-2: #f7f6f4;
  --hover: #f8f7f2;
  --text: #231a13;
  --text-2: #4b413a;
  --muted: #6f655d;
  --faint: #959086;
  --border: #e7e5de;
  --border-soft: #f0ede8;
  --border-strong: #d4d1c8;
  --border-hover: #c2bdb2;
  --placeholder: #747066;
  --accent: #6f5222;
  --accent-top: #7b5d2d;
  --accent-strong: #513a12;
  --accent-soft: #f5ecdf;
  --mark-top: #faf3ea;
  --on-accent: #ffffff;
  --warn: #a05034;
  --warn-soft: #ffefe3;
  --warn-line: #f9cfb4;
  --danger: #ad355c;
  --danger-soft: #fceaed;
  --danger-line: #f0c9d1;
  --ok: #2d703f;
  --ok-soft: #e4f3e6;
  --info: #3158a3;
  --info-soft: #e7eefa;
  --tone-warm: #ffb891;
  --tone-cool: #aac5f6;
  --event-ink: #1c140e;
  --busy: #eeede9;
  --toast-danger-bg: #3a151f;
  --toast-danger-text: #fee8ec;
  --hl-rgb: 238 209 147;
  --shade-rgb: 31 24 17;
  --accent-rgb: 111 82 34;
  --accent-strong-rgb: 81 58 18;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--accent-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #f5f4f0;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.035), 0 1px 2px rgb(var(--shade-rgb) / 0.05), 0 6px 18px -10px rgb(var(--shade-rgb) / 0.14);
  --shadow-lift: 0 0 0 1px rgb(var(--shade-rgb) / 0.04), 0 2px 4px rgb(var(--shade-rgb) / 0.05), 0 18px 40px -18px rgb(var(--shade-rgb) / 0.28);
  --shadow-pop: 0 0 0 1px rgb(var(--shade-rgb) / 0.06), 0 24px 64px -12px rgb(var(--shade-rgb) / 0.4);
  color-scheme: light;
}
:root[data-palette="cream"][data-scheme="dark"],
:root[data-palette="cream"][data-theme="journal"],
[data-swatch="cream"][data-swatch-scheme="dark"] {
  --ink: #1f1811;
  --ink-2: #2c221a;
  --ink-3: #382c22;
  --ink-text: #ebe5df;
  --ink-muted: #b4aaa3;
  --seaglass: #eed193;
  --hl-hover: #f8deab;
  --bg: #18120d;
  --surface: #231b14;
  --surface-2: #2e241c;
  --hover: #342920;
  --text: #f3ebe5;
  --text-2: #d0c7be;
  --muted: #aca097;
  --faint: #7e7268;
  --border: #3c3129;
  --border-soft: #332921;
  --border-strong: #4d4238;
  --border-hover: #65584d;
  --placeholder: #9d9188;
  --accent: #e3c689;
  --accent-top: #ebd098;
  --accent-strong: #f2dbaa;
  --accent-soft: rgb(238 209 147 / 0.12);
  --mark-top: rgb(238 209 147 / 0.18);
  --on-accent: #1f1811;
  --warn: #ffb990;
  --warn-soft: rgb(255 185 144 / 0.1);
  --warn-line: rgb(255 185 144 / 0.3);
  --danger: #f2a6b6;
  --danger-soft: rgb(242 166 182 / 0.1);
  --danger-line: rgb(242 166 182 / 0.32);
  --ok: #aae2b4;
  --ok-soft: rgb(170 226 180 / 0.1);
  --info: #b0c5f6;
  --info-soft: rgb(176 197 246 / 0.1);
  --tone-warm: #ffb891;
  --tone-cool: #aac5f6;
  --event-ink: #f5ede6;
  --busy: #352c24;
  --toast-danger-bg: #3a151f;
  --toast-danger-text: #fee8ec;
  --hl-rgb: 238 209 147;
  --shade-rgb: 8 5 3;
  --accent-rgb: 227 198 137;
  --accent-strong-rgb: 242 219 170;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--hl-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #18120d;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.035);
  --shadow: 0 0 0 1px rgb(255 255 255 / 0.045), 0 1px 2px rgb(var(--shade-rgb) / 0.45), 0 10px 24px -14px rgb(var(--shade-rgb) / 0.7);
  --shadow-lift: 0 0 0 1px rgb(255 255 255 / 0.05), 0 2px 4px rgb(var(--shade-rgb) / 0.4), 0 22px 44px -20px rgb(var(--shade-rgb) / 0.8);
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 28px 64px -12px rgb(var(--shade-rgb) / 0.85);
  color-scheme: dark;
}

/* Lock in (Before dawn) */
:root[data-palette="lockin"],
[data-swatch="lockin"] {
  --ink: #18191b;
  --ink-2: #232427;
  --ink-3: #2d2f32;
  --ink-text: #e5e6e8;
  --ink-muted: #abacaf;
  --seaglass: #d9dee6;
  --hl-hover: #e7ebf2;
  --bg: #f4f4f4;
  --surface: #ffffff;
  --surface-2: #f6f6f7;
  --hover: #f6f7f7;
  --text: #1a1c20;
  --text-2: #414347;
  --muted: #65686c;
  --faint: #909192;
  --border: #e4e5e6;
  --border-soft: #ededee;
  --border-strong: #d0d1d2;
  --border-hover: #bdbebf;
  --placeholder: #6f7071;
  --accent: #1e59cd;
  --accent-top: #2865dd;
  --accent-strong: #10409e;
  --accent-soft: #e4eeff;
  --mark-top: #eff5ff;
  --on-accent: #ffffff;
  --warn: #965a0a;
  --warn-soft: #fcf1dc;
  --warn-line: #eed5ad;
  --danger: #b0392d;
  --danger-soft: #fceae7;
  --danger-line: #f1cac4;
  --ok: #237145;
  --ok-soft: #e3f3e7;
  --info: #6c4594;
  --info-soft: #f0eaf7;
  --tone-warm: #f1c17f;
  --tone-cool: #cfb8ec;
  --event-ink: #151618;
  --busy: #eceded;
  --toast-danger-bg: #3b1611;
  --toast-danger-text: #ffe9e5;
  --hl-rgb: 217 222 230;
  --shade-rgb: 24 25 27;
  --accent-rgb: 30 89 205;
  --accent-strong-rgb: 16 64 158;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--accent-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #f4f4f4;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.035), 0 1px 2px rgb(var(--shade-rgb) / 0.05), 0 6px 18px -10px rgb(var(--shade-rgb) / 0.14);
  --shadow-lift: 0 0 0 1px rgb(var(--shade-rgb) / 0.04), 0 2px 4px rgb(var(--shade-rgb) / 0.05), 0 18px 40px -18px rgb(var(--shade-rgb) / 0.28);
  --shadow-pop: 0 0 0 1px rgb(var(--shade-rgb) / 0.06), 0 24px 64px -12px rgb(var(--shade-rgb) / 0.4);
  color-scheme: light;
}
:root[data-palette="lockin"][data-scheme="dark"],
:root[data-palette="lockin"][data-theme="journal"],
[data-swatch="lockin"][data-swatch-scheme="dark"] {
  --ink: #18191b;
  --ink-2: #232427;
  --ink-3: #2d2f32;
  --ink-text: #e5e6e8;
  --ink-muted: #abacaf;
  --seaglass: #d9dee6;
  --hl-hover: #e7ebf2;
  --bg: #121315;
  --surface: #1b1d20;
  --surface-2: #24262a;
  --hover: #292c30;
  --text: #ebedf1;
  --text-2: #c6c9cd;
  --muted: #a0a3a9;
  --faint: #71757a;
  --border: #313438;
  --border-soft: #292b2f;
  --border-strong: #41444a;
  --border-hover: #575b62;
  --placeholder: #919499;
  --accent: #9bbeff;
  --accent-top: #aac8ff;
  --accent-strong: #b9d2ff;
  --accent-soft: rgb(217 222 230 / 0.12);
  --mark-top: rgb(217 222 230 / 0.18);
  --on-accent: #18191b;
  --warn: #f0c37f;
  --warn-soft: rgb(240 195 127 / 0.1);
  --warn-line: rgb(240 195 127 / 0.3);
  --danger: #f4a89c;
  --danger-soft: rgb(244 168 156 / 0.1);
  --danger-line: rgb(244 168 156 / 0.32);
  --ok: #a5e3b9;
  --ok-soft: rgb(165 227 185 / 0.1);
  --info: #d4b9ea;
  --info-soft: rgb(212 185 234 / 0.1);
  --tone-warm: #f1c17f;
  --tone-cool: #cfb8ec;
  --event-ink: #eaeff7;
  --busy: #2c2e32;
  --toast-danger-bg: #3b1611;
  --toast-danger-text: #ffe9e5;
  --hl-rgb: 217 222 230;
  --shade-rgb: 5 6 6;
  --accent-rgb: 155 190 255;
  --accent-strong-rgb: 185 210 255;
  --seaglass-dim: rgb(var(--hl-rgb) / 0.16);
  --accent-ring: rgb(var(--hl-rgb) / 0.26);
  --ink-line: rgb(255 255 255 / 0.08);
  --theme-color: #121315;
  --edge: inset 0 1px 0 rgb(255 255 255 / 0.035);
  --shadow: 0 0 0 1px rgb(255 255 255 / 0.045), 0 1px 2px rgb(var(--shade-rgb) / 0.45), 0 10px 24px -14px rgb(var(--shade-rgb) / 0.7);
  --shadow-lift: 0 0 0 1px rgb(255 255 255 / 0.05), 0 2px 4px rgb(var(--shade-rgb) / 0.4), 0 22px 44px -20px rgb(var(--shade-rgb) / 0.8);
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 28px 64px -12px rgb(var(--shade-rgb) / 0.85);
  color-scheme: dark;
}
/* palettes:end */

/*
 * ---------- motif ----------
 * Each theme's mark for empty states, in the same 52 x 24 box: the arc rising over the horizon (Sea glass, Rose, Sage,
 * Graphite), with the lit sliver of a crescent moon (Lilac), with the low sun's half disc softly filled (Apricot), or
 * reflected as two glints under the horizon (Harbour). The geometry is design/themes/<id>/art/motif.svg's. It is a mask
 * of gradients painted in var(--accent), so it follows the journal's dark accent and loads no image (the app's CSP
 * allows no data: images). --motif-composite combines the layers; the crescent subtracts one disc from another.
 * [data-swatch] carries a theme's motif into the Appearance page's previews.
 */
:root, [data-swatch] {
  --motif-empty:
    radial-gradient(circle at 50% 100%, #0000 0 14.5px, #000 15px 17.2px, #0000 17.7px) 0 0 / 100% calc(100% - 1px) no-repeat,
    linear-gradient(90deg, #0000, #000 22%, #000 78%, #0000) 0 100% / 100% 1.6px no-repeat;
  --motif-composite: add;
}
:root[data-palette="lilac"], [data-swatch="lilac"] {
  --motif-empty:
    radial-gradient(circle at 50% 100%, #0000 0 14.5px, #000 15px 17.2px, #0000 17.7px) 0 0 / 100% calc(100% - 1px) no-repeat,
    linear-gradient(90deg, #0000, #000 22%, #000 78%, #0000) 0 100% / 100% 1.6px no-repeat,
    radial-gradient(circle at 50% 100%, rgb(0 0 0 / 0.4) 0 14.6px, #0000 15.1px) 0 0 / 100% calc(100% - 1px) no-repeat,
    radial-gradient(circle at calc(50% - 5.6px) 100%, #000 0 16px, #0000 16.5px) 0 0 / 100% calc(100% - 1px) no-repeat;
  --motif-composite: add, add, subtract, add;
}
:root[data-palette="apricot"], [data-swatch="apricot"] {
  --motif-empty:
    radial-gradient(circle at 50% 100%, #0000 0 14.5px, #000 15px 17.2px, #0000 17.7px) 0 0 / 100% calc(100% - 1px) no-repeat,
    radial-gradient(circle at 50% 100%, rgb(0 0 0 / 0.25) 0 14.6px, #0000 15.1px) 0 0 / 100% calc(100% - 1px) no-repeat,
    linear-gradient(90deg, #0000, #000 22%, #000 78%, #0000) 0 100% / 100% 1.6px no-repeat;
}
:root[data-palette="harbour"], [data-swatch="harbour"] {
  --motif-empty:
    radial-gradient(circle at 50% 100%, #0000 0 11.3px, #000 11.8px 13.6px, #0000 14.1px) 0 0 / 100% 16px no-repeat,
    linear-gradient(90deg, #0000, #000 22%, #000 78%, #0000) 0 15.2px / 100% 1.6px no-repeat,
    linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.45)) 50% 18.8px / 17.5px 1.6px no-repeat,
    linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.45)) 50% 22px / 9.5px 1.6px no-repeat;
}

/*
 * ---------- illustrations ----------
 * The eight scenes' small chibi illustrations (COVE-388), a choice of their own beside the colour: flat SVG drawings
 * generated in every palette's colours by design/themes/build/illustrations.mjs into
 * web/static/media/illus-<scene>-in-<palette>-<slot>.svg, which also writes the rules between the illustrations:start
 * and illustrations:end markers below (do not edit them by hand). <html> carries data-palette, data-scene (absent with
 * no illustration) and data-art="painted" for the painted pictures, ChatGPT's paintings traced into vectors and recoloured
 * the same way (web/static/media/paint-<scene>-in-<palette>-<slot>.svg; their rules carry one attribute more, so they
 * win). The files are served next to this stylesheet (/assets/<version>/): the CSP allows same-origin images
 * only, never data: URLs. With no illustration the `none` defaults stay, and web/src/theme.ts then hides the slot so it
 * takes no space; an empty state falls back to the palette's motif. Each drawing is shown whole (contain) in its box:
 *   --illus-today-hero  the right of the Today hero: 6rem x 4.25rem top right on phones; on wider screens 15rem wide,
 *                       standing on the card's bottom edge
 *   --illus-empty       above an empty state's text, 8rem x 7rem (6.5rem x 5.5rem on Today), in place of the motif
 *   --illus-journal     the head of the journal list: above the search on phones, beside it from 900px
 * Each rule also sets the tokens on [data-swatch="<palette>"][data-swatch-scene="<scene>"] (and
 * [data-swatch-scene][data-swatch-art="painted"]), the Appearance page's previews, so a tile shows its own combination
 * whatever the page shows.
 */
:root, [data-swatch] { --illus-today-hero: none; --illus-empty: none; --illus-journal: none; }
/* illustrations:start */
:root[data-palette="seaglass"][data-scene="seaglass"], [data-swatch="seaglass"][data-swatch-scene="seaglass"] { --illus-today-hero: url("illus-seaglass-in-seaglass-hero.svg"); --illus-empty: url("illus-seaglass-in-seaglass-spot.svg"); --illus-journal: url("illus-seaglass-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="seaglass"], [data-swatch="rose"][data-swatch-scene="seaglass"] { --illus-today-hero: url("illus-seaglass-in-rose-hero.svg"); --illus-empty: url("illus-seaglass-in-rose-spot.svg"); --illus-journal: url("illus-seaglass-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="seaglass"], [data-swatch="lilac"][data-swatch-scene="seaglass"] { --illus-today-hero: url("illus-seaglass-in-lilac-hero.svg"); --illus-empty: url("illus-seaglass-in-lilac-spot.svg"); --illus-journal: url("illus-seaglass-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="seaglass"], [data-swatch="apricot"][data-swatch-scene="seaglass"] { --illus-today-hero: url("illus-seaglass-in-apricot-hero.svg"); --illus-empty: url("illus-seaglass-in-apricot-spot.svg"); --illus-journal: url("illus-seaglass-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="seaglass"], [data-swatch="sage"][data-swatch-scene="seaglass"] { --illus-today-hero: url("illus-seaglass-in-sage-hero.svg"); --illus-empty: url("illus-seaglass-in-sage-spot.svg"); --illus-journal: url("illus-seaglass-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="seaglass"], [data-swatch="harbour"][data-swatch-scene="seaglass"] { --illus-today-hero: url("illus-seaglass-in-harbour-hero.svg"); --illus-empty: url("illus-seaglass-in-harbour-spot.svg"); --illus-journal: url("illus-seaglass-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="seaglass"], [data-swatch="graphite"][data-swatch-scene="seaglass"] { --illus-today-hero: url("illus-seaglass-in-graphite-hero.svg"); --illus-empty: url("illus-seaglass-in-graphite-spot.svg"); --illus-journal: url("illus-seaglass-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="seaglass"], [data-swatch="cream"][data-swatch-scene="seaglass"] { --illus-today-hero: url("illus-seaglass-in-cream-hero.svg"); --illus-empty: url("illus-seaglass-in-cream-spot.svg"); --illus-journal: url("illus-seaglass-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="seaglass"], [data-swatch="lockin"][data-swatch-scene="seaglass"] { --illus-today-hero: url("illus-seaglass-in-lockin-hero.svg"); --illus-empty: url("illus-seaglass-in-lockin-spot.svg"); --illus-journal: url("illus-seaglass-in-lockin-journal.svg"); }
:root[data-palette="seaglass"][data-scene="rose"], [data-swatch="seaglass"][data-swatch-scene="rose"] { --illus-today-hero: url("illus-rose-in-seaglass-hero.svg"); --illus-empty: url("illus-rose-in-seaglass-spot.svg"); --illus-journal: url("illus-rose-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="rose"], [data-swatch="rose"][data-swatch-scene="rose"] { --illus-today-hero: url("illus-rose-in-rose-hero.svg"); --illus-empty: url("illus-rose-in-rose-spot.svg"); --illus-journal: url("illus-rose-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="rose"], [data-swatch="lilac"][data-swatch-scene="rose"] { --illus-today-hero: url("illus-rose-in-lilac-hero.svg"); --illus-empty: url("illus-rose-in-lilac-spot.svg"); --illus-journal: url("illus-rose-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="rose"], [data-swatch="apricot"][data-swatch-scene="rose"] { --illus-today-hero: url("illus-rose-in-apricot-hero.svg"); --illus-empty: url("illus-rose-in-apricot-spot.svg"); --illus-journal: url("illus-rose-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="rose"], [data-swatch="sage"][data-swatch-scene="rose"] { --illus-today-hero: url("illus-rose-in-sage-hero.svg"); --illus-empty: url("illus-rose-in-sage-spot.svg"); --illus-journal: url("illus-rose-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="rose"], [data-swatch="harbour"][data-swatch-scene="rose"] { --illus-today-hero: url("illus-rose-in-harbour-hero.svg"); --illus-empty: url("illus-rose-in-harbour-spot.svg"); --illus-journal: url("illus-rose-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="rose"], [data-swatch="graphite"][data-swatch-scene="rose"] { --illus-today-hero: url("illus-rose-in-graphite-hero.svg"); --illus-empty: url("illus-rose-in-graphite-spot.svg"); --illus-journal: url("illus-rose-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="rose"], [data-swatch="cream"][data-swatch-scene="rose"] { --illus-today-hero: url("illus-rose-in-cream-hero.svg"); --illus-empty: url("illus-rose-in-cream-spot.svg"); --illus-journal: url("illus-rose-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="rose"], [data-swatch="lockin"][data-swatch-scene="rose"] { --illus-today-hero: url("illus-rose-in-lockin-hero.svg"); --illus-empty: url("illus-rose-in-lockin-spot.svg"); --illus-journal: url("illus-rose-in-lockin-journal.svg"); }
:root[data-palette="seaglass"][data-scene="lilac"], [data-swatch="seaglass"][data-swatch-scene="lilac"] { --illus-today-hero: url("illus-lilac-in-seaglass-hero.svg"); --illus-empty: url("illus-lilac-in-seaglass-spot.svg"); --illus-journal: url("illus-lilac-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="lilac"], [data-swatch="rose"][data-swatch-scene="lilac"] { --illus-today-hero: url("illus-lilac-in-rose-hero.svg"); --illus-empty: url("illus-lilac-in-rose-spot.svg"); --illus-journal: url("illus-lilac-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="lilac"], [data-swatch="lilac"][data-swatch-scene="lilac"] { --illus-today-hero: url("illus-lilac-in-lilac-hero.svg"); --illus-empty: url("illus-lilac-in-lilac-spot.svg"); --illus-journal: url("illus-lilac-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="lilac"], [data-swatch="apricot"][data-swatch-scene="lilac"] { --illus-today-hero: url("illus-lilac-in-apricot-hero.svg"); --illus-empty: url("illus-lilac-in-apricot-spot.svg"); --illus-journal: url("illus-lilac-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="lilac"], [data-swatch="sage"][data-swatch-scene="lilac"] { --illus-today-hero: url("illus-lilac-in-sage-hero.svg"); --illus-empty: url("illus-lilac-in-sage-spot.svg"); --illus-journal: url("illus-lilac-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="lilac"], [data-swatch="harbour"][data-swatch-scene="lilac"] { --illus-today-hero: url("illus-lilac-in-harbour-hero.svg"); --illus-empty: url("illus-lilac-in-harbour-spot.svg"); --illus-journal: url("illus-lilac-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="lilac"], [data-swatch="graphite"][data-swatch-scene="lilac"] { --illus-today-hero: url("illus-lilac-in-graphite-hero.svg"); --illus-empty: url("illus-lilac-in-graphite-spot.svg"); --illus-journal: url("illus-lilac-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="lilac"], [data-swatch="cream"][data-swatch-scene="lilac"] { --illus-today-hero: url("illus-lilac-in-cream-hero.svg"); --illus-empty: url("illus-lilac-in-cream-spot.svg"); --illus-journal: url("illus-lilac-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="lilac"], [data-swatch="lockin"][data-swatch-scene="lilac"] { --illus-today-hero: url("illus-lilac-in-lockin-hero.svg"); --illus-empty: url("illus-lilac-in-lockin-spot.svg"); --illus-journal: url("illus-lilac-in-lockin-journal.svg"); }
:root[data-palette="seaglass"][data-scene="apricot"], [data-swatch="seaglass"][data-swatch-scene="apricot"] { --illus-today-hero: url("illus-apricot-in-seaglass-hero.svg"); --illus-empty: url("illus-apricot-in-seaglass-spot.svg"); --illus-journal: url("illus-apricot-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="apricot"], [data-swatch="rose"][data-swatch-scene="apricot"] { --illus-today-hero: url("illus-apricot-in-rose-hero.svg"); --illus-empty: url("illus-apricot-in-rose-spot.svg"); --illus-journal: url("illus-apricot-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="apricot"], [data-swatch="lilac"][data-swatch-scene="apricot"] { --illus-today-hero: url("illus-apricot-in-lilac-hero.svg"); --illus-empty: url("illus-apricot-in-lilac-spot.svg"); --illus-journal: url("illus-apricot-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="apricot"], [data-swatch="apricot"][data-swatch-scene="apricot"] { --illus-today-hero: url("illus-apricot-in-apricot-hero.svg"); --illus-empty: url("illus-apricot-in-apricot-spot.svg"); --illus-journal: url("illus-apricot-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="apricot"], [data-swatch="sage"][data-swatch-scene="apricot"] { --illus-today-hero: url("illus-apricot-in-sage-hero.svg"); --illus-empty: url("illus-apricot-in-sage-spot.svg"); --illus-journal: url("illus-apricot-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="apricot"], [data-swatch="harbour"][data-swatch-scene="apricot"] { --illus-today-hero: url("illus-apricot-in-harbour-hero.svg"); --illus-empty: url("illus-apricot-in-harbour-spot.svg"); --illus-journal: url("illus-apricot-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="apricot"], [data-swatch="graphite"][data-swatch-scene="apricot"] { --illus-today-hero: url("illus-apricot-in-graphite-hero.svg"); --illus-empty: url("illus-apricot-in-graphite-spot.svg"); --illus-journal: url("illus-apricot-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="apricot"], [data-swatch="cream"][data-swatch-scene="apricot"] { --illus-today-hero: url("illus-apricot-in-cream-hero.svg"); --illus-empty: url("illus-apricot-in-cream-spot.svg"); --illus-journal: url("illus-apricot-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="apricot"], [data-swatch="lockin"][data-swatch-scene="apricot"] { --illus-today-hero: url("illus-apricot-in-lockin-hero.svg"); --illus-empty: url("illus-apricot-in-lockin-spot.svg"); --illus-journal: url("illus-apricot-in-lockin-journal.svg"); }
:root[data-palette="seaglass"][data-scene="sage"], [data-swatch="seaglass"][data-swatch-scene="sage"] { --illus-today-hero: url("illus-sage-in-seaglass-hero.svg"); --illus-empty: url("illus-sage-in-seaglass-spot.svg"); --illus-journal: url("illus-sage-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="sage"], [data-swatch="rose"][data-swatch-scene="sage"] { --illus-today-hero: url("illus-sage-in-rose-hero.svg"); --illus-empty: url("illus-sage-in-rose-spot.svg"); --illus-journal: url("illus-sage-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="sage"], [data-swatch="lilac"][data-swatch-scene="sage"] { --illus-today-hero: url("illus-sage-in-lilac-hero.svg"); --illus-empty: url("illus-sage-in-lilac-spot.svg"); --illus-journal: url("illus-sage-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="sage"], [data-swatch="apricot"][data-swatch-scene="sage"] { --illus-today-hero: url("illus-sage-in-apricot-hero.svg"); --illus-empty: url("illus-sage-in-apricot-spot.svg"); --illus-journal: url("illus-sage-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="sage"], [data-swatch="sage"][data-swatch-scene="sage"] { --illus-today-hero: url("illus-sage-in-sage-hero.svg"); --illus-empty: url("illus-sage-in-sage-spot.svg"); --illus-journal: url("illus-sage-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="sage"], [data-swatch="harbour"][data-swatch-scene="sage"] { --illus-today-hero: url("illus-sage-in-harbour-hero.svg"); --illus-empty: url("illus-sage-in-harbour-spot.svg"); --illus-journal: url("illus-sage-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="sage"], [data-swatch="graphite"][data-swatch-scene="sage"] { --illus-today-hero: url("illus-sage-in-graphite-hero.svg"); --illus-empty: url("illus-sage-in-graphite-spot.svg"); --illus-journal: url("illus-sage-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="sage"], [data-swatch="cream"][data-swatch-scene="sage"] { --illus-today-hero: url("illus-sage-in-cream-hero.svg"); --illus-empty: url("illus-sage-in-cream-spot.svg"); --illus-journal: url("illus-sage-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="sage"], [data-swatch="lockin"][data-swatch-scene="sage"] { --illus-today-hero: url("illus-sage-in-lockin-hero.svg"); --illus-empty: url("illus-sage-in-lockin-spot.svg"); --illus-journal: url("illus-sage-in-lockin-journal.svg"); }
:root[data-palette="seaglass"][data-scene="harbour"], [data-swatch="seaglass"][data-swatch-scene="harbour"] { --illus-today-hero: url("illus-harbour-in-seaglass-hero.svg"); --illus-empty: url("illus-harbour-in-seaglass-spot.svg"); --illus-journal: url("illus-harbour-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="harbour"], [data-swatch="rose"][data-swatch-scene="harbour"] { --illus-today-hero: url("illus-harbour-in-rose-hero.svg"); --illus-empty: url("illus-harbour-in-rose-spot.svg"); --illus-journal: url("illus-harbour-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="harbour"], [data-swatch="lilac"][data-swatch-scene="harbour"] { --illus-today-hero: url("illus-harbour-in-lilac-hero.svg"); --illus-empty: url("illus-harbour-in-lilac-spot.svg"); --illus-journal: url("illus-harbour-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="harbour"], [data-swatch="apricot"][data-swatch-scene="harbour"] { --illus-today-hero: url("illus-harbour-in-apricot-hero.svg"); --illus-empty: url("illus-harbour-in-apricot-spot.svg"); --illus-journal: url("illus-harbour-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="harbour"], [data-swatch="sage"][data-swatch-scene="harbour"] { --illus-today-hero: url("illus-harbour-in-sage-hero.svg"); --illus-empty: url("illus-harbour-in-sage-spot.svg"); --illus-journal: url("illus-harbour-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="harbour"], [data-swatch="harbour"][data-swatch-scene="harbour"] { --illus-today-hero: url("illus-harbour-in-harbour-hero.svg"); --illus-empty: url("illus-harbour-in-harbour-spot.svg"); --illus-journal: url("illus-harbour-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="harbour"], [data-swatch="graphite"][data-swatch-scene="harbour"] { --illus-today-hero: url("illus-harbour-in-graphite-hero.svg"); --illus-empty: url("illus-harbour-in-graphite-spot.svg"); --illus-journal: url("illus-harbour-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="harbour"], [data-swatch="cream"][data-swatch-scene="harbour"] { --illus-today-hero: url("illus-harbour-in-cream-hero.svg"); --illus-empty: url("illus-harbour-in-cream-spot.svg"); --illus-journal: url("illus-harbour-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="harbour"], [data-swatch="lockin"][data-swatch-scene="harbour"] { --illus-today-hero: url("illus-harbour-in-lockin-hero.svg"); --illus-empty: url("illus-harbour-in-lockin-spot.svg"); --illus-journal: url("illus-harbour-in-lockin-journal.svg"); }
:root[data-palette="seaglass"][data-scene="graphite"], [data-swatch="seaglass"][data-swatch-scene="graphite"] { --illus-today-hero: url("illus-graphite-in-seaglass-hero.svg"); --illus-empty: url("illus-graphite-in-seaglass-spot.svg"); --illus-journal: url("illus-graphite-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="graphite"], [data-swatch="rose"][data-swatch-scene="graphite"] { --illus-today-hero: url("illus-graphite-in-rose-hero.svg"); --illus-empty: url("illus-graphite-in-rose-spot.svg"); --illus-journal: url("illus-graphite-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="graphite"], [data-swatch="lilac"][data-swatch-scene="graphite"] { --illus-today-hero: url("illus-graphite-in-lilac-hero.svg"); --illus-empty: url("illus-graphite-in-lilac-spot.svg"); --illus-journal: url("illus-graphite-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="graphite"], [data-swatch="apricot"][data-swatch-scene="graphite"] { --illus-today-hero: url("illus-graphite-in-apricot-hero.svg"); --illus-empty: url("illus-graphite-in-apricot-spot.svg"); --illus-journal: url("illus-graphite-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="graphite"], [data-swatch="sage"][data-swatch-scene="graphite"] { --illus-today-hero: url("illus-graphite-in-sage-hero.svg"); --illus-empty: url("illus-graphite-in-sage-spot.svg"); --illus-journal: url("illus-graphite-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="graphite"], [data-swatch="harbour"][data-swatch-scene="graphite"] { --illus-today-hero: url("illus-graphite-in-harbour-hero.svg"); --illus-empty: url("illus-graphite-in-harbour-spot.svg"); --illus-journal: url("illus-graphite-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="graphite"], [data-swatch="graphite"][data-swatch-scene="graphite"] { --illus-today-hero: url("illus-graphite-in-graphite-hero.svg"); --illus-empty: url("illus-graphite-in-graphite-spot.svg"); --illus-journal: url("illus-graphite-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="graphite"], [data-swatch="cream"][data-swatch-scene="graphite"] { --illus-today-hero: url("illus-graphite-in-cream-hero.svg"); --illus-empty: url("illus-graphite-in-cream-spot.svg"); --illus-journal: url("illus-graphite-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="graphite"], [data-swatch="lockin"][data-swatch-scene="graphite"] { --illus-today-hero: url("illus-graphite-in-lockin-hero.svg"); --illus-empty: url("illus-graphite-in-lockin-spot.svg"); --illus-journal: url("illus-graphite-in-lockin-journal.svg"); }
:root[data-palette="seaglass"][data-scene="cream"], [data-swatch="seaglass"][data-swatch-scene="cream"] { --illus-today-hero: url("illus-cream-in-seaglass-hero.svg"); --illus-empty: url("illus-cream-in-seaglass-spot.svg"); --illus-journal: url("illus-cream-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="cream"], [data-swatch="rose"][data-swatch-scene="cream"] { --illus-today-hero: url("illus-cream-in-rose-hero.svg"); --illus-empty: url("illus-cream-in-rose-spot.svg"); --illus-journal: url("illus-cream-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="cream"], [data-swatch="lilac"][data-swatch-scene="cream"] { --illus-today-hero: url("illus-cream-in-lilac-hero.svg"); --illus-empty: url("illus-cream-in-lilac-spot.svg"); --illus-journal: url("illus-cream-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="cream"], [data-swatch="apricot"][data-swatch-scene="cream"] { --illus-today-hero: url("illus-cream-in-apricot-hero.svg"); --illus-empty: url("illus-cream-in-apricot-spot.svg"); --illus-journal: url("illus-cream-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="cream"], [data-swatch="sage"][data-swatch-scene="cream"] { --illus-today-hero: url("illus-cream-in-sage-hero.svg"); --illus-empty: url("illus-cream-in-sage-spot.svg"); --illus-journal: url("illus-cream-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="cream"], [data-swatch="harbour"][data-swatch-scene="cream"] { --illus-today-hero: url("illus-cream-in-harbour-hero.svg"); --illus-empty: url("illus-cream-in-harbour-spot.svg"); --illus-journal: url("illus-cream-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="cream"], [data-swatch="graphite"][data-swatch-scene="cream"] { --illus-today-hero: url("illus-cream-in-graphite-hero.svg"); --illus-empty: url("illus-cream-in-graphite-spot.svg"); --illus-journal: url("illus-cream-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="cream"], [data-swatch="cream"][data-swatch-scene="cream"] { --illus-today-hero: url("illus-cream-in-cream-hero.svg"); --illus-empty: url("illus-cream-in-cream-spot.svg"); --illus-journal: url("illus-cream-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="cream"], [data-swatch="lockin"][data-swatch-scene="cream"] { --illus-today-hero: url("illus-cream-in-lockin-hero.svg"); --illus-empty: url("illus-cream-in-lockin-spot.svg"); --illus-journal: url("illus-cream-in-lockin-journal.svg"); }
:root[data-palette="seaglass"][data-scene="seaglass"][data-art="painted"], [data-swatch="seaglass"][data-swatch-scene="seaglass"][data-swatch-art="painted"] { --illus-today-hero: url("paint-seaglass-in-seaglass-hero.svg"); --illus-empty: url("paint-seaglass-in-seaglass-spot.svg"); --illus-journal: url("paint-seaglass-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="seaglass"][data-art="painted"], [data-swatch="rose"][data-swatch-scene="seaglass"][data-swatch-art="painted"] { --illus-today-hero: url("paint-seaglass-in-rose-hero.svg"); --illus-empty: url("paint-seaglass-in-rose-spot.svg"); --illus-journal: url("paint-seaglass-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="seaglass"][data-art="painted"], [data-swatch="lilac"][data-swatch-scene="seaglass"][data-swatch-art="painted"] { --illus-today-hero: url("paint-seaglass-in-lilac-hero.svg"); --illus-empty: url("paint-seaglass-in-lilac-spot.svg"); --illus-journal: url("paint-seaglass-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="seaglass"][data-art="painted"], [data-swatch="apricot"][data-swatch-scene="seaglass"][data-swatch-art="painted"] { --illus-today-hero: url("paint-seaglass-in-apricot-hero.svg"); --illus-empty: url("paint-seaglass-in-apricot-spot.svg"); --illus-journal: url("paint-seaglass-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="seaglass"][data-art="painted"], [data-swatch="sage"][data-swatch-scene="seaglass"][data-swatch-art="painted"] { --illus-today-hero: url("paint-seaglass-in-sage-hero.svg"); --illus-empty: url("paint-seaglass-in-sage-spot.svg"); --illus-journal: url("paint-seaglass-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="seaglass"][data-art="painted"], [data-swatch="harbour"][data-swatch-scene="seaglass"][data-swatch-art="painted"] { --illus-today-hero: url("paint-seaglass-in-harbour-hero.svg"); --illus-empty: url("paint-seaglass-in-harbour-spot.svg"); --illus-journal: url("paint-seaglass-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="seaglass"][data-art="painted"], [data-swatch="graphite"][data-swatch-scene="seaglass"][data-swatch-art="painted"] { --illus-today-hero: url("paint-seaglass-in-graphite-hero.svg"); --illus-empty: url("paint-seaglass-in-graphite-spot.svg"); --illus-journal: url("paint-seaglass-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="seaglass"][data-art="painted"], [data-swatch="cream"][data-swatch-scene="seaglass"][data-swatch-art="painted"] { --illus-today-hero: url("paint-seaglass-in-cream-hero.svg"); --illus-empty: url("paint-seaglass-in-cream-spot.svg"); --illus-journal: url("paint-seaglass-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="seaglass"][data-art="painted"], [data-swatch="lockin"][data-swatch-scene="seaglass"][data-swatch-art="painted"] { --illus-today-hero: url("paint-seaglass-in-lockin-hero.svg"); --illus-empty: url("paint-seaglass-in-lockin-spot.svg"); --illus-journal: url("paint-seaglass-in-lockin-journal.svg"); }
:root[data-palette="seaglass"][data-scene="rose"][data-art="painted"], [data-swatch="seaglass"][data-swatch-scene="rose"][data-swatch-art="painted"] { --illus-today-hero: url("paint-rose-in-seaglass-hero.svg"); --illus-empty: url("paint-rose-in-seaglass-spot.svg"); --illus-journal: url("paint-rose-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="rose"][data-art="painted"], [data-swatch="rose"][data-swatch-scene="rose"][data-swatch-art="painted"] { --illus-today-hero: url("paint-rose-in-rose-hero.svg"); --illus-empty: url("paint-rose-in-rose-spot.svg"); --illus-journal: url("paint-rose-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="rose"][data-art="painted"], [data-swatch="lilac"][data-swatch-scene="rose"][data-swatch-art="painted"] { --illus-today-hero: url("paint-rose-in-lilac-hero.svg"); --illus-empty: url("paint-rose-in-lilac-spot.svg"); --illus-journal: url("paint-rose-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="rose"][data-art="painted"], [data-swatch="apricot"][data-swatch-scene="rose"][data-swatch-art="painted"] { --illus-today-hero: url("paint-rose-in-apricot-hero.svg"); --illus-empty: url("paint-rose-in-apricot-spot.svg"); --illus-journal: url("paint-rose-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="rose"][data-art="painted"], [data-swatch="sage"][data-swatch-scene="rose"][data-swatch-art="painted"] { --illus-today-hero: url("paint-rose-in-sage-hero.svg"); --illus-empty: url("paint-rose-in-sage-spot.svg"); --illus-journal: url("paint-rose-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="rose"][data-art="painted"], [data-swatch="harbour"][data-swatch-scene="rose"][data-swatch-art="painted"] { --illus-today-hero: url("paint-rose-in-harbour-hero.svg"); --illus-empty: url("paint-rose-in-harbour-spot.svg"); --illus-journal: url("paint-rose-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="rose"][data-art="painted"], [data-swatch="graphite"][data-swatch-scene="rose"][data-swatch-art="painted"] { --illus-today-hero: url("paint-rose-in-graphite-hero.svg"); --illus-empty: url("paint-rose-in-graphite-spot.svg"); --illus-journal: url("paint-rose-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="rose"][data-art="painted"], [data-swatch="cream"][data-swatch-scene="rose"][data-swatch-art="painted"] { --illus-today-hero: url("paint-rose-in-cream-hero.svg"); --illus-empty: url("paint-rose-in-cream-spot.svg"); --illus-journal: url("paint-rose-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="rose"][data-art="painted"], [data-swatch="lockin"][data-swatch-scene="rose"][data-swatch-art="painted"] { --illus-today-hero: url("paint-rose-in-lockin-hero.svg"); --illus-empty: url("paint-rose-in-lockin-spot.svg"); --illus-journal: url("paint-rose-in-lockin-journal.svg"); }
:root[data-palette="seaglass"][data-scene="lilac"][data-art="painted"], [data-swatch="seaglass"][data-swatch-scene="lilac"][data-swatch-art="painted"] { --illus-today-hero: url("paint-lilac-in-seaglass-hero.svg"); --illus-empty: url("paint-lilac-in-seaglass-spot.svg"); --illus-journal: url("paint-lilac-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="lilac"][data-art="painted"], [data-swatch="rose"][data-swatch-scene="lilac"][data-swatch-art="painted"] { --illus-today-hero: url("paint-lilac-in-rose-hero.svg"); --illus-empty: url("paint-lilac-in-rose-spot.svg"); --illus-journal: url("paint-lilac-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="lilac"][data-art="painted"], [data-swatch="lilac"][data-swatch-scene="lilac"][data-swatch-art="painted"] { --illus-today-hero: url("paint-lilac-in-lilac-hero.svg"); --illus-empty: url("paint-lilac-in-lilac-spot.svg"); --illus-journal: url("paint-lilac-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="lilac"][data-art="painted"], [data-swatch="apricot"][data-swatch-scene="lilac"][data-swatch-art="painted"] { --illus-today-hero: url("paint-lilac-in-apricot-hero.svg"); --illus-empty: url("paint-lilac-in-apricot-spot.svg"); --illus-journal: url("paint-lilac-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="lilac"][data-art="painted"], [data-swatch="sage"][data-swatch-scene="lilac"][data-swatch-art="painted"] { --illus-today-hero: url("paint-lilac-in-sage-hero.svg"); --illus-empty: url("paint-lilac-in-sage-spot.svg"); --illus-journal: url("paint-lilac-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="lilac"][data-art="painted"], [data-swatch="harbour"][data-swatch-scene="lilac"][data-swatch-art="painted"] { --illus-today-hero: url("paint-lilac-in-harbour-hero.svg"); --illus-empty: url("paint-lilac-in-harbour-spot.svg"); --illus-journal: url("paint-lilac-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="lilac"][data-art="painted"], [data-swatch="graphite"][data-swatch-scene="lilac"][data-swatch-art="painted"] { --illus-today-hero: url("paint-lilac-in-graphite-hero.svg"); --illus-empty: url("paint-lilac-in-graphite-spot.svg"); --illus-journal: url("paint-lilac-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="lilac"][data-art="painted"], [data-swatch="cream"][data-swatch-scene="lilac"][data-swatch-art="painted"] { --illus-today-hero: url("paint-lilac-in-cream-hero.svg"); --illus-empty: url("paint-lilac-in-cream-spot.svg"); --illus-journal: url("paint-lilac-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="lilac"][data-art="painted"], [data-swatch="lockin"][data-swatch-scene="lilac"][data-swatch-art="painted"] { --illus-today-hero: url("paint-lilac-in-lockin-hero.svg"); --illus-empty: url("paint-lilac-in-lockin-spot.svg"); --illus-journal: url("paint-lilac-in-lockin-journal.svg"); }
:root[data-palette="seaglass"][data-scene="apricot"][data-art="painted"], [data-swatch="seaglass"][data-swatch-scene="apricot"][data-swatch-art="painted"] { --illus-today-hero: url("paint-apricot-in-seaglass-hero.svg"); --illus-empty: url("paint-apricot-in-seaglass-spot.svg"); --illus-journal: url("paint-apricot-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="apricot"][data-art="painted"], [data-swatch="rose"][data-swatch-scene="apricot"][data-swatch-art="painted"] { --illus-today-hero: url("paint-apricot-in-rose-hero.svg"); --illus-empty: url("paint-apricot-in-rose-spot.svg"); --illus-journal: url("paint-apricot-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="apricot"][data-art="painted"], [data-swatch="lilac"][data-swatch-scene="apricot"][data-swatch-art="painted"] { --illus-today-hero: url("paint-apricot-in-lilac-hero.svg"); --illus-empty: url("paint-apricot-in-lilac-spot.svg"); --illus-journal: url("paint-apricot-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="apricot"][data-art="painted"], [data-swatch="apricot"][data-swatch-scene="apricot"][data-swatch-art="painted"] { --illus-today-hero: url("paint-apricot-in-apricot-hero.svg"); --illus-empty: url("paint-apricot-in-apricot-spot.svg"); --illus-journal: url("paint-apricot-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="apricot"][data-art="painted"], [data-swatch="sage"][data-swatch-scene="apricot"][data-swatch-art="painted"] { --illus-today-hero: url("paint-apricot-in-sage-hero.svg"); --illus-empty: url("paint-apricot-in-sage-spot.svg"); --illus-journal: url("paint-apricot-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="apricot"][data-art="painted"], [data-swatch="harbour"][data-swatch-scene="apricot"][data-swatch-art="painted"] { --illus-today-hero: url("paint-apricot-in-harbour-hero.svg"); --illus-empty: url("paint-apricot-in-harbour-spot.svg"); --illus-journal: url("paint-apricot-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="apricot"][data-art="painted"], [data-swatch="graphite"][data-swatch-scene="apricot"][data-swatch-art="painted"] { --illus-today-hero: url("paint-apricot-in-graphite-hero.svg"); --illus-empty: url("paint-apricot-in-graphite-spot.svg"); --illus-journal: url("paint-apricot-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="apricot"][data-art="painted"], [data-swatch="cream"][data-swatch-scene="apricot"][data-swatch-art="painted"] { --illus-today-hero: url("paint-apricot-in-cream-hero.svg"); --illus-empty: url("paint-apricot-in-cream-spot.svg"); --illus-journal: url("paint-apricot-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="apricot"][data-art="painted"], [data-swatch="lockin"][data-swatch-scene="apricot"][data-swatch-art="painted"] { --illus-today-hero: url("paint-apricot-in-lockin-hero.svg"); --illus-empty: url("paint-apricot-in-lockin-spot.svg"); --illus-journal: url("paint-apricot-in-lockin-journal.svg"); }
:root[data-palette="seaglass"][data-scene="sage"][data-art="painted"], [data-swatch="seaglass"][data-swatch-scene="sage"][data-swatch-art="painted"] { --illus-today-hero: url("paint-sage-in-seaglass-hero.svg"); --illus-empty: url("paint-sage-in-seaglass-spot.svg"); --illus-journal: url("paint-sage-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="sage"][data-art="painted"], [data-swatch="rose"][data-swatch-scene="sage"][data-swatch-art="painted"] { --illus-today-hero: url("paint-sage-in-rose-hero.svg"); --illus-empty: url("paint-sage-in-rose-spot.svg"); --illus-journal: url("paint-sage-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="sage"][data-art="painted"], [data-swatch="lilac"][data-swatch-scene="sage"][data-swatch-art="painted"] { --illus-today-hero: url("paint-sage-in-lilac-hero.svg"); --illus-empty: url("paint-sage-in-lilac-spot.svg"); --illus-journal: url("paint-sage-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="sage"][data-art="painted"], [data-swatch="apricot"][data-swatch-scene="sage"][data-swatch-art="painted"] { --illus-today-hero: url("paint-sage-in-apricot-hero.svg"); --illus-empty: url("paint-sage-in-apricot-spot.svg"); --illus-journal: url("paint-sage-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="sage"][data-art="painted"], [data-swatch="sage"][data-swatch-scene="sage"][data-swatch-art="painted"] { --illus-today-hero: url("paint-sage-in-sage-hero.svg"); --illus-empty: url("paint-sage-in-sage-spot.svg"); --illus-journal: url("paint-sage-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="sage"][data-art="painted"], [data-swatch="harbour"][data-swatch-scene="sage"][data-swatch-art="painted"] { --illus-today-hero: url("paint-sage-in-harbour-hero.svg"); --illus-empty: url("paint-sage-in-harbour-spot.svg"); --illus-journal: url("paint-sage-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="sage"][data-art="painted"], [data-swatch="graphite"][data-swatch-scene="sage"][data-swatch-art="painted"] { --illus-today-hero: url("paint-sage-in-graphite-hero.svg"); --illus-empty: url("paint-sage-in-graphite-spot.svg"); --illus-journal: url("paint-sage-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="sage"][data-art="painted"], [data-swatch="cream"][data-swatch-scene="sage"][data-swatch-art="painted"] { --illus-today-hero: url("paint-sage-in-cream-hero.svg"); --illus-empty: url("paint-sage-in-cream-spot.svg"); --illus-journal: url("paint-sage-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="sage"][data-art="painted"], [data-swatch="lockin"][data-swatch-scene="sage"][data-swatch-art="painted"] { --illus-today-hero: url("paint-sage-in-lockin-hero.svg"); --illus-empty: url("paint-sage-in-lockin-spot.svg"); --illus-journal: url("paint-sage-in-lockin-journal.svg"); }
:root[data-palette="seaglass"][data-scene="harbour"][data-art="painted"], [data-swatch="seaglass"][data-swatch-scene="harbour"][data-swatch-art="painted"] { --illus-today-hero: url("paint-harbour-in-seaglass-hero.svg"); --illus-empty: url("paint-harbour-in-seaglass-spot.svg"); --illus-journal: url("paint-harbour-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="harbour"][data-art="painted"], [data-swatch="rose"][data-swatch-scene="harbour"][data-swatch-art="painted"] { --illus-today-hero: url("paint-harbour-in-rose-hero.svg"); --illus-empty: url("paint-harbour-in-rose-spot.svg"); --illus-journal: url("paint-harbour-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="harbour"][data-art="painted"], [data-swatch="lilac"][data-swatch-scene="harbour"][data-swatch-art="painted"] { --illus-today-hero: url("paint-harbour-in-lilac-hero.svg"); --illus-empty: url("paint-harbour-in-lilac-spot.svg"); --illus-journal: url("paint-harbour-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="harbour"][data-art="painted"], [data-swatch="apricot"][data-swatch-scene="harbour"][data-swatch-art="painted"] { --illus-today-hero: url("paint-harbour-in-apricot-hero.svg"); --illus-empty: url("paint-harbour-in-apricot-spot.svg"); --illus-journal: url("paint-harbour-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="harbour"][data-art="painted"], [data-swatch="sage"][data-swatch-scene="harbour"][data-swatch-art="painted"] { --illus-today-hero: url("paint-harbour-in-sage-hero.svg"); --illus-empty: url("paint-harbour-in-sage-spot.svg"); --illus-journal: url("paint-harbour-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="harbour"][data-art="painted"], [data-swatch="harbour"][data-swatch-scene="harbour"][data-swatch-art="painted"] { --illus-today-hero: url("paint-harbour-in-harbour-hero.svg"); --illus-empty: url("paint-harbour-in-harbour-spot.svg"); --illus-journal: url("paint-harbour-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="harbour"][data-art="painted"], [data-swatch="graphite"][data-swatch-scene="harbour"][data-swatch-art="painted"] { --illus-today-hero: url("paint-harbour-in-graphite-hero.svg"); --illus-empty: url("paint-harbour-in-graphite-spot.svg"); --illus-journal: url("paint-harbour-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="harbour"][data-art="painted"], [data-swatch="cream"][data-swatch-scene="harbour"][data-swatch-art="painted"] { --illus-today-hero: url("paint-harbour-in-cream-hero.svg"); --illus-empty: url("paint-harbour-in-cream-spot.svg"); --illus-journal: url("paint-harbour-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="harbour"][data-art="painted"], [data-swatch="lockin"][data-swatch-scene="harbour"][data-swatch-art="painted"] { --illus-today-hero: url("paint-harbour-in-lockin-hero.svg"); --illus-empty: url("paint-harbour-in-lockin-spot.svg"); --illus-journal: url("paint-harbour-in-lockin-journal.svg"); }
:root[data-palette="seaglass"][data-scene="graphite"][data-art="painted"], [data-swatch="seaglass"][data-swatch-scene="graphite"][data-swatch-art="painted"] { --illus-today-hero: url("paint-graphite-in-seaglass-hero.svg"); --illus-empty: url("paint-graphite-in-seaglass-spot.svg"); --illus-journal: url("paint-graphite-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="graphite"][data-art="painted"], [data-swatch="rose"][data-swatch-scene="graphite"][data-swatch-art="painted"] { --illus-today-hero: url("paint-graphite-in-rose-hero.svg"); --illus-empty: url("paint-graphite-in-rose-spot.svg"); --illus-journal: url("paint-graphite-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="graphite"][data-art="painted"], [data-swatch="lilac"][data-swatch-scene="graphite"][data-swatch-art="painted"] { --illus-today-hero: url("paint-graphite-in-lilac-hero.svg"); --illus-empty: url("paint-graphite-in-lilac-spot.svg"); --illus-journal: url("paint-graphite-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="graphite"][data-art="painted"], [data-swatch="apricot"][data-swatch-scene="graphite"][data-swatch-art="painted"] { --illus-today-hero: url("paint-graphite-in-apricot-hero.svg"); --illus-empty: url("paint-graphite-in-apricot-spot.svg"); --illus-journal: url("paint-graphite-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="graphite"][data-art="painted"], [data-swatch="sage"][data-swatch-scene="graphite"][data-swatch-art="painted"] { --illus-today-hero: url("paint-graphite-in-sage-hero.svg"); --illus-empty: url("paint-graphite-in-sage-spot.svg"); --illus-journal: url("paint-graphite-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="graphite"][data-art="painted"], [data-swatch="harbour"][data-swatch-scene="graphite"][data-swatch-art="painted"] { --illus-today-hero: url("paint-graphite-in-harbour-hero.svg"); --illus-empty: url("paint-graphite-in-harbour-spot.svg"); --illus-journal: url("paint-graphite-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="graphite"][data-art="painted"], [data-swatch="graphite"][data-swatch-scene="graphite"][data-swatch-art="painted"] { --illus-today-hero: url("paint-graphite-in-graphite-hero.svg"); --illus-empty: url("paint-graphite-in-graphite-spot.svg"); --illus-journal: url("paint-graphite-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="graphite"][data-art="painted"], [data-swatch="cream"][data-swatch-scene="graphite"][data-swatch-art="painted"] { --illus-today-hero: url("paint-graphite-in-cream-hero.svg"); --illus-empty: url("paint-graphite-in-cream-spot.svg"); --illus-journal: url("paint-graphite-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="graphite"][data-art="painted"], [data-swatch="lockin"][data-swatch-scene="graphite"][data-swatch-art="painted"] { --illus-today-hero: url("paint-graphite-in-lockin-hero.svg"); --illus-empty: url("paint-graphite-in-lockin-spot.svg"); --illus-journal: url("paint-graphite-in-lockin-journal.svg"); }
:root[data-palette="seaglass"][data-scene="cream"][data-art="painted"], [data-swatch="seaglass"][data-swatch-scene="cream"][data-swatch-art="painted"] { --illus-today-hero: url("paint-cream-in-seaglass-hero.svg"); --illus-empty: url("paint-cream-in-seaglass-spot.svg"); --illus-journal: url("paint-cream-in-seaglass-journal.svg"); }
:root[data-palette="rose"][data-scene="cream"][data-art="painted"], [data-swatch="rose"][data-swatch-scene="cream"][data-swatch-art="painted"] { --illus-today-hero: url("paint-cream-in-rose-hero.svg"); --illus-empty: url("paint-cream-in-rose-spot.svg"); --illus-journal: url("paint-cream-in-rose-journal.svg"); }
:root[data-palette="lilac"][data-scene="cream"][data-art="painted"], [data-swatch="lilac"][data-swatch-scene="cream"][data-swatch-art="painted"] { --illus-today-hero: url("paint-cream-in-lilac-hero.svg"); --illus-empty: url("paint-cream-in-lilac-spot.svg"); --illus-journal: url("paint-cream-in-lilac-journal.svg"); }
:root[data-palette="apricot"][data-scene="cream"][data-art="painted"], [data-swatch="apricot"][data-swatch-scene="cream"][data-swatch-art="painted"] { --illus-today-hero: url("paint-cream-in-apricot-hero.svg"); --illus-empty: url("paint-cream-in-apricot-spot.svg"); --illus-journal: url("paint-cream-in-apricot-journal.svg"); }
:root[data-palette="sage"][data-scene="cream"][data-art="painted"], [data-swatch="sage"][data-swatch-scene="cream"][data-swatch-art="painted"] { --illus-today-hero: url("paint-cream-in-sage-hero.svg"); --illus-empty: url("paint-cream-in-sage-spot.svg"); --illus-journal: url("paint-cream-in-sage-journal.svg"); }
:root[data-palette="harbour"][data-scene="cream"][data-art="painted"], [data-swatch="harbour"][data-swatch-scene="cream"][data-swatch-art="painted"] { --illus-today-hero: url("paint-cream-in-harbour-hero.svg"); --illus-empty: url("paint-cream-in-harbour-spot.svg"); --illus-journal: url("paint-cream-in-harbour-journal.svg"); }
:root[data-palette="graphite"][data-scene="cream"][data-art="painted"], [data-swatch="graphite"][data-swatch-scene="cream"][data-swatch-art="painted"] { --illus-today-hero: url("paint-cream-in-graphite-hero.svg"); --illus-empty: url("paint-cream-in-graphite-spot.svg"); --illus-journal: url("paint-cream-in-graphite-journal.svg"); }
:root[data-palette="cream"][data-scene="cream"][data-art="painted"], [data-swatch="cream"][data-swatch-scene="cream"][data-swatch-art="painted"] { --illus-today-hero: url("paint-cream-in-cream-hero.svg"); --illus-empty: url("paint-cream-in-cream-spot.svg"); --illus-journal: url("paint-cream-in-cream-journal.svg"); }
:root[data-palette="lockin"][data-scene="cream"][data-art="painted"], [data-swatch="lockin"][data-swatch-scene="cream"][data-swatch-art="painted"] { --illus-today-hero: url("paint-cream-in-lockin-hero.svg"); --illus-empty: url("paint-cream-in-lockin-spot.svg"); --illus-journal: url("paint-cream-in-lockin-journal.svg"); }
/* illustrations:end */
.illus { display: block; flex-shrink: 0; pointer-events: none; background: var(--illus-image) center / contain no-repeat; }
/* Today: tucked top right beside the date on phones, never under the counts; on wider screens it stands on the card's
   bottom edge to the right of the counts, which keep their own column (padding-right) so the two never meet. */
.illus-today-hero { --illus-image: var(--illus-today-hero); position: absolute; top: 0.7rem; right: 0.8rem; width: 6rem; height: 4.25rem; background-position: right top; }
.today-hero:has(> .illus:not([hidden])) .hero-copy { padding-right: 6.5rem; }
/* Empty states: the spot art in place of the motif, a little larger than the text block's line height rhythm. */
.illus-empty { --illus-image: var(--illus-empty); width: 8rem; height: 7rem; background-position: center bottom; }
.today .illus-empty { width: 6.5rem; height: 5.5rem; }
.empty:has(> .illus:not([hidden]))::before, .rem-empty:has(> .illus:not([hidden]))::before { display: none; }
/* Journal: on phones it stands on the search field's top edge (right aligned); on wider screens it sits beside the
   search, on the same line as the Filters toggle. Slightly dimmed so the dark page stays calm. */
.journal-head { display: grid; gap: 0.5rem; min-width: 0; }
.journal-head:has(> .illus:not([hidden])) { row-gap: 0; }
.illus-journal { --illus-image: var(--illus-journal); order: -1; justify-self: end; width: min(11rem, 100%); height: 5.25rem; background-position: right bottom; opacity: 0.9; }
@media (min-width: 640px) {
  .illus-today-hero { top: 0.5rem; right: 1.25rem; bottom: 0; width: 15rem; height: auto; background-position: right bottom; }
  .today-hero:has(> .illus:not([hidden])) { padding-right: 17rem; }
  .today-hero:has(> .illus:not([hidden])) .hero-copy { padding-right: 0; }
}
@media (min-width: 900px) {
  .journal-head:has(> .illus:not([hidden])) { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 1.5rem; }
  .illus-journal { order: 0; width: 15rem; height: 7rem; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(90rem 32rem at 70% -12rem, rgb(var(--hl-rgb) / 0.22), transparent 70%), var(--bg);
  color: var(--text);
  font: var(--text-body)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
/* A session expired: private records stay in memory for the draft, but are not shown until sign-in succeeds. */
.app.locked { visibility: hidden; }
img, svg { max-width: 100%; }
a { color: var(--accent); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { font-family: var(--display); line-height: 1.25; font-weight: 650; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
h2 { font-size: var(--text-body); }
p { margin: 0; text-wrap: pretty; }
strong { font-weight: 640; }
code { font: 0.88em var(--mono); background: var(--surface-2); border: 1px solid var(--border-soft); padding: 0.08em 0.35em; border-radius: var(--radius-xs); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
#main:focus { outline: none; }

/* ---------- banners ---------- */
.banners { position: sticky; top: 0; z-index: 30; }
.banner { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: center; padding: calc(0.4rem + env(safe-area-inset-top, 0px)) 1rem 0.4rem; font-size: var(--text-md); font-weight: 550; text-align: center; }
.banner-offline { background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid var(--warn-line); }
.banner-update { background: var(--ink); color: var(--ink-text); border-bottom: 1px solid var(--ink-line); }
.banner-update .btn-primary { background: var(--seaglass); color: var(--ink); box-shadow: none; }

/* ---------- public home (signed out at "/", signed in at #/welcome) and /philosophy ----------
 * The product is the picture: real Cove screens (synthetic data) in device frames, on a soft off-white page with
 * sea-glass washes, alternating with ink sections. Apple-system type, bold short headlines, one ink button. */
.home {
  --h-bg: #f6f8f7;
  --h-band: #eef3f1;
  --h-ink: #0d1c1f;
  --h-text: #142120;
  --h-muted: #5d6b69;
  --h-line: rgba(13, 28, 31, 0.08);
  --h-dark: #0a1416;
  --h-dark-text: #e9f1ee;
  --h-dark-muted: #94a6a2;
  --h-ease: cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 100vh; min-height: 100dvh;
  background: var(--h-bg);
  color: var(--h-text);
  font-family: var(--sans);
  overflow-x: clip;
}
/* every section keeps its content in one 68rem column through padding, so no element rule can pull it to the edge */
.h-main > section { position: relative; padding: 5rem max(1.25rem, env(safe-area-inset-left), calc((100% - 68rem) / 2)); }
.home h1, .home h2 { font-family: var(--display); color: var(--h-ink); text-wrap: balance; }
.home h1 { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.04em; }
.home h2 { font-size: clamp(2rem, 1.45rem + 2.2vw, 3rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; }
.home h3 { font: 650 var(--text-body)/1.35 var(--sans); color: var(--h-ink); letter-spacing: -0.01em; }
.h-lead { margin-top: 1.1rem; max-width: 34rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.5; color: var(--h-muted); text-wrap: pretty; }
.h-sub { margin-top: 0.9rem; max-width: 34rem; font-size: var(--text-lg); line-height: 1.55; color: var(--h-muted); text-wrap: pretty; }
.home svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* nav: a slim translucent bar that floats over the page */
.h-nav {
  position: sticky; top: max(0.6rem, env(safe-area-inset-top)); z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: min(calc(100% - 1.5rem), 42rem); margin: max(0.6rem, env(safe-area-inset-top)) auto 0; padding: 0.4rem 0.45rem 0.4rem 0.6rem;
  border-radius: 14px; background: rgba(255, 255, 255, 0.72); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 0 0 1px var(--h-line), 0 8px 24px -14px rgba(13, 28, 31, 0.28);
}
.h-brand { display: inline-flex; align-items: center; gap: 0.55rem; font: 650 var(--text-body)/1 var(--display); letter-spacing: -0.01em; color: var(--h-ink); text-decoration: none; border-radius: 8px; }
.h-brand img { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 0.5px rgba(13, 28, 31, 0.12); }
.h-links { display: flex; align-items: center; gap: 0.25rem; }
.h-links > a:not(.h-btn) { display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.75rem; border-radius: 8px; font-size: var(--text-md); font-weight: 550; color: var(--h-muted); text-decoration: none; transition: color 160ms var(--h-ease), background-color 160ms var(--h-ease); }
.h-links > a:not(.h-btn):hover, .h-links > a[aria-current="page"] { color: var(--h-ink); background: rgba(13, 28, 31, 0.05); }

/* the one button: ink, softly lit; light on ink sections */
.h-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.6rem; border-radius: 12px; background: var(--h-ink); color: #fff; font: 600 var(--text-body)/1 var(--sans); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(13, 28, 31, 0.2), 0 10px 22px -12px rgba(13, 28, 31, 0.6); transition: background-color 160ms var(--h-ease), transform 140ms var(--h-ease); touch-action: manipulation; }
.h-btn:hover { background: #1b3337; }
.h-btn:active { transform: scale(0.98); }
.h-btn-sm { min-height: 36px; padding: 0 0.95rem; border-radius: 9px; font-size: var(--text-md); }
.h-btn-light { background: #fff; color: var(--h-ink); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6); }
.h-btn-quiet { background: rgba(255, 255, 255, 0.8); color: var(--h-ink); box-shadow: 0 0 0 1px rgba(13, 28, 31, 0.14), 0 6px 16px -10px rgba(13, 28, 31, 0.35); }
.h-btn-quiet:hover { background: #fff; }
/* the App Store, not yet: an announcement, not a link, until the apps are live */
.h-store { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 50px; margin: 0; padding: 0 1.2rem 0 0.95rem; border-radius: 12px; background: #000; color: #fff; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.6); cursor: default; }
.home .h-store svg { width: 26px; height: 26px; stroke-width: 1.5; }
.h-store span { display: grid; text-align: left; font: 600 1.25rem/1 var(--display); letter-spacing: -0.02em; }
.h-store small { margin-bottom: 2px; font: 500 0.6875rem/1.2 var(--sans); letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.72); }
.h-dark .h-store { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); }
.h-btn-light:hover { background: #e8f3ef; }

/* hero */
.h-main > .h-hero { padding-top: 3.5rem; padding-bottom: 5rem; }
.h-hero { text-align: center; overflow: clip;
  background:
    radial-gradient(42rem 26rem at 8% 0%, rgba(150, 226, 205, 0.42), transparent 70%),
    radial-gradient(40rem 28rem at 100% 30%, rgba(176, 210, 230, 0.36), transparent 70%),
    linear-gradient(180deg, var(--h-bg), #fbfcfb 60%, var(--h-bg));
}
.h-hero > *, .h-final > * { margin-inline: auto; }
.h-appicon { display: block; width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 0 0 0.5px rgba(13, 28, 31, 0.14), 0 12px 28px -12px rgba(13, 28, 31, 0.5); }
.h-badge { display: inline-flex; align-items: center; gap: 0.2rem; margin-top: 1.25rem; padding: 0.38rem 0.55rem 0.38rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 1px var(--h-line); font-size: var(--text-sm); font-weight: 550; color: var(--h-muted); text-decoration: none; transition: color 160ms var(--h-ease), box-shadow 160ms var(--h-ease); }
.h-badge:hover { color: var(--h-ink); box-shadow: 0 0 0 1px rgba(13, 28, 31, 0.16); }
button.h-badge { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.home h2[tabindex="-1"]:focus { outline: none; }
.i-arrow { width: 15px; height: 15px; stroke-width: 2; }
.h-hero h1 { margin-top: 1rem; max-width: 22ch; font-size: clamp(2.3rem, 1.3rem + 3.4vw, 3.75rem); }
.h-hero .h-lead { margin-top: 1rem; }
.h-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.7rem; margin-top: 1.9rem; }
.h-note { margin-top: 0.8rem; font-size: var(--text-sm); color: var(--h-muted); }
/* on phones the top bar has no room for Philosophies, so a quiet link sits under the hero instead */
.h-hero-link { display: none; margin-top: 1.1rem; font-size: var(--text-sm); }
.h-hero-link a { display: inline-flex; align-items: center; gap: 0.15rem; min-height: 44px; font-weight: 600; color: var(--accent-strong); text-decoration: none; }
.h-hero-link a:hover { text-decoration: underline; text-underline-offset: 3px; }
.h-final-stores { margin-top: 1.5rem; }
.h-links > a, .h-links > button, .h-brand { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 39.99rem) { .h-links > a.h-link-wide { display: none; } .h-hero-link { display: block; } }
@media (max-width: 22.49rem) { .h-brand > span { display: none; } }
#landing-status { display: grid; gap: 0.5rem; justify-items: center; margin-top: 1rem; }
#landing-status:empty { display: none; }

/* the stage: the real Today on a computer, with the phone in front */
.h-stage { position: relative; margin-top: 3.5rem; max-width: 62rem; padding: 0 0 3rem; }
.h-stage .device-phone { position: absolute; right: -2.5%; bottom: 0; width: 23%; }

/* floating objects from the product, around the hero on wide screens */
.h-float { display: none; }
.h-chip { position: absolute; z-index: 1; display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.7rem 0.95rem; border-radius: 14px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px var(--h-line), 0 14px 30px -16px rgba(13, 28, 31, 0.4); font-size: var(--text-md); font-weight: 560; color: var(--h-ink); white-space: nowrap; }
.h-chip time { margin-left: 0.6rem; font-variant-numeric: tabular-nums; color: var(--h-muted); font-weight: 500; }
.chip-ring { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #9fb0ad; flex-shrink: 0; }
.h-chip.is-done > span:not(.chip-ring) { color: var(--h-muted); text-decoration: line-through; text-decoration-color: rgba(93, 107, 105, 0.6); }
.h-chip.is-done .chip-ring { box-shadow: none; background: var(--accent); position: relative; }
.h-chip.is-done .chip-ring::after { content: ""; position: absolute; left: 6.5px; top: 3.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.8px 1.8px 0; rotate: 45deg; }
.chip-cal, .chip-book { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; }
.chip-cal { background: linear-gradient(180deg, #e8f6f1 0 30%, #fff 30%); box-shadow: inset 0 0 0 1.5px #0c7462; }
.chip-book { background: var(--h-ink); box-shadow: inset -4px 0 0 #1f4943; }

/* device frames */
.device-window { overflow: hidden; border-radius: 14px; background: #f1f5f3; box-shadow: 0 0 0 1px rgba(13, 28, 31, 0.1), 0 2px 4px rgba(13, 28, 31, 0.05), 0 30px 70px -28px rgba(13, 28, 31, 0.45); }
.device-window img, .device-screen img { display: block; width: 100%; height: auto; }
.device-phone { position: relative; padding: clamp(6px, 0.55rem, 9px); border-radius: 15.5% / 7.2%; background: linear-gradient(150deg, #3a4244, #121819 40%, #262d2f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(13, 28, 31, 0.3), 0 40px 70px -30px rgba(13, 28, 31, 0.6), 0 16px 30px -16px rgba(13, 28, 31, 0.35); }
.device-screen { position: relative; overflow: hidden; border-radius: 12.6% / 5.9%; background: var(--paper, #f1f5f3); container-type: inline-size; }
.device-screen::before { content: ""; position: absolute; z-index: 2; top: 2.6cqi; left: 50%; translate: -50% 0; width: 31cqi; height: 9cqi; border-radius: 9cqi; background: #000; }
.device-status { display: flex; align-items: center; justify-content: space-between; aspect-ratio: 390 / 47; padding: 0 7cqi 0 9cqi; background: var(--paper, #f1f5f3); color: #0d1c1f; }
.device-time { font: 650 4.3cqi/1 var(--display); letter-spacing: -0.01em; }
.home .device-icons { width: 18cqi; height: auto; fill: currentColor; stroke: none; }
.home .device-icons .bat-shell { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.45; }
.device-phone.is-dark .device-status, .device-phone.is-dark .device-screen { background: #0d1c1f; color: #f1f5f3; }

/* feature sections */
.h-points { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.1rem; max-width: 30rem; }
.h-points li { font-size: var(--text-body); line-height: 1.55; color: var(--h-muted); }
.h-points strong { color: var(--h-ink); font-weight: 650; }
.h-split { display: grid; gap: 3rem; align-items: center; }
.h-split .h-visual { position: relative; justify-self: center; width: min(82vw, 20rem); }
.h-tint { background: linear-gradient(180deg, var(--h-band), var(--h-bg)); }
.h-wide .h-visual { position: relative; margin-top: 3rem; }
.h-wide .device-window { display: none; }
.h-wide .device-phone { width: min(78vw, 19rem); margin-inline: auto; }

/* a notification arriving over the reminders phone */
.h-notif { position: absolute; z-index: 3; top: 9%; left: -9%; right: -9%; display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.75rem 0.85rem; border-radius: 20px; background: rgba(250, 252, 251, 0.86); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); box-shadow: 0 0 0 0.5px rgba(13, 28, 31, 0.12), 0 22px 40px -18px rgba(13, 28, 31, 0.5); text-align: left; }
.h-notif img { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }
.h-notif-text { min-width: 0; }
.h-notif-head { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--h-muted); }
.h-notif-head span:first-child { font-weight: 650; color: var(--h-ink); letter-spacing: 0.01em; }
.h-notif-title { margin-top: 0.1rem; font-size: var(--text-md); font-weight: 650; color: var(--h-ink); line-height: 1.3; }
.h-notif-body { font-size: var(--text-md); color: var(--h-muted); line-height: 1.3; }

/* ink sections */
.h-dark { background: radial-gradient(50rem 26rem at 85% 0%, rgba(150, 226, 205, 0.12), transparent 70%), radial-gradient(40rem 26rem at 0% 100%, rgba(150, 226, 205, 0.07), transparent 70%), var(--h-dark); color: var(--h-dark-text); }
.h-dark h2, .h-dark h3, .h-dark .h-points strong { color: #fff; }
.h-dark .h-sub, .h-dark .h-points li { color: var(--h-dark-muted); }
.h-dark .device-window { background: #0d1c1f; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -30px rgba(0, 0, 0, 0.8); }

/* health: no picture yet */
.h-main > .h-health { padding-block: 4.5rem; border-top: 1px solid var(--h-line); }

/* one place instead of four: the same four kinds of record as app icons. Without Cove they are separate grey apps,
   slightly askew, reached by a solid line when linked and a red dotted line with a cross when not. With Cove they sit
   together in one ink "folder" with a single line to the assistant, and gather into place the first time they are seen. */
.layer-compare { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.dg { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 1.5rem 1.25rem 1.6rem; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--h-line), 0 30px 60px -40px rgba(13, 28, 31, 0.45); }
.dg-before { background: linear-gradient(180deg, #f3f6f5, #eef2f1); box-shadow: 0 0 0 1px var(--h-line); }
.dg-title { align-self: flex-start; margin-bottom: 1.5rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: rgba(13, 28, 31, 0.06); font: 650 var(--text-sm)/1.2 var(--sans); color: var(--h-muted); }
.dg-cove .dg-title { background: var(--accent-soft); color: var(--accent-strong); }
.dg-ai { display: inline-flex; align-items: center; gap: 0.5rem; margin: auto 0 0; padding: 0.6rem 1.05rem 0.6rem 0.8rem; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(13, 28, 31, 0.1), 0 8px 18px -12px rgba(13, 28, 31, 0.4); font-size: var(--text-md); font-weight: 600; color: var(--h-ink); white-space: nowrap; }
.dg-ai svg { width: 18px; height: 18px; fill: none; stroke: var(--h-ink); stroke-width: 1.8; stroke-linejoin: round; }
.dg-fan { display: block; width: 100%; height: 3.25rem; fill: none; stroke: #a9b8b5; stroke-width: 1.75; stroke-linecap: round; }
.dg-fan path { vector-effect: non-scaling-stroke; }
.dg-fan .is-off { stroke: rgba(176, 57, 45, 0.62); stroke-dasharray: 2 6; }
.dg-fan-wrap { position: relative; width: 100%; }
/* each cross sits at t = 0.7 of its cubic curve (x 82.4, 239.2 and 317.6 of 400 for health, reminders and journal;
   y 41.6 of 64), clear of the neighbouring lines */
.dg-x { position: absolute; top: 65%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--danger-line), 0 4px 10px -6px rgba(176, 57, 45, 0.55); }
.dg-x::before, .dg-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.75px; margin: -0.875px 0 0 -5px; border-radius: 2px; background: var(--danger); rotate: 45deg; }
.dg-x::after { rotate: -45deg; }
.dg-x-health { left: 20.6%; }
.dg-x-reminders { left: 59.8%; }
.dg-x-journal { left: 79.4%; }
.dg-icons { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; width: 100%; margin: 0; padding: 0; }
.dg-icons li { display: grid; justify-items: center; align-content: start; gap: 0.55rem; text-align: center; }
.dg-app { display: grid; place-items: center; width: clamp(52px, 14vw, 64px); aspect-ratio: 1; border-radius: 28%; }
.dg-icon { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dg-label { font-size: var(--text-xs); font-weight: 600; line-height: 1.3; color: var(--h-ink); text-wrap: balance; overflow-wrap: normal; }
.dg-before .dg-app { background: linear-gradient(180deg, #fff, #f1f4f3); box-shadow: 0 0 0 1px rgba(13, 28, 31, 0.08), 0 8px 16px -10px rgba(13, 28, 31, 0.35); color: #7f8f8c; }
.dg-before li:nth-child(1) .dg-app { rotate: -5deg; } .dg-before li:nth-child(2) .dg-app { rotate: 3deg; }
.dg-before li:nth-child(3) .dg-app { rotate: -2deg; } .dg-before li:nth-child(4) .dg-app { rotate: 5deg; }
.dg-before .dg-label { color: var(--h-muted); }
.dg-wire { display: block; width: 2px; height: 2rem; border-radius: 2px; background: var(--accent); transform-origin: top; }
.dg-folder { width: 100%; padding: 1rem 0.75rem 1.1rem; border-radius: 24px; background: radial-gradient(22rem 10rem at 85% 0%, rgba(150, 226, 205, 0.18), transparent 70%), var(--h-dark); box-shadow: 0 24px 44px -26px rgba(10, 20, 22, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.dg-folder-name { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 0 1rem; font: 650 var(--text-body)/1 var(--display); color: #fff; }
.dg-folder-name img { width: 24px; height: 24px; border-radius: 7px; }
.dg-cove .dg-app { background: linear-gradient(180deg, rgba(150, 226, 205, 0.24), rgba(150, 226, 205, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(150, 226, 205, 0.16); color: var(--seaglass); }
.dg-cove .dg-label { color: #fff; }
.dg-foot { margin: auto 0 0; padding-top: 1.5rem; max-width: 22rem; text-align: center; font-size: var(--text-md); line-height: 1.5; color: var(--h-muted); text-wrap: balance; }
@media (min-width: 48rem) {
  .layer-compare { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .dg { padding: 1.75rem 1.5rem 2rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .layer-compare.is-live:not(.is-seen) .dg-cove .dg-app { opacity: 0; transform: translateY(14px) rotate(-8deg); }
  .layer-compare.is-live:not(.is-seen) .dg-cove .dg-wire { transform: scaleY(0); }
  .layer-compare.is-seen .dg-cove .dg-app { transition: opacity 420ms var(--h-ease), transform 620ms var(--h-ease); }
  .layer-compare.is-seen .dg-cove li:nth-child(2) .dg-app { transition-delay: 90ms; }
  .layer-compare.is-seen .dg-cove li:nth-child(3) .dg-app { transition-delay: 180ms; }
  .layer-compare.is-seen .dg-cove li:nth-child(4) .dg-app { transition-delay: 270ms; }
  .layer-compare.is-seen .dg-cove .dg-wire { transition: transform 420ms var(--h-ease) 420ms; }
}

/* what you can ask: on wide screens one ChatGPT window stays pinned while the captions scroll past it, and each
   caption that reaches the middle of the screen brings its conversation in (web/src/home.ts). On phones each caption
   is followed by its own conversation card. */
.h-uses > .h-sub { margin-top: 0.6rem; }
.uses { margin-top: 2.5rem; }
.use + .use { margin-top: 3.5rem; }
.use-copy h3 { font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--display); letter-spacing: -0.025em; color: var(--h-ink); }
.use-copy p { margin-top: 0.6rem; max-width: 28rem; font-size: var(--text-lg); line-height: 1.55; color: var(--h-muted); text-wrap: pretty; }
.use-chat { margin-top: 1.5rem; border-radius: 22px; background: #fff; color: var(--h-text); box-shadow: 0 0 0 1px var(--h-line), 0 2px 4px rgba(13, 28, 31, 0.04), 0 30px 60px -34px rgba(13, 28, 31, 0.45); overflow: hidden; }
.use-frame { display: none; }
.ai-thread { display: grid; align-content: start; gap: 0.85rem; padding: 1.3rem 1.15rem 1.3rem; }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--h-line); }
.ai-name { font: 650 var(--text-body)/1 var(--display); color: var(--h-ink); }
.ai-connected { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem 0.3rem 0.35rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--text-xs); font-weight: 650; }
.ai-connected img, .ai-tool img { width: 16px; height: 16px; border-radius: 4px; }
.ai-msg { margin: 0; font-size: var(--text-body); line-height: 1.55; }
.ai-user { justify-self: end; max-width: 82%; padding: 0.6rem 0.9rem; border-radius: 18px; background: #eef2f1; color: var(--h-ink); }
.ai-bot { color: var(--h-text); }
.ai-bot p + p { margin-top: 0.5rem; }
.ai-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.ai-tool { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem 0.3rem 0.4rem; border-radius: 8px; background: #f4f7f6; box-shadow: inset 0 0 0 1px var(--h-line); font-size: var(--text-sm); font-weight: 550; color: var(--h-muted); }
.ai-quote { margin: 0.6rem 0 0; padding: 0.8rem 1rem; border-radius: 12px; background: #f4f7f6; font: italic 400 var(--text-body)/1.5 var(--serif); color: var(--h-ink); }
.ai-quote + p { margin-top: 0.6rem; }
.ai-list { list-style: none; margin: 0.6rem 0; padding: 0.25rem 0; border-radius: 12px; background: #f4f7f6; }
.ai-list li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.75rem; padding: 0.42rem 1rem; color: var(--h-ink); }
.ai-list li + li { border-top: 1px solid var(--h-line); }
.ai-state { font-size: var(--text-xs); font-weight: 650; color: var(--h-muted); }
.ai-agenda li { grid-template-columns: 3.4rem 1fr auto; color: var(--h-muted); }
.ai-agenda time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--h-ink); }
.ai-agenda li:has(.ai-added) > span:first-of-type { color: var(--h-ink); font-weight: 560; }
.ai-bars { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; height: 9.5rem; margin: 0.6rem 0; padding: 1rem 1rem 0.7rem; border-radius: 12px; background: #f4f7f6; }
.ai-bars li { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 0.45rem; min-height: 0; }
.ai-bar { align-self: end; width: min(100%, 1.6rem); border-radius: 6px 6px 3px 3px; background: #b9d3cc; }
/* hours slept against a 9-hour scale; Tuesday, the shortest night, is the one the reply names */
.ai-bars li:nth-child(1) .ai-bar { height: 77%; } .ai-bars li:nth-child(2) .ai-bar { height: 65%; background: var(--accent); }
.ai-bars li:nth-child(3) .ai-bar { height: 72%; } .ai-bars li:nth-child(4) .ai-bar { height: 79%; }
.ai-bars li:nth-child(5) .ai-bar { height: 70%; } .ai-bars li:nth-child(6) .ai-bar { height: 81%; } .ai-bars li:nth-child(7) .ai-bar { height: 74%; }
.ai-day { font-size: var(--text-xs); font-weight: 600; color: var(--h-muted); }
.ai-card { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.6rem; padding: 0.8rem 1rem; border-radius: 12px; background: #f4f7f6; }
.ai-card .chip-ring { flex-shrink: 0; }
.ai-bot .ai-card p { margin: 0; }
.ai-card-title { font-weight: 600; color: var(--h-ink); }
.ai-card-sub { font-size: var(--text-sm); color: var(--h-muted); }
.ai-added { font-size: var(--text-xs); font-weight: 650; color: var(--accent-strong); }
.ai-composer { display: flex; align-items: center; justify-content: space-between; margin: 0 1rem 1rem; padding: 0 0.45rem 0 1.1rem; min-height: 48px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(13, 28, 31, 0.12), 0 4px 12px -8px rgba(13, 28, 31, 0.25); font-size: var(--text-body); color: #8a9694; }
.ai-composer svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--h-ink); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 64rem) {
  .uses { --chat-h: min(40rem, calc(100vh - 7rem)); --chat-top: max(5.5rem, calc(50vh - var(--chat-h) / 2)); --head-h: 3.3rem;
    display: grid; grid-template-columns: minmax(0, 1fr) 34rem; grid-template-rows: repeat(5, auto); column-gap: 5rem; margin-top: 0; }
  .use { display: contents; }
  .use + .use { margin-top: 0; }
  .use-copy { grid-column: 1; display: flex; flex-direction: column; justify-content: center; min-height: 78vh; opacity: 0.28; }
  .use-1 .use-copy { grid-row: 1; } .use-2 .use-copy { grid-row: 2; } .use-3 .use-copy { grid-row: 3; } .use-4 .use-copy { grid-row: 4; } .use-5 .use-copy { grid-row: 5; }
  .use.is-active .use-copy { opacity: 1; }
  .use-frame, .use-chat { grid-column: 2; grid-row: 1 / -1; align-self: start; position: sticky; }
  .use-frame { display: flex; flex-direction: column; justify-content: space-between; top: var(--chat-top); height: var(--chat-h); border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--h-line), 0 2px 4px rgba(13, 28, 31, 0.04), 0 40px 80px -36px rgba(13, 28, 31, 0.45); }
  .use-chat { z-index: 1; top: calc(var(--chat-top) + var(--head-h)); height: calc(var(--chat-h) - var(--head-h)); margin-top: var(--head-h); padding-bottom: 4.5rem; border-radius: 0; background: none; box-shadow: none; visibility: hidden; opacity: 0; }
  .use-chat > .ai-head { display: none; }
  .use.is-active .use-chat { visibility: visible; opacity: 1; }
}
/* phones: each card's messages flow in the first time it scrolls into view */
@media (max-width: 63.99rem) and (prefers-reduced-motion: no-preference) {
  .uses.is-live .use:not(.is-seen) .ai-thread > * { opacity: 0; }
  .use.is-seen .ai-thread > * { animation: ai-in 460ms var(--h-ease) both; }
  .use.is-seen .ai-thread > :nth-child(2) { animation-delay: 280ms; }
  .use.is-seen .ai-thread > :nth-child(3) { animation-delay: 620ms; }
}
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .use-copy { transition: opacity 360ms var(--h-ease); }
  .use-chat { transition: opacity 260ms var(--h-ease), visibility 0s linear 260ms; }
  .use.is-active .use-chat { transition: opacity 260ms var(--h-ease), visibility 0s; }
  .use.is-active .ai-thread > * { animation: ai-in 460ms var(--h-ease) both; }
  .use.is-active .ai-thread > :nth-child(2) { animation-delay: 280ms; }
  .use.is-active .ai-thread > :nth-child(3) { animation-delay: 620ms; }
}
@keyframes ai-in { from { opacity: 0; transform: translateY(8px); } }

/* adding Cove in ChatGPT: one connector card on ink */
.h-connect { text-align: center; }
.h-connect > * { margin-inline: auto; }
.h-connect .h-cta { margin-top: 2.25rem; }
.h-connect-alt { margin: 1rem 0 0; font-size: var(--text-sm); }
.h-connect-alt a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, 0.78); font-weight: 600; text-underline-offset: 3px; }
.h-connect-alt a:hover { color: #fff; }
.connect-card { margin-top: 2.75rem; max-width: 24rem; border-radius: 22px; background: #fff; color: var(--h-text); text-align: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.85); overflow: hidden; }
.connect-card .ai-head { justify-content: flex-start; }
.cc-crumb { font-size: var(--text-md); color: var(--h-muted); }
.cc-crumb::before { content: "/"; margin-right: 0.6rem; color: rgba(13, 28, 31, 0.25); }
.cc-body { display: grid; justify-items: center; padding: 2.25rem 1.5rem 2rem; }
.cc-icon { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 0 0 0.5px rgba(13, 28, 31, 0.14), 0 10px 22px -12px rgba(13, 28, 31, 0.5); }
.cc-name { margin: 1rem 0 0; font: 650 var(--text-xl)/1.2 var(--display); color: var(--h-ink); }
.cc-desc { margin: 0.35rem 0 0; font-size: var(--text-md); color: var(--h-muted); }
.cc-btn { display: grid; margin: 1.5rem 0 0; min-width: 11rem; min-height: 44px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font: 650 var(--text-md)/1 var(--sans); transition: background-color 320ms var(--h-ease), color 320ms var(--h-ease); }
.cc-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; transition: opacity 260ms var(--h-ease), transform 320ms var(--h-ease); }
.cc-connect { opacity: 0; transform: translateY(-6px); }
.cc-check { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); position: relative; }
.cc-check::after { content: ""; position: absolute; left: 5.5px; top: 3.5px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); }
.connect-card.is-pending .cc-btn { background: var(--h-ink); color: #fff; }
.connect-card.is-pending .cc-connect { opacity: 1; transform: none; }
.connect-card.is-pending .cc-done { opacity: 0; transform: translateY(6px); }
.h-dark a:not(.h-btn) { color: var(--seaglass); text-underline-offset: 3px; }

/* the app */
.h-app { text-align: center; }
.h-app > * { margin-inline: auto; }

/* promises */
.h-main > .h-beliefs { padding-top: 6rem; }
.belief-grid { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 2.25rem 2.5rem; }
.belief-grid li p { margin-top: 0.35rem; font-size: var(--text-body); line-height: 1.55; color: var(--h-muted); }
.belief-grid h3 { margin-top: 1rem; }
.belief-grid a { color: var(--accent-strong); font-weight: 600; text-underline-offset: 3px; }
.h-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(180deg, #fff, #f1f6f4); box-shadow: 0 0 0 1px var(--h-line), 0 6px 14px -8px rgba(13, 28, 31, 0.35), inset 0 1px 0 #fff; color: var(--accent-strong); }
.h-tile svg { width: 22px; height: 22px; }

/* themes: the same Today screen in every theme, fanned out like a hand of cards. Each phone's place comes from its
 * position in the list (--i) relative to the middle (--mid), so adding a theme means one more list item and image. */
.h-themes { text-align: center; }
.h-themes > .h-sub { margin-inline: auto; max-width: 36rem; }
/* the fan runs to the edges of the window, which clip the outer phones on narrow screens */
.theme-fan { position: relative; margin: 3.5rem calc(50% - 50vw) 0; overflow-x: clip; }
.fan-row { --pw: 11.5rem; --step: 4.7rem; --tilt: 4deg; --drop: 0.35rem; --mid: 3; position: relative; height: 27rem; margin: 0; padding: 0; list-style: none; }
.fan-row:has(> :nth-child(8)) { --mid: 3.5; }
.fan-row:has(> :nth-child(9)) { --mid: 4; }
.fan-phone {
  --d: calc(var(--i) - var(--mid));
  position: absolute; top: 0; left: 50%; width: var(--pw); margin-left: calc(var(--pw) / -2);
  z-index: calc(10 - max(var(--d), -1 * var(--d)));
  transform: translateX(calc(var(--d) * var(--step))) translateY(calc(var(--d) * var(--d) * var(--drop))) rotate(calc(var(--d) * var(--tilt))) scale(calc(1 - max(var(--d), -1 * var(--d)) * 0.035));
}
.fan-phone:nth-child(1) { --i: 0; } .fan-phone:nth-child(2) { --i: 1; } .fan-phone:nth-child(3) { --i: 2; }
.fan-phone:nth-child(4) { --i: 3; } .fan-phone:nth-child(5) { --i: 4; } .fan-phone:nth-child(6) { --i: 5; }
.fan-phone:nth-child(7) { --i: 6; } .fan-phone:nth-child(8) { --i: 7; } .fan-phone:nth-child(9) { --i: 8; }
/* the status bar takes each theme's own paper, sampled from the top of its screen */
.home .is-seaglass { --paper: #eff5f2; } .home .is-rose { --paper: #faf1f2; } .home .is-lilac { --paper: #f5f2fa; } .home .is-apricot { --paper: #f9f2ea; }
.home .is-sage { --paper: #f3f5ed; } .home .is-harbour { --paper: #eef5fa; } .home .is-graphite { --paper: #f2f3f5; } .home .is-cream { --paper: #f5f3ee; }
.home .is-lockin { --paper: #f3f4f4; }
/* the fan opens once, the first time it comes into view; without script or with reduced motion it is simply open */
.theme-fan.is-live .fan-phone { transition: transform 1100ms var(--h-ease); transition-delay: calc(max(var(--d), -1 * var(--d)) * 50ms); }
.theme-fan.is-live:not(.is-seen) .fan-phone { transform: translateX(calc(var(--d) * var(--step) * 0.16)) translateY(1.5rem) rotate(calc(var(--d) * 1deg)) scale(0.96); }
.theme-legend { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 0.7rem 1rem; margin: 2.5rem auto 0; padding: 0; list-style: none; }
.theme-legend li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-sm); font-weight: 600; color: var(--h-ink); white-space: nowrap; }
.theme-legend img { width: 24px; height: 24px; border-radius: 6px; box-shadow: 0 0 0 0.5px rgba(13, 28, 31, 0.16), 0 5px 12px -6px rgba(13, 28, 31, 0.5); }
.theme-detail { display: grid; gap: 2rem; margin-top: 5rem; text-align: left; }
.home .theme-gallery h3, .home .theme-detail h3 { font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.theme-detail .h-points { margin-top: 1.5rem; }
/* each palette's own scene, cropped from its real Today card; the switch crossfades drawn and painted */
.theme-gallery { margin-top: 5.5rem; }
.theme-gallery > .h-sub { margin-inline: auto; max-width: 36rem; }
.gal-switch { display: inline-flex; gap: 2px; margin-top: 1.6rem; padding: 3px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--h-line), 0 8px 20px -14px rgba(13, 28, 31, 0.45); }
.gal-switch button { min-height: 38px; padding: 0 1.15rem; border: 0; border-radius: 999px; background: transparent; font: 600 var(--text-md)/1 var(--sans); color: var(--h-muted); cursor: pointer; transition: background 180ms var(--h-ease), color 180ms var(--h-ease); }
.gal-switch button:hover { color: var(--h-ink); }
.gal-switch button[aria-pressed="true"] { background: var(--h-ink); color: #fff; }
.gal-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-gallery:not(.is-live) .gal-switch { display: none; }
.gal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 0.75rem; margin: 2.25rem 0 0; padding: 0; list-style: none; text-align: left; }
.gal-tile { position: relative; display: block; overflow: hidden; aspect-ratio: 340 / 152; border-radius: 14px; background: var(--h-dark); box-shadow: 0 0 0 1px rgba(13, 28, 31, 0.1), 0 18px 36px -24px rgba(13, 28, 31, 0.6); }
.gal-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 240ms var(--h-ease), visibility 0s; }
.theme-gallery:not([data-style="drawn"]) .gal-drawn, .theme-gallery[data-style="drawn"] .gal-painted { opacity: 0; visibility: hidden; transition: opacity 240ms var(--h-ease), visibility 0s linear 240ms; }
.gal-name { display: block; margin-top: 0.55rem; font-size: var(--text-md); font-weight: 600; color: var(--h-ink); }
.gal-adapt { margin-top: 3.5rem; }
.home .gal-adapt h4 { font: 650 var(--text-lg)/1.3 var(--sans); letter-spacing: -0.01em; color: var(--h-ink); }
.gal-adapt .gal-grid { margin-top: 1.25rem; }
@media (prefers-reduced-motion: reduce) { .gal-tile img, .gal-switch button { transition: none !important; } }
.theme-stage { margin-top: 0; padding-bottom: 2rem; }
.theme-stage .theme-window { background: #faf1f2; }
.h-badge .badge-icons { display: inline-flex; margin-right: 0.5rem; }
.badge-icons img { width: 20px; height: 20px; border-radius: 6px; box-shadow: 0 0 0 1.5px #fff; }
.badge-icons img + img { margin-left: -6px; }
@media (max-width: 22.49rem) { .h-badge .badge-icons { display: none; } }

/* plans: one free plan, its features in four groups */
.h-plans { background: var(--h-band); }
.plan-card { margin-top: 2.5rem; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--h-line), 0 24px 50px -36px rgba(13, 28, 31, 0.4); }
.plan-groups { display: grid; gap: 1.75rem 2.5rem; padding: 1.6rem 1.4rem 1.8rem; }
.plan-group h3 { font-size: var(--text-md); font-weight: 650; color: var(--h-muted); }
.plan-list { display: grid; gap: 0.7rem; margin: 0.85rem 0 0; padding: 0; list-style: none; }
.plan-list li { position: relative; padding-left: 1.75rem; font-size: var(--text-body); line-height: 1.45; color: var(--h-text); }
.plan-list li::before { content: ""; position: absolute; left: 0.35rem; top: 0.22em; width: 6px; height: 12px; border: solid var(--accent); border-width: 0 2.2px 2.2px 0; rotate: 45deg; }

/* final call and footer */
.h-final { text-align: center; }
.h-main > .h-final { padding-block: 6rem; }
.h-final img { display: block; width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 16px 30px -12px rgba(0, 0, 0, 0.7); }
.h-final h2 { margin-top: 1.5rem; }
.h-foot { display: grid; gap: 0.75rem; padding: 2rem max(1.25rem, env(safe-area-inset-left), calc((100% - 68rem) / 2)) max(2rem, env(safe-area-inset-bottom)); background: #071012; color: var(--h-dark-muted); font-size: var(--text-md); }
.h-foot-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 650; color: #fff; }
.h-foot-brand img { border-radius: 5px; }
.h-foot code { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.1); color: var(--h-dark-text); }
.h-foot-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.h-foot-links a { color: var(--h-dark-muted); text-decoration: none; }
.h-foot-links a:hover { color: #fff; }
.h-foot code { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); color: var(--h-dark-text); }

/* /philosophy */
.h-main > .essay-hero { padding-bottom: 4rem; }
.essay { list-style: none; margin: 0 auto; padding: 0 max(1.25rem, env(safe-area-inset-left)) 2rem; max-width: 44rem; display: grid; gap: 3.25rem; }
.essay li { display: grid; grid-template-columns: 44px 1fr; gap: 1.25rem; }
.essay h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem); letter-spacing: -0.03em; }
.essay p { margin-top: 0.8rem; font: var(--text-lg)/1.7 var(--serif); color: #33413f; }
.essay-sign { max-width: 44rem; margin: 1rem auto 5rem; padding: 0 max(1.25rem, env(safe-area-inset-left)) 0 calc(max(1.25rem, env(safe-area-inset-left)) + 44px + 1.25rem); font: italic var(--text-lg)/1.5 var(--serif); color: var(--h-muted); }

/* motion: a slow drift for the floating objects, nothing that holds content back */
@media (prefers-reduced-motion: no-preference) {
  .h-chip { animation: h-drift 7s ease-in-out infinite alternate; }
  .chip-b { animation-delay: -2s; } .chip-c { animation-delay: -4s; } .chip-d { animation-delay: -5.5s; }
  @keyframes h-drift { to { translate: 0 -8px; } }
}

@media (min-width: 48rem) {
  .h-main > section { padding-block: 7rem; }
  .h-split { grid-template-columns: 1.05fr 1fr; gap: 4rem; }
  .h-split.is-flipped .h-copy { order: 2; }
  .h-split .h-visual { width: 20rem; }
  .fan-row { --pw: 15.5rem; --step: 8.3rem; --tilt: 3.5deg; --drop: 0.42rem; height: 36rem; }
  .gal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 1.1rem; }
  .gal-tile { border-radius: 16px; }
  .theme-legend { display: flex; flex-wrap: wrap; gap: 0.75rem 1.6rem; max-width: 40rem; margin-top: 3rem; }
  .theme-legend li { gap: 0.5rem; font-size: var(--text-body); }
  .theme-legend img { width: 28px; height: 28px; border-radius: 7px; }
  .theme-detail { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); gap: 4rem; align-items: center; margin-top: 6rem; }
  .plan-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 3rem; padding: 2.1rem 2.4rem 2.4rem; }
  .h-wide .device-window { display: block; }
  .h-wide .h-visual .device-phone { display: none; }
  .h-wide .h-copy { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; align-items: end; }
  .h-wide .h-copy .h-kicker, .h-wide .h-copy h2, .h-wide .h-copy .h-sub { grid-column: 1; }
  .h-wide .h-copy .h-points { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-top: 0; }
  .belief-grid { grid-template-columns: repeat(3, 1fr); }
  .h-foot { grid-template-columns: auto 1fr; align-items: center; }
  .h-foot-links { justify-content: flex-end; }
  .h-foot-note { grid-column: 1 / -1; }
}
@media (min-width: 80rem) {
  .h-float { display: block; position: absolute; inset: 0; pointer-events: none; }
  .chip-a { left: 6%; top: 15rem; rotate: -3deg; }
  .chip-b { left: 10%; top: 22rem; rotate: 2deg; }
  .chip-c { right: 6%; top: 13.5rem; rotate: 3deg; }
  .chip-d { right: 9%; top: 21rem; rotate: -2deg; }
}
@media (max-width: 47.99rem) {
  .h-stage .stage-window { display: none; }
  .h-stage { margin-top: 2.5rem; }
  .h-stage .device-phone { position: relative; right: auto; width: min(76vw, 18rem); margin-inline: auto; }
  .h-notif { left: -6%; right: -6%; }
  .essay li { grid-template-columns: 1fr; gap: 0.9rem; }
  .essay-sign { padding-left: max(1.25rem, env(safe-area-inset-left)); }
}
@media (prefers-reduced-motion: reduce) { .h-btn, .h-badge, .h-links > a { transition: none; } }

.noscript { max-width: 24rem; margin: 4rem auto; padding: 0 1.25rem; color: var(--text); }

/* ---------- layout ---------- */
.app { min-height: 100vh; min-height: 100dvh; }
.sidebar { display: none; }
.content { min-width: 0; overflow-x: clip; padding-bottom: calc(var(--tabbar-h) + max(10px, env(safe-area-inset-bottom, 0px)) + 2rem); }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 0.6rem;
  min-height: calc(3rem + env(safe-area-inset-top, 0px));
  padding: calc(0.35rem + env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right)) 0.35rem max(1rem, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.topbar-mark { display: flex; flex-shrink: 0; border-radius: var(--radius-sm); }
.topbar-mark img { width: 24px; height: 24px; border-radius: var(--radius-sm); box-shadow: 0 4px 10px -4px rgb(var(--shade-rgb) / 0.45); }
@media (max-width: 359px) { .topbar-mark { display: none; } }
/* Long titles wrap to a second line instead of disappearing behind an ellipsis. */
.topbar h1 { flex: 1; min-width: 0; font-family: var(--serif); font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.page-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
/* The header action stays small on every device; on touch an invisible margin keeps its tap area at 44px. */
.page-actions .btn { min-height: 32px; padding: 0 0.75rem; font-size: var(--text-sm); border-radius: var(--radius-sm); }
@media (pointer: coarse) { .page-actions .btn::after { content: ""; position: absolute; inset: -6px -3px; } }
.account-mini { display: inline-grid; place-items: center; width: var(--ctl); height: var(--ctl); border-radius: 50%; color: var(--muted); flex-shrink: 0; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.account-mini:hover { background: var(--surface); color: var(--text); }
.account-mini svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.account-mini[aria-current="page"] { color: var(--accent-strong); background: var(--accent-soft); }
#main { padding: 1rem max(1rem, env(safe-area-inset-right)) 0.75rem max(1rem, env(safe-area-inset-left)); max-width: var(--page); margin: 0 auto; }
/* One column that never grows past the screen: a wide child (a row of filter chips) scrolls inside it instead. */
.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.page-actions-inner { display: flex; gap: 0.5rem; }

/* Phones: the sections float in a deep-ink island above the home indicator. */
.tabbar {
  position: fixed; z-index: 25;
  left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) - 6px));
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px;
  padding: 4px; border-radius: calc(var(--radius-lg) + 2px);
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 18px 40px -12px rgb(var(--shade-rgb) / 0.55), 0 2px 6px rgb(var(--shade-rgb) / 0.2);
}
/* Tab labels are the one place below the type scale: six must fit across a 320px phone. */
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 46px; min-width: 0; color: var(--ink-muted); text-decoration: none; font-size: var(--text-xs); font-weight: 560; letter-spacing: 0; border-radius: var(--radius-lg); transition: color 160ms var(--ease), background-color 160ms var(--ease); }
.tabbar a span { max-width: 100%; padding: 0 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6875rem; }
/* On the narrowest phones "Reminders" is a few pixels wider than its tab: let it use the gap rather than lose letters. */
@media (max-width: 430px) { .tabbar { gap: 0; padding: 4px 2px; } .tabbar a span { padding: 0; font-size: 0.65rem; letter-spacing: -0.01em; } }
@media (max-width: 359px) { .tabbar a span { max-width: none; overflow: visible; text-overflow: clip; letter-spacing: -0.01em; } }
.tabbar svg, .nav svg, .account-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tabbar a:active { background: rgba(255, 255, 255, 0.06); }
.tabbar a[aria-current="page"] { color: #fff; background: var(--seaglass-dim); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.tabbar a[aria-current="page"] svg { color: var(--seaglass); stroke-width: 1.9; }
.tabbar a:focus-visible, .sidebar :focus-visible { outline-color: var(--seaglass); }
.tabbar a:focus-visible { outline-offset: -2px; border-radius: var(--radius-lg); }

@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 14rem minmax(0, 1fr); }
  .tabbar, .account-mini, .topbar-mark { display: none; }
  .content { padding-bottom: 2rem; }
  .sidebar {
    display: flex; flex-direction: column; gap: 1.1rem;
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate;
    padding: 0.9rem 0.6rem; color: var(--ink-text);
    background: radial-gradient(22rem 16rem at 0% 0%, rgb(var(--hl-rgb) / 0.13), transparent 70%), linear-gradient(180deg, var(--ink-2), var(--ink));
    box-shadow: inset -1px 0 0 var(--ink-line);
  }
  /* The arc and horizon, quietly, at the foot of the shell. */
  .sidebar::before { content: ""; position: absolute; z-index: -1; left: -6rem; bottom: -9rem; width: 22rem; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(var(--hl-rgb) / 0.14); border-right-color: transparent; transform: rotate(-30deg); pointer-events: none; }
  .sidebar::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 6.5rem; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--hl-rgb) / 0.18), transparent); pointer-events: none; }
  .brand { display: flex; align-items: center; gap: 0.55rem; min-height: var(--ctl); padding: 0 0.5rem; font-family: var(--display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.03em; color: #fff; text-decoration: none; border-radius: var(--radius-sm); }
  .brand img { border-radius: var(--radius-sm); width: 26px; height: 26px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 6px 14px -6px rgba(0, 0, 0, 0.6); }
  .nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .nav a, .account-link { position: relative; display: flex; align-items: center; gap: 0.6rem; min-height: var(--ctl); padding: 0 0.6rem; border-radius: var(--radius-sm); color: var(--ink-muted); text-decoration: none; font-size: var(--text-md); font-weight: 540; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
  .nav svg, .account-link svg { width: 18px; height: 18px; }
  .nav a:hover, .account-link:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
  .nav a[aria-current="page"], .account-link[aria-current="page"] { background: rgba(255, 255, 255, 0.08); color: #fff; font-weight: 620; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.25); }
  .nav a[aria-current="page"] svg, .account-link[aria-current="page"] svg { color: var(--seaglass); }
  .sidebar-foot { margin-top: auto; padding-top: 0.6rem; border-top: 1px solid var(--ink-line); }
  /* The account chip: an initial tile, the name on one line and how the owner signed in below it. Nothing wraps mid-word. */
  .account-link { min-height: 44px; padding: 0.3rem 0.5rem; }
  .account-initial { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-sm); font: 700 var(--text-sm)/1 var(--display); color: var(--seaglass); background: linear-gradient(160deg, var(--ink-3), var(--ink)); box-shadow: inset 0 0 0 1px rgb(var(--hl-rgb) / 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: background-color 160ms var(--ease), color 160ms var(--ease); }
  .account-text { display: grid; flex: 1; min-width: 0; gap: 0.1rem; line-height: 1.25; }
  .account-name, .account-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-name { font-size: var(--text-md); font-weight: 620; color: var(--ink-text); }
  .account-sub { font-size: var(--text-xs); font-weight: 500; color: var(--ink-muted); }
  .account-sub:empty { display: none; }
  .account-link .account-chevron { width: 14px; height: 14px; opacity: 0.6; transition: transform 160ms var(--ease), opacity 160ms var(--ease); }
  .account-link:hover .account-chevron { opacity: 1; transform: translateX(2px); }
  .account-link[aria-current="page"] .account-initial { color: var(--ink); background: var(--seaglass); }
  /* The title lines up with the content column below it. */
  .topbar { min-height: 3.5rem; padding: 0.6rem max(2rem, calc((100% - var(--page) + 4rem) / 2)); background: color-mix(in srgb, var(--bg) 72%, transparent); }
  .topbar h1 { font-size: var(--text-2xl); }
  #main { padding: 1.25rem 2rem 1.5rem; }
}

/* ---------- building blocks ---------- */
.card { display: block; background: var(--surface); border: 0; border-radius: var(--radius); padding: 0.9rem; box-shadow: var(--shadow), var(--edge); color: inherit; text-decoration: none; min-width: 0; }
.stack { display: grid; gap: 0.85rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.section { display: grid; gap: 0.6rem; min-width: 0; align-content: start; }
.section > h2 { display: flex; align-items: center; gap: 0.55rem; font-size: var(--text-lg); font-weight: 650; letter-spacing: -0.015em; color: var(--text); padding-left: 0.1rem; }
/* A section's own actions sit at the end of its heading, small and quiet, so the list below stays the first thing read.
   On touch an invisible margin keeps each a 44px target. */
.section-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.15rem; margin-left: auto; }
/* A heading word never breaks to make room for its actions: on a narrow phone the actions stack instead. */
.section > h2 > :first-child:not(.section-actions) { overflow-wrap: normal; }
.section-actions .btn { min-height: 32px; padding: 0 0.7rem; font-size: var(--text-sm); }
@media (pointer: coarse) { .section-actions .btn::after { content: ""; position: absolute; inset: -6px -2px; } }
.small-heading { font-size: var(--text-md); color: var(--text-2); font-weight: 650; letter-spacing: -0.005em; margin-bottom: 0.4rem; }
.plain { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.plain li::marker { color: var(--faint); }
.lead { font-size: var(--text-body); color: var(--muted); }
.muted, .meta { color: var(--muted); }
.meta { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.hint { color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
.section > .hint, .section > p.muted { padding-left: 0.1rem; }
.section > p.muted { padding: 0.15rem 0.1rem; font-size: var(--text-md); }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 68ch; }
/* Record text rendered from Markdown: a comfortable reading measure, generous leading and clear steps between blocks. */
.md { display: grid; gap: 0.75rem; max-width: 44rem; min-width: 0; font-size: var(--text-body); line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.md > * { margin: 0; min-width: 0; }
.md-h1, .md-h2, .md-h3 { font-family: var(--display); letter-spacing: -0.012em; line-height: 1.3; color: var(--text); }
.md-h1 { font-size: var(--text-xl); font-weight: 680; margin-top: 0.6rem; }
.md-h2 { font-size: var(--text-lg); font-weight: 650; margin-top: 0.5rem; }
.md-h3 { font-size: var(--text-body); font-weight: 650; margin-top: 0.35rem; color: var(--text-2); }
.md > :first-child { margin-top: 0; }
.md ul, .md ol { padding-left: 1.35rem; display: grid; gap: 0.35rem; }
.md li::marker { color: var(--faint); }
.md ol li::marker { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--text-md); }
.md li > ul, .md li > ol { margin-top: 0.35rem; }
.md-task { list-style: none; position: relative; }
.md-check { position: absolute; left: -1.35rem; top: 0.42em; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.md-check-done { background: var(--ok); box-shadow: none; }
.md-check-done::after { content: ""; position: absolute; left: 4.6px; top: 1.8px; width: 3.6px; height: 7px; border: solid var(--on-accent); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.md-label { font-weight: 640; color: var(--text); }
.md code { font-size: 0.86em; overflow-wrap: anywhere; }
.md pre { padding: 0.7rem 0.85rem; border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-soft); overflow-x: auto; font: var(--text-sm)/1.6 var(--mono); }
.md pre code { font: inherit; background: none; border: 0; padding: 0; overflow-wrap: normal; white-space: pre; }
.md blockquote { padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); display: grid; gap: 0.6rem; }
.md hr { border: 0; height: 1px; background: var(--border); margin: 0.4rem 0; }
.md-url { font: 0.86em/1.6 var(--mono); color: var(--muted); overflow-wrap: anywhere; word-break: break-all; }
.md-link-text { font-weight: 560; }
.md-record { border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-soft); }
.md-record > summary { min-height: min(var(--ctl), 40px); display: flex; align-items: center; padding: 0 0.8rem; font-size: var(--text-md); font-weight: 600; color: var(--text-2); cursor: pointer; }
.md-record > dl { margin: 0; padding: 0.2rem 0.8rem 0.65rem; display: grid; gap: 0.35rem; font-size: var(--text-md); line-height: 1.5; }
.md-record dl > div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 0.75rem; }
.md-record dt { color: var(--muted); font-family: var(--mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
.md-record dd { margin: 0; min-width: 0; }
.md-record .md-empty { color: var(--muted); font-style: italic; }
.md-comment { font-size: var(--text-md); gap: 0.5rem; }
.md-inline code { font-size: 0.86em; }
.entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.entry-head h3 { font-size: var(--text-body); font-weight: 600; letter-spacing: -0.01em; line-height: 1.38; min-width: 0; }
/* Metadata items are set apart by space alone: no dots between them, and a wrapped line never starts with a separator. */
.meta-row { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; align-items: center; margin-top: 0.3rem; min-width: 0; }
/* A journal entry's tags stay together, closer than the row's other items. */
.tags { display: inline-flex; flex-wrap: wrap; gap: 0.3rem 0.35rem; min-width: 0; }
.tag { display: inline-flex; max-width: 100%; font-size: var(--text-xs); font-weight: 560; color: var(--accent-strong); background: var(--accent-soft); padding: 0.06rem 0.45rem; border-radius: 999px; }
.entries { display: grid; gap: 0.5rem; }
.date-heading { display: flex; align-items: center; gap: 0.85rem; font-size: var(--text-md); font-weight: 650; color: var(--text-2); letter-spacing: 0.005em; margin: 1.1rem 0 0.25rem; padding-left: 0.1rem; }
.date-heading::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }
.entries > .date-heading:first-child { margin-top: 0; }
.kvs { margin: 0; display: grid; gap: 0.5rem; padding: 0.7rem 0.85rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.kvs:empty { display: none; }
.kv { display: grid; gap: 0.1rem; min-width: 0; }
.kv dt { font-size: var(--text-sm); font-weight: 560; color: var(--muted); }
.kv dd { margin: 0; white-space: pre-wrap; min-width: 0; }
@media (min-width: 640px) {
  .kv { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
  .card { padding: 1.1rem 1.25rem; }
}
.notice { background: var(--warn-soft); box-shadow: 0 0 0 1px var(--warn-line); }
/* A linked completed ticket may supersede this one: a calm amber panel, no side strip. */
.notice.conflict-notice { box-shadow: 0 0 0 1px var(--warn-line); display: grid; gap: 0.5rem; }
/* Linked tickets on a ticket page: one compact line each, the relation first. */
.related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.related-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; min-width: 0; }
.related-kind { flex: none; min-width: 6.5rem; color: var(--muted); font-size: var(--text-sm); font-weight: 560; }
.related-item > a { min-width: 0; overflow-wrap: anywhere; }
.related-item .row-id { margin-right: 0.15rem; }
.related-note { flex-basis: 100%; padding-left: 0; }
@media (min-width: 640px) { .related-note { padding-left: 7.1rem; } }
.notice-text { display: flex; gap: 0.55rem; align-items: baseline; color: var(--muted); font-size: var(--text-md); padding-left: 0.1rem; }
.conflict { background: var(--warn-soft); box-shadow: 0 0 0 1px var(--warn-line); display: grid; gap: 0.75rem; }
.error-card { display: grid; gap: 0.75rem; justify-items: start; background: color-mix(in srgb, var(--danger-soft) 55%, var(--surface)); box-shadow: 0 0 0 1px var(--danger-line), var(--shadow); }
/* Empty states carry the Cove arc over a short horizon. */
.empty { position: relative; text-align: center; padding: 2rem 1rem 1.75rem; color: var(--muted); display: grid; gap: 0.8rem; justify-items: center; border-radius: var(--radius-lg); background: radial-gradient(18rem 9rem at 50% 0%, rgb(var(--hl-rgb) / 0.22), transparent 70%), var(--surface); box-shadow: var(--shadow), var(--edge); }
/* The arc rising over its horizon line, drawn once: never a ring that could be read as a spinner still loading. */
.empty::before, .rem-empty::before { content: ""; width: 52px; height: 24px; margin-bottom: 0.1rem; opacity: 0.8; background: var(--accent); mask: var(--motif-empty); mask-composite: var(--motif-composite); }
.empty > p { max-width: 34ch; color: var(--text-2); }
.more { display: flex; justify-content: center; padding: 0.75rem 0 0; }
.loading { display: grid; gap: 0.7rem; padding: 0.25rem 0; }
.loading-label { display: flex; align-items: center; gap: 0.55rem; color: var(--muted); font-size: var(--text-md); }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: spin 0.7s linear infinite; }
.skeleton { display: grid; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow), var(--edge); overflow: hidden; }
.skeleton-row { height: 3rem; border-top: 1px solid var(--border-soft); background: linear-gradient(90deg, transparent 0, rgb(var(--hl-rgb) / 0.16) 50%, transparent 100%) no-repeat, var(--surface); background-size: 40% 100%, auto; background-position: -40% 0, 0 0; animation: shimmer 1.3s var(--ease) infinite; }
.skeleton-row:first-child { border-top: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: 140% 0, 0 0; } }

/* ---------- work lists: grouped rows with a leading status glyph ---------- */
.list { list-style: none; margin: 0; padding: 0; display: grid; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), var(--edge); min-width: 0; }
.list > li { min-width: 0; }
.list > li + li { border-top: 1px solid var(--border-soft); }
.list > li > .card { border-radius: 0; box-shadow: none; background: transparent; padding: 0.6rem 0.85rem; transition: background-color 140ms var(--ease); }
.list > li:first-child > .card { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.list > li:last-child > .card { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.list > li > a.card:hover { background: var(--hover); }
.list > li > a.card:active { background: var(--surface-2); }
.list > li > a.card:focus-visible { outline-offset: -2px; }
.ticket-card, .reminder-card, .project-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.7rem; align-items: start; }
.row-body { min-width: 0; }
/* Journal titles are body-sized; weight, not size, carries the hierarchy. */
.entry-card .entry-title { font-family: var(--sans); font-size: var(--text-body); font-weight: 650; letter-spacing: -0.008em; line-height: 1.4; }

/* Ticket status glyphs: a ring that fills as work moves along. Colour always pairs with the status badge's words. */
.row-mark { position: relative; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 1.75px solid currentColor; color: var(--accent); flex-shrink: 0; }
.mark-backlog { color: var(--faint); border-style: dashed; }
.mark-in_progress { background: conic-gradient(currentColor 0 50%, transparent 0) content-box; padding: 2px; }
.mark-review { color: var(--info); background: conic-gradient(currentColor 0 75%, transparent 0) content-box; padding: 2px; }
.mark-blocked { color: var(--warn); background: radial-gradient(circle, currentColor 0 2.5px, transparent 3px); }
.mark-done, .mark-acknowledged { color: var(--ok); background: currentColor; }
.mark-cancelled { color: var(--faint); background: currentColor; }
.mark-done::after, .mark-acknowledged::after { content: ""; position: absolute; left: 3.6px; top: 1.4px; width: 4px; height: 7px; border: solid var(--on-accent); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.mark-cancelled::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1.6px; margin-top: -0.8px; background: var(--on-accent); transform: rotate(-45deg); }
/* Reminders: a small clock face; due ones turn amber. */
.reminder-mark::before { content: ""; position: absolute; left: 50%; top: 2px; width: 1.6px; height: 5px; margin-left: -0.8px; background: currentColor; border-radius: 1px; }
.reminder-mark.mark-scheduled::after, .reminder-mark.mark-due::after { content: ""; position: absolute; left: 50%; top: 5.4px; width: 4px; height: 1.6px; margin-left: -0.8px; background: currentColor; border-radius: 1px; }
.reminder-mark.mark-due { color: var(--warn); background: var(--warn-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn-soft) 80%, transparent); }
.reminder-mark.mark-acknowledged::before, .reminder-mark.mark-cancelled::before { display: none; }
/* Projects: a lettered tile. */
.project-mark { display: grid; place-items: center; width: 26px; height: 26px; margin-top: 0; border: 0; border-radius: var(--radius-sm); font: 700 var(--text-sm)/1 var(--display); color: var(--accent-strong); background: linear-gradient(160deg, var(--mark-top), var(--accent-soft)); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.14), var(--edge); }
.project-mark.mark-paused { color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
.project-mark.mark-archived { color: var(--muted); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.project-card .entry-head h3 { font-size: var(--text-body); }
.project-card .meta { margin-top: 0.1rem; }
/* Project progress: a segmented bar in the ticket glyphs' colours, with the words beside it. Stacked under the title,
   and a column of its own once the row is wide enough. */
.project-list > li > .card { padding: 0.75rem 0.9rem; }
.project-card { row-gap: 0.55rem; }
.project-stats { grid-column: 2; display: grid; gap: 0.4rem; min-width: 0; align-content: start; }
.pstats-head { display: flex; align-items: baseline; gap: 0.55rem; min-width: 0; }
.pstats-pct { font: 680 var(--text-body)/1 var(--display); letter-spacing: -0.015em; color: var(--text); font-variant-numeric: tabular-nums; }
.pstats-caption { font-size: var(--text-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.pbar { display: flex; gap: 2px; height: 5px; border-radius: 999px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px rgb(var(--shade-rgb) / 0.05); }
.pseg { flex: 0 1 0; min-width: 4px; transition: flex-grow 200ms var(--ease); }
.seg-done { background: var(--ok); }
.seg-review { background: var(--info); }
.seg-in_progress { background: color-mix(in srgb, var(--accent) 55%, var(--seaglass)); }
.seg-ready { background: color-mix(in srgb, var(--seaglass) 50%, var(--surface)); }
.seg-blocked { background: var(--warn); }
.seg-backlog { background: var(--border-strong); }
.pbar-loading { margin: 0.55rem 0; background: linear-gradient(90deg, transparent 0, rgb(var(--hl-rgb) / 0.35) 50%, transparent 100%) no-repeat, var(--surface-2); background-size: 40% 100%, auto; background-position: -40% 0, 0 0; animation: shimmer 1.3s var(--ease) infinite; }
.pstat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; min-width: 0; }
.pstat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-sm); color: var(--text-2); white-space: nowrap; }
.pstat .row-mark { width: 12px; height: 12px; margin: 0; border-width: 1.5px; }
.pstat .mark-in_progress, .pstat .mark-review { padding: 1.5px; }
.pstat .mark-blocked { background: radial-gradient(circle, currentColor 0 2px, transparent 2.5px); }
.pstat-n { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.pstat-claim { color: var(--accent-strong); font-weight: 560; }
.pstat-warn { color: var(--warn); font-weight: 560; }
.pstats-empty { font-size: var(--text-sm); color: var(--muted); }
/* The projects page is a wall of project cards, each its own surface: tile and name, then its progress under a hairline. */
.list.project-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1rem; background: none; box-shadow: none; border-radius: 0; }
.list.project-list > li + li { border-top: 0; }
.list.project-list > li { display: grid; }
.list.project-list > li > .card.project-card { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.85rem; row-gap: 0.95rem; align-content: start; padding: 1.15rem 1.2rem 1.1rem; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow), var(--edge); transition: box-shadow 180ms var(--ease), transform 180ms var(--ease); }
.list.project-list > li > a.card.project-card:hover { background: var(--surface); box-shadow: var(--shadow-lift), var(--edge); transform: translateY(-1px); }
.project-list .project-mark { width: 2.5rem; height: 2.5rem; border-radius: var(--radius); font-size: var(--text-lg); }
.project-list .project-card .entry-head { align-items: center; }
.project-list .project-card .entry-head h3 { font-family: var(--serif); font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.project-list .project-card > .project-stats { grid-column: 1 / -1; padding-top: 0.85rem; border-top: 1px solid var(--border-soft); }
@media (prefers-reduced-motion: reduce) { .list.project-list > li > a.card.project-card:hover { transform: none; } }

/* Priority: bars that fill with the level, urgent a red square. Words for assistive technology are in .sr-only. */
.prio { position: relative; display: inline-flex; align-items: flex-end; gap: 2px; width: 14px; height: 14px; flex-shrink: 0; }
.prio i { width: 3px; border-radius: 1px; background: var(--border-strong); }
.prio i:nth-child(1) { height: 5px; }
.prio i:nth-child(2) { height: 9px; }
.prio i:nth-child(3) { height: 13px; }
.prio-low i:nth-child(1), .prio-normal i:nth-child(-n+2) { background: var(--muted); }
.prio-high i { background: var(--warn); }
.prio-urgent { align-items: center; justify-content: center; border-radius: 4px; background: var(--danger); }
.prio-urgent i { display: none; }
.prio-urgent::before { content: "!"; color: var(--on-accent); font: 700 10px/1 var(--sans); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- status badges: a tinted pill with the word ---------- */
.badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; line-height: 1.45; letter-spacing: 0.005em; background: var(--surface-2); color: var(--text-2); white-space: nowrap; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgb(var(--shade-rgb) / 0.05); }
.badge-accent { background: var(--accent-soft); color: var(--accent-strong); }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-muted { background: var(--surface-2); color: var(--muted); }

/* ---------- filter tabs: a segmented control ---------- */
.chips { display: flex; gap: 2px; width: max-content; max-width: 100%; overflow-x: auto; padding: 3px; border-radius: calc(var(--radius-sm) + 3px); background: rgb(var(--shade-rgb) / 0.055); box-shadow: inset 0 1px 2px rgb(var(--shade-rgb) / 0.06); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; min-height: var(--ctl); padding: 0 0.8rem; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; white-space: nowrap; font-size: var(--text-md); font-weight: 580; transition: color 160ms var(--ease), background-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.chip:hover { color: var(--text); }
.chip[aria-current="true"] { color: var(--text); background: var(--surface); box-shadow: 0 1px 3px rgb(var(--shade-rgb) / 0.12), var(--edge); }
.chip:focus-visible { outline-offset: -2px; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: var(--ctl); padding: 0 0.85rem; border-radius: var(--radius-sm); border: 1px solid transparent; font: 600 var(--text-md)/1 var(--sans); letter-spacing: -0.005em; cursor: pointer; text-decoration: none; white-space: nowrap; touch-action: manipulation; transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease), transform 120ms var(--ease); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* The primary action is the deep sea-glass teal, as in the iPhone and Mac apps (5.6:1 with white text). */
.btn-primary { background: linear-gradient(180deg, var(--accent-top), var(--accent)); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgb(var(--accent-strong-rgb) / 0.3), 0 6px 14px -8px rgb(var(--accent-strong-rgb) / 0.7); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: 0 1px 2px rgb(var(--shade-rgb) / 0.06), var(--edge); }
.btn-secondary:hover:not(:disabled) { border-color: var(--border-strong); background: var(--hover); }
.btn-ghost { background: transparent; color: var(--accent-strong); }
.btn-ghost:hover:not(:disabled) { background: var(--accent-soft); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); }
.btn-large { min-height: calc(var(--ctl) + 6px); padding: 0 1.1rem; font-size: var(--text-body); border-radius: var(--radius-sm); }
/* The Today call to action: a sea-glass pill with its pen icon in its own circle. */
.btn-cta { min-height: calc(var(--ctl) + 4px); padding: 0 0.3rem 0 1rem; border-radius: 999px; background: var(--seaglass); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 24px -10px rgb(var(--hl-rgb) / 0.8); }
.btn-cta:hover { background: var(--hl-hover); }
.cta-icon { position: relative; display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); transition: transform 180ms var(--ease); }
.cta-icon::before, .cta-icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--seaglass); border-radius: 1px; }
.cta-icon::before { width: 10px; height: 1.8px; margin: -0.9px 0 0 -5px; }
.cta-icon::after { width: 1.8px; height: 10px; margin: -5px 0 0 -0.9px; }
.btn-cta:hover .cta-icon { transform: rotate(90deg); }

/* ---------- forms ---------- */
.field { display: grid; gap: 0.3rem; min-width: 0; align-content: start; }
.field label { font-weight: 600; font-size: var(--text-md); color: var(--text-2); }
.req { color: var(--danger); }
input, select, textarea { font: inherit; color: inherit; width: 100%; min-width: 0; max-width: 100%; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  min-height: var(--ctl); padding: 0.3rem 0.7rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
  font-size: max(var(--text-md), var(--field-min));
  box-shadow: inset 0 1px 2px rgb(var(--shade-rgb) / 0.04);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
input:not([type="checkbox"]):not([type="radio"]):hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--border-hover); }
/* A select draws its own caret, the shape the ticket filters use, so a form reads as one set of controls in every browser
   rather than the system's arrow beside Cove's fields. Two hairline gradients make the caret: no image is loaded. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none; padding-right: 2rem; text-overflow: ellipsis; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent calc(50% - 0.8px), var(--caret, var(--faint)) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)),
    linear-gradient(-45deg, transparent calc(50% - 0.8px), var(--caret, var(--faint)) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px));
  background-size: 4.5px 4.5px; background-repeat: no-repeat;
  background-position: right calc(0.85rem + 4.5px) center, right 0.85rem center;
}
select:not([multiple]):not([size]):hover:not(:disabled) { --caret: var(--muted); }
select:disabled { cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
textarea { resize: vertical; line-height: 1.5; padding-block: 0.5rem; }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; }
fieldset.group, fieldset.checks { border: 0; border-radius: var(--radius-sm); padding: 0.75rem; margin: 0; display: grid; gap: 0.6rem; min-width: 0; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-soft); }
fieldset.checks { padding: 0; background: none; box-shadow: none; gap: 0.1rem; }
fieldset.group > legend { float: left; width: 100%; padding: 0; margin-bottom: 0.1rem; }
legend { font-weight: 650; font-size: var(--text-md); color: var(--text); padding: 0 0.3rem; }
.check { display: flex; align-items: center; gap: 0.55rem; min-height: var(--ctl); }
.check label { min-width: 0; }
.grid-2, .grid-3 { display: grid; gap: 0.8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.view > form.card, .view > .notice-text + form.card { max-width: 54rem; width: 100%; }
.save-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding-top: 0.25rem; }
form.card > .save-bar { margin-top: 0.3rem; padding-top: 0.85rem; border-top: 1px solid var(--border-soft); }
/* A destructive action stands apart from Save and Cancel, at the far end of the bar. */
.save-bar > .btn-danger:last-child { margin-left: auto; }
.status { font-size: var(--text-md); }
.status-error { color: var(--danger); background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-line); padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); }
/* Inside a card that is already the error's panel, the message is plain text: never a tinted box within a tinted box. */
.error-card > .status-error { background: none; box-shadow: none; padding: 0; }
.status-ok { color: var(--ok); font-weight: 560; }
.status-info { color: var(--muted); }
.filters { display: grid; gap: 0.5rem; }
.search-row { display: flex; gap: 0.5rem; min-width: 0; max-width: 40rem; }
.search-row input { flex: 1; border-radius: var(--radius-sm); }
details > summary { cursor: pointer; min-height: var(--ctl); display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-md); font-weight: 600; color: var(--text-2); list-style: none; border-radius: var(--radius-sm); }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); margin: 0 0.2rem 0 0.2rem; transition: transform 160ms var(--ease); }
details[open] > summary::before { transform: rotate(45deg); }
details > summary:hover { color: var(--text); }
.more-filters[open] { display: grid; gap: 0.75rem; padding: 0.2rem 0.9rem 0.9rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow), var(--edge); }
.history { color: var(--muted); border-top: 1px solid var(--border); padding-top: 0.25rem; }
/* Each change on two lines: what changed, then the revision, when and who. Newest first. */
.history-list { list-style: none; margin: 0.35rem 0 0; padding: 0 0 0 0.1rem; display: grid; gap: 0.6rem; font-size: var(--text-md); }
.history-list li { display: grid; gap: 0.05rem; min-width: 0; }
.history-what { color: var(--text-2); }
.history-fields { color: var(--muted); }
.history-when { overflow-wrap: anywhere; }

/* ---------- details: a main column with a companion column on wide screens ---------- */
.detail { display: grid; gap: 1rem; min-width: 0; }
.detail-grid { display: grid; gap: 1.2rem; min-width: 0; }
@media (min-width: 640px) { .detail-card { padding: 1.3rem 1.5rem; gap: 1rem; } }
.detail-card { position: relative; overflow: hidden; }
@media (min-width: 1100px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr) 19rem; grid-template-rows: auto auto auto 1fr; column-gap: 1.4rem; align-items: start; }
  .detail-grid > * { grid-column: 1; }
  .detail-grid > .detail-side { grid-column: 2; grid-row: 1 / -1; position: sticky; top: 4.5rem; }
}
.detail-side:not(form) { display: grid; gap: 1.25rem; min-width: 0; }
/* Very wide windows: a wider page and side column, so the work does not sit in a narrow strip between empty margins. */
@media (min-width: 1600px) {
  :root { --page: 82rem; }
  .detail-grid { grid-template-columns: minmax(0, 1fr) 21rem; column-gap: 1.75rem; }
}
.quick h2 { font-size: var(--text-body); }

/* ---------- Today ---------- */
/* One readable column on every width: date and overview first, then the owner's groups in order. */
.today { display: grid; gap: 1.2rem; min-width: 0; }
.today-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 0.8rem; padding: 0.9rem 0.9rem 0.8rem; border-radius: var(--radius-lg); color: var(--ink-text);
  background: radial-gradient(34rem 22rem at 100% 0%, rgb(var(--hl-rgb) / 0.24), transparent 65%), linear-gradient(165deg, var(--ink-3), var(--ink) 75%);
  box-shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgb(var(--shade-rgb) / 0.65);
}
/* The arc rising over the horizon, behind the date. */
.today-hero::before { content: ""; position: absolute; z-index: -1; right: -7rem; top: -9rem; width: 24rem; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgb(var(--hl-rgb) / 0.28); border-right-color: transparent; transform: rotate(-45deg); pointer-events: none; }
.hero-copy { display: grid; gap: 0.3rem; justify-items: start; min-width: 0; }
/* The date is one serif line; the weekday carries the sea-glass tone, so no separate label sits above it. */
/* On a phone beside the art it breaks after the weekday, two lines that clear the art before the counts begin. */
.hero-date { font-family: var(--serif); font-size: clamp(1.7rem, 1.45rem + 0.9vw, 2.1rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.022em; color: #fff; text-wrap: balance; }
.hero-weekday { color: var(--seaglass); }
.today-hero :focus-visible { outline-color: var(--seaglass); }
.glance { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; min-width: 0; }
.glance > li { display: grid; min-width: 0; }
/* Solid ink under the faint white, so the hero's arc never runs through a count or its label. */
.glance-item { display: grid; gap: 0.05rem; align-content: start; min-height: var(--ctl); padding: 0.45rem 0.6rem; border: 0; border-radius: var(--radius-sm); font: inherit; text-align: left; color: var(--ink-text); background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
/* :where keeps these at the base specificity so the reduced-motion rule below still cancels the press scale. */
:where(button, a).glance-item { cursor: pointer; transition: background-color 160ms var(--ease), transform 160ms var(--ease); }
:where(button, a).glance-item:hover { background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), var(--ink-2); }
:where(button, a).glance-item:active { transform: scale(0.98); }
.glance-value { display: flex; align-items: center; gap: 0.4rem; font: 650 var(--text-lg)/1.1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; }
.glance-value::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--seaglass); flex-shrink: 0; }
.glance-label { font-size: var(--text-sm); color: var(--ink-text); line-height: 1.3; }
.glance-sub { font-size: var(--text-xs); color: var(--tone-warm); line-height: 1.3; }
.tone-decisions .glance-value::before, .tone-reminders .glance-value::before { background: var(--tone-warm); }
.tone-in_progress .glance-value::before { background: var(--tone-cool); }
.tone-deferred .glance-value::before { background: var(--ink-muted); }
.is-zero .glance-item { opacity: 0.62; }
.is-zero .glance-value::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
/* The project filter is a small pill like the ticket filters: a scope for the page, not a form field. */
.today-filter { display: flex; align-items: center; gap: 0.55rem; min-width: 0; padding-left: 0.2rem; }
.today-filter label { font-size: var(--text-sm); font-weight: 600; color: var(--muted); flex-shrink: 0; }
.today-filter select { width: auto; max-width: min(17rem, 100%); padding-left: 0.75rem; border-color: var(--border); background-color: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--text-2); font-size: max(var(--text-sm), var(--field-min)); font-weight: 540; }
.today-filter select:hover:not(:disabled) { border-color: var(--border-strong); background-color: var(--surface); color: var(--text); }
.today-filter select:not(:has(option[value=""]:checked)) { --caret: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); background-color: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
/* Reminders hold the main column; from 1200px the calendar, decisions and agent work keep a side column, the widths the
   project page uses. Narrower, the two stack in that same order. */
.today-body, .today-main, .today-side { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.today-side:empty, .today-main:empty, .today-calendar-slot:empty { display: none; }
@media (min-width: 1200px) {
  .today-body { grid-template-columns: minmax(0, 1fr) 20rem; column-gap: 2rem; align-items: start; }
  .today-side .cal-row { grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.6rem; }
  /* In the narrow column the key, title and priority run as one line of text, so a long title uses the full width. */
  .today-side .today-card-head { display: block; }
  .today-side .today-card-head h3 { display: inline; }
  .today-side .today-id { margin-right: 0.45rem; }
  .today-side .today-card-head .badge { margin-left: 0.45rem; vertical-align: 0.08em; }
  /* The agent links get a line of their own under the label rather than breaking one per line. */
  .today-side .today-agents { padding: 0.7rem 0.6rem 0.6rem 0.9rem; }
  .today-side .today-agents-label { flex-basis: 100%; margin: 0 0 0.15rem; }
}
@media (min-width: 1400px) { .today-body { grid-template-columns: minmax(0, 1fr) 22rem; column-gap: 2.5rem; } }
.today-section { scroll-margin-top: 4rem; }
.today-section > h2, .today-later > summary { display: flex; align-items: baseline; gap: 0.5rem; }
.today-section > h2:focus { outline: none; }
.today-section > h2:focus-visible { outline: 2px solid var(--accent); }
.today-count { font: 600 var(--text-sm)/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; background: var(--surface-2); padding: 0.15rem 0.4rem; border-radius: 999px; }
/* Calendar on Today: a time column and the event, like a day view's list. Past events step back; free (transparent) ones are quieter. */
.today-section > h2 .section-action { margin-left: auto; min-height: 32px; padding: 0 0.7rem; font-size: var(--text-sm); }
.cal-list { list-style: none; margin: 0; padding: 0.3rem; display: grid; gap: 0.1rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), var(--edge); }
.cal-end { display: block; font-weight: 500; color: var(--muted); }
.cal-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.85rem; align-items: baseline; padding: 0.6rem 0.65rem; border-radius: var(--radius-sm); color: inherit; text-decoration: none; transition: background-color 140ms var(--ease); }
a.cal-row:hover { background: var(--surface-2); }
a.cal-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-when { font: 600 var(--text-sm)/1.4 var(--sans); color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.cal-text { display: grid; gap: 0.1rem; min-width: 0; }
.cal-title { font-weight: 600; line-height: 1.38; overflow-wrap: anywhere; }
.cal-meta { font-size: var(--text-sm); color: var(--muted); overflow-wrap: anywhere; }
.cal-item.is-past .cal-row { opacity: 1; }
.cal-item.is-free .cal-title { font-weight: 500; color: var(--text-2); }
@media (max-width: 480px) { .cal-row { grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.6rem; } }
.cal-accounts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.cal-account { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.7rem 0.8rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.cal-account p { margin: 0.1rem 0 0; }
/* Connected assistants (COVE-465) reuse the calendar account rows; the text takes the room so Disconnect stays on the right. */
.assistants-card .cal-account > div { flex: 1 1 16rem; min-width: 0; }
/* ---------- the Calendar tab: Day, Week, Month and Schedule ----------
 * One white work surface per view on the app's pale ground. Events are filled with their Google calendar's colour mixed
 * into the surface, with dark text, so any calendar colour stays readable; the colour is never a strip. Gridlines are
 * drawn as backgrounds. The serif carries dates, as it does across Cove. */
#main:has(> .view > .cal-app) { max-width: none; }
.cal-app { display: grid; gap: 1.25rem; align-items: start; min-width: 0; --hour: 3rem; --gut: 3.6rem; --ev-text: var(--event-ink); }
@media (pointer: coarse) { .cal-app { --hour: 3.25rem; } }
@media (min-width: 1100px) { .cal-app { grid-template-columns: 15.5rem minmax(0, 1fr); } }
.cal-main { display: grid; gap: 0.85rem; min-width: 0; }
.cal-notes { display: grid; gap: 0.35rem; }
.cal-notes:empty { display: none; }
.cal-flash { position: fixed; z-index: 40; left: 50%; translate: -50% 0; bottom: calc(var(--tabbar-h) + max(10px, env(safe-area-inset-bottom, 0px)) + 1rem); width: max-content; max-width: min(34rem, calc(100vw - 2rem)); }
@media (min-width: 900px) { .cal-flash { bottom: 1.5rem; left: calc(50% + 7rem); } }
.cal-toast { display: flex; align-items: center; gap: 0.35rem 0.75rem; padding: 0.55rem 0.5rem 0.55rem 0.95rem; border-radius: var(--radius); background: var(--ink); color: var(--ink-text); font-size: var(--text-md); font-weight: 540; box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.cal-toast.is-error { background: var(--toast-danger-bg); color: var(--toast-danger-text); }
.cal-toast-action { flex-shrink: 0; min-height: var(--ctl-sm); padding: 0 0.7rem; border: 0; border-radius: var(--radius-sm); background: var(--seaglass-dim); color: var(--seaglass); font: 650 var(--text-md)/1 var(--sans); cursor: pointer; }
.cal-toast-action:hover { background: rgb(var(--hl-rgb) / 0.26); }
.cal-toast-close { flex-shrink: 0; width: var(--ctl-sm); height: var(--ctl-sm); border: 0; border-radius: var(--radius-sm); background: none; color: inherit; opacity: 0.6; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.cal-toast-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); }
.cal-toast :focus-visible { outline-color: var(--seaglass); }
@media (prefers-reduced-motion: no-preference) { .cal-toast { animation: cal-toast-in 200ms var(--ease); } }
@keyframes cal-toast-in { from { opacity: 0; translate: 0 6px; } }
.cal-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; }
.cal-nav { display: flex; align-items: center; gap: 0.55rem; min-width: 0; flex: 1 1 18rem; }
.cal-step { display: inline-flex; }
.cal-step .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-step .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.cal-iconbtn { width: var(--ctl); padding: 0; color: var(--text-2); }
.cal-iconbtn:hover:not(:disabled) { color: var(--text); z-index: 1; }
.cal-title-range { flex: 1; min-width: 0; margin-left: 0.2rem; font: 680 var(--text-xl)/1.2 var(--display); letter-spacing: -0.022em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-tools { display: flex; align-items: center; gap: 0.5rem; }
.cal-switch .chip { border: 0; background: none; font-family: inherit; cursor: pointer; }
.cal-switch .chip[aria-pressed="true"] { color: var(--text); background: var(--surface); box-shadow: 0 1px 3px rgb(var(--shade-rgb) / 0.12), var(--edge); }
.cal-body { min-width: 0; transition: opacity 160ms var(--ease); }
.cal-body.is-loading { opacity: 0.6; }
.cal-pop-inner { display: grid; gap: 0.6rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lift), var(--edge); padding: 0.85rem; }
.cal-pop-inner > .btn { justify-self: end; }
.cal-pop .cal-legend { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* side panel: a small month and the calendars */
.cal-side { display: grid; gap: 1.1rem; align-content: start; position: sticky; top: 4.75rem; }
.mini { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), var(--edge); padding: 0.7rem 0.6rem 0.6rem; }
.mini-head { display: flex; align-items: center; gap: 0.15rem; padding: 0 0.15rem 0.4rem 0.35rem; }
.mini-title { flex: 1; font: 650 var(--text-md)/1.2 var(--display); letter-spacing: -0.01em; }
.cal-iconbtn-sm { width: 28px; min-height: 28px; background: transparent; border-color: transparent; box-shadow: none; }
.cal-iconbtn-sm:hover:not(:disabled) { background: var(--surface-2); border-color: transparent; }
.mini-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; text-align: center; }
.mini-dow { font-size: var(--text-xs); font-weight: 600; color: var(--muted); padding: 0.15rem 0 0.25rem; }
.mini-day { aspect-ratio: 1; max-height: 2rem; border: 0; background: none; border-radius: var(--radius-sm); font: 560 var(--text-xs)/1 var(--sans); color: var(--text-2); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 120ms var(--ease); }
.mini-day:hover { background: var(--surface-2); }
.mini-day.is-other { color: var(--muted); }
.mini-day.is-in { background: var(--accent-soft); color: var(--accent-strong); }
.mini-day.is-anchor { box-shadow: inset 0 0 0 1.5px var(--accent); }
.mini-day.is-today { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.cal-legend { display: grid; gap: 0.9rem; }
.cal-legend-group { border: 0; margin: 0; padding: 0; display: grid; gap: 1px; min-width: 0; }
.cal-legend-group > legend { padding: 0 0.45rem 0.3rem; font-size: var(--text-xs); font-weight: 650; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-legend-row { display: flex; align-items: center; gap: 0.6rem; min-height: var(--ctl); padding: 0 0.45rem; border-radius: var(--radius-sm); font-size: var(--text-md); cursor: pointer; transition: background-color 120ms var(--ease); }
.cal-legend-row:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.cal-legend-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-check { appearance: none; -webkit-appearance: none; flex-shrink: 0; display: grid; place-items: center; width: 1.05rem; height: 1.05rem; margin: 0; border-radius: 4px; cursor: pointer; background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--cal, var(--accent)) 78%, var(--ev-text)); transition: background-color 120ms var(--ease); }
.cal-check:checked { background: color-mix(in oklab, var(--cal, var(--accent)) 78%, var(--ev-text)); }
.cal-check:checked::after { content: ""; width: 4px; height: 8px; margin-top: -2px; border: solid var(--on-accent); border-width: 0 1.8px 1.8px 0; rotate: 45deg; }
.cal-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cal-legend-row.is-busy { --cal: var(--muted); }
.cal-legend-empty { font-size: var(--text-sm); padding: 0 0.45rem; }

/* an event, wherever it is drawn */
.tg-ev, .tg-bar, .mg-bar, .tg-ghost { --tone: color-mix(in srgb, var(--cal, var(--accent)) 22%, var(--surface)); }
.tg-ev, .tg-bar, .mg-bar { color: color-mix(in oklab, var(--cal, var(--accent)) 26%, var(--ev-text)); text-decoration: none; background: var(--tone); }
.tg-ev:hover, .tg-bar:hover, .mg-bar:hover { --tone: color-mix(in srgb, var(--cal, var(--accent)) 32%, var(--surface)); }
.tg-ev:focus-visible, .tg-bar:focus-visible, .mg-bar:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; z-index: 6; }
.tg-ev.is-past, .tg-bar.is-past, .mg-bar.is-past { --tone: color-mix(in srgb, var(--cal, var(--accent)) 11%, var(--surface)); color: color-mix(in oklab, var(--cal, var(--accent)) 25%, var(--text-2)); }
.tg-ev.is-free, .tg-bar.is-free, .mg-bar.is-free { --tone: color-mix(in srgb, var(--cal, var(--accent)) 6%, var(--surface)); outline: 1px dashed color-mix(in srgb, var(--cal, var(--accent)) 60%, transparent); outline-offset: -1px; }
.tg-ev.is-busy, .tg-bar.is-busy, .mg-bar.is-busy { color: var(--text-2); background: repeating-linear-gradient(135deg, var(--busy) 0 5px, var(--surface-2) 5px 10px); }

/* Day and Week: the time grid */
.tg { --days: 7; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), var(--edge); overflow: hidden; }
.tg-head, .tg-grid { display: grid; grid-template-columns: var(--gut) repeat(var(--days), minmax(0, 1fr)); }
.tg-head { border-bottom: 1px solid var(--border-soft); }
.tg-zone { align-self: end; padding: 0 0.45rem 0.55rem 0; text-align: right; font-size: 0.6875rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tg-dayhead { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.5rem 0 0.45rem; border: 0; background: none; color: var(--text-2); font: inherit; min-width: 0; }
button.tg-dayhead { cursor: pointer; }
.tg-dow { font-size: var(--text-xs); font-weight: 620; color: var(--muted); }
.tg-num { display: grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 0.3rem; border-radius: 999px; font: 560 var(--text-2xl)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; transition: background-color 120ms var(--ease); }
button.tg-dayhead:hover .tg-num { background: var(--surface-2); }
.tg-dayhead.is-today .tg-dow { color: var(--accent-strong); }
.tg-dayhead.is-today .tg-num, button.tg-dayhead.is-today:hover .tg-num { background: var(--accent); color: var(--on-accent); }
.tg.is-single .tg-dayhead { flex-direction: row; justify-content: flex-start; gap: 0.55rem; padding-left: 0.6rem; }
.tg-allday { display: grid; grid-template-columns: var(--gut) minmax(0, 1fr); border-bottom: 1px solid var(--border); }
.tg-allday-label { padding: 0.45rem 0.45rem 0 0; text-align: right; font-size: 0.6875rem; font-weight: 600; color: var(--muted); }
.tg-allday-grid { --lanes: 1; display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); grid-template-rows: repeat(var(--lanes), 1.5rem); row-gap: 2px; padding: 0.25rem 0; }
.tg-allday-cell { grid-row: 1 / -1; margin: -0.25rem 0; border: 0; padding: 0; cursor: pointer; background: linear-gradient(var(--border-soft), var(--border-soft)) left / 1px 100% no-repeat; }
.tg-allday-cell:hover { background-color: var(--hover); }
.tg-allday-cell:focus-visible { outline-offset: -2px; }
.tg-bar, .mg-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.3rem; min-width: 0; height: 100%; margin: 0 3px; padding: 0 0.45rem; border-radius: 5px; font: 620 var(--text-xs)/1 var(--sans); white-space: nowrap; overflow: hidden; transition: background-color 120ms var(--ease); }
.bar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bar-time { flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.bar-time:empty { display: none; }
.cut-left { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cut-right { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tg-scroll { height: clamp(22rem, calc(100dvh - 15.75rem), 64rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.tg-scroll .tg-grid { padding-top: 0.6rem; margin-bottom: 0.6rem; position: relative; }
.tg-gutter { display: grid; grid-template-rows: repeat(24, var(--hour)); }
.tg-hour { padding-right: 0.5rem; text-align: right; font-size: 0.6875rem; font-weight: 560; color: var(--muted); font-variant-numeric: tabular-nums; translate: 0 -0.5em; white-space: nowrap; }
.tg-col { position: relative; height: calc(24 * var(--hour)); background:
  linear-gradient(var(--border-soft), var(--border-soft)) left / 1px 100% no-repeat,
  repeating-linear-gradient(to bottom, var(--border-soft) 0 1px, transparent 1px var(--hour)); }
.tg-col.is-today { background-color: color-mix(in srgb, var(--accent) 3.5%, var(--surface)); }
.tg-ev { position: absolute; z-index: 1; box-sizing: border-box;
  top: calc(var(--s) * var(--hour) / 60 + 1px);
  height: calc(max(var(--e) - var(--s), 20) * var(--hour) / 60 - 2px);
  left: calc(var(--col) * (100% - 6px) / var(--cols) + 2px);
  width: calc((100% - 6px) / var(--cols) * var(--grow, 1) - 2px); max-width: calc(100% - 4px - var(--col) * (100% - 6px) / var(--cols));
  display: flex; flex-direction: column; gap: 0.05rem; overflow: hidden; padding: 0.22rem 0.4rem; border-radius: 6px;
  font-size: var(--text-xs); line-height: 1.28; box-shadow: 0 0 0 1px var(--surface); transition: background-color 120ms var(--ease), box-shadow 160ms var(--ease); }
.tg-ev:hover { z-index: 8 !important; }
.tg-ev-title { font-weight: 660; overflow-wrap: break-word; word-break: normal; -webkit-hyphens: auto; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tg-ev-time { font-weight: 520; opacity: 1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-ev-meta { opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-ev.is-short { flex-direction: row; align-items: baseline; gap: 0.35rem; padding-top: 0.08rem; padding-bottom: 0; white-space: nowrap; }
.tg-ev.is-short .tg-ev-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.tg-ev.is-short .tg-ev-time { flex: 0 10 auto; min-width: 0; }
.tg-ev.is-mid .tg-ev-title { -webkit-line-clamp: 1; line-clamp: 1; }
.tg-ev.cut-top { border-top-left-radius: 0; border-top-right-radius: 0; }
.tg-ev.cut-bottom { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tg-ev.is-draggable { cursor: grab; touch-action: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.tg-ev.is-dragging { z-index: 9 !important; cursor: grabbing; box-shadow: 0 0 0 1px var(--surface), var(--shadow-lift); --tone: color-mix(in srgb, var(--cal, var(--accent)) 36%, var(--surface)); }
.tg-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.tg-resize::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 1.25rem; height: 3px; translate: -50% 0; border-radius: 2px; background: currentColor; opacity: 0; transition: opacity 120ms var(--ease); }
.tg-ev:hover .tg-resize::after, .tg-ev.is-dragging .tg-resize::after { opacity: 0.45; }
body.cal-moving, body.cal-moving * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
body.cal-resizing, body.cal-resizing * { cursor: ns-resize !important; user-select: none; -webkit-user-select: none; }
.tg-ghost { position: absolute; z-index: 4; left: 2px; right: 4px; pointer-events: none;
  top: calc(var(--s) * var(--hour) / 60 + 1px); height: calc((var(--e) - var(--s)) * var(--hour) / 60 - 2px);
  padding: 0.22rem 0.4rem; border-radius: 6px; background: var(--tone); box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-lift);
  font: 640 var(--text-xs)/1.3 var(--sans); color: var(--accent-strong); font-variant-numeric: tabular-nums; }
/* Now: a line across today's column, faint across the rest of the week, and the time in the hour column. */
.tg-grid.has-now::before, .tg-grid.has-now::after { content: ""; position: absolute; z-index: 4; pointer-events: none; top: calc(0.6rem + var(--now) * var(--hour) / 60 - 1px); }
.tg-grid.has-now::before { left: var(--gut); right: 0; height: 1px; translate: 0 0.5px; background: color-mix(in srgb, var(--danger) 35%, transparent); }
.tg-grid.has-now::after { height: 2px; left: calc(var(--gut) + var(--now-col) * (100% - var(--gut)) / var(--days)); width: calc((100% - var(--gut)) / var(--days)); background: var(--danger); border-radius: 2px; }
.tg-now-label { display: none; position: absolute; z-index: 4; left: 0; width: var(--gut); top: calc(0.6rem + var(--now) * var(--hour) / 60); translate: 0 -50%; padding-right: 0.4rem; text-align: right; background: var(--surface); font: 680 0.6875rem/1.3 var(--sans); color: var(--danger); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tg-grid.has-now .tg-now-label { display: block; }

/* Month */
.mg { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), var(--edge); overflow: hidden; }
.mg-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0.5rem 0 0.45rem; border-bottom: 1px solid var(--border-soft); text-align: center; font-size: var(--text-xs); font-weight: 620; color: var(--muted); }
.mg-week { --lanes: 3; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 2rem repeat(var(--lanes), 1.375rem) 1.3rem; row-gap: 2px; padding-bottom: 0.2rem; }
.mg-week + .mg-week { border-top: 1px solid var(--border-soft); }
.mg-day { grid-row: 1 / -1; margin-bottom: -0.2rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 0.3rem 0.35rem; text-align: left; border: 0; font: inherit; color: var(--text-2); cursor: pointer; background: linear-gradient(var(--border-soft), var(--border-soft)) left / 1px 100% no-repeat; transition: background-color 120ms var(--ease); }
.mg-day:first-child { background-image: none; }
.mg-day:hover { background-color: var(--hover); }
.mg-day:focus-visible { outline-offset: -2px; }
.mg-day.is-other { background-color: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); color: var(--muted); }
.mg-num { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.35rem; border-radius: 999px; font: 600 var(--text-sm)/1 var(--sans); font-variant-numeric: tabular-nums; }
.mg-day.is-today .mg-num { background: var(--accent); color: var(--on-accent); }
.mg-bar { height: auto; }
/* In a month cell the title is what identifies an event: its time steps back (smaller, lighter) to leave the title more room. */
.mg-bar { gap: 0.25rem; padding: 0 0.35rem; }
.mg-bar .bar-time { font-size: 0.6875rem; font-weight: 560; opacity: 1; letter-spacing: -0.01em; }
.mg-bar.is-timed:not(:hover) { --tone: color-mix(in srgb, var(--cal, var(--accent)) 9%, var(--surface)); }
.mg-bar.is-timed { font-weight: 560; color: var(--text); }
.mg-bar.is-timed .bar-time { color: color-mix(in oklab, var(--cal, var(--accent)) 45%, var(--ev-text)); }
.mg-more { position: relative; z-index: 1; margin: 0 3px; padding: 0 0.45rem; border: 0; border-radius: 5px; background: none; text-align: left; font: 650 var(--text-xs)/1 var(--sans); color: var(--muted); cursor: pointer; }
.mg-more:hover { background: var(--surface-2); color: var(--text); }
.mg-wrap { display: grid; gap: 1.1rem; }
.mg-mark { position: relative; z-index: 1; align-self: center; height: 4px; margin: 0 4px; border-radius: 2px; pointer-events: none; background: color-mix(in oklab, var(--cal, var(--accent)) 80%, var(--ev-text)); }
.mg-mark.is-busy { background: var(--faint); }
@media (max-width: 639px) {
  .mg-head { font-size: 0.6875rem; padding: 0.4rem 0 0.35rem; }
  .mg-week { grid-template-rows: 2.35rem repeat(var(--lanes), 7px) 1.05rem; row-gap: 1px; }
  .mg-day { padding: 0.25rem 0 0; align-items: center; }
  .mg-num { min-width: 1.85rem; height: 1.85rem; font-size: var(--text-md); }
  .mg-day.is-selected .mg-num { box-shadow: inset 0 0 0 1.5px var(--text); }
  .mg-day.is-selected.is-today .mg-num { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
  .mg-more { padding: 0; text-align: center; font-size: 0.625rem; }
}

/* Schedule: one surface, day by day, with empty stretches folded into one quiet line */
.sc { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), var(--edge); padding: 0.35rem 0.4rem; }
.sc-day { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.4rem; padding: 0.35rem 0; }
.sc > * + * { border-top: 1px solid var(--border-soft); }
.sc-date { display: flex; align-items: baseline; gap: 0.4rem; padding: 0.55rem 0 0 0.55rem; font-weight: inherit; }
.sc-num { font: 560 1.625rem/1 var(--serif); font-variant-numeric: lining-nums; color: var(--text); letter-spacing: -0.01em; }
.sc-dow { display: grid; gap: 0.1rem; font: 620 var(--text-xs)/1.1 var(--sans); color: var(--muted); }
.sc-month { font-weight: 520; color: var(--muted); }
.sc-day.is-today .sc-num, .sc-day.is-today .sc-dow { color: var(--accent-strong); }
.sc-day.is-past .sc-num { color: var(--muted); }
.sc-list { list-style: none; margin: 0; padding: 0.15rem 0; display: grid; gap: 1px; min-width: 0; }
.sc-row { display: grid; grid-template-columns: 4.6rem 0.65rem minmax(0, 1fr); align-items: baseline; gap: 0.65rem; padding: 0.55rem 0.6rem; border-radius: var(--radius-sm); color: inherit; text-decoration: none; transition: background-color 120ms var(--ease); }
a.sc-row:hover { background: var(--hover); }
a.sc-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sc-row.is-past { opacity: 1; }
.sc-when { font: 620 var(--text-sm)/1.4 var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.sc-end { display: block; font-weight: 500; color: var(--muted); }
.sc-swatch { align-self: start; margin-top: 0.32rem; width: 0.65rem; height: 0.65rem; border-radius: 3px; background: color-mix(in oklab, var(--cal, var(--accent)) 80%, var(--ev-text)); }
.sc-row.is-free .sc-swatch { background: none; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--cal, var(--accent)) 80%, var(--ev-text)); }
.sc-row.is-busy .sc-swatch { background: repeating-linear-gradient(135deg, var(--faint) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--faint); }
.sc-text { display: grid; gap: 0.1rem; min-width: 0; }
.sc-title { font-weight: 620; line-height: 1.38; overflow-wrap: anywhere; }
.sc-row.is-free .sc-title { font-weight: 520; color: var(--text-2); }
.sc-meta { font-size: var(--text-sm); color: var(--muted); overflow-wrap: anywhere; }
.sc-none { margin: 0; padding: 0.7rem 0.6rem; font-size: var(--text-sm); }
.sc-empty { margin: 0; padding: 0.6rem 0.6rem 0.6rem 5.55rem; font-size: var(--text-sm); color: var(--muted); }
.sc-more { display: flex; justify-content: center; padding: 0.7rem 0 0.45rem; }
.cal-agenda-day > h2 .section-action { margin-left: auto; min-height: 32px; padding: 0 0.7rem; font-size: var(--text-sm); }
.cal-agenda-day .sc-list { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), var(--edge); padding: 0.3rem; }
.cal-none { margin: 0; padding: 0.2rem 0.1rem; font-size: var(--text-sm); }
.cal-start { max-width: 40rem; }
.cal-start-art { width: 3rem; height: 1.6rem; position: relative; overflow: hidden; }
.cal-start-art::before { content: ""; position: absolute; left: 0.3rem; top: 0.3rem; width: 2.4rem; height: 2.4rem; border: 2.5px solid var(--accent); border-radius: 50%; }
.cal-start-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--accent); }

@media (min-width: 640px) and (max-width: 899px) { .tg-scroll { height: clamp(22rem, calc(100dvh - 15.75rem - var(--tabbar-h) - 1.25rem), 64rem); } }
@media (max-width: 639px) {
  .cal-app { --gut: 2.9rem; }
  .cal-toolbar { gap: 0.55rem; }
  .cal-nav { flex-basis: 100%; gap: 0.4rem; }
  .cal-title-range { font-size: var(--text-lg); }
  .cal-tools { flex-basis: 100%; }
  .cal-switch { flex: 1; width: auto; }
  .cal-switch .chip { flex: 1; justify-content: center; padding: 0 0.4rem; }
  .tg-scroll { height: clamp(20rem, calc(100dvh - 22.5rem), 60rem); }
  .tg-num { min-width: 2rem; height: 2rem; font-size: var(--text-xl); }
  .tg-ev { padding: 0.15rem 0.3rem; }
  .tg-hour { padding-right: 0.35rem; }
  .sc { padding: 0.2rem; }
  .sc-day { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sc-date { padding: 0.6rem 0.6rem 0.1rem; gap: 0.5rem; }
  .sc-dow { display: flex; gap: 0.3rem; }
  .sc-row { grid-template-columns: 4.1rem 0.65rem minmax(0, 1fr); gap: 0.55rem; }
  .sc-empty { padding-left: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-body, .tg-ev, .tg-bar, .mg-bar, .mini-day, .mg-day, .sc-row { transition: none; }
}
.waitlist-count { margin: 0; }
.waitlist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; max-height: 28rem; overflow-y: auto; }
.waitlist-item { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.waitlist-who { min-width: 0; }
.waitlist-who strong { display: block; overflow-wrap: anywhere; }
.waitlist-who p { margin: 0.1rem 0 0; }
/* Invitations (COVE-379): the state as a quiet pill under the address, one invitation action beside Remove; on phones the
   actions drop under the address and an inline error spans the row. */
.waitlist-item:has(.waitlist-actions) { flex-wrap: wrap; row-gap: 0.45rem; }
.waitlist-item:has(.waitlist-actions) .waitlist-who { flex: 1 1 15rem; }
.waitlist-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem; margin-left: auto; }
.waitlist-actions .btn[aria-busy="true"] { cursor: progress; }
.waitlist-who .waitlist-state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.45rem; margin-top: 0.35rem; font-size: var(--text-sm); }
.waitlist-item > .status-error { flex: 1 1 100%; margin: 0; }
.waitlist-about, .waitlist-mode { margin: 0; }
.waitlist-card > h2:focus { outline: none; }
.waitlist-card > h2:focus-visible { outline: 2px solid var(--accent); }
.waitlist-about + .waitlist-mode { margin-top: -0.45rem; }
@media (max-width: 479px) { .waitlist-actions { margin-left: 0; justify-content: flex-start; } }
.invite-answer { padding: 0.6rem 0.75rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.invite-answer .muted { flex: 1 1 14rem; }
/* Phones: the question on its own line, then the three answers together, never split across two lines. */
@media (max-width: 599px) { .invite-answer .muted { flex-basis: 100%; } }
.today-later { display: grid; gap: 0.7rem; min-width: 0; }
.today-later > summary { font-size: var(--text-body); font-weight: 680; color: var(--text); }
.today-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.55rem; min-width: 0; }
.today-card-head h3 { flex: 1 1 12rem; min-width: 0; font-size: var(--text-body); font-weight: 600; line-height: 1.38; }
.today-id { font: 600 var(--text-sm)/1.4 var(--mono); color: var(--accent-strong); letter-spacing: 0.01em; white-space: nowrap; }
.today-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: 0.2rem; font-size: var(--text-md); line-height: 1.45; color: var(--text-2); }
.today-line .badge { margin-right: 0.15rem; vertical-align: 0.05em; }
.today-card .badge-danger { background: var(--danger-soft); color: var(--danger); }
.today-source { font-family: var(--mono); font-size: var(--text-sm); }
.today-clear { color: var(--muted); font-size: var(--text-md); padding-left: 0.1rem; }
.today .empty { padding: 1.25rem 1rem; }
@media (min-width: 640px) {
  .today-hero { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 1.25rem 1rem; }
  .glance { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 34rem; }
}

/* ---------- ticket comments ---------- */
.comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.comment { display: grid; gap: 0.25rem; padding: 0.65rem 0.85rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow), var(--edge); }
.comment .meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; font-size: var(--text-sm); color: var(--muted); }
.comment .meta strong { color: var(--text-2); font-weight: 600; }

/* ---------- account ---------- */
.account-head { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.account-id { display: grid; gap: 0.2rem; min-width: 0; }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius); font: 700 var(--text-lg)/1 var(--display); color: var(--seaglass); background: linear-gradient(160deg, var(--ink-3), var(--ink)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 18px -10px rgb(var(--shade-rgb) / 0.7); }
.view > .card { max-width: 54rem; }

/*
 * ---------- Appearance (COVE-388) ----------
 * The Appearance page (#/appearance, web/src/appearance.ts): a large preview of one appearance beside three separate
 * choices (above them on phones): Colour, Illustration and Style. On Account, a short card with the appearance in use.
 * Every preview is the real app's markup and classes (Today's hero, reminder rows, an empty state, the journal list),
 * painted in that combination's own tokens and illustrations through [data-swatch] and [data-swatch-scene] (palettes,
 * motif and illustrations above; [data-swatch-art="painted"] for the painted pictures, [data-swatch-scheme="dark"] for
 * the journal's dark set). Pointing at or focusing an option changes only the large preview; choosing one applies it.
 *
 * Each preview is a screen of a fixed width, --tp-w in rem, scaled to its frame (--tp-z, set by the page from the
 * frame's width; 0.75 until then). It is a transform, not zoom: Safari's zoom leaves rem sizes unscaled. The app's own rules lay the screen out as on this device: Today's switch to its wide
 * layout at 640px, and so do the screens here (a 40rem Today, a 36rem tile); the empty state and the journal stay
 * 20rem phone screens. Only Today's element-type selectors (li, button) and the journal head's wide layout need a
 * line here.
 */
.appearance-page { display: grid; gap: 1rem; min-width: 0; }
.ap-intro { max-width: 62ch; }
@media (hover: none) { .ap-hover-hint { display: none; } }
.ap-layout { display: grid; gap: 1.5rem; min-width: 0; }

/* the screens */
.theme-preview, .ap-screen {
  --tp-w: 20; position: relative; display: block; overflow: hidden; background: var(--bg); color: var(--text);
  box-shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.1), 0 6px 14px -8px rgb(var(--shade-rgb) / 0.45);
}
.tp-stage { position: absolute; top: 0; left: 0; display: block; width: calc(var(--tp-w) * 1rem); transform-origin: 0 0; transform: scale(var(--tp-z, 0.75)); }
.tp-bar { display: flex; align-items: center; gap: 0.6rem; height: 3rem; padding: 0 1rem; background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.tp-mark { display: block; flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--ink-2); box-shadow: 0 4px 10px -4px rgb(var(--shade-rgb) / 0.45); }
.tp-title { flex: 1; min-width: 0; font: 680 var(--text-lg)/1.2 var(--display); letter-spacing: -0.022em; color: var(--text); }
.tp-main { display: grid; gap: 1.2rem; padding: 1rem; }
.tp-stage .glance > * { display: grid; min-width: 0; }
.tp-stage .rem-list { display: block; }
/* the search field, drawn (a real field would be a control inside the preview) */
.tp-field { flex: 1; display: flex; align-items: center; min-height: var(--ctl); padding: 0 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--placeholder); font-size: var(--text-md); white-space: nowrap; overflow: hidden; }
.ap-journal .tp-main { gap: 0.9rem; }
.ap-journal .list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

/* the large preview */
.ap-preview { display: grid; gap: 0.75rem; min-width: 0; }
.ap-caption { display: grid; gap: 0.15rem; min-width: 0; }
.ap-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; }
.ap-name { font: 650 var(--text-lg)/1.3 var(--display); letter-spacing: -0.015em; color: var(--text); }
.ap-hour { font-size: var(--text-sm); font-weight: 560; color: var(--muted); }
.ap-state { margin-left: auto; align-self: center; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 620; color: var(--text-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.ap-state.is-chosen { color: var(--accent-strong); background: var(--accent-soft); box-shadow: none; }
.ap-mood { font-size: var(--text-sm); color: var(--muted); }
/* phones: the three screens side by side, one at a time */
.ap-screens {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 0.75rem; min-width: 0;
  margin-inline: -1rem; padding: 0.15rem 1rem 0.5rem; scroll-padding-inline: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ap-screens::-webkit-scrollbar { display: none; }
.ap-screen { aspect-ratio: 20 / 22.6; border-radius: var(--radius); scroll-snap-align: start; box-shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.1), 0 14px 30px -18px rgb(var(--shade-rgb) / 0.55); }
/* the journal on a wide window keeps its phone head inside a 20rem screen */
.ap-journal .journal-head:has(> .illus:not([hidden])) { grid-template-columns: minmax(0, 1fr); align-items: stretch; }

/* the chooser: three fieldsets, each a heading with the value in use on its right, then its options */
.ap-side { display: grid; gap: 0.9rem; align-content: start; min-width: 0; }
.ap-chooser { display: grid; gap: 1.6rem; align-content: start; min-width: 0; }
.theme-picker { border: 0; margin: 0; padding: 0; min-width: 0; }
.ap-legend { float: left; width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.65rem; padding: 0; }
.ap-legend + * { clear: both; }
.ap-legend-name { font: 650 var(--text-md)/1.3 var(--display); letter-spacing: -0.01em; color: var(--text); }
.ap-legend-value { min-width: 0; font-size: var(--text-sm); font-weight: 560; color: var(--muted); text-align: right; }
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.theme-tile {
  position: relative; display: grid; border-radius: var(--radius); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow 160ms var(--ease);
}
.theme-main {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 0.45rem 0.3rem;
  padding: 0.3rem 0.3rem 0.5rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease);
}
.theme-tile:hover { box-shadow: inset 0 0 0 1px var(--border-hover), var(--shadow); }
.theme-main:active { transform: scale(0.985); }
.theme-tile:has(.theme-radio:checked) { box-shadow: inset 0 0 0 2px var(--accent), var(--shadow); }
.theme-main:has(.theme-radio:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.theme-preview { grid-column: 1 / -1; aspect-ratio: 20 / 13; border-radius: var(--radius-sm); }
/* a scene: its spot illustration on the colour's own page, with the page's soft light; none: the colour's motif */
.scene-view {
  grid-column: 1 / -1; position: relative; display: grid; place-items: center; aspect-ratio: 20 / 13; overflow: hidden; border-radius: var(--radius-sm);
  background: radial-gradient(120% 90% at 50% 0%, rgb(var(--hl-rgb) / 0.3), transparent 70%), var(--bg);
  box-shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.1), 0 6px 14px -8px rgb(var(--shade-rgb) / 0.45);
}
.scene-view .illus-empty { width: 100%; height: 100%; padding: 0.35rem 0 0; background-origin: content-box; background-position: center bottom; }
.scene-motif { width: 52px; height: 24px; opacity: 0.8; background: var(--accent); mask: var(--motif-empty); mask-composite: var(--motif-composite); }
/* Drawn / Painted: one segmented control, off (but still showing the style kept) while there is no illustration */
/* the painted half of the one Illustration list: a quiet heading across the grid, a hairline above it */
.ap-subhead { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.6rem; margin: 0.55rem 0 0.05rem; font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
.ap-subhead::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.theme-radio { position: absolute; top: 0.5rem; left: 0.5rem; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.theme-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.4rem; min-width: 0; padding-left: 0.25rem; }
.theme-name { font-size: var(--text-sm); font-weight: 640; color: var(--text); letter-spacing: -0.005em; line-height: 1.3; overflow-wrap: normal; }
/* the narrowest phones: the names keep the tile's full width, and the radio's mark sits on the preview's corner */
@media (max-width: 359px) {
  .theme-main { grid-template-columns: minmax(0, 1fr); }
  .theme-main .theme-check { position: absolute; top: 0.55rem; right: 0.55rem; margin: 0; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong), 0 1px 3px rgb(var(--shade-rgb) / 0.25); }
}
/* each option's description is its radio's, and the large preview's caption; on the tile it is for screen readers only */
.theme-mood { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the radio's own mark beside the name: an empty ring, filled with the accent and a tick once chosen */
.theme-check { position: relative; align-self: start; width: 18px; height: 18px; margin: 0 0.15rem 0 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border-strong); transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.theme-tile:has(.theme-radio:checked) .theme-check { background: var(--accent); box-shadow: none; }
.theme-tile:has(.theme-radio:checked) .theme-check::after { content: ""; position: absolute; left: 6.5px; top: 3.5px; width: 4px; height: 8.5px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.appearance-failure { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.appearance-failure .status { flex: 1 1 18rem; }

/* Account's card: the appearance in use and the way to the page */
.ap-sum { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: 0.9rem; min-width: 0; }
.ap-thumb .theme-preview { width: 100%; }
.ap-sum-text { display: grid; gap: 0.2rem; justify-items: start; min-width: 0; }
.ap-sum-name { font-weight: 650; color: var(--text); }
.ap-sum-mood { font-size: var(--text-sm); margin-bottom: 0.45rem; }

@media (min-width: 640px) {
  .ap-thumb .theme-preview { --tp-w: 36; aspect-ratio: 36 / 14.5; }
  /* a colour tile is a 20rem phone screen at every width: Today's phone hero, with the art tucked beside the date */
  .theme-grid .today-hero, .theme-grid .today-hero:has(> .illus:not([hidden])) { padding: 0.9rem 0.9rem 0.8rem; }
  .theme-grid .today-hero:has(> .illus:not([hidden])) .hero-copy { padding-right: 6.5rem; }
  .theme-grid .illus-today-hero { top: 0.7rem; right: 0.8rem; bottom: auto; width: 6rem; height: 4.25rem; background-position: right top; }
  .ap-screens { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .ap-today { --tp-w: 40; grid-column: 1 / -1; aspect-ratio: 40 / 22.6; }
  .theme-grid { gap: 0.65rem; }
  .ap-sum { grid-template-columns: 13rem minmax(0, 1fr); gap: 1.25rem; }
}
/* From 760px the preview stays beside the chooser, so pointing at a tile always shows its theme in view. */
@media (min-width: 760px) {
  .ap-layout { grid-template-columns: minmax(0, 1fr) min(27rem, 46%); align-items: start; gap: 1.75rem; }
  .ap-preview { position: sticky; top: calc(3rem + env(safe-area-inset-top, 0px) + 1rem); }
  .theme-grid { gap: 0.5rem; }
}
/* Stacked with a pointer: the caption keeps two lines, so a longer mood never moves the chooser under the pointer. */
@media (hover: hover) and (max-width: 759px) { .ap-mood { min-height: 2lh; } }
@media (prefers-reduced-motion: reduce) { .theme-tile, .theme-main, .theme-check { transition: none; } .theme-main:active { transform: none; } }

/* ---------- journal: a writing sheet ---------- */
.editor { display: grid; gap: 0.8rem; max-width: 46rem; width: 100%; }
.editor-history { max-width: 46rem; width: 100%; }
.editor-top { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; justify-content: space-between; }
.editor-top .field { width: auto; min-width: 10rem; }
.editor-status { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; min-height: var(--ctl); }
.sheet {
  display: grid; gap: 0.2rem; padding: 0.9rem 0.9rem 0.7rem; border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lift), var(--edge);
  transition: box-shadow 180ms var(--ease);
}
.sheet:focus-within { box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-ring), var(--shadow-lift); }
.editor input.title-input { font: 680 max(var(--text-body), var(--field-min))/1.4 var(--sans); letter-spacing: -0.008em; border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; background: transparent; box-shadow: none; padding: 0.3rem 0.1rem 0.55rem; }
/* A journal entry is a page: its title is set in the same serif as the writing and the page titles. */
.editor:not(.doc-editor) input.title-input { font: 500 max(1.3rem, var(--field-min))/1.3 var(--serif); letter-spacing: -0.015em; color: var(--text); padding: 0.35rem 0.1rem 0.6rem; }
.editor:not(.doc-editor) input.title-input::placeholder { font-style: italic; }
.editor input.title-input:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); border-color: transparent; }
/* The page grows with the writing, so there is no resize grip on the sheet. */
.editor textarea.body-input { font: max(var(--text-body), var(--field-min))/1.7 var(--serif); color: var(--text-2); min-height: 46vh; padding: 0.7rem 0.1rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; resize: none; }
.editor textarea.body-input:focus-visible { box-shadow: none; }
.counter { justify-self: end; font-size: var(--text-sm); padding-top: 0.5rem; }
.counter.over { color: var(--danger); font-weight: 600; }
@media (min-width: 640px) {
  .sheet { padding: 1.2rem 1.6rem 0.85rem; }
}

/* ---------- re-authentication dialog ---------- */
dialog { border: 0; border-radius: calc(var(--radius-lg) + 4px); padding: 1.25rem 1.25rem 1.1rem; width: min(26rem, calc(100vw - 2rem)); background: var(--surface); color: var(--text); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08), var(--shadow-pop), var(--edge); overflow: hidden; }
dialog[open] { animation: rise 200ms var(--ease); }
dialog::backdrop { background: rgb(var(--shade-rgb) / 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog h2 { font-size: var(--text-lg); letter-spacing: -0.02em; margin-bottom: 0.6rem; }
#reauth-body { display: grid; gap: 0.8rem; color: var(--text-2); }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(0.985); } }

/*
 * ---------- journal: fully dark ----------
 * Every journal route (list, entry, new entry, archive, history) and everything around it while it is open: the
 * shell, controls, native pickers, states, notices and the sign-in dialog. Set only by the root data attribute
 * (web/src/theme.ts), which every other route, the landing page and sign-out clear. Its colours are the theme's dark
 * set (palettes above), with the highlight as the accent so focus and links stay visible on dark surfaces.
 */
:root[data-theme="journal"] body, :root[data-scheme="dark"] body { background: radial-gradient(80rem 28rem at 70% -12rem, rgb(var(--hl-rgb) / 0.07), transparent 70%), var(--bg); }
:root[data-theme="journal"] .topbar, :root[data-scheme="dark"] .topbar { background: color-mix(in srgb, var(--bg) 86%, transparent); border-bottom-color: var(--border); }
:root[data-theme="journal"] .sidebar, :root[data-scheme="dark"] .sidebar { box-shadow: inset -1px 0 0 var(--border); }
:root[data-theme="journal"] .tabbar, :root[data-scheme="dark"] .tabbar { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09) inset, 0 18px 40px -12px rgba(0, 0, 0, 0.8); }
:root[data-theme="journal"] .btn-primary, :root[data-scheme="dark"] .btn-primary { background: var(--seaglass); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4); }
:root[data-theme="journal"] .btn-primary:hover:not(:disabled), :root[data-scheme="dark"] .btn-primary:hover:not(:disabled) { background: var(--hl-hover); }
:root[data-theme="journal"] input:not([type="checkbox"]):not([type="radio"]), :root[data-theme="journal"] select, :root[data-theme="journal"] textarea, :root[data-scheme="dark"] input:not([type="checkbox"]):not([type="radio"]), :root[data-scheme="dark"] select, :root[data-scheme="dark"] textarea { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
:root[data-theme="journal"] input:not([type="checkbox"]):not([type="radio"]):hover:not(:disabled), :root[data-theme="journal"] select:hover:not(:disabled), :root[data-theme="journal"] textarea:hover:not(:disabled), :root[data-scheme="dark"] input:not([type="checkbox"]):not([type="radio"]):hover:not(:disabled), :root[data-scheme="dark"] select:hover:not(:disabled), :root[data-scheme="dark"] textarea:hover:not(:disabled) { border-color: var(--border-hover); }
:root[data-theme="journal"] input::placeholder, :root[data-theme="journal"] textarea::placeholder, :root[data-scheme="dark"] input::placeholder, :root[data-scheme="dark"] textarea::placeholder { color: var(--placeholder); }
:root[data-theme="journal"] .chips, :root[data-scheme="dark"] .chips { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
:root[data-theme="journal"] .chip[aria-current="true"], :root[data-scheme="dark"] .chip[aria-current="true"] { background: var(--surface-2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), var(--edge); }
:root[data-theme="journal"] .empty, :root[data-scheme="dark"] .empty { background: radial-gradient(18rem 9rem at 50% 0%, rgb(var(--hl-rgb) / 0.08), transparent 70%), var(--surface); }
:root[data-theme="journal"] .skeleton-row, :root[data-scheme="dark"] .skeleton-row { background: linear-gradient(90deg, transparent 0, rgb(var(--hl-rgb) / 0.06) 50%, transparent 100%) no-repeat, var(--surface); background-size: 40% 100%, auto; background-position: -40% 0, 0 0; }
:root[data-theme="journal"] .sheet, :root[data-scheme="dark"] .sheet { background: var(--surface); }
/* The title and text are the sheet itself, so the dark fields' inset well stays off them. */
:root:is([data-theme="journal"], [data-scheme="dark"]) .editor .sheet :is(input.title-input, textarea.body-input) { box-shadow: none; }
:root:is([data-theme="journal"], [data-scheme="dark"]) .editor .sheet > input.title-input:focus-visible { box-shadow: inset 0 -2px 0 rgb(var(--hl-rgb) / 0.6); }
/* The writing sheet's focus ring is quiet sea-glass, never a bright flash. */
:root[data-theme="journal"] .sheet:focus-within, :root[data-scheme="dark"] .sheet:focus-within { box-shadow: 0 0 0 1px rgb(var(--hl-rgb) / 0.55), 0 0 0 4px rgb(var(--hl-rgb) / 0.14), var(--shadow-lift); }
:root[data-theme="journal"] dialog::backdrop, :root[data-scheme="dark"] dialog::backdrop { background: rgb(var(--shade-rgb) / 0.72); }
:root[data-theme="journal"] .banner-update .btn-primary, :root[data-scheme="dark"] .banner-update .btn-primary { background: var(--seaglass); color: var(--ink); }

/*
 * ---------- reminders: shaped after Apple Reminders ----------
 * Divided rows on one quiet panel, a thin completion circle that fills with a dot, regular-weight titles, the date in
 * small type (red when overdue), and a compose sheet that asks for title, date and project with the rest under
 * Details. Scoped to .rem-* and .notify-* so Today and project pages keep their own rows.
 */
/* One explicit, shrinkable track: an implicit auto track would size to the widest child (the filters) and push every
   panel past the right edge on a phone. */
.rem-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; width: 100%; max-width: 40rem; min-width: 0; }
.rem-page > *, .rem-groups > *, .rem-group > *, .rem-form > * { min-width: 0; max-width: 100%; }
.rem-panel { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), var(--edge); min-width: 0; }

/* notifications on this device: one slim line */
.notify-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: center; padding: 0.3rem 0.35rem 0.3rem 0.75rem; border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 72%, transparent); box-shadow: inset 0 0 0 1px var(--border-soft); min-width: 0; }
.notify-glyph { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); flex-shrink: 0; }
.notify-glyph::before { content: ""; position: absolute; left: 50%; top: 7px; width: 11px; height: 10px; margin-left: -5.5px; border: 1.6px solid var(--accent); border-bottom: 0; border-radius: 6px 6px 1px 1px; }
.notify-glyph::after { content: ""; position: absolute; left: 50%; top: 17px; width: 15px; height: 1.6px; margin-left: -7.5px; border-radius: 1px; background: var(--accent); }
.notify-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.1rem 0.75rem; min-width: 0; font-size: var(--text-md); color: var(--text-2); }
.notify-body > p { flex: 1 1 13rem; min-width: 0; padding: 0.35rem 0; }
.notify-body > .row { gap: 0.15rem; }
.notify-body .btn { padding: 0 0.7rem; }
.notify-body > .status-error { flex-basis: 100%; margin: 0.1rem 0 0.35rem; }
.notify-body[aria-busy="true"] { opacity: 0.72; }

/* filters */
/* An equal-height segmented control that always fits: three long labels share the width, All takes less. */
.chips.rem-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.62fr); width: 100%; max-width: 30rem; margin-top: 0.1rem; overflow: visible; }
.rem-filters .chip { justify-content: center; min-width: 0; padding: 0 0.35rem; font-size: var(--text-md); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) {
  .rem-filters .chip { padding: 0 0.15rem; font-size: var(--text-sm); letter-spacing: -0.01em; }
}

/* rows */
.rem-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
.rem-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; min-width: 0; }
.rem-group-title { font-size: var(--text-md); font-weight: 650; color: var(--text); letter-spacing: -0.01em; padding-left: 0.25rem; }
.rem-group-overdue .rem-group-title { color: var(--danger); }
.rem-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), var(--edge); min-width: 0; overflow: hidden; }
.rem-row { position: relative; display: grid; grid-template-columns: var(--rem-col) minmax(0, 1fr); align-items: start; min-width: 0; transition: background-color 140ms var(--ease); }
.rem-row:hover { background: var(--hover); }
/* inset separators that start at the text, like iOS */
.rem-row + .rem-row::before { content: ""; position: absolute; top: 0; left: var(--rem-col); right: 0; height: 1px; background: var(--border-soft); }
.rem-check { position: relative; display: grid; place-items: center; width: var(--ctl); height: var(--ctl); margin: 0.1rem 0 0 0.2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--placeholder); cursor: pointer; font: inherit; } /* ring 3.5:1 on white, 3.3:1 on the row hover */
.rem-check::before, .rem-check::after { content: ""; grid-area: 1 / 1; border-radius: 50%; }
.rem-check::before { width: 19px; height: 19px; box-shadow: inset 0 0 0 1.5px currentColor; transition: box-shadow 160ms var(--ease); }
.rem-check::after { width: 9px; height: 9px; background: currentColor; transform: scale(0); transition: transform 200ms var(--ease); }
.rem-check:hover { color: var(--accent); }
.rem-check.is-done { color: var(--accent); }
.rem-check.is-done::after { transform: scale(1); }
.rem-check:focus-visible { outline: 2px solid var(--accent); outline-offset: -5px; border-radius: 50%; }
.rem-check[aria-disabled="true"] { cursor: progress; }
.rem-check.is-cancelled { cursor: default; color: var(--border); }
.rem-check.is-cancelled::after { width: 11px; height: 1.6px; border-radius: 1px; transform: rotate(-45deg); }
.rem-link { display: grid; gap: 0.1rem; align-content: center; min-width: 0; min-height: 2.6rem; padding: 0.55rem 0.85rem 0.55rem 0.1rem; color: inherit; text-decoration: none; }
.rem-link:focus-visible { outline-offset: -3px; border-radius: var(--radius-xs); }
.rem-title { font-size: var(--text-md); line-height: 1.38; color: var(--text); overflow-wrap: anywhere; }
.rem-note { font-size: var(--text-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* As in every meta row, space alone separates the items. */
.rem-meta { display: flex; flex-wrap: wrap; gap: 0 0.9rem; font-size: var(--text-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.rem-meta:empty { display: none; }
.rem-when.is-overdue { color: var(--danger); }
.rem-row.is-done .rem-title, .rem-row.is-cancelled .rem-title { color: var(--muted); }
.rem-row.is-cancelled .rem-title { text-decoration: line-through; text-decoration-color: var(--faint); }
.rem-row.is-saving .rem-link { opacity: 0.8; }
.rem-row-outcome { grid-column: 2; display: grid; gap: 0.35rem; justify-items: start; padding: 0 0.85rem 0.6rem 0.1rem; }
.rem-row-outcome:empty { display: none; }
.rem-row-outcome .status { font-size: var(--text-sm); }
/* A paused series: a quiet ring with two bars, never a button (resume it on its page). */
.rem-check.is-paused { cursor: default; color: var(--faint); }
.rem-check.is-paused::after { width: 7px; height: 9px; border-radius: 0; background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px, currentColor 5px 7px); transform: none; }
.rem-row.is-paused .rem-title { color: var(--muted); }
/* Occurrences of a series: time and state on the left, the actions for that one occurrence on the right. */
.rem-occ-group { gap: 0.45rem; }
.rem-occ-group > .rem-group-title:focus { outline: none; }
.rem-occs > .rem-occ { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; min-height: 2.6rem; padding: 0.45rem 0.65rem 0.45rem 1rem; }
.rem-occs > .rem-occ + .rem-occ { border-top: 1px solid var(--border-soft); }
.rem-occ-text { display: grid; gap: 0.05rem; min-width: 0; }
.rem-occ-when { font-size: var(--text-md); color: var(--text); font-variant-numeric: tabular-nums; }
.rem-occ-when.is-overdue { color: var(--danger); font-weight: 600; }
.rem-occ-state { font-size: var(--text-sm); color: var(--muted); }
.rem-occ.is-completed .rem-occ-when, .rem-occ.is-skipped .rem-occ-when, .rem-occ.is-missed .rem-occ-when { color: var(--muted); }
.rem-occ-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-left: auto; }
.rem-occ-actions .btn { padding: 0 0.7rem; }
.rem-past-group > .rem-list { border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; }
.rem-every-input { max-width: 6rem; }
.rem-field-control:has(.rem-every-input) { grid-template-columns: auto 1fr; align-items: center; column-gap: 0.6rem; }
.rem-every-unit { font-size: var(--text-md); color: var(--text-2); }
.rem-repeat-hint:empty { display: none; }
/* Header action: "New reminder", shortened on a narrow phone to "New" with " reminder" kept for screen readers. */
.page-actions .rem-new { gap: 0.28em; min-width: 32px; }
@media (max-width: 379px) {
  .page-actions .rem-new { padding: 0 0.7rem; }
  .rem-new-rest { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
.rem-add { display: inline-flex; align-items: center; gap: 0.6rem; justify-self: start; min-height: var(--ctl); padding: 0 0.6rem 0 0.4rem; border-radius: var(--radius-sm); color: var(--accent-strong); font-size: var(--text-md); font-weight: 560; text-decoration: none; transition: background-color 140ms var(--ease); }
.rem-add:hover { background: var(--accent-soft); }
.rem-add-icon { position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.rem-add-icon::before, .rem-add-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.8px; margin: -0.9px 0 0 -4.5px; border-radius: 1px; background: var(--on-accent); }
.rem-add-icon::after { transform: rotate(90deg); }
/* The same empty state as every other page: the arc over its horizon on a softly lit panel. */
.rem-empty { display: grid; justify-items: center; gap: 0.6rem; padding: 2rem 1rem 1.75rem; text-align: center; border-radius: var(--radius-lg); background: radial-gradient(18rem 9rem at 50% 0%, rgb(var(--hl-rgb) / 0.22), transparent 70%), var(--surface); box-shadow: var(--shadow), var(--edge); }
.rem-empty-title { font-size: var(--text-body); font-weight: 600; color: var(--text-2); }
.rem-empty .btn { margin-top: 0.35rem; }

/* detail */
.rem-summary { display: grid; gap: 0.1rem; padding: 0.85rem 1rem; }
.rem-summary-when { font-size: var(--text-body); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.rem-summary-when.is-overdue { color: var(--danger); }
.rem-summary-state { font-size: var(--text-md); color: var(--muted); }
.rem-summary-note { margin-top: 0.5rem; font-size: var(--text-md); color: var(--text-2); }
.rem-props { margin: 0; display: grid; }
.rem-prop { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0.15rem 1rem; align-items: baseline; min-height: var(--ctl); padding: 0.5rem 1rem; font-size: var(--text-md); }
.rem-prop + .rem-prop { border-top: 1px solid var(--border-soft); }
.rem-prop dt { color: var(--muted); }
.rem-prop dd { margin: 0; text-align: right; color: var(--text); overflow-wrap: anywhere; }
.rem-footnote { padding-left: 0.25rem; margin-top: -0.35rem; }
@media (max-width: 380px) {
  .rem-prop { grid-template-columns: minmax(0, 1fr); }
  .rem-prop dd { text-align: left; }
}

/* compose and edit */
.rem-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; min-width: 0; }
.rem-compose { padding: 0.25rem 0.35rem; }
.rem-panel input.rem-title-input { min-height: calc(var(--ctl) + 8px); padding: 0.45rem 0.75rem; border: 0; background: transparent; box-shadow: none; font-size: var(--text-lg); font-weight: 560; letter-spacing: -0.012em; }
.rem-panel input.rem-title-input:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); border-radius: var(--radius-sm) var(--radius-sm) 2px 2px; }
.rem-field { display: grid; gap: 0.3rem; padding: 0.6rem 0.85rem; min-width: 0; }
.rem-field + .rem-field { border-top: 1px solid var(--border-soft); }
.rem-field[hidden] + .rem-field { border-top: 0; }
.rem-field > label { font-size: var(--text-md); font-weight: 600; color: var(--text-2); }
.rem-field-control { display: grid; gap: 0.5rem; min-width: 0; }
.rem-field input[type="datetime-local"] { display: block; min-width: 0; }
.rem-field input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; }
@media (min-width: 600px) {
  .rem-field { grid-template-columns: 8rem minmax(0, 1fr); column-gap: 0.85rem; align-items: start; }
  .rem-field > label { padding-top: calc((var(--ctl) - 1.3em) / 2); }
}
.rem-quick { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rem-quick-btn { min-height: var(--ctl); padding: 0 0.8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); font: inherit; font-size: var(--text-md); font-weight: 520; cursor: pointer; transition: background-color 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease); }
.rem-quick-btn:hover { border-color: var(--border-strong); background: var(--hover); }
.rem-quick-btn[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 620; }
.rem-details > summary { justify-content: space-between; gap: 0.75rem; min-height: calc(var(--ctl) + 4px); padding: 0 0.85rem; border-radius: var(--radius); color: var(--text); font-size: var(--text-md); }
.rem-details > summary::before { display: none; }
.rem-details > summary::after { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-right: 1.6px solid var(--faint); border-bottom: 1.6px solid var(--faint); transform: rotate(-45deg); transition: transform 160ms var(--ease); }
.rem-details[open] > summary::after { transform: rotate(45deg); }
.rem-details[open] > summary { border-bottom: 1px solid var(--border-soft); border-radius: var(--radius) var(--radius) 0 0; }
.rem-details > summary:focus-visible { outline-offset: -2px; }
.rem-details-summary { flex: 1; min-width: 0; text-align: right; font-size: var(--text-sm); font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rem-save { padding-top: 0.1rem; }

/*
 * ---------- tickets: a dense, Linear-style list ----------
 * One hairline surface, quiet tinted section bands, 36px single-line rows on a wide screen (two tight lines on a
 * phone), a status button per row that opens the move menu, and drag between sections. Small type, tabular IDs,
 * calm project labels, and colour only where it means something: priority, status, overdue, running.
 */
/* The page puts generous space between its blocks; the list sits closer to its own toolbar. */
.tl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; margin: -0.25rem 0 -0.8rem; min-width: 0; }
.tl-search { position: relative; flex: 1 1 15rem; max-width: 22rem; min-width: 0; }
.tl-search-icon { position: absolute; left: 0.72rem; top: 50%; width: 11px; height: 11px; margin-top: -7px; border: 1.6px solid var(--faint); border-radius: 50%; pointer-events: none; }
.tl-search-icon::after { content: ""; position: absolute; right: -4px; bottom: -3px; width: 5px; height: 1.6px; border-radius: 1px; background: var(--faint); transform: rotate(45deg); }
.tl-toolbar input.tl-search-input { min-height: var(--ctl); padding: 0.3rem 0.75rem 0.3rem 1.95rem; border-color: var(--border); border-radius: var(--radius-sm); font-size: var(--text-md); box-shadow: 0 1px 1px rgb(var(--shade-rgb) / 0.03); }
.tl-picks { display: flex; align-items: center; gap: 0.35rem; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.tl-picks::-webkit-scrollbar { display: none; }
.tl-pick { position: relative; flex: none; display: inline-flex; }
.tl-pick::after { content: ""; position: absolute; right: 0.65rem; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; color: var(--faint); transform: rotate(45deg); pointer-events: none; }
/* A select is as wide as its longest option, so a long project name would stretch its pill across the row: each pill is
   capped and its chosen text ends in an ellipsis instead. */
.tl-toolbar select.tl-pick-select { -webkit-appearance: none; appearance: none; width: auto; max-width: 13rem; min-height: var(--ctl); padding: 0.3rem 1.7rem 0.3rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--text-2); font-size: var(--text-sm); font-weight: 540; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; transition: border-color 140ms var(--ease), background-color 140ms var(--ease), color 140ms var(--ease); }
.tl-toolbar select.tl-pick-select:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface); }
/* Phones: the four filters in two even columns, all in sight rather than scrolled past the edge. */
@media (max-width: 639px) {
  .tl-toolbar { margin-bottom: -0.6rem; }
  .tl-search { flex-basis: 100%; max-width: none; }
  .tl-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; overflow: visible; margin: 0; padding: 0; }
  .tl-picks > .tl-pick, .tl-toolbar .tl-picks select.tl-pick-select { width: 100%; max-width: none; }
  .tl-picks > .btn { grid-column: 1 / -1; }
}
.tl-pick.is-set select.tl-pick-select { border-style: solid; border-color: color-mix(in srgb, var(--accent) 38%, transparent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.tl-pick.is-set::after { color: var(--accent); }
.tl-toolbar .btn { min-height: var(--ctl); padding: 0 0.75rem; font-size: var(--text-sm); border-radius: var(--radius-sm); }

.tl-board { min-width: 0; }
.ticket-groups { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; background: var(--surface); border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--border-soft), 0 1px 2px rgb(var(--shade-rgb) / 0.04), 0 10px 28px -20px rgb(var(--shade-rgb) / 0.22); overflow: hidden; }
.ticket-group { min-width: 0; transition: background-color 120ms var(--ease), opacity 120ms var(--ease); }
.ticket-group + .ticket-group { border-top: 1px solid var(--border-soft); }
.ticket-groups .group-head { display: flex; align-items: center; gap: 0.55rem; min-height: 36px; margin: 0; padding: 0 0.9rem; background: color-mix(in srgb, var(--surface-2) 80%, var(--surface)); border-bottom: 1px solid var(--border-soft); color: var(--text); font-size: var(--text-sm); font-weight: 640; letter-spacing: -0.003em; }
.ticket-groups .group-head .row-mark { margin: 0; }
.group-count { color: var(--muted); font-size: var(--text-sm); font-weight: 520; font-variant-numeric: tabular-nums; }
.group-hint { margin-left: auto; color: var(--muted); font-size: var(--text-xs); font-weight: 540; }
.group-hint:empty { display: none; }
/* Closed sections fold away; the shared `details > summary` rule supplies the chevron. */
.ticket-groups summary.group-head { border-radius: 0; cursor: pointer; }
.ticket-groups summary.group-head:hover { background: var(--hover); }
.ticket-groups summary.group-head:focus-visible { outline-offset: -2px; }
.ticket-groups details:not([open]) > summary.group-head { border-bottom: 0; }
.ticket-rows { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.ticket-rows > li + li { border-top: 1px solid var(--border-soft); }
.ticket-group .more { padding: 0.35rem 0; border-top: 1px solid var(--border-soft); }
.ticket-group .more .btn { min-height: 32px; font-size: var(--text-sm); }

/* Phone: line one is priority, status and the title at full width; line two the ID, then project, due date and assignee. */
.ticket-row { position: relative; display: grid; grid-template-columns: 16px 22px auto minmax(0, 1fr); grid-template-areas: "prio status title title" ". . id meta"; align-items: center; column-gap: 0.55rem; row-gap: 0.2rem; min-width: 0; padding: 0.55rem 0.85rem; font-size: var(--text-md); transition: background-color 110ms var(--ease), opacity 120ms var(--ease); }
.ticket-row:hover { background: var(--hover); }
.row-prio { grid-area: prio; display: inline-flex; }
.row-id { grid-area: id; color: var(--muted); font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; white-space: nowrap; }
.row-status { grid-area: status; position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent; cursor: pointer; }
.row-status .row-mark { margin: 0; }
.row-status:hover, .row-status[aria-expanded="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.row-status:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.row-status[aria-disabled="true"] { cursor: not-allowed; }
.row-status[aria-disabled="true"]:hover { background: transparent; box-shadow: none; }
/* The link covers the whole row, under the status button, so any click opens the ticket. */
.row-link { grid-area: title; display: flex; align-items: baseline; gap: 0.55rem; min-width: 0; color: var(--text); text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:focus-visible { outline: none; }
.row-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.row-title { min-width: 0; font-weight: 500; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.row-notes { display: none; }
.row-closed .row-title { color: var(--muted); }
.row-meta { grid-area: meta; display: flex; align-items: center; gap: 0.45rem; min-width: 0; font-size: var(--text-xs); color: var(--muted); }
.row-meta .badge { font-size: var(--text-xs); padding: 0.06rem 0.5rem; }
/* Project: plain grey text after a small outlined square, a quiet icon rather than a coloured label. */
.row-project { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; max-width: 11rem; color: var(--text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-project::before { content: ""; flex: none; width: 9px; height: 9px; border: 1.4px solid var(--muted); border-radius: 3px; }
.row-due { font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-due.is-overdue { color: var(--danger); font-weight: 560; }
.row-running { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--accent-strong); font-weight: 600; white-space: nowrap; }
.row-running::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: tl-pulse 1.8s var(--ease) infinite; }
@keyframes tl-pulse { 50% { box-shadow: 0 0 0 5px transparent; } }
/* Assignee: rounded-square tiles. Ink with a sea-glass spark for an agent, a person for a human, a dashed outline when nobody is assigned. */
.row-assignee { position: relative; flex: none; width: 20px; height: 20px; border-radius: var(--radius-xs); margin-left: auto; }
.row-assignee.who-agent { background: linear-gradient(160deg, var(--ink-3), var(--ink)); }
.row-assignee.who-agent::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--seaglass); transform: rotate(45deg); border-radius: 1px; }
.row-assignee.who-human { background: var(--border); overflow: hidden; }
.row-assignee.who-human::before { content: ""; position: absolute; left: 50%; top: 4px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--muted); }
.row-assignee.who-human::after { content: ""; position: absolute; left: 50%; top: 12px; width: 13px; height: 10px; margin-left: -6.5px; border-radius: 50% 50% 0 0; background: var(--muted); }
.row-assignee.who-none { outline: 1.4px dashed var(--border-strong); outline-offset: -1.4px; }

/* Wide: one 36px line, details right-aligned, notes as a quiet tail after the title. */
@media (min-width: 900px) {
  .ticket-row { grid-template-columns: 16px 4.25rem 22px minmax(0, 1fr) auto; grid-template-areas: "prio id status title meta"; min-height: 36px; padding: 0 0.9rem; column-gap: 0.6rem; }
  .row-title { display: block; white-space: nowrap; text-overflow: ellipsis; flex: 0 1 auto; }
  .row-notes { display: block; flex: 1 1 0; min-width: 0; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .row-notes > span + span { margin-left: 0.85rem; }
  .row-meta { justify-content: flex-end; gap: 0.6rem; padding-left: 0.75rem; }
  .row-assignee { margin-left: 0.15rem; }
}
/* Touch: each control keeps a 44px target without making rows tall. */
@media (pointer: coarse) {
  .row-status::before { content: ""; position: absolute; inset: -11px; }
  .ticket-groups .group-head { min-height: 44px; }
}

/* Dragging: the picked-up row dims, each section shows whether it can take it, the one under the pointer lights up. */
.ticket-row:not(.is-claimed) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* The row itself slides through the list while dragged, as the place it will land: a quiet tinted slot. */
.ticket-row[data-dragged="true"] { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.ticket-row[data-dragged="true"] > * { opacity: 0.3; }
.ticket-groups[data-dragging="true"], .ticket-groups[data-dragging="true"] * { cursor: grabbing; }
/* The copy that follows the pointer: the same row, lifted. */
.tl-ghost { position: fixed; z-index: 50; top: 0; left: 0; margin: 0; list-style: none; pointer-events: none; background: var(--surface); border-radius: var(--radius-sm); box-shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.08), 0 14px 32px -10px rgb(var(--shade-rgb) / 0.35); opacity: 0.96; will-change: transform; }
.ticket-row[aria-busy="true"] { opacity: 0.55; pointer-events: none; }
.ticket-groups[data-dragging="true"] .ticket-row:hover { background: transparent; }
.ticket-group[data-drop="no"] { opacity: 0.5; }
.ticket-group[data-drop="ok"] .ticket-rows:empty { min-height: 2.6rem; background: repeating-linear-gradient(-45deg, transparent 0 7px, color-mix(in srgb, var(--accent-soft) 70%, transparent) 7px 8px); }
.ticket-group[data-over="true"] { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent); }
.ticket-group[data-over="true"] > .group-head { background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface)); }

/* Status menu: a small popover anchored to the row's status button. */
.tl-menu { position: fixed; z-index: 40; display: grid; gap: 1px; width: 14.5rem; padding: 0.3rem; border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.07), 0 12px 32px -8px rgb(var(--shade-rgb) / 0.28), 0 2px 6px rgb(var(--shade-rgb) / 0.06); animation: tl-pop 140ms var(--ease); }
/* Starts partly visible, so the menu is readable even where animations are paused. */
@keyframes tl-pop { from { opacity: 0.5; transform: translateY(-3px) scale(0.98); } }
.tl-menu-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; min-height: var(--ctl-sm); padding: 0 0.55rem; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text); font: inherit; font-size: var(--text-md); text-align: left; cursor: pointer; }
.tl-menu-item .row-mark { margin: 0; }
.tl-menu-item:hover, .tl-menu-item:focus-visible { background: var(--hover); outline: none; }
.tl-menu-item:focus-visible { box-shadow: inset 0 0 0 1.5px var(--accent); }
.tl-menu-item[aria-checked="true"] { font-weight: 620; }
.tl-menu-item[aria-disabled="true"] { color: var(--muted); cursor: default; }
.tl-menu-item[aria-disabled="true"] .row-mark { opacity: 0.55; }
.tl-menu-hint { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.tl-menu-check { width: 9px; height: 5px; margin-right: 0.2rem; border-left: 1.7px solid var(--accent); border-bottom: 1.7px solid var(--accent); transform: rotate(-45deg) translateY(-2px); }

/* The move bar: an ink pill at the bottom, above the phone tab bar. */
.tl-toast { position: fixed; z-index: 45; left: 50%; bottom: calc(var(--tabbar-h) + max(10px, env(safe-area-inset-bottom, 0px)) + 0.75rem); transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.8rem; width: max-content; max-width: min(36rem, calc(100vw - 1.5rem)); padding: 0.45rem 0.45rem 0.45rem 1rem; border-radius: var(--radius-sm); background: linear-gradient(180deg, var(--ink-3), var(--ink)); color: var(--ink-text); box-shadow: 0 18px 40px -14px rgb(var(--shade-rgb) / 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08); font-size: var(--text-md); animation: tl-rise 180ms var(--ease); }
@keyframes tl-rise { from { opacity: 0.5; transform: translate(-50%, 6px); } }
@media (min-width: 900px) { .tl-toast { bottom: 1.5rem; } }
.tl-toast[data-tone="error"] .tl-toast-text { color: var(--toast-danger-text); }
.tl-toast[role="status"] { flex-wrap: nowrap; }
.tl-toast-text { flex: 0 1 auto; min-width: 0; line-height: 1.4; }
.tl-toast[role="group"] .tl-toast-text { flex: 1 1 100%; }
.tl-toast-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; flex: 1 1 18rem; }
.tl-toast-actions { display: flex; align-items: center; gap: 0.2rem; margin-left: auto; }
.tl-toast .btn { min-height: var(--ctl-sm); padding: 0 0.75rem; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.tl-toast .btn-ghost { color: var(--seaglass); }
.tl-toast .btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.tl-toast .btn-primary { background: var(--seaglass); color: var(--ink); box-shadow: none; }
.tl-toast .btn-primary:hover:not(:disabled) { background: var(--hl-hover); }
.tl-toast input.tl-toast-input { flex: 1 1 12rem; min-height: var(--ctl); padding: 0.3rem 0.65rem; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.07); color: #fff; font-size: var(--text-md); }
.tl-toast input.tl-toast-input::placeholder { color: rgba(220, 236, 230, 0.55); }
.tl-toast input.tl-toast-input:focus-visible { border-color: var(--seaglass); box-shadow: 0 0 0 3px rgb(var(--hl-rgb) / 0.22); }
.tl-toast-close { position: relative; width: var(--ctl-sm); height: var(--ctl-sm); padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); cursor: pointer; }
.tl-toast-close::before, .tl-toast-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: currentColor; transform: rotate(45deg); }
.tl-toast-close::after { transform: rotate(-45deg); }
.tl-toast-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.tl-toast-close:focus-visible, .tl-toast :focus-visible { outline: 2px solid var(--seaglass); outline-offset: 1px; }


/* ---------- Today, reminders first (17 Oct 2026) ----------
 * The same family as the iPhone and Mac comps (docs/ios-app-plan/screens): the ink hero with three honest counts, then
 * reminders as one grouped list with the circle to complete on the left and the time on the right, then only the tickets
 * waiting on Jeremy, then agent work as a single line of counts. */
.glance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.glance-value::before { display: none; }
.glance-value { font-size: var(--text-xl); }
.tone-reminders .glance-value { color: var(--tone-warm); }
.today { gap: 1rem; }
.today-section { display: grid; gap: 0.45rem; }
.today-section > h2 { font: 650 var(--text-lg)/1.25 var(--display); letter-spacing: -0.015em; padding-left: 0.2rem; min-height: 2rem; align-items: center; }
.today-section > .more:has(> [hidden]) { display: none; }
.rem-row.has-time .rem-link { grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; }
.rem-row.has-time .rem-link > :not(.rem-time) { grid-column: 1; }
.rem-time { grid-column: 2; grid-row: 1 / span 3; align-self: center; font: 600 var(--text-md)/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.rem-time.is-overdue { color: var(--danger); }
/* Phones: a time with its day ("Yesterday, 11:58 PM") breaks after the day, so the title keeps most of the row. */
@media (max-width: 599px) { .rem-time { max-width: 5.75rem; white-space: normal; overflow-wrap: normal; text-align: right; } }
.rem-nag { font-size: var(--text-sm); color: var(--warn); font-weight: 600; }
.today-rems .rem-title { font-size: var(--text-body); }
.today-decisions .today-card { padding-top: 0.6rem; padding-bottom: 0.6rem; }
/* An assistant's message that needs Jeremy: the header's inbox tray, small and warm, in the column where tickets keep their status ring. */
.row-mark.note-mark { border: 0; border-radius: 0; color: var(--warn); }
.note-mark svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.today-note .today-card-head h3 { overflow-wrap: anywhere; }
.today-agents { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.5rem 0.6rem 0.5rem 0.9rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), var(--edge); min-width: 0; }
.today-agents-label { font: 600 var(--text-sm)/1 var(--sans); color: var(--muted); margin-right: 0.35rem; }
.today-agents .chip { min-height: 30px; padding: 0 0.75rem; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: var(--text-sm); }
.today-agents .chip:hover { background: var(--accent-soft); color: var(--accent-strong); }
.today-agents-none { color: var(--muted); font-size: var(--text-sm); }
/* Ticket IDs read the same everywhere: monospaced, in the deep accent (Today, the ticket page, the iPhone and Mac apps). */
.row-id { font-family: var(--mono); font-weight: 600; color: var(--accent-strong); letter-spacing: 0; }
.row-closed .row-id { color: var(--muted); }
.today-empty .row { justify-content: center; }
:root[data-theme="journal"] .today-agents .chip, :root[data-scheme="dark"] .today-agents .chip { background: var(--surface-2); }
@media (pointer: coarse) { .today-agents .chip { min-height: 36px; } }


/* ---------- a reminder: actions up top, "Until done" as native controls (17 Oct 2026) ---------- */
.rem-summary { gap: 0.15rem; padding: 1rem 1.1rem; }
.rem-summary .rem-occ-actions { margin: 0.7rem 0 0; }
.rem-snooze-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; flex-basis: 100%; padding-top: 0.25rem; }
.rem-snooze-pick[hidden] { display: none; }
.rem-snooze-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-md); color: var(--text-2); }
.rem-snooze-input { width: auto; }
.rem-snooze-note { font-size: var(--text-sm); color: var(--danger); }
.rem-snooze-note:empty { display: none; }
.rem-until { gap: 0.4rem; }
.rem-form-group { overflow: hidden; }
.rem-form-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3rem; padding: 0.4rem 0.75rem 0.4rem 1rem; font-size: var(--text-md); color: var(--text); }
.rem-form-row + .rem-form-row { border-top: 1px solid var(--border-soft); }
.rem-form-row select, .rem-form-row input[type="time"] { width: auto; }
.rem-quiet { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.rem-quiet-to { color: var(--muted); font-size: var(--text-sm); }
.rem-form-save { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; padding: 0.45rem 0.75rem; border-top: 1px solid var(--border-soft); }
.rem-form-save:has(> .btn[hidden]):has(> .rem-snooze-note:empty) { display: none; }
input.switch { appearance: none; -webkit-appearance: none; position: relative; width: 46px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 14px; background: var(--border-strong); cursor: pointer; flex: none; transition: background-color 160ms var(--ease); }
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(var(--shade-rgb) / 0.3); transition: transform 180ms var(--ease); }
input.switch:checked { background: var(--accent); }
input.switch:checked::after { transform: translateX(18px); }
input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 480px) {
  .rem-form-row:has(.rem-quiet) { flex-wrap: wrap; }
  .rem-summary .rem-occ-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rem-summary .rem-snooze-pick { grid-column: 1 / -1; }
}


/* ---------- a ticket: what it waits on first, criteria as a checklist, decisions folded (17 Oct 2026) ---------- */
.tk-next { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 0.2rem; padding: 0.8rem 1rem; border-radius: var(--radius); color: var(--ink-text); background: linear-gradient(165deg, var(--ink-3), var(--ink) 80%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.tk-next::after { content: ""; position: absolute; z-index: -1; right: -6rem; top: 0.6rem; width: 13rem; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(var(--hl-rgb) / 0.2); }
.tk-next-k { font: 600 var(--text-sm)/1.2 var(--sans); color: var(--seaglass); }
.tk-next-x { font-size: var(--text-md); line-height: 1.45; color: #fff; }
.tk-next a { color: var(--seaglass); }
.tk-next code { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.1); color: #fff; }
.tk-criteria { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.tk-crit { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0.6rem; align-items: start; font-size: var(--text-md); line-height: 1.45; }
.tk-crit-mark { width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border-strong); display: grid; place-items: center; }
.tk-crit.is-open .tk-crit-mark { box-shadow: none; border: 1.5px dashed var(--faint); }
.tk-crit.is-passed .tk-crit-mark { background: var(--accent); box-shadow: none; }
.tk-crit.is-passed .tk-crit-mark::after { content: ""; width: 8px; height: 4.5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.tk-crit.is-failed .tk-crit-mark { background: var(--danger); box-shadow: none; }
.tk-crit.is-failed .tk-crit-mark::after { content: ""; width: 8px; height: 2px; background: #fff; border-radius: 1px; }
.wf-card { gap: 0.6rem; }
.wf-block { border-top: 1px solid var(--border-soft); padding-top: 0.6rem; }
.wf-block > summary { display: flex; align-items: center; gap: 0.75rem; min-height: var(--ctl); cursor: pointer; }
.wf-title { font-weight: 650; font-size: var(--text-body); color: var(--text); }
.wf-state { margin-left: auto; font-size: var(--text-sm); color: var(--muted); }
.wf-block[open] > :not(summary) { margin-top: 0.6rem; }
:root[data-theme="journal"] .tk-next, :root[data-scheme="dark"] .tk-next { background: var(--surface-2); }

/* ---------- labels (COVE-353): a tinted pill per label, its hue carried by --lc; never a side strip ---------- */
.lbl { --lc: #6b7b79; display: inline-block; vertical-align: middle; max-width: 12rem; min-height: 1.3rem; padding: 0 0.5rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; line-height: 1.3rem; letter-spacing: 0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in oklab, var(--lc) 66%, var(--text)); background: color-mix(in srgb, var(--lc) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 22%, transparent); }
.lbl-gray { --lc: #6b7b79; }
.lbl-red { --lc: #cf3f37; }
.lbl-orange { --lc: #cf6512; }
.lbl-yellow { --lc: #b48606; }
.lbl-green { --lc: #2c9457; }
.lbl-teal { --lc: #0e8c80; }
.lbl-blue { --lc: #2f6bd1; }
.lbl-indigo { --lc: #5753d0; }
.lbl-purple { --lc: #8b4cc2; }
.lbl-pink { --lc: #c9437f; }
.lbl.is-archived { color: var(--muted); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.lbl-more { color: var(--muted); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-soft); font-variant-numeric: tabular-nums; }
.lbls { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; overflow: hidden; }
.lbls-wrap { flex-wrap: wrap; overflow: visible; }
.row-meta .lbls { flex: none; }
.row-meta .lbl { flex: none; max-width: 8.5rem; }
/* Phone rows show one label and their own count; wide rows two. Only one of the two counts is ever shown. */
.lbl-wide-only, .lbl-more-wide { display: none; }
@media (min-width: 900px) {
  .lbl-wide-only, .lbl-more-wide { display: inline-block; }
  .lbl-more-narrow { display: none; }
}
@media (max-width: 899px) { .row-meta .lbl { max-width: 7rem; } }
/* A long project title must not push the label filter out of reach. */
.tl-toolbar select.tl-pick-select { max-width: 13rem; text-overflow: ellipsis; }
.meta-row .lbls { flex-wrap: wrap; }

/* The picker: the status menu's popover with a filter field, a check per label and a footer. */
.tl-menu.lp { width: 16.5rem; padding: 0.4rem; gap: 0.35rem; }
.lp .lp-search { min-height: var(--ctl-sm); padding: 0.25rem 0.6rem; font-size: var(--text-md); border-radius: var(--radius-xs); }
.lp-list { display: grid; gap: 1px; max-height: min(15rem, 50vh); overflow-y: auto; overscroll-behavior: contain; }
.tl-menu-item.lp-item { grid-template-columns: 16px 10px minmax(0, 1fr) auto; }
.lp-box { width: 15px; height: 15px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--border-strong); display: grid; place-items: center; transition: background-color 120ms var(--ease); }
.lp-item[aria-checked="true"] .lp-box { background: var(--accent); box-shadow: none; }
.lp-item[aria-checked="true"] .lp-box::after { content: ""; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.lp-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--lc); }
.tl-menu-item.lp-create { grid-template-columns: 16px minmax(0, 1fr); color: var(--accent-strong); font-weight: 560; }
.tl-menu-item.lp-create .tl-menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-plus { position: relative; width: 14px; height: 14px; }
.lp-plus::before, .lp-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; margin: -0.8px 0 0 -5px; border-radius: 1px; background: currentColor; }
.lp-plus::after { transform: rotate(90deg); }
.lp-empty { margin: 0; padding: 0.45rem 0.55rem; color: var(--muted); font-size: var(--text-sm); }
.lp-note:empty { display: none; }
.lp-note .status { margin: 0; padding: 0 0.3rem; font-size: var(--text-sm); }
.lp-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.2rem 0.05rem 0.35rem; border-top: 1px solid var(--border-soft); }
.lp-manage { font-size: var(--text-sm); color: var(--text-2); }
.lp-foot .btn { min-height: 30px; padding: 0 0.8rem; font-size: var(--text-sm); }

/* On a ticket: the labels under status and priority. */
.tk-labels { display: grid; gap: 0.5rem; margin-top: 0.25rem; padding-top: 0.85rem; border-top: 1px solid var(--border-soft); }
.tk-labels-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tk-labels-head .small-heading { margin: 0; }
.btn.tk-labels-edit { min-height: 30px; padding: 0 0.65rem; font-size: var(--text-sm); }
.tk-labels .lbl { font-size: var(--text-sm); min-height: 1.6rem; line-height: 1.6rem; padding: 0 0.65rem; max-width: 100%; }
.tk-labels-none { margin: 0; font-size: var(--text-sm); }

/* In the editor: toggle pills. Off, a quiet outline with the label's swatch; on, the label's own tint and a tick. */
.lt-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lt { position: relative; display: inline-flex; }
.lt-box { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.lt > .lbl { display: inline-flex; align-items: center; gap: 0.35rem; min-height: var(--ctl-sm); padding: 0 0.8rem; font-size: var(--text-sm); line-height: 1.2; max-width: 16rem; cursor: pointer; transition: background-color 120ms var(--ease), box-shadow 120ms var(--ease), color 120ms var(--ease); }
.lt-box:not(:checked) + .lbl { color: var(--text-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.lt-box:not(:checked) + .lbl::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--lc); }
.lt-box:not(:checked) + .lbl:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--border-strong); }
.lt-box:checked + .lbl::before { content: ""; flex: none; width: 8px; height: 4.5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-1.5px) rotate(-45deg); }
.lt-box:focus-visible + .lbl { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The labels page: a composer card, then the list in the same surface as the ticket list. */
.lb-page { display: grid; gap: 1.25rem; max-width: 48rem; min-width: 0; }
.lb-new { display: grid; gap: 0.8rem; }
.lb-new-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; }
.lb-new-head h2 { margin: 0; font-size: var(--text-lg); }
.lb-new-fields { display: grid; gap: 0.5rem; }
@media (min-width: 640px) { .lb-new-fields { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }
.lb-new-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.lb-new-foot .hint { margin: 0; max-width: 40ch; }
.lb-preview { display: inline-flex; min-width: 0; max-width: 60%; }
.lb-preview .lbl { font-size: var(--text-sm); min-height: 1.6rem; line-height: 1.6rem; padding: 0 0.7rem; max-width: 100%; }
.lc-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lc { position: relative; display: inline-flex; }
.lc-radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.lc-swatch { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--lc); box-shadow: inset 0 0 0 1px rgb(var(--shade-rgb) / 0.1); cursor: pointer; transition: transform 120ms var(--ease), box-shadow 120ms var(--ease); }
.lc-swatch:hover { transform: translateY(-1px); }
.lc-radio:checked + .lc-swatch { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--lc); }
.lc-radio:checked + .lc-swatch::after { content: ""; width: 10px; height: 5.5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.lc-radio:focus-visible + .lc-swatch { outline: 2px solid var(--accent); outline-offset: 5px; }
@media (pointer: coarse) { .lc-swatch { width: 40px; height: 40px; } }
.lb-lists { display: grid; gap: 1rem; min-width: 0; }
.lb-list { list-style: none; margin: 0; padding: 0; min-width: 0; background: var(--surface); border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--border-soft), 0 1px 2px rgb(var(--shade-rgb) / 0.04), 0 10px 28px -20px rgb(var(--shade-rgb) / 0.22); overflow: hidden; }
.lb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; min-width: 0; padding: 0.7rem 0.6rem 0.7rem 0.9rem; transition: background-color 110ms var(--ease); }
.lb-row + .lb-row { border-top: 1px solid var(--border-soft); }
.lb-row:hover:not(.is-editing) { background: var(--hover); }
.lb-main { flex: 1 1 12rem; display: grid; justify-items: start; gap: 0.3rem; min-width: 0; }
.lb-main .lbl { font-size: var(--text-sm); min-height: 1.6rem; line-height: 1.6rem; padding: 0 0.7rem; max-width: 100%; }
.lb-desc { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.4; overflow-wrap: anywhere; }
.lb-count { color: var(--text-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; }
.lb-count:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.lb-actions { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.lb-actions .btn { min-height: 30px; padding: 0 0.65rem; font-size: var(--text-sm); }
.lb-outcome { flex: 1 1 100%; min-width: 0; }
.lb-outcome:empty { display: none; }
.lb-outcome .status { margin: 0; }
.lb-row.is-editing { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.lb-edit { flex: 1 1 100%; display: grid; gap: 0.65rem; min-width: 0; }
.lb-edit-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.75rem; }
.lb-edit-top .lb-preview { max-width: 12rem; }
.lb-edit .lb-actions { margin-left: 0; }
.lb-archived > summary { min-height: var(--ctl); display: flex; align-items: center; color: var(--text-2); font-size: var(--text-md); font-weight: 600; cursor: pointer; }
.lb-archived[open] > .hint { margin: 0 0 0.6rem; }
@media (max-width: 520px) {
  .lb-row { padding-right: 0.5rem; }
  .lb-count { order: 3; }
  .lb-actions { order: 2; }
}

/* ---------- documents (COVE-351): long-form Markdown that reads like a page ---------- */
.doc-surface { min-width: 0; background: var(--surface); border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--border-soft), 0 1px 2px rgb(var(--shade-rgb) / 0.04), 0 10px 28px -20px rgb(var(--shade-rgb) / 0.22); overflow: hidden; }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.doc-row + .doc-row { border-top: 1px solid var(--border-soft); }
.doc-link { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.7rem 0.9rem; color: var(--text); text-decoration: none; transition: background-color 110ms var(--ease); }
.doc-link:hover { background: var(--hover); }
.doc-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* A page with a folded corner and three lines of text, drawn in CSS. */
.doc-glyph { position: relative; width: 15px; height: 19px; margin-top: 1px; border-radius: 2.5px 5px 2.5px 2.5px; box-shadow: inset 0 0 0 1.4px var(--muted); background: linear-gradient(var(--muted), var(--muted)) 3.5px 7px / 7px 1.3px no-repeat, linear-gradient(var(--muted), var(--muted)) 3.5px 10.5px / 8px 1.3px no-repeat, linear-gradient(var(--muted), var(--muted)) 3.5px 14px / 5px 1.3px no-repeat; }
.doc-row.is-archived .doc-glyph { opacity: 0.55; }
.doc-text { display: grid; gap: 0.18rem; min-width: 0; }
.doc-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.doc-row.is-archived .doc-title { color: var(--muted); }
.doc-excerpt { color: var(--text-2); font-size: var(--text-sm); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.85rem; color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.doc-where { color: var(--text-2); font-weight: 560; min-width: 0; overflow-wrap: anywhere; }
.doc-list-page .doc-link { padding: 0.8rem 1rem; }
.tl-toolbar .chips { flex: none; }

/* Reading: a paper sheet with a serif text column; on wide screens an outline and the actions sit beside it. */
.doc-page { display: grid; gap: 1.25rem; min-width: 0; }
.doc-sheet { min-width: 0; padding: 1.5rem 1.15rem 2rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), var(--edge); }
@media (min-width: 700px) { .doc-sheet { padding: 2.3rem 3rem 3rem; } }
.doc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin: 0 0 0.85rem; color: var(--muted); font-size: var(--text-sm); }
.doc-crumbs a { color: var(--text-2); font-weight: 560; text-decoration: none; overflow-wrap: anywhere; }
.doc-crumbs a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.doc-sep { color: var(--muted); }
.doc-h { margin: 0; max-width: 40rem; font: 700 clamp(1.5rem, 1.15rem + 1.3vw, 2.15rem)/1.15 var(--display); letter-spacing: -0.022em; color: var(--text); text-wrap: balance; overflow-wrap: anywhere; }
.doc-stamp { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; margin: 0.8rem 0 1.6rem; padding-bottom: 1.15rem; border-bottom: 1px solid var(--border-soft); color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.md.doc-body { max-width: 41rem; gap: 1rem; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.75; color: var(--text); }
.md.doc-body .md-h1 { font-size: 1.4rem; margin-top: 1.1rem; }
.md.doc-body .md-h2 { font-size: 1.18rem; margin-top: 0.9rem; }
.md.doc-body .md-h3 { font-size: 1.05rem; margin-top: 0.6rem; }
.md.doc-body .md-h1, .md.doc-body .md-h2, .md.doc-body .md-h3 { scroll-margin-top: 5rem; }
.md.doc-body [tabindex="-1"]:focus { outline: none; }
.md.doc-body pre, .md.doc-body code { font-family: var(--mono); }
.md.doc-body blockquote { font-style: italic; }
.doc-empty { font-family: var(--serif); }
.doc-side { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.doc-side > .doc-outline { display: none; }
.doc-outline-k { margin: 0 0 0.45rem; color: var(--text-2); font-size: var(--text-sm); font-weight: 650; }
.doc-outline ol { list-style: none; margin: 0; padding: 0 0 0 0.15rem; display: grid; gap: 1px; box-shadow: inset 1px 0 0 var(--border); }
.doc-outline button { display: block; width: 100%; padding: 0.3rem 0.6rem 0.3rem 0.75rem; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text-2); font: inherit; font-size: var(--text-sm); line-height: 1.35; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.doc-outline .lvl-2 button { padding-left: 1.3rem; }
.doc-outline .lvl-3 button { padding-left: 1.85rem; color: var(--muted); }
.doc-outline button:hover { background: var(--hover); color: var(--text); }
.doc-outline button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.doc-outline-phone { margin: -0.6rem 0 1.4rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.doc-outline-phone > summary { min-height: var(--ctl); display: flex; align-items: center; padding: 0 0.85rem; color: var(--text-2); font-size: var(--text-md); font-weight: 600; cursor: pointer; }
.doc-outline-phone .doc-outline { padding: 0 0.6rem 0.7rem; }
.doc-outline-phone .doc-outline-k { display: none; }
.doc-actions { display: grid; justify-items: start; gap: 0.5rem; }
.doc-actions .status { margin: 0; }
@media (min-width: 1100px) {
  .doc-page { grid-template-columns: minmax(0, 1fr) 15.5rem; align-items: start; }
  .doc-side { position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); overflow-y: auto; padding-right: 0.25rem; }
  .doc-side > .doc-outline { display: block; }
  .doc-outline-phone { display: none; }
}

/* Writing: the journal's sheet, wider, with a Write and Preview switch. */
.editor.doc-editor { max-width: 54rem; }
.doc-tabs { justify-self: start; margin: 0.35rem 0 0.15rem; }
.doc-tabs .chip { min-height: 30px; padding: 0 0.75rem; border: 0; background: none; font: inherit; font-size: var(--text-sm); font-weight: 580; cursor: pointer; }
.doc-tabs .chip[aria-pressed="true"] { color: var(--text); background: var(--surface); box-shadow: 0 1px 3px rgb(var(--shade-rgb) / 0.12), var(--edge); }
.doc-editor textarea.doc-input { min-height: 52vh; }
.doc-preview { min-height: 52vh; padding: 0.7rem 0.1rem; }
.doc-hint { margin: 0 0 0 auto; }
@media (max-width: 640px) { .doc-hint { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:active:not(:disabled), .glance-item:active { transform: none; }
}

/* ---------- Account: your data (COVE-380) ---------- */
.data-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.data-copy { display: grid; gap: 0.2rem; min-width: 0; flex: 1 1 18rem; }
.data-copy h3, .data-danger h3 { font-size: var(--text-body); font-weight: 650; color: var(--text); }
.data-danger { margin-top: 0.4rem; padding-top: 1.1rem; border-top: 1px solid var(--border-soft); }
.data-danger h3 { color: var(--danger); }
.data-danger .field { max-width: 20rem; }

/* ---------- attachments (COVE-352): images as thumbnails, other files as rows ---------- */
.at-block { display: grid; gap: 0.55rem; min-width: 0; border-radius: var(--radius-sm); transition: box-shadow 120ms var(--ease), background-color 120ms var(--ease); }
.at-block.is-drop { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); outline: 1.5px dashed var(--accent); outline-offset: -1.5px; }
.at-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.at-head .small-heading { margin: 0; }
.at-head .btn { min-height: 30px; padding: 0 0.65rem; font-size: var(--text-sm); }
.at-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.at-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.6rem; min-width: 0; }
.at-tile { min-width: 0; border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 0 0 1px var(--border-soft), 0 1px 2px rgb(var(--shade-rgb) / 0.04); overflow: hidden; }
.at-thumb { display: block; aspect-ratio: 4 / 3; background: var(--surface-2); }
.at-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.at-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.at-caption { display: grid; gap: 0.05rem; min-width: 0; padding: 0.4rem 0.6rem 0.45rem; font-size: var(--text-xs); }
.at-media { position: relative; }
.at-media .at-remove { position: absolute; top: 6px; right: 6px; min-height: 26px; padding: 0 0.55rem; font-size: var(--text-xs); color: var(--text); background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 1px 3px rgb(var(--shade-rgb) / 0.18); opacity: 0; transition: opacity 120ms var(--ease); }
.at-tile:hover .at-remove, .at-remove:focus-visible { opacity: 1; }
.at-media .at-remove:hover { background: var(--surface); }
@media (pointer: coarse) { .at-media .at-remove { opacity: 1; } }
.at-name { min-width: 0; color: var(--text); font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.at-name { color: var(--accent-strong); text-decoration: none; }
a.at-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.at-size { color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.at-file .at-size { display: flex; flex-wrap: wrap; gap: 0 0.6rem; }
.at-file { grid-column: 1 / -1; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; padding: 0.5rem 0.6rem; }
.at-file .btn { min-height: 28px; padding: 0 0.5rem; font-size: var(--text-xs); }
.at-file-text { display: grid; gap: 0.1rem; min-width: 0; font-size: var(--text-sm); }
/* A file: a page with its extension printed on it. */
.at-glyph { display: grid; place-items: center; width: 2.1rem; height: 2.6rem; border-radius: 4px 9px 4px 4px; background: var(--surface-2); box-shadow: inset 0 0 0 1.4px var(--border-strong); color: var(--text-2); font: 700 0.56rem/1 var(--mono); letter-spacing: 0.02em; }
.at-outcome:empty { display: none; }
.at-outcome .status { margin: 0; }
.at-none { margin: 0; font-size: var(--text-sm); }
.at-block > .hint { margin: 0; }
/* A comment's files sit under its text, a little smaller than the ticket's own. */
.comment-files { margin-top: 0.35rem; }
.comment-files .at-grid { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.5rem; }
/* Files waiting to go with a new comment. */
.at-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.at-chip { display: inline-flex; align-items: center; gap: 0.45rem; max-width: 100%; min-height: 32px; padding: 0 0.2rem 0 0.7rem; border-radius: 999px; background: var(--surface-2); font-size: var(--text-sm); }
.at-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.at-chip-x { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--muted); font: 600 1.05rem/1 var(--sans); cursor: pointer; }
.at-chip-x:hover { background: var(--surface); color: var(--text); }
.at-chip-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

/* Accessibility fixes (COVE-388): past events step back in colour instead of opacity. */
.cal-item.is-past .cal-title, .cal-item.is-past .cal-when, .sc-row.is-past .sc-title, .sc-row.is-past .sc-when { color: var(--muted); }

/* Profile: the existing document library, with deliberate privacy controls. */
.profile-nav { display:flex; gap:.2rem; border-bottom:1px solid var(--border); overflow-x:auto; padding-bottom:.4rem; }
.profile-nav a { flex-shrink:0; padding:.55rem .8rem; border-radius:var(--radius-sm); text-decoration:none; color:var(--text-2); font-size:var(--text-sm); font-weight:600; }
.profile-nav a[aria-current=page] { background:var(--accent-soft); color:var(--accent-strong); }
.profile-nav a:hover { background:var(--hover); }
.profile-intro { display:grid; gap:.4rem; max-width:44rem; }
.profile-intro h2 { font:500 clamp(1.45rem,1.1rem + 1.1vw,1.95rem)/1.15 var(--serif); letter-spacing:-.022em; }
.profile-intro p { margin:0; line-height:1.6; }
.profile-toolbar { margin-bottom:0; }
.profile-type-glyph { color:var(--accent-strong); font-size:1.3rem; line-height:1; }
.profile-record-link { padding-top:1rem!important; padding-bottom:1rem!important; }
.profile-details { display:grid; grid-template-columns:minmax(6rem,1fr) minmax(0,3fr); gap:.45rem 1rem; padding:0 0 1.2rem; margin:0 0 1.5rem; border-bottom:1px solid var(--border-soft); font-size:var(--text-sm); }
.profile-details dt { color:var(--muted); }
.profile-details dd { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.profile-source { border-top:1px solid var(--border-soft); margin-top:1.5rem; padding-top:1rem; font-size:var(--text-sm); overflow-wrap:anywhere; }
.profile-source h3 { font-size:var(--text-sm); }
.profile-source-preview { max-height:20rem; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; padding:1rem; background:var(--surface-2); border-radius:var(--radius-sm); font-size:var(--text-sm); }
.profile-history-row { display:grid; gap:.15rem; padding:.6rem 0; border-bottom:1px solid var(--border-soft); text-decoration:none; color:var(--text); font-size:var(--text-sm); overflow-wrap:anywhere; }
.profile-json { font-family:var(--mono); font-size:var(--text-sm); }
.profile-typed:empty { display:none; }
.profile-card-heading { display:flex; align-items:center; justify-content:space-between; gap:.7rem; flex-wrap:wrap; }
.profile-card-heading h3 { margin:0; }
.profile-grant p { overflow-wrap:anywhere; }
.profile-grant-editor { border:1px solid var(--accent); }
.profile-add-entry { display:flex; gap:.75rem; align-items:end; flex-wrap:wrap; }
.profile-add-entry .field { flex:1 1 15rem; }
.profile-add-entry > .btn { margin-bottom:.1rem; }
.profile-link-row { display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:var(--text-sm); }
.profile-link-row span { overflow-wrap:anywhere; min-width:0; }
.profile-audit, .profile-files { list-style:none; padding:0; margin:0; }
.profile-audit li { display:grid; gap:.2rem; padding:.6rem 0; border-bottom:1px solid var(--border-soft); overflow-wrap:anywhere; }
.profile-files li { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; padding:.6rem 0; border-bottom:1px solid var(--border-soft); }
.profile-file-copy { flex:1 1 12rem; display:grid; gap:.2rem; overflow-wrap:anywhere; min-width:0; }
.profile-file-section { margin-top:1.5rem; box-shadow:none; border:1px solid var(--border-soft); }
.profile-file-section input[type=file] { max-width:100%; min-width:0; font-size:var(--text-sm); }
.profile-danger { color:var(--text-2); }
.profile-danger > summary { color:var(--danger); }
.profile-danger .btn { white-space:normal; }
.profile-import-preview { padding:1rem; background:var(--surface-2); border-radius:var(--radius-sm); }
.profile-import-progress { display:grid; gap:.35rem; }
.profile-import-meter { width:100%; height:.65rem; accent-color:var(--accent); }
.profile-editor .title-input { width:100%; }
@media(max-width:520px) { .profile-nav a { padding:.55rem .65rem; } .profile-details { grid-template-columns:minmax(5rem,1fr) minmax(0,2fr); } .profile-grant-editor { padding:1rem; } }

/* Goals (COVE-473): the outcomes the owner follows. Each goal is a card with its progress; proposals waiting on the owner stand out. */
.goal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; counter-reset: goal; }
/* A card is two columns: the progress ring, then the goal's words. The proposal panel spans both under them. */
.goal-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: 0.85rem; align-items: start; background: var(--surface); border-radius: var(--radius-lg); padding: 1.1rem 1.15rem 1.15rem; box-shadow: var(--shadow), var(--edge); min-width: 0; }
.goal-card > .goal-proposal { grid-column: 1 / -1; }
.goal-main { display: grid; gap: 0.5rem; min-width: 0; }
.goal-card.is-proposed { box-shadow: 0 0 0 1.5px rgb(var(--accent-rgb) / 0.55), var(--shadow), var(--edge); }
/* On a card the ring shows the share done; the words below keep the counts, so the thin bar is left to the goal page. */
.goal-card .goal-bar { display: none; }
.goal-ring { --ring: var(--accent); position: relative; display: grid; place-items: center; width: 3.25rem; aspect-ratio: 1; border-radius: 50%; background: var(--surface-2); }
.goal-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--shade-rgb) / 0.04); }
.goal-ring-n { position: relative; font: 680 var(--text-md)/1 var(--display); letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.goal-ring-n small { font-size: 0.68em; font-weight: 600; color: var(--muted); margin-left: 1px; }
.goal-ring.is-full .goal-ring-n { font-size: var(--text-sm); letter-spacing: -0.045em; }
.goal-ring.is-full .goal-ring-n small { font-size: 0.66em; margin-left: 0; }
.goal-ring.is-empty { background: none; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.goal-ring.is-empty::before { display: none; }
.goal-achieved .goal-ring { --ring: var(--ok); }
.goal-head { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.goal-title { flex: 1; min-width: 0; margin: 0; font-size: var(--text-lg); font-weight: 680; letter-spacing: -0.018em; line-height: 1.28; }
@media (max-width: 520px) { .goal-card { column-gap: 0.8rem; padding: 0.95rem; } .goal-ring { width: 2.75rem; } .goal-head { flex-wrap: wrap; row-gap: 0.3rem; } .goal-title { flex-basis: 100%; font-size: var(--text-body); } }
.goal-title a { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.goal-title a:hover { color: var(--accent-strong); }
.goal-mark { width: 12px; height: 12px; flex-shrink: 0; border-radius: 3px; border: 1.75px solid var(--accent); transform: rotate(45deg); }
.mark-goal-achieved { background: var(--ok); border-color: var(--ok); }
.mark-goal-dropped { border-color: var(--faint); border-style: dashed; }
.goal-date { flex-shrink: 0; font-size: var(--text-xs); font-weight: 600; color: var(--text-2); background: var(--surface-2); padding: 0.12rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.goal-date.is-overdue { color: var(--warn); background: var(--warn-soft); }
.goal-outcome { margin: 0; color: var(--text-2); font-size: var(--text-md); line-height: 1.5; overflow-wrap: anywhere; }
.goal-progress { display: grid; gap: 0.45rem; }
.goal-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px rgb(var(--shade-rgb) / 0.05); }
.goal-bar-fill { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--ok)); transition: width 320ms var(--ease); }
.goal-achieved .goal-bar-fill { background: var(--ok); }
.goal-progress-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.35rem 0.8rem; font-size: var(--text-sm); color: var(--muted); }
.goal-count strong { color: var(--text); font-weight: 680; font-variant-numeric: tabular-nums; }
.goal-flags { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.goal-flag { font-size: var(--text-xs); font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.flag-you { color: var(--info); background: var(--info-soft); }
.flag-you:hover { text-decoration: underline; }
.flag-blocked { color: var(--warn); background: var(--warn-soft); }
.goal-progress-empty { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.goal-proposal { display: grid; gap: 0.6rem; padding: 0.9rem 1rem 1rem; border-radius: var(--radius); background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.12); }
.goal-proposal-head { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--text-sm); font-weight: 680; color: var(--accent-strong); }
/* A check waiting in its ring: what the owner is being asked to do. */
.goal-proposal-glyph { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 1.75px solid currentColor; flex-shrink: 0; }
.goal-proposal-glyph::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 3.5px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.goal-evidence { font-size: var(--text-md); color: var(--text); overflow-wrap: anywhere; }
.goal-evidence > :first-child { margin-top: 0; }
.goal-evidence > :last-child { margin-bottom: 0; }
.goal-proposal-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.goal-empty { display: grid; gap: 0.8rem; justify-items: start; padding: 1.15rem 1.2rem; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow), var(--edge); }
.goal-empty p { margin: 0; color: var(--text-2); font-size: var(--text-md); max-width: 46ch; }
.goal-fold { margin-top: 0.1rem; }
.goal-closed-list { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.1rem; }
.goal-closed { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; font-size: var(--text-md); }
.goal-closed a { flex: 1; min-width: 0; color: var(--text-2); text-decoration: none; overflow-wrap: anywhere; }
.goal-closed a:hover { color: var(--text); text-decoration: underline; }
.goal-new { display: grid; gap: 0.7rem; }
.goal-fields { display: grid; gap: 0.7rem; }
.goal-fields .field { display: grid; gap: 0.3rem; }
.goal-fields input:not([type="date"]), .goal-fields textarea { width: 100%; }
.goal-date-field input { max-width: 12rem; }
.optional { font-weight: 500; color: var(--faint); }
.goal-form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.goal-page { display: grid; gap: 1.4rem; max-width: 54rem; }
/* The goal masthead: the ring sits where a project has its tile, lit in sea glass on the ink. */
.goal-mast .goal-ring { --ring: var(--seaglass); --surface-2: rgba(255, 255, 255, 0.1); width: 4.25rem; flex-shrink: 0; }
.goal-mast .goal-ring::before { inset: 5px; background: var(--ink-3); box-shadow: none; }
.goal-mast .goal-ring-n { font-size: var(--text-lg); color: #fff; }
.goal-mast .goal-ring.is-full .goal-ring-n { font-size: var(--text-body); }
.goal-mast .goal-ring-n small { color: var(--ink-muted); }
.goal-mast .goal-ring.is-empty { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); }
.goal-mast .mast-name h2 { font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem); line-height: 1.12; }
.goal-mast .mast-state.tone-ok { color: var(--seaglass); }
.goal-mast .mast-state.tone-muted { color: var(--ink-muted); }
.goal-mast .goal-date { color: var(--ink-text); background: rgba(255, 255, 255, 0.07); }
.goal-mast .goal-date.is-overdue { color: var(--tone-warm); }
.mast-project { color: var(--ink-text); text-decoration: none; font-weight: 560; }
.mast-project:hover { color: #fff; text-decoration: underline; }
.goal-mast .goal-bar { height: 5px; background: rgba(255, 255, 255, 0.1); box-shadow: none; }
.goal-mast .goal-bar-fill { background: var(--seaglass); }
.goal-mast .goal-progress-line { color: var(--ink-text); }
.goal-mast .goal-count strong { color: #fff; }
.goal-mast .flag-you { color: var(--ink); background: var(--seaglass); }
.goal-mast .flag-blocked { color: var(--ink); background: var(--tone-warm); }
.goal-mast .goal-progress-empty { color: var(--ink-text); }
.goal-page > .goal-proposal { padding: 1.1rem 1.2rem 1.2rem; border-radius: var(--radius-lg); }
.goal-ticket { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.85rem; color: inherit; text-decoration: none; min-width: 0; }
.goal-ticket .row-mark { margin-top: 0; }
.goal-ticket-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.goal-tickets { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), var(--edge); }
.goal-tickets > li + li { border-top: 1px solid var(--border-soft); }
.goal-tickets .goal-ticket:hover { background: var(--surface-2); }
.tk-goal { display: grid; gap: 0.35rem; margin-top: 0.4rem; }
.ticket-goal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.ticket-goal-select { width: 100%; max-width: 100%; min-width: 0; flex: 1 1 100%; }
.ticket-goal-link { font-size: var(--text-sm); }
@media (prefers-reduced-motion: reduce) { .goal-bar-fill { transition: none; } }

/* ---------- Project page (COVE-481) ----------
   An ink masthead in the Today family carries the project's identity and the counts the owner asks first; its foot is
   the horizon line, the segmented bar filling as tickets close. Below it, goals lead the main column and tickets sit
   grouped by status beneath them; reminders, journal and history keep to a narrow side column on wide screens. */
.project-page { display: grid; gap: 1.6rem; min-width: 0; }
.project-mast {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 1rem; padding: 1.35rem 1.4rem 1.6rem; border-radius: var(--radius-lg); color: var(--ink-text);
  background: radial-gradient(40rem 24rem at 100% 0%, rgb(var(--hl-rgb) / 0.22), transparent 65%), linear-gradient(165deg, var(--ink-3), var(--ink) 75%);
  box-shadow: 0 0 0 1px rgb(var(--shade-rgb) / 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgb(var(--shade-rgb) / 0.6);
}
/* The arc rising over the horizon, as on Today, set further right so it never crosses the title. */
.project-mast::before { content: ""; position: absolute; z-index: -1; right: -9rem; top: -11rem; width: 28rem; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgb(var(--hl-rgb) / 0.26); border-right-color: transparent; transform: rotate(-45deg); pointer-events: none; }
.project-mast :focus-visible { outline-color: var(--seaglass); }
.mast-id { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.mast-mark { display: grid; place-items: center; flex-shrink: 0; width: 3.1rem; aspect-ratio: 1; border-radius: var(--radius); font: 680 1.45rem/1 var(--display); color: var(--ink); background: linear-gradient(160deg, color-mix(in srgb, var(--seaglass) 70%, #fff), var(--seaglass)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 24px -12px rgb(0 0 0 / 0.6); }
.mast-paused .mast-mark { background: linear-gradient(160deg, color-mix(in srgb, var(--tone-warm) 70%, #fff), var(--tone-warm)); }
.mast-archived .mast-mark { color: var(--ink-text); background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.mast-name { display: grid; gap: 0.3rem; min-width: 0; }
.mast-name h2 { font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.022em; color: #fff; overflow-wrap: anywhere; }
.mast-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin: 0; font-size: var(--text-sm); color: var(--ink-text); }
.mast-state { padding: 0.08rem 0.55rem; border-radius: 999px; font-weight: 620; color: var(--seaglass); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.mast-paused .mast-state { color: var(--tone-warm); }
.mast-desc { max-width: 62ch; }
.mast-desc .md { gap: 0.5rem; font-size: var(--text-body); line-height: 1.55; color: var(--ink-text); }
.mast-desc .md strong, .mast-desc .md .md-label { color: #fff; }
.mast-desc .md a { color: var(--seaglass); }
.mast-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 1.5rem; padding-top: 0.2rem; }
.mast-progress { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; min-width: 0; }
.mast-pct { font-family: var(--serif); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); font-weight: 500; line-height: 0.9; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.mast-caption { font-size: var(--text-sm); color: var(--ink-text); font-variant-numeric: tabular-nums; }
.mast-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mast-fact { padding: 0.3rem 0.7rem; border-radius: 999px; font-size: var(--text-sm); color: var(--ink-text); background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); white-space: nowrap; }
.mast-fact strong { font-weight: 680; color: #fff; font-variant-numeric: tabular-nums; }
.mast-fact.is-warm strong { color: var(--tone-warm); }
.mast-sub { color: var(--ink-muted); }
/* The horizon: flush along the masthead's foot, edge to edge. */
.project-mast > .mast-horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; gap: 2px; border-radius: 0; background: rgba(255, 255, 255, 0.08); box-shadow: none; }
.mast-horizon .pseg { min-width: 6px; }
.mast-horizon .seg-backlog { background: rgba(255, 255, 255, 0.2); }
.mast-horizon .seg-ready { background: color-mix(in srgb, var(--seaglass) 45%, transparent); }
/* The masthead already names the project, so the bar above it steps back to a quiet label. */
.content:has(.project-mast) .topbar h1 { font-family: var(--display); font-size: var(--text-md); font-weight: 600; color: var(--muted); letter-spacing: -0.005em; }

.project-body { display: grid; gap: 1.6rem; min-width: 0; }
.project-main, .project-side { display: grid; gap: 1.6rem; align-content: start; min-width: 0; }
@media (min-width: 1200px) {
  .project-body { grid-template-columns: minmax(0, 1fr) 20rem; column-gap: 2rem; align-items: start; }
  .project-side { position: sticky; top: 4.75rem; }
}
@media (min-width: 1400px) { .project-body { grid-template-columns: minmax(0, 1fr) 22rem; column-gap: 2.5rem; } }
@media (max-width: 520px) {
  .project-mast { padding: 1.1rem 1.1rem 1.4rem; gap: 0.85rem; }
  .project-mast::before { right: -13rem; top: -12rem; }
  .mast-mark { width: 2.6rem; font-size: 1.2rem; }
  .mast-foot { flex-direction: column; align-items: flex-start; }
}
/* Tickets in their status groups: one compact line each. */
.pt-groups { border-radius: var(--radius); }
.pt-groups .group-head { min-height: 38px; }
.pt-row { display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.6rem 0.9rem; color: var(--text); text-decoration: none; font-size: var(--text-md); transition: background-color 120ms var(--ease); }
.pt-row:hover { background: var(--hover); }
.pt-row .row-mark { margin: 0; }
.pt-row .today-id { flex-shrink: 0; }
/* The key sits on the title's first baseline and the mark centres on that first line, so a wrapped title keeps them at the top. */
.pt-row { align-items: baseline; }
.pt-row .row-mark { align-self: flex-start; margin-top: calc((1.38em - 16px) / 2); }
.pt-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; line-height: 1.38; }
.pt-title { flex: 1 1 10rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-due, .pt-claim { flex-shrink: 0; }
@media (max-width: 520px) { .pt-title { white-space: normal; overflow-wrap: break-word; line-height: 1.38; } .pt-due { display: none; } }
.context-list { list-style: none; margin: 0; padding: 0.3rem 0; display: grid; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), var(--edge); font-size: var(--text-md); }
.context-list > li { padding: 0.5rem 0.9rem; overflow-wrap: anywhere; }
.context-list > li + li { border-top: 1px solid var(--border-soft); }
/* An empty section says so in one quiet line, with no box drawn around nothing. */
.quiet-empty { margin: 0; padding: 0.15rem 0.1rem; font-size: var(--text-md); color: var(--muted); }

/* ---------- agent notifications (COVE-516): the inbox, its header control, and the Account card ----------
   Messages from the owner's assistants wash up here. A sender is a lettered tile in its own soft tint (fixed per credential, so
   look-alike names still differ), with one small accent dot while unread: real unread state. High priority carries a "Needs you"
   chip by the title; low priority is drawn quieter. Bodies show in full. The push outcome is quiet meta text, and a badge only when
   it did not arrive. Nothing is hover-only: a linked row is one big link (its title's link stretched over the row), and its small
   actions (Mute, Mark read) sit above that link as their own buttons. */
.inbox-mini { position: relative; display: inline-grid; place-items: center; width: var(--ctl); height: var(--ctl); border-radius: 50%; color: var(--muted); flex-shrink: 0; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.inbox-mini:hover { background: var(--surface); color: var(--text); }
.inbox-mini svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.inbox-mini[aria-current="page"] { color: var(--accent-strong); background: var(--accent-soft); }
/* A pill that grows with the number (9, 11, 99+) and never wraps: an absolutely placed box shrinks to the room left of its
   offset, so its width is set from its content instead. */
.inbox-count { position: absolute; top: 2px; left: calc(50% + 2px); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: max-content; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; white-space: nowrap; font: 700 0.6875rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--on-accent); background: var(--accent); box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
/* Where the sidebar shows, its Inbox item carries the count and the header tray steps aside, like the account control. */
@media (min-width: 900px) { .inbox-mini { display: none; } }
/* The sidebar's Inbox count: a quiet seaglass pill at the row's end, solid while the row is the current page. */
.nav-count { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font: 700 0.6875rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--seaglass); background: rgb(var(--hl-rgb) / 0.14); box-shadow: inset 0 0 0 1px rgb(var(--hl-rgb) / 0.22); }
.nav a[aria-current="page"] .nav-count { color: var(--ink); background: var(--seaglass); box-shadow: none; }
/* A ticket's messages from assistants: the Inbox's rows, above the ticket they are about. */
.tk-notes-more { padding-left: 0.1rem; }

.inbox-page { display: grid; gap: 0.9rem; max-width: 54rem; min-width: 0; }
.inbox { display: grid; gap: 0.75rem; min-width: 0; }
.inbox-outcome:empty { display: none; }
.inbox-banner:not(:has(> :not([hidden]))) { display: none; }
.inbox-foot { padding: 0.1rem 0.15rem; }
.inbox-paused .notify-body > p { color: var(--text-2); }
.notify-said:empty { display: none; }
.notify-said { flex-basis: 100%; }
.notify-said > .status-error { margin: 0.1rem 0 0.35rem; }

.note-list > li > .note-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) 16px; column-gap: 0.8rem; align-items: start; padding: 0.85rem 0.9rem 0.8rem 0.85rem; }
.note-list > li > .note-row.is-link:hover { background: var(--hover); }
.note-list > li > .note-row.is-link:active { background: var(--surface-2); }

/* The sender's tile: two letters on a soft tint from its own hue. */
.note-tile { --tile-h: 168; position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); font: 680 0.71875rem/1 var(--display); letter-spacing: 0.02em; color: oklch(0.43 0.075 var(--tile-h)); background: oklch(0.955 0.028 var(--tile-h)); box-shadow: inset 0 0 0 1px oklch(0.88 0.035 var(--tile-h)); flex-shrink: 0; }
:root[data-scheme="dark"] .note-tile { color: oklch(0.87 0.06 var(--tile-h)); background: oklch(0.34 0.04 var(--tile-h) / 0.75); box-shadow: inset 0 0 0 1px oklch(0.46 0.045 var(--tile-h) / 0.55); }
.note-tile[data-hue="1"] { --tile-h: 232; }
.note-tile[data-hue="2"] { --tile-h: 28; }
.note-tile[data-hue="3"] { --tile-h: 78; }
.note-tile[data-hue="4"] { --tile-h: 300; }
.note-tile[data-hue="5"] { --tile-h: 135; }
.note-tile[data-hue="6"] { --tile-h: 200; }
.note-tile[data-hue="7"] { --tile-h: 350; }
.note-row .note-tile { margin-top: 1px; }
.note-row.is-unread .note-tile::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }

.note-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.35rem 0.9rem; min-width: 0; }
.note-title { min-width: 0; font-size: var(--text-body); font-weight: 520; line-height: 1.38; letter-spacing: -0.008em; color: var(--text-2); overflow-wrap: anywhere; }
.note-row.is-unread .note-title { font-weight: 650; color: var(--text); }
.note-open { color: inherit; text-decoration: none; }
.note-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.note-open:focus-visible { outline: none; }
.note-open:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.note-time { flex-shrink: 0; white-space: nowrap; }
.note-time-meta { display: none; }
.note-text { margin: 0.2rem 0 0; max-width: 68ch; font-size: var(--text-md); line-height: 1.5; color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; }
.note-row:not(.is-unread) .note-text { color: var(--muted); }
.note-meta { margin-top: 0.4rem; }
.note-kind { color: var(--accent-strong); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.note-chevron { align-self: center; width: 16px; height: 16px; fill: none; stroke: var(--faint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms var(--ease), stroke 160ms var(--ease); }
.note-row.is-link:hover .note-chevron { stroke: var(--accent-strong); transform: translateX(2px); }

/* Priority: high says "Needs you" in the warm tone while unread (and keeps a quiet chip once read); low steps back. */
.note-flag { margin: 0 0.5rem 0 0; padding: 0.06rem 0.5rem; vertical-align: 0.1em; font-size: var(--text-xs); font-weight: 650; background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
.note-row:not(.is-unread) .note-flag { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border-soft); }
.note-row.is-low .note-title { font-weight: 460; color: var(--text-2); }
.note-row.is-low .note-text { color: var(--muted); }
.note-row.is-low .note-tile { opacity: 0.7; }

/* The row's own small actions: above the row's link, at the end of the meta line (they wrap to their own line on a phone). */
.note-acts { position: relative; z-index: 1; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.1rem; margin: -0.4rem -0.65rem -0.4rem auto; min-width: 0; }
.note-act { min-height: 32px; padding: 0 0.65rem; font-size: var(--text-sm); }
.note-act.note-mute { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 500; }
.note-act.note-mute:hover:not(:disabled) { color: var(--text); background: var(--surface-2); }
@media (pointer: coarse) { .note-act { min-height: 40px; } .note-acts { margin-block: -0.5rem; } }
@media (max-width: 30rem) {
  .note-list > li > .note-row { column-gap: 0.7rem; padding: 0.8rem 0.75rem 0.75rem 0.7rem; }
  /* The time joins the meta line, so the title has the row's full width. */
  .note-time-head { display: none; }
  .note-time-meta { display: inline; }
  .note-meta { gap: 0.15rem 0.75rem; }
}

/* Account: one Notifications card. This device first, then what assistants may do, set apart by a hairline. */
.agent-notify-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.agent-notify-head .btn { min-height: 32px; padding: 0 0.7rem; font-size: var(--text-sm); margin: -0.35rem -0.4rem -0.35rem 0; }
.agent-notify-card .an-part { padding-top: 1.05rem; border-top: 1px solid var(--border-soft); }
.agent-notify-card .an-part[hidden] { display: none; }
.an-master { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.an-master-text { display: grid; gap: 0.2rem; min-width: 0; max-width: 60ch; }
.an-master-text > label { font-size: var(--text-body); font-weight: 600; color: var(--text); cursor: pointer; }
.an-master .switch { margin-top: 0.1rem; }
.an-clients { display: grid; gap: 0.45rem; min-width: 0; }
.an-clients > .small-heading { margin: 0.2rem 0 0; }
.an-list { list-style: none; margin: 0.15rem 0 0; padding: 0; display: grid; border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-soft); }
.an-client { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; min-width: 0; }
.an-client + .an-client { border-top: 1px solid var(--border-soft); }
.an-client.is-muted .note-tile { opacity: 0.55; }
.an-client-text { min-width: 0; }
.an-client-text > strong { display: block; font-size: var(--text-md); font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-client-text > .hint { margin: 0.05rem 0 0; }
.an-mute { display: inline-flex; align-items: center; gap: 0.55rem; min-height: var(--ctl); font-size: var(--text-sm); font-weight: 560; color: var(--muted); cursor: pointer; }
.an-client.is-muted .an-mute { color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .inbox-mini, .note-chevron { transition: none; } }
.notify-glyph.is-paused { background: var(--warn-soft); }
.notify-glyph.is-paused::before { border-color: var(--warn); }
.notify-glyph.is-paused::after { background: var(--warn); }

/* ---------- Needs your review (#/review): agents' questions, answered in a tap ----------
   An answer desk in Cove's own parts: one card per ask, its options as full-width answer rows with a key ring, a reply
   box that is always open, and a summary that counts answered against asked. Tokens only, so every palette and the dark
   scheme follow. */
.review { display: grid; gap: 1.1rem; min-width: 0; }
.review-head { display: grid; gap: 0.35rem; max-width: 44rem; padding-left: 0.1rem; }
.review-title { font-family: var(--serif); font-size: clamp(1.45rem, 1.3rem + 0.6vw, 1.8rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.review-title:focus { outline: none; }
.review-lede { font-size: var(--text-body); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.review-scope { font-size: var(--text-md); color: var(--muted); }
.review-body, .review-main, .review-groups { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.review-groups { gap: 1.6rem; }
.review-group { scroll-margin-top: 4rem; }
.review-group > h2 { align-items: baseline; }
.ask-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; min-width: 0; }

/* The summary: answered of asked overall, then each project's, each a tally of one segment per ask. On a phone it sits
   above the questions; from 1100px it keeps a side column and stays in view while the list scrolls. */
.review-summary { display: grid; gap: 0.7rem; padding: 0.8rem 0.9rem; align-content: start; }
.review-total { display: grid; gap: 0.45rem; }
.review-total > p { font-size: var(--text-md); color: var(--text-2); font-variant-numeric: tabular-nums; }
.review-total strong { font: 650 var(--text-xl)/1 var(--display); letter-spacing: -0.02em; color: var(--text); margin-right: 0.1rem; }
.ask-tally { display: flex; gap: 3px; min-width: 0; }
.ask-tally > i { flex: 1 1 0; max-width: 2.25rem; height: 5px; border-radius: 3px; background: var(--border-strong); transition: background-color 240ms var(--ease); }
.ask-tally > i.is-answered { background: var(--accent); }
.review-index { list-style: none; margin: 0; padding: 0.55rem 0 0; display: grid; gap: 0.15rem; border-top: 1px solid var(--border-soft); }
.review-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.6rem; row-gap: 0.3rem; width: 100%; min-height: var(--ctl); padding: 0.35rem 0.45rem; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; transition: background-color 160ms var(--ease); }
.review-row:hover { background: var(--hover); }
.review-row .ask-tally { grid-column: 1 / -1; }
.review-row-name { font-size: var(--text-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-row-count { font: 600 var(--text-sm)/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.review-row.is-done .review-row-name { color: var(--muted); }
.review-items { display: none; }
/* Below the side column the summary is one slim line above the questions: answered of asked and its tally. */
@media (max-width: 1099px) {
  .review-summary { padding: 0.65rem 0.85rem; }
  .review-index { display: none; }
  .review-total { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.9rem; }
}
@media (min-width: 1100px) {
  .review-body { grid-template-columns: minmax(0, 1fr) 19rem; column-gap: 2rem; align-items: start; }
  .review-summary { position: sticky; top: 1rem; grid-column: 2; grid-row: 1; max-height: calc(100dvh - 2rem); overflow-y: auto; }
  .review-main { grid-column: 1; grid-row: 1; }
  /* The desktop index: each waiting ask under its project, one line, a click away. */
  .review-items { list-style: none; margin: 0 0 0.35rem; padding: 0; display: grid; }
  .review-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; align-items: baseline; width: 100%; min-height: 30px; padding: 0.25rem 0.45rem; border: 0; border-radius: var(--radius-xs); background: none; font: inherit; text-align: left; color: var(--text-2); cursor: pointer; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
  .review-item:hover { background: var(--hover); color: var(--text); }
  .review-item-id { font: 600 var(--text-xs)/1.4 var(--mono); color: var(--accent-strong); }
  .review-item-q { font-size: var(--text-sm); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* One ask. The question leads in the body size, the ticket it came from sits above it in small type. */
.ask-card { display: grid; gap: 0.8rem; padding: 1rem 1rem 0.95rem; scroll-margin-top: 4rem; }
.ask-card:focus { outline: none; }
.ask-card:focus-visible, .ask-card.is-jumped { outline: 2px solid var(--accent); outline-offset: 2px; }
.ask-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.65rem; align-items: start; min-width: 0; }
.ask-head .row-mark { margin-top: 2px; }
.ask-head-text { display: grid; gap: 0.15rem; min-width: 0; }
.ask-ticket { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; min-width: 0; font-size: var(--text-md); color: var(--text-2); line-height: 1.4; }
.ask-ticket .today-id { text-decoration: none; }
.ask-ticket .today-id:hover { text-decoration: underline; text-underline-offset: 2px; }
.ask-ticket-title { min-width: 0; overflow-wrap: anywhere; }
.ask-meta { display: flex; flex-wrap: wrap; gap: 0.1rem 0.75rem; font-size: var(--text-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.ask-q { font-size: var(--text-lg); font-weight: 560; line-height: 1.45; letter-spacing: -0.008em; color: var(--text); overflow-wrap: anywhere; white-space: pre-line; max-width: 64ch; }
.ask-q-quiet { font-size: var(--text-body); font-weight: 500; color: var(--text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.ask-url { color: var(--accent-strong); font: 0.88em/1.5 var(--mono); overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-strong) 40%, transparent); text-underline-offset: 2px; }
.ask-url:hover { text-decoration-color: currentColor; }
.ask-label { font-size: var(--text-sm); font-weight: 650; color: var(--muted); }

/* The options: each a full-width answer row. Tapping one sends it; the key ring fills while it saves. */
.ask-opts { display: grid; gap: 0.4rem; }
.ask-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; width: 100%; min-height: max(var(--ctl), 44px); padding: 0.6rem 0.8rem 0.6rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-body); line-height: 1.45; text-align: left; cursor: pointer; touch-action: manipulation; box-shadow: 0 1px 2px rgb(var(--shade-rgb) / 0.05), var(--edge); transition: border-color 160ms var(--ease), background-color 160ms var(--ease), box-shadow 160ms var(--ease), transform 120ms var(--ease); }
.ask-opt:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--hover); }
.ask-opt:active:not(:disabled) { transform: scale(0.99); }
.ask-opt:disabled { cursor: default; }
.ask-key { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font: 650 var(--text-sm)/1 var(--mono); color: var(--accent-strong); background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.ask-opt:hover:not(:disabled) .ask-key { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ask-opt-text { min-width: 0; padding-top: 0.08rem; overflow-wrap: anywhere; }
.ask-rec-tag { display: inline-flex; margin-left: 0.45rem; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 650; line-height: 1.5; color: var(--accent-strong); background: var(--accent-soft); vertical-align: 0.1em; white-space: nowrap; }
.ask-opt.is-chosen { border-color: var(--accent); background: var(--accent-soft); }
.ask-opt.is-chosen .ask-key { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.ask-card.is-sending .ask-opt:not(.is-chosen) { opacity: 0.55; }

.ask-rec { display: grid; gap: 0.2rem; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-soft); }
.ask-rec > p:last-child { font-size: var(--text-md); line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.ask-links { display: grid; gap: 0.2rem; min-width: 0; }
.ask-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; min-width: 0; }
.ask-links li { min-width: 0; }

.ask-reply { display: grid; gap: 0.45rem; min-width: 0; padding-top: 0.15rem; }
.ask-reply textarea { min-height: 4.5rem; background: var(--surface-2); }
.ask-reply textarea:focus-visible { background: var(--surface); }
.ask-reply-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.ask-reply-bar .hint { flex: 1 1 14rem; min-width: 0; }
.ask-outcome:empty { display: none; }
.ask-outcome { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; scroll-margin: 5rem 0 calc(6rem + env(safe-area-inset-bottom)); }
.ask-outcome .status { flex: 1 1 16rem; min-width: 0; }

/* Where an answered card was: one quiet line, so the next question moves up without the page jumping far. */
.ask-receipt { display: flex; align-items: center; gap: 0.6rem; min-height: var(--ctl); padding: 0.45rem 0.8rem; border-radius: var(--radius-sm); background: var(--ok-soft); color: var(--ok); font-size: var(--text-md); font-weight: 600; }
.ask-receipt .row-mark { margin-top: 0; }

/* Answered asks, folded away; each shows the question and the answer as it was saved. */
.review-answered { display: grid; gap: 0.7rem; min-width: 0; }
.review-answered[hidden] { display: none; }
.review-answered > summary { display: flex; align-items: center; gap: 0.5rem; min-height: var(--ctl); padding-left: 0.1rem; font-size: var(--text-body); font-weight: 650; color: var(--text); cursor: pointer; width: fit-content; }
.review-answered > summary:focus-visible { outline: 2px solid var(--accent); }
.ask-card.is-answered { gap: 0.6rem; padding: 0.85rem 0.95rem; }
.ask-answer { display: grid; gap: 0.3rem; }
.ask-answer time { font-weight: 500; }
.ask-answer blockquote { margin: 0; padding: 0.55rem 0.8rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--text); font-size: var(--text-md); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-foot { padding-left: 0.1rem; }

/* Today: the asks row; the Needs you count that opens this page shares the count buttons' hover and press (above). */
.today-asks .note-mark { color: var(--info); }
:where(a).glance-item { text-decoration: none; }
/* A URL inside an option or a recommendation breaks only where it must, never mid-scheme by default. */
.ask-card .md-url { word-break: normal; overflow-wrap: anywhere; }

/* A multi-question ask: each numbered question with its own choices; a pick stays chosen until all are picked and sent. */
.ask-q-count { font-size: var(--text-body); font-weight: 600; color: var(--text-2); }
.ask-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.ask-part { display: grid; gap: 0.45rem; }
.ask-part-q { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.55rem; align-items: baseline; font-size: var(--text-lg); font-weight: 560; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.ask-part-n { font: 650 var(--text-sm)/1 var(--mono); color: var(--muted); min-width: 1.6rem; text-align: center; }
.ask-pick[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.ask-pick[aria-pressed="true"] .ask-key { background: var(--accent); color: var(--on-accent); box-shadow: none; }

/* The Undo window, and a failed send: the exact text that goes out, shown before it does. */
.ask-outcome > .ask-pending, .ask-outcome > .ask-failed { flex: 1 1 100%; display: grid; gap: 0.4rem; min-width: 0; }
.ask-pending { padding: 0.65rem 0.8rem; border-radius: var(--radius-sm); background: var(--accent-soft); }
.ask-pending-when { font-weight: 500; }
.ask-preview { margin: 0; font-size: var(--text-md); line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-failed .ask-preview { padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-soft); }
.ask-pending-bar, .ask-failed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.ask-countdown { position: relative; flex: 1 1 6rem; height: 3px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ask-countdown::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left center; animation: ask-undo var(--undo-ms, 5s) linear forwards; }
@keyframes ask-undo { to { transform: scaleX(0); } }
.review-confirm:empty { display: none; }
.review-groups[hidden] { display: none; }

/* Today: an ask among the decisions reads as its question; once answered it quiets down and no longer counts. */
.today-ask.is-answered h3 { color: var(--text-2); }
.today-ask.is-answered .today-line { color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .ask-opt, .ask-tally > i, .review-row, .review-item { transition: none; } .ask-opt:active:not(:disabled) { transform: none; } .ask-countdown { display: none; } }