/* styles/22-overlays-menus.css */
/* Final overlay/menu polish: keep popovers, dropdowns, and selects off native-looking defaults. */

:root {
  --overlay-border: color-mix(in srgb, var(--blue) 18%, var(--line-soft) 82%);
  --overlay-surface: color-mix(in srgb, var(--surface) 95%, transparent);
  --overlay-surface-strong: color-mix(in srgb, var(--surface-panel-strong) 96%, transparent);
  --overlay-option-hover: color-mix(in srgb, var(--blue) 10%, var(--surface) 90%);
  --overlay-option-selected: color-mix(in srgb, var(--blue) 14%, var(--surface) 86%);
  --overlay-focus-ring: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
  --overlay-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    var(--glow-blue-soft),
    0 24px 54px rgba(17, 24, 39, 0.18);
  --settings-menu-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    0 16px 38px rgba(17, 24, 39, 0.075),
    0 4px 12px rgba(17, 24, 39, 0.045),
    0 0 0 100vmax rgba(15, 23, 42, 0.12);
}

:root[data-theme="dark"] {
  --overlay-surface: color-mix(in srgb, var(--surface) 92%, transparent);
  --overlay-surface-strong: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  --overlay-option-hover: color-mix(in srgb, var(--blue) 16%, var(--surface) 84%);
  --overlay-option-selected: color-mix(in srgb, var(--blue) 22%, var(--surface) 78%);
  --settings-menu-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 44%, transparent),
    0 18px 44px rgba(0, 0, 0, 0.24),
    0 5px 14px rgba(0, 0, 0, 0.12),
    0 0 0 100vmax rgba(0, 0, 0, 0.3);
}

.app-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 12, 22, 0.42);
  backdrop-filter: blur(14px) saturate(1.08);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-smooth-soft);
}

.app-confirm-overlay[hidden] {
  display: none;
}

.app-confirm-overlay.is-open {
  opacity: 1;
}

.app-confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--overlay-border);
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% 0, color-mix(in srgb, var(--blue) 9%, transparent), transparent 40%),
    var(--overlay-surface-strong);
  color: var(--text);
  box-shadow: var(--overlay-shadow);
  transform: translateY(8px) scale(0.985);
  transition: transform var(--motion-medium) var(--ease-smooth);
}

.app-confirm-overlay.is-open .app-confirm-dialog {
  transform: translateY(0) scale(1);
}

.app-confirm-dialog[data-tone="danger"] {
  border-color: color-mix(in srgb, #ff3b30 28%, var(--line-soft) 72%);
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, #ff3b30 12%, transparent), transparent 42%),
    var(--overlay-surface-strong);
}

.app-confirm-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-confirm-dialog strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.2;
}

.app-confirm-dialog p {
  margin: 0;
  color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.5;
  white-space: pre-line;
}

.app-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 4px;
}

.app-confirm-actions button {
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 920;
  padding: 0 14px;
}

.app-confirm-cancel {
  background: color-mix(in srgb, var(--button-soft) 82%, var(--surface) 18%);
  color: var(--text);
}

.app-confirm-ok {
  background: color-mix(in srgb, var(--blue) 18%, var(--surface) 82%);
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  box-shadow: var(--overlay-focus-ring);
}

.app-confirm-dialog[data-tone="danger"] .app-confirm-ok {
  background: color-mix(in srgb, #ff3b30 15%, var(--surface) 85%);
  color: color-mix(in srgb, #ff3b30 80%, var(--text) 20%);
  box-shadow: 0 0 0 3px color-mix(in srgb, #ff3b30 9%, transparent);
}

.app-confirm-actions button:hover,
.app-confirm-actions button:focus-visible {
  outline: 0;
  transform: translateY(-1px);
}

:is(
  .settings-menu,
  .settlement-modal,
  .focus-popover,
  .estimate-popover,
  .delete-confirm-popover,
  .calendar-detail-popover,
  .task-due-picker,
  .calendar-add-category-picker,
  .version-menu,
  .drag-mode-indicator,
  .drag-zone-guide,
  .completion-point-tooltip
) {
  border-color: var(--overlay-border);
  background:
    radial-gradient(circle at 14% 0, color-mix(in srgb, var(--blue) 8%, transparent), transparent 38%),
    var(--overlay-surface);
  box-shadow: var(--overlay-shadow);
  backdrop-filter: blur(20px) saturate(1.12);
  animation-duration: var(--motion-fast);
  animation-timing-function: var(--ease-smooth);
  transform-origin: top center;
}

.settings-menu {
  box-shadow: var(--settings-menu-shadow);
}

:root:not([data-theme="dark"]) .settings-menu,
:root[data-theme="dark"] .settings-menu {
  box-shadow: var(--settings-menu-shadow);
}

:is(
  .category-picker-menu,
  .task-suggestion-menu,
  .task-category-menu,
  .task-color-dropdown,
  .focus-task-picker-menu,
  .completion-mode-menu,
  .settings-category-dropdown-body,
  .calendar-add-category-picker
) {
  border: 1px solid var(--overlay-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 16% 0, color-mix(in srgb, var(--blue) 8%, transparent), transparent 42%),
    var(--overlay-surface);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 18px 40px rgba(17, 24, 39, 0.15);
  backdrop-filter: blur(18px) saturate(1.1);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--blue) 34%, var(--line) 66%) transparent;
  animation-duration: var(--motion-fast);
  animation-timing-function: var(--ease-smooth);
  transform-origin: top center;
}

:is(
  .category-picker-menu,
  .task-suggestion-menu,
  .task-category-menu,
  .task-color-dropdown,
  .focus-task-picker-menu,
  .completion-mode-menu,
  .settings-category-dropdown-body,
  .calendar-add-category-picker,
  .settings-menu,
  .settlement-modal,
  .task-due-picker,
  .calendar-detail-popover
)::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

:is(
  .category-picker-menu,
  .task-suggestion-menu,
  .task-category-menu,
  .task-color-dropdown,
  .focus-task-picker-menu,
  .completion-mode-menu,
  .settings-category-dropdown-body,
  .calendar-add-category-picker,
  .settings-menu,
  .settlement-modal,
  .task-due-picker,
  .calendar-detail-popover
)::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 34%, var(--line) 66%);
  background-clip: content-box;
}

:is(
  .category-picker-option,
  .task-suggestion-option,
  .task-category-option,
  .focus-task-picker-option,
  .completion-mode-menu button,
  .calendar-add-category-option
) {
  border: 1px solid transparent;
  transition:
    background var(--motion-fast) var(--ease-smooth-soft),
    border-color 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);
}

:is(
  .category-picker-option,
  .task-suggestion-option,
  .task-category-option,
  .focus-task-picker-option,
  .completion-mode-menu button,
  .calendar-add-category-option
):hover,
:is(
  .category-picker-option,
  .task-suggestion-option,
  .task-category-option,
  .focus-task-picker-option,
  .completion-mode-menu button,
  .calendar-add-category-option
):focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 16%, transparent);
  background: var(--overlay-option-hover);
  color: var(--text);
  transform: translateY(-1px);
}

:is(
  .category-picker-option.is-selected,
  .task-suggestion-option.is-selected,
  .task-category-option.is-selected,
  .focus-task-picker-option.is-selected,
  .completion-mode-menu button.is-selected,
  .calendar-add-category-option.is-selected,
  .calendar-add-category-option[aria-selected="true"]
) {
  border-color: color-mix(in srgb, var(--blue) 24%, transparent);
  background: var(--overlay-option-selected);
  color: var(--text);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent);
}

:is(
  .category-picker-button,
  .task-category-trigger,
  .task-color-trigger,
  .focus-task-picker-button,
  .completion-mode-button,
  .settings-category-summary
)[aria-expanded="true"],
.settings-category-dropdown[open] > .settings-category-summary {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line-soft) 58%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 9%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%);
  box-shadow: var(--overlay-focus-ring);
}

select:not([hidden]) {
  appearance: none;
  -webkit-appearance: none;
  border-color: color-mix(in srgb, var(--line-soft) 78%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--blue) 62%, var(--muted) 38%) 50%) calc(100% - 18px) calc(50% - 3px) / 7px 7px no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 62%, var(--muted) 38%) 50%, transparent 50%) calc(100% - 12px) calc(50% - 3px) / 7px 7px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--surface-soft) 8%), color-mix(in srgb, var(--surface-soft) 82%, var(--surface) 18%));
  color: var(--text);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 76%, transparent),
    0 4px 12px rgba(17, 24, 39, 0.045);
}

select:not([hidden]):hover {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line-soft) 72%);
}

select:not([hidden]):focus,
select:not([hidden]):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) 76%, transparent),
    var(--overlay-focus-ring);
}

select:not([hidden])::-ms-expand {
  display: none;
}

select option,
select optgroup {
  background: var(--surface);
  color: var(--text);
  font-weight: 760;
}

input[type="date"],
input[type="time"],
input[type="number"] {
  color-scheme: light;
}

:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="time"],
:root[data-theme="dark"] input[type="number"] {
  color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.72;
  filter: saturate(0.75);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  opacity: 1;
}

.desktop-shell[hidden],
#tendMintShell[hidden] {
  display: none !important;
}

.shell-switch-recovery {
  position: fixed;
  z-index: 10020;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  width: min(420px, calc(100vw - 28px));
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--warning) 58%, var(--border));
  border-radius: 18px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.shell-switch-recovery[hidden] {
  display: none;
}

.shell-switch-recovery p {
  margin: 0;
  line-height: 1.55;
  font-weight: 720;
}

.shell-switch-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.shell-switch-recovery button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
}

@media (max-width: 560px) {
  .shell-switch-recovery {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }

  .app-confirm-overlay {
    padding: 14px;
    align-items: end;
  }

  .app-confirm-dialog {
    width: 100%;
    border-radius: 18px;
  }

  .app-confirm-actions {
    grid-template-columns: 1fr;
  }
}

/* styles/22-onboarding.css */
/* First-run onboarding tour. */

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  pointer-events: none;
}

.onboarding-overlay[hidden] {
  display: none;
}

.onboarding-spotlight {
  position: fixed;
  border: 2px solid color-mix(in srgb, var(--blue) 68%, #ffffff 32%);
  border-radius: 18px;
  box-shadow:
    0 0 0 9999px rgba(8, 12, 22, 0.28),
    0 0 0 7px color-mix(in srgb, var(--blue) 10%, transparent),
    0 16px 34px rgba(17, 24, 39, 0.18);
  transition:
    left var(--motion-medium) var(--ease-smooth),
    top var(--motion-medium) var(--ease-smooth),
    width var(--motion-medium) var(--ease-smooth),
    height var(--motion-medium) var(--ease-smooth);
}

.onboarding-card {
  position: fixed;
  z-index: 1;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
  padding: 16px;
  border: 1px solid var(--overlay-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 16% 0, color-mix(in srgb, var(--blue) 12%, transparent), transparent 40%),
    var(--overlay-surface-strong);
  color: var(--text);
  box-shadow: var(--overlay-shadow);
  backdrop-filter: blur(22px) saturate(1.12);
  pointer-events: auto;
  transition:
    left var(--motion-medium) var(--ease-smooth),
    top var(--motion-medium) var(--ease-smooth);
}

.onboarding-progress {
  color: color-mix(in srgb, var(--blue) 76%, var(--muted) 24%);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}

.onboarding-card strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.2;
}

.onboarding-card p {
  margin: 0;
  color: color-mix(in srgb, var(--muted) 84%, var(--text) 16%);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.5;
}

.onboarding-actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding-top: 2px;
}

.onboarding-button {
  min-height: 38px;
  min-width: 76px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 76%, transparent);
  border-radius: 12px;
  padding: 0 13px;
  background: color-mix(in srgb, var(--button-soft) 76%, var(--surface) 24%);
  color: var(--text);
  font-size: 13px;
  font-weight: 880;
  cursor: pointer;
}

.onboarding-button.is-primary {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line-soft) 66%);
  background: color-mix(in srgb, var(--blue) 18%, var(--surface) 82%);
  color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%);
  box-shadow: var(--overlay-focus-ring);
}

.onboarding-button.is-quiet {
  justify-self: start;
  min-width: 0;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.onboarding-button:hover,
.onboarding-button:focus-visible {
  outline: 0;
  transform: translateY(-1px);
}

.onboarding-button:disabled {
  cursor: default;
  opacity: 0.48;
  transform: none;
}

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

.onboarding-settings-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--text);
  font-weight: 840;
}

.onboarding-settings-copy::after {
  content: attr(title);
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
  line-height: 1.25;
}

.onboarding-replay-button {
  min-width: 96px;
}

.onboarding-view-settings-row {
  align-items: start;
}

.onboarding-view-replay-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.onboarding-view-replay-button {
  min-width: 70px;
  padding-inline: 10px;
}

@media (max-width: 720px) {
  .onboarding-spotlight {
    box-shadow:
      0 0 0 9999px rgba(8, 12, 22, 0.22),
      0 0 0 6px color-mix(in srgb, var(--blue) 10%, transparent);
  }

  .onboarding-card {
    width: calc(100vw - 24px);
  }

  .onboarding-actions {
    grid-template-columns: 1fr 1fr;
  }
  .onboarding-settings-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .onboarding-view-replay-actions {
    justify-content: flex-start;
  }

  .onboarding-button.is-quiet {
    grid-column: 1 / -1;
  }
}

/* styles/24-design-system-convergence.css */
/* Phase 3: final component convergence after appearance and overlay layers. */

:where(
  .workspace-hero h2,
  .archive-hub-copy h4,
  .count-day-title h4,
  .time-tools-title h4,
  .calendar-title h3,
  .timeline-axis-title h4
) {
  color: var(--text-primary);
  font-size: var(--font-page-title);
  font-weight: var(--font-weight-title);
  letter-spacing: 0;
  line-height: 1.05;
}

:where(
  .settings-group h2,
  .calendar-kicker,
  .archive-hub-kicker,
  .count-day-kicker,
  .time-tools-kicker,
  .timeline-axis-title span:first-child,
  .board-header span
) {
  color: var(--text-tertiary);
  font-size: var(--font-caption);
  font-weight: var(--font-weight-section);
  letter-spacing: 0;
  line-height: 1.25;
}

:where(.board-header h2, .settings-group h3, .time-tool-panel h4) {
  color: var(--text-primary);
  font-size: var(--font-section-title);
  font-weight: var(--font-weight-section);
  letter-spacing: 0;
  line-height: 1.2;
}

:where(
  .muted,
  .empty-state p,
  .settings-group p,
  .calendar-empty-note,
  .archive-hub-empty p,
  .count-day-empty p,
  .favor-debt-empty p,
  .stopwatch-lap-empty p
) {
  color: var(--text-secondary);
}

:is(
  .sidebar,
  .workspace,
  .workspace-hero,
  .task-board,
  .calendar-shell,
  .timeline-axis-toolbar,
  .archive-hub-shell,
  .archive-hub-panel,
  .count-day-shell,
  .time-tools-shell,
  .settings-group,
  .count-day-form,
  .time-tool-panel,
  .favor-debt-panel
) {
  border-color: var(--border-subtle);
  border-radius: var(--radius-panel);
  background-color: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

:is(
  .task-item,
  .current-focus-panel,
  .calendar-task-card,
  .calendar-event-card:not(.calendar-month-chip),
  .calendar-year-month,
  .timeline-node-card,
  .timeline-summary-card,
  .archive-folder-card,
  .archive-record-card,
  .archive-month-card,
  .count-day-card,
  .count-day-metric,
  .time-tools-local-card,
  .time-tools-assist-panel,
  .settings-group .mini-field,
  .favor-person-folder-card,
  .favor-debt-record-card
) {
  border-color: var(--component-border);
  border-radius: var(--radius-card);
  background-color: var(--component-bg);
  box-shadow: var(--component-shadow);
  transition:
    border-color var(--motion-fast) var(--ease-smooth-soft),
    background-color var(--motion-fast) var(--ease-smooth-soft),
    box-shadow var(--motion-medium) var(--ease-smooth),
    opacity var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-medium) var(--ease-smooth);
}

:is(
  .task-item,
  .calendar-task-card,
  .calendar-event-card:not(.calendar-month-chip),
  .calendar-year-month,
  .timeline-node-card,
  .archive-folder-card,
  .archive-record-card,
  .count-day-card,
  .settings-group .mini-field,
  .favor-person-folder-card,
  .favor-debt-record-card
):hover {
  border-color: color-mix(in srgb, var(--blue) 18%, var(--border-subtle) 82%);
  background-color: var(--component-bg-hover);
}

:is(
  .settings-menu,
  .settlement-modal,
  .app-confirm-dialog,
  .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: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--surface-elevated);
}

:is(
  .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
) {
  box-shadow: var(--shadow-popover);
}

.settings-menu {
  box-shadow: var(--settings-menu-shadow, var(--shadow-modal));
}

:is(.settlement-modal, .app-confirm-dialog) {
  box-shadow: var(--shadow-modal);
}

:is(
  .appearance-segmented,
  .theme-mode-segmented,
  .language-segmented,
  .calendar-view-switcher,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .time-tools-tabs,
  .count-day-filters,
  .pomodoro-modes,
  .count-day-mode-options
) {
  border: 1px solid var(--segmented-border);
  border-radius: var(--radius-pill);
  background: var(--segmented-bg);
  box-shadow: var(--shadow-none);
}

:is(
  .appearance-segmented,
  .theme-mode-segmented,
  .language-segmented,
  .calendar-view-switcher,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .time-tools-tabs,
  .count-day-filters,
  .pomodoro-modes,
  .count-day-mode-options
) :is(button, .count-day-filter) {
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--text-tertiary);
  font-size: var(--font-button);
  font-weight: var(--font-weight-control);
  letter-spacing: 0;
  line-height: 1;
  box-shadow: var(--shadow-none);
  transition:
    background var(--motion-fast) var(--ease-smooth-soft),
    border-color var(--motion-fast) var(--ease-smooth-soft),
    color var(--motion-fast) var(--ease-smooth-soft),
    box-shadow var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-instant) var(--ease-press);
}

:is(
  .appearance-segmented,
  .theme-mode-segmented,
  .language-segmented,
  .calendar-view-switcher,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .time-tools-tabs,
  .count-day-filters,
  .pomodoro-modes,
  .count-day-mode-options
) :is(button, .count-day-filter):is(:hover, :focus-visible) {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--segmented-active-bg) 64%, transparent);
}

:is(
  .appearance-segmented,
  .theme-mode-segmented,
  .language-segmented,
  .calendar-view-switcher,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .time-tools-tabs,
  .count-day-filters,
  .pomodoro-modes,
  .count-day-mode-options
) :is(button, .count-day-filter):active {
  transform: scale(0.985);
}

:is(
  .appearance-segmented,
  .theme-mode-segmented,
  .language-segmented,
  .calendar-view-switcher,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .time-tools-tabs,
  .count-day-filters,
  .pomodoro-modes,
  .count-day-mode-options
) :is(button.is-active, button[aria-pressed="true"], .count-day-filter.is-active) {
  border-color: color-mix(in srgb, var(--blue) 18%, transparent);
  background: var(--segmented-active-bg);
  color: var(--text-primary);
  box-shadow: var(--segmented-active-shadow);
}

:is(
  .settings-button,
  .add-button,
  .task-due-today-button,
  .calendar-nav button,
  .calendar-clear-button,
  .calendar-feed-actions button,
  .calendar-detail-actions button,
  .archive-back-button,
  .archive-folder-action,
  .count-day-toggle-form,
  .count-day-actions button:not([data-count-day-delete]),
  .time-tools-action-button:not(.is-primary):not(.is-danger),
  .time-tools-preset-button,
  .settings-storage-button,
  .settings-close-button,
  .settlement-close-button,
  .app-confirm-actions button,
  .completion-mode-button,
  .focus-task-picker-button,
  .focus-task-picker-action,
  .ongoing-remove-button,
  .favor-person-folder-button,
  .delete-button
) {
  border-radius: var(--radius-control);
  font-size: var(--font-button);
  font-weight: var(--font-weight-control);
  letter-spacing: 0;
  transition:
    background var(--motion-fast) var(--ease-smooth-soft),
    border-color var(--motion-fast) var(--ease-smooth-soft),
    color var(--motion-fast) var(--ease-smooth-soft),
    box-shadow var(--motion-fast) var(--ease-smooth-soft),
    transform var(--motion-instant) var(--ease-press),
    opacity var(--motion-fast) var(--ease-smooth-soft);
}

:is(
  .calendar-nav button,
  .calendar-clear-button,
  .archive-back-button,
  .archive-folder-action,
  .count-day-actions button:not([data-count-day-delete]),
  .time-tools-action-button:not(.is-primary):not(.is-danger),
  .time-tools-preset-button,
  .settings-storage-button:not(.is-primary),
  .settings-close-button,
  .settlement-close-button,
  .app-confirm-cancel,
  .completion-mode-button,
  .focus-task-picker-button,
  .focus-task-picker-action,
  .ongoing-remove-button,
  .favor-person-folder-button,
) {
  border: 1px solid var(--control-border);
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  box-shadow: var(--control-shadow);
}

:is(
  .calendar-nav button,
  .calendar-clear-button,
  .archive-back-button,
  .archive-folder-action,
  .count-day-actions button:not([data-count-day-delete]),
  .time-tools-action-button:not(.is-primary):not(.is-danger),
  .time-tools-preset-button,
  .settings-storage-button:not(.is-primary),
  .settings-close-button,
  .settlement-close-button,
  .app-confirm-cancel,
  .completion-mode-button,
  .focus-task-picker-button,
  .focus-task-picker-action,
  .ongoing-remove-button,
  .favor-person-folder-button,
):hover:not(:disabled) {
  border-color: var(--control-border-hover);
  background: var(--button-secondary-bg-hover);
  color: var(--text-primary);
  box-shadow: var(--control-shadow-hover);
}

:is(
  .settings-button,
  .add-button,
  .task-due-today-button,
  .calendar-nav button,
  .calendar-clear-button,
  .calendar-feed-actions button,
  .calendar-detail-actions button,
  .archive-back-button,
  .archive-folder-action,
  .count-day-toggle-form,
  .count-day-actions button:not([data-count-day-delete]),
  .time-tools-action-button:not(.is-primary):not(.is-danger),
  .time-tools-preset-button,
  .settings-storage-button,
  .settings-close-button,
  .settlement-close-button,
  .app-confirm-actions button,
  .completion-mode-button,
  .focus-task-picker-button,
  .focus-task-picker-action,
  .ongoing-remove-button,
  .favor-person-folder-button,
  .delete-button
):active:not(:disabled) {
  transform: scale(0.985);
}

:is(.settings-button, .task-due-today-button) {
  background: var(--button-ghost-bg);
  color: var(--button-ghost-text);
}

:is(.settings-button, .task-due-today-button):hover {
  background: var(--button-ghost-bg-hover);
  color: var(--text-primary);
}

:is(
  .category-chip,
  .due-chip,
  .step-chip,
  .ongoing-chip,
  .priority-chip,
  .timeline-kind,
  .timeline-item-pill,
  .timeline-item-status,
  .archive-status-badge,
  .archive-subfolder-button,
  .count-day-state-badge,
  .calendar-feed-status
) {
  min-height: var(--chip-height);
  padding: var(--chip-padding);
  border-radius: var(--radius-pill);
  font-size: var(--chip-font-size);
  font-weight: var(--chip-font-weight);
  letter-spacing: 0;
  line-height: 1;
}

.calendar-month-chip {
  min-height: var(--chip-height-compact);
  padding: var(--chip-padding-compact);
  border-radius: var(--radius-compact);
  font-size: var(--chip-font-size);
  font-weight: var(--chip-font-weight);
  line-height: 1.15;
}

:is(
  .empty-state,
  .archive-hub-empty,
  .count-day-empty,
  .favor-debt-empty,
  .stopwatch-lap-empty
) {
  border: 1px solid var(--empty-border);
  border-radius: var(--radius-card);
  background: var(--empty-bg);
  color: var(--empty-text);
  box-shadow: var(--shadow-none);
}

.calendar-empty-note {
  color: var(--text-secondary);
}

: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-primary);
  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):focus-visible,
.calendar-add-control input:focus-visible,
.time-duration-field input:focus-visible,
:is(button, [role="button"], .count-day-filter):focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--blue) 48%, var(--border-subtle) 52%);
  box-shadow: var(--focus-ring);
}

: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);
}

:root[data-theme="dark"] :is(
  .sidebar,
  .workspace,
  .workspace-hero,
  .task-board,
  .calendar-shell,
  .timeline-axis-toolbar,
  .archive-hub-shell,
  .archive-hub-panel,
  .count-day-shell,
  .time-tools-shell,
  .settings-group,
  .count-day-form,
  .time-tool-panel,
  .time-tools-assist-panel,
  .favor-debt-panel
) {
  background-color: var(--surface-panel);
}

/* Keep settings card contents top-aligned without breaking the two-column grid. */
.settings-menu > .settings-group {
  align-content: start;
  gap: 10px;
}

.settings-group > h2,
.settings-group > .settings-group-description {
  align-self: start;
}

.settings-group > h2 {
  min-height: 0;
  margin-bottom: -2px;
}

.settings-group > .settings-group-description {
  margin: 0 0 2px;
  line-height: 1.35;
}

.settings-group > :is(.mini-field, .toggle-row, .settings-category-dropdown, .right-rail-widget-settings-list) {
  align-self: start;
}

.settings-group > :is(.mini-field, .toggle-row),
.settings-group .settings-category-summary {
  min-height: 50px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.right-rail-settings .right-rail-widget-settings-list {
  gap: 7px;
}

.right-rail-settings .right-rail-widget-settings-row {
  min-height: 50px;
  padding: 9px 10px;
  gap: 10px;
}

.right-rail-settings .right-rail-widget-settings-copy {
  gap: 1px;
}

.right-rail-settings .right-rail-widget-sort {
  gap: 5px;
}

.right-rail-settings .right-rail-widget-sort button {
  width: 30px;
  height: 30px;
}

/* styles/25-phase4-visual-refresh.css */
/* Phase 4: restrained product-wide visual refresh after token convergence. */

:root {
  --phase4-title-size: clamp(30px, 2.25vw, 38px);
  --phase4-tool-title-size: clamp(32px, 2.8vw, 44px);
  --phase4-copy-width: 760px;
  --phase4-quiet-shadow: 0 8px 22px rgba(17, 24, 39, 0.04);
  --phase4-soft-shadow: 0 10px 28px rgba(17, 24, 39, 0.055);
  --phase4-header-wash: linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 46%, transparent), transparent 230px);
}

html[data-theme="dark"] {
  --bg: #0e151d;
  --page-bg: linear-gradient(135deg, #0b1118 0%, #101923 100%);
  --surface: #151f2a;
  --surface-soft: #1b2632;
  --surface-glass: rgba(21, 31, 42, 0.9);
  --surface-raised: #1d2936;
  --surface-panel: rgba(22, 32, 43, 0.9);
  --surface-panel-strong: rgba(27, 39, 52, 0.95);
  --surface-panel-muted: rgba(18, 27, 37, 0.94);
  --surface-card: #1f2b38;
  --surface-elevated: #263342;
  --panel-soft: rgba(13, 20, 29, 0.76);
  --text-secondary: #d4dde8;
  --text-tertiary: #afbdcb;
  --muted: #97a6b7;
  --muted-strong: #c2cedb;
  --line: rgba(226, 236, 248, 0.13);
  --line-soft: rgba(226, 236, 248, 0.075);
  --line-strong: rgba(226, 236, 248, 0.2);
  --component-bg: color-mix(in srgb, var(--surface-card) 92%, var(--surface) 8%);
  --component-bg-hover: color-mix(in srgb, var(--surface-elevated) 72%, var(--surface-card) 28%);
  --segmented-bg: color-mix(in srgb, var(--surface-soft) 76%, var(--surface) 24%);
  --segmented-active-bg: color-mix(in srgb, var(--surface-elevated) 82%, var(--surface-card) 18%);
  --shadow-panel: 0 10px 26px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 7px 20px rgba(0, 0, 0, 0.16);
  --shadow-card-strong: 0 12px 28px rgba(0, 0, 0, 0.23);
  --shadow-popover: 0 18px 42px rgba(0, 0, 0, 0.32);
  --shadow-modal: 0 26px 64px rgba(0, 0, 0, 0.4);
  --phase4-quiet-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
  --phase4-soft-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  --phase4-header-wash: linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 52%, transparent), transparent 230px);
}

:is(.archive-hub-shell, .count-day-shell, .time-tools-shell) {
  background:
    var(--phase4-header-wash),
    var(--surface);
  box-shadow: var(--phase4-soft-shadow);
}

:is(.archive-hub-toolbar, .count-day-toolbar, .time-tools-header, .calendar-toolbar) {
  align-items: start;
}

:is(.archive-hub-copy, .count-day-title, .time-tools-title, .calendar-title, .timeline-axis-title) {
  gap: 5px;
}

:is(.archive-hub-copy h4, .count-day-title h4, .time-tools-title h4, .timeline-axis-title h4) {
  color: var(--text-primary);
  font-size: var(--phase4-title-size);
  font-weight: 880;
  letter-spacing: 0;
  line-height: 1.08;
}

.time-tools-title h4 {
  font-size: var(--phase4-tool-title-size);
}

:is(.calendar-title .calendar-kicker, .calendar-title h4) {
  color: var(--text-primary);
  font-size: var(--phase4-title-size);
  font-weight: 880;
  letter-spacing: 0;
  line-height: 1.08;
}

.calendar-title h4 {
  padding-left: 12px;
}

:is(
  .archive-hub-copy span:last-child,
  .count-day-title span:last-child,
  .time-tools-title span,
  .calendar-title > span:not(.calendar-kicker),
  .timeline-axis-title > span:last-child
) {
  max-width: var(--phase4-copy-width);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 660;
  line-height: 1.45;
}

:is(.archive-hub-kicker, .count-day-kicker, .calendar-kicker, .timeline-axis-title > span:first-child) {
  color: color-mix(in srgb, var(--accent) 58%, var(--text-secondary) 42%);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0;
}

.count-day-shell {
  gap: 14px;
  padding: clamp(22px, 2.7vw, 32px);
}

.count-day-toolbar {
  gap: 12px 16px;
}

.count-day-title h4 {
  font-size: var(--phase4-title-size);
}

.count-day-metrics {
  gap: 9px;
}

.count-day-metric {
  min-height: 78px;
  border-color: color-mix(in srgb, var(--border-subtle) 92%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 46%, transparent), transparent),
    var(--component-bg);
  box-shadow: var(--phase4-quiet-shadow);
}

.count-day-metric strong {
  font-size: clamp(18px, 1.25vw, 22px);
  font-weight: 900;
}

.count-day-metric span,
.count-day-metric small,
.count-day-filter-result {
  color: var(--text-tertiary);
}

.count-day-list {
  gap: 14px;
}

.count-day-card {
  border-left-width: 4px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--count-day-color) 6%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-card) 98%, var(--count-day-color) 2%);
  box-shadow: var(--phase4-quiet-shadow);
}

.count-day-card:hover,
.count-day-card:focus-within {
  box-shadow: var(--phase4-soft-shadow);
}

.count-day-number strong {
  font-size: clamp(32px, 3.4vw, 50px);
  font-weight: 920;
  letter-spacing: 0;
}

.count-day-empty {
  grid-column: 1 / -1;
  width: min(100%, 560px);
  min-height: 216px;
  margin-inline: auto;
  border-style: solid;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 42%, transparent), transparent),
    var(--empty-bg);
}

.time-tools-shell {
  gap: 13px;
  padding: clamp(22px, 2.6vw, 32px);
}

.time-tools-header {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 210px);
  gap: 16px;
}

.time-tools-local-card {
  min-height: 82px;
  padding: 13px 15px;
}

.time-tools-local-card strong {
  font-size: 28px;
  font-weight: 900;
}

.time-tools-tabs {
  min-height: 50px;
  gap: 6px;
  padding: 5px;
}

.time-tools-tab {
  min-height: 38px;
  font-size: 13px;
  font-weight: 820;
}

.time-tools-body {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 14px;
}

.time-tool-panel {
  gap: 11px;
  padding: clamp(18px, 2vw, 24px);
  box-shadow: var(--phase4-soft-shadow);
}

.time-tool-panel-header h5 {
  font-size: 20px;
  font-weight: 880;
}

.time-tools-assist-panel {
  gap: 10px;
  padding: 13px;
  box-shadow: var(--phase4-quiet-shadow);
}

.time-tools-assist-row strong {
  font-size: 15px;
  font-weight: 900;
}

.time-tools-ring {
  width: min(100%, 270px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--line-soft) 88%, transparent),
    var(--phase4-quiet-shadow);
}

.time-tools-display {
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 880;
  letter-spacing: 0;
}

.time-tools-action-button.is-primary {
  box-shadow: 0 8px 18px color-mix(in srgb, var(--blue) 18%, transparent);
}

.archive-hub-shell {
  padding-top: clamp(20px, 2.3vw, 30px);
}

.archive-folder-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--archive-folder-color) 7%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-card) 97%, var(--archive-folder-color) 3%);
  box-shadow: var(--phase4-quiet-shadow);
}

.archive-folder-card.is-active {
  box-shadow:
    var(--phase4-soft-shadow),
    0 0 0 3px color-mix(in srgb, var(--archive-folder-color) 10%, transparent);
}

.archive-folder-icon {
  box-shadow: 0 6px 14px color-mix(in srgb, var(--archive-folder-color) 14%, transparent);
}

.timeline-axis-toolbar {
  box-shadow: var(--phase4-quiet-shadow);
}

.timeline-axis-title h4 {
  font-size: 19px;
}

.calendar-month-panel {
  box-shadow: var(--phase4-quiet-shadow);
}

:root[data-theme="dark"] :is(.archive-hub-shell, .count-day-shell, .time-tools-shell) {
  background:
    var(--phase4-header-wash),
    var(--surface);
}

:root[data-theme="dark"] .time-tools-ring {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--surface) 94%, var(--surface-elevated) 6%) 0 58%, transparent 59%),
    conic-gradient(color-mix(in srgb, #76d89d 58%, var(--accent) 42%) calc(var(--time-progress) * 360deg), color-mix(in srgb, var(--line-soft) 70%, transparent) 0);
}

:root[data-theme="dark"] .time-tools-ring.is-pomodoro {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--surface) 94%, var(--surface-elevated) 6%) 0 58%, transparent 59%),
    conic-gradient(color-mix(in srgb, #ef9189 62%, #f1c16d 38%) calc(var(--time-progress) * 360deg), color-mix(in srgb, var(--line-soft) 70%, transparent) 0);
}

:root[data-theme="dark"] .time-tools-action-button.is-primary {
  color: var(--bg);
}

.task-focus-toggle {
  box-sizing: border-box;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--task-color, var(--blue)) 18%, var(--surface) 82%);
  color: color-mix(in srgb, var(--task-color, var(--blue)) 76%, var(--text) 24%);
  font-size: 0;
  line-height: 0;
  padding: 0;
}

@container ongoing-card (max-width: 290px) {
  .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;
  }
}

/* Classic light theme: relaxed, vibrant workbench with Current Focus as the visual anchor. */
html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) {
  --bg: #f5f8fc;
  --page-bg: linear-gradient(135deg, #fbfdff 0%, #f2f8ff 48%, #fff7fa 100%);
  --surface-soft: #f5f8fd;
  --surface-glass: rgba(255, 255, 255, 0.88);
  --surface-panel: rgba(255, 255, 255, 0.86);
  --surface-panel-strong: rgba(255, 255, 255, 0.95);
  --surface-panel-muted: rgba(247, 250, 255, 0.84);
  --surface-card: #ffffff;
  --panel-soft: rgba(246, 249, 255, 0.66);
  --line: rgba(31, 41, 55, 0.1);
  --line-soft: rgba(31, 41, 55, 0.052);
  --line-strong: rgba(31, 41, 55, 0.14);
  --blue: #178bff;
  --accent: #178bff;
  --accent-soft: rgba(23, 139, 255, 0.1);
  --shadow-color: rgba(26, 43, 72, 0.11);
  --shadow: 0 18px 44px rgba(26, 43, 72, 0.075);
  --shadow-panel: 0 8px 22px rgba(26, 43, 72, 0.052);
  --shadow-card: 0 4px 14px rgba(26, 43, 72, 0.04);
  --shadow-card-strong: 0 10px 24px rgba(26, 43, 72, 0.07);
  --control-bg: color-mix(in srgb, #f7faff 84%, var(--surface) 16%);
  --control-bg-hover: color-mix(in srgb, #ffffff 86%, #edf6ff 14%);
  --control-border: color-mix(in srgb, var(--line-soft) 78%, rgba(23, 139, 255, 0.08) 22%);
  --control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 3px 10px rgba(26, 43, 72, 0.028);
  --control-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 7px 16px rgba(26, 43, 72, 0.048);
  --glow-blue-soft: 0 0 0 3px rgba(23, 139, 255, 0.068), 0 10px 22px rgba(23, 139, 255, 0.07);
  --glow-blue-strong: 0 0 0 4px rgba(23, 139, 255, 0.11), 0 14px 28px rgba(23, 139, 255, 0.18);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .desktop-shell {
  box-shadow:
    0 18px 42px rgba(26, 43, 72, 0.08),
    0 2px 10px rgba(26, 43, 72, 0.035);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) :is(.sidebar, .workspace) {
  border-color: rgba(255, 255, 255, 0.74);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(251, 253, 255, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 10px 28px rgba(26, 43, 72, 0.045);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .workspace {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(249, 252, 255, 0.82));
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .workspace-hero {
  border-color: color-mix(in srgb, var(--blue) 16%, var(--line-soft) 84%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(251, 253, 255, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 10px 26px rgba(26, 43, 72, 0.052);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .workspace-hero.is-focus-ticking {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 7%, #ffffff 93%), rgba(251, 253, 255, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 12px 30px rgba(23, 139, 255, 0.08);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .task-composer {
  border-color: color-mix(in srgb, var(--blue) 18%, var(--line-soft) 82%);
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 7px 18px rgba(26, 43, 72, 0.045);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .task-composer:focus-within {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line-soft) 62%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 0 0 3px rgba(23, 139, 255, 0.065),
    0 10px 22px rgba(26, 43, 72, 0.055);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .add-button {
  background: linear-gradient(180deg, #31a0ff, var(--blue));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 22px rgba(23, 139, 255, 0.2);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) :is(.category-card.is-active, .view-card.is-active) {
  border-color: color-mix(in srgb, var(--blue) 18%, transparent);
  background: color-mix(in srgb, var(--blue) 8%, #ffffff 92%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 5px 12px rgba(23, 139, 255, 0.045);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .category-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--category-color, var(--blue)) 9%, transparent);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) :is(.task-board, .right-rail-widget-card) {
  border-color: color-mix(in srgb, var(--line-soft) 78%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.84));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 7px 18px rgba(26, 43, 72, 0.04);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .task-board-main:not(.is-calendar-board) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 252, 255, 0.86));
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .task-board-main:not(.is-calendar-board) .task-list > .task-item:not(.is-dragging) {
  border-color: color-mix(in srgb, var(--line-soft) 76%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--task-color, var(--blue)) 3%, transparent), transparent 42%),
    rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 4px 12px rgba(26, 43, 72, 0.035);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .task-board-main:not(.is-calendar-board) .task-list > .task-item:not(.is-chain-child):not(.is-dragging) {
  border-left-width: 4px;
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .task-board-main:not(.is-calendar-board) .task-list > .task-item:not(.is-done):not(.is-dragging):is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 18%, var(--line-soft) 82%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--task-color, var(--blue)) 5%, transparent), transparent 48%),
    #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 7px 18px rgba(26, 43, 72, 0.055);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .right-rail {
  gap: 12px;
  scrollbar-color: color-mix(in srgb, var(--muted) 28%, transparent) transparent;
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .right-rail :is(.task-board, .right-rail-widget-card) {
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 251, 255, 0.74));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 5px 14px rgba(26, 43, 72, 0.032);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .right-rail .board-header {
  margin-bottom: 8px;
  padding-bottom: 9px;
  border-bottom-color: color-mix(in srgb, var(--line-soft) 70%, transparent);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .right-rail .board-header h3 {
  font-size: 15px;
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .right-rail :is(.board-header span, .right-rail-widget-header span, .status-caption) {
  color: color-mix(in srgb, var(--muted) 78%, var(--text) 22%);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .right-rail .status-number {
  color: color-mix(in srgb, var(--text) 90%, var(--blue) 10%);
  font-size: 38px;
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .legacy-dot-board {
  border-color: color-mix(in srgb, var(--line-soft) 78%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 251, 255, 0.66));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 4px 14px rgba(26, 43, 72, 0.035);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .legacy-dot-slot {
  box-shadow: inset 0 1px 2px rgba(26, 43, 72, 0.055);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .legacy-dot-slot.is-filled {
  filter: saturate(0.98);
  box-shadow:
    inset -3px -4px 7px rgba(0, 0, 0, 0.13),
    0 3px 8px rgba(26, 43, 72, 0.095);
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .bottle-scene {
  filter: drop-shadow(0 13px 18px rgba(26, 43, 72, 0.065));
}

/* Dark mode stability pass: keep the UI neutral and quiet instead of blue-heavy. */
:root[data-theme="dark"] {
  --bg: #121416;
  --page-bg: #121416;
  --surface: #181b1f;
  --surface-soft: #1f2329;
  --surface-glass: rgba(21, 24, 28, 0.96);
  --surface-raised: #1c2026;
  --surface-panel: rgba(22, 26, 31, 0.96);
  --surface-panel-strong: rgba(25, 29, 35, 0.98);
  --surface-panel-muted: rgba(18, 21, 25, 0.96);
  --surface-card: #20252b;
  --surface-elevated: #262c33;
  --panel-soft: rgba(16, 18, 21, 0.78);
  --button-soft: rgba(255, 255, 255, 0.075);
  --text: #f3f4f5;
  --text-secondary: #d5d9de;
  --text-tertiary: #abb2bb;
  --muted: #98a1ac;
  --muted-strong: #c3cad2;
  --line: rgba(255, 255, 255, 0.105);
  --line-soft: rgba(255, 255, 255, 0.065);
  --line-strong: rgba(255, 255, 255, 0.18);
  --accent: #8fb4c1;
  --accent-soft: rgba(143, 180, 193, 0.14);
  --blue: #8fb4c1;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
  --shadow-panel: 0 10px 24px rgba(0, 0, 0, 0.18);
  --shadow-card: 0 6px 16px rgba(0, 0, 0, 0.14);
  --shadow-card-strong: 0 12px 26px rgba(0, 0, 0, 0.2);
  --shadow-popover: 0 18px 42px rgba(0, 0, 0, 0.28);
  --shadow-modal: 0 24px 58px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"][data-appearance="classic"][data-minimal-dark-tone="warm"] {
  --bg: #12110f;
  --page-bg: #12110f;
  --surface: #181714;
  --surface-soft: #201e1a;
  --surface-glass: rgba(24, 23, 20, 0.96);
  --surface-raised: #1d1b17;
  --surface-panel: rgba(25, 23, 20, 0.96);
  --surface-panel-strong: rgba(29, 27, 23, 0.98);
  --surface-panel-muted: rgba(21, 20, 17, 0.96);
  --surface-card: #221f1b;
  --surface-elevated: #29251f;
  --panel-soft: rgba(18, 17, 14, 0.78);
  --button-soft: rgba(255, 245, 224, 0.078);
  --text: #f6f1e8;
  --text-secondary: #ded6c8;
  --text-tertiary: #b7ad9e;
  --muted: #a1988b;
  --muted-strong: #cdc4b6;
  --line: rgba(255, 242, 218, 0.108);
  --line-soft: rgba(255, 242, 218, 0.068);
  --line-strong: rgba(255, 242, 218, 0.18);
  --accent: #d9b779;
  --accent-soft: rgba(217, 183, 121, 0.14);
  --blue: #d9b779;
  --phase4-header-wash: linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 52%, transparent), transparent 230px);
}

html[data-theme="dark"][data-appearance="classic"][data-minimal-dark-tone="cool"] {
  --bg: #0e141c;
  --page-bg: #0e141c;
  --surface: #141b24;
  --surface-soft: #1a2430;
  --surface-glass: rgba(20, 27, 36, 0.96);
  --surface-raised: #182231;
  --surface-panel: rgba(20, 28, 38, 0.96);
  --surface-panel-strong: rgba(24, 34, 46, 0.98);
  --surface-panel-muted: rgba(16, 23, 32, 0.96);
  --surface-card: #1c2734;
  --surface-elevated: #233041;
  --panel-soft: rgba(13, 19, 28, 0.78);
  --button-soft: rgba(218, 235, 255, 0.078);
  --text: #eff6ff;
  --text-secondary: #d7e4f2;
  --text-tertiary: #adbdcf;
  --muted: #9aaabd;
  --muted-strong: #c2cedc;
  --line: rgba(214, 226, 242, 0.12);
  --line-soft: rgba(214, 226, 242, 0.075);
  --line-strong: rgba(214, 226, 242, 0.2);
  --accent: #8fb4c1;
  --accent-soft: rgba(143, 180, 193, 0.14);
  --blue: #8fb4c1;
  --phase4-header-wash: linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 52%, transparent), transparent 230px);
}

html[data-theme="dark"] .settings-menu {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 36%, transparent),
    0 18px 48px rgba(0, 0, 0, 0.28),
    0 0 0 100vmax rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"][data-appearance="minimal"] {
  --phase4-quiet-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  --phase4-soft-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

html[data-theme="dark"][data-appearance="minimal"] :is(
  .sidebar,
  .workspace,
  .workspace-hero,
  .task-board,
  .settings-group,
  .archive-hub-shell,
  .count-day-shell,
  .time-tools-shell,
  .calendar-shell
) {
  background-image: none;
}

html[data-appearance="minimal"] .right-rail {
  gap: 8px;
  padding-right: 0;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 34%, transparent) transparent;
}

html[data-appearance="minimal"] .right-rail::-webkit-scrollbar {
  width: 7px;
}

html[data-appearance="minimal"] .right-rail::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  background-clip: content-box;
}

html[data-appearance="minimal"] .right-rail .task-board,
html[data-appearance="minimal"] .right-rail-widget-card {
  padding: 12px;
}

html[data-appearance="minimal"] .right-rail .board-header {
  margin-bottom: 6px;
  padding-bottom: 8px;
}

html[data-appearance="minimal"] .completed-board.status-board {
  min-height: 142px;
  max-height: 204px;
}

html[data-appearance="minimal"] .jar-board {
  min-height: 192px;
}

html[data-appearance="minimal"] .workspace-hero.is-empty {
  min-height: 82px;
}

html[data-appearance="minimal"] .workspace-hero.is-empty .ongoing-list {
  min-height: 40px;
}

html[data-appearance="simple"] {
  --shadow-panel: none;
  --shadow-card: none;
  --shadow-card-strong: none;
  --component-shadow: none;
  --phase4-quiet-shadow: none;
  --phase4-soft-shadow: none;
}

html[data-appearance="simple"] .workspace-hero,
html[data-appearance="simple"] .task-board,
html[data-appearance="simple"] .archive-folder-card,
html[data-appearance="simple"] .archive-record-card,
html[data-appearance="simple"] .count-day-form,
html[data-appearance="simple"] .count-day-metric,
html[data-appearance="simple"] .time-tool-panel,
html[data-appearance="simple"] .time-tools-assist-panel,
html[data-appearance="simple"] .timeline-axis-toolbar,
html[data-appearance="simple"] .calendar-month-panel {
  box-shadow: none;
}

html[data-appearance="simple"] .task-item,
html[data-appearance="simple"] .count-day-card,
html[data-appearance="simple"] .time-tools-assist-row,
html[data-appearance="simple"] .archive-folder-icon {
  box-shadow: none;
}

/* styles/26-simple-reminders.css */
/* Traditional reminders mode for the simple appearance. */

html[data-appearance="simple"] {
  --simple-sidebar-width: var(--app-sidebar-width);
  --simple-bottom-safe-area: 28px;
  --simple-shell-height: calc((100vh - var(--simple-bottom-safe-area)) / var(--app-shell-scale));
  --simple-blue: #007aff;
  --simple-bg: #f5f5f7;
  --simple-sidebar-bg: #f7f7f9;
  --simple-line: rgba(60, 60, 67, 0.14);
  --simple-line-soft: rgba(60, 60, 67, 0.09);
  --simple-muted: rgba(60, 60, 67, 0.68);
  --simple-selected: rgba(116, 116, 128, 0.11);
  --simple-selected-strong: rgba(0, 122, 255, 0.12);
  --simple-shadow: 0 22px 70px rgba(0, 0, 0, 0.16);
}

html[data-appearance="simple"] body {
  background: var(--simple-bg);
}

html[data-appearance="simple"] .desktop-shell {
  width: calc(100vw / var(--app-shell-scale));
  height: var(--simple-shell-height);
  min-height: var(--simple-shell-height);
  margin: 0;
  grid-template-columns: var(--simple-sidebar-width) minmax(0, 1fr);
  border-radius: 0;
  box-shadow: none;
  background: var(--surface);
}

html[data-appearance="simple"] .sidebar,
html[data-appearance="simple"] .workspace {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-appearance="simple"] .sidebar {
  height: var(--simple-shell-height);
  max-height: var(--simple-shell-height);
  gap: 6px;
  padding: 8px 8px 20px;
  border-right: 1px solid var(--simple-line);
  background: var(--simple-sidebar-bg);
}

html[data-appearance="simple"] .brand {
  display: none;
}

html[data-appearance="simple"] .clock-panel,
html[data-appearance="simple"] .view-section,
html[data-appearance="simple"] .theme-switch,
html[data-appearance="simple"] .detach-zone,
html[data-appearance="simple"] .drag-mode-indicator,
html[data-appearance="simple"] .drag-zone-guide,
html[data-appearance="simple"] .estimate-popover,
html[data-appearance="simple"] .delete-confirm-popover {
  display: none;
}

html[data-appearance="simple"] .sidebar-section {
  gap: 4px;
}

html[data-appearance="simple"] .sidebar-section-header {
  display: none;
}

html[data-appearance="simple"] .category-list {
  gap: 2px;
}

html[data-appearance="simple"] .category-card {
  min-height: 28px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 5px;
  padding: 3px 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}

html[data-appearance="simple"] .category-card:hover {
  background: rgba(116, 116, 128, 0.08);
  box-shadow: none;
  transform: none;
}

html[data-appearance="simple"] .category-card.is-active {
  background: var(--simple-selected);
  box-shadow: none;
}

html[data-appearance="simple"] .category-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--category-color);
  box-shadow: none;
}

html[data-appearance="simple"] .category-card-text strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 540;
  line-height: 1.2;
}

html[data-appearance="simple"] .category-card-text small {
  color: var(--simple-muted);
  font-size: 10px;
  font-weight: 560;
}

html[data-appearance="simple"] .sidebar-actions {
  margin-top: auto;
  margin-bottom: 6px;
  gap: 4px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

html[data-appearance="simple"] .settings-button {
  min-height: 30px;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--simple-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 0 6px;
}

html[data-appearance="simple"] .settings-button:hover {
  background: rgba(116, 116, 128, 0.08);
  transform: none;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .workspace {
  height: var(--simple-shell-height);
  min-height: var(--simple-shell-height);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .workspace-hero,
html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .right-rail {
  display: none;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .board-grid {
  order: 1;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .main-column {
  min-height: 0;
  gap: 0;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-board-main {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 10px 18px 8px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .board-header {
  display: none;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-board-main .task-list {
  gap: 0;
  padding: 0 0 8px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-item {
  width: 100%;
  min-height: 34px;
  margin-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 2px 3px 0;
  border: 0;
  border-bottom: 1px solid var(--simple-line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  transform: none;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-item.has-note:not(.is-detail-open) {
  height: max-content;
  min-height: 58px;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-item.is-simple-selected {
  background: transparent;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-item.is-chain-child {
  padding-left: 0;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-item.is-chain-child::before,
html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .connector-socket {
  display: none;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .check-button {
  width: 21px;
  height: 21px;
  margin-top: 5px;
  border-width: 1.7px;
  border-color: color-mix(in srgb, var(--simple-muted) 72%, transparent);
  background: var(--surface);
  box-shadow: none;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-item.is-done .check-button {
  border-color: var(--task-color, var(--simple-blue));
  background: var(--task-color, var(--simple-blue));
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .drag-handle {
  width: 14px;
  height: 28px;
  margin-top: 1px;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-item:hover .drag-handle,
html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-item.is-simple-selected .drag-handle,
html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-item.is-dragging .drag-handle {
  opacity: 0.48;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .drag-handle::before {
  width: 12px;
  height: 12px;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .drag-handle::after {
  display: none;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-main {
  padding-top: 0;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-item.has-note:not(.is-detail-open) .task-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-row {
  min-height: 28px;
  gap: 6px;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-title-edit {
  min-height: 28px;
  color: var(--text);
  font-size: 15px;
  font-weight: 450;
  line-height: 1.2;
  padding: 0;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-title-edit:focus {
  background: transparent;
  box-shadow: none;
  padding-left: 0;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-row > .due-chip,
html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .ongoing-chip {
  display: none;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .due-chip.is-overdue {
  color: color-mix(in srgb, var(--danger) 76%, var(--text) 24%);
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-meta {
  display: none;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-note:not([hidden]) {
  display: -webkit-box;
  margin-top: 1px;
  color: var(--simple-muted);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.25;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-actions {
  display: none;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-details,
html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-item.is-detail-open .task-details:not([hidden]) {
  display: none !important;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-composer {
  order: 2;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin: 0 18px 24px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--simple-line-soft);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 96%, var(--simple-bg) 4%);
  box-shadow: none;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-composer .category-field {
  display: none;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-title-field input {
  min-height: 28px;
  padding: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 480;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-title-field input::placeholder {
  color: var(--simple-blue);
  font-weight: 540;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .add-button {
  min-height: 28px;
  border: 0;
  border-radius: 7px;
  background: var(--simple-blue);
  color: #fff;
  box-shadow: none;
  font-size: 12px;
  font-weight: 650;
  padding: 0 10px;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .add-button:hover {
  background: color-mix(in srgb, var(--simple-blue) 88%, #000 12%);
  transform: none;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .empty-state.is-visible {
  min-height: 96px;
  margin-top: 10px;
  border: 1px dashed var(--simple-line);
  border-radius: 9px;
  background: transparent;
  color: var(--simple-muted);
  box-shadow: none;
}

html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .empty-state.is-visible strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 640;
}

@media (max-width: 1120px) {
  html[data-appearance="simple"] {
    --simple-sidebar-width: var(--app-sidebar-width);
  }
}

@media (max-width: 1020px), (max-width: 1320px) and (max-height: 760px) {
  html[data-appearance="simple"] {
    --simple-sidebar-width: var(--app-sidebar-width);
  }

  html[data-appearance="simple"] .sidebar {
    padding-bottom: 24px;
  }

  html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-board-main {
    padding: 8px 14px 8px;
  }

  html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-composer {
    margin: 0 14px 24px;
  }
}

@media (max-width: 860px) {
  html[data-appearance="simple"] {
    --app-shell-scale: 1;
    --simple-bottom-safe-area: 18px;
    --simple-sidebar-width: clamp(96px, 30vw, 150px);
    --simple-shell-height: calc(100vh - var(--simple-bottom-safe-area));
  }

  html[data-appearance="simple"] body {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  html[data-appearance="simple"] .desktop-shell {
    width: 100vw;
    height: var(--simple-shell-height);
    min-height: var(--simple-shell-height);
    grid-template-columns: var(--simple-sidebar-width) minmax(0, 1fr);
    transform: none;
  }

  html[data-appearance="simple"] .sidebar {
    display: flex;
    height: var(--simple-shell-height);
    max-height: var(--simple-shell-height);
    padding: 6px 4px 22px;
  }

  html[data-appearance="simple"] .category-card {
    min-height: 26px;
    grid-template-columns: 16px minmax(0, 1fr);
    padding: 3px 4px;
  }

  html[data-appearance="simple"] .category-dot {
    width: 12px;
    height: 12px;
  }

  html[data-appearance="simple"] .category-card-text small {
    display: none;
  }

  html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .workspace {
    height: var(--simple-shell-height);
    min-height: var(--simple-shell-height);
  }

  html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-board-main {
    padding: 6px 8px 6px;
  }

  html[data-appearance="simple"] .desktop-shell.is-simple-reminders-view .task-composer {
    margin: 0 8px 18px;
  }
}

/* styles/27-count-days-compact.css */
/* Final compact pass for Count Days. Keep this after global visual refresh files. */

html .desktop-shell.is-count-days-view {
  width: calc(100vw / var(--app-shell-scale));
  max-width: calc(100vw / var(--app-shell-scale));
}

html .desktop-shell.is-count-days-view .count-day-shell {
  align-content: start;
  grid-template-rows: auto auto auto auto;
  gap: 12px;
  min-height: 100%;
  padding: 14px 16px 22px;
  border-color: var(--border-subtle);
  background: var(--surface-panel);
  box-shadow: none;
}

html .desktop-shell.is-count-days-view .count-day-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title actions"
    "filters filters";
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-panel);
}

html .desktop-shell.is-count-days-view .count-day-title {
  grid-area: title;
  min-width: 0;
}

html .desktop-shell.is-count-days-view .count-day-title h4 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html .desktop-shell.is-count-days-view .count-day-kicker,
html .desktop-shell.is-count-days-view .count-day-title span,
html .desktop-shell.is-count-days-view .count-day-metrics,
html .desktop-shell.is-count-days-view .count-day-filter-result {
  display: none;
}

html .desktop-shell.is-count-days-view .count-day-toolbar-actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
}

html .desktop-shell.is-count-days-view .count-day-toggle-form {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 920;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 8%, transparent);
}

html .desktop-shell.is-count-days-view .count-day-filters {
  grid-area: filters;
  width: 100%;
  min-width: 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: thin;
}

html .desktop-shell.is-count-days-view .count-day-filter {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 820;
  white-space: nowrap;
  box-shadow: none;
}

html .desktop-shell.is-count-days-view .count-day-filter:hover,
html .desktop-shell.is-count-days-view .count-day-filter:focus-visible {
  border-color: var(--line-soft);
  background: color-mix(in srgb, var(--surface-card) 68%, transparent);
}

html .desktop-shell.is-count-days-view .count-day-filter.is-active {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line-soft) 72%);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-card) 90%);
  color: var(--text);
}

html .desktop-shell.is-count-days-view .count-day-filter strong {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 800;
}

html .desktop-shell.is-count-days-view .count-day-filter.is-active strong {
  color: currentColor;
}

html .desktop-shell.is-count-days-view .count-day-summary {
  display: grid;
  grid-template-columns: minmax(240px, 1.45fr) repeat(3, minmax(110px, 0.55fr));
  gap: 8px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line-soft);
}

html .desktop-shell.is-count-days-view .count-day-summary-item {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 2px 12px;
  border-left: 2px solid color-mix(in srgb, var(--count-day-summary-color, var(--accent)) 44%, var(--line-soft) 56%);
}

html .desktop-shell.is-count-days-view .count-day-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;
}

html .desktop-shell.is-count-days-view .count-day-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;
}

html .desktop-shell.is-count-days-view .count-day-summary-item.is-nearest strong {
  color: color-mix(in srgb, var(--count-day-summary-color, var(--accent)) 36%, var(--text) 64%);
  font-size: 17px;
}

html .desktop-shell.is-count-days-view .count-day-summary-item small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html .desktop-shell.is-count-days-view .count-day-form {
  grid-template-columns: var(--count-day-form-columns, minmax(180px, 1.05fr) minmax(140px, 0.7fr) minmax(220px, 1fr) auto);
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-panel) 78%, var(--surface) 22%);
  box-shadow: none;
}

html .desktop-shell.is-count-days-view .count-day-form[hidden] {
  display: none;
}

html .desktop-shell.is-count-days-view .count-day-form-header {
  grid-column: 1 / -1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
}

html .desktop-shell.is-count-days-view .count-day-form-header h5 {
  margin: 0;
  font-size: 13px;
  font-weight: 850;
}

html .desktop-shell.is-count-days-view .count-day-field input,
html .desktop-shell.is-count-days-view .count-day-field textarea {
  min-height: 34px;
  border-radius: 8px;
  font-size: 13px;
}

html .desktop-shell.is-count-days-view .count-day-mode-options span {
  min-height: 32px;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12px;
}

html .desktop-shell.is-count-days-view .count-day-form-actions {
  grid-column: var(--count-day-form-actions-column, auto);
  min-width: 0;
  gap: 8px;
  flex-wrap: var(--count-day-form-actions-wrap, nowrap);
}

html .desktop-shell.is-count-days-view .count-day-submit,
html .desktop-shell.is-count-days-view .count-day-cancel {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 900;
  white-space: var(--count-day-form-button-white-space, normal);
}

html .desktop-shell.is-count-days-view .count-day-submit {
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 7%, transparent);
}

html .desktop-shell.is-count-days-view .count-day-list {
  display: grid;
  grid-template-columns: minmax(270px, 0.86fr) minmax(420px, 1.34fr) minmax(300px, 0.92fr);
  align-items: start;
  gap: 18px;
}

html .desktop-shell.is-count-days-view .count-day-group,
html .desktop-shell.is-count-days-view .count-day-group.is-start-column,
html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown,
html .desktop-shell.is-count-days-view .count-day-group.is-overdue {
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
  align-self: start;
  gap: 7px;
  padding-left: 12px;
  border-left: 1px solid var(--line-soft);
}

html .desktop-shell.is-count-days-view .count-day-group.is-start-column {
  grid-column: 1;
  --count-day-column-accent: var(--success);
}

html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown {
  grid-column: 2;
  --count-day-column-accent: var(--accent);
}

html .desktop-shell.is-count-days-view .count-day-group.is-overdue {
  grid-column: 3;
  --count-day-column-accent: var(--danger);
}

html .desktop-shell.is-count-days-view .count-day-group-header {
  min-height: 0;
  padding: 0 2px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--count-day-column-accent, var(--line-soft)) 18%, var(--line-soft) 82%);
}

html .desktop-shell.is-count-days-view .count-day-group-header h5 {
  margin: 0;
  color: color-mix(in srgb, var(--count-day-column-accent, var(--text-tertiary)) 46%, var(--text-secondary) 54%);
  font-size: 12px;
  font-weight: 860;
  line-height: 1.25;
}

html .desktop-shell.is-count-days-view .count-day-group-header h5::before,
html .desktop-shell.is-count-days-view .count-day-group-header span {
  display: none;
}

html .desktop-shell.is-count-days-view .count-day-group-grid,
html .desktop-shell.is-count-days-view .count-day-group.is-start-column .count-day-group-grid,
html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown .count-day-group-grid,
html .desktop-shell.is-count-days-view .count-day-group.is-overdue .count-day-group-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

html .desktop-shell.is-count-days-view .count-day-card,
html .desktop-shell.is-count-days-view .count-day-group.is-start-column .count-day-card,
html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown .count-day-card,
html .desktop-shell.is-count-days-view .count-day-group.is-overdue .count-day-card {
  min-height: 72px;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main number"
    "actions actions";
  align-items: center;
  gap: 8px 12px;
  padding: 10px 10px 9px 12px;
  border: 1px solid transparent;
  border-left: 3px solid var(--count-day-color);
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  opacity: 1;
}

html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown .count-day-card {
  min-height: 88px;
}

html .desktop-shell.is-count-days-view .count-day-card::before,
html .desktop-shell.is-count-days-view .count-day-card::after,
html .desktop-shell.is-count-days-view .count-day-group.is-start-column .count-day-card::after,
html .desktop-shell.is-count-days-view .count-day-group.is-overdue .count-day-card::before,
html .desktop-shell.is-count-days-view .count-day-group.is-overdue .count-day-card::after {
  display: none;
}

html .desktop-shell.is-count-days-view .count-day-card:hover,
html .desktop-shell.is-count-days-view .count-day-card:focus-within,
html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown .count-day-card.is-today,
html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown .count-day-card.is-soon {
  border-color: color-mix(in srgb, var(--count-day-color) 20%, var(--line-soft) 80%);
  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;
}

html .desktop-shell.is-count-days-view .count-day-card-main,
html .desktop-shell.is-count-days-view .count-day-group.is-start-column .count-day-card-main,
html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown .count-day-card-main,
html .desktop-shell.is-count-days-view .count-day-group.is-overdue .count-day-card-main {
  min-width: 0;
  gap: 3px;
}

html .desktop-shell.is-count-days-view .count-day-card h5,
html .desktop-shell.is-count-days-view .count-day-group.is-start-column .count-day-card h5,
html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown .count-day-card h5,
html .desktop-shell.is-count-days-view .count-day-group.is-overdue .count-day-card h5 {
  min-height: 0;
  margin: 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;
}

html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown .count-day-card h5 {
  font-size: 14px;
}

html .desktop-shell.is-count-days-view .count-day-card-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

html .desktop-shell.is-count-days-view .count-day-card-meta span,
html .desktop-shell.is-count-days-view .count-day-card-note,
html .desktop-shell.is-count-days-view .count-day-group.is-start-column .count-day-card-meta span,
html .desktop-shell.is-count-days-view .count-day-group.is-overdue .count-day-card-meta span {
  max-width: 46ch;
  overflow: hidden;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html .desktop-shell.is-count-days-view .count-day-date-badge {
  flex: 1 1 auto;
  min-width: 0;
}

html .desktop-shell.is-count-days-view .count-day-card-note {
  margin: 0;
}

html .desktop-shell.is-count-days-view .count-day-number,
html .desktop-shell.is-count-days-view .count-day-group.is-start-column .count-day-number,
html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown .count-day-number,
html .desktop-shell.is-count-days-view .count-day-group.is-overdue .count-day-number {
  min-width: 74px;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
  color: var(--text);
  text-align: right;
}

html .desktop-shell.is-count-days-view .count-day-number span:first-child,
html .desktop-shell.is-count-days-view .count-day-number span:nth-child(3),
html .desktop-shell.is-count-days-view .count-day-group.is-start-column .count-day-number span:first-child,
html .desktop-shell.is-count-days-view .count-day-group.is-start-column .count-day-number span:nth-child(3),
html .desktop-shell.is-count-days-view .count-day-group.is-overdue .count-day-number span:first-child,
html .desktop-shell.is-count-days-view .count-day-group.is-overdue .count-day-number span:nth-child(3) {
  color: color-mix(in srgb, var(--count-day-color) 48%, var(--text-tertiary) 52%);
  font-size: 10px;
  font-weight: 780;
}

html .desktop-shell.is-count-days-view .count-day-number strong,
html .desktop-shell.is-count-days-view .count-day-group.is-start-column .count-day-number strong,
html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown .count-day-number strong,
html .desktop-shell.is-count-days-view .count-day-group.is-overdue .count-day-number strong {
  color: color-mix(in srgb, var(--count-day-color) 42%, var(--text) 58%);
  font-size: clamp(27px, 2.2vw, 38px);
  font-weight: 920;
  letter-spacing: 0;
  line-height: 0.95;
  text-shadow: none;
}

html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown .count-day-number strong {
  font-size: clamp(34px, 2.85vw, 48px);
}

html .desktop-shell.is-count-days-view .count-day-number small {
  display: none;
}

html .desktop-shell.is-count-days-view .count-day-actions,
html .desktop-shell.is-count-days-view .count-day-group.is-start-column .count-day-actions,
html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown .count-day-actions,
html .desktop-shell.is-count-days-view .count-day-group.is-overdue .count-day-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 7px;
  opacity: 0.58;
  transform: translateY(1px);
  transition: opacity 140ms ease, transform 140ms ease;
}

html .desktop-shell.is-count-days-view .count-day-card:hover .count-day-actions,
html .desktop-shell.is-count-days-view .count-day-card:focus-within .count-day-actions {
  opacity: 1;
  transform: none;
}

html .desktop-shell.is-count-days-view .count-day-actions button,
html .desktop-shell.is-count-days-view .count-day-group.is-start-column .count-day-actions button,
html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown .count-day-actions button,
html .desktop-shell.is-count-days-view .count-day-group.is-overdue .count-day-actions button {
  min-width: 46px;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 850;
}

html .desktop-shell.is-count-days-view .count-day-column-empty {
  min-height: 108px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px 10px;
  border-left: 2px solid color-mix(in srgb, var(--count-day-column-accent, var(--line-soft)) 24%, var(--line-soft) 76%);
  background: color-mix(in srgb, var(--count-day-column-accent, var(--surface-panel)) 4%, transparent);
  color: var(--text-tertiary);
}

html .desktop-shell.is-count-days-view .count-day-column-empty strong {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

html .desktop-shell.is-count-days-view .count-day-column-empty span {
  max-width: 30ch;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  html .desktop-shell.is-count-days-view .count-day-list {
    grid-template-columns: minmax(240px, 0.9fr) minmax(360px, 1.2fr) minmax(240px, 0.9fr);
    gap: 14px;
  }

  html .desktop-shell.is-count-days-view .count-day-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  html .desktop-shell.is-count-days-view {
    width: 100%;
    max-width: 100%;
  }

  html .desktop-shell.is-count-days-view .count-day-shell {
    padding: 12px;
  }

  html .desktop-shell.is-count-days-view .count-day-toolbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "actions"
      "filters";
  }

  html .desktop-shell.is-count-days-view .count-day-toolbar-actions {
    justify-content: start;
  }

  html .desktop-shell.is-count-days-view .count-day-summary,
  html .desktop-shell.is-count-days-view .count-day-form,
  html .desktop-shell.is-count-days-view .count-day-list {
    grid-template-columns: 1fr;
  }

  html .desktop-shell.is-count-days-view .count-day-group,
  html .desktop-shell.is-count-days-view .count-day-group.is-start-column,
  html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown,
  html .desktop-shell.is-count-days-view .count-day-group.is-overdue {
    grid-column: 1;
  }

  html .desktop-shell.is-count-days-view .count-day-card,
  html .desktop-shell.is-count-days-view .count-day-group.is-start-column .count-day-card,
  html .desktop-shell.is-count-days-view .count-day-group.is-active-countdown .count-day-card,
  html .desktop-shell.is-count-days-view .count-day-group.is-overdue .count-day-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main number"
      "actions actions";
  }

  html .desktop-shell.is-count-days-view .count-day-number {
    min-width: 64px;
  }

  html .desktop-shell.is-count-days-view .count-day-actions {
    opacity: 1;
  }
}

/* styles/28-calendar-paper.css */
.desktop-shell.is-calendar-view {
  --calendar-page-bg: var(--surface);
}

:root[data-theme="dark"] .desktop-shell.is-calendar-view {
  --calendar-page-bg: color-mix(in srgb, var(--surface) 78%, #0f1722 22%);
}

.desktop-shell.is-calendar-view .workspace {
  background: var(--calendar-page-bg);
}

.desktop-shell.is-calendar-view .task-board-main.is-calendar-board {
  --calendar-paper-bg: var(--surface);
  --calendar-paper-text: var(--text);
  --calendar-paper-muted: color-mix(in srgb, var(--muted) 58%, transparent);
  --calendar-paper-soft: color-mix(in srgb, var(--surface-soft) 82%, var(--surface) 18%);
  --calendar-paper-line: color-mix(in srgb, var(--line-soft) 86%, transparent);
  --calendar-paper-rule: color-mix(in srgb, var(--text) 82%, var(--line-strong) 18%);
  --calendar-paper-accent: color-mix(in srgb, var(--blue) 76%, var(--text) 24%);
  --calendar-paper-control-bg: color-mix(in srgb, var(--surface-soft) 82%, var(--surface) 18%);
  --calendar-paper-control-text: color-mix(in srgb, var(--muted) 82%, var(--text) 18%);
  --calendar-paper-control-strong: color-mix(in srgb, var(--text) 90%, var(--muted) 10%);
  --calendar-paper-nav-bg: color-mix(in srgb, #111318 88%, var(--surface) 12%);
  --calendar-paper-nav-hover: #111318;
  --calendar-paper-nav-text: #ffffff;
  --calendar-paper-shadow: rgba(16, 24, 40, 0.08);
  --calendar-row-height: clamp(42px, calc(var(--font-size) + var(--font-size) + 12px), 62px);
  --calendar-week-column-min: clamp(152px, calc(var(--font-size) + var(--font-size) + var(--font-size) + var(--font-size) + var(--font-size) + var(--font-size) + var(--font-size) + var(--font-size) + 28px), 212px);
  --calendar-week-gap: clamp(18px, calc(var(--font-size) + 5px), 28px);
  --calendar-day-header-height: clamp(44px, calc(var(--font-size) + var(--font-size) + 12px), 58px);
  --calendar-day-label-font: clamp(14px, calc(var(--font-size) - 1px), 18px);
  --calendar-day-number-font: clamp(18px, calc(var(--font-size) + 2px), 25px);
  --calendar-card-title-font: clamp(12.5px, calc(var(--font-size) - 3px), 18px);
  --calendar-event-title-font: clamp(12px, calc(var(--font-size) - 3.5px), 16px);
  --calendar-meta-font: clamp(10.5px, calc(var(--font-size) - 5px), 14px);
  --calendar-control-font: clamp(11px, calc(var(--font-size) - 4px), 15px);
  --calendar-check-size: clamp(11px, calc(var(--font-size) - 4px), 17px);
  --calendar-repeat-size: clamp(12px, calc(var(--font-size) - 3px), 17px);
  --calendar-add-button-size: clamp(24px, calc(var(--font-size) + 8px), 34px);
  --calendar-timeline-rail-width: clamp(42px, calc(var(--font-size) + var(--font-size) + 10px), 60px);
  --calendar-timeline-date-dot-size: clamp(32px, calc(var(--font-size) + 16px), 44px);
  --calendar-timeline-day-min: clamp(66px, calc(var(--calendar-row-height) + 24px), 88px);
  --calendar-timeline-node-min: clamp(46px, calc(var(--font-size) + var(--font-size) + 14px), 64px);
  --calendar-day-x-padding: 0px;
  --calendar-grid-line: var(--calendar-paper-line);
  color-scheme: inherit;
  background: var(--calendar-paper-bg);
  color: var(--calendar-paper-text);
}

:root[data-theme="dark"] .desktop-shell.is-calendar-view .task-board-main.is-calendar-board {
  --calendar-paper-bg: color-mix(in srgb, var(--surface) 88%, #0e1622 12%);
  --calendar-paper-text: var(--text);
  --calendar-paper-muted: color-mix(in srgb, var(--muted) 66%, transparent);
  --calendar-paper-soft: color-mix(in srgb, var(--surface-soft) 70%, #111b29 30%);
  --calendar-paper-line: color-mix(in srgb, var(--line-soft) 70%, transparent);
  --calendar-paper-rule: color-mix(in srgb, var(--text) 62%, var(--line-strong) 38%);
  --calendar-paper-accent: color-mix(in srgb, var(--blue) 70%, #9fbfff 30%);
  --calendar-paper-control-bg: color-mix(in srgb, var(--surface-elevated) 62%, var(--surface-soft) 38%);
  --calendar-paper-control-text: color-mix(in srgb, var(--muted) 80%, var(--text) 20%);
  --calendar-paper-control-strong: color-mix(in srgb, var(--text) 92%, var(--muted) 8%);
  --calendar-paper-nav-bg: color-mix(in srgb, var(--surface-elevated) 78%, #050912 22%);
  --calendar-paper-nav-hover: color-mix(in srgb, var(--surface-elevated) 88%, var(--blue) 12%);
  --calendar-paper-nav-text: var(--text);
  --calendar-paper-shadow: rgba(0, 0, 0, 0.28);
}

.desktop-shell.is-calendar-view .task-board-main.is-calendar-board .task-list,
.desktop-shell.is-calendar-view .calendar-shell {
  background: var(--calendar-paper-bg);
  color: var(--calendar-paper-text);
}

.desktop-shell.is-calendar-view .task-board-main.is-calendar-board .task-list {
  padding: 0 12px 0 0;
}

.desktop-shell.is-calendar-view .calendar-shell {
  --calendar-toolbar-height: 78px; --calendar-toolbar-control-size: 36px; --calendar-toolbar-view-button-width: 36px; --calendar-toolbar-today-width: 86px;
  gap: 0;
}

.desktop-shell.is-calendar-view .calendar-toolbar {
  height: var(--calendar-toolbar-height); min-height: var(--calendar-toolbar-height); align-items: center;
  gap: 18px;
  padding: 14px 10px;
  border-bottom: 0;
  background: var(--calendar-paper-bg);
}

.desktop-shell.is-calendar-view .calendar-title {
  display: grid;
  gap: 0;
  white-space: normal;
}

.desktop-shell.is-calendar-view .calendar-title .calendar-kicker,
.desktop-shell.is-calendar-view .calendar-title > span:not(.calendar-kicker) {
  display: none;
}

.desktop-shell.is-calendar-view .calendar-title h4 {
  margin: 0;
  padding: 0;
  border-left: 0;
  color: var(--calendar-paper-text);
  font-size: clamp(28px, 2.2vw, 36px);
  font-weight: 820;
  letter-spacing: 0;
  line-height: 0.95;
}

.desktop-shell.is-calendar-view .calendar-toolbar-actions {
  flex-wrap: nowrap; align-items: center;
  gap: 8px;
  padding-top: 0;
}

.desktop-shell.is-calendar-view .calendar-view-switcher,
.desktop-shell.is-calendar-view .calendar-feed-status,
.desktop-shell.is-calendar-view .calendar-nav {
  border: 0;
  box-shadow: none;
}

.desktop-shell.is-calendar-view .calendar-view-switcher {
  display: grid; grid-template-columns: repeat(4, var(--calendar-toolbar-view-button-width));
  gap: 6px;
  width: calc((var(--calendar-toolbar-view-button-width) * 4) + 18px); height: var(--calendar-toolbar-control-size);
  padding: 0;
  background: transparent;
}

.desktop-shell.is-calendar-view .calendar-view-switcher button {
  width: var(--calendar-toolbar-view-button-width); min-width: var(--calendar-toolbar-view-button-width);
  height: var(--calendar-toolbar-control-size); min-height: var(--calendar-toolbar-control-size);
  border-radius: 50%;
  padding: 0;
  background: var(--calendar-paper-control-bg);
  color: var(--calendar-paper-control-text);
  font-size: var(--calendar-control-font);
  font-weight: 760;
}

.desktop-shell.is-calendar-view .calendar-view-switcher button:hover,
.desktop-shell.is-calendar-view .calendar-view-switcher button.is-active {
  background: color-mix(in srgb, var(--calendar-paper-accent) 10%, var(--calendar-paper-control-bg) 90%);
  color: var(--calendar-paper-accent);
  box-shadow: none;
}

.desktop-shell.is-calendar-view .calendar-feed-status {
  height: var(--calendar-toolbar-control-size); min-height: var(--calendar-toolbar-control-size);
  padding: 0 6px 0 13px;
  background: var(--calendar-paper-control-bg);
  color: var(--calendar-paper-control-text);
  font-size: var(--calendar-control-font);
}

.desktop-shell.is-calendar-view .calendar-feed-status button {
  height: calc(var(--calendar-toolbar-control-size) - 8px); min-height: calc(var(--calendar-toolbar-control-size) - 8px);
  border-radius: 999px;
  background: var(--calendar-paper-bg);
  color: var(--calendar-paper-control-strong);
  box-shadow: inset 0 0 0 1px var(--calendar-paper-line);
}

.desktop-shell.is-calendar-view .calendar-feed-status button:disabled {
  color: var(--calendar-paper-muted);
}

.desktop-shell.is-calendar-view .calendar-nav {
  display: grid; grid-template-columns: var(--calendar-toolbar-control-size) var(--calendar-toolbar-today-width) var(--calendar-toolbar-control-size);
  gap: 7px;
  width: calc((var(--calendar-toolbar-control-size) * 2) + var(--calendar-toolbar-today-width) + 14px); height: var(--calendar-toolbar-control-size);
  padding: 0;
  background: transparent;
}

.desktop-shell.is-calendar-view .calendar-nav button {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--calendar-toolbar-control-size);
  min-width: var(--calendar-toolbar-control-size);
  height: var(--calendar-toolbar-control-size);
  min-height: var(--calendar-toolbar-control-size);
  border-radius: 50%;
  padding: 0;
  background: var(--calendar-paper-nav-bg);
  color: var(--calendar-paper-nav-text);
  font-size: 0;
  line-height: 0;
  box-shadow: none;
}

.desktop-shell.is-calendar-view .calendar-nav button:hover {
  background: var(--calendar-paper-nav-hover);
  color: var(--calendar-paper-nav-text);
}

.desktop-shell.is-calendar-view .calendar-nav button[data-calendar-period="today"] {
  width: var(--calendar-toolbar-today-width); min-width: var(--calendar-toolbar-today-width);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--calendar-paper-control-bg);
  color: var(--calendar-paper-control-strong);
  font-size: var(--calendar-control-font);
  font-weight: 760;
}

.desktop-shell.is-calendar-view .calendar-nav button[data-calendar-period="today"]:hover {
  background: color-mix(in srgb, var(--calendar-paper-control-bg) 78%, var(--calendar-paper-accent) 22%);
  color: var(--calendar-paper-control-strong);
}

.desktop-shell.is-calendar-view .calendar-nav button[data-calendar-period="prev"]::before,
.desktop-shell.is-calendar-view .calendar-nav button[data-calendar-period="next"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  margin: 0;
  transform-origin: center;
}

.desktop-shell.is-calendar-view .calendar-nav button[data-calendar-period="prev"]::before {
  transform: translate(-50%, -50%) rotate(135deg);
}

.desktop-shell.is-calendar-view .calendar-nav button[data-calendar-period="next"]::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.desktop-shell.is-calendar-view .calendar-shell-week {
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0 10px 0;
}

.desktop-shell.is-calendar-view .calendar-week-grid {
  grid-template-columns: repeat(7, minmax(var(--calendar-week-column-min), 1fr));
  gap: var(--calendar-week-gap);
  min-width: 100%;
  height: 100%;
  padding: 0 0 14px;
  background: var(--calendar-paper-bg);
  overflow-x: auto;
  overflow-y: hidden;
}

.desktop-shell.is-calendar-view .calendar-day {
  min-width: var(--calendar-week-column-min);
  border-right: 0;
  background: transparent;
}

.desktop-shell.is-calendar-view .calendar-day.is-today {
  background: transparent;
}

.desktop-shell.is-calendar-view .calendar-day.is-calendar-drop-target,
.desktop-shell.is-calendar-view .calendar-unscheduled.is-calendar-drop-target {
  outline: 2px solid color-mix(in srgb, var(--calendar-paper-accent) 46%, transparent);
  outline-offset: 2px;
  background-color: color-mix(in srgb, var(--calendar-paper-accent) 5%, transparent);
}

.desktop-shell.is-calendar-view .calendar-day-header {
  min-height: var(--calendar-day-header-height);
  padding: 0 0 8px;
  border-bottom: 1.5px solid var(--calendar-paper-rule);
}

.desktop-shell.is-calendar-view .calendar-day-header span {
  order: 2;
  margin-left: auto;
  color: var(--calendar-paper-muted);
  font-size: var(--calendar-day-label-font);
  font-weight: 560;
  line-height: 1;
}

.desktop-shell.is-calendar-view .calendar-day-header strong {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--calendar-paper-text);
  font-size: var(--calendar-day-number-font);
  font-weight: 780;
  line-height: 1;
  box-shadow: none;
}

.desktop-shell.is-calendar-view .calendar-day.is-today .calendar-day-header {
  border-bottom-color: var(--calendar-paper-accent);
}

.desktop-shell.is-calendar-view .calendar-day.is-today .calendar-day-header span,
.desktop-shell.is-calendar-view .calendar-day.is-today .calendar-day-header strong {
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--calendar-paper-accent);
  box-shadow: none;
}

.desktop-shell.is-calendar-view .calendar-day.is-today .calendar-day-header strong {
  font-size: var(--calendar-day-number-font);
  font-weight: 820;
}

.desktop-shell.is-calendar-view .calendar-day-list {
  padding: 0 0 20px;
  scrollbar-gutter: auto;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--calendar-row-height) - 1px),
      var(--calendar-paper-line) calc(var(--calendar-row-height) - 1px),
      var(--calendar-paper-line) var(--calendar-row-height)
    );
  background-clip: border-box;
  background-origin: border-box;
}

.desktop-shell.is-calendar-view .calendar-task-card {
  grid-template-columns: var(--calendar-check-size) minmax(0, 1fr);
  gap: clamp(5px, calc(var(--font-size) - 11px), 10px);
  padding: 0 4px 0 1px;
  border-radius: 5px;
  background: transparent;
  color: var(--calendar-paper-text);
  box-shadow: none;
  transition:
    background var(--motion-fast) var(--ease-smooth-soft),
    opacity var(--motion-fast) var(--ease-smooth-soft);
}

.desktop-shell.is-calendar-view .calendar-task-card:hover,
.desktop-shell.is-calendar-view .calendar-task-card:focus-within {
  transform: none;
  background: color-mix(in srgb, var(--task-color, var(--calendar-paper-accent)) 4%, transparent);
}

.desktop-shell.is-calendar-view .calendar-task-card.is-dragging {
  transform: none;
}

.desktop-shell.is-calendar-view .calendar-task-card > strong {
  color: var(--calendar-paper-text);
  font-size: var(--calendar-card-title-font);
  font-weight: 520;
  line-height: 1.24;
}

.desktop-shell.is-calendar-view .calendar-task-card.is-done {
  cursor: grab;
  opacity: 0.9;
}

.desktop-shell.is-calendar-view .calendar-task-card.is-done.is-dragging {
  cursor: grabbing;
}

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

.desktop-shell.is-calendar-view .calendar-task-card.is-done > strong,
.desktop-shell.is-calendar-view .calendar-task-card.is-completion-record > strong {
  justify-self: start;
  max-width: 100%;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: color-mix(in srgb, var(--task-color, var(--calendar-paper-accent)) 38%, var(--calendar-paper-text) 62%);
  text-decoration-thickness: 1px;
}

.desktop-shell.is-calendar-view .calendar-check-button {
  width: var(--calendar-check-size);
  height: var(--calendar-check-size);
  border-width: 1.5px;
  border-color: color-mix(in srgb, var(--task-color, var(--calendar-paper-accent)) 64%, var(--calendar-paper-text) 36%);
  background: var(--calendar-paper-bg);
}

.desktop-shell.is-calendar-view .calendar-check-button:hover {
  background: color-mix(in srgb, var(--task-color, var(--calendar-paper-accent)) 70%, var(--calendar-paper-bg) 30%);
  box-shadow:
    inset 0 0 0 2px var(--calendar-paper-bg),
    0 0 0 2px color-mix(in srgb, var(--task-color, var(--calendar-paper-accent)) 8%, transparent);
}

.desktop-shell.is-calendar-view .calendar-task-card.is-done .calendar-check-button {
  background: color-mix(in srgb, var(--task-color, var(--calendar-paper-accent)) 14%, var(--calendar-paper-bg) 86%);
}

.desktop-shell.is-calendar-view .calendar-task-card.is-done .calendar-check-button::after {
  width: 6px;
  height: 3px;
  border-left-width: 1.5px;
  border-bottom-width: 1.5px;
}

.desktop-shell.is-calendar-view .calendar-repeat-marker {
  width: var(--calendar-repeat-size);
  height: var(--calendar-repeat-size);
  font-size: var(--calendar-meta-font);
  font-weight: 720;
}

.desktop-shell.is-calendar-view .calendar-event-card {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1px;
  padding: 4px 6px;
  border-left: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--event-color, #00a6a6) 8%, var(--calendar-paper-bg) 92%);
  color: color-mix(in srgb, var(--event-color, #00a6a6) 44%, var(--calendar-paper-text) 56%);
  box-shadow: none;
}

.desktop-shell.is-calendar-view .calendar-event-card > strong {
  grid-column: 1;
  grid-row: 1;
  color: inherit;
  font-size: var(--calendar-event-title-font);
  font-weight: 620;
}

.desktop-shell.is-calendar-view .calendar-event-time,
.desktop-shell.is-calendar-view .calendar-event-meta {
  grid-column: 1;
  grid-row: auto;
  color: color-mix(in srgb, var(--event-color, #00a6a6) 64%, var(--calendar-paper-muted) 36%);
  font-size: var(--calendar-meta-font);
  font-weight: 650;
}

.desktop-shell.is-calendar-view .calendar-clear-button {
  right: 2px;
  color: var(--calendar-paper-muted);
}

.desktop-shell.is-calendar-view .calendar-empty-note {
  color: var(--calendar-paper-muted);
  font-weight: 640;
}

.desktop-shell.is-calendar-view .calendar-add-control {
  grid-template-columns: minmax(0, 1fr) var(--calendar-add-button-size);
  gap: 6px;
  padding: 0;
}

.desktop-shell.is-calendar-view .calendar-add-control input {
  border-radius: 6px;
  padding: 0 8px;
  color: var(--calendar-paper-text);
  font-weight: 520;
  background: transparent;
}

.desktop-shell.is-calendar-view .calendar-add-control input:focus {
  background: var(--calendar-paper-bg);
  box-shadow: 0 0 0 1px var(--calendar-paper-line), 0 4px 14px var(--calendar-paper-shadow);
}

.desktop-shell.is-calendar-view .calendar-add-control button {
  width: var(--calendar-add-button-size);
  min-height: var(--calendar-add-button-size);
  background: color-mix(in srgb, var(--calendar-add-color, var(--calendar-paper-accent)) 7%, var(--calendar-paper-control-bg) 93%);
  color: color-mix(in srgb, var(--calendar-add-color, var(--calendar-paper-accent)) 52%, var(--calendar-paper-control-strong) 48%);
  font-size: clamp(14px, calc(var(--font-size) - 1px), 21px);
  opacity: 0.68;
  box-shadow: none;
}

.desktop-shell.is-calendar-view .calendar-day:hover .calendar-add-control input,
.desktop-shell.is-calendar-view .calendar-add-control:focus-within input {
  opacity: 1;
}

.desktop-shell.is-calendar-view .calendar-unscheduled {
  --calendar-unscheduled-rows: 2;
  margin: 0;
  padding: 18px 0 26px;
  border: 0;
  border-top: 1px solid var(--calendar-paper-line);
  border-radius: 0;
  background: var(--calendar-paper-bg);
}

.desktop-shell.is-calendar-view .calendar-unscheduled-header {
  padding: 0 0 8px;
}

.desktop-shell.is-calendar-view .calendar-unscheduled-header h4 {
  color: var(--calendar-paper-text);
  font-size: clamp(18px, calc(var(--font-size) + 2px), 25px);
  font-weight: 900;
}

.desktop-shell.is-calendar-view .calendar-unscheduled-header span {
  color: var(--calendar-paper-control-text);
  font-size: var(--calendar-card-title-font);
}

.desktop-shell.is-calendar-view .calendar-unscheduled-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0 20px;
  max-height: calc(var(--calendar-row-height) + var(--calendar-row-height));
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--calendar-row-height) - 1px),
      var(--calendar-paper-line) calc(var(--calendar-row-height) - 1px),
      var(--calendar-paper-line) var(--calendar-row-height)
    );
}

.desktop-shell.is-calendar-view .calendar-month-panel,
.desktop-shell.is-calendar-view .calendar-month-weekdays,
.desktop-shell.is-calendar-view .calendar-month-grid,
.desktop-shell.is-calendar-view .calendar-month-day,
.desktop-shell.is-calendar-view .calendar-year-grid,
.desktop-shell.is-calendar-view .calendar-year-month {
  background: var(--calendar-paper-bg);
  color: var(--calendar-paper-text);
}

.desktop-shell.is-calendar-view .calendar-month-weekdays {
  border-bottom: 2px solid var(--calendar-paper-rule);
}

.desktop-shell.is-calendar-view .calendar-month-grid {
  gap: 18px 20px;
  padding: 10px 0 24px;
  background: var(--calendar-paper-bg);
}

.desktop-shell.is-calendar-view .calendar-month-day {
  border-top: 1px solid var(--calendar-paper-line);
  border-radius: 0;
  box-shadow: none;
}

.desktop-shell.is-calendar-view .calendar-month-chip,
.desktop-shell.is-calendar-view .calendar-month-chip.calendar-event-card {
  background: transparent;
  box-shadow: none;
}

.desktop-shell.is-calendar-view .calendar-year-grid {
  gap: 18px;
  padding: 10px 0 24px;
}

.desktop-shell.is-calendar-view .calendar-year-month {
  border-color: var(--calendar-paper-line);
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 1180px) {
  .desktop-shell.is-calendar-view .calendar-toolbar {
    height: auto;
    min-height: 126px;
    align-items: flex-start;
    flex-direction: column;
  }

  .desktop-shell.is-calendar-view .calendar-toolbar-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 780px) {
  .desktop-shell.is-calendar-view .calendar-toolbar {
    padding-top: 20px;
  }

  .desktop-shell.is-calendar-view .calendar-title h4 {
    font-size: 34px;
  }

  .desktop-shell.is-calendar-view .calendar-feed-status span {
    display: none;
  }
}

/* styles/28-calendar-paper-day.css */
/* Calendar paper Day timeline. */

.desktop-shell.is-calendar-view .calendar-shell-day {
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0 10px 18px;
}

.desktop-shell.is-calendar-view .calendar-shell-day .calendar-toolbar {
  height: var(--calendar-toolbar-height);
  min-height: var(--calendar-toolbar-height);
  align-items: center;
  gap: 12px;
  padding: 14px 10px;
}

.desktop-shell.is-calendar-view .calendar-shell-day .calendar-title h4 {
  font-size: clamp(26px, 1.7vw, 32px);
  line-height: 1;
}

.desktop-shell.is-calendar-view .calendar-shell-day .calendar-toolbar-actions {
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding-top: 0;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-calendar-day-controls {
  order: -1;
}

.desktop-shell.is-calendar-view .timeline-calendar-day-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.desktop-shell.is-calendar-view .timeline-calendar-day-controls .timeline-filter-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
}

.desktop-shell.is-calendar-view .timeline-calendar-day-controls .timeline-priority-control,
.desktop-shell.is-calendar-view .timeline-calendar-day-controls .timeline-source-control {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 2px;
  padding: 3px;
  border-color: var(--calendar-paper-line);
  background: var(--calendar-paper-control-bg);
  box-shadow: none;
}

.desktop-shell.is-calendar-view .timeline-calendar-day-controls button {
  min-height: clamp(28px, calc(var(--font-size) + 13px), 36px);
  padding: 0 clamp(9px, calc(var(--font-size) - 5px), 14px);
  color: var(--calendar-paper-control-text);
  font-size: var(--calendar-control-font);
  font-weight: 760;
}

.desktop-shell.is-calendar-view .timeline-calendar-day-controls button:hover,
.desktop-shell.is-calendar-view .timeline-calendar-day-controls button.is-active {
  color: var(--calendar-paper-control-strong);
  background: var(--calendar-paper-bg);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--calendar-paper-shadow) 60%, transparent);
}

.desktop-shell.is-calendar-view .calendar-shell-day .calendar-nav button[data-calendar-period="prev"]::before,
.desktop-shell.is-calendar-view .calendar-shell-day .calendar-nav button[data-calendar-period="next"]::before {
  margin: 0;
}

.desktop-shell.is-calendar-view .calendar-shell-day .calendar-nav button[data-calendar-period="prev"]::before {
  transform: translate(-50%, -50%) rotate(225deg);
}

.desktop-shell.is-calendar-view .calendar-shell-day .calendar-nav button[data-calendar-period="next"]::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.desktop-shell.is-calendar-view .calendar-day-timeline {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: var(--calendar-timeline-rail-width) minmax(300px, 760px);
  gap: 18px;
  padding: 0;
  background: var(--calendar-paper-bg);
  overflow: hidden;
}

.desktop-shell.is-calendar-view .calendar-day-timeline.is-calendar-drop-target {
  outline: 2px solid color-mix(in srgb, var(--calendar-paper-accent) 38%, transparent);
  outline-offset: 2px;
  background-color: color-mix(in srgb, var(--calendar-paper-accent) 4%, transparent);
}

.desktop-shell.is-calendar-view .calendar-day-timeline-rail {
  position: relative;
  min-height: 0;
  border-right: 1px solid var(--calendar-paper-line);
}

.desktop-shell.is-calendar-view .calendar-day-timeline-rail::before {
  content: var(--calendar-day-date);
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--calendar-timeline-date-dot-size);
  height: var(--calendar-timeline-date-dot-size);
  border-radius: 50%;
  color: var(--calendar-paper-muted);
  font-size: var(--calendar-card-title-font);
  font-weight: 680;
  background: var(--calendar-paper-bg);
  box-shadow: inset 0 0 0 1px var(--calendar-paper-line);
}

.desktop-shell.is-calendar-view .calendar-day-timeline.is-today .calendar-day-timeline-rail::before {
  color: var(--calendar-paper-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--calendar-paper-accent) 42%, transparent);
}

.desktop-shell.is-calendar-view .calendar-day-timeline-list {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  gap: 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 0 0 26px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--calendar-row-height) - 1px),
      var(--calendar-paper-line) calc(var(--calendar-row-height) - 1px),
      var(--calendar-paper-line) var(--calendar-row-height)
    );
  background-clip: border-box;
  background-origin: border-box;
}

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

.desktop-shell.is-calendar-view .calendar-day-timeline-list .calendar-empty-note {
  display: flex;
  align-items: center;
  color: var(--calendar-paper-muted);
  font-size: var(--calendar-card-title-font);
  font-weight: 520;
}

.desktop-shell.is-calendar-view .calendar-day-timeline-list .calendar-add-control {
  max-width: 420px;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-axis-shell-calendar-day {
  min-height: 0;
  height: 100%;
  max-width: none;
  gap: 0;
  padding: 2px 10px 22px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-filter-row {
  justify-content: flex-start;
  background: transparent;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-source-control {
  justify-content: flex-start;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-priority-control,
.desktop-shell.is-calendar-view .calendar-shell-day .timeline-source-control {
  background: var(--calendar-paper-control-bg);
  border-color: var(--calendar-paper-line);
  box-shadow: none;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-axis-list-calendar-day {
  width: min(1280px, 100%);
  padding: 0 0 12px;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-day {
  grid-template-columns: 90px 22px minmax(0, 1fr);
  max-width: none;
  min-height: var(--calendar-timeline-day-min);
  gap: 8px;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-date-rail {
  padding-top: 14px;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-date-rail strong {
  font-size: var(--calendar-card-title-font);
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-day-header h4 {
  font-size: var(--calendar-card-title-font);
  font-weight: 820;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-day-header span {
  font-size: var(--calendar-meta-font);
  font-weight: 700;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-day-content {
  align-content: start;
  gap: 6px;
  padding: 8px 0 10px;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-list {
  align-content: start;
  gap: 6px;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-wrap {
  align-self: start;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: auto;
  margin-left: 0;
  justify-self: stretch;
  min-height: var(--calendar-timeline-node-min);
  padding: 7px 9px;
  border-left: 1px solid color-mix(in srgb, var(--line-soft) 78%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--calendar-paper-shadow) 55%, transparent);
  touch-action: auto;
  will-change: auto;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card.task-item {
  transform: none;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card.is-kind-duration,
.desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card.is-kind-span {
  align-items: center;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-body strong {
  font-size: var(--calendar-card-title-font);
  font-weight: 760;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-meta,
.desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-time,
.desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-label {
  font-size: var(--calendar-meta-font);
  font-weight: 720;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-duration-bar {
  height: 14px;
  margin-top: 2px;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-duration-bar span {
  min-width: 64px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 720;
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card.calendar-event-card {
  grid-template-columns: 12px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  gap: 10px;
  min-height: calc(var(--calendar-timeline-node-min) + 6px);
  padding: 9px 10px;
  border-left: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--text);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow) 7%, transparent);
}

.desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card.calendar-event-card > strong {
  grid-column: auto;
  grid-row: auto;
  color: inherit;
  font-size: clamp(13px, calc(var(--font-size) - 2px), 19px);
  font-weight: 920;
}

/* styles/29-phase5-minimal-essential.css */
/* Phase 5: essential minimalism for the minimal/simple appearances only. */

html[data-appearance="minimal"],
html[data-appearance="simple"] {
  --paper-page: #fbfaf6;
  --paper-sheet: #fffefa;
  --paper-sheet-soft: #f6f3ed;
  --paper-row: #fffefa;
  --paper-row-hover: color-mix(in srgb, var(--accent) 3%, #fffefa 97%);
  --paper-line: rgba(32, 29, 22, 0.13);
  --paper-line-strong: rgba(32, 29, 22, 0.22);
  --paper-ink: #171713;
  --paper-ink-secondary: #2f3028;
  --paper-ink-muted: #636052;
  --paper-ink-muted-strong: #464337;
  --paper-shadow: 0 1px 0 rgba(32, 29, 22, 0.045);
  --paper-overlay-shadow: 0 18px 46px rgba(32, 29, 22, 0.12);
  --paper-radius: 6px;
  --paper-control-radius: 6px;
  --paper-control-bg: var(--paper-sheet);
  --paper-control-bg-hover: color-mix(in srgb, var(--accent) 4%, var(--paper-sheet) 96%);
  --paper-control-bg-active: color-mix(in srgb, var(--accent) 8%, var(--paper-sheet) 92%);
  --paper-control-border: var(--paper-line);
  --paper-control-border-hover: color-mix(in srgb, var(--accent) 28%, var(--paper-line) 72%);
  --paper-control-text: var(--paper-ink);
  --paper-control-muted-text: var(--paper-ink-muted);
  --paper-control-shadow: none;
  --paper-control-shadow-hover: none;
  --paper-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  --paper-primary-bg: color-mix(in srgb, var(--accent) 76%, var(--paper-ink) 24%);
  --paper-primary-bg-hover: color-mix(in srgb, var(--accent) 84%, var(--paper-ink) 16%);
  --paper-primary-text: #ffffff;
  --paper-danger-bg: color-mix(in srgb, var(--danger) 8%, var(--paper-sheet) 92%);
  --paper-danger-bg-hover: color-mix(in srgb, var(--danger) 13%, var(--paper-sheet) 87%);
  --paper-danger-text: color-mix(in srgb, var(--danger) 78%, var(--paper-ink) 22%);
  --paper-segmented-bg: var(--paper-sheet-soft);
  --paper-segmented-active-bg: var(--paper-sheet);
  --paper-segmented-active-shadow: inset 0 0 0 1px var(--paper-line);
  --paper-overlay-surface: color-mix(in srgb, var(--paper-sheet) 98%, transparent);
  --paper-overlay-option-hover: color-mix(in srgb, var(--accent) 5%, var(--paper-sheet) 95%);
  --paper-overlay-option-selected: color-mix(in srgb, var(--accent) 8%, var(--paper-sheet) 92%);
  --phase5-page: var(--paper-page);
  --phase5-surface: var(--paper-sheet);
  --phase5-surface-soft: var(--paper-sheet-soft);
  --phase5-row: var(--paper-row);
  --phase5-row-hover: var(--paper-row-hover);
  --phase5-line: var(--paper-line);
  --phase5-line-strong: var(--paper-line-strong);
  --phase5-text: var(--paper-ink);
  --phase5-muted: var(--paper-ink-muted);
  --phase5-shadow: var(--paper-shadow);
  --phase5-overlay-shadow: var(--paper-overlay-shadow);
  --phase5-radius: var(--paper-radius);
  --phase5-control-radius: var(--paper-control-radius);
  --bg: var(--phase5-page);
  --page-bg: var(--phase5-page);
  --surface: var(--phase5-surface);
  --surface-soft: var(--phase5-surface-soft);
  --surface-glass: var(--phase5-surface);
  --surface-panel: var(--phase5-surface);
  --surface-panel-strong: var(--phase5-surface);
  --surface-panel-muted: var(--phase5-surface-soft);
  --surface-card: var(--phase5-row);
  --surface-elevated: var(--phase5-surface);
  --panel-soft: var(--phase5-surface-soft);
  --text: var(--phase5-text);
  --text-secondary: var(--paper-ink-secondary);
  --text-tertiary: var(--phase5-muted);
  --muted: var(--phase5-muted);
  --muted-strong: var(--paper-ink-muted-strong);
  --line: var(--phase5-line);
  --line-soft: rgba(32, 29, 22, 0.08);
  --line-strong: var(--phase5-line-strong);
  --shadow: none;
  --shadow-panel: var(--phase5-shadow);
  --shadow-card: none;
  --shadow-card-strong: var(--phase5-shadow);
  --shadow-popover: var(--phase5-overlay-shadow);
  --shadow-modal: var(--phase5-overlay-shadow);
  --radius-panel: var(--phase5-radius);
  --radius-card: var(--phase5-radius);
  --radius-control: var(--phase5-control-radius);
  --radius-compact: 6px;
  --component-bg: var(--phase5-row);
  --component-bg-hover: var(--phase5-row-hover);
  --component-border: var(--phase5-line);
  --component-shadow: none;
  --control-bg: var(--paper-control-bg);
  --control-bg-hover: var(--paper-control-bg-hover);
  --control-bg-active: var(--paper-control-bg-active);
  --control-border: var(--paper-control-border);
  --control-border-hover: var(--paper-control-border-hover);
  --control-text: var(--paper-control-text);
  --control-muted-text: var(--paper-control-muted-text);
  --control-shadow: var(--paper-control-shadow);
  --control-shadow-hover: var(--paper-control-shadow-hover);
  --button-secondary-bg: var(--paper-control-bg);
  --button-secondary-bg-hover: var(--paper-control-bg-hover);
  --button-secondary-text: var(--paper-control-text);
  --button-primary-bg: var(--paper-primary-bg);
  --button-primary-bg-hover: var(--paper-primary-bg-hover);
  --button-primary-text: var(--paper-primary-text);
  --button-danger-bg: var(--paper-danger-bg);
  --button-danger-bg-hover: var(--paper-danger-bg-hover);
  --button-danger-text: var(--paper-danger-text);
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: var(--paper-control-bg-hover);
  --button-ghost-text: color-mix(in srgb, var(--accent) 60%, var(--phase5-text) 40%);
  --segmented-bg: var(--paper-segmented-bg);
  --segmented-border: var(--paper-control-border);
  --segmented-active-bg: var(--paper-segmented-active-bg);
  --segmented-active-shadow: var(--paper-segmented-active-shadow);
  --overlay-border: var(--paper-control-border);
  --overlay-surface: var(--paper-overlay-surface);
  --overlay-surface-strong: var(--phase5-surface);
  --overlay-option-hover: var(--paper-overlay-option-hover);
  --overlay-option-selected: var(--paper-overlay-option-selected);
  --overlay-focus-ring: var(--paper-focus-ring);
  --overlay-shadow: var(--phase5-overlay-shadow);
  --focus-ring: var(--paper-focus-ring);
  background: var(--phase5-page);
}

html[data-theme="dark"][data-appearance="minimal"],
html[data-theme="dark"][data-appearance="simple"] {
  --paper-page: #11100e;
  --paper-sheet: #171614;
  --paper-sheet-soft: #1d1b18;
  --paper-row: #1a1916;
  --paper-row-hover: color-mix(in srgb, var(--accent) 8%, #1a1916 92%);
  --paper-line: rgba(244, 239, 229, 0.105);
  --paper-line-strong: rgba(244, 239, 229, 0.18);
  --paper-ink: #f4f1ea;
  --paper-ink-secondary: #ded8ca;
  --paper-ink-muted: #aaa396;
  --paper-ink-muted-strong: #c8c1b3;
  --paper-shadow: none;
  --paper-overlay-shadow: 0 20px 52px rgba(0, 0, 0, 0.34);
  --paper-control-bg-hover: color-mix(in srgb, var(--accent) 8%, var(--paper-sheet) 92%);
  --paper-control-bg-active: color-mix(in srgb, var(--accent) 12%, var(--paper-sheet) 88%);
  --paper-control-border-hover: color-mix(in srgb, var(--accent) 32%, var(--paper-line) 68%);
  --paper-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  --paper-primary-bg: color-mix(in srgb, var(--accent) 68%, #ffffff 32%);
  --paper-primary-bg-hover: color-mix(in srgb, var(--accent) 76%, #ffffff 24%);
  --paper-primary-text: #11100e;
  --paper-danger-bg: color-mix(in srgb, var(--danger) 16%, var(--paper-sheet) 84%);
  --paper-danger-bg-hover: color-mix(in srgb, var(--danger) 22%, var(--paper-sheet) 78%);
  --paper-danger-text: color-mix(in srgb, #ffffff 58%, var(--danger) 42%);
  --paper-overlay-surface: color-mix(in srgb, var(--paper-sheet) 97%, transparent);
  --paper-overlay-option-hover: color-mix(in srgb, var(--accent) 13%, var(--paper-sheet) 87%);
  --paper-overlay-option-selected: color-mix(in srgb, var(--accent) 18%, var(--paper-sheet) 82%);
  --phase5-page: var(--paper-page);
  --phase5-surface: var(--paper-sheet);
  --phase5-surface-soft: var(--paper-sheet-soft);
  --phase5-row: var(--paper-row);
  --phase5-row-hover: var(--paper-row-hover);
  --phase5-line: var(--paper-line);
  --phase5-line-strong: var(--paper-line-strong);
  --phase5-text: var(--paper-ink);
  --phase5-muted: var(--paper-ink-muted);
  --phase5-shadow: var(--paper-shadow);
  --phase5-overlay-shadow: var(--paper-overlay-shadow);
  --bg: var(--phase5-page);
  --page-bg: var(--phase5-page);
  --surface: var(--phase5-surface);
  --surface-soft: var(--phase5-surface-soft);
  --surface-glass: var(--phase5-surface);
  --surface-panel: var(--phase5-surface);
  --surface-panel-strong: var(--phase5-surface);
  --surface-panel-muted: var(--phase5-surface-soft);
  --surface-card: var(--phase5-row);
  --surface-elevated: var(--phase5-surface);
  --panel-soft: var(--phase5-surface-soft);
  --shadow: none;
  --shadow-panel: none;
  --shadow-card: none;
  --shadow-card-strong: none;
  --text-secondary: var(--paper-ink-secondary);
  --text-tertiary: var(--phase5-muted);
  --muted-strong: var(--paper-ink-muted-strong);
}

html[data-theme="dark"][data-minimal-dark-tone="cool"][data-appearance="minimal"],
html[data-theme="dark"][data-minimal-dark-tone="cool"][data-appearance="simple"] {
  --paper-page: #0f141b;
  --paper-sheet: #141b24;
  --paper-sheet-soft: #192230;
  --paper-row: #151d27;
  --paper-row-hover: color-mix(in srgb, var(--accent) 10%, #151d27 90%);
  --paper-line: rgba(214, 226, 242, 0.12);
  --paper-line-strong: rgba(214, 226, 242, 0.22);
  --paper-ink: #eef5ff;
  --paper-ink-secondary: #d7e4f2;
  --paper-ink-muted: #9aaabd;
  --paper-ink-muted-strong: #c2cedc;
  --paper-overlay-shadow: 0 22px 56px rgba(0, 0, 0, 0.38);
  --paper-control-bg-hover: color-mix(in srgb, var(--accent) 9%, var(--paper-sheet) 91%);
  --paper-control-bg-active: color-mix(in srgb, var(--accent) 14%, var(--paper-sheet) 86%);
  --paper-control-border-hover: color-mix(in srgb, var(--accent) 34%, var(--paper-line) 66%);
  --paper-primary-bg: color-mix(in srgb, var(--accent) 74%, #dbeafe 26%);
  --paper-primary-bg-hover: color-mix(in srgb, var(--accent) 82%, #e0f2fe 18%);
  --paper-primary-text: #07111f;
  --paper-overlay-surface: color-mix(in srgb, var(--paper-sheet) 97%, transparent);
  --paper-overlay-option-hover: color-mix(in srgb, var(--accent) 13%, var(--paper-sheet) 87%);
  --paper-overlay-option-selected: color-mix(in srgb, var(--accent) 18%, var(--paper-sheet) 82%);
}

html[data-theme="dark"][data-appearance="minimal"] :is(.desktop-shell, .sidebar, .workspace),
html[data-theme="dark"][data-appearance="simple"] :is(.desktop-shell, .sidebar, .workspace) {
  background: var(--phase5-page);
  background-image: none;
  box-shadow: none;
}

html[data-theme="dark"][data-appearance="minimal"] :is(
  .clock-panel,
  .workspace-hero,
  .task-composer,
  .task-board,
  .right-rail-widget-card,
  .archive-hub-shell,
  .count-day-shell,
  .time-tools-shell,
  .calendar-shell
),
html[data-theme="dark"][data-appearance="simple"] :is(
  .clock-panel,
  .workspace-hero,
  .task-composer,
  .task-board,
  .right-rail-widget-card,
  .archive-hub-shell,
  .count-day-shell,
  .time-tools-shell,
  .calendar-shell
) {
  background: var(--phase5-surface);
  background-image: none;
  box-shadow: none;
}

html[data-appearance="minimal"] body,
html[data-appearance="simple"] body {
  background: var(--phase5-page);
}

html[data-appearance="minimal"] .desktop-shell,
html[data-appearance="simple"] .desktop-shell,
html[data-appearance="minimal"] .sidebar,
html[data-appearance="simple"] .sidebar,
html[data-appearance="minimal"] .workspace,
html[data-appearance="simple"] .workspace {
  background: var(--phase5-page);
  background-image: none;
  box-shadow: none;
}

html[data-appearance="minimal"] .sidebar,
html[data-appearance="simple"] .sidebar {
  border-right: 1px solid var(--phase5-line);
}

html[data-appearance="minimal"] .workspace,
html[data-appearance="simple"] .workspace {
  gap: 10px;
}

html[data-appearance="minimal"] :is(
  .clock-panel,
  .workspace-hero,
  .task-composer,
  .task-board,
  .right-rail-widget-card,
  .archive-hub-shell,
  .count-day-shell,
  .time-tools-shell,
  .calendar-shell
),
html[data-appearance="simple"] :is(
  .clock-panel,
  .workspace-hero,
  .task-composer,
  .task-board,
  .right-rail-widget-card,
  .archive-hub-shell,
  .count-day-shell,
  .time-tools-shell,
  .calendar-shell
) {
  border: 1px solid var(--phase5-line);
  border-radius: var(--phase5-radius);
  background: var(--phase5-surface);
  background-image: none;
  box-shadow: var(--phase5-shadow);
}

html[data-appearance="minimal"] :is(.archive-hub-shell, .count-day-shell, .time-tools-shell, .calendar-shell),
html[data-appearance="simple"] :is(.archive-hub-shell, .count-day-shell, .time-tools-shell, .calendar-shell) {
  box-shadow: none;
}

html[data-appearance="minimal"] :is(.task-board-main, .calendar-shell, .archive-hub-shell, .count-day-shell, .time-tools-shell),
html[data-appearance="simple"] :is(.task-board-main, .calendar-shell, .archive-hub-shell, .count-day-shell, .time-tools-shell) {
  min-height: 0;
}

html[data-appearance="minimal"] :is(.board-header h3, .archive-hub-copy h4, .count-day-title h4, .time-tools-title h4, .calendar-title h4, .timeline-axis-title h4),
html[data-appearance="simple"] :is(.board-header h3, .archive-hub-copy h4, .count-day-title h4, .time-tools-title h4, .calendar-title h4, .timeline-axis-title h4) {
  color: var(--phase5-text);
  letter-spacing: 0;
}

html[data-appearance="minimal"] :is(.sidebar-section-header, .brand p, .workspace-hero .eyebrow, .status-caption),
html[data-appearance="simple"] :is(.sidebar-section-header, .brand p, .workspace-hero .eyebrow, .status-caption) {
  color: var(--phase5-muted);
  letter-spacing: 0;
}

html[data-appearance="minimal"] :is(.category-button, .view-card),
html[data-appearance="simple"] :is(.category-button, .view-card) {
  min-height: 33px;
  border: 1px solid transparent;
  border-radius: var(--phase5-control-radius);
  background: transparent;
  box-shadow: none;
}

html[data-appearance="minimal"] :is(.category-button:hover, .view-card:hover),
html[data-appearance="simple"] :is(.category-button:hover, .view-card:hover) {
  border-color: var(--phase5-line);
  background: var(--phase5-row-hover);
}

html[data-appearance="minimal"] :is(.category-button.is-active, .view-card.is-active),
html[data-appearance="simple"] :is(.category-button.is-active, .view-card.is-active) {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--phase5-line) 68%);
  background: color-mix(in srgb, var(--accent) 8%, var(--phase5-surface) 92%);
  color: var(--phase5-text);
}

html[data-appearance="minimal"] :is(.task-item, .archive-record-card, .count-day-card, .time-tools-assist-row),
html[data-appearance="simple"] :is(.task-item, .archive-record-card, .count-day-card, .time-tools-assist-row) {
  border: 1px solid var(--phase5-line);
  border-radius: var(--phase5-radius);
  background: var(--phase5-row);
  box-shadow: none;
}

html[data-appearance="minimal"] :is(.task-item:hover, .archive-record-card:hover, .count-day-card:hover),
html[data-appearance="simple"] :is(.task-item:hover, .archive-record-card:hover, .count-day-card:hover) {
  border-color: var(--phase5-line-strong);
  background: var(--phase5-row-hover);
  transform: none;
}

html[data-appearance="minimal"] .task-list,
html[data-appearance="simple"] .task-list {
  gap: 8px;
}

html[data-appearance="minimal"] .task-details,
html[data-appearance="minimal"] .task-details.has-estimate,
html[data-appearance="simple"] .task-details,
html[data-appearance="simple"] .task-details.has-estimate {
  align-items: start;
}

html[data-appearance="minimal"] .task-details .mini-field,
html[data-appearance="simple"] .task-details .mini-field {
  min-width: 0;
}

html[data-appearance="minimal"] .task-details :is(input, select, textarea, .task-due-control, .task-recurrence-control, .task-priority-check),
html[data-appearance="simple"] .task-details :is(input, select, textarea, .task-due-control, .task-recurrence-control, .task-priority-check) {
  width: 100%;
}

html[data-appearance="minimal"] .priority-check-field,
html[data-appearance="simple"] .priority-check-field {
  align-self: start;
}

html[data-appearance="minimal"] .task-priority-check,
html[data-appearance="simple"] .task-priority-check {
  min-height: 38px;
  justify-content: center;
}

html[data-appearance="minimal"] :is(.task-composer, .field, .task-details .mini-field, .focus-task-picker-button, .category-picker-button),
html[data-appearance="simple"] :is(.task-composer, .field, .task-details .mini-field, .focus-task-picker-button, .category-picker-button) {
  border-color: var(--phase5-line);
  border-radius: var(--phase5-control-radius);
  background: var(--phase5-surface);
  box-shadow: none;
}

html[data-appearance="minimal"] .task-details .mini-field,
html[data-appearance="simple"] .task-details .mini-field {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-appearance="minimal"] :is(input, textarea, select, button),
html[data-appearance="simple"] :is(input, textarea, select, button) {
  letter-spacing: 0;
}

html[data-appearance="minimal"] :is(.add-button, .count-day-add-button, .time-tools-primary-button),
html[data-appearance="simple"] :is(.add-button, .count-day-add-button, .time-tools-primary-button) {
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 78%, var(--phase5-text) 22%);
  box-shadow: none;
}

html[data-appearance="minimal"] :is(.secondary-button, .calendar-nav button, .calendar-feed-status button, .time-tools-preset-button),
html[data-appearance="simple"] :is(.secondary-button, .calendar-nav button, .calendar-feed-status button, .time-tools-preset-button) {
  border: 1px solid var(--phase5-line);
  border-radius: var(--phase5-control-radius);
  background: transparent;
  box-shadow: none;
}

html[data-appearance="minimal"] :is(.calendar-view-switcher, .time-tools-tabs, .timeline-axis-range, .timeline-axis-source-filter),
html[data-appearance="simple"] :is(.calendar-view-switcher, .time-tools-tabs, .timeline-axis-range, .timeline-axis-source-filter) {
  border: 1px solid var(--phase5-line);
  border-radius: var(--phase5-control-radius);
  background: var(--phase5-surface-soft);
  box-shadow: none;
}

html[data-appearance="minimal"] :is(.calendar-view-switcher button, .time-tools-tabs button),
html[data-appearance="simple"] :is(.calendar-view-switcher button, .time-tools-tabs button) {
  box-shadow: none;
}

html[data-appearance="minimal"] :is(.calendar-view-switcher button.is-active, .time-tools-tabs button.is-active),
html[data-appearance="simple"] :is(.calendar-view-switcher button.is-active, .time-tools-tabs button.is-active) {
  background: var(--phase5-surface);
  color: var(--phase5-text);
  box-shadow: inset 0 0 0 1px var(--phase5-line);
}

html[data-appearance="minimal"] .right-rail,
html[data-appearance="simple"] .right-rail {
  gap: 8px;
}

html[data-appearance="minimal"] .right-rail :is(.task-board, .right-rail-widget-card),
html[data-appearance="simple"] .right-rail :is(.task-board, .right-rail-widget-card) {
  padding: 12px;
}

html[data-appearance="minimal"] :is(.status-number, .count-day-metric strong, .time-tools-display, .clock),
html[data-appearance="simple"] :is(.status-number, .count-day-metric strong, .time-tools-display, .clock) {
  color: var(--phase5-text);
  text-shadow: none;
}

html[data-appearance="minimal"] .jar-board,
html[data-appearance="simple"] .jar-board {
  --jar-glass-opacity: 0.18;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view,
html[data-appearance="simple"] .desktop-shell.is-calendar-view {
  --calendar-page-bg: var(--phase5-page);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .workspace,
html[data-appearance="simple"] .desktop-shell.is-calendar-view .workspace,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .task-board-main.is-calendar-board,
html[data-appearance="simple"] .desktop-shell.is-calendar-view .task-board-main.is-calendar-board,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell,
html[data-appearance="simple"] .desktop-shell.is-calendar-view .calendar-shell {
  background: var(--phase5-page);
}

html[data-appearance="minimal"] :is(.calendar-month-panel, .calendar-year-month),
html[data-appearance="simple"] :is(.calendar-month-panel, .calendar-year-month) {
  border: 1px solid var(--phase5-line);
  border-radius: var(--phase5-radius);
  background: var(--phase5-surface);
  box-shadow: none;
}

html[data-appearance="minimal"] :is(.calendar-month-day, .calendar-week-day, .calendar-year-month),
html[data-appearance="simple"] :is(.calendar-month-day, .calendar-week-day, .calendar-year-month) {
  border-color: var(--phase5-line);
}

html[data-appearance="minimal"] .calendar-month-day.is-today,
html[data-appearance="simple"] .calendar-month-day.is-today {
  background: color-mix(in srgb, var(--accent) 7%, var(--phase5-surface) 93%);
}

html[data-appearance="minimal"] .calendar-year-day.is-today,
html[data-appearance="simple"] .calendar-year-day.is-today {
  background: var(--accent);
  color: #ffffff;
}

html[data-appearance="minimal"] :is(.calendar-month-chip, .calendar-event-card),
html[data-appearance="simple"] :is(.calendar-month-chip, .calendar-event-card) {
  border: 1px solid color-mix(in srgb, var(--month-chip-color, var(--accent)) 28%, transparent);
  background: color-mix(in srgb, var(--month-chip-color, var(--accent)) 8%, transparent);
  box-shadow: none;
}

html[data-appearance="minimal"] :is(.archive-folder-card, .archive-group, .count-day-form, .time-tool-panel, .timeline-axis-toolbar),
html[data-appearance="simple"] :is(.archive-folder-card, .archive-group, .count-day-form, .time-tool-panel, .timeline-axis-toolbar) {
  border: 1px solid var(--phase5-line);
  border-radius: var(--phase5-radius);
  background: var(--phase5-surface);
  box-shadow: none;
}

html[data-appearance="minimal"] .empty-state,
html[data-appearance="simple"] .empty-state {
  border: 1px solid var(--phase5-line);
  border-radius: var(--phase5-radius);
  background: var(--phase5-surface-soft);
  box-shadow: none;
}

html[data-appearance="minimal"] :is(.calendar-nav button:hover, .time-tools-preset-button:hover),
html[data-appearance="simple"] :is(.calendar-nav button:hover, .time-tools-preset-button:hover) {
  border-color: var(--phase5-line-strong);
  background: var(--phase5-row-hover);
}

html[data-appearance="simple"] :is(.workspace-hero, .task-board, .count-day-card, .time-tool-panel) {
  box-shadow: none;
}

/* styles/29-phase5-dashboard-essential.css */
/* Phase 5 step 2: dashboard-only paper structure. */
html[data-appearance="minimal"] .desktop-shell: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),
html[data-appearance="simple"] .desktop-shell:not(.is-simple-reminders-view):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) {
  --dashboard-paper-gap: 10px;
  --dashboard-paper-inset: 12px;
  --dashboard-paper-radius: var(--phase5-radius);
  --dashboard-paper-accent: color-mix(in srgb, var(--accent) 76%, var(--phase5-text) 24%);
  border-radius: 8px;
  background: var(--phase5-page);
  box-shadow: none;
}

html[data-appearance="minimal"] .sidebar,
html[data-appearance="simple"] .sidebar {
  gap: 9px;
  padding: 14px 14px 16px;
  border: 0;
  border-right: 1px solid var(--phase5-line);
  border-radius: 0;
  background: var(--phase5-page);
  box-shadow: none;
  backdrop-filter: none;
}

html[data-appearance="minimal"] .workspace,
html[data-appearance="simple"] .workspace {
  padding: 14px 18px 18px;
  border: 0;
  border-radius: 0;
  background: var(--phase5-page);
  box-shadow: none;
  backdrop-filter: none;
}

html[data-appearance="minimal"] .sidebar-section-header,
html[data-appearance="simple"] .sidebar-section-header {
  padding-inline: 4px;
}

html[data-appearance="minimal"] .clock-panel,
html[data-appearance="simple"] .clock-panel {
  min-height: 56px;
  padding: 8px;
  border: 1px solid var(--phase5-line);
  border-radius: var(--dashboard-paper-radius);
  background: var(--phase5-surface);
  box-shadow: none;
}

html[data-appearance="minimal"] .category-list,
html[data-appearance="minimal"] .view-list,
html[data-appearance="simple"] .category-list,
html[data-appearance="simple"] .view-list {
  gap: 3px;
}

html[data-appearance="minimal"] :is(.category-card, .view-card),
html[data-appearance="simple"] :is(.category-card, .view-card) {
  min-height: 34px;
  padding: 0 8px;
  border-color: transparent;
  border-radius: var(--dashboard-paper-radius);
  background: transparent;
  color: var(--phase5-text);
  box-shadow: none;
}

html[data-appearance="minimal"] :is(.category-card:hover, .view-card:hover),
html[data-appearance="simple"] :is(.category-card:hover, .view-card:hover) {
  border-color: transparent;
  background: var(--phase5-row-hover);
  box-shadow: inset 0 0 0 1px var(--phase5-line);
}

html[data-appearance="minimal"] .category-card.is-active,
html[data-appearance="simple"] .category-card.is-active {
  border-color: var(--phase5-line);
  background: var(--phase5-surface);
  color: var(--phase5-text);
  box-shadow: inset 3px 0 0 var(--category-color, var(--dashboard-paper-accent));
}

html[data-appearance="minimal"] .view-card.is-active,
html[data-appearance="simple"] .view-card.is-active {
  border-color: var(--phase5-line);
  background: var(--phase5-surface);
  color: var(--phase5-text);
  box-shadow: inset 3px 0 0 var(--dashboard-paper-accent);
}

html[data-appearance="minimal"] .category-dot,
html[data-appearance="simple"] .category-dot {
  width: 10px;
  height: 10px;
  box-shadow: none;
}

html[data-appearance="minimal"] .category-card-text strong,
html[data-appearance="minimal"] .view-card,
html[data-appearance="simple"] .category-card-text strong,
html[data-appearance="simple"] .view-card {
  font-weight: 820;
}

html[data-appearance="minimal"] :is(.category-card-text small, .view-card small),
html[data-appearance="simple"] :is(.category-card-text small, .view-card small) {
  color: var(--phase5-muted);
  font-weight: 760;
}

html[data-appearance="minimal"] .view-card::before,
html[data-appearance="simple"] .view-card::before {
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 0;
  color: color-mix(in srgb, var(--phase5-muted) 78%, var(--phase5-text) 22%);
  background: currentColor !important;
  box-shadow: none;
  opacity: 0.72;
}

html[data-appearance="minimal"] .view-card {
  position: relative;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  padding-left: 8px;
}

html[data-appearance="minimal"] .view-card::before {
  display: block;
}

html[data-appearance="minimal"] .view-card.is-active::before,
html[data-appearance="simple"] .view-card.is-active::before {
  color: var(--dashboard-paper-accent);
  opacity: 0.95;
}

html[data-appearance="minimal"] .view-card.is-active {
  border-color: transparent;
  background: transparent;
  box-shadow: inset 2px 0 0 var(--dashboard-paper-accent);
}

html[data-appearance="minimal"] .view-card.is-active:hover,
html[data-appearance="minimal"] .view-card.is-active:focus-visible {
  background: var(--phase5-row-hover);
}

html[data-appearance="minimal"] .sidebar-actions,
html[data-appearance="simple"] .sidebar-actions {
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--phase5-line);
  border-radius: var(--dashboard-paper-radius);
  background: var(--phase5-surface);
  box-shadow: none;
}

html[data-appearance="minimal"] .sidebar-actions :is(.settings-button, .theme-switch),
html[data-appearance="simple"] .sidebar-actions :is(.settings-button, .theme-switch) {
  border: 1px solid var(--phase5-line);
  border-radius: var(--phase5-control-radius);
  background: var(--phase5-row);
  color: var(--phase5-text);
  box-shadow: none;
}

html[data-appearance="minimal"] .workspace-hero,
html[data-appearance="simple"] .workspace-hero {
  min-height: 0;
  padding: 7px var(--dashboard-paper-inset) 9px;
  border: 1px solid var(--phase5-line);
  border-radius: var(--dashboard-paper-radius);
  background: var(--phase5-surface);
  background-image: none;
  box-shadow: none;
}

html[data-appearance="minimal"] .workspace-hero-copy,
html[data-appearance="simple"] .workspace-hero-copy {
  min-height: 14px;
  padding-inline: 2px;
}

html[data-appearance="minimal"] .workspace-hero.is-ongoing-hot,
html[data-appearance="minimal"] .workspace-hero.is-focus-running,
html[data-appearance="minimal"] .workspace-hero.is-focus-ticking,
html[data-appearance="simple"] .workspace-hero.is-ongoing-hot,
html[data-appearance="simple"] .workspace-hero.is-focus-running,
html[data-appearance="simple"] .workspace-hero.is-focus-ticking {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--phase5-line) 66%);
  background: var(--phase5-surface);
  background-image: none;
  box-shadow: inset 3px 0 0 var(--dashboard-paper-accent);
}

html[data-appearance="minimal"] .workspace-hero h2,
html[data-appearance="simple"] .workspace-hero h2 {
  color: var(--phase5-muted);
  font-weight: 820;
}

html[data-appearance="minimal"] .workspace-hero .eyebrow,
html[data-appearance="simple"] .workspace-hero .eyebrow {
  color: var(--phase5-text);
  font-weight: 850;
}

html[data-appearance="minimal"] .workspace-hero-note,
html[data-appearance="simple"] .workspace-hero-note {
  color: var(--phase5-muted);
  font-weight: 650;
}

html[data-appearance="minimal"] .ongoing-panel,
html[data-appearance="simple"] .ongoing-panel {
  --ongoing-card-width: 100%;
  --focus-dashboard-card-height: 156px;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  grid-template-rows: auto minmax(var(--focus-dashboard-card-height), auto) auto;
  gap: 4px 8px;
}

html[data-appearance="minimal"] .ongoing-list,
html[data-appearance="simple"] .ongoing-list {
  min-height: var(--focus-dashboard-card-height);
  align-items: stretch;
  gap: 8px;
  padding: 0 1px;
}

html[data-appearance="minimal"] .workspace-hero.is-empty,
html[data-appearance="simple"] .workspace-hero.is-empty {
  min-height: 112px;
}

html[data-appearance="minimal"] .workspace-hero.is-empty .ongoing-list,
html[data-appearance="simple"] .workspace-hero.is-empty .ongoing-list {
  min-height: 58px;
  border: 1px dashed color-mix(in srgb, var(--phase5-line) 72%, transparent);
  border-radius: var(--dashboard-paper-radius);
  background: transparent;
}

html[data-appearance="minimal"] .ongoing-list .task-item,
html[data-appearance="simple"] .ongoing-list .task-item {
  min-height: var(--focus-dashboard-card-height);
  align-self: stretch;
  border-left-width: 4px;
  border-radius: var(--dashboard-paper-radius);
  padding: 8px 10px;
  background: var(--phase5-row);
  background-image: none;
  outline: 0;
  box-shadow: none;
}

html[data-appearance="minimal"] .ongoing-list .task-item.is-ongoing-task:not(.is-done),
html[data-appearance="minimal"] .ongoing-list .task-item.is-next:not(.is-done),
html[data-appearance="minimal"] .ongoing-list .task-item.is-focus-glow-visible:not(.is-done),
html[data-appearance="simple"] .ongoing-list .task-item.is-ongoing-task:not(.is-done),
html[data-appearance="simple"] .ongoing-list .task-item.is-next:not(.is-done),
html[data-appearance="simple"] .ongoing-list .task-item.is-focus-glow-visible:not(.is-done) {
  border-color: color-mix(in srgb, var(--phase5-line) 88%, transparent);
  border-left-color: var(--task-color, var(--accent));
  background: var(--phase5-row);
  background-image: none;
  box-shadow: none;
  animation: none;
}

html[data-appearance="minimal"] .ongoing-list .task-item.is-ongoing-card:not(.is-active-focus):not(.is-focus-ticking):not(.is-focus-glow-visible):not(.is-done),
html[data-appearance="simple"] .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(--phase5-line) 84%, transparent);
  border-left-color: color-mix(in srgb, var(--task-color, var(--accent)) 64%, var(--phase5-line) 36%);
  background: var(--phase5-row);
  box-shadow: none;
}

html[data-appearance="minimal"] .ongoing-list .task-item.is-ongoing-card.is-active-focus:not(.is-done),
html[data-appearance="minimal"] .ongoing-list .task-item.is-ongoing-card.is-focus-ticking:not(.is-done),
html[data-appearance="simple"] .ongoing-list .task-item.is-ongoing-card.is-active-focus:not(.is-done),
html[data-appearance="simple"] .ongoing-list .task-item.is-ongoing-card.is-focus-ticking:not(.is-done) {
  border-color: color-mix(in srgb, var(--phase5-line) 82%, transparent);
  border-left-color: var(--task-color, var(--accent));
  background: var(--phase5-row);
  box-shadow: none;
}

html[data-appearance="minimal"] .ongoing-list .task-item.is-ongoing-card:not(.is-active-focus):not(:hover) .ongoing-chip-in-actions,
html[data-appearance="simple"] .ongoing-list .task-item.is-ongoing-card:not(.is-active-focus):not(:hover) .ongoing-chip-in-actions {
  border-color: color-mix(in srgb, var(--phase5-line) 82%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--phase5-text) 68%, var(--phase5-muted) 32%);
}

html[data-appearance="minimal"] .ongoing-list .task-item.is-focus-glow-visible:not(.is-done)::before,
html[data-appearance="minimal"] .ongoing-list .task-item.is-focus-glow-visible:not(.is-done)::after,
html[data-appearance="simple"] .ongoing-list .task-item.is-focus-glow-visible:not(.is-done)::before,
html[data-appearance="simple"] .ongoing-list .task-item.is-focus-glow-visible:not(.is-done)::after {
  content: none;
  animation: none;
}

html[data-appearance="minimal"] .task-item.is-chain-child .check-button,
html[data-appearance="simple"] .task-item.is-chain-child .check-button {
  background: var(--phase5-row);
  box-shadow: 0 0 0 5px var(--phase5-row);
}

html[data-appearance="minimal"] .task-item.is-chain-child .check-button:hover,
html[data-appearance="minimal"] .task-item.is-chain-child .check-button:focus-visible,
html[data-appearance="simple"] .task-item.is-chain-child .check-button:hover,
html[data-appearance="simple"] .task-item.is-chain-child .check-button:focus-visible {
  box-shadow:
    inset 0 0 0 4px var(--phase5-row),
    0 0 0 3px color-mix(in srgb, var(--task-color, var(--accent)) 12%, transparent);
}

html[data-appearance="minimal"] .focus-recommendation,
html[data-appearance="simple"] .focus-recommendation {
  min-height: var(--focus-dashboard-card-height);
  align-self: stretch;
}

html[data-appearance="minimal"] .focus-recommendation-card,
html[data-appearance="minimal"] .focus-recommendation-empty,
html[data-appearance="simple"] .focus-recommendation-card,
html[data-appearance="simple"] .focus-recommendation-empty {
  gap: 6px;
  height: 100%;
  min-height: var(--focus-dashboard-card-height);
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--phase5-line) 82%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--task-color, var(--accent)) 42%, var(--phase5-line) 58%);
  border-radius: var(--dashboard-paper-radius);
  background: color-mix(in srgb, var(--phase5-row) 82%, transparent);
  background-image: none;
  color: var(--phase5-text);
  box-shadow: none;
  opacity: 0.78;
}

html[data-appearance="minimal"] .focus-recommendation-empty,
html[data-appearance="simple"] .focus-recommendation-empty {
  border-left-color: var(--phase5-line);
  background: transparent;
  opacity: 0.68;
}

html[data-appearance="minimal"] .focus-recommendation-label,
html[data-appearance="simple"] .focus-recommendation-label {
  color: var(--phase5-muted);
  font-size: 10px;
  font-weight: 760;
  text-transform: none;
}

html[data-appearance="minimal"] .focus-recommendation-title,
html[data-appearance="simple"] .focus-recommendation-title {
  color: color-mix(in srgb, var(--phase5-text) 84%, var(--phase5-muted) 16%);
  font-size: 15px;
  font-weight: 800;
}

html[data-appearance="minimal"] .focus-recommendation-estimate,
html[data-appearance="simple"] .focus-recommendation-estimate {
  border: 1px solid color-mix(in srgb, var(--phase5-line) 70%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--phase5-muted) 88%, var(--phase5-text) 12%);
  font-weight: 760;
}

html[data-appearance="minimal"] .focus-recommendation-meta span,
html[data-appearance="minimal"] .focus-recommendation-reasons span,
html[data-appearance="simple"] .focus-recommendation-meta span,
html[data-appearance="simple"] .focus-recommendation-reasons span {
  color: var(--phase5-muted);
  font-weight: 660;
}

html[data-appearance="minimal"] .focus-recommendation-actions button,
html[data-appearance="simple"] .focus-recommendation-actions button {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--phase5-line) 82%, transparent);
  border-radius: var(--phase5-control-radius);
  background: transparent;
  color: color-mix(in srgb, var(--phase5-text) 78%, var(--phase5-muted) 22%);
  box-shadow: none;
  font-weight: 760;
}

html[data-appearance="minimal"] .focus-recommendation-skip,
html[data-appearance="simple"] .focus-recommendation-skip {
  color: var(--phase5-muted);
}

html[data-appearance="minimal"] .task-focus-launcher,
html[data-appearance="simple"] .task-focus-launcher {
  --task-focus-panel-height: 96px;
  gap: 7px;
}

html[data-appearance="minimal"] .task-focus-timer,
html[data-appearance="simple"] .task-focus-timer {
  --task-focus-panel-height: 96px;
}

html[data-appearance="minimal"] .focus-launch-countdown,
html[data-appearance="minimal"] .focus-launch-countup,
html[data-appearance="simple"] .focus-launch-countdown,
html[data-appearance="simple"] .focus-launch-countup {
  min-height: var(--task-focus-panel-height);
  border: 1px solid color-mix(in srgb, var(--phase5-line) 86%, transparent);
  border-radius: var(--phase5-control-radius);
  background: color-mix(in srgb, var(--phase5-surface) 86%, transparent);
  color: var(--phase5-text);
  box-shadow: none;
}

html[data-appearance="minimal"] .focus-launch-countdown,
html[data-appearance="simple"] .focus-launch-countdown {
  padding: 9px 10px;
}

html[data-appearance="minimal"] .focus-launch-countup,
html[data-appearance="simple"] .focus-launch-countup {
  padding: 9px 10px;
}

html[data-appearance="minimal"] .focus-launch-label,
html[data-appearance="simple"] .focus-launch-label {
  color: color-mix(in srgb, var(--phase5-text) 72%, var(--phase5-muted) 28%);
  font-size: 11px;
  font-weight: 760;
}

html[data-appearance="minimal"] .focus-launch-hint,
html[data-appearance="simple"] .focus-launch-hint {
  color: color-mix(in srgb, var(--phase5-text) 42%, var(--phase5-muted) 58%);
  font-weight: 620;
}

html[data-appearance="minimal"] .focus-launch-clock,
html[data-appearance="simple"] .focus-launch-clock {
  border: 1px solid color-mix(in srgb, var(--phase5-line) 82%, transparent);
  border-radius: var(--phase5-control-radius);
  background: color-mix(in srgb, var(--phase5-surface) 82%, transparent);
  box-shadow: none;
}

html[data-appearance="minimal"] .focus-launch-time-field,
html[data-appearance="simple"] .focus-launch-time-field {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-appearance="minimal"] .focus-launch-clock-input,
html[data-appearance="simple"] .focus-launch-clock-input {
  color: var(--phase5-text);
  font-weight: 820;
}

html[data-appearance="minimal"] .focus-launch-clock-unit,
html[data-appearance="simple"] .focus-launch-clock-unit,
html[data-appearance="minimal"] .focus-launch-clock-separator,
html[data-appearance="simple"] .focus-launch-clock-separator {
  color: var(--phase5-muted);
  font-weight: 680;
}

html[data-appearance="minimal"] .focus-launch-play,
html[data-appearance="minimal"] .focus-launch-play-icon,
html[data-appearance="simple"] .focus-launch-play,
html[data-appearance="simple"] .focus-launch-play-icon {
  border: 1px solid color-mix(in srgb, var(--phase5-line) 86%, transparent);
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--task-color, var(--accent)) 56%, var(--phase5-text) 44%);
  box-shadow: none;
}

html[data-appearance="minimal"] .task-focus-timer,
html[data-appearance="simple"] .task-focus-timer {
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-appearance="minimal"] .task-focus-timer.is-mode-elapsed,
html[data-appearance="simple"] .task-focus-timer.is-mode-elapsed {
  min-height: var(--task-focus-panel-height);
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-appearance="minimal"] .task-focus-timer-main,
html[data-appearance="minimal"] .task-focus-timer-aside,
html[data-appearance="simple"] .task-focus-timer-main,
html[data-appearance="simple"] .task-focus-timer-aside {
  border-color: color-mix(in srgb, var(--phase5-line) 78%, transparent);
  background: color-mix(in srgb, var(--phase5-surface) 86%, transparent);
  box-shadow: none;
}

html[data-appearance="minimal"] .task-focus-secondary,
html[data-appearance="simple"] .task-focus-secondary {
  border-color: color-mix(in srgb, var(--phase5-line) 84%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--phase5-text) 58%, var(--phase5-muted) 42%);
  box-shadow: none;
  font-weight: 720;
}

html[data-appearance="minimal"] .task-focus-reset,
html[data-appearance="simple"] .task-focus-reset {
  color: color-mix(in srgb, #34c759 42%, var(--phase5-text) 58%);
}

html[data-appearance="minimal"] .task-focus-cancel,
html[data-appearance="simple"] .task-focus-cancel {
  color: var(--phase5-muted);
}

html[data-appearance="minimal"] .task-focus-secondary:hover,
html[data-appearance="simple"] .task-focus-secondary:hover {
  border-color: color-mix(in srgb, var(--task-color, var(--accent)) 18%, var(--phase5-line) 82%);
  background: color-mix(in srgb, var(--task-color, var(--accent)) 4%, var(--phase5-row) 96%);
  color: var(--phase5-text);
}

html[data-appearance="minimal"] .task-focus-aside-label,
html[data-appearance="simple"] .task-focus-aside-label {
  color: color-mix(in srgb, var(--phase5-text) 46%, var(--phase5-muted) 54%);
}

html[data-appearance="minimal"] .task-focus-aside-value,
html[data-appearance="simple"] .task-focus-aside-value {
  color: var(--phase5-text);
  font-weight: 820;
}

html[data-appearance="minimal"] .task-focus-timer.is-mode-elapsed .task-focus-remaining,
html[data-appearance="simple"] .task-focus-timer.is-mode-elapsed .task-focus-remaining {
  color: var(--phase5-text);
  font-weight: 820;
}

html[data-appearance="minimal"] .task-focus-timer.is-mode-elapsed .task-focus-mode,
html[data-appearance="simple"] .task-focus-timer.is-mode-elapsed .task-focus-mode {
  border: 0;
  background: transparent;
  color: var(--phase5-muted);
}

html[data-appearance="minimal"] .focus-launch-play:hover,
html[data-appearance="minimal"] .focus-launch-countup:hover,
html[data-appearance="simple"] .focus-launch-play:hover,
html[data-appearance="simple"] .focus-launch-countup:hover {
  border-color: color-mix(in srgb, var(--task-color, var(--accent)) 24%, var(--phase5-line) 76%);
  background: color-mix(in srgb, var(--task-color, var(--accent)) 4%, var(--phase5-row) 96%);
  transform: none;
}

html[data-appearance="minimal"] .task-composer,
html[data-appearance="simple"] .task-composer {
  padding: 10px 12px;
  border: 1px solid var(--phase5-line);
  border-radius: var(--dashboard-paper-radius);
  background: var(--phase5-surface);
  box-shadow: none;
}

html[data-appearance="minimal"] .desktop-shell: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-board-main,
html[data-appearance="simple"] .desktop-shell:not(.is-simple-reminders-view):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-board-main {
  padding: var(--dashboard-paper-inset);
  border: 1px solid var(--phase5-line);
  border-radius: var(--dashboard-paper-radius);
  background: var(--phase5-surface);
  box-shadow: none;
}

html[data-appearance="minimal"] .task-board-main .board-header,
html[data-appearance="simple"] .task-board-main .board-header {
  padding: 0 2px 9px;
  margin-bottom: 8px;
  border-bottom-color: var(--phase5-line);
}

html[data-appearance="minimal"] .task-board-main .task-list,
html[data-appearance="simple"] .task-board-main .task-list {
  gap: 6px;
  padding-right: 4px;
}

html[data-appearance="minimal"] .task-board-main .task-list > .task-item,
html[data-appearance="simple"] .task-board-main .task-list > .task-item {
  padding: 8px 10px;
  border: 1px solid var(--phase5-line);
  border-left: 3px solid var(--task-color, var(--accent));
  border-radius: var(--dashboard-paper-radius);
  background: var(--phase5-row);
  background-image: none;
  box-shadow: none;
}

html[data-appearance="minimal"] .task-board-main .task-list > .task-item:hover,
html[data-appearance="simple"] .task-board-main .task-list > .task-item:hover {
  border-color: var(--phase5-line-strong);
  border-left-color: var(--task-color, var(--accent));
  background: var(--phase5-row-hover);
}

html[data-appearance="minimal"] .drop-placeholder,
html[data-appearance="simple"] .drop-placeholder {
  border-radius: var(--dashboard-paper-radius);
  background: color-mix(in srgb, var(--accent) 5%, var(--phase5-surface) 95%);
  box-shadow: none;
}

html[data-appearance="minimal"] .right-rail,
html[data-appearance="simple"] .right-rail {
  gap: 8px;
}

html[data-appearance="minimal"] .right-rail :is(.task-board, .right-rail-widget-card),
html[data-appearance="simple"] .right-rail :is(.task-board, .right-rail-widget-card) {
  padding: 10px;
  border: 1px solid var(--phase5-line);
  border-radius: var(--dashboard-paper-radius);
  background: var(--phase5-surface);
  box-shadow: none;
}

html[data-appearance="minimal"] .right-rail .board-header,
html[data-appearance="simple"] .right-rail .board-header {
  padding: 0 2px 8px;
  margin-bottom: 8px;
  border-bottom-color: var(--phase5-line);
}

html[data-appearance="minimal"] .right-rail :is(.status-caption, .board-header span, .right-rail-widget-header span),
html[data-appearance="simple"] .right-rail :is(.status-caption, .board-header span, .right-rail-widget-header span) {
  color: var(--phase5-muted);
  font-weight: 720;
}

html[data-appearance="minimal"] .right-rail .status-number,
html[data-appearance="simple"] .right-rail .status-number {
  font-weight: 860;
}

/* styles/29-phase5-controls-essential.css */
/* Phase 5 step 3: paper controls for minimal/simple app surfaces. */
html[data-appearance="minimal"] :is(
  .settings-button,
  .add-button,
  .task-due-today-button,
  .calendar-nav button,
  .calendar-clear-button,
  .calendar-feed-actions button,
  .calendar-feed-status button,
  .calendar-detail-actions button,
  .archive-back-button,
  .archive-folder-action,
  .count-day-toggle-form,
  .count-day-actions button:not([data-count-day-delete]),
  .time-tools-action-button:not(.is-danger),
  .time-tools-preset-button,
  .completion-mode-button,
  .focus-task-picker-button,
  .focus-task-picker-action,
  .ongoing-remove-button,
  .favor-person-folder-button,
  .category-picker-button,
  .task-category-trigger,
  .task-color-trigger,
  .task-due-month-button,
  .estimate-actions button,
  .delete-confirm-actions button,
  .app-confirm-actions button,
  .right-rail-pomodoro-modes button,
  .pomodoro-modes button
):not(.settings-menu *),
html[data-appearance="simple"] :is(
  .settings-button,
  .add-button,
  .task-due-today-button,
  .calendar-nav button,
  .calendar-clear-button,
  .calendar-feed-actions button,
  .calendar-feed-status button,
  .calendar-detail-actions button,
  .archive-back-button,
  .archive-folder-action,
  .count-day-toggle-form,
  .count-day-actions button:not([data-count-day-delete]),
  .time-tools-action-button:not(.is-danger),
  .time-tools-preset-button,
  .completion-mode-button,
  .focus-task-picker-button,
  .focus-task-picker-action,
  .ongoing-remove-button,
  .favor-person-folder-button,
  .category-picker-button,
  .task-category-trigger,
  .task-color-trigger,
  .task-due-month-button,
  .estimate-actions button,
  .delete-confirm-actions button,
  .app-confirm-actions button,
  .right-rail-pomodoro-modes button,
  .pomodoro-modes button
):not(.settings-menu *) {
  border: 1px solid var(--paper-control-border);
  border-radius: var(--phase5-control-radius);
  background: var(--paper-control-bg);
  background-image: none;
  color: var(--paper-control-text);
  box-shadow: none;
  text-shadow: none;
}

html[data-appearance="minimal"] :is(
  .settings-button,
  .add-button,
  .task-due-today-button,
  .calendar-nav button,
  .calendar-clear-button,
  .calendar-feed-actions button,
  .calendar-feed-status button,
  .calendar-detail-actions button,
  .archive-back-button,
  .archive-folder-action,
  .count-day-toggle-form,
  .count-day-actions button:not([data-count-day-delete]),
  .time-tools-action-button:not(.is-danger),
  .time-tools-preset-button,
  .completion-mode-button,
  .focus-task-picker-button,
  .focus-task-picker-action,
  .ongoing-remove-button,
  .favor-person-folder-button,
  .category-picker-button,
  .task-category-trigger,
  .task-color-trigger,
  .task-due-month-button,
  .estimate-actions button,
  .delete-confirm-actions button,
  .app-confirm-actions button,
  .right-rail-pomodoro-modes button,
  .pomodoro-modes button
):hover:not(:disabled):not(.settings-menu *),
html[data-appearance="simple"] :is(
  .settings-button,
  .add-button,
  .task-due-today-button,
  .calendar-nav button,
  .calendar-clear-button,
  .calendar-feed-actions button,
  .calendar-feed-status button,
  .calendar-detail-actions button,
  .archive-back-button,
  .archive-folder-action,
  .count-day-toggle-form,
  .count-day-actions button:not([data-count-day-delete]),
  .time-tools-action-button:not(.is-danger),
  .time-tools-preset-button,
  .completion-mode-button,
  .focus-task-picker-button,
  .focus-task-picker-action,
  .ongoing-remove-button,
  .favor-person-folder-button,
  .category-picker-button,
  .task-category-trigger,
  .task-color-trigger,
  .task-due-month-button,
  .estimate-actions button,
  .delete-confirm-actions button,
  .app-confirm-actions button,
  .right-rail-pomodoro-modes button,
  .pomodoro-modes button
):hover:not(:disabled):not(.settings-menu *) {
  border-color: var(--paper-control-border-hover);
  background: var(--paper-control-bg-hover);
  color: var(--phase5-text);
  transform: none;
}

html[data-appearance="minimal"] .task-focus-timer .task-focus-finish:not(.settings-menu *),
html[data-appearance="simple"] .task-focus-timer .task-focus-finish:not(.settings-menu *),
html[data-appearance="minimal"] .task-focus-timer .task-focus-finish:hover:not(:disabled):not(.settings-menu *),
html[data-appearance="simple"] .task-focus-timer .task-focus-finish:hover:not(:disabled):not(.settings-menu *) {
  border: 0;
  background: transparent;
  color: var(--phase5-text);
  box-shadow: none;
  transform: none;
}

html[data-appearance="minimal"] .task-focus-timer .task-focus-mode,
html[data-appearance="simple"] .task-focus-timer .task-focus-mode {
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--task-color, var(--accent)) 42%, var(--phase5-muted) 58%);
}

html[data-appearance="minimal"] .task-focus-toggle,
html[data-appearance="simple"] .task-focus-toggle {
  border: 1px solid color-mix(in srgb, var(--phase5-line) 82%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--task-color, var(--accent)) 58%, var(--phase5-text) 42%);
  box-shadow: none;
}

html[data-appearance="minimal"] .task-focus-toggle:hover,
html[data-appearance="simple"] .task-focus-toggle:hover {
  border-color: color-mix(in srgb, var(--task-color, var(--accent)) 26%, var(--phase5-line) 74%);
  background: color-mix(in srgb, var(--task-color, var(--accent)) 5%, var(--phase5-surface) 95%);
  transform: none;
}

html[data-appearance="minimal"] :is(.add-button, .count-day-add-button, .time-tools-action-button.is-primary, .time-tools-primary-button, .app-confirm-ok):not(.settings-menu *),
html[data-appearance="simple"] :is(.add-button, .count-day-add-button, .time-tools-action-button.is-primary, .time-tools-primary-button, .app-confirm-ok):not(.settings-menu *) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--paper-control-border) 58%);
  background: var(--paper-primary-bg);
  color: var(--paper-primary-text);
}

html[data-appearance="minimal"] :is(.add-button, .count-day-add-button, .time-tools-action-button.is-primary, .time-tools-primary-button, .app-confirm-ok):hover:not(:disabled):not(.settings-menu *),
html[data-appearance="simple"] :is(.add-button, .count-day-add-button, .time-tools-action-button.is-primary, .time-tools-primary-button, .app-confirm-ok):hover:not(:disabled):not(.settings-menu *) {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--paper-control-border) 46%);
  background: var(--paper-primary-bg-hover);
  color: var(--paper-primary-text);
}

html[data-appearance="minimal"] :is(.delete-button, [data-count-day-delete], .time-tools-action-button.is-danger, .app-confirm-dialog[data-tone="danger"] .app-confirm-ok, .delete-confirm-actions button:last-child):not(.settings-menu *),
html[data-appearance="simple"] :is(.delete-button, [data-count-day-delete], .time-tools-action-button.is-danger, .app-confirm-dialog[data-tone="danger"] .app-confirm-ok, .delete-confirm-actions button:last-child):not(.settings-menu *) {
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--paper-control-border) 72%);
  border-radius: var(--phase5-control-radius);
  background: var(--paper-danger-bg);
  color: var(--paper-danger-text);
  box-shadow: none;
}

html[data-appearance="minimal"] :is(.delete-button, [data-count-day-delete], .time-tools-action-button.is-danger, .app-confirm-dialog[data-tone="danger"] .app-confirm-ok, .delete-confirm-actions button:last-child):hover:not(:disabled):not(.settings-menu *),
html[data-appearance="simple"] :is(.delete-button, [data-count-day-delete], .time-tools-action-button.is-danger, .app-confirm-dialog[data-tone="danger"] .app-confirm-ok, .delete-confirm-actions button:last-child):hover:not(:disabled):not(.settings-menu *) {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--paper-control-border) 58%);
  background: var(--paper-danger-bg-hover);
  color: var(--paper-danger-text);
}

html[data-appearance="minimal"] :is(button, [role="button"], input, select, textarea):focus-visible:not(.settings-menu *),
html[data-appearance="simple"] :is(button, [role="button"], input, select, textarea):focus-visible:not(.settings-menu *) {
  outline: 0;
  border-color: var(--paper-control-border-hover);
  box-shadow: var(--paper-focus-ring);
}

html[data-appearance="minimal"] :is(button, input, select, textarea):disabled:not(.settings-menu *),
html[data-appearance="simple"] :is(button, input, select, textarea):disabled:not(.settings-menu *) {
  opacity: 0.5;
  cursor: not-allowed;
}

html[data-appearance="minimal"] :is(
  .task-composer,
  .task-details,
  .calendar-detail-popover,
  .count-day-form,
  .time-tool-panel,
  .time-tools-assist-panel,
  .estimate-popover,
  .focus-popover,
  .app-confirm-dialog
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea),
html[data-appearance="minimal"] :is(.calendar-add-control input, .time-duration-field input):not(.settings-menu *),
html[data-appearance="simple"] :is(
  .task-composer,
  .task-details,
  .calendar-detail-popover,
  .count-day-form,
  .time-tool-panel,
  .time-tools-assist-panel,
  .estimate-popover,
  .focus-popover,
  .app-confirm-dialog
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea),
html[data-appearance="simple"] :is(.calendar-add-control input, .time-duration-field input):not(.settings-menu *) {
  border: 1px solid var(--paper-control-border);
  border-radius: var(--phase5-control-radius);
  background: var(--paper-control-bg);
  color: var(--phase5-text);
  box-shadow: none;
}

html[data-appearance="minimal"] select:not([hidden]):not(.settings-menu *),
html[data-appearance="simple"] select:not([hidden]):not(.settings-menu *) {
  border: 1px solid var(--paper-control-border);
  border-radius: var(--phase5-control-radius);
  background:
    linear-gradient(45deg, transparent 50%, var(--phase5-muted) 50%) calc(100% - 17px) calc(50% - 3px) / 6px 6px no-repeat,
    linear-gradient(135deg, var(--phase5-muted) 50%, transparent 50%) calc(100% - 12px) calc(50% - 3px) / 6px 6px no-repeat,
    var(--paper-control-bg);
  color: var(--phase5-text);
  box-shadow: none;
}

html[data-appearance="minimal"] :is(input, textarea, select):not(.settings-menu *)::placeholder,
html[data-appearance="simple"] :is(input, textarea, select):not(.settings-menu *)::placeholder {
  color: color-mix(in srgb, var(--phase5-muted) 70%, transparent);
}

html[data-appearance="minimal"] :is(
  .calendar-view-switcher,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .time-tools-tabs,
  .count-day-filters,
  .pomodoro-modes,
  .right-rail-pomodoro-modes,
  .count-day-mode-options
):not(.settings-menu *),
html[data-appearance="simple"] :is(
  .calendar-view-switcher,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .time-tools-tabs,
  .count-day-filters,
  .pomodoro-modes,
  .right-rail-pomodoro-modes,
  .count-day-mode-options
):not(.settings-menu *) {
  border: 1px solid var(--paper-control-border);
  border-radius: var(--phase5-control-radius);
  background: var(--paper-segmented-bg);
  box-shadow: none;
}

html[data-appearance="minimal"] :is(
  .calendar-view-switcher,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .time-tools-tabs,
  .count-day-filters,
  .pomodoro-modes,
  .right-rail-pomodoro-modes,
  .count-day-mode-options
) :is(button, .count-day-filter, span):not(.settings-menu *),
html[data-appearance="simple"] :is(
  .calendar-view-switcher,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .time-tools-tabs,
  .count-day-filters,
  .pomodoro-modes,
  .right-rail-pomodoro-modes,
  .count-day-mode-options
) :is(button, .count-day-filter, span):not(.settings-menu *) {
  border: 1px solid transparent;
  border-radius: calc(var(--phase5-control-radius) - 1px);
  background: transparent;
  color: var(--phase5-muted);
  box-shadow: none;
}

html[data-appearance="minimal"] :is(
  .calendar-view-switcher,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .time-tools-tabs,
  .count-day-filters,
  .pomodoro-modes,
  .right-rail-pomodoro-modes,
  .count-day-mode-options
) :is(button:hover, .count-day-filter:hover, span:hover):not(.settings-menu *),
html[data-appearance="simple"] :is(
  .calendar-view-switcher,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .time-tools-tabs,
  .count-day-filters,
  .pomodoro-modes,
  .right-rail-pomodoro-modes,
  .count-day-mode-options
) :is(button:hover, .count-day-filter:hover, span:hover):not(.settings-menu *) {
  background: var(--paper-control-bg-hover);
  color: var(--phase5-text);
}

html[data-appearance="minimal"] :is(
  .calendar-view-switcher,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .time-tools-tabs,
  .count-day-filters,
  .pomodoro-modes,
  .right-rail-pomodoro-modes,
  .count-day-mode-options
) :is(button.is-active, button[aria-pressed="true"], .count-day-filter.is-active, input:checked + span):not(.settings-menu *),
html[data-appearance="simple"] :is(
  .calendar-view-switcher,
  .timeline-range-control,
  .timeline-priority-control,
  .timeline-source-control,
  .time-tools-tabs,
  .count-day-filters,
  .pomodoro-modes,
  .right-rail-pomodoro-modes,
  .count-day-mode-options
) :is(button.is-active, button[aria-pressed="true"], .count-day-filter.is-active, input:checked + span):not(.settings-menu *) {
  border-color: var(--paper-control-border);
  background: var(--paper-segmented-active-bg);
  color: var(--phase5-text);
  box-shadow: var(--paper-segmented-active-shadow);
}

html[data-appearance="minimal"] :is(
  .category-chip,
  .due-chip,
  .step-chip,
  .ongoing-chip,
  .priority-chip,
  .timeline-kind,
  .timeline-item-pill,
  .timeline-item-status,
  .archive-status-badge,
  .archive-subfolder-button,
  .count-day-state-badge,
  .calendar-feed-status,
  .calendar-month-chip
):not(.settings-menu *),
html[data-appearance="simple"] :is(
  .category-chip,
  .due-chip,
  .step-chip,
  .ongoing-chip,
  .priority-chip,
  .timeline-kind,
  .timeline-item-pill,
  .timeline-item-status,
  .archive-status-badge,
  .archive-subfolder-button,
  .count-day-state-badge,
  .calendar-feed-status,
  .calendar-month-chip
):not(.settings-menu *) {
  --paper-chip-color: var(--task-color, var(--category-color, var(--month-chip-color, var(--accent))));
  border: 1px solid color-mix(in srgb, var(--paper-chip-color) 24%, var(--paper-control-border) 76%);
  border-radius: var(--phase5-control-radius);
  background: color-mix(in srgb, var(--paper-chip-color) 6%, var(--phase5-surface) 94%);
  color: color-mix(in srgb, var(--paper-chip-color) 42%, var(--phase5-text) 58%);
  box-shadow: none;
}

html[data-appearance="minimal"] :is(.due-chip.is-urgent, .due-chip.is-overdue, .archive-status-badge.is-deleted):not(.settings-menu *),
html[data-appearance="simple"] :is(.due-chip.is-urgent, .due-chip.is-overdue, .archive-status-badge.is-deleted):not(.settings-menu *) {
  --paper-chip-color: var(--danger);
  color: var(--paper-danger-text);
}

html[data-appearance="minimal"] :is(.due-chip.is-due-today, .step-chip.is-ready, .archive-status-badge.is-completed):not(.settings-menu *),
html[data-appearance="simple"] :is(.due-chip.is-due-today, .step-chip.is-ready, .archive-status-badge.is-completed):not(.settings-menu *) {
  --paper-chip-color: var(--success);
  color: color-mix(in srgb, var(--success) 62%, var(--phase5-text) 38%);
}

html[data-appearance="minimal"] .step-chip.is-waiting:not(.settings-menu *),
html[data-appearance="simple"] .step-chip.is-waiting:not(.settings-menu *) {
  --paper-chip-color: var(--warning);
  color: color-mix(in srgb, var(--warning) 68%, var(--phase5-text) 32%);
}

html[data-appearance="minimal"] :is(
  .app-confirm-dialog,
  .focus-popover,
  .estimate-popover,
  .delete-confirm-popover,
  .calendar-detail-popover,
  .task-due-picker,
  .calendar-add-category-picker,
  .version-menu,
  .drag-mode-indicator,
  .drag-zone-guide,
  .completion-point-tooltip,
  .category-picker-menu,
  .task-suggestion-menu,
  .task-category-menu,
  .task-color-dropdown,
  .focus-task-picker-menu,
  .completion-mode-menu
):not(.settings-menu *):not(.settings-category-dropdown-body),
html[data-appearance="simple"] :is(
  .app-confirm-dialog,
  .focus-popover,
  .estimate-popover,
  .delete-confirm-popover,
  .calendar-detail-popover,
  .task-due-picker,
  .calendar-add-category-picker,
  .version-menu,
  .drag-mode-indicator,
  .drag-zone-guide,
  .completion-point-tooltip,
  .category-picker-menu,
  .task-suggestion-menu,
  .task-category-menu,
  .task-color-dropdown,
  .focus-task-picker-menu,
  .completion-mode-menu
):not(.settings-menu *):not(.settings-category-dropdown-body) {
  border: 1px solid var(--paper-control-border);
  border-radius: var(--phase5-radius);
  background: var(--paper-overlay-surface);
  background-image: none;
  color: var(--phase5-text);
  box-shadow: var(--phase5-overlay-shadow);
  backdrop-filter: none;
}

html[data-appearance="minimal"] :is(
  .category-picker-option,
  .task-suggestion-option,
  .task-category-option,
  .focus-task-picker-option,
  .completion-mode-menu button,
  .calendar-add-category-option,
  .task-due-day
):not(.settings-menu *),
html[data-appearance="simple"] :is(
  .category-picker-option,
  .task-suggestion-option,
  .task-category-option,
  .focus-task-picker-option,
  .completion-mode-menu button,
  .calendar-add-category-option,
  .task-due-day
):not(.settings-menu *) {
  border: 1px solid transparent;
  border-radius: var(--phase5-control-radius);
  background: transparent;
  color: var(--phase5-text);
  box-shadow: none;
}

html[data-appearance="minimal"] :is(
  .category-picker-option,
  .task-suggestion-option,
  .task-category-option,
  .focus-task-picker-option,
  .completion-mode-menu button,
  .calendar-add-category-option,
  .task-due-day
):hover:not(.settings-menu *),
html[data-appearance="minimal"] :is(
  .category-picker-option,
  .task-suggestion-option,
  .task-category-option,
  .focus-task-picker-option,
  .completion-mode-menu button,
  .calendar-add-category-option,
  .task-due-day
):focus-visible:not(.settings-menu *),
html[data-appearance="simple"] :is(
  .category-picker-option,
  .task-suggestion-option,
  .task-category-option,
  .focus-task-picker-option,
  .completion-mode-menu button,
  .calendar-add-category-option,
  .task-due-day
):hover:not(.settings-menu *),
html[data-appearance="simple"] :is(
  .category-picker-option,
  .task-suggestion-option,
  .task-category-option,
  .focus-task-picker-option,
  .completion-mode-menu button,
  .calendar-add-category-option,
  .task-due-day
):focus-visible:not(.settings-menu *) {
  border-color: var(--paper-control-border);
  background: var(--paper-overlay-option-hover);
  color: var(--phase5-text);
  transform: none;
}

html[data-appearance="minimal"] :is(
  .category-picker-option.is-selected,
  .task-suggestion-option.is-selected,
  .task-category-option.is-selected,
  .focus-task-picker-option.is-selected,
  .completion-mode-menu button.is-selected,
  .calendar-add-category-option.is-selected,
  .calendar-add-category-option[aria-selected="true"],
  .task-due-day.is-selected
):not(.settings-menu *),
html[data-appearance="simple"] :is(
  .category-picker-option.is-selected,
  .task-suggestion-option.is-selected,
  .task-category-option.is-selected,
  .focus-task-picker-option.is-selected,
  .completion-mode-menu button.is-selected,
  .calendar-add-category-option.is-selected,
  .calendar-add-category-option[aria-selected="true"],
  .task-due-day.is-selected
):not(.settings-menu *) {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--paper-control-border) 66%);
  background: var(--paper-overlay-option-selected);
  color: var(--phase5-text);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 72%, var(--phase5-text) 28%);
}

/* styles/29-phase5-settings-essential.css */
/* Settings minimal/simple surface guardrails split from the global Phase 5 layer. */

.settings-menu {
  --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);
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.11);
  --blue: #0a84ff;
  --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);
  --text: #111827;
  --text-secondary: #2f3b4c;
  --text-tertiary: #566275;
  --muted: #667085;
  --muted-strong: #475467;
  --line: rgba(17, 24, 39, 0.11);
  --line-soft: rgba(17, 24, 39, 0.06);
  --line-strong: rgba(17, 24, 39, 0.16);
  --text-primary: var(--text);
  --border-subtle: var(--line-soft);
  --border-strong: var(--line-strong);
  --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);
  --shadow-color: rgba(17, 24, 39, 0.12);
  --glow-blue-soft: 0 0 0 3px rgba(10, 132, 255, 0.055), 0 10px 22px rgba(10, 132, 255, 0.08);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
  --radius-panel: 18px;
  --radius-card: 14px;
  --radius-control: 11px;
  --radius-compact: 8px;
  --component-bg: var(--surface-card);
  --component-bg-hover: color-mix(in srgb, var(--surface) 84%, var(--surface-card) 16%);
  --component-border: var(--line-soft);
  --component-shadow: var(--shadow-card);
  --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%);
  --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%);
  --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);
  --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);
  --overlay-border: color-mix(in srgb, var(--blue) 18%, var(--line-soft) 82%);
  --overlay-surface: color-mix(in srgb, var(--surface) 95%, transparent);
  --overlay-surface-strong: color-mix(in srgb, var(--surface-panel-strong) 96%, transparent);
  --overlay-option-hover: color-mix(in srgb, var(--blue) 10%, var(--surface) 90%);
  --overlay-option-selected: color-mix(in srgb, var(--blue) 14%, var(--surface) 86%);
  --overlay-focus-ring: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
  --settings-menu-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);
}

html[data-theme="dark"] .settings-menu {
  --bg: #0e151d;
  --page-bg: linear-gradient(135deg, #0b1118 0%, #101923 100%);
  --surface: #151f2a;
  --surface-soft: #1b2632;
  --surface-glass: rgba(21, 31, 42, 0.9);
  --surface-raised: #1d2936;
  --surface-panel: rgba(22, 32, 43, 0.9);
  --surface-panel-strong: rgba(27, 39, 52, 0.95);
  --surface-panel-muted: rgba(18, 27, 37, 0.94);
  --surface-card: #1f2b38;
  --surface-elevated: #263342;
  --panel-soft: rgba(13, 20, 29, 0.76);
  --button-soft: rgba(255, 255, 255, 0.075);
  --accent: #5aa7ff;
  --accent-soft: rgba(90, 167, 255, 0.14);
  --blue: #0a84ff;
  --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);
  --text: #f3f4f5;
  --text-secondary: #d4dde8;
  --text-tertiary: #afbdcb;
  --muted: #97a6b7;
  --muted-strong: #c2cedb;
  --line: rgba(226, 236, 248, 0.13);
  --line-soft: rgba(226, 236, 248, 0.075);
  --line-strong: rgba(226, 236, 248, 0.2);
  --text-primary: var(--text);
  --border-subtle: var(--line-soft);
  --border-strong: var(--line-strong);
  --shadow-panel: 0 10px 26px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 7px 20px rgba(0, 0, 0, 0.16);
  --shadow-card-strong: 0 12px 28px rgba(0, 0, 0, 0.23);
  --shadow-popover: 0 18px 42px rgba(0, 0, 0, 0.32);
  --shadow-modal: 0 26px 64px rgba(0, 0, 0, 0.4);
  --shadow-color: rgba(0, 0, 0, 0.34);
  --glow-blue-soft: 0 0 0 3px rgba(10, 132, 255, 0.08), 0 12px 26px rgba(10, 132, 255, 0.12);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
  --component-bg: color-mix(in srgb, var(--surface-card) 92%, var(--surface) 8%);
  --component-bg-hover: color-mix(in srgb, var(--surface-elevated) 82%, var(--surface-card) 18%);
  --component-border: var(--line-soft);
  --component-shadow: var(--shadow-card);
  --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%);
  --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) 18%, var(--surface-elevated) 82%);
  --button-ghost-text: color-mix(in srgb, var(--blue) 48%, var(--text) 52%);
  --control-bg: color-mix(in srgb, var(--surface-soft) 76%, var(--surface) 24%);
  --control-bg-hover: color-mix(in srgb, var(--surface-elevated) 72%, var(--surface-card) 28%);
  --control-bg-active: color-mix(in srgb, var(--blue) 14%, var(--surface) 86%);
  --control-border: color-mix(in srgb, var(--line-soft) 86%, transparent);
  --control-border-hover: color-mix(in srgb, var(--blue) 32%, var(--line-soft) 68%);
  --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);
  --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);
  --overlay-border: color-mix(in srgb, var(--blue) 18%, var(--line-soft) 82%);
  --overlay-surface: color-mix(in srgb, var(--surface) 92%, transparent);
  --overlay-surface-strong: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  --overlay-option-hover: color-mix(in srgb, var(--blue) 16%, var(--surface) 84%);
  --overlay-option-selected: color-mix(in srgb, var(--blue) 22%, var(--surface) 78%);
  --overlay-focus-ring: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
  --settings-menu-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 36%, transparent),
    0 18px 48px rgba(0, 0, 0, 0.28),
    0 0 0 100vmax rgba(0, 0, 0, 0.32);
}

.settings-menu {
  color: var(--text);
  border: 1px solid var(--overlay-border);
  background:
    radial-gradient(circle at 14% 0, color-mix(in srgb, var(--blue) 8%, transparent), transparent 38%),
    var(--overlay-surface);
  box-shadow: var(--settings-menu-shadow);
}

.settings-menu-header {
  border-bottom-color: color-mix(in srgb, var(--line-soft) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.settings-menu .settings-group {
  border-color: color-mix(in srgb, var(--line-soft) 86%, transparent);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--surface-soft) 84%, var(--surface) 16%);
  color: var(--text);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 68%, transparent);
}

:root:not([data-theme="dark"]) .settings-menu .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);
}

html[data-theme="dark"] .settings-menu .settings-group {
  background: color-mix(in srgb, var(--surface-soft) 84%, var(--surface) 16%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 28%, transparent);
}

html[data-appearance="simple"] .settings-menu,
html[data-appearance="minimal"] .settings-menu {
  border-radius: var(--radius-panel);
}

html[data-appearance="simple"] .settings-group-description,
html[data-appearance="minimal"] .settings-group-description {
  display: block;
}

@media (min-width: 721px) {
  html[data-appearance="simple"] .settings-menu,
  html[data-appearance="minimal"] .settings-menu {
    gap: 14px;
    padding: 18px;
  }

  html[data-appearance="simple"] .settings-menu .settings-group,
  html[data-appearance="minimal"] .settings-menu .settings-group {
    padding: 14px;
  }
}

:root[data-appearance="minimal"] .settings-menu,
:root[data-appearance="simple"] .settings-menu {
  color: var(--text);
  border: 1px solid var(--overlay-border);
  border-radius: var(--radius-panel);
  background:
    radial-gradient(circle at 14% 0, color-mix(in srgb, var(--blue) 8%, transparent), transparent 38%),
    var(--overlay-surface);
  box-shadow: var(--settings-menu-shadow);
}

:root[data-appearance="minimal"] .settings-menu-header,
:root[data-appearance="simple"] .settings-menu-header {
  border-bottom-color: color-mix(in srgb, var(--line-soft) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

:root[data-appearance="minimal"] .settings-menu .settings-group,
:root[data-appearance="simple"] .settings-menu .settings-group {
  padding: 14px;
  border-color: color-mix(in srgb, var(--line-soft) 86%, transparent);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--surface-soft) 84%, var(--surface) 16%);
  color: var(--text);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 68%, transparent);
}

:root:not([data-theme="dark"])[data-appearance="minimal"] .settings-menu .settings-group,
:root:not([data-theme="dark"])[data-appearance="simple"] .settings-menu .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);
}

:root[data-theme="dark"][data-appearance="minimal"] .settings-menu .settings-group,
:root[data-theme="dark"][data-appearance="simple"] .settings-menu .settings-group {
  background: color-mix(in srgb, var(--surface-soft) 84%, var(--surface) 16%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 28%, transparent);
}

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

@media (min-width: 721px) {
  :root[data-appearance="minimal"] .settings-menu,
  :root[data-appearance="simple"] .settings-menu {
    gap: 14px;
    padding: 18px;
  }
}

.settings-menu,
:root[data-appearance="minimal"] .settings-menu,
:root[data-appearance="simple"] .settings-menu {
  --settings-section-bg: color-mix(in srgb, var(--surface) 64%, var(--surface-soft) 36%);
  --settings-row-bg: color-mix(in srgb, var(--surface) 72%, var(--surface-soft) 28%);
  --settings-row-hover-bg: color-mix(in srgb, var(--blue) 5%, var(--surface) 95%);
  --settings-section-border: color-mix(in srgb, var(--line-soft) 72%, transparent);
  --settings-row-border: color-mix(in srgb, var(--line-soft) 68%, transparent);
  --settings-search-bg: color-mix(in srgb, var(--surface) 82%, var(--surface-soft) 18%);
  --settings-menu-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent),
    0 16px 38px rgba(17, 24, 39, 0.075),
    0 5px 14px rgba(17, 24, 39, 0.045),
    0 0 0 100vmax rgba(15, 23, 42, 0.12);
  border-color: color-mix(in srgb, var(--overlay-border) 68%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--blue) 4%), var(--overlay-surface));
  box-shadow: var(--settings-menu-shadow);
  backdrop-filter: blur(16px) saturate(1.06);
}

html[data-theme="dark"] .settings-menu,
html[data-theme="dark"][data-appearance="minimal"] .settings-menu,
html[data-theme="dark"][data-appearance="simple"] .settings-menu {
  --settings-section-bg: color-mix(in srgb, var(--surface) 70%, var(--surface-soft) 30%);
  --settings-row-bg: color-mix(in srgb, var(--surface) 76%, var(--surface-soft) 24%);
  --settings-row-hover-bg: color-mix(in srgb, var(--blue) 10%, var(--surface) 90%);
  --settings-section-border: color-mix(in srgb, var(--line-soft) 72%, transparent);
  --settings-row-border: color-mix(in srgb, var(--line-soft) 72%, transparent);
  --settings-search-bg: color-mix(in srgb, var(--surface) 74%, var(--surface-soft) 26%);
  --settings-menu-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface-elevated) 26%, transparent),
    0 18px 42px rgba(0, 0, 0, 0.24),
    0 5px 14px rgba(0, 0, 0, 0.12),
    0 0 0 100vmax rgba(0, 0, 0, 0.28);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--blue) 4%), var(--overlay-surface));
}

.settings-menu-header,
:root[data-appearance="minimal"] .settings-menu-header,
:root[data-appearance="simple"] .settings-menu-header {
  border-bottom-color: color-mix(in srgb, var(--line-soft) 64%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.02);
}

.settings-menu .settings-group,
:root[data-appearance="minimal"] .settings-menu .settings-group,
:root[data-appearance="simple"] .settings-menu .settings-group {
  border-color: var(--settings-section-border);
  border-radius: 14px;
  background: var(--settings-section-bg);
  box-shadow: none;
}

:root:not([data-theme="dark"]) .settings-menu .settings-group,
:root:not([data-theme="dark"])[data-appearance="minimal"] .settings-menu .settings-group,
:root:not([data-theme="dark"])[data-appearance="simple"] .settings-menu .settings-group,
:root[data-theme="dark"] .settings-menu .settings-group,
:root[data-theme="dark"][data-appearance="minimal"] .settings-menu .settings-group,
:root[data-theme="dark"][data-appearance="simple"] .settings-menu .settings-group {
  background: var(--settings-section-bg);
  box-shadow: none;
}

.settings-menu :is(.settings-group .mini-field, .toggle-row),
:root[data-appearance="minimal"] .settings-menu :is(.settings-group .mini-field, .toggle-row),
:root[data-appearance="simple"] .settings-menu :is(.settings-group .mini-field, .toggle-row) {
  border-color: var(--settings-row-border);
  border-radius: 11px;
  background: var(--settings-row-bg);
  box-shadow: none;
}

.settings-menu :is(.settings-group .mini-field, .toggle-row):hover,
:root[data-appearance="minimal"] .settings-menu :is(.settings-group .mini-field, .toggle-row):hover,
:root[data-appearance="simple"] .settings-menu :is(.settings-group .mini-field, .toggle-row):hover {
  border-color: color-mix(in srgb, var(--blue) 16%, var(--settings-row-border) 84%);
  background: var(--settings-row-hover-bg);
}

.settings-menu .settings-search-field input,
:root[data-appearance="minimal"] .settings-menu .settings-search-field input,
:root[data-appearance="simple"] .settings-menu .settings-search-field input,
.settings-menu .appearance-segmented,
:root[data-appearance="minimal"] .settings-menu .appearance-segmented,
:root[data-appearance="simple"] .settings-menu .appearance-segmented,
.settings-menu .theme-mode-segmented,
:root[data-appearance="minimal"] .settings-menu .theme-mode-segmented,
:root[data-appearance="simple"] .settings-menu .theme-mode-segmented,
.settings-menu .language-segmented,
:root[data-appearance="minimal"] .settings-menu .language-segmented,
:root[data-appearance="simple"] .settings-menu .language-segmented {
  border-color: var(--settings-row-border);
  background: var(--settings-search-bg);
  box-shadow: none;
}

.settings-menu .settings-category-summary,
:root[data-appearance="minimal"] .settings-menu .settings-category-summary,
:root[data-appearance="simple"] .settings-menu .settings-category-summary {
  border-color: var(--settings-row-border);
  background: var(--settings-row-bg);
  box-shadow: none;
}

.settings-menu .settings-category-summary:hover,
:root[data-appearance="minimal"] .settings-menu .settings-category-summary:hover,
:root[data-appearance="simple"] .settings-menu .settings-category-summary:hover,
.settings-category-dropdown[open] > .settings-category-summary {
  border-color: color-mix(in srgb, var(--blue) 24%, var(--settings-row-border) 76%);
  background: var(--settings-row-hover-bg);
  box-shadow: none;
}

.settings-menu .settings-category-dropdown-body,
:root[data-appearance="minimal"] .settings-menu .settings-category-dropdown-body,
:root[data-appearance="simple"] .settings-menu .settings-category-dropdown-body {
  border-color: var(--settings-section-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--settings-section-bg) 74%, var(--surface) 26%);
  box-shadow: none;
}

.settings-menu .settings-search-empty,
:root[data-appearance="minimal"] .settings-menu .settings-search-empty,
:root[data-appearance="simple"] .settings-menu .settings-search-empty {
  border-color: color-mix(in srgb, var(--line-soft) 78%, transparent);
  background: color-mix(in srgb, var(--settings-section-bg) 72%, transparent);
  box-shadow: none;
}

@media (max-width: 560px) {
  .settings-menu .theme-mode-field,
  :root[data-appearance="minimal"] .settings-menu .theme-mode-field,
  :root[data-appearance="simple"] .settings-menu .theme-mode-field {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .settings-menu .theme-mode-segmented,
  :root[data-appearance="minimal"] .settings-menu .theme-mode-segmented,
  :root[data-appearance="simple"] .settings-menu .theme-mode-segmented {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }

  .settings-menu .theme-mode-segmented button,
  :root[data-appearance="minimal"] .settings-menu .theme-mode-segmented button,
  :root[data-appearance="simple"] .settings-menu .theme-mode-segmented button {
    min-height: 34px;
    white-space: nowrap;
    line-height: 1.1;
  }
}

/* styles/30-mobile-layout.css */
/* Mobile layout for classic and minimal appearances. Simple remains a separate appearance. */

.mobile-bottom-nav, .mobile-calendar-strip, .mobile-recovery-panel { display: none; }

@media (max-width: 768px) {
  html:not([data-appearance="simple"]) {
    --mobile-vh: 100vh;
    --mobile-gutter: 12px;
    --mobile-gap: 10px;
    --mobile-radius: 16px;
    --mobile-compact-radius: 12px;
    --mobile-nav-height: 74px;
    --mobile-line: color-mix(in srgb, var(--line-soft) 86%, transparent);
    --mobile-panel-bg: color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%);
    --mobile-row-bg: color-mix(in srgb, var(--surface) 96%, transparent);
  }

  @supports (height: 100dvh) {
    html:not([data-appearance="simple"]) {
      --mobile-vh: 100dvh;
    }
  }

  html[data-appearance="minimal"] {
    --mobile-line: var(--phase5-line);
    --mobile-panel-bg: var(--phase5-surface);
    --mobile-row-bg: var(--phase5-row);
    --mobile-radius: var(--phase5-radius);
    --mobile-compact-radius: var(--phase5-control-radius);
  }

  html:not([data-appearance="simple"]) body {
    min-height: var(--mobile-vh);
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--page-bg);
  }

  html[data-appearance="minimal"] body {
    background: var(--phase5-page);
  }

  html:not([data-appearance="simple"]) .desktop-shell {
    width: 100%;
    min-height: var(--mobile-vh);
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    border-radius: 0;
    overflow: visible;
    background: var(--page-bg);
    box-shadow: none;
    transform: none;
  }

  html:not([data-appearance="simple"]) .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 86;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    min-height: var(--mobile-nav-height);
    padding: 8px max(10px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-right, 0px));
    border-top: 1px solid var(--mobile-line);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 -14px 34px color-mix(in srgb, var(--shadow) 13%, transparent);
    backdrop-filter: blur(22px) saturate(1.14);
  }

  html[data-appearance="minimal"] .mobile-bottom-nav {
    background: color-mix(in srgb, var(--phase5-surface) 90%, transparent);
  }

  html:not([data-appearance="simple"]) .mobile-nav-button {
    position: relative;
    min-width: 0;
    min-height: 52px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    border: 0;
    border-radius: 14px;
    padding: 6px 2px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 820;
    letter-spacing: 0;
  }

  html:not([data-appearance="simple"]) .mobile-nav-button.is-active {
    background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
    color: color-mix(in srgb, var(--blue) 76%, var(--text) 24%);
  }

  html[data-appearance="minimal"] .mobile-nav-button.is-active {
    background: color-mix(in srgb, var(--phase5-accent) 13%, var(--phase5-surface) 87%);
    color: color-mix(in srgb, var(--phase5-accent) 74%, var(--phase5-text) 26%);
  }

  html:not([data-appearance="simple"]) .mobile-nav-icon {
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 8px;
    opacity: 0.88;
  }

  html:not([data-appearance="simple"]) [data-mobile-tab="tasks"] .mobile-nav-icon {
    border-radius: 6px;
    box-shadow: inset 0 -6px 0 color-mix(in srgb, currentColor 22%, transparent);
  }

  html:not([data-appearance="simple"]) [data-mobile-tab="focus"] .mobile-nav-icon {
    border-radius: 999px;
    box-shadow: inset 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
  }

  html:not([data-appearance="simple"]) [data-mobile-tab="calendar"] .mobile-nav-icon {
    border-radius: 6px;
    box-shadow: inset 0 6px 0 color-mix(in srgb, currentColor 20%, transparent);
  }

  html[data-appearance="minimal"] .desktop-shell {
    background: var(--phase5-page);
  }

  html:not([data-appearance="simple"]) .sidebar,
  html:not([data-appearance="simple"]) .workspace {
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  html:not([data-appearance="simple"]) .sidebar {
    position: sticky;
    top: 0;
    z-index: 72;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--mobile-gap);
    padding: calc(var(--mobile-gutter) + env(safe-area-inset-top, 0px)) var(--mobile-gutter) var(--mobile-gutter);
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--mobile-line);
    background: var(--mobile-panel-bg);
  }

  html:not([data-appearance="simple"]) .brand {
    min-width: 0;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 0;
  }

  html:not([data-appearance="simple"]) .brand-logo {
    width: min(252px, 68vw);
    max-height: 92px;
  }

  html:not([data-appearance="simple"]) .brand p {
    font-size: 11px;
    font-weight: 780;
  }

  html:not([data-appearance="simple"]) .clock-panel {
    display: none;
  }

  html:not([data-appearance="simple"]) .category-section,
  html:not([data-appearance="simple"]) .view-section {
    display: none;
  }

  html:not([data-appearance="simple"]) .sidebar-section {
    min-width: 0;
    gap: 6px;
    grid-column: 1 / -1;
  }

  html:not([data-appearance="simple"]) .sidebar-section-header {
    padding: 0 2px;
  }

  html:not([data-appearance="simple"]) .category-list,
  html:not([data-appearance="simple"]) .view-list {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    min-width: 0;
    max-height: 104px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  html:not([data-appearance="simple"]) .category-card,
  html:not([data-appearance="simple"]) .view-card {
    flex: 0 1 auto;
    width: max-content;
    min-width: 0;
    max-width: min(48vw, 178px);
    min-height: 36px;
    padding: 6px 9px;
    border-radius: var(--mobile-compact-radius);
  }

  html:not([data-appearance="simple"]) .category-card {
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
  }

  html:not([data-appearance="simple"]) .category-dot {
    width: 12px;
    height: 12px;
  }

  html:not([data-appearance="simple"]) .category-card-text {
    min-width: 0;
    display: contents;
  }

  html:not([data-appearance="simple"]) .category-card-text strong,
  html:not([data-appearance="simple"]) .view-card span {
    min-width: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.16;
  }

  html:not([data-appearance="simple"]) .category-card-text small,
  html:not([data-appearance="simple"]) .view-card small {
    white-space: nowrap;
  }

  html:not([data-appearance="simple"]) .view-card {
    flex: 1 1 calc((100% - 12px) / 3);
    width: auto;
    max-width: none;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
  }

  html:not([data-appearance="simple"]) .view-card::before {
    display: block;
    width: 16px;
    height: 16px;
  }

  html:not([data-appearance="simple"]) .view-card span {
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html:not([data-appearance="simple"]) .sidebar-actions {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html:not([data-appearance="simple"]) .settings-button {
    min-width: 46px;
    min-height: 42px;
    padding: 0 11px;
    border-radius: var(--mobile-compact-radius);
    white-space: nowrap;
  }

  html:not([data-appearance="simple"]) .workspace {
    display: grid;
    gap: var(--mobile-gap);
    align-content: start;
    padding: var(--mobile-gutter) var(--mobile-gutter) calc(var(--mobile-gutter) + var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
    overflow: visible;
    border-left: 0;
    background: var(--page-bg);
  }

  html[data-appearance="minimal"] .workspace {
    background: var(--phase5-page);
  }

  html:not([data-appearance="simple"]) .workspace-hero {
    min-height: 96px;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
    border-radius: var(--mobile-radius);
  }

  html:not([data-appearance="simple"])[data-mobile-tab="tasks"] .workspace-hero,
  html:not([data-appearance="simple"])[data-mobile-tab="inbox"] .workspace-hero,
  html:not([data-appearance="simple"])[data-mobile-tab="calendar"] .workspace-hero,
  html:not([data-appearance="simple"])[data-mobile-tab="focus"] .task-composer,
  html:not([data-appearance="simple"])[data-mobile-tab="inbox"] .task-composer,
  html:not([data-appearance="simple"])[data-mobile-tab="calendar"] .task-composer,
  html:not([data-appearance="simple"])[data-mobile-tab="focus"] .board-grid {
    display: none;
  }

  html:not([data-appearance="simple"])[data-mobile-tab="focus"] .workspace {
    min-height: calc(var(--mobile-vh) - 112px);
    align-content: start;
  }

  html:not([data-appearance="simple"])[data-mobile-tab="focus"] .workspace-hero {
    min-height: auto;
    max-height: none;
  }

  html:not([data-appearance="simple"]) .workspace-hero.is-empty {
    min-height: 78px;
  }

  html:not([data-appearance="simple"]) .ongoing-panel,
  html:not([data-appearance="simple"]) .ongoing-list {
    min-width: 0;
  }

  html:not([data-appearance="simple"]) .ongoing-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  html:not([data-appearance="simple"]) .ongoing-header {
    min-height: 0;
  }

  html:not([data-appearance="simple"]) .ongoing-list {
    grid-column: 1;
    grid-row: auto;
    min-height: 42px;
  }

  html:not([data-appearance="simple"]) .focus-recommendation {
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
  }

  html:not([data-appearance="simple"]) .focus-recommendation-card,
  html:not([data-appearance="simple"]) .focus-recommendation-empty {
    min-height: 0;
  }

  html:not([data-appearance="simple"]) .task-focus-launcher {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  html:not([data-appearance="simple"]) .focus-launch-countdown {
    grid-template-columns: minmax(0, 1fr) 34px;
    justify-content: start;
    gap: 8px;
    min-height: 0;
  }

  html:not([data-appearance="simple"]) .focus-launch-intro {
    grid-column: 1 / -1;
  }

  html:not([data-appearance="simple"]) .focus-launch-clock {
    justify-self: start;
    gap: 5px;
  }

  html:not([data-appearance="simple"]) .focus-launch-clock-input {
    width: 3ch;
    min-width: 46px;
    font-size: 20px;
  }

  html:not([data-appearance="simple"]) .focus-launch-clock-input-hours {
    width: 5ch;
    min-width: 64px;
  }

  html:not([data-appearance="simple"]) .focus-launch-play {
    justify-self: end;
  }

  html:not([data-appearance="simple"]) .focus-launch-countup {
    min-height: 46px;
  }

  html:not([data-appearance="simple"]) .task-focus-timer {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  html:not([data-appearance="simple"]) .task-focus-timer-main {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "mode action"
      "meta action"
      "track track";
    min-height: 88px;
    padding: 10px;
  }

  html:not([data-appearance="simple"]) .task-focus-actions {
    flex-wrap: wrap;
    gap: 4px;
  }

  html:not([data-appearance="simple"]) .task-focus-secondary {
    min-height: 28px;
    padding: 0 7px;
    font-size: 10px;
  }

  html:not([data-appearance="simple"]) .task-focus-timer-aside {
    min-height: 54px;
    padding: 10px;
  }

  html:not([data-appearance="simple"]) .task-focus-timer.is-mode-elapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  html:not([data-appearance="simple"]) .task-focus-timer.is-mode-elapsed .task-focus-timer-main {
    grid-template-areas:
      "mode action"
      "meta action";
  }

  html:not([data-appearance="simple"]) .task-focus-timer.is-mode-elapsed .task-focus-remaining {
    font-size: 28px;
  }

  html:not([data-appearance="simple"]) .focus-progress {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  html:not([data-appearance="simple"]) .task-composer {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title title"
      "category add";
    gap: 7px;
    padding: 7px;
    border-radius: var(--mobile-radius);
    position: sticky;
    top: calc(118px + env(safe-area-inset-top, 0px));
    z-index: 24;
  }

  html:not([data-appearance="simple"]) .task-title-field {
    grid-area: title;
  }

  html:not([data-appearance="simple"]) .category-field {
    grid-area: category;
    min-width: 0;
  }

  html:not([data-appearance="simple"]) .add-button {
    grid-area: add;
    min-width: 86px;
    min-height: 38px;
    padding-inline: 12px;
    white-space: nowrap;
  }

  html:not([data-appearance="simple"]) .category-picker-button,
  html:not([data-appearance="simple"]) .task-title-field input {
    min-height: 38px;
  }
  html:not([data-appearance="simple"]) .workspace :is(input, textarea, select) { scroll-margin-block: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 18px); }

  html:not([data-appearance="simple"]) .board-grid,
  html:not([data-appearance="simple"]) .main-column,
  html:not([data-appearance="simple"]) .right-rail {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mobile-gap);
  }

  html:not([data-appearance="simple"]) .task-board {
    border-radius: var(--mobile-radius);
  }

  html:not([data-appearance="simple"]) .task-board-main,
  html:not([data-appearance="simple"]) .right-rail :is(.task-board, .right-rail-widget-card) {
    padding: 12px;
  }

  html:not([data-appearance="simple"]) .task-board-main .board-header {
    padding-bottom: 8px;
    margin-bottom: 8px;
  }

  html:not([data-appearance="simple"]) .task-board-main .task-list {
    gap: 8px;
    padding-right: 0;
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 48px);
  }

  html:not([data-appearance="simple"]) .task-board-main .task-list > .task-item {
    width: 100%;
    margin-left: 0;
    gap: 8px;
    padding: 10px 9px;
    border-radius: var(--mobile-radius);
  }

  html:not([data-appearance="simple"]) .task-board-main .task-list > .task-item.is-chain-child {
    margin-left: 0;
  }

  html:not([data-appearance="simple"]) .task-board-main .task-main,
  html:not([data-appearance="simple"]) .task-board-main .task-row {
    min-width: 0;
  }

  html:not([data-appearance="simple"]) .task-board-main .task-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }

  html:not([data-appearance="simple"]) .task-board-main .task-title-edit,
  html:not([data-appearance="simple"]) .task-board-main .task-title-display {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  html:not([data-appearance="simple"]) .task-board-main .task-title-edit {
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: 34px;
    color: transparent;
    caret-color: transparent;
    opacity: 0;
  }

  html:not([data-appearance="simple"]) .task-board-main .task-title-display {
    z-index: 1;
    display: block;
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    min-height: 34px;
    color: var(--text);
    font-size: calc(var(--font-size) * 1.02);
    font-weight: 560;
    line-height: 1.26;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
    pointer-events: none;
  }

  html[data-appearance="minimal"] .task-board-main .task-title-display {
    color: var(--phase5-text);
    font-weight: 720;
  }

  html:not([data-appearance="simple"]) .task-board-main .task-row:focus-within .task-title-display {
    display: none;
  }

  html:not([data-appearance="simple"]) .task-board-main .task-row:focus-within .task-title-edit {
    color: var(--text);
    caret-color: auto;
    opacity: 1;
  }

  html[data-appearance="minimal"] .task-board-main .task-row:focus-within .task-title-edit {
    color: var(--phase5-text);
  }

  html:not([data-appearance="simple"]) .task-board-main .task-actions {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-self: end;
    width: auto;
    margin-left: 0;
  }

  html:not([data-appearance="simple"]) .task-board-main .detail-button,
  html:not([data-appearance="simple"]) .task-board-main .detail-cancel-button,
  html:not([data-appearance="simple"]) .task-board-main .delete-button {
    flex: 0 0 auto;
    min-height: 34px;
    padding-inline: 10px;
    white-space: nowrap;
  }

  html:not([data-appearance="simple"]) .task-board-main .detail-button {
    min-width: 58px;
  }

  html:not([data-appearance="simple"]) .task-board-main .detail-cancel-button {
    min-width: 58px;
  }

  html:not([data-appearance="simple"]) .task-board-main .delete-button {
    min-width: 38px;
  }

  html:not([data-appearance="simple"]) .task-meta {
    flex-wrap: wrap;
    gap: 6px;
  }

  html:not([data-appearance="simple"]) .task-note {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  html:not([data-appearance="simple"]) .task-details,
  html:not([data-appearance="simple"]) .task-details.has-estimate {
    grid-template-columns: minmax(0, 1fr);
  }
  html:not([data-appearance="simple"]) .task-details:focus-within { max-height: none !important; overflow: visible !important; }
  html:not([data-appearance="simple"]) .right-rail {
    display: grid;
    max-height: none;
    overflow: visible;
  }

  html:not([data-appearance="simple"]) .right-rail .unfinished-board,
  html:not([data-appearance="simple"]) .right-rail .jar-board,
  html:not([data-appearance="simple"]) .right-rail .right-rail-widgets {
    display: none;
  }

  html:not([data-appearance="simple"]) .right-rail .status-number {
    font-size: 34px;
  }

  html:not([data-appearance="simple"]) .mobile-recovery-panel { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--mobile-line); }
  html:not([data-appearance="simple"]) .mobile-recovery-header { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 820; }
  html:not([data-appearance="simple"]) .mobile-recovery-list { display: grid; gap: 8px; }
  html:not([data-appearance="simple"]) .mobile-recovery-list .task-item { width: 100%; gap: 8px; padding: 10px 9px; border-radius: var(--mobile-radius); }
  html:not([data-appearance="simple"]) .mobile-recovery-list .task-actions { justify-self: end; }

  html:not([data-appearance="simple"]) .empty-state {
    min-height: 96px;
    padding: 18px;
  }

  html:not([data-appearance="simple"]) .delete-confirm-popover,
  html:not([data-appearance="simple"]) .estimate-popover,
  html:not([data-appearance="simple"]) .focus-popover {
    left: 12px !important;
    right: 12px;
    top: auto !important;
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
    width: auto !important;
    max-width: none;
    border-radius: 18px;
  }

  html:not([data-appearance="simple"]) .task-due-picker {
    left: 12px !important;
    right: 12px;
    top: auto !important;
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
    width: auto !important;
    max-height: min(72vh, 520px);
  }

  html:not([data-appearance="simple"]) .settings-menu {
    width: calc(100vw - 16px);
    height: calc(var(--mobile-vh) - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(var(--mobile-vh) - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  html:not([data-appearance="simple"]) .desktop-shell.is-calendar-view .workspace,
  html:not([data-appearance="simple"]) .desktop-shell.is-calendar-view .board-grid,
  html:not([data-appearance="simple"]) .desktop-shell.is-calendar-view .main-column,
  html:not([data-appearance="simple"]) .desktop-shell.is-calendar-view .task-board,
  html:not([data-appearance="simple"]) .task-board-main.is-calendar-board,
  html:not([data-appearance="simple"]) .task-board-main.is-calendar-board .task-list,
  html:not([data-appearance="simple"]) .calendar-shell-day {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    overflow-x: hidden;
  }

  html:not([data-appearance="simple"]) .desktop-shell.is-calendar-view .workspace {
    padding: var(--mobile-gutter) var(--mobile-gutter) calc(var(--mobile-gutter) + var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
    background: var(--calendar-paper-bg, var(--page-bg));
  }

  html:not([data-appearance="simple"]) .desktop-shell.is-calendar-view .task-board {
    border-radius: var(--mobile-radius);
    overflow: hidden;
  }

  html:not([data-appearance="simple"]) .calendar-shell-day {
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0;
    padding: 0;
  }

  html:not([data-appearance="simple"]) .calendar-shell-day .calendar-toolbar {
    min-height: 68px;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px 12px 8px;
  }

  html:not([data-appearance="simple"]) .calendar-shell-day .calendar-title {
    min-width: 0;
  }

  html:not([data-appearance="simple"]) .calendar-shell-day .calendar-title h4 {
    font-size: 24px;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  html:not([data-appearance="simple"]) .calendar-shell-day .calendar-toolbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  html:not([data-appearance="simple"]) .calendar-shell-day .calendar-view-switcher,
  html:not([data-appearance="simple"]) .calendar-shell-day .calendar-feed-status,
  html:not([data-appearance="simple"]) .calendar-shell-day .timeline-calendar-day-controls {
    display: none;
  }

  html:not([data-appearance="simple"]) .calendar-shell-day .calendar-nav {
    width: 100%;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
    padding: 0;
    background: transparent;
  }

  html:not([data-appearance="simple"]) .calendar-shell-day .calendar-nav button,
  html:not([data-appearance="simple"]) .calendar-shell-day .calendar-nav button[data-calendar-period="today"] {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    border-radius: 999px;
  }

  html:not([data-appearance="simple"]) .mobile-calendar-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    padding: 6px 8px 10px;
    border-bottom: 1px solid var(--mobile-line);
    background: var(--calendar-paper-bg, var(--surface));
  }

  html:not([data-appearance="simple"]) .mobile-calendar-date {
    min-width: 0;
    min-height: 54px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 5px 2px;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    font-weight: 780;
  }

  html:not([data-appearance="simple"]) .mobile-calendar-date strong {
    color: var(--text);
    font-size: 16px;
    line-height: 1;
  }

  html:not([data-appearance="simple"]) .mobile-calendar-date.is-today strong {
    color: color-mix(in srgb, var(--blue) 76%, var(--text) 24%);
  }

  html:not([data-appearance="simple"]) .mobile-calendar-date.is-selected {
    border-color: color-mix(in srgb, var(--blue) 28%, transparent);
    background: color-mix(in srgb, var(--blue) 11%, var(--surface) 89%);
    color: color-mix(in srgb, var(--blue) 70%, var(--text) 30%);
  }

  html:not([data-appearance="simple"]) .mobile-calendar-date-marker {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: transparent;
  }

  html:not([data-appearance="simple"]) .mobile-calendar-date.has-calendar-items .mobile-calendar-date-marker {
    background: currentColor;
  }

  html:not([data-appearance="simple"]) .calendar-shell-day .timeline-axis-shell-calendar-day,
  html:not([data-appearance="simple"]) .calendar-shell-day .calendar-day-timeline {
    width: 100%;
    max-width: 100%;
    min-height: 360px;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 10px 18px 0;
  }

  html:not([data-appearance="simple"]) .calendar-shell-day .timeline-axis-list-calendar-day {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  html:not([data-appearance="simple"]) .calendar-shell-day .timeline-day {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    min-height: 0;
  }

  html:not([data-appearance="simple"]) .calendar-shell-day .timeline-date-rail,
  html:not([data-appearance="simple"]) .calendar-shell-day .timeline-rail {
    display: none;
  }

  html:not([data-appearance="simple"]) .calendar-shell-day .timeline-day-content,
  html:not([data-appearance="simple"]) .calendar-shell-day .timeline-node-list,
  html:not([data-appearance="simple"]) .calendar-shell-day .timeline-node-wrap {
    min-width: 0;
    width: 100%;
  }

  html:not([data-appearance="simple"]) .calendar-shell-day .timeline-node-card,
  html:not([data-appearance="simple"]) .calendar-day-timeline-list > * {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  html:not([data-appearance="simple"]) .task-composer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "category"
      "add";
  }

  html:not([data-appearance="simple"]) .add-button {
    width: 100%;
  }

  html:not([data-appearance="simple"]) .task-board-main .task-actions {
    justify-self: start;
  }
}

/* styles/30-mobile-navigation.css */
/* Mobile bottom-navigation overflow. Keep feature-scoped after the global mobile layout. */

@media (max-width: 768px) {
  html:not([data-appearance="simple"]) .mobile-nav-more {
    position: relative;
    min-width: 0;
  }

  html:not([data-appearance="simple"]) .mobile-nav-more > summary {
    width: 100%;
    list-style: none;
    cursor: pointer;
  }

  html:not([data-appearance="simple"]) .mobile-nav-more > summary::-webkit-details-marker {
    display: none;
  }

  html:not([data-appearance="simple"]) .mobile-nav-more .mobile-nav-icon {
    width: 4px;
    height: 4px;
    border: 0;
    border-radius: 50%;
    background: currentColor;
    box-shadow: -7px 0 0 currentColor, 7px 0 0 currentColor;
  }

  html:not([data-appearance="simple"]) .mobile-nav-more-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    display: grid;
    gap: 5px;
    width: min(248px, calc(100vw - 24px));
    max-height: min(320px, calc(var(--mobile-vh) - var(--mobile-nav-height) - 40px));
    padding: 7px;
    overflow-y: auto;
    border: 1px solid var(--mobile-line);
    border-radius: var(--mobile-radius);
    background: var(--surface);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--shadow) 22%, transparent);
  }

  html[data-appearance="minimal"] .mobile-nav-more-menu {
    background: var(--phase5-surface);
  }

  html:not([data-appearance="simple"]) .mobile-nav-more-menu button {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: var(--mobile-compact-radius);
    padding: 9px 11px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 760;
    text-align: left;
  }

  html:not([data-appearance="simple"]) .mobile-nav-more-menu button:hover,
  html:not([data-appearance="simple"]) .mobile-nav-more-menu button:focus-visible {
    background: color-mix(in srgb, var(--blue) 11%, var(--surface) 89%);
    color: color-mix(in srgb, var(--blue) 76%, var(--text) 24%);
  }

  html:not([data-appearance="simple"]) .mobile-nav-legacy-status {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 6px 11px;
    border-top: 1px solid var(--mobile-line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 780;
  }
}

/* styles/31-minimal-calendar-clarity.css */
/* Minimal Calendar clarity layer: quiet paper rhythm without changing calendar behavior. */
html[data-appearance="minimal"] .desktop-shell.is-calendar-view {
  --minimal-calendar-page: var(--phase5-page);
  --minimal-calendar-sheet: var(--phase5-surface);
  --minimal-calendar-line: color-mix(in srgb, var(--phase5-line) 46%, transparent);
  --minimal-calendar-line-strong: color-mix(in srgb, var(--phase5-line-strong) 58%, transparent);
  --minimal-calendar-month-line: color-mix(in srgb, var(--phase5-line) 28%, transparent);
  --minimal-calendar-month-line-strong: color-mix(in srgb, var(--phase5-line-strong) 38%, transparent);
  --minimal-calendar-ink: var(--phase5-text);
  --minimal-calendar-muted: color-mix(in srgb, var(--phase5-muted) 72%, transparent);
  --minimal-calendar-muted-strong: color-mix(in srgb, var(--phase5-muted) 82%, var(--phase5-text) 18%);
  --minimal-calendar-accent: color-mix(in srgb, var(--accent) 74%, var(--phase5-text) 26%);
  --minimal-calendar-today: color-mix(in srgb, var(--accent) 66%, var(--phase5-text) 34%);
  --minimal-calendar-row-height: clamp(42px, calc(var(--font-size) + var(--font-size) + 12px), 62px);
  --calendar-page-bg: var(--minimal-calendar-page);
}

html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-calendar-view {
  --minimal-calendar-line: rgba(244, 239, 229, 0.048);
  --minimal-calendar-line-strong: rgba(244, 239, 229, 0.16);
  --minimal-calendar-month-line: rgba(244, 239, 229, 0.035);
  --minimal-calendar-month-line-strong: rgba(244, 239, 229, 0.105);
  --minimal-calendar-muted: rgba(244, 239, 229, 0.46);
  --minimal-calendar-muted-strong: rgba(244, 239, 229, 0.64);
  --minimal-calendar-accent: color-mix(in srgb, var(--accent) 62%, #f4f1ea 38%);
  --minimal-calendar-today: color-mix(in srgb, var(--accent) 58%, #f4f1ea 42%);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .task-board-main.is-calendar-board {
  --calendar-row-height: var(--minimal-calendar-row-height);
  --calendar-paper-bg: var(--minimal-calendar-page);
  --calendar-paper-text: var(--minimal-calendar-ink);
  --calendar-paper-muted: var(--minimal-calendar-muted);
  --calendar-paper-line: var(--minimal-calendar-line);
  --calendar-paper-rule: var(--minimal-calendar-line-strong);
  --calendar-paper-accent: var(--minimal-calendar-accent);
  --calendar-paper-control-bg: transparent;
  --calendar-paper-control-text: var(--minimal-calendar-muted);
  --calendar-paper-control-strong: var(--minimal-calendar-ink);
  --calendar-grid-line: var(--minimal-calendar-line);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view :is(.workspace, .task-board-main.is-calendar-board, .calendar-shell) {
  background: var(--minimal-calendar-page);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-toolbar {
  height: var(--calendar-toolbar-height); min-height: var(--calendar-toolbar-height);
  padding: 14px 10px;
  align-items: center;
  border-bottom: 0;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-title h4 {
  color: var(--minimal-calendar-ink);
  font-size: clamp(31px, 2.35vw, 40px);
  font-weight: 780;
  line-height: 1;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-toolbar-actions {
  gap: 7px;
  opacity: 0.88;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-view-switcher {
  gap: 2px;
  padding: 2px;
  border-color: color-mix(in srgb, var(--minimal-calendar-line-strong) 52%, transparent);
  background: color-mix(in srgb, var(--minimal-calendar-sheet) 44%, transparent);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-view-switcher button {
  min-width: 34px;
  min-height: 28px;
  border-radius: 4px;
  padding: 0 8px;
  background: transparent;
  color: var(--minimal-calendar-muted);
  font-size: 11px;
  font-weight: 680;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-view-switcher button:hover {
  color: var(--minimal-calendar-ink);
  background: color-mix(in srgb, var(--minimal-calendar-sheet) 76%, transparent);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-view-switcher button.is-active {
  border-color: color-mix(in srgb, var(--minimal-calendar-line-strong) 64%, transparent);
  background: color-mix(in srgb, var(--minimal-calendar-sheet) 92%, transparent);
  color: var(--minimal-calendar-ink);
  box-shadow: none;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-feed-status {
  min-height: 30px;
  padding: 0 4px 0 10px;
  border-color: color-mix(in srgb, var(--minimal-calendar-line-strong) 42%, transparent);
  background: transparent;
  color: var(--minimal-calendar-muted);
  font-size: 11px;
  font-weight: 650;
  opacity: 0.72;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-feed-status:hover,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-feed-status:focus-within {
  opacity: 1;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-feed-status button {
  min-height: 24px;
  border-color: color-mix(in srgb, var(--minimal-calendar-line-strong) 48%, transparent);
  border-radius: 4px;
  background: transparent;
  color: var(--minimal-calendar-muted-strong);
  font-size: 11px;
  font-weight: 700;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-nav {
  gap: 5px;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-nav button {
  min-width: 32px;
  min-height: 32px;
  border-color: color-mix(in srgb, var(--minimal-calendar-line-strong) 48%, transparent);
  border-radius: 4px;
  background: transparent;
  color: var(--minimal-calendar-muted-strong);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-nav button:hover,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-nav button[data-calendar-period="today"]:hover {
  border-color: var(--minimal-calendar-line-strong);
  background: color-mix(in srgb, var(--minimal-calendar-sheet) 70%, transparent);
  color: var(--minimal-calendar-ink);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-nav button[data-calendar-period="today"] {
  min-width: auto;
  min-height: 32px;
  border-radius: 4px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--minimal-calendar-sheet) 66%, transparent);
  color: var(--minimal-calendar-ink);
  font-size: 11px;
  font-weight: 720;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-nav button[data-calendar-period="prev"]::before,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-nav button[data-calendar-period="next"]::before {
  width: 8px;
  height: 8px;
  border-width: 1.5px;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-week {
  padding: 0 12px;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-week-grid {
  grid-template-columns: repeat(7, minmax(var(--calendar-week-column-min), 1fr));
  gap: var(--calendar-week-gap);
  min-width: 100%;
  padding-bottom: 12px;
  background: var(--minimal-calendar-page);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-day {
  min-width: var(--calendar-week-column-min);
  background: transparent;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-day.is-today {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--minimal-calendar-accent) 4%, transparent),
      transparent 54%
    );
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-day-header {
  min-height: var(--calendar-day-header-height);
  padding: 0 0 9px;
  border-bottom: 1px solid var(--minimal-calendar-line-strong);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-day-header strong {
  color: var(--minimal-calendar-ink);
  font-size: var(--calendar-day-number-font);
  font-weight: 760;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-day-header span {
  color: var(--minimal-calendar-muted);
  font-size: var(--calendar-day-label-font);
  font-weight: 520;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-day.is-today .calendar-day-header {
  border-bottom-color: color-mix(in srgb, var(--minimal-calendar-accent) 72%, var(--minimal-calendar-line-strong) 28%);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-day.is-today .calendar-day-header strong,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-day.is-today .calendar-day-header span {
  color: var(--minimal-calendar-accent);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-day-list {
  padding-bottom: 18px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--calendar-row-height) - 1px),
      var(--minimal-calendar-line) calc(var(--calendar-row-height) - 1px),
      var(--minimal-calendar-line) var(--calendar-row-height)
    );
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-task-card {
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 5px;
  padding: 0 3px 0 0;
  border-radius: 3px;
  background: transparent;
  color: var(--minimal-calendar-ink);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-task-card:hover,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-task-card:focus-within {
  background: color-mix(in srgb, var(--task-color, var(--minimal-calendar-accent)) 4%, transparent);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-week .calendar-task-card.is-calendar-selected,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-week .calendar-task-card.is-calendar-selected:hover,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-week .calendar-task-card.is-calendar-selected:focus-within {
  background: color-mix(in srgb, var(--task-color, var(--minimal-calendar-accent)) 8%, var(--minimal-calendar-sheet) 92%);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--task-color, var(--minimal-calendar-accent)) 68%, var(--minimal-calendar-ink) 32%),
    0 0 0 1px color-mix(in srgb, var(--task-color, var(--minimal-calendar-accent)) 12%, transparent);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-task-card > strong {
  color: color-mix(in srgb, var(--minimal-calendar-ink) 86%, var(--minimal-calendar-muted) 14%);
  font-size: var(--calendar-card-title-font);
  font-weight: 500;
  line-height: 1.22;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-task-card.is-done > strong,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-task-card.is-completion-record > strong {
  color: var(--minimal-calendar-muted-strong);
  text-decoration-color: color-mix(in srgb, var(--minimal-calendar-muted) 72%, transparent);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-check-button {
  width: var(--calendar-check-size);
  height: var(--calendar-check-size);
  border-color: color-mix(in srgb, var(--task-color, var(--minimal-calendar-accent)) 54%, var(--minimal-calendar-muted) 46%);
  background: var(--minimal-calendar-page);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-event-card {
  min-height: calc(var(--calendar-row-height) - 6px);
  align-self: center;
  padding: 5px 7px 5px 8px;
  border: 0;
  border-left: 2px solid color-mix(in srgb, var(--event-color, var(--minimal-calendar-accent)) 60%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--event-color, var(--minimal-calendar-accent)) 10%, var(--minimal-calendar-sheet) 90%);
  color: color-mix(in srgb, var(--event-color, var(--minimal-calendar-accent)) 38%, var(--minimal-calendar-ink) 62%);
}

html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-event-card {
  background: color-mix(in srgb, var(--event-color, var(--minimal-calendar-accent)) 16%, var(--minimal-calendar-page) 84%);
  color: color-mix(in srgb, var(--event-color, var(--minimal-calendar-accent)) 50%, var(--minimal-calendar-ink) 50%);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-event-card > strong {
  font-size: var(--calendar-event-title-font);
  font-weight: 640;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-event-time,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-event-meta {
  color: color-mix(in srgb, var(--event-color, var(--minimal-calendar-accent)) 48%, var(--minimal-calendar-muted) 52%);
  font-size: var(--calendar-meta-font);
  font-weight: 600;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-add-control {
  grid-template-columns: minmax(0, 1fr) var(--calendar-add-button-size);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-add-control input {
  opacity: 0;
  border-color: transparent;
  background: transparent;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-add-control button {
  width: var(--calendar-add-button-size);
  min-height: var(--calendar-add-button-size);
  border-color: transparent;
  background: transparent;
  color: var(--minimal-calendar-muted);
  opacity: 0.16;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-day:hover .calendar-add-control input,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-add-control:focus-within input {
  opacity: 1;
  border-color: color-mix(in srgb, var(--minimal-calendar-line-strong) 42%, transparent);
  background: color-mix(in srgb, var(--minimal-calendar-sheet) 76%, transparent);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-day:hover .calendar-add-control button,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-add-control:hover button,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-add-control:focus-within button {
  border-color: color-mix(in srgb, var(--minimal-calendar-line-strong) 46%, transparent);
  background: color-mix(in srgb, var(--minimal-calendar-sheet) 70%, transparent);
  color: var(--minimal-calendar-ink);
  opacity: 0.76;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-unscheduled {
  margin-top: 6px;
  padding: 10px 0 14px;
  border-top: 1px solid var(--minimal-calendar-line);
  background: var(--minimal-calendar-page);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-unscheduled-header {
  padding-bottom: 5px;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-unscheduled-header h4 {
  color: var(--minimal-calendar-ink);
  font-size: 15px;
  font-weight: 760;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-unscheduled-header span {
  color: var(--minimal-calendar-muted);
  font-size: 12px;
  font-weight: 650;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-unscheduled-list {
  gap: 0 24px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--calendar-row-height) - 1px),
      var(--minimal-calendar-line) calc(var(--calendar-row-height) - 1px),
      var(--minimal-calendar-line) var(--calendar-row-height)
    );
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-panel,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-year-month {
  border-color: var(--minimal-calendar-line);
  background: var(--minimal-calendar-page);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-toolbar {
  height: var(--calendar-toolbar-height); min-height: var(--calendar-toolbar-height);
  padding-top: 14px;
  padding-bottom: 14px;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-title h4 {
  font-size: clamp(27px, 1.95vw, 34px);
  font-weight: 730;
  line-height: 1.04;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-toolbar-actions {
  gap: 8px;
  opacity: 0.82;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-view-switcher {
  border-color: color-mix(in srgb, var(--minimal-calendar-month-line-strong) 68%, transparent);
  background: transparent;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-view-switcher button {
  color: color-mix(in srgb, var(--minimal-calendar-muted) 84%, transparent);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-view-switcher button.is-active {
  border-color: color-mix(in srgb, var(--minimal-calendar-month-line-strong) 82%, transparent);
  background: color-mix(in srgb, var(--minimal-calendar-sheet) 72%, transparent);
  color: var(--minimal-calendar-ink);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-feed-status {
  border-color: transparent;
  background: transparent;
  color: var(--minimal-calendar-muted);
  opacity: 0.46;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-feed-status button {
  border-color: transparent;
  color: var(--minimal-calendar-muted);
  opacity: 0.76;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-feed-status:hover,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-feed-status:focus-within {
  opacity: 0.9;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-nav button {
  border-color: transparent;
  background: transparent;
  opacity: 0.68;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-nav button[data-calendar-period="today"] {
  border-color: color-mix(in srgb, var(--minimal-calendar-month-line-strong) 72%, transparent);
  background: transparent;
  color: var(--minimal-calendar-ink);
  opacity: 0.9;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-nav button:hover,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-nav button[data-calendar-period="today"]:hover {
  border-color: var(--minimal-calendar-month-line-strong);
  background: color-mix(in srgb, var(--minimal-calendar-sheet) 58%, transparent);
  opacity: 1;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-month-panel {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--minimal-calendar-month-line-strong) 72%, transparent) transparent;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-month-panel::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-month-panel::-webkit-scrollbar-track {
  background: transparent;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-month-panel::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--minimal-calendar-month-line-strong) 62%, transparent);
  background-clip: padding-box;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-weekdays {
  border-bottom-color: var(--minimal-calendar-month-line-strong);
  background: var(--minimal-calendar-page);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-weekdays span,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-year-weekdays span {
  color: var(--minimal-calendar-muted);
  font-weight: 590;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-grid {
  gap: 18px 24px;
  background: var(--minimal-calendar-page);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-day {
  gap: 4px;
  padding: 8px 8px 7px;
  border-top-color: var(--minimal-calendar-month-line);
  background: transparent;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-day.is-today {
  border-top-color: color-mix(in srgb, var(--minimal-calendar-today) 58%, var(--minimal-calendar-month-line) 42%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--minimal-calendar-today) 4%, transparent),
    transparent 66%
  );
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-month-day-header {
  min-height: 22px;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-month-day-header strong {
  min-width: auto;
  width: auto;
  height: 22px;
  border-radius: 0;
  color: color-mix(in srgb, var(--minimal-calendar-ink) 82%, var(--minimal-calendar-muted) 18%);
  font-size: 12.5px;
  font-weight: 690;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-month-day.is-outside-month .calendar-month-day-header strong {
  color: color-mix(in srgb, var(--minimal-calendar-muted) 64%, transparent);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-month-day.is-today .calendar-month-day-header strong {
  min-width: 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--minimal-calendar-today) 68%, transparent);
  background: transparent;
  color: var(--minimal-calendar-today);
  box-shadow: none;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-today-label {
  color: color-mix(in srgb, var(--minimal-calendar-today) 58%, var(--minimal-calendar-muted) 42%);
  font-size: 10px;
  font-weight: 600;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-month .calendar-month-day-list {
  gap: 2px;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-chip,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-chip.calendar-event-card {
  min-height: 18px;
  grid-template-columns: 5px minmax(0, 1fr);
  gap: 5px;
  padding: 0 2px;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--month-chip-color, var(--minimal-calendar-accent)) 25%, var(--minimal-calendar-ink) 75%);
  font-size: 10.5px;
  font-weight: 570;
  line-height: 1.18;
  box-shadow: none;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-chip:hover,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-chip:focus-visible {
  background: color-mix(in srgb, var(--month-chip-color, var(--minimal-calendar-accent)) 4%, transparent);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-chip-dot {
  width: 4px;
  height: 4px;
  opacity: 0.72;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-chip strong,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-chip.calendar-event-card > strong {
  font-size: 10.5px;
  font-weight: 570;
  line-height: 1.18;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-event-chip {
  color: color-mix(in srgb, var(--event-color, var(--minimal-calendar-accent)) 30%, var(--minimal-calendar-ink) 70%);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-task-chip {
  color: color-mix(in srgb, var(--task-color, var(--minimal-calendar-accent)) 22%, var(--minimal-calendar-ink) 78%);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-task-chip.is-done,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-task-chip.is-completion-record {
  opacity: 0.58;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-more {
  min-height: 18px;
  padding: 0 2px 0 10px;
  color: var(--minimal-calendar-muted);
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.74;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-month-more:hover {
  color: var(--minimal-calendar-muted-strong);
  opacity: 1;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-year-grid {
  gap: 22px;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-year-month {
  border-color: var(--minimal-calendar-line);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-year-day.is-today {
  background: var(--minimal-calendar-accent);
  color: var(--minimal-calendar-page);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view :is(.category-card small, .category-button small, .view-card small) {
  color: var(--minimal-calendar-muted);
  font-weight: 620;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view :is(.category-dot, .view-card::before) {
  opacity: 0.78;
}

/* styles/31-minimal-calendar-day-clarity.css */
/* Minimal Calendar Day timeline clarity. */

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day {
  --minimal-day-line: color-mix(in srgb, var(--minimal-calendar-line) 82%, transparent);
  --minimal-day-line-strong: color-mix(in srgb, var(--minimal-calendar-line-strong) 78%, transparent);
  --minimal-day-row-hover: color-mix(in srgb, var(--minimal-calendar-sheet) 46%, transparent);
  --minimal-day-accent-line: color-mix(in srgb, var(--minimal-calendar-accent) 58%, transparent);
}

html[data-theme="dark"][data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day {
  --minimal-day-row-hover: rgba(244, 239, 229, 0.035);
  --minimal-day-accent-line: color-mix(in srgb, var(--minimal-calendar-accent) 50%, transparent);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .calendar-toolbar {
  border-bottom: 1px solid var(--minimal-calendar-line);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-calendar-day-controls {
  gap: 12px;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-priority-control,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-source-control {
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-calendar-day-controls button {
  min-height: clamp(24px, calc(var(--font-size) + 9px), 32px);
  padding: 0 1px 3px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--minimal-calendar-muted);
  font-size: var(--calendar-control-font);
  font-weight: 650;
  box-shadow: none;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-calendar-day-controls button:hover {
  color: var(--minimal-calendar-ink);
  background: transparent;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-calendar-day-controls button.is-active {
  border-bottom-color: var(--minimal-day-accent-line);
  background: transparent;
  color: var(--minimal-calendar-ink);
  box-shadow: none;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-axis-shell-calendar-day {
  padding: 8px 10px 22px 0;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-axis-list-calendar-day {
  width: min(1360px, 100%);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-day {
  grid-template-columns: 82px 18px minmax(0, 1fr);
  gap: 8px;
  min-height: var(--calendar-timeline-day-min);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-date-rail {
  gap: 2px;
  padding-top: 13px;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-date-rail strong {
  color: var(--minimal-calendar-muted-strong);
  font-size: var(--calendar-card-title-font);
  font-weight: 680;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-date-rail span {
  color: var(--minimal-calendar-muted);
  font-size: var(--calendar-meta-font);
  font-weight: 560;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-day.is-today .timeline-date-rail strong,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-day.is-today .timeline-date-rail span {
  color: var(--minimal-calendar-accent);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-track::before {
  width: 1px;
  border-radius: 0;
  background: var(--minimal-day-line);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-track-dot {
  top: 18px;
  width: 6px;
  height: 6px;
  margin-top: 18px;
  border: 0;
  background: var(--minimal-day-line-strong);
  box-shadow: 0 0 0 3px var(--minimal-calendar-page);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-day.is-today .timeline-track::before {
  background: linear-gradient(
    to bottom,
    var(--minimal-day-line),
    var(--minimal-day-accent-line),
    var(--minimal-day-line)
  );
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-day.is-today .timeline-track-dot {
  width: 7px;
  height: 7px;
  background: var(--minimal-calendar-accent);
  box-shadow: 0 0 0 3px var(--minimal-calendar-page);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-day-content {
  gap: 4px;
  padding: 7px 0 9px;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-day-header {
  padding: 0 0 4px;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-day-header h4 {
  color: var(--minimal-calendar-ink);
  font-size: var(--calendar-card-title-font);
  font-weight: 700;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-day-header span {
  color: var(--minimal-calendar-muted);
  font-size: var(--calendar-meta-font);
  font-weight: 560;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-now-marker {
  grid-template-columns: minmax(28px, 1fr) auto;
  gap: 8px;
  margin: -1px 0 2px;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-now-line {
  height: 1px;
  border-radius: 0;
  background: var(--minimal-day-accent-line);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-now-marker strong {
  color: var(--minimal-calendar-accent);
  font-size: 10.5px;
  font-weight: 650;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-list,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-wrap {
  gap: 0;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card.calendar-event-card {
  grid-template-columns: 2px 8px minmax(0, 1fr) auto;
  gap: 8px;
  min-height: var(--calendar-timeline-node-min);
  padding: 5px 8px 5px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--minimal-calendar-ink);
  box-shadow: none;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 2px;
  align-self: stretch;
  border-radius: 0;
  background: color-mix(in srgb, var(--timeline-item-color, var(--minimal-calendar-accent)) 52%, transparent);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card:hover,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card:focus-within {
  background: var(--minimal-day-row-hover);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card.is-kind-ghost {
  border: 0;
  background: transparent;
  opacity: 0.62;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card.is-status-overdue::before {
  background: color-mix(in srgb, var(--danger) 58%, transparent);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-marker {
  grid-column: 2;
  grid-row: 1;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--timeline-item-color, var(--minimal-calendar-accent)) 78%, var(--minimal-calendar-ink) 22%);
  box-shadow: none;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card.is-source-done .timeline-node-marker {
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--timeline-item-color, var(--minimal-calendar-accent)) 68%, var(--minimal-calendar-muted) 32%);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card.is-source-done .timeline-node-marker::after {
  display: none;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-body {
  grid-column: 3;
  grid-row: 1;
  gap: 1px;
  min-width: 0;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-top {
  gap: 7px;
  flex-wrap: wrap;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-time,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-label {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--calendar-meta-font);
  font-weight: 600;
  line-height: 1.2;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-time {
  color: color-mix(in srgb, var(--timeline-item-color, var(--minimal-calendar-accent)) 62%, var(--minimal-calendar-ink) 38%);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-label {
  color: var(--minimal-calendar-muted);
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-body strong {
  color: color-mix(in srgb, var(--minimal-calendar-ink) 90%, var(--minimal-calendar-muted) 10%);
  font-size: var(--calendar-card-title-font);
  font-weight: 650;
  line-height: 1.28;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-meta {
  color: var(--minimal-calendar-muted);
  font-size: var(--calendar-meta-font);
  font-weight: 560;
  line-height: 1.25;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-duration-bar {
  height: 12px;
  margin-top: 2px;
  border-radius: 0;
  background: transparent;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-duration-bar span {
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--timeline-item-color, var(--minimal-calendar-accent)) 58%, var(--minimal-calendar-muted) 42%);
  font-size: 10px;
  font-weight: 600;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-actions {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  gap: 6px;
  opacity: 0.58;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card:hover .timeline-node-actions,
html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-card:focus-within .timeline-node-actions {
  opacity: 1;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-actions .check-button {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  border-width: 1px;
  background: transparent;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-node-actions .detail-button {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 0;
  background: transparent;
  color: var(--minimal-calendar-muted-strong);
  font-size: 10.5px;
  font-weight: 640;
}

html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-shell-day .timeline-day-empty {
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--minimal-calendar-muted);
  font-size: 11px;
  font-weight: 560;
}

@media (max-width: 1180px) {
  html[data-appearance="minimal"] .desktop-shell.is-calendar-view .calendar-toolbar {
    height: auto;
    min-height: 112px;
  }
}

/* styles/32-inbox-capture.css */
/* Inbox full-page capture workspace shell and settings panel. */

.inbox-button {
  cursor: pointer;
}

.clock-panel.is-inbox-active {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line-soft) 70%);
  background: color-mix(in srgb, var(--blue) 6%, var(--surface) 94%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 82%, transparent),
    0 8px 18px color-mix(in srgb, var(--blue) 6%, transparent);
}

.desktop-shell.is-inbox-view {
  width: calc(100vw / var(--app-shell-scale));
  max-width: calc(100vw / var(--app-shell-scale));
  overflow-x: hidden;
}

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

.desktop-shell.is-inbox-view .workspace {
  min-height: 0;
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

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

.desktop-shell.is-inbox-view .main-column {
  height: 100%;
  min-height: 0;
}

.task-board-main.is-inbox-board {
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

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

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

.inbox-page-shell {
  --inbox-page-pad: clamp(16px, 2.5vw, 32px);
  --inbox-content-max: 1480px;
  width: min(100%, var(--inbox-content-max));
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 1.8vw, 22px);
  margin: 0 auto;
  padding: var(--inbox-page-pad) var(--inbox-page-pad) 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 26%, transparent), transparent 38%),
    var(--surface);
}

.inbox-page-top {
  position: relative;
  min-width: 0;
}

.inbox-page-header,
.inbox-list-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}

.inbox-page-title,
.inbox-list-title {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.inbox-page-title-line {
  min-width: 0;
  display: flex;
  align-items: end;
  gap: 12px;
}

.inbox-page-title p,
.inbox-list-title span,
.inbox-page-count {
  margin: 0;
  color: var(--muted);
  font-size: calc(var(--font-size) * 0.78);
  font-weight: 850;
  line-height: 1.35;
}

.inbox-page-title h4 {
  margin: 0;
  color: var(--text);
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 950;
  line-height: 1;
}

.inbox-page-count {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line-soft) 88%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 4%, var(--surface) 96%);
  color: color-mix(in srgb, var(--blue) 58%, var(--text) 42%);
  padding: 0 10px;
  transform: translateY(-3px);
}

.inbox-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.inbox-settings-button,
.inbox-settings-close {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 82%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%);
  color: var(--text);
  font-size: calc(var(--font-size) * 0.78);
  font-weight: 930;
  padding: 0 12px;
}

.inbox-settings-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line-soft) 72%);
  background: color-mix(in srgb, var(--blue) 7%, var(--surface) 93%);
  color: color-mix(in srgb, var(--blue) 48%, var(--text) 52%);
}

.inbox-settings-panel {
  position: absolute;
  top: 38px;
  right: 0;
  z-index: 22;
  width: min(1080px, calc(100vw - var(--inbox-page-pad) * 2));
  height: calc((100vh - 96px) / var(--app-shell-scale));
  max-height: calc((100vh - 72px) / var(--app-shell-scale));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 80%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-panel) 4%);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--text) 12%, transparent);
}

.inbox-settings-panel-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.inbox-settings-panel-copy {
  min-width: 0; max-width: min(760px, 100%);
  display: grid;
  gap: 4px;
}

.inbox-settings-panel-copy strong {
  color: var(--text);
  font-size: calc(var(--font-size) * 0.98);
  font-weight: 950;
  line-height: 1.2;
}

.inbox-settings-panel-copy span {
  min-width: 0; overflow-wrap: anywhere;
  color: var(--muted);
  font-size: calc(var(--font-size) * 0.76);
  font-weight: 820;
  line-height: 1.4;
}

/* styles/32-inbox-list.css */
/* Inbox pending item list, prediction card, selection, and item action styles. */

.inbox-list-section {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
}

.inbox-list-title strong {
  color: var(--text);
  font-size: calc(var(--font-size) * 1.02);
  font-weight: 950;
}

.inbox-confirm-selected {
  min-height: 32px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 68%, var(--text) 32%);
  color: #fff;
  font-size: calc(var(--font-size) * 0.78);
  font-weight: 950;
  padding: 0 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 16px color-mix(in srgb, var(--blue) 8%, transparent);
}

.inbox-confirm-selected:disabled {
  cursor: default;
  opacity: 0.46;
  box-shadow: none;
}

.inbox-delete-selected {
  min-height: 30px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--danger) 16%, var(--line-soft) 84%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 97%, var(--danger) 3%);
  color: color-mix(in srgb, var(--danger) 46%, var(--muted) 54%);
  font-size: 11px;
  font-weight: 900;
  padding: 0 10px;
}

.inbox-delete-selected:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line-soft) 66%);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface) 93%);
  color: color-mix(in srgb, var(--danger) 62%, var(--text) 38%);
}

.inbox-delete-selected:disabled {
  cursor: default;
  opacity: 0.46;
}

.inbox-list-columns,
.inbox-item {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(360px, 1.1fr) minmax(112px, max-content);
  gap: 12px;
  align-items: center;
}

.inbox-list-columns {
  display: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 0 12px;
}

.inbox-list-action-column {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.inbox-list-action-tools {
  display: grid;
  align-items: center;
  justify-items: end;
  gap: 5px;
}

.inbox-list-action-primary {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.inbox-list-action-primary .inbox-confirm-selected,
.inbox-list-action-primary .inbox-delete-selected {
  flex: 0 0 auto;
}

.inbox-select-all,
.inbox-clear-selection {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 84%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-soft) 4%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  padding: 0 11px;
}

.inbox-select-all:hover,
.inbox-clear-selection:hover {
  border-color: color-mix(in srgb, var(--blue) 22%, var(--line-soft) 78%);
  color: color-mix(in srgb, var(--text) 76%, var(--blue) 24%);
}

.inbox-select-all:disabled,
.inbox-clear-selection:disabled {
  cursor: default;
  opacity: 0.46;
}

.inbox-items-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: auto;
  padding: 2px 1px 6px;
  scrollbar-gutter: stable;
}

.inbox-item {
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 78%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 97%, var(--surface-soft) 3%);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--text) 4%, transparent);
}

.inbox-item.is-selected {
  border-color: color-mix(in srgb, var(--blue) 26%, var(--line-soft) 74%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 4%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 97%, var(--surface-soft) 3%);
}

.inbox-item.is-editing {
  align-items: start;
  padding-block: 11px;
}

.inbox-item-content {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.inbox-item-text {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: calc(var(--font-size) * 0.98);
  font-weight: 850;
  line-height: 1.26;
  overflow-wrap: anywhere;
}

.inbox-item:not(.is-editing) .inbox-item-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.inbox-item-content small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.inbox-item-prediction {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.inbox-prediction-card {
  --inbox-prediction-color: var(--blue);
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px 10px 9px 12px;
  border: 1px solid color-mix(in srgb, var(--inbox-prediction-color) 16%, var(--line-soft) 84%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 82%, var(--surface-soft) 18%);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--inbox-prediction-color) 34%, transparent);
  overflow: hidden;
}

.inbox-prediction-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: color-mix(in srgb, var(--inbox-prediction-color) 38%, transparent);
  pointer-events: none;
}

.inbox-prediction-card.is-compact {
  padding: 8px 9px 8px 12px;
  border-radius: 11px;
}

.inbox-prediction-card.is-no-match {
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.inbox-prediction-card.is-no-match::before {
  display: none;
}

.inbox-prediction-card.is-no-match .inbox-prediction-reasons {
  display: none;
}

.inbox-prediction-card.is-no-match strong,
.inbox-prediction-card.is-no-match > span {
  color: color-mix(in srgb, var(--text) 54%, var(--muted) 46%);
}

.inbox-item.requires-manual-classification {
  border-color: color-mix(in srgb, var(--muted) 22%, var(--line-soft) 78%);
}

.inbox-item-prediction:not(.is-editing) .inbox-prediction-card.is-compact {
  min-height: 40px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 12px;
}

.inbox-item-prediction:not(.is-editing) .inbox-prediction-card.is-compact strong,
.inbox-item-prediction:not(.is-editing) .inbox-prediction-card.is-compact > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-item-prediction:not(.is-editing) .inbox-prediction-card.is-compact .inbox-prediction-reasons {
  display: none;
}

.inbox-prediction-card strong {
  color: color-mix(in srgb, var(--text) 72%, var(--muted) 28%);
  font-size: calc(var(--font-size) * 0.72);
  font-weight: 900;
}

.inbox-prediction-card > span {
  min-width: 0;
  color: color-mix(in srgb, var(--text) 76%, var(--inbox-prediction-color) 24%);
  font-size: calc(var(--font-size) * 0.83);
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.inbox-prediction-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.inbox-prediction-reasons small {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--inbox-prediction-color) 14%, transparent);
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--text) 66%, var(--muted) 34%);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 0 7px;
}

.inbox-item-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.inbox-item-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.inbox-choice-select {
  position: relative;
  min-width: 0;
  display: block;
}

.inbox-item-field input[type="date"],
.inbox-choice-trigger {
  width: 100%;
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 84%, transparent);
  border-radius: 9px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 6%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 96%, var(--surface-soft) 4%);
  color: var(--text);
  font-size: calc(var(--font-size) * 0.78);
  font-weight: 860;
}

.inbox-item-field input[type="date"] { font: inherit; padding: 0 9px; }

.inbox-choice-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px;
  align-items: center; gap: 7px; padding: 0 9px 0 10px; text-align: left;
}

.inbox-choice-trigger::after {
  content: "";
  width: 8px; height: 8px; 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);
}

.inbox-choice-select.is-open .inbox-choice-trigger::after {
  transform: rotate(180deg);
}

.inbox-choice-trigger:hover,
.inbox-choice-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 28%, var(--line-soft) 72%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 8%, transparent);
}

.inbox-item-field input[type="date"]:focus,
.inbox-choice-trigger:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 42%, var(--line-soft) 58%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 12%, transparent);
}

.inbox-choice-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-choice-menu {
  position: absolute;
  z-index: 36;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  display: grid;
  gap: 3px;
  max-height: min(220px, 48vh);
  overflow-y: auto;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 18%, var(--line-soft) 82%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 16px 34px rgba(17, 24, 39, 0.16);
  backdrop-filter: blur(18px) saturate(1.08);
}

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

.inbox-choice-option {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  padding: 0 9px;
  text-align: left;
  font-size: calc(var(--font-size) * 0.78);
  font-weight: 860;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-choice-option:hover,
.inbox-choice-option:focus-visible,
.inbox-choice-option[aria-selected="true"] {
  outline: 0;
  border-color: color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 18%, transparent);
  background: color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 72%, var(--text) 28%);
}

.inbox-item-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(56px, auto));
  align-content: center;
  justify-items: stretch;
  gap: 6px;
}

.inbox-item:not(.has-selection-control) .inbox-item-actions {
  min-width: 210px;
}

.inbox-item.has-selection-control .inbox-item-actions {
  min-width: 268px;
}

.inbox-item.has-selection-control:not(.requires-manual-classification) .inbox-item-actions {
  grid-template-columns: repeat(4, minmax(56px, auto));
  min-width: 330px;
}

.inbox-item.requires-manual-classification:not(.has-selection-control) .inbox-item-actions {
  grid-template-columns: repeat(2, minmax(66px, auto));
  min-width: 152px;
}

.inbox-item.requires-manual-classification.has-selection-control .inbox-item-actions {
  grid-template-columns: repeat(3, minmax(56px, auto));
  min-width: 232px;
}

.inbox-item-select {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 84%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-soft) 4%);
  color: var(--muted);
  font-size: calc(var(--font-size) * 0.78);
  font-weight: 900;
  padding: 0 9px;
}

.inbox-item-select input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.inbox-capture-submit,
.inbox-item-confirm {
  min-height: 32px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 70%, var(--text) 30%);
  color: #fff;
  font-size: calc(var(--font-size) * 0.82);
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 16px color-mix(in srgb, var(--blue) 9%, transparent);
}

.inbox-item-edit {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 84%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-soft) 4%);
  color: var(--muted);
  font-size: calc(var(--font-size) * 0.78);
  font-weight: 900;
}

.inbox-item-edit:hover {
  border-color: color-mix(in srgb, var(--blue) 22%, var(--line-soft) 78%);
  color: color-mix(in srgb, var(--text) 72%, var(--blue) 28%);
}

.inbox-item-delete {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--danger) 20%, var(--line-soft) 80%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 5%, var(--surface) 95%);
  color: color-mix(in srgb, var(--danger) 58%, var(--text) 42%);
  font-size: calc(var(--font-size) * 0.78);
  font-weight: 900;
}

.inbox-item-delete:hover {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line-soft) 65%);
  background: color-mix(in srgb, var(--danger) 9%, var(--surface) 91%);
}

.inbox-capture-submit:hover,
.inbox-item-confirm:hover,
.inbox-item-edit:hover,
.inbox-confirm-selected:not(:disabled):hover,
.inbox-delete-selected:not(:disabled):hover {
  transform: translateY(-1px);
}

.inbox-empty-state {
  display: grid;
  gap: 6px;
  min-height: 180px;
  align-content: center;
  justify-items: center;
  border: 1px dashed color-mix(in srgb, var(--line-soft) 88%, transparent);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
  padding: 18px;
}

.inbox-empty-state strong {
  color: var(--text);
  font-size: calc(var(--font-size) * 0.98);
  font-weight: 950;
}

.inbox-empty-state span {
  max-width: 420px;
  font-size: calc(var(--font-size) * 0.82);
  font-weight: 800;
  line-height: 1.45;
}

/* styles/32-inbox-time-picker.css */
/* Inbox item time picker direct late layer. */
.inbox-time-picker {
  position: relative;
  min-width: 0;
  display: block;
}

.inbox-time-picker.is-open {
  z-index: 42;
}

.inbox-time-trigger {
  width: 100%;
  min-height: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 84%, transparent);
  border-radius: 9px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 6%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 96%, var(--surface-soft) 4%);
  color: var(--text);
  font-size: calc(var(--font-size) * 0.78);
  font-weight: 860;
  padding: 0 9px 0 10px;
  text-align: left;
}

.inbox-time-trigger:hover,
.inbox-time-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 28%, var(--line-soft) 72%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 8%, transparent);
}

.inbox-time-trigger:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 42%, var(--line-soft) 58%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 12%, transparent);
}

.inbox-time-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-time-trigger-icon {
  position: relative;
  width: 15px;
  height: 15px;
  justify-self: end;
  border: 1.7px solid color-mix(in srgb, var(--muted) 74%, var(--text) 26%);
  border-radius: 50%;
}

.inbox-time-trigger-icon::before,
.inbox-time-trigger-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 74%, var(--text) 26%);
  transform-origin: 50% 100%;
}

.inbox-time-trigger-icon::before {
  height: 4.8px;
  transform: translate(-50%, -100%) rotate(0deg);
}

.inbox-time-trigger-icon::after {
  height: 4.2px;
  transform: translate(-50%, -100%) rotate(112deg);
}

.inbox-time-picker.is-open .inbox-time-trigger-icon {
  border-color: color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 66%, var(--muted) 34%);
}

.inbox-time-picker.is-open .inbox-time-trigger-icon::before,
.inbox-time-picker.is-open .inbox-time-trigger-icon::after {
  background: color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 66%, var(--muted) 34%);
}

.inbox-time-menu {
  position: absolute;
  z-index: 44;
  left: 0;
  top: calc(100% + 6px);
  width: min(286px, calc(100vw - 32px));
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--inbox-prediction-color, 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 42px rgba(17, 24, 39, 0.18);
  backdrop-filter: blur(18px) saturate(1.08);
}

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

.inbox-time-menu-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 72%, transparent);
}

.inbox-time-current {
  min-width: 0;
  color: var(--text);
  font-size: calc(var(--font-size) * 0.92);
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-time-quick-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.inbox-time-quick {
  min-height: 26px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 95%, var(--surface-soft) 5%);
  color: color-mix(in srgb, var(--text) 68%, var(--muted) 32%);
  font-size: 11px;
  font-weight: 900;
  padding: 0 9px;
}

.inbox-time-quick:hover,
.inbox-time-quick:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 24%, var(--line-soft) 76%);
  color: color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 68%, var(--text) 32%);
}

.inbox-time-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  max-height: min(236px, 42vh);
  overflow-y: auto;
  padding: 0 2px 2px 0;
  scrollbar-gutter: stable;
}

.inbox-time-option {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 0 9px;
  text-align: left;
  font-size: calc(var(--font-size) * 0.8);
  font-weight: 900;
}

.inbox-time-option small {
  color: color-mix(in srgb, var(--muted) 72%, var(--text) 28%);
  font-size: 10px;
  font-weight: 850;
}

.inbox-time-option:hover,
.inbox-time-option:focus-visible,
.inbox-time-option[aria-selected="true"] {
  outline: 0;
  border-color: color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 18%, transparent);
  background: color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 12%, var(--surface) 88%);
  color: color-mix(in srgb, var(--inbox-prediction-color, var(--blue)) 72%, var(--text) 28%);
}

/* styles/32-inbox-composer.css */
/* Inbox capture composer and live prediction panel styles. */

.inbox-page-composer {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  align-items: stretch;
  gap: 10px;
  margin-inline: calc(var(--inbox-page-pad) * -1);
  padding: 10px var(--inbox-page-pad) calc(10px + env(safe-area-inset-bottom, 0px));
  border: 1px solid color-mix(in srgb, var(--line-soft) 64%, transparent);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 14px 14px 0 0;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-panel) 6%);
  box-shadow: 0 -10px 22px color-mix(in srgb, var(--text) 5%, transparent);
}

.inbox-capture-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-size: calc(var(--font-size) * 0.78);
  font-weight: 900;
}

.inbox-capture-field textarea {
  width: 100%;
  min-height: 78px;
  resize: vertical;
  border: 1px solid color-mix(in srgb, var(--line-soft) 78%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 98%, var(--surface-soft) 2%);
  color: var(--text);
  font-size: calc(var(--font-size) * 0.9);
  font-weight: 760;
  line-height: 1.45;
  padding: 10px 11px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent);
}

.inbox-capture-field textarea:focus {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line-soft) 70%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 78%, transparent),
    0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}

.inbox-composer-side {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 7px;
}

.inbox-composer-side .inbox-prediction-card {
  align-content: center;
  min-height: 0;
}

/* styles/32-inbox-responsive.css */
/* Inbox capture responsive and non-simple appearance sizing rules. */

@media (max-width: 980px) {
  .desktop-shell.is-inbox-view .workspace {
    height: var(--mobile-vh, 100vh);
    min-height: var(--mobile-vh, 100vh);
    max-height: var(--mobile-vh, 100vh);
    overflow: hidden;
  }

  .desktop-shell.is-inbox-view .board-grid,
  .desktop-shell.is-inbox-view .main-column,
  .task-board-main.is-inbox-board,
  .task-board-main.is-inbox-board .task-list,
  .inbox-page-shell {
    height: 100%;
    min-height: 0;
  }

  .inbox-list-columns,
  .inbox-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .inbox-settings-panel {
    top: 38px;
    right: 0;
    left: 0;
    width: auto;
    height: calc(100vh - var(--inbox-page-pad) - 64px);
    max-height: calc(100vh - var(--inbox-page-pad) - 56px);
  }

  .inbox-list-columns {
    padding: 0;
  }

  .inbox-list-columns > span {
    display: none;
  }

  .inbox-item-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    min-width: 0;
  }

  .inbox-item:not(.has-selection-control) .inbox-item-actions {
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inbox-item.has-selection-control .inbox-item-actions {
    min-width: 0;
  }

  .inbox-page-composer {
    grid-template-columns: minmax(0, 1fr);
  }

  .inbox-composer-side {
    grid-template-rows: auto auto;
  }
}

@media (max-width: 768px) {
  html:not([data-appearance="simple"]) .clock-panel.inbox-entry-panel {
    display: none;
  }

  html:not([data-appearance="simple"]) .inbox-button {
    min-height: 52px;
  }

  .desktop-shell.is-inbox-view .workspace,
  .desktop-shell.is-inbox-view .board-grid,
  .desktop-shell.is-inbox-view .main-column,
  .task-board-main.is-inbox-board,
  .task-board-main.is-inbox-board .task-list,
  .inbox-page-shell {
    height: auto;
    max-height: none;
    overflow-x: hidden;
  }

  .inbox-page-shell {
    --inbox-page-pad: 14px;
    --inbox-content-max: none;
    padding: var(--inbox-page-pad) var(--inbox-page-pad) calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
  }

  .inbox-page-composer {
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
  }

  .inbox-settings-panel {
    position: fixed;
    top: var(--inbox-page-pad);
    right: var(--inbox-page-pad);
    left: var(--inbox-page-pad);
    height: calc(100vh - var(--inbox-page-pad) * 2);
    max-height: calc(100vh - var(--inbox-page-pad) * 2);
    width: auto;
  }

  .inbox-page-header,
  .inbox-list-header {
    display: grid;
  }

  .inbox-page-title h4 {
    font-size: 32px;
  }

  .inbox-page-title-line {
    align-items: center;
  }

  .inbox-page-count {
    min-height: 26px;
    transform: none;
  }

  .inbox-list-action-tools {
    justify-content: stretch;
  }

  .inbox-list-action-primary {
    flex: 1 1 auto;
  }

  .inbox-list-action-primary > * {
    flex: 1 1 auto;
  }

  .inbox-item {
    padding: 9px;
  }

  .inbox-confirm-selected,
  .inbox-capture-submit,
  .inbox-item-confirm,
  .inbox-item-edit,
  .inbox-item-delete {
    width: 100%;
  }

  .inbox-item-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .inbox-capture-field textarea {
    min-height: 74px;
    max-height: 28vh;
  }
}

/* styles/32-inbox-capture-appearance.css */
/* Inbox capture minimal/simple appearance overrides. */

html[data-appearance="minimal"] :is(
  .inbox-item,
  .inbox-settings-panel,
  .inbox-page-composer,
  .inbox-prediction-card,
  .inbox-capture-field textarea,
  .inbox-item-field select,
  .inbox-item-field input[type="date"],
  .inbox-item-field input[type="time"],
  .inbox-item-select,
  .inbox-item-edit,
  .inbox-item-delete,
  .inbox-settings-button,
  .inbox-settings-close,
  .inbox-select-all,
  .inbox-clear-selection,
  .inbox-delete-selected
),
html[data-appearance="simple"] :is(
  .inbox-item,
  .inbox-settings-panel,
  .inbox-page-composer,
  .inbox-prediction-card,
  .inbox-capture-field textarea,
  .inbox-item-field select,
  .inbox-item-field input[type="date"],
  .inbox-item-field input[type="time"],
  .inbox-item-select,
  .inbox-item-edit,
  .inbox-item-delete,
  .inbox-settings-button,
  .inbox-settings-close,
  .inbox-select-all,
  .inbox-clear-selection,
  .inbox-delete-selected
) {
  border-radius: var(--phase5-radius);
  background: var(--phase5-surface);
  background-image: none;
  box-shadow: none;
}

html[data-appearance="minimal"] .inbox-page-shell,
html[data-appearance="simple"] .inbox-page-shell {
  background: var(--phase5-surface);
}

html[data-appearance="minimal"] .inbox-page-title h4,
html[data-appearance="simple"] .inbox-page-title h4 {
  color: var(--phase5-text);
  font-size: clamp(31px, 3.2vw, 44px);
}

html[data-appearance="minimal"] .inbox-page-count,
html[data-appearance="simple"] .inbox-page-count {
  border-color: var(--phase5-line);
  background: transparent;
  color: color-mix(in srgb, var(--phase5-text) 54%, var(--phase5-muted) 46%);
}

html[data-appearance="minimal"] .inbox-list-title strong,
html[data-appearance="minimal"] .inbox-settings-panel-copy strong,
html[data-appearance="simple"] .inbox-list-title strong,
html[data-appearance="simple"] .inbox-settings-panel-copy strong,
html[data-appearance="minimal"] .inbox-item-text,
html[data-appearance="simple"] .inbox-item-text {
  color: var(--phase5-text);
}

html[data-appearance="minimal"] .inbox-list-title span,
html[data-appearance="simple"] .inbox-list-title span,
html[data-appearance="minimal"] .inbox-page-title p,
html[data-appearance="simple"] .inbox-page-title p,
html[data-appearance="minimal"] .inbox-settings-panel-copy span,
html[data-appearance="simple"] .inbox-settings-panel-copy span,
html[data-appearance="minimal"] .inbox-item-content small,
html[data-appearance="simple"] .inbox-item-content small {
  color: var(--phase5-muted);
}

html[data-appearance="minimal"] .inbox-prediction-card,
html[data-appearance="simple"] .inbox-prediction-card {
  border-color: color-mix(in srgb, var(--inbox-prediction-color, var(--accent)) 14%, var(--phase5-line) 86%);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--inbox-prediction-color, var(--accent)) 28%, transparent);
}

html[data-appearance="minimal"] .inbox-prediction-card.is-no-match,
html[data-appearance="simple"] .inbox-prediction-card.is-no-match {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-appearance="minimal"] .inbox-prediction-card.is-no-match::before,
html[data-appearance="simple"] .inbox-prediction-card.is-no-match::before {
  display: none;
}

html[data-appearance="minimal"] .inbox-prediction-card strong,
html[data-appearance="simple"] .inbox-prediction-card strong,
html[data-appearance="minimal"] .inbox-prediction-reasons small,
html[data-appearance="simple"] .inbox-prediction-reasons small {
  color: var(--phase5-muted);
}

html[data-appearance="minimal"] .inbox-prediction-card > span,
html[data-appearance="simple"] .inbox-prediction-card > span {
  color: var(--phase5-text);
}

html[data-appearance="minimal"] .inbox-item-field,
html[data-appearance="simple"] .inbox-item-field {
  color: var(--phase5-muted);
}

html[data-appearance="minimal"] .inbox-item-field select,
html[data-appearance="simple"] .inbox-item-field select,
html[data-appearance="minimal"] .inbox-item-field input[type="date"],
html[data-appearance="simple"] .inbox-item-field input[type="date"],
html[data-appearance="minimal"] .inbox-item-field input[type="time"],
html[data-appearance="simple"] .inbox-item-field input[type="time"] {
  color: var(--phase5-text);
  background: var(--phase5-surface);
}

html[data-appearance="minimal"] .inbox-page-composer,
html[data-appearance="simple"] .inbox-page-composer {
  border-radius: var(--phase5-radius) var(--phase5-radius) 0 0;
  border-color: var(--phase5-line);
  background: color-mix(in srgb, var(--phase5-surface) 92%, var(--phase5-row) 8%);
}

html[data-appearance="minimal"] .inbox-capture-submit,
html[data-appearance="simple"] .inbox-capture-submit,
html[data-appearance="minimal"] .inbox-item-confirm,
html[data-appearance="simple"] .inbox-item-confirm,
html[data-appearance="minimal"] .inbox-confirm-selected,
html[data-appearance="simple"] .inbox-confirm-selected {
  background: color-mix(in srgb, var(--phase5-text) 82%, var(--accent) 18%);
  color: var(--phase5-surface);
  box-shadow: none;
}

html[data-appearance="minimal"] .inbox-select-all,
html[data-appearance="simple"] .inbox-select-all,
html[data-appearance="minimal"] .inbox-clear-selection,
html[data-appearance="simple"] .inbox-clear-selection,
html[data-appearance="minimal"] .inbox-item-select,
html[data-appearance="simple"] .inbox-item-select,
html[data-appearance="minimal"] .inbox-item-edit,
html[data-appearance="simple"] .inbox-item-edit,
html[data-appearance="minimal"] .inbox-settings-button,
html[data-appearance="simple"] .inbox-settings-button,
html[data-appearance="minimal"] .inbox-settings-close,
html[data-appearance="simple"] .inbox-settings-close,
html[data-appearance="minimal"] .inbox-item-delete,
html[data-appearance="minimal"] .inbox-delete-selected,
html[data-appearance="simple"] .inbox-item-delete,
html[data-appearance="simple"] .inbox-delete-selected {
  color: var(--phase5-muted);
  background: transparent;
}

html[data-appearance="minimal"] .inbox-item-delete,
html[data-appearance="minimal"] .inbox-delete-selected,
html[data-appearance="simple"] .inbox-item-delete,
html[data-appearance="simple"] .inbox-delete-selected {
  border-color: color-mix(in srgb, var(--danger) 22%, var(--phase5-line) 78%);
  color: color-mix(in srgb, var(--danger) 56%, var(--phase5-text) 44%);
}

/* styles/32-inbox-settings.css */
/* Inbox scene-library settings panes and dictionary choices. */

.inbox-scene-settings {
  margin-top: 8px;
}

.inbox-scene-settings-list {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
}

.inbox-scene-category-pane,
.inbox-scene-editor-pane {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}

.inbox-scene-editor-pane {
  grid-template-rows: auto minmax(0, 1fr);
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--inbox-active-category-color) 20%, var(--line-soft) 80%);
  border-left-width: 3px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--inbox-active-category-color) 5%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 97%, var(--surface-soft) 3%);
}

.inbox-scene-pane-title,
.inbox-scene-editor-copy > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.2;
}

.inbox-scene-category-list,
.inbox-scene-choice-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
  scrollbar-gutter: stable;
}

.inbox-scene-category-list {
  grid-template-columns: minmax(0, 1fr);
}

.inbox-scene-choice-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding-right: 4px;
}

.inbox-scene-category-list::-webkit-scrollbar,
.inbox-scene-choice-list::-webkit-scrollbar {
  width: 8px;
}

.inbox-scene-category-list::-webkit-scrollbar-thumb,
.inbox-scene-choice-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 28%, transparent);
}

.inbox-scene-category-list::-webkit-scrollbar-track,
.inbox-scene-choice-list::-webkit-scrollbar-track {
  background: transparent;
}

.inbox-scene-category-card {
  --inbox-category-color: var(--blue);
  position: relative;
  width: 100%;
  min-height: 54px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 82%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-soft) 4%);
  color: var(--text);
  text-align: left;
  padding: 10px 11px;
  box-shadow: inset 3px 0 0 transparent;
}

.inbox-scene-category-card:hover,
.inbox-scene-category-card.is-active {
  border-color: color-mix(in srgb, var(--inbox-category-color) 34%, var(--line-soft) 66%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--inbox-category-color) 7%, transparent), transparent 78%),
    color-mix(in srgb, var(--surface) 98%, var(--surface-soft) 2%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--inbox-category-color) 72%, transparent);
}

.inbox-scene-category-card.is-active::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--inbox-category-color) 58%, var(--line-soft) 42%);
  transform: translateY(-50%);
}

.inbox-scene-category-card strong {
  min-width: 0;
  color: var(--text);
  font-size: calc(var(--font-size) * 0.88);
  font-weight: 950;
  line-height: 1.18;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-scene-category-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%);
  color: color-mix(in srgb, var(--text) 58%, var(--muted) 42%);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  padding: 0 7px;
  white-space: nowrap;
}

.inbox-scene-editor-header {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 270px);
  align-items: stretch;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 72%, transparent);
}

.inbox-scene-editor-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.inbox-scene-editor-copy strong {
  color: var(--text);
  font-size: calc(var(--font-size) * 1.02);
  font-weight: 950;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.inbox-scene-search {
  width: 100%;
  min-height: 34px;
  align-self: end;
  border: 1px solid color-mix(in srgb, var(--line-soft) 84%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 98%, var(--surface-soft) 2%);
  color: var(--text);
  font-size: calc(var(--font-size) * 0.78);
  font-weight: 820;
  padding: 0 10px;
}

.inbox-scene-search:focus {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line-soft) 70%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 9%, transparent);
}

.inbox-scene-assignment-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.inbox-scene-assignment-copy strong {
  color: var(--text);
  font-size: calc(var(--font-size) * 0.88);
  font-weight: 950;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.inbox-scene-assignment-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.24;
}

.inbox-scene-section {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.inbox-scene-section-header {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.inbox-scene-section-header strong {
  color: var(--text);
  font-size: calc(var(--font-size) * 0.88);
  font-weight: 950;
  line-height: 1.15;
}

.inbox-scene-section-header small {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.2;
  text-align: right;
}

.inbox-scene-section-list {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.inbox-scene-section-list.is-enabled {
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
}

.inbox-scene-section-list.is-available {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
}

.inbox-scene-choice {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: stretch;
  min-height: 104px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 76%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 5%, transparent), transparent 45%),
    color-mix(in srgb, var(--surface) 98%, var(--surface-soft) 2%);
  color: var(--text);
  padding: 13px 12px 12px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 5%, transparent),
    0 6px 14px color-mix(in srgb, var(--shadow) 7%, transparent);
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.inbox-scene-choice:hover {
  border-color: color-mix(in srgb, var(--blue) 18%, var(--line-soft) 82%);
  background: color-mix(in srgb, var(--blue) 4%, var(--surface) 96%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
    0 8px 18px color-mix(in srgb, var(--shadow) 10%, transparent);
}

.inbox-scene-choice.is-selected {
  border-color: color-mix(in srgb, var(--inbox-active-category-color) 36%, var(--line-soft) 64%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--inbox-active-category-color) 9%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface) 98%, var(--surface-soft) 2%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--inbox-active-category-color) 16%, transparent),
    inset 3px 0 0 color-mix(in srgb, var(--inbox-active-category-color) 66%, transparent),
    0 10px 22px color-mix(in srgb, var(--shadow) 10%, transparent);
}

.inbox-scene-choice.is-enabled-choice {
  min-height: 78px;
}

.inbox-scene-choice.is-required {
  opacity: 0.78;
}

.inbox-scene-choice input {
  position: absolute;
  top: 13px;
  right: 12px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
}

.inbox-scene-choice-copy {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding-right: 30px;
}

.inbox-scene-choice-copy span {
  color: var(--text);
  font-size: calc(var(--font-size) * 0.86);
  font-weight: 930;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.inbox-scene-choice-copy small,
.inbox-scene-search-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.26;
}

.inbox-scene-choice-copy small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.inbox-scene-choice.is-enabled-choice .inbox-scene-choice-copy small {
  -webkit-line-clamp: 2;
}

.inbox-scene-search-empty {
  grid-column: 1 / -1;
  border: 1px dashed color-mix(in srgb, var(--line-soft) 82%, transparent);
  border-radius: 10px;
  text-align: center;
  padding: 18px 12px;
}

html[data-appearance="minimal"] :is(
  .inbox-scene-editor-pane,
  .inbox-scene-result-panel,
  .inbox-scene-category-card,
  .inbox-scene-choice,
  .inbox-scene-search
),
html[data-appearance="simple"] :is(
  .inbox-scene-editor-pane,
  .inbox-scene-result-panel,
  .inbox-scene-category-card,
  .inbox-scene-choice,
  .inbox-scene-search
) {
  border-radius: var(--phase5-radius);
  background: var(--phase5-surface);
  background-image: none;
  box-shadow: none;
}

html[data-appearance="minimal"] .inbox-scene-choice-copy small,
html[data-appearance="simple"] .inbox-scene-choice-copy small,
html[data-appearance="minimal"] .inbox-scene-category-card > span,
html[data-appearance="simple"] .inbox-scene-category-card > span,
html[data-appearance="minimal"] .inbox-scene-pane-title,
html[data-appearance="simple"] .inbox-scene-pane-title,
html[data-appearance="minimal"] .inbox-scene-editor-copy > small,
html[data-appearance="simple"] .inbox-scene-editor-copy > small,
html[data-appearance="minimal"] .inbox-scene-assignment-copy small,
html[data-appearance="simple"] .inbox-scene-assignment-copy small,
html[data-appearance="minimal"] .inbox-scene-section-header small,
html[data-appearance="simple"] .inbox-scene-section-header small {
  color: var(--phase5-muted);
}

html[data-appearance="minimal"] .inbox-scene-category-card,
html[data-appearance="simple"] .inbox-scene-category-card,
html[data-appearance="minimal"] .inbox-scene-choice,
html[data-appearance="simple"] .inbox-scene-choice,
html[data-appearance="minimal"] .inbox-scene-search,
html[data-appearance="simple"] .inbox-scene-search {
  color: var(--phase5-muted);
  background: transparent;
}

html[data-appearance="minimal"] .inbox-scene-choice-copy span,
html[data-appearance="simple"] .inbox-scene-choice-copy span,
html[data-appearance="minimal"] .inbox-scene-section-header strong,
html[data-appearance="simple"] .inbox-scene-section-header strong,
html[data-appearance="minimal"] .inbox-scene-category-card strong,
html[data-appearance="simple"] .inbox-scene-category-card strong,
html[data-appearance="minimal"] .inbox-scene-editor-copy strong,
html[data-appearance="simple"] .inbox-scene-editor-copy strong,
html[data-appearance="minimal"] .inbox-scene-assignment-copy strong,
html[data-appearance="simple"] .inbox-scene-assignment-copy strong,
html[data-appearance="minimal"] .inbox-scene-search,
html[data-appearance="simple"] .inbox-scene-search {
  color: var(--phase5-text);
}

html[data-appearance="minimal"] .inbox-scene-choice.is-selected,
html[data-appearance="simple"] .inbox-scene-choice.is-selected,
html[data-appearance="minimal"] .inbox-scene-category-card.is-active,
html[data-appearance="simple"] .inbox-scene-category-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--phase5-line) 64%);
  box-shadow: inset 2px 0 0 var(--accent);
}

@media (max-width: 980px) {
  .inbox-scene-editor-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .inbox-scene-category-card.is-active::after {
    display: none;
  }

  .inbox-scene-category-list {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    max-height: 168px;
  }

  .inbox-scene-choice-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .inbox-scene-section-list.is-enabled,
  .inbox-scene-section-list.is-available {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
}

@media (max-width: 700px) {
  .inbox-scene-editor-header,
  .inbox-scene-choice-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .inbox-scene-section-list.is-enabled,
  .inbox-scene-section-list.is-available {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* styles/32-inbox-custom-lexicon.css */
/* Inbox custom lexicon editor chips. */

.inbox-custom-lexicon-section {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--inbox-active-category-color) 20%, var(--line-soft) 80%);
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--inbox-active-category-color) 6%, transparent), transparent 78%),
    color-mix(in srgb, var(--surface) 98%, var(--surface-soft) 2%);
  padding: 12px;
}

.inbox-custom-lexicon-header,
.inbox-custom-lexicon-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.inbox-custom-lexicon-copy strong {
  color: var(--text);
  font-size: calc(var(--font-size) * 0.88);
  font-weight: 950;
  line-height: 1.16;
}

.inbox-custom-lexicon-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.28;
}

.inbox-custom-lexicon-editor {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.inbox-custom-term-input {
  width: 100%;
  min-height: 36px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line-soft) 84%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 98%, var(--surface-soft) 2%);
  color: var(--text);
  font-size: calc(var(--font-size) * 0.82);
  font-weight: 830;
  padding: 0 11px;
}

.inbox-custom-term-input:focus {
  border-color: color-mix(in srgb, var(--inbox-active-category-color) 36%, var(--line-soft) 64%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--inbox-active-category-color) 10%, transparent);
}

.inbox-custom-term-add {
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--inbox-active-category-color) 30%, var(--line-soft) 70%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--inbox-active-category-color) 10%, var(--surface) 90%);
  color: var(--text);
  font-size: calc(var(--font-size) * 0.78);
  font-weight: 900;
  padding: 0 14px;
  white-space: nowrap;
}

.inbox-custom-term-add:hover {
  border-color: color-mix(in srgb, var(--inbox-active-category-color) 44%, var(--line-soft) 56%);
  background: color-mix(in srgb, var(--inbox-active-category-color) 16%, var(--surface) 84%);
}

.inbox-custom-term-list {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.inbox-custom-term-chip,
.inbox-custom-term-empty {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
}

.inbox-custom-term-chip {
  max-width: 100%;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--inbox-active-category-color) 28%, var(--line-soft) 72%);
  background: color-mix(in srgb, var(--inbox-active-category-color) 9%, var(--surface) 91%);
  color: var(--text);
  padding: 0 5px 0 10px;
}

.inbox-custom-term-chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-custom-term-remove {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--text) 62%, var(--muted) 38%);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.inbox-custom-term-remove:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}

.inbox-custom-term-empty {
  border: 1px dashed color-mix(in srgb, var(--line-soft) 82%, transparent);
  color: var(--muted);
  padding: 0 10px;
}

html[data-appearance="minimal"] :is(
  .inbox-custom-lexicon-section,
  .inbox-custom-term-input,
  .inbox-custom-term-chip,
  .inbox-custom-term-add
),
html[data-appearance="simple"] :is(
  .inbox-custom-lexicon-section,
  .inbox-custom-term-input,
  .inbox-custom-term-chip,
  .inbox-custom-term-add
) {
  border-radius: var(--phase5-radius);
  background: var(--phase5-surface);
  background-image: none;
  box-shadow: none;
}

html[data-appearance="minimal"] :is(
  .inbox-custom-lexicon-copy small,
  .inbox-custom-term-empty
),
html[data-appearance="simple"] :is(
  .inbox-custom-lexicon-copy small,
  .inbox-custom-term-empty
) {
  color: var(--phase5-muted);
}

html[data-appearance="minimal"] :is(
  .inbox-custom-lexicon-copy strong,
  .inbox-custom-term-input,
  .inbox-custom-term-chip,
  .inbox-custom-term-add
),
html[data-appearance="simple"] :is(
  .inbox-custom-lexicon-copy strong,
  .inbox-custom-term-input,
  .inbox-custom-term-chip,
  .inbox-custom-term-add
) {
  color: var(--phase5-text);
}

html[data-appearance="minimal"] :is(
  .inbox-custom-term-input,
  .inbox-custom-term-add
),
html[data-appearance="simple"] :is(
  .inbox-custom-term-input,
  .inbox-custom-term-add
) {
  background: transparent;
}

@media (max-width: 700px) {
  .inbox-custom-lexicon-editor {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* styles/32-inbox-scene-flow.css */
.inbox-scene-binding-map {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(170px, 0.82fr) 30px minmax(190px, 0.92fr) minmax(260px, 1.35fr);
  align-items: stretch;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--inbox-active-category-color) 18%, var(--line-soft) 82%);
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--inbox-active-category-color) 4%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface) 99%, var(--surface-soft) 1%);
  padding: 10px;
}

.inbox-scene-flow-card {
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 78%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-soft) 4%);
  padding: 10px 12px;
}

.inbox-scene-flow-card.is-category { grid-column: 1; grid-row: 1; }
.inbox-scene-flow-card.is-library {
  grid-column: 3;
  grid-row: 1;
  border-color: color-mix(in srgb, var(--inbox-active-category-color) 28%, var(--line-soft) 72%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--inbox-active-category-color) 6%, transparent), transparent 74%), color-mix(in srgb, var(--surface) 98%, var(--surface-soft) 2%);
}

.inbox-scene-flow-step,
.inbox-scene-kicker,
.inbox-scene-step-title > span {
  width: max-content;
  min-width: 22px;
  min-height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--inbox-active-category-color) 22%, var(--line-soft) 78%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, var(--inbox-active-category-color) 12%);
  color: color-mix(in srgb, var(--inbox-active-category-color) 58%, var(--muted) 42%);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  padding: 0 7px;
}

.inbox-scene-flow-card .inbox-scene-flow-step {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 12px;
  font-size: 14px;
  padding: 0;
}

.inbox-scene-flow-card strong,
.inbox-scene-step-title strong {
  min-width: 0;
  color: var(--text);
  font-size: calc(var(--font-size) * 0.85);
  font-weight: 950;
  line-height: 1.14;
  overflow-wrap: anywhere;
}

.inbox-scene-flow-card small {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.22;
}

.inbox-scene-flow-card strong,
.inbox-scene-flow-card small {
  grid-column: 2;
}

.inbox-scene-flow-operator {
  align-self: center;
  justify-self: center;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--inbox-active-category-color) 28%, var(--line-soft) 72%);
  border-radius: 999px;
  color: color-mix(in srgb, var(--inbox-active-category-color) 70%, var(--text) 30%);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.inbox-scene-flow-operator.is-plus { grid-column: 2; grid-row: 1; }

.inbox-scene-settings-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(210px, 0.32fr) minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
}

.inbox-scene-editor-pane { grid-template-rows: auto minmax(0, 1fr); }
.inbox-scene-step-title { display: grid; gap: 4px; }
html:is([data-appearance="minimal"], [data-appearance="simple"]) :is(.inbox-scene-binding-map, .inbox-scene-flow-card) {
  border-radius: var(--phase5-radius);
  background: var(--phase5-surface);
  background-image: none;
  box-shadow: none;
}

html:is([data-appearance="minimal"], [data-appearance="simple"]) :is(.inbox-scene-flow-step, .inbox-scene-kicker, .inbox-scene-step-title > span, .inbox-scene-flow-card small) {
  color: var(--phase5-muted);
}

html:is([data-appearance="minimal"], [data-appearance="simple"]) :is(.inbox-scene-flow-card strong, .inbox-scene-step-title strong) {
  color: var(--phase5-text);
}

@media (max-width: 980px) {
  .inbox-scene-binding-map,
  .inbox-scene-settings-workspace { grid-template-columns: minmax(0, 1fr); }
  .inbox-scene-flow-card.is-category,
  .inbox-scene-flow-card.is-library,
  .inbox-scene-flow-operator.is-plus { grid-column: auto; grid-row: auto; }
  .inbox-scene-flow-operator { justify-self: start; margin-left: 12px; }
  .inbox-scene-settings-list { overflow-y: auto; padding-right: 2px; }
  .inbox-scene-settings-workspace,
  .inbox-scene-category-pane,
  .inbox-scene-editor-pane { overflow: visible; }
}

@media (max-width: 700px) {
  .inbox-scene-binding-map { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 8px; }
  .inbox-scene-flow-card { padding: 8px 9px; }
  .inbox-scene-category-list { max-height: 116px; }
  .inbox-scene-choice-list { max-height: 320px; }
  .inbox-scene-flow-operator { width: 24px; height: 24px; margin-left: 10px; justify-self: start; font-size: 18px; }
}

/* styles/32-inbox-scene-result.css */
.inbox-scene-result-panel {
  min-width: 0;
  grid-column: 4;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--inbox-active-category-color) 30%, var(--line-soft) 70%);
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--inbox-active-category-color) 10%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 99%, var(--surface-soft) 1%);
  padding: 10px 11px;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--inbox-active-category-color) 62%, transparent);
}

.inbox-scene-result-panel .inbox-scene-kicker {
  align-self: start;
}

.inbox-scene-summary-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 8px;
}

.inbox-scene-summary-label {
  color: color-mix(in srgb, var(--inbox-active-category-color) 58%, var(--muted) 42%);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.inbox-scene-summary-chip-list {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.inbox-scene-summary-chip {
  max-width: 100%;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--inbox-active-category-color) 24%, var(--line-soft) 76%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--inbox-active-category-color) 8%, transparent);
  color: color-mix(in srgb, var(--text) 72%, var(--muted) 28%);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 7px;
}

html:is([data-appearance="minimal"], [data-appearance="simple"]) .inbox-scene-result-panel {
  border-radius: var(--phase5-radius);
  background: var(--phase5-surface);
  background-image: none;
  box-shadow: none;
}

html:is([data-appearance="minimal"], [data-appearance="simple"]) .inbox-scene-summary-chip {
  color: var(--phase5-text);
}

@media (max-width: 980px) {
  .inbox-scene-result-panel { grid-column: auto; grid-row: auto; }
}

@media (max-width: 700px) {
  .inbox-scene-summary-row { grid-template-columns: minmax(0, 1fr); }
}

/* styles/33-settings-center-icons.css */
/* Settings Center icon masks. */

.settings-menu [data-settings-icon="monitor"] { --settings-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='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="layout"] { --settings-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='16' rx='2'/%3E%3Cpath d='M9 4v16M3 10h18'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="panel"] { --settings-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='16' rx='2'/%3E%3Cpath d='M15 4v16'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="tag"] { --settings-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 12l-8 8-9-9V4h7l10 8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="calendar"] { --settings-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"); }
.settings-menu [data-settings-icon="database"] { --settings-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%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="info"] { --settings-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='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="language"] { --settings-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 5h10M9 3v2M7 5c.7 4 3.3 7 7 9M13 5c-.9 4.2-3.8 7.4-8 9M14 20l4-9 4 9M15.5 17h5'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="palette"] { --settings-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='M12 3a9 9 0 0 0 0 18h1.5a2 2 0 0 0 1.4-3.4l-.2-.2a2 2 0 0 1 1.4-3.4H18a3 3 0 0 0 3-3 8 8 0 0 0-9-8z'/%3E%3Ccircle cx='7.5' cy='10.5' r='.8'/%3E%3Ccircle cx='10.5' cy='7.5' r='.8'/%3E%3Ccircle cx='14.5' cy='7.5' r='.8'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="moon"] { --settings-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='M21 12.8A8.5 8.5 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="sun"] { --settings-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='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="type"] { --settings-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 7V4h16v3M9 20h6M12 4v16'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="scale"] { --settings-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='M21 3l-6 6M21 3h-5M21 3v5M3 21l6-6M3 21h5M3 21v-5M10 3H6a3 3 0 0 0-3 3v4M14 21h4a3 3 0 0 0 3-3v-4'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="eye"] { --settings-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='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="sort"] { --settings-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='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="dots"] { --settings-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='7' cy='7' r='2'/%3E%3Ccircle cx='12' cy='7' r='2'/%3E%3Ccircle cx='17' cy='7' r='2'/%3E%3Ccircle cx='7' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='17' cy='12' r='2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='12' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="link"] { --settings-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='M10 13a5 5 0 0 0 7.1 0l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1M14 11a5 5 0 0 0-7.1 0l-2 2A5 5 0 0 0 12 20.1l1.1-1.1'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="key"] { --settings-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='7.5' cy='14.5' r='4.5'/%3E%3Cpath d='M11 11l8-8M15 7l2 2M17 5l2 2'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="file"] { --settings-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='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="plus"] { --settings-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'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="refresh"] { --settings-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='M21 12a9 9 0 0 1-15.3 6.4L3 16M3 12a9 9 0 0 1 15.3-6.4L21 8M3 16v5h5M21 8V3h-5'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="download"] { --settings-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='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="copy"] { --settings-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='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="upload"] { --settings-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='M12 21V9M7 14l5-5 5 5M5 3h14'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="trash"] { --settings-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='M3 6h18M8 6V4h8v2M6 6l1 15h10l1-15M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="edit"] { --settings-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='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="clock"] { --settings-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='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="quote"] { --settings-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 7h5v5c0 3-1.7 5.4-5 7l-1.5-2.3C7.4 15.7 8.4 14.5 8.5 13H5V7h2zM17 7h5v5c0 3-1.7 5.4-5 7l-1.5-2.3c1.9-1 2.9-2.2 3-3.7H15V7h2z'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="timer"] { --settings-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='12' cy='13' r='8'/%3E%3Cpath d='M9 2h6M12 13l3-3M19 5l-2 2'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="checks"] { --settings-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 6L9 17l-5-5M22 12l-5 5-2-2'/%3E%3C/svg%3E"); }
.settings-menu [data-settings-icon="wand"] { --settings-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='M15 4l5 5M14 5l-9 9-2 6 6-2 9-9M5 3v4M3 5h4M19 14v4M17 16h4'/%3E%3C/svg%3E"); }

/* styles/33-settings-center.css */
/* Settings center redesign: classic-only settings layout, independent of appearance theme. */

.settings-menu {
  --settings-center-bg: color-mix(in srgb, var(--surface) 94%, var(--surface-soft) 6%);
  --settings-center-panel: color-mix(in srgb, var(--surface) 92%, var(--surface-soft) 8%);
  --settings-center-soft: color-mix(in srgb, var(--surface-soft) 74%, var(--surface) 26%);
  --settings-center-line: color-mix(in srgb, var(--line-soft) 78%, transparent);
  --settings-center-line-strong: color-mix(in srgb, var(--line) 76%, transparent);
  --settings-center-muted: color-mix(in srgb, var(--muted) 86%, transparent);
  --settings-center-hover: color-mix(in srgb, var(--blue) 8%, var(--surface) 92%);
  --settings-center-active: color-mix(in srgb, var(--blue) 13%, var(--surface) 87%);
  --settings-center-accent: color-mix(in srgb, var(--blue) 74%, var(--text) 26%);
  --settings-center-window-height: min(840px, calc(100vh - 36px));
  --settings-center-body-height: calc(var(--settings-center-window-height) - 144px);
  width: min(1180px, calc(100vw - 44px));
  height: var(--settings-center-window-height);
  max-height: var(--settings-center-window-height);
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 0;
  padding: 0;
  border-color: var(--settings-center-line-strong);
  border-radius: 22px;
  background: var(--settings-center-bg);
  box-shadow:
    0 24px 58px rgba(15, 23, 42, 0.18),
    0 0 0 100vmax rgba(15, 23, 42, 0.24);
  backdrop-filter: blur(18px) saturate(1.04);
  overflow: hidden;
  scrollbar-gutter: auto;
}

:root[data-theme="dark"] .settings-menu {
  --settings-center-bg: #111c26;
  --settings-center-panel: #13212d;
  --settings-center-soft: #162636;
  --settings-center-line: rgba(148, 163, 184, 0.14);
  --settings-center-line-strong: rgba(148, 163, 184, 0.2);
  --settings-center-muted: rgba(203, 213, 225, 0.72);
  --settings-center-hover: rgba(96, 165, 250, 0.08);
  --settings-center-active: rgba(96, 165, 250, 0.16);
  --settings-center-accent: #78b8ff;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.36),
    0 0 0 100vmax rgba(4, 8, 14, 0.46);
}

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

.settings-menu-header {
  position: relative;
  top: auto;
  grid-column: auto;
  min-height: 70px;
  margin: 0;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--settings-center-line);
  background: color-mix(in srgb, var(--settings-center-bg) 94%, transparent);
  backdrop-filter: none;
}

.settings-menu-header strong {
  font-size: 24px;
  font-weight: 860;
  letter-spacing: 0;
}

.settings-close-button {
  width: 40px;
  height: 40px;
  border-color: var(--settings-center-line);
  border-radius: 12px;
  background: var(--settings-center-soft);
  box-shadow: none;
}

.settings-close-button:hover,
.settings-close-button:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 36%, var(--settings-center-line) 64%);
  background: var(--settings-center-hover);
}

.settings-search {
  grid-column: auto;
  width: min(440px, calc(100% - 48px));
  margin: 14px 24px 16px;
}

:root .settings-menu .settings-search-field input {
  -webkit-appearance: none;
  appearance: none;
  min-height: 42px;
  border-color: var(--settings-center-line);
  border-radius: 13px;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 650;
}

:root .settings-menu .settings-search-field input:focus {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--settings-center-line) 58%);
  background: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}

.settings-search-clear {
  border-color: var(--settings-center-line);
  background: var(--settings-center-soft);
  box-shadow: none;
}

.settings-search-status {
  color: var(--settings-center-muted);
  font-size: 12px;
  font-weight: 650;
}

:root .settings-menu .settings-search-empty {
  grid-column: auto;
  width: auto;
  margin: 0 24px 16px;
  border-color: var(--settings-center-line);
  border-radius: 14px;
  background: transparent;
  background-color: transparent;
}

.settings-center-layout {
  min-height: 0;
  height: var(--settings-center-body-height);
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  border-top: 1px solid var(--settings-center-line);
  overflow: hidden;
}

.settings-section-nav {
  min-height: 0;
  height: var(--settings-center-body-height);
  max-height: var(--settings-center-body-height);
  padding: 16px 12px;
  border-right: 1px solid var(--settings-center-line);
  background: color-mix(in srgb, var(--settings-center-soft) 62%, transparent);
  overflow: auto;
}

.settings-section-nav-item {
  position: relative;
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 3px 12px;
  justify-items: stretch;
  align-content: center;
  margin: 0 0 4px;
  padding: 10px 12px 10px 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--settings-center-muted);
  text-align: left;
  cursor: pointer;
}

.settings-section-nav-icon {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--settings-center-line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--settings-center-panel) 74%, transparent);
  color: color-mix(in srgb, var(--settings-center-accent) 58%, var(--settings-center-muted) 42%);
}

.settings-section-nav-icon {
  grid-row: 1 / span 2;
  align-self: center;
}

.settings-section-nav-icon::before {
  content: "";
  width: var(--settings-icon-size, 18px);
  height: var(--settings-icon-size, 18px);
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--settings-icon-mask) center / contain no-repeat;
  mask: var(--settings-icon-mask) center / contain no-repeat;
}

.settings-section-nav-item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
}

.settings-section-nav-title {
  grid-column: 2;
  color: inherit;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.2;
}

.settings-section-nav-hint {
  grid-column: 2;
  color: color-mix(in srgb, var(--settings-center-muted) 78%, transparent);
  font-size: 11px;
  font-weight: 610;
  line-height: 1.25;
}

.settings-section-nav-item:hover,
.settings-section-nav-item:focus-visible {
  outline: 0;
  border-color: var(--settings-center-line);
  background: var(--settings-center-hover);
  color: var(--text);
}

.settings-section-nav-item:hover .settings-section-nav-icon,
.settings-section-nav-item:focus-visible .settings-section-nav-icon {
  border-color: color-mix(in srgb, var(--blue) 24%, var(--settings-center-line) 76%);
  background: color-mix(in srgb, var(--blue) 7%, var(--settings-center-panel) 93%);
  color: color-mix(in srgb, var(--settings-center-accent) 70%, var(--text) 30%);
}

.settings-section-nav-item.is-active {
  border-color: color-mix(in srgb, var(--blue) 18%, var(--settings-center-line) 82%);
  background: var(--settings-center-active);
  color: var(--text);
}

.settings-section-nav-item.is-active .settings-section-nav-icon {
  border-color: color-mix(in srgb, var(--settings-center-accent) 36%, var(--settings-center-line) 64%);
  background: color-mix(in srgb, var(--settings-center-accent) 14%, var(--settings-center-panel) 86%);
  color: var(--settings-center-accent);
}

.settings-section-nav-item.is-active::before,
.settings-section-nav-item.has-search-match::before {
  background: var(--settings-center-accent);
}

.settings-section-nav-item.has-search-match:not(.is-active) {
  color: var(--text);
}

/* styles/33-settings-center-content.css */
/* Settings Center content controls. */

.settings-content :is(.mini-field, .toggle-row, .settings-category-summary, .settings-advanced > summary, .settings-info-row, .settings-storage-button, .settings-row-button, .settings-add-category-button, .right-rail-widget-settings-icon, .calendar-feed-row-actions button, .appearance-segmented button)[data-settings-icon]::before {
  content: "";
  width: var(--settings-icon-size, 18px);
  height: var(--settings-icon-size, 18px);
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--settings-icon-mask) center / contain no-repeat;
  mask: var(--settings-icon-mask) center / contain no-repeat;
}

.settings-content {
  min-height: 0;
  height: var(--settings-center-body-height);
  max-height: var(--settings-center-body-height);
  padding: 22px 26px 28px;
  overflow: auto;
  scrollbar-gutter: stable;
  background: transparent;
}

.settings-content > .settings-group {
  width: min(100%, 820px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:root .settings-menu .settings-content > .settings-group,
:root:not([data-theme="dark"]) .settings-menu .settings-content > .settings-group,
:root[data-theme="dark"] .settings-menu .settings-content > .settings-group {
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}

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

.settings-menu.is-settings-search-mode .settings-content {
  display: grid;
  gap: 28px;
}

.settings-menu.is-settings-search-mode .settings-content > .settings-group {
  padding: 0 0 22px;
  border-bottom: 1px solid var(--settings-center-line);
}

.settings-content > .settings-group h2 {
  color: var(--text);
  font-size: 22px;
  font-weight: 850;
  letter-spacing: 0;
}

.settings-content > .settings-group .settings-group-description {
  max-width: 620px;
  margin: -4px 0 12px;
  color: var(--settings-center-muted);
  font-size: 13px;
  font-weight: 610;
  line-height: 1.45;
}

.settings-content .mini-field,
.settings-content .toggle-row,
.settings-content .settings-all-tasks-row,
.settings-content .settings-category-summary,
.settings-content .right-rail-widget-settings-row,
.settings-content .calendar-feed-row,
.settings-content .settings-info-row {
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid var(--settings-center-line);
  border-radius: 14px;
  background: var(--settings-center-panel);
  box-shadow: none;
}

.settings-content .mini-field[data-settings-icon],
.settings-content .settings-info-row[data-settings-icon] {
  display: grid;
  grid-template-columns: 24px minmax(86px, auto) minmax(0, 1fr);
  align-items: center;
  column-gap: 11px;
}

.settings-content .settings-range-row[data-settings-icon] {
  grid-template-columns: 24px minmax(86px, auto) minmax(0, 1fr) auto;
}

.settings-content .completion-mode-field[data-settings-icon],
.settings-content .language-field[data-settings-icon],
.settings-content .theme-mode-field[data-settings-icon],
.settings-content .minimal-dark-tone-field[data-settings-icon],
.settings-content .appearance-field[data-settings-icon],
.settings-content .clock-signature-field[data-settings-icon] {
  grid-template-columns: 24px minmax(92px, auto) minmax(220px, 1fr);
}

.settings-content :is(.mini-field, .toggle-row, .settings-category-summary, .settings-advanced > summary, .settings-info-row)[data-settings-icon]::before {
  --settings-icon-size: 18px;
  justify-self: center;
  color: color-mix(in srgb, var(--settings-center-accent) 56%, var(--settings-center-muted) 44%);
}

.settings-content .mini-field[data-settings-icon] > :is(span, strong):first-of-type,
.settings-content .settings-info-row[data-settings-icon] > span:first-of-type {
  grid-column: 2;
}

.settings-content .mini-field[data-settings-icon] > :not(span):not(strong):not(:first-child),
.settings-content .settings-info-row[data-settings-icon] > strong {
  grid-column: 3;
}

.settings-content .calendar-feed-field[data-settings-icon],
.settings-content .calendar-feed-paste-field[data-settings-icon] {
  grid-template-columns: 24px minmax(0, 1fr);
}

.settings-content :is(.calendar-feed-field, .calendar-feed-paste-field)[data-settings-icon] > span:first-of-type {
  grid-column: 2;
}

.settings-content :is(.calendar-feed-field, .calendar-feed-paste-field)[data-settings-icon] > :is(input, textarea, .calendar-feed-color-control) {
  grid-column: 1 / -1;
}

.settings-content .toggle-row[data-settings-icon] {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 11px;
}

.settings-content .toggle-row[data-settings-icon] > span:first-of-type {
  grid-column: 2;
}

.settings-content .toggle-row[data-settings-icon] > input {
  grid-column: 3;
}

.settings-content .settings-category-summary[data-settings-icon],
.settings-content .settings-advanced > summary[data-settings-icon] {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  column-gap: 11px;
}

.settings-content :is(.settings-category-summary, .settings-advanced > summary)[data-settings-icon] > :is(span, small) {
  grid-column: 2;
}

.settings-content .mini-field:hover,
.settings-content .toggle-row:hover,
.settings-content .settings-all-tasks-row:hover,
.settings-content .settings-category-summary:hover,
.settings-content .right-rail-widget-settings-row:hover,
.settings-content .calendar-feed-row:hover {
  border-color: color-mix(in srgb, var(--blue) 20%, var(--settings-center-line) 80%);
  background: color-mix(in srgb, var(--settings-center-hover) 72%, var(--settings-center-panel) 28%);
}

.settings-content .mini-field > span,
.settings-content .toggle-row > span,
.settings-content .settings-category-summary span,
.settings-content .right-rail-widget-settings-copy strong {
  color: var(--text);
  font-weight: 760;
}

.settings-content .settings-category-summary small,
.settings-content .right-rail-widget-settings-copy span,
.settings-content .calendar-feed-body small {
  color: var(--settings-center-muted);
  font-weight: 600;
}

.settings-content .appearance-segmented,
.settings-content .language-segmented,
.settings-content .completion-mode-segmented {
  border-color: var(--settings-center-line);
  background: var(--settings-center-soft);
  box-shadow: none;
}

.settings-content .completion-mode-segmented {
  width: 100%;
  max-width: 360px;
  justify-self: end;
}

.settings-content .settings-category-panel .settings-category-summary {
  min-height: auto;
  padding: 2px 2px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.settings-content .settings-category-panel .settings-category-summary:hover {
  border-color: transparent;
  background: transparent;
}

.settings-content .settings-category-panel .settings-category-summary > :is(span, small) {
  background: transparent;
}

.settings-content .settings-category-panel .settings-category-summary[data-settings-icon]::before {
  color: var(--settings-center-muted);
}

.settings-content .settings-all-tasks-copy span,
.settings-content .settings-calendar-visibility-note {
  color: var(--settings-center-muted);
}

.settings-content .settings-calendar-visibility-note {
  border: 1px solid var(--settings-center-line);
  background: var(--settings-center-soft);
  box-shadow: none;
}

.settings-content .appearance-segmented button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--settings-center-muted);
  box-shadow: none;
}

.settings-content .appearance-segmented button[data-settings-icon]::before {
  --settings-icon-size: 15px;
}

.settings-content .appearance-segmented button:hover {
  background: color-mix(in srgb, var(--settings-center-hover) 80%, transparent);
  color: var(--text);
}

.settings-content .appearance-segmented button.is-active {
  background: color-mix(in srgb, var(--settings-center-accent) 14%, var(--surface) 86%);
  color: color-mix(in srgb, var(--settings-center-accent) 82%, var(--text) 18%);
  box-shadow: none;
}

:root[data-theme="dark"] .settings-content .appearance-segmented button.is-active {
  background: rgba(120, 184, 255, 0.15);
  color: #d9ebff;
}

.settings-content input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: color-mix(in srgb, var(--settings-center-muted) 18%, var(--settings-center-soft) 82%);
  box-shadow: none;
}

.settings-content input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 3px solid var(--settings-center-panel);
  background: var(--settings-center-accent);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.settings-content input[type="range"]::-moz-range-track {
  height: 6px;
  background: color-mix(in srgb, var(--settings-center-muted) 18%, var(--settings-center-soft) 82%);
  box-shadow: none;
}

.settings-content input[type="range"]::-moz-range-thumb {
  border: 3px solid var(--settings-center-panel);
  background: var(--settings-center-accent);
  box-shadow: none;
}

.settings-content .settings-range-value {
  background: var(--settings-center-soft);
  color: var(--settings-center-muted);
  box-shadow: inset 0 0 0 1px var(--settings-center-line);
}

.settings-content .toggle-row input {
  width: 48px;
  min-width: 48px;
  height: 28px;
  min-height: 28px;
  background: color-mix(in srgb, var(--settings-center-muted) 15%, var(--settings-center-soft) 85%);
  box-shadow: inset 0 0 0 1px var(--settings-center-line-strong);
}

.settings-content .toggle-row input::before {
  width: 22px;
  height: 22px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16);
}

.settings-content .toggle-row input:checked {
  background: color-mix(in srgb, var(--blue) 76%, var(--settings-center-soft) 24%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 42%, transparent);
}

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

.calendar-feed-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.settings-advanced {
  border: 1px solid var(--settings-center-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--settings-center-soft) 70%, transparent);
}

.settings-advanced > summary {
  min-height: 54px;
  display: grid;
  gap: 2px;
  align-content: center;
  padding: 10px 42px 10px 14px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  position: relative;
}

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

.settings-advanced > summary::after {
  content: "";
  position: absolute;
  right: 17px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--settings-center-accent);
  border-bottom: 2px solid var(--settings-center-accent);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 160ms ease;
}

.settings-advanced[open] > summary::after {
  transform: translateY(-35%) rotate(225deg);
}

.settings-advanced-title {
  font-size: 13px;
  font-weight: 760;
}

.settings-advanced-hint {
  color: var(--settings-center-muted);
  font-size: 11px;
  font-weight: 600;
}

.settings-advanced-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.settings-content .calendar-feed-field input:not([type="color"]),
.settings-content .calendar-feed-paste-field textarea,
.settings-content .clock-signature-field input {
  border-color: var(--settings-center-line);
  border-radius: 12px;
  background: var(--settings-center-bg);
  box-shadow: none;
}

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

.settings-storage-actions,
.calendar-feed-actions {
  gap: 10px;
}

.settings-storage-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: var(--settings-center-line);
  border-radius: 12px;
  background: var(--settings-center-panel);
  color: var(--text);
  box-shadow: none;
  font-weight: 760;
}

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

.settings-storage-button.is-primary {
  border-color: color-mix(in srgb, var(--blue) 42%, transparent);
  background: color-mix(in srgb, var(--blue) 84%, var(--settings-center-panel) 16%);
  color: #fff;
}

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

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

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

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

.settings-storage-button[data-settings-icon]::before,
.calendar-feed-row-actions button[data-settings-icon]::before,
.settings-content .settings-row-button[data-settings-icon]::before,
.settings-content .settings-add-category-button[data-settings-icon]::before {
  --settings-icon-size: 16px;
  color: currentColor;
  opacity: 0.84;
}

.settings-content .settings-row-button[data-settings-icon],
.settings-content .settings-add-category-button[data-settings-icon],
.calendar-feed-row-actions button[data-settings-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.settings-content .calendar-feed-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  background: color-mix(in srgb, var(--settings-center-panel) 94%, var(--calendar-feed-color) 6%);
}

.settings-content .calendar-feed-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--calendar-feed-color) 12%, transparent);
}

.settings-content .calendar-feed-row-actions button {
  border-color: var(--settings-center-line);
  background: color-mix(in srgb, var(--settings-center-soft) 86%, transparent);
  color: var(--text);
}

.settings-content .settings-category-drag-handle[data-settings-icon]::before {
  --settings-icon-size: 17px;
  left: 50%;
  top: 50%;
  width: var(--settings-icon-size);
  height: var(--settings-icon-size);
  display: block;
  color: currentColor;
  background: currentColor;
  transform: translate(-50%, -50%);
  -webkit-mask: var(--settings-icon-mask) center / contain no-repeat;
  mask: var(--settings-icon-mask) center / contain no-repeat;
}

.settings-content button.settings-row-button.settings-color-button[data-settings-icon]::before {
  content: none;
  display: none;
}

.settings-content .right-rail-widget-settings-list,
.settings-content .settings-category-list,
.settings-content .settings-view-list {
  gap: 8px;
}

.settings-content .right-rail-widget-settings-row {
  grid-template-columns: auto 34px minmax(0, 1fr) auto;
}

.settings-content .right-rail-widget-settings-icon {
  width: 32px;
  height: 32px;
}

.settings-content .settings-category-dropdown-body {
  border-color: var(--settings-center-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--settings-center-soft) 70%, transparent);
  box-shadow: none;
}

/* styles/33-settings-center-responsive.css */
/* Settings Center responsive layout. */

@media (max-width: 768px) {
  .settings-menu {
    --settings-center-window-height: calc(100vh - 16px);
    --settings-center-body-height: calc(var(--settings-center-window-height) - 205px);
    width: calc(100vw - 16px);
    height: var(--settings-center-window-height);
    max-height: var(--settings-center-window-height);
    border-radius: 18px;
  }

  .settings-menu-header {
    min-height: 62px;
    padding: 16px 16px 12px;
  }

  .settings-search {
    width: calc(100% - 32px);
    margin: 12px 16px 12px;
  }

  .settings-center-layout {
    height: calc(var(--settings-center-window-height) - 128px);
    grid-template-columns: 1fr;
  }

  .settings-section-nav {
    height: auto;
    max-height: none;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--settings-center-line);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .settings-section-nav-item {
    width: min(216px, 62vw);
    min-width: min(216px, 62vw);
    margin: 0;
  }

  .settings-content {
    height: var(--settings-center-body-height);
    max-height: var(--settings-center-body-height);
    padding: 18px 16px 22px;
    overflow-x: hidden;
  }

  .settings-content > .settings-group {
    width: 100%;
    max-width: 100%;
  }

  .settings-content > .settings-group h2 {
    font-size: 25px;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .settings-content > .settings-group .settings-group-description {
    max-width: 100%;
  }

  .settings-content .mini-field[data-settings-icon],
  .settings-content .settings-info-row[data-settings-icon] {
    grid-template-columns: 24px minmax(0, 1fr);
    row-gap: 10px;
  }

  .settings-content .mini-field[data-settings-icon] > :is(span, strong):first-of-type,
  .settings-content .settings-info-row[data-settings-icon] > span:first-of-type {
    grid-column: 2;
  }

  .settings-content .mini-field[data-settings-icon] > :not(span):not(strong):not(:first-child),
  .settings-content .settings-info-row[data-settings-icon] > strong {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .settings-content .settings-range-row[data-settings-icon] {
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }

  .settings-content .settings-range-row[data-settings-icon] > input[type="range"] {
    grid-column: 1 / -1;
  }

  .settings-content .settings-range-row[data-settings-icon] > .settings-range-value {
    grid-column: 3;
    grid-row: 1;
    width: auto;
  }

  .settings-content :is(.appearance-segmented, .language-segmented, .theme-mode-segmented, .minimal-dark-tone-segmented, .completion-mode-segmented) {
    width: 100%;
    min-width: 0;
  }

  .settings-content .appearance-segmented button {
    min-width: 0;
    padding: 0 6px;
    font-size: 12.5px;
  }

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

  .calendar-feed-settings {
    grid-template-columns: 1fr;
  }

  .settings-storage-actions,
  .calendar-feed-actions {
    grid-template-columns: 1fr;
  }
}

/* styles/33-settings-center-appearance-guardrails.css */
/* Settings center appearance guardrails: keep Settings Center consistent under minimal/simple appearance. */

/* Guardrail: later Settings Center rules must win even when minimal/simple add high-specificity settings overrides. */
:root[data-appearance="minimal"] .settings-menu,
:root[data-appearance="simple"] .settings-menu {
  width: min(1180px, calc(100vw - 44px));
  height: var(--settings-center-window-height);
  max-height: var(--settings-center-window-height);
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 0;
  padding: 0;
  border-color: var(--settings-center-line-strong);
  border-radius: 22px;
  background: var(--settings-center-bg);
  box-shadow:
    0 24px 58px rgba(15, 23, 42, 0.18),
    0 0 0 100vmax rgba(15, 23, 42, 0.24);
  backdrop-filter: blur(18px) saturate(1.04);
  overflow: hidden;
}

html[data-theme="dark"][data-appearance="minimal"] .settings-menu,
html[data-theme="dark"][data-appearance="simple"] .settings-menu {
  background: var(--settings-center-bg);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.36),
    0 0 0 100vmax rgba(4, 8, 14, 0.46);
}

:root[data-appearance="minimal"] .settings-menu-header,
:root[data-appearance="simple"] .settings-menu-header {
  position: relative;
  top: auto;
  min-height: 70px;
  margin: 0;
  padding: 20px 24px 16px;
  border-bottom-color: var(--settings-center-line);
  background: color-mix(in srgb, var(--settings-center-bg) 94%, transparent);
  backdrop-filter: none;
}

:root[data-appearance="minimal"] .settings-menu .settings-content > .settings-group,
:root[data-appearance="simple"] .settings-menu .settings-content > .settings-group,
:root:not([data-theme="dark"])[data-appearance="minimal"] .settings-menu .settings-content > .settings-group,
:root:not([data-theme="dark"])[data-appearance="simple"] .settings-menu .settings-content > .settings-group,
:root[data-theme="dark"][data-appearance="minimal"] .settings-menu .settings-content > .settings-group,
:root[data-theme="dark"][data-appearance="simple"] .settings-menu .settings-content > .settings-group {
  width: min(100%, 820px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-appearance="minimal"] .settings-menu .settings-content :is(.mini-field, .toggle-row),
:root[data-appearance="simple"] .settings-menu .settings-content :is(.mini-field, .toggle-row) {
  border-color: var(--settings-center-line);
  border-radius: 14px;
  background: var(--settings-center-panel);
  box-shadow: none;
}

:root[data-appearance="minimal"] .settings-menu .settings-content :is(.mini-field, .toggle-row):hover,
:root[data-appearance="simple"] .settings-menu .settings-content :is(.mini-field, .toggle-row):hover {
  border-color: color-mix(in srgb, var(--blue) 20%, var(--settings-center-line) 80%);
  background: color-mix(in srgb, var(--settings-center-hover) 72%, var(--settings-center-panel) 28%);
}

:root[data-appearance="minimal"] .settings-menu .settings-search-field input,
:root[data-appearance="simple"] .settings-menu .settings-search-field input {
  border-color: var(--settings-center-line);
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}

:root[data-appearance="minimal"] .settings-menu .settings-search-field input:focus,
:root[data-appearance="simple"] .settings-menu .settings-search-field input:focus {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--settings-center-line) 58%);
  background: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}

:root[data-appearance="minimal"] .settings-menu .settings-search-empty,
:root[data-appearance="simple"] .settings-menu .settings-search-empty {
  background: transparent;
  background-color: transparent;
}

:root[data-appearance="minimal"] .settings-menu .appearance-segmented,
:root[data-appearance="simple"] .settings-menu .appearance-segmented,
:root[data-appearance="minimal"] .settings-menu .theme-mode-segmented,
:root[data-appearance="simple"] .settings-menu .theme-mode-segmented,
:root[data-appearance="minimal"] .settings-menu .language-segmented,
:root[data-appearance="simple"] .settings-menu .language-segmented,
:root[data-appearance="minimal"] .settings-menu .completion-mode-segmented,
:root[data-appearance="simple"] .settings-menu .completion-mode-segmented {
  border-color: var(--settings-center-line);
  background: var(--settings-center-panel);
  box-shadow: none;
}

:root[data-appearance="minimal"] .settings-menu .settings-category-summary,
:root[data-appearance="simple"] .settings-menu .settings-category-summary {
  border-color: var(--settings-center-line);
  border-radius: 14px;
  background: var(--settings-center-panel);
  box-shadow: none;
}

:root[data-appearance="minimal"] .settings-menu .settings-category-dropdown-body,
:root[data-appearance="simple"] .settings-menu .settings-category-dropdown-body {
  border-color: var(--settings-center-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--settings-center-soft) 70%, transparent);
  box-shadow: none;
}

@media (min-width: 721px) {
  :root[data-appearance="minimal"] .settings-menu,
  :root[data-appearance="simple"] .settings-menu {
    gap: 0;
    padding: 0;
  }
}

@media (max-width: 760px) {
  :root[data-appearance="minimal"] .settings-menu,
  :root[data-appearance="simple"] .settings-menu {
    width: calc(100vw - 16px);
    height: var(--settings-center-window-height);
    max-height: var(--settings-center-window-height);
    border-radius: 18px;
  }

  :root[data-appearance="minimal"] .settings-menu-header,
  :root[data-appearance="simple"] .settings-menu-header {
    min-height: 62px;
    padding: 16px 16px 12px;
  }
}

@media (max-width: 760px) {
  :root .settings-menu .settings-content .theme-mode-field.mini-field[data-settings-icon],
  :root[data-appearance="minimal"] .settings-menu .settings-content .theme-mode-field.mini-field[data-settings-icon],
  :root[data-appearance="simple"] .settings-menu .settings-content .theme-mode-field.mini-field[data-settings-icon] {
    grid-template-columns: 24px minmax(0, 1fr);
    row-gap: 10px;
  }

  :root .settings-menu .settings-content .theme-mode-field.mini-field[data-settings-icon] > span:first-of-type,
  :root[data-appearance="minimal"] .settings-menu .settings-content .theme-mode-field.mini-field[data-settings-icon] > span:first-of-type,
  :root[data-appearance="simple"] .settings-menu .settings-content .theme-mode-field.mini-field[data-settings-icon] > span:first-of-type {
    grid-column: 2;
  }

  :root .settings-menu .settings-content .theme-mode-field.mini-field[data-settings-icon] > .theme-mode-segmented,
  :root[data-appearance="minimal"] .settings-menu .settings-content .theme-mode-field.mini-field[data-settings-icon] > .theme-mode-segmented,
  :root[data-appearance="simple"] .settings-menu .settings-content .theme-mode-field.mini-field[data-settings-icon] > .theme-mode-segmented {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
}

/* styles/33-settings-center-account.css */
.settings-account-group {
  min-width: 0;
}

#tendAccountIsland {
  display: block;
  min-width: 0;
  min-height: 220px;
  contain: layout paint style;
}

#tendAccountIsland[aria-busy="true"] {
  cursor: progress;
}

@media (max-width: 700px) {
  #tendAccountIsland {
    min-height: 180px;
  }
}

/* styles/34-settings-appearance-dropdown.css */
/* Shared Settings appearance dropdown. */

.appearance-field {
  overflow: visible;
}

.appearance-dropdown {
  position: relative;
  min-width: min(232px, 100%);
}

.appearance-dropdown-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--control-bg);
  color: var(--control-text);
  box-shadow: var(--control-shadow);
  font: inherit;
  font-weight: 750;
  text-align: left;
}

.appearance-dropdown-button:hover {
  border-color: var(--control-border-hover);
  background: var(--control-bg-hover);
  box-shadow: var(--control-shadow-hover);
}

.appearance-dropdown-button:focus-visible,
.appearance-dropdown-menu [role="option"]:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.appearance-dropdown-chevron {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--motion-fast) var(--ease-smooth);
}

.appearance-dropdown.is-open .appearance-dropdown-chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}

.appearance-dropdown-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 8px);
  right: 0;
  width: max(100%, 210px);
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-control) + 3px);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-popover);
}

.appearance-dropdown-menu [role="option"] {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-compact);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
}

.appearance-dropdown-menu [role="option"]:hover,
.appearance-dropdown-menu [aria-selected="true"] {
  background: var(--control-bg-active);
  color: var(--text);
}

@media (max-width: 768px) {
  .appearance-dropdown {
    width: 100%;
  }

  .appearance-dropdown-menu {
    right: auto;
    left: 0;
    width: 100%;
  }
}

/* styles/34-mobile-task-filter.css */
/* Phone Tasks category filter. */

.mobile-task-filter {
  display: none;
}

@media (max-width: 768px) {
  .mobile-task-filter {
    position: relative;
    display: block;
    margin-left: auto;
  }

  #mobileTaskFilterButton {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 132px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--category-color, #81958b) 38%, var(--border));
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 700;
  }

  .mobile-task-filter-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
  }

  .mobile-task-filter.is-open .mobile-task-filter-chevron {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  #mobileTaskFilterMenu {
    position: absolute;
    z-index: 45;
    top: calc(100% + 8px);
    right: 0;
    width: min(260px, calc(100vw - 40px));
    max-height: min(50vh, 360px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 18px 46px rgba(25, 42, 34, 0.18);
  }

  .mobile-task-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
  }

  .mobile-task-filter-option:hover,
  .mobile-task-filter-option:focus-visible,
  .mobile-task-filter-option.is-selected {
    background: color-mix(in srgb, var(--category-color, #81958b) 16%, transparent);
  }

  .mobile-task-filter-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--category-color, #81958b);
  }
}

/* styles/35-dashboard-golden-clarity.css */
/* Dashboard-only visual hierarchy pass: golden proportions, quieter chrome, and clearer semantics. */

:root {
  --dashboard-sidebar-width: var(--app-sidebar-width);
  --dashboard-right-rail-width: clamp(264px, 16.18vw, 324px);
  --dashboard-focus-color: var(--blue);
  --dashboard-focus-soft: color-mix(in srgb, var(--dashboard-focus-color) 12%, transparent);
  --dashboard-focus-line: color-mix(in srgb, var(--dashboard-focus-color) 72%, var(--line-soft) 28%);
  --dashboard-blue-soft: color-mix(in srgb, var(--blue) 12%, transparent);
  --dashboard-danger-soft: color-mix(in srgb, #ff3b30 10%, transparent);
  --dashboard-line: color-mix(in srgb, var(--line-soft) 58%, transparent);
  --dashboard-line-faint: color-mix(in srgb, var(--line-soft) 34%, transparent);
  --dashboard-panel: color-mix(in srgb, var(--surface-panel) 84%, transparent);
  --dashboard-panel-muted: color-mix(in srgb, var(--surface-panel-muted) 76%, transparent);
  --dashboard-card: color-mix(in srgb, var(--surface-card) 88%, transparent);
}

:root[data-theme="dark"] {
  --dashboard-focus-color: var(--blue);
  --dashboard-panel: color-mix(in srgb, var(--surface-panel) 72%, transparent);
  --dashboard-panel-muted: color-mix(in srgb, var(--surface-panel-muted) 64%, transparent);
  --dashboard-card: color-mix(in srgb, var(--surface-card) 74%, transparent);
  --dashboard-line: color-mix(in srgb, var(--line-soft) 46%, transparent);
  --dashboard-line-faint: color-mix(in srgb, var(--line-soft) 24%, transparent);
}

:root[data-appearance="minimal"] {
  --dashboard-panel: color-mix(in srgb, var(--surface-panel) 60%, transparent);
  --dashboard-panel-muted: color-mix(in srgb, var(--surface-panel-muted) 48%, transparent);
  --dashboard-card: color-mix(in srgb, var(--surface-card) 64%, transparent);
  --dashboard-line: color-mix(in srgb, var(--line-soft) 34%, transparent);
  --dashboard-line-faint: color-mix(in srgb, var(--line-soft) 20%, transparent);
}

@media (min-width: 981px) {
  .desktop-shell: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):not(.is-project-tree-view) {
    grid-template-columns: var(--dashboard-sidebar-width) minmax(0, 1fr);
  }

  .desktop-shell:is(.is-calendar-view, .is-archive-hub-view, .is-favor-view, .is-count-days-view, .is-time-tools-view, .is-inbox-view, .is-project-tree-view) {
    grid-template-columns: var(--dashboard-sidebar-width) minmax(0, 1fr);
  }

  .desktop-shell: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):not(.is-project-tree-view) .workspace {
    --workspace-right-rail-width: var(--dashboard-right-rail-width);
    padding: 13px 16px 15px;
    gap: 9px;
  }

  .desktop-shell: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):not(.is-project-tree-view) .board-grid {
    grid-template-columns: minmax(0, 1.618fr) minmax(var(--dashboard-right-rail-width), 0.48fr);
    gap: 10px;
  }
}

.sidebar {
  border-right-color: var(--dashboard-line-faint);
}

.brand {
  min-height: 78px;
  align-content: center;
}

.brand-logo {
  width: min(184px, 74%);
  max-height: 66px;
  opacity: 0.78;
  filter: saturate(0.88);
}

:root[data-theme="dark"] .brand-logo {
  opacity: 0.72;
}

.category-list,
.view-list {
  gap: 5px;
}

:is(.category-card, .view-card) {
  min-height: 34px;
  border-color: transparent;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
}

:is(.category-card, .view-card):hover,
:is(.category-card, .view-card):focus-visible {
  border-color: var(--dashboard-line-faint);
  background: color-mix(in srgb, var(--surface-soft) 56%, transparent);
}

:is(.category-card, .view-card).is-active {
  border-color: color-mix(in srgb, var(--blue) 34%, transparent);
  background: linear-gradient(90deg, var(--dashboard-blue-soft), transparent 78%);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--blue) 74%, var(--text) 26%);
}

.category-dot {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 9%, transparent);
}

:is(.category-card, .view-card) small {
  color: color-mix(in srgb, var(--muted) 84%, transparent);
  font-weight: 780;
}

.workspace-hero {
  min-height: 112px;
  border-color: var(--dashboard-line);
  border-left: 3px solid var(--dashboard-focus-line);
  border-radius: 14px;
  background:
    linear-gradient(90deg, var(--dashboard-focus-soft), transparent 34%),
    var(--dashboard-panel);
  box-shadow: none;
}

.workspace-hero .eyebrow {
  color: color-mix(in srgb, var(--dashboard-focus-color) 70%, var(--text) 30%);
  font-size: 11px;
  font-weight: 900;
}

.task-board {
  border-color: var(--dashboard-line);
  border-radius: 14px;
  background: var(--dashboard-panel);
  box-shadow: none;
}

.board-header {
  margin-bottom: 6px;
  padding: 0 1px 8px;
  border-bottom-color: var(--dashboard-line-faint);
}

.board-header h3 {
  font-size: calc(var(--font-size) * 1.04);
  letter-spacing: 0;
}

.board-header span {
  color: color-mix(in srgb, var(--muted) 76%, transparent);
  font-size: 12px;
}

.right-rail {
  gap: 8px;
  border-left-color: var(--dashboard-line-faint);
}

.right-rail :is(.task-board, .right-rail-widget-card) {
  border-color: var(--dashboard-line-faint);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-panel) 56%, transparent);
  box-shadow: none;
  opacity: 0.9;
}

.right-rail :is(.task-board, .right-rail-widget-card):hover,
.right-rail :is(.task-board, .right-rail-widget-card):focus-within {
  opacity: 1;
  border-color: var(--dashboard-line);
}

.right-rail .board-header,
.right-rail-widget-header {
  padding-bottom: 7px;
  margin-bottom: 8px;
  border-bottom-color: var(--dashboard-line-faint);
}

.right-rail .board-header h3,
.right-rail-widget-header h3 {
  font-size: calc(var(--font-size) * 1.02);
}

.right-rail :is(.board-header span, .right-rail-widget-header span, .status-caption) {
  color: color-mix(in srgb, var(--muted) 74%, transparent);
  font-size: 11px;
}

.completed-board.status-board {
  min-height: 146px;
  max-height: 232px;
  box-shadow: none;
}

.completed-list .task-item,
.task-item.is-compact-completed {
  border-left-width: 3px;
  min-height: 46px;
  border-radius: 9px;
  opacity: 0.9;
}

.add-all-to-board-button {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: color-mix(in srgb, var(--blue) 62%, var(--text) 38%);
  box-shadow: none;
}

.jar-board {
  min-height: 240px;
}

.legacy-dot-board {
  border-color: var(--dashboard-line-faint);
  background: color-mix(in srgb, var(--surface-soft) 32%, transparent);
  box-shadow: none;
}

.legacy-dot-slot {
  opacity: 0.58;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 22%, transparent);
}

.legacy-dot-slot.is-filled {
  opacity: 0.9;
  filter: saturate(0.78) brightness(0.96);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
    0 2px 5px color-mix(in srgb, #000 12%, transparent);
}

:root[data-theme="dark"] .legacy-dot-slot.is-filled {
  filter: saturate(0.72) brightness(0.9);
}

.right-rail .status-number {
  font-size: clamp(30px, 2.2vw, 38px);
  color: color-mix(in srgb, var(--text) 82%, var(--muted) 18%);
}

:root[data-appearance="minimal"] .workspace-hero,
:root[data-appearance="minimal"] .task-board,
:root[data-appearance="minimal"] .right-rail :is(.task-board, .right-rail-widget-card) {
  border-radius: 6px;
  box-shadow: none;
}

:root[data-appearance="minimal"] .task-item,
:root[data-appearance="minimal"] :is(.detail-button, .delete-button, .add-to-jar-button, .restore-button),
:root[data-appearance="minimal"] :is(.category-card, .view-card) {
  border-radius: 4px;
}

@media (max-width: 980px) {
  .brand {
    min-height: 60px;
  }

  .brand-logo {
    width: min(154px, 72%);
    max-height: 52px;
  }

  .workspace-hero {
    min-height: auto;
  }
}

/* Specificity closure for earlier classic/minimal refresh layers. */
html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .workspace-hero {
  min-height: 112px;
  border-color: var(--dashboard-line);
  border-left: 3px solid var(--dashboard-focus-line);
  border-radius: 14px;
  background:
    linear-gradient(90deg, var(--dashboard-focus-soft), transparent 34%),
    var(--dashboard-panel);
  box-shadow: none;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .right-rail {
  gap: 8px;
  border-left-color: var(--dashboard-line-faint);
  scrollbar-color: color-mix(in srgb, var(--muted) 22%, transparent) transparent;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .right-rail :is(.task-board, .right-rail-widget-card) {
  padding: 12px;
  border-color: var(--dashboard-line-faint);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-panel) 56%, transparent);
  box-shadow: none;
  opacity: 0.9;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .right-rail .board-header {
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom-color: var(--dashboard-line-faint);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .right-rail .legacy-dot-board {
  border-color: var(--dashboard-line-faint);
  background: color-mix(in srgb, var(--surface-soft) 32%, transparent);
  box-shadow: none;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .right-rail .legacy-dot-slot.is-filled {
  filter: saturate(0.78) brightness(0.96);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
    0 2px 5px color-mix(in srgb, #000 12%, transparent);
}

/* styles/39-dashboard-time-tools-clarity.css */
/* Time Tools dashboard right-rail clarity split from the global dashboard layer. */

.right-rail-time-copy strong {
  color: color-mix(in srgb, var(--text) 90%, var(--muted) 10%);
  font-size: clamp(26px, 2.35vw, 38px);
  letter-spacing: 0;
}

.right-rail-time-copy span {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}

.right-rail-analog-clock {
  filter: saturate(0.78);
  opacity: 0.86;
}

.right-rail-signature-preview,
.right-rail-signature-field textarea {
  border-color: var(--dashboard-line-faint);
  background: color-mix(in srgb, var(--surface-card) 48%, transparent);
  box-shadow: none;
}

.right-rail-pomodoro-modes button,
.right-rail-pomodoro-actions .time-tools-action-button {
  border: 1px solid var(--dashboard-line-faint);
  background: color-mix(in srgb, var(--surface-soft) 52%, transparent);
  box-shadow: none;
}

.right-rail-pomodoro-readout .time-tools-display {
  font-size: clamp(30px, 2.45vw, 42px);
  color: color-mix(in srgb, var(--text) 84%, var(--muted) 16%);
}

/* styles/38-dashboard-task-list-clarity.css */
/* Task List dashboard clarity split from the broad dashboard layer. */

.task-composer {
  border-color: var(--dashboard-line);
  border-radius: 11px;
  background: var(--dashboard-panel-muted);
  box-shadow: none;
}

.task-composer :is(input, select) {
  border-color: var(--dashboard-line);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: none;
}

.task-composer button[type="submit"] {
  border: 1px solid color-mix(in srgb, var(--blue) 24%, transparent);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface) 90%);
  color: color-mix(in srgb, var(--blue) 68%, var(--text) 32%);
  box-shadow: none;
}

:root[data-appearance="minimal"] .task-composer {
  border-radius: 6px;
  box-shadow: none;
}

@media (max-width: 980px) {
  html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-actions {
    opacity: 1;
  }
}

/* Specificity closure for earlier classic/minimal refresh layers. */
html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-composer {
  border-color: var(--dashboard-line);
  border-radius: 11px;
  background: var(--dashboard-panel-muted);
  box-shadow: none;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) {
  background: var(--dashboard-panel);
  box-shadow: none;
}

/* Main task card fusion: keep the lighter redesign while guarding edit layout. */
html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) {
  overflow-x: hidden;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList {
  align-items: stretch;
  gap: 6px;
  overflow-x: hidden;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item:not(.is-dragging) {
  gap: 8px;
  min-width: 0;
  max-width: calc(100% - var(--chain-indent, 0px));
  min-height: 50px;
  height: auto;
  align-items: flex-start;
  border-color: var(--dashboard-line-faint);
  border-left-width: 3px;
  border-radius: 10px;
  padding: 8px 10px;
  overflow: visible;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--task-color, var(--blue)) 3.5%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-card) 72%, transparent);
  box-shadow: none;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item.has-note:not(.is-detail-open):not(.is-dragging) {
  height: max-content;
  min-height: 68px;
}

@supports (content-visibility: auto) {
  html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item:not(.has-note):not(.is-detail-open):not(.is-dragging):not(.is-color-menu-open):not(.is-category-menu-open) {
    content-visibility: auto;
    contain-intrinsic-size: auto 52px;
  }
}

html[data-appearance="classic"]:not([data-theme="dark"]):not([data-theme="solar"]) .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item:not(.is-dragging) {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--task-color, var(--blue)) 3.5%, transparent), transparent 46%),
    rgba(255, 255, 255, 0.9);
}

html[data-theme="dark"] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item:not(.is-dragging) {
  border-color: color-mix(in srgb, var(--line-soft) 42%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--task-color, var(--blue)) 5%, transparent), transparent 36%),
    color-mix(in srgb, var(--surface-card) 82%, transparent);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item:not(.is-done):not(.is-dragging):is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--task-color, var(--blue)) 24%, var(--line-soft) 76%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--task-color, var(--blue)) 7%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface-card) 86%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--task-color, var(--blue)) 8%, transparent);
  transform: none;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item.is-high-priority:not(.is-dragging) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ff9500 10%, transparent);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item:is(.is-ready-step, .is-chain-root):not(.is-done):not(.is-dragging) {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--task-color, var(--blue)) 6%, transparent), transparent 50%),
    color-mix(in srgb, var(--surface-card) 80%, transparent);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item.is-chain-child:not(.is-dragging) {
  min-height: 50px;
  border-left-color: transparent;
  border-radius: 10px;
  padding: 8px 10px 8px 34px;
  box-shadow: none;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item.is-chain-child::before {
  left: 19px;
  top: -6px;
  width: 2px;
  height: calc(50% + 6px);
  background: color-mix(in srgb, var(--task-color, var(--blue)) 62%, transparent);
  opacity: 0.34;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item:first-child::before {
  display: none;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .check-button {
  width: 26px;
  height: 26px;
  margin-top: 5px;
  border-width: 2px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: none;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .check-button:is(:hover, :focus-visible) {
  box-shadow:
    inset 0 0 0 4px var(--surface),
    0 0 0 3px color-mix(in srgb, var(--task-color, var(--blue)) 10%, transparent);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .connector-socket {
  left: 20px;
  width: 12px;
  height: 12px;
  border-width: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--surface-card) 72%, transparent);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-main {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-row {
  min-width: 0;
  min-height: 30px;
  gap: 6px;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item.is-detail-open .task-row {
  align-items: flex-start;
  flex-wrap: wrap;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item.is-detail-open:not(.is-dragging) {
  height: max-content;
  min-height: 152px;
  padding-bottom: 11px;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-title-edit {
  min-width: 0; box-sizing: border-box;
  min-height: 31px;
  color: color-mix(in srgb, var(--text) 90%, var(--muted) 10%);
  font-size: var(--font-size);
  font-weight: 650; line-height: 1.32;
  padding: 1px 2px 2px 1px;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-title-edit:focus {
  border-color: color-mix(in srgb, var(--blue) 24%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 9%, transparent);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-note {
  color: color-mix(in srgb, var(--muted) 84%, transparent);
  font-size: calc(var(--font-size) * 0.82);
  line-height: 1.35;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item.has-note:not(.is-detail-open) .task-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-meta {
  gap: 5px;
  margin-top: 5px;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item :is(.category-chip, .due-chip, .step-chip, .ongoing-chip, .priority-chip) {
  min-height: 20px;
  padding: 3px 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-soft) 60%, transparent);
  color: color-mix(in srgb, var(--muted) 82%, var(--text) 18%);
  font-size: calc(var(--font-size) * 0.74);
  font-weight: 820;
  box-shadow: none;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .due-chip:is(.is-overdue, .is-urgent) {
  background: var(--dashboard-danger-soft);
  color: color-mix(in srgb, #ff3b30 68%, var(--text) 32%);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .due-chip.is-due-today {
  background: var(--dashboard-blue-soft);
  color: color-mix(in srgb, var(--blue) 68%, var(--text) 32%);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item:not(.is-dragging) .task-row > .due-chip {
  margin-left: auto;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-actions {
  gap: 5px;
  opacity: 0.6;
  transition: opacity var(--motion-fast) var(--ease-smooth-soft);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item:is(:hover, :focus-within) .task-actions {
  opacity: 1;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item :is(.detail-button, .delete-button, .add-to-jar-button, .restore-button) {
  min-height: 32px;
  border: 1px solid var(--dashboard-line-faint);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 52%, transparent);
  color: color-mix(in srgb, var(--text) 76%, var(--muted) 24%);
  font-size: 13px;
  box-shadow: none;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .detail-button {
  min-width: 52px;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .delete-button {
  width: 34px;
  background: color-mix(in srgb, #ff3b30 7%, var(--surface) 93%);
  color: color-mix(in srgb, #ff3b30 58%, var(--muted) 42%);
  font-size: 20px;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .delete-button:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, #ff3b30 24%, transparent);
  background: color-mix(in srgb, #ff3b30 13%, var(--surface) 87%);
  color: color-mix(in srgb, #ff3b30 76%, var(--text) 24%);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details,
html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details.has-estimate {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  grid-template-columns: minmax(76px, 0.62fr) minmax(112px, 0.82fr) minmax(96px, 0.68fr) minmax(0, 1.48fr) minmax(120px, 0.76fr) minmax(126px, 0.78fr) minmax(132px, 0.78fr);
  grid-auto-columns: minmax(0, 1fr);
  position: relative;
  z-index: 2;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details > .mini-field,
html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details :is(input, select, textarea, .task-color-control, .task-category-control, .task-due-control, .task-recurrence-control) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details textarea {
  width: 100%;
  max-width: 100%;
  resize: vertical;
  overflow: auto;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details .detail-note-field {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-priority-check > .task-priority-edit {
  position: absolute;
  width: 1px !important;
  min-width: 1px;
  max-width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1320px) {
  html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details.has-estimate {
    grid-template-columns: minmax(76px, 0.58fr) minmax(112px, 0.78fr) minmax(96px, 0.62fr) minmax(0, 1.35fr) minmax(120px, 0.82fr) minmax(126px, 0.82fr);
  }

  html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details.has-estimate .detail-note-field {
    grid-column: 4 / span 2;
  }

  html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details.has-estimate .detail-recurrence-field {
    grid-column: 6;
  }

  html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details.has-estimate .detail-priority-field {
    grid-column: 5;
    grid-row: 2;
  }

  html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details.has-estimate .detail-due-field {
    grid-column: 6;
    grid-row: 2;
  }
}

@media (max-width: 1180px) {
  html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item.is-detail-open:not(.is-dragging) {
    min-height: 226px;
  }

  html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details.has-estimate {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details.has-estimate > .mini-field,
  html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details.has-estimate .detail-recurrence-field,
  html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details.has-estimate .detail-priority-field,
  html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details.has-estimate .detail-due-field {
    grid-column: auto;
    grid-row: auto;
  }

  html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .task-board-main:not(.is-calendar-board) #taskList > .task-item .task-details.has-estimate .detail-note-field {
    grid-column: 1 / -1;
  }
}

/* styles/37-dashboard-focus-clarity.css */
/* Current Focus dashboard polish split from the global dashboard layer. */

.ongoing-panel {
  --focus-dashboard-card-height: 156px;
  grid-template-columns: minmax(0, 1.618fr) minmax(220px, 0.92fr);
  grid-template-rows: auto minmax(var(--focus-dashboard-card-height), auto) auto;
  align-items: stretch;
  gap: 4px 8px;
}

.ongoing-list {
  gap: 7px;
  min-height: var(--focus-dashboard-card-height);
  align-items: stretch;
}

.ongoing-list .task-item,
.ongoing-list .drop-placeholder {
  min-height: var(--focus-dashboard-card-height);
  align-self: stretch;
}

.ongoing-list .task-item.is-ongoing-task:not(.is-done) {
  border-left-width: 4px;
  border-color: color-mix(in srgb, var(--dashboard-focus-color) 32%, var(--line-soft) 68%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--dashboard-focus-color) 9%, transparent), transparent 54%),
    var(--dashboard-card);
  outline-color: color-mix(in srgb, var(--dashboard-focus-color) 12%, transparent);
  box-shadow: none;
}

.ongoing-list .task-item.is-next:not(.is-done),
.ongoing-list .task-item.is-focus-glow-visible:not(.is-done) {
  border-color: color-mix(in srgb, var(--dashboard-focus-color) 58%, var(--line-soft) 42%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--dashboard-focus-color) 13%, transparent), transparent 58%),
    var(--dashboard-card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dashboard-focus-color) 12%, transparent);
}

.ongoing-list .task-item.is-focus-glow-visible:not(.is-done)::before,
.ongoing-list .task-item.is-focus-glow-visible:not(.is-done)::after {
  opacity: 0.18;
}

.task-focus-launcher,
.task-focus-timer {
  grid-template-columns: minmax(0, 1.28fr) minmax(206px, 1fr);
  gap: 8px;
}

.focus-launch-countdown,
.focus-launch-countup,
.task-focus-timer-main,
.task-focus-timer-aside {
  border-color: color-mix(in srgb, var(--dashboard-focus-color) 24%, var(--line-soft) 76%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-card) 68%, transparent);
  box-shadow: none;
}

.task-focus-timer-main {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--dashboard-focus-color) 11%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface-card) 70%, transparent);
}

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

.task-focus-timer-bar {
  height: 6px;
}

.focus-recommendation-card,
.focus-recommendation-empty {
  height: 100%;
  min-height: var(--focus-dashboard-card-height);
  border-left-width: 2px;
  border-color: var(--dashboard-line-faint);
  background: color-mix(in srgb, var(--surface-card) 50%, transparent);
  box-shadow: none;
}

.focus-recommendation-card {
  opacity: 0.86;
}

.focus-recommendation-card:hover,
.focus-recommendation-card:focus-within {
  opacity: 1;
  background: color-mix(in srgb, var(--surface-card) 68%, transparent);
}

.focus-recommendation-card h4 {
  font-size: calc(var(--font-size) * 0.98);
}

@media (max-width: 980px) {
  .ongoing-panel,
  .task-focus-launcher,
  .task-focus-timer {
    grid-template-columns: minmax(0, 1fr);
  }
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .workspace-hero.is-empty .ongoing-list {
  min-height: 96px;
  border: 1px solid color-mix(in srgb, var(--dashboard-focus-color) 12%, var(--line-soft) 88%);
  border-radius: 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--dashboard-focus-color) 3%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface-card) 34%, transparent);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .workspace-hero.is-focus-ticking,
html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .workspace-hero.is-focus-running,
html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .workspace-hero.is-ongoing-hot {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--dashboard-focus-color) 15%, transparent), transparent 42%),
    var(--dashboard-panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dashboard-focus-color) 10%, transparent);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .ongoing-list .task-item.is-ongoing-task:not(.is-done) {
  border-left-width: 4px;
  border-color: color-mix(in srgb, var(--dashboard-focus-color) 32%, var(--line-soft) 68%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--dashboard-focus-color) 9%, transparent), transparent 54%),
    var(--dashboard-card);
  outline-color: color-mix(in srgb, var(--dashboard-focus-color) 12%, transparent);
  box-shadow: none;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .ongoing-list .task-item.is-next:not(.is-done),
html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .ongoing-list .task-item.is-focus-glow-visible:not(.is-done) {
  border-color: color-mix(in srgb, var(--dashboard-focus-color) 58%, var(--line-soft) 42%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--dashboard-focus-color) 13%, transparent), transparent 58%),
    var(--dashboard-card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dashboard-focus-color) 12%, transparent);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .workspace-hero .focus-recommendation-card {
  --recommendation-color: var(--task-color, var(--dashboard-focus-color));
  border-color: color-mix(in srgb, var(--recommendation-color) 18%, var(--line-soft) 82%);
  border-left-color: color-mix(in srgb, var(--recommendation-color) 36%, var(--line-soft) 64%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--recommendation-color) 5%, transparent), transparent 50%),
    color-mix(in srgb, var(--surface-card) 56%, transparent);
  opacity: 0.92;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .workspace-hero .focus-recommendation-label,
html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .workspace-hero .focus-recommendation-estimate {
  color: color-mix(in srgb, var(--recommendation-color, var(--task-color, var(--dashboard-focus-color))) 62%, var(--text) 38%);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .workspace-hero .focus-recommendation-estimate {
  background: color-mix(in srgb, var(--recommendation-color, var(--task-color, var(--dashboard-focus-color))) 10%, transparent);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .workspace-hero .focus-recommendation-meta span,
html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .workspace-hero .focus-recommendation-reasons span {
  color: color-mix(in srgb, var(--muted) 84%, var(--text) 16%);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .workspace-hero .focus-recommendation-accept {
  border-color: color-mix(in srgb, var(--recommendation-color, var(--task-color, var(--dashboard-focus-color))) 22%, transparent);
  background: color-mix(in srgb, var(--recommendation-color, var(--task-color, var(--dashboard-focus-color))) 9%, transparent);
  color: color-mix(in srgb, var(--recommendation-color, var(--task-color, var(--dashboard-focus-color))) 64%, var(--text) 36%);
  box-shadow: none;
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .workspace-hero .focus-recommendation-skip {
  border-color: color-mix(in srgb, var(--line-soft) 58%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 48%, transparent);
  color: color-mix(in srgb, var(--muted) 82%, var(--text) 18%);
  box-shadow: none;
}

/* Current Focus should read as the active task card, so its accents follow --task-color. */
html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .workspace-hero {
  --dashboard-focus-soft: color-mix(in srgb, var(--dashboard-focus-color) 10%, transparent);
  --dashboard-focus-line: color-mix(in srgb, var(--dashboard-focus-color) 58%, var(--line-soft) 42%);
  border-left-color: var(--dashboard-focus-line);
  background:
    linear-gradient(90deg, var(--dashboard-focus-soft), transparent 34%),
    var(--dashboard-panel);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .workspace-hero .eyebrow {
  color: color-mix(in srgb, var(--dashboard-focus-color) 66%, var(--text) 34%);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .ongoing-list .task-item.is-ongoing-task:not(.is-done) {
  border-color: color-mix(in srgb, var(--task-color, var(--dashboard-focus-color)) 32%, var(--line-soft) 68%);
  border-left-color: color-mix(in srgb, var(--task-color, var(--dashboard-focus-color)) 72%, var(--line-soft) 28%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--task-color, var(--dashboard-focus-color)) 9%, transparent), transparent 54%),
    var(--dashboard-card);
  outline-color: color-mix(in srgb, var(--task-color, var(--dashboard-focus-color)) 12%, transparent);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .ongoing-list .task-item.is-next:not(.is-done),
html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .ongoing-list .task-item.is-focus-glow-visible:not(.is-done) {
  border-color: color-mix(in srgb, var(--task-color, var(--dashboard-focus-color)) 58%, var(--line-soft) 42%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--task-color, var(--dashboard-focus-color)) 13%, transparent), transparent 58%),
    var(--dashboard-card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--task-color, var(--dashboard-focus-color)) 12%, transparent);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .ongoing-list .task-item.is-ongoing-card :is(.focus-launch-countdown, .focus-launch-countup, .task-focus-timer-main, .task-focus-timer-aside) {
  border-color: color-mix(in srgb, var(--task-color, var(--dashboard-focus-color)) 24%, var(--line-soft) 76%);
  background: color-mix(in srgb, var(--surface-card) 68%, transparent);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .ongoing-list .task-item.is-ongoing-card .task-focus-timer-main {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--task-color, var(--dashboard-focus-color)) 11%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface-card) 70%, transparent);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .ongoing-list .task-item.is-ongoing-card :is(.focus-launch-label, .task-focus-mode, .task-focus-state, .task-focus-aside-label) {
  color: color-mix(in srgb, var(--task-color, var(--dashboard-focus-color)) 46%, var(--text) 54%);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .ongoing-list .task-item.is-ongoing-card :is(.focus-launch-play, .task-focus-toggle) {
  border-color: color-mix(in srgb, var(--task-color, var(--dashboard-focus-color)) 18%, var(--line-soft) 82%);
  background: color-mix(in srgb, var(--surface) 94%, var(--task-color, var(--dashboard-focus-color)) 6%);
  color: color-mix(in srgb, var(--task-color, var(--dashboard-focus-color)) 62%, var(--text) 38%);
}

html[data-appearance] .desktop-shell: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):not(.is-project-tree-view) .ongoing-list .task-item.is-ongoing-card .task-focus-bar {
  background: var(--task-color, var(--dashboard-focus-color));
}

/* styles/36-inbox-entry-clarity.css */
/* Inbox sidebar entry clarity split from the dashboard global layer. */

.clock-panel.inbox-entry-panel {
  min-height: 118px;
  padding: 12px 13px;
  border-color: var(--dashboard-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel) 66%, transparent), color-mix(in srgb, var(--surface-panel-muted) 54%, transparent));
  box-shadow: none;
}

.inbox-button {
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 86px;
  padding: 11px 12px;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}

.inbox-button:hover,
.inbox-button:focus-visible {
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent);
}

.inbox-icon {
  width: 46px;
  height: 46px;
  border-color: color-mix(in srgb, var(--line-soft) 72%, transparent);
  background: color-mix(in srgb, var(--surface-raised) 58%, transparent);
  color: color-mix(in srgb, var(--blue) 42%, var(--text) 58%);
  box-shadow: none;
}

.inbox-title {
  font-size: calc(var(--font-size) * 1.35);
  letter-spacing: 0;
}

.inbox-subtitle {
  color: color-mix(in srgb, var(--muted) 82%, var(--text) 18%);
  font-weight: 760;
}

.inbox-button::after {
  width: 66%;
  opacity: 0.22;
}

html[data-appearance="minimal"] .clock-panel.inbox-entry-panel,
html[data-appearance="simple"] .clock-panel.inbox-entry-panel {
  min-height: 132px;
  padding: 12px;
}

html[data-appearance="minimal"] .inbox-button,
html[data-appearance="simple"] .inbox-button {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  column-gap: 12px;
  min-height: 106px;
  padding: 14px 10px 16px;
  border-radius: var(--dashboard-paper-radius);
  background: transparent;
  box-shadow: none;
}

html[data-appearance="minimal"] .inbox-button::after,
html[data-appearance="simple"] .inbox-button::after {
  right: 10px;
  bottom: 6px;
  left: 10px;
  height: 1px;
  background: color-mix(in srgb, var(--phase5-muted) 38%, transparent);
  opacity: 0.42;
}

html[data-appearance="minimal"] .inbox-button.has-pending::after,
html[data-appearance="minimal"] .inbox-button:hover::after,
html[data-appearance="minimal"] .clock-panel.is-inbox-active .inbox-button::after,
html[data-appearance="simple"] .inbox-button.has-pending::after,
html[data-appearance="simple"] .inbox-button:hover::after,
html[data-appearance="simple"] .clock-panel.is-inbox-active .inbox-button::after {
  background: color-mix(in srgb, var(--accent) 58%, var(--phase5-muted) 42%);
  opacity: 0.72;
}

html[data-appearance="minimal"] .inbox-icon,
html[data-appearance="simple"] .inbox-icon {
  width: 52px;
  height: 52px;
  border: 1px solid var(--phase5-line);
  border-radius: calc(var(--dashboard-paper-radius) + 2px);
  color: color-mix(in srgb, var(--accent) 68%, var(--phase5-text) 32%);
  background: color-mix(in srgb, var(--accent) 6%, var(--phase5-surface-soft) 94%);
  box-shadow: none;
  overflow: hidden;
}

html[data-appearance="minimal"] .inbox-icon::before,
html[data-appearance="simple"] .inbox-icon::before {
  inset: 13px 8px 8px;
  left: 8px;
  width: auto;
  height: auto;
  border: 0;
  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;
}

html[data-appearance="minimal"] .inbox-icon::after,
html[data-appearance="simple"] .inbox-icon::after {
  top: 11px;
  width: 20px;
  height: 13px;
  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.7;
  clip-path: none;
  transform: translateX(-50%) rotate(-7deg);
}

html[data-appearance="minimal"] .inbox-title,
html[data-appearance="simple"] .inbox-title {
  font-size: calc(var(--font-size) * 1.36);
  font-weight: 900;
}

html[data-appearance="minimal"] .inbox-subtitle,
html[data-appearance="simple"] .inbox-subtitle {
  color: var(--phase5-muted);
  font-weight: 700;
}

html[data-appearance="minimal"] .inbox-entry-badge,
html[data-appearance="simple"] .inbox-entry-badge {
  max-width: 72px;
  min-height: 22px;
  padding: 4px 7px;
  border-color: var(--phase5-line);
  background: var(--phase5-surface-soft);
  color: var(--phase5-muted);
  font-size: calc(var(--font-size) * 0.62);
  font-weight: 820;
}

:root[data-appearance="minimal"] .clock-panel.inbox-entry-panel {
  border-radius: 6px;
  box-shadow: none;
}

:root[data-appearance="minimal"] .inbox-button {
  border-radius: 4px;
}

/* styles/34-mint-tokens.css */
/* Mint appearance tokens: warm paper, restrained green, and coral accents. */

:root[data-appearance="mint"] {
  color-scheme: light;
  --mint-paper: #f4f1e7;
  --mint-card: #fffdf6;
  --mint-layer: #e1e9dd;
  --mint-layer-strong: #d3e6d9;
  --mint-accent: #5f9079;
  --mint-ink: #26352e;
  --mint-coral: #ca7560;
  --mint-sidebar: #20342b;
  --mint-brand-surface: var(--mint-sidebar);
  --mint-brand-logo: #b9c8bd;
  --mint-brand-logo-filter: brightness(0) saturate(100%) invert(82%) sepia(39%) saturate(78%) hue-rotate(76deg) brightness(103%) contrast(63%);
  --mint-sidebar-ink: #f5f0e3;
  --mint-sidebar-muted: #bfcbbf;
  --mint-ledger-radius: 4px;
  --bg: #f4f1e7;
  --page-bg: linear-gradient(145deg, #f7f4eb 0%, #edf2e8 100%);
  --surface: #fffdf6;
  --surface-soft: #edf1e8;
  --surface-glass: rgba(255, 253, 246, 0.94);
  --surface-raised: #fffdf6;
  --surface-panel: rgba(255, 253, 246, 0.88);
  --surface-panel-strong: rgba(255, 253, 246, 0.96);
  --surface-panel-muted: rgba(239, 243, 234, 0.94);
  --surface-card: #faf9f1;
  --surface-elevated: #fffdf6;
  --panel-soft: rgba(225, 233, 221, 0.72);
  --button-soft: rgba(95, 144, 121, 0.09);
  --text: #26352e;
  --text-secondary: #394b42;
  --text-tertiary: #5a6b62;
  --muted: #68776f;
  --muted-strong: #46584f;
  --line: rgba(63, 91, 77, 0.18);
  --line-soft: rgba(63, 91, 77, 0.10);
  --line-strong: rgba(63, 91, 77, 0.28);
  --accent: #5f9079;
  --accent-soft: rgba(95, 144, 121, 0.14);
  --blue: #5f9079;
  --danger: #ca7560;
  --danger-soft: rgba(202, 117, 96, 0.14);
  --success: #5f9079;
  --success-soft: rgba(95, 144, 121, 0.13);
  --warning: #a47746;
  --warning-soft: rgba(164, 119, 70, 0.14);
  --radius-shell: 18px;
  --radius-panel: 10px;
  --radius-card: 4px;
  --radius-control: 8px;
  --radius-compact: 6px;
  --shadow: 0 22px 52px rgba(39, 58, 48, 0.14);
  --shadow-panel: 0 8px 20px rgba(39, 58, 48, 0.08);
  --shadow-card: none;
  --shadow-card-strong: 0 10px 24px rgba(39, 58, 48, 0.12);
  --shadow-popover: 0 20px 46px rgba(44, 61, 52, 0.18);
  --shadow-modal: 0 28px 68px rgba(44, 61, 52, 0.22);
  --focus-ring: 0 0 0 3px rgba(95, 144, 121, 0.20);
  --dashboard-sidebar-width: clamp(224px, 13.6vw, 244px);
  --dashboard-right-rail-width: clamp(264px, 16vw, 294px);
  --dashboard-focus-color: #5f9079;
  --dashboard-focus-soft: rgba(95, 144, 121, 0.12);
  --dashboard-focus-line: #5f9079;
  --dashboard-blue-soft: rgba(95, 144, 121, 0.13);
  --dashboard-panel: rgba(255, 253, 246, 0.88);
  --dashboard-panel-muted: rgba(225, 233, 221, 0.58);
  --dashboard-card: rgba(255, 253, 246, 0.94);
  --dashboard-line: rgba(63, 91, 77, 0.15);
  --dashboard-line-faint: rgba(63, 91, 77, 0.085);
}

:root[data-appearance="mint"][data-theme="dark"] {
  color-scheme: dark;
  --mint-paper: #1d2822;
  --mint-card: #2a3730;
  --mint-layer: #26362d;
  --mint-layer-strong: #334b3e;
  --mint-accent: #88bea1;
  --mint-ink: #f1ede3;
  --mint-coral: #df8d76;
  --mint-sidebar: #14231c;
  --mint-sidebar-ink: #f5f0e3;
  --mint-sidebar-muted: #aebcaf;
  --bg: #1d2822;
  --page-bg: linear-gradient(145deg, #19221d 0%, #223029 100%);
  --surface: #2a3730;
  --surface-soft: #26362d;
  --surface-glass: rgba(42, 55, 48, 0.94);
  --surface-raised: #314139;
  --surface-panel: rgba(42, 55, 48, 0.90);
  --surface-panel-strong: rgba(49, 65, 57, 0.96);
  --surface-panel-muted: rgba(38, 54, 45, 0.96);
  --surface-card: #2e3c35;
  --surface-elevated: #33453b;
  --panel-soft: rgba(38, 54, 45, 0.82);
  --button-soft: rgba(136, 190, 161, 0.12);
  --text: #f1ede3;
  --text-secondary: #dce4db;
  --text-tertiary: #bdcbbf;
  --muted: #b0beb3;
  --muted-strong: #d0dacf;
  --line: rgba(221, 235, 224, 0.16);
  --line-soft: rgba(221, 235, 224, 0.09);
  --line-strong: rgba(221, 235, 224, 0.26);
  --accent: #88bea1;
  --accent-soft: rgba(136, 190, 161, 0.16);
  --blue: #88bea1;
  --danger: #df8d76;
  --danger-soft: rgba(223, 141, 118, 0.17);
  --success: #88bea1;
  --success-soft: rgba(136, 190, 161, 0.15);
  --warning: #d2ae73;
  --warning-soft: rgba(210, 174, 115, 0.16);
  --shadow: 0 24px 58px rgba(5, 12, 8, 0.36);
  --shadow-panel: 0 10px 24px rgba(5, 12, 8, 0.24);
  --shadow-card: none;
  --shadow-card-strong: 0 12px 28px rgba(5, 12, 8, 0.30);
  --shadow-popover: 0 20px 48px rgba(4, 10, 7, 0.38);
  --shadow-modal: 0 30px 72px rgba(4, 10, 7, 0.44);
  --focus-ring: 0 0 0 3px rgba(136, 190, 161, 0.24);
  --dashboard-focus-color: #88bea1;
  --dashboard-focus-soft: rgba(136, 190, 161, 0.13);
  --dashboard-focus-line: #88bea1;
  --dashboard-blue-soft: rgba(136, 190, 161, 0.14);
  --dashboard-panel: rgba(42, 55, 48, 0.88);
  --dashboard-panel-muted: rgba(38, 54, 45, 0.74);
  --dashboard-card: rgba(46, 60, 53, 0.94);
  --dashboard-line: rgba(221, 235, 224, 0.14);
  --dashboard-line-faint: rgba(221, 235, 224, 0.08);
}

/* styles/34-mint-shell.css */
/* Mint shell proportions and paper-like surfaces. */

:root[data-appearance="mint"] body {
  background: var(--page-bg);
}

:root[data-appearance="mint"] .desktop-shell {
  border-color: color-mix(in srgb, var(--mint-accent) 18%, var(--line));
  border-radius: var(--radius-shell);
  background: var(--mint-paper);
  box-shadow: var(--shadow);
}

:root[data-appearance="mint"] .sidebar {
  --text: var(--mint-sidebar-ink);
  --text-secondary: color-mix(in srgb, var(--mint-sidebar-ink) 86%, transparent);
  --muted: var(--mint-sidebar-muted);
  --muted-strong: color-mix(in srgb, var(--mint-sidebar-ink) 78%, transparent);
  --button-soft: rgba(255, 255, 255, 0.055);
  padding-inline: 14px;
  border-right-color: color-mix(in srgb, var(--mint-accent) 22%, transparent);
  background: var(--mint-sidebar);
}

:root[data-appearance="mint"] .sidebar .clock-panel.inbox-entry-panel {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: var(--mint-sidebar-ink);
  box-shadow: none;
}

:root[data-appearance="mint"] .sidebar .inbox-button {
  background: transparent;
  color: var(--mint-sidebar-ink);
  box-shadow: none;
}

:root[data-appearance="mint"] .sidebar .inbox-button:hover {
  background: rgba(255, 255, 255, 0.055);
}

:root[data-appearance="mint"] .sidebar .inbox-icon {
  background: rgba(255, 255, 255, 0.065);
  color: var(--mint-sidebar-ink);
  box-shadow: none;
}

:root[data-appearance="mint"] .sidebar .inbox-subtitle {
  color: var(--mint-sidebar-muted);
}

:root[data-appearance="mint"] .brand {
  min-height: 72px;
  margin: 14px 0 12px;
  padding: 13px 14px;
  border-color: transparent;
  border-radius: var(--mint-ledger-radius);
  background: var(--mint-brand-surface);
}

:root[data-appearance="mint"] .brand-logo {
  width: min(148px, 82%);
  opacity: 1;
  filter: var(--mint-brand-logo-filter);
}

:root[data-appearance="mint"] .sidebar-section {
  padding-block: 7px;
  border-top-color: rgba(255, 255, 255, 0.08);
}

:root[data-appearance="mint"] .sidebar-section-header {
  padding-inline: 8px;
  color: var(--mint-sidebar-muted);
  letter-spacing: 0.11em;
}

:root[data-appearance="mint"] .workspace {
  gap: 10px;
  padding: 14px 16px 16px;
  background: var(--mint-paper);
}

:root[data-appearance="mint"] .workspace-hero {
  min-height: 104px !important;
  padding: 12px 16px;
  border: 1px solid var(--dashboard-line);
  border-left: 3px solid var(--mint-accent);
  border-radius: var(--mint-ledger-radius);
  background: color-mix(in srgb, var(--mint-layer) 34%, var(--surface-panel));
  box-shadow: none;
}

:root[data-appearance="mint"] .board-grid {
  gap: 0;
}

:root[data-appearance="mint"] .right-rail {
  gap: 0;
  padding-left: 14px;
  border-left-color: var(--dashboard-line);
  background: color-mix(in srgb, var(--mint-layer) 20%, transparent);
}

@media (min-width: 981px) {
  :root[data-appearance="mint"] .desktop-shell {
    grid-template-columns: var(--dashboard-sidebar-width) minmax(0, 1fr);
  }

  :root[data-appearance="mint"] .desktop-shell: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):not(.is-project-tree-view) .board-grid {
    grid-template-columns: minmax(0, 1.56fr) minmax(var(--dashboard-right-rail-width), 0.52fr);
  }
}

/* styles/34-mint-components.css */
/* Mint component surfaces: quiet, tactile, and consistent across every feature. */

:root[data-appearance="mint"] :is(.category-card, .view-card) {
  min-height: 38px;
  padding-inline: 9px;
  border: 1px solid transparent;
  border-radius: 3px;
}

:root[data-appearance="mint"] :is(.category-card, .view-card):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--mint-accent) 20%, var(--line));
  background: color-mix(in srgb, var(--mint-layer) 64%, transparent);
}

:root[data-appearance="mint"] :is(.category-card, .view-card).is-active {
  border-color: color-mix(in srgb, var(--mint-accent) 54%, transparent);
  background: color-mix(in srgb, var(--mint-accent) 18%, transparent);
  box-shadow: inset 3px 0 0 var(--mint-accent);
}

:root[data-appearance="mint"] .category-card[data-filter="today"] .category-dot {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint-accent) 13%, transparent);
}

:root[data-appearance="mint"] .task-composer {
  border-color: var(--dashboard-line);
  border-radius: var(--radius-control);
  background: var(--dashboard-panel);
  box-shadow: none;
}

:root[data-appearance="mint"] .task-composer {
  padding: 8px;
  gap: 8px;
  border-width: 1px 0;
}

:root[data-appearance="mint"] :is(.task-composer input, .task-composer button, .category-picker-button) {
  min-height: 44px;
  border-radius: var(--radius-control);
}

:root[data-appearance="mint"] .add-button {
  background: var(--mint-accent);
  color: #fffdf6;
  box-shadow: none;
}

:root[data-appearance="mint"] .task-board {
  padding: 16px 18px 18px;
  border: 1px solid var(--dashboard-line);
  border-radius: var(--mint-ledger-radius);
  background: var(--dashboard-panel);
  box-shadow: none;
}

:root[data-appearance="mint"] .board-header {
  min-height: 40px;
  margin-bottom: 0;
  padding: 0 2px 10px;
  border-bottom: 2px solid color-mix(in srgb, var(--mint-ink) 70%, var(--dashboard-line));
}

:root[data-appearance="mint"] .task-board-main .task-list {
  gap: 0;
  padding-top: 0;
}

:root[data-appearance="mint"] .task-item {
  min-height: 62px;
  margin: 0;
  border-color: transparent transparent var(--dashboard-line) color-mix(in srgb, var(--category-color, var(--mint-accent)) 58%, var(--line));
  border-width: 0 0 1px 3px;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none !important;
}

:root[data-appearance="mint"] .task-item:is(:hover, :focus-within) {
  border-bottom-color: var(--dashboard-line);
  border-left-color: color-mix(in srgb, var(--category-color, var(--mint-accent)) 78%, var(--mint-accent));
  background: color-mix(in srgb, var(--mint-layer-strong) 38%, transparent);
  box-shadow: none !important;
}

:root[data-appearance="mint"] .task-item:is(.is-detail-open, .is-color-menu-open, .is-category-menu-open):not(.is-dragging) {
  background: color-mix(in srgb, var(--mint-layer) 52%, var(--surface));
}

:root[data-appearance="mint"] .task-item.is-dragging {
  border: 1px solid color-mix(in srgb, var(--mint-accent) 46%, var(--line));
  border-left-width: 3px;
  border-radius: var(--mint-ledger-radius) !important;
  background: var(--surface-elevated);
  box-shadow: var(--shadow-card-strong) !important;
}

:root[data-appearance="mint"] :is(.due-chip.is-due-today, .task-due-day.is-today) {
  border-color: color-mix(in srgb, var(--mint-accent) 38%, transparent);
  background: color-mix(in srgb, var(--mint-layer-strong) 66%, transparent);
  color: color-mix(in srgb, var(--mint-accent) 72%, var(--text));
}

:root[data-appearance="mint"] :is(.due-chip.is-overdue, .danger-button, .delete-button) {
  color: var(--mint-coral);
}

:root[data-appearance="mint"] :is(.clock-panel, .ongoing-panel, .focus-recommendation) {
  border-color: color-mix(in srgb, var(--mint-accent) 20%, var(--line));
  border-radius: var(--mint-ledger-radius);
  background: color-mix(in srgb, var(--mint-layer) 46%, var(--surface));
}

:root[data-appearance="mint"] .right-rail :is(.task-board, .right-rail-widget-card) {
  margin: 0;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--dashboard-line);
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none !important;
  opacity: 1;
}

:root[data-appearance="mint"] .right-rail :is(.task-board, .right-rail-widget-card):last-child {
  border-bottom: 0;
}

:root[data-appearance="mint"] :is(.dialog-card, .settlement-modal) {
  border-color: color-mix(in srgb, var(--mint-accent) 22%, var(--line));
  border-radius: 24px;
  background: color-mix(in srgb, var(--mint-card) 95%, transparent);
  box-shadow: var(--shadow-modal);
}

:root[data-appearance="mint"] #mobileTaskFilterButton {
  border-color: color-mix(in srgb, var(--mint-accent) 28%, var(--line));
  background: color-mix(in srgb, var(--mint-layer) 44%, var(--surface));
}

:root[data-appearance="mint"] :is(#mobileTaskFilterMenu, .category-picker-menu, .focus-task-picker-menu, .task-due-picker) {
  border-color: color-mix(in srgb, var(--mint-accent) 24%, var(--line));
  background: var(--surface-elevated);
  box-shadow: var(--shadow-popover);
}

:root[data-appearance="mint"] :is(.calendar-board, .calendar-grid, .archive-hub, .project-tree-shell, .count-days-view, .time-tools-view, .inbox-page) {
  border-color: var(--dashboard-line);
  background: color-mix(in srgb, var(--mint-card) 86%, transparent);
}

:root[data-appearance="mint"] :is(.calendar-day, .archive-row, .project-tree-node, .count-days-card, .time-tool-card, .inbox-item) {
  border-color: var(--dashboard-line-faint);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--mint-card) 88%, var(--mint-layer) 12%);
}

:root[data-appearance="mint"] :is(button, input, textarea, select):focus-visible {
  outline-color: var(--mint-accent);
}

:root[data-appearance="mint"] .legacy-dot-board {
  border-color: color-mix(in srgb, var(--mint-accent) 16%, var(--line));
  background: color-mix(in srgb, var(--mint-layer) 36%, transparent);
}

:root[data-appearance="mint"] .completion-dot.is-filled {
  background: var(--mint-accent);
}

/* styles/34-mint-responsive.css */
/* Mint responsive adjustments. */

@media (max-width: 980px) {
  :root[data-appearance="mint"] .workspace {
    padding: 14px;
  }

  :root[data-appearance="mint"] .board-grid {
    gap: 10px;
  }

  :root[data-appearance="mint"] .right-rail {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 768px) {
  :root[data-appearance="mint"] body {
    background: var(--mint-paper);
  }

  :root[data-appearance="mint"] .desktop-shell {
    border-radius: 0;
    box-shadow: none;
  }

  :root[data-appearance="mint"] .workspace {
    gap: 9px;
    padding: 12px 12px calc(96px + env(safe-area-inset-bottom));
    background: var(--mint-paper);
  }

  :root[data-appearance="mint"] .workspace-hero {
    min-height: 104px;
    padding: 12px;
    border-radius: var(--mint-ledger-radius);
  }

  :root[data-appearance="mint"] .task-composer {
    padding: 8px 0;
    border-radius: 0;
  }

  :root[data-appearance="mint"] .task-board {
    padding: 12px;
    border-radius: var(--mint-ledger-radius);
  }

  :root[data-appearance="mint"] .task-item {
    min-height: 64px;
    border-radius: 0;
  }

  :root[data-appearance="mint"] #mobileTaskFilterButton {
    min-width: 124px;
    background: color-mix(in srgb, var(--mint-layer-strong) 52%, var(--surface));
  }

  :root[data-appearance="mint"] .mobile-bottom-nav {
    border-top-color: color-mix(in srgb, var(--mint-accent) 18%, var(--line));
    background: color-mix(in srgb, var(--mint-card) 94%, transparent);
  }
}

/* styles/35-settings-system-surface.css */
/* Settings is a theme-independent system surface shared by every appearance. */

.settings-menu {
  --settings-canvas: #0d1828;
  --settings-surface: #12243a;
  --settings-surface-strong: #1a3350;
  --settings-control: #172b44;
  --settings-accent: #74a7e8;
  --settings-accent-strong: #3f7fca;
  --settings-text: #f4f7fb;
  --settings-muted: #aab9ca;
  --settings-line: rgba(183, 204, 229, 0.18);
  --settings-line-strong: rgba(183, 204, 229, 0.30);
  --settings-danger: #f28b82;
  --surface: var(--settings-surface);
  --surface-soft: var(--settings-control);
  --surface-raised: var(--settings-surface-strong);
  --surface-panel: var(--settings-surface);
  --surface-panel-strong: var(--settings-surface-strong);
  --surface-panel-muted: var(--settings-control);
  --surface-card: var(--settings-control);
  --surface-elevated: var(--settings-surface-strong);
  --panel-soft: rgba(116, 167, 232, 0.10);
  --button-soft: rgba(116, 167, 232, 0.11);
  --text: var(--settings-text);
  --text-secondary: #d8e2ef;
  --text-tertiary: #bdcad9;
  --muted: var(--settings-muted);
  --muted-strong: #d1dbe7;
  --line: var(--settings-line);
  --line-soft: rgba(183, 204, 229, 0.12);
  --line-strong: var(--settings-line-strong);
  --blue: var(--settings-accent);
  --accent: var(--settings-accent);
  --accent-soft: rgba(116, 167, 232, 0.16);
  --danger: var(--settings-danger);
  --danger-soft: rgba(242, 139, 130, 0.14);
  --success: #71c6a2;
  --success-soft: rgba(113, 198, 162, 0.14);
  --warning: #e4b870;
  --warning-soft: rgba(228, 184, 112, 0.14);
  --range-accent: var(--settings-accent);
  color-scheme: dark;
  color: var(--settings-text);
  border-color: var(--settings-line);
  background: var(--settings-canvas);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 30px 72px rgba(3, 9, 18, 0.52),
    0 0 0 100vmax rgba(3, 9, 18, 0.58);
  backdrop-filter: none;
}

:root .settings-menu.settings-menu {
  background: var(--settings-canvas);
  border-color: var(--settings-line);
}

.settings-menu,
.settings-menu :is(button, input, textarea, select) {
  color-scheme: dark;
}

:root .settings-menu .settings-menu-header {
  border-bottom-color: var(--settings-line);
  background: #0f1d30;
  backdrop-filter: none;
}

.settings-menu-header strong,
.settings-group h2,
.settings-section-nav-title,
.settings-menu :is(label, strong) {
  color: var(--settings-text);
}

.settings-close-button,
.settings-search-clear {
  border-color: var(--settings-line);
  background: var(--settings-control);
  color: var(--settings-muted);
  box-shadow: none;
}

.settings-close-button:is(:hover, :focus-visible),
.settings-search-clear:is(:hover, :focus-visible) {
  border-color: var(--settings-accent);
  background: var(--settings-surface-strong);
  color: var(--settings-text);
}

.settings-search-field input,
.settings-menu :is(input[type="text"], input[type="url"], input[type="password"], input[type="search"], textarea, select) {
  border-color: var(--settings-line);
  background: var(--settings-control);
  color: var(--settings-text);
  box-shadow: none;
}

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

.settings-search-field input:focus,
.settings-menu :is(input[type="text"], input[type="url"], input[type="password"], textarea, select):focus {
  border-color: var(--settings-accent);
  background: var(--settings-surface);
  box-shadow: 0 0 0 3px rgba(116, 167, 232, 0.16);
}

.settings-search-icon {
  border-color: var(--settings-muted);
}

.settings-search-icon::after {
  background: var(--settings-muted);
}

.settings-search-status,
.settings-group-description,
.settings-section-nav-hint,
.settings-menu small,
.settings-menu .storage-settings-hint {
  color: var(--settings-muted);
}

.settings-search-empty {
  border-color: var(--settings-line);
  background: var(--settings-control);
}

.settings-center-layout {
  border-color: var(--settings-line);
  background: var(--settings-canvas);
}

.settings-section-nav {
  border-right-color: var(--settings-line);
  background: #0f1d30;
}

.settings-section-nav button {
  border-color: transparent;
  background: transparent;
  color: var(--settings-muted);
  box-shadow: none;
}

.settings-section-nav button:is(:hover, :focus-visible) {
  border-color: var(--settings-line);
  background: rgba(116, 167, 232, 0.09);
  color: var(--settings-text);
}

.settings-section-nav button.is-active {
  border-color: rgba(116, 167, 232, 0.32);
  background: var(--settings-surface-strong);
  color: var(--settings-text);
  box-shadow: inset 3px 0 0 var(--settings-accent);
}

.settings-section-nav-icon,
.settings-menu [data-settings-icon]::before {
  color: var(--settings-accent);
}

.settings-content {
  background: var(--settings-canvas);
}

.settings-group {
  border-color: var(--settings-line);
  background: var(--settings-surface);
  box-shadow: none;
}

:root .settings-menu .settings-group {
  background: var(--settings-surface);
  box-shadow: none;
}

.settings-menu :is(
  .mini-field,
  .toggle-row,
  .settings-category-panel,
  .settings-inline-panel,
  .settings-all-tasks-row,
  .storage-migration-panel,
  .storage-settings-local-status,
  .settings-advanced,
  .calendar-feed-list,
  .right-rail-widget-settings-row
) {
  border-color: var(--settings-line);
  background: var(--settings-control);
  color: var(--settings-text);
  box-shadow: none;
}

.settings-menu :is(
  .appearance-segmented,
  .completion-mode-segmented,
  .theme-segmented,
  .color-mode-segmented,
  [role="group"]
) {
  border-color: var(--settings-line);
  background: #102138;
  box-shadow: none;
}

.settings-menu :is(
  .appearance-segmented,
  .completion-mode-segmented,
  .theme-segmented,
  .color-mode-segmented,
  [role="group"]
) button {
  background: transparent;
  color: var(--settings-muted);
  box-shadow: none;
}

.settings-menu :is(
  .appearance-segmented,
  .completion-mode-segmented,
  .theme-segmented,
  .color-mode-segmented,
  [role="group"]
) button:is(.is-active, [aria-pressed="true"]) {
  background: var(--settings-surface-strong);
  color: var(--settings-text);
  box-shadow: inset 0 0 0 1px rgba(116, 167, 232, 0.24);
}

.settings-menu .appearance-dropdown-button {
  border-color: var(--settings-line-strong);
  background: var(--settings-control);
  color: var(--settings-text);
  box-shadow: none;
}

.settings-menu .appearance-dropdown-button:is(:hover, :focus-visible),
.settings-menu .appearance-dropdown.is-open .appearance-dropdown-button {
  border-color: var(--settings-accent);
  background: var(--settings-surface-strong);
  box-shadow: 0 0 0 3px rgba(116, 167, 232, 0.14);
}

.settings-menu .appearance-dropdown-menu {
  border-color: var(--settings-line-strong);
  background: #102138;
  box-shadow: 0 18px 36px rgba(2, 8, 16, 0.42);
}

.settings-menu .appearance-dropdown-menu [role="option"] {
  color: var(--settings-muted);
}

.settings-menu .appearance-dropdown-menu [role="option"]:is(:hover, :focus-visible),
.settings-menu .appearance-dropdown-menu [aria-selected="true"] {
  background: var(--settings-surface-strong);
  color: var(--settings-text);
}

.settings-menu .toggle-row {
  background: var(--settings-control);
}

.settings-menu .toggle-row input {
  background: #0b1728;
  box-shadow: inset 0 0 0 1px var(--settings-line-strong);
}

.settings-menu .toggle-row input::before {
  background: #d9e3ef;
  box-shadow: 0 3px 8px rgba(2, 8, 16, 0.36);
}

.settings-menu .toggle-row input:checked {
  background: var(--settings-accent-strong);
  box-shadow:
    inset 0 0 0 1px rgba(166, 203, 248, 0.28),
    0 0 0 3px rgba(116, 167, 232, 0.12);
}

.settings-menu input[type="range"] {
  --range-accent: var(--settings-accent);
}

.settings-menu input[type="range"]::-webkit-slider-runnable-track {
  background: #0b1728;
  box-shadow: inset 0 0 0 1px var(--settings-line);
}

.settings-menu input[type="range"]::-webkit-slider-thumb {
  border-color: var(--settings-surface);
  background: var(--settings-accent);
  box-shadow: 0 4px 10px rgba(2, 8, 16, 0.36);
}

.settings-menu input[type="range"]::-moz-range-track {
  background: #0b1728;
  box-shadow: inset 0 0 0 1px var(--settings-line);
}

.settings-menu input[type="range"]::-moz-range-thumb {
  border-color: var(--settings-surface);
  background: var(--settings-accent);
}

.settings-menu :is(
  .settings-range-value,
  #fontSizeLabel,
  #displayScaleLabel,
  #scaleLabel
) {
  border-color: var(--settings-line);
  background: #0f2035;
  color: var(--settings-text);
  box-shadow: none;
}

.settings-menu :is(
  .settings-storage-button,
  .storage-settings-button,
  .settings-row-button,
  .settings-category-action,
  .calendar-feed-action
) {
  border-color: var(--settings-line);
  background: var(--settings-control);
  color: var(--settings-text);
  box-shadow: none;
}

.settings-menu :is(
  .settings-storage-button,
  .storage-settings-button,
  .settings-row-button,
  .settings-category-action,
  .calendar-feed-action
):is(:hover, :focus-visible) {
  border-color: var(--settings-accent);
  background: var(--settings-surface-strong);
}

.settings-menu :is(
  .settings-storage-button,
  .storage-settings-button
).is-primary {
  border-color: var(--settings-accent-strong);
  background: var(--settings-accent-strong);
  color: #ffffff;
}

.settings-menu :is(
  .settings-storage-button,
  .storage-settings-button
).is-danger {
  border-color: rgba(242, 139, 130, 0.36);
  background: rgba(242, 139, 130, 0.10);
  color: #ffc1bb;
}

.settings-menu :is(
  .settings-storage-feedback,
  .storage-settings-feedback,
  .save-feedback
) {
  color: var(--settings-muted);
}

.settings-menu :is(.settings-category-row, .settings-view-row, .right-rail-widget-settings-row) {
  border-color: var(--settings-line);
  background: #102138;
}

.settings-menu :is(.settings-category-row, .settings-view-row, .right-rail-widget-settings-row):is(:hover, :focus-within) {
  border-color: rgba(116, 167, 232, 0.34);
  background: var(--settings-surface-strong);
}

.settings-menu :focus-visible {
  outline-color: var(--settings-accent);
}

.settings-menu {
  scrollbar-color: var(--settings-surface-strong) var(--settings-canvas);
}

.settings-menu ::-webkit-scrollbar-thumb {
  background: var(--settings-surface-strong);
}

.settings-menu ::-webkit-scrollbar-track {
  background: var(--settings-canvas);
}

@media (max-width: 720px) {
  :root .settings-menu.settings-menu {
    inset: 0;
    z-index: 1000;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    transform: none;
    transition: none;
  }

  .settings-section-nav {
    border-right: 0;
    border-bottom: 1px solid var(--settings-line);
  }
}