/* Things 3 dark: one renderer, charcoal field, system sans everywhere; chrome is sentence case. */
* { box-sizing: border-box; min-width: 0; border-radius: 0; }
/* Things UI cleanup (Task 7, 2026-09-23): the root follows the platform's
   own text-size setting. 17px is the fallback for browsers without the
   -apple-system-body text style (every --fs-* rem token in tokens.css is
   relative to this); on iOS Safari/WKWebView the @supports rule swaps in
   the system Dynamic Type "body" style, so the whole rem-based scale
   grows or shrinks with the user's iPhone text-size setting. That
   shorthand also carries its own font-family + weight, so body
   re-asserts var(--sans) at normal weight underneath it. */
html { font-size: 17px; background: var(--field); color: var(--text); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@supports (font: -apple-system-body) { html { font: -apple-system-body; } }
body { margin: 0; background: var(--field); color: var(--text); overflow-wrap: anywhere; font-family: var(--sans); font-weight: 400; line-height: 1.47; }
button, input, textarea, select { font: inherit; color: inherit; background: transparent; }
input, textarea { caret-color: var(--accent); }
button { border: 0; padding: 4px; min-height: 44px; cursor: pointer; text-align: left; touch-action: manipulation; }
a { color: inherit; overflow-wrap: anywhere; }
button:disabled { color: var(--dim); cursor: default; }
input, textarea, select { border: var(--seam); width: 100%; min-height: 44px; padding: 8px 4px; }
input[type=checkbox], input[type=radio] { width: 44px; accent-color: var(--accent-line-on-ink); }
input[type=range] { accent-color: var(--accent-line-on-ink); padding: 0; }
textarea { resize: none; }
input::placeholder, textarea::placeholder { color: var(--dim); opacity: 1; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 1px solid var(--control-edge); outline-offset: -1px; }
/* Things has no hover: nothing rings or boxes under the pointer. A press
   dims the control (UIKit's highlighted state) and fades back on release;
   controls with their own pressed background keep just that. */
/* Only lists bounce, never the whole page (native apps keep bars fixed). */
html { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
body { overscroll-behavior: none; }
:where(button, a) { transition: opacity .2s; }
:where(button:not(:disabled), a):not(.settings-row, .pin-key, .xp-ico, .snooze-key, .cnk-key, .nl-chooser__opt):active { opacity: .4; transition: none; }
.dest:is(:focus, :focus-visible),.list-row:is(:focus, :focus-visible),.new-list-link:is(:focus, :focus-visible),.nl-chooser__opt:is(:focus, :focus-visible),.quick-find:is(:focus, :focus-visible),.settings-link:is(:focus, :focus-visible),.capture-fab:is(:focus, :focus-visible),.list-back:is(:focus, :focus-visible) { outline: none; }
h1,h2,h3,h4,p,figure { margin: 0; font: inherit; }
p + p { margin-top: 16px; }
strong,b { font-weight: 700; }
code,kbd,pre { font-family: var(--sans); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
img,svg,canvas { max-width: 100%; }
[hidden] { display: none !important; }
#app { height: 100dvh; max-width: 1000px; margin: auto; padding: env(safe-area-inset-top, 0px) var(--space-5) var(--home-pad); display: flex; flex-direction: column; gap: 0; }
.workbench-view { flex: 1; min-height: 96px; overflow-y: auto; border: 0; position: relative; }
.list { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; flex: 1; padding: 0 0 72px; }
.topbar, .dbar-wrap { flex: none; padding: 0; }
/* Search affordance sits ABOVE the screen heading (F3). Heading is 44px; filters pin right. */
.topbar { padding-bottom: var(--space-2); margin-bottom: 0; }
.list-back { width: 44px; min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0; font: 400 28px/44px var(--sans); color: var(--ink-secondary); text-align: center; }
.head-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); min-height: 44px; }
.head-line .h1 { flex: none; display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--sans); font-weight: 700; font-size: calc(var(--fs-hero) + 23px); line-height: 40px; letter-spacing: 0; text-transform: none; }


.search-open { flex: none; display: flex; align-items: center; gap: var(--space-2); padding: 8px 0; }
.search-field { flex: 1; min-width: 0; display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 8px 0 12px; background: var(--surface); border: 0; border-radius: 10px; }
.search-field .search-input { flex: 1; min-width: 0; min-height: 44px; padding: 0 8px; border: 0; background: transparent; font: var(--type-input); }
.search-field .search-input:focus-visible { outline: 0; }
/* Clear: a small blue text button inside the field, shown only once the field has text. */
.search-count { font: 400 var(--fs-meta)/1.3 var(--sans); color: var(--ink-secondary); }
.search-count:empty { display: none; }
.search-open .search-close { flex: none; min-width: 44px; min-height: 44px; padding: 0 4px; font: 400 17px/22px var(--sans); color: var(--accent-text); }
.search-section { padding: var(--space-4) 0 var(--space-2); font: 400 var(--fs-meta)/1.3 var(--sans); color: var(--ink-secondary); }
.dest { display: grid; grid-template-columns: var(--tap-min) minmax(0, 1fr) auto; column-gap: var(--space-2); min-height: var(--row-min); align-items: center; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; }

.dest .glyph { display: grid; place-items: center; font: 400 20px/24px var(--sans); }
.dest-tile { width: 28px; height: 28px; margin: 0 auto; border-radius: 8px; display: inline-grid; place-items: center; overflow: hidden; font: 400 18px/1 var(--sans); font-variant-emoji: emoji; color: var(--ink); vertical-align: middle; background: transparent; }
.h1 > .dest-tile { margin-left: 0; margin-right: 8px; align-self: center; }

.dest-tile--inbox { background: transparent; color: var(--capture); }
.dest-tile--today { background: transparent; color: var(--today); }
.dest-tile--upcoming { background: transparent; color: var(--upcoming); }
.dest-tile--anytime { background: transparent; color: var(--anytime); }
.dest-tile--someday { background: transparent; color: var(--someday); }
.dest-tile--logbook { background: transparent; color: var(--logbook); }
.dest-tile--projects { background: transparent; color: var(--projects); }
.dest-tile--tag { background: transparent; color: var(--tag); }
.dest .name { font: 600 17px/24px var(--sans); overflow-wrap: anywhere; }

.count { font: var(--type-meta); color: var(--ink-secondary); padding-right: 4px; }
.hair { height: 1px; background: var(--rule); margin: var(--space-2) 0; border: 0; }
/* Anytime rows due today or earlier carry the Today star before the title. */
.today-mark { display: inline-flex; vertical-align: -2px; margin-right: 6px; }
.today-mark .dest-tile, .today-mark .dest-tile svg { width: 14px; height: 14px; margin: 0; }
/* Someday is parked, visually quiet (mockup .row.quiet); the heading icon keeps full weight. */
.view--someday .group-rows { opacity: 0.75; }

.gsegs { display: flex; align-items: stretch; flex-wrap: wrap; }

/* --fs-hero is the HEADERS slider base (11px); +13px lands the grammar's 24px/30px heading and the slider still moves it. */
.h1 { font: var(--weight-emphasis) calc(var(--fs-hero) + 13px)/30px var(--sans); }

/* Pane title on the left, an optional banner in the dead space to its right.
   The banner is the only button here, so the row costs the 44px tap floor
   once instead of stacking a 16px title band on top of a 44px banner band. */
.colhead-row { display: flex; align-items: center; gap: var(--space-2); }
.colhead-row .enable-reminders, .head-line .enable-reminders { margin-left: auto; padding: 0 var(--space-3); }
.head-line .enable-reminders { align-self: center; }
/* A control, not a colour cue: ⚐ glyph + label carry the meaning (R21); hairline edge marks the target. */
.enable-reminders { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); color: var(--ink); background: var(--surface); border: 0; border-radius: 10px; font: 500 calc(var(--fs-chrome) + 2px)/18px var(--sans); }
.enable-reminders .eb-icon { display: inline-flex; color: var(--accent-line); }
.group { padding-top: 0; }
.gstrip { border-bottom: var(--seam); display: flex; align-items: center; gap: 1ch; padding: 0 4px; min-height: 16px; flex-wrap: wrap; }
/* List section labels: bold body-size sans (Things' section heads), own their top gap only, no rule (rows own their bottom rule). */
.group-head,.cal-dayhead,.done-month-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-6) 0 var(--space-3); min-height: 16px; flex-wrap: wrap; color: var(--text); font: 700 var(--fs-body)/1.3 var(--sans); }

.gstrip__txt { flex: 1; }
.gstrip--takeover { flex: none; }
.gsegs > * + * { border-left: var(--seam); }
/* Dark Loom row (grammar R7, R11–R13): 44px checkbox column | content | optional 44px trailing
   action column. 48px minimum, never fixed; a wrapped title adds 24px per line, meta adds 8 + 16. */
.row,.rowd,.row-today,.done-row { display: grid; grid-template-columns: var(--tap-min) minmax(0,1fr); column-gap: var(--space-2); min-height: var(--row-min); border-bottom: 0; position: relative; background: var(--field); font-size: var(--fs-rows); line-height: 20px; }
.row.has-tail,.rowd.has-tail,.row-today.has-tail { grid-template-columns: var(--tap-min) minmax(0,1fr) var(--tap-min); }
/* R18 one hairline owner: rows own their bottom rule; the last row in a list or section owns none. */
.row-swipe:last-child > .row,.row-swipe:last-child > .rowd,.row-swipe:last-child > .row-today,.done-row:last-child { border-bottom: 0; }
.c-cb { grid-column: 1; align-self: stretch; position: relative; }
.c-title { grid-column: 2; padding: 6px 0; min-width: 0; }
/* Trailing column: ONLY subtask disclosure and the counter (actions that differ from the row tap),
   plus the non-interactive overdue mark (R23). Stacked 44px targets when more than one. */
.c-tail { grid-column: 3; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.title,.rt-title,.rowd__name,.done-title { display: block; font: 400 var(--fs-rows)/20px var(--sans); overflow-wrap: anywhere; }
/* Out-specifies `.row button` so the marker keeps its flex box and alignment. */
:is(.row, .rowd, .row-today) :is(.title-alarm, .title-warn) { display: inline-flex; align-items: center; gap: 4px; margin: 0 6px 0 0; color: var(--ink-secondary); font: 400 var(--fs-row-detail)/20px var(--sans); vertical-align: top; height: 20px; }
.row button,.rowd button,.row-today button,.done-row button { display: inline; min-height: 0; padding: 0; line-height: inherit; vertical-align: baseline; }
.c-tail > button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--tap-min); min-width: var(--tap-min); padding: 0; text-align: center; font: 400 var(--fs-meta)/16px var(--sans); color: var(--ink-secondary); }
.c-tail > .counter-chip { color: var(--ink); font-weight: var(--weight-emphasis); }
/* Checkbox: 44px-wide target spanning the row (the ::after pseudo below fills the cell); the visual is
   a 22px rounded square, Things-style (6px corners, the checkbox's own radius). Checked fills with the list tint (--cb-fill, set by rowCheckbox) and
   draws the check in that tint's ink (--cb-ink). The button carries its accessible label. */
