:root {
  color-scheme: light dark;

  --paper: light-dark(#f3f1ec, #0c0b0a);
  --surface: light-dark(#faf8f4, #1f1d1b);
  --surface-alt: light-dark(#ebe8e1, #242320);
  --surface-hover: light-dark(#ece9e3, #2e2c29);
  --surface-raised: light-dark(#faf8f4, #161513);
  --field: light-dark(#faf8f4, #242320);
  --control-bg: light-dark(#ebe8e1, #2e2c29);
  --segment-track: light-dark(#e6e4df, #100f0d);
  --ink: light-dark(#1c1914, #f2f0ec);
  --ink-secondary: light-dark(#4e4942, #c8c3bc);
  --ink-muted: light-dark(#655e54, #9d988f);
  --accent: #ffc72c;
  --accent-hover: light-dark(#e8b423, #ffd45c);
  --accent-fg: light-dark(#765c22, #ffc72c);
  --on-accent: #1c1914;
  --danger: light-dark(#9b4a4a, #c47d78);
  --warning: light-dark(#815616, #b2854f);
  --success: light-dark(#3f6b4c, #6c9c7d);
  --info: light-dark(#3e5f73, #7095a8);
  --scrim: light-dark(rgb(28 25 20 / 0.38), rgb(12 11 10 / 0.62));
  --glint: light-dark(rgb(247 243 234 / 0.5), rgb(255 255 255 / 0.08));
  --shadow-color: light-dark(rgb(28 25 20 / 0.24), rgb(0 0 0 / 0.48));
  --shadow-color-strong: light-dark(rgb(28 25 20 / 0.34), rgb(0 0 0 / 0.55));
  --shadow-modal-color: light-dark(rgb(28 25 20 / 0.3), rgb(0 0 0 / 0.72));

  --bg: var(--paper);
  --text: var(--ink);
  --text-secondary: var(--ink-secondary);
  --muted: var(--ink-muted);
  --surface-sunken: var(--surface-alt);
  --border: color-mix(in oklab, var(--ink) 14%, transparent);
  --hairline: color-mix(in oklab, var(--ink) 10%, transparent);
  --border-control: color-mix(in oklab, var(--ink) 50%, var(--surface));
  --border-strong: var(--ink);
  --hover-bg: color-mix(in oklab, var(--surface-hover) 76%, transparent);
  --hover-border: color-mix(in oklab, var(--ink-secondary) 34%, var(--border));
  --pressed-bg: color-mix(in oklab, var(--ink) 4%, var(--surface-hover));
  --row-hover-bg: color-mix(in oklab, var(--ink) 3%, transparent);
  --row-pressed-bg: color-mix(in oklab, var(--ink) 5%, transparent);
  --accent-soft: color-mix(in oklab, var(--accent) 14%, var(--surface));
  --selected-bg: color-mix(in oklab, var(--ink) 7%, var(--surface-hover));
  --selected-frame: var(--border-control);
  --selected-shadow: inset 0 0 0 1px var(--selected-frame);
  --skip-link-bg: color-mix(in oklab, var(--accent) 42%, var(--surface));
  --quiet-fill: color-mix(in oklab, var(--ink) 7%, transparent);
  --switch-off-bg: color-mix(in oklab, var(--ink) 22%, var(--surface-alt));
  --danger-frame: color-mix(in oklab, var(--danger) 55%, var(--border));
  --danger-wash: color-mix(in oklab, var(--danger) 10%, var(--surface));
  --weekend-bg: color-mix(in oklab, var(--ink) 3%, var(--surface));
  --outside-month-bg: color-mix(in oklab, var(--ink) 6%, var(--surface));
  --field-focus-bg: color-mix(in oklab, var(--accent) 8%, var(--bg));
  --disabled-bg: var(--surface-alt);
  --disabled-fg: color-mix(in oklab, var(--ink-muted) 70%, var(--surface));
  --disabled-border: var(--border);
  --load-track: color-mix(in oklab, var(--ink) 14%, var(--surface));
  --load-ok: var(--accent-fg);
  --load-tight: var(--warning);
  --load-over: var(--danger);
  --task-neutral-accent: var(--ink-muted);
  --drop-target-outline: 2px dashed var(--accent-fg);
  --conflict-shadow: inset 0 0 0 1px var(--danger);
  --depth-raised: inset 0 1px 0 var(--glint), 0 1px 1px var(--shadow-color-strong), 0 0 4px var(--shadow-color);
  --depth-raised-pressed: inset 0 1px 1px var(--shadow-color), 0 1px 1px var(--shadow-color);
  --depth-inset: inset 0 1px 2px var(--shadow-color);
  --shadow-overlay: inset 0 1px 0 var(--glint), 0 0 0 1px var(--hairline), 0 8px 28px var(--shadow-color);
  --shadow-modal: inset 0 1px 0 var(--glint), 0 0 0 1px var(--border), 0 24px 64px -16px var(--shadow-modal-color);

  --space-half: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --page-gutter: 1.5rem;
  --page-gutter-block: 1.25rem;
  --text-legend: 0.6875rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-display: clamp(1.5rem, 2.4vw, 2rem);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --weight-control: 650;
  --weight-display: 700;
  --weight-label: 780;
  --tracking-body: -0.02em;
  --tracking-title: -0.01em;
  --radius: 12px;
  --radius-inner: 8px;
  --radius-check: 6px;
  --radius-modal: 24px;
  --radius-pill: 9999px;
  --radius-round: 50%;
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-enter: 250ms;
  --motion-exit: 160ms;
  --motion-sheet: 400ms;
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --layer-sticky: 40;
  --layer-header: 50;
  --layer-tabbar: 60;
  --layer-popover: 90;
  --layer-toast: 900;
  --layer-drawer: 950;
  --layer-modal: 1000;
  --control-hit: 44px;
  --field-height: 48px;
  --control-hit-lg: 52px;
  --field-font-size: var(--text-base);
  --field-font-floor: 0px;
  --icon-xs: 0.75rem;
  --icon-sm: 0.875rem;
  --icon-md: 1rem;
  --icon-lg: 1.25rem;
  --sidebar-width: 280px;
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme-switching] { --motion-fast: 0ms; --motion-base: 0ms; --motion-enter: 0ms; --motion-exit: 0ms; --motion-sheet: 0ms; }
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --paper: #f3f1ec;
    --surface: #faf8f4;
    --surface-alt: #ebe8e1;
    --surface-hover: #ece9e3;
    --surface-raised: #faf8f4;
    --field: #faf8f4;
    --control-bg: #ebe8e1;
    --segment-track: #e6e4df;
    --ink: #1c1914;
    --ink-secondary: #4e4942;
    --ink-muted: #655e54;
    --accent-hover: #e8b423;
    --accent-fg: #765c22;
    --danger: #9b4a4a;
    --warning: #815616;
    --success: #3f6b4c;
    --info: #3e5f73;
    --scrim: rgb(28 25 20 / 0.38);
    --glint: rgb(247 243 234 / 0.5);
    --shadow-color: rgb(28 25 20 / 0.24);
    --shadow-color-strong: rgb(28 25 20 / 0.34);
    --shadow-modal-color: rgb(28 25 20 / 0.3);
  }
  :root, :root[data-theme] { color-scheme: light; }
}
@media (max-width: 1180px) {
  :root { --page-gutter: 1.25rem; --page-gutter-block: 1rem; }
}
@media (max-width: 860px) {
  :root { --page-gutter: 1rem; --page-gutter-block: 0.75rem; --field-font-floor: 16px; }
}

@property --swatch-color { syntax: '<color>'; inherits: true; initial-value: #ffc72c; }
@property --hour-index { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --app-header-block-size { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --app-tabbar-block-size { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --save-surface-block-size { syntax: '<length>'; inherits: true; initial-value: 0px; }

@media (min-width: 861px) {
  html { scrollbar-gutter: stable; }
  .topbar-toolbar > .period-navigator + * { margin-inline-start: auto; }
}
html.modal-scroll-lock { overflow: hidden; }
html { scroll-padding-block-end: max(var(--app-tabbar-block-size), var(--save-surface-block-size)); }
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.5; letter-spacing: var(--tracking-body); font-synthesis: none; font-optical-sizing: auto; text-wrap: pretty; -webkit-font-smoothing: antialiased; accent-color: var(--accent-fg); scrollbar-color: color-mix(in oklab, var(--muted) 40%, transparent) transparent; }
body { padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); font-size: var(--text-sm); }
::selection { background: var(--accent); color: var(--on-accent); }
input, textarea { caret-color: var(--accent-fg); }
button, input, select, textarea { font: inherit; color: inherit; }
::placeholder { color: var(--muted); opacity: 1; }
:is(input, select, textarea):-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: inset 0 0 0 100px var(--field); }
a { color: inherit; text-decoration: none; text-underline-offset: 0.16em; }
:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: var(--space-2); left: max(var(--space-2), env(safe-area-inset-left)); z-index: var(--layer-modal); display: inline-flex; align-items: center; box-sizing: border-box; min-height: var(--control-hit); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--skip-link-bg); box-shadow: var(--depth-raised); color: var(--text); font-weight: var(--weight-control); transform: translateY(calc(-100% - 1rem)); transition: transform var(--motion-fast) var(--ease-out); }
.skip-link:focus-visible { transform: translateY(0); }
.control-label, .nav-label, .section-legend { font-size: var(--text-xs); font-weight: var(--weight-control); letter-spacing: 0; color: var(--text-secondary); }
.control-label { flex-shrink: 0; white-space: nowrap; }
.segmented-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.segmented-control { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--segment-min-size, max-content), 1fr); gap: var(--space-1); width: fit-content; max-width: 100%; padding: var(--space-1); border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--segment-track); box-shadow: var(--depth-inset); }
.scroll-fade, .scroll-fade-block { --scroll-fade-size: 1.75rem; }
.scroll-fade-block { scroll-padding-block: var(--scroll-fade-size); }
.segmented-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 0; min-height: var(--control-hit); padding: var(--space-2) var(--segment-padding-inline, var(--space-4)); border: 0; border-radius: var(--radius-inner); background: transparent; color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-title); line-height: 1.2; text-align: center; white-space: var(--segment-white-space, nowrap); cursor: pointer; transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .segmented-btn:hover:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-pressed="true"], [aria-current="page"], :has(> .choice-input:is(:checked, :disabled, [aria-disabled="true"]))) { background: var(--hover-bg); color: var(--text); }
}
.segmented-btn[aria-selected="true"], .segmented-btn[aria-pressed="true"], .segmented-btn[aria-current="page"], .segmented-btn:has(> .choice-input:checked) { color: var(--text); background: var(--surface); box-shadow: var(--depth-raised); font-weight: var(--weight-label); }
.choice-input, .toggle-switch-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.choice-group { --segment-min-size: max-content; }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-3); min-width: 0; }
.choice-card { position: relative; display: grid; align-content: start; gap: var(--space-1); min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface-sunken); box-shadow: var(--depth-raised); color: var(--text); cursor: pointer; transition: background var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .choice-card:hover:not(:has(> .choice-input:is(:checked, :disabled, [aria-disabled="true"]))) { background: var(--hover-bg); }
}
.choice-card:has(> .choice-input:checked) { background: var(--surface); box-shadow: var(--depth-raised), inset 0 0 0 2px var(--selected-frame); }
.choice-card-title { font-weight: var(--weight-strong); text-wrap: balance; }
.choice-card:has(> .choice-input:checked) .choice-card-title { font-weight: var(--weight-display); }
.choice-card-description { color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-regular); line-height: 1.4; }
.filter-toolbar { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.filter-chip { --swatch-color: var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-hit); padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--depth-raised); color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .filter-chip:hover:not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"], [aria-current="true"]) { background: var(--hover-bg); color: var(--text); }
}
.filter-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-chip:is([aria-pressed="true"], [aria-current="true"]) { border-color: var(--selected-frame); box-shadow: var(--depth-raised-pressed); font-weight: var(--weight-control); }
.filter-chip:active:not(:disabled):not([aria-disabled="true"]) { box-shadow: var(--depth-raised-pressed); }
.event-surface, .task-surface { --task-accent: var(--task-neutral-accent); box-sizing: border-box; position: relative; isolation: isolate; overflow: hidden; border: 0; border-radius: var(--radius-inner); background: var(--surface); color: var(--text); }
.event-surface::before, .task-surface::before { content: ""; position: absolute; inset: 0; background: color-mix(in oklab, var(--task-accent) 9%, transparent); pointer-events: none; }
.task-surface { box-shadow: var(--row-selected, 0 0 transparent), var(--row-conflict, 0 0 transparent), var(--depth-raised); transition: background var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  button.task-surface:hover:not(:disabled) { background: var(--surface-hover); }
}
.task-surface:disabled { cursor: default; }
.task-surface.conflict { --row-conflict: var(--conflict-shadow); }
.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--surface); border-right: 1px solid var(--hairline); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-shrink: 0; }
.sidebar-content { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.sidebar-content::-webkit-scrollbar { width: 0; height: 0; }
.sidebar-workspace { display: grid; gap: inherit; min-width: 0; }
.sidebar-footer { display: flex; flex-direction: column; gap: var(--space-1); flex-shrink: 0; padding-top: var(--space-2); border-top: 1px solid var(--hairline); }
.brand { display: inline-flex; align-items: center; min-height: var(--control-hit); padding: 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-display); letter-spacing: -0.02em; user-select: none; }
.brand-accent { color: var(--accent-fg); }
.global-search { position: relative; display: flex; flex-direction: column; gap: var(--space-1); }
.global-search-sheet .search-popover { background: transparent; box-shadow: none; }
.global-search-sheet .search-results { max-height: none; }
.search-popover { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow-overlay); }
.search-results { flex: 1 1 auto; min-height: 0; max-height: min(360px, calc(100dvh - 7rem)); margin: 0; padding: var(--space-1); overflow-y: auto; list-style: none; }
.search-hit { display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--control-hit); padding: var(--space-2) var(--space-3); border: none; border-radius: var(--radius-inner); background: transparent; color: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .search-hit:hover:where(:not([aria-disabled="true"])) { background: var(--row-hover-bg); }
}
.search-hit[aria-disabled="true"] { color: var(--disabled-fg); cursor: not-allowed; }
.search-hit-title { font-weight: var(--weight-strong); font-size: var(--text-sm); }
.search-hit-meta { font-size: var(--text-xs); color: var(--muted); }
.search-palette-icon { display: inline-grid; place-items: center; width: var(--space-8); height: var(--space-8); color: var(--muted); }
.search-palette-icon-svg { width: var(--icon-md); height: var(--icon-md); }
.search-palette-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-half); min-width: 0; }
.search-palette-copy > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-palette-status { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--hairline); }
.search-operators { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--hairline); }
.search-group, .search-group-list { margin: 0; padding: 0; list-style: none; }
.search-group-label { padding: var(--space-2) var(--space-3) var(--space-1); color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-control); }
.search-hit-snippet { font-size: var(--text-xs); color: var(--text-secondary); }
.search-palette-copy > .search-hit-snippet { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
.search-mark { background: transparent; color: inherit; font-weight: var(--weight-display); text-decoration: underline 2px var(--accent); text-underline-offset: 0.2em; }
.search-palette-footer { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--hairline); font-size: var(--text-xs); }
.nav-label { padding: var(--nav-label-padding, var(--space-2) var(--space-3) var(--space-1)); }
.nav-link, .sidebar-section-toggle, .account-menu-trigger { display: flex; align-items: center; min-height: var(--control-hit); padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); line-height: 1.2; transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  :where(a, button, summary):is(.nav-link, .sidebar-section-toggle, .account-menu-trigger):hover { background: var(--hover-bg); border-color: var(--hover-border); color: var(--text); }
}
:where(a, button, summary):is(.nav-link, .sidebar-section-toggle, .account-menu-trigger):active { background: var(--pressed-bg); }
.nav-link { gap: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-icon { display: block; color: currentColor; flex-shrink: 0; }
.nav-link-icon { flex: 0 0 var(--icon-lg); width: var(--icon-lg); height: var(--icon-lg); }
.nav-link.active { border-color: var(--selected-frame); font-weight: var(--weight-display); }
.sidebar-section-heading { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.sidebar-section-toggle { flex: 1 1 auto; gap: var(--space-2); min-width: 0; text-align: left; cursor: pointer; }
.sidebar-section-toggle > .nav-label { min-width: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-section-toggle > .count { margin-inline-start: auto; }
.nav-list { display: flex; flex-direction: column; gap: var(--space-half); min-width: 0; margin: 0; padding: 0; list-style: none; }
.subnav { --subnav-flow: row wrap; --subnav-align: center; --nav-label-padding: 0; display: flex; flex-flow: var(--subnav-flow); align-items: var(--subnav-align); gap: var(--subnav-gap, var(--space-2) var(--space-4)); min-width: 0; }
.subnav-group { display: flex; flex-flow: var(--subnav-flow); align-items: var(--subnav-align); gap: var(--space-1) var(--space-2); min-width: 0; }
.subnav .nav-list { flex-flow: var(--subnav-flow); }
.subnav .nav-list > li { flex: 0 0 auto; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-5); }
@media (min-width: 1181px) {
  .settings-layout { grid-template-columns: 13rem minmax(0, 46rem); gap: var(--space-6); }
  .subnav-rail { --subnav-flow: column nowrap; --subnav-align: stretch; --subnav-gap: var(--space-4); --nav-label-padding: initial; position: sticky; top: var(--space-4); }
}
.sidebar-destination-kind { color: var(--muted); font-size: var(--text-legend); line-height: 1.15; }
.sidebar-more-button { justify-content: flex-start; }
.chip-dot { width: 8px; height: 8px; border-radius: var(--radius-round); flex-shrink: 0; background: var(--swatch-color); box-shadow: 0 0 0 1px var(--hairline); }
.main { display: flex; flex-direction: column; min-width: 0; }
.main:has(.content-main) { --content-measure: 820px; }
.main:has(.settings-layout) { --content-measure: 61rem; }
.topbar { padding: var(--page-gutter-block) var(--page-gutter); }
.topbar-row { container: topbar-row / inline-size; display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.page-heading { display: grid; flex: 0 1 auto; gap: var(--space-1); min-width: 0; margin-inline-end: auto; }
.page-title, .auth-card h1 { margin: 0; padding: 0; border: 0; font-size: var(--text-display); font-weight: var(--weight-display); letter-spacing: -0.02em; line-height: 1.1; box-shadow: none; }
.page-title { overflow-wrap: break-word; text-wrap: balance; }
.modal-title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-strong); letter-spacing: var(--tracking-title); line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; }
.topbar-search { flex: 0 1 20rem; }
.topbar-search .search-popover { position: absolute; top: calc(100% + var(--space-2)); inset-inline: auto 0; z-index: var(--layer-popover); width: max(100%, min(36rem, calc(100cqi - var(--control-hit) - var(--space-4)))); max-height: calc(100dvh - var(--app-header-block-size) - var(--space-8)); }
.topbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); }
.topbar-actions > * { flex-shrink: 0; white-space: nowrap; }
.page-actions-menu { display: none; }
.topbar-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; padding: 0 var(--page-gutter) var(--page-gutter-block); padding-inline-end: max(var(--page-gutter), calc(100% - var(--content-measure, 100%) - var(--page-gutter))); border-bottom: 1px solid var(--hairline); }
.topbar-toolbar:empty { padding-block-end: 0; }
.topbar-toolbar > .filter-toolbar { flex: 1 1 100%; }
.app-tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--layer-tabbar); display: none; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); border-top: 1px solid var(--hairline); background: var(--surface-raised); }
.app-tabbar-items { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; padding: 0; list-style: none; }
.app-tabbar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-half); width: 100%; min-height: calc(var(--control-hit) + var(--space-4)); padding: var(--space-1); border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--text-legend); font-weight: var(--weight-medium); line-height: 1.2; text-align: center; cursor: pointer; }
.app-tabbar-item[aria-current="page"] { color: var(--text); font-weight: var(--weight-display); box-shadow: inset 0 2px 0 var(--text); }
.app-tabbar-icon { width: var(--icon-lg); height: var(--icon-lg); }
.feedback-host { position: fixed; inset-inline-end: max(var(--page-gutter), env(safe-area-inset-right)); bottom: calc(var(--app-tabbar-block-size) + max(var(--space-4), env(safe-area-inset-bottom))); z-index: var(--layer-toast); width: min(26rem, calc(100vw - 2 * var(--page-gutter))); }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-4) var(--page-gutter) var(--space-8); align-items: start; }
.content-main { min-width: 0; max-width: var(--content-measure); }
.content-main > .task-groups + .plan-summary { margin-top: var(--space-6); }
.collection-summary { display: flex; flex: 1 1 20rem; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; overflow-wrap: anywhere; }
.collection-stats { display: inline-flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.collection-stats strong { color: var(--text); }
.collection-stats > span + span::before { content: "·"; margin-inline-end: var(--space-3); color: var(--muted); }
.segmented-btn-icon { flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); }
.history-tools { min-width: 0; margin: 0 0 var(--space-4); }
.history-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); flex: 0 1 28rem; min-width: min(100%, 18rem); }
.history-search { flex: 1 1 16rem; min-width: min(100%, 8rem); }
.history-period { flex: 1 1 8.5rem; min-width: min(100%, 8.5rem); }
.tabular-nums { font-variant-numeric: tabular-nums; }
.data-value { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.panel, .raised-surface { border-radius: var(--radius); background: var(--surface); box-shadow: var(--depth-raised); }
.panel { display: grid; align-content: start; gap: var(--space-4); min-width: 0; padding: var(--space-4); }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; gap: var(--space-5); min-width: 0; }
.stack { display: grid; align-content: start; gap: var(--space-5); min-width: 0; }
.record-list { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; }
.record-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-3); min-width: 0; padding-block: var(--space-3); }
.record-row:first-child { padding-top: 0; }
.record-row:last-child { padding-bottom: 0; }
.record-row + .record-row { border-top: 1px solid var(--hairline); }
.record-main { display: grid; flex: 1 1 12rem; align-content: center; gap: var(--space-1); min-width: 0; min-height: var(--control-hit); }
.record-title { margin: 0; color: var(--text); font-weight: var(--weight-strong); line-height: 1.3; overflow-wrap: anywhere; text-wrap: pretty; }
.record-text { margin: 0; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; text-wrap: pretty; }
.record-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; margin: 0; color: var(--muted); font-size: var(--text-xs); }
.record-meta-list > * + *::before { content: "·"; margin-inline-end: var(--space-2); color: var(--border-control); }
.record-points { display: grid; gap: var(--space-1); min-width: 0; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; text-wrap: pretty; }
.record-value { flex: 0 0 auto; margin-inline-start: auto; color: var(--text); font-weight: var(--weight-strong); white-space: nowrap; }
.record-row-share { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.record-row-share > .load-meter { grid-column: 1 / -1; }
.callout { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface-sunken); }
.subsection { display: grid; gap: var(--space-3); min-width: 0; }
.subsection:not(:first-child) { padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.section-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); min-width: 0; }
.section-title { margin: 0; color: var(--text); font-size: var(--text-base); font-weight: var(--weight-display); line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance; }
.section-legend { margin: 0; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.25rem; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-secondary); font-size: var(--text-legend); font-weight: var(--weight-control); line-height: 1; vertical-align: middle; }
.record-actions, .section-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.section-actions { margin-inline-start: auto; }
.section-hint { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: var(--text-xs); text-wrap: pretty; }
.action-row, .period-navigator, .filter-toolbar-scroll { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.period-stepper { display: flex; flex: 1 1 12rem; align-items: center; gap: var(--space-2); min-width: 0; }
.period-title { flex: 1 1 auto; min-width: 0; font-size: var(--text-lg); font-weight: var(--weight-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.15; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.plan-summary { gap: var(--space-3); }
.load-meter { --meter-within: 0%; --meter-over: 0%; --meter-capacity: 100%; display: grid; gap: var(--space-1); min-width: 0; }
.load-meter-track { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--load-track); overflow: hidden; }
.load-meter-fill { width: var(--meter-within); height: 100%; transition: width var(--motion-enter) var(--ease-out); }
.load-meter-fill.fill-ok { background: var(--load-ok); }
.load-meter-fill.fill-tight { background: var(--load-tight); }
.load-meter-fill.fill-over { background: var(--load-over); }
.load-meter-overflow { position: absolute; top: 0; left: var(--meter-within); width: var(--meter-over); height: 100%; background: repeating-linear-gradient(135deg, var(--load-over) 0 3px, color-mix(in oklab, var(--load-over) 45%, var(--load-track)) 3px 6px); transition: left var(--motion-enter) var(--ease-out), width var(--motion-enter) var(--ease-out); }
.load-meter-capacity { position: absolute; top: 0; left: var(--meter-capacity); width: 2px; height: 100%; margin-left: -1px; background: var(--text); }
.day-load-list { container-type: inline-size; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; list-style: none; }
.day-load-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; row-gap: var(--space-1); min-width: 0; }
.day-load-row > p { margin: 0; }
.day-load-day { font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; }
.day-load-day > a { display: inline-flex; align-items: center; min-height: var(--control-hit); text-decoration: underline 1px color-mix(in oklab, currentColor 40%, transparent); text-underline-offset: 0.2em; }
.day-load-value { font-size: var(--text-sm); font-weight: var(--weight-medium); text-align: end; white-space: nowrap; }
.day-load-row > .day-load-status { grid-column: 2 / -1; }
@container (max-width: 22em) {
  .day-load-row { grid-template-columns: minmax(0, 1fr) auto; }
  .day-load-row > .load-meter { grid-row: 2; grid-column: 1 / -1; }
  .day-load-row > .day-load-status { grid-row: 3; grid-column: 1 / -1; }
}
.day-bars-frame { container-type: inline-size; min-width: 0; }
.day-bars { --day-bar-plot: 6rem; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; list-style: none; }
.day-bar { display: grid; grid-template-rows: auto auto; gap: var(--space-1); min-width: 0; text-align: center; }
.day-bar-plot { grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--space-1); height: calc(var(--day-bar-plot) + 2.4rem); border-block-end: 1px solid color-mix(in oklab, var(--muted) 55%, transparent); }
.day-bar-value { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.2; }
.day-bar-fill { flex: none; width: min(100%, 2.25rem); height: max(calc(var(--day-bar-ratio) * var(--day-bar-plot)), 2px); border-radius: var(--radius-check) var(--radius-check) 0 0; background: var(--load-ok); transition: height var(--motion-enter) var(--ease-out), width var(--motion-enter) var(--ease-out); }
.day-bar-empty .day-bar-fill { display: none; }
.day-bar-day { grid-row: 2; margin: 0; color: var(--text-secondary); font-size: var(--text-xs); white-space: nowrap; }
.day-bar-day > a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-hit); text-decoration: underline 1px color-mix(in oklab, currentColor 40%, transparent); text-underline-offset: 0.2em; }
.day-bar[aria-current="date"] .day-bar-day { color: var(--text); font-weight: var(--weight-strong); }
@container (max-width: 22em) {
  .day-bars { grid-auto-flow: row; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 var(--space-2); }
  .day-bar { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-rows: none; align-items: center; text-align: start; }
  .day-bar-day { grid-row: 1; grid-column: 1; }
  .day-bar-plot { display: contents; }
  .day-bar-fill { grid-row: 1; grid-column: 2; width: max(calc(var(--day-bar-ratio) * 100%), 2px); height: 0.75rem; border-radius: 0 var(--radius-check) var(--radius-check) 0; }
  .day-bar-value { grid-row: 1; grid-column: 3; text-align: end; }
}
.plan-change-preview { display: grid; justify-items: start; gap: var(--space-2); min-width: 0; }
.plan-change-preview > :not(button) { justify-self: stretch; }
.task-dependency-graph { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.task-dependency-graph-node-wrap { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.task-dependency-graph-arrow { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-md); height: var(--icon-md); color: var(--muted); }
.task-dependency-graph-arrow-icon { width: var(--icon-sm); height: var(--icon-sm); }
.task-dependency-graph-node { display: inline-flex; align-items: flex-start; flex-wrap: wrap; gap: var(--space-1); max-width: min(18rem, 100%); min-height: var(--control-hit); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); line-height: 1.2; text-align: left; cursor: pointer; }
.task-dependency-graph-node[aria-current="true"] { --task-accent: var(--text); font-weight: var(--weight-display); cursor: default; }
.task-dependency-graph-node.blocker:not(.done) { --task-accent: var(--text-secondary); }
.task-dependency-graph-node.done .task-dependency-graph-title { color: var(--muted); text-decoration: line-through; }
.task-dependency-graph-title { min-width: 0; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; text-wrap: pretty; white-space: normal; }
.settings-profile-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); margin: 0; }
.settings-profile-item { min-width: 0; padding: 0; border: 0; background: transparent; }
.settings-profile-item dt { margin: 0 0 var(--space-1); }
.settings-profile-item dd { margin: 0; color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-strong); overflow-wrap: anywhere; }
.totp-setup { display: grid; gap: var(--space-4); }
.totp-qr { display: grid; justify-items: start; gap: var(--space-2); margin: 0; }
.totp-qr-image { display: block; max-width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); image-rendering: pixelated; }
.totp-qr-caption { max-width: 32rem; color: var(--muted); font-size: var(--text-xs); text-wrap: pretty; }
.integration-feed-form { display: grid; flex: 1 1 100%; gap: var(--space-2); min-width: 0; }
.one-time-secret-value { overflow-wrap: anywhere; white-space: pre-wrap; }
.sidebar-preview { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.sidebar-preview-chrome { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--hairline); background: var(--surface-sunken); }
.sidebar-preview-mode { font-size: var(--text-legend); }
.sidebar-preview-body { padding: var(--space-1) var(--space-2) var(--space-2); }
.sidebar-nav-link-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-nav-item-animate { animation: sidebarNavIn var(--motion-enter) var(--ease-out) backwards; animation-delay: calc(min(var(--nav-item-index, 0), 13) * 35ms); }
@keyframes sidebarNavIn {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}
.toggle-switch { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-hit); min-height: var(--control-hit); cursor: pointer; }
.toggle-switch:has(> .toggle-switch-input:disabled) { cursor: not-allowed; }
.toggle-switch-track { position: relative; width: 3rem; height: 1.75rem; border: 1px solid var(--border-control); border-radius: var(--radius-pill); background: var(--switch-off-bg); box-shadow: var(--depth-inset); transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); }
.toggle-switch-thumb { position: absolute; top: calc(var(--space-1) - 1px); left: calc(var(--space-1) - 1px); width: 1.25rem; height: 1.25rem; border-radius: var(--radius-round); background: var(--ink); box-shadow: var(--depth-raised); transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out); }
.toggle-switch-input:checked + .toggle-switch-track { border-color: var(--accent-fg); background: var(--accent); }
.toggle-switch-input:checked + .toggle-switch-track .toggle-switch-thumb { background: var(--on-accent); transform: translateX(1.25rem); }
.toggle-switch-input:disabled + .toggle-switch-track { border-color: var(--disabled-border); background: var(--disabled-bg); box-shadow: none; }
.toggle-switch-input:disabled + .toggle-switch-track .toggle-switch-thumb { background: var(--disabled-fg); box-shadow: none; }
.onboarding-progress { margin: 0; }
.settings-feature-group { display: grid; gap: var(--space-2); min-width: 0; }
.task-graph-detail-panel { display: grid; gap: var(--space-3); min-width: 0; }
.weekly-availability-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.weekly-availability-day { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: start; align-content: start; gap: var(--space-2) var(--space-3); transition: background var(--motion-base) var(--ease-out); }
.weekly-availability-day.disabled { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); }
.weekly-availability-day-identity { grid-column: 1; grid-row: 1; min-width: 0; }
.weekly-availability-day-label { display: grid; min-width: 0; gap: var(--space-half); line-height: 1.2; }
.weekly-availability-day-label strong { overflow-wrap: anywhere; font-size: var(--text-sm); font-weight: var(--weight-control); }
.weekly-availability-day-total { color: var(--muted); font-size: var(--text-legend); font-variant-numeric: tabular-nums; }
.weekly-availability-ranges { grid-column: 1 / -1; grid-row: 2; display: grid; align-items: start; align-content: start; gap: var(--space-2); min-width: 0; }
.weekly-availability-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) var(--control-hit); align-items: center; gap: var(--space-1); min-width: 0; }
.weekly-availability-range > .input { padding-inline: var(--space-2); }
.weekly-availability-separator { color: var(--muted); text-align: center; }
.weekly-availability-actions { grid-column: 2; grid-row: 1; display: flex; align-items: flex-start; gap: var(--space-1); }
.weekly-availability-copy-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.settings-busy-block-editor { gap: var(--space-4); }
.settings-busy-workspace { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-5); min-width: 0; }
.settings-busy-calendar-panel, .settings-busy-results { display: grid; align-content: start; gap: var(--space-3); min-width: 0; }
.settings-busy-calendar-panel { flex: 1 1 22rem; }
.settings-busy-results { flex: 1.5 1 18rem; }
.settings-busy-clear-date { justify-self: start; }
.settings-busy-calendar-scroll { max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; border-radius: var(--radius); }
.settings-busy-calendar { width: 100%; border-collapse: separate; border-spacing: var(--space-1); table-layout: auto; }
.calendar-weekday, .settings-busy-calendar th { color: var(--muted); font-size: var(--text-legend); font-weight: var(--weight-display); letter-spacing: 0.03em; text-align: center; }
.settings-busy-calendar th { width: 14.2857%; min-width: var(--control-hit); height: 1.75rem; }
.settings-busy-calendar td { height: var(--control-hit); padding: 0; text-align: center; }
.settings-busy-calendar-day { position: relative; display: inline-grid; place-items: center; width: 100%; min-width: var(--control-hit); min-height: var(--control-hit); padding: var(--space-1); border: 1px solid var(--hairline); border-radius: var(--radius); background: transparent; color: var(--text); font-weight: var(--weight-medium); cursor: pointer; transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .settings-busy-calendar-day:hover { background: var(--hover-bg); border-color: var(--hover-border); }
}
.settings-busy-calendar-day.has-blocks { border-color: transparent; background: var(--surface); box-shadow: var(--depth-raised); font-weight: var(--weight-display); }
.settings-busy-calendar-day[aria-pressed="true"] { border-color: var(--selected-frame); box-shadow: var(--depth-raised-pressed); font-weight: var(--weight-display); }
.settings-busy-calendar-day.has-conflict { border-bottom-color: var(--danger); }
.settings-busy-calendar-today { padding: var(--space-half) var(--space-2); border-radius: var(--radius-pill); }
.settings-busy-calendar-conflict-icon { position: absolute; right: var(--space-half); bottom: var(--space-half); width: var(--icon-xs); height: var(--icon-xs); color: var(--danger); }
.action-menu { position: relative; flex: none; }
.action-menu > summary { list-style: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu[open] > summary { background: var(--pressed-bg); box-shadow: var(--depth-raised-pressed); color: var(--text); }
.action-menu-popover { position: absolute; top: calc(100% + var(--space-1)); right: 0; z-index: var(--layer-popover); display: flex; flex-direction: column; width: min(var(--action-menu-width, 14rem), calc(100vw - 2rem), var(--action-menu-max-width, calc(100vw - 2rem))); max-height: var(--action-menu-max-height, calc(100dvh - 2rem)); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow-overlay); transform: translateX(var(--action-menu-inline-shift, 0px)); }
.action-menu:not([open]) > .action-menu-popover { display: none; }
.action-menu-position-up > .action-menu-popover { top: auto; bottom: calc(100% + var(--space-1)); }
.action-menu-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--control-hit); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-inner); background: transparent; color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .action-menu-item:hover:not(:disabled) { background: var(--row-hover-bg); }
}
.action-menu-item:active:not(:disabled) { background: var(--row-pressed-bg); }
.action-menu-item-danger { color: var(--danger); font-weight: var(--weight-strong); }
.action-menu-item-icon { flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); }
.action-menu-separator { height: 1px; margin: var(--space-1) 0; background: var(--hairline); }
.action-menu-label { padding: var(--space-2) var(--space-3) var(--space-1); }
.action-menu-item-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.action-menu-item[aria-current="true"] { font-weight: var(--weight-strong); }
.account-menu { flex: 1 1 auto; min-width: 0; }
.account-menu > .action-menu-popover { --action-menu-width: 20rem; inset-inline: 0 auto; }
.account-menu-trigger { gap: var(--space-2); cursor: pointer; }
.account-menu-identity { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.account-menu-name, .account-menu-workspace { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-name { font-size: var(--text-sm); font-weight: var(--weight-strong); }
.account-menu-workspace { color: var(--muted); font-size: var(--text-xs); }
.task-detail-layout { display: grid; grid-template-areas: "properties" "main"; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-5); min-width: 0; }
.task-detail-properties { grid-area: properties; min-width: 0; }
.task-detail-main { grid-area: main; display: grid; gap: var(--space-5); min-width: 0; }
.task-detail-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.property-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3) var(--space-5); min-width: 0; margin: 0; }
.property-row { display: grid; grid-template-columns: minmax(6.5rem, 30%) minmax(0, 1fr); align-items: start; gap: var(--space-1) var(--space-3); min-width: 0; }
.property-label { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: var(--field-height); color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-control); }
.property-icon { flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); }
.property-value { display: grid; align-content: center; gap: var(--space-2); min-width: 0; min-height: var(--control-hit); margin: 0; overflow-wrap: anywhere; }
.property-value > button { justify-self: start; }
.property-value > .choice-group > .segmented-control { width: 100%; }
@media (min-width: 861px) and (max-width: 1180px) {
  .property-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1181px) {
  .task-detail-layout { grid-template-areas: "main properties"; grid-template-columns: minmax(0, 1fr) 17rem; }
  .task-detail-properties { padding-inline-start: var(--space-5); border-inline-start: 1px solid var(--hairline); }
}
.disclosure { min-width: 0; }
.disclosure:not(.disclosure-boxed) { margin-inline: calc(-1 * var(--space-3)); }
.disclosure-summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-hit); padding-inline: var(--space-3); border-radius: var(--radius); list-style: none; cursor: pointer; }
.disclosure-summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .disclosure-summary:hover { background: var(--row-hover-bg); }
}
.disclosure-summary-content { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.disclosure-title { color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-strong); line-height: 1.2; }
.disclosure-chevron { flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); color: var(--muted); transition: transform var(--motion-base) var(--ease-out); }
.disclosure[open] > .disclosure-summary > .disclosure-chevron, [aria-expanded="true"] > .disclosure-chevron { transform: rotate(180deg); }
.disclosure-boxed { border: 1px solid var(--hairline); border-radius: var(--radius); background: transparent; overflow: clip; }
.disclosure-boxed > .disclosure-summary { padding-block: var(--space-2); border-radius: 0; }
.disclosure-boxed[open] > .disclosure-summary { border-bottom: 1px solid var(--hairline); }
.disclosure-inline > .disclosure-summary { display: inline-flex; max-width: 100%; }
.disclosure-panel { display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-2) var(--space-3) var(--space-3); }
.field { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.field > legend { margin-bottom: var(--space-2); padding: 0; }
.action-menu-popover-form { --segment-padding-inline: var(--space-2); padding: var(--space-2) var(--space-3); }
.field-label { color: var(--text); font-size: var(--text-xs); font-weight: var(--weight-control); letter-spacing: 0; }
.field-hint { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.35; text-wrap: pretty; }
.field-error { display: flex; align-items: flex-start; gap: var(--space-1); color: var(--danger); font-size: var(--text-xs); font-weight: var(--weight-strong); overflow-wrap: anywhere; text-wrap: pretty; }
.field-error-icon { flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); }
@media (min-width: 1181px) {
  .field-label { font-size: var(--text-sm); }
}
.form-stack { display: grid; gap: var(--space-4); min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: start; gap: var(--space-4); min-width: 0; }
.field-narrow { max-inline-size: 12ch; }
.input { width: 100%; min-width: 0; min-height: var(--field-height); padding: var(--space-2) var(--space-4); border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--field); color: var(--text); font: inherit; font-size: max(var(--field-font-size), var(--field-font-floor)); font-weight: var(--weight-medium); line-height: 1.5; transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); }
textarea.input { resize: vertical; field-sizing: content; }
@supports (-webkit-touch-callout: none) {
  .input:is([type="date"], [type="time"], [type="datetime-local"]) { appearance: none; }
  .input::-webkit-date-and-time-value { min-width: 0; text-align: start; }
}
.input:focus-visible { border-color: var(--accent-fg); background: var(--field-focus-bg); }
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: var(--conflict-shadow); }
.input:disabled { border-color: var(--disabled-border); background: var(--disabled-bg); color: var(--disabled-fg); cursor: not-allowed; }
.input[readonly] { background: var(--surface-sunken); }
.input-exposure { min-height: var(--control-hit-lg); padding: var(--space-3) var(--space-4); box-shadow: var(--depth-inset); }
.input-inline { border-color: transparent; background: transparent; }
.input-inline:focus:not(:disabled) { border-color: var(--border-control); }
@media (hover: hover) and (pointer: fine) {
  .input-inline:hover:not(:disabled) { border-color: var(--border-control); }
}
.input-inline:disabled { border-color: transparent; background: transparent; }
.task-detail-title, textarea.task-detail-title { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-display); letter-spacing: -0.02em; line-height: 1.25; overflow-wrap: anywhere; text-wrap: pretty; }
textarea.task-detail-title { max-block-size: calc(5lh + 1rem + 2px); width: calc(100% + 2 * var(--space-2) + 2px); margin-inline: calc(-1 * var(--space-2) - 1px); padding-inline: var(--space-2); resize: none; }
.select-shell { position: relative; display: block; min-width: 0; }
.select-shell > .input { appearance: none; -webkit-appearance: none; padding-inline-end: calc(var(--space-4) + var(--icon-md) + var(--space-3)); }
.select-shell-icon { position: absolute; top: calc((var(--field-height) - var(--icon-md)) / 2); inset-inline-end: var(--space-4); width: var(--icon-md); height: var(--icon-md); color: var(--muted); pointer-events: none; }
.search-field { position: relative; display: block; min-width: 0; }
.search-field-compact { --field-height: var(--control-hit); --field-font-size: var(--text-sm); --field: var(--surface-sunken); }
.search-field-icon { position: absolute; top: calc((var(--field-height) - var(--icon-md)) / 2); inset-inline-start: var(--space-3); z-index: 1; width: var(--icon-md); height: var(--icon-md); color: var(--muted); pointer-events: none; }
.search-field > .input { padding-inline-start: var(--space-10); text-overflow: ellipsis; }
.search-field-end { position: absolute; top: 0; inset-inline-end: 0; display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-hit); height: var(--field-height); padding-inline: var(--space-2); pointer-events: none; }
.search-field-end > :is(button, a) { pointer-events: auto; }
.search-field:has(> .search-field-end) > .input { padding-inline-end: 4.5rem; }
.search-field > .input::-webkit-search-cancel-button { margin-inline-start: var(--space-2); filter: grayscale(1); cursor: pointer; }
.search-field:has(> .search-field-end) > .input::-webkit-search-cancel-button { display: none; }
.inline-add { display: grid; grid-template-columns: minmax(0, 1fr) var(--field-height); align-items: start; gap: var(--space-2); min-width: 0; }
.inline-add-stack > :first-child { grid-column: 1 / -1; }
.inline-add > .btn-primary { min-height: var(--field-height); padding-inline: 0; }
.save-surface { display: grid; flex: 1 1 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.save-surface-copy { display: grid; gap: var(--space-1); min-width: 0; }
.save-surface-copy:empty { display: none; }
.save-surface-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; }
.save-surface-actions > * { flex: 0 0 auto; white-space: nowrap; }
.modal-footer:has(> .save-surface-dirty) { border-top-color: var(--accent-fg); }
.save-surface-docked { position: sticky; bottom: calc(var(--app-tabbar-block-size) + max(var(--space-3), env(safe-area-inset-bottom))); z-index: var(--layer-sticky); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow-overlay); }
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-hit); border: 1px solid transparent; background: var(--control-bg); color: var(--text); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-control); line-height: 1.2; cursor: pointer; transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--accent-hover); border-color: var(--accent-hover); }
}
.btn-primary:active:not(:disabled):not([aria-disabled="true"]) { background: var(--accent); border-color: var(--accent); }
.btn-secondary { box-shadow: var(--depth-raised); }
.btn-ghost { background: transparent; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover:not(:disabled):not([aria-disabled="true"]), .btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--hover-bg); color: var(--text); }
}
.btn-secondary:active:not(:disabled):not([aria-disabled="true"]) { background: var(--pressed-bg); box-shadow: var(--depth-raised-pressed); }
.btn-ghost:active:not(:disabled):not([aria-disabled="true"]) { background: var(--pressed-bg); }
.btn-danger { border-color: var(--danger-frame); background: var(--surface-sunken); color: var(--danger); }
.btn-danger:active:not(:disabled):not([aria-disabled="true"]) { border-color: var(--danger); background: var(--danger-wash); }
@media (hover: hover) and (pointer: fine) {
  .btn-danger:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--danger); background: var(--danger-wash); }
}
:is(.btn-primary, .btn-secondary, .btn-danger, .icon-btn, .filter-chip, .segmented-btn):disabled, .segmented-btn[aria-disabled="true"]:not([aria-busy="true"]), :is(.segmented-btn, .choice-card):has(> .choice-input:disabled) { background: var(--disabled-bg); color: var(--disabled-fg); border-color: var(--disabled-border); box-shadow: none; cursor: not-allowed; }
:is(.btn-ghost, .icon-btn-quiet, .action-menu-item):disabled { color: var(--disabled-fg); cursor: not-allowed; }
:is(.btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .icon-btn, .icon-btn-quiet, .filter-chip, .action-menu-item, .checkbox):is([aria-busy="true"], [aria-disabled="true"]), .segmented-btn[aria-busy="true"], :is(.segmented-btn, .choice-card, .toggle-switch):has(> :is(.choice-input, .toggle-switch-input)[aria-disabled="true"]) { cursor: progress; }
.btn-icon-label { gap: var(--space-2); }
.btn-icon { width: var(--icon-md); height: var(--icon-md); }
.btn-block { width: 100%; min-height: var(--control-hit-lg); margin-top: var(--space-3); }
@media (max-width: 1180px) {
  .btn-label-collapsible { width: var(--control-hit); padding-inline: 0; }
  .btn-label-collapsible > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
@container topbar-row (max-width: 56rem) {
  .btn-label-collapsible { width: var(--control-hit); padding-inline: 0; }
  .btn-label-collapsible > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
.quick-add { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.quick-add-shell { margin-bottom: var(--space-3); }
.quick-add-shell .quick-add { margin-bottom: 0; }
.quick-add-shell-compact { margin-bottom: var(--space-2); }
.quick-add-collapsed { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.quick-add-preview { margin-top: var(--space-2); }
.quick-add-preview-loading { min-height: var(--control-hit); align-content: center; }
.quick-add-help { margin-top: var(--space-half); color: var(--muted); font-size: var(--text-xs); }
.quick-add-help-content { display: grid; gap: var(--space-1); max-width: 38rem; margin: 0; }
.quick-add-help-content > div { display: grid; grid-template-columns: minmax(6.5rem, 0.35fr) minmax(0, 1fr); gap: var(--space-2); }
.quick-add-help-content dt { font-weight: var(--weight-strong); color: var(--text); }
.quick-add-help-content dd { margin: 0; }
.quick-add-help-content code { padding: var(--space-half) var(--space-1); border-radius: var(--radius-check); background: var(--surface-sunken); color: var(--text); font-family: var(--font-mono); font-size: var(--text-legend); }
.quick-add > .input { flex: 1; }
.quick-add .btn-primary { flex: 0 0 auto; min-width: var(--control-hit); }
.task-groups { display: grid; gap: var(--space-5); min-width: 0; }
.task-list { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; }
.task-list.raised-surface { overflow: clip; }
.task-group { display: grid; gap: var(--space-2); min-width: 0; }
.task-item { display: grid; grid-template-columns: var(--control-hit) minmax(0, 1fr); column-gap: var(--space-2); align-items: start; position: relative; min-width: 0; min-height: var(--control-hit); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-1); box-shadow: var(--row-selected, 0 0 transparent); transition: background var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
.task-item + .task-item { border-top: 1px solid var(--hairline); }
@media (hover: hover) and (pointer: fine) {
  .task-item:hover { background: var(--row-hover-bg); }
}
:is(.task-item, .task-surface):not(.selected) .task-signal-danger { color: var(--danger); }
.task-item.selected, .search-hit[aria-selected="true"], .nav-link.active, .filter-chip:is([aria-pressed="true"], [aria-current="true"]), .settings-busy-calendar-day[aria-pressed="true"] { --muted: var(--text-secondary); background: var(--selected-bg); color: var(--text); }
.task-item.selected { --row-selected: var(--selected-shadow); }
.search-hit[aria-selected="true"] { box-shadow: var(--selected-shadow); }
.task-list:has(> .task-item > .task-row-actions) > .task-item { grid-template-columns: var(--control-hit) minmax(0, 1fr) var(--control-hit); }
.task-item.done .task-title { color: var(--muted); text-decoration: line-through; }
.task-row-actions { display: flex; align-items: start; }
.task-item-compact { min-height: 0; padding-block: var(--space-1); }
.task-item-compact .task-body { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); }
.task-item-compact .task-title { flex: 0 1 auto; }
.task-item-compact .task-summary { flex: 0 1 auto; margin-top: 0; }
.checkbox { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex-shrink: 0; width: var(--control-hit); height: var(--control-hit); margin: 0; border: 0; border-radius: var(--radius); background: transparent; cursor: pointer; }
.checkbox::after { content: ""; grid-area: 1 / 1; width: var(--icon-lg); height: var(--icon-lg); border: 1px solid var(--border-control); border-radius: var(--radius-check); background: var(--surface); box-shadow: var(--depth-inset); transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
.checkbox::before { content: ""; z-index: 1; grid-area: 1 / 1; align-self: center; justify-self: center; width: 0.32rem; height: 0.6rem; margin-top: -0.1rem; border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transform-origin: center; transition: transform var(--motion-fast) var(--ease-out); }
.checkbox:checked::after { border-color: var(--text); background: var(--text); box-shadow: var(--depth-raised); }
.checkbox:checked::before { transform: rotate(45deg) scale(1); }
.checkbox-select::before { border-color: var(--on-accent); }
.checkbox-select:checked::after { border-color: var(--accent-fg); background: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .checkbox:hover:not(:disabled):not([aria-disabled="true"])::after { border-color: var(--text); }
}
.checkbox:active:not(:disabled):not([aria-disabled="true"])::after { box-shadow: var(--depth-raised-pressed); }
.checkbox:disabled { cursor: not-allowed; }
.checkbox:disabled::after { border-color: var(--disabled-border); background: var(--disabled-bg); box-shadow: none; }
.checkbox:disabled::before { border-color: var(--disabled-fg); }
.check-field { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-hit); min-width: 0; cursor: pointer; }
.check-field:has(> .checkbox:disabled) { color: var(--disabled-fg); cursor: not-allowed; }
.task-body { display: grid; align-content: center; width: 100%; min-width: 0; min-height: var(--control-hit); margin: 0; padding: var(--space-half) 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.task-title { flex: 1 1 auto; min-width: 0; color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.32; overflow-wrap: break-word; text-wrap: pretty; }
.task-priority { --priority-tone: var(--text-secondary); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.375rem; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--priority-tone) 12%, var(--surface)); color: color-mix(in oklab, var(--priority-tone) 60%, var(--text)); font-size: var(--text-legend); font-weight: var(--weight-control); font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1; }
.task-priority.priority-p1 { --priority-tone: var(--danger); }
.task-priority.priority-p2 { --priority-tone: var(--warning); }
.task-priority.priority-p3 { --priority-tone: var(--info); }
.task-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; margin-top: var(--space-1); overflow-x: clip; }
.task-summary:empty { display: none; }
.task-signals, .task-context { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; }
.task-signals:empty { display: none; }
.task-signal, .task-context-item { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.3; white-space: nowrap; }
.task-signal-icon, .task-context-icon { flex: 0 0 auto; width: var(--icon-sm); height: var(--icon-sm); }
.task-signal-strong, .task-signal-danger { color: var(--text); font-weight: var(--weight-strong); }
.task-signal-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.task-context-item { max-width: 100%; }
.task-context-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-context-labels { flex-wrap: wrap; gap: var(--space-1); white-space: normal; }
.task-context-labels > span:not(:last-child)::after { content: "·"; margin-left: var(--space-1); color: var(--border-control); }
.task-context-more { flex-shrink: 0; }
.chip-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.chip { --chip-tone: var(--text-secondary); display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; min-height: 1.5rem; padding: 0.1875rem var(--space-2); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--chip-tone) 10%, var(--surface)); color: color-mix(in oklab, var(--chip-tone) 55%, var(--text)); font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: 0; line-height: 1.2; white-space: nowrap; }
.chip-wrap { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.chip-icon { flex: 0 0 auto; width: var(--icon-xs); height: var(--icon-xs); }
.chip-tone-positive { --chip-tone: var(--success); }
.chip-tone-caution { --chip-tone: var(--warning); }
.chip-tone-critical { --chip-tone: var(--danger); }
.chip-tone-quiet { padding-inline: 0; background: transparent; color: var(--muted); }
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-check); background: var(--surface); color: var(--muted); font: var(--weight-medium) var(--text-legend) / 1 var(--font-mono); letter-spacing: 0.02em; white-space: nowrap; }
@media (pointer: coarse) {
  .search-field-end:has(> .kbd), .kbd, .keyboard-hint, .search-palette-footer { display: none; }
  .search-field:has(> .search-field-end > .kbd) > .input { padding-inline-end: var(--space-4); }
}
.text-link { color: var(--accent-fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover { text-decoration-thickness: 2px; }
}
.loading { margin: 0; padding: var(--space-8) 0; color: var(--muted); text-align: center; text-wrap: pretty; }
.empty { color: var(--muted); text-wrap: pretty; }
.loading-compact, .empty-compact { padding: var(--space-2) 0; text-align: start; }
.empty-compact { display: grid; justify-items: start; gap: var(--space-2); margin: 0; }
.state-card { display: grid; justify-items: center; gap: var(--space-3); margin: 0; padding: var(--space-6) var(--space-5); text-align: center; }
.state-card-title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-display); text-wrap: balance; }
.state-card .status-message { justify-content: center; }
.state-card .status-message-text { flex: 0 1 auto; }
.empty-title { margin: 0; color: var(--text); font-size: var(--text-base); font-weight: var(--weight-strong); line-height: 1.2; text-wrap: balance; }
.empty-message { margin: 0; max-width: 38rem; }
.empty-action { display: flex; flex-wrap: wrap; justify-content: inherit; gap: var(--space-3); margin-top: var(--space-1); }
.status-message { --status-tone: var(--success); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: color-mix(in oklab, var(--status-tone) 8%, var(--bg)); color: var(--text); font-size: var(--text-sm); }
.status-message:where([data-tone="error"]) { --status-tone: var(--danger); }
.status-message:where([data-tone="caution"]) { --status-tone: var(--warning); }
.status-message:where([data-tone="info"]) { --status-tone: var(--info); }
.status-message-inline { padding: 0; background: transparent; }
.feedback-toast { background: var(--surface-raised); box-shadow: var(--shadow-overlay); }
.status-message-icon { flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); color: var(--status-tone); }
.status-message-text { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.status-message-action { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: auto; }
.status-message-enter { animation: statusMessageIn var(--motion-enter) var(--ease-out) both; }
.connection-status, .invitation-notice { margin: var(--space-3) var(--page-gutter) 0; }
.hint { margin: 0; color: var(--muted); font-size: var(--text-sm); text-wrap: pretty; }
.boot-screen, .auth-shell { display: grid; place-content: center; justify-items: center; gap: var(--space-5); min-height: 100dvh; padding: var(--space-8) var(--page-gutter); background: var(--bg); }
.auth-shell { grid-template-columns: minmax(0, 28rem); }
.boot-progress { position: relative; width: min(12rem, 60vw); height: 4px; overflow: hidden; border-radius: var(--radius-pill); background: var(--load-track); }
.boot-progress::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 40%; border-radius: inherit; background: var(--accent-fg); animation: bootProgress 1.4s var(--ease-out) infinite; }
@keyframes bootProgress {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
.reminders-menu > summary { position: relative; }
.reminders-menu .count { position: absolute; inset-block-start: calc(-1 * var(--space-1)); inset-inline-end: calc(-1 * var(--space-1)); background: var(--surface-raised); box-shadow: var(--depth-raised); color: var(--text); font-size: var(--text-legend); line-height: 1; }
.reminders-menu-popover { --action-menu-width: 20rem; }
.reminder-link { align-items: flex-start; white-space: normal; }
.reminder-link-content { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: var(--space-half); }
.reminder-time { font-size: var(--text-legend); color: var(--muted); line-height: 1.15; font-variant-numeric: tabular-nums; }
.reminder-title { max-width: 100%; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; text-wrap: pretty; white-space: normal; font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.2; }
.board-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(18rem, 1fr); gap: var(--space-5); align-items: start; overflow-x: auto; overscroll-behavior-x: contain; padding-block-end: var(--space-1); }
.board-column { container-type: inline-size; display: grid; align-content: start; gap: var(--space-2); min-width: 0; padding: var(--space-3); transition: background var(--motion-base) var(--ease-out); }
.board-lane-head { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.board-lane-head > .filter-drag-handle { flex: 0 0 var(--control-hit); }
.board-lane-title { flex: 1 1 auto; }
.board-section-rename-editor { display: grid; grid-template-columns: minmax(0, 1fr) var(--control-hit) var(--control-hit); align-items: center; gap: var(--space-1); flex: 1 1 auto; min-width: 0; }
.board-section-rename { font-weight: var(--weight-strong); }
.board-section-rename-feedback { grid-column: 1 / -1; min-width: 0; }
.icon-btn, .icon-btn-quiet { display: inline-grid; place-items: center; flex: 0 0 var(--control-hit); width: var(--control-hit); height: var(--control-hit); padding: 0; border: 0; border-radius: var(--radius); background: var(--surface-sunken); box-shadow: var(--depth-raised); color: var(--muted); line-height: 1; cursor: pointer; transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out); }
.icon-btn-quiet { background: transparent; box-shadow: none; }
.topbar-search-trigger, .sidebar-close { display: none; }
.icon-btn-icon { width: var(--icon-lg); height: var(--icon-lg); }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover:not(:disabled):not([aria-disabled="true"]), .icon-btn-quiet:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--hover-bg); color: var(--text); }
}
.icon-btn:active:not(:disabled):not([aria-disabled="true"]) { background: var(--pressed-bg); box-shadow: var(--depth-raised-pressed); }
.icon-btn-quiet:active:not(:disabled):not([aria-disabled="true"]) { background: var(--pressed-bg); }
.reveal-action { color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .reveal-action { opacity: 0; }
  .reveal-scope:is(:hover, :focus-within) .reveal-action, .reveal-action[open] { opacity: 1; }
}
.filter-row { display: flex; align-items: center; gap: var(--space-1); min-width: 0; max-width: 100%; }
.filter-drag-handle { cursor: grab; touch-action: none; }
.filter-link { flex: 1 1 0; min-width: 0; align-items: center; overflow: hidden; white-space: nowrap; }
.work-session-stack { display: grid; gap: var(--space-2); min-width: 0; }
.catalog-link { align-items: flex-start; }
.catalog-link-leading { --swatch-color: var(--accent); position: relative; display: inline-grid; place-items: center; flex: 0 0 var(--icon-lg); width: var(--icon-lg); height: var(--icon-lg); margin-top: var(--space-half); }
.filter-link:not(.catalog-link) .catalog-link-leading { margin-top: 0; }
.catalog-link-leading .chip-dot { position: absolute; right: 0; bottom: 0; width: 5px; height: 5px; border: 1px solid var(--surface); }
.catalog-link-content { display: flex; flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; flex-direction: column; align-items: flex-start; gap: var(--space-half); }
.catalog-link-label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-link .catalog-link-label { width: 100%; }
.catalog-shared-chip { align-self: flex-start; flex: 0 1 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-legend); }
.modal-backdrop { position: fixed; inset: 0; z-index: var(--layer-modal); display: flex; align-items: center; justify-content: center; padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left)); background: var(--scrim); }
.modal-backdrop-enter { animation: modalBackdropIn var(--motion-base) var(--ease-out) both; }
.modal-card { display: flex; flex-direction: column; width: min(35rem, 100%); max-height: calc(100dvh - 2rem); min-height: 0; overflow: clip; border-radius: var(--radius-modal); background: var(--surface-raised); box-shadow: var(--shadow-modal); }
.modal-card-medium { width: min(48rem, 100%); }
.modal-card-large { width: min(58rem, 100%); height: min(52rem, calc(100dvh - 2rem)); }
.modal-header { display: flex; flex: 0 0 auto; align-items: flex-start; gap: var(--space-3); min-width: 0; padding: var(--space-5) var(--space-4) var(--space-3) var(--space-5); }
.modal-heading { display: grid; flex: 1 1 auto; gap: var(--space-2); min-width: 0; padding-top: var(--space-2); }
.modal-heading:has(> .input) { padding-top: 0; }
.modal-description { margin: 0; color: var(--text-secondary); text-wrap: pretty; }
.modal-close { margin-inline-start: auto; border-radius: var(--radius-pill); background: var(--quiet-fill); box-shadow: none; color: var(--text-secondary); }
.modal-body { display: grid; flex: 1 1 auto; align-content: start; gap: var(--space-4); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1) var(--space-5) var(--space-5); }
.modal-footer { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; padding: var(--space-4) var(--space-5) var(--space-5); border-top: 1px solid var(--hairline); background: var(--surface-raised); }
.modal-footer:empty { display: none; }
.modal-footer-start { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-end: auto; }
.modal-card-enter { animation: modalCardIn var(--motion-enter) var(--ease-sheet) both; }
.modal-backdrop-exit { animation: modalBackdropOut var(--motion-exit) var(--ease-out) both; }
.modal-card-exit { animation: modalCardOut var(--motion-exit) var(--ease-out) both; }
.onboarding-step-enter { animation: modalChunkIn var(--motion-enter) var(--ease-out) both; }
@keyframes modalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalCardIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes modalBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes modalCardOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}
@keyframes modalChunkIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes statusMessageIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.color-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--control-hit), 1fr)); justify-items: center; row-gap: var(--space-1); }
.color-pick { --swatch-color: var(--accent); position: relative; display: inline-block; width: var(--control-hit); height: var(--control-hit); padding: 2px; border: 2px solid transparent; border-radius: var(--radius-round); background: var(--swatch-color) content-box; cursor: pointer; transition: border-color var(--motion-fast) var(--ease-out); }
.color-pick:has(> .choice-input:disabled) { border-color: var(--disabled-border); background: color-mix(in oklab, var(--swatch-color) 45%, var(--disabled-bg)) content-box; cursor: not-allowed; }
.color-pick:has(> .choice-input:checked) { border-color: var(--border-strong); }
.bulk-toolbar { position: sticky; top: 0; z-index: var(--layer-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow-overlay); }
.bulk-count { margin-right: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-strong); }
.bulk-action-menu { margin-inline-start: auto; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: var(--space-3) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left)); background: var(--danger-wash); box-shadow: var(--shadow-overlay), inset 0 3px 0 var(--danger); color: var(--text); z-index: var(--layer-modal); }
#blazor-error-ui .reload { color: inherit; text-decoration: underline; }
#blazor-error-ui .dismiss { float: right; display: inline-grid; place-items: center; width: var(--control-hit); height: var(--control-hit); padding: 0; background: transparent; border: 0; cursor: pointer; border-radius: var(--radius); }
#blazor-error-ui .dismiss-icon { width: var(--icon-md); height: var(--icon-md); }
.calendar-shell { min-width: 0; overflow: clip; }
.calendar-month { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar-weekday { padding: var(--space-2) var(--space-1); border-block-end: 1px solid var(--hairline); }
.calendar-cell { height: 7.25rem; min-width: 0; padding: var(--space-1) var(--space-1) var(--space-2); border-inline-end: 1px solid var(--hairline); border-block-end: 1px solid var(--hairline); background: var(--surface); vertical-align: top; transition: background var(--motion-fast) var(--ease-out); }
.calendar-cell:last-child { border-inline-end: 0; }
.calendar-month tbody tr:last-child .calendar-cell { border-block-end: 0; }
.calendar-cell:where(.weekend) { background: var(--weekend-bg); }
.calendar-cell:where(.outside-month) { background: var(--outside-month-bg); }
.calendar-cell.outside-month .calendar-day-num { color: var(--muted); }
.calendar-cell-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; min-height: var(--control-hit); container-type: inline-size; }
.calendar-cell-header > .reveal-action { margin-inline-start: auto; }
@container (inline-size < 7.5rem) {
  .calendar-cell-header > .count { order: 1; }
}
@container (inline-size < 5.75rem) {
  .calendar-cell-header > .reveal-action { display: none; }
}
.calendar-day-num { display: inline-grid; place-items: center; min-width: var(--control-hit); min-height: var(--control-hit); padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text); font-size: var(--text-xs); font-weight: var(--weight-display); cursor: pointer; transition: background var(--motion-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .calendar-day-num:hover { background: var(--hover-bg); }
}
.calendar-cell.is-today .calendar-day-num, .settings-busy-calendar-today { background: var(--accent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) {
  .calendar-cell.is-today .calendar-day-num:hover { background: var(--accent-hover); }
}
.calendar-today-label { order: 1; flex-basis: 100%; color: var(--text); font-size: var(--text-xs); font-weight: var(--weight-strong); }
.calendar-tasks { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; margin: var(--space-1) 0 0; padding: 0; list-style: none; container-type: inline-size; }
.calendar-tasks > li { display: flex; min-width: 0; }
.calendar-overflow-btn { width: 100%; min-width: 0; margin-block-start: var(--space-1); padding-inline: var(--space-2); font-size: var(--text-xs); }
.calendar-task { display: block; width: 100%; min-width: 0; min-height: var(--control-hit); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); line-height: 1.3; text-align: start; cursor: pointer; }
.calendar-task[draggable="true"], .task-item[draggable="true"], .task-item[draggable="true"] .task-body { cursor: grab; }
.calendar-task[draggable="true"]:active, .task-item[draggable="true"]:active, .task-item[draggable="true"]:active .task-body { cursor: grabbing; }
.calendar-task-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.calendar-task-time { flex: 0 0 auto; color: var(--muted); }
.calendar-task-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.calendar-task-body > .task-signal { white-space: normal; }
.calendar-task.done .calendar-task-title { color: var(--muted); text-decoration: line-through; }
.busy-surface { --task-accent: var(--ink-muted); background: var(--surface-sunken); color: var(--text-secondary); }
.calendar-busy-block { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-1); width: 100%; min-width: 0; min-height: var(--control-hit); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); line-height: 1.3; }
.calendar-busy-block-time, .calendar-busy-block-mark { flex: 0 0 auto; color: var(--muted); }
.calendar-busy-block-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.calendar-time-grid { --hour-height: calc(var(--control-hit) + var(--control-hit) + 8px); --time-rail-width: 4.5rem; --time-grid-columns: var(--time-rail-width) repeat(var(--day-count), minmax(0, 1fr)); position: relative; display: grid; grid-template-columns: var(--time-grid-columns); max-height: min(72vh, 52rem); overflow: auto; overscroll-behavior: contain; }
.calendar-time-grid-head { position: sticky; top: 0; z-index: var(--layer-sticky); grid-column: 1 / -1; display: grid; grid-template-columns: var(--time-grid-columns); border-block-end: 1px solid var(--hairline); background: var(--surface); }
.calendar-time-grid-day-head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-width: 0; padding: var(--space-2) var(--space-1); border-inline-start: 1px solid var(--hairline); font-size: var(--text-xs); font-weight: var(--weight-strong); text-align: center; }
.calendar-time-grid-day-head.is-today, .task-group.is-today > .section-header { --muted: var(--text-secondary); background: var(--accent-soft); }
.calendar-time-grid-load { color: var(--muted); font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; }
.calendar-time-grid-allday-label { display: flex; align-items: center; justify-content: flex-end; padding: var(--space-1) var(--space-2) var(--space-1) 0; border-block-start: 1px solid var(--hairline); text-align: end; white-space: normal; }
.calendar-time-grid-head:has(> .calendar-time-grid-spans) > .calendar-time-grid-allday-label { grid-row: span 2; }
.calendar-time-grid-allday { display: flex; flex-direction: column; gap: var(--space-half); min-width: 0; min-height: var(--control-hit); padding: var(--space-half); border-block-start: 1px solid var(--hairline); border-inline-start: 1px solid var(--hairline); background: var(--surface); }
.calendar-time-grid-spans { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(var(--day-count), minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--space-half); margin: 0; padding: var(--space-half); border-block-start: 1px solid var(--hairline); list-style: none; background: var(--surface); }
.calendar-time-grid-span { display: flex; grid-column: var(--span-start) / span var(--span-length); min-width: 0; }
.calendar-time-grid-body { grid-column: 1 / -1; display: grid; grid-template-columns: var(--time-grid-columns); }
.calendar-time-grid-rail { display: grid; grid-template-rows: repeat(24, var(--hour-height)); }
.calendar-time-label { display: flex; justify-content: flex-end; padding: var(--space-1) var(--space-2) 0 0; border-block-start: 1px solid var(--hairline); color: var(--muted); font-size: var(--text-legend); line-height: 1; }
.calendar-time-grid-day { position: relative; min-width: 0; height: calc(24 * var(--hour-height)); border-inline-start: 1px solid var(--hairline); }
.calendar-time-grid-day.drop-target-day { background-color: var(--hover-bg); }
.calendar-time-grid-slot { position: absolute; inset-inline: 0; top: calc(var(--hour-index) * var(--hour-height)); height: var(--hour-height); border-top: 1px solid var(--hairline); }
.calendar-time-grid-event { position: absolute; z-index: 1; top: var(--event-top); left: var(--event-left); width: var(--event-width); height: var(--event-height); min-width: var(--control-hit); min-height: var(--control-hit); padding: 1px var(--space-half); box-sizing: border-box; container-type: inline-size; }
.calendar-time-grid-busy { z-index: 0; pointer-events: none; }
.calendar-time-grid-event > :is(.calendar-task, .calendar-busy-block) { height: 100%; overflow: hidden; }
@container (max-width: 7.5rem) {
  :is(.calendar-time-grid-event, .calendar-tasks) :is(.calendar-task-time, .task-signal-text) { display: none; }
  :is(.calendar-time-grid-event, .calendar-tasks) .calendar-task-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: normal; }
}
.calendar-now-line { position: absolute; inset-inline: 0; top: calc(var(--now-ratio) * 100%); z-index: 2; height: 0; border-block-start: 2px solid var(--accent-fg); pointer-events: none; }
.task-group.is-today > .section-header { padding: var(--space-2) var(--space-3); border-radius: var(--radius); }
.calendar-agenda-busy { padding: var(--space-1) var(--space-3) var(--space-1) calc(var(--control-hit) + var(--space-3)); }
.task-list > * + .calendar-agenda-busy, .calendar-agenda-busy + .task-item { border-block-start: 1px solid var(--hairline); }
.calendar-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: var(--text-xs); }
.calendar-legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.calendar-legend-sample { flex: 0 0 auto; width: var(--space-6); height: var(--icon-md); }
.drop-target { outline: var(--drop-target-outline); outline-offset: -2px; background: var(--accent-soft); }
.dragging { opacity: 0.55; }
.auth-card { --field-height: var(--control-hit-lg); width: min(28rem, 100%); padding: clamp(var(--space-4), 4.8vw, var(--space-6)); border: 1px solid var(--border); border-radius: var(--radius-modal); background: var(--surface); }
.auth-card h1 { margin-bottom: var(--space-2); }
.auth-card > .hint { margin-block-end: var(--space-4); }
.auth-footer { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--hairline); color: var(--muted); font-size: var(--text-sm); }
.password-field { position: relative; display: block; min-width: 0; }
.password-field > .input { padding-inline-end: calc(var(--control-hit) + var(--space-2)); }
.password-field > .icon-btn-quiet { position: absolute; inset-block-start: calc((var(--field-height) - var(--control-hit)) / 2); inset-inline-end: calc((var(--field-height) - var(--control-hit)) / 2); }
.field-action { display: flex; justify-content: flex-end; min-width: 0; }
.field-action > .text-link { display: inline-flex; align-items: center; min-block-size: var(--control-hit); }

