/* styles/01-foundation.css */
/* Foundation: design tokens, reset, base elements, and screen-reader helpers. */

:root {
  color-scheme: light;
  --app-shell-user-scale: 1;
  --app-shell-scale: var(--app-shell-user-scale);
  --app-sidebar-width: clamp(246px, 14.4vw, 282px);
  --font-size: 16px;
  --font-family-ui: "Segoe UI Variable", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --dot-panel-width: 36%;
  --dot-board-size: 134px;
  --ease-smooth: cubic-bezier(.16, 1, .3, 1);
  --ease-smooth-soft: cubic-bezier(.24, .82, .24, 1);
  --ease-press: cubic-bezier(.2, .8, .2, 1);
  --motion-instant: 90ms;
  --motion-fast: 160ms;
  --motion-medium: 240ms;
  --motion-slow: 380ms;
  --bg: #f3f6fb;
  --page-bg: linear-gradient(135deg, #f9fbff 0%, #edf3fb 100%);
  --surface: #ffffff;
  --surface-soft: #f6f7fa;
  --surface-glass: rgba(255, 255, 255, 0.94);
  --surface-raised: #ffffff;
  --surface-panel: rgba(255, 255, 255, 0.9);
  --surface-panel-strong: rgba(255, 255, 255, 0.96);
  --surface-panel-muted: rgba(247, 250, 255, 0.94);
  --surface-card: #fbfcff;
  --surface-elevated: #ffffff;
  --panel-soft: rgba(247, 250, 255, 0.82);
  --button-soft: rgba(17, 24, 39, 0.055);
  --text: #111827;
  --text-secondary: #263244;
  --text-tertiary: #475569;
  --muted: #4b5563;
  --muted-strong: #374151;
  --line: rgba(17, 24, 39, 0.11);
  --line-soft: rgba(17, 24, 39, 0.06);
  --line-strong: rgba(17, 24, 39, 0.16);
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.11);
  --danger: #c0392b;
  --danger-soft: rgba(255, 59, 48, 0.14);
  --success: #2f8f5b;
  --success-soft: rgba(52, 199, 89, 0.12);
  --warning: #a66b15;
  --warning-soft: rgba(245, 158, 11, 0.13);
  --surface-base: var(--surface);
  --text-primary: var(--text);
  --border-subtle: var(--line-soft);
  --border-strong: var(--line-strong);
  --color-accent: var(--accent);
  --color-danger: var(--danger);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --font-page-title: clamp(28px, calc(2.4vw + var(--font-size) - 16px), 42px);
  --font-section-title: clamp(17px, calc(var(--font-size) + 2px), 25px);
  --font-subtitle: clamp(14px, calc(var(--font-size) - 1px), 21px);
  --font-body: var(--font-size);
  --font-caption: clamp(11px, calc(var(--font-size) - 4px), 16px);
  --font-chip: clamp(11px, calc(var(--font-size) - 4px), 16px);
  --font-button: clamp(13px, calc(var(--font-size) - 2px), 18px);
  --font-weight-title: 800;
  --font-weight-section: 700;
  --font-weight-body: 500;
  --font-weight-control: 700;
  --radius-shell: 22px;
  --radius-panel: 18px;
  --radius-card: 14px;
  --radius-control: 11px;
  --radius-compact: 8px;
  --radius-pill: 999px;
  --component-bg: var(--surface-card);
  --component-bg-hover: color-mix(in srgb, var(--surface) 84%, var(--surface-card) 16%);
  --component-border: var(--border-subtle);
  --component-shadow: var(--shadow-card);
  --button-secondary-bg: var(--control-bg);
  --button-secondary-bg-hover: var(--control-bg-hover);
  --button-secondary-text: var(--control-text);
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: color-mix(in srgb, var(--blue) 8%, var(--surface) 92%);
  --button-ghost-text: color-mix(in srgb, var(--blue) 66%, var(--text) 34%);
  --icon-button-size: clamp(34px, calc(var(--font-size) + 20px), 44px);
  --chip-height: clamp(24px, calc(var(--font-size) + 8px), 34px);
  --chip-height-compact: clamp(20px, calc(var(--font-size) + 4px), 28px);
  --chip-padding: 4px 9px;
  --chip-padding-compact: 3px 7px;
  --chip-font-size: var(--font-chip);
  --chip-font-weight: 700;
  --segmented-bg: color-mix(in srgb, var(--surface-soft) 82%, var(--surface) 18%);
  --segmented-border: color-mix(in srgb, var(--line-soft) 88%, transparent);
  --segmented-active-bg: var(--surface);
  --segmented-active-shadow: 0 4px 12px rgba(17, 24, 39, 0.065);
  --empty-bg: color-mix(in srgb, var(--surface-card) 92%, var(--surface) 8%);
  --empty-border: var(--border-subtle);
  --empty-text: var(--text-secondary);
  --control-bg: color-mix(in srgb, var(--surface-soft) 78%, var(--surface) 22%);
  --control-bg-hover: color-mix(in srgb, var(--surface) 86%, var(--surface-soft) 14%);
  --control-bg-active: color-mix(in srgb, var(--blue) 11%, var(--surface) 89%);
  --control-border: color-mix(in srgb, var(--line-soft) 86%, transparent);
  --control-border-hover: color-mix(in srgb, var(--blue) 26%, var(--line-soft) 74%);
  --control-text: var(--text-secondary);
  --control-muted-text: var(--text-tertiary);
  --control-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent), 0 4px 12px rgba(17, 24, 39, 0.04);
  --control-shadow-hover: inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent), 0 8px 18px rgba(17, 24, 39, 0.065);
  --button-primary-bg: linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #ffffff 12%), var(--blue));
  --button-primary-bg-hover: linear-gradient(180deg, color-mix(in srgb, var(--blue) 80%, #ffffff 20%), color-mix(in srgb, var(--blue) 94%, #045fb8 6%));
  --button-primary-text: #ffffff;
  --button-danger-bg: color-mix(in srgb, var(--danger) 12%, var(--surface) 88%);
  --button-danger-bg-hover: color-mix(in srgb, var(--danger) 18%, var(--surface) 82%);
  --button-danger-text: color-mix(in srgb, var(--danger) 82%, var(--text) 18%);
  --shadow-color: rgba(17, 24, 39, 0.12);
  --shadow-none: none;
  --shadow: 0 22px 54px rgba(31, 41, 55, 0.1);
  --shadow-panel: 0 10px 24px rgba(17, 24, 39, 0.055);
  --shadow-card: 0 6px 18px rgba(17, 24, 39, 0.045);
  --shadow-card-strong: 0 12px 26px rgba(17, 24, 39, 0.08);
  --shadow-popover: 0 18px 42px rgba(17, 24, 39, 0.16);
  --shadow-modal: 0 26px 62px rgba(17, 24, 39, 0.22);
  --glow-blue-soft: 0 0 0 3px rgba(10, 132, 255, 0.055), 0 10px 22px rgba(10, 132, 255, 0.08);
  --glow-blue-strong: 0 0 0 4px rgba(10, 132, 255, 0.13), 0 18px 34px rgba(10, 132, 255, 0.23);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
  --blue: #0a84ff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111827;
  --page-bg: linear-gradient(135deg, #0b1220 0%, #111827 100%);
  --surface: #1f2937;
  --surface-soft: #273244;
  --surface-glass: rgba(31, 41, 55, 0.9);
  --surface-raised: #243041;
  --surface-panel: rgba(34, 44, 60, 0.88);
  --surface-panel-strong: rgba(39, 50, 68, 0.94);
  --surface-panel-muted: rgba(26, 34, 47, 0.94);
  --surface-card: #2b3647;
  --surface-elevated: #303c4e;
  --panel-soft: rgba(17, 24, 39, 0.78);
  --button-soft: rgba(255, 255, 255, 0.1);
  --text: #f9fafb;
  --text-secondary: #e5ebf3;
  --text-tertiary: #d1d9e6;
  --muted: #c4cedc;
  --muted-strong: #e0e7f1;
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.2);
  --accent: #5aa7ff;
  --accent-soft: rgba(90, 167, 255, 0.14);
  --danger: #ff8b82;
  --danger-soft: rgba(255, 139, 130, 0.14);
  --success: #9ad7a8;
  --success-soft: rgba(154, 215, 168, 0.12);
  --warning: #f1c16d;
  --warning-soft: rgba(241, 193, 109, 0.14);
  --component-bg: var(--surface-card);
  --component-bg-hover: color-mix(in srgb, var(--surface-elevated) 82%, var(--surface-card) 18%);
  --component-border: var(--border-subtle);
  --button-secondary-bg: var(--control-bg);
  --button-secondary-bg-hover: var(--control-bg-hover);
  --button-secondary-text: var(--control-text);
  --button-ghost-bg-hover: color-mix(in srgb, var(--blue) 18%, var(--surface-elevated) 82%);
  --button-ghost-text: color-mix(in srgb, var(--blue) 48%, var(--text) 52%);
  --segmented-bg: color-mix(in srgb, var(--surface-soft) 76%, var(--surface) 24%);
  --segmented-border: color-mix(in srgb, var(--line-soft) 92%, transparent);
  --segmented-active-bg: var(--surface-elevated);
  --segmented-active-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  --empty-bg: color-mix(in srgb, var(--surface-card) 88%, var(--surface) 12%);
  --empty-border: var(--border-subtle);
  --empty-text: var(--text-secondary);
  --shadow-color: rgba(0, 0, 0, 0.34);
  --shadow: 0 22px 54px rgba(0, 0, 0, 0.3);
  --shadow-panel: 0 12px 28px rgba(0, 0, 0, 0.22);
  --shadow-card: 0 8px 22px rgba(0, 0, 0, 0.18);
  --shadow-card-strong: 0 14px 32px rgba(0, 0, 0, 0.26);
  --shadow-popover: 0 18px 42px rgba(0, 0, 0, 0.34);
  --shadow-modal: 0 28px 68px rgba(0, 0, 0, 0.42);
  --glow-blue-soft: 0 0 0 3px rgba(10, 132, 255, 0.08), 0 12px 26px rgba(10, 132, 255, 0.12);
  --glow-blue-strong: 0 0 0 4px rgba(10, 132, 255, 0.15), 0 20px 40px rgba(10, 132, 255, 0.26);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
  --control-bg: color-mix(in srgb, var(--surface-elevated) 62%, var(--surface-soft) 38%);
  --control-bg-hover: color-mix(in srgb, var(--surface-elevated) 78%, var(--surface) 22%);
  --control-bg-active: color-mix(in srgb, var(--blue) 22%, var(--surface-elevated) 78%);
  --control-border: color-mix(in srgb, var(--line-soft) 92%, transparent);
  --control-border-hover: color-mix(in srgb, var(--blue) 38%, var(--line-soft) 62%);
  --control-text: var(--text-secondary);
  --control-muted-text: var(--text-tertiary);
  --control-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 34%, transparent), 0 6px 16px rgba(0, 0, 0, 0.14);
  --control-shadow-hover: inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 42%, transparent), 0 10px 22px rgba(0, 0, 0, 0.2);
  --button-primary-bg: linear-gradient(180deg, color-mix(in srgb, var(--blue) 68%, #ffffff 32%), color-mix(in srgb, var(--blue) 82%, #0b1220 18%));
  --button-primary-bg-hover: linear-gradient(180deg, color-mix(in srgb, var(--blue) 76%, #ffffff 24%), color-mix(in srgb, var(--blue) 88%, #0b1220 12%));
  --button-primary-text: #ffffff;
  --button-danger-bg: color-mix(in srgb, var(--danger) 20%, var(--surface-elevated) 80%);
  --button-danger-bg-hover: color-mix(in srgb, var(--danger) 26%, var(--surface-elevated) 74%);
  --button-danger-text: color-mix(in srgb, #ffffff 60%, var(--danger) 40%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  overscroll-behavior-y: none;
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-body);
  letter-spacing: 0;
  background: var(--page-bg);
  color: var(--text);
  font-size: var(--font-size);
}

html {
  scroll-behavior: smooth;
}

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

button {
  cursor: pointer;
}

h1,
h2,
p {
  margin: 0;
}

.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;
}

/* styles/02-shell-and-shared.css */
/* Shell and shared interactions: desktop frame, sidebar actions, theme switch, and common motion. */

.desktop-shell {
  position: relative;
  width: calc(100vw - 10px);
  height: calc(100vh - 10px);
  min-height: calc(100vh - 10px);
  margin: 5px auto;
  display: grid;
  grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.sidebar,
.workspace {
  background: var(--surface-glass);
  border: 1px solid color-mix(in srgb, var(--surface) 72%, transparent);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent),
    var(--shadow-panel);
  backdrop-filter: blur(16px);
}

:root:not([data-theme="dark"]) .sidebar,
:root:not([data-theme="dark"]) .workspace {
  background: color-mix(in srgb, var(--surface) 96%, rgba(244, 247, 252, 0.78) 4%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 28px rgba(22, 33, 54, 0.055);
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: calc(100vh - 10px);
  max-height: calc(100vh - 10px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
  overflow: hidden;
  border-right-color: color-mix(in srgb, var(--line-soft) 88%, transparent);
  border-radius: 22px 0 0 22px;
}

.workspace {
  border-left: 0;
  border-radius: 0 22px 22px 0;
}

.sidebar-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: stretch;
  padding: 10px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-soft) 12%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-soft) 88%, transparent);
}

.settings-button {
  order: 2;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 15px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #eaf3ff 6%), color-mix(in srgb, var(--surface-soft) 88%, #e4f0ff 12%));
  color: color-mix(in srgb, var(--blue) 58%, var(--text) 42%);
  font-size: 15px;
  font-weight: 850;
  padding: 0 18px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent),
    0 6px 14px rgba(17, 24, 39, 0.055);
}

.theme-switch {
  order: 1;
  position: relative;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-soft) 86%, transparent));
  color: color-mix(in srgb, var(--text) 72%, var(--muted) 28%);
  font-size: 12px;
  font-weight: 850;
  padding: 0 12px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 7px 16px rgba(17, 24, 39, 0.07);
  user-select: none;
}

.theme-switch-text {
  flex: 0 0 auto;
  line-height: 1;
  white-space: nowrap;
}

.theme-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-switch-track {
  flex: 0 0 auto;
  position: relative;
  width: 56px;
  height: 30px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--button-soft) 78%, transparent));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--line) 78%, transparent),
    inset 0 2px 6px rgba(17, 24, 39, 0.08);
  transition: background 180ms ease, box-shadow 180ms ease;
}

.theme-switch-thumb {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.18);
  transition: transform 180ms ease;
}

.theme-switch input:checked + .theme-switch-track {
  background:
    linear-gradient(180deg, color-mix(in srgb, #34c759 88%, #fff 12%), #2fb84f);
  box-shadow:
    inset 0 0 0 1px rgba(52, 199, 89, 0.2),
    0 0 0 4px rgba(52, 199, 89, 0.1);
}

.theme-switch input:checked + .theme-switch-track .theme-switch-thumb {
  transform: translateX(26px);
}

button,
.category-card,
.view-card,
.task-board,
.task-composer,
.clock-panel,
.settings-group,
.settings-category-row,
input,
select,
textarea {
  transition:
    background-color var(--motion-fast) var(--ease-smooth-soft),
    border-color var(--motion-fast) var(--ease-smooth-soft),
    box-shadow var(--motion-medium) var(--ease-smooth),
    transform var(--motion-medium) var(--ease-smooth),
    opacity var(--motion-fast) var(--ease-smooth-soft);
}

.settings-button:hover,
.view-card:hover,
.settings-storage-button:hover,
.settings-row-button:hover:not(:disabled),
.settings-category-drag-handle:hover:not(:disabled),
.detail-button:hover,
.task-item .detail-cancel-button:hover,
.delete-button:hover,
.restore-button:hover,
.add-to-jar-button:hover,
.add-all-to-board-button:hover,
.settlement-button:hover,
.rename-button:hover,
.reorder-handle:hover:not(:disabled),
.drag-handle:hover {
  transform: translateY(-1px);
}

.settings-button:active,
.settings-storage-button:active,
.settings-row-button:active:not(:disabled),
.settings-category-drag-handle:active:not(:disabled),
.detail-button:active,
.task-item .detail-cancel-button:active,
.delete-button:active,
.restore-button:active,
.add-to-jar-button:active,
.add-all-to-board-button:active,
.settlement-button:active,
.rename-button:active,
.reorder-handle:active:not(:disabled),
.drag-handle:active {
  transform: translateY(0) scale(0.985);
}

.category-card:hover,
.task-board:hover,
.clock-panel:hover,
.task-composer:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 82%, transparent),
    0 10px 22px rgba(22, 33, 54, 0.055),
    0 2px 8px rgba(22, 33, 54, 0.035);
}

/* styles/02-system-theme.css */
/* System-aware light/dark mode controls. */

.theme-mode-field {
  display: grid;
  grid-template-columns: minmax(86px, auto) minmax(200px, 1fr);
  align-items: center;
  gap: 12px;
}

.theme-mode-field > span {
  color: var(--muted);
}

.theme-mode-segmented {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.theme-mode-segmented button {
  min-width: 0;
  padding-inline: 10px;
}

.theme-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
}

.theme-switch-text,
.theme-switch-track {
  min-width: 0;
  min-height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  transition:
    background-color var(--motion-fast) var(--ease-smooth-soft),
    color var(--motion-fast) var(--ease-smooth-soft),
    box-shadow var(--motion-medium) var(--ease-smooth);
}

.theme-switch-track,
.theme-switch input:checked + .theme-switch-track {
  position: relative;
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
}

.theme-switch-thumb {
  display: none;
}

.theme-switch input:checked + .theme-switch-track .theme-switch-thumb {
  transform: none;
}

.theme-switch-track::after {
  content: attr(data-theme-switch-label);
  color: inherit;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: none;
}

.theme-switch-text:hover,
.theme-switch-track:hover {
  background: color-mix(in srgb, var(--button-soft) 76%, var(--surface) 24%);
}

.theme-switch[data-theme-preference="light"] .theme-switch-text:first-child,
.theme-switch[data-theme-preference="auto"] .theme-switch-track,
.theme-switch[data-theme-preference="solar"] .theme-switch-track,
.theme-switch[data-theme-preference="dark"] .theme-switch-text:last-child,
.theme-switch[data-theme-preference="auto"] input:checked + .theme-switch-track {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 24%, var(--surface) 76%), color-mix(in srgb, var(--blue) 13%, var(--surface-soft) 87%));
  color: color-mix(in srgb, #ffffff 88%, var(--text) 12%);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent),
    0 6px 14px color-mix(in srgb, var(--blue) 16%, transparent);
}

.theme-switch[data-theme-preference="auto"] .theme-switch-track::after,
.theme-switch[data-theme-preference="solar"] .theme-switch-track::after,
.theme-switch[data-theme-preference="auto"] input:checked + .theme-switch-track::after {
  color: color-mix(in srgb, #ffffff 90%, var(--blue) 10%);
}

.theme-switch[data-resolved-theme="dark"][data-theme-preference="auto"] .theme-switch-track,
.theme-switch[data-resolved-theme="dark"][data-theme-preference="solar"] .theme-switch-track,
.theme-switch[data-resolved-theme="dark"][data-theme-preference="auto"] input:checked + .theme-switch-track {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 32%, #243447 68%), color-mix(in srgb, var(--blue) 18%, #142235 82%));
}

.theme-switch {
  --theme-switch-gap: 4px;
  --theme-switch-padding: 5px;
  --theme-switch-indicator-index: var(--theme-switch-index, 0);
  position: relative;
  isolation: isolate;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--theme-switch-gap);
  padding: var(--theme-switch-padding);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.theme-switch[data-theme-dragging="true"] {
  --theme-switch-indicator-index: var(--theme-switch-preview-index, var(--theme-switch-index, 0));
  cursor: grabbing;
}

.theme-switch::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: var(--theme-switch-padding);
  top: var(--theme-switch-padding);
  bottom: var(--theme-switch-padding);
  width: calc((100% - (var(--theme-switch-padding) * 2) - (var(--theme-switch-gap) * 2)) / 3);
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line) 76%);
  border-radius: 11px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 17%, var(--surface) 83%), color-mix(in srgb, var(--blue) 10%, var(--surface-soft) 90%));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent);
  transform: translateX(calc(var(--theme-switch-indicator-index) * (100% + var(--theme-switch-gap))));
  transition:
    transform var(--motion-medium) var(--ease-smooth),
    background-color var(--motion-fast) var(--ease-smooth-soft),
    border-color var(--motion-fast) var(--ease-smooth-soft);
}

.theme-switch:focus-within::before {
  border-color: color-mix(in srgb, var(--blue) 54%, var(--line) 46%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 0 0 2px color-mix(in srgb, var(--blue) 14%, transparent);
}

.theme-switch-text,
.theme-switch-track,
.theme-switch input:checked + .theme-switch-track {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  background: transparent;
  color: color-mix(in srgb, var(--text) 84%, var(--muted) 16%);
  text-shadow: none;
  box-shadow: none;
}

.theme-switch-thumb,
.theme-switch input:checked + .theme-switch-track .theme-switch-thumb {
  display: none;
  transform: none;
}

.theme-switch-text:hover,
.theme-switch-track:hover,
.theme-switch[data-theme-dragging="true"] .theme-switch-text,
.theme-switch[data-theme-dragging="true"] .theme-switch-track {
  background: transparent;
}

.theme-switch[data-theme-preference="light"] .theme-switch-text:first-child,
.theme-switch[data-theme-preference="auto"] .theme-switch-track,
.theme-switch[data-theme-preference="solar"] .theme-switch-track,
.theme-switch[data-theme-preference="dark"] .theme-switch-text:last-child,
.theme-switch[data-theme-preference="auto"] input:checked + .theme-switch-track,
.theme-switch[data-theme-drag-choice="light"] .theme-switch-text:first-child,
.theme-switch[data-theme-drag-choice="auto"] .theme-switch-track,
.theme-switch[data-theme-drag-choice="dark"] .theme-switch-text:last-child,
.theme-switch[data-theme-drag-choice="auto"] input:checked + .theme-switch-track {
  background: transparent;
  color: color-mix(in srgb, var(--blue) 56%, var(--text) 44%);
  text-shadow: none;
  box-shadow: none;
}

.theme-switch[data-theme-preference="auto"] .theme-switch-track::after,
.theme-switch[data-theme-preference="solar"] .theme-switch-track::after,
.theme-switch[data-theme-preference="auto"] input:checked + .theme-switch-track::after,
.theme-switch[data-theme-drag-choice="auto"] .theme-switch-track::after,
.theme-switch[data-theme-drag-choice="auto"] input:checked + .theme-switch-track::after {
  color: inherit;
}

:root[data-theme="dark"] .theme-switch::before {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line) 58%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 32%, var(--surface-soft) 68%), color-mix(in srgb, var(--blue) 20%, var(--surface) 80%));
}

:root[data-theme="dark"] .theme-switch-text,
:root[data-theme="dark"] .theme-switch-track,
:root[data-theme="dark"] .theme-switch input:checked + .theme-switch-track {
  color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%);
}

:root[data-theme="dark"] .theme-switch[data-theme-preference="light"] .theme-switch-text:first-child,
:root[data-theme="dark"] .theme-switch[data-theme-preference="auto"] .theme-switch-track,
:root[data-theme="dark"] .theme-switch[data-theme-preference="solar"] .theme-switch-track,
:root[data-theme="dark"] .theme-switch[data-theme-preference="dark"] .theme-switch-text:last-child,
:root[data-theme="dark"] .theme-switch[data-theme-drag-choice="light"] .theme-switch-text:first-child,
:root[data-theme="dark"] .theme-switch[data-theme-drag-choice="auto"] .theme-switch-track,
:root[data-theme="dark"] .theme-switch[data-theme-drag-choice="dark"] .theme-switch-text:last-child {
  color: #ffffff;
}

/* styles/03-settings-panel.css */
/* Settings panel: floating menu, settings groups, toggles, and display controls. */

html.settings-modal-open,
body.settings-modal-open {
  overflow: hidden;
}

.settings-menu {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 50;
  width: min(1120px, calc(100vw - 48px));
  max-height: min(820px, calc(100vh - 48px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line) 88%);
  border-radius: 24px;
  background:
    radial-gradient(circle at 16% 0, color-mix(in srgb, var(--blue) 8%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    var(--glow-blue-soft),
    0 28px 72px rgba(17, 24, 39, 0.28),
    0 0 0 100vmax rgba(8, 12, 22, 0.42);
  backdrop-filter: blur(24px) saturate(1.16);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  opacity: 0;
  transform-origin: center center;
  transform: translate(-50%, calc(-50% - 10px)) scale(0.985);
  transition:
    opacity var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-medium) var(--ease-smooth),
    box-shadow var(--motion-medium) var(--ease-smooth);
}

.settings-menu.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

:root:not([data-theme="dark"]) .settings-menu {
  background:
    radial-gradient(circle at 16% 0, rgba(10, 132, 255, 0.08), transparent 34%),
    color-mix(in srgb, var(--surface) 92%, rgba(243, 247, 252, 0.9) 8%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    var(--glow-blue-soft),
    0 28px 54px rgba(22, 33, 54, 0.16),
    0 8px 18px rgba(22, 33, 54, 0.08),
    0 0 0 100vmax rgba(15, 23, 42, 0.24);
}

.settings-menu[hidden] {
  display: none;
}

.settings-menu-header {
  position: sticky;
  top: -18px;
  z-index: 2;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -18px -18px 0;
  padding: 18px 20px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(18px) saturate(1.08);
}

.settings-menu-header strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.1;
}

.settings-close-button {
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 74%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--button-soft) 70%, var(--surface) 30%);
  color: var(--text);
  cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent);
}

.settings-close-button::before {
  content: "\00d7";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 760;
  line-height: 1;
}

.settings-close-button:hover,
.settings-close-button:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line-soft) 66%);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface) 90%);
}

.settings-search {
  grid-column: 1 / -1;
  justify-self: start;
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  margin-top: -2px;
}

.settings-search-field {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 42px;
}

.settings-search-icon {
  position: absolute;
  left: 13px;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--muted) 68%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.settings-search-icon::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 68%, transparent);
  transform: rotate(45deg);
  transform-origin: center;
}

.settings-search-field input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 14px 0 39px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 76%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-soft) 12%);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 720;
  outline: 0;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    0 8px 18px rgba(17, 24, 39, 0.055);
  transition:
    border-color var(--motion-fast) var(--ease-smooth),
    box-shadow var(--motion-fast) var(--ease-smooth),
    background var(--motion-fast) var(--ease-smooth);
}

.settings-search-field input::placeholder {
  color: color-mix(in srgb, var(--muted) 74%, transparent);
}

.settings-search-field input:focus {
  border-color: color-mix(in srgb, var(--blue) 44%, var(--line-soft) 56%);
  background: var(--surface);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 80%, transparent),
    0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent);
}

.settings-search-clear {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 76%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--button-soft) 74%, var(--surface) 26%);
  color: var(--muted);
  cursor: pointer;
}

.settings-search-clear::before,
.settings-search-clear::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.settings-search-clear::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.settings-search-clear::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.settings-search-clear:hover,
.settings-search-clear:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line-soft) 66%);
  color: var(--text);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface) 90%);
}

.settings-search-status {
  min-width: 64px;
  color: color-mix(in srgb, var(--muted) 84%, transparent);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.2;
  white-space: nowrap;
}

.settings-search-empty {
  grid-column: 1 / -1;
  width: min(100%, 520px);
  display: grid;
  gap: 3px;
  justify-self: start;
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--line-soft) 86%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
}

.settings-search-empty[hidden] {
  display: none;
}

.settings-search-empty strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 860;
  line-height: 1.25;
}

.settings-search-empty span {
  color: color-mix(in srgb, var(--muted) 86%, transparent);
  font-size: 12px;
  font-weight: 680;
  line-height: 1.35;
}

.settings-group {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 86%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 84%, var(--surface) 16%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 68%, transparent);
}

.settings-group[hidden] {
  display: none;
}

.settings-group[data-settings-group="calendar"] {
  grid-column: 1 / -1;
}

.settings-group[data-settings-group="data"],
.settings-group[data-settings-group="about"] {
  align-self: start;
}

:root:not([data-theme="dark"]) .settings-group {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface) 92%, rgba(247, 249, 253, 0.96) 8%),
    color-mix(in srgb, var(--surface-soft) 88%, rgba(242, 246, 252, 0.92) 12%)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 18px rgba(22, 33, 54, 0.05);
}

.settings-group h2 {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.settings-group-description {
  grid-column: 1 / -1;
  margin: -2px 0 4px;
  color: color-mix(in srgb, var(--muted) 86%, transparent);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.45;
}

.settings-menu input[type="range"] {
  --range-accent: var(--blue);
  appearance: none;
  min-height: 34px;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.settings-menu input[type="range"]:focus,
.settings-menu input[type="range"]:focus-visible {
  outline: 0;
  box-shadow: none;
}

#fontSizeControl {
  --range-accent: var(--blue);
}

#displayScaleControl {
  --range-accent: color-mix(in srgb, var(--text) 18%, var(--blue) 82%);
}

#scaleControl {
  --range-accent: #34c759;
}

.settings-menu input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--range-accent) 24%, var(--surface) 76%), color-mix(in srgb, var(--range-accent) 10%, var(--button-soft) 90%)),
    color-mix(in srgb, var(--button-soft) 72%, var(--surface) 28%);
  box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.08);
}

.settings-menu input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  border: 4px solid color-mix(in srgb, var(--surface) 92%, white 8%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.86), transparent 34%),
    color-mix(in srgb, var(--range-accent) 82%, var(--text) 18%);
  box-shadow: 0 7px 14px rgba(17, 24, 39, 0.14);
}

.settings-menu input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 10px 20px rgba(17, 24, 39, 0.18);
}

.settings-menu input[type="range"]::-moz-range-track {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--range-accent) 13%, var(--button-soft) 87%);
  box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.08);
}

.settings-menu input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: color-mix(in srgb, var(--range-accent) 82%, var(--text) 18%);
  box-shadow: 0 7px 14px rgba(17, 24, 39, 0.14);
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 74%, transparent);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--text);
  font-size: 14px;
  font-weight: 820;
}

.toggle-row input {
  appearance: none;
  position: relative;
  width: 52px;
  min-width: 52px;
  min-height: 30px;
  height: 30px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--button-soft) 74%, var(--surface) 26%);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background 180ms ease, box-shadow 180ms ease;
  cursor: pointer;
}

.toggle-row input::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.18);
  transition: transform 180ms ease;
}

.toggle-row input:checked {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 86%, white 14%), var(--blue));
  box-shadow:
    inset 0 0 0 1px rgba(10, 132, 255, 0.24),
    0 0 0 4px rgba(10, 132, 255, 0.08),
    0 8px 18px rgba(10, 132, 255, 0.16);
}

.toggle-row input:checked::before {
  transform: translateX(22px);
}

.auto-simple-mode-toggle-row > span:first-child {
  display: grid;
  gap: 2px;
}

.auto-simple-mode-toggle-row strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.auto-simple-mode-toggle-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

#fontSizeLabel {
  justify-self: end;
  color: var(--muted);
  font-size: 13px;
  font-weight: 820;
  margin-top: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--button-soft) 64%, var(--surface) 36%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-soft) 74%, transparent);
}

#scaleLabel {
  justify-self: end;
  color: var(--muted);
  font-size: 13px;
  font-weight: 820;
  margin-top: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--button-soft) 64%, var(--surface) 36%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-soft) 74%, transparent);
}

.appearance-field {
  gap: 8px;
}

.language-field {
  display: grid;
  grid-template-columns: minmax(86px, auto) minmax(160px, 1fr);
  align-items: center;
  gap: 12px;
}

.language-field > span {
  color: var(--muted);
}

.language-segmented {
  min-width: 0;
}

.appearance-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  min-height: 42px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 76%, transparent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent);
}

#appearanceThemeControl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.appearance-segmented button {
  min-width: 0;
  min-height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 880;
}

.appearance-segmented button:hover {
  background: color-mix(in srgb, var(--button-soft) 76%, var(--surface) 24%);
}

.appearance-segmented button.is-active {
  background: color-mix(in srgb, var(--blue) 16%, var(--surface) 84%);
  color: color-mix(in srgb, var(--blue) 74%, var(--text) 26%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 6px 14px color-mix(in srgb, var(--blue) 10%, transparent);
}

@media (max-width: 720px) {
  .settings-menu {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .settings-menu-header {
    top: -12px;
    margin: -12px -12px 0;
    padding: 15px 14px 12px;
  }

  .settings-search {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .settings-search-status {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .settings-search-empty {
    width: 100%;
  }
}

/* styles/04-sidebar-clock.css */
/* Sidebar header, section framing, clock card, focus progress, and focus popover. */

.brand p,
.eyebrow {
  color: var(--muted);
  font-size: var(--font-size);
  font-weight: 800;
}

.brand {
  position: relative;
  min-height: 112px;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 6px;
  padding-left: 0;
}

.brand::before {
  content: none;
}

.brand p {
  display: none;
}

.brand-logo {
  display: block;
  width: min(312px, 100%);
  height: auto;
  max-height: 108px;
  object-fit: contain;
  object-position: left center;
}

:root[data-theme="dark"] .brand-logo {
  filter: invert(1);
}

.sidebar-section {
  min-height: 0;
  display: grid;
  gap: 8px;
}

.category-section {
  flex: 0 1 auto;
}

.view-section {
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--line-soft) 86%, transparent);
}

.sidebar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.clock-panel {
  position: relative;
  z-index: 12;
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 62px;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 86%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-soft) 8%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    var(--shadow-panel);
}

.clock-panel.inbox-entry-panel {
  min-height: 136px;
  padding: 14px;
}

.clock-panel.is-focus-open {
  z-index: 150;
}

.clock-button {
  display: grid;
  gap: 2px;
  min-height: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: inherit;
  cursor: default;
  padding: 2px 4px;
  text-align: left;
}

.inbox-button {
  position: relative;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "icon copy badge";
  align-items: center;
  column-gap: 14px;
  width: 100%;
  min-height: 108px;
  padding: 16px 14px 18px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 70%, var(--button-soft) 30%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 82%, transparent);
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.inbox-button::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 7px;
  left: 14px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--blue) 58%, var(--accent) 42%),
    color-mix(in srgb, var(--blue) 18%, transparent)
  );
  opacity: 0.52;
  transform: scaleX(0.58);
  transform-origin: left center;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.inbox-button:hover {
  background: color-mix(in srgb, var(--surface) 58%, var(--button-soft) 42%);
}

.inbox-button.has-pending::after,
.inbox-button:hover::after,
.clock-panel.is-inbox-active .inbox-button::after {
  opacity: 0.9;
  transform: scaleX(1);
}

.inbox-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 22%, transparent);
  outline-offset: 3px;
}

.inbox-icon {
  grid-area: icon;
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  color: color-mix(in srgb, var(--blue) 74%, var(--text) 26%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 18%, transparent), transparent),
    color-mix(in srgb, var(--button-soft) 84%, var(--surface) 16%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 8px 16px color-mix(in srgb, var(--blue) 10%, transparent);
  overflow: hidden;
}

.inbox-icon::before,
.inbox-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  box-sizing: border-box;
  z-index: 1;
}

.inbox-icon::before {
  inset: 14px 9px 9px;
  left: 9px;
  width: auto;
  height: auto;
  background: currentColor;
  transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16 10.5 7.5h19L33 16v10.5A4.5 4.5 0 0 1 28.5 31h-17A4.5 4.5 0 0 1 7 26.5V16Z'/%3E%3Cpath d='M7.5 16h8.2l2.2 4.1h4.2l2.2-4.1h8.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16 10.5 7.5h19L33 16v10.5A4.5 4.5 0 0 1 28.5 31h-17A4.5 4.5 0 0 1 7 26.5V16Z'/%3E%3Cpath d='M7.5 16h8.2l2.2 4.1h4.2l2.2-4.1h8.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.inbox-icon::after {
  top: 11px;
  width: 22px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 4px;
  background:
    linear-gradient(145deg, transparent 48%, currentColor 50%, transparent 53%),
    linear-gradient(35deg, transparent 48%, currentColor 50%, transparent 53%);
  opacity: 0.72;
  transform: translateX(-50%) rotate(-7deg);
}

.inbox-copy {
  grid-area: copy;
  display: grid;
  min-width: 0;
  gap: 5px;
}

.inbox-title {
  min-width: 0;
  overflow: hidden;
  font-size: calc(var(--font-size) * 1.5);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-subtitle {
  min-width: 0;
  overflow: hidden;
  font-size: calc(var(--font-size) * 0.86);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-entry-badge {
  grid-area: badge;
  align-self: start;
  justify-self: end;
  max-width: 82px;
  min-height: 24px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line-soft) 76%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface) 90%);
  color: color-mix(in srgb, var(--blue) 68%, var(--text) 32%);
  font-size: calc(var(--font-size) * 0.68);
  font-weight: 920;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-entry-badge[hidden] {
  display: none;
}

.clock-panel.is-focus-open .clock-button:hover {
  background: color-mix(in srgb, var(--button-soft) 62%, transparent);
}

.clock-panel.is-focus-open .clock-button:active {
  transform: scale(0.992);
}

.clock {
  display: inline-grid;
  place-items: start;
  min-height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: calc(var(--font-size) * 2.05);
  font-weight: 950;
  letter-spacing: 0;
  padding: 0;
}

.date-line {
  color: var(--muted);
  font-size: calc(var(--font-size) * 0.78);
  font-weight: 820;
  padding-left: 1px;
  padding-bottom: 0;
  white-space: nowrap;
}

.clock-signature {
  min-width: 0;
  margin: -1px 4px 0;
  color: color-mix(in srgb, var(--muted) 82%, var(--text) 18%);
  font-size: calc(var(--font-size) * 0.72);
  font-weight: 760;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clock-signature[hidden] {
  display: none;
}

.focus-progress {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(82px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line-soft) 82%);
  border-radius: 16px;
  background:
    color-mix(in srgb, var(--surface) 90%, var(--surface-soft) 10%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    var(--shadow-card);
}

.focus-progress-meta {
  display: grid;
  gap: 0;
}

.focus-progress-meta strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.focus-progress-meta span {
  max-width: 220px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-progress-track {
  display: block;
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-soft) 72%, transparent);
  box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.08);
}

.focus-progress-track span {
  --focus-progress: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #34c759, #0a84ff);
  transform: scaleX(var(--focus-progress));
  transform-origin: left center;
  transition: transform 420ms var(--ease-smooth);
}

.focus-progress-actions {
  display: inline-grid;
  grid-template-columns: 1fr;
}

.focus-progress-actions button {
  position: relative;
  min-height: 32px;
  min-width: 36px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--button-soft) 78%, var(--surface) 22%);
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  padding: 0 10px;
}

.focus-progress-actions button::before,
.focus-progress-actions button::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.focus-progress-actions button[data-icon="pause"]::before,
.focus-progress-actions button[data-icon="pause"]::after {
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background: currentColor;
}

.focus-progress-actions button[data-icon="pause"]::before {
  left: calc(50% - 6px);
}

.focus-progress-actions button[data-icon="pause"]::after {
  left: calc(50% + 2px);
}

.focus-progress-actions button[data-icon="play"]::before {
  left: 50%;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid currentColor;
  transform: translate(-38%, -50%);
}

.focus-progress-actions button[data-icon="play"]::after {
  content: none;
}

.focus-progress-actions button:not(:disabled):hover {
  transform: translateY(-1px);
}

.focus-progress-actions button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.clock-panel.is-focus-paused .focus-progress {
  border-color: color-mix(in srgb, #f59e0b 24%, var(--line-soft) 76%);
  background:
    radial-gradient(circle at left center, color-mix(in srgb, #f59e0b 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 91%, var(--surface-soft) 9%);
}

.clock-panel.is-focus-complete .focus-progress {
  border-color: color-mix(in srgb, #34c759 26%, var(--line-soft) 74%);
  background:
    radial-gradient(circle at left center, color-mix(in srgb, #34c759 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 91%, var(--surface-soft) 9%);
}

.clock-panel.is-focus-complete .focus-progress-meta {
  grid-column: 1 / span 2;
}

.clock-panel.is-focus-complete .focus-progress-meta strong {
  font-size: 14px;
  line-height: 1.2;
  white-space: normal;
}

.clock-panel.is-focus-complete .focus-progress-track {
  display: none;
}

.focus-progress[hidden],
.focus-popover[hidden] {
  display: none;
}

.focus-popover {
  position: fixed;
  left: var(--focus-popover-left, 16px);
  top: var(--focus-popover-top, 16px);
  z-index: 180;
  display: grid;
  gap: 10px;
  width: 292px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 78%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 20px 42px rgba(17, 24, 39, 0.16);
  backdrop-filter: blur(18px);
  animation: settingsPanelIn 180ms var(--ease-smooth);
}

.focus-popover.is-floating-focus {
  z-index: 180;
}

.focus-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.focus-field > span:first-child {
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.focus-field input,
.focus-field select {
  min-height: 38px;
  border-radius: 12px;
  font-size: 16px;
  text-align: center;
  padding: 0 8px;
}

.focus-field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line-soft) 82%);
  appearance: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  text-align: left;
  padding: 0 38px 0 12px;
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--blue) 12%, transparent), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, var(--blue) 8%), var(--surface));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 10px 22px color-mix(in srgb, var(--blue) 8%, transparent);
}

.focus-field select:focus {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line-soft) 58%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent),
    0 12px 24px color-mix(in srgb, var(--blue) 10%, transparent);
}

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

.focus-task-picker-button {
  position: relative;
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line-soft) 78%);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--blue) 12%, transparent), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, var(--blue) 10%), var(--surface));
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
  text-align: left;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 10px 22px color-mix(in srgb, var(--blue) 9%, transparent);
}

.focus-task-picker-button span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-task-picker-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.focus-task-picker-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--blue) 44%, var(--line-soft) 56%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 0 0 4px color-mix(in srgb, var(--blue) 13%, transparent),
    0 14px 28px color-mix(in srgb, var(--blue) 12%, transparent);
}

.focus-task-picker-chevron {
  width: 9px;
  height: 9px;
  justify-self: end;
  border-right: 2px solid color-mix(in srgb, var(--blue) 66%, var(--muted) 34%);
  border-bottom: 2px solid color-mix(in srgb, var(--blue) 66%, var(--muted) 34%);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--motion-medium) var(--ease-smooth);
}

.focus-task-picker-button[aria-expanded="true"] .focus-task-picker-chevron {
  transform: translateY(2px) rotate(225deg);
}

.focus-task-picker-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 190;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line-soft) 80%);
  border-radius: 16px;
  background:
    radial-gradient(circle at 16% 0, color-mix(in srgb, var(--blue) 12%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface) 96%, var(--surface-soft) 4%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 18px 38px rgba(17, 24, 39, 0.2);
  backdrop-filter: blur(18px);
  animation: settingsPanelIn 160ms var(--ease-smooth);
}

.focus-task-picker-menu[hidden] {
  display: none;
}

.focus-task-picker-option {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.focus-task-picker-option:hover,
.focus-task-picker-option.is-selected {
  background: color-mix(in srgb, var(--blue) 15%, var(--surface) 85%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent);
}

.focus-task-picker-option strong {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--blue) 14%, var(--button-soft) 86%);
  color: color-mix(in srgb, var(--blue) 72%, var(--text) 28%);
  font-size: 13px;
  font-weight: 950;
}

.focus-task-picker-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 900;
}

.focus-task-picker-option small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.focus-mode-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line-soft) 84%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
}

.focus-mode-control button {
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
}

.focus-mode-control button.is-active {
  background: color-mix(in srgb, var(--blue) 18%, var(--surface) 82%);
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent),
    0 8px 18px color-mix(in srgb, var(--blue) 10%, transparent);
}

.focus-duration-field.is-disabled {
  opacity: 0.48;
}

.focus-duration-field.is-disabled input {
  cursor: not-allowed;
}

.duration-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.duration-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 82%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
}

.duration-unit input {
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 950;
}

.focus-field small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.focus-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.focus-actions button {
  min-height: 36px;
  border: 0;
  border-radius: 12px;
  background: var(--button-soft);
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.focus-actions button:first-child {
  background: #111827;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 18px rgba(17, 24, 39, 0.14);
}

/* styles/05-sidebar-navigation.css */
/* Sidebar navigation: category cards, view cards, rename row, and save feedback. */

.category-list {
  display: grid;
  gap: 8px;
  align-content: start;
  overflow: auto;
  padding: 2px 0 4px;
  min-height: 0;
}

.category-section {
  flex: 1 1 auto;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.view-section {
  flex: 0 0 auto;
  margin-top: auto;
}

.sidebar-actions {
  margin-top: 0;
}

.category-card {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  padding: 0 12px;
  text-align: left;
  box-shadow: none;
}

.category-card.is-active {
  border-color: color-mix(in srgb, var(--blue) 18%, transparent);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface) 90%);
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 90%, transparent),
    0 6px 14px rgba(22, 33, 54, 0.04);
}

.view-list {
  display: grid;
  gap: 8px;
}

.view-card {
  --view-icon-fill: color-mix(in srgb, var(--surface) 92%, transparent);
  --view-icon-border: color-mix(in srgb, var(--muted) 68%, transparent);
  --view-icon-stroke: color-mix(in srgb, var(--muted) 84%, var(--text) 16%);
  --view-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 10h18'/%3E%3C/svg%3E");
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  padding: 0 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 880;
}

.view-card[data-view="archive"] {
  --view-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16v13H4z'/%3E%3Cpath d='M3 4h18v3H3zM9 11h6'/%3E%3C/svg%3E");
}

.view-card[data-view="calendar"] {
  --view-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M8 14h3M13 14h3M8 17h3'/%3E%3C/svg%3E");
}

.view-card[data-view="projectTree"] {
  --view-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='18' cy='7' r='3'/%3E%3Ccircle cx='13' cy='18' r='3'/%3E%3Cpath d='M8.8 6.2 15.2 6.8M7.6 8.5 11.4 15.5M17 9.8 14.2 15.4'/%3E%3C/svg%3E");
}

.view-card[data-view="countdays"] {
  --view-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10M7 21h10M8 3v5c0 2.2 1.5 3.4 4 4 2.5.6 4 1.8 4 4v5M16 3v5c0 2.2-1.5 3.4-4 4-2.5.6-4 1.8-4 4v5'/%3E%3Cpath d='M9.5 18h5'/%3E%3C/svg%3E");
}

.view-card[data-view="favor"] {
  --view-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
}

.view-card::before {
  content: "";
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  color: var(--view-icon-stroke);
  background: currentColor !important;
  opacity: 0.74;
  -webkit-mask: var(--view-icon-mask) center / contain no-repeat;
  mask: var(--view-icon-mask) center / contain no-repeat;
}

.view-card.is-active {
  border-color: color-mix(in srgb, var(--blue) 16%, transparent);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface) 90%);
  color: color-mix(in srgb, var(--blue) 76%, var(--text) 24%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 88%, transparent),
    0 6px 14px rgba(22, 33, 54, 0.04);
}

.view-card.is-active::before {
  --view-icon-fill: color-mix(in srgb, currentColor 8%, var(--surface) 92%);
  color: currentColor;
  opacity: 0.95;
}

.view-card small {
  display: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.category-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--category-color, var(--blue));
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--category-color, var(--blue)) 8%, transparent);
}

.category-card-text {
  min-width: 0;
  display: contents;
}

.category-card-text strong {
  min-width: 0;
  overflow-wrap: anywhere;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 900;
}

.category-card-text small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  justify-self: end;
}

.rename-row {
  display: grid;
  gap: 9px;
}

.rename-button {
  min-height: 46px;
  border: 0;
  border-radius: 15px;
  background: color-mix(in srgb, var(--blue) 16%, var(--surface) 84%);
  color: color-mix(in srgb, var(--blue) 72%, var(--text) 28%);
  font-size: 16px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent);
}

.save-feedback {
  min-height: 18px;
  color: #15803d;
  font-size: 13px;
  font-weight: 900;
  margin-top: -2px;
}

/* styles/05-hidden-features.css */
/* Hidden feature gates that should apply before JavaScript finishes loading. */

:root:not([data-favor-view-unlocked="true"]) #viewList [data-view="favor"],
:root:not([data-favor-view-unlocked="true"]) #settingsViewList [data-settings-view="favor"] {
  display: none !important;
}

.developer-options-group {
  gap: 12px;
}

.developer-options-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px 12px;
  padding: 14px;
  border: 1px solid var(--settings-center-line, var(--line-soft));
  border-radius: 14px;
  background: var(--settings-center-panel, var(--surface));
  color: var(--text);
}

.developer-options-card[data-settings-icon]::before {
  content: "";
  width: 18px;
  height: 18px;
  justify-self: center;
  margin-top: 2px;
  background: currentColor;
  color: color-mix(in srgb, var(--settings-center-accent, var(--blue)) 58%, var(--settings-center-muted, var(--muted)) 42%);
  -webkit-mask: var(--settings-icon-mask) center / contain no-repeat;
  mask: var(--settings-icon-mask) center / contain no-repeat;
}

.developer-options-copy,
.developer-options-card-header {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.developer-options-card-header {
  grid-column: 2;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.developer-options-copy strong {
  font-size: 14px;
  font-weight: 820;
}

.developer-options-copy span,
.developer-options-copy small,
.developer-options-feedback,
.developer-options-empty,
.developer-options-hidden-row small {
  color: var(--settings-center-muted, var(--muted));
  font-size: 12px;
  font-weight: 640;
  line-height: 1.4;
}

.developer-options-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.developer-options-actions input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--settings-center-line, var(--line-soft));
  border-radius: 12px;
  padding: 0 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 650;
}

.developer-options-feedback {
  grid-column: 2;
  min-height: 16px;
}

.developer-options-feedback[data-tone="success"] {
  color: color-mix(in srgb, #34c759 76%, var(--text) 24%);
}

.developer-options-feedback[data-tone="error"] {
  color: color-mix(in srgb, #ff453a 78%, var(--text) 22%);
}

.developer-options-hidden-list {
  grid-column: 2;
  display: grid;
  gap: 8px;
}

.developer-options-hidden-item {
  display: grid;
  gap: 8px;
}

.developer-options-hidden-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--category-color) 18%, var(--settings-center-line, var(--line-soft)) 82%);
  border-radius: 11px;
  background: color-mix(in srgb, var(--category-color) 8%, transparent);
}

.developer-options-hidden-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 780;
}

.developer-options-hidden-delete {
  min-height: 30px;
}

.developer-options-hidden-item .settings-inline-panel {
  margin-top: 0;
}

.settings-hidden-category-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--category-color) 14%, transparent);
  color: color-mix(in srgb, var(--category-color) 74%, var(--text) 26%);
  font-size: 10px;
  font-weight: 800;
}

/* styles/06-settings-categories.css */
/* Settings category management, version popover, color palettes, and reorder previews. */

.settings-category-list {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
}

.settings-view-list {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
}

.settings-category-group {
  padding: 14px;
}

.settings-category-dropdown {
  display: grid;
  gap: 8px;
}

.settings-category-summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 42px 11px 13px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line-soft) 82%);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--blue) 11%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--blue) 6%), var(--surface));
  color: var(--text);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 10px 24px color-mix(in srgb, var(--blue) 8%, transparent);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

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

.settings-category-summary::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid color-mix(in srgb, var(--blue) 62%, var(--muted) 38%);
  border-bottom: 2px solid color-mix(in srgb, var(--blue) 62%, var(--muted) 38%);
  transform: translateY(-62%) rotate(45deg);
  transition: transform var(--motion-medium) var(--ease-smooth);
}

.settings-category-dropdown[open] .settings-category-summary::after {
  transform: translateY(-38%) rotate(225deg);
}

.settings-category-summary span {
  min-width: 0;
  font-size: 14px;
  font-weight: 950;
}

.settings-category-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.settings-category-dropdown-body {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 80%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface) 24%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent);
  animation: settingsPanelIn 170ms var(--ease-smooth);
}

.settings-category-dropdown:not(.settings-category-panel):not([open]) .settings-category-dropdown-body {
  display: none;
}

.settings-category-panel .settings-category-summary {
  cursor: default;
  padding-right: 13px;
}

.settings-category-panel .settings-category-summary::after {
  display: none;
}

.settings-category-panel .settings-category-dropdown-body {
  display: grid;
}

.settings-all-tasks-row {
  --all-tasks-color: #0A84FF;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 11px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent);
}

.settings-all-tasks-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--all-tasks-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--all-tasks-color) 14%, transparent);
}

.settings-all-tasks-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.settings-all-tasks-copy strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 920;
}

.settings-all-tasks-copy span,
.settings-calendar-visibility-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.4;
}

.settings-all-tasks-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 860;
  white-space: nowrap;
}

.settings-all-tasks-toggle input {
  appearance: none;
  position: relative;
  width: 48px;
  min-width: 48px;
  height: 28px;
  min-height: 28px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--line-soft) 74%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--settings-center-muted, var(--muted)) 15%, var(--settings-center-soft, var(--button-soft)) 85%);
  box-shadow: inset 0 0 0 1px var(--settings-center-line-strong, var(--line-soft));
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--ease-smooth-soft),
    border-color var(--motion-fast) var(--ease-smooth-soft);
}

.settings-all-tasks-toggle input::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 90%, white 10%);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16);
  transform: translateY(-50%);
  transition: transform var(--motion-fast) var(--ease-smooth-soft);
}

.settings-all-tasks-toggle input:checked {
  border-color: color-mix(in srgb, var(--all-tasks-color) 58%, var(--settings-center-line, var(--line-soft)) 42%);
  background: color-mix(in srgb, var(--all-tasks-color) 76%, var(--settings-center-soft, var(--button-soft)) 24%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--all-tasks-color) 42%, transparent);
}

.settings-all-tasks-toggle input:checked::before {
  transform: translate(20px, -50%);
}

.settings-all-tasks-color-panel {
  margin-top: -2px;
}

.settings-all-tasks-color-panel[hidden] {
  display: none;
}

.settings-calendar-visibility-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 68%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface) 28%);
}

.settings-group .mini-field {
  gap: 7px;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 74%, transparent);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--text);
}

.settings-group .mini-field > span {
  font-size: 13px;
  font-weight: 820;
}

.settings-group .mini-field.settings-range-row {
  display: grid;
  grid-template-columns: minmax(86px, auto) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
}

.settings-group .mini-field.settings-range-row > span {
  white-space: nowrap;
}

.settings-group .mini-field.settings-range-row input[type="range"] {
  width: 100%;
  margin: 0;
}

.settings-range-value {
  justify-self: end;
}

.clock-signature-field {
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.clock-signature-field > span {
  color: var(--muted);
}

.clock-signature-field input {
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line-soft) 64%, transparent);
  border-radius: 10px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surface) 82%, var(--button-soft) 18%);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 760;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent);
}

.clock-signature-field input:focus {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line-soft) 58%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}

.settings-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-info-row strong {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
}

.settings-storage-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.settings-storage-button {
  min-height: 38px;
  border: 0;
  border-radius: 11px;
  background: var(--button-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  padding: 0 12px;
}

.settings-storage-button.is-primary {
  grid-column: auto;
  background: color-mix(in srgb, var(--blue) 14%, var(--surface) 86%);
  color: color-mix(in srgb, var(--blue) 74%, var(--text) 26%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    0 10px 20px color-mix(in srgb, var(--blue) 10%, transparent);
}

.settings-storage-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.settings-storage-feedback {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.settings-storage-feedback[data-tone="success"] {
  color: color-mix(in srgb, #34c759 74%, var(--text) 26%);
}

.settings-storage-feedback[data-tone="error"] {
  color: color-mix(in srgb, #ff453a 78%, var(--text) 22%);
}

.version-trigger {
  position: relative;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  background: color-mix(in srgb, var(--button-soft) 76%, var(--surface) 24%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent);
}

.version-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 44%, transparent);
  outline-offset: 2px;
}

.version-menu {
  position: fixed;
  left: var(--version-menu-left, 14px);
  top: var(--version-menu-top, 14px);
  z-index: 72;
  display: grid;
  gap: 4px;
  width: var(--version-menu-width, min(238px, calc(100vw - 28px)));
  max-width: calc(100vw - 28px);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 84%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 16px 36px rgba(17, 24, 39, 0.12);
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  transform-origin: top left;
  transition:
    opacity var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-medium) var(--ease-smooth);
}

.version-menu[hidden] {
  display: none;
}

.version-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.version-menu strong {
  font-size: 14px;
}

.version-menu span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.version-toast {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 7;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 16%, var(--surface) 84%);
  color: color-mix(in srgb, var(--blue) 74%, var(--text) 26%);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition:
    opacity var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-medium) var(--ease-smooth);
}

.version-toast[hidden] {
  display: none;
}

.version-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.compact-color {
  grid-column: 1 / -1;
}

.settings-color-palette,
.task-color-dropdown {
  display: grid;
  gap: 8px;
}

.settings-color-palette { grid-template-columns: repeat(auto-fill, 28px); justify-content: start; align-items: center; }

.task-color-dropdown {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.color-swatch {
  width: 100%;
  min-height: 28px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 11px;
  background: var(--swatch-color);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(17, 24, 39, 0.08);
}

.settings-color-palette .color-swatch { width: 28px; min-height: 28px; border-radius: 9px; }

.color-swatch.is-selected {
  outline: 2px solid color-mix(in srgb, var(--text) 28%, transparent);
  outline-offset: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 0 0 4px color-mix(in srgb, var(--swatch-color) 15%, transparent),
    0 10px 20px color-mix(in srgb, var(--swatch-color) 18%, transparent);
}

.settings-category-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 11px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent);
  will-change: transform;
}

.settings-category-row.is-editor-open {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 0 0 1px color-mix(in srgb, var(--category-color) 18%, transparent),
    0 10px 24px rgba(17, 24, 39, 0.08);
}

.settings-category-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.settings-category-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.settings-row-button {
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: var(--button-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  padding: 0 10px;
}

.settings-delete-button {
  background: color-mix(in srgb, #ff3b30 11%, var(--button-soft) 89%);
  color: color-mix(in srgb, #ff3b30 72%, var(--text) 28%);
}

.settings-calendar-visibility-button {
  min-width: 62px;
  background: color-mix(in srgb, #0a84ff 10%, var(--button-soft) 90%);
  color: color-mix(in srgb, #0a84ff 70%, var(--text) 30%);
}

.settings-calendar-visibility-button.is-hidden-from-calendar {
  background: color-mix(in srgb, var(--muted) 18%, var(--button-soft) 82%);
  color: color-mix(in srgb, var(--muted) 72%, var(--text) 28%);
}

.settings-color-button {
  width: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.settings-color-button span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--swatch-color);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(17, 24, 39, 0.12);
}

.settings-inline-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  margin-top: 2px;
  padding: 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 84%, var(--surface) 16%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 8px 18px rgba(17, 24, 39, 0.06);
  animation: settingsPanelIn 180ms cubic-bezier(.22, 1, .36, 1);
}

.settings-inline-panel[data-mode="rename"] {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.settings-inline-panel[data-mode="color"] { width: min(318px, 100%); justify-self: end; padding: 9px; }
.settings-inline-panel[data-mode="color"] .settings-color-palette { grid-template-columns: repeat(8, 28px); width: max-content; max-width: 100%; }

.settings-inline-panel[data-mode="delete"] {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid color-mix(in srgb, #ff3b30 18%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, #ff3b30 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-soft) 86%, var(--surface) 14%);
}

.settings-delete-title {
  font-size: 14px;
  font-weight: 900;
  color: color-mix(in srgb, #ff3b30 66%, var(--text) 34%);
}

.settings-delete-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.35;
}

.settings-delete-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.settings-delete-cancel,
.settings-delete-confirm {
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
  padding: 0 11px;
}

.settings-delete-cancel {
  background: var(--button-soft);
  color: var(--text);
}

.settings-delete-confirm {
  min-width: 72px;
  background: color-mix(in srgb, #ff3b30 18%, var(--surface) 82%);
  color: color-mix(in srgb, #ff3b30 76%, var(--text) 24%);
}

.settings-delete-confirm:disabled {
  opacity: 0.58;
  color: var(--muted);
}

.settings-inline-field {
  display: grid;
  gap: 6px;
}

.settings-inline-field span,
.settings-inline-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.settings-inline-input {
  min-height: 38px;
  font-size: 15px;
}

.settings-inline-save {
  min-height: 38px;
  border: 0;
  border-radius: 11px;
  background: color-mix(in srgb, var(--blue) 16%, var(--surface) 84%);
  color: color-mix(in srgb, var(--blue) 72%, var(--text) 28%);
  font-size: 14px;
  font-weight: 900;
  padding: 0 12px;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.07), 0 8px 18px rgba(10, 132, 255, 0.1);
}

.settings-category-add {
  display: grid;
  gap: 9px;
}

.settings-add-category-button {
  min-height: 38px;
  border: 1px dashed color-mix(in srgb, var(--blue) 34%, var(--line) 66%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface) 92%);
  color: color-mix(in srgb, var(--blue) 72%, var(--text) 28%);
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.07), 0 8px 18px rgba(10, 132, 255, 0.08);
}

.settings-add-category-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
}

.settings-add-category-button:active {
  transform: translateY(0) scale(0.985);
}

.settings-add-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  padding: 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 84%, var(--surface) 16%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 8px 18px rgba(17, 24, 39, 0.06);
  animation: settingsPanelIn 180ms cubic-bezier(.22, 1, .36, 1);
}

.settings-add-input {
  min-height: 38px;
  font-size: 15px;
}

.settings-add-save {
  align-self: end;
  min-height: 38px;
  border: 0;
  border-radius: 11px;
  background: color-mix(in srgb, var(--blue) 16%, var(--surface) 84%);
  color: color-mix(in srgb, var(--blue) 72%, var(--text) 28%);
  font-size: 14px;
  font-weight: 900;
  padding: 0 12px;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.07), 0 8px 18px rgba(10, 132, 255, 0.1);
}

.settings-add-color-palette { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, 32px); justify-content: start; gap: 7px; }

.settings-add-color-palette .color-swatch { width: 32px; min-height: 32px; border-radius: 9px; }

@media (max-width: 720px) {
  .settings-storage-actions {
    grid-template-columns: 1fr;
  }

  .settings-all-tasks-row {
    grid-template-columns: 18px minmax(0, 1fr) auto;
  }

  .settings-all-tasks-toggle {
    grid-column: 2;
    justify-self: start;
  }

  .settings-all-tasks-color-button {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .settings-group .mini-field.settings-range-row {
    grid-template-columns: 1fr;
  }

  .settings-inline-panel[data-mode="color"] { width: 100%; justify-self: stretch; }
  .settings-inline-panel[data-mode="color"] .settings-color-palette { grid-template-columns: repeat(auto-fill, 28px); width: auto; }
}

/* styles/06-settings-completion-mode.css */
/* Completion mode settings controls. */

.completion-mode-field {
  position: relative;
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(156px, auto);
  align-items: center;
  gap: 12px;
  min-height: 52px;
}

.completion-mode-field > span {
  color: var(--muted);
}

.completion-mode-picker {
  position: relative;
  min-width: 142px;
  display: block;
}

.completion-mode-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-width: min(100%, 248px);
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--button-soft) 64%, var(--surface) 36%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent);
}

.completion-mode-segmented [data-completion-mode-option] {
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  padding: 7px 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 880;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}

.completion-mode-segmented [data-completion-mode-option]:hover,
.completion-mode-segmented [data-completion-mode-option]:focus-visible {
  outline: 0;
  color: var(--text);
  background: color-mix(in srgb, var(--blue) 9%, var(--surface) 91%);
}

.completion-mode-segmented [data-completion-mode-option].is-selected {
  color: color-mix(in srgb, var(--blue) 72%, var(--text) 28%);
  background: color-mix(in srgb, var(--blue) 15%, var(--surface) 85%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent);
}

.completion-mode-button {
  width: 100%;
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 11px 0 12px;
  background: color-mix(in srgb, var(--button-soft) 70%, var(--surface) 30%);
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent);
}

.completion-mode-button:hover,
.completion-mode-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line-soft) 58%);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface) 90%);
}

.completion-mode-button:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line-soft) 58%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}

.completion-mode-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid color-mix(in srgb, var(--muted) 80%, var(--text) 20%);
  border-bottom: 2px solid color-mix(in srgb, var(--muted) 80%, var(--text) 20%);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--motion-fast) var(--ease-smooth-soft);
}

.completion-mode-button[aria-expanded="true"] .completion-mode-chevron {
  transform: translateY(2px) rotate(225deg);
}

.completion-mode-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 48;
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line-soft) 80%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 14px 30px rgba(17, 24, 39, 0.15);
  animation: settingsPanelIn 140ms var(--ease-smooth);
}

.completion-mode-menu[hidden] {
  display: none;
}

.completion-mode-menu button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  padding: 0 10px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 880;
  text-align: left;
  cursor: pointer;
}

.completion-mode-menu button:hover,
.completion-mode-menu button:focus-visible,
.completion-mode-menu button.is-selected {
  outline: 0;
  background: color-mix(in srgb, var(--blue) 14%, var(--surface) 86%);
  color: color-mix(in srgb, var(--blue) 72%, var(--text) 28%);
}

@media (max-width: 720px) {
  .completion-mode-field {
    grid-template-columns: 1fr;
  }
}

/* styles/06-settings-calendar-feed.css */
/* Calendar feed Settings styles hosted by the Settings island. */

.calendar-feed-settings {
  --calendar-feed-color: #00a6a6;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: start;
}

.calendar-feed-settings > h2,
.calendar-feed-settings > p,
.calendar-feed-settings > .calendar-feed-paste-field,
.calendar-feed-settings > .calendar-feed-actions,
.calendar-feed-settings > .calendar-feed-list,
.calendar-feed-settings > .settings-storage-feedback {
  grid-column: 1 / -1;
}

.calendar-feed-field,
.calendar-feed-paste-field {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 8px;
  min-height: 0;
}

.calendar-feed-paste-field {
  align-items: start;
}

.calendar-feed-field > span,
.calendar-feed-paste-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}

.calendar-feed-field input:not([type="color"]),
.calendar-feed-paste-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line-soft) 64%, transparent);
  border-radius: 10px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surface) 82%, var(--button-soft) 18%);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 760;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent);
}

.calendar-feed-field input:not([type="color"]) {
  min-height: 42px;
  padding: 10px 12px;
}

.calendar-feed-paste-field textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.35;
  padding: 11px 12px;
}

.calendar-feed-field input:not([type="color"]):focus,
.calendar-feed-paste-field textarea:focus {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line-soft) 58%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}

.calendar-feed-color-field {
  position: relative;
  overflow: visible;
}

.calendar-feed-color-field > span {
  align-self: start;
}

.calendar-feed-color-control {
  width: 100%;
  min-width: 0;
  z-index: 4;
}

.calendar-feed-color-control .task-color-trigger {
  min-height: 42px;
}

.calendar-feed-color-control .task-color-dropdown {
  right: 0;
  left: auto;
  width: min(240px, calc(100vw - 64px));
}

.calendar-feed-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}

.calendar-feed-actions .settings-storage-button.is-primary {
  grid-column: auto;
}

.calendar-feed-actions .settings-storage-button {
  min-height: 40px;
}

.calendar-feed-list {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.calendar-feed-empty {
  min-height: 34px;
  display: grid;
  place-items: center start;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.calendar-feed-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px 8px 8px 10px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 86%, var(--calendar-feed-color) 4%);
}

.calendar-feed-row.is-error {
  background: color-mix(in srgb, var(--surface) 88%, #ff453a 5%);
}

.calendar-feed-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--calendar-feed-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--calendar-feed-color) 14%, transparent);
}

.calendar-feed-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.calendar-feed-body strong,
.calendar-feed-body small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-feed-body strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.calendar-feed-body small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.calendar-feed-row.is-error .calendar-feed-body small {
  color: color-mix(in srgb, #ff453a 72%, var(--text) 28%);
}

.calendar-feed-diagnostics {
  min-width: 0;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.calendar-feed-diagnostics summary {
  width: fit-content;
  cursor: pointer;
  font-weight: 800;
}

.calendar-feed-diagnostics summary:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.calendar-feed-diagnostics code {
  display: block;
  max-width: 100%;
  margin-top: 3px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.calendar-feed-row-actions {
  display: inline-flex;
  gap: 5px;
}

.calendar-feed-row-actions button {
  min-height: 28px;
  border: 0;
  border-radius: 9px;
  padding: 0 9px;
  background: var(--button-soft);
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.calendar-feed-row-actions button:disabled {
  opacity: 0.5;
}

@media (max-width: 720px) {
  .calendar-feed-settings,
  .calendar-feed-actions,
  .calendar-feed-field,
  .calendar-feed-paste-field {
    grid-template-columns: 1fr;
  }
}

/* styles/06-storage-settings.css */
/* Storage import/export controls hosted inside Settings. */

.storage-settings-hint {
  margin: 0;
  padding: 0 2px 2px;
  color: var(--settings-center-muted, var(--muted));
  font-size: 12px;
  font-weight: 760;
  line-height: 1.5;
}

.settings-group > .storage-settings-hint {
  align-self: start;
  margin: 0 0 2px;
  line-height: 1.35;
}

.settings-content > .settings-group .storage-settings-hint {
  max-width: 620px;
  margin: -4px 0 12px;
  color: var(--settings-center-muted, var(--text-tertiary, var(--muted)));
  font-size: 13px;
  font-weight: 610;
}

.storage-settings-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.storage-settings-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--settings-center-line, var(--control-border));
  border-radius: 12px;
  background: var(--settings-center-panel, var(--button-soft));
  color: var(--text);
  box-shadow: none;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0;
  padding: 0 12px;
  transition:
    background-color var(--motion-fast) var(--ease-smooth-soft),
    border-color var(--motion-fast) var(--ease-smooth-soft),
    box-shadow var(--motion-medium) var(--ease-smooth),
    transform var(--motion-medium) var(--ease-smooth),
    opacity var(--motion-fast) var(--ease-smooth-soft);
}

.storage-settings-button[data-settings-icon]::before {
  content: "";
  width: var(--settings-icon-size, 16px);
  height: var(--settings-icon-size, 16px);
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.84;
  -webkit-mask: var(--settings-icon-mask) center / contain no-repeat;
  mask: var(--settings-icon-mask) center / contain no-repeat;
}

.storage-settings-button:hover,
.storage-settings-button:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--settings-center-line, var(--line)) 72%);
  background: var(--settings-center-hover, color-mix(in srgb, var(--blue) 8%, var(--surface) 92%));
  box-shadow: none;
  transform: translateY(-1px);
}

.storage-settings-button:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

.storage-settings-button.is-primary {
  grid-column: auto;
  border-color: color-mix(in srgb, var(--blue) 42%, transparent);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 18px color-mix(in srgb, var(--blue) 18%, transparent);
}

.storage-settings-button.is-danger {
  border-color: color-mix(in srgb, #ff6b6b 32%, var(--settings-center-line, var(--line)) 68%);
  background: color-mix(in srgb, #ff6b6b 8%, var(--settings-center-panel, var(--surface)) 92%);
  color: color-mix(in srgb, #ff6b6b 78%, var(--text) 22%);
}

.storage-settings-button.is-critical {
  border-color: color-mix(in srgb, #ff4d4f 40%, var(--settings-center-line, var(--line)) 60%);
}

.storage-settings-button.is-danger:hover,
.storage-settings-button.is-danger:focus-visible {
  border-color: color-mix(in srgb, #ff6b6b 50%, var(--settings-center-line, var(--line)) 50%);
  background: color-mix(in srgb, #ff6b6b 13%, var(--settings-center-panel, var(--surface)) 87%);
}

.storage-settings-button:disabled {
  cursor: not-allowed;
  border-color: var(--settings-center-line, var(--line));
  background: color-mix(
    in srgb,
    var(--settings-center-panel, var(--surface)) 72%,
    var(--settings-center-soft, var(--surface-soft)) 28%
  );
  color: var(--settings-center-muted, var(--muted));
  box-shadow: none;
  opacity: 0.55;
  transform: none;
}

.storage-settings-local-status {
  min-height: 20px;
  color: var(--settings-center-muted, var(--muted));
  font-size: 12px;
  font-weight: 780;
  line-height: 1.45;
}

.storage-settings-local-status[data-tone="success"] {
  color: color-mix(in srgb, #34c759 72%, var(--text) 28%);
}

.storage-settings-local-status[data-tone="error"] {
  color: color-mix(in srgb, #ff453a 76%, var(--text) 24%);
}

.storage-settings-danger-confirm {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, #ff453a 30%, var(--settings-center-line, var(--line)) 70%);
  border-radius: 14px;
  padding: 14px;
  background: color-mix(in srgb, #ff453a 6%, var(--settings-center-panel, var(--surface)) 94%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--settings-center-panel, var(--surface)) 68%, transparent);
}

.storage-settings-danger-confirm[hidden] {
  display: none;
}

.storage-settings-danger-confirm-copy {
  display: grid;
  gap: 4px;
}

.storage-settings-danger-confirm-copy strong {
  color: color-mix(in srgb, #ff453a 78%, var(--text) 22%);
  font-size: 13px;
  font-weight: 920;
}

.storage-settings-danger-confirm-copy span,
.storage-settings-danger-confirm-phrase span,
.storage-settings-danger-confirm-countdown {
  color: var(--settings-center-muted, var(--muted));
  font-size: 12px;
  font-weight: 780;
  line-height: 1.45;
}

.storage-settings-danger-confirm-phrase {
  display: grid;
  gap: 6px;
}

.storage-settings-danger-confirm-phrase input {
  min-height: 40px;
  border: 1px solid var(--settings-center-line, var(--line));
  border-radius: 11px;
  background: var(--settings-center-bg, var(--surface));
  color: var(--text);
  font-size: 13px;
  font-weight: 820;
  padding: 0 12px;
}

.storage-settings-danger-confirm-phrase input:focus {
  border-color: color-mix(in srgb, #ff6b6b 48%, var(--settings-center-line, var(--line)) 52%);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, #ff6b6b 11%, transparent);
}

.storage-settings-danger-confirm-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.storage-settings-feedback {
  min-height: 18px;
  color: var(--settings-center-muted, var(--muted));
  font-size: 12px;
  font-weight: 820;
}

.storage-settings-feedback[data-tone="success"] {
  color: color-mix(in srgb, #34c759 74%, var(--text) 26%);
}

.storage-settings-feedback[data-tone="error"] {
  color: color-mix(in srgb, #ff453a 78%, var(--text) 22%);
}

html[data-appearance="simple"] .storage-settings-hint,
html[data-appearance="minimal"] .storage-settings-hint,
:root[data-appearance="minimal"] .settings-menu .storage-settings-hint,
:root[data-appearance="simple"] .settings-menu .storage-settings-hint {
  display: block;
}

@media (max-width: 720px) {
  .settings-content > .settings-group .storage-settings-hint {
    max-width: 100%;
  }

  .storage-settings-actions,
  .storage-settings-danger-confirm-actions {
    grid-template-columns: 1fr;
  }
}

/* styles/06-storage-migration.css */
/* Safe migration preparation and rollback controls hosted in Settings > Data. */

.storage-migration-panel {
  display: grid;
  gap: 11px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--settings-center-line, var(--line)) 80%);
  border-radius: 15px;
  padding: 15px;
  background: color-mix(in srgb, var(--blue) 4%, var(--settings-center-panel, var(--surface)) 96%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--settings-center-panel, var(--surface)) 70%, transparent);
}

.storage-migration-copy {
  display: grid;
  gap: 4px;
}

.storage-migration-copy strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.storage-migration-copy span,
.storage-migration-gate,
.storage-migration-status,
.storage-migration-summary {
  margin: 0;
  color: var(--settings-center-muted, var(--muted));
  font-size: 12px;
  font-weight: 680;
  line-height: 1.5;
}

.storage-migration-status {
  min-height: 18px;
  font-weight: 800;
}

.storage-migration-status[data-tone="success"] {
  color: color-mix(in srgb, #34c759 72%, var(--text) 28%);
}

.storage-migration-status[data-tone="error"] {
  color: color-mix(in srgb, #ff453a 76%, var(--text) 24%);
}

.storage-migration-summary {
  border-radius: 10px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--blue) 7%, transparent);
  color: var(--text);
}

.storage-migration-summary[hidden],
.storage-migration-actions .storage-settings-button[hidden] {
  display: none;
}

.storage-migration-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

@media (max-width: 720px) {
  .storage-migration-actions {
    grid-template-columns: 1fr;
  }
}

/* styles/06-settings-category-reorder.css */
/* Settings category reorder styles. */

.settings-view-row {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.settings-view-row:active {
  cursor: grabbing;
}

.settings-category-row:not(.is-editor-open) {
  cursor: grab;
}

.settings-category-row:not(.is-editor-open):active {
  cursor: grabbing;
}

.settings-view-index {
  width: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--blue) 76%, var(--text) 24%);
  font-size: 12px;
  font-weight: 950;
}

.settings-category-drag-handle {
  position: relative;
  width: 30px;
  min-height: 30px;
  border: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--button-soft) 88%, var(--category-color) 12%);
  color: color-mix(in srgb, var(--text) 72%, var(--muted) 28%);
  font-size: 0;
  line-height: 0;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 68%, transparent);
  cursor: grab;
}

.settings-category-drag-handle:active:not(:disabled) {
  cursor: grabbing;
}

.settings-category-drag-handle:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.settings-category-drag-handle::before {
  content: "\2195";
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.settings-reorder-placeholder {
  border: 2px dashed color-mix(in srgb, var(--blue) 36%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface) 92%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 8%, transparent);
  animation: settingsPanelIn 160ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
  transition:
    min-height var(--motion-fast) var(--ease-smooth-soft),
    opacity var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-medium) var(--ease-smooth);
}

.settings-reorder-preview {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  opacity: 0.96;
  transform: scale(1.025) rotate(-0.35deg);
  filter: drop-shadow(0 24px 38px rgba(17, 24, 39, 0.2));
}

.settings-reorder-preview .settings-category-row {
  width: 100%;
  transform: none !important;
  background: color-mix(in srgb, var(--surface) 94%, var(--category-color) 6%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 0 0 2px color-mix(in srgb, var(--category-color) 28%, transparent),
    0 18px 34px rgba(17, 24, 39, 0.16);
}

.settings-reorder-preview .settings-view-row {
  background: color-mix(in srgb, var(--surface) 94%, var(--blue) 6%);
}

.settings-category-list.is-category-reordering .settings-category-row {
  transition: transform var(--motion-medium) var(--ease-smooth);
}

.settings-view-list.is-view-reordering .settings-view-row {
  transition: transform var(--motion-medium) var(--ease-smooth);
}

/* styles/07-workspace-hero.css */
/* Workspace shell, hero area, and focus timer surfaces. */

.workspace {
  min-width: 0;
  height: calc(100vh - 10px);
  min-height: calc(100vh - 10px);
  padding: 18px 28px 22px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
}

.workspace-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  min-height: 0;
  padding: 7px 12px 9px;
  border: 1px solid color-mix(in srgb, var(--blue) 8%, var(--line-soft) 92%);
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-raised) 96%, transparent),
      color-mix(in srgb, var(--surface-panel-strong) 94%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    var(--shadow-panel);
}

.workspace-hero.is-focus-running {
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line-soft) 76%);
}

.workspace-hero.is-focus-ticking {
  background:
    radial-gradient(
      ellipse at 50% 0%,
      color-mix(in srgb, var(--blue) 16%, transparent),
      transparent 48%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-raised) 96%, transparent),
      color-mix(in srgb, var(--surface-panel-strong) 94%, transparent)
    );
}

.workspace-hero-copy {
  min-width: 0;
  min-height: 14px;
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 0 2px;
}

.workspace-hero h2 {
  margin-top: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0;
  font-weight: 950;
  white-space: nowrap;
}

.workspace-hero .eyebrow {
  color: color-mix(in srgb, var(--blue) 74%, var(--muted) 26%);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
  white-space: nowrap;
}

.workspace-hero-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-focus-launcher {
  --task-focus-panel-height: 96px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(188px, 1fr);
  gap: 8px;
  align-items: stretch;
}

.focus-launch-countdown,
.focus-launch-countup {
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--task-focus-panel-height);
  border: 1px solid color-mix(in srgb, var(--task-color, var(--blue)) 9%, var(--line-soft) 91%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-panel-strong) 98%, var(--task-color, var(--blue)) 2%);
}

.focus-launch-countdown { display: grid; grid-template-columns: minmax(92px, 0.8fr) minmax(190px, max-content) 42px; grid-template-areas: "intro clock action" "track track track"; justify-content: stretch; align-items: center; gap: 8px 10px; padding: 9px 12px; }

.focus-launch-countdown .focus-launch-intro { grid-area: intro; }

.focus-launch-countdown .focus-launch-label {
  justify-self: start;
}

.focus-launch-countup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  justify-content: stretch;
  justify-items: stretch;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.focus-launch-intro {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 5px;
}

.focus-launch-label {
  color: color-mix(in srgb, var(--task-color, var(--blue)) 42%, var(--text) 58%);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.1;
  white-space: nowrap;
}

.focus-launch-hint {
  max-width: 100%;
  overflow: hidden;
  color: color-mix(in srgb, var(--muted) 84%, var(--text) 16%);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-launch-clock {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-self: center;
  gap: 6px;
  min-width: 0;
  overflow: visible;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--task-color, var(--blue)) 9%, var(--line-soft) 91%);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 99%, var(--task-color, var(--blue)) 1%);
}

.focus-launch-countdown .focus-launch-clock { grid-area: clock; grid-template-columns: auto auto auto max-content; justify-self: center; max-width: 100%; }

.focus-launch-state { align-self: center; min-width: max-content; padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--task-color, var(--blue)) 10%, var(--line-soft) 90%); color: color-mix(in srgb, var(--task-color, var(--blue)) 42%, var(--muted) 58%); font-size: 11px; font-weight: 820; line-height: 1; white-space: nowrap; }

.focus-launch-time-field {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: max-content;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.focus-launch-time-field:focus-within {
  box-shadow: none;
}

.focus-launch-clock:focus-within {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 28%, var(--line-soft) 72%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--task-color, var(--blue)) 8%, transparent);
}

.focus-launch-clock-input {
  box-sizing: border-box;
  width: 4ch;
  min-width: 72px;
  height: 30px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", monospace;
  font-size: 24px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  outline: 0;
  padding: 0 2px;
}

.focus-launch-clock-input-hours { width: 6ch; min-width: 92px; }
.focus-launch-clock-input-minutes { width: 4ch; min-width: 72px; }
.focus-launch-countdown .focus-launch-clock-input-hours,
.focus-launch-countdown .focus-launch-clock-input-minutes { width: 3ch; min-width: 54px; }

.focus-launch-clock-input::selection {
  background: color-mix(in srgb, var(--task-color, var(--blue)) 24%, transparent);
}

.focus-launch-clock-unit {
  color: color-mix(in srgb, var(--muted) 82%, var(--text) 18%);
  font-size: 10px;
  font-weight: 780;
  line-height: 1;
  margin-top: 1px;
  white-space: nowrap;
}

.focus-launch-clock-separator {
  color: color-mix(in srgb, var(--task-color, var(--blue)) 36%, var(--muted) 64%);
  align-self: start;
  padding-top: 4px;
  font-size: 24px;
  font-weight: 850;
  line-height: 1;
}

.focus-launch-play,
.focus-launch-play-icon {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-radius: 999px;
}

.focus-launch-play {
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--task-color, var(--blue)) 14%, var(--line-soft) 86%);
  background: color-mix(in srgb, var(--surface) 96%, var(--task-color, var(--blue)) 4%);
  color: color-mix(in srgb, var(--task-color, var(--blue)) 58%, var(--text) 42%);
  font-size: 0;
  line-height: 0;
  padding: 0;
}

.focus-launch-play::before,
.focus-launch-play-icon::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid currentColor;
  transform: translateX(2px);
}

.focus-launch-play-countdown {
  grid-area: action;
  position: relative;
}

.focus-launch-play-countdown::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-68%, -50%);
}

.focus-launch-play-countdown::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 17px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(7px, -50%);
}

.focus-launch-track { grid-area: track; display: block; width: 100%; height: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--line-soft) 76%, transparent); }

.focus-launch-bar { --task-focus-progress: 1; display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--task-color, var(--blue)); transform: scaleX(var(--task-focus-progress)); transform-origin: left center; }

.focus-launch-play-icon {
  background: transparent;
  color: color-mix(in srgb, var(--task-color, var(--blue)) 54%, var(--text) 46%);
}

.focus-launch-play:hover,
.focus-launch-countup:hover {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 28%, var(--line-soft) 72%);
  transform: translateY(-1px);
}

.focus-launch-play:focus-visible,
.focus-launch-countup:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--task-color, var(--blue)) 32%, transparent);
  outline-offset: 2px;
}

.task-focus-timer {
  --task-focus-panel-height: 96px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  min-height: var(--task-focus-panel-height);
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(188px, 1fr);
  gap: 8px;
  align-items: stretch;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
}

.task-focus-timer-main,
.task-focus-timer-aside {
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--task-focus-panel-height);
  border: 1px solid color-mix(in srgb, var(--task-color, var(--blue)) 9%, var(--line-soft) 91%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-panel-strong) 98%, var(--task-color, var(--blue)) 2%);
}

.task-focus-timer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-areas:
    "mode action"
    "meta action"
    "track track";
  align-items: center;
  gap: 6px 12px;
  padding: 10px 14px;
}

.task-focus-timer-aside {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 6px;
  padding: 10px 14px;
}

.task-focus-timer.is-mode-elapsed .task-focus-timer-main,
.task-focus-timer.is-mode-elapsed .task-focus-timer-aside {
  border-color: color-mix(in srgb, #34c759 12%, var(--line-soft) 88%);
  background: color-mix(in srgb, var(--surface-panel-strong) 98%, #34c759 2%);
}

.task-focus-timer.is-mode-elapsed .task-focus-timer-main {
  grid-template-areas:
    "mode action"
    "meta action";
}

.task-focus-timer-meta {
  grid-area: meta;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  min-width: 0;
}

.task-focus-remaining {
  color: var(--text);
  font-size: 26px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.task-focus-state {
  color: color-mix(in srgb, var(--task-color, var(--blue)) 40%, var(--muted) 60%);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}

.task-focus-started-at { color: color-mix(in srgb, var(--muted) 78%, var(--task-color, var(--blue)) 22%); font-size: 11px; font-weight: 760; line-height: 1; white-space: nowrap; }
.task-focus-started-at[hidden] { display: none; }

.task-focus-mode {
  grid-area: mode;
  justify-self: start;
  box-sizing: border-box;
  padding: 2px 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--task-color, var(--blue)) 44%, var(--text) 56%);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.task-focus-timer-clock {
  grid-area: meta;
  display: block;
  min-width: 0;
}

.task-focus-timer-clock .task-focus-timer-meta {
  grid-area: auto;
}

.task-focus-timer.is-mode-elapsed .task-focus-mode {
  justify-self: start;
  background: transparent;
  color: color-mix(in srgb, #34c759 38%, var(--text) 62%);
}

.task-focus-timer.is-mode-elapsed .task-focus-remaining {
  font-size: 34px;
  letter-spacing: 0;
}

.task-focus-timer.is-mode-elapsed .task-focus-finish { padding: 0; border: 0; background: transparent; font-size: 26px; }

.task-focus-timer.is-mode-elapsed .task-focus-aside-value { font-size: 28px; }

.task-focus-timer.is-mode-elapsed .task-focus-state {
  color: color-mix(in srgb, #34c759 38%, var(--muted) 62%);
}

.task-focus-aside-label {
  color: color-mix(in srgb, var(--task-color, var(--blue)) 36%, var(--muted) 64%);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.1;
  white-space: nowrap;
}

.task-focus-aside-value {
  color: var(--text);
  font-size: 20px;
  font-weight: 920;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.task-focus-timer.is-mode-elapsed .task-focus-aside-label {
  color: color-mix(in srgb, #34c759 34%, var(--muted) 66%);
}

.task-focus-finish {
  grid-area: auto;
  justify-self: start;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 20px;
  font-weight: 920;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-focus-finish[hidden] {
  display: none;
}

.task-focus-track {
  grid-area: track;
  display: block;
  min-width: 0;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-soft) 76%, transparent);
  box-shadow: none;
}

.task-focus-bar {
  --task-focus-progress: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--task-color, var(--blue));
  transform: scaleX(var(--task-focus-progress));
  transform-origin: left center;
  transition: transform 420ms var(--ease-smooth);
}

.task-focus-timer.is-mode-elapsed .task-focus-track,
.task-focus-timer.is-mode-elapsed .task-focus-bar {
  display: none;
}

.task-focus-toggle {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--task-color, var(--blue)) 14%, var(--line-soft) 86%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 96%, var(--task-color, var(--blue)) 4%);
  color: color-mix(in srgb, var(--task-color, var(--blue)) 58%, var(--text) 42%);
  font-size: 0;
  font-weight: 950;
  line-height: 0;
  padding: 0;
}

.task-focus-actions {
  grid-area: action;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: max-content;
}

.task-focus-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--task-color, var(--blue)) 9%, var(--line-soft) 91%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 98%, var(--task-color, var(--blue)) 2%);
  color: color-mix(in srgb, var(--text) 62%, var(--muted) 38%);
  font-size: 11px;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
}

.task-focus-reset {
  border-color: color-mix(in srgb, #34c759 12%, var(--line-soft) 88%);
  color: color-mix(in srgb, #34c759 34%, var(--text) 66%);
}

.task-focus-cancel {
  color: color-mix(in srgb, var(--muted) 78%, var(--text) 22%);
}

.task-focus-secondary:hover {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 18%, var(--line-soft) 82%);
  background: color-mix(in srgb, var(--surface) 94%, var(--task-color, var(--blue)) 6%);
  color: var(--text);
}

.task-focus-toggle::before,
.task-focus-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  margin: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.task-focus-toggle[data-focus-timer-action="pause"]::before,
.task-focus-toggle[data-focus-timer-action="pause"]::after {
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background: currentColor;
}

.task-focus-toggle[data-focus-timer-action="pause"]::before {
  margin-left: -4px;
}

.task-focus-toggle[data-focus-timer-action="pause"]::after {
  margin-left: 4px;
}

.task-focus-toggle[data-focus-timer-action="start"]::before,
.task-focus-toggle[data-focus-timer-action="resume"]::before {
  width: 0;
  height: 0;
  border-radius: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid currentColor;
  background: transparent;
  transform: translate(-38%, -50%);
}

.task-focus-toggle[data-focus-timer-action="start"]::after,
.task-focus-toggle[data-focus-timer-action="resume"]::after {
  content: none;
}

.task-focus-toggle:hover {
  background: color-mix(in srgb, var(--surface) 86%, var(--task-color, var(--blue)) 14%);
  transform: translateY(-1px);
}

.task-focus-timer.is-running .task-focus-timer-main,
.task-focus-timer.is-running .task-focus-timer-aside {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 18%, var(--line-soft) 82%);
  background: color-mix(in srgb, var(--surface) 98%, var(--task-color, var(--blue)) 2%);
}

.task-focus-timer.is-mode-elapsed.is-running .task-focus-timer-main,
.task-focus-timer.is-mode-elapsed.is-running .task-focus-timer-aside {
  border-color: color-mix(in srgb, #34c759 18%, var(--line-soft) 82%);
  background: color-mix(in srgb, var(--surface) 98%, #34c759 2%);
}

.task-focus-timer.is-paused .task-focus-timer-main,
.task-focus-timer.is-paused .task-focus-timer-aside {
  border-color: color-mix(in srgb, #f59e0b 18%, var(--line-soft) 82%);
  background: color-mix(in srgb, var(--surface) 98%, #f59e0b 2%);
}

.task-focus-timer.is-complete .task-focus-timer-main,
.task-focus-timer.is-complete .task-focus-timer-aside {
  border-color: color-mix(in srgb, #34c759 20%, var(--line-soft) 80%);
  background: color-mix(in srgb, var(--surface) 98%, #34c759 2%);
}

/* styles/07-focus-ongoing.css */
/* Current Focus ongoing lane and ongoing task card styles. */

.workspace-hero.is-ongoing-hot {
  border-color: color-mix(in srgb, #34c759 44%, var(--blue) 56%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 95%, #34c759 5%), var(--surface-panel-strong));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 82%, transparent),
    var(--shadow-panel);
}

.ongoing-panel {
  --ongoing-card-width: 100%;
  --focus-dashboard-card-height: 156px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr);
  grid-template-rows: auto minmax(var(--focus-dashboard-card-height), auto) auto;
  align-items: stretch;
  gap: 4px 10px;
}

.ongoing-header {
  display: none;
}

.ongoing-list {
  grid-column: 1;
  grid-row: 2;
  min-height: var(--focus-dashboard-card-height);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  gap: 8px;
  overflow: hidden;
  padding: 0 1px;
  scrollbar-gutter: stable;
}

.ongoing-list .task-item {
  flex: 1 1 var(--ongoing-card-width);
  width: var(--ongoing-card-width);
  max-width: none;
  min-width: min(250px, 82vw);
  min-height: var(--focus-dashboard-card-height);
  align-self: stretch;
  gap: 6px;
  margin-left: 0;
  border-left-width: 7px;
  padding: 8px 10px;
}

.ongoing-list .task-item:only-child {
  min-width: min(520px, 100%);
}

.ongoing-list .task-item.is-ongoing-card {
  container: ongoing-card / inline-size;
}

.ongoing-list .drop-placeholder {
  flex: 1 1 var(--ongoing-card-width);
  width: var(--ongoing-card-width);
  max-width: none;
  min-width: min(250px, 82vw);
  align-self: stretch;
  margin-left: 0 !important;
}

.ongoing-list .task-item.is-dragging {
  flex-basis: auto;
}

.ongoing-list .task-title-edit {
  min-height: 28px;
  font-size: calc(var(--font-size) * 0.9);
  font-weight: 720;
  text-align: center;
}

.ongoing-list .task-item.is-next:not(.is-done) .task-title-edit {
  font-weight: 960;
  text-shadow: 0 0 12px color-mix(in srgb, var(--task-color, var(--blue)) 10%, transparent);
}

.ongoing-list .drag-handle {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  margin-top: 0;
}

.ongoing-list .drag-handle::before,
.ongoing-list .drag-handle::after {
  font-size: 18px;
}

.ongoing-list .check-button {
  width: 28px;
  height: 28px;
  margin-top: 2px;
}

.ongoing-list .task-row {
  gap: 6px;
  justify-content: center;
}

.ongoing-list .task-actions {
  gap: 5px;
  width: auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.ongoing-list .ongoing-chip-in-actions {
  align-self: center;
  margin-left: 4px;
  margin-right: 2px;
}

.ongoing-list .detail-button,
.ongoing-list .delete-button {
  min-height: 32px;
  border-radius: 11px;
  font-size: 13px;
}

.ongoing-list .detail-button {
  min-width: 52px;
  padding: 0 10px;
}

.ongoing-list .delete-button {
  width: 34px;
  font-size: 22px;
}

.ongoing-list .task-meta {
  gap: 5px;
  margin-top: 2px;
  justify-content: center;
}

.ongoing-list .task-meta > .ongoing-chip-in-actions {
  display: none;
}

.ongoing-list .category-chip,
.ongoing-list .due-chip,
.ongoing-list .ongoing-chip {
  padding: 3px 8px;
  font-size: 12px;
}

.ongoing-list .task-note {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.25;
  -webkit-line-clamp: 1;
}

.ongoing-list .task-details,
.ongoing-list .task-details.has-estimate {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(92px, 0.62fr) minmax(0, 1fr);
  align-items: start;
}

.ongoing-list .detail-category-field,
.ongoing-list .detail-due-field,
.ongoing-list .compact-color {
  display: none;
}

.ongoing-list .detail-note-field,
.ongoing-list .detail-estimate-field {
  min-width: 0;
}

.ongoing-list .detail-note-field {
  grid-column: 2;
  order: 2;
}

.ongoing-list .detail-estimate-field {
  grid-column: 1;
  order: 1;
}

.ongoing-list .task-details.has-estimate .detail-note-field {
  grid-column: 2;
}

.ongoing-list .task-details.has-estimate .detail-due-field {
  grid-column: auto;
}

.ongoing-list .task-details .mini-field {
  min-width: 0;
}

.ongoing-list .detail-note-field textarea {
  min-height: 44px;
}

.ongoing-list .task-item.is-active-focus {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 14%, var(--line-soft) 86%);
  border-left-color: color-mix(in srgb, var(--task-color, var(--blue)) 58%, var(--line-soft) 42%);
  background: color-mix(in srgb, var(--surface-card) 98%, var(--task-color, var(--blue)) 2%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    0 8px 18px rgba(17, 24, 39, 0.035);
}

.ongoing-list .task-item.is-focus-ticking:not(.is-done) {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 18%, var(--line-soft) 82%);
  border-left-color: color-mix(in srgb, var(--task-color, var(--blue)) 70%, var(--line-soft) 30%);
  background: color-mix(in srgb, var(--surface-card) 97%, var(--task-color, var(--blue)) 3%);
}

.ongoing-list .task-item.is-ongoing-card:not(.is-active-focus):not(.is-focus-ticking):not(.is-focus-glow-visible):not(.is-done) {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 22%, var(--line-soft) 78%);
  border-left-color: color-mix(in srgb, var(--task-color, var(--blue)) 68%, var(--line-soft) 32%);
  background: color-mix(in srgb, var(--surface-card) 96%, var(--task-color, var(--blue)) 4%);
  box-shadow: var(--shadow-card);
}

.ongoing-list .task-item.is-ongoing-card:not(.is-active-focus):not(:hover) .ongoing-chip-in-actions {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 16%, var(--line-soft) 84%);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: color-mix(in srgb, var(--task-color, var(--blue)) 56%, var(--text) 44%);
  box-shadow: none;
}

.ongoing-list .task-item.is-ongoing-card:not(.is-active-focus):not(:hover) .detail-button,
.ongoing-list .task-item.is-ongoing-card:not(.is-active-focus):not(:hover) .delete-button {
  opacity: 0.78;
}

.ongoing-list .task-item.is-active-focus .ongoing-chip {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 22%, var(--line-soft) 78%);
  background: color-mix(in srgb, var(--surface) 96%, var(--task-color, var(--blue)) 4%);
  color: color-mix(in srgb, var(--task-color, var(--blue)) 58%, var(--text) 42%);
  box-shadow: none;
}

@container ongoing-card (max-width: 290px) {
  .ongoing-list .task-item.is-ongoing-card .task-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    justify-items: stretch;
  }

  .ongoing-list .task-item.is-ongoing-card .task-title-edit {
    width: 100%;
    max-width: 100%;
    min-height: 22px;
    text-align: center;
  }

  .ongoing-list .task-item.is-ongoing-card .task-actions {
    width: 100%;
    justify-content: center;
    gap: 4px;
    margin-left: 0;
  }

  .ongoing-list .task-item.is-ongoing-card .ongoing-chip {
    padding: 3px 7px;
    font-size: 11px;
  }

  .ongoing-list .task-item.is-ongoing-card .detail-button {
    min-width: 42px;
    min-height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .ongoing-list .task-item.is-ongoing-card .delete-button {
    width: 30px;
    min-height: 30px;
    font-size: 19px;
  }

  .ongoing-list .task-item.is-ongoing-card .task-meta {
    margin-top: 4px;
  }

  .ongoing-list .task-item.is-ongoing-card .task-details,
  .ongoing-list .task-item.is-ongoing-card .task-details.has-estimate {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .ongoing-list .task-item.is-ongoing-card .detail-note-field,
  .ongoing-list .task-item.is-ongoing-card .detail-estimate-field,
  .ongoing-list .task-item.is-ongoing-card .task-details.has-estimate .detail-note-field {
    grid-column: 1;
  }

  .ongoing-list .task-item.is-ongoing-card .task-focus-timer {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .ongoing-list .task-item.is-ongoing-card .task-focus-timer-main {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "mode action"
      "meta action"
      "track track";
    padding: 10px;
  }

  .ongoing-list .task-item.is-ongoing-card .task-focus-timer.is-mode-elapsed .task-focus-timer-main {
    grid-template-areas:
      "mode action"
      "meta action";
  }

  .ongoing-list .task-item.is-ongoing-card .task-focus-timer-aside {
    min-height: 42px;
    padding: 10px;
  }

  .ongoing-list .task-item.is-ongoing-card .task-focus-timer.is-mode-elapsed .task-focus-remaining {
    font-size: 28px;
  }

  .ongoing-list .task-item.is-ongoing-card .task-focus-finish {
    justify-self: start;
    padding-inline: 5px;
  }

  .ongoing-list .task-item.is-ongoing-card .task-focus-mode {
    justify-self: start;
    padding-inline: 5px;
  }

  .ongoing-list .task-item.is-ongoing-card .task-focus-toggle {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
  }

  .ongoing-list .task-item.is-ongoing-card .task-focus-actions {
    flex-wrap: wrap;
    gap: 4px;
  }

  .ongoing-list .task-item.is-ongoing-card .task-focus-secondary {
    min-height: 28px;
    padding: 0 7px;
    font-size: 10px;
  }

  .ongoing-list .task-item.is-ongoing-card .task-focus-launcher {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .ongoing-list .task-item.is-ongoing-card .focus-launch-countdown {
    grid-template-columns: minmax(0, 1fr) 32px;
    grid-template-areas:
      "intro intro"
      "clock action"
      "track track";
    justify-content: start;
    gap: 8px;
  }

  .ongoing-list .task-item.is-ongoing-card .focus-launch-intro {
    grid-column: 1 / -1;
  }

  .ongoing-list .task-item.is-ongoing-card .focus-launch-clock {
    justify-self: start;
    grid-template-columns: auto auto auto;
    gap: 5px;
  }

  .ongoing-list .task-item.is-ongoing-card .focus-launch-state {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
  }

  .ongoing-list .task-item.is-ongoing-card .focus-launch-time-field {
    padding-inline: 0;
  }

  .ongoing-list .task-item.is-ongoing-card .focus-launch-clock-input {
    width: 3.8ch;
    min-width: 66px;
    font-size: 20px;
  }

  .ongoing-list .task-item.is-ongoing-card .focus-launch-play,
  .ongoing-list .task-item.is-ongoing-card .focus-launch-play-icon {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }
}

.workspace-hero.is-empty .ongoing-list {
  border: 1px dashed color-mix(in srgb, var(--blue) 24%, var(--line) 76%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--blue) 4%, transparent);
}

.ongoing-panel .focus-progress {
  grid-column: 1;
  grid-row: 3;
  width: var(--ongoing-card-width);
  max-width: min(100%, var(--ongoing-card-width));
}

.ongoing-task {
  --task-color: var(--blue);
  position: relative;
  flex: 0 0 184px;
  min-height: 116px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  gap: 6px 8px;
  align-items: center;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--task-color) 24%, var(--line-soft) 76%);
  border-left: 8px solid var(--task-color);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 96%, var(--task-color) 4%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 82%, transparent),
    0 10px 22px rgba(17, 24, 39, 0.06);
}

.ongoing-task.is-next {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 84%, transparent),
    0 10px 22px rgba(17, 24, 39, 0.07);
}

.ongoing-task strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 900;
  align-self: end;
}

.ongoing-task span {
  grid-column: 1;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.ongoing-remove-button {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 30px;
  min-height: 30px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--button-soft) 84%, var(--surface) 16%);
  color: var(--muted);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

/* styles/07-focus-recommendation.css */
/* Current Focus recommendation card styles. */

.focus-recommendation {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: var(--focus-dashboard-card-height, 156px);
  display: flex;
  align-self: stretch;
}

.focus-recommendation[hidden] {
  display: none !important;
}

.focus-recommendation-card,
.focus-recommendation-empty {
  --task-color: var(--blue);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: var(--focus-dashboard-card-height, 156px);
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--task-color, var(--blue)) 14%, var(--line-soft) 86%);
  border-left: 4px solid color-mix(in srgb, var(--task-color, var(--blue)) 54%, var(--line-soft) 46%);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 94%, var(--task-color, var(--blue)) 6%),
      color-mix(in srgb, var(--surface-panel-strong) 97%, var(--task-color, var(--blue)) 3%)
    );
  color: var(--text);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent),
    0 10px 20px rgba(17, 24, 39, 0.045);
  opacity: 0.88;
}

.desktop-shell.is-recommendation-drag .focus-recommendation-card,
.desktop-shell.is-recommendation-drag .focus-recommendation-empty {
  opacity: 1;
}

.focus-recommendation.is-drag-over .focus-recommendation-card,
.focus-recommendation.is-drag-over .focus-recommendation-empty {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 42%, var(--line) 58%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 88%, var(--task-color, var(--blue)) 12%),
      color-mix(in srgb, var(--surface-panel-strong) 92%, var(--task-color, var(--blue)) 8%)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent),
    0 0 0 4px color-mix(in srgb, var(--task-color, var(--blue)) 10%, transparent),
    0 16px 28px rgba(17, 24, 39, 0.1);
  transform: translateY(-1px);
}

.focus-recommendation-empty {
  border-left-color: color-mix(in srgb, var(--line-soft) 74%, transparent);
  background: color-mix(in srgb, var(--surface-panel-strong) 86%, transparent);
  color: var(--muted);
  opacity: 0.72;
}

.focus-recommendation-card-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.focus-recommendation-label {
  min-width: 0;
  color: color-mix(in srgb, var(--task-color, var(--blue)) 62%, var(--muted) 38%);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.focus-recommendation-estimate {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--task-color, var(--blue)) 10%, var(--surface) 90%);
  color: color-mix(in srgb, var(--task-color, var(--blue)) 68%, var(--text) 32%);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.focus-recommendation-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 880;
  line-height: 1.26;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-recommendation-meta,
.focus-recommendation-reasons {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 7px;
}

.focus-recommendation-meta span,
.focus-recommendation-reasons span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: color-mix(in srgb, var(--muted) 82%, var(--text) 18%);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-recommendation-reasons span {
  color: color-mix(in srgb, var(--task-color, var(--blue)) 52%, var(--muted) 48%);
}

.focus-recommendation-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.focus-recommendation-actions button {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--task-color, var(--blue)) 14%, var(--line-soft) 86%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 88%, var(--task-color, var(--blue)) 12%);
  color: color-mix(in srgb, var(--task-color, var(--blue)) 68%, var(--text) 32%);
  font-size: 12px;
  font-weight: 900;
}

.focus-recommendation-actions button:hover {
  transform: translateY(-1px);
}

.focus-recommendation-accept {
  flex: 1 1 auto;
  padding-inline: 10px;
}

.focus-recommendation-skip {
  flex: 0 0 auto;
  padding-inline: 9px;
  background: color-mix(in srgb, var(--surface-panel-strong) 86%, transparent);
  color: var(--muted);
}

.focus-recommendation-empty strong {
  color: color-mix(in srgb, var(--text) 74%, var(--muted) 26%);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
}

.focus-recommendation-empty small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 680;
  line-height: 1.35;
}

/* styles/07-panel-layout.css */
/* Main workspace alignment when the current focus strip is folded. */

.desktop-shell.is-main-start-aligned:not(.is-calendar-view):not(.is-archive-hub-view):not(.is-favor-view):not(.is-count-days-view):not(.is-time-tools-view):not(.is-inbox-view) .workspace {
  --main-start-offset: 68px;
  grid-template-rows: minmax(0, 0px) auto minmax(0, 1fr);
  padding-top: var(--main-start-offset);
}

.desktop-shell.is-main-start-aligned:not(.is-calendar-view):not(.is-archive-hub-view):not(.is-favor-view):not(.is-count-days-view):not(.is-time-tools-view):not(.is-inbox-view) .workspace-hero {
  min-height: 0;
  max-height: 0;
  padding-block: 0;
  border-width: 0;
  opacity: 0;
  overflow: clip;
  pointer-events: none;
}

.desktop-shell.is-main-start-aligned:not(.is-calendar-view):not(.is-archive-hub-view):not(.is-favor-view):not(.is-count-days-view):not(.is-time-tools-view):not(.is-inbox-view) .task-composer {
  margin-top: 0;
}

.main-align-toggle-row > span:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.main-align-toggle-row strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 860;
  line-height: 1.2;
}

.main-align-toggle-row small {
  color: color-mix(in srgb, var(--muted) 86%, transparent);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.35;
}

@media (max-width: 860px) {
  .desktop-shell.is-main-start-aligned:not(.is-calendar-view):not(.is-archive-hub-view):not(.is-favor-view):not(.is-count-days-view):not(.is-time-tools-view):not(.is-inbox-view) .workspace {
    --main-start-offset: 18px;
  }
}

/* styles/08-composer-fields.css */
/* Task composer, category picker, board grid layout, form fields, and add button. */

.task-composer {
  position: relative;
  z-index: 6;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 184px 152px;
  gap: 8px;
  align-items: center;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%);
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line-soft) 78%);
  border-radius: 16px;
  padding: 5px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 82%, transparent),
    0 9px 22px rgba(17, 24, 39, 0.06);
}

.task-composer:focus-within {
  border-color: color-mix(in srgb, var(--blue) 44%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 84%, transparent),
    0 0 0 3px rgba(10, 132, 255, 0.075),
    0 12px 26px rgba(17, 24, 39, 0.07);
}

.task-composer:hover {
  border-color: color-mix(in srgb, var(--blue) 32%, var(--line-soft) 68%);
}

:root:not([data-theme="dark"]) .task-composer,
:root:not([data-theme="dark"]) .task-board,
:root:not([data-theme="dark"]) .category-card,
:root:not([data-theme="dark"]) .clock-panel {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 8px 22px rgba(22, 33, 54, 0.05),
    0 2px 8px rgba(22, 33, 54, 0.03);
}

.category-field,
.category-picker,
.task-composer select {
  position: relative;
  z-index: 7;
}

.native-category-select {
  display: none;
}

.category-picker {
  --category-color: var(--blue);
}

.task-composer .field {
  gap: 0;
  min-width: 0;
}

.task-title-field {
  position: relative;
  z-index: 8;
}

.task-title-field input {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  padding: 0 14px;
  font-size: 17px;
  font-weight: 700;
  box-shadow: none;
}

.task-title-field input::placeholder {
  color: color-mix(in srgb, var(--muted) 76%, transparent);
  font-weight: 650;
}

.task-title-field input:focus {
  border-color: transparent;
  box-shadow: none;
}

.task-title-suggestion-ghost {
  position: absolute;
  z-index: 3;
  left: 14px;
  right: 14px;
  top: 50%;
  overflow: hidden;
  color: transparent;
  font-size: 17px;
  font-weight: 700;
  line-height: 34px;
  pointer-events: none;
  text-overflow: clip;
  transform: translateY(-50%);
  white-space: nowrap;
}

.task-title-suggestion-ghost[hidden] {
  display: none;
}

.task-title-suggestion-prefix {
  color: transparent;
}

.task-title-suggestion-suffix {
  color: color-mix(in srgb, var(--blue) 62%, transparent);
  opacity: 0.58;
  animation: titleSuggestionPulse 1350ms ease-in-out infinite;
}

.task-suggestion-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 34;
  display: grid;
  gap: 6px;
  max-height: 292px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line-soft) 84%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 16px 34px rgba(17, 24, 39, 0.12);
  backdrop-filter: blur(16px) saturate(1.05);
  animation: settingsPanelIn 180ms var(--ease-smooth);
  pointer-events: auto;
}

.task-suggestion-menu[hidden] {
  display: none;
}

.task-suggestion-option {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title score"
    "meta score";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 7px 10px;
  text-align: left;
}

.task-suggestion-option:hover,
.task-suggestion-option.is-selected {
  border-color: color-mix(in srgb, var(--blue) 16%, var(--line-soft) 84%);
  background: color-mix(in srgb, var(--button-soft) 76%, var(--blue) 4%);
  transform: translateY(-1px);
}

.task-suggestion-title {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 840;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-suggestion-meta {
  grid-area: meta;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-suggestion-score {
  grid-area: score;
  min-width: 42px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: color-mix(in srgb, var(--blue) 74%, var(--text) 26%);
  font-size: 12px;
  font-weight: 850;
  padding: 4px 7px;
  text-align: center;
}

@keyframes titleSuggestionPulse {
  0%,
  100% {
    opacity: 0.36;
  }

  50% {
    opacity: 0.74;
  }
}

.category-picker-button {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, var(--category-color) 12%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-soft) 4%);
  color: color-mix(in srgb, var(--text) 84%, var(--muted) 16%);
  padding: 0 13px;
  font-size: 15px;
  font-weight: 820;
  text-align: left;
  outline: none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 82%, transparent),
    0 6px 14px rgba(17, 24, 39, 0.04);
}

.category-picker-button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--blue) 22%, var(--line) 78%);
  background: color-mix(in srgb, var(--surface) 98%, var(--blue) 2%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    0 8px 18px rgba(17, 24, 39, 0.055);
}

.category-picker-button:active {
  transform: translateY(0) scale(0.988);
}

.category-picker-button:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line) 66%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 0 0 3px rgba(10, 132, 255, 0.075),
    0 8px 18px rgba(17, 24, 39, 0.055);
}

.category-picker-option-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--category-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--category-color) 8%, transparent);
}

.category-picker-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-picker-arrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.category-picker-arrow {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  color: var(--muted);
  line-height: 1;
  transform-origin: center;
  transition: transform var(--motion-fast) var(--ease-smooth-soft);
}

.category-picker.is-open .category-picker-arrow {
  transform: rotate(180deg);
}

.category-picker-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: grid;
  gap: 6px;
  max-height: 286px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line-soft) 86%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 16px 34px rgba(17, 24, 39, 0.11);
  backdrop-filter: blur(16px) saturate(1.05);
  animation: settingsPanelIn 180ms var(--ease-smooth);
}

.category-picker-menu[hidden] {
  display: none;
}

.category-picker-option {
  position: relative;
  min-height: 34px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  padding: 0 10px 0 11px;
  text-align: left;
  font-size: 15px;
  font-weight: 820;
  transition:
    transform var(--motion-fast) var(--ease-smooth-soft),
    background var(--motion-fast) var(--ease-smooth-soft),
    box-shadow var(--motion-fast) var(--ease-smooth-soft);
}

.category-picker-option:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--button-soft) 70%, var(--category-color) 6%);
}

.category-picker-option::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.72);
  background:
    linear-gradient(135deg, transparent 45%, #fff 45% 58%, transparent 58%) 5px 1px / 8px 10px no-repeat,
    var(--category-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--category-color) 14%, transparent);
  transition:
    opacity var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-fast) var(--ease-smooth-soft);
}

.category-picker-option.is-selected {
  border-color: color-mix(in srgb, var(--category-color) 34%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--category-color) 8%, transparent), transparent 74%),
    color-mix(in srgb, var(--category-color) 4%, var(--surface) 96%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent),
    0 6px 14px color-mix(in srgb, var(--category-color) 7%, transparent);
}

.category-picker-option.is-selected::after {
  opacity: 1;
  transform: scale(1);
}

.task-composer.is-category-context {
  grid-template-columns: minmax(320px, 1fr) 156px;
}

.task-composer.is-category-context .category-field {
  display: none;
}

.board-grid {
  min-height: 0;
  height: 100%;
  display: grid;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) var(--workspace-right-rail-width, clamp(252px, 18vw, 320px));
  gap: 16px;
}

.main-column {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 14px;
}

.right-rail {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: none;
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  gap: 16px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-gutter: stable;
}

.desktop-shell.is-open-task-view .workspace {
  grid-template-columns: minmax(0, 1fr) var(--workspace-right-rail-width, clamp(252px, 18vw, 320px));
  grid-template-rows: auto auto minmax(0, 1fr);
  align-items: stretch;
}

.desktop-shell.is-open-task-view .workspace-hero,
.desktop-shell.is-open-task-view .task-composer,
.desktop-shell.is-open-task-view .main-column {
  grid-column: 1;
}

.desktop-shell.is-open-task-view .board-grid {
  display: contents;
}

.desktop-shell.is-open-task-view .main-column {
  grid-row: 3;
  height: 100%;
}

.desktop-shell.is-open-task-view .right-rail {
  grid-column: 2;
  grid-row: 1 / -1;
  height: 100%;
  max-height: 100%;
}

.field,
.mini-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 0 12px;
  font-size: 17px;
  outline: none;
}

select {
  appearance: none;
  padding-right: 36px;
  background:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 18px) calc(50% - 3px) / 6px 6px no-repeat,
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 12px) calc(50% - 3px) / 6px 6px no-repeat,
    color-mix(in srgb, var(--surface-soft) 88%, var(--surface) 12%);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(10, 132, 255, 0.72);
  box-shadow: var(--glow-blue-soft);
}

textarea {
  min-height: 88px;
  resize: vertical;
  padding: 10px 12px;
  line-height: 1.45;
}

.add-button {
  min-height: 34px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 92%, white 8%), var(--blue));
  color: white;
  font-size: 16px;
  font-weight: 900;
  padding: 0 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    var(--glow-blue-strong);
}

.add-button:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 82%, white 18%), color-mix(in srgb, var(--blue) 94%, #055fbd 6%));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 5px rgba(10, 132, 255, 0.14),
    0 18px 36px rgba(10, 132, 255, 0.3);
}

.add-button:active {
  transform: translateY(0) scale(0.985);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 5px 12px rgba(10, 132, 255, 0.18);
}

/* styles/09-boards.css */
/* Task boards, status boards, completed board, jar board shell, and board headers. */

.task-board {
  min-height: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-panel-strong) 94%, transparent),
    color-mix(in srgb, var(--surface-panel) 94%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--line-soft) 82%, transparent);
  border-radius: 20px;
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--line-soft) 24%, transparent),
    var(--shadow-panel);
}

.completed-board {
  align-self: start;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-panel-muted) 96%, transparent),
    color-mix(in srgb, var(--panel-soft) 92%, transparent)
  );
}

.status-board {
  aspect-ratio: auto;
  min-height: 132px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.unfinished-board {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-panel-strong) 96%, transparent),
      color-mix(in srgb, var(--surface-panel-muted) 94%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent),
    var(--shadow-panel);
}

.unfinished-board[hidden] {
  display: none;
}

.status-number {
  align-self: center;
  color: var(--text);
  font-size: 44px;
  font-weight: 950;
  line-height: 1;
}

.status-caption {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.completed-board.status-board {
  min-height: 178px;
  max-height: 260px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent),
    0 10px 24px rgba(52, 199, 89, 0.08),
    var(--shadow-panel);
}

.completed-board.status-board .completed-list {
  min-height: 0;
  overflow-y: auto;
}

.completed-board.status-board .empty-state.compact {
  min-height: 0;
  padding: 10px 4px;
}

.jar-board {
  align-self: start;
  min-height: 260px;
  max-height: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-panel) 96%, transparent),
    color-mix(in srgb, var(--surface-panel-muted) 90%, transparent)
  );
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
}

.task-board-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}

.task-board-main .task-list {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}



.right-rail .task-board {
  align-self: start;
}

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

.jar-board .board-header {
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
}

.jar-board .jar-header-actions {
  width: 100%;
  justify-content: space-between;
}

.board-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 88%, transparent);
}

.board-header h3 {
  margin: 0;
  font-size: calc(var(--font-size) * 1.18);
  white-space: nowrap;
}

.board-header span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.completed-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.add-all-to-board-button {
  min-height: 30px;
  border: 0;
  border-radius: 10px;
  background: rgba(10, 132, 255, 0.13);
  color: color-mix(in srgb, var(--blue) 70%, var(--text) 30%);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  padding: 0 8px;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.07), 0 8px 18px rgba(10, 132, 255, 0.11);
}

/* styles/09-calendar-board.css */
/* Calendar board, month/year/week, event-card, add-category, and detail-popover styles. */

.desktop-shell.is-calendar-view .workspace-hero,
.desktop-shell.is-calendar-view .task-composer,
.desktop-shell.is-calendar-view .right-rail {
  display: none;
}

.desktop-shell.is-calendar-view .workspace {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.desktop-shell.is-calendar-view .board-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 100%;
}

.desktop-shell.is-calendar-view .main-column {
  min-height: 100%;
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
}

.desktop-shell.is-calendar-view .task-board {
  min-height: 0;
  height: 100%;
}

.task-board-main.is-calendar-board {
  --calendar-row-height: 52px;
  --calendar-day-x-padding: 14px;
  --calendar-grid-line: color-mix(in srgb, var(--line-soft) 64%, transparent);
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
  border-radius: 0;
  border: 0;
  background: var(--surface);
  box-shadow: none;
  min-height: 0;
}

.task-board-main.is-calendar-board .board-header {
  display: none;
}

.task-board-main.is-calendar-board .task-list {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  height: 100%;
  overflow: auto;
  padding-right: 0;
}

.calendar-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  padding: 16px 26px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 58%, transparent);
}

.calendar-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
}

.calendar-title .calendar-kicker {
  color: var(--text);
  font-size: 25px;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.calendar-title h4 {
  margin: 0;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--line-soft) 68%, transparent);
  color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%);
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.calendar-title > span:not(.calendar-kicker) {
  color: var(--muted);
  font-size: 13px;
  font-weight: 820;
}

.calendar-toolbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.calendar-view-switcher {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 44%, transparent);
}

.calendar-view-switcher button {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 0 13px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.calendar-view-switcher button:hover,
.calendar-view-switcher button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 9px color-mix(in srgb, var(--shadow) 8%, transparent);
}

.calendar-feed-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 5px 0 12px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 54%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.calendar-feed-status button {
  min-height: 26px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  font-size: 12px;
  font-weight: 900;
}

.calendar-feed-status button:disabled {
  opacity: 0.46;
}

.calendar-nav {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 42%, transparent);
  box-shadow: none;
}

.calendar-nav button {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 0 13px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.calendar-nav button:hover {
  background: var(--surface);
  color: var(--text);
}

.calendar-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(164px, 1fr));
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.calendar-day {
  min-width: 164px;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  border-right: 1px solid color-mix(in srgb, var(--line-soft) 48%, transparent);
}

.calendar-day:last-child {
  border-right: 0;
}

.calendar-day.is-today {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 4%, transparent), transparent 44%),
    color-mix(in srgb, var(--blue) 2%, transparent);
}

.calendar-day.is-calendar-drop-target,
.calendar-unscheduled.is-calendar-drop-target {
  outline: 1px solid color-mix(in srgb, var(--blue) 38%, transparent);
  outline-offset: -1px;
  background-color: color-mix(in srgb, var(--blue) 5%, transparent);
}

.calendar-day-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 58px;
  margin-bottom: 0;
  padding: 16px var(--calendar-day-x-padding) 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 62%, transparent);
}

.calendar-day-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.calendar-day-header strong {
  color: var(--text);
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

.calendar-day.is-today .calendar-day-header strong {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  font-size: 20px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--blue) 24%, transparent);
}

.calendar-day-list,
.calendar-unscheduled-list {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  gap: 0;
}

.calendar-day-list {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 0 var(--calendar-day-x-padding) 18px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--calendar-row-height) - 1px),
      var(--calendar-grid-line) calc(var(--calendar-row-height) - 1px),
      var(--calendar-grid-line) var(--calendar-row-height)
    );
  background-clip: content-box;
  background-origin: content-box;
}

.calendar-day-list > * {
  flex: 0 0 var(--calendar-row-height);
  height: var(--calendar-row-height);
  min-height: var(--calendar-row-height);
  box-sizing: border-box;
}

.calendar-task-card {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: var(--calendar-row-height);
  height: var(--calendar-row-height);
  padding: 0 32px 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: grab;
  transform: scale(1);
  transition:
    transform var(--motion-fast) var(--ease-smooth-soft),
    background var(--motion-fast) var(--ease-smooth-soft),
    box-shadow var(--motion-fast) var(--ease-smooth-soft),
    opacity var(--motion-fast) var(--ease-smooth-soft);
  will-change: transform;
}

.calendar-task-card:hover,
.calendar-task-card:focus-within {
  z-index: 1;
  transform: scale(1.012);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--task-color, var(--blue)) 10%, transparent), transparent 74%);
}

.calendar-task-card.is-calendar-copy-source {
  z-index: 1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--task-color, var(--blue)) 16%, transparent), transparent 78%);
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--task-color, var(--blue)) 76%, var(--text) 24%),
    inset 0 0 0 1px color-mix(in srgb, var(--task-color, var(--blue)) 20%, transparent);
}

.desktop-shell.is-calendar-view .calendar-shell-week .calendar-task-card.is-calendar-selected,
.desktop-shell.is-calendar-view .calendar-shell-week .calendar-task-card.is-calendar-selected:hover,
.desktop-shell.is-calendar-view .calendar-shell-week .calendar-task-card.is-calendar-selected:focus-within {
  z-index: 2;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--task-color, var(--blue)) 20%, transparent), transparent 82%);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--task-color, var(--blue)) 76%, var(--text) 24%),
    inset 4px 0 0 color-mix(in srgb, var(--task-color, var(--blue)) 82%, var(--text) 18%),
    0 0 0 1px color-mix(in srgb, var(--task-color, var(--blue)) 18%, transparent);
}

.calendar-task-card.is-dragging {
  opacity: 0.54;
  cursor: grabbing;
  transform: scale(1);
}

.calendar-task-card.is-calendar-drag-source {
  display: none;
}

.calendar-drop-placeholder {
  min-height: var(--calendar-row-height);
  height: var(--calendar-row-height);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 10%, transparent), transparent 70%);
  box-shadow: none;
}

.calendar-task-card.is-urgent {
  box-shadow: none;
}

.calendar-task-card.is-done {
  cursor: default;
  opacity: 0.72;
}

.calendar-task-card.is-completion-record {
  opacity: 0.86;
}

.calendar-task-card.is-done:hover,
.calendar-task-card.is-done:focus-within {
  background: transparent;
}

.calendar-task-card.is-recurring-occurrence {
  padding-right: 7px;
  cursor: default;
  opacity: 0.84;
}

.calendar-task-card.is-recurring-occurrence:hover,
.calendar-task-card.is-recurring-occurrence:focus-within {
  transform: scale(1);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--task-color, var(--blue)) 8%, transparent), transparent 74%);
}

.calendar-repeat-marker {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: color-mix(in srgb, var(--task-color, var(--blue)) 76%, var(--text) 24%);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.calendar-task-card.is-pressing {
  z-index: 2;
  animation: calendar-card-press 220ms var(--ease-smooth-soft);
}

@keyframes calendar-card-press {
  0% {
    transform: scale(1);
  }

  38% {
    transform: scale(0.982);
  }

  72% {
    transform: scale(1.012);
  }

  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-task-card {
    transition: none;
  }

  .calendar-task-card:hover,
  .calendar-task-card:focus-within,
  .calendar-task-card.is-pressing {
    transform: scale(1);
    animation: none;
  }
}

.calendar-task-card > strong {
  min-width: 0;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 760;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-task-card.is-done > strong {
  justify-self: start;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--task-color, var(--blue)) 18%, var(--surface) 82%);
  color: color-mix(in srgb, var(--muted) 78%, var(--task-color, var(--blue)) 22%);
  text-decoration-line: line-through;
  text-decoration-thickness: 1.4px;
  text-decoration-color: var(--task-color, var(--blue));
  text-decoration-skip-ink: none;
}

.calendar-task-card.is-completion-record > strong {
  background: color-mix(in srgb, var(--task-color, var(--blue)) 22%, var(--surface) 78%);
  color: color-mix(in srgb, var(--text) 52%, var(--task-color, var(--blue)) 48%);
}

.calendar-event-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  gap: 0 7px;
  padding: 4px 7px 4px 9px;
  border-left: 3px solid var(--event-color, #00a6a6);
  border-radius: 7px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--event-color, #00a6a6) 12%, transparent), transparent 76%),
    color-mix(in srgb, var(--surface) 86%, var(--event-color, #00a6a6) 4%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--event-color, #00a6a6) 16%, transparent);
  cursor: default;
  overflow: hidden;
  will-change: transform;
}

.calendar-event-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--event-color, #00a6a6) 48%, transparent);
  outline-offset: -2px;
}

.calendar-event-time {
  grid-column: 1;
  grid-row: 2;
  color: color-mix(in srgb, var(--event-color, #00a6a6) 76%, var(--text) 24%);
  font-size: 10.5px;
  font-weight: 950;
  line-height: 1.1;
  white-space: nowrap;
}

.calendar-event-card > strong {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 860;
  line-height: 1.12;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event-meta {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  color: color-mix(in srgb, var(--muted) 84%, var(--event-color, #00a6a6) 16%);
  font-size: 10.5px;
  font-weight: 760;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-check-button {
  position: relative;
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.calendar-check-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--task-color, var(--blue));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--task-color, var(--blue)) 12%, transparent);
  transform: translate(-50%, -50%);
}

.calendar-check-button:hover::before {
  background: var(--task-color, var(--blue));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--task-color, var(--blue)) 10%, transparent);
}

.calendar-task-card.is-done .calendar-check-button {
  background: transparent;
}

.calendar-task-card.is-done .calendar-check-button::after {
  content: none;
}

.calendar-clear-button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  padding: 0 2px 0 7px;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 86%, var(--text) 14%);
  font-size: 11px;
  font-weight: 900;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-smooth-soft);
}

.calendar-task-card:hover .calendar-clear-button,
.calendar-task-card:focus-within .calendar-clear-button {
  opacity: 1;
  background: transparent;
}

.calendar-empty-note {
  min-height: var(--calendar-row-height);
  height: var(--calendar-row-height);
  display: grid;
  place-items: center start;
  padding-left: 2px;
  border: 0;
  border-radius: 0;
  color: color-mix(in srgb, var(--muted) 74%, transparent);
  font-size: 12px;
  font-weight: 820;
  will-change: transform;
}

.calendar-unscheduled {
  --calendar-unscheduled-rows: 1;
  display: grid;
  gap: 8px;
  align-self: end;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 76%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(90deg, color-mix(in srgb, #ffd60a 4%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface) 94%, #fff7df 6%);
}

.calendar-unscheduled.is-empty {
  gap: 6px;
  padding-block: 8px;
}

.calendar-unscheduled.is-scrollable {
  align-self: stretch;
}

.calendar-unscheduled-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.calendar-unscheduled-header h4 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.calendar-unscheduled-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.calendar-unscheduled-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0 14px;
  max-height: calc(var(--calendar-row-height) * var(--calendar-unscheduled-rows));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.calendar-unscheduled.is-scrollable .calendar-unscheduled-list {
  padding-right: 5px;
}

.calendar-unscheduled.is-empty .calendar-unscheduled-list {
  grid-template-columns: minmax(0, 1fr) minmax(140px, 210px);
}

.calendar-unscheduled.is-empty .calendar-empty-note,
.calendar-unscheduled.is-empty .calendar-add-control {
  min-height: 40px;
  height: 40px;
}

/* styles/09-calendar-add-controls.css */
/* Calendar quick add controls and category picker styles. */

.calendar-add-control {
  --calendar-add-color: var(--blue);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 8px;
  min-height: var(--calendar-row-height);
  height: var(--calendar-row-height);
  margin-top: 0;
  padding: 0 0 0 2px;
  transition:
    background var(--motion-fast) var(--ease-smooth-soft),
    box-shadow var(--motion-fast) var(--ease-smooth-soft);
  will-change: transform;
}

.calendar-add-control input {
  min-height: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-smooth-soft);
}

.calendar-add-control input:focus {
  outline: 0;
  background: transparent;
  opacity: 1;
}

.calendar-add-control button {
  width: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--calendar-add-color) 18%, transparent);
  color: color-mix(in srgb, var(--calendar-add-color) 82%, var(--text) 18%);
  opacity: 0.62;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--calendar-add-color) 24%, transparent);
  touch-action: none;
  transition:
    background var(--motion-fast) var(--ease-smooth-soft),
    color var(--motion-fast) var(--ease-smooth-soft),
    opacity var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-fast) var(--ease-smooth-soft);
}

.calendar-add-category-icon { position: relative; width: 15px; height: 15px; display: block; }
.calendar-add-category-icon::before,
.calendar-add-category-icon::after { content: ""; position: absolute; }
.calendar-add-category-icon::before { left: 1px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, var(--calendar-add-color) 14%, transparent); }
.calendar-add-category-icon::after { right: 1px; top: 4px; width: 5px; height: 5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }

.calendar-day:hover .calendar-add-control input,
.calendar-add-control:focus-within input {
  opacity: 0.58;
}

.calendar-day:hover .calendar-add-control button,
.calendar-add-control:focus-within button,
.calendar-add-control button:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--calendar-add-color) 26%, transparent);
  transform: translateY(-1px);
}

.calendar-add-control.is-calendar-paste-target {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--calendar-add-color) 12%, transparent), transparent 80%);
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--calendar-add-color) 58%, transparent);
}

.calendar-add-control.is-calendar-paste-target input {
  opacity: 0.72;
}

.calendar-add-control.is-calendar-paste-target button {
  opacity: 1;
  background: color-mix(in srgb, var(--calendar-add-color) 32%, transparent);
  transform: translateY(-1px);
}

.calendar-add-category-picker {
  position: fixed;
  z-index: 80;
  display: grid;
  gap: 4px;
  min-width: 158px;
  max-width: min(240px, calc(100vw - 18px));
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%);
  box-shadow:
    0 18px 38px color-mix(in srgb, var(--shadow) 26%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--surface) 84%, transparent);
}

.calendar-add-category-option {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 32px;
  border: 0;
  border-radius: 10px;
  padding: 0 10px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  text-align: left;
}

.calendar-add-category-option:hover,
.calendar-add-category-option.is-selected,
.calendar-add-category-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--category-color) 16%, transparent);
  color: color-mix(in srgb, var(--text) 82%, var(--category-color) 18%);
}

.calendar-add-category-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--category-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--category-color) 14%, transparent);
}

/* styles/09-calendar-detail-popovers.css */
/* Calendar task, event, and occurrence detail popovers. */

.calendar-detail-popover {
  position: fixed;
  left: var(--calendar-detail-left);
  top: var(--calendar-detail-top);
  z-index: 80;
  width: var(--calendar-detail-width);
  max-height: var(--calendar-detail-max-height);
  display: grid;
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--line-soft) 78%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel-strong) 98%, transparent), color-mix(in srgb, var(--surface) 94%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 20px 44px rgba(17, 24, 39, 0.18);
  animation: settingsPanelIn 140ms var(--ease-smooth);
}

.calendar-detail-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
}

.calendar-detail-header strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.calendar-detail-header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.calendar-event-detail-popover {
  border-color: color-mix(in srgb, var(--event-color, #00a6a6) 30%, var(--line-soft) 70%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 20px 44px color-mix(in srgb, var(--event-color, #00a6a6) 12%, rgba(17, 24, 39, 0.18));
}

.calendar-event-detail-title {
  display: block;
  padding: 0 0 2px 10px;
  border-left: 3px solid var(--event-color, #00a6a6);
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.35;
}

.calendar-occurrence-detail-popover {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 30%, var(--line-soft) 70%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 20px 44px color-mix(in srgb, var(--task-color, var(--blue)) 12%, rgba(17, 24, 39, 0.18));
}

.calendar-occurrence-detail-title {
  border-left-color: var(--task-color, var(--blue));
}

.calendar-detail-field {
  display: grid;
  gap: 6px;
}

.calendar-detail-field > span:first-child {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.calendar-detail-field input,
.calendar-detail-field select,
.calendar-detail-field textarea {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--line-soft) 74%, transparent);
  border-radius: 13px;
  padding: 10px 11px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 64%, transparent);
}

.calendar-detail-field textarea {
  min-height: 78px;
  resize: vertical;
}

.calendar-detail-choice-control,
.calendar-detail-date-control {
  position: relative;
  min-width: 0;
  display: block;
}

.calendar-detail-choice-trigger,
.calendar-detail-date-trigger {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 74%, transparent);
  border-radius: 13px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 7%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--text);
  padding: 0 11px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 780;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 64%, transparent);
}

.calendar-detail-choice-trigger::after,
.calendar-detail-date-trigger::after {
  content: "";
  width: 9px;
  height: 9px;
  justify-self: end;
  background: color-mix(in srgb, var(--muted) 74%, var(--text) 26%);
  clip-path: polygon(16% 30%, 50% 64%, 84% 30%, 94% 42%, 50% 84%, 6% 42%);
  transition: transform var(--motion-fast) var(--ease-smooth-soft);
}

.calendar-detail-choice-control.is-open .calendar-detail-choice-trigger::after,
.calendar-detail-date-control.is-open .calendar-detail-date-trigger::after {
  transform: rotate(180deg);
}

.calendar-detail-choice-trigger:hover,
.calendar-detail-date-trigger:hover,
.calendar-detail-choice-trigger[aria-expanded="true"],
.calendar-detail-date-trigger[aria-expanded="true"],
.calendar-detail-choice-trigger:focus-visible,
.calendar-detail-date-trigger:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line-soft) 52%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 64%, transparent),
    0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}

.calendar-detail-choice-trigger-text,
.calendar-detail-date-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-detail-choice-menu,
.calendar-detail-date-picker {
  position: absolute;
  z-index: 92;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line-soft) 82%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 18px 36px rgba(17, 24, 39, 0.18);
  backdrop-filter: blur(18px) saturate(1.08);
}

.calendar-detail-choice-menu[hidden],
.calendar-detail-date-picker[hidden] {
  display: none;
}

.calendar-detail-choice-menu {
  max-height: min(230px, 50vh);
  overflow-y: auto;
}

.calendar-detail-choice-option {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 0 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 820;
}

.calendar-detail-choice-option:hover,
.calendar-detail-choice-option:focus-visible,
.calendar-detail-choice-option[aria-selected="true"] {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 18%, transparent);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--blue) 74%, var(--text) 26%);
}

.calendar-detail-date-header,
.calendar-detail-date-footer {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
}

.calendar-detail-date-header strong {
  text-align: center;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.calendar-detail-date-header button,
.calendar-detail-date-footer button {
  min-height: 30px;
  border: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--button-soft) 80%, var(--surface) 20%);
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.calendar-detail-date-weekdays,
.calendar-detail-date-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.calendar-detail-date-weekdays span {
  color: var(--muted);
  text-align: center;
  font-size: 10px;
  font-weight: 850;
}

.calendar-detail-date-day {
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
}

.calendar-detail-date-day.is-outside-month {
  color: color-mix(in srgb, var(--muted) 56%, transparent);
}

.calendar-detail-date-day:hover,
.calendar-detail-date-day:focus-visible,
.calendar-detail-date-day.is-selected,
.calendar-detail-date-day.is-today {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 20%, transparent);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
}

.calendar-detail-date-day.is-selected {
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 26%, transparent);
}

.calendar-detail-field input:focus,
.calendar-detail-field select:focus,
.calendar-detail-field textarea:focus {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 50%, var(--line-soft) 50%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 64%, transparent),
    0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}

.calendar-event-detail-value {
  display: block;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line-soft) 64%, transparent);
  border-radius: 12px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surface) 88%, var(--event-color, #00a6a6) 5%);
  color: var(--text);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.calendar-event-detail-value.is-multiline {
  max-height: 154px;
  overflow-y: auto;
  white-space: pre-wrap;
}

a.calendar-event-detail-value:hover {
  border-color: color-mix(in srgb, var(--event-color, #00a6a6) 34%, var(--line-soft) 66%);
  color: color-mix(in srgb, var(--event-color, #00a6a6) 74%, var(--text) 26%);
}

.calendar-detail-estimate .calendar-detail-duration {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.calendar-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.calendar-detail-actions button {
  min-height: 34px;
  border: 0;
  border-radius: 12px;
  padding: 0 13px;
  background: color-mix(in srgb, var(--button-soft) 80%, var(--surface) 20%);
  color: var(--muted);
  font-size: 13px;
  font-weight: 920;
}

.calendar-detail-actions button[type="submit"] {
  background: color-mix(in srgb, var(--blue) 16%, var(--surface) 84%);
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
}

.calendar-detail-delete-button {
  margin-right: auto;
  background: color-mix(in srgb, #ff3b30 10%, var(--surface) 90%) !important;
  color: color-mix(in srgb, #ff3b30 78%, var(--text) 22%) !important;
}

.calendar-detail-delete-button:hover {
  background: color-mix(in srgb, #ff3b30 16%, var(--surface) 84%) !important;
}

.calendar-detail-skip-button {
  background: color-mix(in srgb, var(--task-color, var(--blue)) 11%, var(--surface) 89%) !important;
  color: color-mix(in srgb, var(--task-color, var(--blue)) 76%, var(--text) 24%) !important;
}

.calendar-detail-skip-button:hover {
  background: color-mix(in srgb, var(--task-color, var(--blue)) 17%, var(--surface) 83%) !important;
}

/* styles/09-calendar-month-year.css */
/* Calendar month and year views. */

.calendar-month-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: auto;
  background: var(--surface);
}

.calendar-month-weekdays {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(7, minmax(118px, 1fr));
  min-width: 826px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-soft) 4%);
}

.calendar-month-weekdays span {
  min-height: 36px;
  display: grid;
  place-items: center start;
  padding: 0 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 930;
  text-transform: uppercase;
}

.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(118px, 1fr));
  grid-template-rows: repeat(6, minmax(104px, 1fr));
  min-width: 826px;
  min-height: 680px;
  background: color-mix(in srgb, var(--line-soft) 70%, transparent);
  gap: 1px;
}

.calendar-month-day {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
  padding: 8px 9px 8px;
  background: var(--surface);
  overflow: hidden;
}

.calendar-month-day.is-outside-month {
  background: color-mix(in srgb, var(--surface-soft) 54%, var(--surface) 46%);
}

.calendar-month-day.is-today {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 6%, transparent), transparent 58%),
    var(--surface);
}

.calendar-month-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 24px;
}

.calendar-month-day-header strong {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  color: color-mix(in srgb, var(--text) 90%, var(--muted) 10%);
  font-size: 13px;
  font-weight: 930;
  line-height: 1;
}

.calendar-month-day.is-outside-month .calendar-month-day-header strong {
  color: color-mix(in srgb, var(--muted) 76%, transparent);
}

.calendar-month-day.is-today .calendar-month-day-header strong {
  background: color-mix(in srgb, var(--blue) 88%, var(--text) 12%);
  color: white;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--blue) 20%, transparent);
}

.calendar-today-label {
  color: color-mix(in srgb, var(--blue) 76%, var(--text) 24%);
  font-size: 11px;
  font-weight: 920;
}

.calendar-month-day-list {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  overflow: hidden;
}

.calendar-month-chip {
  --month-chip-color: var(--task-color, var(--event-color, var(--blue)));
  min-width: 0;
  min-height: 20px;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 5px;
  padding: 0 6px;
  background: color-mix(in srgb, var(--month-chip-color) 10%, transparent);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--month-chip-color) 16%, transparent);
  cursor: default;
}

.calendar-month-event-chip {
  --month-chip-color: var(--event-color, #00a6a6);
}

.calendar-month-chip.calendar-event-card {
  grid-template-columns: 7px minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 6px;
  padding: 0 6px;
  border-left: 0;
  border-radius: 5px;
  background: color-mix(in srgb, var(--month-chip-color) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--month-chip-color) 16%, transparent);
}

.calendar-month-task-chip {
  --month-chip-color: var(--task-color, var(--blue));
}

.calendar-month-task-chip.is-done {
  opacity: 0.62;
}

.calendar-month-task-chip.is-completion-record {
  background: color-mix(in srgb, var(--month-chip-color) 16%, var(--surface) 84%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--month-chip-color) 24%, transparent);
}

.calendar-month-chip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--month-chip-color) 44%, transparent);
  outline-offset: 1px;
}

.calendar-month-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--month-chip-color);
}

.calendar-month-chip strong,
.calendar-month-chip.calendar-event-card > strong {
  grid-column: auto;
  grid-row: auto;
  min-width: 0;
  color: inherit;
  font-size: 11px;
  font-weight: 830;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-month-more {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  color: color-mix(in srgb, var(--muted) 86%, var(--text) 14%);
  font-size: 11px;
  font-weight: 900;
}

.calendar-shell-year {
  background: color-mix(in srgb, var(--surface-soft) 52%, var(--surface) 48%);
}

.calendar-year-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 16px 24px 24px;
}

.calendar-year-month {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow) 7%, transparent);
}

.calendar-year-month-title {
  justify-self: start;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 9px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.calendar-year-month-title:hover {
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: color-mix(in srgb, var(--blue) 72%, var(--text) 28%);
}

.calendar-year-weekdays,
.calendar-year-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.calendar-year-weekdays span {
  min-height: 18px;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font-size: 10px;
  font-weight: 900;
}

.calendar-year-day,
.calendar-year-day-placeholder {
  aspect-ratio: 1;
  min-width: 0;
}

.calendar-year-day {
  position: relative;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text) 86%, var(--muted) 14%);
  font-size: 11px;
  font-weight: 820;
}

.calendar-year-day:hover {
  background: color-mix(in srgb, var(--surface-soft) 80%, var(--blue) 8%);
}

.calendar-year-day.is-today {
  background: color-mix(in srgb, var(--blue) 88%, var(--text) 12%);
  color: white;
  font-weight: 950;
}

.calendar-year-day.has-calendar-items::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 72%, var(--text) 28%);
  transform: translateX(-50%);
}

.calendar-year-day.is-today.has-calendar-items::after {
  background: white;
}

/* Calendar month/year visual polish. */

.calendar-month-chip,
.calendar-month-chip.calendar-event-card {
  border-radius: 7px;
  color: var(--text-secondary);
}

.calendar-month-more {
  color: var(--text-tertiary);
}

.calendar-year-grid {
  gap: 10px;
}

.calendar-year-month {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.calendar-year-day {
  color: var(--text-secondary);
  font-weight: 760;
}

.calendar-year-day.is-today,
.calendar-month-day.is-today .calendar-month-day-header strong {
  background: color-mix(in srgb, var(--blue) 86%, var(--text) 14%);
  color: #ffffff;
}

/* styles/09-timeline.css */
/* Timeline axis surface. */

/* Archive task grouping surface. */

.archive-group {
  display: grid;
  gap: 8px;
}

.archive-group + .archive-group {
  margin-top: 10px;
}

.archive-group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px 0;
}

.archive-group-header h4 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.archive-group-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.archive-group-count {
  margin-left: auto;
}

.archive-group-toggle {
  min-height: 28px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--button-soft) 82%, var(--surface) 18%);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  padding: 0 10px;
}

.archive-group.is-collapsed {
  gap: 0;
}

.archive-group.is-collapsed .archive-group-header {
  padding-bottom: 2px;
}

.archive-group-body {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows var(--motion-medium) var(--ease-smooth),
    opacity var(--motion-fast) var(--ease-smooth-soft);
}

.archive-group-body.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.archive-group-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.timeline-axis-shell {
  display: grid;
  gap: 14px;
  min-height: 0;
}

.timeline-priority-control,
.timeline-source-control {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 56%, transparent);
}

.timeline-priority-control button,
.timeline-source-control button {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.timeline-priority-control button:hover,
.timeline-priority-control button.is-active,
.timeline-source-control button:hover,
.timeline-source-control button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 9px color-mix(in srgb, var(--shadow) 9%, transparent);
}

.timeline-source-control button:not(.is-active) {
  color: color-mix(in srgb, var(--muted) 82%, var(--text) 18%);
  opacity: 0.72;
}

.timeline-filter-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.timeline-source-control {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.timeline-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 0;
  overflow: hidden;
}

.timeline-summary-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-right: 1px solid color-mix(in srgb, var(--line-soft) 72%, transparent);
}

.timeline-summary-card:last-child {
  border-right: 0;
}

.timeline-summary-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.timeline-summary-card strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.timeline-summary-card.is-today strong {
  color: color-mix(in srgb, var(--blue) 70%, var(--text) 30%);
}

.timeline-summary-card.is-overdue strong {
  color: color-mix(in srgb, var(--danger) 72%, var(--text) 28%);
}

.timeline-axis-list {
  position: relative;
  display: grid;
  gap: 0;
  padding: 4px 0 4px;
}

.timeline-day {
  position: relative;
  display: grid;
  grid-template-columns: 112px 28px minmax(0, 1fr);
  gap: 10px;
  min-height: 84px;
}

.timeline-date-rail {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 3px;
  padding-top: 18px;
  color: var(--muted);
  text-align: right;
}

.timeline-date-rail strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.timeline-date-rail span {
  max-width: 104px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.timeline-track {
  position: relative;
  display: grid;
  justify-items: center;
}

.timeline-track::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-soft) 76%, transparent);
}

.timeline-track-dot {
  position: sticky;
  top: 16px;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-top: 22px;
  border: 3px solid var(--surface);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 54%, var(--line-soft) 46%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line-soft) 80%, transparent);
}

.timeline-day.is-today .timeline-track::before {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--line-soft) 70%, transparent),
    color-mix(in srgb, var(--blue) 42%, var(--line-soft) 58%),
    color-mix(in srgb, var(--line-soft) 70%, transparent)
  );
}

.timeline-day.is-today .timeline-track-dot {
  background: var(--blue);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent),
    0 8px 18px color-mix(in srgb, var(--blue) 22%, transparent);
}

.timeline-day-content {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px 0 14px;
}

.timeline-day-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 0 2px;
}

.timeline-day-header h4 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.timeline-day-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.timeline-now-marker {
  display: grid;
  grid-template-columns: minmax(40px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
}

.timeline-now-line {
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 58%, transparent);
}

.timeline-now-marker strong {
  color: color-mix(in srgb, var(--blue) 70%, var(--text) 30%);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.timeline-node-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.timeline-node-wrap {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.timeline-node-card {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 78%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow) 7%, transparent);
}

.timeline-node-card.task-item {
  margin: 0;
  transform: none;
}

.timeline-node-card.is-kind-ghost {
  border-style: dashed;
  background: color-mix(in srgb, var(--surface-soft) 58%, transparent);
  opacity: 0.82;
}

.timeline-node-card.is-kind-duration,
.timeline-node-card.is-kind-span {
  align-items: start;
}

.timeline-node-card.is-status-overdue {
  border-color: color-mix(in srgb, var(--danger) 24%, var(--line-soft) 76%);
  background: color-mix(in srgb, var(--danger) 5%, var(--surface) 95%);
}

.timeline-node-marker,
.timeline-unscheduled-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--timeline-item-color, var(--blue));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--timeline-item-color, var(--blue)) 13%, transparent);
}

.timeline-node-card.is-source-done .timeline-node-marker {
  border-radius: 3px;
}

.timeline-node-card.is-source-done .timeline-node-marker::after {
  content: "";
  display: block;
  width: 5px;
  height: 3px;
  margin: 2px 0 0 2px;
  border-left: 2px solid var(--surface);
  border-bottom: 2px solid var(--surface);
  transform: rotate(-45deg);
}

.timeline-node-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.timeline-node-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.timeline-node-time,
.timeline-node-label {
  min-height: 20px;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.timeline-node-time {
  background: color-mix(in srgb, var(--timeline-item-color, var(--blue)) 12%, transparent);
  color: color-mix(in srgb, var(--timeline-item-color, var(--blue)) 72%, var(--text) 28%);
}

.timeline-node-label {
  background: color-mix(in srgb, var(--button-soft) 74%, transparent);
  color: color-mix(in srgb, var(--muted) 80%, var(--text) 20%);
}

.timeline-node-body strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.timeline-node-meta {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.timeline-duration-bar {
  display: flex;
  min-width: 0;
  height: 22px;
  margin-top: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--timeline-item-color, var(--blue)) 11%, transparent);
  overflow: hidden;
}

.timeline-duration-bar span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 96px;
  padding: 0 9px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--timeline-item-color, var(--blue)) 22%, transparent);
  color: color-mix(in srgb, var(--timeline-item-color, var(--blue)) 70%, var(--text) 30%);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.timeline-node-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.timeline-node-actions .check-button {
  position: static;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.timeline-node-actions .detail-button {
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 11px;
}

.timeline-task-expanded {
  margin: 0 0 0 26px;
}

.timeline-task-expanded .task-item {
  margin: 0;
}

.timeline-day-empty {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border: 1px dashed color-mix(in srgb, var(--line-soft) 80%, transparent);
  border-radius: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  background: color-mix(in srgb, var(--surface-soft) 42%, transparent);
}

.timeline-gap {
  display: grid;
  grid-template-columns: 112px 28px minmax(0, 1fr);
  gap: 10px;
  min-height: 38px;
  color: var(--muted);
}

.timeline-gap-line {
  grid-column: 2;
  justify-self: center;
  width: 2px;
  border-radius: 999px;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--line-soft) 72%, transparent) 0,
    color-mix(in srgb, var(--line-soft) 72%, transparent) 5px,
    transparent 5px,
    transparent 10px
  );
}

.timeline-gap-label {
  grid-column: 3;
  align-self: center;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 10px;
  background: color-mix(in srgb, var(--surface-soft) 54%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.timeline-unscheduled-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.timeline-unscheduled-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.timeline-unscheduled-header h4 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.timeline-unscheduled-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.timeline-unscheduled-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.timeline-unscheduled-wrap {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.timeline-unscheduled-task {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: 0;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 76%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 42%, var(--surface) 58%);
}

.timeline-unscheduled-task strong,
.timeline-unscheduled-task span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-unscheduled-task strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.timeline-unscheduled-task > span:not(.timeline-unscheduled-dot) {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.timeline-unscheduled-task .detail-button {
  min-height: 28px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 11px;
}

.timeline-unscheduled-empty,
.timeline-unscheduled-more {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border: 1px dashed color-mix(in srgb, var(--line-soft) 80%, transparent);
  border-radius: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  background: color-mix(in srgb, var(--surface-soft) 42%, transparent);
}

@media (max-width: 920px) {
  .timeline-axis-toolbar {
    grid-template-columns: 1fr;
  }

  .timeline-axis-actions,
  .timeline-filter-row {
    align-items: stretch;
    justify-content: start;
    flex-wrap: wrap;
  }

  .timeline-summary {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .timeline-summary-card:nth-child(2n) {
    border-right: 0;
  }

  .timeline-summary-card:nth-child(-n + 2) {
    border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 72%, transparent);
  }

  .timeline-day,
  .timeline-gap {
    grid-template-columns: 76px 24px minmax(0, 1fr);
    gap: 8px;
  }

  .timeline-gap-label {
    grid-column: 3;
  }

  .timeline-date-rail span {
    max-width: 72px;
  }

  .timeline-node-card {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .timeline-node-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

/* styles/09-archive-hub.css */
/* Folder-style archive hub. */

.task-board-main.is-archive-hub-board {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--blue) 9%, transparent), transparent 34%),
    var(--surface);
}

.archive-hub-shell {
  display: grid;
  gap: 16px;
  padding: clamp(16px, 2.2vw, 26px);
}

.archive-hub-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
}

.archive-hub-copy {
  display: grid;
  gap: 5px;
}

.archive-hub-kicker {
  color: color-mix(in srgb, var(--blue) 74%, var(--muted) 26%);
  font-size: 12px;
  font-weight: 900;
}

.archive-hub-copy h4 {
  margin: 0;
  color: var(--text);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 990;
  line-height: 1;
  letter-spacing: -0.04em;
}

.archive-hub-copy span:last-child {
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.archive-hub-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(78px, 1fr));
  gap: 8px;
}

.archive-hub-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-panel) 84%, var(--surface) 16%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent);
}

.archive-hub-metric span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 860;
}

.archive-hub-metric strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 980;
}

.archive-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.archive-folder-card {
  --archive-folder-color: var(--blue);
  min-height: 108px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon body"
    "count count";
  gap: 10px 12px;
  align-items: start;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--archive-folder-color) 22%, var(--line-soft) 78%);
  border-radius: 16px;
  padding: 14px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--archive-folder-color) 16%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--archive-folder-color) 9%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface-card) 94%, var(--archive-folder-color) 6%);
  box-shadow: var(--shadow-card);
}

.archive-folder-card.is-active {
  border-color: color-mix(in srgb, var(--archive-folder-color) 68%, var(--line-soft) 32%);
  box-shadow:
    var(--shadow-card-strong),
    0 0 0 3px color-mix(in srgb, var(--archive-folder-color) 12%, transparent);
}

.archive-folder-icon {
  grid-area: icon;
  width: 34px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px 8px 10px 10px;
  background: color-mix(in srgb, var(--archive-folder-color) 82%, #ffffff 18%);
  color: color-mix(in srgb, var(--archive-folder-color) 30%, #ffffff 70%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--archive-folder-color) 20%, transparent);
}

.archive-folder-body {
  grid-area: body;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.archive-folder-body strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 960;
}

.archive-folder-body small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 740;
  line-height: 1.3;
}

.archive-folder-count {
  grid-area: count;
  color: color-mix(in srgb, var(--archive-folder-color) 78%, var(--text) 22%);
  font-size: 12px;
  font-weight: 910;
}

.archive-subfolder-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-panel) 78%, var(--surface) 22%);
}

.archive-subfolder-button {
  min-height: 34px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface) 30%);
  color: var(--muted);
  font-size: 12px;
  font-weight: 880;
}

.archive-subfolder-button.is-active {
  border-color: color-mix(in srgb, var(--blue) 36%, var(--line-soft) 64%);
  background: color-mix(in srgb, var(--blue) 15%, var(--surface) 85%);
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 7%, transparent);
}

.archive-hub-content {
  display: grid;
  gap: 10px;
}

.archive-hub-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 5px;
  border-bottom: 1px solid var(--line-soft);
}

.archive-hub-content-header h4 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 960;
}

.archive-hub-content-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.archive-hub-list {
  display: grid;
  gap: 9px;
}

.archive-hub-list.is-dates,
.archive-hub-list.is-calendar,
.archive-hub-list.is-achievements,
.archive-hub-list.is-other {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 12px;
}

.archive-record-card {
  --archive-record-color: var(--blue);
  min-height: 112px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--archive-record-color) 25%, var(--line-soft) 75%);
  border-left: 6px solid var(--archive-record-color);
  border-radius: 14px;
  padding: 13px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--archive-record-color) 11%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface-card) 95%, var(--archive-record-color) 5%);
  box-shadow: var(--shadow-card);
}

.archive-record-card strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 930;
  line-height: 1.25;
}

.archive-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.archive-record-meta span {
  border-radius: 999px;
  padding: 4px 7px;
  background: color-mix(in srgb, var(--archive-record-color) 12%, var(--surface-soft) 88%);
  color: color-mix(in srgb, var(--archive-record-color) 48%, var(--muted) 52%);
  font-size: 11px;
  font-weight: 820;
}

.archive-record-card button {
  width: fit-content;
  min-height: 31px;
  border: 1px solid color-mix(in srgb, var(--archive-record-color) 22%, var(--line-soft) 78%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--archive-record-color) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--archive-record-color) 74%, var(--text) 26%);
  font-size: 12px;
  font-weight: 900;
  padding: 0 10px;
}

.archive-hub-empty {
  min-height: 190px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  border: 1px dashed var(--line-soft);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface) 24%);
  color: var(--muted);
}

.archive-hub-empty strong {
  color: var(--text);
  font-size: 17px;
}

@media (max-width: 1100px) {
  .archive-hub-toolbar {
    grid-template-columns: 1fr;
  }

  .archive-hub-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* styles/09-archive-hub-list.css */
/* Refinements for archive hub: fewer visual layers and list-style records. */

.desktop-shell.is-archive-hub-view .workspace-hero,
.desktop-shell.is-archive-hub-view .task-composer {
  display: none;
}

.desktop-shell.is-archive-hub-view .workspace {
  grid-template-rows: minmax(0, 1fr);
}

.desktop-shell.is-archive-hub-view .right-rail {
  display: none;
}

.desktop-shell.is-archive-hub-view .board-grid {
  grid-template-columns: minmax(0, 1fr);
}

.desktop-shell.is-archive-hub-view .main-column {
  min-width: 0;
}

.archive-folder-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.archive-hub-toolbar {
  grid-template-columns: 1fr;
}

.archive-hub-copy,
.archive-hub-content-header,
.archive-folder-body small {
  display: none;
}

.archive-folder-card {
  min-height: 76px;
  grid-template-areas: "icon body" "icon count";
  align-items: center;
  padding: 10px 12px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.archive-subfolder-bar {
  padding: 7px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-panel) 64%, var(--surface) 36%);
}

.archive-subfolder-button {
  min-height: 30px;
  font-size: 11px;
}

.archive-hub-list.archive-list-mode,
.archive-hub-list.archive-list-mode.is-dates,
.archive-hub-list.archive-list-mode.is-calendar,
.archive-hub-list.archive-list-mode.is-achievements,
.archive-hub-list.archive-list-mode.is-other {
  grid-template-columns: 1fr;
  gap: 7px;
}

.archive-list-row {
  --archive-record-color: var(--blue);
  min-width: 0;
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px 8px 0;
  border: 1px solid color-mix(in srgb, var(--archive-record-color) 15%, var(--line-soft) 85%);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-card) 96%, var(--archive-record-color) 4%);
  box-shadow: none;
}

.archive-list-row:hover,
.archive-list-row:focus-within {
  border-color: color-mix(in srgb, var(--archive-record-color) 42%, var(--line-soft) 58%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--archive-record-color) 7%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-card) 96%, var(--archive-record-color) 4%);
}

.archive-list-marker {
  align-self: stretch;
  border-radius: 10px 0 0 10px;
  background: var(--archive-record-color);
  box-shadow: 0 0 14px color-mix(in srgb, var(--archive-record-color) 28%, transparent);
}

.archive-list-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.archive-list-main > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-list-meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.archive-list-meta span {
  max-width: 36ch;
  overflow: hidden;
  border-radius: 999px;
  padding: 3px 7px;
  background: color-mix(in srgb, var(--archive-record-color) 10%, var(--surface-soft) 90%);
  color: color-mix(in srgb, var(--archive-record-color) 44%, var(--muted) 56%);
  font-size: 10px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-row-action {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--archive-record-color) 22%, var(--line-soft) 78%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--archive-record-color) 10%, var(--surface) 90%);
  color: color-mix(in srgb, var(--archive-record-color) 72%, var(--text) 28%);
  font-size: 11px;
  font-weight: 900;
  padding: 0 10px;
  white-space: nowrap;
}

.archive-list-row.task-item {
  cursor: default;
}

.archive-list-row.task-item .restore-button {
  margin: 0;
}

.archive-list-row.task-item::before,
.archive-list-row.task-item::after {
  display: none;
}

@media (max-width: 780px) {
  .archive-list-row {
    grid-template-columns: 5px minmax(0, 1fr);
  }

  .archive-row-action {
    grid-column: 2;
    width: fit-content;
  }

}

/* Timeline archive: the current primary archive surface. */

.task-board-main.is-archive-hub-board {
  background: var(--surface);
}

.desktop-shell.is-archive-hub-view {
  width: calc(100vw / var(--app-shell-scale));
}

.archive-timeline-shell {
  width: 100%;
  max-width: none;
  gap: 12px;
  margin: 0;
  padding: clamp(10px, 1.4vw, 18px) clamp(14px, 2vw, 26px) 22px;
}

.archive-timeline-toolbar {
  display: none;
  justify-content: flex-end;
  min-width: 0;
}

.archive-timeline-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.archive-timeline-metric {
  min-width: 86px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
  align-items: baseline;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 78%, var(--surface) 22%);
}

.archive-timeline-metric span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
  white-space: nowrap;
}

.archive-timeline-metric strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 930;
  line-height: 1;
}

.archive-timeline-filter-bar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 0 8px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 76%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: none;
  backdrop-filter: blur(12px);
  scrollbar-width: none;
}

.archive-timeline-filter-bar::-webkit-scrollbar {
  display: none;
}

.archive-timeline-filter {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.archive-timeline-filter strong {
  color: color-mix(in srgb, var(--muted) 68%, var(--text) 32%);
  font-size: 10px;
  font-weight: 820;
}

.archive-timeline-filter.is-active {
  border-color: color-mix(in srgb, var(--blue) 26%, var(--line-soft) 74%);
  background: color-mix(in srgb, var(--blue) 8%, var(--surface-panel) 92%);
  color: color-mix(in srgb, var(--blue) 66%, var(--text) 34%);
}

.archive-timeline-filter.is-active strong {
  color: color-mix(in srgb, var(--blue) 70%, var(--text) 30%);
}

.archive-timeline-content {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.archive-timeline-group {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.archive-timeline-group-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 3px 0 5px;
  border-bottom: 0;
}

.archive-timeline-group-header strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 830;
}

.archive-timeline-group-header span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
}

.archive-timeline-group-count::before {
  content: "\00b7";
  padding-right: 6px;
  color: color-mix(in srgb, var(--muted) 46%, transparent);
}

.archive-timeline-list {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.archive-timeline-record {
  --archive-record-color: var(--blue);
  min-width: 0;
  display: grid;
  grid-template-columns: 2px minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 4px 6px 4px 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
}

.archive-timeline-record:hover,
.archive-timeline-record:focus-within {
  border-color: color-mix(in srgb, var(--archive-record-color) 14%, var(--line-soft) 86%);
  background: color-mix(in srgb, var(--archive-record-color) 4%, var(--surface-panel) 96%);
}

.archive-timeline-record.is-deleted {
  --archive-record-color: #8e8e93;
}

.archive-timeline-marker {
  align-self: stretch;
  border-radius: 7px;
  background: color-mix(in srgb, var(--archive-record-color) 62%, var(--surface) 38%);
  opacity: 0.82;
}

.archive-timeline-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.archive-timeline-main > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-timeline-meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.archive-timeline-meta span {
  max-width: 34ch;
  overflow: hidden;
  color: color-mix(in srgb, var(--archive-record-color) 22%, var(--muted) 78%);
  font-size: 10px;
  font-weight: 690;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-timeline-meta span + span::before {
  content: "\00b7";
  padding: 0 5px 0 1px;
  color: color-mix(in srgb, var(--muted) 48%, transparent);
}

.archive-timeline-action,
.archive-timeline-record .restore-button {
  min-width: 42px;
  min-height: 26px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: color-mix(in srgb, var(--archive-record-color) 42%, var(--muted) 58%);
  font-size: 11px;
  font-weight: 760;
  padding: 0 8px;
  transform: none;
  white-space: nowrap;
}

.archive-timeline-action:hover,
.archive-timeline-record .restore-button:hover {
  border-color: color-mix(in srgb, var(--archive-record-color) 18%, var(--line-soft) 82%);
  background: color-mix(in srgb, var(--archive-record-color) 7%, var(--surface) 93%);
  color: color-mix(in srgb, var(--archive-record-color) 62%, var(--text) 38%);
  transform: none;
}

.archive-timeline-record.task-item {
  cursor: default;
}

.desktop-shell.is-archive-hub-view .archive-timeline-record.task-item {
  display: grid;
  grid-template-columns: 2px minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 4px 6px 4px 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
}

.desktop-shell.is-archive-hub-view .archive-timeline-record.task-item:hover,
.desktop-shell.is-archive-hub-view .archive-timeline-record.task-item:focus-within {
  border-color: color-mix(in srgb, var(--archive-record-color) 14%, var(--line-soft) 86%);
  background: color-mix(in srgb, var(--archive-record-color) 4%, var(--surface-panel) 96%);
  box-shadow: none;
}

.archive-timeline-record.task-item::before,
.archive-timeline-record.task-item::after {
  display: none;
}

.archive-timeline-empty {
  min-height: 220px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  border: 1px dashed var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-panel) 58%, var(--surface) 42%);
  color: var(--muted);
}

.archive-timeline-empty strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

@media (max-width: 780px) {
  .archive-timeline-shell {
    padding: 8px 8px 14px;
  }

  .archive-timeline-toolbar {
    justify-content: flex-start;
  }

  .archive-timeline-metrics {
    justify-content: flex-start;
  }

  .archive-timeline-metric {
    min-width: 0;
    flex: 1 1 92px;
  }

  .archive-timeline-record {
    grid-template-columns: 2px minmax(0, 1fr);
  }

  .desktop-shell.is-archive-hub-view .archive-timeline-record.task-item {
    grid-template-columns: 2px minmax(0, 1fr);
  }

  .archive-timeline-action,
  .archive-timeline-record .restore-button {
    grid-column: 2;
    justify-self: start;
  }

}

/* styles/09-archive-hub-settlement-detail.css */
/* Archive Hub settlement detail panels. */

.archive-list-row.archive-settlement-row {
  grid-template-columns: 5px minmax(0, 1fr) auto;
}

.archive-settlement-detail {
  grid-column: 2 / -1;
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--archive-record-color) 7%, var(--surface) 93%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--archive-record-color) 14%, transparent);
}

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

.archive-settlement-detail-header {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.archive-settlement-detail-header > strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.archive-settlement-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.archive-settlement-metric {
  display: grid;
  gap: 2px;
  min-width: 76px;
  padding: 6px 8px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-card) 88%, var(--archive-record-color) 12%);
}

.archive-settlement-metric small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
}

.archive-settlement-metric strong {
  color: color-mix(in srgb, var(--archive-record-color) 56%, var(--text) 44%);
  font-size: 13px;
  font-weight: 920;
}

.archive-settlement-overview {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--archive-record-color) 9%, var(--surface-card) 91%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 740;
  line-height: 1.45;
}

.archive-settlement-highlights {
  display: grid;
  gap: 7px;
}

.archive-settlement-highlights > strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.archive-settlement-highlight-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.archive-settlement-highlight-card {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 7px 8px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-card) 91%, var(--archive-record-color) 9%);
}

.archive-settlement-highlight-card span,
.archive-settlement-highlight-card small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-settlement-highlight-card strong {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--archive-record-color) 58%, var(--text) 42%);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-settlement-task-list {
  display: grid;
  gap: 6px;
  max-height: min(340px, 42vh);
  overflow: auto;
  padding-right: 2px;
}

.archive-settlement-task-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 4px minmax(0, 1.1fr) minmax(160px, 0.9fr);
  gap: 9px;
  align-items: center;
  min-height: 36px;
  padding: 6px 8px 6px 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-card) 92%, var(--archive-record-color) 8%);
}

.archive-settlement-task-marker {
  align-self: stretch;
  border-radius: 9px 0 0 9px;
  background: var(--archive-record-color);
}

.archive-settlement-task-row > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  text-decoration: line-through;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-settlement-task-meta {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}

.archive-settlement-task-meta span {
  max-width: 22ch;
  overflow: hidden;
  border-radius: 999px;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--archive-record-color) 10%, var(--surface-soft) 90%);
  color: color-mix(in srgb, var(--archive-record-color) 44%, var(--muted) 56%);
  font-size: 10px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-timeline-record .archive-settlement-detail {
  grid-column: 2 / -1;
  margin-top: 4px;
}

@media (max-width: 780px) {
  .archive-settlement-detail {
    grid-column: 2;
  }

  .archive-settlement-detail-header {
    align-items: stretch;
    flex-direction: column;
  }

  .archive-settlement-task-row {
    grid-template-columns: 4px minmax(0, 1fr);
  }

  .archive-settlement-metrics,
  .archive-settlement-task-meta {
    justify-content: flex-start;
  }

  .archive-settlement-highlight-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-settlement-task-meta,
  .archive-timeline-record .archive-settlement-detail {
    grid-column: 2;
  }
}

/* styles/09-archive-hub-timeline-clarity.css */
/* Archive Hub timeline clarity: history summary, search, quieter restore actions. */

.desktop-shell.is-archive-hub-view .archive-timeline-shell {
  width: min(100%, 1480px);
  max-width: calc(100vw - 44px);
  margin: 0 auto;
  gap: 14px;
  padding: clamp(12px, 1.5vw, 20px) clamp(18px, 2.3vw, 30px) 28px;
}

.archive-timeline-summary {
  display: grid;
  grid-template-columns: minmax(160px, 1.1fr) minmax(140px, 0.9fr) minmax(140px, 0.9fr) minmax(190px, 1.35fr);
  gap: 10px;
  padding: 0 0 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 76%, transparent);
}

.archive-timeline-summary-item {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 0 12px;
  border-left: 1px solid color-mix(in srgb, var(--line-soft) 84%, transparent);
}

.archive-timeline-summary-item:first-child {
  border-left-color: color-mix(in srgb, var(--blue) 38%, var(--line-soft) 62%);
}

.archive-timeline-summary-item span {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 820;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-timeline-summary-item strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-timeline-summary-item small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 710;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-timeline-controls {
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  gap: 8px;
  padding: 0 0 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(12px);
}

.archive-timeline-controls .archive-timeline-filter-bar {
  position: static;
  z-index: auto;
  padding: 0;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
}

.archive-timeline-filter { min-height: 30px; border-radius: 8px; color: var(--text-secondary); font-size: 13px; font-weight: 800; }
.archive-timeline-filter-icon { width: 14px; height: 14px; display: inline-block; flex: 0 0 14px; background: currentColor; opacity: 0.78; -webkit-mask: var(--archive-filter-icon-mask) center / contain no-repeat; mask: var(--archive-filter-icon-mask) center / contain no-repeat; }
.archive-timeline-filter[data-archive-timeline-filter="tasks"] { --archive-filter-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13'/%3E%3Cpath d='m3 6 1 1 2-2M3 12l1 1 2-2M3 18l1 1 2-2'/%3E%3C/svg%3E"); }
.archive-timeline-filter[data-archive-timeline-filter="deleted"] { --archive-filter-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3Cpath d='M10 11v5M14 11v5'/%3E%3C/svg%3E"); }
.archive-timeline-filter[data-archive-timeline-filter="countdays"] { --archive-filter-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10M7 21h10M8 3v4.5c0 2.2 1.8 3.3 4 4.5 2.2 1.2 4 2.3 4 4.5V21M16 3v4.5c0 2.2-1.8 3.3-4 4.5-2.2 1.2-4 2.3-4 4.5V21'/%3E%3C/svg%3E"); }
.archive-timeline-filter[data-archive-timeline-filter="calendar"] { --archive-filter-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17M8 14h3M13 14h3M8 17h3'/%3E%3C/svg%3E"); }
.archive-timeline-filter[data-archive-timeline-filter="settlements"] { --archive-filter-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10M8 20V9h8v11M6 9h12l-1-5H7L6 9Z'/%3E%3Cpath d='M9.5 13h5M9.5 16h5'/%3E%3C/svg%3E"); }

.archive-timeline-filter:hover,
.archive-timeline-filter:focus-visible {
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--surface-card) 68%, transparent);
  color: var(--text);
}

.archive-timeline-filter.is-active {
  border-color: color-mix(in srgb, var(--blue) 32%, var(--line-soft) 68%);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-panel) 90%);
  color: color-mix(in srgb, var(--blue) 58%, var(--text) 42%);
}

.archive-timeline-utility-bar {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(180px, 0.36fr) auto;
  gap: 8px;
  align-items: center;
}

.archive-timeline-search,
.archive-timeline-date-jump {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 7px 0 9px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 84%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-panel) 76%, var(--surface) 24%);
}

.archive-timeline-search > span,
.archive-timeline-date-jump > span,
.archive-timeline-result-count {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 820;
  white-space: nowrap;
}

.archive-timeline-search > .archive-timeline-field-label { color: var(--text-secondary); font-size: 12px; font-weight: 880; }
.archive-timeline-date-jump > .archive-timeline-field-label { color: var(--text-secondary); font-size: 11px; }

.archive-timeline-search input,
.archive-timeline-date-jump input {
  min-width: 0;
  min-height: 28px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
}

.archive-timeline-search input::placeholder {
  color: color-mix(in srgb, var(--muted) 46%, transparent);
  font-weight: 620;
}

.archive-timeline-search-clear,
.archive-timeline-date-jump button {
  min-height: 24px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  padding: 0 6px;
}

.archive-timeline-search-clear:hover,
.archive-timeline-date-jump button:hover,
.archive-timeline-search-clear:focus-visible,
.archive-timeline-date-jump button:focus-visible {
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--surface-card) 72%, transparent);
  color: var(--text);
}

.archive-timeline-result-count {
  justify-self: end;
  color: var(--text-secondary);
}

.archive-timeline-content {
  gap: 18px;
}

.archive-timeline-group {
  gap: 4px;
  scroll-margin-top: 96px;
}

.archive-timeline-group-header {
  position: sticky;
  top: 76px;
  z-index: 3;
  gap: 8px;
  padding: 6px 0 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 64%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(10px);
}

.archive-timeline-group-header strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.archive-timeline-group-header span {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 780;
}

.archive-timeline-group.is-date-target .archive-timeline-group-header {
  background: color-mix(in srgb, var(--blue) 9%, var(--surface) 91%);
}

.archive-timeline-list {
  gap: 3px;
}

.archive-timeline-record,
.desktop-shell.is-archive-hub-view .archive-timeline-record.task-item {
  grid-template-columns: 2px minmax(0, 1fr) max-content;
  gap: 12px;
  min-height: 44px;
  padding: 5px 7px 5px 0;
  border-radius: 8px;
}

.archive-timeline-record:hover,
.archive-timeline-record:focus-within,
.desktop-shell.is-archive-hub-view .archive-timeline-record.task-item:hover,
.desktop-shell.is-archive-hub-view .archive-timeline-record.task-item:focus-within {
  border-color: color-mix(in srgb, var(--archive-record-color) 18%, var(--line-soft) 82%);
  background: color-mix(in srgb, var(--archive-record-color) 4%, var(--surface-panel) 96%);
}

.archive-timeline-head {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.archive-timeline-type {
  max-width: 7em;
  overflow: hidden;
  color: color-mix(in srgb, var(--archive-record-color) 44%, var(--text-secondary) 56%);
  font-size: 10px;
  font-weight: 820;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-timeline-head > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-timeline-time {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.archive-timeline-main > strong {
  display: none;
}

.archive-timeline-meta span {
  color: color-mix(in srgb, var(--archive-record-color) 18%, var(--text-tertiary) 82%);
  font-size: 11px;
  font-weight: 700;
}

.archive-timeline-action,
.archive-timeline-record .restore-button {
  min-width: 30px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: color-mix(in srgb, var(--archive-record-color) 38%, var(--text-tertiary) 62%);
}

.archive-timeline-action-icon {
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.archive-timeline-record .restore-button {
  opacity: 0.24;
  transition: opacity 140ms ease, color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.archive-timeline-record:hover .restore-button,
.archive-timeline-record:focus-within .restore-button {
  opacity: 1;
}

.archive-timeline-record .restore-button .archive-timeline-action-label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 140ms ease, opacity 140ms ease;
}

.archive-timeline-record:hover .restore-button .archive-timeline-action-label,
.archive-timeline-record:focus-within .restore-button .archive-timeline-action-label {
  max-width: 5em;
  opacity: 1;
}

html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-archive-hub-view {
  --archive-minimal-line: rgba(236, 243, 255, 0.08);
  --archive-minimal-line-strong: rgba(236, 243, 255, 0.16);
  --archive-minimal-muted: rgba(220, 232, 248, 0.48);
}

html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-archive-hub-view .archive-timeline-shell,
html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-archive-hub-view .archive-timeline-controls,
html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-archive-hub-view .archive-timeline-group-header {
  background: color-mix(in srgb, var(--surface) 97%, #132238 3%);
}

html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-archive-hub-view .archive-timeline-summary,
html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-archive-hub-view .archive-timeline-controls,
html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-archive-hub-view .archive-timeline-group-header {
  border-color: var(--archive-minimal-line);
}

html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-archive-hub-view .archive-timeline-search,
html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-archive-hub-view .archive-timeline-date-jump {
  border-color: var(--archive-minimal-line);
  background: color-mix(in srgb, var(--surface-panel) 70%, #17253a 30%);
}

html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-archive-hub-view .archive-timeline-marker {
  background: color-mix(in srgb, var(--archive-record-color) 54%, #202a36 46%);
  box-shadow: none;
}

html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-archive-hub-view .archive-timeline-meta span,
html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-archive-hub-view .archive-timeline-summary-item small,
html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-archive-hub-view .archive-timeline-time {
  color: var(--archive-minimal-muted);
}

@media (max-width: 980px) {
  .desktop-shell.is-archive-hub-view .archive-timeline-shell {
    max-width: calc(100vw - 24px);
  }

  .archive-timeline-summary,
  .archive-timeline-utility-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-timeline-result-count {
    justify-self: start;
  }
}

@media (max-width: 780px) {
  .desktop-shell.is-archive-hub-view .archive-timeline-shell {
    width: 100%;
    max-width: 100%;
    padding: 8px 10px 16px;
  }

  .archive-timeline-summary,
  .archive-timeline-utility-bar {
    grid-template-columns: 1fr;
  }

  .archive-timeline-controls,
  .archive-timeline-group-header {
    position: static;
  }

  .archive-timeline-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .archive-timeline-time {
    grid-column: 2;
  }

  .archive-timeline-record .restore-button {
    opacity: 1;
  }

  .archive-timeline-record .restore-button .archive-timeline-action-label {
    max-width: 5em;
    opacity: 1;
  }
}

/* styles/09-archive-hub-date-range.css */
/* Archive Hub scoped date range picker. */

.desktop-shell.is-archive-hub-view .archive-date-range-control {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
}

.desktop-shell.is-archive-hub-view .archive-date-range-trigger {
  min-width: 0;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 780;
  padding: 0 4px;
  text-align: left;
}

.desktop-shell.is-archive-hub-view .archive-date-range-trigger:hover,
.desktop-shell.is-archive-hub-view .archive-date-range-trigger:focus-visible {
  background: color-mix(in srgb, var(--surface-card) 64%, transparent);
  outline: 0;
}

.desktop-shell.is-archive-hub-view .archive-date-range-trigger strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-shell.is-archive-hub-view .archive-date-range-icon {
  color: var(--text-tertiary);
  font-size: 11px;
}

.desktop-shell.is-archive-hub-view .archive-date-range-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: min(310px, calc(100vw - 36px));
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-panel) 94%, var(--surface) 6%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18), var(--shadow-card);
}

.desktop-shell.is-archive-hub-view .archive-date-range-header,
.desktop-shell.is-archive-hub-view .archive-date-range-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.desktop-shell.is-archive-hub-view .archive-date-range-header strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}

.desktop-shell.is-archive-hub-view .archive-date-range-nav,
.desktop-shell.is-archive-hub-view .archive-date-range-footer button {
  min-width: 32px;
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 820;
  padding: 0 9px;
}

.desktop-shell.is-archive-hub-view .archive-date-range-nav:hover,
.desktop-shell.is-archive-hub-view .archive-date-range-nav:focus-visible,
.desktop-shell.is-archive-hub-view .archive-date-range-footer button:hover,
.desktop-shell.is-archive-hub-view .archive-date-range-footer button:focus-visible {
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--surface-card) 74%, transparent);
  color: var(--text);
}

.desktop-shell.is-archive-hub-view .archive-date-range-weekdays,
.desktop-shell.is-archive-hub-view .archive-date-range-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.desktop-shell.is-archive-hub-view .archive-date-range-weekdays span {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 850;
  text-align: center;
}

.desktop-shell.is-archive-hub-view .archive-date-range-day {
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 780;
}

.desktop-shell.is-archive-hub-view .archive-date-range-day:hover,
.desktop-shell.is-archive-hub-view .archive-date-range-day:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line-soft) 72%);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%);
  color: var(--text);
}

.desktop-shell.is-archive-hub-view .archive-date-range-day.is-outside-month {
  color: color-mix(in srgb, var(--text-tertiary) 54%, transparent);
}

.desktop-shell.is-archive-hub-view .archive-date-range-day.is-in-range {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%);
  color: var(--text);
}

.desktop-shell.is-archive-hub-view .archive-date-range-day.is-range-start,
.desktop-shell.is-archive-hub-view .archive-date-range-day.is-range-end {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  background: color-mix(in srgb, var(--accent) 24%, var(--surface) 76%);
  color: var(--text);
}

.desktop-shell.is-archive-hub-view .archive-date-range-day.is-today:not(.is-range-start):not(.is-range-end) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent);
}

.desktop-shell.is-archive-hub-view .archive-date-range-footer button.is-primary {
  border-color: color-mix(in srgb, var(--accent) 36%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface) 82%);
  color: color-mix(in srgb, var(--accent) 70%, var(--text) 30%);
}

@media (max-width: 720px) {
  .desktop-shell.is-archive-hub-view .archive-date-range-popover {
    left: 0;
    right: auto;
  }
}

/* styles/18-favor-debts.css */
/* Favor-debt ledger view and horizontal person chart. */

.desktop-shell.is-favor-view .workspace-hero,
.desktop-shell.is-favor-view .task-composer,
.desktop-shell.is-favor-view .right-rail {
  display: none;
}

.desktop-shell.is-favor-view .workspace {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.desktop-shell.is-favor-view .board-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 100%;
}

.desktop-shell.is-favor-view .main-column {
  min-height: 100%;
}

.task-board-main.is-favor-board {
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
  border-radius: 0;
  border: 0;
  background: var(--surface);
  box-shadow: none;
}

.task-board-main.is-favor-board .board-header {
  display: none;
}

.task-board-main.is-favor-board .task-list {
  overflow: auto;
  padding-right: 0;
}

.favor-debt-shell {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
}

.favor-debt-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 64%, transparent);
}

.favor-debt-title {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
}

.favor-debt-kicker {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.favor-debt-title h4 {
  margin: 0;
  color: var(--text);
  font-size: 28px;
  font-weight: 950;
}

.favor-debt-title > span:not(.favor-debt-kicker) {
  max-width: 720px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.45;
}

.favor-debt-toolbar-side {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 10px;
}

.favor-debt-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, auto));
  gap: 10px;
  align-content: center;
}

.favor-debt-metric {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  padding: 10px 12px;
}

.favor-debt-metric span,
.favor-debt-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.favor-debt-metric strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favor-heart-unit-field {
  width: min(230px, 100%);
}

.favor-heart-unit-field small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
}

.favor-heart-unit-field input {
  text-align: right;
}

.favor-debt-form {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-panel-muted) 72%, transparent);
  padding: 14px;
}

.favor-debt-form > strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 930;
}

.favor-debt-form-grid {
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(130px, 1fr)
    minmax(92px, 0.55fr)
    minmax(92px, 0.55fr)
    minmax(128px, 0.68fr)
    minmax(110px, 0.55fr)
    minmax(130px, 1fr);
  gap: 10px;
}

.favor-debt-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.favor-debt-field-event,
.favor-debt-field-my-situation,
.favor-debt-field-note {
  grid-column: span 2;
}

.favor-debt-field input,
.favor-debt-field select,
.favor-debt-field textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 80%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  padding: 8px 10px;
}

.favor-debt-field textarea {
  min-height: 54px;
  max-height: 110px;
  resize: vertical;
}

.favor-debt-field input:focus,
.favor-debt-field select:focus,
.favor-debt-field textarea:focus {
  border-color: color-mix(in srgb, var(--blue) 54%, var(--line-soft) 46%);
  outline: none;
}

.favor-choice-control,
.favor-date-control {
  position: relative;
  min-width: 0;
  display: block;
}

.favor-choice-trigger,
.favor-date-trigger {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 80%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 7%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
  padding: 0 10px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 780;
}

.favor-choice-trigger::after,
.favor-date-trigger::after {
  content: "";
  width: 9px;
  height: 9px;
  justify-self: end;
  background: color-mix(in srgb, var(--muted) 74%, var(--text) 26%);
  clip-path: polygon(16% 30%, 50% 64%, 84% 30%, 94% 42%, 50% 84%, 6% 42%);
  transition: transform var(--motion-fast) var(--ease-smooth-soft);
}

.favor-choice-control.is-open .favor-choice-trigger::after,
.favor-date-control.is-open .favor-date-trigger::after {
  transform: rotate(180deg);
}

.favor-choice-trigger:hover,
.favor-date-trigger:hover,
.favor-choice-trigger[aria-expanded="true"],
.favor-date-trigger[aria-expanded="true"],
.favor-choice-trigger:focus-visible,
.favor-date-trigger:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 46%, var(--line-soft) 54%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}

.favor-choice-trigger-text,
.favor-date-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favor-choice-menu,
.favor-date-picker {
  position: absolute;
  z-index: 54;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line-soft) 82%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 18px 36px rgba(17, 24, 39, 0.18);
  backdrop-filter: blur(18px) saturate(1.08);
}

.favor-choice-menu[hidden],
.favor-date-picker[hidden] {
  display: none;
}

.favor-choice-option {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 0 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 820;
}

.favor-choice-option:hover,
.favor-choice-option:focus-visible,
.favor-choice-option[aria-selected="true"] {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 18%, transparent);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--blue) 74%, var(--text) 26%);
}

.favor-date-header,
.favor-date-footer {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
}

.favor-date-footer {
  grid-template-columns: 1fr;
}

.favor-date-header strong {
  text-align: center;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.favor-date-header button,
.favor-date-footer button {
  min-height: 30px;
  border: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--button-soft) 80%, var(--surface) 20%);
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.favor-date-weekdays,
.favor-date-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.favor-date-weekdays span {
  color: var(--muted);
  text-align: center;
  font-size: 10px;
  font-weight: 850;
}

.favor-date-day {
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
}

.favor-date-day.is-outside-month {
  color: color-mix(in srgb, var(--muted) 56%, transparent);
}

.favor-date-day:hover,
.favor-date-day:focus-visible,
.favor-date-day.is-selected,
.favor-date-day.is-today {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 20%, transparent);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
}

.favor-date-day.is-selected {
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 26%, transparent);
}

.favor-debt-actions,
.favor-entry-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.favor-debt-submit,
.favor-debt-cancel {
  min-height: 38px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 920;
  padding: 0 16px;
  white-space: nowrap;
}

.favor-debt-submit {
  border: 0;
  background: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  color: white;
}

.favor-debt-cancel {
  border: 1px solid color-mix(in srgb, var(--line-soft) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--muted);
}

.favor-debt-chart {
  display: grid;
  gap: 12px;
  align-content: start;
}

.favor-person-group {
  position: relative;
  display: grid;
  border: 1px solid color-mix(in srgb, var(--line-soft) 72%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-panel) 82%, transparent);
  overflow: hidden;
}

.favor-person-group::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  width: 76px;
  height: 10px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 72%, transparent);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
}

.favor-person-group[data-urgency="high"],
.favor-person-group[data-urgency="urgent"] {
  border-color: color-mix(in srgb, #ff9f0a 26%, var(--line-soft) 74%);
}

.favor-person-folder-button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 18px 14px 14px;
  text-align: left;
}

.favor-person-folder-button:hover {
  background: color-mix(in srgb, var(--surface-soft) 44%, transparent);
}

.favor-person-identity {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.favor-person-identity strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favor-person-identity span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favor-person-total {
  max-width: 280px;
  overflow: hidden;
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favor-heart-badge {
  min-width: 54px;
  border: 1px solid color-mix(in srgb, #ff2d55 24%, var(--line-soft) 76%);
  border-radius: 999px;
  background: color-mix(in srgb, #ff2d55 10%, var(--surface) 90%);
  color: color-mix(in srgb, #ff2d55 82%, var(--text) 18%);
  font-size: 12px;
  font-weight: 950;
  padding: 5px 9px;
  text-align: center;
  white-space: nowrap;
}

.favor-person-bar {
  grid-column: 1 / -1;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-soft) 44%, transparent);
}

.favor-person-bar-fill {
  width: var(--favor-bar-width, 4%);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #0a84ff, #34c759 58%, #ff9f0a);
}

.favor-person-body {
  display: grid;
  gap: 8px;
  border-top: 1px solid color-mix(in srgb, var(--line-soft) 58%, transparent);
  padding: 0 14px 14px;
}

.favor-person-body[hidden] {
  display: none;
}

.favor-entry-list {
  display: grid;
  gap: 8px;
}

.favor-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-top: 10px;
}

.favor-entry-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.favor-entry-top {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.favor-entry-top strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favor-entry-top span {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.favor-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.favor-entry-meta span,
.favor-urgency-chip {
  max-width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  padding: 4px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favor-entry[data-urgency="high"] .favor-urgency-chip {
  background: color-mix(in srgb, #ff9f0a 14%, transparent);
  color: #b45309;
}

.favor-entry[data-urgency="urgent"] .favor-urgency-chip {
  background: color-mix(in srgb, #ff453a 14%, transparent);
  color: #dc2626;
}

.favor-entry-edit,
.favor-entry-delete {
  min-height: 32px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 900;
  padding: 0 10px;
}

.favor-entry-edit {
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line-soft) 76%);
  background: color-mix(in srgb, var(--blue) 8%, var(--surface) 92%);
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
}

.favor-entry-delete {
  border: 1px solid color-mix(in srgb, #ff453a 26%, var(--line-soft) 74%);
  background: color-mix(in srgb, #ff453a 8%, var(--surface) 92%);
  color: color-mix(in srgb, #ff453a 80%, var(--text) 20%);
}

.favor-debt-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed color-mix(in srgb, var(--line-soft) 80%, transparent);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}

.favor-debt-empty strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
}

@media (max-width: 1180px) {
  .favor-debt-toolbar {
    grid-template-columns: 1fr;
  }

  .favor-debt-toolbar-side {
    justify-items: stretch;
  }

  .favor-heart-unit-field {
    width: 100%;
  }

  .favor-debt-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .favor-debt-field-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .favor-debt-shell {
    padding: 14px;
  }

  .favor-debt-metrics,
  .favor-debt-form-grid {
    grid-template-columns: 1fr;
  }

  .favor-debt-field-event,
  .favor-debt-field-my-situation,
  .favor-debt-field-note {
    grid-column: 1 / -1;
  }

  .favor-person-folder-button,
  .favor-entry {
    grid-template-columns: 1fr;
  }

  .favor-person-total,
  .favor-heart-badge,
  .favor-entry-actions {
    justify-self: start;
  }

  .favor-entry-actions {
    justify-content: flex-start;
  }
}

/* styles/19-count-days.css */
/* Countdown/start-day dashboard view. */

.desktop-shell.is-count-days-view .workspace-hero,
.desktop-shell.is-count-days-view .task-composer,
.desktop-shell.is-count-days-view .right-rail {
  display: none;
}

.desktop-shell.is-count-days-view .workspace {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.desktop-shell.is-count-days-view .board-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 100%;
}

.desktop-shell.is-count-days-view .main-column {
  min-height: 100%;
}

.task-board-main.is-count-days-board {
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
  border-radius: 0;
  border: 0;
  background: var(--surface);
  box-shadow: none;
}

.task-board-main.is-count-days-board .board-header {
  display: none;
}

.task-board-main.is-count-days-board .task-list {
  overflow: auto;
  padding-right: 0;
}

.count-day-shell {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 16px;
  padding: clamp(20px, 3vw, 34px);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--blue) 10%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 6%, transparent), transparent 42%),
    var(--surface);
}

.count-day-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title actions"
    "metrics metrics"
    "filters filters";
  gap: 14px 18px;
  align-items: start;
}

.count-day-title {
  grid-area: title;
  min-width: 0;
  display: grid;
  gap: 5px;
}

.count-day-kicker {
  color: color-mix(in srgb, var(--blue) 72%, var(--muted) 28%);
  font-size: 12px;
  font-weight: 850;
}

.count-day-title h4 {
  margin: 0;
  color: var(--text);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 980;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.count-day-title span:last-child {
  max-width: 760px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.45;
}

.count-day-toolbar-actions {
  grid-area: actions;
  display: inline-flex;
  justify-content: flex-end;
}

.count-day-toggle-form {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line-soft) 72%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 18%, var(--surface) 82%);
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  font-size: 13px;
  font-weight: 940;
  padding: 0 14px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--blue) 8%, transparent);
}

.count-day-metrics {
  grid-area: metrics;
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(110px, 0.52fr));
  gap: 10px;
}

.count-day-metric {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 86%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-soft) 78%, transparent), transparent),
    color-mix(in srgb, var(--surface-panel) 78%, var(--surface) 22%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 8px 18px rgba(17, 24, 39, 0.05);
}

.count-day-metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 860;
}

.count-day-metric strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(18px, 1.45vw, 24px);
  font-weight: 980;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.count-day-metric small {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%);
  font-size: 11px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.count-day-filters {
  grid-area: filters;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.count-day-filter {
  min-height: 32px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface) 30%);
  color: var(--muted);
  font-size: 12px;
  font-weight: 890;
  padding: 0 12px;
}

.count-day-filter.is-active {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line-soft) 66%);
  background: color-mix(in srgb, var(--blue) 15%, var(--surface) 85%);
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 7%, transparent);
}

.count-day-filter-result {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.count-day-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 0.48fr) minmax(280px, 1.05fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line-soft) 84%);
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 7%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface-panel) 90%, var(--surface) 10%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent),
    0 12px 26px rgba(17, 24, 39, 0.06);
}

.count-day-form[hidden] {
  display: none;
}

.count-day-form-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 2px;
}

.count-day-form-header h5 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 940;
}

.count-day-mode-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.count-day-mode-field > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.count-day-mode-options {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
}

.count-day-mode-options label {
  position: relative;
  display: inline-grid;
}

.count-day-mode-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.count-day-mode-options span {
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 870;
}

.count-day-mode-options input:checked + span {
  background: color-mix(in srgb, var(--blue) 16%, var(--surface) 84%);
  color: color-mix(in srgb, var(--blue) 76%, var(--text) 24%);
}

.count-day-field {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.count-day-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 860;
}

.count-day-field input,
.count-day-field textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  padding: 0 12px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent);
}

.count-day-field textarea {
  min-height: 40px;
  padding-block: 9px;
  resize: vertical;
}

.count-day-date-control {
  position: relative;
  min-width: 0;
  display: block;
}

.count-day-date-trigger {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 7%, transparent), transparent 72%),
    var(--surface);
  color: var(--text);
  padding: 0 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent);
}

.count-day-date-trigger::after {
  content: "";
  width: 9px;
  height: 9px;
  justify-self: end;
  background: color-mix(in srgb, var(--muted) 74%, var(--text) 26%);
  clip-path: polygon(16% 30%, 50% 64%, 84% 30%, 94% 42%, 50% 84%, 6% 42%);
  transition: transform var(--motion-fast) var(--ease-smooth-soft);
}

.count-day-date-control.is-open .count-day-date-trigger::after {
  transform: rotate(180deg);
}

.count-day-date-trigger:hover,
.count-day-date-trigger[aria-expanded="true"],
.count-day-date-trigger:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 46%, var(--line-soft) 54%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent),
    0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}

.count-day-date-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.count-day-date-picker {
  position: absolute;
  z-index: 56;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line-soft) 82%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 18px 36px rgba(17, 24, 39, 0.18);
  backdrop-filter: blur(18px) saturate(1.08);
}

.count-day-date-picker[hidden] {
  display: none;
}

.count-day-date-header,
.count-day-date-footer {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
}

.count-day-date-footer {
  grid-template-columns: 1fr;
}

.count-day-date-header strong {
  text-align: center;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.count-day-date-header button,
.count-day-date-footer button {
  min-height: 30px;
  border: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--button-soft) 80%, var(--surface) 20%);
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.count-day-date-weekdays,
.count-day-date-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.count-day-date-weekdays span {
  color: var(--muted);
  text-align: center;
  font-size: 10px;
  font-weight: 850;
}

.count-day-date-day {
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
}

.count-day-date-day.is-outside-month {
  color: color-mix(in srgb, var(--muted) 56%, transparent);
}

.count-day-date-day:hover,
.count-day-date-day:focus-visible,
.count-day-date-day.is-selected,
.count-day-date-day.is-today {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 20%, transparent);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
}

.count-day-date-day.is-selected {
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 26%, transparent);
}

.count-day-note-field {
  grid-column: var(--count-day-note-column, auto);
  min-width: var(--count-day-note-min-width, min(300px, 100%));
}

.count-day-form-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 8px;
}

.count-day-submit,
.count-day-cancel,
.count-day-actions button {
  min-height: 36px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
  padding: 0 12px;
}

.count-day-submit {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line-soft) 72%);
  background: color-mix(in srgb, var(--blue) 18%, var(--surface) 82%);
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
}

.count-day-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 18px;
}

.count-day-group {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.count-day-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-inline: 2px;
}

.count-day-group-header h5 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
}

.count-day-group-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.count-day-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(390px, 100%), 1fr));
  gap: 12px;
}

.count-day-card {
  --count-day-color: var(--blue);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main number"
    "actions actions";
  gap: 12px 14px;
  align-items: center;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--count-day-color) 24%, var(--line-soft) 76%);
  border-left: 5px solid var(--count-day-color);
  border-radius: 14px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--count-day-color) 9%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface-card) 96%, var(--count-day-color) 4%);
  box-shadow: var(--shadow-card);
}

.count-day-card.is-past {
  border-color: color-mix(in srgb, var(--danger) 24%, var(--line-soft) 76%);
  border-left-color: var(--danger);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--danger) 9%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface-card) 96%, var(--danger) 4%);
}

.count-day-card.is-today {
  box-shadow:
    var(--shadow-card),
    0 0 0 3px color-mix(in srgb, var(--count-day-color) 10%, transparent);
}

.count-day-card.is-soon {
  border-color: color-mix(in srgb, var(--count-day-color) 42%, var(--line-soft) 58%);
}

.count-day-card-main {
  grid-area: main;
  min-width: 0;
  display: grid;
  gap: 8px;
}

.count-day-card h5 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 960;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.count-day-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.count-day-card-meta span,
.count-day-card-note {
  min-width: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--count-day-color) 8%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 830;
  line-height: 1.2;
  padding: 5px 8px;
}

.count-day-state-badge {
  color: color-mix(in srgb, var(--count-day-color) 72%, var(--text) 28%) !important;
}

.count-day-card.is-past .count-day-state-badge {
  color: color-mix(in srgb, var(--danger) 72%, var(--text) 28%) !important;
}

.count-day-card-note {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.count-day-number {
  grid-area: number;
  min-width: 128px;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 4px;
  align-items: end;
  justify-content: end;
  color: var(--text);
}

.count-day-number span:first-child {
  color: color-mix(in srgb, var(--count-day-color) 76%, var(--muted) 24%);
  font-size: 12px;
  font-weight: 930;
  align-self: center;
}

.count-day-card.is-past .count-day-number span:first-child {
  color: color-mix(in srgb, var(--danger) 76%, var(--muted) 24%);
}

.count-day-number strong {
  color: var(--text);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 990;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
}

.count-day-number span:nth-child(3) {
  color: var(--muted);
  font-size: 12px;
  font-weight: 920;
  align-self: center;
}

.count-day-number small {
  grid-column: 1 / -1;
  justify-self: end;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.count-day-actions {
  grid-area: actions;
  display: inline-flex;
  justify-content: flex-end;
  gap: 7px;
  opacity: 0.74;
}

.count-day-card:hover .count-day-actions,
.count-day-card:focus-within .count-day-actions {
  opacity: 1;
}

.count-day-actions button[data-count-day-delete] {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, var(--surface) 91%);
}

.count-day-empty {
  min-height: 260px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  border: 1px dashed var(--line-soft);
  border-radius: 16px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface) 26%);
}

.count-day-empty strong {
  color: var(--text);
  font-size: 18px;
}

@media (max-width: 1180px) {
  .count-day-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .desktop-shell.is-count-days-view {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
    overflow: visible;
    transform: none;
  }

  .desktop-shell.is-count-days-view .sidebar {
    position: static;
    height: auto;
    max-height: none;
  }

  .desktop-shell.is-count-days-view .workspace {
    height: auto;
    min-height: 0;
    padding: 16px;
  }

  .task-board-main.is-count-days-board {
    min-height: 0;
  }

  .count-day-toolbar,
  .count-day-form,
  .count-day-card {
    grid-template-columns: 1fr;
  }

  .count-day-toolbar {
    grid-template-areas:
      "title"
      "actions"
      "metrics"
      "filters";
  }

  .count-day-metrics,
  .count-day-group-grid {
    grid-template-columns: 1fr;
  }

  .count-day-form-actions,
  .count-day-actions,
  .count-day-number {
    justify-content: start;
  }

  .count-day-filter-result {
    margin-left: 0;
    width: 100%;
  }
}

/* styles/19-count-days-depth.css */
/* Visual depth overrides for the Count Days dashboard. */

.count-day-toggle-form {
  min-height: 44px;
  border-color: color-mix(in srgb, var(--blue) 76%, #ffffff 24%);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 96%, #6ec6ff 4%), color-mix(in srgb, var(--blue) 72%, #1f2937 28%));
  color: #ffffff;
  font-size: 14px;
  font-weight: 980;
  padding: 0 18px;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--blue) 15%, transparent),
    0 14px 30px color-mix(in srgb, var(--blue) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.count-day-toggle-form:hover,
.count-day-toggle-form:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--blue) 20%, transparent),
    0 18px 36px color-mix(in srgb, var(--blue) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.count-day-card {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--count-day-color) 58%, var(--line-soft) 42%);
  border-left-width: 8px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--count-day-color) 20%, transparent), transparent 34%),
    linear-gradient(90deg, color-mix(in srgb, var(--count-day-color) 16%, transparent), transparent 58%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-card) 92%, var(--count-day-color) 8%), color-mix(in srgb, var(--surface-card) 97%, var(--count-day-color) 3%));
  box-shadow:
    var(--shadow-card),
    0 0 0 1px color-mix(in srgb, var(--count-day-color) 16%, transparent),
    0 14px 30px color-mix(in srgb, var(--count-day-color) 10%, transparent);
}

.count-day-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--count-day-color) 94%, #ffffff 6%), color-mix(in srgb, var(--count-day-color) 58%, #111827 42%));
  box-shadow: 0 0 22px color-mix(in srgb, var(--count-day-color) 48%, transparent);
  pointer-events: none;
}

.count-day-card::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -38px;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--count-day-color) 13%, transparent);
  pointer-events: none;
}

.count-day-card.is-countdown.is-past {
  border-color: color-mix(in srgb, var(--count-day-color) 48%, var(--line-soft) 52%);
  border-left-color: var(--count-day-color);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--count-day-color) 18%, transparent), transparent 34%),
    linear-gradient(90deg, color-mix(in srgb, var(--count-day-color) 13%, transparent), transparent 58%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-card) 92%, var(--count-day-color) 8%), color-mix(in srgb, var(--surface-card) 97%, var(--count-day-color) 3%));
}

.count-day-card.is-countdown.is-past .count-day-state-badge {
  background: color-mix(in srgb, #ff453a 16%, var(--surface-soft) 84%);
  color: color-mix(in srgb, #ff7a70 74%, var(--text) 26%) !important;
}

.count-day-card.is-start.is-past .count-day-state-badge,
.count-day-card.is-start.is-today .count-day-state-badge,
.count-day-card.is-future .count-day-state-badge,
.count-day-card.is-soon .count-day-state-badge {
  color: color-mix(in srgb, var(--count-day-color) 82%, var(--text) 18%) !important;
}

.count-day-card-meta span,
.count-day-card-note {
  background: color-mix(in srgb, var(--count-day-color) 14%, var(--surface-soft) 86%);
  color: color-mix(in srgb, var(--count-day-color) 46%, var(--muted) 54%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--count-day-color) 10%, transparent);
}

.count-day-card h5 {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.count-day-number strong {
  color: color-mix(in srgb, var(--count-day-color) 30%, var(--text) 70%);
  text-shadow: 0 0 20px color-mix(in srgb, var(--count-day-color) 18%, transparent);
}

.count-day-number span:first-child {
  color: color-mix(in srgb, var(--count-day-color) 86%, var(--muted) 14%);
}

.count-day-card.is-countdown.is-past .count-day-number span:first-child {
  color: color-mix(in srgb, var(--count-day-color) 86%, #ff8a80 14%);
}

.count-day-card:hover,
.count-day-card:focus-within {
  border-color: color-mix(in srgb, var(--count-day-color) 76%, var(--line-soft) 24%);
  box-shadow:
    var(--shadow-card-strong),
    0 0 0 1px color-mix(in srgb, var(--count-day-color) 30%, transparent),
    0 18px 34px color-mix(in srgb, var(--count-day-color) 16%, transparent);
  transform: translateY(-1px);
}

.count-day-group-header h5::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 14px color-mix(in srgb, var(--blue) 38%, transparent);
}

.count-day-group.is-overdue .count-day-group-header h5::before {
  background: #ff453a;
  box-shadow: 0 0 14px color-mix(in srgb, #ff453a 38%, transparent);
}

.count-day-group.is-soon .count-day-group-header h5::before,
.count-day-group.is-today .count-day-group-header h5::before {
  background: #ffd60a;
  box-shadow: 0 0 14px color-mix(in srgb, #ffd60a 42%, transparent);
}

.count-day-group.is-started .count-day-group-header h5::before {
  background: #34c759;
  box-shadow: 0 0 14px color-mix(in srgb, #34c759 38%, transparent);
}

/* styles/19-count-days-three-columns.css */
/* Three-column Count Days workbench: start dates, active countdowns, overdue dates. */

.count-day-list {
  grid-template-columns: minmax(280px, 0.74fr) minmax(520px, 1.42fr) minmax(260px, 0.72fr);
  align-items: start;
  gap: 16px;
}

.count-day-group {
  min-height: 0;
  align-self: start;
}

.count-day-group.is-start-column {
  grid-column: 1;
}

.count-day-group.is-active-countdown {
  grid-column: 2;
}

.count-day-group.is-overdue {
  grid-column: 3;
}

.count-day-group-grid {
  grid-template-columns: 1fr;
  align-content: start;
}

.count-day-group.is-start-column .count-day-group-header,
.count-day-group.is-active-countdown .count-day-group-header,
.count-day-group.is-overdue .count-day-group-header {
  min-height: 32px;
  padding: 0 2px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 82%, transparent);
}

.count-day-group.is-start-column .count-day-group-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.count-day-group.is-active-countdown .count-day-group-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 420px));
  justify-content: start;
  gap: 12px;
}

.count-day-group.is-active-countdown .count-day-card {
  min-height: 154px;
  max-width: 420px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main number"
    "actions actions";
  gap: 12px 14px;
  align-items: stretch;
  border-radius: 16px;
}

.count-day-group.is-active-countdown .count-day-card-main {
  align-self: start;
  gap: 8px;
}

.count-day-group.is-active-countdown .count-day-card h5 {
  display: -webkit-box;
  min-height: 42px;
  white-space: normal;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 16px;
  line-height: 1.3;
}

.count-day-group.is-active-countdown .count-day-number {
  min-width: 84px;
  align-self: start;
  justify-content: end;
}

.count-day-group.is-active-countdown .count-day-number strong {
  font-size: clamp(38px, 3.4vw, 56px);
}

.count-day-group.is-active-countdown .count-day-number small {
  justify-self: end;
}

.count-day-group.is-active-countdown .count-day-actions {
  align-self: end;
  justify-content: end;
}

.count-day-group.is-start-column .count-day-card {
  min-height: 208px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "main"
    "number"
    "actions";
  align-content: space-between;
  gap: 10px;
  padding: 13px 12px;
  border-left-width: 6px;
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 8%, color-mix(in srgb, var(--count-day-color) 18%, transparent), transparent 36%),
    linear-gradient(160deg, color-mix(in srgb, var(--count-day-color) 15%, transparent), transparent 58%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-card) 92%, var(--count-day-color) 8%), color-mix(in srgb, var(--surface-card) 97%, var(--count-day-color) 3%));
}

.count-day-group.is-start-column .count-day-card::after {
  right: -44px;
  top: -46px;
  width: 112px;
  height: 112px;
}

.count-day-group.is-start-column .count-day-card-main {
  gap: 8px;
}

.count-day-group.is-start-column .count-day-card h5 {
  display: -webkit-box;
  min-height: 38px;
  white-space: normal;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  line-height: 1.28;
}

.count-day-group.is-start-column .count-day-card-meta {
  gap: 5px;
}

.count-day-group.is-start-column .count-day-card-meta span {
  padding: 4px 6px;
  font-size: 10px;
}

.count-day-group.is-start-column .count-day-date-badge,
.count-day-group.is-start-column .count-day-card-note {
  display: none;
}

.count-day-group.is-start-column .count-day-number {
  min-width: 0;
  justify-content: start;
  gap: 3px;
}

.count-day-group.is-start-column .count-day-number strong {
  font-size: clamp(34px, 3vw, 48px);
}

.count-day-group.is-start-column .count-day-number span:first-child,
.count-day-group.is-start-column .count-day-number span:nth-child(3),
.count-day-group.is-start-column .count-day-number small {
  font-size: 10px;
}

.count-day-group.is-start-column .count-day-number small {
  justify-self: start;
}

.count-day-group.is-start-column .count-day-actions {
  justify-content: start;
  gap: 6px;
}

.count-day-group.is-start-column .count-day-actions button {
  min-height: 31px;
  border-radius: 8px;
  font-size: 11px;
  padding: 0 8px;
}

.count-day-group.is-active-countdown .count-day-card.is-today,
.count-day-group.is-active-countdown .count-day-card.is-soon {
  box-shadow:
    var(--shadow-card-strong),
    0 0 0 1px color-mix(in srgb, var(--count-day-color) 34%, transparent),
    0 20px 42px color-mix(in srgb, var(--count-day-color) 18%, transparent);
}

.count-day-group.is-overdue {
  opacity: 0.92;
}

.count-day-group.is-overdue .count-day-group-header h5 {
  font-size: 14px;
}

.count-day-group.is-overdue .count-day-group-header span {
  font-size: 11px;
}

.count-day-group.is-overdue .count-day-group-grid {
  gap: 9px;
}

.count-day-group.is-overdue .count-day-card {
  min-height: 106px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  padding: 11px 12px;
  border-left-width: 6px;
  border-radius: 12px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12),
    0 0 0 1px color-mix(in srgb, var(--count-day-color) 12%, transparent);
}

.count-day-group.is-overdue .count-day-card::before {
  width: 6px;
}

.count-day-group.is-overdue .count-day-card::after {
  right: -48px;
  top: -52px;
  width: 108px;
  height: 108px;
  opacity: 0.74;
}

.count-day-group.is-overdue .count-day-card-main {
  gap: 6px;
}

.count-day-group.is-overdue .count-day-card h5 {
  font-size: 13px;
  line-height: 1.22;
}

.count-day-group.is-overdue .count-day-card-meta {
  gap: 4px;
}

.count-day-group.is-overdue .count-day-card-meta span {
  padding: 4px 6px;
  font-size: 10px;
}

.count-day-group.is-overdue .count-day-date-badge,
.count-day-group.is-overdue .count-day-card-note {
  display: none;
}

.count-day-group.is-overdue .count-day-number {
  min-width: 74px;
  gap: 2px;
}

.count-day-group.is-overdue .count-day-number span:first-child,
.count-day-group.is-overdue .count-day-number span:nth-child(3) {
  font-size: 10px;
}

.count-day-group.is-overdue .count-day-number strong {
  font-size: clamp(28px, 2.3vw, 40px);
}

.count-day-group.is-overdue .count-day-number small {
  font-size: 10px;
}

.count-day-group.is-overdue .count-day-actions {
  gap: 5px;
  opacity: 0.58;
}

.count-day-group.is-overdue .count-day-actions button {
  min-height: 30px;
  border-radius: 8px;
  font-size: 11px;
  padding: 0 8px;
}

/* Compact Count Days: list-first, low repetition, no dashboard cards. */

.count-day-shell {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: clamp(10px, 1.4vw, 18px) clamp(12px, 1.8vw, 22px) 18px;
  background: var(--surface);
}

.count-day-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title actions"
    "filters filters";
  gap: 8px 12px;
  align-items: center;
  padding: 0 0 6px;
  background: var(--surface);
}

.count-day-title {
  gap: 0;
}

.count-day-kicker,
.count-day-title span:last-child,
.count-day-metrics,
.count-day-filter-result {
  display: none;
}

.count-day-title h4 {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
}

.count-day-toggle-form {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--blue) 32%, var(--line-soft) 68%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-panel) 90%);
  color: color-mix(in srgb, var(--blue) 74%, var(--text) 26%);
  font-size: 12px;
  font-weight: 860;
  padding: 0 10px;
  box-shadow: none;
}

.count-day-toggle-form:hover,
.count-day-toggle-form:focus-visible {
  transform: none;
  box-shadow: none;
}

.count-day-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-panel) 12%);
  scrollbar-width: none;
}

.count-day-filters::-webkit-scrollbar {
  display: none;
}

.count-day-filter {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 0 8px;
  white-space: nowrap;
}

.count-day-filter strong {
  color: color-mix(in srgb, var(--muted) 78%, var(--text) 22%);
  font-size: 11px;
  font-weight: 850;
}

.count-day-filter.is-active {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line-soft) 66%);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-panel) 90%);
  color: color-mix(in srgb, var(--blue) 76%, var(--text) 24%);
  box-shadow: none;
}

.count-day-filter.is-active strong {
  color: color-mix(in srgb, var(--blue) 70%, var(--text) 30%);
}

.count-day-form {
  grid-template-columns: minmax(200px, 1fr) minmax(150px, 0.42fr) minmax(240px, 0.82fr) auto;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-panel) 74%, var(--surface) 26%);
  box-shadow: none;
}

.count-day-form-header {
  padding-bottom: 0;
}

.count-day-form-header h5 {
  font-size: 13px;
}

.count-day-field input,
.count-day-field textarea {
  min-height: 34px;
  border-radius: 8px;
  font-size: 13px;
}

.count-day-mode-options span {
  min-height: 26px;
  border-radius: 8px;
  font-size: 11px;
  padding: 0 9px;
}

.count-day-list,
.count-day-group.is-start-column,
.count-day-group.is-active-countdown,
.count-day-group.is-overdue {
  grid-template-columns: 1fr;
  grid-column: 1;
}

.count-day-list {
  gap: 13px;
}

.count-day-group {
  gap: 5px;
}

.count-day-group.is-start-column .count-day-group-header,
.count-day-group.is-active-countdown .count-day-group-header,
.count-day-group.is-overdue .count-day-group-header {
  min-height: 0;
  padding: 3px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 72%, transparent);
}

.count-day-group-header h5 {
  font-size: 13px !important;
  font-weight: 900;
}

.count-day-group-header h5::before {
  display: none;
}

.count-day-group-header span {
  font-size: 11px !important;
  font-weight: 760;
}

.count-day-group-grid,
.count-day-group.is-start-column .count-day-group-grid,
.count-day-group.is-active-countdown .count-day-group-grid,
.count-day-group.is-overdue .count-day-group-grid {
  grid-template-columns: 1fr;
  gap: 3px;
}

.count-day-card,
.count-day-group.is-start-column .count-day-card,
.count-day-group.is-active-countdown .count-day-card,
.count-day-group.is-overdue .count-day-card {
  min-height: 42px;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, auto) auto;
  grid-template-areas: "main number actions";
  gap: 9px;
  align-items: center;
  padding: 5px 8px 5px 10px;
  border: 1px solid transparent;
  border-left: 4px solid var(--count-day-color);
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  overflow: visible;
}

.count-day-card::before,
.count-day-card::after,
.count-day-group.is-start-column .count-day-card::after,
.count-day-group.is-overdue .count-day-card::before,
.count-day-group.is-overdue .count-day-card::after {
  display: none;
}

.count-day-card:hover,
.count-day-card:focus-within,
.count-day-group.is-active-countdown .count-day-card.is-today,
.count-day-group.is-active-countdown .count-day-card.is-soon {
  border-color: color-mix(in srgb, var(--count-day-color) 18%, var(--line-soft) 82%);
  border-left-color: var(--count-day-color);
  background: color-mix(in srgb, var(--count-day-color) 5%, var(--surface-panel) 95%);
  box-shadow: none;
  transform: none;
}

.count-day-card-main,
.count-day-group.is-start-column .count-day-card-main,
.count-day-group.is-active-countdown .count-day-card-main,
.count-day-group.is-overdue .count-day-card-main {
  gap: 3px;
}

.count-day-card h5,
.count-day-group.is-start-column .count-day-card h5,
.count-day-group.is-active-countdown .count-day-card h5,
.count-day-group.is-overdue .count-day-card h5 {
  display: block;
  min-height: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
}

.count-day-card-meta {
  min-width: 0;
  display: flex;
  gap: 0;
}

.count-day-card-meta span,
.count-day-card-note,
.count-day-group.is-start-column .count-day-card-meta span,
.count-day-group.is-overdue .count-day-card-meta span {
  max-width: 42ch;
  overflow: hidden;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 10px;
  font-weight: 730;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.count-day-card-note,
.count-day-group.is-start-column .count-day-card-note,
.count-day-group.is-overdue .count-day-card-note {
  display: block;
  width: auto;
  max-width: 52ch;
  margin: 0;
}

.count-day-number,
.count-day-group.is-start-column .count-day-number,
.count-day-group.is-active-countdown .count-day-number,
.count-day-group.is-overdue .count-day-number {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
  color: var(--text);
}

.count-day-number span:first-child,
.count-day-number span:nth-child(3),
.count-day-group.is-start-column .count-day-number span:first-child,
.count-day-group.is-start-column .count-day-number span:nth-child(3),
.count-day-group.is-overdue .count-day-number span:first-child,
.count-day-group.is-overdue .count-day-number span:nth-child(3) {
  color: color-mix(in srgb, var(--count-day-color) 46%, var(--muted) 54%);
  font-size: 10px;
  font-weight: 760;
}

.count-day-number strong,
.count-day-group.is-start-column .count-day-number strong,
.count-day-group.is-active-countdown .count-day-number strong,
.count-day-group.is-overdue .count-day-number strong {
  color: color-mix(in srgb, var(--count-day-color) 42%, var(--text) 58%);
  font-size: 20px;
  font-weight: 920;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: none;
}

.count-day-number small {
  display: none;
}

.count-day-actions,
.count-day-group.is-start-column .count-day-actions,
.count-day-group.is-active-countdown .count-day-actions,
.count-day-group.is-overdue .count-day-actions {
  align-self: center;
  display: inline-flex;
  justify-content: flex-end;
  gap: 5px;
  opacity: 1;
}

.count-day-actions button,
.count-day-group.is-start-column .count-day-actions button,
.count-day-group.is-overdue .count-day-actions button {
  min-height: 28px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 820;
  padding: 0 8px;
}

/* styles/19-count-days-three-columns-responsive.css */
/* Count Days three-column responsive rules. */

@media (max-width: 1380px) {
  .count-day-list {
    grid-template-columns: minmax(260px, 0.76fr) minmax(420px, 1.22fr) minmax(230px, 0.68fr);
  }

  .count-day-group.is-start-column .count-day-card {
    min-height: 196px;
  }

  .count-day-group.is-active-countdown .count-day-group-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 390px));
  }

  .count-day-group.is-active-countdown .count-day-card {
    max-width: 390px;
  }
}

@media (max-width: 1120px) {
  .count-day-list {
    grid-template-columns: minmax(280px, 0.86fr) minmax(360px, 1.14fr);
  }

  .count-day-group.is-start-column {
    grid-column: 1;
  }

  .count-day-group.is-active-countdown {
    grid-column: 2;
  }

  .count-day-group.is-active-countdown .count-day-group-grid {
    grid-template-columns: 1fr;
  }

  .count-day-group.is-active-countdown .count-day-card {
    max-width: none;
  }

  .count-day-group.is-overdue {
    grid-column: 1 / -1;
  }

  .count-day-group.is-overdue .count-day-group-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  }
}

@media (max-width: 980px) {
  .count-day-list,
  .count-day-group.is-start-column,
  .count-day-group.is-active-countdown,
  .count-day-group.is-overdue {
    grid-template-columns: 1fr;
    grid-column: 1;
  }

  .count-day-group.is-start-column .count-day-group-grid,
  .count-day-group.is-active-countdown .count-day-group-grid,
  .count-day-group.is-overdue .count-day-group-grid {
    grid-template-columns: 1fr;
  }

  .count-day-toolbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "actions"
      "filters";
  }

  .count-day-form {
    grid-template-columns: 1fr;
  }

  .count-day-card,
  .count-day-group.is-start-column .count-day-card,
  .count-day-group.is-active-countdown .count-day-card,
  .count-day-group.is-overdue .count-day-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "number"
      "actions";
  }

  .count-day-number,
  .count-day-actions {
    justify-content: start;
  }
}

/* styles/20-time-tools.css */
/* Time tools workspace opened from the sidebar clock. */

.desktop-shell.is-time-tools-view {
  width: calc(100vw / var(--app-shell-scale));
  max-width: calc(100vw / var(--app-shell-scale));
  overflow-x: hidden;
}

.desktop-shell.is-time-tools-view .workspace-hero,
.desktop-shell.is-time-tools-view .task-composer,
.desktop-shell.is-time-tools-view .right-rail {
  display: none;
}

.desktop-shell.is-time-tools-view .workspace {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.desktop-shell.is-time-tools-view .board-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 100%;
}

.desktop-shell.is-time-tools-view .main-column {
  min-height: 100%;
}

.task-board-main.is-time-tools-board {
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.task-board-main.is-time-tools-board .board-header {
  display: none;
}

.task-board-main.is-time-tools-board .task-list {
  overflow: auto;
  padding-right: 0;
}

.clock-panel.is-time-tools-active {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line-soft) 58%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, var(--surface) 88%), var(--surface));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 82%, transparent),
    0 10px 22px color-mix(in srgb, var(--blue) 10%, transparent);
}

.time-tools-shell {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  padding: clamp(18px, 2.6vw, 32px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 44%, transparent), transparent 42%),
    var(--surface);
}

.time-tools-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
  align-items: start;
  gap: 18px;
}

.time-tools-title {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.time-tools-title h4 {
  margin: 0;
  color: var(--text);
  font-size: clamp(34px, 4.2vw, 64px);
  font-weight: 950;
  line-height: 0.95;
}

.time-tools-title span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 820;
  line-height: 1.4;
}

.time-tools-local-card,
.time-tool-panel,
.time-tools-assist-panel {
  border: 1px solid color-mix(in srgb, var(--line-soft) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-soft) 8%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 82%, transparent),
    0 10px 24px rgba(17, 24, 39, 0.055);
}

.time-tools-local-card {
  min-height: 86px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 3px;
  padding: 13px 15px;
}

.time-tools-local-card span,
.time-tools-local-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.time-tools-local-card strong {
  color: var(--text);
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

.time-tools-tabs {
  min-height: 54px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 76%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface) 28%);
}

/* Time Tools tab visual polish. */
.time-tools-tab {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-compact);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 900;
  padding: 0 10px;
  white-space: nowrap;
}

.time-tools-tab.is-active {
  background: color-mix(in srgb, var(--text) 82%, var(--surface) 18%);
  color: var(--surface);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--shadow-color) 36%, transparent);
}

:root[data-theme="dark"] .time-tools-tab.is-active {
  background: color-mix(in srgb, var(--blue) 26%, var(--surface-elevated) 74%);
  color: var(--text);
}

.time-tool-icon {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  color: currentColor;
}

.time-tool-icon::before,
.time-tool-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.time-tool-icon::before {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.92;
}

.time-tool-icon.is-clock::after,
.time-tool-icon.is-timer::after,
.time-tool-icon.is-pomodoro::after {
  left: 50%;
  top: 5px;
  width: 2px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(42deg);
}

.time-tool-icon.is-stopwatch::before {
  top: 4px;
}

.time-tool-icon.is-stopwatch::after {
  top: 1px;
  left: 50%;
  width: 7px;
  height: 4px;
  border-radius: 4px 4px 1px 1px;
  background: currentColor;
  transform: translateX(-50%);
}

.time-tool-icon.is-timer::before {
  border-radius: 5px;
}

.time-tool-icon.is-pomodoro::before {
  border-color: color-mix(in srgb, #ef4444 72%, currentColor 28%);
}

.time-tools-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 16px;
  align-items: stretch;
}

.time-tool-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(18px, 2vw, 26px);
  overflow: hidden;
}

.time-tool-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.time-tool-panel-header h5 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
}

.time-tools-assist-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 14px;
  padding: clamp(16px, 1.7vw, 22px);
  overflow: hidden;
}

.time-tools-assist-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.time-tools-assist-header h5 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 930;
}

.time-tools-assist-content,
.time-tools-assist-stack {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.time-tools-assist-row {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 76%, transparent);
  color: var(--muted);
  font-size: 13px;
  font-weight: 860;
}

.time-tools-assist-row strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.2;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.time-tools-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.time-duration-field input {
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface) 36%);
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  padding: 0 12px;
}

.time-tools-action-button,
.time-tools-preset-button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--button-soft) 76%, var(--surface) 24%);
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  padding: 0 14px;
}

.time-tools-preset-button {
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--surface) 18%);
  color: var(--text);
}

.time-tools-preset-button:hover,
.time-tools-preset-button:focus-visible {
  background: color-mix(in srgb, var(--blue) 14%, var(--surface) 86%);
}

.time-tools-preset-button:disabled {
  cursor: default;
  opacity: 0.46;
}

.clock-tool-layout {
  min-height: 380px;
  display: grid;
  grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
}

.analog-clock {
  --hour-angle: 0deg;
  --minute-angle: 0deg;
  --second-angle: 0deg;
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1;
  justify-self: center;
  border: 1px solid color-mix(in srgb, var(--line-soft) 78%, transparent);
  border-radius: 50%;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, var(--blue) 4%), color-mix(in srgb, var(--surface-soft) 82%, var(--surface) 18%));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 86%, transparent),
    inset 0 -16px 36px rgba(17, 24, 39, 0.05),
    0 18px 42px rgba(17, 24, 39, 0.08);
}

.analog-clock span:not(.analog-clock-pin) {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--mark-index) * 30deg))
    translateY(-145px)
    rotate(calc(var(--mark-index) * -30deg));
}

.analog-clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 5px;
  border-radius: 999px;
  background: var(--text);
  transform-origin: bottom center;
}

.analog-clock-hand.is-hour {
  height: 24%;
  transform: translateX(-50%) rotate(var(--hour-angle));
}

.analog-clock-hand.is-minute {
  height: 34%;
  width: 4px;
  background: color-mix(in srgb, var(--blue) 70%, var(--text) 30%);
  transform: translateX(-50%) rotate(var(--minute-angle));
}

.analog-clock-hand.is-second {
  height: 38%;
  width: 2px;
  background: #ef4444;
  transform: translateX(-50%) rotate(var(--second-angle));
}

.analog-clock-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--text);
  transform: translate(-50%, -50%);
}

.clock-tool-digital {
  display: grid;
  gap: 12px;
}

.clock-tool-digital strong {
  color: var(--text);
  font-size: clamp(50px, 8vw, 118px);
  font-weight: 950;
  line-height: 0.92;
}

.clock-tool-digital span {
  color: var(--muted);
  font-size: 17px;
  font-weight: 860;
}

.time-tools-ring {
  --time-progress: 0;
  width: min(100%, 300px);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--surface) 0 58%, transparent 59%),
    conic-gradient(color-mix(in srgb, #34c759 70%, var(--blue) 30%) calc(var(--time-progress) * 360deg), color-mix(in srgb, var(--line-soft) 62%, transparent) 0);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--line-soft) 78%, transparent),
    0 18px 44px rgba(17, 24, 39, 0.08);
}

.time-tools-display {
  color: var(--text);
  font-size: clamp(40px, 5.8vw, 76px);
  font-weight: 950;
  line-height: 0.94;
  font-variant-numeric: tabular-nums;
}

.time-tools-status {
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.timer-input-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.time-duration-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.time-duration-field input {
  width: 100%;
  font-size: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.time-duration-field span {
  justify-self: center;
}

.time-tools-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}

.time-tools-action-button {
  min-width: 96px;
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--surface) 18%);
}

.time-tools-action-button.is-primary {
  background: var(--text);
  color: var(--surface);
}

.time-tools-action-button.is-danger {
  background: color-mix(in srgb, #ef4444 12%, var(--surface) 88%);
  color: color-mix(in srgb, #ef4444 78%, var(--text) 22%);
}

.stopwatch-lap-panel {
  display: grid;
  gap: 10px;
}

.stopwatch-lap-panel h5 {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.stopwatch-lap-list {
  max-height: 200px;
  display: grid;
  gap: 7px;
  overflow: auto;
  padding-right: 4px;
}

.stopwatch-lap-row,
.stopwatch-lap-empty {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  padding: 0 12px;
}

.stopwatch-lap-row span:last-child {
  color: var(--text);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1160px) {
  .time-tools-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .desktop-shell.is-time-tools-view {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
    overflow-x: hidden;
    overflow-y: visible;
    transform: none;
  }

  .desktop-shell.is-time-tools-view .sidebar {
    position: static;
    height: auto;
    max-height: none;
  }

  .desktop-shell.is-time-tools-view .workspace {
    height: auto;
    min-height: 0;
    padding: 16px;
  }

  .task-board-main.is-time-tools-board {
    min-height: 0;
  }

  .time-tools-header,
  .clock-tool-layout {
    grid-template-columns: 1fr;
  }

  .time-tools-local-card {
    min-height: 74px;
  }

  .time-tools-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analog-clock {
    width: min(100%, 300px);
  }

  .analog-clock span:not(.analog-clock-pin) {
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--mark-index) * 30deg))
      translateY(-120px)
      rotate(calc(var(--mark-index) * -30deg));
  }
}

@media (max-width: 560px) {
  .desktop-shell.is-time-tools-view .workspace {
    padding: 0;
  }

  .time-tools-shell {
    gap: 12px;
    padding: 18px;
  }

  .time-tools-title h4 {
    font-size: 38px;
  }

  .time-tools-tabs {
    grid-template-columns: 1fr;
  }

  .time-tool-panel {
    min-height: 0;
    padding: 16px;
  }

  .timer-input-grid,
  .time-tools-preset-grid {
    grid-template-columns: 1fr;
  }

  .time-tools-display,
  .clock-tool-digital strong {
    font-size: 46px;
  }
}

/* styles/20-time-tools-pomodoro.css */
/* Time Tools Pomodoro styles. */

.time-tools-ring.is-pomodoro {
  background:
    radial-gradient(circle, var(--surface) 0 58%, transparent 59%),
    conic-gradient(color-mix(in srgb, #ef4444 70%, #f59e0b 30%) calc(var(--time-progress) * 360deg), color-mix(in srgb, var(--line-soft) 62%, transparent) 0);
}

.pomodoro-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.time-tools-assist-panel .pomodoro-settings {
  grid-template-columns: 1fr;
}

.pomodoro-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pomodoro-modes button {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--surface) 22%);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.pomodoro-modes button.is-active {
  background: color-mix(in srgb, #ef4444 14%, var(--surface) 86%);
  color: color-mix(in srgb, #ef4444 78%, var(--text) 22%);
}

@media (max-width: 1160px) {
  .time-tools-assist-panel .pomodoro-settings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .pomodoro-settings,
  .pomodoro-modes {
    grid-template-columns: 1fr;
  }
}

/* styles/20-time-tools-pomodoro-confirm.css */
/* Time Tools Pomodoro interrupt confirmation. */

.pomodoro-interrupt-popover {
  --pomodoro-confirm-arrow-left: 50%;
  position: fixed;
  z-index: 220;
  display: grid;
  width: min(292px, calc(100vw - 24px));
  gap: 12px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, #ef4444 26%, var(--line-soft) 74%);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #ef4444 6%), var(--surface-panel-strong));
  box-shadow: 0 14px 34px color-mix(in srgb, #000 20%, transparent);
}

.pomodoro-interrupt-popover[hidden] {
  display: none;
}

.pomodoro-interrupt-popover::before {
  content: "";
  position: absolute;
  left: var(--pomodoro-confirm-arrow-left);
  top: -6px;
  width: 10px;
  height: 10px;
  border-left: 1px solid color-mix(in srgb, #ef4444 26%, var(--line-soft) 74%);
  border-top: 1px solid color-mix(in srgb, #ef4444 26%, var(--line-soft) 74%);
  background: color-mix(in srgb, var(--surface) 94%, #ef4444 6%);
  transform: translateX(-50%) rotate(45deg);
}

.pomodoro-interrupt-popover.is-above::before {
  top: auto;
  bottom: -6px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, #ef4444 26%, var(--line-soft) 74%);
  border-bottom: 1px solid color-mix(in srgb, #ef4444 26%, var(--line-soft) 74%);
}

.pomodoro-interrupt-message {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.pomodoro-interrupt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.pomodoro-interrupt-button {
  min-width: 64px;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 84%, var(--surface) 16%);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.pomodoro-interrupt-button.is-danger {
  background: color-mix(in srgb, #ef4444 16%, var(--surface) 84%);
  color: color-mix(in srgb, #ef4444 82%, var(--text) 18%);
}

/* styles/20-time-tools-right-rail.css */
/* Time Tools right-rail widget styles. */

.right-rail-widgets {
  align-self: start;
  display: grid;
  gap: 12px;
  min-width: 0;
}

.right-rail-widgets[hidden] {
  display: none;
}

.right-rail-widget-card {
  align-self: start;
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
  padding: 15px;
  border-radius: 8px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-panel-strong) 94%, transparent),
      color-mix(in srgb, var(--surface-panel-muted) 92%, transparent)
    );
}

.right-rail-widget-header {
  margin-bottom: 0;
}

.right-rail-widget-header h3 {
  font-size: 15px;
}

.right-rail-widget-header span {
  justify-self: end;
  color: color-mix(in srgb, var(--muted) 78%, var(--text) 22%);
  font-size: 12px;
  font-weight: 850;
}

.right-rail-clock-tool,
.right-rail-pomodoro-tool {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.right-rail-clock-tool {
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
}

.right-rail-analog-clock {
  --hour-angle: 0deg;
  --minute-angle: 0deg;
  --second-angle: 0deg;
  position: relative;
  width: 76px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--line-soft) 76%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--surface) 96%, transparent) 0 57%, transparent 58%),
    conic-gradient(from -90deg, color-mix(in srgb, var(--blue) 18%, transparent), color-mix(in srgb, #34c759 14%, transparent), color-mix(in srgb, var(--line-soft) 62%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 84%, transparent),
    0 10px 20px rgba(17, 24, 39, 0.06);
}

.right-rail-analog-clock::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed color-mix(in srgb, var(--line-soft) 58%, transparent);
  border-radius: 50%;
}

.right-rail-analog-clock .analog-clock-hand.is-hour {
  height: 23%;
}

.right-rail-analog-clock .analog-clock-hand.is-minute {
  height: 32%;
}

.right-rail-analog-clock .analog-clock-hand.is-second {
  height: 36%;
}

.right-rail-time-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.right-rail-time-copy strong {
  color: var(--text);
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.right-rail-time-copy span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.right-rail-signature-card {
  border-color: color-mix(in srgb, var(--blue) 14%, var(--line-soft) 86%);
}

.right-rail-signature-tool {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.right-rail-signature-preview {
  min-width: 0;
  margin: 0;
  padding: 10px 11px;
  border-left: 2px solid color-mix(in srgb, var(--blue) 42%, var(--line-soft) 58%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface) 28%);
  color: color-mix(in srgb, var(--text) 88%, var(--blue) 12%);
  font-size: 13px;
  font-weight: 820;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.right-rail-signature-preview.is-empty {
  border-left-color: color-mix(in srgb, var(--line-soft) 78%, transparent);
  color: color-mix(in srgb, var(--muted) 82%, var(--text) 18%);
  font-weight: 760;
}

.right-rail-signature-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.right-rail-signature-field span {
  color: color-mix(in srgb, var(--muted) 86%, var(--text) 14%);
  font-size: 11.5px;
  font-weight: 850;
}

.right-rail-signature-field textarea {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  border: 1px solid color-mix(in srgb, var(--line-soft) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-soft) 8%);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.4;
  padding: 9px 10px;
}

.right-rail-signature-field textarea:focus {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line-soft) 58%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}

.right-rail-pomodoro-card {
  border-color: color-mix(in srgb, #ef4444 16%, var(--line-soft) 84%);
  background:
    radial-gradient(circle at 18% 0, color-mix(in srgb, #ef4444 10%, transparent), transparent 45%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #ef4444 4%), color-mix(in srgb, var(--surface-panel-muted) 94%, transparent));
}

.right-rail-pomodoro-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 66%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface) 26%);
}

.right-rail-pomodoro-modes button {
  min-width: 0;
  min-height: 29px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 86%, var(--text) 14%);
  font-size: 11.5px;
  font-weight: 900;
  padding: 0 5px;
  cursor: pointer;
}

.right-rail-pomodoro-modes button:hover,
.right-rail-pomodoro-modes button:focus-visible {
  outline: 0;
  background: color-mix(in srgb, var(--surface) 78%, #ef4444 6%);
  color: var(--text);
}

.right-rail-pomodoro-modes button.is-active {
  background: var(--surface);
  color: color-mix(in srgb, #ef4444 72%, var(--text) 28%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 82%, transparent),
    0 5px 12px color-mix(in srgb, #ef4444 9%, transparent);
}

.right-rail-pomodoro-readout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.right-rail-pomodoro-readout .time-tools-display {
  color: color-mix(in srgb, var(--text) 90%, #ef4444 10%);
  font-size: 42px;
  font-weight: 960;
  line-height: 0.95;
  letter-spacing: 0;
}

.right-rail-pomodoro-context {
  color: color-mix(in srgb, #ef4444 66%, var(--text) 34%);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.right-rail-pomodoro-readout .time-tools-status {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.right-rail-pomodoro-progress {
  --time-progress: 0;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, #ef4444 68%, #f59e0b 32%) calc(var(--time-progress) * 100%),
      color-mix(in srgb, var(--line-soft) 70%, transparent) 0
    );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-soft) 64%, transparent);
}

.right-rail-pomodoro-actions {
  display: grid;
  grid-template-columns: 1.16fr 0.92fr 0.92fr;
  gap: 7px;
}

.right-rail-pomodoro-actions .time-tools-action-button {
  min-width: 0;
  min-height: 34px;
  border-radius: 8px;
  font-size: 12px;
  padding: 0 7px;
}

.right-rail-widget-settings-list {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
}

.right-rail-widget-settings-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 74%, transparent);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent);
  cursor: grab;
  user-select: none;
  touch-action: none;
  will-change: transform;
}

.right-rail-widget-settings-row:active {
  cursor: grabbing;
}

.right-rail-widget-move-hint {
  position: relative;
  width: 26px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--settings-center-line, var(--line-soft)) 78%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--settings-center-soft, var(--button-soft)) 64%, transparent);
  color: color-mix(in srgb, var(--settings-center-muted, var(--muted)) 84%, transparent);
  opacity: 0.76;
  transition:
    border-color var(--motion-fast) var(--ease-smooth),
    background var(--motion-fast) var(--ease-smooth),
    color var(--motion-fast) var(--ease-smooth),
    opacity var(--motion-fast) var(--ease-smooth);
}

.right-rail-widget-move-hint::before,
.right-rail-widget-move-hint::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
}

.right-rail-widget-move-hint::before {
  top: 8px;
  border-right: 5px solid transparent;
  border-bottom: 6px solid currentColor;
  border-left: 5px solid transparent;
}

.right-rail-widget-move-hint::after {
  bottom: 8px;
  border-top: 6px solid currentColor;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.right-rail-widget-settings-row:hover .right-rail-widget-move-hint,
.right-rail-widget-settings-row:focus-within .right-rail-widget-move-hint {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--settings-center-line, var(--line-soft)) 70%);
  background: color-mix(in srgb, var(--blue) 8%, var(--settings-center-soft, var(--surface)) 92%);
  color: color-mix(in srgb, var(--blue) 66%, var(--text) 34%);
  opacity: 1;
}

.right-rail-widget-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  display: block;
  cursor: pointer;
}

.right-rail-widget-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.right-rail-widget-toggle span {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--line-soft) 78%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--button-soft) 72%, var(--surface) 28%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent);
  transition:
    border-color var(--motion-fast) var(--ease-smooth),
    background var(--motion-fast) var(--ease-smooth);
}

.right-rail-widget-toggle span::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 72%, var(--surface) 28%);
  box-shadow: 0 2px 5px rgba(17, 24, 39, 0.14);
  transition:
    transform var(--motion-medium) var(--ease-smooth),
    background var(--motion-fast) var(--ease-smooth);
}

.right-rail-widget-toggle input:checked + span {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line-soft) 52%);
  background: color-mix(in srgb, var(--blue) 18%, var(--surface) 82%);
}

.right-rail-widget-toggle input:checked + span::before {
  transform: translateX(18px);
  background: var(--blue);
}

.right-rail-widget-toggle input:focus-visible + span {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent),
    0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}

.right-rail-widget-settings-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.right-rail-widget-settings-copy strong {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 920;
  line-height: 1.2;
}

.right-rail-widget-settings-copy span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.right-rail-widget-sort {
  display: flex;
  gap: 6px;
}

.right-rail-widget-sort button {
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 74%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--button-soft) 72%, var(--surface) 28%);
  color: var(--text);
  font-size: 14px;
  font-weight: 920;
  cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent);
}

.right-rail-widget-sort button:hover:not(:disabled),
.right-rail-widget-sort button:focus-visible:not(:disabled) {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 36%, var(--line-soft) 64%);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface) 90%);
}

.right-rail-widget-sort button:disabled {
  cursor: default;
  opacity: 0.38;
}

.settings-reorder-preview .right-rail-widget-settings-row {
  box-sizing: border-box;
  width: 100%;
  grid-template-columns: auto 34px minmax(0, 1fr) auto;
  min-height: 50px;
  gap: 10px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surface) 94%, var(--blue) 6%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 0 0 2px color-mix(in srgb, var(--blue) 22%, transparent),
    0 18px 34px rgba(17, 24, 39, 0.16);
}

.settings-reorder-preview.right-rail-widget-reorder-preview {
  transform: none;
}

.settings-reorder-preview .right-rail-widget-settings-icon {
  width: 32px;
  height: 32px;
}

.right-rail-widget-settings-list.is-right-rail-widget-reordering .right-rail-widget-settings-row {
  transition: transform var(--motion-medium) var(--ease-smooth);
}

@media (max-width: 1320px) {
  .right-rail-widget-card {
    gap: 11px;
    padding: 13px;
  }

  .right-rail-clock-tool {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
  }

  .right-rail-analog-clock {
    width: 58px;
  }

  .right-rail-analog-clock::before {
    inset: 6px;
  }

  .right-rail-time-copy strong {
    font-size: 24px;
  }

  .right-rail-time-copy span {
    font-size: 11px;
  }

  .right-rail-signature-preview,
  .right-rail-signature-field textarea {
    font-size: 12px;
  }

  .right-rail-pomodoro-readout .time-tools-display {
    font-size: 36px;
  }

  .right-rail-pomodoro-modes button {
    min-height: 27px;
    font-size: 10.5px;
    padding: 0 3px;
  }

  .right-rail-pomodoro-actions {
    gap: 5px;
  }

  .right-rail-pomodoro-actions .time-tools-action-button {
    min-height: 32px;
    font-size: 11px;
    padding: 0 5px;
  }
}

/* styles/34-project-tree.css */
/* Project Tree: isolated dependency canvas. */

.desktop-shell.is-project-tree-view .workspace-hero,
.desktop-shell.is-project-tree-view .task-composer,
.desktop-shell.is-project-tree-view .right-rail {
  display: none;
}

.desktop-shell.is-project-tree-view .workspace {
  min-height: 0;
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.desktop-shell.is-project-tree-view .board-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  height: 100%;
  min-height: 0;
}

.desktop-shell.is-project-tree-view .main-column {
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.desktop-shell.is-project-tree-view .task-board {
  min-height: 0;
  height: 100%;
}

.desktop-shell.is-project-tree-view .task-board-main.is-project-tree-board {
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%);
  box-shadow: none;
}

:root[data-theme="dark"] .desktop-shell.is-project-tree-view .task-board-main.is-project-tree-board {
  background: color-mix(in srgb, var(--surface) 86%, #0d1520 14%);
}

.task-board-main.is-project-tree-board > .board-header {
  display: none;
}

.task-board-main.is-project-tree-board .task-list {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  align-items: stretch;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.project-tree-shell {
  --project-tree-bg: color-mix(in srgb, var(--surface) 96%, var(--surface-soft) 4%);
  --project-tree-ink: var(--text);
  --project-tree-muted: color-mix(in srgb, var(--muted) 82%, var(--text) 18%);
  --project-tree-line: color-mix(in srgb, var(--line-soft) 88%, transparent);
  --project-tree-line-strong: color-mix(in srgb, var(--line-strong) 72%, transparent);
  --project-tree-control: color-mix(in srgb, var(--surface-soft) 80%, var(--surface) 20%);
  --project-tree-control-hover: color-mix(in srgb, var(--surface) 78%, var(--blue) 7%);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  color: var(--project-tree-ink);
  background: var(--project-tree-bg);
}

:root[data-theme="dark"] .project-tree-shell {
  --project-tree-bg: color-mix(in srgb, var(--surface) 82%, #101827 18%);
  --project-tree-control: color-mix(in srgb, var(--surface-elevated) 72%, var(--surface-soft) 28%);
  --project-tree-control-hover: color-mix(in srgb, var(--surface-elevated) 82%, var(--blue) 10%);
}

.project-tree-topbar {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  min-height: 78px;
  padding: 8px 14px 0;
  border-bottom: 1px solid var(--project-tree-line);
  background: color-mix(in srgb, var(--project-tree-bg) 92%, transparent);
  backdrop-filter: blur(14px);
}

.project-tree-meta-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.project-tree-tabs {
  display: flex;
  align-items: end;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  padding: 0 2px;
  margin-bottom: -1px;
  scrollbar-width: none;
}

.project-tree-tabs::-webkit-scrollbar {
  display: none;
}

.project-tree-tab {
  display: flex;
  align-items: center;
  max-width: 220px;
  min-width: 116px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--project-tree-line) 88%, transparent);
  border-bottom-color: transparent;
  border-radius: 9px 9px 3px 3px;
  background: color-mix(in srgb, var(--surface-soft) 66%, var(--surface) 34%);
  overflow: hidden;
}

.project-tree-tab.is-active {
  height: 36px;
  background: var(--surface);
  border-color: var(--project-tree-line-strong);
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--surface) 90%, transparent) inset;
}

.project-tree-tab-title,
.project-tree-tab-close,
.project-tree-tab-add {
  border: 0;
  background: transparent;
  color: var(--project-tree-muted);
}

.project-tree-tab-title {
  min-width: 0;
  flex: 1;
  height: 100%;
  padding: 0 8px 0 12px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 780;
}

.project-tree-tab-input {
  border: 0;
  outline: 0;
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface) 26%);
  color: var(--project-tree-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 42%, transparent);
}

.project-tree-tab.is-active .project-tree-tab-title {
  color: var(--project-tree-ink);
}

.project-tree-tab-close {
  width: 28px;
  height: 28px;
  margin-right: 3px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
}

.project-tree-tab-close:hover:not(:disabled),
.project-tree-tab-add:hover {
  background: var(--project-tree-control-hover);
  color: var(--project-tree-ink);
}

.project-tree-tab-close:disabled {
  opacity: 0.22;
}

.project-tree-tab-add {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 1px;
  border: 1px solid var(--project-tree-line);
  border-radius: 999px;
  background: var(--project-tree-control);
  font-size: 19px;
  font-weight: 760;
}

.project-tree-title {
  display: flex;
  align-items: center;
  align-self: start;
  gap: 12px;
  min-width: 0;
  padding-top: 2px;
  color: var(--project-tree-ink);
  font-size: 15px;
  font-weight: 820;
}

.project-tree-icon-button,
.project-tree-settle-button,
.project-tree-mode-button,
.project-tree-zoom-label,
.project-tree-connection-banner,
.project-tree-connection-banner button {
  border: 1px solid var(--project-tree-line);
  border-radius: 8px;
  background: var(--project-tree-control);
  color: var(--project-tree-ink);
}

.project-tree-top-actions {
  display: flex;
  align-items: flex-start;
  justify-self: end;
  gap: 8px;
}

.project-tree-icon-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 15px;
  font-weight: 840;
  line-height: 1;
  box-shadow: var(--shadow-card);
}

.project-tree-icon-button:hover,
.project-tree-settle-button:hover,
.project-tree-mode-button:hover {
  background: var(--project-tree-control-hover);
}

.project-tree-settle-button { min-width: 88px; height: 38px; padding: 0 13px; font-size: 12px; font-weight: 800; box-shadow: var(--shadow-card); }

.project-tree-viewport {
  position: relative;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--line-strong) 55%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-soft) 40%, transparent));
}

:root[data-theme="dark"] .project-tree-viewport {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--line-strong) 46%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, #0c1420 40%, transparent));
}

.project-tree-viewport:active {
  cursor: grabbing;
}

.project-tree-world {
  position: absolute;
  inset: 0 auto auto 0;
  width: 6000px;
  height: 4200px;
  transform-origin: 0 0;
  will-change: transform;
}

.project-tree-guides,
.project-tree-groups,
.project-tree-ghost-layer {
  position: absolute;
  inset: 0 auto auto 0;
  width: 6000px;
  height: 4200px;
  pointer-events: none;
}

.project-tree-guide {
  position: absolute;
  display: block;
  pointer-events: none;
  color: color-mix(in srgb, var(--blue) 42%, transparent);
  opacity: 0.54;
}

.project-tree-guide-vertical {
  width: 0;
  min-height: 28px;
  border-left: 1px dashed currentColor;
}

.project-tree-guide-horizontal {
  height: 0;
  min-width: 28px;
  border-top: 1px dashed currentColor;
}

.project-tree-guide.is-magnet-guide {
  color: color-mix(in srgb, var(--success) 42%, var(--blue) 20%);
  opacity: 0.58;
}

.project-tree-selection-box {
  position: absolute;
  display: block;
  border: 1px solid color-mix(in srgb, var(--blue) 66%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--blue) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 52%, transparent);
}

.project-tree-selection-box.is-cut-box {
  border-color: color-mix(in srgb, var(--danger) 68%, transparent);
  background: color-mix(in srgb, var(--danger) 13%, transparent);
}

.project-tree-edges {
  position: absolute;
  inset: 0 auto auto 0;
  width: 6000px;
  height: 4200px;
  overflow: visible;
  pointer-events: none;
}

.project-tree-edge {
  fill: none;
  stroke: color-mix(in srgb, var(--blue) 58%, var(--muted) 42%);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: stroke;
}

.project-tree-edge-hit-area { fill: none; stroke: rgba(10, 132, 255, 0.001); stroke-width: 30; stroke-linecap: round; pointer-events: none; }

.project-tree-shell[data-project-tree-mode="cut"] .project-tree-edge-hit-area { cursor: cell; pointer-events: stroke; }

.project-tree-edge-arrow {
  fill: color-mix(in srgb, var(--blue) 58%, var(--muted) 42%);
  stroke: none;
  opacity: 0.92;
  pointer-events: none;
}

.project-tree-shell[data-project-tree-mode="cut"] .project-tree-edges {
  pointer-events: auto;
}

.project-tree-shell[data-project-tree-mode="cut"] .project-tree-edge { cursor: cell; stroke-width: 3; }
.project-tree-shell[data-project-tree-mode="cut"] .project-tree-edge-arrow {
  cursor: cell;
}

.project-tree-edge.is-cut-preview { stroke: var(--danger); stroke-width: 4; }
.project-tree-edge-arrow.is-cut-preview {
  fill: var(--danger);
}

.project-tree-edge-preview {
  fill: none;
  stroke: color-mix(in srgb, var(--blue) 78%, var(--surface) 22%);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 8 8;
}

.project-tree-edge[data-project-tree-edge-status="done"] { stroke: color-mix(in srgb, var(--success) 82%, var(--blue) 18%); }
.project-tree-edge-arrow[data-project-tree-edge-status="done"] {
  fill: color-mix(in srgb, var(--success) 82%, var(--blue) 18%);
}

.project-tree-edge[data-project-tree-edge-status="locked"] { stroke: color-mix(in srgb, var(--muted) 70%, var(--line-strong) 30%); stroke-dasharray: 7 7; }
.project-tree-edge-arrow[data-project-tree-edge-status="locked"] {
  fill: color-mix(in srgb, var(--muted) 70%, var(--line-strong) 30%);
}

.project-tree-nodes {
  position: absolute;
  inset: 0 auto auto 0;
  width: 6000px;
  height: 4200px;
  pointer-events: none;
}

.project-tree-sibling-group {
  position: absolute;
  border-left: 2px solid color-mix(in srgb, var(--blue) 46%, var(--project-tree-line-strong) 54%);
  border-right: 2px solid color-mix(in srgb, var(--blue) 46%, var(--project-tree-line-strong) 54%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  pointer-events: none;
}

.project-tree-sibling-group.is-cut-preview {
  border-color: color-mix(in srgb, var(--danger) 78%, var(--project-tree-line-strong) 22%);
  background: color-mix(in srgb, var(--danger) 13%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 16%, transparent);
}

.project-tree-group-connector {
  pointer-events: auto;
}

.project-tree-node {
  position: absolute;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
  width: 286px;
  min-height: 104px;
  padding: 14px 16px 12px;
  border: 1px solid color-mix(in srgb, var(--project-tree-color) 62%, var(--project-tree-line-strong) 38%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--project-tree-color) 6%);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  will-change: transform;
}

:root[data-theme="dark"] .project-tree-node {
  background: color-mix(in srgb, var(--surface-elevated) 84%, var(--project-tree-color) 16%);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}

.project-tree-node:active {
  cursor: grabbing;
}

.project-tree-node.is-selected {
  outline: 2px solid color-mix(in srgb, var(--blue) 34%, transparent);
  outline-offset: 2px;
  border-color: color-mix(in srgb, var(--blue) 72%, var(--project-tree-color) 28%);
}

.project-tree-node.is-magnet-target {
  outline: 3px solid color-mix(in srgb, var(--success) 24%, transparent);
  border-color: color-mix(in srgb, var(--success) 72%, var(--project-tree-color) 28%);
}

.project-tree-node.is-editing, .project-tree-node:has(> .project-tree-node-menu) {
  z-index: 32;
}

.project-tree-drag-ghost {
  opacity: 0.76;
  pointer-events: none;
  box-shadow: 0 18px 34px rgba(10, 132, 255, 0.16);
}

.project-tree-node[data-project-tree-status="done"] {
  border-color: color-mix(in srgb, var(--success) 72%, var(--project-tree-line-strong) 28%);
  background: color-mix(in srgb, var(--surface) 90%, var(--success) 10%);
}

:root[data-theme="dark"] .project-tree-node[data-project-tree-status="done"] {
  background: color-mix(in srgb, var(--surface-elevated) 82%, var(--success) 18%);
}

.project-tree-node[data-project-tree-status="locked"] {
  border-style: dashed;
  opacity: 0.82;
}

.project-tree-node-header {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 30px 30px;
  align-items: center;
  gap: 10px;
}

.project-tree-check,
.project-tree-mandatory-toggle,
.project-tree-node-menu-button,
.project-tree-connector {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
}

.project-tree-check {
  width: 25px;
  height: 25px;
  border: 2px solid var(--project-tree-color);
  background: color-mix(in srgb, var(--surface) 86%, var(--project-tree-color) 14%);
  color: var(--surface);
  font-size: 15px;
  font-weight: 900;
}

.project-tree-node[data-project-tree-status="done"] .project-tree-check {
  border-color: var(--success);
  background: var(--success);
}

.project-tree-node-title {
  min-width: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 760;
  line-height: 1.26;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-tree-node-menu-button {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--project-tree-muted);
  font-size: 20px;
  font-weight: 800;
}

.project-tree-mandatory-toggle {
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--project-tree-color) 44%, var(--project-tree-line) 56%);
  background: color-mix(in srgb, var(--surface) 88%, var(--project-tree-color) 12%);
  color: color-mix(in srgb, var(--project-tree-color) 82%, var(--text) 18%);
  font-size: 14px;
  font-weight: 900;
}

.project-tree-mandatory-toggle[aria-pressed="false"] {
  color: var(--project-tree-muted);
  background: transparent;
}

.project-tree-node-menu-button:hover {
  background: var(--project-tree-control);
  color: var(--project-tree-ink);
}

.project-tree-node-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.project-tree-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 128px;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--project-tree-color) 18%);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}

.project-tree-meta-chip span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-tree-status-row {
  color: color-mix(in srgb, var(--project-tree-color) 72%, var(--text) 28%);
  font-size: 12px;
  font-weight: 760;
}

.project-tree-connector {
  position: absolute;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--blue) 55%, var(--line-strong) 45%);
  background: var(--surface);
  color: var(--blue);
  font-size: 17px;
  font-weight: 860;
  box-shadow: var(--shadow-card);
}

.project-tree-connector-plus { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: Arial, "Helvetica Neue", sans-serif; line-height: 1; pointer-events: none; }

.project-tree-connector-left { left: -13px; top: calc(50% - 12px); }

.project-tree-connector-right { right: -13px; top: calc(50% - 12px); }

.project-tree-connector:hover {
  transform: scale(1.08);
}

.project-tree-connector.is-connected { border-color: transparent; background: transparent; color: transparent; box-shadow: none; }
.project-tree-connector.is-connected:hover { transform: none; }
.project-tree-connector.is-connected .project-tree-connector-plus { display: none; }

.project-tree-node.is-sibling-grouped > .project-tree-connector {
  display: none;
}

.project-tree-shell.is-edit-locked .project-tree-node,
.project-tree-shell.is-edit-locked .project-tree-pool-card {
  cursor: default;
}

.project-tree-shell.is-edit-locked .project-tree-connector {
  opacity: 0.32;
  pointer-events: none;
}

.project-tree-node-menu {
  position: absolute;
  z-index: 5;
  left: calc(100% + 12px);
  top: 48px;
  display: grid;
  gap: 4px;
  min-width: 168px;
  padding: 8px;
  border: 1px solid var(--project-tree-line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-popover);
}

.project-tree-node-menu button {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  font-size: 13px;
  font-weight: 720;
}

.project-tree-node-menu button:hover:not(:disabled) {
  background: var(--project-tree-control);
  color: var(--text);
}

.project-tree-node-menu button:disabled {
  opacity: 0.42;
}

.project-tree-node-menu button.is-danger {
  color: var(--danger);
}

.project-tree-task-editor {
  position: absolute;
  z-index: 7;
  left: calc(100% + 12px);
  top: 8px;
  display: grid;
  gap: 8px;
  width: 236px;
  padding: 10px;
  border: 1px solid var(--project-tree-line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-popover);
}

.project-tree-task-editor input,
.project-tree-task-editor select {
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--project-tree-line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
}

.project-tree-editor-check,
.project-tree-task-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-tree-task-editor-actions button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--project-tree-line);
  border-radius: 7px;
  background: var(--project-tree-control);
  color: var(--project-tree-ink);
  font-weight: 760;
}

/* styles/34-project-tree-notes.css */
/* Project Tree canvas-only notes. */

.project-tree-notes {
  position: absolute;
  z-index: 4;
  inset: 0 auto auto 0;
  width: 6000px;
  height: 4000px;
  pointer-events: none;
}

.project-tree-note {
  position: absolute;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: start;
  gap: 8px;
  box-sizing: border-box;
  width: 214px;
  min-height: 112px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--project-tree-line-strong) 72%, var(--warning, #f2a900) 28%);
  border-left: 5px solid color-mix(in srgb, var(--warning, #f2a900) 72%, var(--blue) 28%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-elevated) 90%, #fff3bd 10%);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  cursor: text;
  pointer-events: auto;
}

:root[data-theme="dark"] .project-tree-note {
  background: color-mix(in srgb, var(--surface-elevated) 84%, #a56b00 16%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.project-tree-note-text {
  grid-column: 1;
  grid-row: 1;
  display: block;
  box-sizing: border-box;
  justify-self: stretch;
  min-width: 0;
  width: auto;
  min-height: 86px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.project-tree-note-text:focus {
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--blue) 36%, transparent);
}

.project-tree-note-text::placeholder {
  color: color-mix(in srgb, var(--project-tree-muted) 70%, transparent);
}

.project-tree-note-actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.project-tree-note-actions button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid var(--project-tree-line);
  border-radius: 999px;
  background: var(--project-tree-control);
  color: var(--project-tree-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.project-tree-note-delete-popover {
  position: absolute;
  z-index: 2;
  top: 42px;
  right: 8px;
  display: grid;
  gap: 8px;
  width: 168px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--project-tree-line-strong) 66%);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--shadow-popover);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.project-tree-note-delete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.project-tree-note-delete-actions button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--project-tree-line);
  border-radius: 7px;
  background: var(--project-tree-control);
  color: var(--project-tree-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}

.project-tree-note-delete-actions button.is-danger {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--project-tree-line));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
}

.project-tree-note.is-dragging {
  opacity: 0.92;
  cursor: grabbing;
}

.project-tree-note-placement-preview {
  border-style: dashed;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-elevated) 70%);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 16%, transparent);
  opacity: 0.62;
  pointer-events: none;
}

.project-tree-note-actions button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--blue) 44%, var(--project-tree-line));
  color: var(--text);
}

.project-tree-note-delete-actions button:hover:not(:disabled) {
  background: var(--project-tree-control-hover);
}

.project-tree-note-actions button:disabled,
.project-tree-note-delete-actions button:disabled {
  cursor: default;
  opacity: 0.46;
}

/* styles/34-project-tree-controls.css */
/* Project Tree floating controls and task pool. */

.project-tree-zoom,
.project-tree-mode-toolbar,
.project-tree-selection-toolbar,
.project-tree-minimap,
.project-tree-connection-banner,
.project-tree-toast {
  position: absolute;
  z-index: 8;
}

.project-tree-zoom {
  right: 18px;
  bottom: 154px;
  left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--project-tree-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(14px);
}

.project-tree-zoom-label {
  display: inline-grid;
  place-items: center;
  min-width: 58px;
  height: 38px;
  font-size: 13px;
  font-weight: 820;
}

.project-tree-mode-toolbar {
  left: 50%;
  bottom: 154px;
  display: flex;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--project-tree-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-panel);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
}

.project-tree-mode-button {
  display: grid;
  place-items: center;
  gap: 3px;
  min-width: 56px;
  min-height: 50px;
  padding: 6px 10px;
  box-shadow: none;
}

.project-tree-mode-button span {
  font-size: 17px;
  font-weight: 820;
}

.project-tree-mode-button strong {
  font-size: 12px;
  font-weight: 720;
}

.project-tree-mode-button.is-active {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
  border-color: color-mix(in srgb, var(--blue) 32%, var(--project-tree-line) 68%);
  color: color-mix(in srgb, var(--blue) 70%, var(--text) 30%);
}

.project-tree-selection-toolbar {
  left: 50%;
  top: 88px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--project-tree-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: var(--shadow-panel);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
}

.project-tree-selection-toolbar strong {
  padding: 0 8px;
  color: var(--project-tree-muted);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.project-tree-selection-toolbar button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--project-tree-line);
  border-radius: 999px;
  background: var(--project-tree-control);
  color: var(--project-tree-ink);
  font-size: 12px;
  font-weight: 760;
}

.project-tree-selection-toolbar button:hover:not(:disabled) {
  background: var(--project-tree-control-hover);
}

.project-tree-selection-toolbar button:disabled {
  opacity: 0.42;
}

.project-tree-minimap {
  right: 18px;
  bottom: 224px;
  width: 198px;
  padding: 9px;
  border: 1px solid var(--project-tree-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(14px);
}

.project-tree-minimap-label {
  display: block;
  margin: 0 0 6px;
  color: var(--project-tree-muted);
  font-size: 11px;
  font-weight: 760;
}

.project-tree-minimap-canvas {
  position: relative;
  box-sizing: border-box;
  width: 170px;
  height: 104px;
  overflow: hidden;
  border: 1px solid var(--project-tree-line);
  border-radius: 6px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--line-strong) 45%, transparent) 1px, transparent 1.4px) 0 0 / 10px 10px,
    color-mix(in srgb, var(--surface-soft) 86%, var(--surface) 14%);
  cursor: pointer;
}

.project-tree-minimap-edges {
  position: absolute;
  inset: 0;
}

.project-tree-minimap-edges line {
  stroke: color-mix(in srgb, var(--blue) 45%, var(--muted) 55%);
  stroke-width: 1.2;
}

.project-tree-minimap-node,
.project-tree-minimap-view {
  position: absolute;
  display: block;
  box-sizing: border-box;
  border-radius: 2px;
}

.project-tree-minimap-node {
  background: color-mix(in srgb, var(--project-tree-color) 68%, var(--surface) 32%);
  opacity: 0.78;
}

.project-tree-minimap-view {
  border: 2px solid var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 72%, transparent);
  cursor: grab;
}

.project-tree-connection-banner {
  top: 78px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 8px 6px 14px;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  transform: translateX(-50%);
  box-shadow: var(--shadow-panel);
}

.project-tree-connection-banner button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 760;
}

.project-tree-empty {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100% - 48px));
  padding: 22px;
  border: 1px solid var(--project-tree-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  text-align: center;
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-panel);
}

.project-tree-empty strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 760;
}

.project-tree-empty span {
  color: var(--project-tree-muted);
  font-size: 14px;
  line-height: 1.45;
}

.project-tree-toast {
  left: 50%;
  bottom: 92px;
  padding: 10px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 16%, var(--surface) 84%);
  color: var(--danger);
  font-size: 13px;
  font-weight: 760;
  transform: translateX(-50%);
  box-shadow: var(--shadow-panel);
}

.project-tree-shell > .project-tree-quick-create {
  position: absolute;
  z-index: 8;
  left: 20px;
  bottom: 154px;
}

.project-tree-task-pool {
  position: relative;
  z-index: 7;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  min-height: 118px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--project-tree-line);
  background: color-mix(in srgb, var(--project-tree-bg) 92%, transparent);
  backdrop-filter: blur(14px);
}

.project-tree-task-pool.is-category-menu-open {
  z-index: 20;
}

.project-tree-task-pool-header {
  display: grid;
  align-content: center;
  align-self: center;
  gap: 8px;
  min-width: 0;
}

.project-tree-task-pool-header strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 820;
}

.project-tree-task-pool-header span {
  color: var(--project-tree-muted);
  font-size: 12px;
  font-weight: 690;
  line-height: 1.3;
}

.project-tree-task-pool-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(178px, 236px);
  align-content: center;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 6px;
  overscroll-behavior: contain;
}

.project-tree-pool-card {
  display: grid;
  gap: 6px;
  min-height: 72px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--project-tree-color) 34%, var(--project-tree-line) 66%);
  border-left: 4px solid var(--project-tree-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, var(--project-tree-color) 12%);
  box-shadow: var(--shadow-card);
  cursor: grab;
  user-select: none;
}

.project-tree-pool-card:active {
  cursor: grabbing;
}

.project-tree-pool-card strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 780;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-tree-pool-card span {
  color: var(--project-tree-muted);
  font-size: 12px;
  font-weight: 680;
}

@media (max-width: 900px) {
  .project-tree-shell {
    min-height: 560px;
  }

  .project-tree-topbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .project-tree-meta-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .project-tree-top-actions {
    justify-self: stretch;
    width: 100%;
  }

  .project-tree-shell > .project-tree-quick-create {
    right: 12px;
    left: 12px;
    bottom: 200px;
    grid-template-columns: minmax(0, 1fr) minmax(86px, 118px) 38px;
  }

  .project-tree-stats {
    display: none;
  }

  .project-tree-mode-toolbar {
    left: 12px;
    right: 12px;
    bottom: 136px;
    justify-content: center;
    overflow-x: auto;
    transform: none;
  }

  .project-tree-selection-toolbar {
    left: 12px;
    right: 12px;
    top: 82px;
    overflow-x: auto;
    justify-content: flex-start;
    transform: none;
  }

  .project-tree-zoom {
    right: 12px;
    bottom: 136px;
  }

  .project-tree-minimap {
    display: none;
  }

  .project-tree-task-pool {
    grid-template-columns: minmax(0, 1fr);
    min-height: 128px;
  }
}

/* styles/34-project-tree-pool.css */
/* Project Tree task pool picker and quick-create controls. */

.project-tree-pool-category-picker,
.project-tree-quick-category-picker {
  position: relative;
  min-width: 0;
}

.project-tree-pool-category-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center; gap: 10px;
  width: 100%; min-height: 38px;
  padding: 0 12px 0 14px; border: 1px solid var(--project-tree-line);
  border-radius: 8px; background: var(--surface);
  color: var(--project-tree-ink); font-size: 13px; font-weight: 760; text-align: left;
  box-shadow: var(--shadow-card);
}

.project-tree-pool-category-button span {
  min-width: 0; overflow: hidden;
  color: inherit; font-size: inherit; font-weight: inherit;
  text-overflow: ellipsis; white-space: nowrap;
}

.project-tree-pool-category-button i {
  width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  align-self: center; justify-self: center;
  color: color-mix(in srgb, var(--blue) 82%, var(--text) 18%);
  line-height: 1; transform-origin: center;
  transition: transform var(--motion-fast) var(--ease-smooth-soft);
}

.project-tree-pool-category-button i::before {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.project-tree-pool-category-button[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.project-tree-pool-category-button:hover,
.project-tree-pool-category-button:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 44%, var(--project-tree-line) 56%); background-color: var(--project-tree-control-hover);
}

.project-tree-pool-category-menu {
  position: absolute;
  z-index: 18; bottom: calc(100% + 6px);
  left: 0; right: 0;
  display: grid;
  gap: 4px; max-height: 224px; overflow: auto;
  padding: 6px; border: 1px solid var(--project-tree-line); border-radius: 8px;
  background: var(--surface); box-shadow: var(--shadow-panel);
}

.project-tree-pool-category-option {
  min-width: 0; min-height: 34px;
  padding: 0 10px;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--project-tree-ink); font-size: 13px; font-weight: 720; text-align: left;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

.project-tree-pool-category-option:hover,
.project-tree-pool-category-option:focus-visible,
.project-tree-pool-category-option.is-selected {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--blue) 72%, var(--text) 28%);
}

.project-tree-quick-create {
  display: grid;
  grid-template-columns: minmax(128px, 174px) minmax(92px, 118px) 38px;
  align-items: center; gap: 0;
  min-width: 0; padding: 3px;
  border: 1px solid var(--project-tree-line); border-radius: 9px;
  background: var(--surface); box-shadow: var(--shadow-card);
}

.project-tree-quick-create input,
.project-tree-quick-category-button {
  min-width: 0; min-height: 34px;
  border: 0; border-radius: 0; background-color: transparent;
  color: var(--project-tree-ink); font-size: 12px; font-weight: 720;
  box-shadow: none;
}

.project-tree-quick-create input {
  padding: 0 10px; border-radius: 6px 0 0 6px;
}

.project-tree-quick-category-picker {
  border-left: 1px solid var(--project-tree-line);
}

.project-tree-quick-category-button {
  min-height: 34px; padding: 0 10px;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
}

.project-tree-quick-category-menu {
  top: auto;
  right: auto; bottom: calc(100% + 7px);
  min-width: 148px;
}

.project-tree-quick-create .project-tree-icon-button {
  width: 34px; height: 34px;
  border: 0; border-left: 1px solid var(--project-tree-line);
  border-radius: 0 6px 6px 0;
  background: transparent; box-shadow: none;
}

.project-tree-quick-create input:hover,
.project-tree-quick-create input:focus-visible,
.project-tree-quick-category-button:hover,
.project-tree-quick-category-button:focus-visible,
.project-tree-quick-create .project-tree-icon-button:hover,
.project-tree-quick-create .project-tree-icon-button:focus-visible {
  background-color: var(--project-tree-control-hover);
}

/* styles/10-task-list-states.css */
/* Task list layout, placeholders, task card states, chain visuals, and drag highlights. */

.task-list {
  display: grid;
  align-content: start;
  align-items: start;
  gap: 8px;
}

.drop-placeholder {
  min-height: 68px;
  border: 2px dashed color-mix(in srgb, var(--blue) 34%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--blue) 7%, var(--surface) 93%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 10%, transparent);
  justify-self: start;
  box-sizing: border-box;
  will-change: transform, opacity;
  transition:
    min-height var(--motion-fast) var(--ease-smooth-soft),
    opacity var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-medium) var(--ease-smooth);
}

.drop-placeholder.is-reorder-placeholder {
  border-color: color-mix(in srgb, var(--blue) 46%, transparent);
  background: color-mix(in srgb, var(--blue) 9%, var(--surface) 91%);
}

.drop-placeholder.is-ongoing-placeholder {
  opacity: 0;
  min-height: 0;
}

.task-item {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-card) 96%, transparent),
    color-mix(in srgb, var(--surface-soft) 98%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--line-soft) 90%, transparent);
  border-left: 5px solid var(--task-color, var(--blue));
  padding: 10px 12px;
  width: calc(100% - var(--chain-indent, 0px));
  margin-left: var(--chain-indent, 0px);
  justify-self: start;
  box-sizing: border-box;
  will-change: transform, box-shadow, opacity;
  transition:
    transform var(--motion-medium) var(--ease-smooth),
    box-shadow var(--motion-medium) var(--ease-smooth),
    opacity var(--motion-fast) var(--ease-smooth-soft);
  touch-action: none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 80%, transparent),
    0 1px 0 color-mix(in srgb, var(--line-soft) 48%, transparent),
    var(--shadow-card);
}

.task-list .task-item:not(.is-done):not(.is-compact-completed):not(.is-archive-item),
.ongoing-list .task-item:not(.is-done) {
  cursor: grab;
}

.desktop-shell.is-dragging-task {
  user-select: none;
}

:root:not([data-theme="dark"]) .task-item {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(247, 250, 255, 0.95)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 6px 16px rgba(22, 33, 54, 0.04),
    0 1px 0 rgba(22, 33, 54, 0.04);
}

.task-item.is-completing {
  opacity: 0.96 !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    0 0 0 3px color-mix(in srgb, var(--task-color, var(--blue)) 14%, transparent),
    var(--shadow-card-strong);
}

.task-item.is-reordering {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    0 0 0 3px rgba(10, 132, 255, 0.09),
    var(--shadow-card-strong);
}

.task-item.is-detail-open,
.task-item.is-category-menu-open {
  z-index: 8;
}

.task-item.is-color-menu-open {
  z-index: 12;
}

.ongoing-list .task-item.is-ongoing-task:not(.is-done) {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 34%, var(--line-soft) 66%);
  background:
    radial-gradient(
      circle at 18% 0%,
      color-mix(in srgb, var(--task-color, var(--blue)) 16%, transparent),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--task-color, var(--blue)) 8%, var(--surface-card) 92%),
      color-mix(in srgb, var(--surface-soft) 98%, transparent)
    );
  outline: 1px solid color-mix(in srgb, var(--task-color, var(--blue)) 16%, transparent);
  outline-offset: -1px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 10px 24px color-mix(in srgb, var(--task-color, var(--blue)) 11%, transparent),
    var(--shadow-card);
}

.ongoing-list .task-item.is-next:not(.is-done) {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 68%, var(--line-soft) 32%);
  outline-color: color-mix(in srgb, var(--task-color, var(--blue)) 34%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 82%, transparent),
    inset 0 0 0 4px color-mix(in srgb, var(--task-color, var(--blue)) 8%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--task-color, var(--blue)) 10%, transparent),
    var(--shadow-card-strong);
}

.ongoing-list .task-item.is-focus-glow-visible:not(.is-done) {
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 90%, var(--line-soft) 10%);
  background:
    radial-gradient(
      ellipse at 16% 16%,
      color-mix(in srgb, var(--task-color, var(--blue)) 28%, transparent),
      transparent 44%
    ),
    radial-gradient(
      ellipse at 92% 92%,
      color-mix(in srgb, var(--task-color, var(--blue)) 12%, transparent),
      transparent 48%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--task-color, var(--blue)) 18%, var(--surface-card) 82%),
      color-mix(in srgb, var(--surface-soft) 94%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 86%, transparent),
    inset 0 0 0 5px color-mix(in srgb, var(--task-color, var(--blue)) 10%, transparent),
    inset 0 0 28px color-mix(in srgb, var(--task-color, var(--blue)) 14%, transparent),
    var(--shadow-card-strong);
  animation: focusCardGlow 5.8s ease-in-out infinite;
}

.ongoing-list .task-item.is-focus-glow-visible:not(.is-done)::before,
.ongoing-list .task-item.is-focus-glow-visible:not(.is-done)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.ongoing-list .task-item.is-focus-glow-visible:not(.is-done)::before {
  --focus-glow-opacity: 0.56;
  inset: -36%;
  z-index: 0;
  background:
    conic-gradient(
      from 215deg at 50% 50%,
      transparent 0deg,
      color-mix(in srgb, var(--task-color, var(--blue)) 8%, transparent) 46deg,
      color-mix(in srgb, var(--task-color, var(--blue)) 36%, transparent) 94deg,
      color-mix(in srgb, var(--task-color, var(--blue)) 10%, transparent) 148deg,
      transparent 212deg,
      color-mix(in srgb, var(--task-color, var(--blue)) 20%, transparent) 286deg,
      transparent 360deg
    );
  filter: blur(22px) saturate(1.14);
  opacity: var(--focus-glow-opacity);
  animation:
    focusAuraFlow 8.4s linear infinite,
    focusGlowFadeIn 1.15s var(--ease-smooth) both;
}

.ongoing-list .task-item.is-focus-glow-visible:not(.is-done)::after {
  --focus-glow-opacity: 0.76;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 16%,
      color-mix(in srgb, var(--task-color, var(--blue)) 12%, transparent) 36%,
      color-mix(in srgb, var(--task-color, var(--blue)) 28%, transparent) 48%,
      color-mix(in srgb, var(--task-color, var(--blue)) 9%, transparent) 62%,
      transparent 82%
    ),
    radial-gradient(
      ellipse at 24% 38%,
      color-mix(in srgb, var(--task-color, var(--blue)) 18%, transparent),
      transparent 54%
    );
  background-size: 230% 100%, 130% 130%;
  background-position: 120% 0, 0 20%;
  opacity: var(--focus-glow-opacity);
  animation:
    focusSurfaceFlow 6.2s ease-in-out infinite,
    focusGlowFadeIn 1.15s var(--ease-smooth) both;
}

.ongoing-list .task-item.is-focus-glow-visible:not(.is-done) > :not(.connector-socket) {
  position: relative;
  z-index: 1;
}

.ongoing-list .task-item.is-focus-glow-visible:not(.is-done) .ongoing-chip {
  background: color-mix(in srgb, var(--task-color, var(--blue)) 26%, var(--surface) 74%);
  color: color-mix(in srgb, var(--task-color, var(--blue)) 94%, var(--text) 6%);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--task-color, var(--blue)) 16%, transparent),
    0 12px 24px color-mix(in srgb, var(--task-color, var(--blue)) 20%, transparent);
}

.ongoing-list .task-item.is-focus-glow-visible:not(.is-focus-ticking):not(.is-focus-glow-ending):not(.is-done),
.ongoing-list .task-item.is-focus-glow-visible:not(.is-focus-ticking):not(.is-focus-glow-ending):not(.is-done)::before,
.ongoing-list .task-item.is-focus-glow-visible:not(.is-focus-ticking):not(.is-focus-glow-ending):not(.is-done)::after {
  animation-play-state: paused;
}

.ongoing-list .task-item.is-focus-glow-ending:not(.is-done) {
  animation-play-state: paused;
}

.ongoing-list .task-item.is-focus-glow-ending:not(.is-done)::before {
  animation:
    focusAuraFlow 8.4s linear infinite,
    focusGlowFadeOut 1.1s ease-in forwards;
  animation-play-state: paused, running;
}

.ongoing-list .task-item.is-focus-glow-ending:not(.is-done)::after {
  animation:
    focusSurfaceFlow 6.2s ease-in-out infinite,
    focusGlowFadeOut 1.1s ease-in forwards;
  animation-play-state: paused, running;
}

.ongoing-list .task-item.is-ongoing-task:not(.is-done)::after {
  content: none;
}

.task-item.is-linking {
  animation: linkSettle 560ms cubic-bezier(.22, 1, .36, 1);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    0 0 0 3px color-mix(in srgb, var(--task-color, var(--blue)) 12%, transparent),
    var(--shadow-card-strong);
}

.task-item.is-done {
  opacity: 0.62;
}

.task-item.is-completion-exit {
  pointer-events: none;
  animation: taskFadeOutToCompleted var(--motion-slow) var(--ease-smooth-soft) both;
}

.task-item.is-compact-completed.is-completion-enter {
  animation: taskFadeInFromCompleted var(--motion-slow) var(--ease-smooth) both;
}

.task-item.is-chain-child::before {
  content: "";
  position: absolute;
  left: 24px;
  top: -10px;
  z-index: 0;
  width: 5px;
  height: calc(50% + 10px);
  border-radius: 999px;
  background: var(--task-color, var(--blue));
  opacity: 0.9;
  pointer-events: none;
}

.task-list .task-item:first-child::before {
  display: none;
}

.task-item.is-ready-step:not(.is-done) {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-raised) 96%, transparent),
    color-mix(in srgb, var(--surface-card) 98%, transparent)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    var(--shadow-card-strong);
}

.task-item.is-chain-child {
  border-left-color: transparent;
  border-radius: 18px;
  padding: 10px 11px 10px 42px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    0 1px 0 color-mix(in srgb, var(--line-soft) 42%, transparent),
    0 8px 18px rgba(17, 24, 39, 0.05);
}

.task-item.is-chain-child.is-ready-step:not(.is-done) {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-raised) 94%, transparent),
    color-mix(in srgb, var(--surface-card) 98%, transparent)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    var(--shadow-card);
}

.task-item.is-chain-root {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-raised) 96%, transparent),
    color-mix(in srgb, var(--surface-card) 98%, transparent)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    var(--shadow-card-strong);
}

.task-item.is-dragging {
  z-index: 20;
  opacity: 0.94;
  cursor: grabbing;
  box-shadow:
    0 28px 56px rgba(17, 24, 39, 0.2),
    0 10px 24px rgba(17, 24, 39, 0.12);
  pointer-events: none;
  margin-left: 0 !important;
  width: auto;
  max-width: none;
  transform: none !important;
}

.task-item.is-dragging::before,
.task-item.is-dragging .socket-top,
.task-item.is-dragging .socket-bottom {
  opacity: 0 !important;
}

.task-item.is-dragging.is-chain-child {
  padding: 11px 12px;
  border-left-color: var(--task-color, var(--blue));
  border-radius: 16px;
}

.task-item.is-dragging .task-actions,
.task-item.is-dragging .task-meta,
.task-item.is-dragging .task-note {
  opacity: 0.28;
}

.task-item.is-drag-link {
  outline: 3px solid color-mix(in srgb, #34c759 24%, transparent);
}

.task-item.is-drag-sort {
  outline: 3px solid color-mix(in srgb, var(--blue) 24%, transparent);
}

.task-item.is-drag-ongoing {
  outline: 3px solid color-mix(in srgb, #f59e0b 28%, transparent);
}

.task-item.is-drag-focus-recommendation {
  outline: 3px solid color-mix(in srgb, var(--task-color, var(--blue)) 30%, transparent);
  box-shadow:
    0 28px 56px rgba(17, 24, 39, 0.2),
    0 10px 24px rgba(17, 24, 39, 0.12),
    0 0 0 5px color-mix(in srgb, var(--task-color, var(--blue)) 10%, transparent);
}

.task-item.is-magnet-target {
  background: color-mix(in srgb, var(--surface) 94%, var(--task-color, var(--blue)) 6%);
  outline: 2px solid color-mix(in srgb, var(--task-color, var(--blue)) 36%, transparent);
  transform: translateY(-2px) scale(1.006);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 0 0 1px color-mix(in srgb, var(--task-color, var(--blue)) 16%, transparent),
    var(--shadow-card);
}

.task-item.is-magnet-before .socket-top,
.task-item.is-magnet-after .socket-bottom {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--task-color, var(--blue));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--task-color, var(--blue)) 14%, transparent);
}

.task-item.is-magnet-after .socket-bottom {
  transform: translateX(-50%) scale(1.08);
}

.task-item.is-magnet-before::after,
.task-item.is-magnet-after::after {
  position: absolute;
  left: 44px;
  z-index: 3;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 84%, var(--text) 16%);
  color: var(--text);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12);
}

.task-item.is-magnet-before::after {
  content: "放到它前面";
  top: -16px;
}

.task-item.is-magnet-after::after {
  content: "接到它后面";
  bottom: -16px;
}

html[lang="en"] .task-item.is-magnet-before::after {
  content: "Before";
}

html[lang="en"] .task-item.is-magnet-after::after {
  content: "After";
}

.task-item.is-waiting-step:not(.is-done) {
  opacity: 0.82;
}

.task-item.is-done .task-title-edit {
  text-decoration: line-through;
}

/* styles/11-task-controls-meta.css */
/* Task controls, drag handles, action buttons, compact completed cards, metadata, and notes. */

.check-button {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 2px solid var(--task-color, var(--blue));
  border-radius: 50%;
  background: var(--surface);
  margin-top: 8px;
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.task-item.is-done .check-button {
  background: var(--task-color, var(--blue));
}

.check-button:hover,
.check-button:focus-visible {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 82%, var(--text) 18%);
  background: var(--task-color, var(--blue));
  box-shadow:
    inset 0 0 0 5px var(--surface),
    0 0 0 4px color-mix(in srgb, var(--task-color, var(--blue)) 12%, transparent);
  outline: none;
  transform: scale(1.04);
}

.task-item.is-done .check-button:hover,
.task-item.is-done .check-button:focus-visible {
  background: color-mix(in srgb, var(--task-color, var(--blue)) 88%, var(--surface) 12%);
}

.drag-handle {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 13px;
  background: color-mix(in srgb, var(--button-soft) 76%, var(--surface) 24%);
  color: color-mix(in srgb, var(--muted) 86%, var(--text) 14%);
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  margin-top: 4px;
  cursor: grab;
  display: inline-grid;
  place-items: center;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 64%, transparent),
    0 1px 0 color-mix(in srgb, var(--line-soft) 70%, transparent);
}

.drag-handle:active {
  cursor: grabbing;
}

.drag-handle:hover,
.reorder-handle:hover:not(:disabled) {
  background: color-mix(in srgb, var(--button-soft) 72%, var(--surface) 28%);
}

.drag-handle:hover {
  background: color-mix(in srgb, var(--button-soft) 64%, var(--surface) 36%);
  color: color-mix(in srgb, var(--text) 54%, var(--muted) 46%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 68%, transparent),
    0 9px 18px rgba(17, 24, 39, 0.08);
}

.drag-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  background: currentColor;
  opacity: 0.78;
  transform: translate(-50%, -50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v18M12 3 9 6M12 3l3 3M12 21l-3-3M12 21l3-3M3 12h18M3 12l3-3M3 12l3 3M21 12l-3-3M21 12l-3 3' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v18M12 3 9 6M12 3l3 3M12 21l-3-3M12 21l3-3M3 12h18M3 12l3-3M3 12l3 3M21 12l-3-3M21 12l-3 3' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:
    opacity var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-fast) var(--ease-smooth-soft);
}

.drag-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 82%, var(--surface) 18%);
  opacity: 0.9;
  transform: translate(-50%, -50%);
  transition:
    opacity var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-fast) var(--ease-smooth-soft);
}

.drag-handle:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.06);
}

.drag-handle:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.18);
}

.connector-socket {
  position: absolute;
  left: 26px;
  z-index: 3;
  width: 20px;
  height: 20px;
  border: 4px solid var(--task-color, var(--blue));
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--surface-card) 88%, var(--surface) 12%);
  opacity: 0;
  transform: translateX(-50%);
  transition:
    transform var(--motion-fast) var(--ease-smooth-soft),
    opacity var(--motion-fast) var(--ease-smooth-soft),
    box-shadow var(--motion-fast) var(--ease-smooth-soft);
  pointer-events: none;
}

.socket-top {
  top: 50%;
  transform: translate(-50%, -50%);
}

.socket-bottom {
  bottom: -9px;
}

.task-item.is-magnet-target .socket-top,
.task-item.is-magnet-target .socket-bottom {
  opacity: 0;
}

.task-item.is-chain-child:not(.is-magnet-target) .socket-top {
  left: 24px;
  opacity: 0;
}

.task-item > :not(.connector-socket) {
  position: relative;
  z-index: 1;
}

.task-item.is-chain-child .drag-handle {
  width: 34px;
  height: 34px;
}

.task-item.is-chain-child .drag-handle::before {
  width: 21px;
  height: 21px;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.task-item.is-chain-child .drag-handle::after {
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.task-item.is-chain-child .check-button {
  position: relative;
  z-index: 2;
  width: 26px;
  height: 26px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--surface-card) 88%, var(--surface) 12%);
}

.task-item.is-chain-child .task-title-edit {
  font-size: var(--font-size);
}

.task-item.is-chain-child .category-chip,
.task-item.is-chain-child .due-chip,
.task-item.is-chain-child .step-chip {
  font-size: calc(var(--font-size) * 0.78);
  padding: 4px 9px;
}

.task-main {
  min-width: 0;
  flex: 1;
}

.task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
}

.task-item.is-ongoing-task .task-row {
  flex-wrap: nowrap;
}

.task-title-edit {
  flex: 0 1 auto;
  width: min(calc((var(--task-title-input-units, 12) * 1ch) + 18px), 100%);
  min-width: min(8ch, 100%);
  max-width: min(56ch, 100%);
  border-color: transparent;
  background: transparent;
  min-height: 34px;
  font-size: calc(var(--font-size) * 1.02);
  font-weight: 520;
  padding-left: 0;
}

.task-title-display {
  display: none;
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
}

.task-title-edit,
.task-details :is(input, textarea) {
  cursor: text;
  user-select: text;
  touch-action: auto;
}

.task-details select {
  touch-action: auto;
}

.ongoing-list .task-item.is-ongoing-task .task-title-edit {
  flex: 0 1 auto;
  width: auto;
  max-width: min(42ch, 100%);
  field-sizing: content;
}

.task-item.is-ongoing-task .task-actions {
  margin-left: auto;
}

.ongoing-list .task-item.is-ongoing-task:not(.is-ongoing-card) .task-actions {
  margin-left: 8px;
}

.task-row > .due-chip {
  flex: 0 0 auto;
}

.task-row > .ongoing-chip {
  flex: 0 0 auto;
}

.task-row > .task-title-display + :is(.due-chip, .ongoing-chip, .task-actions) {
  margin-left: auto;
}

.task-row > .due-chip + :is(.ongoing-chip, .task-actions),
.task-row > .ongoing-chip + .task-actions {
  margin-left: 0;
}

.task-row > .due-chip + .ongoing-chip {
  margin-left: 0;
}

.task-item.is-ongoing-card .task-title-edit {
  flex: 0 1 auto;
  max-width: min(26ch, calc(100% - 112px));
}

.task-item.is-ongoing-card .ongoing-chip {
  margin-inline: auto;
}

.task-item.is-ongoing-card .ongoing-chip-in-actions {
  margin-inline: 0;
}

.task-title-edit:focus {
  background: var(--surface);
  padding-left: 12px;
}

.task-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  align-items: center;
}

.ongoing-chip-in-actions {
  flex: 0 0 auto;
  order: 0;
}

.reorder-handle {
  position: relative;
  width: 38px;
  min-height: 38px;
  border: 0;
  border-radius: 12px;
  background: var(--button-soft);
  color: color-mix(in srgb, var(--text) 76%, var(--muted) 24%);
  font-size: 0;
  line-height: 0;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 62%, transparent);
  cursor: grab;
}

.reorder-handle:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.reorder-handle:active:not(:disabled) {
  cursor: grabbing;
}

.reorder-handle::before {
  content: "\2195";
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.reorder-placeholder {
  border: 2px dashed rgba(10, 132, 255, 0.32);
  border-radius: 18px;
  background: rgba(10, 132, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.08);
  justify-self: start;
  box-sizing: border-box;
  animation: settingsPanelIn 160ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
  transition:
    min-height var(--motion-fast) var(--ease-smooth-soft),
    opacity var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-medium) var(--ease-smooth);
}

.reorder-preview {
  position: fixed;
  z-index: 28;
  display: grid;
  gap: 10px;
  pointer-events: none;
  opacity: 0.96;
  transform: rotate(-0.35deg);
  filter: drop-shadow(0 26px 42px rgba(17, 24, 39, 0.16));
}

.reorder-preview .task-item {
  margin-left: 0 !important;
  width: 100% !important;
  transform: none !important;
}

.detail-button,
.task-item .detail-cancel-button,
.delete-button,
.add-to-jar-button,
.restore-button {
  min-height: 38px;
  border: 0;
  border-radius: 13px;
  background: var(--button-soft);
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.detail-button,
.task-item .detail-cancel-button {
  min-width: 58px;
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
}

.task-item .detail-cancel-button {
  color: var(--muted);
}

.detail-button[aria-expanded="true"] {
  background: color-mix(in srgb, var(--blue) 16%, var(--surface) 84%);
  color: color-mix(in srgb, var(--blue) 76%, var(--text) 24%);
  box-shadow: var(--glow-blue-soft);
}

.add-to-jar-button {
  background: rgba(10, 132, 255, 0.13);
  color: color-mix(in srgb, var(--blue) 70%, var(--text) 30%);
  padding: 0 12px;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.07), 0 8px 18px rgba(10, 132, 255, 0.11);
}

.restore-button {
  min-width: 58px;
  padding: 0 12px;
}

.added-to-board {
  min-height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(52, 199, 89, 0.12);
  color: #15803d;
  font-size: 14px;
  font-weight: 900;
  padding: 0 12px;
}

.task-item.is-compact-completed {
  align-items: center;
  min-height: 58px;
  padding: 12px;
  border-left-width: 6px;
  opacity: 1;
}

.task-item.is-compact-completed .task-row {
  width: 100%;
}

.task-item.is-compact-completed .task-title-edit {
  min-height: 38px;
  font-size: var(--font-size);
  font-weight: 520;
  text-decoration: none;
  cursor: default;
}

.task-item.is-compact-completed .task-actions {
  margin-left: auto;
}

.task-item.is-archive-item {
  min-height: 50px;
  padding: 9px 12px;
  border-left-width: 4px;
  box-shadow: none;
}

.task-item.is-archive-item .task-main {
  min-width: 0;
}

.task-item.is-archive-item .task-row {
  align-items: center;
  gap: 10px;
}

.task-item.is-archive-item .task-title-edit {
  min-height: 32px;
  color: var(--text);
  opacity: 0.88;
}

.task-item.is-archive-item .task-actions {
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.archive-date-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.archive-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.02em;
}

.archive-status-badge::before {
  content: none;
}

.archive-status-badge.is-completed {
  background: color-mix(in srgb, #34c759 12%, var(--surface) 88%);
  color: #229943;
}

.archive-status-badge.is-deleted {
  background: color-mix(in srgb, #ff3b30 12%, var(--surface) 88%);
  color: #c42c24;
}

.task-item.is-archive-item .restore-button {
  min-width: 52px;
  min-height: 32px;
  border-radius: 11px;
  font-size: 13px;
}

.task-item.is-done .reorder-handle {
  opacity: 0.3;
  pointer-events: none;
}

.delete-button {
  width: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.task-item.is-timeline-item {
  border-left-width: 6px;
}

.task-item.is-high-priority {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 68%, transparent),
    0 0 0 3px color-mix(in srgb, #ff9500 8%, transparent),
    var(--shadow-card);
}

.priority-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 9px;
  background: color-mix(in srgb, #ff9500 14%, var(--surface) 86%);
  color: color-mix(in srgb, #b45309 78%, var(--text) 22%);
  font-size: calc(var(--font-size) * 0.78);
  font-weight: 950;
  line-height: 1;
}

.task-note {
  margin-top: 6px;
  padding: 0 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.task-note a {
  color: color-mix(in srgb, var(--blue) 72%, var(--text) 28%);
  font-weight: 700;
}

.category-chip,
.due-chip,
.step-chip,
.ongoing-chip {
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--button-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 820;
}

.ongoing-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: color-mix(in srgb, var(--task-color, var(--blue)) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--task-color, var(--blue)) 78%, var(--text) 22%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--task-color, var(--blue)) 8%, transparent),
    0 8px 18px color-mix(in srgb, var(--task-color, var(--blue)) 11%, transparent);
}

.ongoing-chip::before {
  content: none;
}

.due-chip.is-urgent {
  background: rgba(255, 59, 48, 0.12);
  color: #b42318;
}

.due-chip.is-due-today {
  background: color-mix(in srgb, var(--blue) 14%, var(--surface) 86%);
  color: color-mix(in srgb, var(--blue) 76%, var(--text) 24%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 8%, transparent);
}

.due-chip.is-overdue {
  background: rgba(255, 59, 48, 0.12);
  color: #b42318;
}

.step-chip {
  display: none;
}

.step-chip.is-visible {
  display: inline-flex;
}

.step-chip.is-ready {
  background: rgba(10, 132, 255, 0.13);
  color: color-mix(in srgb, var(--blue) 72%, var(--text) 28%);
}

.step-chip.is-waiting {
  background: rgba(102, 112, 133, 0.12);
  color: var(--muted);
}

/* styles/12-task-details-popovers.css */
/* Task detail editor, due picker, category dropdown, and color dropdown. */

.task-details {
  grid-template-columns: minmax(106px, 0.72fr) minmax(142px, 0.92fr) minmax(300px, 2.35fr) minmax(178px, 0.82fr);
  gap: 8px;
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  align-items: end;
  opacity: 1;
  transform: translateY(0);
  transform-origin: top center;
  transition:
    height 210ms var(--ease-smooth),
    opacity 170ms var(--ease-smooth-soft),
    transform 210ms var(--ease-smooth),
    margin-top 210ms var(--ease-smooth),
    padding-top 210ms var(--ease-smooth),
    border-color 210ms var(--ease-smooth);
}

.task-details.has-estimate {
  grid-template-columns: 96px 132px 126px 108px minmax(220px, 1.55fr) minmax(160px, 0.72fr);
}

.task-details:not([hidden]) {
  display: grid;
}

.task-details.is-detail-animating {
  overflow: hidden;
  will-change: height, opacity, transform;
}

.task-details.is-detail-collapsed {
  margin-top: 0;
  padding-top: 0;
  border-top-color: transparent;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .task-details {
    transition: none;
    transform: none;
  }
}

.compact-color {
  grid-column: 1;
  order: 1;
  width: auto;
  justify-self: stretch;
}

.detail-category-field {
  grid-column: 2;
  order: 2;
}

.detail-note-field {
  grid-column: 4;
  order: 4;
}

.detail-estimate-field {
  grid-column: 4;
  order: 3;
}

.detail-due-field {
  grid-column: 5;
  order: 5;
  position: relative;
}

.detail-priority-field {
  grid-column: 3;
  order: 3;
}

.task-details.has-estimate .detail-note-field {
  grid-column: 5;
}

.task-details.has-estimate .detail-due-field {
  grid-column: 6;
}

.task-details .mini-field {
  gap: 4px;
  font-size: 12px;
}

.task-details input,
.task-details select,
.task-details textarea {
  min-height: 38px;
  border-radius: 12px;
  font-size: 14px;
}

.task-details .task-note-edit {
  height: 54px;
  min-height: 54px;
  max-height: 72px;
  box-sizing: border-box;
  line-height: 1.32;
  overflow-y: auto;
  transition:
    background-color var(--motion-fast) var(--ease-smooth-soft),
    border-color var(--motion-fast) var(--ease-smooth-soft),
    box-shadow var(--motion-medium) var(--ease-smooth),
    opacity var(--motion-fast) var(--ease-smooth-soft);
}

.detail-estimate-field input {
  text-align: center;
  font-weight: 850;
}

.native-task-due-input {
  display: none !important;
}

.task-due-control {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 6px;
  min-width: 0;
  z-index: 4;
}

.task-due-trigger,
.task-due-clear {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 4px 12px rgba(17, 24, 39, 0.06);
}

.task-due-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 11px;
  text-align: left;
  font-size: 13px;
  font-weight: 850;
}

.task-due-trigger:hover,
.task-due-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line) 62%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 7%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 92%, var(--surface-soft) 8%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    0 0 0 3px color-mix(in srgb, var(--blue) 7%, transparent);
}

.task-due-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-due-trigger-icon {
  width: 16px;
  height: 16px;
  justify-self: end;
  background: color-mix(in srgb, var(--muted) 78%, var(--text) 22%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3v3M17 3v3M4.5 9.5h15M6.5 5h11A2.5 2.5 0 0 1 20 7.5v10A2.5 2.5 0 0 1 17.5 20h-11A2.5 2.5 0 0 1 4 17.5v-10A2.5 2.5 0 0 1 6.5 5Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3v3M17 3v3M4.5 9.5h15M6.5 5h11A2.5 2.5 0 0 1 20 7.5v10A2.5 2.5 0 0 1 17.5 20h-11A2.5 2.5 0 0 1 4 17.5v-10A2.5 2.5 0 0 1 6.5 5Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.task-due-clear { --task-due-clear-fg: color-mix(in srgb, var(--blue) 62%, var(--muted) 38%); --task-due-clear-x: color-mix(in srgb, #ff3b30 70%, var(--text) 30%); position: relative; display: inline-grid; place-items: center; padding: 0; border-color: color-mix(in srgb, var(--blue) 24%, var(--line) 76%); background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 5%, transparent), transparent 72%), color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%); color: var(--task-due-clear-fg); font-size: 0; line-height: 1; overflow: hidden; }
.task-due-clear-calendar { width: 18px; height: 18px; display: block; background: currentColor; transition: transform 140ms ease; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3v3M17 3v3M4.5 9.5h15M6.5 5h11A2.5 2.5 0 0 1 20 7.5v10A2.5 2.5 0 0 1 17.5 20h-11A2.5 2.5 0 0 1 4 17.5v-10A2.5 2.5 0 0 1 6.5 5Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3v3M17 3v3M4.5 9.5h15M6.5 5h11A2.5 2.5 0 0 1 20 7.5v10A2.5 2.5 0 0 1 17.5 20h-11A2.5 2.5 0 0 1 4 17.5v-10A2.5 2.5 0 0 1 6.5 5Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.task-due-clear-x { position: absolute; top: 7px; right: 6px; width: 12px; height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--task-due-clear-x) 28%, transparent); }
.task-due-clear-x::before, .task-due-clear-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 1.5px; border-radius: 999px; background: var(--task-due-clear-x); }
.task-due-clear-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.task-due-clear-x::after { transform: translate(-50%, -50%) rotate(-45deg); }

.task-due-clear:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  color: var(--muted);
}

.task-due-clear:not(:disabled):hover { border-color: color-mix(in srgb, var(--blue) 38%, var(--line) 62%); background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, transparent), transparent 72%), color-mix(in srgb, var(--surface) 92%, var(--surface-soft) 8%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent), 0 0 0 3px color-mix(in srgb, var(--blue) 7%, transparent); }
.task-due-clear:not(:disabled):hover .task-due-clear-calendar { transform: translateY(-1px); }

.task-due-picker {
  position: fixed;
  left: var(--task-due-picker-left, 24px);
  top: var(--task-due-picker-top, 24px);
  z-index: 96;
  width: var(--task-due-picker-width, 292px);
  max-height: var(--task-due-picker-max-height, calc(100vh - 28px));
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  padding: 12px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line-soft) 84%);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--blue) 9%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    var(--glow-blue-soft),
    0 22px 44px rgba(17, 24, 39, 0.2);
  backdrop-filter: blur(22px) saturate(1.15);
  animation: settingsPanelIn 170ms var(--ease-smooth);
}

.task-due-picker-header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}

.task-due-picker-header strong {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-due-month-button {
  min-height: 34px;
  border: 0;
  border-radius: 11px;
  background: color-mix(in srgb, var(--button-soft) 78%, var(--surface) 22%);
  color: var(--text);
  font-size: 23px;
  font-weight: 760;
  line-height: 1;
}

.task-due-month-button:hover {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--blue) 76%, var(--text) 24%);
}

.task-due-weekdays,
.task-due-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.task-due-weekdays span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 880;
  text-align: center;
}

.task-due-day {
  min-width: 0;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.task-due-day:hover {
  border-color: color-mix(in srgb, var(--blue) 22%, transparent);
  background: color-mix(in srgb, var(--blue) 9%, var(--surface) 91%);
}

.task-due-day.is-outside-month {
  color: color-mix(in srgb, var(--muted) 52%, transparent);
}

.task-due-day.is-today {
  border-color: color-mix(in srgb, var(--blue) 42%, transparent);
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
}

.task-due-day.is-selected {
  border-color: color-mix(in srgb, var(--blue) 60%, transparent);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.62), transparent 34%),
    var(--blue);
  color: #fff;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--blue) 11%, transparent),
    0 10px 20px color-mix(in srgb, var(--blue) 18%, transparent);
}

.task-due-picker-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.task-due-today-button {
  min-height: 32px;
  border: 0;
  border-radius: 11px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--blue) 76%, var(--text) 24%);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 920;
}

.native-task-category-select {
  display: none;
}

.task-category-control {
  --category-color: var(--blue);
  position: relative;
  width: 100%;
}

.task-category-trigger {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--category-color) 16%, var(--line) 84%);
  border-radius: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--category-color) 7%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 92%, var(--surface-soft) 8%);
  color: var(--text);
  padding: 0 10px;
  text-align: left;
  font-size: 14px;
  font-weight: 850;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 0 0 3px color-mix(in srgb, var(--category-color) 5%, transparent);
}

.task-category-trigger-dot,
.task-category-option-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--category-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--category-color) 9%, transparent);
}

.task-category-trigger-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-category-trigger-chevron {
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  transition: transform var(--motion-fast) var(--ease-smooth-soft);
}

.task-category-trigger[aria-expanded="true"] .task-category-trigger-chevron {
  transform: rotate(180deg);
}

.task-category-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 34;
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line-soft) 86%);
  border-radius: 17px;
  background:
    radial-gradient(circle at 18% 0, color-mix(in srgb, var(--blue) 8%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    var(--glow-blue-soft),
    0 18px 38px rgba(17, 24, 39, 0.14);
  backdrop-filter: blur(22px) saturate(1.16);
  animation: settingsPanelIn 180ms var(--ease-smooth);
}

.task-category-option {
  min-height: 40px;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  padding: 0 10px;
  text-align: left;
  font-size: 14px;
  font-weight: 850;
}

.task-category-option:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--button-soft) 70%, var(--category-color) 6%);
}

.task-category-option::after {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.72);
  background:
    linear-gradient(135deg, transparent 45%, #fff 45% 58%, transparent 58%) 5px 1px / 8px 10px no-repeat,
    var(--category-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--category-color) 14%, transparent);
  transition:
    opacity var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-fast) var(--ease-smooth-soft);
}

.task-category-option.is-selected {
  border-color: color-mix(in srgb, var(--category-color) 30%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--category-color) 11%, transparent), transparent 72%),
    color-mix(in srgb, var(--category-color) 7%, var(--surface) 93%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent),
    0 0 0 3px color-mix(in srgb, var(--category-color) 7%, transparent);
}

.task-category-option.is-selected::after {
  opacity: 1;
  transform: scale(1);
}

.task-details textarea {
  min-height: 54px;
  max-height: 72px;
  resize: vertical;
  padding-block: 8px;
}

.task-color-palette {
  position: relative;
  display: block;
  min-width: 0;
  z-index: 2;
}

.task-color-control {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.task-color-trigger {
  min-height: 38px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%);
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 4px 12px rgba(17, 24, 39, 0.06);
}

.task-color-trigger-swatch {
  width: 16px;
  height: 16px;
  border-radius: 6px;
  background: var(--swatch-color);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 1px 3px rgba(17, 24, 39, 0.12);
}

.task-color-trigger-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  white-space: nowrap;
}

.task-color-trigger-chevron {
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  transition: transform var(--motion-fast) var(--ease-smooth-soft);
}

.task-color-palette .task-color-trigger {
  gap: 10px;
  padding-inline: 10px;
}

.task-color-palette .task-color-trigger-swatch {
  flex: 1 1 auto;
  width: auto;
  min-width: 36px;
  height: 10px;
  border-radius: 999px;
}

.task-color-trigger[aria-expanded="true"] .task-color-trigger-chevron {
  transform: rotate(180deg);
}

.task-color-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 32;
  width: min(224px, 78vw);
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line-soft) 88%);
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 0, color-mix(in srgb, var(--blue) 7%, transparent), transparent 40%),
    color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    var(--glow-blue-soft),
    0 18px 36px rgba(17, 24, 39, 0.12);
  backdrop-filter: blur(20px) saturate(1.15);
  animation: settingsPanelIn 180ms var(--ease-smooth);
}

.task-color-dropdown .color-swatch {
  width: 100%;
  min-height: 22px;
  border-radius: 8px;
}

/* styles/12-task-interaction-popovers.css */
/* Task drag guide, estimate popover, and delete confirmation. */

.detach-zone {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  gap: 3px;
  min-height: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  border-top: 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.16);
  color: var(--text);
  text-align: center;
  align-content: center;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.detach-zone strong {
  color: var(--text);
  font-size: calc(var(--font-size) * 1.05);
}

.detach-zone span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.desktop-shell.is-link-drag .detach-zone {
  min-height: 150px;
  height: auto;
  padding: 22px 20px 28px;
  border-top: 2px dashed var(--line);
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.detach-zone.is-hot {
  border-color: #ff3b30;
  background: color-mix(in srgb, #ff3b30 9%, var(--surface) 91%);
}

.drag-mode-indicator {
  position: fixed;
  left: var(--drag-indicator-left, 24px);
  top: var(--drag-indicator-top, 24px);
  z-index: 80;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 3px;
  min-width: 164px;
  max-width: 236px;
  padding: 11px 13px 11px 11px;
  border: 1px solid color-mix(in srgb, var(--line) 42%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 22px 38px rgba(17, 24, 39, 0.18);
  backdrop-filter: blur(18px);
  opacity: 0.9;
  pointer-events: none;
}

.drag-mode-indicator[hidden] {
  display: none;
}

.drag-mode-indicator strong {
  grid-column: 2;
  font-size: 14px;
  font-weight: 950;
}

.drag-mode-indicator span {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.drag-mode-indicator::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 14%, var(--surface) 86%);
  color: var(--blue);
  font-size: 19px;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.08);
}

.drag-mode-indicator[data-mode="link"] {
  border-color: color-mix(in srgb, #34c759 52%, var(--line) 48%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 80%, transparent),
    0 0 0 4px rgba(52, 199, 89, 0.08),
    0 22px 38px rgba(17, 24, 39, 0.18);
}

.drag-mode-indicator[data-mode="link"]::before {
  content: "\2195";
  background: color-mix(in srgb, #34c759 24%, var(--surface) 76%);
  color: #16913c;
  font-size: 21px;
  text-shadow:
    0.7px 0 currentColor,
    -0.7px 0 currentColor,
    0 0.7px currentColor,
    0 -0.7px currentColor;
  box-shadow: 0 0 0 5px rgba(52, 199, 89, 0.13), 0 12px 24px rgba(52, 199, 89, 0.2);
}

.drag-mode-indicator[data-mode="link"][data-link-direction="up"]::before {
  content: "\2B06";
}

.drag-mode-indicator[data-mode="link"][data-link-direction="down"]::before {
  content: "\2B07";
}

.drag-mode-indicator[data-mode="cancel"] {
  border-color: color-mix(in srgb, var(--muted) 34%, var(--line) 66%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 0 0 4px color-mix(in srgb, var(--muted) 8%, transparent),
    0 22px 38px rgba(17, 24, 39, 0.16);
}

.drag-mode-indicator[data-mode="cancel"]::before {
  content: "";
  background:
    linear-gradient(color-mix(in srgb, var(--text) 64%, var(--muted) 36%), color-mix(in srgb, var(--text) 64%, var(--muted) 36%)) center / 14px 3px no-repeat,
    color-mix(in srgb, var(--muted) 18%, var(--surface) 82%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent),
    0 0 0 5px color-mix(in srgb, var(--muted) 10%, transparent);
}

.drag-mode-indicator[data-mode="reorder"] {
  border-color: color-mix(in srgb, var(--blue) 54%, var(--line) 46%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 80%, transparent),
    0 0 0 4px rgba(10, 132, 255, 0.08),
    0 22px 38px rgba(17, 24, 39, 0.18);
}

.drag-mode-indicator[data-mode="reorder"]::before {
  content: "";
  background:
    linear-gradient(var(--blue), var(--blue)) 8px 8px / 12px 3px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 6px 14px / 16px 3px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 10px 20px / 8px 3px no-repeat,
    color-mix(in srgb, var(--blue) 24%, var(--surface) 76%);
  box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.13), 0 12px 24px rgba(10, 132, 255, 0.2);
}

.drag-mode-indicator[data-mode="ongoing"] {
  border-color: color-mix(in srgb, #f59e0b 34%, var(--line) 66%);
}

.drag-mode-indicator[data-mode="ongoing"]::before {
  content: "";
  background:
    radial-gradient(circle at 14px 14px, #f59e0b 0 5px, transparent 5.5px),
    conic-gradient(from 0deg, #f59e0b 0 72deg, transparent 72deg 360deg),
    color-mix(in srgb, #f59e0b 12%, var(--surface) 88%);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1), 0 10px 20px rgba(245, 158, 11, 0.16);
}

.drag-mode-indicator[data-mode="recommendation"] {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line) 58%);
}

.drag-mode-indicator[data-mode="recommendation"]::before {
  content: "";
  background:
    linear-gradient(var(--blue), var(--blue)) 8px 15px / 12px 3px no-repeat,
    linear-gradient(135deg, transparent 44%, var(--blue) 45% 55%, transparent 56%) 9px 8px / 11px 11px no-repeat,
    color-mix(in srgb, var(--blue) 18%, var(--surface) 82%);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.1), 0 10px 20px rgba(10, 132, 255, 0.16);
}

.drag-zone-guide {
  position: fixed;
  left: 50%;
  top: 18px;
  z-index: 78;
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 20fr) minmax(0, 28fr);
  gap: 8px;
  width: min(560px, calc(100vw - 84px));
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 68%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 22px 40px rgba(17, 24, 39, 0.16);
  backdrop-filter: blur(18px) saturate(1.15);
  transform: translateX(-50%);
  pointer-events: none;
}

.drag-zone-guide[hidden] {
  display: none;
}

.drag-zone-segment {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: color-mix(in srgb, var(--button-soft) 82%, var(--surface) 18%);
  color: color-mix(in srgb, var(--text) 42%, var(--muted) 58%);
  text-align: center;
  transition:
    border-color var(--motion-fast) var(--ease-smooth-soft),
    background var(--motion-fast) var(--ease-smooth-soft),
    color var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-fast) var(--ease-smooth-soft),
    box-shadow var(--motion-fast) var(--ease-smooth-soft);
}

.drag-zone-segment strong {
  font-size: 14px;
  font-weight: 920;
  color: inherit;
}

.drag-zone-segment span {
  font-size: 11px;
  font-weight: 760;
  color: inherit;
  opacity: 0.88;
}

.drag-zone-guide[data-active-zone="link"] [data-zone="link"] {
  border-color: color-mix(in srgb, #34c759 34%, transparent);
  background: color-mix(in srgb, #34c759 26%, var(--surface) 74%);
  color: #0f8b37;
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.13), 0 14px 26px rgba(52, 199, 89, 0.18);
}

.drag-zone-guide[data-active-zone="cancel"] [data-zone="cancel"] {
  border-color: color-mix(in srgb, var(--muted) 22%, transparent);
  background: color-mix(in srgb, var(--muted) 20%, var(--surface) 80%);
  color: color-mix(in srgb, var(--text) 76%, var(--muted) 24%);
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 10%, transparent), 0 14px 26px rgba(17, 24, 39, 0.12);
}

.drag-zone-guide[data-active-zone="reorder"] [data-zone="reorder"] {
  border-color: color-mix(in srgb, var(--blue) 34%, transparent);
  background: color-mix(in srgb, var(--blue) 24%, var(--surface) 76%);
  color: color-mix(in srgb, var(--blue) 86%, var(--text) 14%);
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.13), 0 14px 26px rgba(10, 132, 255, 0.18);
}

.estimate-popover {
  position: fixed;
  left: var(--estimate-left, 24px);
  top: var(--estimate-top, 24px);
  z-index: 95;
  width: var(--estimate-width, 288px);
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line) 80%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 24px 46px rgba(17, 24, 39, 0.18);
  backdrop-filter: blur(18px);
}

.estimate-popover[hidden] {
  display: none;
}

.estimate-popover > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 950;
}

.estimate-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.estimate-field > span:first-child {
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.estimate-field .duration-unit {
  min-height: 42px;
}

.estimate-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.estimate-actions button {
  min-height: 38px;
  border: 0;
  border-radius: 12px;
  background: var(--button-soft);
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.estimate-actions button:last-child {
  background: var(--blue);
  color: #fff;
}

.delete-confirm-popover {
  position: fixed;
  left: var(--delete-confirm-left, 24px);
  top: var(--delete-confirm-top, 24px);
  z-index: 100;
  width: var(--delete-confirm-width, 300px);
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, #ff3b30 24%, var(--line-soft) 76%);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, #ff3b30 13%, transparent), transparent 40%),
    color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 0 0 4px color-mix(in srgb, #ff3b30 8%, transparent),
    0 24px 48px rgba(17, 24, 39, 0.2);
  backdrop-filter: blur(22px) saturate(1.12);
  animation: settingsPanelIn 180ms var(--ease-smooth);
}

.delete-confirm-popover[hidden] {
  display: none;
}

.delete-confirm-popover strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 950;
}

.delete-confirm-popover span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.delete-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.delete-confirm-actions button {
  min-height: 38px;
  border: 0;
  border-radius: 12px;
  background: var(--button-soft);
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.delete-confirm-actions button:last-child {
  background: color-mix(in srgb, #ff3b30 20%, var(--surface) 80%);
  color: color-mix(in srgb, #ff3b30 78%, var(--text) 22%);
  box-shadow: 0 0 0 3px color-mix(in srgb, #ff3b30 8%, transparent), 0 10px 22px color-mix(in srgb, #ff3b30 14%, transparent);
}

/* styles/12-priority-checkbox.css */
/* Compact high-priority checkbox for task detail editing. */

.task-details.has-estimate {
  grid-template-columns: 96px 132px 108px minmax(280px, 1.18fr) 112px minmax(160px, 0.72fr);
}

.compact-color {
  grid-column: 1;
  order: 1;
}

.detail-category-field {
  grid-column: 2;
  order: 2;
}

.detail-estimate-field {
  grid-column: 3;
  order: 3;
}

.detail-note-field,
.task-details.has-estimate .detail-note-field {
  grid-column: 4;
  order: 4;
}

.detail-priority-field {
  grid-column: 5;
  order: 5;
}

.detail-due-field,
.task-details.has-estimate .detail-due-field {
  grid-column: 6;
  order: 6;
}

.priority-check-field {
  align-self: stretch;
}

.task-priority-check-heading {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.task-priority-check {
  min-height: 32px;
  display: grid;
  grid-template-columns: 15px minmax(0, max-content);
  align-items: center;
  justify-content: start;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, #ff9500 18%, var(--line) 82%);
  border-radius: 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, #ff9500 5%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%);
  color: var(--text);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 3px 9px rgba(17, 24, 39, 0.05);
  user-select: none;
}

.detail-priority-field.is-high-priority .task-priority-check,
.task-priority-check:focus-within {
  border-color: color-mix(in srgb, #ff9500 46%, var(--line) 54%);
  background:
    linear-gradient(90deg, color-mix(in srgb, #ff9500 11%, transparent), transparent 72%),
    color-mix(in srgb, #ff9500 6%, var(--surface) 94%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    0 0 0 2px color-mix(in srgb, #ff9500 8%, transparent);
}

.task-priority-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.task-priority-check-box {
  position: relative;
  width: 15px;
  height: 15px;
  border: 2px solid color-mix(in srgb, #ff9500 54%, var(--line) 46%);
  border-radius: 5px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-soft) 8%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent);
}

.task-priority-check-box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.72);
  transition:
    opacity var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-fast) var(--ease-smooth-soft);
}

.task-priority-check input:checked + .task-priority-check-box {
  border-color: color-mix(in srgb, #ff9500 86%, var(--line) 14%);
  background: #ff9500;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 0 0 2px color-mix(in srgb, #ff9500 12%, transparent);
}

.task-priority-check input:checked + .task-priority-check-box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.task-priority-check-text {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, #b45309 76%, var(--text) 24%);
  font-size: 13px;
  font-weight: 880;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-theme="dark"] .task-priority-check-text {
  color: color-mix(in srgb, #ffd28a 76%, var(--text) 24%);
}

/* styles/12-recurrence-control.css */
/* Recurrence controls and a less cramped task detail layout. */

.task-details,
.task-details.has-estimate {
  grid-template-columns: 96px 132px 108px minmax(260px, 1.08fr) minmax(132px, 0.42fr) 104px minmax(170px, 0.66fr);
  gap: 9px 10px;
  align-items: end;
}

.compact-color {
  grid-column: 1;
  order: 1;
}

.detail-category-field {
  grid-column: 2;
  order: 2;
}

.detail-estimate-field {
  grid-column: 3;
  order: 3;
}

.detail-note-field,
.task-details.has-estimate .detail-note-field {
  grid-column: 4;
  order: 4;
}

.detail-recurrence-field {
  grid-column: 5;
  order: 5;
}

.detail-priority-field {
  grid-column: 6;
  order: 6;
}

.detail-due-field,
.task-details.has-estimate .detail-due-field {
  grid-column: 7;
  order: 7;
}

.task-details .mini-field > span:first-child,
.task-priority-check-heading {
  min-height: 15px;
  color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%);
  font-size: 11px;
  font-weight: 860;
  line-height: 1.1;
}

.task-details textarea {
  min-height: 40px;
  max-height: 86px;
}

.task-recurrence-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.task-recurrence-control input[type="hidden"] {
  display: none;
}

.task-recurrence-trigger {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 6%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%);
  color: var(--text);
  padding: 0 10px 0 11px;
  text-align: left;
  font-size: 13px;
  font-weight: 850;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    0 4px 12px rgba(17, 24, 39, 0.06);
}

.task-recurrence-trigger:hover,
.task-recurrence-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line) 62%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 9%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 92%, var(--surface-soft) 8%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 0 0 3px color-mix(in srgb, var(--blue) 7%, transparent);
}

.task-recurrence-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-recurrence-trigger-icon {
  width: 15px;
  height: 15px;
  justify-self: end;
  background: color-mix(in srgb, var(--muted) 78%, var(--text) 22%);
  clip-path: polygon(20% 34%, 50% 66%, 80% 34%, 90% 44%, 50% 82%, 10% 44%);
}

.task-recurrence-menu {
  position: fixed;
  left: var(--task-recurrence-menu-left, 24px);
  top: var(--task-recurrence-menu-top, 24px);
  z-index: 98;
  width: var(--task-recurrence-menu-width, 196px);
  box-sizing: border-box;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line-soft) 82%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 18px 34px rgba(17, 24, 39, 0.18);
  backdrop-filter: blur(18px) saturate(1.08);
  animation: settingsPanelIn 150ms var(--ease-smooth);
}

.task-recurrence-option {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 0 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 850;
}

.task-recurrence-option:hover,
.task-recurrence-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--blue) 76%, var(--text) 24%);
}

.recurrence-custom-backdrop {
  position: fixed;
  inset: 0;
  z-index: 112;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(6px);
}

.recurrence-custom-dialog {
  width: min(486px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  box-sizing: border-box;
  display: grid;
  gap: 16px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--blue) 15%, var(--line-soft) 85%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--text);
  padding: 26px 28px 24px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 80%, transparent),
    0 24px 60px rgba(17, 24, 39, 0.26);
  animation: settingsPanelIn 170ms var(--ease-smooth);
}

.recurrence-custom-dialog h2 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 24px;
  font-weight: 860;
  line-height: 1.18;
}

.recurrence-dialog-row,
.recurrence-end-option {
  display: grid;
  grid-template-columns: 104px minmax(0, 76px) minmax(112px, 1fr);
  align-items: center;
  gap: 10px;
}

.recurrence-dialog-row > span:first-child,
.recurrence-section-title {
  color: color-mix(in srgb, var(--muted) 84%, var(--text) 16%);
  font-size: 14px;
  font-weight: 760;
}

.recurrence-custom-dialog input,
.recurrence-custom-dialog select {
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface) 30%);
  color: var(--text);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 780;
}

.recurrence-custom-dialog input[type="number"] {
  text-align: center;
}

.recurrence-custom-dialog input:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.recurrence-choice-control,
.recurrence-date-control {
  position: relative;
  min-width: 0;
  display: block;
}

.recurrence-choice-trigger,
.recurrence-date-trigger {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 7%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface-soft) 70%, var(--surface) 30%);
  color: var(--text);
  padding: 0 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 780;
}

.recurrence-choice-trigger::after,
.recurrence-date-trigger::after {
  content: "";
  width: 9px;
  height: 9px;
  justify-self: end;
  background: color-mix(in srgb, var(--muted) 74%, var(--text) 26%);
  clip-path: polygon(16% 30%, 50% 64%, 84% 30%, 94% 42%, 50% 84%, 6% 42%);
  transition: transform var(--motion-fast) var(--ease-smooth-soft);
}

.recurrence-choice-control.is-open .recurrence-choice-trigger::after,
.recurrence-date-control.is-open .recurrence-date-trigger::after {
  transform: rotate(180deg);
}

.recurrence-choice-trigger:hover,
.recurrence-date-trigger:hover,
.recurrence-choice-trigger[aria-expanded="true"],
.recurrence-date-trigger[aria-expanded="true"],
.recurrence-choice-trigger:focus-visible,
.recurrence-date-trigger:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 46%, var(--line) 54%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}

.recurrence-date-control.is-disabled {
  opacity: 0.52;
}

.recurrence-date-control.is-disabled .recurrence-date-trigger {
  cursor: not-allowed;
}

.recurrence-choice-trigger-text,
.recurrence-date-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recurrence-choice-menu,
.recurrence-date-picker {
  position: absolute;
  z-index: 124;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line-soft) 82%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 18px 36px rgba(17, 24, 39, 0.18);
  backdrop-filter: blur(18px) saturate(1.08);
}

.recurrence-choice-menu[hidden],
.recurrence-date-picker[hidden] {
  display: none;
}

.recurrence-choice-option {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 0 10px;
  text-align: left;
  font-size: 14px;
  font-weight: 820;
}

.recurrence-choice-option:hover,
.recurrence-choice-option:focus-visible,
.recurrence-choice-option[aria-selected="true"] {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 18%, transparent);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--blue) 74%, var(--text) 26%);
}

.recurrence-date-header,
.recurrence-date-footer {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
}

.recurrence-date-footer {
  grid-template-columns: 1fr;
}

.recurrence-date-header strong {
  text-align: center;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.recurrence-date-header button,
.recurrence-date-footer button {
  min-height: 30px;
  border: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--button-soft) 80%, var(--surface) 20%);
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.recurrence-date-weekdays,
.recurrence-date-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.recurrence-date-weekdays span {
  color: var(--muted);
  text-align: center;
  font-size: 10px;
  font-weight: 850;
}

.recurrence-date-day {
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
}

.recurrence-date-day.is-outside-month {
  color: color-mix(in srgb, var(--muted) 56%, transparent);
}

.recurrence-date-day:hover:not(:disabled),
.recurrence-date-day:focus-visible:not(:disabled),
.recurrence-date-day.is-selected,
.recurrence-date-day.is-today {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 20%, transparent);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
}

.recurrence-date-day.is-selected {
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 26%, transparent);
}

.recurrence-date-day:disabled {
  cursor: not-allowed;
  opacity: 0.32;
}

.recurrence-weekday-row[hidden] {
  display: none;
}

.recurrence-weekday-group {
  grid-column: 2 / span 2;
  display: grid;
  grid-template-columns: repeat(7, minmax(34px, 1fr));
  gap: 6px;
}

.recurrence-weekday-button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--button-soft) 76%, var(--surface) 24%);
  color: var(--text);
  font-size: 12px;
  font-weight: 880;
}

.recurrence-weekday-button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--blue) 48%, transparent);
  background: color-mix(in srgb, var(--blue) 18%, var(--surface) 82%);
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 8%, transparent);
}

.recurrence-ends-block {
  display: grid;
  gap: 10px;
}

.recurrence-end-option {
  grid-template-columns: 22px 120px minmax(0, 1fr) auto;
  min-height: 42px;
}

.recurrence-end-option input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  accent-color: var(--blue);
}

.recurrence-end-option > span {
  color: var(--text);
  font-size: 14px;
  font-weight: 780;
}

.recurrence-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.recurrence-dialog-primary,
.recurrence-dialog-secondary {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 880;
}

.recurrence-dialog-primary {
  background: var(--blue);
  color: #fff;
}

.recurrence-dialog-secondary {
  background: transparent;
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
}

.recurrence-dialog-primary:hover {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent);
}

.recurrence-dialog-secondary:hover {
  background: color-mix(in srgb, var(--blue) 10%, var(--surface) 90%);
}

.recurrence-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 9px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--blue) 76%, var(--text) 24%);
  font-size: calc(var(--font-size) * 0.76);
  font-weight: 930;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 7%, transparent);
}

.task-row > .recurrence-chip {
  flex: 0 0 auto;
}

.task-row > .task-title-edit + .recurrence-chip {
  margin-left: auto;
}

.task-row > .task-title-display + .recurrence-chip {
  margin-left: auto;
}

@media (max-width: 1320px) {
  .task-details,
  .task-details.has-estimate {
    grid-template-columns: 96px 132px 108px minmax(160px, 1fr) 104px minmax(170px, 0.86fr);
  }

  .detail-note-field,
  .task-details.has-estimate .detail-note-field {
    grid-column: 4 / span 2;
  }

  .detail-recurrence-field {
    grid-column: 6;
  }

  .detail-priority-field {
    grid-column: 5;
    grid-row: 2;
  }

  .detail-due-field,
  .task-details.has-estimate .detail-due-field {
    grid-column: 6;
    grid-row: 2;
  }
}

@media (max-width: 860px) {
  .task-details,
  .task-details.has-estimate {
    grid-template-columns: 1fr;
  }

  .task-details .compact-color,
  .task-details .detail-category-field,
  .task-details .detail-estimate-field,
  .task-details .detail-note-field,
  .task-details .detail-recurrence-field,
  .task-details .detail-priority-field,
  .task-details .detail-due-field,
  .task-details.has-estimate .detail-note-field,
  .task-details.has-estimate .detail-due-field {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .recurrence-custom-backdrop {
    align-items: end;
    padding: 10px;
  }

  .recurrence-custom-dialog {
    width: 100%;
    padding: 22px 18px 18px;
  }

  .recurrence-dialog-row,
  .recurrence-end-option {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .recurrence-weekday-group {
    grid-column: 1;
  }

  .recurrence-end-option {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .recurrence-end-option input:not([type="radio"]),
  .recurrence-end-option > span:last-child {
    grid-column: 2;
  }
}

/* styles/13-completion-dots.css */
/* Completion bottle, collected task balls, and bottle entry states. */

.dot-board {
  --bottle-width: min(100%, calc(var(--dot-board-size) + 76px));
  --bottle-height: clamp(252px, calc(var(--dot-board-size) + 142px), 344px);
  --bottle-glass: color-mix(in srgb, var(--surface-raised) 70%, var(--surface-panel-muted) 30%);
  --bottle-line: color-mix(in srgb, var(--blue) 22%, var(--line-soft) 78%);
  --bottle-shine: color-mix(in srgb, #ffffff 72%, var(--blue) 28%);
  --bottle-amber: #ffd75f;
  --ball-size: clamp(14px, calc(var(--dot-board-size) - 116px), 20px);
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(100%, var(--bottle-width));
  margin: 0 auto;
}

.bottle-scene {
  position: relative;
  display: block;
  width: var(--bottle-width);
  height: var(--bottle-height);
  overflow: visible;
  isolation: isolate;
  filter: drop-shadow(0 18px 24px rgba(17, 24, 39, 0.08));
}

.bottle-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../assets/completion-jar.png?v=2026-06-28-jar-image") center / contain no-repeat;
  pointer-events: none;
}

.bottle-scene::after {
  content: none;
}


.dot-slot {
  width: var(--ball-size);
  height: var(--ball-size);
  border-radius: 50%;
  min-width: 0;
  background: var(--button-soft);
}

.bottle-ball {
  position: absolute;
  /* Match the physics spacing: star diameter is 5.4% of bottle height. */
  width: calc(var(--bottle-height) * 0.053);
  height: calc(var(--bottle-height) * 0.053);
  left: var(--ball-left, 50%);
  top: var(--ball-top, 86%);
  z-index: 2;
  display: grid;
  place-items: center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transform: translate(-50%, -50%) scale(var(--ball-hover-scale, 1)) rotate(var(--ball-rotate, 0deg));
  transform-origin: center;
  transition:
    transform 150ms cubic-bezier(.2, .8, .25, 1.18),
    filter 150ms ease;
}

.bottle-ball.is-filled:hover {
  --ball-hover-scale: 1.62;
  z-index: 3;
  filter:
    saturate(1.12)
    drop-shadow(0 13px 18px rgba(17, 24, 39, 0.26))
    drop-shadow(0 0 14px color-mix(in srgb, var(--ball-color) 50%, transparent));
  will-change: transform;
}

.bottle-star {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--ball-color);
  filter:
    drop-shadow(0 1px 0 color-mix(in srgb, #ffffff 70%, transparent))
    drop-shadow(0 3px 4px rgba(17, 24, 39, 0.12));
}

.bottle-star path {
  /* Dark edge for light theme so pale stars stay visible on bright surfaces. */
  stroke: color-mix(in srgb, #111827 78%, var(--ball-color) 22%);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.bottle-ball.is-new .bottle-star {
  animation: starWarmIn 1450ms linear var(--drop-delay, 0ms) both;
}

.bottle-ball.is-new {
  will-change: left, top, transform;
}

.bottle-ball.is-physics-driven {
  transition: none;
}

.bottle-ball.is-css-drop {
  animation: bottleBallDrop 1450ms linear var(--drop-delay, 0ms) both;
}

.legacy-dot-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 9px;
  width: min(100%, var(--dot-board-size));
  border: 1px solid color-mix(in srgb, var(--line-soft) 88%, transparent);
  border-radius: 22px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-raised) 92%, transparent),
      color-mix(in srgb, var(--surface-panel-muted) 96%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    var(--shadow-card);
}

.legacy-dot-slot {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 50%;
  background: var(--button-soft);
  box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.08);
  transform-origin: center;
  transition:
    transform 150ms cubic-bezier(.2, .8, .25, 1.18),
    box-shadow 150ms ease,
    filter 150ms ease;
}

.legacy-dot-slot.is-filled {
  background: var(--legacy-dot-color);
  box-shadow:
    inset -4px -5px 8px rgba(0, 0, 0, 0.16),
    0 4px 10px rgba(17, 24, 39, 0.12);
}

.legacy-dot-slot.is-filled:hover {
  z-index: 2;
  transform: scale(1.28);
  filter: saturate(1.08);
  box-shadow:
    inset -4px -5px 8px rgba(0, 0, 0, 0.14),
    0 11px 20px rgba(17, 24, 39, 0.22);
}

.completion-point-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1300;
  display: grid;
  gap: 4px;
  max-width: min(310px, calc(100vw - 24px));
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 11px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 94%, #fff6cc 6%), var(--surface-raised));
  color: var(--text);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 54%, transparent),
    var(--shadow-panel);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.35;
  letter-spacing: 0;
  white-space: normal;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px) scale(0.98);
  transition:
    opacity 90ms ease,
    transform 120ms cubic-bezier(.2, .8, .25, 1);
}

.completion-point-tooltip[hidden] {
  display: none;
}

.completion-point-tooltip strong,
.completion-point-tooltip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.completion-point-tooltip strong {
  white-space: nowrap;
}

.completion-point-tooltip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}

.completion-point-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.legacy-dot-slot.is-new {
  animation: dotFlyIn 760ms cubic-bezier(.18, .86, .25, 1.18) both;
}

:root[data-theme="dark"] .dot-board {
  --bottle-glass: color-mix(in srgb, var(--surface-elevated) 74%, #20304a 26%);
  --bottle-line: color-mix(in srgb, #8fb8ff 26%, var(--line-soft) 74%);
  --bottle-shine: color-mix(in srgb, #ffffff 62%, #7fb0ff 38%);
  --bottle-amber: #f2c94c;
}

:root[data-theme="dark"] .bottle-scene {
  filter:
    drop-shadow(0 20px 26px rgba(0, 0, 0, 0.2))
    drop-shadow(0 0 22px color-mix(in srgb, var(--blue) 10%, transparent));
}

:root[data-theme="dark"] .bottle-star path {
  /* Keep the pale edge on dark surfaces; a black edge would vanish there. */
  stroke: color-mix(in srgb, #9a6a00 28%, #ffffff 72%);
}

:root[data-theme="dark"] .bottle-star {
  filter:
    drop-shadow(0 1px 0 color-mix(in srgb, #ffffff 30%, transparent))
    drop-shadow(0 0 5px color-mix(in srgb, var(--ball-color) 55%, transparent));
}

/* New stars land white-hot like fresh-forged steel, then cool to the same
   faint glow as the settled stars; the end state must match the static
   dark-theme filter above so the hand-off is seamless. */
:root[data-theme="dark"] .bottle-ball.is-new .bottle-star {
  animation:
    starWarmIn 1450ms linear var(--drop-delay, 0ms) both,
    starForgeCool 2600ms ease-out var(--drop-delay, 0ms) both;
}

/* styles/21-completion-settlement.css */
/* Completion settlement modal, charts, and achievement share card controls. */

.settlement-button {
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 22%, var(--button-soft)), color-mix(in srgb, #34c759 18%, var(--button-soft))),
    var(--button-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 74%, transparent);
}

.settlement-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 22%, rgba(10, 132, 255, 0.16), transparent 32%),
    radial-gradient(circle at 86% 16%, rgba(52, 199, 89, 0.14), transparent 28%),
    rgba(8, 13, 23, 0.62);
  backdrop-filter: blur(18px) saturate(1.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-medium) var(--ease-smooth);
}

.settlement-overlay[hidden] {
  display: none;
}

.settlement-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.settlement-modal {
  width: min(980px, calc(100vw - 36px));
  max-height: min(860px, calc(100vh - 40px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
  border-radius: 28px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 96%, transparent), color-mix(in srgb, var(--surface-panel-muted) 96%, transparent));
  color: var(--text);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.32);
  transform: translateY(16px) scale(0.985);
  transition: transform var(--motion-medium) var(--ease-smooth);
}

.settlement-overlay.is-open .settlement-modal {
  transform: translateY(0) scale(1);
}

.settlement-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 28px 30px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.settlement-header-copy {
  display: grid;
  gap: 8px;
}

.settlement-eyebrow {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.settlement-header h2 {
  margin: 0;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.06;
  letter-spacing: 0;
}

.settlement-header p {
  max-width: 680px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.settlement-close-button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: var(--button-soft);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.settlement-content {
  display: grid;
  gap: 18px;
  min-height: 0;
  overflow: auto;
  padding: 22px 30px 26px;
}

.settlement-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.settlement-metric-card,
.settlement-insight-card,
.settlement-panel,
.settlement-praise-panel,
.settlement-empty {
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-card) 92%, var(--surface-panel-muted) 8%);
  box-shadow: var(--shadow-card);
}

.settlement-metric-card {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.settlement-metric-card span,
.settlement-insight-card span,
.settlement-panel-heading span,
.settlement-category-row small,
.settlement-metric-card small,
.settlement-insight-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.settlement-metric-card strong {
  font-size: clamp(22px, 3vw, 31px);
  line-height: 1;
}

.settlement-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr);
  gap: 16px;
}

.settlement-panel {
  min-width: 0;
  padding: 18px;
}

.settlement-panel-heading {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
}

.settlement-panel-heading strong {
  font-size: 17px;
}

.settlement-chart-wrap {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.settlement-pie {
  position: relative;
  display: grid;
  place-items: center;
  width: 218px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 16px 34px rgba(17, 24, 39, .14);
}

.settlement-pie-center {
  display: grid;
  place-items: center;
  width: 54%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent);
}

.settlement-pie-center strong {
  font-size: 34px;
  line-height: 1;
}

.settlement-pie-center span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.settlement-category-list,
.settlement-insight-list {
  display: grid;
  gap: 10px;
}

.settlement-category-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-panel-muted) 80%, transparent);
}

.settlement-category-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--category-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--category-color) 18%, transparent);
}

.settlement-category-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settlement-category-row strong {
  font-size: 13px;
}

.settlement-insight-card {
  display: grid;
  gap: 6px;
  padding: 13px 14px;
  box-shadow: none;
}

.settlement-insight-card strong {
  font-size: 18px;
  line-height: 1.18;
}

.settlement-timeline-panel {
  overflow: hidden;
}

.settlement-day-bars {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: end;
  gap: 9px;
  height: 150px;
  padding-top: 8px;
}

.settlement-day-bar {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: center;
  height: 100%;
  min-width: 0;
  gap: 7px;
}

.settlement-day-bar::before {
  content: "";
  width: 100%;
  height: var(--bar-height);
  min-height: 12px;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 82%, #34c759 18%), color-mix(in srgb, var(--blue) 52%, #34c759 48%));
  box-shadow: 0 9px 18px color-mix(in srgb, var(--blue) 18%, transparent);
}

.settlement-day-bar span {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.settlement-day-bar strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.settlement-praise-panel {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 32%),
    color-mix(in srgb, var(--surface-card) 94%, var(--surface-panel-muted) 6%);
}

.settlement-praise-panel strong {
  font-size: 17px;
}

.settlement-praise-panel p {
  color: var(--muted);
  line-height: 1.65;
}

.settlement-empty {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 28px;
  text-align: center;
}

.settlement-empty strong {
  font-size: 24px;
}

.settlement-empty span {
  max-width: 420px;
  color: var(--muted);
  line-height: 1.55;
}

.settlement-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 30px 24px;
  border-top: 1px solid var(--line-soft);
}

.settlement-reset-confirm {
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.settlement-reset-confirm[hidden] {
  display: none;
}

.settlement-reset-confirm button,
.settlement-actions button {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 9px 13px;
  background: var(--button-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.settlement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: end;
}

.settlement-save-image {
  background: linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--blue) 68%, #34c759 32%)) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: var(--glow-blue-soft);
}

.settlement-new-round,
.settlement-confirm-reset {
  color: #ff453a !important;
}

.settlement-actions button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

@media (max-width: 860px) {
  .settlement-modal {
    max-height: calc(100vh - 24px);
  }

  .settlement-metric-grid,
  .settlement-main-grid,
  .settlement-chart-wrap,
  .settlement-footer {
    grid-template-columns: 1fr;
  }

  .settlement-chart-wrap {
    justify-items: center;
  }

  .settlement-actions {
    justify-content: start;
  }
}

@media (max-width: 620px) {
  .settlement-overlay {
    padding: 10px;
  }

  .settlement-header,
  .settlement-content,
  .settlement-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .settlement-day-bars {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: 190px;
  }
}

/* styles/14-effects.css */
/* Animation keyframes and celebration effects. */

@keyframes settingsPanelIn {
  0% {
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes linkSettle {
  0% {
    opacity: 0.92;
    transform: translateY(-3px);
  }
  55% {
    opacity: 1;
    transform: translateY(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.celebration-burst {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 120;
  overflow: visible;
}

.celebration-ring,
.celebration-particle {
  position: absolute;
  left: 50%;
  top: 50%;
}

.celebration-ring {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--burst-color) 68%, rgba(255, 255, 255, 0.92) 32%);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--burst-color) 8%, transparent),
    0 8px 24px color-mix(in srgb, var(--burst-color) 16%, transparent);
  transform: translate(-50%, -50%) scale(0.3);
  animation: celebrationRing 860ms cubic-bezier(.12, .89, .24, 1) both;
}

.celebration-particle {
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: celebrationBurst 980ms cubic-bezier(.14, .88, .26, 1) forwards;
}

.celebration-particle.is-star {
  width: 16px;
  height: 16px;
  background: var(--particle-color);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 92%, 50% 70%, 21% 92%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 4px 8px rgba(17, 24, 39, 0.18));
}

.celebration-particle.is-confetti {
  width: 10px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--particle-color) 76%, white 24%),
    var(--particle-color)
  );
  box-shadow: 0 4px 10px rgba(17, 24, 39, 0.12);
}

.celebration-particle.is-spark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--particle-color);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.14),
    0 0 18px rgba(255, 255, 255, 0.84);
}

@keyframes celebrationRing {
  0% {
    opacity: 0.84;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.8);
  }
}

@keyframes celebrationBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rotate));
  }
}

@keyframes taskFadeOutToCompleted {
  0% {
    opacity: 0.72;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(6px) scale(0.992);
  }
}

@keyframes taskFadeInFromCompleted {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.992);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dotFlyIn {
  0% {
    opacity: 0;
    transform: translate(-180px, -80px) scale(0.4);
  }
  58% {
    opacity: 1;
    transform: translate(10px, 4px) scale(1.18);
  }
  78% {
    transform: translate(-4px, -2px) scale(0.92);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes bottleBallDrop {
  0% {
    opacity: 0;
    left: 50%;
    top: -18%;
    transform:
      translate(-50%, -50%)
      scale(1)
      rotate(-10deg);
    animation-timing-function: cubic-bezier(.36, 0, .78, .42);
  }
  14% {
    opacity: 1;
    left: 50%;
    top: 13%;
    transform:
      translate(-50%, -50%)
      scale(1)
      rotate(-4deg);
    animation-timing-function: cubic-bezier(.22, .06, .8, .48);
  }
  34% {
    opacity: 1;
    left: 50%;
    top: 48%;
    transform:
      translate(-50%, -50%)
      scale(1)
      rotate(5deg);
    animation-timing-function: cubic-bezier(.2, .02, .84, .34);
  }
  53% {
    left: var(--ball-left, 50%);
    top: calc(var(--ball-top, 86%) + 4%);
    transform:
      translate(-50%, -50%)
      scale(1)
      rotate(calc(var(--ball-rotate, 0deg) - 12deg));
    animation-timing-function: cubic-bezier(.18, .76, .24, 1);
  }
  66% {
    left: var(--ball-left, 50%);
    top: calc(var(--ball-top, 86%) - 12%);
    transform:
      translate(-50%, -50%)
      scale(1)
      rotate(calc(var(--ball-rotate, 0deg) + 8deg));
    animation-timing-function: cubic-bezier(.28, .08, .72, .42);
  }
  78% {
    left: var(--ball-left, 50%);
    top: calc(var(--ball-top, 86%) + 2%);
    transform:
      translate(-50%, -50%)
      scale(1)
      rotate(var(--ball-rotate, 0deg));
    animation-timing-function: cubic-bezier(.22, .66, .28, 1);
  }
  88% {
    left: var(--ball-left, 50%);
    top: calc(var(--ball-top, 86%) - 4%);
    transform:
      translate(-50%, -50%)
      scale(1)
      rotate(var(--ball-rotate, 0deg));
    animation-timing-function: cubic-bezier(.32, .12, .72, .58);
  }
  95% {
    left: var(--ball-left, 50%);
    top: var(--ball-top, 86%);
    transform:
      translate(-50%, -50%)
      scale(1)
      rotate(var(--ball-rotate, 0deg));
    animation-timing-function: linear;
  }
  100% {
    opacity: 1;
    left: var(--ball-left, 50%);
    top: var(--ball-top, 86%);
    transform:
      translate(-50%, -50%)
      scale(1)
      rotate(var(--ball-rotate, 0deg));
  }
}

@keyframes starWarmIn {
  0% {
    fill: var(--star-start-color, #fffefa);
  }
  34% {
    fill: var(--star-start-color, #fffefa);
  }
  100% {
    fill: var(--ball-color);
  }
}

@keyframes starForgeCool {
  0% {
    filter:
      drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
      drop-shadow(0 0 9px rgba(255, 244, 214, 0.9))
      drop-shadow(0 0 20px color-mix(in srgb, var(--ball-color) 80%, transparent));
  }
  58% {
    filter:
      drop-shadow(0 0 2px rgba(255, 255, 255, 0.75))
      drop-shadow(0 0 8px rgba(255, 240, 200, 0.7))
      drop-shadow(0 0 16px color-mix(in srgb, var(--ball-color) 65%, transparent));
  }
  100% {
    filter:
      drop-shadow(0 1px 0 color-mix(in srgb, #ffffff 30%, transparent))
      drop-shadow(0 0 5px color-mix(in srgb, var(--ball-color) 55%, transparent));
  }
}

@keyframes focusCardGlow {
  0%,
  100% {
    border-color: color-mix(in srgb, var(--task-color, var(--blue)) 78%, var(--line-soft) 22%);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--surface) 86%, transparent),
      inset 0 0 0 4px color-mix(in srgb, var(--task-color, var(--blue)) 9%, transparent),
      inset 0 0 24px color-mix(in srgb, var(--task-color, var(--blue)) 11%, transparent),
      var(--shadow-card-strong);
    filter: saturate(1.02);
  }
  50% {
    border-color: color-mix(in srgb, var(--task-color, var(--blue)) 94%, var(--line-soft) 6%);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--surface) 88%, transparent),
      inset 0 0 0 6px color-mix(in srgb, var(--task-color, var(--blue)) 15%, transparent),
      inset 0 0 36px color-mix(in srgb, var(--task-color, var(--blue)) 19%, transparent),
      var(--shadow-card-strong);
    filter: saturate(1.12);
  }
}

@keyframes focusAuraFlow {
  0% {
    transform: rotate(0deg) translate3d(-3%, 1%, 0) scale(1);
  }
  45% {
    transform: rotate(156deg) translate3d(2%, -1%, 0) scale(1.04);
  }
  100% {
    transform: rotate(360deg) translate3d(-3%, 1%, 0) scale(1);
  }
}

@keyframes focusSurfaceFlow {
  0%,
  100% {
    background-position: 128% 0, -6% 18%;
    filter: saturate(1);
  }
  48% {
    background-position: -28% 0, 18% 8%;
    filter: saturate(1.1);
  }
}

@keyframes focusGlowFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: var(--focus-glow-opacity, 0.7);
  }
}

@keyframes focusGlowFadeOut {
  from {
    opacity: var(--focus-glow-opacity, 0.7);
  }
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ongoing-list .task-item.is-focus-glow-visible:not(.is-done),
  .ongoing-list .task-item.is-focus-glow-visible:not(.is-done)::before,
  .ongoing-list .task-item.is-focus-glow-visible:not(.is-done)::after {
    animation: none;
  }

  .bottle-ball.is-new,
  .bottle-ball.is-css-drop {
    animation: none;
  }
}

/* styles/15-jar-legend-theme-empty.css */
/* Jar legend, dark-theme polish, and empty states. */

.jar-ball {
  width: var(--ball-size);
  height: var(--ball-size);
  border-radius: 50%;
  background: var(--ball-color);
  box-shadow: inset -4px -5px 8px rgba(0, 0, 0, 0.16), 0 4px 10px rgba(17, 24, 39, 0.12);
}

.jar-legend {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  align-content: start;
}

.jar-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.jar-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--legend-color);
}

:root[data-theme="dark"] .category-dot,
:root[data-theme="dark"] .jar-legend-dot,
:root[data-theme="dark"] .legacy-dot-slot.is-filled {
  filter: saturate(0.72) brightness(0.94);
}

:root[data-theme="dark"] .task-item {
  border-left-color: color-mix(in srgb, var(--task-color, var(--blue)) 72%, #8591a4 28%);
}

:root[data-theme="dark"] .task-item.is-chain-child::before {
  background: color-mix(in srgb, var(--task-color, var(--blue)) 72%, #8591a4 28%);
}

:root[data-theme="dark"] .check-button,
:root[data-theme="dark"] .connector-socket {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 72%, #8591a4 28%);
}

:root[data-theme="dark"] .task-item.is-done .check-button,
:root[data-theme="dark"] .task-item.is-magnet-before .socket-top,
:root[data-theme="dark"] .task-item.is-magnet-after .socket-bottom {
  background: color-mix(in srgb, var(--task-color, var(--blue)) 72%, #8591a4 28%);
}

.empty-state {
  display: none;
  min-height: 220px;
  place-items: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
  font-size: 18px;
}

.empty-state.compact {
  min-height: 150px;
  font-size: 16px;
}

.empty-state.compact strong {
  font-size: 20px;
}

.empty-state strong {
  color: var(--text);
  font-size: 24px;
}

.empty-state.is-visible {
  display: grid;
}

/* styles/16-responsive.css */
/* Responsive adjustments for narrower windows. */

@media (max-width: 860px) {
  body {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .desktop-shell {
    width: 100%;
    height: auto;
    grid-template-columns: 1fr;
    min-height: 100vh;
    margin: 0;
  }

  .sidebar {
    position: static;
    height: auto;
    max-height: none;
    border-right-color: color-mix(in srgb, var(--surface) 72%, transparent);
    border-radius: 0;
  }

  .workspace {
    height: auto;
    min-height: 0;
    border-left: 1px solid color-mix(in srgb, var(--surface) 72%, transparent);
    border-top: 0;
    border-radius: 0;
  }

  .task-composer,
  .task-details,
  .board-grid {
    grid-template-columns: 1fr;
  }

  .desktop-shell.is-open-task-view .workspace {
    grid-template-columns: 1fr;
  }

  .desktop-shell.is-open-task-view .board-grid {
    display: grid;
  }

  .desktop-shell.is-open-task-view .main-column,
  .desktop-shell.is-open-task-view .right-rail {
    grid-column: 1;
    grid-row: auto;
    height: auto;
    max-height: none;
  }

  .workspace-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .workspace-hero-count {
    align-self: flex-start;
  }

  .ongoing-list .task-details {
    grid-template-columns: 1fr;
  }

  .task-details .compact-color,
  .task-details .detail-category-field,
  .task-details .detail-priority-field,
  .task-details .detail-note-field,
  .task-details .detail-estimate-field,
  .task-details .detail-due-field,
  .task-details.has-estimate .detail-priority-field,
  .task-details.has-estimate .detail-note-field,
  .task-details.has-estimate .detail-due-field {
    grid-column: 1;
  }

  .task-due-picker {
    left: var(--task-due-picker-left, 14px);
    width: min(var(--task-due-picker-width, 292px), calc(100vw - 28px));
  }
}

@media (max-width: 560px) {
  body {
    background: var(--page-bg);
  }

  .desktop-shell {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    gap: 0;
  }

  .sidebar,
  .workspace {
    border-radius: 0;
    box-shadow: none;
    border-left: 0;
    border-right: 0;
  }

  .sidebar {
    padding: 18px;
    gap: 14px;
  }

  .category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .category-card {
    min-height: 104px;
    align-items: flex-start;
    flex-direction: column;
    border-radius: 24px;
  }

  .category-dot {
    width: 28px;
    height: 28px;
  }

  .workspace {
    padding: 18px;
  }

  .workspace-hero h2 {
    font-size: 13px;
  }

  .task-board {
    border-radius: 24px;
  }

  .task-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-actions {
    width: 100%;
  }

  .detail-button {
    flex: 1;
  }
}

/* styles/09-archive-hub-action-align.css */
/* Final archive hub override: keep restore/recover actions at the far right of each row. */

.desktop-shell.is-archive-hub-view .archive-list-row,
.desktop-shell.is-archive-hub-view .archive-list-row.task-item {
  display: grid !important;
  grid-template-columns: 5px minmax(0, 1fr) max-content !important;
  align-items: center !important;
  width: 100%;
}

.desktop-shell.is-archive-hub-view .archive-list-row.archive-task-row {
  grid-template-columns: minmax(0, 1fr) max-content !important;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid color-mix(in srgb, var(--task-color, var(--accent)) 56%, var(--surface) 44%);
  border-radius: 10px;
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.desktop-shell.is-archive-hub-view .archive-list-row.archive-task-row:hover,
.desktop-shell.is-archive-hub-view .archive-list-row.archive-task-row:focus-within {
  border-color: var(--line);
  border-left-color: color-mix(in srgb, var(--task-color, var(--accent)) 56%, var(--surface) 44%);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.desktop-shell.is-archive-hub-view .archive-list-row .archive-list-marker {
  grid-column: 1;
  grid-row: 1;
}

.desktop-shell.is-archive-hub-view .archive-list-row.archive-task-row .archive-list-marker {
  display: none;
}

.desktop-shell.is-archive-hub-view .archive-list-row .archive-list-main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.desktop-shell.is-archive-hub-view .archive-list-row.archive-task-row .archive-list-main {
  grid-column: 1;
}

.desktop-shell.is-archive-hub-view .archive-list-row.archive-task-row .archive-list-main > strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.desktop-shell.is-archive-hub-view .archive-list-row.archive-task-row .archive-list-meta span {
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.desktop-shell.is-archive-hub-view .archive-list-row .archive-row-action,
.desktop-shell.is-archive-hub-view .archive-list-row .restore-button {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.desktop-shell.is-archive-hub-view .archive-list-row .restore-button {
  min-width: 44px;
  white-space: nowrap;
}

.desktop-shell.is-archive-hub-view .archive-list-row.archive-task-row .restore-button {
  grid-column: 2 !important;
}

.desktop-shell.is-archive-hub-view .archive-timeline-record.task-item,
.desktop-shell.is-archive-hub-view .archive-timeline-record.task-item :is(.archive-timeline-main, .archive-timeline-head, .archive-timeline-meta, .archive-timeline-head > strong, .archive-timeline-meta span) {
  cursor: default !important;
}

.desktop-shell.is-archive-hub-view .archive-timeline-record.task-item :is(button, .archive-timeline-action, .restore-button, .archive-permanent-delete-button) {
  cursor: pointer;
}

.desktop-shell.is-archive-hub-view .archive-timeline-record .archive-timeline-actions {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: max-content;
}

.desktop-shell.is-archive-hub-view .archive-timeline-record .archive-permanent-delete-button {
  color: color-mix(in srgb, var(--danger) 70%, var(--text-tertiary) 30%);
  opacity: 0.22;
}

.desktop-shell.is-archive-hub-view .archive-timeline-record:hover .archive-permanent-delete-button,
.desktop-shell.is-archive-hub-view .archive-timeline-record:focus-within .archive-permanent-delete-button {
  opacity: 1;
}

.desktop-shell.is-archive-hub-view .archive-timeline-record .archive-permanent-delete-button:hover,
.desktop-shell.is-archive-hub-view .archive-timeline-record .archive-permanent-delete-button:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 26%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface) 90%);
  color: var(--danger);
}

/* styles/17-shared-proportions.css */
/* Shared layout proportions for both classic and minimal appearances. */

.desktop-shell {
  width: calc((100vw + 2px) / var(--app-shell-scale));
  height: calc((100vh + 2px) / var(--app-shell-scale));
  min-height: calc((100vh + 2px) / var(--app-shell-scale));
  margin: 0;
  border-radius: 0;
  transform: scale(var(--app-shell-scale));
  transform-origin: top left;
  grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr);
  box-shadow: none;
}

.sidebar {
  height: calc((100vh + 2px) / var(--app-shell-scale));
  max-height: calc((100vh + 2px) / var(--app-shell-scale));
  gap: 12px;
  padding: 18px 18px 20px;
  border-radius: 0;
}

.workspace {
  --workspace-right-rail-width: clamp(236px, 17vw, 292px);
  height: calc((100vh + 2px) / var(--app-shell-scale));
  min-height: calc((100vh + 2px) / var(--app-shell-scale));
  padding: 18px 22px 20px;
  gap: 12px;
  border-radius: 0;
}

.brand {
  min-height: 112px;
}

.clock-panel {
  min-height: 74px;
  padding: 11px 13px;
}

.workspace-hero {
  min-height: 142px;
  padding: 12px;
}

.ongoing-list {
  min-height: 104px;
  gap: 8px;
}

.ongoing-list .task-item,
.ongoing-list .drop-placeholder {
  min-height: 106px;
}

.task-composer {
  grid-template-columns: minmax(360px, 1fr) 170px 132px;
  gap: 6px;
  padding: 6px;
}

.task-composer.is-category-context {
  grid-template-columns: minmax(320px, 1fr) 132px;
}

.board-grid {
  grid-template-columns: minmax(0, 1fr) clamp(236px, 17vw, 292px);
  gap: 12px;
}

.main-column,
.right-rail {
  gap: 12px;
}

.task-board {
  padding: 14px;
}

.board-header {
  margin-bottom: 8px;
  padding: 0 2px 10px;
}

.status-board {
  min-height: 124px;
}

.completed-board.status-board {
  min-height: 166px;
  max-height: 248px;
}

.jar-board {
  min-height: 248px;
}

@media (max-width: 980px) {
  :root {
    --app-shell-scale: 1;
  }

  .desktop-shell {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    margin: 0;
    transform: none;
  }

  .sidebar,
  .workspace {
    height: auto;
    max-height: none;
  }
}

/* styles/23-visual-system-polish.css */
/* Visual system polish: shared readability, elevation, and component alignment. */

:where(
  .workspace-hero h2,
  .workspace-hero-note,
  .task-note,
  .status-caption,
  .calendar-title > span:not(.calendar-kicker),
  .calendar-month-weekdays span,
  .calendar-year-weekdays span,
  .timeline-axis-title > span:last-child,
  .timeline-summary-card span,
  .timeline-date-rail,
  .timeline-date-rail span,
  .archive-hub-copy span:last-child,
  .archive-folder-body small,
  .archive-hub-content-header span,
  .count-day-title span:last-child,
  .count-day-metric span,
  .count-day-metric small,
  .count-day-filter-result,
  .time-tools-title span,
  .time-tools-local-card span,
  .time-tools-local-card small,
  .time-tools-assist-row span,
  .settings-group-description,
  .settings-storage-feedback
) {
  color: var(--text-tertiary);
}

:where(
  .settings-group h2,
  .settings-group .mini-field > span,
  .theme-mode-field > span,
  .language-field > span,
  .completion-mode-field > span,
  .clock-signature-field > span
) {
  color: var(--text-secondary);
}

:where(
  .workspace-hero h2,
  .settings-group h2,
  .timeline-axis-title h4,
  .archive-hub-copy h4,
  .count-day-title h4,
  .time-tools-title h4,
  .calendar-title .calendar-kicker
) {
  letter-spacing: 0;
}

.task-board,
.workspace-hero,
.timeline-axis-toolbar,
.timeline-summary,
.timeline-unscheduled-panel,
.archive-hub-metric,
.archive-folder-card,
.archive-subfolder-bar,
.archive-record-card,
.count-day-metric,
.count-day-form,
.count-day-card,
.time-tools-local-card,
.time-tool-panel,
.time-tools-assist-panel,
.settings-group,
.settings-group .mini-field,
.calendar-year-month {
  border-color: color-mix(in srgb, var(--line-soft) 84%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 68%, transparent),
    var(--shadow-card);
}

.task-board,
.timeline-axis-toolbar,
.timeline-summary,
.timeline-unscheduled-panel,
.settings-group {
  border-radius: var(--radius-panel);
}

.timeline-axis-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
}

.task-item,
.archive-folder-card,
.archive-record-card,
.count-day-metric,
.count-day-form,
.count-day-card,
.time-tools-local-card,
.time-tool-panel,
.time-tools-assist-panel,
.calendar-year-month,
.settings-group .mini-field {
  border-radius: var(--radius-card);
}

.task-item {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 66%, transparent),
    0 9px 20px color-mix(in srgb, var(--shadow-color) 42%, transparent);
}

:root:not([data-theme="dark"]) .task-item {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(17, 24, 39, 0.055);
}

.workspace-hero.is-empty {
  min-height: 112px;
}

.workspace-hero.is-empty .ongoing-list {
  min-height: 58px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--blue) 3%, var(--surface-soft) 97%);
}

.category-chip,
.due-chip,
.step-chip,
.ongoing-chip,
.calendar-month-chip,
.calendar-feed-status,
.timeline-item-pill,
.timeline-item-status,
.archive-subfolder-button,
.count-day-filter {
  min-height: 24px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 780;
}

.due-chip {
  background: color-mix(in srgb, var(--button-soft) 76%, var(--surface) 24%);
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-soft) 56%, transparent);
}

.due-chip.is-urgent,
.due-chip.is-overdue {
  background: color-mix(in srgb, var(--danger) 17%, var(--surface) 83%);
  color: color-mix(in srgb, var(--danger) 88%, var(--text) 12%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--danger) 20%, transparent),
    0 4px 12px color-mix(in srgb, var(--danger) 8%, transparent);
}

.due-chip.is-due-today {
  background: color-mix(in srgb, var(--blue) 13%, var(--surface) 87%);
  color: color-mix(in srgb, var(--blue) 74%, var(--text) 26%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 20%, transparent);
}

.step-chip.is-waiting {
  color: var(--text-tertiary);
}

.calendar-view-switcher,
.calendar-nav,
.timeline-range-control,
.timeline-priority-control,
.timeline-source-control,
.time-tools-tabs,
.count-day-filters {
  border-color: color-mix(in srgb, var(--line-soft) 84%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface) 32%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 64%, transparent);
}

.appearance-segmented,
.theme-mode-segmented,
.language-segmented,
.theme-switch {
  border-color: color-mix(in srgb, var(--line-soft) 84%, transparent);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface) 32%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 64%, transparent);
}

.theme-mode-segmented {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.time-tools-tabs {
  border-radius: var(--radius-control);
}

:where(
  .calendar-view-switcher,
  .calendar-nav,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control
) button {
  border-radius: var(--radius-pill);
}

:where(
  .appearance-segmented,
  .theme-mode-segmented,
  .language-segmented
) button,
.theme-switch-text,
.theme-switch-track,
.theme-switch input:checked + .theme-switch-track {
  border-radius: calc(var(--radius-control) - 3px);
}

:where(
  .calendar-view-switcher,
  .calendar-nav,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .appearance-segmented,
  .theme-mode-segmented,
  .language-segmented,
  .time-tools-tabs
) button {
  color: var(--text-tertiary);
  font-weight: 760;
}

:where(
  .calendar-view-switcher,
  .calendar-nav,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .appearance-segmented,
  .theme-mode-segmented,
  .language-segmented
) button:hover,
:where(
  .calendar-view-switcher,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .appearance-segmented,
  .theme-mode-segmented,
  .language-segmented
) button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow-color) 24%, transparent);
}

.theme-switch-text,
.theme-switch-track,
.theme-switch input:checked + .theme-switch-track {
  color: var(--text-secondary);
}

.theme-switch[data-theme-preference="light"] .theme-switch-text:first-child,
.theme-switch[data-theme-preference="auto"] .theme-switch-track,
.theme-switch[data-theme-preference="solar"] .theme-switch-track,
.theme-switch[data-theme-preference="dark"] .theme-switch-text:last-child,
.theme-switch[data-theme-drag-choice="light"] .theme-switch-text:first-child,
.theme-switch[data-theme-drag-choice="auto"] .theme-switch-track,
.theme-switch[data-theme-drag-choice="dark"] .theme-switch-text:last-child {
  color: color-mix(in srgb, var(--blue) 58%, var(--text) 42%);
}

.settings-menu {
  border-radius: var(--radius-panel);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%), var(--surface));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    0 18px 48px rgba(17, 24, 39, 0.09),
    0 6px 16px rgba(17, 24, 39, 0.055),
    0 0 0 100vmax rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(18px) saturate(1.08);
}

.settings-menu-header strong {
  font-size: 21px;
  font-weight: 860;
}

.settings-group h2 {
  font-size: 13px;
  font-weight: 820;
}

.settings-group-description {
  font-weight: 640;
}

.archive-hub-shell,
.count-day-shell,
.time-tools-shell {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 54%, var(--surface) 46%), transparent 220px),
    var(--surface);
}

.archive-hub-copy h4,
.count-day-title h4 {
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 900;
  letter-spacing: 0;
}

.time-tools-title h4 {
  font-size: clamp(34px, 3.4vw, 50px);
  font-weight: 900;
  letter-spacing: 0;
}

.archive-hub-kicker,
.count-day-kicker {
  color: color-mix(in srgb, var(--blue) 66%, var(--text-secondary) 34%);
  font-weight: 780;
}

.archive-folder-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--archive-folder-color) 7%, transparent), transparent 68%),
    color-mix(in srgb, var(--surface-card) 96%, var(--archive-folder-color) 4%);
}

.archive-folder-icon {
  box-shadow: none;
}

.count-day-metric span,
.archive-hub-metric span {
  font-size: 11px;
}

.count-day-filter,
.archive-subfolder-button,
.timeline-source-control button:not(.is-active) {
  opacity: 1;
}

.empty-state,
.archive-hub-empty,
.count-day-empty,
.favor-debt-empty,
.calendar-empty-note,
.stopwatch-lap-empty {
  color: var(--text-tertiary);
}

:where(
  button,
  input,
  select,
  textarea,
  .calendar-month-chip,
  .calendar-year-day,
  .calendar-year-month-title,
  .theme-switch
):focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

:root[data-theme="dark"] .settings-menu {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 44%, transparent),
    0 20px 52px rgba(0, 0, 0, 0.3),
    0 8px 18px rgba(0, 0, 0, 0.16),
    0 0 0 100vmax rgba(0, 0, 0, 0.42);
}

:root[data-theme="dark"] .task-item,
:root[data-theme="dark"] .task-board,
:root[data-theme="dark"] .workspace-hero,
:root[data-theme="dark"] .timeline-axis-toolbar,
:root[data-theme="dark"] .timeline-summary,
:root[data-theme="dark"] .timeline-unscheduled-panel,
:root[data-theme="dark"] .archive-folder-card,
:root[data-theme="dark"] .archive-record-card,
:root[data-theme="dark"] .count-day-metric,
:root[data-theme="dark"] .time-tools-local-card,
:root[data-theme="dark"] .time-tool-panel,
:root[data-theme="dark"] .time-tools-assist-panel,
:root[data-theme="dark"] .settings-group,
:root[data-theme="dark"] .settings-group .mini-field,
:root[data-theme="dark"] .calendar-year-month {
  border-color: color-mix(in srgb, var(--line-soft) 92%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 28%, transparent),
    0 8px 22px color-mix(in srgb, var(--shadow-color) 54%, transparent);
}

:root[data-theme="dark"] .due-chip {
  background: color-mix(in srgb, var(--surface-elevated) 70%, var(--button-soft) 30%);
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-soft) 76%, transparent);
}

:root[data-theme="dark"] .due-chip.is-urgent,
:root[data-theme="dark"] .due-chip.is-overdue {
  background: color-mix(in srgb, var(--danger) 20%, var(--surface-elevated) 80%);
  color: color-mix(in srgb, #ffffff 62%, var(--danger) 38%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--danger) 28%, transparent),
    0 4px 14px color-mix(in srgb, var(--danger) 10%, transparent);
}

:root[data-theme="dark"] .theme-switch[data-theme-preference="light"] .theme-switch-text:first-child,
:root[data-theme="dark"] .theme-switch[data-theme-preference="auto"] .theme-switch-track,
:root[data-theme="dark"] .theme-switch[data-theme-preference="solar"] .theme-switch-track,
:root[data-theme="dark"] .theme-switch[data-theme-preference="dark"] .theme-switch-text:last-child,
:root[data-theme="dark"] .theme-switch[data-theme-drag-choice="light"] .theme-switch-text:first-child,
:root[data-theme="dark"] .theme-switch[data-theme-drag-choice="auto"] .theme-switch-track,
:root[data-theme="dark"] .theme-switch[data-theme-drag-choice="dark"] .theme-switch-text:last-child {
  color: #ffffff;
}

/* styles/23-visual-system-components.css */
/* Phase 2 component consistency: buttons, form fields, cards, and overlays. */

.settings-storage-button,
.settings-row-button,
.completion-mode-button,
.calendar-feed-status button,
.calendar-nav button,
.count-day-toggle-form,
.time-tools-action-button,
.time-tools-preset-button {
  border-radius: var(--radius-control);
}

.settings-storage-button.is-primary,
.count-day-toggle-form,
.add-button {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 13%, transparent);
}

:is(
  .settings-button,
  .settings-storage-button,
  .settings-row-button,
  .settings-add-category-button,
  .settings-calendar-visibility-button,
  .completion-mode-button,
  .category-picker-button,
  .focus-task-picker-button,
  .task-due-month-button,
  .task-due-today-button,
  .calendar-feed-status button,
  .calendar-nav button,
  .calendar-add-control button,
  .calendar-detail-actions button,
  .archive-record-card button,
  .archive-subfolder-button,
  .count-day-actions button,
  .count-day-filter,
  .count-day-toggle-form,
  .time-tools-action-button,
  .time-tools-preset-button,
  .pomodoro-modes button,
  .detail-button,
  .restore-button,
  .add-to-jar-button,
  .add-all-to-board-button,
  .settlement-button,
  .rename-button,
  .estimate-actions button,
  .delete-confirm-actions button,
  .app-confirm-actions button
) {
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--control-text);
  box-shadow: var(--control-shadow);
  font-weight: 820;
}

:is(
  .settings-button,
  .settings-storage-button,
  .settings-row-button,
  .settings-add-category-button,
  .settings-calendar-visibility-button,
  .completion-mode-button,
  .category-picker-button,
  .focus-task-picker-button,
  .task-due-month-button,
  .task-due-today-button,
  .calendar-feed-status button,
  .calendar-nav button,
  .calendar-add-control button,
  .calendar-detail-actions button,
  .archive-record-card button,
  .archive-subfolder-button,
  .count-day-actions button,
  .count-day-filter,
  .count-day-toggle-form,
  .time-tools-action-button,
  .time-tools-preset-button,
  .pomodoro-modes button,
  .detail-button,
  .restore-button,
  .add-to-jar-button,
  .add-all-to-board-button,
  .settlement-button,
  .rename-button,
  .estimate-actions button,
  .delete-confirm-actions button,
  .app-confirm-actions button
):hover:not(:disabled) {
  border-color: var(--control-border-hover);
  background: var(--control-bg-hover);
  color: var(--text);
  box-shadow: var(--control-shadow-hover);
}

:is(
  .settings-button,
  .settings-storage-button,
  .settings-row-button,
  .settings-add-category-button,
  .settings-calendar-visibility-button,
  .completion-mode-button,
  .category-picker-button,
  .focus-task-picker-button,
  .task-due-month-button,
  .task-due-today-button,
  .calendar-feed-status button,
  .calendar-nav button,
  .calendar-add-control button,
  .calendar-detail-actions button,
  .archive-record-card button,
  .archive-subfolder-button,
  .count-day-actions button,
  .count-day-filter,
  .count-day-toggle-form,
  .time-tools-action-button,
  .time-tools-preset-button,
  .pomodoro-modes button,
  .detail-button,
  .restore-button,
  .add-to-jar-button,
  .add-all-to-board-button,
  .settlement-button,
  .rename-button,
  .estimate-actions button,
  .delete-confirm-actions button,
  .app-confirm-actions button
):active:not(:disabled) {
  transform: translateY(0) scale(0.985);
  box-shadow: var(--control-shadow);
}

:is(
  .add-button,
  .settings-storage-button.is-primary,
  .calendar-feed-actions .settings-storage-button.is-primary,
  .calendar-detail-actions button[type="submit"],
  .count-day-toggle-form,
  .time-tools-action-button.is-primary,
  .app-confirm-ok
) {
  border-color: color-mix(in srgb, var(--blue) 42%, transparent);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 18px color-mix(in srgb, var(--blue) 18%, transparent);
}

:is(
  .add-button,
  .settings-storage-button.is-primary,
  .calendar-feed-actions .settings-storage-button.is-primary,
  .calendar-detail-actions button[type="submit"],
  .count-day-toggle-form,
  .time-tools-action-button.is-primary,
  .app-confirm-ok
):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--blue) 54%, transparent);
  background: var(--button-primary-bg-hover);
  color: var(--button-primary-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 22px color-mix(in srgb, var(--blue) 24%, transparent);
}

:is(
  .delete-button,
  .settings-delete-button,
  .calendar-detail-delete-button,
  .count-day-actions button[data-count-day-delete],
  .time-tools-action-button.is-danger,
  .delete-confirm-actions button:last-child,
  .app-confirm-dialog[data-tone="danger"] .app-confirm-ok
) {
  border-color: color-mix(in srgb, var(--danger) 24%, transparent);
  background: var(--button-danger-bg);
  color: var(--button-danger-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 8%, transparent);
}

:is(
  .delete-button,
  .settings-delete-button,
  .calendar-detail-delete-button,
  .count-day-actions button[data-count-day-delete],
  .time-tools-action-button.is-danger,
  .delete-confirm-actions button:last-child,
  .app-confirm-dialog[data-tone="danger"] .app-confirm-ok
):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
  background: var(--button-danger-bg-hover);
  color: var(--button-danger-text);
}

.settings-button,
.add-to-jar-button,
.task-due-today-button {
  color: color-mix(in srgb, var(--blue) 66%, var(--text) 34%);
}

:is(.settings-close-button, .settlement-close-button, .calendar-clear-button) {
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--control-muted-text);
  box-shadow: var(--control-shadow);
}

:is(.settings-close-button, .settlement-close-button, .calendar-clear-button):hover,
:is(.settings-close-button, .settlement-close-button, .calendar-clear-button):focus-visible {
  border-color: var(--control-border-hover);
  background: var(--control-bg-hover);
  color: var(--text);
  box-shadow: var(--focus-ring);
}

:is(
  .task-composer,
  .task-details,
  .calendar-detail-popover,
  .count-day-form,
  .time-tool-panel,
  .time-tools-assist-panel,
  .settings-menu,
  .estimate-popover
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea),
.calendar-add-control input,
.time-duration-field input {
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--control-bg);
  color: var(--text);
  box-shadow: var(--control-shadow);
}

:is(
  .task-composer,
  .task-details,
  .calendar-detail-popover,
  .count-day-form,
  .time-tool-panel,
  .time-tools-assist-panel,
  .settings-menu,
  .estimate-popover
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea)::placeholder,
.calendar-add-control input::placeholder,
.time-duration-field input::placeholder {
  color: color-mix(in srgb, var(--control-muted-text) 74%, transparent);
}

:is(
  .task-composer,
  .task-details,
  .calendar-detail-popover,
  .count-day-form,
  .time-tool-panel,
  .time-tools-assist-panel,
  .settings-menu,
  .estimate-popover
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):hover,
.calendar-add-control input:hover,
.time-duration-field input:hover {
  border-color: var(--control-border-hover);
  background: var(--control-bg-hover);
}

:is(
  .task-composer,
  .task-details,
  .calendar-detail-popover,
  .count-day-form,
  .time-tool-panel,
  .time-tools-assist-panel,
  .settings-menu,
  .estimate-popover
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus,
:is(
  .task-composer,
  .task-details,
  .calendar-detail-popover,
  .count-day-form,
  .time-tool-panel,
  .time-tools-assist-panel,
  .settings-menu,
  .estimate-popover
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus-visible,
.calendar-add-control input:focus,
.time-duration-field input:focus {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line-soft) 52%);
  background: var(--surface);
  box-shadow: var(--focus-ring);
}

:is(
  .task-item,
  .calendar-task-card,
  .timeline-node-card,
  .timeline-summary-card,
  .archive-folder-card,
  .archive-record-card,
  .count-day-card,
  .count-day-metric,
  .time-tools-local-card,
  .time-tools-assist-panel,
  .calendar-year-month,
  .settings-group,
  .settings-group .mini-field
) {
  background-color: color-mix(in srgb, var(--surface-card) 94%, var(--surface) 6%);
  border-color: color-mix(in srgb, var(--line-soft) 88%, transparent);
}

:is(
  .task-item,
  .calendar-task-card,
  .timeline-node-card,
  .archive-folder-card,
  .archive-record-card,
  .count-day-card,
  .calendar-year-month,
  .settings-group .mini-field
):hover {
  border-color: color-mix(in srgb, var(--blue) 16%, var(--line-soft) 84%);
}

:is(
  .settings-menu,
  .settlement-modal,
  .focus-popover,
  .estimate-popover,
  .delete-confirm-popover,
  .calendar-detail-popover,
  .task-due-picker,
  .calendar-add-category-picker,
  .category-picker-menu,
  .task-suggestion-menu,
  .task-category-menu,
  .task-color-dropdown,
  .focus-task-picker-menu,
  .completion-mode-menu,
  .settings-category-dropdown-body,
  .version-menu
) {
  border-radius: var(--radius-panel);
}

:is(
  .category-picker-option,
  .task-suggestion-option,
  .task-category-option,
  .focus-task-picker-option,
  .completion-mode-menu button,
  .calendar-add-category-option
) {
  border-radius: var(--radius-control);
  color: var(--control-text);
}

:is(
  .category-picker-option,
  .task-suggestion-option,
  .task-category-option,
  .focus-task-picker-option,
  .completion-mode-menu button,
  .calendar-add-category-option
).is-selected,
.calendar-add-category-option[aria-selected="true"] {
  color: var(--text);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent),
    0 4px 12px color-mix(in srgb, var(--blue) 8%, transparent);
}

:is(button, input, select, textarea):disabled,
:is(button, input, select, textarea)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
  box-shadow: none;
}

:root[data-theme="dark"] :is(
  .task-composer,
  .task-details,
  .calendar-detail-popover,
  .count-day-form,
  .time-tool-panel,
  .time-tools-assist-panel,
  .settings-menu,
  .estimate-popover
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus,
:root[data-theme="dark"] .calendar-add-control input:focus,
:root[data-theme="dark"] .time-duration-field input:focus {
  background: var(--surface-elevated);
}