.c-cb > .checkbox,.c-cb > .rt-checkbox,.c-cb > .rowd__cb { display: flex; justify-content: center; align-items: flex-start; padding-top: 11px; width: var(--tap-min); height: 100%; min-height: var(--row-min); color: var(--ink); }
.c-cb > button > span:not(.cb-halo) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-cb > .checkbox::before,.c-cb > .rt-checkbox::before,.c-cb > .rowd__cb::before { content: ''; display: grid; place-items: center; box-sizing: border-box; width: var(--check-size); height: var(--check-size); border: 1.5px solid var(--control-edge); border-radius: 6px; font: 600 14px/1 var(--sans); color: var(--cb-ink, var(--accent-ink)); }
.c-cb > .checkbox:active::before,.c-cb > .rt-checkbox:active::before,.c-cb > .rowd__cb:active::before { border-color: var(--ink-secondary); }
.c-cb > .checkbox.checked::before,.c-cb > .rt-checkbox.checked::before,.c-cb > .rowd__cb.is-done::before { content: '✓'; background: var(--cb-fill, var(--accent-bg)); border-color: transparent; }
.c-cb > .checkbox--gated::before,.c-cb > .rt-checkbox--gated::before,.c-cb > .rowd__cb--gated::before { opacity: .5; }
/* The glyph is 26x16px. `.c-cb` stretches to the row's full height and this
   pseudo fills it, so every pixel of the checkbox column toggles done —
   including the lower lines of a wrapped row, which previously fell through
   to the row body (opening WHEN instead of completing). A negative `left`
   buys nothing: `.list` sets `overflow-y: auto`, so it clips horizontally at
   its content box. */
.checkbox::after,.rt-checkbox::after,.rowd__cb::after { content: ''; position: absolute; inset: 0; }
.cb-halo,.cb-gate-dot { display: none; }
.task-due,.task-tags,.task-state,.row-list { display: inline; font-size: var(--fs-meta); }
.row-list { color: var(--ink-muted); }
/* Meta block: always its own line, always the same left edge, so the due
   times form a scannable column whether or not the title above wrapped. */
.row-meta { display: block; margin-top: var(--space-1); font: var(--type-meta); color: var(--ink-secondary); }
.late .row-meta, .rt-late-text { color: var(--overdue-pastel); }
.task-state > * + *, .task-tags > * + *, .row-meta > * + * { margin-left: var(--space-2); }
/* Things 3 meta: grey rounded tag pills, small grey glyphs for notes, checklist and date. */
.row-meta :is(.row-tag, .rt-tag) { display: inline-block; padding: 0 6px; border-radius: 16px; background: var(--surface-pressed); line-height: 16px; }
.meta-ico { display: inline-flex; vertical-align: -1px; color: var(--ink-muted); }
.meta-icons > * + * { margin-left: var(--space-1); }
.task-due .meta-ico { margin-right: 3px; color: inherit; }
/* The due time is reference data on the quiet meta line, not a coloured token (frame .meta). */
.task-due.today,.task-due.future { color: inherit; }
.task-due button,.task-tags button,.task-state button { color: inherit; }
.task-tags,.row-tag,.rt-tag { color: var(--ink-secondary); }
.task-state { color: var(--ink-secondary); }
/* P4 URGENT: weight + underline + the word itself, never colour alone (R21). */
.urgent-mark { font-weight: var(--weight-emphasis); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* P11 unseen change on a shared task: brighter rail + weight. */
.row--unseen .title,.rowd--unseen .rowd__name,.row-today--unseen .rt-title { font-weight: var(--weight-emphasis); }
.overdue,.preview-warn,.sync-error-banner,.task-action-btn--del,.del,.error { color: var(--overdue); }
.today { color: var(--today); }
.future { color: var(--future); }
.rt-recur-chip { color: var(--recurring); }
.rt-snooze,.snoozed { color: var(--snoozed); }
.counter-chip { color: var(--progress); }
.counter-chip--low,.counter-chip--limit { color: var(--soon); }
.row-mentions,.rt-mentions,.rowd__mentions { color: var(--relation); }

/* Selected row: soft fill only, the row's own field colour. No side line,
   no bold, no rotation — invisible-selection matches Things on iPhone, where a
   tap opens the row. A hardware-keyboard selection (j/k, Tab) does need to be
   seen, so keyboard focus paints an accent-tinted fill (no line), as on Things
   for Mac. 78% accent over --field reaches 3.1:1 (76% is the 3:1 floor)
   against --field; its text goes --accent-ink (5.6:1), since the row's grey
   and red meta would drop below 3:1 on the tint. */
.selected { background: var(--field); color: var(--text); }
.row-swipe > :is(.row, .rowd, .row-today):focus-visible:not(.expanded) { background: color-mix(in srgb, var(--accent) 82%, var(--field)); color: var(--accent-ink); border-radius: 8px; }
.row-swipe > :is(.row, .rowd, .row-today):focus-visible:not(.expanded) * { color: inherit; }
.row-swipe > :is(.row, .rowd, .row-today):focus-visible:not(.expanded) .c-cb > *::before { border-color: var(--accent-ink); }
/* The fill is the row's focus indicator, so the global focus outline stays off rows. */
.row-swipe > :is(.row, .rowd, .row-today):focus-visible { outline: none; }
.subs-list { padding-left: var(--space-5); }
.subs-more { width: 100%; min-height: var(--tap-min); color: var(--ink-secondary); font: 400 var(--fs-meta)/16px var(--sans); }
/* In flow, spanning both row columns: the panel reserves its own height so the next task sits below it. */
/* Things 3 open to-do. Tap lifts the row into a card; everything else on the
   screen dims; notes, checklist and the corner icons arrive in sequence;
   rows below slide down with the block's grid-row interpolation. Spring-ish
   ease with no overshoot, ~270ms open / ~240ms close, measured off the
   official Things iPhone demo video at 30fps. */
.view:has(.row-swipe > .expanded) :is(.topbar, .list-head, .group-head, .row-swipe:not(:has(> .expanded)), .subs-list, .empty) { opacity: 0.35; transition: opacity 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.view :is(.topbar, .list-head, .group-head, .row-swipe, .subs-list) { transition: opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.view:has(.row-swipe > .expanded) .topbar :is(.list-back, .list-menu) { opacity: 0; pointer-events: none; }
.topbar :is(.list-back, .list-menu) { transition: opacity 200ms ease; }
.row-swipe:has(> .expanded) + .subs-list { display: none; }
.row-swipe > :is(.row, .rowd, .row-today) { transition: transform 150ms ease, margin 270ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 270ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 200ms ease, border-radius 270ms ease; }
.row-swipe > :is(.row, .rowd, .row-today).expanded { background: var(--surface); border-radius: 10px; margin: 10px 0 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3); z-index: 2; opacity: 1; }
.expand-block { grid-column: 1 / -1; margin-left: -1px; position: relative; z-index: 2; background: var(--surface); display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 200ms cubic-bezier(0.2, 0, 0, 1), visibility 0s 200ms; }
.row.expanded .expand-block, .rowd.expanded .expand-block, .row-today.expanded .expand-block { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 240ms cubic-bezier(0.2, 0, 0, 1); }
.expand-inner { overflow: hidden; opacity: 0; transition: opacity 120ms cubic-bezier(0.2, 0, 0, 1); }
.row.expanded .expand-inner, .rowd.expanded .expand-inner, .row-today.expanded .expand-inner { opacity: 1; transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1) 40ms; }
.tag-chip { font: var(--type-meta); color: var(--ink); background: var(--surface-pressed); padding: 4px 10px; min-height: 24px; display: inline-flex; align-items: center; border-radius: 16px; }
.search-tags__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.search-tag-chip__n { margin-left: 6px; color: var(--ink-secondary); }
.row-swipe { position: relative; overflow: hidden; flex: none; touch-action: pan-y; }
.row-swipe:has(.expanded), .row-swipe.is-expanding { overflow: visible; z-index: 2; }
.row-swipe > .row,.row-swipe > .rowd,.row-swipe > .row-today { position: relative; z-index: 1; background: var(--field); touch-action: pan-y; will-change: transform; transition: transform 260ms cubic-bezier(0.2, 0, 0, 1); }
.rt-thumb { display: inline-block; width: 16px; height: 16px; vertical-align: bottom; padding: 0; }
.rt-thumb img { width: 16px; height: 16px; object-fit: cover; }

/* Things 3 Logbook: month heading over a hairline; each row leads with its blue completion date. */
.done-month-head { padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule); }
/* Things 3 Logbook row: box flush with the heading, blue d/m date column, one-line title then
   repeat/tag icons (titles wrap, never cut), the project on a second line; box and date centre on both lines. The box keeps a
   44px target by reaching into the gutter and the gap. Done boxes fill the lighter blue Things uses. */
.done-row { grid-template-columns: var(--check-size) auto minmax(0,1fr); align-items: center; --cb-fill: var(--accent-text); }
.done-row .c-cb > .checkbox { width: var(--tap-min); margin-left: -14px; padding: 0 0 0 14px; justify-content: flex-start; align-items: center; }
.done-row .c-title { grid-column: 3; }
.done-date { grid-column: 2; color: var(--accent-text); font: 400 var(--fs-meta)/20px var(--sans); font-variant-numeric: tabular-nums; }
.done-line { display: block; }
.done-row .done-title { display: inline; }
.done-line .meta-ico { margin-left: 6px; color: var(--ink-secondary); }
.done-row .row-meta { margin-top: 0; }
.done-row--project { width: 100%; padding: 0; border: 0; color: inherit; text-align: left; font: inherit; }
.done-proj-ico { display: flex; justify-content: center; }
/* The pill sat flush against the title ("NEWReload mechanical watch") and wore
   the title's own colour, so it read as the first word of the task. Amber +
   italic + a trailing space make it chrome, not text. */
.new-pill { color: var(--hi); font-style: italic; margin-right: var(--space-2); font: italic 400 var(--fs-meta)/16px var(--sans); }
.empty,.cal-none,.search-empty { padding: var(--space-8) 0; color: var(--ink-secondary); }
.empty-cta { color: var(--text); }
.empty-try { display: flex; flex-wrap: wrap; gap: 1ch; margin-top: 16px; padding: 0; border: 0; color: var(--accent-text); }
.empty-try__ex { color: var(--ink-secondary); }
.ibf { display: flex; align-items: center; gap: var(--space-1); font: 400 var(--fs-chrome)/16px var(--sans); }
.ibf { min-width: 44px; min-height: 44px; padding: 0 8px; justify-content: center; color: var(--ink-muted); background: transparent; border: 0; }
/* Things filter pills: a 32px pill inside the 44px hit box, count as muted
   text inside it; the active pill is filled with the accent. */
.ibf { position: relative; z-index: 0; padding: 0 12px; color: var(--ink); }
.ibf::before { content: ''; position: absolute; z-index: -1; inset: 6px 0; border-radius: 16px; background: var(--surface); }
.ibf.on { color: var(--accent-ink); font-weight: var(--weight-emphasis); }
.ibf.on::before { background: var(--accent); color: var(--accent-ink); }