@media (max-width: 860px) {
  .settings-profile-details { grid-template-columns: minmax(0, 1fr); }
  .segmented-control { --segment-padding-inline: var(--space-3); }
  .choice-group > .segmented-control { --segment-padding-inline: var(--space-1); width: 100%; }
  .app-shell { grid-template-columns: minmax(0, 100%); align-content: start; width: 100%; max-width: 100vw; overflow-x: clip; }
  .sidebar { display: none; }
  .sidebar.sidebar-mobile-open { position: fixed; inset: 0; z-index: var(--layer-drawer); height: 100dvh; max-height: 100dvh; overflow: hidden; padding: max(var(--space-3), env(safe-area-inset-top)) calc(var(--space-4) + env(safe-area-inset-right)) max(var(--space-3), env(safe-area-inset-bottom)) calc(var(--space-4) + env(safe-area-inset-left)); border-right: 0; display: flex; }
  .sidebar-close { display: inline-grid; }
  .content-layout { width: 100%; max-width: 100%; min-width: 0; }
  .main { width: 100%; max-width: 100%; min-width: 0; padding-bottom: var(--app-tabbar-block-size); }
  html { scroll-padding-block-start: var(--app-header-block-size); }
  .topbar { position: sticky; top: 0; z-index: var(--layer-header); padding-top: max(var(--page-gutter-block), env(safe-area-inset-top)); border-bottom: 1px solid var(--hairline); background: var(--bg); }
  .topbar-row { gap: var(--space-2); }
  .page-title { font-size: clamp(var(--text-sm), 3.6vw, var(--text-base)); letter-spacing: 0; line-height: 1.3; }
  .topbar-search { display: none; }
  .topbar-search-trigger { display: inline-grid; }
  .page-actions-menu { display: block; }
  .page-command-collapsible { display: none; }
  .topbar-toolbar > .period-navigator { flex: 1 1 100%; }
  .period-title { font-size: var(--text-base); }
  .period-navigator > .btn-icon-label { flex: 0 0 var(--control-hit); width: var(--control-hit); padding: 0; border-radius: var(--radius); }
  .period-navigator > .btn-icon-label > span { display: none; }
  .topbar-toolbar { padding-block-start: var(--page-gutter-block); }
  .topbar-toolbar:empty { display: none; }
  .modal-header:has(> .modal-heading > .task-detail-title) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
  .modal-header > .checkbox { justify-self: start; }
  .modal-heading:has(> .task-detail-title) { grid-row: 2; grid-column: 1 / -1; }
  .task-detail-title, textarea.task-detail-title { font-size: var(--text-lg); }
  .app-tabbar { display: block; }
  .app-shell:has(.main :is(textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="image"])):focus) .app-tabbar { display: none; }
  .feedback-host { inset-inline: max(var(--page-gutter), env(safe-area-inset-left)) max(var(--page-gutter), env(safe-area-inset-right)); width: auto; }
  .history-filters { flex: 1 1 auto; width: 100%; min-width: 0; }
  .weekly-availability-copy-days { grid-template-columns: minmax(0, 1fr); }
  .settings-busy-calendar { border-spacing: var(--space-half); }
  .settings-busy-calendar th, .settings-busy-calendar-day { min-width: calc(var(--control-hit) - var(--space-1)); }
  .content-layout { grid-template-columns: 1fr; }
  .bulk-toolbar { top: var(--app-header-block-size); }
  .bulk-count { flex: 1 1 calc(100% - var(--control-hit) - var(--space-3)); }
  .bulk-toolbar > :not(.bulk-count, .bulk-action-menu) { order: 1; }
  .lane-scroller { display: flex; gap: var(--space-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-block-end: var(--space-1); }
  .lane-scroller > * { flex: 0 0 var(--lane-item-width, min(85vw, 20rem)); scroll-snap-align: start; }
  .segmented-btn.wide-only:not([aria-selected="true"]) { display: none; }
  .calendar-cell { position: relative; height: 4.375rem; padding: var(--space-half) 0; }
  .calendar-cell-header { flex-direction: column; gap: 0; }
  .calendar-day-num { inline-size: min(var(--control-hit), 100%); min-width: 0; min-height: 0; aspect-ratio: 1; }
  .calendar-day-num::after { content: ""; position: absolute; inset: 0; }
  .calendar-month :is(.calendar-tasks, .calendar-overflow-btn, .reveal-action, .calendar-today-label) { display: none; }
  .calendar-time-grid { --time-rail-width: 3rem; }
  .hint { overflow-wrap: anywhere; }
  .modal-backdrop-dialog, .modal-backdrop-alert { align-items: flex-end; padding: max(var(--space-4), env(safe-area-inset-top)) 0 0; }
  .modal-backdrop-sheet { align-items: stretch; padding: 0; }
  .modal-card { width: 100%; max-height: 100%; padding-bottom: env(safe-area-inset-bottom); border-radius: var(--radius-modal) var(--radius-modal) 0 0; }
  .modal-card-large { height: auto; }
  .modal-card-enter { animation-duration: var(--motion-sheet); }
  .modal-backdrop-sheet > .modal-card { height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .modal-backdrop-sheet .modal-header { padding-top: max(var(--space-4), env(safe-area-inset-top)); }
  .modal-header, .modal-body, .modal-footer { padding-inline: max(var(--space-4), env(safe-area-inset-left)) max(var(--space-4), env(safe-area-inset-right)); }
  .modal-backdrop-dialog .modal-footer > :not(.modal-footer-start), .modal-backdrop-alert .modal-footer > :not(.modal-footer-start), .modal-footer-start > * { flex: 1 1 auto; }
  .modal-footer-start { flex-basis: 100%; margin-inline-end: 0; }
  @keyframes modalCardIn {
    from { transform: translateY(100%); }
    to { transform: none; }
  }
  @keyframes modalCardOut {
    from { transform: none; }
    to { transform: translateY(100%); }
  }
}

@media (max-width: 1180px) {
  .filter-toolbar { align-items: center; flex-direction: row; gap: var(--space-2); min-width: 0; max-width: 100%; }
  .filter-toolbar .control-label { flex: 0 0 auto; }
  .scroll-fade { flex-wrap: nowrap; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--scroll-fade-size); }
  .scroll-fade::-webkit-scrollbar { display: none; }
  .filter-toolbar-scroll { flex: 1 1 auto; width: auto; margin-block: calc(-1 * var(--space-1)); padding: var(--space-1); }
  .subnav { --subnav-flow: row nowrap; }
  .scroll-fade > * { flex: 0 0 auto; }
  .filter-chip-label { max-inline-size: 18rem; }
}