.search-input { flex: 1; }
mark,.search-hit { color: var(--today); background: transparent; text-decoration: underline; }
/* Lists screen: Quick Find, destinations, then Settings + the blue +. */
.view--main { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.quick-find { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 8px 0 12px; padding: 0 12px; border-radius: 10px; background: var(--surface); color: var(--ink-secondary); text-align: center; }
.device-dock { display: flex; align-items: center; flex: none; min-height: 44px; margin-top: auto; }
.settings-link { min-height: 44px; padding: 0 8px; color: var(--ink-secondary); font: 400 15px/20px var(--sans); background: transparent; }
.capture-fab { position: fixed; z-index: 45; right: max(16px, calc((100vw - min(1000px, 100vw)) / 2 + 16px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: var(--capture); color: var(--capture-ink); font: 400 28px/44px var(--sans); text-align: center; }
.nav { display: flex; flex: none; font: var(--type-meta); }
.nav > button { min-height: var(--tap-min); padding: 0; white-space: nowrap; }
.nav--destinations { display: block; }
.composer--full { animation: composer-open 240ms cubic-bezier(0.2, 0, 0, 1); }
@keyframes composer-open { from { opacity: 0; transform: translateY(24%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .composer--full { animation: none; } }

.sync-error-banner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-1); font: 400 var(--fs-meta)/16px var(--sans); border-bottom: var(--seam); }
.seb-dismiss { min-width: 44px; text-align: center; color: inherit; }
/* Phase 6: temporary capture surface; one scroll region, commit above the keyboard. */
.composer--full { position: fixed; inset: 0; height: 100dvh; z-index: var(--z-composer); background: var(--field); display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) max(var(--space-5), calc((100% - var(--content-max)) / 2)) var(--home-pad); }
.composer-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) 0; flex: none; }
.composer-heading { flex: 1; font: var(--weight-emphasis) calc(var(--fs-composer-hint) + 13px)/1.25 var(--sans); }
.composer-head button { font: var(--type-body); min-width: var(--tap-min); }
.composer-scroll { min-height: 0; overflow-y: auto; flex: 1; padding-bottom: var(--space-5); }
.composer-input-wrap { position: relative; background: var(--surface); border-radius: 10px; }
/* The filled field and the caret mark focus; no outline box around it. */
.composer .nli-input:focus-visible { outline: 0; }
.nli-input, #composer-overlay { padding: var(--space-3); font: 400 calc(var(--fs-composer-input) + 6px)/max(var(--space-6), 1.4em) var(--sans); letter-spacing: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.nli-input { min-height: var(--tap-min); border: 0; resize: none; display: block; }
#composer-overlay { position: absolute; inset: 0; color: var(--ink); pointer-events: none; }
.composer-foot { display: flex; flex: none; gap: var(--space-3); border-top: var(--seam); padding-top: var(--space-3); font: var(--type-body); }
.composer-foot > button { min-width: var(--tap-min); padding: var(--space-3); }
.composer-foot .save { flex: 1; text-align: center; background: var(--accent-bg); color: var(--accent-ink); border-radius: 10px; font-weight: var(--weight-emphasis); }
.save__keys { margin-left: var(--space-2); }
.composer .input-section > .cap-type.label { display: flex; gap: var(--space-2); flex-wrap: wrap; padding-bottom: var(--space-2); font: 400 var(--fs-meta)/1.3 var(--sans); color: var(--ink-secondary); }
.composer .input-section > .hair { display: none; }
.composer .input-meta, .composer .composer-shift, .composer .pv { font: var(--type-control); }
/* Things rows read at body size: Add subtask / image / counter / warnings / notes. */
.composer .composer-actions, .composer .composer-desc__toggle, .composer .warn-toggle, .composer .edit-subtasks .composer-add-sub { font: var(--type-body); }
/* Things grouped rows: one rounded surface per group, hairlines only inside it. */
.composer .composer-actions, .composer .edit-subtasks, .composer .composer-desc { display: flex; flex-direction: column; align-items: stretch; margin-top: var(--space-3); background: var(--surface); border-radius: 10px; }
.composer .composer-actions > * + * { border-top: var(--seam); }
.composer .composer-actions > button, .composer .warn-toggle, .composer .edit-subtasks .composer-add-sub, .composer .composer-desc__toggle { min-height: var(--tap-min); padding: 0 var(--space-3); text-align: left; }
.composer .warn-expanded { padding: 0 var(--space-3) var(--space-3); }
.composer .composer-split-desc { width: 100%; }
.composer .nli-notes { font: 400 calc(var(--fs-composer-input) + 6px)/1.5 var(--sans); }

.composer-receipt { display: contents; }
.composer-receipt-line { display: inline-flex; flex-direction: column; justify-content: center; min-height: var(--tap-min); padding: 4px 12px; border: 0; border-radius: 10px; background: var(--surface); font: var(--type-meta); color: var(--ink); }
.pv > .composer-receipt-line:first-child { width: 100%; }
.composer-receipt-line > :first-child { color: var(--ink-muted); }
.composer-receipt-line > :last-child { text-align: left; overflow-wrap: anywhere; }
/* Tappable tiles underline the value like the matching token in the text. */
.composer button.composer-receipt-line > :last-child { text-decoration: underline; text-decoration-color: var(--ink-muted); text-underline-offset: 3px; }
.composer .row-pv__t, .composer .preview-tapered-title { font: var(--type-body); }
 .composer .row-pv__when, .composer .preview-ambig { color: var(--ink-secondary); }
.composer-foot .save:disabled { background: var(--surface); color: var(--ink-muted); border-color: transparent; }

.composer .preview-warn { padding: var(--space-3) 0; color: var(--ink); }
.composer .preview-ambig { min-height: var(--tap-min); padding: var(--space-3) 0; }
.composer [class^='token-'] { color: var(--accent-text); text-decoration: none; }
.composer .token-when--literal { color: var(--ink); text-decoration: line-through; }
.composer .token-ghost { color: var(--ink-muted); text-decoration: none; }
.composer-sheet-context { display: block; font: var(--type-meta); color: var(--ink-secondary); }
.composer .dock { flex: none; max-height: none; overflow: visible; }
.composer .dock .sheet { background: var(--field); border-top: 0; }
.composer .dock .sheet-head { background: var(--field); border-bottom: 0; }
body:has(.tut-coach) .composer--full { padding-bottom: calc(var(--tut-coach-h, 0px) + var(--space-4)); }
.first-task { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8) 0; font: var(--type-body); }
.first-task h2 { font: var(--type-heading); }
.first-task button { width: 100%; padding: var(--space-3); font: var(--type-control); }
.first-task__create { background: var(--accent-bg); color: var(--accent-ink); }
.input-meta,.input-meta__acts,.composer-actions,.composer-shift-row { display: flex; align-items: center; flex-wrap: wrap; }
.input-meta { justify-content: space-between; color: var(--dim); }
.composer-actions > * { flex: 1; }
/* "When this repeats": label over a segmented control, both on the group edge. */
.composer .composer-shift { margin-top: var(--space-4); }
.composer-shift__label { padding-bottom: var(--space-2); font: 400 var(--fs-meta)/1.3 var(--sans); color: var(--ink-secondary); }
.composer-shift-row { flex-wrap: nowrap; gap: 2px; padding: 2px; background: var(--surface); border-radius: 10px; }
.composer-shift-btn { flex: 1; justify-content: center; text-align: center; min-height: var(--tap-min); border-radius: 8px; color: var(--ink-secondary); }
.composer-shift-btn.is-on { background: var(--surface-pressed); color: var(--ink); font-weight: 600; }
.composer-desc__toggle { display: flex; align-items: center; gap: 1ch; width: 100%; }
.composer-desc:not(.is-open) .nli-notes, .composer-desc:not(.is-open) .hair { display: none; }
.composer-desc .nli-notes { border: 0; border-top: var(--seam); padding: var(--space-2) var(--space-3); }
.composer .composer-desc > .hair { display: none; }
.composer-mention-err:empty { display: none; }
.input-section > .cap-type.label,.input-section > .hair { display: none; }

.pv { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 12px 0 0; }
.row-pv { padding: 4px; border-bottom: var(--seam); }
.row-pv > * { display: inline; margin-right: 1ch; }
.row-pv__k { color: var(--dim); }
.row-pv__t { color: var(--text); }
.row-pv__when { color: var(--today); }
/* Parser-highlight date/time tokens follow the fixed accent (Task 6, Things
   UI cleanup, 2026-09-23) — was --today (Gruvbox amber), which read as an
   off-brand warm colour against the blue accent used everywhere else.
   --accent-line, not raw --accent, per the accent-as-text convention. */
.token-when { color: var(--accent-text); }
.token-tag,.token-counter { color: var(--tag); }

.token-ghost { color: var(--dim); }
.composer-slots,.composer-until,.preview-warn,.preview-ambig { padding: 4px; border-bottom: var(--seam); }
.preview-ambig { cursor: pointer; color: var(--today); }
.edit-add-sub:not([data-expanded='1']) .edit-add-sub-input,.edit-add-sub[data-expanded='1'] .composer-add-sub { display: none; }
.composer .edit-subtasks { font: var(--type-control); }
.edit-subtasks__label { padding: var(--space-2) var(--space-3) 0; font: 400 var(--fs-meta)/1.3 var(--sans); color: var(--ink-secondary); }
.edit-image-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.edit-image-row img { max-width: 80px; max-height: 80px; object-fit: contain; }
/* Attached image: one grouped row — thumbnail, label, Replace (blue) and Remove (red). */
.composer .edit-image-row { gap: 12px; margin-top: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface); border-radius: 10px; font: var(--type-control); }
.edit-image-row__preview { order: -1; width: 64px; height: 64px; border-radius: 8px; background: var(--field); object-fit: cover; }
.edit-image-row__label { flex: 1; min-width: 0; }
.edit-image-row__actions { display: flex; gap: var(--space-3); }
.edit-image-row__btn { padding: 0; color: var(--accent-text); }
.edit-image-row__btn + .edit-image-row__btn { color: var(--overdue); }
.edit-subtasks__row { display: flex; align-items: center; gap: 4px; min-height: 44px; }
.warn-expanded { display: none; }
.warn-section.is-expanded .warn-expanded { display: flex; flex-wrap: wrap; }
.warn-chip,.warn-toggle { min-height: 44px; }
/* Warnings, expanded: a field textarea, a blue Add text button, the active
   warnings as removable pills. */