@media (min-width: 861px) and (max-width: 1180px) {
  .content-layout { gap: var(--space-4); }
  .calendar-month .chip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-enter: 0ms; --motion-exit: 0ms; --motion-sheet: 0ms; }
  .boot-progress::after, .sidebar-nav-item-animate { animation: none; }
}

@media (prefers-contrast: more) {
  :root { --muted: var(--text); --text-secondary: var(--text); --border: var(--text); --hairline: var(--text); --border-control: var(--text); }
  :is(.panel, .raised-surface, .btn-secondary, .icon-btn, .chip, .filter-chip, .choice-card, .task-surface) { border: 2px solid var(--text); }
}

@media (forced-colors: active) {
  :is(.panel, .raised-surface, .choice-card, .task-surface, .icon-btn, .chip, .task-priority, .status-message:not(.status-message-inline), .modal-card, .action-menu-popover, .search-popover, .save-surface-docked, .bulk-toolbar) { border: 1px solid CanvasText; }
  .toggle-switch-track { forced-color-adjust: none; border: 1px solid CanvasText; background: Canvas; }
  .toggle-switch-thumb { background: CanvasText; box-shadow: none; }
  .toggle-switch-input:checked + .toggle-switch-track { border-color: Highlight; background: Highlight; }
  .toggle-switch-input:checked + .toggle-switch-track .toggle-switch-thumb { background: HighlightText; }
  .load-meter-track { border: 1px solid CanvasText; }
  .load-meter-fill { forced-color-adjust: none; background: Highlight; }
  .load-meter-overflow { forced-color-adjust: none; background: repeating-linear-gradient(135deg, CanvasText 0 3px, Canvas 3px 6px); }
  .load-meter-capacity { forced-color-adjust: none; background: CanvasText; }
  .day-bar-fill { forced-color-adjust: none; background: CanvasText; }
  .calendar-cell.is-today .calendar-day-num, .settings-busy-calendar-today { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .color-pick { forced-color-adjust: none; border-color: CanvasText; }
  .search-mark { text-decoration-color: CanvasText; }
  .task-item.selected,
  .search-hit[aria-selected="true"],
  .nav-link.active,
  .app-tabbar-item[aria-current="page"],
  .segmented-btn[aria-selected="true"],
  :is(.segmented-btn, .filter-chip)[aria-pressed="true"],
  .filter-chip[aria-current="true"],
  .segmented-btn[aria-current="page"],
  :is(.segmented-btn, .choice-card, .color-pick):has(> .choice-input:checked),
  .settings-busy-calendar-day[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}