.composer .warn-section.is-expanded .warn-expanded { gap: var(--space-2); align-items: center; }
.composer .warn-input { flex: 1 1 100%; min-height: 64px; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--field); color: var(--ink); font: 400 17px/22px var(--sans); resize: none; }
.composer .warn-input--err { box-shadow: inset 0 0 0 1px var(--overdue); }
.composer .warn-add-confirm { min-height: var(--tap-min); padding: 0 var(--space-2); color: var(--accent-text); font: 400 17px/22px var(--sans); }
.composer .warn-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); }
.composer .warn-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 16px; background: var(--surface-pressed); color: var(--ink); font: 400 15px/20px var(--sans); }
.warn-chip__glyph { color: var(--today); }
.warn-chip__x { color: var(--ink-muted); }
/* Sub-task list and the child's Parent block: grouped rows like every composer group. */
.composer .edit-subtasks > * + *, .edit-subtasks__list > * + * { border-top: var(--seam); }
.edit-subtasks__row { gap: 12px; width: 100%; padding: 0 var(--space-3); text-align: left; }
.edit-subtasks__check { flex: none; color: var(--ink-muted); }
.edit-subtasks__title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.edit-subtasks__row--done .edit-subtasks__check { color: var(--accent-text); }
.edit-subtasks__row--done .edit-subtasks__title { color: var(--ink-muted); text-decoration: line-through; }
.composer .edit-parent-block { display: flex; flex-direction: column; font: var(--type-control); margin-top: var(--space-3); background: var(--surface); border-radius: 10px; }
.edit-parent-row { display: flex; align-items: center; gap: 12px; min-height: var(--tap-min); padding: 0 var(--space-3); }
.edit-parent-row__label { flex: none; color: var(--ink-secondary); }
.edit-parent-row__title { flex: 1; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.edit-detach-btn { min-height: var(--tap-min); padding: 0 var(--space-3); border-top: var(--seam); color: var(--accent-text); text-align: left; }
/* Tapered preview: one grouped card, a phase per row, meta joined by middots. */
.composer .preview-tapered { margin-top: var(--space-3); background: var(--surface); border-radius: 10px; }
.preview-tapered-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3) 0; color: var(--ink-secondary); font: 400 13px/18px var(--sans); }
.preview-tapered-row { padding: 10px var(--space-3); }
.preview-tapered-row + .preview-tapered-row { border-top: var(--seam); }
.preview-tapered-meta,.preview-tapered-tags { color: var(--ink-secondary); font: 400 15px/20px var(--sans); }
.preview-tapered-meta > * + *::before { content: ' · '; }
/* Shared to-dos: soft-delete and edit-proposal cards stack under the row, aligned with its title. */
.proposal-cards { display: flex; flex-direction: column; gap: var(--space-2); }
.soft-delete-card,.proposal-card { margin: 0 0 var(--space-2) 52px; padding: var(--space-2) var(--space-3); background: var(--surface); border-radius: 10px; font: 400 15px/20px var(--sans); }
.proposal-cards > .proposal-card { margin-bottom: 0; }
.row-stack > .proposal-cards { margin-bottom: var(--space-2); }
.soft-delete-card__lbl,.proposal-card__head { color: var(--ink-secondary); }
.soft-delete-card__actions,.proposal-card__actions { display: flex; gap: var(--space-4); }
.soft-delete-card__btn,.proposal-card__btn { min-height: var(--tap-min); padding: 0; color: var(--accent-text); font: 400 17px/22px var(--sans); }
.soft-delete-card__btn--dismiss { color: var(--overdue); }
.proposal-card__btn--approve { font-weight: 600; }
.proposal-card__row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; padding: 4px 0; }
.proposal-card__field { flex-basis: 100%; color: var(--ink-secondary); font: 400 13px/18px var(--sans); }
.proposal-card__old { color: var(--ink-muted); text-decoration: line-through; }
.proposal-card__arrow { color: var(--ink-muted); }
.proposal-card__new { color: var(--ink); }
/* Overlays. A bottom sheet rises from the home edge on the raised surface (rounded, grabber — see the
   Task 12 block at the end); a centred dialog owns its own four edges; the scrim is --backdrop-tint. */
.modal-shell,.sheet-overlay,.recur-overlay { position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.modal-shell--center { align-items: center; padding: var(--space-5); }

.sheet-backdrop { position: absolute; inset: 0; background: var(--backdrop-tint); }
.sheet,.recur-card { position: relative; width: 100%; max-width: 650px; max-height: calc(100dvh - max(47px, env(safe-area-inset-top, 0px))); overflow-y: auto; background: var(--surface); border: 0; border-top: 1px solid var(--rule); padding: var(--space-5) var(--space-5) calc(var(--space-5) + var(--home-pad)); }

.modal-shell--center .sheet,.modal-shell--center .recur-card { border: 1px solid var(--rule); padding: var(--space-5); max-height: calc(100dvh - 2 * var(--space-5)); }
/* R25: 180ms arrival, one easing, no overshoot. Reduced motion is handled by the global rule below. */
.modal-shell:not(.dock) .sheet,.modal-shell:not(.dock) .recur-card { animation: sheetUp 400ms cubic-bezier(0.32, 0.72, 0, 1); }
/* The scrim fades in under the rising sheet (iOS). */
.modal-shell:not(.dock) > .sheet-backdrop { animation: scrim-in 240ms ease-out; }
@keyframes scrim-in { from { opacity: 0; } }

.modal-shell--center .sheet,.modal-shell--center .recur-card { animation-name: dialogIn; }
@keyframes dialogIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* A .recur-overlay sheet carries no backdrop child (its shell handles the outside tap), so the
   shell itself paints the scrim. Takeovers and docked panes never paint one. */
.modal-shell:not(.dock):not(.takeover):not(:has(> .sheet-backdrop)) { background: var(--backdrop-tint); }

/* R37 stacking rule: overlay shells STACK, but only ONE scrim paints. app.js mounts every body-level shell
   in a fixed order, so the first painting shell in DOM order keeps its scrim and every later sibling shell
   (and its backdrop child) goes transparent. Two #19191DCC scrims would otherwise compound to ~96 %.
   Docked panes (WHEN, RESCHEDULE, SNOOZE, composer) REPLACE each other inside #app and paint no scrim. */
.modal-shell:not(.dock):not(.takeover):not(.sheet--leaving) ~ .modal-shell:not(.dock):not(.takeover),.modal-shell:not(.dock):not(.takeover):not(.sheet--leaving) ~ .modal-shell:not(.dock):not(.takeover) > .sheet-backdrop { background: transparent; }
.dock { position: relative; inset: auto; order: 1; flex: 0 1 auto; max-height: 55dvh; padding: 0; overflow-y: auto; display: block; }
.dock .sheet-backdrop { display: none; }
/* A docked pane sits in the app column (already 20px gutters). */
.dock .sheet { max-width: none; max-height: none; padding: var(--space-5) 0; animation: none; }
.sheet-head { position: sticky; top: 0; background: var(--surface); z-index: 1; display: flex; align-items: flex-start; gap: var(--space-2); }
.sheet-head .gstrip__txt { flex: 1; min-width: 0; }
.sheet-title { display: block; font: 400 22px/29px var(--sans); overflow-wrap: anywhere; }
.sheet-eyebrow { display: block; font: 700 var(--fs-chrome)/16px var(--sans); color: var(--ink-secondary); }
.sheet-close,.auth-close { flex: none; width: var(--tap-min); height: var(--tap-min); min-width: var(--tap-min); display: grid; place-items: center; padding: 0; font: 400 24px/24px var(--sans); }

/* Commit controls: the one accent on the sheet (R20/R22). */
.rs-save,.tut-finish-ok,.rt-btn--primary { width: 100%; min-height: var(--tap-min); margin-top: var(--space-4); background: var(--accent); color: var(--accent-ink); border: 0; text-align: center; font: 600 17px/22px var(--sans); border-radius: 10px; }
.rt-btn--primary { width: auto; margin-top: 0; padding: 0 var(--space-5); }
/* Every action on an overlay is at least 44x44 (the unit steppers, the strip close, SAVE/CANCEL). */
.modal-shell button,.recur-card button,.recur-skip-card button,.tut-coach button,.tut-finish-overlay button,.edit-image-fullscreen button,.toast button { min-width: var(--tap-min); min-height: var(--tap-min); }
/* Sheet body text; small grey section labels. */
.sheet,.recur-card,.recur-skip-card,.tut-coach,.tut-finish-overlay { font: var(--type-control); }
.sheet .gstrip:not(.sheet-head),.recur-card .gstrip { font: 400 13px/18px var(--sans); color: var(--ink-secondary); padding: 0; border: 0; min-height: 0; }
.sheet input,.sheet textarea,.recur-card input,.recur-card textarea { border: 1px solid var(--control-edge); background: var(--field); }
/* A disabled commit is not accent: the accent is spent only when the tap will do something (R22). */
.rs-save:disabled,.tut-finish-ok:disabled,.rt-btn--primary:disabled { background: var(--surface-pressed); color: var(--ink-muted); }


/* Things row sheets (repeat-late Stay/Shift, skipped slots, counter attach, window notice):
   the weekly-archive grammar — head with title + secondary line, inset groups on --field,
   rows title-left / value-right with a secondary line, text buttons and one filled pill. */
.sheet-head__txt { flex: 1; min-width: 0; }
.sheet-sub { margin-top: 2px; color: var(--ink-secondary); font: 400 15px/20px var(--sans); overflow-wrap: anywhere; }
.sheet--rows .settings-group { margin-top: var(--space-4); background: var(--field); }
.sheet--rows .wr-section + .settings-group { margin-top: var(--space-2); }
.sheet--rows .settings-note { margin-top: var(--space-2); }
.settings-row__sub { display: block; margin-top: 2px; color: var(--ink-secondary); font: 400 13px/18px var(--sans); }
.sheet-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); }
.sheet-actions > .rt-btn--primary { margin-left: auto; }
/* Counter fields: label left, iOS stepper / segmented control right (8px radius, fill only). */
.cz-frow { flex-wrap: wrap; }
.cz-stepper,.cz-seg { flex: none; display: flex; align-items: center; gap: 2px; padding: 2px; background: var(--surface-pressed); border-radius: 8px; }
.cz-step-btn,.cz-step-val,.sheet .cz-step-input { min-height: 44px; min-width: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 400 17px/22px var(--sans); text-align: center; font-variant-numeric: tabular-nums; }
.cz-step-btn { font-size: 22px; }
.sheet .cz-stepper .cz-step-input { width: 5ch; padding: 0; background: transparent; }
.cz-seg-btn { min-height: 44px; padding: 0 var(--space-3); border: 0; border-radius: 8px; background: transparent; color: var(--ink-secondary); font: 400 15px/20px var(--sans); }
.cz-seg-btn.on { background: var(--field); color: var(--ink); }
.cz-step-ask { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

.tutorial-overlay,.edit-image-fullscreen,.e2ee-gate-overlay,.takeover { position: fixed; inset: max(8px, env(safe-area-inset-top, 0px)) max(8px, calc((100vw - 960px)/2)) max(8px, env(safe-area-inset-bottom, 0px)); z-index: var(--z-modal); display: flex; flex-direction: column; background: var(--field); border: var(--seam); overflow-y: auto; }

/* Calendar agenda row: title left, time (↻ when it repeats) right, 44px like every list row. */
.cal-ev { display: flex; align-items: baseline; gap: var(--space-3); width: 100%; min-height: 44px; padding: 11px 0; border: 0; color: var(--ink); font: 400 17px/22px var(--sans); text-align: left; }
.cal-ev__ti { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cal-ev__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-ev__src { color: var(--ink-secondary); font: 400 13px/18px var(--sans); }
.cal-ev__tm { flex: none; color: var(--ink-secondary); font: 400 15px/20px var(--sans); font-variant-numeric: tabular-nums; }
.expand-inner button.tag-chip { display: inline-flex; min-width: var(--tap-min); min-height: var(--tap-min); align-items: center; padding: 4px 8px; }
/* Sits above the 56px capture button so Undo is never covered. */
.toast { position: fixed; bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 68px); left: var(--space-5); right: var(--space-5); margin: auto; max-width: 960px; z-index: var(--z-toast); display: flex; align-items: center; gap: var(--space-2); border: 0; border-radius: 10px; padding: 0 var(--space-1) 0 var(--space-4); min-height: var(--tap-min); background: var(--surface-pressed); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); font: 500 calc(var(--fs-chrome) + 2px)/18px var(--sans); }
.toast__msg { flex: 1; padding: var(--space-2) 0; }
.toast button { color: var(--accent-text); font-weight: 600; min-width: var(--tap-min); min-height: var(--tap-min); padding: 0 var(--space-3); align-self: stretch; }

.edit-image-fullscreen { position: fixed; inset: 0; z-index: var(--z-img-full); background: var(--field); display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) 0 var(--home-pad); }
.edit-image-fullscreen__frame { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0; overflow: hidden; }
.edit-image-fullscreen img { object-fit: contain; max-width: 100%; max-height: 100%; }

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }
/* Swipe actions live behind the opaque task, revealed only by a drag. */
.row-swipe__action { position: absolute; inset: 0 0 0 auto; display: flex; visibility: hidden; }
/* Things swipes: left reveals filled Move (blue) and Delete (red) cells; right shows the When calendar. */
.row-swipe__act { flex: none; width: 72px; min-height: var(--tap-min); padding: 0; border: 0; text-align: center; color: var(--accent-ink); font: 400 15px/20px var(--sans); }
.row-swipe__act--move { background: var(--accent-bg); color: var(--accent-ink); }
.row-swipe__act--del { background: var(--overdue); }
.row-swipe__when { position: absolute; inset: 0 auto 0 0; width: 96px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent-ink); visibility: hidden; }
.row-swipe:has(> .row.swiping, > .rowd.swiping, > .row-today.swiping, > .done-row.swiping) :is(.row-swipe__action, .row-swipe__when),
.row-swipe.is-open .row-swipe__action { visibility: visible; }
.row-swipe:has(> .row[class*="anim-"], > .rowd[class*="anim-"], > .row-today[class*="anim-"]) :is(.row-swipe__action, .row-swipe__when) { visibility: hidden; }
.row-swipe > .row.swiping, .row-swipe > .rowd.swiping, .row-swipe > .row-today.swiping { transition: none; }
.row-swipe > .done-row { z-index: 1; touch-action: pan-y; will-change: transform; transition: transform 260ms cubic-bezier(0.2, 0, 0, 1); }
.row-swipe > .done-row.swiping { transition: none; }
.task-state--skipped { font-weight: 700; color: var(--overdue); }
/* The SELECTED pane: no pane title, no index, keys as quiet legend (see PHASE4-REPORT trace). */
.rowd__content .row-tag { font-size: var(--fs-row-detail); }
.cwn-ok { width: 100%; min-height: 50px; margin-top: var(--space-5); border: 0; border-radius: 10px; color: var(--accent-ink); background: var(--accent); font: 600 17px/22px var(--sans); text-align: center; }
.conn-overlay,.tut-finish-overlay { position: fixed; inset: 0 max(0px,calc((100vw - 960px)/2)); z-index: var(--z-modal); background: var(--field); border: 0; display: flex; flex-direction: column; overflow-y: auto; padding: env(safe-area-inset-top, 0px) var(--space-5) var(--home-pad); }
.conn-body,.tut-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0; }


.tut-finish-overlay { inset: auto 0 0; max-height: 65dvh; background: var(--surface); border-top: 1px solid var(--rule); padding: var(--space-5) var(--space-5) calc(var(--space-5) + var(--home-pad)); animation: sheetUp var(--dur-slow) cubic-bezier(0.2, 0, 0, 1); }


.pin-keypad { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.pin-key { display: grid; place-items: center; text-align: center; }
.e2ee-gate-card:has(.pin-keypad) { margin-top: auto; flex-shrink: 0; }
/* E2EE gate: every phase is one centred Things lock screen (brand, title, one secondary line,
   grouped fields, one blue primary, blue text buttons). Keypad phases add .pin-unlock: round keys,
   dots, and no card entrance replay on every digit. */
.e2ee-gate-overlay > .e2ee-gate-card { flex: 1; display: flex; flex-direction: column; text-align: center; }
.e2ee-gate-card > * + * { margin-top: var(--space-3); }
.e2ee-gate-card > .pin-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 76px; color: var(--ink-secondary); font: 600 15px/20px var(--sans); }
.e2ee-gate-card .pin-brand__star { color: var(--today); font-size: 24px; line-height: 1; }
.e2ee-gate-card > .signin-title { margin-top: 22px; font: 650 26px/33px var(--sans); letter-spacing: -.02em; }
.e2ee-gate-card > .signin-title + .signin-sub { margin-top: 6px; }
.e2ee-gate-card > .signin-sub + :is(.signin-fields, .signin-btn--primary, .e2ee-reccode) { margin-top: var(--space-6); }
.pin-unlock .e2ee-gate-card { border: 0; margin-top: 0; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; animation: none !important; }
.pin-unlock .e2ee-gate-card > .pin-ledger { margin-top: 30px; }
.pin-unlock .pin-ledger__slots { display: flex; gap: 20px; }
.pin-unlock .pin-slot { width: 14px; height: 14px; border: 1px solid var(--ink-muted); border-radius: 50%; }
.pin-unlock .pin-slot--cur { border-color: var(--today); }
.pin-unlock .pin-slot--on { border-color: var(--ink); background: var(--ink); }
.pin-unlock .e2ee-gate-card > .pin-keypad { width: 258px; grid-template-columns: repeat(3, 72px); justify-content: space-between; row-gap: 10px; margin-top: 40px; }
.pin-unlock .pin-key { width: 62px; height: 62px; min-height: 62px; margin: auto; border: 0; border-radius: 50%; font: 400 23px/1 var(--sans); color: var(--ink); }
.pin-unlock button.pin-key { background: var(--surface); }
.pin-unlock button.pin-key:active { background: var(--surface-pressed); }
.pin-unlock .pin-key--del { font-size: 20px; color: var(--ink-secondary); }
.pin-unlock button.pin-key--del { background: transparent; }
.pin-unlock .e2ee-gate-card > .pin-foot { margin-top: auto; padding-top: var(--space-4); display: flex; flex-direction: column; align-items: center; }
.pin-unlock .pin-foot .signin-btn-link:last-child { color: var(--ink-secondary); }
/* Sign in and the E2EE gate share their form parts. */
.signin-sub { color: var(--ink-secondary); font: 400 15px/20px var(--sans); }
.signin-fields { display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: var(--surface); }
.recur-card .signin-fields > .acc-input { min-height: 44px; margin: 0; padding: 11px var(--space-4); border: 0; background: transparent; color: var(--ink); font: 400 17px/22px var(--sans); }
.recur-card .signin-fields > .acc-input + .acc-input { border-top: 1px solid var(--rule); }
.recur-card .signin-btn--primary { display: block; width: 100%; min-height: 50px; padding: 0 var(--space-4); border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: 600 17px/22px var(--sans); text-align: center; }
.recur-card .signin-btn--primary:disabled { background: var(--surface); color: var(--ink-muted); }
.recur-card .signin-btn-link { display: block; width: 100%; min-height: 44px; padding: 0 var(--space-2); color: var(--accent-text); font: 400 17px/22px var(--sans); text-align: center; }
.recur-card .signin-btn-link--dim { color: var(--ink-secondary); }
.signin-err { color: var(--overdue); font: 400 15px/20px var(--sans); }
.signin-warn { padding: var(--space-3) var(--space-4); border-radius: 10px; background: var(--surface); text-align: left; }
.signin-warn__head { color: var(--ink); font: 600 15px/20px var(--sans); }
.signin-warn--hard .signin-warn__head { color: var(--overdue); }
.signin-warn__body { margin-top: 2px; color: var(--ink-secondary); font: 400 15px/20px var(--sans); }
.e2ee-reccode { padding: var(--space-4); border-radius: 10px; background: var(--surface); color: var(--ink); font: 600 20px/28px var(--sans); font-variant-numeric: tabular-nums; user-select: all; overflow-wrap: anywhere; }
.e2ee-reccode-actions { display: flex; justify-content: center; gap: var(--space-4); }
.recur-card .e2ee-reccode-actions .signin-btn-link { width: auto; }
.e2ee-ack { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 10px var(--space-4); border-radius: 10px; background: var(--surface); color: var(--ink); font: 400 15px/20px var(--sans); text-align: left; }
.recur-card .e2ee-ack input[type=checkbox] { flex: none; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; border: 0; accent-color: var(--accent); }
.takeover { justify-content: flex-start; align-items: stretch; padding: 4px; }
.takeover .recur-card,.takeover .sheet { max-width: none; max-height: none; }
.takeover .sheet-backdrop { display: none; }
@media (hover: hover) { .task-link:hover { text-decoration: underline; } }

@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* Things/iOS push between screens (app.js _slideViews): the old view slides under or out. */
.view--leaving { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--field); }
.view--above { position: relative; z-index: 1; background: var(--field); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35); }
.view--leaving.view--above { position: fixed; z-index: 2; }
@keyframes xtn-slideup { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }
.stamp,.row .checkbox,.rowd__cb,.rt-checkbox,.edit-image-fullscreen__frame { border-width: 1px; }
/* Notification focus: one soft highlight, no catalog (Things UI cleanup, Task 3).
   No !important: instead, each ambient background rule the row can carry is
   matched directly at higher specificity — the bare fallback (e.g. an
   archive row, which is in neither wrapper) plus the two named contexts,
   .row-swipe > .row-today (line ~210) and .view--circles .row-today (line
   ~906). :not(.expanded) is deliberate: an expanded row's own elevated
   background (line ~202, var(--surface), the lifted-card look) must keep
   winning even while it carries the mark — !important would have flattened
   it for the mark's whole duration. */
[data-focus-fx="soft"]:not(.expanded),
.row-swipe > [data-focus-fx="soft"]:not(.expanded),
.view--circles [data-focus-fx="soft"]:not(.expanded) { background: var(--surface-pressed); }
[data-focus-fx="soft"] { transition: background 600ms cubic-bezier(0.2,0,0,1); }
.rowd__name { font-size: var(--fs-rows); }
.subs-list .row.row--sub .title { font-size: var(--fs-rows); }
@media (hover: none) and (pointer: coarse) {
  .input-meta__keys { display: none; }
}
/* Meta is one quiet secondary line (frame .meta): recurrence and snooze read as text beside the time. */
.task-state .rt-recur-chip,.task-state .rt-snooze { color: inherit; }


@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }

.task-due,.task-tags,.task-state { line-height: 16px; }
.tut-coach { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-coach); max-height: 45dvh; overflow-y: auto; background: var(--surface); border: 0; border-top: 1px solid var(--rule); padding: var(--space-5) var(--space-5) calc(var(--space-5) + var(--home-pad)); animation: sheetUp var(--dur-slow) cubic-bezier(0.2, 0, 0, 1); }
/* Coach and finish card: rounded Things sheets. The + lifts above the coach, which asks the user to tap it. */
.tut-coach,.tut-finish-overlay { border-top: 0; border-radius: 16px; }
body:has(.tut-coach) .capture-fab { bottom: calc(var(--tut-coach-h, 0px) + var(--space-4)); }
.tut-coach__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: -12px; }
.tut-coach__step { color: var(--ink-secondary); font: 400 13px/18px var(--sans); }
.tut-coach .tut-coach__skip { margin-right: -8px; padding: 0 8px; color: var(--accent-text); font: 400 17px/22px var(--sans); }
.tut-coach__title,.tut-finish-title { color: var(--ink); font: 600 20px/26px var(--sans); }
.tut-coach__prompt,.tut-finish-body { margin-top: var(--space-1); color: var(--ink); font: 400 15px/20px var(--sans); }
.tut-finish-body > p { margin: 0; color: var(--ink-secondary); }
.tut-coach__hint { margin-top: var(--space-2); color: var(--ink-secondary); font: 400 15px/20px var(--sans); }
.tut-coach__ex { color: var(--ink); }
.tut-coach__progress { display: flex; gap: 6px; margin-top: var(--space-3); }
.tut-coach__pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--rule); }
.tut-coach__pdot.is-done { background: var(--ink-muted); }
.tut-coach__pdot.is-on { background: var(--accent); color: var(--accent-ink); }
.edit-image-fullscreen .gstrip { padding: 0 var(--space-5); }

.command-preview { padding: 8px 4px; color: var(--today); }

.rowd__when { color: var(--future); }
small, sub, sup { font-size: inherit; }

/* Late tasks show a red date only (Things UI cleanup, Task 4): the row keeps
   the normal field background, no decorative pattern. --overdue is the
   existing red token (reused rather than adding a new one). */
.task-due.late-due { color: var(--overdue); }

/* Phase 5: deep surfaces use one reading column; task rows/chrome stay shared. */




.e2ee-gate-overlay,.tutorial-overlay,.signin-modal-overlay { inset: 0 max(0px, calc((100vw - var(--content-max) - 2 * var(--space-5))/2)); border: 0; padding: env(safe-area-inset-top, 0px) var(--space-5) var(--home-pad); }
:is(.conn-overlay,.tutorial-overlay,.signin-modal-overlay) > .gstrip { border: 0; padding: var(--space-4) 0; gap: var(--space-2); font: var(--type-control); }

.e2ee-gate-overlay { inset: 0; padding-inline: max(var(--space-5), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px), calc((100% - var(--content-max)) / 2)); }
.conn-overlay { inset-inline: max(0px, calc((100vw - var(--content-max) - 2 * var(--space-5))/2)); }




/* Deep-view forms retain a reading column and room for action labels. */
.signin-modal-overlay > .signin-modal-card,.e2ee-gate-overlay > .e2ee-gate-card { width: 100%; max-height: none; border: 0; padding: 0 0 var(--space-5); background: var(--field); font: var(--type-body); overflow-y: visible; }
.signin-modal-card > * + * { margin-top: var(--space-3); }
.signin-modal-card > .signin-fields,.signin-modal-card > .signin-warn { margin-top: var(--space-6); }


/* Study B: neutral fill, check, then secondary title; commit owns removal. */
.study-b-check { position: relative; }
.study-b-check::before { animation: study-b-fill 120ms cubic-bezier(0.2, 0, 0, 1) both; }
.study-b-check > svg { position: absolute; width: var(--check-size); height: var(--check-size); left: 50%; top: 0; transform: translateX(-50%); pointer-events: none; }
.c-cb > .study-b-check > svg { top: 11px; }
.study-b-check path { fill: none; stroke: var(--cb-ink, var(--accent-ink)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: study-b-check 120ms step-end both; }
.study-b-title { animation: study-b-title 80ms cubic-bezier(0.2, 0, 0, 1) 120ms both; }
@keyframes study-b-fill { from { background-color: transparent; } to { background-color: var(--cb-fill, var(--accent-bg)); border-color: transparent; } }
@keyframes study-b-check { from { visibility: hidden; } to { visibility: visible; } }
@keyframes study-b-title { from { color: var(--ink); } to { color: var(--ink-secondary); } }
.completion-status { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── Things 3 device chrome (pass 7) ────────────────────────────────
   The three spec shots: near-black field, no hairlines or tap boxes on
   dest/list rows, pill Quick Find with a magnifier, Settings text +
   sliders glyph + blue + with chevron in the home band, Today headed by
   a big title-case title under a back/dots bar, and one muted pill
   group heading ("08:00 work") above the day's rows. */

/* Back + dots menu share one bar above the heading (Today shot). */
.topbar-row { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: var(--tap-min); transition: box-shadow 200ms ease; }
/* Things large title: the heading scrolls away with the list; this small
   centred title (and a hairline) fade into the fixed bar once it has gone. */
.nav-title { position: absolute; left: 56px; right: 56px; top: 0; height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; font: 600 17px/1.2 var(--sans); color: var(--ink); overflow-wrap: anywhere; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity 220ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.topbar--titled .nav-title { opacity: 1; transform: none; }
.topbar--titled .topbar-row { box-shadow: 0 1px 0 var(--rule); }
.topbar--lifted { padding-bottom: 0; }
.list-head { padding-bottom: var(--space-2); }
/* Things tag bar: grey rounded pills under a list title; the active one fills blue. */
.tag-bar { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
.tag-bar__tag { position: relative; z-index: 0; min-height: var(--tap-min); padding: 0 var(--space-3); background: transparent; color: var(--ink); font: 500 15px/20px var(--sans); }
.tag-bar__tag::before { content: ''; position: absolute; z-index: -1; inset: 6px 0; border-radius: 16px; background: var(--surface-pressed); }
.tag-bar__tag.on { color: var(--accent-ink); }
.tag-bar__tag.on::before { background: var(--accent-bg); }
@media (prefers-reduced-motion: reduce) { .nav-title, .topbar-row { transition: none; } }
.list-menu { display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); min-width: var(--tap-min); padding: 0; color: var(--ink-secondary); }
/* No tap rectangles anywhere on the list chrome. */
.list-menu:is(:focus, :focus-visible) { outline: none; }
.topbar-row button:is(:focus, :focus-visible) { outline: none; }

/* Quick Find: pill, muted, magnifier + label, generous top inset. */
.quick-find { justify-content: center; gap: 7px; margin-top: var(--space-4); border-radius: 10px; background: var(--surface); }
.quick-find__ico { display: inline-grid; place-items: center; color: var(--ink-muted); }
.quick-find__ph { color: var(--ink-muted); font: 400 16px/22px var(--sans); }

/* Dest + personal rows: icon, title-case label, optional count. Comfortable
   height, no boxes, no hairlines. */
.dest .name { font: 600 17px/24px var(--sans); font-style: normal; }
.nav--destinations .dest { min-height: 52px; }
/* Muted grey count on the right (Today shows 2). */
.dest .count { color: var(--ink-muted); font: 400 15px/20px var(--sans); }

/* Bottom dock: Settings (sliders glyph + text, centred-leftish) with the
   blue + sitting in the home-indicator band. */
.device-dock { padding: var(--space-2) 0 var(--space-2) 96px; justify-content: flex-start; }
.settings-link { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-muted); font: 400 15px/20px var(--sans); }
.settings-link__ico { display: inline-grid; place-items: center; color: var(--ink-muted); }
.capture-fab { width: 56px; height: 56px; min-width: 56px; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }

/* Today: big title-case heading, then the muted pill group heading. */
.head-line .h1 { font-size: calc(var(--fs-hero) + 21px); line-height: 44px; }
/* Google Calendar event pill: Things 3 style, sits above task rows in Today and Calendar */
.gcal-events { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); margin-bottom: var(--space-4); }
.gcal-events > .gcal-pill { margin: 0; }
.gcal-pill { display: flex; align-items: baseline; gap: var(--space-2); min-height: var(--tap-min); margin: var(--space-2) 0; padding: var(--space-3) var(--space-4); background: var(--surface); border-radius: 10px; font: 400 15px/20px var(--sans); }
.gcal-pill__time { flex: none; color: var(--accent-text); font-weight: 500; }
.gcal-pill__title { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }

/* Rows read quieter than the old TUI: body-sans title, dim meta, no seams. */
.view--circles .row-today, .view--circles .row { background: transparent; }
.list .group-head { text-transform: none; letter-spacing: 0; }
/* Things Upcoming: big day number + day name on a baseline, hairline under the heading. */
.group-head:is(:has(> .up-head__name), :has(> .home-head)) { align-items: baseline; flex-wrap: nowrap; gap: 6px; padding: var(--space-5) 0 var(--space-2); border-bottom: 1px solid var(--rule); }
.up-head__num { font: 700 26px/1 var(--sans); color: var(--text); }
.up-head__name { font: 600 var(--fs-body)/1.2 var(--sans); color: var(--text); }
.up-head__num + .up-head__name { font-weight: 400; color: var(--dim); }
/* Things Anytime: tappable project / area heading with its sidebar icon. */
/* Negative margin keeps the 44px tap target without padding the heading. */
.home-head { margin: -11px 0; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--text); font: 700 var(--fs-body)/1.3 var(--sans); cursor: pointer; }
.home-head__ico { width: 18px; height: 18px; display: inline-grid; place-items: center; color: var(--capture); }
.home-head__ico svg { width: 100%; height: 100%; }

/* Open to-do card contents (Things 3). */
.expand-inner > * { margin: 0 16px 0 52px; }
.expand-inner > :last-child { margin-bottom: 10px; }
.expand-inner .notes { font: var(--type-input); color: var(--ink-muted); padding: 2px 0 10px; white-space: pre-wrap; cursor: text; }
.expand-inner .notes--empty { opacity: 0.6; }
.xp-checklist { padding: 2px 0 8px; }
.xp-check { display: flex; align-items: center; gap: 12px; min-height: 36px; border-bottom: 1px solid var(--rule); font: var(--type-meta); color: var(--ink); }
.xp-check:last-child { border-bottom: 0; }
.xp-check__dot { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 1px solid var(--capture); }
.xp-check.is-done .xp-check__t { color: var(--ink-muted); }
.xp-check.is-done .xp-check__dot { border-color: var(--ink-muted); }
.expand-inner .tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px; }
.expand-inner button.tag-chip { position: relative; z-index: 0; padding: 0 10px; background: transparent; }
/* 26px pill drawn inside the 44px hit box (grammar §21). */
.expand-inner button.tag-chip::before { content: ''; position: absolute; z-index: -1; inset: 9px 0; border-radius: 16px; background: var(--surface-pressed); }
.xp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.xp-when { font: var(--type-meta); color: var(--ink-muted); min-width: 0; overflow-wrap: anywhere; }
.xp-icons { display: flex; gap: 2px; margin-right: -10px; }
.xp-ico { width: var(--tap-min); height: var(--tap-min); display: inline-grid; place-items: center; color: var(--ink-muted); border-radius: 50%; }
.xp-ico:active { background: var(--surface-pressed); }
.expand-inner .xp-step { opacity: 0; transform: translateY(-6px); transition: opacity 120ms ease, transform 120ms ease; }
:is(.row, .rowd, .row-today).expanded .xp-step { opacity: 1; transform: none; transition: opacity 200ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
:is(.row, .rowd, .row-today).expanded .xp-step:nth-child(1) { transition-delay: 60ms; }
:is(.row, .rowd, .row-today).expanded .xp-step:nth-child(2) { transition-delay: 110ms; }
:is(.row, .rowd, .row-today).expanded .xp-step:nth-child(3) { transition-delay: 160ms; }
:is(.row, .rowd, .row-today).expanded .xp-step:nth-child(4) { transition-delay: 210ms; }
.xp-bar { position: fixed; z-index: 45; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface-pressed); color: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); animation: xp-bar-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1) 80ms both; }
.xp-bar button { min-width: var(--tap-min); min-height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border-radius: 10px; font: 500 15px/20px var(--sans); color: inherit; }
.xp-bar button:active { background: var(--surface); }
.xp-bar button[disabled] { opacity: 0.4; }
.xp-bar.is-leaving { animation: xp-bar-out 180ms ease forwards; }
@keyframes xp-bar-in { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes xp-bar-out { to { opacity: 0; transform: translate(-50%, 24px); } }
@media (prefers-reduced-motion: reduce) { .expand-block, .expand-inner, .expand-inner .xp-step, .row-swipe > :is(.row, .rowd, .row-today), .view :is(.topbar, .group-head, .row-swipe, .subs-list), .xp-bar { transition: none; animation: none; } }
.xp-bar button { white-space: nowrap; }
.row-swipe > .expanded .expand-block { background: transparent; }
.expand-inner .notes { font: var(--type-control); font-weight: 400; }
.xp-check { font: var(--type-control); font-weight: 400; }
/* Things: the open card shows the bare title; date moves to the card foot. */
.row-swipe > .expanded :is(.row-meta, .c-tail) { opacity: 0; visibility: hidden; }
.row-swipe > .expanded .row-meta { display: none; }
.row-swipe > :is(.row, .rowd, .row-today):not(.expanded):active { background: var(--surface-pressed); transition: none; }
/* Notes + checklist at title size. */
.expand-inner .notes, .xp-check { font: var(--type-task); }
.xp-checklist { border-top: 1px solid var(--rule); }
.xp-check, .xp-check:last-child { border-bottom: 1px solid var(--rule); min-height: 40px; }
.xp-bar button { font-weight: 600; }
.row-swipe.is-collapsing + .subs-list { display: none; }
.xp-check { width: 100%; text-align: left; cursor: pointer; }
.xp-check.is-done .xp-check__dot { background: var(--ink-muted); }
.xp-check.is-done .xp-check__t { text-decoration: line-through; }
.expand-inner button.xp-check { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0; line-height: 20px; }
.expand-inner .xp-check__dot { display: block; }

/* Things 3 main-screen lists: same icon column as the destination rows. */
.list-group { margin-top: var(--space-5); }
/* Things area page: projects sit straight under the notes. */
.view--list .list-head + .list-group { margin-top: 0; }
.list-row { display: grid; grid-template-columns: var(--tap-min) minmax(0, 1fr) auto; column-gap: var(--space-2); align-items: center; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; text-align: left; color: var(--ink); }
.list-row .name { font: 400 17px/24px var(--sans); overflow-wrap: anywhere; }
.list-row .count { color: var(--ink-muted); font: 400 15px/20px var(--sans); padding-right: 4px; }
.list-row__ico { width: 20px; height: 20px; margin: 0 auto; color: var(--ink-muted); display: inline-grid; place-items: center; }
.list-row__ico--project { color: var(--capture); }
.list-row--area .name { font-weight: 700; }
.view--main .device-dock { padding-left: 0; gap: var(--space-2); }
.new-list-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 8px; color: var(--ink-muted); font: 400 15px/20px var(--sans); background: transparent; }
.new-list-link__plus { font: 400 20px/1 var(--sans); }
.nl-chooser { position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; align-items: flex-end; justify-content: center; padding: 0 8px max(8px, env(safe-area-inset-bottom, 0px)); background: var(--scrim); }
.nl-chooser__sheet { width: 100%; max-width: 420px; padding: 8px 0; border-radius: 16px; background: var(--surface); }
.nl-chooser__opt { display: grid; grid-template-columns: var(--tap-min) minmax(0, 1fr); column-gap: var(--space-2); align-items: center; width: 100%; min-height: 60px; padding: 0 12px 0 4px; border: 0; background: transparent; text-align: left; color: var(--ink); }
.nl-chooser__opt:active { background: var(--surface-pressed); }
.nl-chooser__text { display: grid; gap: 2px; }
.nl-chooser__title { font: 600 17px/22px var(--sans); }
.nl-chooser__sub { font: 400 13px/18px var(--sans); color: var(--ink-muted); }

.move-overlay { position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; }

.list-row--nested { padding-left: var(--space-5); }

/* Things 3 project / area screen (viewList). */
.list-head__ico { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 12px; align-self: center; color: var(--ink-muted); }
.list-head__ico svg { width: 28px; height: 28px; }
.list-head__ico.list-row__ico--project { color: var(--capture); }
.list-notes { display: block; width: 100%; resize: none; border: 0; background: transparent; font: var(--type-control); color: var(--ink-muted); padding: 4px 0 12px 48px; }
.list-notes:focus { outline: none; color: var(--ink-secondary); }
.list-menu-pop { position: relative; }
.list-menu-pop > summary { list-style: none; cursor: pointer; }
.list-menu-pop > summary::-webkit-details-marker { display: none; }
.list-menu-pop__items { position: absolute; right: 0; top: 44px; z-index: 50; min-width: 200px; padding: 4px 0; background: var(--surface); border-radius: 10px; display: grid; }
.list-menu-pop__items button { min-height: 44px; padding: 0 16px; border: 0; background: transparent; text-align: left; font: var(--type-control); color: var(--ink); }
.list-menu-pop__items button:active { background: var(--surface-pressed); }
.list-menu-pop__items .list-menu-pop__danger { color: var(--overdue); }
.list-menu-pop__items button { display: flex; align-items: center; }
.list-menu-pop__check { margin-left: auto; padding-left: 16px; color: var(--accent-text); }
.list-menu-pop__note { padding: 10px 16px; border-top: 1px solid var(--rule); font: var(--type-meta); color: var(--ink-secondary); }
.head-line__aside { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }

/* ── Things settings sheet and sheets (Task 12) ─────────────────────────
   Settings is one rounded sheet over the list (grammar §4.10): the sheet is
   the grouped-list background and each .settings-group an inset card. Rows:
   label left, value / switch / chevron right, hairline between rows inside a
   group only. */
.settings-overlay { position: fixed; inset: 0; z-index: 40; background: var(--field); }
.settings-sheet { position: absolute; inset: 0 max(0px, calc((100vw - var(--content-max) - 2 * var(--space-5))/2)); display: flex; flex-direction: column; overflow: hidden; background: var(--field); padding: env(safe-area-inset-top, 0px) var(--space-5) 0; }
.settings-sheet .acc-top { flex: none; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 0 var(--space-3); }
.settings-sheet .acc-top__bar { display: flex; align-items: center; min-height: 44px; }
.settings-sheet .acc-top__title { font: 700 28px/34px var(--sans); color: var(--ink); }
.settings-close,.sheet-close,.recur-card > .auth-close { flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle, var(--surface-pressed) 15px, transparent 15.5px); color: var(--ink-secondary); font: 600 14px/1 var(--sans); text-align: center; }
.settings-sheet .settings-close { width: auto; margin: 0 -8px 0 auto; padding: 0 8px; border-radius: 0; background: none; color: var(--accent-text); font: 600 17px/22px var(--sans); }
.settings-back { margin-left: -8px; min-height: 44px; padding: 0 8px; background: transparent; color: var(--accent-text); font: 400 17px/22px var(--sans); }
.settings-sheet .sync-error-banner { flex: none; border: 0; padding: 0; }
.settings-sheet .acc-grid { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; padding: 4px 0 calc(24px + var(--home-pad)); }
.settings-group { flex: none; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: 10px; }
.settings-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0; padding: 10px 16px; border: 0; background: transparent; color: var(--ink); text-align: left; text-decoration: none; font: 400 17px/22px var(--sans); }
.settings-row + .settings-row { background-image: linear-gradient(var(--rule), var(--rule)); background-position: 16px 0; background-size: calc(100% - 16px) 1px; background-repeat: no-repeat; }
:is(button, a).settings-row:active { background-color: var(--surface-pressed); }
.settings-row__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.settings-row__value { flex: none; max-width: 55%; color: var(--ink-secondary); text-align: right; overflow-wrap: anywhere; }
.settings-row__chev { flex: none; margin-right: -4px; color: var(--ink-muted); font: 400 22px/22px var(--sans); }
.settings-row__check { flex: none; color: var(--accent-text); font: 600 17px/22px var(--sans); }
.settings-row--link { color: var(--accent-text); }
.settings-row--danger { color: var(--overdue); }
.settings-note { margin: 0 16px; color: var(--ink-muted); font: 400 13px/18px var(--sans); }
.acc-grid > .settings-note { margin-top: -16px; }
.settings-footer { margin: 0; color: var(--ink-muted); font: 400 13px/18px var(--sans); text-align: center; }
/* iOS switch: 51x31 track inside a 44px-tall target. */
.appearance-switch { position: relative; flex: none; width: 51px; min-width: 51px; height: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; }
/* The 44px hit area overhangs the row padding so a switch row stays 44px like every other row. */
.settings-row > .appearance-switch { margin: -10px -2px -10px 0; }
.appearance-switch::before { content: ''; position: absolute; inset: 6px 0; border-radius: 16px; background: var(--surface-pressed); transition: background-color var(--dur-base); }
.appearance-switch.on::before { background: var(--accent); color: var(--accent-ink); }
.appearance-switch::after { content: ''; position: absolute; top: 8px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--ink); transition: transform var(--dur-base); }
.appearance-switch.on::after { transform: translateX(20px); }

.sheet { border: 0; border-radius: 16px; }
/* Sheets: rounded on the surface, a grabber, sentence-case title, Things
   list rows, blue text buttons, red for destructive. */
.modal-shell--bottom > .recur-card { border: 0; border-radius: 16px; padding: 8px var(--space-5) calc(var(--space-5) + var(--home-pad)); }
.dock .sheet { padding: 8px var(--space-4) var(--space-4); }
.modal-shell > .sheet::before,.modal-shell--bottom > .recur-card::before,.move-sheet::before { content: ''; display: block; width: 36px; height: 5px; margin: 0 auto 8px; border-radius: 8px; background: var(--control-edge); }
.sheet-head { align-items: center; gap: var(--space-2); min-height: 0; padding: 0 0 var(--space-2); border: 0; background: inherit; }
.sheet-head .gsegs > * + * { border-left: 0; }
.sheet-eyebrow { font: 400 13px/18px var(--sans); color: var(--ink-secondary); }
.sheet-title,.cnk-title,.rt-card .rt-title,.signout-title,.acct-del__title { font: 600 20px/26px var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.sheet-text-btn { min-height: 44px; padding: 0 var(--space-3); border: 0; background: transparent; color: var(--accent-text); font: 400 17px/22px var(--sans); text-align: center; }
.sheet-text-btn--danger { color: var(--overdue); }
.sheet input:not([type=checkbox]),.modal-shell--bottom > .recur-card input { min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--field); color: var(--ink); font: 400 17px/22px var(--sans); }
.sheet-group { display: flex; flex-direction: column; }
.sheet-group + .sheet-group { margin-top: var(--space-3); border-top: 1px solid var(--rule); }
.task-action-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 48px; padding: 10px 0; border: 0; background: transparent; color: var(--ink); text-align: left; font: 400 17px/22px var(--sans); }
.task-action-btn + .task-action-btn { border-top: 1px solid var(--rule); }
.task-action-btn__sub { color: var(--ink-secondary); font: 400 15px/20px var(--sans); text-align: right; }
.task-action-btn--disabled { color: var(--ink-muted); }
.task-action-btn--disabled .task-action-btn__sub { color: var(--ink-muted); }
.task-action-btn--del { color: var(--overdue); }
/* Snooze */
.sheet .gstrip:not(.sheet-head) { margin: var(--space-2) 0 6px; }
.snooze-key { min-height: 44px; border: 0; border-radius: 10px; background: var(--surface-pressed); color: var(--ink); text-align: center; font: 400 17px/22px var(--sans); }
.snooze-key:active { background: var(--rule); }
.snooze-key--neg { color: var(--ink-secondary); }
.rs-input-wrap { display: flex; align-items: center; gap: var(--space-2); }
.rs-input-wrap input { flex: 1; }
.rs-input-wrap .rs-save { width: auto; min-width: 88px; margin: 0; }
.rs-reads { min-height: 18px; padding: var(--space-1) var(--space-1) 0; font: 400 13px/18px var(--sans); color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
/* When sheet: tabs, Today / This evening, month calendar, Someday, typed box. */
.when-sheet { display: flex; flex-direction: column; gap: var(--space-3); }
.when-body { display: flex; flex-direction: column; gap: var(--space-3); }
.when-row .settings-row__label { display: flex; align-items: center; gap: var(--space-3); }
.when-ic { width: 20px; text-align: center; color: var(--ink-secondary); }
.when-ic--today { color: var(--today); }
.when-ic--evening { color: var(--accent-text); }
.when-cal__head { display: flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-1); }
.when-cal__month { flex: 1; font: 600 15px/20px var(--sans); color: var(--ink-secondary); }
.when-cal__nav { min-width: 44px; text-align: center; color: var(--accent-text); font: 400 22px/1 var(--sans); }
.when-cal__nav:disabled { color: var(--ink-muted); }
.when-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; font-variant-numeric: tabular-nums; }
.when-cal__dow { padding-bottom: var(--space-1); font: 400 11px/16px var(--sans); color: var(--ink-muted); }
.when-cal__day { min-height: 40px; padding: 0; display: grid; place-items: center; text-align: center; font: 400 15px/1 var(--sans); color: var(--ink); }
.when-cal__day:disabled { color: var(--ink-muted); }
.when-cal__day.is-today { color: var(--today); font-size: 17px; }
.when-cal__day.is-due { background: radial-gradient(circle, var(--accent-bg) 16px, transparent 17px); color: var(--accent-ink); }
.when-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.when-chip { min-height: 40px; padding: 0 var(--space-4); border-radius: 10px; background: var(--surface-pressed); color: var(--ink); text-align: center; font: 400 15px/20px var(--sans); font-variant-numeric: tabular-nums; }
/* Reschedule */
/* Counter keypad + edit */
.sheet--counter-keypad { position: relative; }
.sheet--counter-keypad > .sheet-close { position: absolute; right: var(--space-2); top: var(--space-4); z-index: 2; }
.cnk-head { display: block; position: static; padding: 0 52px 0 0; margin-bottom: var(--space-4); }
.cnk-display { margin-top: var(--space-1); color: var(--ink-secondary); font: 400 15px/20px var(--sans); }
.cnk-modes { display: flex; gap: 2px; padding: 2px; margin-bottom: var(--space-3); border-radius: 10px; background: var(--field); }
.cnk-mode { flex: 1; min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-secondary); text-align: center; font: 500 15px/20px var(--sans); }
.cnk-mode.on { background: var(--surface-pressed); color: var(--ink); }
.cnk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.cnk-key { min-height: 48px; border: 0; border-radius: 10px; background: var(--surface-pressed); color: var(--ink); text-align: center; font: 400 22px/28px var(--sans); }
.cnk-key:active { background: var(--rule); }
.cnk-key--back { background: transparent; }
.cnk-key--ok { background: var(--accent-bg); color: var(--accent-ink); border: 0; font: 600 17px/22px var(--sans); }
.cnk-remove { width: 100%; min-height: 44px; margin-top: var(--space-3); border: 0; background: transparent; color: var(--overdue); text-align: center; font: 400 17px/22px var(--sans); }
.cnk-remove--armed { font-weight: 600; }
/* Snooze chips editor */
.snooze-chips-editor { display: flex; flex-direction: column; }
.snooze-chips-editor > .settings-note { margin: 0 0 var(--space-2); }
.snooze-chip-row { display: grid; grid-template-columns: 20px 44px 56px minmax(0, 1fr) 48px; align-items: center; gap: var(--space-2); padding: 6px 0; }
.snooze-chip-row + .snooze-chip-row { border-top: 1px solid var(--rule); }
.snooze-chip-row--abs { grid-template-columns: 20px 80px; }
.snooze-chip-row__idx { color: var(--ink-muted); font: 400 13px/18px var(--sans); }
.snooze-chip-row__preview { color: var(--ink-secondary); font: 400 15px/20px var(--sans); text-align: right; }
.sheet .snooze-mag-input { padding: 10px 4px; text-align: center; }
.snooze-unit-seg { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--field); }
.snooze-unit-seg .snooze-key { flex: 1; min-width: 0; border-radius: 8px; background: transparent; color: var(--ink-secondary); font-size: 15px; }
.snooze-unit-seg .snooze-key--active { background: var(--surface-pressed); color: var(--ink); }
.snooze-abs-head { margin: var(--space-4) 0 var(--space-1); color: var(--ink-secondary); font: 400 13px/18px var(--sans); }
.snooze-chips-editor__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.snooze-chips-editor__actions .rs-save { width: auto; min-width: 120px; margin: 0; }
/* Rename tag, sign-out and account-delete sheets */
.modal-shell--bottom > .recur-card > .auth-close { position: absolute; right: var(--space-2); top: var(--space-4); z-index: 2; }
.rt-card .rt-title,.signout-title,.acct-del__title { margin: var(--space-1) 52px var(--space-2) 0; }
.signout-meta,.signout-body,.acct-del__body,.rt-from { margin-top: var(--space-1); color: var(--ink-secondary); font: 400 15px/20px var(--sans); }
.signout-meta b,.rt-from b { color: var(--ink); font-weight: 600; }
.acct-del__list { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.acct-del__shout { color: var(--overdue); font-weight: 600; }
.acct-del__error { margin-top: var(--space-2); color: var(--overdue); font: 400 15px/20px var(--sans); }
.signout-actions,.acct-del__actions,.rt-btns { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
/* Connections: large title under a Settings back, grouped cards. */
/* How to use: each section is a label over one grouped card of examples (typed line in ink,
   result secondary under it), then the section's plain sentence as a footnote. */
.tut-subtitle { color: var(--ink-secondary); font: 400 17px/22px var(--sans); }
.tut-redo-cta { min-height: 44px; margin: var(--space-2) 0 0 -8px; padding: 0 8px; color: var(--accent-text); font: 400 17px/22px var(--sans); }
.tut-sec-label { margin: var(--space-6) var(--space-4) var(--space-2); color: var(--ink-secondary); font: 400 13px/18px var(--sans); }
.tut-sec-body { overflow: hidden; border-radius: 10px; background: var(--surface); }
.tut-ex-row { display: grid; gap: 2px; padding: 10px var(--space-4); }
.tut-ex-row + .tut-ex-row { border-top: 1px solid var(--rule); }
.tut-ex-input { color: var(--ink); font: 400 17px/22px var(--sans); }
.tut-ex-result { color: var(--ink-secondary); font: 400 15px/20px var(--sans); }
.tut-note { margin: var(--space-2) var(--space-4) 0; color: var(--ink-secondary); font: 400 13px/18px var(--sans); }
.tut-scroll { padding-bottom: var(--space-8); }
/* Connections, How to use and Sign in share one nav bar: the back on its own row at the left, the large title under it. */
:is(.conn-overlay, .tutorial-overlay, .signin-modal-overlay) > .gstrip .gsegs { order: -1; flex-basis: 100%; }
:is(.conn-overlay, .tutorial-overlay, .signin-modal-overlay) > .gstrip .gstrip-back { width: auto; min-height: 44px; margin: 0 0 0 -8px; padding: 0 8px; color: var(--accent-text); font: 400 17px/22px var(--sans); }
:is(.conn-overlay, .tutorial-overlay, .signin-modal-overlay) > .gstrip .gstrip__txt { font: 700 28px/34px var(--sans); color: var(--ink); }
.conn-intro { color: var(--ink-secondary); font: 400 15px/20px var(--sans); }
.conn-section { margin-top: var(--space-6); }
.conn-section__h { margin: 0 var(--space-4) var(--space-2); color: var(--ink-secondary); font: 400 13px/18px var(--sans); }
.conn-invite-row { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-1) 0 var(--space-4); border-radius: 10px; background: var(--surface); }
.conn-invite-input { flex: 1; width: auto; min-height: 44px; padding: 0; border: 0; background: transparent; font: 400 17px/22px var(--sans); }
.conn-invite-send { flex: none; min-height: 44px; padding: 0 var(--space-3); color: var(--accent-text); font: 600 17px/22px var(--sans); }
.conn-invite-err { margin: var(--space-2) var(--space-4) 0; color: var(--overdue); font: 400 13px/18px var(--sans); }
.conn-cards { display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: var(--surface); }
.conn-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-3); padding: 10px var(--space-2) 10px var(--space-4); }
.conn-card + .conn-card { border-top: 1px solid var(--rule); }
.conn-card__lbl { font: 400 17px/22px var(--sans); }
.conn-card__sub { grid-column: 1; color: var(--ink-secondary); font: 400 13px/18px var(--sans); }
.conn-card__actions { grid-column: 2; grid-row: 1 / span 2; display: flex; }
.conn-card__warn { grid-column: 1 / -1; padding-top: var(--space-1); color: var(--ink-secondary); font: 400 13px/18px var(--sans); }
.conn-card--rename { grid-template-columns: minmax(0, 1fr); }
.conn-card--rename .conn-card__actions { grid-column: 1; grid-row: auto; justify-content: flex-end; }
.conn-rename-input { min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--field); }
.conn-btn { min-height: 44px; padding: 0 var(--space-2); background: transparent; color: var(--accent-text); font: 400 17px/22px var(--sans); }
.conn-btn--decline { color: var(--overdue); }
.conn-empty { padding: 12px var(--space-4); border-radius: 10px; background: var(--surface); color: var(--ink-secondary); font: 400 15px/20px var(--sans); }
.move-sheet { width: min(100%, 520px); max-height: 80dvh; overflow-y: auto; background: var(--surface); border-radius: 16px; padding: 8px var(--space-5) calc(var(--space-5) + var(--home-pad)); animation: xtn-slideup var(--dur-slow) cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.move-sheet__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap-min); font: 600 17px/22px var(--sans); }
.move-sheet__cancel { min-height: var(--tap-min); color: var(--accent-text); }
/* ↑ Move sheet (.move-overlay rule sits with the list rows): files the open task into Inbox / a project / an area. */
.rt-inp-row { display: flex; align-items: center; margin-top: var(--space-3); padding-left: var(--space-3); border-radius: 10px; background: var(--field); }
.rt-inp-pre { color: var(--ink-muted); font: 400 17px/22px var(--sans); }
.modal-shell--bottom > .recur-card .rt-input { flex: 1; padding-left: 2px; background: transparent; }
.rt-inp-row .rt-input:focus-visible { outline: 0; }
.rt-status,.rt-preview { margin-top: var(--space-2); color: var(--ink-secondary); font: 400 13px/18px var(--sans); }
.rt-status--err,.rt-status--warn { color: var(--overdue); }
.rt-preview { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.rt-preview-strike { text-decoration: line-through; }
.rt-preview-new { color: var(--ink); }
.sheet-head > .sheet-title { flex: 1; }
/* A docked sheet (snooze, reschedule, task actions) owns the bottom edge. */
#app:has(.modal-shell.dock) .capture-fab { display: none; }
/* Nothing tappable behind Settings: the scrim covers the whole screen and the + steps aside. */
#app:has(.settings-overlay) .capture-fab { display: none; }
/* Weekly archive: a bottom sheet of grouped rows; the groups sit on --field against the sheet surface. */
.sheet--wr .settings-group { margin-top: var(--space-4); background: var(--field); }
.wr-week { margin-top: 2px; color: var(--ink-secondary); font: 400 15px/20px var(--sans); }
.sheet--wr .settings-note { margin-top: var(--space-2); }
.wr-section { margin: var(--space-5) var(--space-4) 0; color: var(--ink-secondary); font: 400 13px/18px var(--sans); }
.sheet--wr .wr-section + .settings-group { margin-top: var(--space-2); }
.sheet--wr .wr-download { width: 100%; min-height: 50px; margin-top: var(--space-5); }
.wr-delete { display: block; width: 100%; margin-top: var(--space-2); }
/* Logbook clear actions: small blue text buttons at the end of each date head. */