:root {
  --md-sys-color-primary: #314263;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e5ecff;
  --md-sys-color-on-primary-container: #14213d;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #ffffff;
  --md-sys-color-surface-container: #f7faf7;
  --md-sys-color-surface-container-high: #eef6f1;
  --md-sys-color-outline: #817567;
  --md-sys-color-outline-variant: #d7ccb8;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-success: #476b3f;
  --md-sys-elevation-1: 0 1px 2px rgba(31, 36, 48, 0.1), 0 1px 3px rgba(31, 36, 48, 0.08);
  --md-sys-elevation-2: 0 2px 6px rgba(31, 36, 48, 0.12), 0 8px 24px rgba(31, 36, 48, 0.08);
  --md-sys-elevation-3: 0 6px 16px rgba(31, 36, 48, 0.16), 0 20px 48px rgba(31, 36, 48, 0.12);
  --paper: var(--md-sys-color-surface);
  --ink: #1f2430;
  --muted-ink: #5a6272;
  --panel: var(--md-sys-color-surface-container-lowest);
  --panel-border: var(--md-sys-color-outline-variant);
  --accent: var(--md-sys-color-primary);
  --accent-strong: #263552;
  --edit-green: #4b9b78;
  --edit-green-dark: #2f6f55;
  --edit-green-soft: #e8f3ec;
  --app-font: Helvetica, Arial, sans-serif;
  --app-display-font: Helvetica, Arial, sans-serif;
  --app-bg: #fbf8f2;
  --app-surface: #fffdf9;
  --app-surface-soft: #f4efe8;
  --app-ink: #24211d;
  --app-muted: #70685e;
  --app-muted-2: #8c8378;
  --app-line: #ded3c4;
  --app-hairline: #ede4d9;
  --app-primary: #2d786f;
  --app-primary-ink: #1f665f;
  --app-primary-soft: #ddf0eb;
  --app-danger: #94473e;
  --app-danger-soft: #f2ddd7;
  --app-blue: #3c759f;
  --app-blue-soft: #e2eef8;
  --font-size-xs: 0.72rem;
  --font-size-sm: 0.78rem;
  --font-size-meta: 0.86rem;
  --font-size-body: 0.96rem;
  --font-size-lg: 1.06rem;
  --font-size-title: 1.45rem;
  --font-size-display: 1.95rem;
  --font-size-display-lg: 2.75rem;
  --font-weight-body: 560;
  --font-weight-meta: 640;
  --font-weight-strong: 740;
  --font-weight-title: 780;
  --line-height-tight: 1.1;
  --line-height-body: 1.35;
  --space-1: 0.25rem;
  --space-2: 0.45rem;
  --space-3: 0.65rem;
  --space-4: 0.85rem;
  --space-5: 1.125rem;
  --space-6: 1.25rem;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 11px;
  --control-height: 2.7rem;
  --control-height-mobile: 3.25rem;
  --soft-grid: rgba(63, 78, 110, 0.08);
  --empty-tint: color-mix(in srgb, var(--member-accent, #c7934c) 12%, var(--md-sys-color-surface-container-high));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 91.96%;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  background: var(--md-sys-color-surface);
  color-scheme: light;
}

body {
  margin: 0;
  min-height: 100dvh;
  padding-bottom: 0;
  overflow-x: clip;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: var(--md-sys-color-surface);
  background-color: var(--md-sys-color-surface);
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}

[data-scroll-anchor] {
  scroll-margin-block: 1rem calc(6rem + env(safe-area-inset-bottom));
}

a {
  color: inherit;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--md-sys-color-primary) 70%, white);
  outline-offset: 3px;
}

.button_to {
  margin: 0;
}

.page-shell {
  width: min(1200px, calc(100% - 1rem));
  margin: 0 auto;
  padding: 0 0 3rem;
}

.page-stack {
  display: grid;
  gap: 1.25rem;
}

.app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem clamp(1.4rem, 5vw, 2.4rem);
  border: 0;
  border-radius: 0 0 32px 32px;
  background: linear-gradient(135deg, #4b9b78, #78b894);
  color: #fff;
}

.app-header__copy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: grid;
  gap: 0.25rem;
  justify-items: start;
  text-align: left;
}

.app-header__actions {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.app-header__eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.app-header__title {
  margin: 0;
  color: #fff;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: clamp(2rem, 7vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.app-header .app-button {
  border: 0;
  background: #fff;
  color: #4b9b78;
  justify-content: center;
}

.app-button,
.menu__summary {
  appearance: none;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-low);
  color: var(--ink);
  padding: 0.62rem 0.92rem;
  min-height: 2.8rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.app-button:hover,
.menu__summary:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface-container-high));
}

.app-button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
  transform: none;
}

.app-button:disabled:hover {
  background: var(--md-sys-color-surface-container-low);
}

.app-button--primary {
  border-color: var(--accent-strong);
  background: var(--accent);
  color: #fff;
}

.app-button--primary:disabled:hover {
  background: var(--accent);
}

.app-button--compact {
  min-height: 2.4rem;
  padding-block: 0.45rem;
}

.app-button--icon {
  min-width: 2.8rem;
  justify-content: center;
  font-size: 1.1rem;
}

.menu {
  position: relative;
}

.menu[open] .menu__summary {
  border-color: var(--accent-strong);
}

.menu__summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu__summary::-webkit-details-marker {
  display: none;
}

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 200px;
  display: grid;
  gap: 0.35rem;
  padding: 0.6rem;
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  background: var(--md-sys-color-surface-container-lowest);
  z-index: 5;
}

.menu__link {
  display: block;
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  min-height: 2.9rem;
  color: var(--ink);
  text-decoration: none;
}

.menu__link:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}

.bottom-navigation {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 0.4rem;
  width: min(31rem, calc(100% - 1rem));
  padding: 0.5rem;
  border: 1px solid #d9cbb7;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  touch-action: pan-y;
}

.bottom-navigation__link {
  appearance: none;
  border: 0;
  background: transparent;
  flex: 1;
  min-height: 2.75rem;
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #6f7d78;
  font: inherit;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.bottom-navigation__link span:last-child {
  min-width: 0;
}

.bottom-navigation__icon {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1;
}

.bottom-navigation__icon svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.bottom-navigation__link:hover {
  background: #edf6f1;
  color: #4b9b78;
}

.bottom-navigation__link.is-active,
.bottom-navigation__link.is-active:hover {
  background: #4b9b78;
  color: #fff;
}

.bottom-navigation__button {
  white-space: nowrap;
}

.sheet-backdrop-cancel {
  display: none;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1rem;
}

.planning-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.planning-preview {
  display: grid;
  gap: 0.6rem;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease;
}

.planning-preview:hover {
  transform: translateY(-2px);
  border-color: var(--accent-strong);
}

.planning-preview__eyebrow {
  margin: 0;
  color: var(--muted-ink);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.planning-preview__title {
  margin: 0;
  font-size: 1.2rem;
  font-family: var(--app-display-font);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #19362a;
}

.planning-preview__copy {
  margin: 0;
  color: var(--muted-ink);
  line-height: 1.45;
}

.member-card {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--panel-border);
  border-left: 8px solid var(--member-accent);
  border-radius: 28px;
  background: var(--md-sys-color-surface-container-lowest);
}

.member-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.member-card__title {
  margin: 0;
  font-size: 1.2rem;
  font-family: var(--app-display-font);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #19362a;
}

.member-card__count {
  margin: 0.3rem 0 0;
  color: var(--muted-ink);
  font-size: 0.92rem;
}

.reorder-controls {
  display: inline-flex;
  gap: 0.45rem;
}

.icon-button {
  border: 1px solid color-mix(in srgb, var(--member-accent) 35%, #9ba2ad);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  cursor: pointer;
}

.task-list {
  display: grid;
  gap: 0.6rem;
}

.member-card__tasks {
  align-content: start;
  grid-auto-rows: min-content;
}

.task-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-left: 5px solid var(--member-accent, var(--md-sys-color-primary));
  border-radius: 22px;
  background: var(--md-sys-color-surface-container-lowest);
  max-height: 8rem;
  overflow: hidden;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    max-height 220ms ease,
    padding 220ms ease,
    border-width 220ms ease,
    margin 220ms ease;
}

.task-row.is-completed {
  opacity: 0.72;
}

.task-row.is-completing {
  opacity: 0.34;
  transform: translateY(-2px);
}

.task-row.is-completion-held {
  opacity: 0.72;
  pointer-events: none;
}

form.is-completion-held,
.habit-row.is-completion-held,
.shopping-item-row.is-completion-held {
  opacity: 0.72;
  pointer-events: none;
}

form.is-completing {
  overflow: hidden;
  transition:
    opacity 180ms ease,
    max-height 220ms ease,
    padding 220ms ease,
    margin 220ms ease;
}

form.is-collapsing {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.shopping-item-row.is-completing {
  opacity: 0.34;
  transform: translateY(-2px);
}

.shopping-item-row.is-collapsing {
  opacity: 0;
  transform: translateY(-0.35rem);
  max-height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}

.task-row.is-collapsing {
  opacity: 0;
  transform: translateY(-0.35rem);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}

.task-row__meta {
  margin-top: 0.25rem;
  color: var(--muted-ink);
  font-size: 0.9rem;
}

.task-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.task-toggle input {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid color-mix(in srgb, var(--member-accent) 58%, #a0a8b6);
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-lowest);
  cursor: pointer;
  position: relative;
}

.member-card__tasks .task-row {
  max-height: none;
  padding: 0.7rem 0.8rem;
}

.task-toggle input:checked {
  border-color: var(--member-accent);
}

.task-toggle input:checked::after {
  content: "";
  position: absolute;
  inset: 0.18rem;
  border-radius: 999px;
  background: var(--member-accent);
}

.task-row__title {
  margin: 0;
  font-weight: 700;
}

.task-row__content-link {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.task-row--link {
  text-decoration: none;
}

.task-row--link:hover {
  border-color: var(--accent-strong);
}

.task-row--button {
  width: 100%;
  text-align: left;
  appearance: none;
  cursor: pointer;
}

.empty-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  gap: 0.5rem;
  padding: 1rem;
  background: transparent;
  color: var(--ink);
}

.empty-state__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  color: var(--member-accent);
  font-weight: 900;
}

.empty-state__text {
  justify-self: center;
  margin: 0;
  font-weight: 700;
  text-align: center;
}

.panel {
  border: 1px solid var(--panel-border);
  border-radius: 28px;
  background: var(--md-sys-color-surface-container-lowest);
  padding: 1rem;
}

.panel__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.panel__title,
.section-title {
  margin: 0;
  font-family: var(--app-display-font);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #19362a;
}

.panel__hint {
  margin: 0;
  color: var(--muted-ink);
}

.app-flash {
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--app-surface);
  color: var(--app-ink);
  font-size: var(--font-size-body);
  font-weight: 720;
  line-height: 1.3;
}

.app-flash--alert {
  border-color: color-mix(in srgb, var(--app-danger) 38%, var(--app-line));
  background: color-mix(in srgb, var(--app-danger-soft) 52%, var(--app-surface));
  color: var(--app-danger);
}

.app-flash--notice {
  border-color: color-mix(in srgb, var(--app-primary) 35%, var(--app-line));
  background: color-mix(in srgb, var(--app-primary-soft) 55%, var(--app-surface));
  color: var(--app-primary-ink);
}

.member-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.member-chip {
  border-radius: 999px;
  background: color-mix(in srgb, var(--member-accent) 16%, white);
  color: color-mix(in srgb, var(--member-accent) 70%, #19362a);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  padding: 0.28rem 0.5rem;
}

.member-chip--everyone {
  background: color-mix(in srgb, var(--edit-green) 15%, white);
  color: #2f6f55;
}

.planner-empty-day {
  width: 100%;
  height: 100%;
  min-height: 100%;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.routine-date-header {
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.7rem;
}

.routine-date-title {
  flex: 0 1 auto;
  min-width: 0;
}

.date-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-lowest);
  color: #19362a;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.date-nav-button:hover {
  border-color: var(--accent-strong);
  background: #edf6f1;
  color: #2f6f55;
}

.date-nav-button--disabled {
  color: #aab4ae;
  opacity: 0.55;
}

.date-nav-button--disabled:hover {
  border-color: var(--panel-border);
  background: var(--md-sys-color-surface-container-lowest);
  color: #aab4ae;
}

.date-today-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-lowest);
  color: #19362a;
  font-weight: 800;
  text-decoration: none;
}

.date-today-button:hover {
  border-color: var(--accent-strong);
  background: #edf6f1;
  color: #2f6f55;
}

.date-today-button--current {
  background: #edf6f1;
  color: #2f6f55;
}

.date-today-button--current:hover {
  border-color: var(--panel-border);
  background: #edf6f1;
  color: #2f6f55;
}

.empty-day-link {
  color: inherit;
  text-decoration: none;
}

.empty-state--centered {
  justify-items: center;
  text-align: center;
}

.task-form {
  display: grid;
  gap: 0.85rem;
}

.task-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.task-form__grid--task,
.task-form__grid--event {
  grid-template-columns: minmax(4.5rem, 0.35fr) minmax(14rem, 1fr) minmax(13rem, 1fr) minmax(11rem, 0.75fr);
}

.task-form__grid--task {
  grid-template-columns: minmax(4.5rem, 0.35fr) minmax(13rem, 1fr) minmax(11rem, 0.8fr) minmax(10rem, 0.7fr) minmax(9.5rem, 0.65fr);
}

.task-form__grid--task .field--assignees,
.task-form__grid--task .recurrence-custom-fields,
.task-form__grid--event .field--assignees {
  grid-column: 1 / -1;
}

.task-form__grid--task .field--assignees .field__label,
.task-form__grid--event .field--assignees .field__label {
  margin-bottom: 0.1rem;
}

.task-form__grid--meal {
  grid-template-columns: repeat(3, minmax(12rem, 1fr));
}

.task-form__grid--pin {
  grid-template-columns: repeat(3, minmax(10rem, 1fr));
}

.field--emoji input {
  width: 5.25rem;
  min-width: 5.25rem;
  text-align: center;
}

.field--title {
  min-width: 0;
}

.recurrence-custom-fields {
  display: grid;
  grid-template-columns: minmax(8rem, 0.45fr) minmax(10rem, 0.55fr) minmax(13rem, 0.75fr) minmax(16rem, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem;
  border: 1px dashed rgba(63, 104, 67, 0.32);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
}

.recurrence-custom-fields[hidden] {
  display: none;
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted-ink);
}

.field__label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted-ink);
}

.field input,
.field select,
.field textarea {
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 0.75rem 0.85rem;
  background: var(--md-sys-color-surface-container-lowest);
  font: inherit;
  min-height: 3rem;
}

.field--with-error input,
.field--with-error select,
.field--with-error textarea {
  border-color: #c76d5f;
}

.field__error {
  margin: 0;
  color: #9b3c31;
  font-size: 0.92rem;
  font-weight: 700;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tasks-layout {
  display: grid;
  gap: 1rem;
}

.shopping-layout {
  display: grid;
  gap: 1rem;
}

.shopping-add-panel,
.shopping-edit-panel,
.shopping-stores-panel {
  display: grid;
  gap: 0.9rem;
}

.shopping-add-form {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(9rem, 0.38fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.shopping-add-form__item,
.shopping-add-form__store {
  min-width: 0;
}

.shopping-list-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.shopping-list-heading .section-title {
  padding-left: 0;
}

.shopping-store-group {
  border: 0;
  background: transparent;
  padding: 0;
}

.shopping-store-group.is-empty {
  display: none;
}

body.is-shopping-dragging .shopping-store-group.is-empty {
  display: grid;
}

body.is-shopping-dragging .shopping-store-group {
  border: 2px dashed #b7d7c6;
  border-radius: 24px;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.5);
}

.shopping-store-group.is-drop-target {
  border-color: var(--edit-green);
  background: #e8f3ec;
}

.shopping-store-group .task-section__header {
  justify-content: flex-start;
  margin: 0.3rem 0 0.1rem;
  list-style: none;
  cursor: pointer;
}

.shopping-store-group .task-section__header::-webkit-details-marker {
  display: none;
}

.shopping-store-group .task-section__header::before {
  content: "";
  width: 0.4rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--edit-green);
}

.shopping-store-group--system .task-section__header::before {
  background: #817567;
}

.shopping-store-group .task-section__count {
  margin-left: auto;
  min-width: 2.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #e8f3ec;
  color: #4b9b78;
  font-weight: 800;
  text-align: center;
}

.shopping-store-group .task-section__header::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid #6f7d78;
  border-bottom: 2px solid #6f7d78;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.shopping-store-group:not([open]) .task-section__header::after {
  transform: rotate(-45deg);
}

.shopping-item-row {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  max-height: none;
  min-height: 4.8rem;
  --member-accent: var(--edit-green);
  border-left-color: var(--edit-green);
}

.shopping-item-row[draggable="true"] {
  cursor: grab;
}

.shopping-item-row.is-dragging {
  cursor: grabbing;
  opacity: 0.42;
}

.shopping-item-row__drag-handle {
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  min-height: 2rem;
  border-radius: 999px;
  color: #6f7d78;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}

.shopping-item-row__drag-handle:hover {
  background: #e8f3ec;
  color: var(--edit-green);
}

.shopping-item-row.is-dragging .shopping-item-row__drag-handle {
  cursor: grabbing;
}

.shopping-item-toggle input {
  width: 2rem;
  height: 2rem;
  border-width: 3px;
  border-color: #7fb89a;
  background: #fff;
}

.shopping-item-toggle input:checked {
  border-color: #4b9b78;
  background: #fff;
}

.shopping-item-toggle input:checked::after {
  content: "";
  position: absolute;
  inset: 0.24rem;
  border-radius: 999px;
  background: #4b9b78;
}

.shopping-item-row.is-completed .task-row__title {
  text-decoration: line-through;
}

.task-form__grid--shopping-item {
  grid-template-columns: minmax(12rem, 1fr) minmax(9rem, 0.4fr);
}

.shopping-store-create-form {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.shopping-store-settings-list {
  gap: 0.7rem;
}

.shopping-store-settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
  padding: 0.85rem;
  border: 1px solid #e3ece7;
  border-radius: 24px;
  background: #fff;
}

.shopping-store-settings-row .settings-row__form {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto;
  gap: 0.65rem;
  align-items: end;
  min-width: 0;
}

.shopping-store-settings-row .settings-row__actions {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}

.icon-button--danger {
  border-color: #efc3ba;
  background: #fff7f4;
  color: #9b3c31;
  font-size: 1.2rem;
  font-weight: 800;
}

.shopping-empty-state {
  min-height: 9rem;
  align-content: center;
}

.page-shell--chores {
  padding-bottom: 7rem;
}

.chores-layout {
  display: grid;
  gap: 1rem;
}

.chores-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.chores-summary__item {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid #d9e3dc;
  border-radius: 16px;
  background: #fff;
}

.chores-summary__item strong {
  color: #19362a;
  font-size: 1.45rem;
  font-weight: 850;
  line-height: 1;
}

.chores-summary__item em {
  color: #6f7d78;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
}

.chores-workspace {
  display: grid;
  gap: 1rem;
}

.chores-list-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.chores-list-heading .section-title {
  padding-left: 0;
}

.chores-filter {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.32rem;
  border: 1px solid #d9e3dc;
  border-radius: 999px;
  background: #fff;
}

.chores-filter__link {
  display: inline-grid;
  place-items: center;
  min-height: 1.55rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  color: #6f7d78;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: var(--line-height-body);
  text-decoration: none;
}

.chores-filter__link.is-selected {
  background: #ddf0eb;
  color: #1f665f;
}

.chore-section {
  border: 0;
  background: transparent;
  padding: 0;
}

.chore-section .task-section__header {
  justify-content: flex-start;
  margin: 0.6rem 0 0.2rem;
}

.chore-section .task-section__header::before {
  content: "";
  width: 0.4rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--chores-muted-2);
}

.chore-section--overdue .task-section__header::before {
  background: var(--chores-danger);
}

.chore-section--today .task-section__header::before {
  background: var(--chores-primary);
}

.chore-section--upcoming .task-section__header::before,
.chore-section--done .task-section__header::before {
  background: var(--chores-muted-2);
}

.chore-section .task-section__count {
  margin-left: auto;
  min-width: 2.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--chores-surface-soft);
  color: var(--chores-muted);
  font-weight: 800;
  text-align: center;
}

.chore-list {
  gap: 0.75rem;
}

.chore-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.82rem;
  max-height: none;
  min-height: 5.25rem;
  overflow: hidden;
  border: 1px solid #e3ece7;
  border-left: 6px solid #4b9b78;
  border-radius: 18px;
  background: #fff;
  padding: 0.9rem;
}

.chore-row.is-selected {
  border-left-color: #2d786f;
}

.chore-toggle {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0.3rem 0 0;
  border: 3px solid #7fb89a;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.chore-toggle:hover {
  background: #e8f3ec;
}

.chore-row__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  text-decoration: none;
}

.chore-row__copy {
  min-width: 0;
}

.chore-row__copy .task-row__title {
  margin: 0;
  color: #19362a;
  font-size: 1.08rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.18;
}

.chore-row__copy .task-row__meta {
  margin: 0.2rem 0 0;
  color: #8ca098;
  font-size: 0.92rem;
}

.chore-priority {
  color: #6f7d78;
  font-size: 0.9rem;
  font-weight: 900;
}

.chore-priority--p1 {
  color: #c94f45;
}

.chore-priority--p2 {
  color: #2d786f;
}

.chore-priority--p3 {
  color: #817567;
}

.chore-checklist-preview {
  grid-column: 2;
  display: grid;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.chore-checklist-preview__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: #53647f;
  font-size: 0.9rem;
  font-weight: 800;
}

.chore-checklist-preview__item input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: #4b9b78;
}

.chore-checklist-preview__item.is-done span {
  color: #8ca098;
}

.chore-edit-panel {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.task-form__grid--chore {
  grid-template-columns: minmax(4.5rem, 0.35fr) minmax(14rem, 1fr) minmax(8rem, 0.55fr) minmax(11rem, 0.75fr) minmax(8rem, 0.55fr) minmax(9rem, 0.65fr);
}

.chore-edit-panel .task-form__grid--chore {
  grid-template-columns: minmax(4.8rem, 0.35fr) minmax(0, 1fr);
}

.chore-detail-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.chore-detail-strip span {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid #d9e3dc;
  border-radius: 14px;
  background: #f7faf7;
  color: #6f7d78;
  font-size: 0.82rem;
  font-weight: 800;
}

.chore-detail-strip b {
  overflow-wrap: anywhere;
  color: #19362a;
  font-size: 1rem;
}

.chore-checklist-editor {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px dashed #b7d7c6;
  border-radius: 18px;
  background: #f7faf7;
}

.chore-checklist-editor .task-section__header {
  margin: 0;
}

.chore-checklist-editor__rows {
  display: grid;
  gap: 0.45rem;
}

.chore-checklist-editor__row-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
}

.chore-checklist-editor__row-shell.is-destroy-pending,
.task-subtask-editor__row-shell.is-destroy-pending {
  display: none !important;
}

.chore-checklist-editor__row {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.05rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--chores-hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--chores-surface) 88%, transparent);
}

.chore-checklist-editor__row > span[aria-hidden]:first-of-type {
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid #7fb89a;
  border-radius: 999px;
  background: #fff;
}

.chore-checklist-editor__row textarea {
  min-width: 0;
  width: 100%;
  min-height: 2.35rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--chores-ink);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
  padding: 0.55rem 0;
  resize: none;
}

.chore-checklist-editor__row input[type="time"] {
  justify-self: end;
  width: 5.85rem;
  min-width: 5.85rem;
  max-width: 5.85rem;
  min-height: 2rem;
  padding: 0 1.75rem 0 0.65rem;
  border: 1px solid var(--chores-line);
  border-radius: 999px;
  outline: 0;
  background-color: color-mix(in srgb, var(--chores-primary-soft) 54%, var(--chores-surface));
  color: var(--chores-primary-ink);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}

.chore-checklist-editor__row input[type="time"]::-webkit-date-and-time-value {
  margin: 0;
  text-align: center;
}

.chore-checklist-editor__row input[type="time"].is-empty {
  width: 5.35rem;
  min-width: 5.35rem;
  max-width: 5.35rem;
  padding: 0;
  color: transparent;
}

.chore-checklist-editor__row input[type="time"].is-empty::-webkit-date-and-time-value {
  color: transparent;
}

.chore-checklist-editor__row input[type="time"].is-empty:focus {
  width: 5.85rem;
  min-width: 5.85rem;
  max-width: 5.85rem;
  padding: 0 1.75rem 0 0.65rem;
  color: var(--chores-primary-ink);
}

.chore-delete-button {
  justify-self: start;
  border-color: #efc3ba;
  background: #fff7f4;
  color: #9b3c31;
}

.chores-empty-state {
  min-height: 12rem;
  align-content: center;
}

.tasks-layout .task-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.page-shell--edit-workbench,
body:has([data-tasks-layout]) .page-shell {
  padding-bottom: 7rem;
}

.task-create-panel {
  display: grid;
  gap: 0.85rem;
  min-height: 4.6rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.task-create-panel__summary {
  display: flex;
  justify-content: center;
  list-style: none;
  cursor: pointer;
}

.task-create-panel__summary::-webkit-details-marker {
  display: none;
}

.task-create-panel__button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  justify-content: center;
  min-height: 5.4rem;
  padding: 0.62rem 0.92rem;
  border: 3px dashed #b7d7c6;
  border-radius: 28px;
  background: transparent;
  color: #4b9b78;
  font-size: 1.18rem;
  font-weight: 800;
}

.task-create-panel[open] {
  border: 1px solid var(--panel-border);
  border-top: 6px solid var(--edit-green);
  border-radius: 30px;
  background: var(--md-sys-color-surface-container-lowest);
  padding: 1.25rem;
  gap: 1rem;
}

.task-create-panel[open] .task-form {
  margin-top: 0.15rem;
}

.task-create-panel[open] .task-create-panel__summary {
  margin-bottom: 0.15rem;
}

.task-create-panel[open] .task-create-panel__button {
  width: auto;
  min-height: 2.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--edit-green);
  color: #fff;
  font-size: 1rem;
}

.page-shell--edit-workbench .task-create-panel[open] {
  border-color: #d9e3dc;
  border-top-color: var(--edit-green);
}

.page-shell--edit-workbench .field label,
.page-shell--edit-workbench .field__label {
  color: #53647f;
  font-size: 0.95rem;
  font-weight: 800;
}

.page-shell--edit-workbench .field input,
.page-shell--edit-workbench .field select,
.page-shell--edit-workbench .field textarea {
  border-color: #cfd9d3;
  border-radius: 18px;
  background: #fff;
  color: #152034;
}

.page-shell--edit-workbench .field input:focus,
.page-shell--edit-workbench .field select:focus,
.page-shell--edit-workbench .field textarea:focus {
  border-color: var(--edit-green);
  outline: 3px solid rgba(75, 155, 120, 0.18);
}

.page-shell--edit-workbench .form-actions .app-button--primary {
  border-color: var(--edit-green-dark);
  background: var(--edit-green);
  color: #fff;
}

.page-shell--edit-workbench .form-actions .app-button--primary:hover {
  background: var(--edit-green-dark);
}

.section-stack {
  display: grid;
  gap: 0.75rem;
}

.task-section {
  display: grid;
  gap: 0.6rem;
}

.tasks-layout .task-section {
  border: 0;
  background: transparent;
  padding: 0;
}

.task-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.tasks-layout .task-section__header {
  justify-content: flex-start;
  margin: 0.6rem 0 0.2rem;
}

.tasks-layout .task-section__header::before {
  content: "";
  width: 0.4rem;
  height: 2rem;
  border-radius: 999px;
  background: #4b9b78;
}

.tasks-layout .task-section:first-child .task-section__header::before {
  background: #dd4d4a;
}

.tasks-layout .task-section:first-child .section-title {
  color: #dd4d4a;
}

.task-section__count {
  color: var(--muted-ink);
  font-size: 0.92rem;
}

.tasks-layout .task-section__count {
  margin-left: auto;
  min-width: 2.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #e8f3ec;
  color: #4b9b78;
  font-weight: 800;
  text-align: center;
}

.tasks-layout .task-list {
  gap: 0.75rem;
}

.tasks-layout .task-row {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  max-height: none;
  min-height: 5.4rem;
  overflow: hidden;
  border: 1px solid #e3ece7;
  border-left: 6px solid var(--member-accent);
  border-radius: 24px;
  background: #fff;
  padding: 1rem 1.05rem;
}

.tasks-layout .task-toggle input {
  width: 2rem;
  height: 2rem;
  border-width: 3px;
}

.tasks-layout .task-row__title {
  color: #19362a;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tasks-layout .task-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.45rem;
  color: #8ca098;
  font-size: 0.95rem;
}

.task-row__delete-form {
  margin: 0;
  align-self: center;
}

.task-row__delete-button {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid #efc3ba;
  border-radius: 999px;
  background: #fff7f4;
  color: #9b3c31;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.task-row__delete-button:hover {
  background: #ffe7df;
  color: #7e251d;
}

.tasks-layout .task-row__meta span:not(:last-child)::after {
  content: " ·";
  color: #b4c2bc;
}

.task-row__assignee {
  border-radius: 999px;
  background: color-mix(in srgb, var(--member-accent) 12%, #fff);
  color: var(--member-accent);
  padding: 0.12rem 0.55rem;
  font-weight: 800;
}

.task-row__meta .task-row__assignee::after,
.task-row__meta .task-row__overdue::after {
  content: "";
}

.task-row__overdue {
  color: #dd4d4a;
  font-weight: 800;
}

.collapsible {
  border-top: 1px dashed rgba(49, 66, 99, 0.18);
  padding-top: 0.9rem;
}

.collapsible summary {
  cursor: pointer;
  font-weight: 700;
}

.assignee-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.55rem;
}

.assignee-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  min-height: 3rem;
  overflow: hidden;
  border: 1px solid #dce7e1;
  border-radius: 18px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--member-accent) 10%, #fff), #fff 70%);
  color: #53647f;
  font-weight: 800;
  cursor: pointer;
  padding: 0.58rem 0.68rem 0.58rem 0.9rem;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.assignee-option::before {
  content: "";
  width: 0.32rem;
  align-self: stretch;
  border-radius: 999px;
  background: color-mix(in srgb, var(--member-accent) 72%, #fff);
}

.assignee-option__name {
  flex: 1;
  min-width: 0;
  color: #19362a;
}

.assignee-option input {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  appearance: none;
  border: 2px solid color-mix(in srgb, var(--member-accent) 45%, #8da499);
  border-radius: 999px;
  background: #fff;
  display: grid;
  place-content: center;
  margin: 0;
}

.assignee-option input:checked {
  border-color: var(--member-accent);
  background: var(--member-accent);
}

.assignee-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--member-accent) 55%, #cfd9d3);
  background: linear-gradient(90deg, color-mix(in srgb, var(--member-accent) 18%, #fff), #fff 72%);
  color: #19362a;
}

.assignee-option:focus-within {
  outline: 3px solid color-mix(in srgb, var(--member-accent) 22%, transparent);
  outline-offset: 2px;
}

.settings-panel {
  border-color: #d9e3dc;
  border-top: 6px solid var(--edit-green);
  border-radius: 30px;
  padding: 1.25rem;
}

.settings-panel .panel__header {
  margin-bottom: 1rem;
}

.settings-panel .panel__title {
  font-size: 1.45rem;
}

.settings-panel .panel__hint {
  color: #53647f;
}

.settings-panel__supporting-copy {
  margin: 0;
  color: #53647f;
  font-size: 0.95rem;
  line-height: 1.45;
}

html:has(.page-shell--settings),
body:has(.page-shell--settings) {
  --settings-bg: var(--app-bg);
  --settings-card: var(--app-surface);
  --settings-ink: var(--app-ink);
  --settings-muted: var(--app-muted);
  --settings-muted-2: var(--app-muted-2);
  --settings-line: var(--app-line);
  --settings-hairline: var(--app-hairline);
  --settings-primary: var(--app-primary);
  --settings-primary-ink: var(--app-primary-ink);
  --settings-primary-soft: var(--app-primary-soft);
  background: var(--settings-bg);
  color: var(--settings-ink);
  font-family: var(--app-font);
}

.page-shell--settings {
  align-content: start;
  width: min(100%, 100%);
  max-width: none;
  min-height: 100dvh;
  gap: 0.75rem;
  padding: 0 1.25rem 2rem;
  color: var(--settings-ink);
}

.page-shell--settings .app-header {
  min-height: 4.1rem;
  padding: 1rem 0 0.3rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.settings-app-header .app-header__copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.settings-back-link {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid var(--settings-line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--settings-card) 86%, transparent);
  color: var(--settings-muted);
  font-size: 1.45rem;
  line-height: 1;
  text-decoration: none;
}

.page-shell--settings .app-header__title {
  color: var(--settings-ink);
  font-family: var(--app-display-font);
  font-size: clamp(2rem, 8vw, 3.25rem);
  font-weight: var(--font-weight-title);
  letter-spacing: 0;
  line-height: 1;
}

.page-shell--settings .settings-card {
  display: grid;
  gap: 0.85rem;
  padding: 1.1rem;
  border: 1px solid var(--settings-line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--settings-card) 88%, transparent);
}

.page-shell--settings .settings-card h2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.2rem;
  color: var(--settings-primary-ink);
  font-family: var(--app-font);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0;
  line-height: var(--line-height-body);
}

.page-shell--settings .settings-card h2::before {
  content: "";
  align-self: stretch;
  width: 0.32rem;
  min-height: 1.75rem;
  border-radius: 999px;
  background: var(--settings-primary);
}

.settings-card__header {
  display: grid;
  gap: 0.45rem;
}

summary.settings-card__header {
  list-style: none;
}

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

.settings-card__header p {
  margin: 0;
  color: var(--settings-muted);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: 1.25;
}

.settings-action-list {
  display: grid;
}

.settings-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 3.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--settings-hairline);
  color: var(--settings-ink);
}

.settings-action-row:first-child {
  border-top: 0;
}

.settings-action-row strong,
.settings-action-row em,
.settings-action-row b {
  display: block;
}

.settings-action-row strong {
  font-size: 1rem;
  font-weight: 790;
}

.settings-action-row em {
  margin-top: 0.2rem;
  color: var(--settings-muted);
  font-size: var(--font-size-body);
  font-style: normal;
  font-weight: var(--font-weight-strong);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.settings-action-row em.settings-action-row__note {
  max-width: 34rem;
  font-weight: var(--font-weight-body);
}

.settings-action-row b {
  color: var(--settings-muted);
  font-size: 0.95rem;
  font-weight: 760;
}

.shortcut-panel {
  margin-bottom: 0;
}

.shortcut-panel__summary {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  cursor: pointer;
}

.calendar-settings-panel__summary {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  cursor: pointer;
}

.household-workspace-panel__summary {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  cursor: pointer;
}

.shortcut-panel__toggle {
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--settings-primary-ink);
  border-bottom: 2px solid var(--settings-primary-ink);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.calendar-settings-panel__toggle {
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--settings-primary-ink);
  border-bottom: 2px solid var(--settings-primary-ink);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.household-workspace-panel__toggle {
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--settings-primary-ink);
  border-bottom: 2px solid var(--settings-primary-ink);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.shortcut-panel[open] .shortcut-panel__toggle {
  transform: rotate(225deg) translate(-2px, -2px);
}

.calendar-settings-panel[open] .calendar-settings-panel__toggle {
  transform: rotate(225deg) translate(-2px, -2px);
}

.household-workspace-panel[open] .household-workspace-panel__toggle {
  transform: rotate(225deg) translate(-2px, -2px);
}

.shortcut-panel__content {
  display: grid;
  gap: 0.85rem;
}

.calendar-settings-panel__content {
  display: grid;
  gap: 0.85rem;
}

.household-workspace-panel__content {
  display: grid;
  gap: 1rem;
}

.household-workspace-panel__manage {
  justify-self: stretch;
}

.shortcut-panel:not([open]) > .shortcut-panel__content,
.calendar-settings-panel:not([open]) > .calendar-settings-panel__content,
.household-workspace-panel:not([open]) > .household-workspace-panel__content {
  display: none;
}

.household-workspace-form,
.household-member-form,
.household-member-create-form,
.household-invitation-form {
  display: grid;
  gap: 0.75rem;
}

.settings-section-heading {
  display: grid;
  gap: 0.25rem;
}

.settings-section-heading h3 {
  margin: 0;
  color: var(--settings-ink);
  font-size: 1rem;
  font-weight: 790;
}

.settings-section-heading p {
  margin: 0;
  color: var(--settings-muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.household-roster-section,
.household-invitations-section {
  display: grid;
  gap: 0.75rem;
}

.household-settings-section,
.invitation-code-panel {
  display: grid;
  gap: 0.9rem;
}

.household-member-list,
.household-invitation-list {
  display: grid;
  gap: 0.55rem;
}

.household-member-category-label {
  margin: 0;
  color: var(--settings-muted);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.2;
}

.household-member-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  min-height: 3.05rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--settings-hairline);
  border-radius: var(--radius-md, 8px);
  background: var(--settings-card);
}

.household-member-row:not(.household-member-row--new)::before {
  content: "";
  position: absolute;
  top: 0.8rem;
  bottom: 0.8rem;
  left: 0.32rem;
  width: 0.32rem;
  border-radius: 999px;
  background: var(--member-accent);
}

.household-member-row--new {
  border-style: dashed;
}

.household-member-form {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: end;
}

.household-member-row__rename,
.household-member-name-form {
  display: grid;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.household-member-row__rename {
  grid-template-columns: minmax(0, 1fr);
}

.household-member-name-form {
  grid-template-columns: minmax(0, 1fr);
}

.household-member-name-form input[type="text"],
.household-member-create-form input[type="text"] {
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--settings-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 640;
}

.household-member-create-form input[type="text"]::placeholder {
  color: color-mix(in srgb, var(--settings-muted) 70%, transparent);
}

.household-member-name-form input[type="text"]:focus {
  border-radius: 8px;
}

.household-member-form--new {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding-top: 0.75rem;
  border-top: 1px solid var(--settings-hairline);
}

.household-member-create-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding-top: 0.75rem;
  border-top: 1px solid var(--settings-hairline);
}

.household-member-create-form.household-member-row {
  align-items: center;
  padding: 0.55rem 0.7rem;
}

.household-member-form__color input[type="color"] {
  width: 3rem;
  min-width: 3rem;
  padding: 0.25rem;
}

.household-member-row__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.household-member-row__actions .button_to {
  display: flex;
}

.household-member-row__actions .icon-button {
  border-color: var(--settings-hairline);
  color: var(--settings-ink);
}

.household-member-row__actions .household-member-row__delete-button {
  border-color: var(--settings-hairline);
  color: var(--settings-muted);
  font-size: 1.2rem;
  font-weight: 800;
}

.household-empty-note {
  margin: 0;
  color: var(--settings-muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

html:has(.page-shell--family),
body:has(.page-shell--family) {
  --family-bg: #fbf8f2;
  --family-surface: #fffdf9;
  --family-surface-soft: #f4efe8;
  --family-ink: #24211d;
  --family-muted: #70685e;
  --family-muted-2: #8c8378;
  --family-line: #ded3c4;
  --family-hairline: #ede4d9;
  --family-primary: #2d786f;
  --family-primary-ink: #1f665f;
  --family-primary-soft: #ddf0eb;
  --tasks-bg: var(--family-bg);
  --tasks-surface: var(--family-surface);
  --tasks-surface-soft: var(--family-surface-soft);
  --tasks-ink: var(--family-ink);
  --tasks-muted: var(--family-muted);
  --tasks-muted-2: var(--family-muted-2);
  --tasks-line: var(--family-line);
  --tasks-hairline: var(--family-hairline);
  --tasks-primary: var(--family-primary);
  --tasks-primary-ink: var(--family-primary-ink);
  --tasks-primary-soft: var(--family-primary-soft);
  --tasks-danger: #94473e;
  --tasks-rose-soft: #f2ddd7;
  --habits-bg: var(--family-bg);
  --habits-surface: var(--family-surface);
  --habits-surface-soft: var(--family-surface-soft);
  --habits-ink: var(--family-ink);
  --habits-muted: var(--family-muted);
  --habits-muted-2: var(--family-muted-2);
  --habits-line: var(--family-line);
  --habits-hairline: var(--family-hairline);
  --habits-primary: var(--family-primary);
  --habits-primary-ink: var(--family-primary-ink);
  --habits-primary-soft: var(--family-primary-soft);
  --habits-danger: #94473e;
  --habits-rose-soft: #f2ddd7;
  --chores-bg: var(--family-bg);
  --chores-surface: var(--family-surface);
  --chores-surface-soft: var(--family-surface-soft);
  --chores-ink: var(--family-ink);
  --chores-muted: var(--family-muted);
  --chores-muted-2: var(--family-muted-2);
  --chores-line: var(--family-line);
  --chores-hairline: var(--family-hairline);
  --chores-primary: var(--family-primary);
  --chores-primary-ink: var(--family-primary-ink);
  --chores-primary-soft: var(--family-primary-soft);
  --chores-danger: #94473e;
  --chores-rose-soft: #f2ddd7;
  --chores-blue: #3c759f;
  --chores-blue-soft: #e2eef8;
  background: var(--family-bg);
  color: var(--family-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

.page-shell.page-shell--family {
  align-content: start;
  gap: 0.7rem;
  width: min(100%, 100%);
  max-width: none;
  min-height: 100dvh;
  padding: 0 1.25rem 7rem;
  color: var(--family-ink);
}

.app-header.family-app-header {
  max-width: none;
  min-height: 4.2rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 1rem 0 0.45rem;
  border-radius: 0;
  background: transparent;
  color: var(--family-ink);
}

.family-app-header .app-header__title {
  color: var(--family-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.95rem, 8vw, 3.25rem);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1;
}

.family-app-header .daily-dashboard__settings {
  width: 2.125rem;
  min-width: 2.125rem;
  height: 2.125rem;
  border: 1px solid color-mix(in srgb, var(--family-primary) 42%, var(--family-line));
  border-radius: 8px;
  background: var(--family-surface);
  color: var(--family-primary);
}

.family-workspace-panel {
  display: grid;
  gap: 0.95rem;
  padding: 1.125rem;
  border: 1px solid var(--family-line);
  border-radius: var(--radius-lg);
  background: var(--family-surface);
}

.family-workspace-grid {
  display: grid;
  gap: 1.125rem;
  min-width: 0;
}

.family-editor-panel {
  display: grid;
  gap: 0.95rem;
  align-content: start;
  min-width: 0;
  padding: 1.125rem;
  border: 1px solid var(--family-line);
  border-radius: var(--radius-lg);
  background: var(--family-surface);
}

.family-editor-panel > .panel-heading {
  display: grid;
  gap: 0.875rem;
  margin: 0;
}

.family-editor-panel .panel-heading .section-title {
  margin: 0;
  color: var(--family-ink);
  font-size: 1.45rem;
  font-weight: 780;
  line-height: 1.1;
}

.family-editor-mobile-header {
  display: none;
}

.family-member-filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.7rem, 1fr));
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--family-line);
  border-radius: 8px;
  background: var(--family-surface-soft, #f4efe8);
}

.family-member-filter__link {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 2.65rem;
  min-height: 1.55rem;
  padding: 0 0.45rem;
  border-radius: 6px;
  color: var(--family-muted);
  font-size: 0.86rem;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}

.family-member-filter__link.is-selected {
  background: var(--family-surface);
  color: var(--family-ink);
}

.family-member-filter__link .filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: var(--family-primary-soft);
  color: var(--family-primary-ink);
  font-size: 0.72rem;
  font-weight: 800;
}

.family-member-work-group {
  display: grid;
  gap: 0.65rem;
}

.page-shell--family .task-section {
  display: grid;
  gap: 0.65rem;
  border: 0;
  background: transparent;
  padding: 0;
}

.page-shell--family .task-section + .task-section {
  margin-top: 0.9rem;
}

.page-shell--family .task-section__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.page-shell--family .task-section__header::before {
  align-self: stretch;
  width: 0.32rem;
  min-height: 2.5rem;
  border-radius: 999px;
  background: var(--tasks-muted-2);
  content: "";
}

.page-shell--family .task-section__header .section-title {
  margin: 0;
  color: var(--tasks-muted);
  font-size: 0.9rem;
  font-weight: 820;
}

.page-shell--family .task-section__count {
  margin: 0;
  min-width: 0;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--tasks-surface-soft);
  color: var(--tasks-muted-2);
  font-size: 0.84rem;
  font-weight: 740;
  white-space: nowrap;
}

.family-member-work-group__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding-left: 0;
  border-left: 0;
}

.family-member-work-group__header::before {
  align-self: stretch;
  width: 0.32rem;
  min-height: 2.5rem;
  border-radius: 999px;
  background: var(--member-accent, var(--family-primary));
  content: "";
}

.family-member-work-group__header h2 {
  margin: 0;
  color: var(--family-ink);
  font-size: 1rem;
  font-weight: 780;
  line-height: 1.1;
}

.family-member-work-group__header > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  padding: 0 0.72rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--member-accent, var(--family-primary)) 16%, white);
  color: var(--family-primary-ink);
  font-size: 0.88rem;
  font-weight: 780;
}

.family-assigned-work-list {
  display: grid;
  gap: 0.65rem;
}

.family-assigned-work-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem;
  min-height: 0;
  padding: 0.8rem;
  border: 1px solid var(--family-hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--family-surface) 86%, transparent);
  color: var(--family-ink);
}

.family-assigned-work-row.is-selected {
  border-color: color-mix(in srgb, var(--family-primary) 34%, var(--family-line));
}

.family-assigned-work-row.has-checklist {
  row-gap: 0.7rem;
}

.family-habit-work-row {
  align-items: center;
}

.family-assigned-work-row__kind {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  padding: 0.16rem 0.44rem;
  border-radius: 999px;
  background: transparent;
  color: var(--family-muted);
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1.1;
}

.family-assigned-work-row__kind--chore {
  background: transparent;
  color: var(--family-primary-ink);
}

.family-assigned-work-row__kind--habit {
  background: transparent;
  color: var(--family-primary-ink);
}

.family-assigned-work-row__kind--task,
.family-assigned-work-row__kind--subtask,
.family-assigned-work-row__kind--checklist-item {
  color: var(--family-primary-ink);
}

.family-assigned-work-row__toggle {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.28rem 0 0;
}

.family-assigned-work-row__toggle input[type="checkbox"] {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid var(--family-muted-2, #8c8378);
  border-radius: 999px;
  background: var(--family-surface);
  cursor: pointer;
  position: relative;
}

.family-assigned-work-row__toggle input[type="checkbox"]:checked {
  border-color: var(--family-primary);
  background: radial-gradient(circle at center, var(--family-primary) 0 5px, transparent 6px);
}

.family-assigned-work-row__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.family-assigned-work-row__copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.family-assigned-work-row__copy .task-row__title {
  display: block;
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--family-ink);
  font-size: 0.96rem;
  font-weight: 790;
  line-height: 1.2;
}

.family-assigned-work-row__copy .task-row__meta {
  display: grid;
  gap: 0.08rem;
  margin: 0;
  color: var(--family-muted);
  font-size: 0.8rem;
  font-weight: 640;
  overflow-wrap: anywhere;
  white-space: normal;
}

.family-assigned-work-row__copy .task-row__meta span + span::before,
.family-assigned-work-row__copy .task-row__meta span:not(:last-child)::after {
  content: none;
}

.page-shell--family .family-chore-checklist-preview {
  grid-column: 2;
  margin-top: 0;
  padding-top: 0.1rem;
}

.page-shell--family .family-chore-checklist-preview .chore-checklist-preview__item {
  min-height: 1.2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--family-muted);
}

.page-shell--family .family-chore-checklist-preview .chore-checklist-preview__label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.48rem;
  min-width: 0;
}

.page-shell--family .family-chore-checklist-preview .chore-checklist-preview__copy {
  min-width: 0;
  overflow-wrap: anywhere;
}

.page-shell--family .family-chore-checklist-preview .chore-checklist-preview__time {
  color: var(--family-primary-ink);
}

.family-work-empty {
  margin: 0;
  padding: 1rem;
  color: var(--family-muted);
  font-weight: 700;
}

.page-shell--family .family-editor-panel .task-form {
  display: grid;
  gap: 0.9rem;
}

.page-shell--family .family-editor-panel .task-form__grid--personal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.page-shell--family .family-editor-panel .task-form .field {
  display: grid;
  gap: 0.45rem;
}

.page-shell--family .family-editor-panel .task-form .field--title,
.page-shell--family .family-editor-panel .task-form .field--url,
.page-shell--family .family-editor-panel .task-form .field--assignee,
.page-shell--family .family-editor-panel .task-form .field--recurrence-frequency,
.page-shell--family .family-editor-panel .task-form .recurrence-custom-fields {
  grid-column: 1 / -1;
}

.page-shell--family .family-editor-panel .task-form .field label,
.page-shell--family .family-editor-panel .task-form .field__label {
  margin: 0;
  color: var(--tasks-muted);
  font-size: 0.78rem;
  font-weight: 780;
}

.page-shell--family .family-editor-panel .task-form .field input,
.page-shell--family .family-editor-panel .task-form .field select,
.page-shell--family .family-editor-panel .task-form .field textarea {
  inline-size: 100%;
  max-inline-size: 100%;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--tasks-line);
  border-radius: 8px;
  background: var(--tasks-surface);
  color: var(--tasks-ink);
  font-size: 0.96rem;
  font-weight: 650;
}

.page-shell--family .family-editor-panel .task-form .field input,
.page-shell--family .family-editor-panel .task-form .field select {
  height: 2.7rem;
  padding: 0 0.75rem;
}

.page-shell--family .family-editor-panel .task-form .field input[type="date"],
.page-shell--family .family-editor-panel .task-form .field input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  line-height: 1;
  text-align: left;
  padding-inline: 0.75rem;
}

.page-shell--family .family-editor-panel .task-form .field input[type="date"]::-webkit-date-and-time-value,
.page-shell--family .family-editor-panel .task-form .field input[type="time"]::-webkit-date-and-time-value {
  display: flex;
  align-items: center;
  min-height: 100%;
  margin: 0;
  text-align: left;
}

.page-shell--family .family-editor-panel .task-form .field input[type="date"]::-webkit-calendar-picker-indicator,
.page-shell--family .family-editor-panel .task-form .field input[type="time"]::-webkit-calendar-picker-indicator {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.page-shell--family .family-editor-panel .task-form .field textarea {
  min-height: 4.5rem;
  padding: 0.75rem;
  resize: none;
}

.page-shell--family .family-editor-panel .task-form .recurrence-custom-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page-shell--family .family-editor-panel .task-form .recurrence-custom-fields[hidden] {
  display: none;
}

.page-shell--family .family-editor-panel .task-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
}

.page-shell--family .family-editor-panel .task-form .form-actions .app-button {
  min-width: 6.6rem;
  min-height: 2.65rem;
  border-radius: 8px;
  font-weight: 800;
}

.page-shell--family .family-editor-panel .task-form .form-actions .app-button--primary {
  border-color: color-mix(in srgb, var(--tasks-primary) 42%, var(--tasks-line));
  background: var(--tasks-primary);
  color: #fffdf8;
}

.household-invitation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--settings-hairline);
}

.household-invitation-row strong,
.household-invitation-row em {
  display: block;
}

.household-invitation-row em {
  color: var(--settings-muted);
  font-style: normal;
}

.shortcut-token-panel {
  display: grid;
  gap: 0.5rem;
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--settings-primary) 25%, var(--settings-line));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--settings-primary-soft) 40%, var(--settings-card));
}

.shortcut-token-panel strong {
  color: var(--settings-primary-ink);
  font-size: 1rem;
}

.shortcut-token-panel p {
  margin: 0;
  color: var(--settings-muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.shortcut-token-panel__copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}

.shortcut-token-panel__input {
  width: 100%;
  min-width: 0;
  min-height: 2.8rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--settings-primary) 25%, var(--settings-line));
  border-radius: var(--radius-md);
  background: var(--settings-card);
  color: var(--settings-primary-ink);
  font-weight: 800;
}

.shortcut-token-panel__copy-button {
  min-height: 2.8rem;
}

.shortcut-steps {
  display: grid;
  gap: 0.55rem;
  padding: 0 1rem;
}

.shortcut-steps h3 {
  margin: 0;
  color: var(--settings-ink);
  font-size: 1rem;
  font-weight: 790;
}

.shortcut-steps ol {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--settings-muted);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: 1.25;
}

.shortcut-steps li::marker {
  color: var(--settings-muted);
}

.shortcut-step-url {
  display: block;
  margin-top: 0.45rem;
  color: var(--settings-muted);
  font-size: var(--font-size-body);
  font-style: normal;
  font-weight: var(--font-weight-body);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.shortcut-json-block {
  display: grid;
  gap: 0.45rem;
  padding: 0 1rem;
}

.shortcut-json-block h3 {
  margin: 0;
  color: var(--settings-ink);
  font-size: 1rem;
  font-weight: 790;
}

.shortcut-json-block p {
  margin: 0;
  color: var(--settings-muted);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
}

.shortcut-json-example {
  overflow-x: auto;
  margin: 0;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--settings-primary) 25%, var(--settings-line));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--settings-primary-soft) 40%, var(--settings-card));
  color: var(--settings-primary-ink);
  font-size: 0.9rem;
}

.shortcut-status-card .button_to {
  display: grid;
}

.shortcut-token-button {
  justify-self: stretch;
  width: 100%;
}

.calendar-selection-form {
  display: grid;
  gap: 0.85rem;
}

.calendar-selection-list {
  display: grid;
  gap: 0.55rem;
}

.calendar-selection-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-height: 3.35rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--settings-hairline);
}

.calendar-selection-row:first-child {
  border-top: 0;
}

.calendar-selection-row input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--settings-primary);
}

.calendar-selection-row__dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  background: var(--calendar-color, var(--settings-primary));
}

.calendar-selection-row strong,
.calendar-selection-row em {
  display: block;
}

.calendar-selection-row strong {
  color: var(--settings-ink);
  font-size: 0.98rem;
  font-weight: 790;
  line-height: 1.2;
}

.calendar-selection-row em,
.calendar-settings-panel__empty {
  margin: 0;
  color: var(--settings-muted);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: var(--font-weight-body);
  line-height: 1.3;
}

.calendar-disconnect-button {
  justify-self: stretch;
  width: 100%;
  color: var(--app-danger);
}

.calendar-settings-panel .settings-action-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.calendar-settings-panel .button_to,
.calendar-settings-panel .app-button {
  width: 100%;
}

.account-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.page-shell--edit-workbench .family-member-setting {
  border-color: #e3ece7;
  border-left-width: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--member-accent) 16%, #fff), #fff 42%),
    #fff;
}

.page-shell--edit-workbench .member-settings-form .app-button,
.page-shell--edit-workbench .color-form input[type="color"],
.page-shell--edit-workbench .icon-button {
  background: #fff;
}

.page-shell--edit-workbench .member-settings-form .app-button {
  color: #19362a;
  font-weight: 800;
}

.page-shell--edit-workbench .member-settings-form .app-button:disabled,
.page-shell--edit-workbench .icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.settings-list {
  display: grid;
  gap: 0.75rem;
}

.settings-list__item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px dashed rgba(49, 66, 99, 0.18);
}

.settings-list__label {
  color: var(--muted-ink);
  font-weight: 800;
}

.settings-list__value {
  font-weight: 800;
}

.family-member-settings {
  display: grid;
  gap: 0.75rem;
}

.family-member-setting {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(7rem, 0.34fr) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  overflow: hidden;
  padding: 0.85rem;
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--member-accent) 14%, transparent), transparent 36%),
    var(--md-sys-color-surface-container-lowest);
}

.family-member-setting__color-band {
  align-self: stretch;
  width: 0.7rem;
  min-height: 4.25rem;
  border-radius: 999px;
  background: var(--member-accent);
}

.family-member-setting__copy {
  min-width: 0;
}

.family-member-setting__name {
  margin: 0;
  font-size: 1rem;
  font-family: var(--app-display-font);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #19362a;
}

.family-member-setting__hint {
  margin: 0.2rem 0 0;
  color: var(--muted-ink);
  font-size: 0.88rem;
}

.family-member-setting__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: flex-end;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
}

.page-shell--edit-workbench .family-member-setting__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.color-form {
  display: grid;
  gap: 0.35rem;
  min-width: 5.2rem;
}

.member-settings-form {
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) minmax(4.8rem, auto) auto;
  gap: 0.65rem;
  align-items: end;
  min-width: 0;
}

.page-shell--edit-workbench .member-settings-form {
  grid-template-columns: minmax(10rem, 1fr) minmax(5.2rem, auto) minmax(4.25rem, auto);
}

.member-settings-form > * {
  min-width: 0;
}

.member-settings-form__name input {
  width: 100%;
  min-height: 2.4rem;
}

.member-create-form,
.invitation-create-form {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px dashed #bfd1c7;
  border-radius: 22px;
  background: #fbfdfb;
}

.task-form__grid--member-create {
  grid-template-columns: minmax(12rem, 1fr) minmax(5.2rem, auto);
}

.invitation-link-panel {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid #bfd1c7;
  border-radius: 18px;
  background: var(--edit-green-soft);
}

.invitation-link-panel__input {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid #bfd1c7;
  border-radius: 12px;
  background: #fff;
  color: #19362a;
  font-weight: 700;
}

.invitation-list {
  margin-top: 1rem;
}

.invitation-join-panel {
  max-width: 44rem;
  justify-self: center;
}

body:has(.login-shell) {
  padding-bottom: 0;
  background:
    linear-gradient(145deg, rgba(237, 244, 241, 0.92), rgba(251, 248, 242, 0.32) 36%, transparent 52%),
    linear-gradient(180deg, #fffdf9, #fbf8f2);
}

.login-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 7rem 6rem;
}

.login-screen {
  width: min(100%, 76rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 27.5rem);
  align-items: center;
  gap: 6rem;
}

.login-copy {
  display: grid;
  gap: 1.35rem;
  max-width: 43rem;
}

.login-copy h1 {
  margin: 0;
  max-width: 42rem;
  color: #24221e;
  font-family: var(--app-display-font);
  font-size: 5.7rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.98;
}

.login-copy p {
  margin: 0;
  max-width: 33rem;
  color: #70695f;
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.42;
}

.auth-panel {
  display: grid;
  gap: 1.1rem;
  padding: 1.6rem;
  border: 1px solid #ddd2c4;
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.9);
}

.auth-panel__heading {
  display: grid;
  gap: 0.25rem;
}

.auth-panel__heading p {
  margin: 0;
  color: #70695f;
  font-size: 0.9rem;
  font-weight: 760;
}

.auth-panel__heading h2 {
  margin: 0;
  color: #24221e;
  font-family: var(--app-display-font);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.08;
}

.login-flash {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid #dcc2b9;
  border-radius: 8px;
  background: #fff4ef;
  color: #7c3426;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
}

.login-flash--notice {
  border-color: #c5d7c6;
  background: #f3fbf3;
  color: #2f6139;
}

.google-action {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0 1rem;
  border: 1px solid #ddd2c4;
  border-radius: 8px;
  background: #fffdf9;
  color: #24221e;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.google-action:hover {
  border-color: color-mix(in srgb, var(--app-primary) 34%, #ddd2c4);
  background: color-mix(in srgb, var(--app-primary-soft) 28%, #fffdf9);
}

.google-mark {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid #eee5da;
  border-radius: 999px;
  background: #fff;
  color: #3c4043;
  font-size: 1.05rem;
  font-weight: 800;
}

.google-action strong {
  overflow: hidden;
  font-size: 1.05rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-panel > p {
  margin: 0;
  color: #70695f;
  font-size: 0.95rem;
  font-weight: 590;
  line-height: 1.45;
}

.color-form input[type="color"] {
  width: 3.8rem;
  height: 2.65rem;
  padding: 0.15rem;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--md-sys-color-surface-container-lowest);
}

.placeholder-copy {
  max-width: 38rem;
  color: var(--muted-ink);
  line-height: 1.6;
}

@media (max-width: 980px) {
  .login-shell {
    place-items: center;
    padding: 5.5rem 4rem;
  }

  .login-screen {
    max-width: 42rem;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .login-copy {
    max-width: 38rem;
  }

  .login-copy h1 {
    font-size: 4.4rem;
  }

  .auth-panel {
    max-width: 32rem;
  }
}

/* Inbox lives as its own processing screen; Home only exposes the entry action. */
.daily-dashboard__actions {
  position: relative;
  z-index: 51;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.daily-dashboard__inbox,
.daily-dashboard__settings {
  position: relative;
}

.daily-dashboard__inbox {
  display: inline-grid;
  place-items: center;
  width: 2.125rem;
  min-width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-muted-2);
  text-decoration: none;
  line-height: 0;
}

.daily-dashboard__inbox svg {
  display: block;
  width: 1.12rem;
  height: 1.12rem;
  margin: auto;
}

.daily-dashboard__inbox-count {
  position: absolute;
  top: -0.3rem;
  right: -0.34rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: var(--app-danger-soft);
  color: var(--app-danger);
  font-size: 0.64rem;
  font-weight: 820;
  line-height: 1;
}

html:has(.page-shell--inbox),
body:has(.page-shell--inbox) {
  min-height: 100%;
  background: var(--habits-bg);
}

.page-shell--inbox {
  width: min(100%, 82rem);
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2.2rem);
  background: transparent;
}

.inbox-app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.inbox-app-header .app-header__copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.inbox-header-back-link {
  display: none;
}

.inbox-layout,
.inbox-workspace {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
}

.inbox-list-panel {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  padding: 1.38rem 1.45rem 1.55rem;
  border: 1px solid var(--app-line);
  border-radius: 1.28rem;
  background: var(--app-surface);
}

.inbox-list-heading {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  margin-bottom: 0.72rem;
}

.inbox-list-heading::before {
  min-height: 1.65rem;
}

.inbox-list-heading .section-title {
  color: var(--app-primary-ink);
  font-size: 1.34rem;
  line-height: 1.02;
}

.page-shell--inbox .daily-inbox-list {
  gap: 0;
}

.page-shell--inbox .daily-inbox-row {
  min-height: 3.02rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page-shell--inbox .daily-inbox-row + .daily-inbox-row {
  border-top: 1px solid var(--app-line);
}

.page-shell--inbox .daily-inbox-row__copy .task-row__title {
  font-size: 0.92rem;
  font-weight: 740;
  line-height: 1.12;
}

.page-shell--inbox .daily-inbox-row__type {
  color: var(--app-muted, var(--habits-muted, var(--daily-muted)));
}

.page-shell--inbox .inbox-empty-row {
  padding: 0;
}

@media (min-width: 761px) {
  .page-shell--inbox {
    padding-top: clamp(3rem, 8vh, 5.6rem);
  }

  .inbox-layout {
    width: min(100%, 62rem);
    margin: 0 auto;
  }

  .page-shell--dashboard .daily-dashboard__inbox {
    width: 2.45rem;
    min-width: 2.45rem;
    height: 2.45rem;
    border-color: var(--app-line);
    border-radius: 0.78rem;
    background: var(--app-surface);
    color: var(--app-muted-2);
  }

  .page-shell--dashboard .daily-dashboard__inbox svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke-width: 1.8;
  }
}

/* Origin-preserving editors: canonical Chore and Shopping sheets may render over Family or Inbox. */
.page-shell.is-editing-chore .sheet-backdrop-cancel--chore,
.page-shell.is-creating-shopping-item .sheet-backdrop-cancel--shopping,
.page-shell.is-editing-shopping-item .sheet-backdrop-cancel--shopping {
  position: fixed;
  inset: 0;
  z-index: 56;
  display: block;
  background: rgba(36, 49, 44, 0.38);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: transparent;
  text-decoration: none;
}

.page-shell [data-canonical-chore-edit-panel],
.page-shell [data-canonical-shopping-item-edit-panel] {
  z-index: 70;
  background: var(--color-card);
}

/* Portable canonical sheets carry their own tokens when hosted outside dedicated pages. */
.page-shell [data-canonical-chore-edit-panel] {
  --chores-surface: #fffdf9;
  --chores-surface-soft: #f4efe8;
  --chores-ink: #24211d;
  --chores-muted: #70685e;
  --chores-muted-2: #8c8378;
  --chores-line: #ded3c4;
  --chores-hairline: #ede4d9;
  --chores-primary: #2d786f;
  --chores-primary-ink: #1f665f;
  --chores-primary-soft: #ddf0eb;
  --chores-danger: #94473e;
  --chores-rose-soft: #f2ddd7;
  --chores-blue: #3c759f;
  --chores-blue-soft: #e2eef8;
}

.page-shell [data-canonical-shopping-item-edit-panel] {
  --shopping-surface: #fffdf9;
  --shopping-surface-soft: #f4efe8;
  --shopping-ink: #24211d;
  --shopping-muted: #70685e;
  --shopping-muted-2: #8c8378;
  --shopping-line: #ded3c4;
  --shopping-hairline: #ede4d9;
  --shopping-primary: #2d786f;
  --shopping-primary-ink: #1f665f;
  --shopping-primary-soft: #ddf0eb;
  --shopping-danger: #94473e;
}

.page-shell [data-canonical-chore-edit-panel] .chore-edit-mobile-header {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
}

.page-shell [data-canonical-chore-edit-panel] .chore-sheet-cancel-link {
  justify-self: end;
  color: var(--app-muted-2, var(--color-muted));
  font-size: 0.88rem;
  font-weight: 760;
  text-decoration: none;
}

.page-shell [data-canonical-chore-edit-panel] .chore-form {
  display: grid;
  gap: 0.72rem;
}

.page-shell [data-canonical-chore-edit-panel] .task-form__grid--chore {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem 0.86rem;
}

.page-shell [data-canonical-chore-edit-panel] .chore-form__identity,
.page-shell [data-canonical-chore-edit-panel] .chore-priority-options,
.page-shell [data-canonical-chore-edit-panel] .field--chore-schedule,
.page-shell [data-canonical-chore-edit-panel] .field--assignee,
.page-shell [data-canonical-chore-edit-panel] .field--recurrence-frequency,
.page-shell [data-canonical-chore-edit-panel] .chore-cadence-fields {
  grid-column: 1 / -1;
}

.page-shell [data-canonical-chore-edit-panel] .chore-form__identity-fields {
  grid-template-columns: 4.8rem minmax(0, 1fr);
}

.page-shell [data-canonical-chore-edit-panel] .field input,
.page-shell [data-canonical-chore-edit-panel] .field select,
.page-shell [data-canonical-chore-edit-panel] .field textarea {
  min-height: 3.05rem;
  border-radius: 11px;
  font-size: 16px;
}

.page-shell [data-canonical-chore-edit-panel] .task-form-chip {
  min-height: 2.35rem;
  padding: 0.5rem 0.82rem;
  font-size: 0.88rem;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: none;
}

@media (min-width: 761px) {
  .page-shell [data-canonical-chore-edit-panel] {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(620px, calc(100vw - 2rem));
    height: min(86dvh, 44rem);
    max-height: min(86dvh, 44rem);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    padding: 1.25rem 1.35rem;
    border-radius: 20px;
    transform: translate(-50%, -50%);
  }

  .page-shell [data-canonical-chore-edit-panel] .chore-edit-mobile-header {
    z-index: 3;
    margin: 0 0 0.78rem;
  }

  .page-shell [data-canonical-chore-edit-panel] .chore-edit-mobile-header h2 {
    font-size: 1.28rem;
    font-weight: 820;
    line-height: 1.08;
  }

  .page-shell [data-canonical-chore-edit-panel] > .panel-heading {
    display: none;
  }

  .page-shell [data-canonical-chore-edit-panel] .chore-sheet__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 0.25rem;
  }

  .page-shell [data-canonical-chore-edit-panel] .chore-form--edit > .form-actions {
    position: sticky !important;
    right: auto;
    bottom: 0;
    left: auto;
    z-index: 15;
    margin: 0.85rem 0 0;
    padding: 0.85rem 0 0;
    background: linear-gradient(to bottom, transparent, var(--color-card) 0.85rem);
  }

  .page-shell [data-canonical-shopping-item-edit-panel] {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(620px, calc(100vw - 2rem));
    max-height: min(86dvh, 44rem);
    overflow-y: auto;
    padding: 1.25rem 1.35rem;
    border-radius: 22px;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 760px) {
  html:has(.page-shell.is-editing-chore),
  body:has(.page-shell.is-editing-chore),
  html:has(.page-shell.is-editing-shopping-item),
  body:has(.page-shell.is-editing-shopping-item) {
    height: 100%;
    overflow: hidden;
  }

  .page-shell [data-canonical-chore-edit-panel],
  .page-shell [data-canonical-shopping-item-edit-panel] {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-height: 92dvh;
    overflow-y: auto;
    padding: 0.95rem 1.35rem calc(7.55rem + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    overscroll-behavior: contain;
  }

  .page-shell [data-canonical-chore-edit-panel] > .panel-heading,
  .page-shell [data-canonical-shopping-item-edit-panel] > .panel-heading {
    display: none;
  }

  .page-shell [data-canonical-chore-edit-panel] .task-form__grid--chore {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-shell [data-canonical-chore-edit-panel] .chore-edit-mobile-header {
    position: sticky;
    top: -0.95rem;
    z-index: 14;
    margin: -0.95rem -1.35rem 0.85rem;
    padding: 1rem 1.35rem 0.8rem;
    background: var(--color-card);
  }

  .page-shell [data-canonical-chore-edit-panel] .chore-form--edit > .form-actions,
  .page-shell [data-canonical-shopping-item-edit-panel] .form-actions--edit-submit {
    position: fixed !important;
    inset: auto 0 0;
    z-index: 82;
    margin: 0;
    padding: 0.85rem 1.35rem calc(0.95rem + env(safe-area-inset-bottom));
    background: var(--color-card);
    filter: drop-shadow(0 -12px 18px color-mix(in srgb, var(--color-ink) 14%, transparent));
  }
}

/* Final Chore action-row parity: Delete and Save align like Habit on every breakpoint. */
.page-shell--chores.is-editing-chore .chore-form--edit > .form-actions--with-delete {
  display: grid;
  grid-template-columns: 3.35rem minmax(0, 1fr);
  align-items: stretch;
  gap: 0.8rem;
}

.page-shell--chores.is-editing-chore .chore-form--edit > .form-actions--with-delete .chore-delete-icon-button,
.page-shell--chores.is-editing-chore .chore-form--edit > .form-actions--with-delete .app-button--primary {
  width: 100%;
  min-width: 0;
  height: 3.35rem;
  min-height: 3.35rem;
  margin: 0;
  align-self: stretch;
}

@media (max-width: 760px) {
  /* Delete now lives in the action grid; remove the legacy floating-button reservation. */
  .page-shell--chores.is-editing-chore .chore-form--edit > .form-actions--with-delete {
    padding-inline: 1.35rem;
  }
}

/* Final Chore checklist parity: mirror Task subtask reveal and compact-row behavior. */
.page-shell--chores .chore-checklist-editor {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.page-shell--chores .chore-checklist-editor__rows {
  display: grid;
  gap: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: transparent;
}

.page-shell--chores .chore-checklist-editor__rows:has(.chore-checklist-editor__row-shell:not([hidden])) {
  overflow: hidden;
  border: 1px solid var(--app-line);
  background: color-mix(in srgb, var(--app-surface) 96%, white);
}

.page-shell--chores .chore-checklist-editor__rows:has(.chore-checklist-editor__row-shell.is-new.is-empty[hidden]:only-child) {
  display: none;
}

.page-shell--chores .chore-checklist-editor__row-shell[hidden],
.page-shell--chores .chore-checklist-editor__row-shell.is-new.is-empty {
  display: none !important;
}

.page-shell--chores .chore-checklist-editor__row-shell + .chore-checklist-editor__row-shell {
  border-top: 1px solid var(--app-line);
}

.page-shell--chores .chore-checklist-editor__row {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr) auto auto;
  grid-template-areas:
    "mark title meta remove"
    "time time time time";
  gap: 0.35rem 0.55rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page-shell--chores .chore-checklist-editor__row > span[aria-hidden]:first-of-type {
  grid-area: mark;
  align-self: center;
}

.page-shell--chores .chore-checklist-editor__row > textarea {
  grid-area: title;
  min-height: 1.8rem;
  padding: 0.25rem 0;
  border: 0;
  background: transparent;
  font-size: 0.86rem;
  font-weight: 780;
}

.page-shell--chores .chore-checklist-editor__row.is-done > textarea {
  color: var(--chores-muted);
  text-decoration: line-through;
}

.page-shell--chores .chore-checklist-editor__remove-button {
  grid-area: remove;
  width: 1.9rem;
  height: 1.9rem;
}

.page-shell--chores .chore-checklist-editor__add-button {
  justify-self: start;
  min-height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--app-primary);
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 820;
}

.page-shell--chores .chore-checklist-editor__add-button:hover {
  color: var(--app-primary-ink);
}

@media (max-width: 760px) {
  .page-shell--inbox {
    gap: 0.7rem;
    padding: 1.1rem clamp(1.05rem, 4vw, 1.35rem) calc(1.4rem + env(safe-area-inset-bottom));
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-app-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: 4.45rem;
    padding: 0.9rem 0 0.7rem;
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-app-header .app-header__copy {
    grid-template-columns: 2.125rem minmax(0, 1fr);
    column-gap: 0.85rem;
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-header-back-link {
    display: grid;
    width: 2.125rem;
    min-width: 2.125rem;
    height: 2.125rem;
    min-height: 2.125rem;
    align-self: center;
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-app-header .app-header__title {
    align-self: center;
    line-height: 1;
  }

  .inbox-list-panel {
    padding: 1rem 0.95rem 1.05rem;
    border-radius: 1.25rem;
  }

  .inbox-list-heading {
    gap: 0.64rem;
    margin-bottom: 0.6rem;
  }

  .inbox-list-heading::before {
    width: 0.3rem;
    min-height: 1.48rem;
  }

  .inbox-list-heading .section-title {
    font-size: 1.2rem;
    font-weight: 720;
    line-height: 1;
  }

  .page-shell--inbox .daily-inbox-row {
    min-height: 3.2rem;
    padding: 0.36rem 0;
  }

  .page-shell--inbox .daily-inbox-row__copy .task-row__title {
    font-size: 0.95rem;
    font-weight: 680;
    line-height: 1.16;
  }

  .page-shell--inbox.is-editing-task .task-edit-panel{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }
}

/* Final cascade guard for the July 2026 improved-screens pass. */
html,
body {
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-family);
}

.daily-habits-panel,
.daily-tasks-panel,
.daily-calendar-panel,
.tasks-list-panel,
.task-edit-panel,
.task-create-page,
.habits-list-panel,
.calendar-list-panel,
.settings-card,
.chores-list-panel,
.chore-edit-panel,
.chore-create-page,
.shopping-list-panel,
.shopping-add-panel,
.shopping-create-page,
.shopping-edit-panel,
.shopping-settings-page,
.family-workspace-panel,
.family-editor-panel,
.panel{
  border-color: var(--color-line);
  border-radius: 16px;
  background: var(--color-card);
}

.bottom-navigation__link.is-active,
.bottom-navigation__link.is-active:hover,
.desktop-sidebar__link.is-active {
  background: var(--color-teal-tint);
  color: var(--color-teal-dark);
}

.page-shell--tasks .task-create-panel__summary,
.page-shell--tasks .task-form .form-actions .app-button--primary,
.chore-form .form-actions .app-button--primary,
.shopping-add-form .app-button--primary,
.shopping-item-edit-form .form-actions .app-button--primary{
  border-color: var(--color-teal);
  background: var(--color-teal);
  color: #fff;
}

.task-toggle input,
.personal-task-toggle input,
.habit-toggle input,
.daily-task-toggle input,
.daily-habit-toggle input,
.chore-toggle input,
.shopping-item-row input[type="checkbox"] {
  border: 2.5px solid #b9b2a2;
  border-radius: 999px;
  background: var(--color-card);
}

.task-toggle input:checked,
.personal-task-toggle input:checked,
.page-shell--tasks .personal-task-toggle input[type="checkbox"]:checked,
.habit-toggle input:checked,
.daily-task-toggle input:checked,
.daily-habit-toggle input:checked,
.chore-toggle input:checked,
.shopping-item-row input[type="checkbox"]:checked {
  border-color: var(--color-teal);
  background: var(--color-teal);
}

.tasks-filter.segmented,
.habits-filter.segmented,
.chores-filter.segmented,
.shopping-filter.segmented {
  border: 0;
  border-radius: 13px;
  background: #edeade;
  padding: 3px;
}

.tasks-filter__link.is-selected,
.habits-filter__link.is-selected,
.chores-filter__link.is-selected,
.shopping-filter__link.is-selected {
  background: var(--color-card);
  color: var(--color-ink);
}

@media (max-width: 760px) {
  body > .bottom-navigation {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  .bottom-navigation {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    display: flex;
    margin: 0 !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .page-shell:not(.page-shell--settings):not(.page-shell--tasks):not(.is-editing-task):not(.is-creating-task):not(.is-editing-chore):not(.is-creating-chore):not(.is-editing-shopping-item):not(.is-creating-shopping-item):not(.is-shopping-settings) {
    padding-bottom: calc(var(--bottom-navigation-mobile-height) + 1rem) !important;
  }

  .habits-header-back-link,
  .tasks-header-back-link,
  .calendar-header-back-link {
    display: grid;
  }

  .page-shell--tasks.is-editing-task .task-edit-panel,
.page-shell--tasks.is-creating-task .task-create-page,
.page-shell--chores.is-editing-chore .chore-edit-panel,
.page-shell--chores.is-creating-chore .chore-create-page,
.page-shell--shopping.is-editing-shopping-item .shopping-edit-panel,
.page-shell--shopping.is-creating-shopping-item .shopping-create-page{
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    max-height: 92dvh;
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
  }

  .page-shell--tasks.is-editing-task .notes-field textarea,
  .page-shell--tasks.is-creating-task .notes-field textarea {
    min-height: 2.65rem;
    height: 2.65rem;
  }

  .page-shell--tasks.is-editing-task .task-subtask-editor,
  .page-shell--tasks.is-creating-task .task-subtask-editor {
    margin-top: 5.5rem;
  }
}

@media (min-width: 761px) {
  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-workspace,
  .page-shell--habits .habits-workspace {
    width: min(860px, 100%);
  }

  .page-shell--dashboard .daily-dashboard {
    max-width: 1200px;
    margin: 0 auto;
  }

  .page-shell--tasks.is-editing-task .task-edit-panel,
.page-shell--tasks.is-creating-task .task-create-page{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 70;
    width: min(540px, calc(100vw - 2rem));
    max-height: 86dvh;
    overflow-y: auto;
    transform: translate(-50%, -50%);
    border-radius: 22px;
  }

  .page-shell--tasks.is-editing-task .task-form .form-actions,
.page-shell--tasks.is-creating-task .task-form .form-actions{
    position: sticky;
    bottom: -1rem;
    z-index: 1;
    margin: 0 -1rem -1rem;
    padding: 0.8rem 1rem 1rem;
    background: var(--color-card);
  }
}

/* 2026-07 redesign spec layer: teal/cream tokens shared across all screens. */
:root {
  --color-teal: #2a7a6b;
  --color-teal-dark: #1d5a4f;
  --color-teal-tint: #e3f0ec;
  --color-cream: #f7f4ec;
  --color-card: #fdfcf8;
  --color-ink: #24312c;
  --color-muted: #6b7d75;
  --color-line: #e5e0d3;
  --color-lavender-ink: #3d3d70;
  --color-red: #b5473a;
  --color-red-tint: #f6e2df;
  --color-amber: #9a5b2d;
  --font-family: Helvetica, Arial, sans-serif;
  --app-bg: var(--color-cream);
  --app-surface: var(--color-card);
  --app-surface-soft: #edeade;
  --app-ink: var(--color-ink);
  --app-muted: var(--color-muted);
  --app-muted-2: #8f8677;
  --app-line: var(--color-line);
  --app-hairline: var(--color-line);
  --app-primary: var(--color-teal);
  --app-primary-ink: var(--color-teal-dark);
  --app-primary-soft: var(--color-teal-tint);
  --app-danger: var(--color-red);
  --app-danger-soft: var(--color-red-tint);
  --app-font: var(--font-family);
  --app-display-font: var(--font-family);
  --radius-md: 13px;
  --radius-lg: 16px;
}

html,
body {
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-family);
}

.page-shell,
.page-shell--dashboard,
.page-shell--tasks,
.page-shell--habits,
.page-shell--calendar,
.page-shell--settings,
.page-shell--chores,
.page-shell--shopping,
.page-shell--family {
  color: var(--color-ink);
}

.daily-habits-panel,
.daily-tasks-panel,
.daily-calendar-panel,
.tasks-list-panel,
.task-edit-panel,
.task-create-page,
.habits-list-panel,
.calendar-list-panel,
.settings-card,
.chores-list-panel,
.chore-edit-panel,
.chore-create-page,
.shopping-list-panel,
.shopping-add-panel,
.shopping-create-page,
.shopping-edit-panel,
.shopping-settings-page,
.family-workspace-panel,
.family-editor-panel,
.panel{
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: var(--color-card);
}

.daily-dashboard__header h1,
.app-header__title,
.section-title,
.panel__title,
.settings-card h2,
.task-row__title,
.personal-task-row__copy .task-row__title,
.habit-row__copy strong,
.calendar-event-row__copy strong,
.shopping-item-row__title {
  color: var(--color-ink);
  font-family: var(--font-family);
  font-weight: 800;
  letter-spacing: 0;
}

.daily-dashboard__header {
  align-items: end;
}

.daily-dashboard__header h1 {
  font-size: 1.875rem;
  font-weight: 900;
}

.daily-dashboard__header h1::first-line {
  color: var(--color-teal);
}

.daily-dashboard__settings,
.task-back-link,
.habit-back-link,
.settings-back-link,
.calendar-header-back-link {
  width: 36px;
  min-width: 36px;
  height: 36px;
  border-color: var(--color-line);
  border-radius: 10px;
  background: var(--color-card);
  color: var(--color-teal-dark);
}

.page-shell--tasks .task-create-panel__summary,
.shopping-settings-button,
.dashboard-add-button {
  width: 40px;
  height: 40px;
  border-color: var(--color-teal);
  border-radius: 13px;
  background: var(--color-teal);
  color: #fff;
  font-weight: 800;
}

.bottom-navigation {
  border-top: 1px solid color-mix(in srgb, var(--color-line) 82%, transparent);
  background: color-mix(in srgb, var(--color-card) 82%, transparent);
  backdrop-filter: blur(16px);
}

.bottom-navigation__link {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.bottom-navigation__link.is-active,
.bottom-navigation__link.is-active:hover {
  background: var(--color-teal-tint);
  color: var(--color-teal-dark);
}

.desktop-sidebar__link.is-active,
body:has(.page-shell--dashboard) .desktop-sidebar__link.is-active,
body:has(.page-shell--family) .desktop-sidebar__link.is-active {
  border-color: color-mix(in srgb, var(--color-teal) 34%, var(--color-line));
  background: var(--color-teal-tint);
  color: var(--color-teal-dark);
}

.daily-card-section-heading,
.page-shell--tasks .task-section__header,
.habit-section .task-section__header,
.calendar-section .task-section__header,
.chore-section .task-section__header,
.shopping-store-group .task-section__header,
.page-shell--family .task-section__header {
  gap: 0.6rem;
}

.daily-card-section-heading::before,
.page-shell--tasks .task-section__header::before,
.habit-section .task-section__header::before,
.calendar-section .task-section__header::before,
.chore-section .task-section__header::before,
.shopping-store-group .task-section__header::before,
.page-shell--family .task-section__header::before {
  width: 5px;
  min-height: 28px;
  border-radius: 999px;
  background: var(--color-teal);
}

.daily-card-section-heading .section-title,
.page-shell--tasks .task-section__header .section-title,
.habit-section .task-section__header .section-title,
.calendar-section .task-section__header .section-title,
.chore-section .task-section__header .section-title,
.page-shell--family .task-section__header .section-title {
  color: var(--color-teal-dark);
  font-size: 0.96rem;
  font-weight: 800;
}

.task-section__count,
.habit-section .task-section__count,
.calendar-section .task-section__count,
.chore-section .task-section__count,
.shopping-store-group .task-section__count,
.page-shell--family .task-section__count,
.filter-count {
  border-radius: 999px;
  background: var(--color-teal-tint);
  color: var(--color-teal-dark);
  font-size: 12px;
  font-weight: 800;
}

.daily-habit-row,
.daily-task-row,
.daily-calendar-row,
.personal-task-row,
.habit-row,
.calendar-event-row,
.chore-row,
.shopping-item-row,
.family-member-row {
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: var(--color-card);
}

.task-toggle input,
.personal-task-toggle input,
.habit-toggle input,
.daily-task-toggle input,
.daily-habit-toggle input,
.chore-toggle input,
.shopping-item-row input[type="checkbox"],
.chore-checklist-preview__input,
.task-subtask-preview__input,
.daily-task-subtask-preview__input {
  width: 24px;
  height: 24px;
  border: 2.5px solid #b9b2a2;
  border-radius: 999px;
  background: var(--color-card);
  appearance: none;
  -webkit-appearance: none;
}

.chore-checklist-preview__input,
.task-subtask-preview__input,
.daily-task-subtask-preview__input {
  width: 18px;
  height: 18px;
}

.task-toggle input:checked,
.personal-task-toggle input:checked,
.habit-toggle input:checked,
.daily-task-toggle input:checked,
.daily-habit-toggle input:checked,
.chore-toggle input:checked,
.shopping-item-row input[type="checkbox"]:checked,
.chore-checklist-preview__input:checked,
.task-subtask-preview__input:checked,
.daily-task-subtask-preview__input:checked {
  border-color: var(--color-teal);
  background: var(--color-teal);
  position: relative;
}

.task-toggle input:checked::after,
.personal-task-toggle input:checked::after,
.page-shell--tasks .personal-task-toggle input[type="checkbox"]:checked::after,
.habit-toggle input:checked::after,
.daily-task-toggle input:checked::after,
.daily-habit-toggle input:checked::after,
.chore-toggle input:checked::after,
.shopping-item-row input[type="checkbox"]:checked::after,
.chore-checklist-preview__input:checked::after,
.task-subtask-preview__input:checked::after,
.daily-task-subtask-preview__input:checked::after {
  content: "";
  display: block;
  width: 0.42rem;
  height: 0.68rem;
  margin: 0.12rem auto 0;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.daily-task-due,
.task-subtask-preview__due,
.daily-task-subtask-preview__due,
.calendar-event-time {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-teal-dark);
  font-weight: 800;
}

.daily-task-due.is-overdue,
.task-subtask-preview__due.is-overdue {
  color: var(--color-red);
}

.habit-stats {
  color: var(--color-teal-dark);
  font-weight: 800;
}

.habit-stats:empty {
  color: var(--color-muted);
}

.daily-card-more-link {
  justify-self: center;
  color: var(--color-teal);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

.daily-task-subtask-preview {
  border-left: 2px solid var(--color-line);
  border-top: 0;
  padding-left: 0.75rem;
}

.daily-task-subtask-preview__item.is-done,
.task-subtask-preview__item.is-done,
.personal-task-row.is-completed {
  opacity: 0.75;
}

.personal-task-row.is-completed .task-row__title {
  text-decoration: line-through;
}

.tasks-filter.segmented,
.habits-filter.segmented,
.chores-filter.segmented,
.shopping-filter.segmented {
  border: 0;
  border-radius: 13px;
  background: #edeade;
  padding: 3px;
}

.tasks-filter__link,
.habits-filter__link,
.chores-filter__link,
.shopping-filter__link {
  min-height: 28px;
  border-radius: 10px;
  color: var(--color-muted);
  font-weight: 800;
}

.tasks-filter__link.is-selected,
.habits-filter__link.is-selected,
.chores-filter__link.is-selected,
.shopping-filter__link.is-selected {
  border: 1px solid color-mix(in srgb, var(--color-line) 72%, white);
  background: var(--color-card);
  color: var(--color-ink);
}

.page-shell--tasks .task-form .field label,
.chore-form .field label,
.shopping-item-edit-form .field label,
.shopping-add-form .field label,
.family-editor-panel .field label{
  color: var(--color-muted);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-shell--tasks .task-form .field input,
.page-shell--tasks .task-form .field select,
.page-shell--tasks .task-form .field textarea,
.chore-form .field input,
.chore-form .field select,
.chore-form .field textarea,
.shopping-item-edit-form .field input,
.shopping-item-edit-form .field select,
.shopping-item-edit-form .field textarea,
.shopping-add-form .field input,
.shopping-add-form .field select,
.shopping-add-form .field textarea,
.family-editor-panel input,
.family-editor-panel select,
.family-editor-panel textarea{
  border: 1.5px solid var(--color-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--color-card) 92%, white);
  color: var(--color-ink);
}

.page-shell--tasks .field--emoji input,
.chore-form .field--emoji input{
  height: 52px;
  border-radius: 14px;
  font-size: 1.35rem;
  text-align: center;
}

/* Habit emoji placeholder matches title placeholder size; entered emoji stays larger. */


.page-shell--tasks .field--task-date input,
.page-shell--tasks .field--task-time input,
.page-shell--tasks .field--recurrence-frequency select{
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-teal-dark);
  font-weight: 800;
}

.task-subtask-editor__rows,
.chore-checklist-editor__rows {
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-card) 94%, white);
  padding: 0.35rem;
}

.task-subtask-editor__row,
.chore-checklist-editor__row {
  border-radius: 12px;
}

.page-shell--tasks .task-form .form-actions .app-button--primary,
.chore-form .form-actions .app-button--primary,
.shopping-item-edit-form .form-actions .app-button--primary,
.shopping-add-form .app-button--primary{
  min-height: 48px;
  border-color: var(--color-teal);
  border-radius: 14px;
  background: var(--color-teal);
  color: #fff;
}

.task-delete-icon-button,
.chore-delete-icon-button{
  border-color: var(--color-red-tint);
  border-radius: 14px;
  background: var(--color-red-tint);
  color: var(--color-red);
}

.calendar-event-row {
  padding-left: 0.85rem;
}

.calendar-event-row__main {
  grid-template-columns: 56px minmax(0, 1fr);
}

.calendar-event-row__main::before,
.daily-calendar-row::before {
  content: "";
  align-self: stretch;
  width: 3.5px;
  min-height: 28px;
  border-radius: 999px;
  background: var(--event-accent, var(--color-lavender-ink));
}

.calendar-event-time,
.daily-calendar-time {
  color: var(--color-lavender-ink);
  font-size: 14px;
  font-weight: 900;
}

.calendar-event-row__copy {
  grid-column: 2;
}

.settings-card {
  padding: 0;
  overflow: hidden;
}

.settings-card__header,
.settings-action-row,
.calendar-selection-row {
  min-height: 58px;
  padding: 0.85rem 1rem;
}

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

.settings-card__header h2 {
  font-size: 0.98rem;
}

.settings-card__header p,
.settings-action-row em,
.calendar-selection-row em {
  color: var(--color-muted);
  font-size: 0.82rem;
}

.calendar-settings-panel__toggle,
.shortcut-panel__toggle {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(-45deg);
}

.calendar-disconnect-button {
  border-color: var(--color-red-tint);
  background: var(--color-red-tint);
  color: var(--color-red);
}

@media (max-width: 760px) {
  body {
    padding-top: max(0px, env(safe-area-inset-top));
  }

  .page-shell--dashboard,
  .page-shell--tasks,
  .page-shell--habits,
  .page-shell--calendar,
  .page-shell--settings,
  .page-shell--chores,
  .page-shell--shopping,
  .page-shell--family {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .daily-dashboard__header h1,
  .app-header__title {
    font-size: 30px;
    font-weight: 900;
  }

  .daily-habits-panel,
  .daily-tasks-panel,
  .daily-calendar-panel {
    padding: 0.85rem;
  }

  .page-shell--tasks.is-editing-task,
.page-shell--tasks.is-creating-task,
.page-shell--chores.is-editing-chore,
.page-shell--chores.is-creating-chore,
.page-shell--shopping.is-editing-shopping-item,
.page-shell--shopping.is-creating-shopping-item{
    min-height: 100dvh;
    padding: 0;
    background: color-mix(in srgb, var(--color-ink) 34%, transparent);
  }

  .page-shell--tasks.is-editing-task .task-edit-panel,
.page-shell--tasks.is-creating-task .task-create-page,
.page-shell--chores.is-editing-chore .chore-edit-panel,
.page-shell--chores.is-creating-chore .chore-create-page,
.page-shell--shopping.is-editing-shopping-item .shopping-edit-panel,
.page-shell--shopping.is-creating-shopping-item .shopping-create-page{
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    max-height: 92dvh;
    min-height: auto;
    overflow-y: auto;
    padding: 0.75rem 1rem calc(6.25rem + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 24px 24px 0 0;
    background: var(--color-card);
  }

  .page-shell--tasks.is-editing-task .task-edit-panel::before,
.page-shell--tasks.is-creating-task .task-create-page::before,
.page-shell--chores.is-editing-chore .chore-edit-panel::before,
.page-shell--chores.is-creating-chore .chore-create-page::before,
.page-shell--shopping.is-editing-shopping-item .shopping-edit-panel::before,
.page-shell--shopping.is-creating-shopping-item .shopping-create-page::before{
    display: none;
    content: none;
  }

  .page-shell--tasks.is-editing-task .task-form .form-actions--edit-submit,
.page-shell--chores.is-editing-chore .chore-form .form-actions--edit-submit,
.page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .form-actions--edit-submit{
    right: 1rem;
    bottom: calc(0.9rem + env(safe-area-inset-bottom));
    left: 4.9rem;
    z-index: 80;
  }

  .page-shell--tasks.is-editing-task .task-delete-icon-form,
.page-shell--chores.is-editing-chore .chore-delete-icon-form{
    position: fixed;
    bottom: calc(0.9rem + env(safe-area-inset-bottom));
    left: 1rem;
    z-index: 81;
  }

  .page-shell--tasks.is-editing-task .task-delete-icon-button,
.page-shell--chores.is-editing-chore .chore-delete-icon-button{
    width: 48px;
    height: 48px;
  }

  .page-shell--tasks.is-editing-task .notes-field textarea,
  .page-shell--tasks.is-creating-task .notes-field textarea {
    min-height: 2.65rem;
    height: 2.65rem;
  }

  .page-shell--tasks.is-editing-task .task-subtask-editor,
  .page-shell--tasks.is-creating-task .task-subtask-editor {
    margin-top: 5.5rem;
  }
}

@media (min-width: 761px) {
  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-layout,
  .page-shell--habits .habits-layout {
    justify-items: center;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-workspace,
  .page-shell--habits .habits-workspace {
    width: min(860px, 100%);
  }

  .page-shell--dashboard .daily-dashboard {
    max-width: 1200px;
    margin: 0 auto;
  }

  .page-shell--settings {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
  }

  .page-shell--settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-shell--settings .app-header,
  .page-shell--settings .app-flash {
    grid-column: 1 / -1;
  }

  .page-shell--tasks.is-editing-task::before,
.page-shell--tasks.is-creating-task::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(36, 49, 44, 0.35);
  }

  .page-shell--tasks.is-editing-task .tasks-list-panel,
.page-shell--tasks.is-creating-task .tasks-list-panel{
    opacity: 0.58;
  }

  .page-shell--tasks.is-editing-task .task-edit-panel,
.page-shell--tasks.is-creating-task .task-create-page{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 70;
    width: min(540px, calc(100vw - 2rem));
    max-height: 86dvh;
    overflow-y: auto;
    transform: translate(-50%, -50%);
    border-radius: 22px;
    padding: 1rem;
  }

  .page-shell--tasks.is-editing-task .tasks-workspace,
.page-shell--tasks.is-creating-task .tasks-workspace{
    display: block;
  }
}

@media (max-width: 760px) {

  .bottom-navigation {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    transform: none !important;
    display: flex;
    justify-content: center;
    width: 100% !important;
    min-height: calc(5.25rem + env(safe-area-inset-bottom));
    padding: 0.7rem 1.4rem max(0.7rem, env(safe-area-inset-bottom)) !important;
    border: 0;
    border-top: 1px solid var(--app-line);
    border-radius: 0 !important;
    touch-action: manipulation;
    overscroll-behavior: contain;
  }

  .bottom-navigation__link {
    flex: 1 1 0;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.18rem;
    min-width: 0;
    min-height: 4.45rem;
    padding: 0.48rem 0.2rem;
    touch-action: manipulation;
  }

  .page-shell:not(.page-shell--settings):not(.is-editing-task):not(.is-creating-task):not(.is-editing-chore):not(.is-creating-chore):not(.is-editing-shopping-item):not(.is-creating-shopping-item):not(.is-shopping-settings) {
    padding-bottom: calc(6.25rem + env(safe-area-inset-bottom)) !important;
  }

  html:has(.is-editing-task),
body:has(.is-editing-task),
html:has(.is-creating-task),
body:has(.is-creating-task),
html:has(.is-editing-chore),
body:has(.is-editing-chore),
html:has(.is-creating-chore),
body:has(.is-creating-chore),
html:has(.is-editing-shopping-item),
body:has(.is-editing-shopping-item),
html:has(.is-creating-shopping-item),
body:has(.is-creating-shopping-item),
html:has(.is-shopping-settings),
body:has(.is-shopping-settings){
    min-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.flash-errors {
  margin: 0;
  padding-left: 1.1rem;
  color: #982b2b;
}

.planner-detail-dialog:not([open]),
.discard-changes-dialog:not([open]) {
  display: none !important;
}

.discard-changes-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 28%, rgba(75, 155, 120, 0.2), transparent 28rem),
    rgba(31, 36, 48, 0.52);
}

.discard-changes-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(24rem, calc(100% - 1rem));
  max-width: 100%;
}

.discard-changes-dialog__sheet {
  display: grid;
  gap: 1rem;
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  background: #ffffff;
  padding: 1rem;
}

.discard-changes-dialog__title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}

.discard-changes-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.planner-detail-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(34rem, calc(100% - 1rem));
  max-width: 100%;
}

.planner-detail-dialog::backdrop {
  background: rgba(31, 36, 48, 0.45);
}

.planner-detail-dialog__sheet {
  display: grid;
  gap: 1rem;
  border: 1px solid var(--panel-border);
  border-top: 6px solid var(--edit-green);
  border-radius: 30px;
  background: #ffffff;
  padding: 1.25rem;
}

.planner-detail-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.planner-detail-dialog__title {
  margin: 0;
  color: #19362a;
  font-family: var(--app-display-font);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.planner-detail-dialog__meta {
  display: grid;
  gap: 0.65rem;
}

.planner-detail-dialog__meta-row {
  display: grid;
  gap: 0.18rem;
  padding: 0.75rem 0;
  border-top: 1px dashed rgba(49, 66, 99, 0.16);
}

.planner-detail-dialog__meta-row[hidden],
.planner-detail-dialog__body[hidden] {
  display: none;
}

.planner-detail-dialog__label {
  color: #53647f;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.planner-detail-dialog__value {
  margin: 0;
  color: #19362a;
  font-weight: 800;
}

.planner-detail-dialog__body {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(49, 66, 99, 0.16);
}

.planner-detail-dialog__body-text {
  margin: 0;
  line-height: 1.55;
  white-space: pre-wrap;
}

.planner-detail-dialog .app-button--primary {
  border-color: var(--edit-green-dark);
  background: var(--edit-green);
  color: #fff;
}

.desktop-sidebar {
  display: none;
}

html:has(.page-shell--dashboard),
body:has(.page-shell--dashboard) {
  --daily-bg: #fbf8f2;
  --daily-card: #fffdf9;
  --daily-ink: #24211d;
  --daily-muted: #70685e;
  --daily-muted-2: #8c8378;
  --daily-line: #ded3c4;
  --daily-hairline: #ede4d9;
  --daily-primary: #2d786f;
  --daily-primary-ink: #1f665f;
  --daily-primary-soft: #ddf0eb;
  background: var(--daily-bg);
  color: var(--daily-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

.page-shell--dashboard {
  align-content: start;
  width: min(100%, 100%);
  max-width: none;
  min-height: 100dvh;
  padding: 0 1.25rem 7rem;
  color: var(--daily-ink);
}

.daily-dashboard {
  display: grid;
  gap: 1.05rem;
  color: var(--daily-ink);
}

.daily-dashboard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.7rem;
  padding: 1.25rem 0 0.95rem;
}

.daily-dashboard__header h1 {
  min-width: 0;
  margin: 0;
  color: var(--daily-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2rem, 8vw, 3.25rem);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.daily-dashboard__title-full {
  display: inline;
}

.daily-dashboard__title-mobile {
  display: none;
}

.dashboard-add-button,
.daily-dashboard__settings {
  display: inline-grid;
  place-items: center;
  width: 2.125rem;
  min-width: 2.125rem;
  height: 2.125rem;
  border: 1px solid color-mix(in srgb, var(--daily-primary) 42%, var(--daily-line));
  border-radius: 8px;
  background: var(--daily-primary);
  color: #fffdf8;
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

.daily-dashboard__grid {
  display: grid;
  gap: 1rem;
}

.daily-card {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--daily-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--daily-card) 88%, transparent);
}

.daily-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--daily-line);
}

.daily-card__header h3 {
  margin: 0;
  color: var(--daily-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  font-size: 1.45rem;
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1.1;
}

.daily-card__header h3 span {
  color: var(--daily-muted-2);
  font-size: 1.05rem;
  vertical-align: 0.1em;
}

.daily-card__header a {
  color: var(--daily-muted);
  font-size: 0.9rem;
  font-weight: 760;
  text-decoration: none;
}

.daily-card__summary {
  margin: 0;
  color: var(--daily-muted);
  font-size: 1.02rem;
  font-weight: 760;
  line-height: 1.25;
}

.daily-list,
.daily-agenda {
  display: grid;
}

.daily-list > * + *,
.daily-agenda > * + * {
  border-top: 1px solid var(--daily-hairline);
}

.daily-work-row,
.daily-empty-row,
.daily-agenda__row,
.daily-journal-row {
  min-width: 0;
  color: inherit;
}

.daily-work-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.78rem;
  min-height: 3.25rem;
  padding: 0.45rem 0;
}

.daily-work-row--habit {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.daily-work-row__toggle input {
  appearance: none;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid #8f897e;
  border-radius: 999px;
  background: var(--daily-card);
}

.daily-work-row__toggle input:checked {
  border-color: var(--daily-primary);
  background: radial-gradient(circle at center, var(--daily-primary) 0 5px, transparent 6px);
}

.daily-check-ring {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #8f897e;
  border-radius: 999px;
  background: var(--daily-card);
}

.daily-work-row__copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.daily-work-row strong,
.daily-journal-row strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--daily-ink);
  font-size: 1.06rem;
  font-weight: 790;
  line-height: 1.16;
}

.daily-work-row span,
.daily-journal-row em,
.daily-empty-row p {
  color: var(--daily-muted);
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 710;
  line-height: 1.3;
}

.daily-work-row .daily-work-row__copy span {
  font-weight: 640;
}

.daily-work-row__trail {
  justify-self: end;
  white-space: nowrap;
}

.daily-inbox-panel,
.daily-habits-panel,
.daily-tasks-panel,
.daily-calendar-panel {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 1.125rem;
  border: 1px solid var(--daily-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--daily-card) 88%, transparent);
}

.daily-inbox-panel__heading,
.daily-habits-panel__heading,
.daily-tasks-panel__heading,
.daily-calendar-panel__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 0.95rem;
}

.daily-inbox-panel__heading .section-title,
.daily-habits-panel__heading .section-title,
.daily-tasks-panel__heading .section-title,
.daily-calendar-panel__heading .section-title {
  margin: 0;
  padding: 0;
  color: var(--daily-ink);
  font-size: 1.45rem;
  font-weight: 780;
  line-height: 1.1;
}

.daily-calendar-panel__heading .button_to {
  margin: 0;
}

.daily-plain-action--button {
  width: 100%;
  border: 0;
  cursor: pointer;
}

.daily-inbox-captured {
  display: grid;
  gap: 0.65rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.daily-inbox-list,
.daily-habit-list,
.daily-task-list,
.daily-calendar-list {
  display: grid;
  gap: 0.42rem;
}

.daily-calendar-list {
  gap: 0.18rem;
}

.daily-habit-row,
.daily-task-row,
.daily-inbox-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem;
  min-height: 0;
  padding: 0.34rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  transition: opacity 180ms ease, transform 180ms ease, max-height 180ms ease, padding 180ms ease;
}

.daily-inbox-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  color: var(--daily-ink);
  text-decoration: none;
}

.daily-inbox-row__copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.daily-inbox-row__type {
  justify-self: end;
  color: var(--app-muted, var(--habits-muted, var(--daily-muted)));
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1;
  white-space: nowrap;
}

.daily-task-row.has-subtasks {
  align-items: start;
}

.daily-habit-row.is-completing,
.daily-task-row.is-completing {
  opacity: 0.58;
  transform: translateY(-0.1rem);
}

.daily-habit-row.is-completion-held,
.daily-task-row.is-completion-held {
  opacity: 0.72;
  pointer-events: none;
}

.daily-habit-row.is-collapsing,
.daily-task-row.is-collapsing {
  opacity: 0;
  max-height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

.daily-habit-toggle {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.28rem 0 0;
}

.daily-habit-toggle input {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid var(--daily-muted-2);
  border-radius: 999px;
  background: var(--daily-card);
}

.daily-habit-toggle input:checked {
  border-color: var(--daily-primary);
  background: radial-gradient(circle at center, var(--daily-primary) 0 5px, transparent 6px);
}

.daily-task-toggle {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.28rem 0 0;
}

.daily-task-toggle input {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid var(--daily-muted-2);
  border-radius: 999px;
  background: var(--daily-card);
}

.daily-task-toggle input:checked {
  border-color: var(--daily-primary);
  background: radial-gradient(circle at center, var(--daily-primary) 0 5px, transparent 6px);
}

.daily-habit-row__main,
.daily-task-row__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.daily-habit-row__copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.daily-habit-row__main .task-row__title {
  display: block;
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--daily-ink);
  font-size: 0.96rem;
  font-weight: 790;
  line-height: 1.2;
}

.daily-habit-row.is-completed .daily-habit-row__main .task-row__title {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
  text-decoration-skip-ink: none;
}

.daily-task-row.is-completed .daily-task-row__main .task-row__title {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
  text-decoration-skip-ink: none;
}

.daily-task-row__main .task-row__title {
  display: block;
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--daily-ink);
  font-size: 0.96rem;
  font-weight: 790;
  line-height: 1.2;
}

.daily-habit-stats,
.daily-task-due {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  padding: 0 0.72rem;
  border-radius: 999px;
  background: var(--daily-primary-soft);
  color: var(--daily-primary-ink);
  font-size: 0.84rem;
  font-weight: 740;
  white-space: nowrap;
}

.daily-habit-stats,
.habit-stats {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: max-content;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--app-primary-ink);
  font-size: 0.84rem;
  font-weight: 790;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.habit-stats.is-missed {
  color: var(--app-danger);
}

.habit-stats.has-streak {
  color: var(--app-primary-ink);
}

.daily-calendar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  min-height: 0;
  padding: 0.16rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

.daily-calendar-row__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.daily-calendar-row__main .task-row__title {
  display: block;
  overflow: visible;
  margin: 0;
  color: var(--daily-ink);
  font-size: 0.94rem;
  font-weight: 620;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.daily-calendar-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  padding: 0 0.62rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--event-accent, var(--daily-primary)) 16%, var(--daily-card));
  color: color-mix(in srgb, var(--event-accent, var(--daily-primary)) 62%, var(--daily-ink));
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
}

.calendar-sync-panel {
  gap: 0.65rem;
  border-radius: var(--radius-md);
}

.calendar-sync-panel__header {
  align-items: center;
  margin-bottom: 0;
}

.calendar-sync-panel__header .button_to {
  margin: 0;
}

.calendar-sync-panel__note {
  margin: 0;
  color: var(--muted-ink);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.35;
}

.calendar-sync-panel__note a {
  color: var(--accent-strong);
  font-weight: 800;
}

.calendar-event-row .task-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
}

.calendar-event-row .task-row__meta span:not(:last-child)::after {
  content: "·";
  margin-left: 0.5rem;
  color: var(--muted-ink);
}

.daily-preview-empty-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.34rem 0;
}

.daily-preview-empty-row strong {
  display: block;
  overflow: hidden;
  margin: 0;
  color: var(--daily-muted);
  font-size: 0.96rem;
  font-weight: 740;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-preview-empty-row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  padding: 0 0.72rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--daily-line) 42%, var(--daily-card));
  color: var(--daily-muted);
  font-size: 0.72rem;
  font-weight: 740;
  white-space: nowrap;
}

.daily-task-due.is-overdue {
  background: color-mix(in srgb, #f0dcd7 68%, var(--daily-card));
  color: #9d4c48;
}

.daily-task-subtask-preview {
  grid-column: 2;
  display: grid;
  gap: 0.3rem;
  margin-top: -0.05rem;
  padding-top: 0.38rem;
  border-top: 0;
}

.daily-task-subtask-preview__item {
  position: relative;
  display: grid;
  min-height: 1.3rem;
  margin: 0;
  color: var(--daily-muted);
  font-size: 0.78rem;
  font-weight: 690;
}

.daily-task-subtask-preview__label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
  min-height: 1.35rem;
  cursor: pointer;
}

.daily-task-subtask-preview__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.daily-task-subtask-preview .mini-check {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--daily-muted-2);
  background: var(--daily-card);
}

.daily-task-subtask-preview__copy {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.34rem;
  min-width: 0;
  line-height: 1.18;
}

.daily-task-subtask-preview__due {
  color: var(--daily-primary-ink);
  font-variant-numeric: tabular-nums;
}

.daily-task-subtask-preview__due.is-overdue {
  color: #9d4c48;
}

.daily-task-subtask-preview__item.is-done {
  color: var(--daily-ink);
}

.daily-task-subtask-preview__item.is-done .daily-task-subtask-preview__due {
  color: inherit;
}

.daily-task-subtask-preview__item.is-done .mini-check {
  border-color: var(--daily-primary);
  background: var(--daily-primary);
}

.daily-task-subtask-preview__item.is-done .mini-check::after {
  width: 0.33rem;
  height: 0.54rem;
  border: solid #fffdf8;
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg) translateY(-1px);
}

.daily-outline-action,
.daily-plain-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--daily-line);
  border-radius: 11px;
  background: transparent;
  color: var(--daily-muted);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.daily-outline-action--icon {
  width: 2.55rem;
  min-height: 2.55rem;
  padding-inline: 0;
  border-radius: 8px;
  font-size: 1.55rem;
  line-height: 1;
}

.daily-plain-action {
  width: 100%;
  margin-top: 0.8rem;
  min-height: 2.35rem;
  border-radius: 7px;
  color: var(--daily-muted);
}

.daily-empty-row {
  padding: 0.55rem 0 0.15rem;
}

.daily-empty-row p {
  margin: 0;
}

.daily-agenda__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(4.4rem, 0.28fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  min-height: 3.2rem;
  padding: 0.54rem 0 0.54rem 0.85rem;
  text-decoration: none;
}

.daily-agenda__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72rem;
  bottom: 0.72rem;
  width: 0.25rem;
  border-radius: 999px;
  background: var(--event-accent, var(--daily-primary));
}

.daily-agenda__row time {
  color: var(--daily-muted);
  font-size: 0.9rem;
  font-weight: 780;
}

.daily-agenda__row span {
  overflow: hidden;
  color: var(--daily-ink);
  font-size: 1.06rem;
  font-weight: 790;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-journal-row {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.8rem;
  padding: 0.65rem 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.daily-journal-row__icon {
  color: var(--daily-primary);
  font-weight: 900;
}

.quick-capture-dialog {
  width: min(22rem, calc(100vw - 2rem));
  max-width: none;
  padding: 0;
  border: 1px solid var(--daily-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--daily-card) 92%, transparent);
  color: var(--daily-ink);
}

.quick-capture-dialog::backdrop {
  background: rgba(36, 28, 18, 0.22);
}

.quick-capture-dialog__sheet {
  display: grid;
  gap: 0.8rem;
  padding: 0.9rem;
}

.quick-capture-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--daily-line);
}

.quick-capture-dialog__header h2 {
  margin: 0;
  color: var(--daily-ink);
  font-size: 1.35rem;
  font-weight: 780;
  line-height: 1.1;
}

.quick-capture-dialog__close {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid var(--daily-line);
  border-radius: 8px;
  background: transparent;
  color: var(--daily-muted);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.quick-capture-options {
  display: grid;
  gap: 0.45rem;
}

.quick-capture-options__item {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--daily-hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--daily-card) 88%, transparent);
  color: var(--daily-ink);
  font: inherit;
  font-size: 1.06rem;
  font-weight: 790;
  text-align: left;
  cursor: pointer;
}

.quick-capture-options__item:hover,
.quick-capture-options__item:focus-visible {
  border-color: color-mix(in srgb, var(--daily-primary) 45%, var(--daily-line));
  outline: none;
  background: var(--daily-primary-soft);
  color: var(--daily-primary-ink);
}

@media (min-width: 761px) {
  html {
    background: #fbf8f2;
  }

  body {
    padding-bottom: 0;
    background: #fbf8f2;
  }

  .desktop-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 15;
    display: grid;
    grid-template-rows: 1fr;
    width: 16.25rem;
    padding: 1.45rem 1.15rem;
    border-right: 1px solid #ded3c4;
    background: rgba(255, 253, 249, 0.72);
    color: #24211d;
  }

  .desktop-sidebar__brand {
    display: grid;
    gap: 0.18rem;
    margin-bottom: 2.2rem;
  }

  .desktop-sidebar__brand strong {
    font-family: var(--app-display-font);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .desktop-sidebar__brand span,
  .desktop-sidebar__link,
  .desktop-sidebar__actions a {
    color: #70685e;
    font-weight: 800;
  }

  .desktop-sidebar__nav {
    display: grid;
    align-content: start;
    gap: 0.62rem;
  }

  .desktop-sidebar__link {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    min-height: 3.1rem;
    padding: 0.55rem 0.8rem;
    border-radius: 9px;
    text-decoration: none;
  }

  .desktop-sidebar__link.is-active {
    background: #ddf0eb;
    color: #1f665f;
  }

  .desktop-sidebar__link b {
    color: inherit;
    font-weight: 800;
  }

  .desktop-sidebar__icon {
    display: inline-grid;
    place-items: center;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
  }

  .desktop-sidebar__icon svg {
    width: 1.05rem;
    height: 1.05rem;
  }

  .desktop-sidebar__actions {
    display: grid;
    gap: 0.65rem;
  }

  .desktop-sidebar__primary,
  .desktop-sidebar__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    border: 1px solid #ded3c4;
    border-radius: 8px;
    text-decoration: none;
  }

  .desktop-sidebar__primary {
    border-color: #2d786f;
    background: #2d786f;
    color: #fff !important;
  }

  .desktop-sidebar__secondary {
    background: transparent;
  }

  .bottom-navigation {
    display: none;
  }

  .page-shell {
    width: auto;
    max-width: none;
    margin-left: 16.25rem;
    padding: 2.4rem clamp(2rem, 5vw, 4.6rem) 4rem;
  }

  .page-shell:has(.daily-dashboard) {
    min-height: 100dvh;
  }

  .page-shell--dashboard {
    margin-left: 14.75rem;
    padding: 2.25rem 2.25rem 3rem;
  }

  .daily-dashboard {
    max-width: 54rem;
  }

  .daily-dashboard__header {
    min-height: auto;
    padding-top: 0;
  }

  .daily-dashboard__header h1 {
    font-size: 2.75rem;
  }

  .dashboard-add-button,
  .daily-dashboard__settings {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    font-size: 2rem;
  }

  .daily-dashboard__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .daily-card--tasks,
  .daily-card--journal {
    grid-column: 1 / -1;
  }

  .page-shell--chores {
    min-height: 100dvh;
  }

  .page-shell--chores .app-header {
    max-width: 72rem;
  }

  .chores-layout {
    max-width: 72rem;
  }

  .chores-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .chores-list-panel {
    min-width: 0;
  }

  .chore-edit-panel {
    position: sticky;
    top: 2rem;
  }
}

@media (min-width: 1180px) {
  .desktop-sidebar {
    width: 17.5rem;
  }

  .page-shell {
    margin-left: 17.5rem;
    padding-inline: 2.7rem;
  }

  .daily-dashboard {
    max-width: 74rem;
  }

  .daily-dashboard__grid {
    grid-template-columns: repeat(2, minmax(24rem, 1fr));
  }

  .daily-card--tasks,
  .daily-card--journal {
    grid-column: auto;
  }

  .page-shell--dashboard {
    margin-left: 14.75rem;
    padding: 2.25rem 2.25rem 3rem;
  }

  .page-shell--chores .app-header,
  .chores-layout {
    max-width: 82rem;
  }

  .chores-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



@media (max-width: 760px) {
  .family-member-setting {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
  }

  .family-member-setting__copy {
    align-self: center;
  }

  .family-member-setting__controls {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    margin-left: 0;
  }

  .member-settings-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .member-settings-form__name {
    grid-column: 1 / -1;
  }

  .member-settings-form .app-button {
    justify-self: start;
  }

  .family-member-setting__controls .reorder-controls {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .page-shell {
    width: min(100% - 1rem, 100%);
    padding-top: 0;
  }

  .app-header {
    border-radius: 0 0 32px 32px;
  }

  .app-header__actions {
    justify-content: flex-end;
  }

  .app-header__actions > .button_to,
  .app-header__actions > .menu {
    width: auto;
  }

  .app-header__actions .app-button,
  .app-header__actions .menu__summary {
    width: auto;
  }

  .routine-date-header {
    gap: 0.45rem;
  }

  .routine-date-title {
    font-size: 1.45rem;
  }

  .date-nav-button {
    width: 2.4rem;
    height: 2.4rem;
  }

  .date-today-button {
    min-height: 2.4rem;
    padding-inline: 0.75rem;
  }

  .menu__panel {
    left: 0;
    right: 0;
    top: calc(100% + 0.45rem);
    min-width: 100%;
    padding: 0.5rem;
  }

  .menu__link {
    display: flex;
    align-items: center;
  }

  .planner-detail-dialog {
    width: calc(100% - 0.6rem);
    margin: auto auto max(0.3rem, env(safe-area-inset-bottom));
    min-height: calc(100% - 0.5rem);
    display: flex;
    align-items: flex-end;
  }

  .planner-detail-dialog__sheet {
    width: 100%;
    min-height: 88vh;
    max-height: 92vh;
    overflow: auto;
    border-radius: 26px 26px 18px 18px;
    padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom));
  }

  .discard-changes-dialog {
    width: calc(100% - 0.6rem);
    margin: auto auto max(0.3rem, env(safe-area-inset-bottom));
  }

  .discard-changes-dialog__sheet {
    border-radius: 26px 26px 18px 18px;
    padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom));
  }

  .discard-changes-dialog__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discard-changes-dialog__actions .app-button {
    width: 100%;
  }

  .task-form__grid,
  .task-form__grid--task,
  .task-form__grid--event,
  .task-form__grid--meal,
  .task-form__grid--pin,
  .task-form__grid--shopping-item,
  .task-form__grid--chore,
  .shopping-add-form,
  .shopping-store-create-form,
  .shopping-store-settings-row,
  .shopping-store-settings-row .settings-row__form {
    grid-template-columns: 1fr;
  }

  .shopping-store-settings-row .settings-row__actions {
    justify-content: flex-start;
  }

  .account-panel__row,
  .login-screen {
    grid-template-columns: 1fr;
  }

  .account-panel__row {
    align-items: flex-start;
  }

  .login-shell {
    place-items: start center;
    padding: 6rem 1.5rem 3rem;
  }

  .login-screen {
    gap: 2.75rem;
  }

  .login-copy h1 {
    font-size: 4.3rem;
  }

  .auth-panel {
    max-width: 32rem;
  }

  .task-form__grid--task .field--assignees,
  .task-form__grid--event .field--assignees {
    grid-column: auto;
  }

  .assignee-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .family-member-setting__color-band {
    min-height: 4rem;
  }

  .field--emoji input {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .chores-summary {
    grid-template-columns: 1fr;
  }

  .chores-filter {
    width: 100%;
  }

  .chores-filter__link {
    flex: 1;
  }

  .chore-row__main {
    grid-template-columns: minmax(0, 1fr);
  }

  .chore-checklist-preview {
    grid-column: 1 / -1;
    padding-left: 2.8rem;
  }

  .chore-detail-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .routine-date-header {
    gap: 0.35rem;
  }

  .routine-date-title {
    font-size: 1.32rem;
  }

  .date-nav-button {
    width: 2.25rem;
    height: 2.25rem;
  }

  .date-today-button {
    min-height: 2.25rem;
    padding-inline: 0.65rem;
  }
}

html:has(.page-shell--chores),
body:has(.page-shell--chores) {
  --chores-bg: #fbf8f2;
  --chores-surface: #fffdf9;
  --chores-surface-soft: #f4efe8;
  --chores-ink: #24211d;
  --chores-muted: #70685e;
  --chores-muted-2: #8c8378;
  --chores-line: #ded3c4;
  --chores-hairline: #ede4d9;
  --chores-primary: #2d786f;
  --chores-primary-ink: #1f665f;
  --chores-primary-soft: #ddf0eb;
  --chores-danger: #94473e;
  --chores-rose-soft: #f2ddd7;
  --chores-blue: #3c759f;
  --chores-blue-soft: #e2eef8;
  background: var(--chores-bg);
  color: var(--chores-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

.page-shell--chores {
  align-content: start;
  width: min(100%, 100%);
  max-width: none;
  min-height: 100dvh;
  padding: 0 1.25rem 7rem;
  color: var(--chores-ink);
}

.app-header.chores-app-header {
  max-width: none;
  padding: 1.25rem 0 0.75rem;
  border-radius: 0;
  background: transparent;
  color: var(--chores-ink);
}

.chores-app-header .app-header__eyebrow {
  color: var(--chores-muted);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.chores-app-header .app-header__title {
  color: var(--chores-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2rem, 8vw, 3.25rem);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1;
}

.chore-create-panel {
  position: relative;
}

.chore-create-panel__summary {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--chores-primary) 42%, var(--chores-line));
  border-radius: 8px;
  background: var(--chores-primary);
  color: #fffdf8;
  cursor: pointer;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  list-style: none;
  text-decoration: none;
}

.chore-create-panel__summary::-webkit-details-marker {
  display: none;
}

.chore-create-panel__body {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  z-index: 10;
  display: grid;
  gap: 0.9rem;
  width: min(34rem, calc(100vw - 2.5rem));
  max-height: min(42rem, calc(100dvh - 7rem));
  overflow: auto;
  padding: 1rem;
  border: 1px solid var(--chores-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--chores-surface) 92%, transparent);
}

.chores-layout {
  display: grid;
  gap: 1.125rem;
}

.chores-summary.summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
}

.chores-summary__item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-height: 4.5rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--chores-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--chores-surface) 88%, transparent);
}

.chores-summary__item strong {
  color: var(--chores-ink);
  font-size: 1.65rem;
  font-weight: 790;
  line-height: 1;
}

.chores-summary__item em {
  overflow: hidden;
  color: var(--chores-muted);
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 670;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chores-workspace {
  display: grid;
  gap: 1.125rem;
}

.chores-list-panel,
.chore-edit-panel {
  min-width: 0;
  min-height: 0;
  padding: 1.125rem;
  border: 1px solid var(--chores-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--chores-surface) 88%, transparent);
}

.chores-list-heading,
.chore-edit-panel > .panel-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 0.95rem;
}

.chores-list-heading .section-title,
.chore-edit-panel .panel-heading .section-title {
  margin: 0;
  padding: 0;
  color: var(--chores-ink);
  font-size: 1.45rem;
  font-weight: 780;
  line-height: 1.1;
}

.chores-filter.segmented {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-self: stretch;
  width: auto;
  max-width: 100%;
  gap: 0.25rem;
  overflow: hidden;
  padding: 0.25rem;
  border: 1px solid var(--chores-line);
  border-radius: 8px;
  background: var(--chores-surface-soft);
}

.chores-filter__link {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  place-items: center;
  min-width: 0;
  min-height: 1.55rem;
  padding: 0 0.45rem;
  border-radius: 6px;
  color: var(--chores-muted);
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.chores-filter__link.is-selected {
  background: var(--chores-surface);
  color: var(--chores-ink);
}

.chore-section {
  display: grid;
  gap: 0.65rem;
  border: 0;
  background: transparent;
  padding: 0;
}

.chore-section + .chore-section {
  margin-top: 0.9rem;
}

.chore-section .task-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.chore-section .task-section__header .section-title {
  margin: 0;
  color: var(--chores-muted);
  font-size: 0.78rem;
  font-weight: 820;
}

.chore-section .task-section__count {
  color: var(--chores-muted-2);
  font-size: 0.72rem;
  font-weight: 740;
}

.chore-section--overdue .task-section__header .section-title {
  color: var(--chores-danger);
}

.chore-section--overdue .task-section__count {
  background: color-mix(in srgb, var(--chores-rose-soft) 68%, var(--chores-surface));
  color: var(--chores-danger);
}

.chore-section--today .task-section__header .section-title {
  color: var(--chores-primary-ink);
}

.chore-section--today .task-section__count {
  background: var(--chores-primary-soft);
  color: var(--chores-primary-ink);
}

.chore-section--upcoming .task-section__header .section-title,
.chore-section--done .task-section__header .section-title {
  color: var(--chores-muted);
}

.chore-section--upcoming .task-section__count,
.chore-section--done .task-section__count {
  background: var(--chores-surface-soft);
  color: var(--chores-muted);
}

.chore-list {
  display: grid;
  gap: 0.65rem;
}

.chore-row.chore-item {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  min-height: 0;
  padding: 0.8rem;
  border: 1px solid var(--chores-hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--chores-surface) 86%, transparent);
}

.chore-row.chore-item.is-selected {
  border-color: color-mix(in srgb, var(--chores-primary) 34%, var(--chores-line));
}

.chore-row > .chore-toggle {
  align-self: center;
  margin: 0;
}

.chore-toggle {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.chore-toggle input {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid var(--chores-muted-2);
  border-radius: 999px;
  background: var(--chores-surface);
  cursor: pointer;
}

.chore-toggle input:checked {
  position: relative;
  border-color: var(--chores-primary);
  background: radial-gradient(circle at center, var(--chores-primary) 0 5px, transparent 6px);
}

.chore-toggle input:checked::after {
  content: none;
}

.chore-row__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.chore-row__copy {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.chore-row__copy .task-row__title {
  display: block;
  overflow: hidden;
  margin: 0;
  color: var(--chores-ink);
  font-size: 0.96rem;
  font-weight: 790;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chore-row__copy .task-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  margin: 0.2rem 0 0;
  color: var(--chores-muted);
  font-size: 0.8rem;
  font-weight: 640;
  white-space: normal;
}

.chore-row__meta-line {
  display: block;
  max-width: 100%;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.chore-row__note {
  width: 100%;
  margin-top: calc(15px - 0.08rem);
  border-top: 1px solid var(--chores-hairline);
  padding-top: 0.45rem;
  white-space: pre-wrap;
}

.chore-row__copy .task-row__meta span + span::before {
  content: none;
}

.chore-priority {
  display: inline-grid;
  place-items: center;
  min-width: 1.9rem;
  color: var(--chores-muted);
  font-size: 0.78rem;
  font-weight: 840;
}

.chore-priority--p1 {
  color: var(--chores-danger);
}

.chore-priority--p2 {
  color: var(--chores-primary-ink);
}

.chore-priority--p3 {
  color: var(--chores-muted);
}

.chore-checklist-preview {
  grid-column: 2;
  display: grid;
  gap: 0.4rem;
  padding: 0.45rem 0 0.1rem 3.1rem;
  border-top: 1px solid var(--chores-hairline);
}

.chore-row.has-checklist .chore-checklist-preview {
  grid-column: 2;
  margin-left: 0;
  padding-left: 0;
}

.chore-row.has-checklist:has(.chore-row__note) .chore-checklist-preview {
  margin-top: calc(15px - 0.6rem);
}

.chore-checklist-preview__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-height: 1.2rem;
  margin: 0;
  color: var(--chores-muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.chore-checklist-preview__copy {
  display: block;
  min-width: 0;
  line-height: 1.18;
}

.chore-checklist-preview__copy > span {
  min-width: 0;
}

.chore-checklist-preview__time {
  color: var(--chores-primary-ink);
  font-variant-numeric: tabular-nums;
}

.chore-checklist-preview__separator {
  margin: 0 0.16rem;
}

.chore-checklist-preview__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mini-check {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--chores-muted-2);
  border-radius: 999px;
  background: var(--chores-surface);
}

.chore-checklist-preview__item.is-done {
  color: var(--chores-ink);
}

.chore-checklist-preview__item.is-done .mini-check {
  border-color: var(--chores-primary);
  background: var(--chores-primary);
}

.chore-checklist-preview__item.is-done .mini-check::after {
  width: 0.38rem;
  height: 0.62rem;
  border: solid #fffdf8;
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg) translateY(-1px);
}

.chore-checklist-preview__item.is-done span:last-child {
  text-decoration: none;
}

.chore-edit-mobile-header {
  display: none;
}

.chore-delete-icon-form {
  display: grid;
  margin: 0;
}

.chore-delete-icon-button {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid color-mix(in srgb, var(--chores-danger) 42%, var(--chores-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--chores-danger) 10%, var(--chores-surface));
  color: var(--chores-danger);
  cursor: pointer;
}

.chore-delete-icon-button svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.15;
}

.chore-form {
  display: grid;
  gap: 0.9rem;
}

.chore-form .task-form__grid--chore {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.chore-priority-options {
  grid-column: 1 / -1;
}

.chore-form .field,
.chore-priority-options,
.chore-cadence-fields {
  display: grid;
  gap: 0.45rem;
}

.chore-form .field label,
.chore-priority-options legend {
  margin: 0;
  color: var(--chores-muted);
  font-size: 0.78rem;
  font-weight: 780;
}

.chore-form .field input,
.chore-form .field select,
.chore-form .field textarea {
  inline-size: 100%;
  max-inline-size: 100%;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--chores-line);
  border-radius: 8px;
  background: var(--chores-surface);
  color: var(--chores-ink);
  font-size: 0.96rem;
  font-weight: 650;
}

.chore-form .field input[type="date"] {
  display: block;
  min-inline-size: 0;
  appearance: none;
  -webkit-appearance: none;
}

.chore-form .field input[type="date"]::-webkit-date-and-time-value {
  display: flex;
  align-items: center;
  min-height: 100%;
  text-align: left;
}

.chore-form .field input,
.chore-form .field select {
  height: 2.7rem;
  padding: 0 0.75rem;
}

.chore-form .field textarea {
  min-height: 4.5rem;
  overflow: hidden;
  padding: 0.75rem;
  resize: none;
}

.chore-priority-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
}

.chore-priority-options legend {
  grid-column: 1 / -1;
  margin-bottom: 0.05rem;
}

.chore-cadence-fields {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.chore-cadence-fields[hidden] {
  display: none;
}

.chore-priority-option {
  display: grid;
  place-items: center;
  min-height: 2.5rem;
  height: 2.5rem;
  padding: 0.35rem 0.2rem;
  border: 1px solid var(--chores-line);
  border-radius: 8px;
  background: var(--chores-surface);
  color: var(--chores-muted);
  font-size: 0.82rem;
  font-weight: 810;
  line-height: 1.08;
  text-align: center;
}

.chore-priority-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chore-priority-option:has(input:checked).chore-priority-option--p1 {
  border-color: color-mix(in srgb, var(--chores-rose-soft) 74%, var(--chores-line));
  background: color-mix(in srgb, var(--chores-rose-soft) 74%, var(--chores-surface));
  color: var(--chores-danger);
}

.chore-priority-option:has(input:checked).chore-priority-option--p2 {
  border-color: color-mix(in srgb, var(--chores-primary-soft) 78%, var(--chores-line));
  background: color-mix(in srgb, var(--chores-primary-soft) 78%, var(--chores-surface));
  color: var(--chores-primary-ink);
}

.chore-priority-option:has(input:checked).chore-priority-option--p3 {
  border-color: color-mix(in srgb, var(--chores-blue-soft) 78%, var(--chores-line));
  background: color-mix(in srgb, var(--chores-blue-soft) 78%, var(--chores-surface));
  color: var(--chores-blue);
}


.chore-detail-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.chore-detail-strip span,
.chore-detail-field {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--chores-hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--chores-surface-soft) 72%, transparent);
  color: var(--chores-muted);
  font-size: 0.78rem;
  font-weight: 690;
}

.chore-detail-field label {
  margin: 0;
  color: var(--chores-muted);
  font-size: 0.78rem;
  font-weight: 690;
}

.chore-detail-field input[type="date"] {
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--chores-ink);
  font-size: 0.92rem;
  font-weight: 780;
}

.chore-detail-strip b {
  overflow: hidden;
  color: var(--chores-ink);
  font-size: 0.92rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chore-checklist-editor {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.checklist-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.checklist-heading .section-title {
  margin: 0;
  color: var(--chores-ink);
  font-size: 1rem;
  font-weight: 790;
}

.chore-checklist-editor__rows {
  display: grid;
  gap: 0.45rem;
}

.chore-checklist-editor__row-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
}

.chore-checklist-editor__row-shell > .chore-checklist-editor__row {
  grid-column: 1;
  grid-row: 1;
}

.chore-checklist-editor__row {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  grid-template-areas:
    "mark title remove"
    ". time .";
  align-items: center;
  gap: 0.45rem 0.55rem;
  min-height: 2.5rem;
  padding: 0 0.65rem;
  border: 1px solid var(--chores-hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--chores-surface) 88%, transparent);
}

.chore-checklist-editor__row > span[aria-hidden]:first-of-type {
  grid-area: mark;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--chores-muted-2);
  border-radius: 999px;
  background: var(--chores-surface);
}

.chore-checklist-editor__row.is-done > span[aria-hidden]:first-of-type {
  border-color: var(--chores-primary);
  background: radial-gradient(circle at center, var(--chores-primary) 0 5px, transparent 6px);
}

.chore-checklist-editor__row textarea,
.chore-checklist-editor__row input[type="time"] {
  min-width: 0;
  min-height: 2.35rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--chores-ink);
  font-size: 0.9rem;
  font-weight: 560;
}

.chore-checklist-editor__row textarea {
  grid-area: title;
  width: 100%;
  line-height: 1.25;
  overflow: hidden;
  padding: 0.55rem 0;
  resize: none;
}

.chore-checklist-editor__row input[type="time"] {
  justify-self: end;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 1.35rem;
  height: 1.35rem;
  padding: 0 1.55rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--chores-primary-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

.chore-checklist-editor__row input[type="time"]::-webkit-date-and-time-value {
  margin: 0;
  text-align: left;
}

.chore-checklist-editor__row input[type="time"].is-empty {
  color: transparent;
}

.chore-checklist-editor__row input[type="time"].is-empty::-webkit-date-and-time-value {
  color: transparent;
}

.chore-checklist-editor__row input[type="time"].is-empty:focus {
  color: var(--chores-primary-ink);
}

.chore-checklist-editor__row input::placeholder,
.chore-checklist-editor__row textarea::placeholder {
  color: color-mix(in srgb, var(--chores-muted) 56%, transparent);
}

.chore-checklist-editor__remove-button {
  grid-area: remove;
  position: relative;
  z-index: 1;
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--chores-muted);
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 850;
  line-height: 1;
  touch-action: manipulation;
}

.chore-checklist-editor__remove-button:hover {
  background: color-mix(in srgb, var(--chores-danger) 10%, transparent);
  color: var(--chores-danger);
}

.chore-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
}

.chore-form .form-actions .app-button,
.chore-delete-button {
  min-width: 6.6rem;
  min-height: 2.65rem;
  border-radius: 8px;
  font-weight: 800;
}

.chore-form .form-actions .app-button--primary {
  border-color: color-mix(in srgb, var(--chores-primary) 42%, var(--chores-line));
  background: var(--chores-primary);
  color: #fffdf8;
}

.chore-delete-button {
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--chores-danger) 24%, var(--chores-line));
  background: color-mix(in srgb, var(--chores-surface) 88%, transparent);
  color: var(--chores-danger);
}

.chores-empty-state {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  min-height: 12rem;
  padding: 1rem;
  border: 1px solid var(--chores-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--chores-surface) 88%, transparent);
}

.chores-empty-state .empty-state__mark {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 0.75rem;
  background: var(--chores-primary-soft);
  color: var(--chores-primary-ink);
}

.chores-empty-state .empty-state__mark svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.chores-empty-state h2 {
  margin: 0;
  color: var(--chores-ink);
  font-size: 1rem;
  font-weight: 790;
}

.chores-empty-state p {
  margin: 0;
  color: var(--chores-muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

body:has(.page-shell--chores) .desktop-sidebar {
  border-color: var(--chores-line);
  background: color-mix(in srgb, var(--chores-surface) 62%, transparent);
  color: var(--chores-ink);
}

body:has(.page-shell--chores) .desktop-sidebar__brand strong {
  color: var(--chores-ink);
  letter-spacing: 0;
}

body:has(.page-shell--chores) .desktop-sidebar__brand span,
body:has(.page-shell--chores) .desktop-sidebar__link,
body:has(.page-shell--chores) .desktop-sidebar__actions a {
  color: var(--chores-muted);
}

body:has(.page-shell--chores) .desktop-sidebar__link.is-active {
  border: 1px solid color-mix(in srgb, var(--chores-primary) 42%, var(--chores-line));
  background: color-mix(in srgb, var(--chores-primary-soft) 72%, var(--chores-surface));
  color: var(--chores-primary-ink);
}

body:has(.page-shell--chores) .bottom-navigation {
  border-radius: 0;
  border-color: var(--chores-line);
  background: color-mix(in srgb, var(--chores-surface) 74%, var(--chores-bg));
}

body:has(.page-shell--chores) .bottom-navigation__link {
  border-radius: 11px;
  color: var(--chores-muted);
}

body:has(.page-shell--chores) .bottom-navigation__link.is-active {
  background: var(--chores-primary-soft);
  color: var(--chores-primary-ink);
}

body:has(.page-shell--dashboard) .desktop-sidebar {
  border-color: var(--daily-line);
  background: color-mix(in srgb, var(--daily-card) 62%, transparent);
  color: var(--daily-ink);
}

body:has(.page-shell--dashboard) .desktop-sidebar__brand strong {
  color: var(--daily-ink);
  letter-spacing: 0;
}

body:has(.page-shell--dashboard) .desktop-sidebar__brand span,
body:has(.page-shell--dashboard) .desktop-sidebar__link,
body:has(.page-shell--dashboard) .desktop-sidebar__actions a {
  color: var(--daily-muted);
}

body:has(.page-shell--dashboard) .desktop-sidebar__link.is-active {
  border: 1px solid color-mix(in srgb, var(--daily-primary) 42%, var(--daily-line));
  background: var(--daily-primary-soft);
  color: var(--daily-primary-ink);
}

body:has(.page-shell--dashboard) .bottom-navigation {
  border-radius: 0;
  border-color: var(--daily-line);
  background: color-mix(in srgb, var(--daily-card) 74%, var(--daily-bg));
}

body:has(.page-shell--dashboard) .bottom-navigation__link {
  border-radius: 11px;
  color: var(--daily-muted);
}

body:has(.page-shell--dashboard) .bottom-navigation__link.is-active {
  background: var(--daily-primary-soft);
  color: var(--daily-primary-ink);
}

html:has(.page-shell--habits),
body:has(.page-shell--habits),
html:has(.page-shell--inbox),
body:has(.page-shell--inbox),
html:has(.page-shell--calendar),
body:has(.page-shell--calendar) {
  --habits-bg: #fbf8f2;
  --habits-surface: #fffdf9;
  --habits-surface-soft: #f4efe8;
  --habits-ink: #24211d;
  --habits-muted: #70685e;
  --habits-muted-2: #8c8378;
  --habits-line: #ded3c4;
  --habits-hairline: #ede4d9;
  --habits-primary: #2d786f;
  --habits-primary-ink: #1f665f;
  --habits-primary-soft: #ddf0eb;
  --habits-danger: #94473e;
  --habits-rose-soft: #f2ddd7;
  background: var(--habits-bg);
  color: var(--habits-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

.page-shell--habits,
.page-shell--inbox,
.page-shell--calendar {
  align-content: start;
  width: min(100%, 100%);
  max-width: none;
  min-height: 100dvh;
  padding: 0 1.25rem 7rem;
  color: var(--habits-ink);
}

.app-header.habits-app-header,
.app-header.inbox-app-header,
.app-header.calendar-app-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  max-width: none;
  padding: 1.25rem 0 0.75rem;
  border-radius: 0;
  background: transparent;
  color: var(--habits-ink);
}

.habits-app-header .app-header__copy,
.calendar-app-header .app-header__copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.habits-header-back-link,
.calendar-header-back-link {
  display: none;
}

.habit-back-link {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid var(--habits-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--habits-surface) 86%, transparent);
  color: var(--habits-muted);
  font-size: 1.45rem;
  line-height: 1;
  text-decoration: none;
}

.habits-app-header .app-header__title,
.calendar-app-header .app-header__title {
  color: var(--habits-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2rem, 8vw, 3.25rem);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1;
}

.habits-layout,
.calendar-layout {
  display: grid;
  gap: 1.125rem;
}

.habits-summary.summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
}

.habits-summary__item {
  display: grid;
  gap: 0.35rem;
  min-height: 4.5rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--habits-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--habits-surface) 88%, transparent);
}

.habits-summary__item span {
  color: var(--habits-muted);
  font-size: 0.78rem;
  font-weight: 780;
}

.habits-summary__item strong {
  color: var(--habits-ink);
  font-size: 1.65rem;
  font-weight: 790;
  line-height: 1;
}

.habits-workspace,
.calendar-workspace {
  display: grid;
  gap: 1.125rem;
}

.habits-list-panel,
.calendar-list-panel{
  min-width: 0;
  min-height: 0;
  padding: 1.125rem;
  border: 1px solid var(--habits-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--habits-surface) 88%, transparent);
}

.habits-list-heading,
.calendar-list-heading{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 0.95rem;
}

.habits-list-heading .section-title{
  margin: 0;
  padding: 0;
  color: var(--habits-ink);
  font-size: 1.45rem;
  font-weight: 780;
  line-height: 1.1;
}

.habits-filter.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-self: stretch;
  width: auto;
  max-width: 100%;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--habits-line);
  border-radius: 8px;
  background: var(--habits-surface-soft);
}

.habits-filter--with-assigned.segmented {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.habits-filter__link {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  place-items: center;
  min-height: 1.55rem;
  padding: 0 0.45rem;
  border-radius: 6px;
  color: var(--habits-muted);
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;
}

.habits-filter__link.is-selected {
  background: var(--habits-surface);
  color: var(--habits-ink);
}

.shopping-filter.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-self: stretch;
  width: auto;
  max-width: 100%;
}

@media (min-width: 761px) {
  .page-shell--shopping:not(.is-creating-shopping-item):not(.is-editing-shopping-item):not(.is-shopping-settings) .shopping-filter.segmented {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-self: start;
    width: min(100%, 31rem);
  }
}

.shopping-filter__link {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  place-items: center;
  color: var(--shopping-muted);
  text-decoration: none;
}

.habit-list,
.calendar-event-list {
  display: grid;
  gap: 0.65rem;
}

.habits-list-heading + .habit-list {
  margin-top: 0.45rem;
}

.habit-section,
.calendar-section {
  display: grid;
  gap: 0.65rem;
  border: 0;
  background: transparent;
  padding: 0;
}

.habit-section + .habit-section,
.calendar-section + .calendar-section {
  margin-top: 0.9rem;
}

.habit-section .task-section__header,
.calendar-section .task-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.6rem 0 0.2rem;
}

.habit-section .task-section__header::before,
.calendar-section .task-section__header::before {
  content: "";
  width: 0.4rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--habits-muted-2);
}

.habit-section--today .task-section__header::before,
.calendar-section--today .task-section__header::before {
  background: var(--habits-primary);
}

.habit-section--overdue .task-section__header::before {
  background: var(--habits-danger);
}

.habit-section--upcoming .task-section__header::before,
.habit-section--done:not(.habit-section--today) .task-section__header::before {
  background: var(--habits-muted-2);
}

.habit-section .task-section__header .section-title,
.calendar-section .task-section__header .section-title {
  margin: 0;
  color: var(--habits-muted);
  font-size: 0.78rem;
  font-weight: 820;
}

.habit-section .task-section__count,
.calendar-section .task-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  min-height: 1.85rem;
  padding: 0 0.72rem;
  border-radius: 999px;
  background: var(--habits-surface-soft);
  color: var(--habits-muted);
  font-size: 0.72rem;
  font-weight: 740;
  white-space: nowrap;
}

.habit-section--today .task-section__header .section-title,
.calendar-section--today .task-section__header .section-title {
  color: var(--habits-primary-ink);
}

.habit-section--overdue .task-section__header .section-title {
  color: var(--habits-danger);
}

.habit-section--today .task-section__count,
.calendar-section--today .task-section__count {
  background: var(--habits-primary-soft);
  color: var(--habits-primary-ink);
}

.habit-section--overdue .task-section__count {
  background: var(--habits-rose-soft);
  color: var(--habits-danger);
}

.habit-section--upcoming .task-section__header .section-title,
.habit-section--done:not(.habit-section--today) .task-section__header .section-title {
  color: var(--habits-muted);
}

.habit-section--upcoming .task-section__count,
.habit-section--done:not(.habit-section--today) .task-section__count {
  background: var(--habits-surface-soft);
  color: var(--habits-muted);
}

.habit-row,
.calendar-event-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  min-height: 0;
  padding: 0.8rem;
  border: 1px solid var(--habits-hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--habits-surface) 86%, transparent);
  overflow: hidden;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    max-height 220ms ease,
    padding 220ms ease,
    border-width 220ms ease,
    margin 220ms ease;
}

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

.habit-row.is-completing {
  opacity: 0.34;
  transform: translateY(-2px);
}

.habit-row.is-collapsing {
  opacity: 0;
  transform: translateY(-0.35rem);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}

.habit-row.is-selected {
  border-color: color-mix(in srgb, var(--habits-primary) 34%, var(--habits-line));
}

.habit-toggle {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
}

.habit-toggle input {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid var(--habits-muted-2);
  border-radius: 999px;
  background: var(--habits-surface);
}

.habit-toggle input:checked {
  border-color: var(--habits-primary);
  background: radial-gradient(circle at center, var(--habits-primary) 0 5px, transparent 6px);
}

.habit-toggle--done input {
  opacity: 1;
}

.habit-toggle--placeholder {
  border: 2px solid var(--habits-muted-2);
  border-radius: 999px;
  background: var(--habits-surface);
}

.habit-row__main,
.calendar-event-row__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.habit-row__copy,
.calendar-event-row__copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.habit-row__copy strong,
.calendar-event-row__copy strong {
  display: block;
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--habits-ink);
  font-size: 0.96rem;
  font-weight: 790;
  line-height: 1.2;
}

.habit-row__copy em {
  display: block;
  overflow: hidden;
  color: var(--habits-muted);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 640;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.habit-row__assignee {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 0.08rem 0.48rem;
  border: 1px solid color-mix(in srgb, var(--member-accent, var(--habits-primary)) 42%, var(--habits-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--member-accent, var(--habits-primary)) 18%, var(--habits-surface));
  color: color-mix(in srgb, var(--member-accent, var(--habits-primary)) 78%, var(--habits-ink));
  font-size: 0.74rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.15;
}

.calendar-event-row__copy strong {
  font-weight: var(--font-weight-strong);
}

.calendar-event-time {
  display: inline;
  color: color-mix(in srgb, var(--event-accent, var(--habits-primary)) 62%, var(--habits-ink));
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
  white-space: nowrap;
}

.habit-row.is-overdue .habit-row__copy em {
  color: var(--habits-danger);
}

.habit-stats {
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--habits-primary-ink);
  font-size: 0.78rem;
  font-weight: 790;
  text-align: right;
  white-space: nowrap;
}





































.habits-empty-state,
.calendar-empty-state {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  min-height: 12rem;
  padding: 1rem;
  border: 1px solid var(--habits-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--habits-surface) 88%, transparent);
}

.habits-empty-state .empty-state__mark,
.calendar-empty-state .empty-state__mark {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 0.75rem;
  background: var(--habits-primary-soft);
  color: var(--habits-primary-ink);
}

.habits-empty-state h2,
.calendar-empty-state h2 {
  margin: 0;
  color: var(--habits-ink);
  font-size: 1rem;
  font-weight: 790;
}

.habits-empty-state p,
.calendar-empty-state p {
  margin: 0;
  color: var(--habits-muted);
  font-size: 0.86rem;
  line-height: 1.35;
}



body:has(.page-shell--habits) .desktop-sidebar {
  border-color: var(--habits-line);
  background: color-mix(in srgb, var(--habits-surface) 62%, transparent);
  color: var(--habits-ink);
}

body:has(.page-shell--habits) .desktop-sidebar__brand strong {
  color: var(--habits-ink);
  letter-spacing: 0;
}

body:has(.page-shell--habits) .desktop-sidebar__brand span,
body:has(.page-shell--habits) .desktop-sidebar__link,
body:has(.page-shell--habits) .desktop-sidebar__actions a {
  color: var(--habits-muted);
}

body:has(.page-shell--habits) .desktop-sidebar__link.is-active {
  border: 1px solid color-mix(in srgb, var(--habits-primary) 42%, var(--habits-line));
  background: var(--habits-primary-soft);
  color: var(--habits-primary-ink);
}

body:has(.page-shell--habits) .bottom-navigation {
  border-radius: 0;
  border-color: var(--habits-line);
  background: color-mix(in srgb, var(--habits-surface) 74%, var(--habits-bg));
}

body:has(.page-shell--habits) .bottom-navigation__link {
  border-radius: 11px;
  color: var(--habits-muted);
}

@media (max-width: 760px) {
















  .habit-back-link {
    display: grid;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    border: 1px solid var(--habits-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--habits-surface) 86%, transparent);
    color: var(--habits-muted);
    font-size: 1.45rem;
    line-height: 1;
    text-decoration: none;
  }

  .habits-header-back-link,
  .calendar-header-back-link {
    display: grid;
  }
















}

@media (min-width: 761px) {
  body:has(.page-shell--chores) .desktop-sidebar {
    width: 14.75rem;
    padding: 2.125rem 1.375rem;
  }

  body:has(.page-shell--chores) .desktop-sidebar__link {
    min-height: 2.875rem;
    border: 1px solid transparent;
    border-radius: 8px;
  }

  .page-shell--chores {
    margin-left: 14.75rem;
    padding: 2.25rem 2.25rem 3rem;
  }

  .app-header.chores-app-header {
    padding-top: 0;
  }

  .chores-app-header .app-header__title {
    font-size: 2.75rem;
  }

  .chores-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .chore-edit-panel {
    position: sticky;
    top: 2rem;
  }
}

@media (min-width: 1180px) {
  body:has(.page-shell--chores) .desktop-sidebar {
    width: 14.75rem;
  }

  .page-shell--chores {
    margin-left: 14.75rem;
    padding: 2.25rem 2.25rem 3rem;
  }

  .chores-app-header .app-header__title {
    font-size: 3.25rem;
  }
}

@media (max-width: 900px) and (min-width: 761px) {
  body:has(.page-shell--chores) .desktop-sidebar {
    width: 4.875rem;
    padding: 1.875rem 0.875rem;
  }

  body:has(.page-shell--chores) .desktop-sidebar__brand {
    display: none;
  }

  body:has(.page-shell--chores) .desktop-sidebar__link {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 3.125rem;
    padding: 0;
  }

  body:has(.page-shell--chores) .desktop-sidebar__link span:not(.desktop-sidebar__icon),
  body:has(.page-shell--chores) .desktop-sidebar__link b,
  body:has(.page-shell--chores) .desktop-sidebar__actions {
    display: none;
  }

  .page-shell--chores {
    margin-left: 4.875rem;
    padding: 2.125rem 1.875rem 2rem;
  }

  .chores-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chores-summary__item {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 4.9rem;
    padding: 0.875rem;
  }

  .chores-summary__item em {
    grid-column: 1 / -1;
    white-space: normal;
  }

  .chore-edit-panel,
  .chores-list-panel {
    padding: 0.875rem;
  }

  .chore-row__copy .task-row__title {
    font-size: 0.88rem;
  }

  .chore-row__copy .task-row__meta,
  .chore-checklist-preview__item {
    font-size: 0.72rem;
  }

  .chore-checklist-preview {
    padding-left: 1.4rem;
  }

  .chore-detail-strip,
  .notes-field {
    display: none;
  }
}

@media (max-width: 720px) {
  .page-shell--dashboard {
    padding: 0 1rem 6.2rem;
  }

  .daily-dashboard__header {
    min-height: 4.7rem;
    padding: 1.25rem 0 0.95rem;
  }

  .daily-dashboard__header h1 {
    font-size: 1.95rem;
  }

  .dashboard-add-button {
    width: 2.125rem;
    min-width: 2.125rem;
    height: 2.125rem;
  }

  .daily-card {
    padding: 0.85rem;
  }

  .daily-card__header h3 {
    font-size: 1.45rem;
  }

  body:has(.page-shell--dashboard) .bottom-navigation {
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    width: 100%;
    min-height: calc(5.25rem + env(safe-area-inset-bottom));
    padding: 0.7rem 1.4rem max(0.7rem, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--daily-line);
    border-radius: 0;
    background: color-mix(in srgb, var(--daily-card) 92%, white);
    transform: none;
  }

  body:has(.page-shell--dashboard) .bottom-navigation__link {
    flex: 1 1 0;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.18rem;
    min-width: 0;
    min-height: 4.45rem;
    padding: 0.48rem 0.2rem;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--daily-muted);
    font-size: 0.86rem;
    font-weight: 760;
  }

  body:has(.page-shell--dashboard) .bottom-navigation__link.is-active {
    border-color: transparent;
    background: var(--daily-primary-soft);
    color: var(--daily-primary-ink);
  }

  body:has(.page-shell--dashboard) .bottom-navigation__icon,
  body:has(.page-shell--dashboard) .bottom-navigation__icon svg {
    justify-self: center;
  }

  .page-shell--settings {
    padding: 0 1rem 2rem;
  }

  .page-shell--settings .app-header {
    min-height: 4.05rem;
    padding: 1rem 0 0.3rem;
  }

  .page-shell--settings .app-header__title {
    font-size: 1.95rem;
  }

  .page-shell--settings .settings-card {
    padding: 1rem;
  }

  .household-member-form,
  .household-member-create-form,
  .household-member-form--new {
    grid-template-columns: minmax(0, 1fr);
  }

  .household-member-row__actions {
    justify-content: end;
  }

  .page-shell--chores {
    width: min(100%, 100%);
    padding: 0 1.25rem 6.2rem;
  }

  .app-header.chores-app-header {
    padding: 1.25rem 0 0.85rem;
  }

  .chores-app-header .app-header__title {
    font-size: 1.75rem;
  }

  .chores-app-header .app-header__eyebrow {
    display: none;
  }

  .chore-create-panel__summary {
    width: 2.125rem;
    height: 2.125rem;
    font-size: 1.45rem;
  }

  .chores-summary.summary-strip {
    display: none;
  }

  .chores-list-panel,
  .chore-edit-panel {
    padding: 0.85rem;
  }

  .chores-list-heading {
    display: grid;
    gap: 0.75rem;
  }

  .chores-filter.segmented {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .chores-filter__link {
    grid-column: span 2;
  }

  .chores-filter__link--p1 {
    grid-column: span 2;
  }

  .chores-filter--with-assigned.segmented {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .chores-filter--with-assigned .chores-filter__link--p1 {
    grid-column: span 4;
  }

  .page-shell--shopping .shopping-filter__link {
    padding-inline: 0.25rem;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .chore-row.chore-item {
    padding: 0.65rem;
  }

  .chore-row__main {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .chore-row__copy .task-row__title {
    font-size: 1.06rem;
  }

  .chore-row__copy .task-row__meta {
    font-size: 0.9rem;
  }

  .chore-priority {
    min-width: 1.25rem;
    font-size: 0.62rem;
  }

  .chore-checklist-preview {
    padding-left: 1.4rem;
  }

  .chore-checklist-preview__item {
    font-size: 0.94rem;
  }

  .chore-section .task-section__header .section-title {
    font-size: 0.9rem;
  }

  .chore-section .task-section__count {
    font-size: 0.84rem;
  }

  .chore-create-panel__body {
    position: fixed;
    inset: 4.5rem 1rem auto;
    width: auto;
    max-height: calc(100dvh - 6rem);
  }

  .page-shell--chores.is-editing-chore {
    padding-bottom: calc(6.75rem + env(safe-area-inset-bottom));
  }

  body:has(.page-shell--chores.is-editing-chore) {
    padding-bottom: 0;
  }

  .page-shell--chores:not(.is-editing-chore) .chore-edit-panel {
    display: none;
  }

  .page-shell--chores:not(.is-editing-chore) .chore-row.chore-item.is-selected {
    border-color: var(--chores-hairline);
  }

  .page-shell--chores.is-editing-chore .chores-app-header,
  .page-shell--chores.is-editing-chore .chores-summary,
  .page-shell--chores.is-editing-chore .chores-list-panel {
    display: none;
  }

  .page-shell--chores.is-editing-chore .chores-workspace {
    display: block;
  }

  .page-shell--chores.is-editing-chore .chore-edit-panel {
    min-height: calc(100dvh - 1rem);
    padding: 1.25rem 0.75rem calc(7.5rem + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--chores.is-editing-chore .chore-edit-mobile-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
  }

  .page-shell--chores.is-editing-chore .chore-edit-mobile-header h1 {
    margin: 0;
    color: var(--chores-ink);
    font-size: 2rem;
    font-weight: 780;
    line-height: 1;
  }

  .chore-back-link {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--chores-line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--chores-surface) 86%, transparent);
    color: var(--chores-muted);
    font-size: 1.85rem;
    line-height: 1;
    text-decoration: none;
  }

  .page-shell--chores.is-editing-chore .chore-edit-panel > .panel-heading {
    display: none;
  }

  .page-shell--chores.is-editing-chore .chore-form .field input,
  .page-shell--chores.is-editing-chore .chore-form .field select {
    height: 3.25rem;
  }

  .page-shell--chores.is-editing-chore .chore-form .field textarea {
    min-height: 5rem;
  }

  .page-shell--chores.is-editing-chore .chore-form {
    gap: 0.95rem;
  }

  .page-shell--chores.is-editing-chore .chore-form .task-form__grid--chore {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }

  .page-shell--chores.is-editing-chore .chore-checklist-editor__row textarea,
  .page-shell--chores.is-editing-chore .chore-checklist-editor__row input[type="time"] {
    font-size: 16px;
  }

  .page-shell--chores.is-editing-chore .chore-form .form-actions {
    display: grid;
    justify-content: stretch;
  }

  .page-shell--chores.is-editing-chore .chore-form .form-actions--edit-submit {
    position: fixed;
    right: 1.5rem;
    bottom: calc(1.75rem + env(safe-area-inset-bottom));
    left: 1.5rem;
    z-index: 30;
    margin: 0;
    pointer-events: none;
  }

  .page-shell--chores.is-editing-chore .chore-form .form-actions .app-button--primary,
  .page-shell--chores.is-editing-chore .chore-delete-button {
    width: 100%;
    min-height: 3.45rem;
    font-size: 1rem;
  }

  .page-shell--chores.is-editing-chore .chore-form .form-actions--edit-submit .app-button--primary {
    pointer-events: auto;
  }

  .page-shell--chores.is-editing-chore .chore-edit-panel > .button_to {
    display: block;
    margin-top: 0.95rem;
  }

  body:has(.page-shell--chores.is-editing-chore) .bottom-navigation {
    display: none;
  }
}

@media (max-width: 720px) {
  .app-header.habits-app-header {
    min-height: 4.7rem;
    align-content: center;
    padding: 1.25rem 0 0.95rem;
  }

  .habits-app-header .app-header__title {
    font-size: 1.95rem;
  }

  .habits-header-back-link {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 8px;
    font-size: 1.45rem;
  }
}

.chore-create-page {
  display: grid;
  gap: 0.9rem;
}

.chore-create-mobile-header {
  display: none;
}

.chore-priority-option:has(input:checked).chore-priority-option--p3 {
  border-color: var(--chores-line);
  background: color-mix(in srgb, var(--chores-surface-soft) 78%, var(--chores-surface));
  color: var(--chores-muted);
}

.chore-checklist-preview__item {
  cursor: pointer;
}

.chore-checklist-preview__label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-height: 1.45rem;
  cursor: pointer;
}

  .chore-checklist-preview__label span:last-child {
    overflow: visible;
    text-overflow: clip;
  }

@media (max-width: 720px) {
  .page-shell--chores {
    padding-inline: 1rem;
  }

  .app-header.chores-app-header {
    min-height: 4.7rem;
    align-content: center;
    padding: 1.25rem 0 0.95rem;
  }

  .chores-app-header .app-header__title {
    font-size: 1.95rem;
  }

  body:has(.page-shell--chores) .bottom-navigation {
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    width: 100%;
    min-height: calc(5.25rem + env(safe-area-inset-bottom));
    padding: 0.7rem 1.4rem max(0.7rem, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--chores-line);
    border-radius: 0;
    background: color-mix(in srgb, var(--chores-surface) 92%, white);
    transform: none;
  }

  body:has(.page-shell--chores) .bottom-navigation__link {
    flex: 1 1 0;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.18rem;
    min-width: 0;
    min-height: 4.45rem;
    padding: 0.48rem 0.2rem;
    border-radius: 11px;
    background: transparent;
    color: var(--chores-muted);
    font-size: 0.86rem;
    font-weight: 760;
  }

  body:has(.page-shell--chores) .bottom-navigation__link::before {
    content: none;
    display: none;
  }

  body:has(.page-shell--chores) .bottom-navigation__link.is-active {
    background: var(--chores-primary-soft);
    color: var(--chores-primary-ink);
  }

  body:has(.page-shell--chores) .bottom-navigation__icon,
  body:has(.page-shell--chores) .bottom-navigation__icon svg {
    justify-self: center;
  }

  .page-shell--chores.is-creating-chore {
    padding-bottom: 1rem;
  }

  .page-shell--chores.is-creating-chore .chores-app-header,
  .page-shell--chores.is-creating-chore .chores-summary,
  .page-shell--chores.is-creating-chore .chores-list-panel,
  .page-shell--chores.is-creating-chore .chore-edit-panel {
    display: none;
  }

  .page-shell--chores.is-creating-chore .chores-workspace {
    display: block;
  }

  .page-shell--chores.is-creating-chore .chore-create-page {
    min-height: calc(100dvh - 1rem);
    padding: 1.25rem 0.75rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--chores.is-creating-chore .chore-create-mobile-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
  }

  .page-shell--chores.is-creating-chore .chore-create-mobile-header h1 {
    margin: 0;
    color: var(--chores-ink);
    font-size: 1.65rem;
    font-weight: 780;
    line-height: 1;
  }

  .page-shell--chores.is-creating-chore .chore-create-page > .panel-heading {
    display: none;
  }

  .page-shell--chores.is-creating-chore .chore-form .task-form__grid--chore {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .page-shell--chores.is-creating-chore .chore-form .field input,
  .page-shell--chores.is-creating-chore .chore-form .field select {
    height: 3.25rem;
    font-size: 16px;
  }

  .page-shell--chores.is-creating-chore .chore-form .field textarea {
    min-height: 5rem;
    font-size: 16px;
  }

  .page-shell--chores.is-editing-chore .chore-form .field input,
  .page-shell--chores.is-editing-chore .chore-form .field select,
  .page-shell--chores.is-editing-chore .chore-form .field textarea,
  .page-shell--chores.is-creating-chore .chore-checklist-editor__row textarea,
  .page-shell--chores.is-creating-chore .chore-checklist-editor__row input[type="time"] {
    font-size: 16px;
  }

  .page-shell--chores.is-creating-chore .chore-form .form-actions {
    display: grid;
    justify-content: stretch;
  }

  .page-shell--chores.is-creating-chore .chore-form .form-actions .app-button--primary {
    width: 100%;
    min-height: 3.45rem;
    font-size: 1rem;
  }

  body:has(.page-shell--chores.is-creating-chore) .bottom-navigation {
    display: none;
  }
}

html:has(.page-shell--tasks),
body:has(.page-shell--tasks) {
  --tasks-bg: #fbf8f2;
  --tasks-surface: #fffdf9;
  --tasks-surface-soft: #f4efe8;
  --tasks-ink: #24211d;
  --tasks-muted: #70685e;
  --tasks-muted-2: #8c8378;
  --tasks-line: #ded3c4;
  --tasks-hairline: #ede4d9;
  --tasks-primary: #2d786f;
  --tasks-primary-ink: #1f665f;
  --tasks-primary-soft: #ddf0eb;
  --tasks-danger: #94473e;
  --tasks-rose-soft: #f2ddd7;
  background: var(--tasks-bg);
  color: var(--tasks-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

.page-shell--tasks {
  align-content: start;
  width: min(100%, 100%);
  max-width: none;
  min-height: 100dvh;
  padding: 0 1.25rem 7rem;
  color: var(--tasks-ink);
}

.app-header.tasks-app-header {
  max-width: none;
  padding: 1.25rem 0 0.75rem;
  border-radius: 0;
  background: transparent;
  color: var(--tasks-ink);
}

.tasks-app-header .app-header__copy {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.tasks-app-header .app-header__title {
  color: var(--tasks-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2rem, 8vw, 3.25rem);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1;
}

.page-shell--tasks .task-create-panel__summary {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--tasks-primary) 42%, var(--tasks-line));
  border-radius: 8px;
  background: var(--tasks-primary);
  color: #fffdf8;
  cursor: pointer;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  list-style: none;
  text-decoration: none;
}

.tasks-layout,
.tasks-workspace {
  display: grid;
  gap: 1.125rem;
}

.tasks-list-panel,
.task-edit-panel,
.task-create-page {
  min-width: 0;
  min-height: 0;
  padding: 1.125rem;
  border: 1px solid var(--tasks-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--tasks-surface) 88%, transparent);
}

.tasks-list-heading,
.task-edit-panel > .panel-heading,
.task-create-page > .panel-heading {
  display: grid;
  gap: 0.875rem;
  margin: 0 0 0.95rem;
}

.tasks-list-heading .section-title,
.task-edit-panel .panel-heading .section-title,
.task-create-page .panel-heading .section-title {
  margin: 0;
  color: var(--tasks-ink);
  font-size: 1.45rem;
  font-weight: 780;
  line-height: 1.1;
}

.tasks-filter.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-self: stretch;
  width: auto;
  max-width: 100%;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--tasks-line);
  border-radius: 8px;
  background: var(--tasks-surface-soft);
}

.tasks-filter--compact.segmented {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tasks-filter__link {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  place-items: center;
  min-width: 2.65rem;
  min-height: 1.55rem;
  padding: 0 0.45rem;
  border-radius: 6px;
  color: var(--tasks-muted);
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;
}

.tasks-filter__link.is-selected {
  background: var(--tasks-surface);
  color: var(--tasks-ink);
}

.page-shell--tasks .task-section {
  display: grid;
  gap: 0.65rem;
  border: 0;
  background: transparent;
  padding: 0;
}

.page-shell--tasks .task-section + .task-section {
  margin-top: 0.9rem;
}

.page-shell--tasks .task-section__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.page-shell--tasks .task-section__header::before {
  align-self: stretch;
  width: 0.32rem;
  min-height: 2.5rem;
  border-radius: 999px;
  background: var(--tasks-muted-2);
  content: "";
}

.page-shell--tasks .task-section__header .section-title {
  margin: 0;
  color: var(--tasks-muted);
  font-size: 0.9rem;
  font-weight: 820;
}

.page-shell--tasks .task-section__count {
  margin: 0;
  min-width: 0;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--tasks-surface-soft);
  color: var(--tasks-muted-2);
  font-size: 0.84rem;
  font-weight: 740;
  white-space: nowrap;
}

.task-section--overdue .task-section__header::before {
  background: var(--tasks-danger);
}

.task-section--overdue .task-section__header .section-title {
  color: var(--tasks-danger);
}

.task-section--overdue .task-section__count {
  background: color-mix(in srgb, var(--tasks-rose-soft) 68%, var(--tasks-surface));
  color: var(--tasks-danger);
}

.task-section--today .task-section__header::before {
  background: var(--tasks-primary);
}

.task-section--today .task-section__header .section-title {
  color: var(--tasks-primary-ink);
}

.task-section--today .task-section__count {
  background: var(--tasks-primary-soft);
  color: var(--tasks-primary-ink);
}

.task-section--upcoming .task-section__header .section-title,
.task-section--no-date .task-section__header .section-title,
.task-section--completed .task-section__header .section-title {
  color: var(--tasks-muted);
}

.task-section--upcoming .task-section__count,
.task-section--no-date .task-section__count,
.task-section--completed .task-section__count {
  background: var(--tasks-surface-soft);
  color: var(--tasks-muted);
}

.personal-task-list {
  display: grid;
  gap: 0.65rem;
}

.personal-task-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  min-height: 0;
  padding: 0.8rem;
  border: 1px solid var(--tasks-hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--tasks-surface) 86%, transparent);
}

.personal-task-row.has-subtasks {
  align-items: start;
}

.personal-task-row.is-selected {
  border-color: color-mix(in srgb, var(--tasks-primary) 34%, var(--tasks-line));
}

.personal-task-row.is-completed {
  opacity: 1;
}

.personal-task-row.is-simple .personal-task-row__main {
  align-self: stretch;
}

.personal-task-toggle {
  display: grid;
  place-items: center;
  margin: 0;
}

.personal-task-toggle input {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid var(--tasks-muted-2);
  border-radius: 999px;
  background: var(--tasks-surface);
  cursor: pointer;
  position: relative;
}

.personal-task-toggle input:checked {
  border-color: var(--tasks-primary);
  background: radial-gradient(circle at center, var(--tasks-primary) 0 5px, transparent 6px);
}

.personal-task-toggle input:checked::after {
  content: none;
}

.personal-task-row__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.personal-task-row__copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.personal-task-row__copy .task-row__title {
  display: block;
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--tasks-ink);
  font-size: 0.96rem;
  font-weight: 790;
  line-height: 1.2;
}

.personal-task-row__copy .task-row__meta {
  display: grid;
  gap: 0.08rem;
  margin: 0;
  color: var(--tasks-muted);
  font-size: 0.8rem;
  font-weight: 640;
  overflow-wrap: anywhere;
  white-space: normal;
}

.personal-task-row__copy .task-row__meta span + span::before {
  content: none;
}

.personal-task-row__copy .task-row__meta span:not(:last-child)::after {
  content: none;
}

.personal-task-row__copy .task-row__note {
  width: 100%;
  margin-top: calc(15px - 0.08rem);
  border-top: 1px solid color-mix(in srgb, var(--tasks-muted) 24%, transparent);
  padding-top: 0.45rem;
  white-space: pre-wrap;
}

.task-row__url {
  grid-column: 2 / -1;
  display: block;
  min-width: 0;
  margin-top: calc(15px - 0.6rem);
  border-top: 1px solid color-mix(in srgb, var(--tasks-muted) 24%, transparent);
  padding-top: 0.45rem;
  color: var(--tasks-primary-ink);
  font-size: 0.8rem;
  font-weight: 640;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.task-subtask-preview {
  grid-column: 2 / -1;
  display: grid;
  gap: 0.4rem;
  margin-top: calc(15px - 0.6rem);
  padding: 0.45rem 0 0.1rem;
  border-top: 1px solid var(--tasks-hairline);
}

.task-subtask-preview__item {
  position: relative;
  display: grid;
  min-height: 1.35rem;
  margin: 0;
  color: var(--tasks-muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.task-subtask-preview__label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-height: 1.45rem;
  cursor: pointer;
}

.task-subtask-preview__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.task-subtask-preview .mini-check {
  border: 2px solid var(--tasks-muted-2);
  background: var(--tasks-surface);
}

.task-subtask-preview__copy {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.34rem;
  min-width: 0;
  line-height: 1.18;
}

.task-subtask-preview__due {
  color: var(--tasks-primary-ink);
  font-variant-numeric: tabular-nums;
}

.task-subtask-preview__due.is-overdue {
  color: #9d4c48;
}

.task-subtask-preview__item.is-done {
  color: var(--tasks-ink);
}

.task-subtask-preview__item.is-done .task-subtask-preview__due {
  color: inherit;
}

.task-subtask-preview__item.is-done .mini-check {
  border-color: var(--tasks-primary);
  background: var(--tasks-primary);
}

.task-subtask-preview__item.is-done .mini-check::after {
  width: 0.38rem;
  height: 0.62rem;
  border: solid #fffdf8;
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg) translateY(-1px);
}

.page-shell--tasks .task-form {
  display: grid;
  gap: 0.9rem;
}

.page-shell--tasks .task-form__grid--personal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.page-shell--tasks .task-form .field {
  display: grid;
  gap: 0.45rem;
}

.page-shell--tasks .task-form .field--title,
.page-shell--tasks .task-form .field--url,
.page-shell--tasks .task-form .field--assignee,
.page-shell--tasks .task-form .field--recurrence-frequency,
.page-shell--tasks .task-form .recurrence-custom-fields {
  grid-column: 1 / -1;
}

.page-shell--tasks .task-form .field label,
.page-shell--tasks .task-form .field__label {
  margin: 0;
  color: var(--tasks-muted);
  font-size: 0.78rem;
  font-weight: 780;
}

.page-shell--tasks .task-form .field input,
.page-shell--tasks .task-form .field select,
.page-shell--tasks .task-form .field textarea {
  inline-size: 100%;
  max-inline-size: 100%;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--tasks-line);
  border-radius: 8px;
  background: var(--tasks-surface);
  color: var(--tasks-ink);
  font-size: 0.96rem;
  font-weight: 650;
}

.page-shell--tasks .task-form .field input,
.page-shell--tasks .task-form .field select {
  height: 2.7rem;
  padding: 0 0.75rem;
}

.page-shell--tasks .task-form .field input[type="date"],
.page-shell--tasks .task-form .field input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  line-height: 1;
  text-align: left;
  padding-inline: 0.75rem;
}

.page-shell--tasks .task-form .field input[type="date"]::-webkit-date-and-time-value,
.page-shell--tasks .task-form .field input[type="time"]::-webkit-date-and-time-value {
  display: flex;
  align-items: center;
  min-height: 100%;
  margin: 0;
  text-align: left;
}

.page-shell--tasks .task-form .field input[type="date"]::-webkit-calendar-picker-indicator,
.page-shell--tasks .task-form .field input[type="time"]::-webkit-calendar-picker-indicator {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.page-shell--tasks .task-form .field textarea {
  min-height: 4.5rem;
  padding: 0.75rem;
  resize: none;
}

.task-subtask-editor {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.task-subtask-editor__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.task-subtask-editor__heading .section-title {
  margin: 0;
  color: var(--tasks-ink);
  font-size: 1rem;
  font-weight: 790;
}

.task-subtask-editor__rows {
  display: grid;
  gap: 0.45rem;
}

.task-subtask-editor__row-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
}

.task-subtask-editor__row-shell > .task-subtask-editor__row {
  grid-column: 1;
  grid-row: 1;
}

.task-subtask-editor__row {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  grid-template-areas:
    "mark title remove"
    ". schedule .";
  align-items: center;
  gap: 0.45rem 0.55rem;
  min-height: 2.5rem;
  padding: 0.65rem;
  border: 1px solid var(--tasks-hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--tasks-surface) 88%, transparent);
}

.task-subtask-editor__row > span:first-of-type {
  grid-area: mark;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--tasks-muted-2);
  border-radius: 999px;
  background: var(--tasks-surface);
}

.task-subtask-editor__row.is-done > span:first-of-type {
  border-color: var(--tasks-primary);
  background: radial-gradient(circle at center, var(--tasks-primary) 0 5px, transparent 6px);
}

.task-subtask-editor__row textarea {
  grid-area: title;
  min-width: 0;
  min-height: 2.35rem;
  width: 100%;
  padding: 0.55rem 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tasks-ink);
  font-size: 0.9rem;
  font-weight: 560;
  line-height: 1.25;
  overflow: hidden;
  resize: none;
}

.task-subtask-editor__row input[type="date"],
.task-subtask-editor__row input[type="time"] {
  min-width: 0;
  min-height: 1.35rem;
  height: 1.35rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tasks-primary-ink);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  -webkit-appearance: none;
  appearance: none;
}

.task-subtask-editor__schedule {
  grid-area: schedule;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  min-width: 0;
}

.task-subtask-editor__row input[type="date"],
.task-subtask-editor__row input[type="time"],
.task-subtask-editor__row select {
  width: 2.75rem;
  min-width: 0;
  max-width: none;
  padding: 0;
  text-align: left;
}

.task-subtask-editor__row select {
  min-height: 1.35rem;
  height: 1.35rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tasks-primary-ink);
  font-size: 0.82rem;
  font-weight: 760;
}

.task-subtask-editor__schedule-field {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 2.75rem;
  width: auto;
  height: 2.75rem;
  padding: 0 0.35rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--tasks-primary-ink);
  cursor: pointer;
}

.task-subtask-editor__schedule-field:has(input.is-empty) {
  width: 2.75rem;
  padding: 0;
  border-color: var(--tasks-line);
  background: var(--tasks-surface);
  color: var(--tasks-muted);
}

.task-subtask-editor__schedule-field:has(select.is-empty) {
  width: 2.75rem;
  padding: 0;
  border-color: var(--tasks-line);
  background: var(--tasks-surface);
  color: var(--tasks-muted);
}

.task-subtask-editor__schedule-field.is-overdue:has(input:not(.is-empty)) {
  color: var(--tasks-danger);
}

.task-subtask-editor__schedule-field:has(input:focus-visible) {
  outline: 2px solid var(--tasks-primary);
  outline-offset: 2px;
}

.nested-schedule-clear-button {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tasks-muted);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
}

.nested-schedule-clear-button[hidden] {
  display: none;
}

.nested-schedule-value-row {
  display: contents;
}

.nested-schedule-value-row:has(.nested-schedule-clear-button:not([hidden])) {
  box-sizing: border-box;
  display: flex;
  flex: 1 0 100%;
  align-items: stretch;
  min-width: 0;
  width: 100%;
  height: 2.75rem;
  min-height: 2.75rem;
  overflow: hidden;
  border: 1px solid var(--tasks-primary, var(--app-primary));
  border-radius: 10px;
  background: var(--tasks-surface, var(--app-surface));
  color: var(--tasks-primary-ink, var(--app-primary-ink));
}

.nested-schedule-value-row:has(.nested-schedule-clear-button:not([hidden])) > .task-subtask-editor__schedule-field {
  box-sizing: border-box;
  flex: 1 1 auto;
  place-items: center start;
  min-width: 0;
  width: auto;
  height: 2.75rem;
  padding-inline: 0.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.nested-schedule-value-row:has(.nested-schedule-clear-button:not([hidden])) > .nested-schedule-clear-button {
  box-sizing: border-box;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border-left: 1px solid color-mix(
    in srgb,
    var(--tasks-primary, var(--app-primary)) 42%,
    var(--tasks-line, var(--app-line))
  );
  border-radius: 0;
}

.nested-schedule-clear-button:hover,
.nested-schedule-clear-button:focus-visible {
  outline: 0;
  background: color-mix(in srgb, var(--tasks-danger) 12%, transparent);
  color: var(--tasks-danger);
}

.task-subtask-editor__schedule-field::before {
  display: none;
  width: 1.15rem;
  height: 1.15rem;
  background: currentColor;
  content: "";
  pointer-events: none;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.task-subtask-editor__schedule-field:has(input.is-empty)::before,
.task-subtask-editor__schedule-field:has(select.is-empty)::before {
  display: block;
}

.task-subtask-editor__schedule-field[data-schedule-kind="date"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h1a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V2Zm11 7H6v9a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V9ZM7 6a1 1 0 0 0-1 1h13a1 1 0 0 0-1-1h-1v1h-2V6H9v1H7V6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h1a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V2Zm11 7H6v9a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V9ZM7 6a1 1 0 0 0-1 1h13a1 1 0 0 0-1-1h-1v1h-2V6H9v1H7V6Z'/%3E%3C/svg%3E");
}

.task-subtask-editor__schedule-field[data-schedule-kind="time"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm1 3v4.59l3.2 3.2-1.41 1.42L11 12.41V7h2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm1 3v4.59l3.2 3.2-1.41 1.42L11 12.41V7h2Z'/%3E%3C/svg%3E");
}

.task-subtask-editor__schedule-field[data-schedule-kind="assignee"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 5v3h16v-3c0-2.33-2.67-5-8-5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 5v3h16v-3c0-2.33-2.67-5-8-5Z'/%3E%3C/svg%3E");
}

.task-subtask-editor__schedule-control {
  position: absolute;
  inset: 0;
}

.nested-assignee-picker__trigger {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.nested-assignee-picker__trigger:focus-visible {
  outline: 2px solid var(--tasks-primary);
  outline-offset: 2px;
}

.task-subtask-editor__assignee-field:has(.nested-assignee-picker__menu.is-open) {
  z-index: 20;
}

:is(.task-subtask-editor__rows, .chore-checklist-editor__rows):has(.nested-assignee-picker__menu.is-open) {
  overflow: visible !important;
}

:is(.task-subtask-editor__row-shell, .chore-checklist-editor__row-shell):has(.nested-assignee-picker__menu.is-open) {
  position: relative;
  z-index: 10;
}

.nested-assignee-picker__menu {
  position: fixed;
  z-index: 1000;
  inset: auto;
  margin: 0;
  display: grid;
  width: max-content;
  min-width: 10.5rem;
  max-width: min(15rem, calc(100vw - 2rem));
  padding: 0.35rem;
  border: 1px solid var(--tasks-line);
  border-radius: 0.85rem;
  background: var(--tasks-surface);
  box-shadow: 0 0.75rem 2rem rgba(20, 24, 24, 0.2);
}

.nested-assignee-picker__menu:not(.is-open),
.nested-assignee-picker__menu[hidden] {
  display: none;
}

.nested-assignee-picker__option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.5rem;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.6rem;
  background: transparent;
  color: var(--tasks-ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}

.nested-assignee-picker__option:hover,
.nested-assignee-picker__option:focus-visible,
.nested-assignee-picker__option.is-selected {
  outline: 0;
  background: color-mix(in srgb, var(--tasks-primary) 16%, transparent);
}

.nested-assignee-picker__dot {
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--member-accent, var(--tasks-primary));
}

.work-recurrence-picker {
  width: min(22rem, calc(100vw - 1rem));
  max-width: calc(100vw - 1rem);
  padding: 0.75rem;
}

.work-recurrence-picker .recurrence-custom-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.work-recurrence-picker .recurrence-custom-fields[hidden] {
  display: none;
}

.page-shell .work-recurrence-picker .recurrence-custom-fields .field label {
  color: var(--tasks-muted);
  font-size: 0.78125rem;
  font-weight: 800;
  letter-spacing: 0.0625rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.work-recurrence-picker__clear {
  grid-column: 1 / -1;
  min-height: 2.75rem;
  border: 1px solid var(--tasks-line);
  border-radius: 0.7rem;
  background: transparent;
  color: var(--tasks-muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 760;
  cursor: pointer;
}

.work-recurrence-picker__clear:hover,
.work-recurrence-picker__clear:focus-visible {
  border-color: color-mix(in srgb, var(--tasks-danger) 55%, var(--tasks-line));
  outline: 0;
  color: var(--tasks-danger);
}

.task-subtask-editor__schedule-value {
  color: inherit;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
}

.task-subtask-editor__row input[type="date"]::-webkit-date-and-time-value,
.task-subtask-editor__row input[type="time"]::-webkit-date-and-time-value {
  margin: 0;
  text-align: left;
}

.task-subtask-editor__row input[type="date"].is-empty,
.task-subtask-editor__row input[type="time"].is-empty {
  color: transparent;
}

.task-subtask-editor__row input[type="date"].is-empty::-webkit-date-and-time-value,
.task-subtask-editor__row input[type="time"].is-empty::-webkit-date-and-time-value {
  color: transparent;
}

.task-subtask-editor__row input[type="date"].is-empty:focus,
.task-subtask-editor__row input[type="time"].is-empty:focus {
  padding: 0;
  color: transparent;
}

.task-subtask-editor__schedule-control input[type="date"],
.task-subtask-editor__schedule-control input[type="time"],
.task-subtask-editor__schedule-control select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: transparent;
  caret-color: transparent;
  cursor: pointer;
}

.task-subtask-editor__schedule-control select {
  min-height: 100%;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  opacity: 0;
}

.task-subtask-editor__schedule-control input[type="date"]::-webkit-datetime-edit,
.task-subtask-editor__schedule-control input[type="time"]::-webkit-datetime-edit {
  opacity: 0;
}

.task-subtask-editor__schedule-control input[type="date"]::-webkit-calendar-picker-indicator,
.task-subtask-editor__schedule-control input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

.task-subtask-editor__remove-button {
  grid-area: remove;
  position: relative;
  z-index: 1;
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tasks-muted);
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 850;
  line-height: 1;
  touch-action: manipulation;
}

.task-subtask-editor__remove-button:hover {
  background: color-mix(in srgb, var(--tasks-danger) 10%, transparent);
  color: var(--tasks-danger);
}

.page-shell--tasks .task-form .recurrence-custom-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page-shell--tasks .task-form .recurrence-custom-fields[hidden] {
  display: none;
}

.page-shell--tasks .task-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
}

.page-shell--tasks .task-form .form-actions .app-button,
.page-shell--tasks .task-delete-button {
  min-width: 6.6rem;
  min-height: 2.65rem;
  border-radius: 8px;
  font-weight: 800;
}

.page-shell--tasks .task-form .form-actions .app-button--primary {
  border-color: color-mix(in srgb, var(--tasks-primary) 42%, var(--tasks-line));
  background: var(--tasks-primary);
  color: #fffdf8;
}

.page-shell--tasks .task-delete-button {
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--tasks-danger) 24%, var(--tasks-line));
  background: color-mix(in srgb, var(--tasks-surface) 88%, transparent);
  color: var(--tasks-danger);
}

.task-delete-icon-form {
  display: grid;
  margin: 0;
}

.task-delete-icon-button {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid color-mix(in srgb, var(--tasks-danger) 42%, var(--tasks-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--tasks-danger) 10%, var(--tasks-surface));
  color: var(--tasks-danger);
  cursor: pointer;
}

.task-delete-icon-button svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.15;
}

.task-completed-group {
  margin-top: 1rem;
  border-top: 1px solid var(--tasks-hairline);
  padding-top: 0.85rem;
}

.task-completed-group summary {
  color: var(--tasks-muted);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 780;
}

.task-completed-group .personal-task-list {
  margin-top: 0.65rem;
}

.tasks-empty-state {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  min-height: 12rem;
  padding: 1rem;
  border: 1px solid var(--tasks-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--tasks-surface) 88%, transparent);
}

.tasks-empty-state .empty-state__mark {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 0.75rem;
  background: var(--tasks-primary-soft);
  color: var(--tasks-primary-ink);
}

.tasks-empty-state h2 {
  margin: 0;
  color: var(--tasks-ink);
  font-size: 1rem;
  font-weight: 790;
}

.tasks-empty-state p {
  margin: 0;
  color: var(--tasks-muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.task-edit-mobile-header,
.task-create-mobile-header {
  display: none;
}

.task-back-link {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid var(--tasks-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--tasks-surface) 86%, transparent);
  color: var(--tasks-muted);
  font-size: 1.45rem;
  line-height: 1;
  text-decoration: none;
}

body:has(.page-shell--tasks) .desktop-sidebar {
  border-color: var(--tasks-line);
  background: color-mix(in srgb, var(--tasks-surface) 62%, transparent);
  color: var(--tasks-ink);
}

body:has(.page-shell--tasks) .desktop-sidebar__brand strong {
  color: var(--tasks-ink);
  letter-spacing: 0;
}

body:has(.page-shell--tasks) .desktop-sidebar__brand span,
body:has(.page-shell--tasks) .desktop-sidebar__link,
body:has(.page-shell--tasks) .desktop-sidebar__actions a {
  color: var(--tasks-muted);
}

body:has(.page-shell--tasks) .desktop-sidebar__link.is-active {
  border: 1px solid color-mix(in srgb, var(--tasks-primary) 42%, var(--tasks-line));
  background: var(--tasks-primary-soft);
  color: var(--tasks-primary-ink);
}

body:has(.page-shell--tasks) .bottom-navigation {
  display: none;
}

@media (min-width: 761px) {
  body:has(.page-shell--tasks) .desktop-sidebar {
    width: 14.75rem;
    padding: 2.125rem 1.375rem;
  }

  body:has(.page-shell--tasks) .desktop-sidebar__link {
    min-height: 2.875rem;
    border: 1px solid transparent;
    border-radius: 8px;
  }

  .page-shell--tasks {
    margin-left: 14.75rem;
    padding: 2.25rem 2.25rem 3rem;
  }

  .app-header.tasks-app-header {
    padding-top: 0;
  }

  .tasks-app-header .app-header__title {
    font-size: 2.75rem;
  }

  .tasks-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .task-edit-panel {
    position: sticky;
    top: 2rem;
  }
}

@media (max-width: 900px) and (min-width: 761px) {
  body:has(.page-shell--tasks) .desktop-sidebar {
    width: 4.875rem;
    padding: 1.875rem 0.875rem;
  }

  body:has(.page-shell--tasks) .desktop-sidebar__brand {
    display: none;
  }

  body:has(.page-shell--tasks) .desktop-sidebar__link {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 3.125rem;
    padding: 0;
  }

  body:has(.page-shell--tasks) .desktop-sidebar__link span:not(.desktop-sidebar__icon),
  body:has(.page-shell--tasks) .desktop-sidebar__link b,
  body:has(.page-shell--tasks) .desktop-sidebar__actions {
    display: none;
  }

  .page-shell--tasks {
    margin-left: 4.875rem;
    padding: 2.125rem 1.875rem 2rem;
  }

  .tasks-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .page-shell--tasks {
    width: min(100%, 100%);
    padding: 0 1rem 6.2rem;
  }

  .app-header.tasks-app-header {
    min-height: 4.7rem;
    align-content: center;
    padding: 1.25rem 0 0.95rem;
  }

  .tasks-app-header .app-header__title {
    font-size: 1.95rem;
  }

  .page-shell--tasks .task-create-panel__summary {
    width: 2.125rem;
    height: 2.125rem;
    font-size: 1.45rem;
  }

  .tasks-list-panel,
  .task-edit-panel,
  .task-create-page {
    padding: 0.85rem;
  }

  .personal-task-row {
    padding: 0.65rem;
  }

  .personal-task-row__copy .task-row__title {
    font-size: 1.06rem;
  }

  .personal-task-row__copy .task-row__meta {
    font-size: 0.9rem;
  }

  .page-shell--tasks.is-editing-task,
  .page-shell--tasks.is-creating-task {
    padding-bottom: 1rem;
  }

  .page-shell--tasks.is-editing-task {
    padding-bottom: calc(6.75rem + env(safe-area-inset-bottom));
  }

  .page-shell--tasks:not(.is-editing-task) .task-edit-panel {
    display: none;
  }

  .page-shell--tasks:not(.is-editing-task) .personal-task-row.is-selected {
    border-color: var(--tasks-hairline);
  }

  .page-shell--tasks.is-editing-task .tasks-app-header,
  .page-shell--tasks.is-editing-task .tasks-list-panel,
  .page-shell--tasks.is-creating-task .tasks-app-header,
  .page-shell--tasks.is-creating-task .tasks-list-panel,
  .page-shell--tasks.is-creating-task .task-edit-panel {
    display: none;
  }

  .page-shell--tasks.is-editing-task .tasks-workspace,
  .page-shell--tasks.is-creating-task .tasks-workspace {
    display: block;
  }

  .page-shell--tasks.is-editing-task .task-edit-panel,
  .page-shell--tasks.is-creating-task .task-create-page {
    min-height: calc(100dvh - 1rem);
    padding: 1.25rem 0.75rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--tasks.is-editing-task .task-edit-panel {
    padding-bottom: calc(6.75rem + env(safe-area-inset-bottom));
  }

  .page-shell--tasks.is-editing-task .task-edit-mobile-header,
  .page-shell--tasks.is-creating-task .task-create-mobile-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
  }

  .page-shell--tasks.is-editing-task .task-edit-mobile-header h1,
  .page-shell--tasks.is-creating-task .task-create-mobile-header h1 {
    margin: 0;
    color: var(--tasks-ink);
    font-size: 1.65rem;
    font-weight: 780;
    line-height: 1;
  }

  .page-shell--tasks.is-editing-task .task-edit-panel > .panel-heading,
  .page-shell--tasks.is-creating-task .task-create-page > .panel-heading {
    display: none;
  }

  .page-shell--tasks.is-editing-task .task-form__grid--personal,
  .page-shell--tasks.is-creating-task .task-form__grid--personal {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .page-shell--tasks.is-editing-task .task-form .recurrence-custom-fields,
  .page-shell--tasks.is-creating-task .task-form .recurrence-custom-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .page-shell--tasks.is-editing-task .task-form .field input,
  .page-shell--tasks.is-editing-task .task-form .field select,
  .page-shell--tasks.is-editing-task .task-form .field textarea,
  .page-shell--tasks.is-creating-task .task-form .field input,
  .page-shell--tasks.is-creating-task .task-form .field select,
  .page-shell--tasks.is-creating-task .task-form .field textarea {
    font-size: 16px;
  }

  .page-shell--tasks.is-editing-task .task-form .field input,
  .page-shell--tasks.is-editing-task .task-form .field select,
  .page-shell--tasks.is-creating-task .task-form .field input,
  .page-shell--tasks.is-creating-task .task-form .field select {
    height: 3.25rem;
  }

  .page-shell--tasks.is-editing-task .task-form .form-actions,
  .page-shell--tasks.is-creating-task .task-form .form-actions {
    display: grid;
    justify-content: stretch;
  }

  .page-shell--tasks.is-editing-task .task-form .form-actions--edit-submit {
    position: fixed;
    right: 1.5rem;
    bottom: calc(1.75rem + env(safe-area-inset-bottom));
    left: 1.5rem;
    z-index: 30;
    margin: 0;
    pointer-events: none;
  }

  .page-shell--tasks.is-editing-task .task-form .form-actions .app-button--primary,
  .page-shell--tasks.is-editing-task .task-delete-button,
  .page-shell--tasks.is-creating-task .task-form .form-actions .app-button--primary {
    width: 100%;
    min-height: 3.45rem;
    font-size: 1rem;
  }

  .page-shell--tasks.is-editing-task .task-form .form-actions--edit-submit .app-button--primary {
    pointer-events: auto;
  }

  .page-shell--tasks.is-editing-task .task-edit-panel > .button_to {
    display: block;
    margin-top: 0.95rem;
  }

}

.page-shell--tasks .personal-task-row {
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem;
  min-height: 0;
  padding: 0.8rem;
  border: 1px solid var(--tasks-hairline);
  border-left-width: 1px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tasks-surface) 86%, transparent);
}

.page-shell--tasks .personal-task-row.is-selected {
  border-color: color-mix(in srgb, var(--tasks-primary) 34%, var(--tasks-line));
}

.page-shell--tasks .personal-task-toggle {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.28rem 0 0;
}

.page-shell--tasks .personal-task-toggle input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 2px;
}

.page-shell--tasks .personal-task-toggle input[type="checkbox"]:checked {
  border-color: var(--tasks-primary);
  background: radial-gradient(circle at center, var(--tasks-primary) 0 5px, transparent 6px);
}

.page-shell--tasks .personal-task-toggle input[type="checkbox"]:checked::after {
  content: none;
}

.page-shell--tasks .personal-task-row__copy .task-row__title {
  font-size: 0.96rem;
  letter-spacing: 0;
}

.page-shell--tasks .personal-task-row__copy .task-row__meta {
  display: grid;
  gap: 0.08rem;
  font-size: 0.8rem;
}

@media (max-width: 720px) {
  .page-shell--chores.is-editing-chore .chore-checklist-editor__row,
  .page-shell--chores.is-creating-chore .chore-checklist-editor__row {
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    row-gap: 0.45rem;
    min-height: 3.05rem;
    padding-block: 0.65rem;
  }

  .page-shell--chores.is-editing-chore .chore-checklist-editor__row textarea,
  .page-shell--chores.is-creating-chore .chore-checklist-editor__row textarea {
    grid-area: title;
  }

}

@media (max-width: 720px) {
  /* iOS Safari zooms focused form controls below 16px. */
  .page-shell--tasks.is-editing-task .task-subtask-editor__row textarea,
  .page-shell--tasks.is-editing-task .task-subtask-editor__row input[type="date"],
  .page-shell--tasks.is-editing-task .task-subtask-editor__row input[type="time"],
  .page-shell--tasks.is-editing-task .task-subtask-editor__row select,
  .page-shell--tasks.is-creating-task .task-subtask-editor__row textarea,
  .page-shell--tasks.is-creating-task .task-subtask-editor__row input[type="date"],
  .page-shell--tasks.is-creating-task .task-subtask-editor__row input[type="time"],
  .page-shell--tasks.is-creating-task .task-subtask-editor__row select,
  .page-shell--chores.is-editing-chore .chore-checklist-editor__row textarea,
  .page-shell--chores.is-editing-chore .chore-checklist-editor__row input[type="time"],
  .page-shell--chores.is-editing-chore .chore-checklist-editor__row select,
  .page-shell--chores.is-creating-chore .chore-checklist-editor__row textarea,
  .page-shell--chores.is-creating-chore .chore-checklist-editor__row input[type="time"],
  .page-shell--chores.is-creating-chore .chore-checklist-editor__row select {
    font-size: 16px;
  }
}

/* Unified app typography and spacing layer. Keep page identities, share one rhythm. */
html,
body {
  background: var(--app-bg);
  color: var(--app-ink);
  font-family: var(--app-font);
  font-size: 100%;
  line-height: var(--line-height-body);
}

body,
button,
input,
select,
textarea {
  font-family: var(--app-font);
}

html:has(.page-shell--dashboard),
body:has(.page-shell--dashboard) {
  --daily-bg: var(--app-bg);
  --daily-card: var(--app-surface);
  --daily-surface-soft: var(--app-surface-soft);
  --daily-ink: var(--app-ink);
  --daily-muted: var(--app-muted);
  --daily-muted-2: var(--app-muted-2);
  --daily-line: var(--app-line);
  --daily-hairline: var(--app-hairline);
  --daily-primary: var(--app-primary);
  --daily-primary-ink: var(--app-primary-ink);
  --daily-primary-soft: var(--app-primary-soft);
  --habits-surface: var(--app-surface);
  --habits-muted-2: var(--app-muted-2);
  --habits-primary: var(--app-primary);
}

html:has(.page-shell--chores),
body:has(.page-shell--chores),
html:has(.page-shell--tasks),
body:has(.page-shell--tasks),
html:has(.page-shell--habits),
body:has(.page-shell--habits),
html:has(.page-shell--dashboard.is-editing-task),
body:has(.page-shell--dashboard.is-editing-task) {
  --chores-bg: var(--app-bg);
  --chores-surface: var(--app-surface);
  --chores-surface-soft: var(--app-surface-soft);
  --chores-ink: var(--app-ink);
  --chores-muted: var(--app-muted);
  --chores-muted-2: var(--app-muted-2);
  --chores-line: var(--app-line);
  --chores-hairline: var(--app-hairline);
  --chores-primary: var(--app-primary);
  --chores-primary-ink: var(--app-primary-ink);
  --chores-primary-soft: var(--app-primary-soft);
  --chores-danger: var(--app-danger);
  --chores-rose-soft: var(--app-danger-soft);
  --chores-blue: var(--app-blue);
  --chores-blue-soft: var(--app-blue-soft);
  --tasks-bg: var(--app-bg);
  --tasks-surface: var(--app-surface);
  --tasks-surface-soft: var(--app-surface-soft);
  --tasks-ink: var(--app-ink);
  --tasks-muted: var(--app-muted);
  --tasks-muted-2: var(--app-muted-2);
  --tasks-line: var(--app-line);
  --tasks-hairline: var(--app-hairline);
  --tasks-primary: var(--app-primary);
  --tasks-primary-ink: var(--app-primary-ink);
  --tasks-primary-soft: var(--app-primary-soft);
  --tasks-danger: var(--app-danger);
  --tasks-rose-soft: var(--app-danger-soft);
  --habits-bg: var(--app-bg);
  --habits-surface: var(--app-surface);
  --habits-surface-soft: var(--app-surface-soft);
  --habits-ink: var(--app-ink);
  --habits-muted: var(--app-muted);
  --habits-muted-2: var(--app-muted-2);
  --habits-line: var(--app-line);
  --habits-hairline: var(--app-hairline);
  --habits-primary: var(--app-primary);
  --habits-primary-ink: var(--app-primary-ink);
  --habits-primary-soft: var(--app-primary-soft);
  --habits-danger: var(--app-danger);
  --habits-rose-soft: var(--app-danger-soft);
  font-family: var(--app-font);
}

.app-header__title,
.daily-dashboard__header h1,
.chores-app-header .app-header__title,
.tasks-app-header .app-header__title,
.habits-app-header .app-header__title,
.page-shell--chores.is-editing-chore .chore-edit-mobile-header h1,
.page-shell--chores.is-creating-chore .chore-create-mobile-header h1,
.page-shell--tasks.is-editing-task .task-edit-mobile-header h1,
.page-shell--tasks.is-creating-task .task-create-mobile-header h1{
  font-family: var(--app-display-font);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-title);
  letter-spacing: 0;
  line-height: 1;
}

@media (min-width: 761px) {
  body:has(.page-shell--dashboard) {
    --app-desktop-header-top: 2rem;
    --app-desktop-header-height: 4.75rem;
    --app-desktop-content-gutter: clamp(1.875rem, 3vw, 4rem);
  }

  .daily-dashboard__header h1,
  .chores-app-header .app-header__title,
  .tasks-app-header .app-header__title,
  .habits-app-header .app-header__title {
    font-size: var(--font-size-display-lg);
  }
}

.panel__title,
.section-title,
.daily-card__header h3,
.chores-list-heading .section-title,
.chore-edit-panel .panel-heading .section-title,
.task-edit-panel .panel-heading .section-title,
.task-create-page .panel-heading .section-title,
.habits-list-heading .section-title{
  font-family: var(--app-display-font);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-title);
  letter-spacing: 0;
  line-height: var(--line-height-tight);
}

.app-header__eyebrow,
.chores-app-header .app-header__eyebrow,
.task-section__header .section-title,
.chore-section .task-section__header .section-title,
.page-shell--tasks .task-section__header .section-title,
.habit-section .task-section__header .section-title,
.field label,
.field__label,
.chore-form .field label,
.chore-priority-options legend,
.page-shell--tasks .task-form .field label,
.page-shell--tasks .task-form .field__label{
  color: var(--app-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0;
  line-height: var(--line-height-tight);
  text-transform: none;
}

.chore-section--today .task-section__header .section-title {
  color: var(--chores-primary);
}

.habit-section--today .task-section__header .section-title {
  color: var(--habits-primary);
}

.habit-section--overdue .task-section__header .section-title {
  color: var(--habits-danger);
}

.calendar-section--today .task-section__header .section-title {
  color: var(--habits-primary);
}

.task-section--today .task-section__header .section-title {
  color: var(--tasks-primary);
}

.chore-section--today .task-section__count {
  color: var(--chores-primary);
}

.habit-section--today .task-section__count,
.calendar-section--today .task-section__count {
  color: var(--habits-primary);
}

.task-section--today .task-section__count {
  color: var(--tasks-primary);
}

.task-row__title,
.chore-row__copy .task-row__title,
.personal-task-row__copy .task-row__title,
.habit-row__copy strong,
.daily-task-row__copy strong,
.daily-habit-row__copy strong,
.daily-agenda__row span,
.quick-capture-options__item {
  color: var(--app-ink);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0;
  line-height: 1.2;
}

.task-row__meta,
.chore-row__copy .task-row__meta,
.personal-task-row__copy .task-row__meta,
.habit-row__copy em,
.daily-task-row__copy em,
.daily-habit-row__copy em,
.chore-checklist-preview__item,
.task-subtask-preview__item,
.daily-task-subtask-preview__item,
.daily-empty-row p,
.daily-preview-empty-row strong,
.empty-state__text,
.panel__hint {
  color: var(--app-muted);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-meta);
  line-height: var(--line-height-body);
}

.chores-summary__item strong,
.habits-summary__item strong,
.tasks-summary__item strong {
  font-size: 1.5rem;
  font-weight: var(--font-weight-title);
}

.daily-card,
.chores-list-panel,
.chore-edit-panel,
.chore-create-panel__body,
.tasks-list-panel,
.task-edit-panel,
.task-create-page,
.habits-list-panel,
.panel,
.quick-capture-dialog{
  border-color: var(--app-line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--app-surface) 88%, transparent);
}

.daily-card,
.chores-list-panel,
.chore-edit-panel,
.tasks-list-panel,
.task-edit-panel,
.task-create-page,
.habits-list-panel{
  padding: var(--space-5);
}

.daily-dashboard__grid,
.chores-layout,
.chores-workspace,
.tasks-layout,
.tasks-workspace,
.habits-layout,
.habits-workspace {
  gap: var(--space-5);
}

.daily-card__header,
.chores-list-heading,
.chore-edit-panel > .panel-heading,
.tasks-list-heading,
.task-edit-panel > .panel-heading,
.task-create-page > .panel-heading,
.habits-list-heading{
  margin-bottom: var(--space-4);
  gap: var(--space-4);
}

.daily-task-row,
.daily-habit-row,
.daily-inbox-row,
.chore-row.chore-item,
.personal-task-row,
.habit-row {
  gap: var(--space-3);
  padding: var(--space-4);
  border-color: var(--app-hairline);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--app-surface) 86%, transparent);
}

.daily-habit-list,
.daily-task-list {
  gap: 0.16rem;
}

.daily-habit-row,
.daily-task-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  min-height: 2.35rem;
  padding: 0.12rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.daily-habit-toggle,
.daily-task-toggle {
  margin-top: 0;
}

.daily-task-due {
  min-height: 1.65rem;
  padding-inline: 0.62rem;
}

.app-button,
.menu__summary,
.daily-outline-action,
.daily-plain-action,
.desktop-sidebar__primary,
.desktop-sidebar__secondary,
.chores-filter__link,
.tasks-filter__link,
.habits-filter__link,
.shopping-filter__link {
  min-height: 2.7rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0;
}

.dashboard-add-button,
.daily-dashboard__settings,
.chore-create-panel__summary,
.page-shell--tasks .task-create-panel__summary{
  width: 2.125rem;
  min-width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-md);
  font-size: 1.45rem;
  font-weight: 400;
}

.dashboard-add-button,
.shopping-settings-button,
.shopping-add-button,
.chore-create-panel__summary,
.page-shell--tasks .task-create-panel__summary{
  display: inline-grid;
  place-items: center;
  padding: 0;
  text-align: center;
  line-height: 1;
}

.dashboard-add-button,
.dashboard-add-button > span,
.shopping-add-button > span,
.chore-create-panel__summary > span,
.page-shell--tasks .task-create-panel__summary > span{
  line-height: 1;
}

.shopping-settings-button svg {
  display: block;
}

.dashboard-add-button,
.shopping-add-button,
.chore-create-panel__summary,
.page-shell--tasks .task-create-panel__summary{
  position: relative;
  color: transparent;
  font-size: 0;
}

.dashboard-add-button > span,
.shopping-add-button > span,
.chore-create-panel__summary > span,
.page-shell--tasks .task-create-panel__summary > span{
  color: transparent;
  font-size: 0;
}

.dashboard-add-button::before,
.dashboard-add-button::after,
.shopping-add-button::before,
.shopping-add-button::after,
.chore-create-panel__summary::before,
.chore-create-panel__summary::after,
.page-shell--tasks .task-create-panel__summary::before,
.page-shell--tasks .task-create-panel__summary::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.95rem;
  height: 0.16rem;
  border-radius: 999px;
  background: #fffdf8;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.dashboard-add-button::after,
.shopping-add-button::after,
.chore-create-panel__summary::after,
.page-shell--tasks .task-create-panel__summary::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

.shopping-settings-button,
.shopping-settings-button svg,
.habit-back-link,
.task-back-link,
.chore-back-link,
.shopping-back-link,
.family-back-link {
  line-height: 0;
}

.shopping-settings-button svg {
  margin: auto;
}

.habit-back-link,
.task-back-link,
.chore-back-link,
.shopping-back-link,
.family-back-link {
  display: grid;
  place-items: center;
}

.habit-back-link > span,
.task-back-link > span,
.chore-back-link > span,
.shopping-back-link > span,
.family-back-link > span {
  display: block;
  line-height: 1;
}

.chores-filter.segmented,
.tasks-filter.segmented,
.habits-filter.segmented,
.shopping-filter.segmented {
  gap: var(--space-1);
  padding: 0.18rem;
  border-color: var(--app-line);
  border-radius: var(--radius-md);
  background: var(--app-surface-soft);
}

.chores-filter__link.is-selected,
.tasks-filter__link.is-selected,
.habits-filter__link.is-selected,
.shopping-filter__link.is-selected {
  background: var(--app-surface);
  color: var(--app-ink);
}

.chores-filter__link,
.tasks-filter__link,
.habits-filter__link,
.shopping-filter__link {
  min-height: 1.55rem;
  padding: 0 0.45rem;
  touch-action: manipulation;
}

.chores-filter__link,
.tasks-filter__link,
.habits-filter__link,
.shopping-filter__link {
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-meta);
  line-height: var(--line-height-body);
}

.filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.12rem;
  height: 1.12rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--app-primary-soft);
  color: var(--app-primary-ink);
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
}

.chore-toggle input,
.personal-task-toggle input,
.habit-toggle input,
.mini-check {
  border-color: var(--app-muted-2);
  background: var(--app-surface);
}

.chore-toggle input:checked,
.personal-task-toggle input:checked,
.habit-toggle input:checked {
  border-color: var(--app-primary);
  background: radial-gradient(circle at center, var(--app-primary) 0 5px, transparent 6px);
}

.chore-form .field input,
.chore-form .field select,
.chore-form .field textarea,
.page-shell--tasks .task-form .field input,
.page-shell--tasks .task-form .field select,
.page-shell--tasks .task-form .field textarea,
.field input,
.field select,
.field textarea{
  border-color: var(--app-line);
  border-radius: var(--radius-md);
  background: var(--app-surface);
  color: var(--app-ink);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
}

.chore-form .field input,
.chore-form .field select,
.page-shell--tasks .task-form .field input,
.page-shell--tasks .task-form .field select{
  height: var(--control-height);
  padding-inline: 0.75rem;
}

.chore-form .field textarea,
.page-shell--tasks .task-form .field textarea,
.field textarea {
  padding: 0.75rem;
}

.chore-form .form-actions .app-button,
.chore-delete-button,
.page-shell--tasks .task-form .form-actions .app-button,
.page-shell--tasks .task-delete-button{
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-strong);
}

.chore-form .form-actions .app-button--primary,
.page-shell--tasks .task-form .form-actions .app-button--primary,
.app-button--primary{
  border-color: color-mix(in srgb, var(--app-primary) 42%, var(--app-line));
  background: var(--app-primary);
  color: #fffdf8;
}

.bottom-navigation {
  border-color: var(--app-line);
  border-radius: 0;
  background: color-mix(in srgb, var(--app-surface) 92%, white);
}

.bottom-navigation__link {
  border-radius: var(--radius-lg);
  color: var(--app-muted);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-strong);
}

.bottom-navigation__link.is-active,
.bottom-navigation__link.is-active:hover {
  background: var(--app-primary-soft);
  color: var(--app-primary-ink);
}

@media (max-width: 720px) {
  .daily-card,
.chores-list-panel,
.chore-edit-panel,
.tasks-list-panel,
.task-edit-panel,
.task-create-page,
.habits-list-panel{
    padding: var(--space-4);
  }

  .chore-row.chore-item,
  .personal-task-row,
  .habit-row {
    padding: var(--space-3);
  }

  .chore-row__copy .task-row__title,
  .personal-task-row__copy .task-row__title,
  .habit-row__copy strong {
    font-size: var(--font-size-lg);
  }

  .chore-form .field input,
.chore-form .field select,
.page-shell--tasks .task-form .field input,
.page-shell--tasks .task-form .field select{
    height: var(--control-height-mobile);
    font-size: 16px;
  }
}

body:has(.page-shell--shopping) {
  background: #fbf8f2;
  color: var(--app-ink);
}

.page-shell--shopping {
  width: min(760px, calc(100% - 1rem));
  padding: 2.8rem 0 6rem;
}

.shopping-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.shopping-hero__title {
  margin: 0;
  color: #24211d;
  font-family: var(--app-display-font);
  font-size: clamp(3.2rem, 10vw, 4.3rem);
  font-weight: 850;
  line-height: 0.95;
  letter-spacing: 0;
}

.shopping-hero__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.shopping-reorder-button,
.shopping-add-button {
  border: 2px solid var(--app-line);
  background: #fffdf8;
  color: var(--app-ink);
  font-weight: 800;
  cursor: pointer;
}

.shopping-reorder-button {
  min-height: 3.35rem;
  padding: 0 1.05rem;
  border-radius: 12px;
  font-size: 1.15rem;
}

.shopping-reorder-button:focus-visible {
  outline: 3px solid #bdb4a8;
  outline-offset: 3px;
}

.shopping-add-button {
  display: inline-grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border: 0;
  border-radius: 16px;
  background: #789287;
  color: #fffdf8;
  font-size: 2.4rem;
  line-height: 1;
}

.shopping-layout,
.shopping-list {
  display: grid;
  gap: 1.25rem;
}

.shopping-add-panel,
.shopping-store-group,
.shopping-edit-panel,
.shopping-stores-panel {
  border: 2px solid #ded3c4;
  border-radius: 22px;
  background: color-mix(in srgb, #fffdf8 90%, white);
}

.shopping-add-panel {
  display: grid;
  gap: 1.1rem;
  padding: 1.4rem;
}

.shopping-add-panel[hidden] {
  display: none;
}

.shopping-card-heading .section-title,
.shopping-store-group .section-title,
.shopping-stores-panel .section-title,
.shopping-edit-panel .section-title {
  margin: 0;
  padding: 0;
  color: var(--app-ink);
  font-size: 1.75rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
}

.shopping-empty-copy {
  margin: 0;
  color: var(--app-muted);
  font-size: 1.35rem;
  font-weight: 650;
}

.shopping-empty-capture-button {
  width: 100%;
  min-height: 3.55rem;
  border: 2px solid var(--app-line);
  border-radius: 12px;
  background: #fffdf8;
  color: var(--app-muted);
  font-size: 1.35rem;
  font-weight: 850;
  cursor: pointer;
}

.shopping-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.4fr) auto;
  gap: 0.65rem;
  align-items: center;
}

.page-shell--shopping .field input,
.page-shell--shopping .field select {
  min-height: 3.25rem;
  border: 2px solid var(--app-line);
  border-radius: 12px;
  background: #fffdf8;
  color: var(--app-ink);
  font-size: 1rem;
  font-weight: 650;
}

.shopping-capture-submit {
  min-height: 3.25rem;
  border-radius: 12px;
  font-weight: 850;
}

.shopping-reorder-hint {
  margin: 0 0 -0.3rem;
  color: var(--app-muted);
  font-size: 1.25rem;
  font-weight: 800;
}

.shopping-store-group {
  display: grid;
  gap: 1rem;
  padding: 1.35rem;
}

.shopping-store-group.is-dragging {
  opacity: 0.45;
}

.shopping-store-group.is-drop-target,
.shopping-store-group.is-reorder-target {
  border-color: #789287;
  background: #f4fbf7;
}

.shopping-store-group__header {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.shopping-store-group__chevron {
  width: 0.75rem;
  height: 0.75rem;
  border-top: 4px solid #9a948d;
  border-left: 4px solid #9a948d;
  transform: rotate(45deg);
  margin-top: 0.35rem;
}

.shopping-store-group__count,
.shopping-store-group__drag-label {
  justify-self: end;
  color: #567266;
  font-size: 1rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0;
}

.shopping-store-group__drag-label {
  cursor: grab;
  touch-action: none;
}

.shopping-item-list {
  display: grid;
  gap: 0;
}

.shopping-item-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 4.35rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--app-hairline);
  background: transparent;
}

.shopping-item-row:first-child {
  border-top: 0;
}

.shopping-item-row[draggable="true"] {
  cursor: grab;
}

.shopping-item-row.is-dragging {
  opacity: 0.45;
}

.shopping-item-row__drag-handle {
  display: none;
}

.shopping-item-toggle {
  display: inline-grid;
  place-items: center;
  margin-right: 1rem;
}

.shopping-item-toggle input {
  width: 2.15rem;
  height: 2.15rem;
  -webkit-appearance: none;
  appearance: none;
  border: 3px solid #9a948d;
  border-radius: 999px;
  background: #fffdf8;
  cursor: pointer;
  position: relative;
}

.shopping-item-toggle input:checked {
  border-color: #789287;
  background: radial-gradient(circle at center, #789287 0 0.48rem, transparent 0.52rem);
}

.shopping-item-toggle input:checked::after {
  content: none;
}

.shopping-item-row__content-link {
  min-width: 0;
  text-decoration: none;
}

.shopping-item-row__title {
  margin: 0;
  color: var(--app-ink);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
}

.shopping-item-row.is-completed .shopping-item-row__title {
  color: var(--app-muted);
  text-decoration: line-through;
}

.shopping-item-row__delete-form {
  margin: 0;
}

.shopping-item-row__delete-button {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9d5a4f;
  font-size: 1.5rem;
  font-weight: 850;
  cursor: pointer;
}

.page-shell--shopping:not(.page-shell--edit-workbench) .shopping-item-row__delete-form {
  display: none;
}

.shopping-completed-group {
  border-top: 1px solid var(--app-hairline);
}

.shopping-completed-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0 0;
  color: var(--app-muted);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.shopping-completed-group summary::-webkit-details-marker {
  display: none;
}

.shopping-stores-panel,
.shopping-edit-panel {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
}

.shopping-store-settings-row {
  border-color: var(--app-line);
  border-radius: 14px;
  background: #fffdf8;
}

body:has(.page-shell--shopping) .bottom-navigation {
  background: #fffdf8;
  border-color: #ded3c4;
}

body:has(.page-shell--shopping) .bottom-navigation__link.is-active,
body:has(.page-shell--shopping) .bottom-navigation__link.is-active:hover {
  border: 2px solid #ded3c4;
  background: #fffdf8;
  color: var(--app-ink);
}

@media (max-width: 720px) {
  .page-shell--shopping {
    width: min(100% - 2.6rem, 100%);
    padding-top: 3.2rem;
  }

  .shopping-hero {
    gap: 0.75rem;
  }

  .shopping-hero__title {
    font-size: 2.65rem;
  }

  .shopping-hero__actions {
    gap: 0.55rem;
  }

  .shopping-reorder-button {
    min-height: 3rem;
    padding-inline: 0.75rem;
    font-size: 1.05rem;
  }

  .shopping-add-button {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 14px;
  }

  .shopping-add-form {
    grid-template-columns: 1fr;
  }

  .shopping-add-panel,
  .shopping-store-group,
  .shopping-edit-panel,
  .shopping-stores-panel {
    border-radius: 22px;
    padding: 1.25rem;
  }

  .shopping-store-group .section-title,
  .shopping-card-heading .section-title {
    font-size: 1.75rem;
  }

  .shopping-empty-copy,
  .shopping-item-row__title {
    font-size: 1.25rem;
  }
}

html:has(.page-shell--shopping),
body:has(.page-shell--shopping) {
  --shopping-bg: var(--chores-bg, #fbf8f2);
  --shopping-surface: var(--chores-surface, #fffdf9);
  --shopping-surface-soft: var(--chores-surface-soft, #f4efe8);
  --shopping-ink: var(--chores-ink, #24211d);
  --shopping-muted: var(--chores-muted, #70685e);
  --shopping-muted-2: var(--chores-muted-2, #8c8378);
  --shopping-line: var(--chores-line, #ded3c4);
  --shopping-hairline: var(--chores-hairline, #ede4d9);
  --shopping-primary: var(--chores-primary, #2d786f);
  --shopping-primary-ink: var(--chores-primary-ink, #1f665f);
  --shopping-primary-soft: var(--chores-primary-soft, #ddf0eb);
  --shopping-danger: var(--chores-danger, #94473e);
  background: var(--shopping-bg);
  color: var(--shopping-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

.page-shell--shopping {
  align-content: start;
  width: min(100%, 100%);
  max-width: none;
  min-height: 100dvh;
  padding: 0 1.25rem 7rem;
  color: var(--shopping-ink);
}

.app-header.shopping-app-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  max-width: none;
  min-height: 4.7rem;
  padding: 1.25rem 0 0.85rem;
  border-radius: 0;
  background: transparent;
  color: var(--shopping-ink);
}

.shopping-app-header .app-header__copy {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.shopping-app-header .app-header__title {
  color: var(--shopping-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.95rem, 8vw, 3.25rem);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1;
}

.shopping-settings-button,
.shopping-add-button {
  display: grid;
  place-items: center;
  width: 2.125rem;
  min-width: 2.125rem;
  height: 2.125rem;
  border: 1px solid color-mix(in srgb, var(--shopping-primary) 42%, var(--shopping-line));
  border-radius: 8px;
  background: var(--shopping-primary);
  color: #fffdf8;
  cursor: pointer;
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 1;
}

.shopping-settings-button {
  background: var(--shopping-surface);
  color: var(--shopping-primary-ink);
}

.shopping-add-button:disabled,
.shopping-add-button--disabled {
  border-color: var(--shopping-line);
  background: color-mix(in srgb, var(--shopping-primary-soft) 74%, var(--shopping-surface));
  color: color-mix(in srgb, var(--shopping-primary-ink) 52%, var(--shopping-muted));
  cursor: not-allowed;
  opacity: 0.72;
}

.shopping-add-button:disabled::before,
.shopping-add-button:disabled::after,
.shopping-add-button--disabled::before,
.shopping-add-button--disabled::after {
  background: color-mix(in srgb, var(--shopping-primary-ink) 54%, var(--shopping-muted));
}

.shopping-settings-button svg {
  width: 1.12rem;
  height: 1.12rem;
}

.shopping-back-link {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid var(--shopping-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--shopping-surface) 86%, transparent);
  color: var(--shopping-muted);
  font-size: 1.45rem;
  line-height: 1;
  text-decoration: none;
}

.page-shell--chores .chores-header-back-link,
.page-shell--family .family-header-back-link,
.page-shell--shopping:not(.is-shopping-settings) .shopping-header-back-link {
  display: none;
}

.shopping-layout,
.shopping-workspace,
.shopping-list {
  display: grid;
  gap: 1.125rem;
}

.shopping-primary-column {
  display: grid;
  gap: 1.125rem;
  align-content: start;
}

.shopping-add-panel,
.shopping-list-panel,
.shopping-edit-panel,
.shopping-stores-panel {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
  min-height: 0;
  padding: 1.125rem;
  border: 1px solid var(--shopping-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--shopping-surface) 88%, transparent);
}

.shopping-add-panel[hidden] {
  display: none;
}

.shopping-list-heading,
.shopping-edit-panel > .panel-heading,
.shopping-stores-panel > .panel-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  margin: 0 0 0.5rem;
}

.shopping-list-heading .section-title,
.shopping-edit-panel .panel-heading .section-title,
.shopping-stores-panel .panel-heading .section-title,
.shopping-add-panel .panel-heading .section-title {
  margin: 0;
  padding: 0;
  color: var(--shopping-ink);
  font-size: 1.45rem;
  font-weight: 780;
  line-height: 1.1;
  letter-spacing: 0;
}

.shopping-reorder-hint,
.shopping-empty-copy {
  margin: 0;
  color: var(--shopping-muted);
  font-size: 0.86rem;
  font-weight: 680;
  line-height: 1.35;
}

.shopping-add-form,
.shopping-store-create-form,
.shopping-item-edit-form {
  display: grid;
  gap: 0.9rem;
}

.shopping-add-form {
  grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 0.55fr) auto;
  align-items: end;
}

.shopping-add-form__actions,
.shopping-store-create-form .form-actions {
  margin: 0;
}

.page-shell--shopping .field {
  display: grid;
  gap: 0.45rem;
}

.page-shell--shopping .field label,
.page-shell--shopping .field__label {
  margin: 0;
  color: var(--shopping-muted);
  font-size: 0.78rem;
  font-weight: 780;
}

.page-shell--shopping .field input,
.page-shell--shopping .field select {
  inline-size: 100%;
  width: 100%;
  min-width: 0;
  height: 2.7rem;
  min-height: 0;
  padding: 0 0.75rem;
  border: 1px solid var(--shopping-line);
  border-radius: 8px;
  background: var(--shopping-surface);
  color: var(--shopping-ink);
  font-size: 0.96rem;
  font-weight: 650;
}

.shopping-capture-submit,
.shopping-empty-capture-button {
  min-height: 2.7rem;
  border-radius: 8px;
  font-weight: 800;
}

.shopping-empty-capture-button {
  border: 1px solid color-mix(in srgb, var(--shopping-primary) 42%, var(--shopping-line));
  background: var(--shopping-primary);
  color: #fffdf8;
  font-size: 0.96rem;
}

.shopping-store-group {
  display: grid;
  gap: 0.65rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.shopping-store-group + .shopping-store-group {
  margin-top: 0.9rem;
}

.shopping-store-group.is-dragging {
  opacity: 0.45;
}

.shopping-store-group.is-drop-target,
.shopping-store-group.is-reorder-target {
  border-color: var(--shopping-primary);
  background: color-mix(in srgb, var(--shopping-primary-soft) 60%, transparent);
}

.shopping-store-group__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.6rem 0 0.2rem;
}

.shopping-store-group__header::before {
  content: "";
  width: 0.4rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--shopping-primary);
}

.shopping-store-group__header .section-title {
  margin: 0;
  color: var(--shopping-primary-ink);
  font-size: 0.9rem;
  font-weight: 820;
}

.shopping-store-group__drag-label,
.shopping-store-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  min-height: 1.85rem;
  padding: 0 0.72rem;
  border-radius: 999px;
  background: var(--shopping-primary-soft);
  color: var(--shopping-primary-ink);
  font-size: 0.72rem;
  font-weight: 740;
  text-transform: none;
  white-space: nowrap;
}

.shopping-store-group__drag-label {
  cursor: grab;
  touch-action: none;
}

.shopping-item-list {
  display: grid;
  gap: 0.65rem;
}

.shopping-item-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.6rem;
  min-height: 0;
  padding: 0.8rem;
  border: 1px solid var(--shopping-hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--shopping-surface) 86%, transparent);
  overflow: hidden;
}

.shopping-item-row:first-child {
  border-top: 1px solid var(--shopping-hairline);
}

.shopping-item-toggle {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.2rem 0 0;
}

.shopping-item-toggle input {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid var(--shopping-muted-2);
  border-radius: 999px;
  background: var(--shopping-surface);
}

.shopping-item-toggle input:checked {
  border-color: var(--shopping-primary);
  background: radial-gradient(circle at center, var(--shopping-primary) 0 5px, transparent 6px);
}

.shopping-item-toggle input:checked::after {
  content: none;
}

.shopping-item-row__content-link {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.shopping-item-row__title {
  margin: 0;
  color: var(--shopping-ink);
  font-size: 1rem;
  font-weight: 790;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.shopping-item-row.is-completed .shopping-item-row__title {
  color: var(--shopping-muted);
  text-decoration: line-through;
}

.shopping-item-row__url {
  grid-column: 2 / -1;
  display: block;
  min-width: 0;
  margin-top: -0.15rem;
  color: var(--shopping-primary-ink);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.shopping-item-row__delete-form {
  display: block;
  margin: 0;
}

.shopping-item-row__delete-button,
.shopping-delete-icon-button {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid color-mix(in srgb, var(--shopping-danger) 30%, var(--shopping-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--shopping-danger) 8%, var(--shopping-surface));
  color: var(--shopping-danger);
  font-size: 1.3rem;
  font-weight: 800;
  cursor: pointer;
}

.shopping-delete-icon-form {
  margin: 0;
}

.shopping-delete-icon-button svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.15;
}

.shopping-completed-group {
  border-top: 0;
}

.shopping-completed-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0 0;
  color: var(--shopping-muted);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 800;
  list-style: none;
}

.shopping-completed-group summary::-webkit-details-marker {
  display: none;
}

.shopping-store-settings-list {
  gap: 0.7rem;
}

.shopping-store-settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
  padding: 0.8rem;
  border: 1px solid var(--shopping-hairline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--shopping-surface) 86%, transparent);
}

.shopping-store-settings-row .settings-row__form {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto;
  gap: 0.65rem;
  align-items: end;
  min-width: 0;
}

.shopping-store-settings-row .settings-row__actions {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}

.shopping-empty-state {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  min-height: 12rem;
  padding: 1rem;
  border: 1px solid var(--shopping-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--shopping-surface) 88%, transparent);
}

.shopping-empty-state .empty-state__mark {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 0.75rem;
  background: var(--shopping-primary-soft);
  color: var(--shopping-primary-ink);
}

.shopping-empty-state .empty-state__mark svg {
  width: 1.12rem;
  height: 1.12rem;
}

.shopping-empty-state h2,
.shopping-empty-state p {
  margin: 0;
}

.shopping-empty-state h2 {
  color: var(--shopping-ink);
  font-size: 1rem;
  font-weight: 790;
}

.shopping-empty-state p {
  color: var(--shopping-muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.shopping-create-mobile-header,
.shopping-edit-mobile-header,
.shopping-settings-mobile-header {
  display: none;
}

body:has(.page-shell--shopping) .desktop-sidebar {
  border-color: var(--shopping-line);
  background: color-mix(in srgb, var(--shopping-surface) 62%, transparent);
  color: var(--shopping-ink);
}

body:has(.page-shell--shopping) .desktop-sidebar__brand strong {
  color: var(--shopping-ink);
  letter-spacing: 0;
}

body:has(.page-shell--shopping) .desktop-sidebar__brand span,
body:has(.page-shell--shopping) .desktop-sidebar__link,
body:has(.page-shell--shopping) .desktop-sidebar__actions a {
  color: var(--shopping-muted);
}

body:has(.page-shell--shopping) .desktop-sidebar__link.is-active {
  border: 1px solid color-mix(in srgb, var(--shopping-primary) 42%, var(--shopping-line));
  background: var(--shopping-primary-soft);
  color: var(--shopping-primary-ink);
}

body:has(.page-shell--shopping) .bottom-navigation {
  border-radius: 0;
  border-color: var(--shopping-line);
  background: color-mix(in srgb, var(--shopping-surface) 74%, var(--shopping-bg));
}

body:has(.page-shell--shopping) .bottom-navigation__link {
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--shopping-muted);
}

body:has(.page-shell--shopping) .bottom-navigation__link.is-active,
body:has(.page-shell--shopping) .bottom-navigation__link.is-active:hover {
  border-color: transparent;
  background: var(--shopping-primary-soft);
  color: var(--shopping-primary-ink);
}

@media (min-width: 761px) {
  body:has(.page-shell--shopping) .desktop-sidebar {
    width: 14.75rem;
    padding: 2.125rem 1.375rem;
  }

  body:has(.page-shell--shopping) .desktop-sidebar__link {
    min-height: 2.875rem;
    border: 1px solid transparent;
    border-radius: 8px;
  }

  .page-shell--shopping {
    margin-left: 14.75rem;
    padding: 2.25rem 2.25rem 3rem;
  }

  .app-header.shopping-app-header {
    padding-top: 0;
  }

  .shopping-app-header .app-header__title {
    font-size: 3.25rem;
  }

  .shopping-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .shopping-edit-panel,
  .shopping-stores-panel {
    position: sticky;
    top: 2rem;
  }
}

@media (max-width: 900px) and (min-width: 761px) {
  body:has(.page-shell--shopping) .desktop-sidebar {
    width: 4.875rem;
    padding: 1.875rem 0.875rem;
  }

  body:has(.page-shell--shopping) .desktop-sidebar__brand,
  body:has(.page-shell--shopping) .desktop-sidebar__link span:not(.desktop-sidebar__icon),
  body:has(.page-shell--shopping) .desktop-sidebar__link b,
  body:has(.page-shell--shopping) .desktop-sidebar__actions {
    display: none;
  }

  body:has(.page-shell--shopping) .desktop-sidebar__link {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 3.125rem;
    padding: 0;
  }

  .page-shell--shopping {
    margin-left: 4.875rem;
    padding: 2.125rem 1.875rem 2rem;
  }

  .shopping-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .page-shell--shopping {
    width: min(100%, 100%);
    padding: 0 1rem 6.2rem;
  }

  .shopping-app-header .app-header__title {
    font-size: 1.95rem;
  }

  .shopping-add-panel,
  .shopping-list-panel,
  .shopping-edit-panel,
  .shopping-stores-panel {
    padding: 0.85rem;
  }

  .shopping-add-form,
  .shopping-store-create-form,
  .shopping-store-settings-row,
  .shopping-store-settings-row .settings-row__form {
    grid-template-columns: 1fr;
  }

  .shopping-store-settings-row .settings-row__actions {
    justify-content: flex-start;
  }

  .shopping-item-row {
    padding: 0.65rem;
  }

  .shopping-item-row__title {
    font-size: 1.06rem;
  }

  .page-shell--shopping.is-editing-shopping-item {
    padding-bottom: calc(6.75rem + env(safe-area-inset-bottom));
  }

  .page-shell--shopping:not(.is-editing-shopping-item) .shopping-edit-panel {
    display: none;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-app-header,
  .page-shell--shopping.is-editing-shopping-item .shopping-quick-add,
  .page-shell--shopping.is-editing-shopping-item .shopping-add-panel,
  .page-shell--shopping.is-editing-shopping-item .shopping-list-panel,
  .page-shell--shopping.is-editing-shopping-item .shopping-stores-panel {
    display: none;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-workspace {
    display: block;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-edit-panel {
    min-height: calc(100dvh - 1rem);
    padding: 1.25rem 0.75rem calc(6.75rem + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-edit-mobile-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-edit-mobile-header h1 {
    margin: 0;
    color: var(--shopping-ink);
    font-size: 1.65rem;
    font-weight: 780;
    line-height: 1;
  }

  .shopping-back-link {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--shopping-line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--shopping-surface) 86%, transparent);
    color: var(--shopping-muted);
    font-size: 1.85rem;
    line-height: 1;
    text-decoration: none;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-edit-panel > .panel-heading {
    display: none;
  }

  .page-shell--shopping.is-editing-shopping-item .task-form__grid--shopping-item {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .field input,
  .page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .field select,
  .page-shell--shopping .field input,
  .page-shell--shopping .field select {
    height: 3.25rem;
    font-size: 16px;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .form-actions {
    display: grid;
    justify-content: stretch;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .form-actions--edit-submit {
    position: fixed;
    right: 1.5rem;
    bottom: calc(1.75rem + env(safe-area-inset-bottom));
    left: 1.5rem;
    z-index: 30;
    margin: 0;
    pointer-events: none;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .form-actions .app-button--primary {
    width: 100%;
    min-height: 3.45rem;
    font-size: 1rem;
    pointer-events: auto;
  }

  body:has(.page-shell--shopping.is-editing-shopping-item) .bottom-navigation {
    display: none;
  }

  body:has(.page-shell--shopping) .bottom-navigation {
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    width: 100%;
    min-height: calc(5.25rem + env(safe-area-inset-bottom));
    padding: 0.7rem 1.4rem max(0.7rem, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--shopping-line);
    border-radius: 0;
    background: color-mix(in srgb, var(--shopping-surface) 92%, white);
    transform: none;
  }

  body:has(.page-shell--shopping) .bottom-navigation__link {
    flex: 1 1 0;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.18rem;
    min-width: 0;
    min-height: 4.45rem;
    padding: 0.48rem 0.2rem;
    border-radius: 11px;
    background: transparent;
    color: var(--shopping-muted);
    font-size: 0.86rem;
    font-weight: 760;
  }

  body:has(.page-shell--shopping) .bottom-navigation__link::before {
    content: none;
    display: none;
  }

  body:has(.page-shell--shopping) .bottom-navigation__link.is-active {
    background: var(--shopping-primary-soft);
    color: var(--shopping-primary-ink);
  }

  body:has(.page-shell--shopping) .bottom-navigation__icon,
  body:has(.page-shell--shopping) .bottom-navigation__icon svg {
    justify-self: center;
  }
}

.page-shell--shopping {
  gap: 1rem;
}

.shopping-app-header .app-header__title,
.shopping-create-mobile-header h1,
.shopping-edit-mobile-header h1,
.shopping-settings-mobile-header h1 {
  font-family: var(--app-display-font, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif);
}

.shopping-settings-button,
.shopping-add-button {
  text-decoration: none;
}

.shopping-workspace,
.shopping-list {
  display: grid;
  gap: 0.95rem;
}

.shopping-create-page,
.shopping-edit-panel,
.shopping-settings-page,
.shopping-store-group,
.shopping-empty-state {
  border-color: var(--app-line, var(--shopping-line));
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--app-surface, var(--shopping-surface)) 88%, transparent);
}

.shopping-store-group {
  gap: 0.8rem;
  padding: 0.95rem;
}

.shopping-store-group + .shopping-store-group {
  margin-top: 0;
}

.shopping-store-group__header {
  margin: 0;
}

.shopping-store-group__header::before {
  width: 0.32rem;
  height: 2rem;
  background: var(--shopping-primary);
}

.shopping-store-group__header .section-title {
  color: var(--shopping-primary-ink);
  font-size: 1.05rem;
  font-weight: var(--font-weight-title, 760);
  line-height: 1.15;
}

.shopping-store-group__count {
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 0.68rem;
  border-radius: 999px;
  background: var(--shopping-primary-soft);
  color: var(--shopping-primary-ink);
  font-size: 0.78rem;
  font-weight: var(--font-weight-title, 760);
}

.shopping-quick-add {
  padding: 0.85rem;
}

.shopping-quick-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 0.48fr) auto;
  gap: 0.6rem;
  align-items: center;
}

.shopping-quick-add-form__item,
.shopping-quick-add-form__store {
  gap: 0;
}

.shopping-quick-add-form .field input,
.shopping-quick-add-form .field select {
  height: 2.8rem;
  min-height: 0;
}

.shopping-quick-add-form__item input {
  padding-left: 0.95rem;
}

.shopping-quick-add-form__store select {
  padding-inline: 0.55rem 1.6rem;
  color: var(--shopping-primary-ink);
  font-size: 0.86rem;
  font-weight: var(--font-weight-title, 760);
}

.shopping-quick-add-form__submit {
  min-width: 2.45rem;
  min-height: 2.8rem;
  padding: 0 0.95rem;
  border-radius: var(--radius-md, 8px);
  font-size: 0.9rem;
  font-weight: var(--font-weight-title, 760);
  white-space: nowrap;
}

.shopping-item-row {
  min-height: 3.7rem;
  padding: 0.78rem 0.8rem;
  border-color: var(--app-line, var(--shopping-hairline));
  background: var(--app-surface, var(--shopping-surface));
}

.shopping-item-row__title {
  font-size: 1.02rem;
  font-weight: var(--font-weight-title, 760);
  letter-spacing: 0;
}

.shopping-completed-group summary {
  padding-top: 0.35rem;
  color: var(--app-muted, var(--shopping-muted));
  font-weight: var(--font-weight-meta, 680);
}

.shopping-create-page .panel-heading .section-title,
.shopping-settings-page .panel-heading .section-title,
.shopping-edit-panel .panel-heading .section-title {
  font-size: 1.45rem;
  font-weight: var(--font-weight-title, 760);
  letter-spacing: 0;
}

.shopping-create-page .shopping-add-form {
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.shopping-create-page .shopping-add-form__actions {
  display: flex;
  justify-content: flex-start;
  gap: 0.65rem;
}

.shopping-settings-section {
  display: grid;
  gap: 0.75rem;
}

.shopping-settings-section + .shopping-settings-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--app-line, var(--shopping-line));
}

.shopping-settings-section h3,
.shopping-settings-section p {
  margin: 0;
}

.shopping-settings-section h3 {
  color: var(--shopping-ink);
  font-size: 1rem;
  font-weight: var(--font-weight-title, 760);
}

.shopping-settings-section p {
  color: var(--app-muted, var(--shopping-muted));
  font-size: 0.86rem;
  font-weight: var(--font-weight-meta, 640);
  line-height: 1.35;
}

.shopping-settings-section p span {
  display: block;
  margin-top: 0.25rem;
  color: var(--shopping-ink);
  font-weight: 700;
}

.shopping-settings-store-list {
  display: grid;
  gap: 0.55rem;
}

.shopping-settings-store-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.4rem;
  padding: 0.65rem;
  border: 1px solid var(--app-line, var(--shopping-hairline));
  border-radius: var(--radius-md, 8px);
  background: var(--app-surface, var(--shopping-surface));
}

.shopping-settings-store-row strong {
  color: var(--shopping-ink);
  font-size: 0.96rem;
  font-weight: 640;
}

.shopping-settings-store-row__actions {
  display: inline-flex;
  gap: 0.45rem;
}

.shopping-settings-store-row__drag-handle,
.shopping-settings-store-row__drag-handle-placeholder {
  width: 2rem;
  min-width: 2rem;
  height: 2.5rem;
}

.shopping-settings-store-row__drag-handle {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--app-muted, var(--shopping-muted));
  cursor: grab;
  font-size: 1.25rem;
  line-height: 1;
  touch-action: none;
}

.shopping-settings-store-row__drag-handle:hover,
.shopping-settings-store-row__drag-handle:focus-visible {
  background: color-mix(in srgb, var(--shopping-primary-soft) 72%, transparent);
  color: var(--shopping-primary-ink);
}

.shopping-settings-store-row.is-dragging {
  z-index: 2;
  border-color: var(--shopping-primary);
  background: color-mix(in srgb, var(--shopping-primary-soft) 55%, var(--shopping-surface));
  box-shadow: 0 0.35rem 1rem rgb(28 66 58 / 16%);
  opacity: 0.72;
  pointer-events: none;
}

.shopping-settings-section--danger .button_to {
  justify-self: end;
}

.shopping-clear-completed-button {
  justify-self: end;
  border-color: color-mix(in srgb, var(--shopping-danger) 34%, var(--shopping-line));
  background: color-mix(in srgb, var(--shopping-danger) 9%, var(--shopping-surface));
  color: var(--shopping-danger);
}

.shopping-stores-panel,
.shopping-add-panel,
.shopping-reorder-hint,
.shopping-list-heading[hidden] {
  display: none;
}

.shopping-list-panel {
  display: grid;
  gap: 0.95rem;
  min-width: 0;
  min-height: 0;
  padding: 1.125rem;
  border: 1px solid var(--app-line, var(--shopping-line));
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--app-surface, var(--shopping-surface)) 88%, transparent);
}

.shopping-list-heading {
  display: grid;
  gap: 0.8rem;
  margin: 0 0 0.15rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.shopping-list-heading .section-title {
  margin: 0;
  padding: 0;
  color: var(--shopping-ink);
  font-size: 1.45rem;
  font-weight: 780;
  line-height: 1.1;
}

.shopping-list-panel .shopping-list {
  gap: 1.05rem;
}

.shopping-list-panel .shopping-store-group {
  padding: 0;
  border: 0;
  background: transparent;
}

.shopping-list-panel .shopping-store-group + .shopping-store-group {
  margin-top: 0.4rem;
}

.shopping-list-panel .shopping-store-group__header {
  margin: 0 0 0.35rem;
}

.shopping-list-panel .shopping-store-group__header .section-title {
  color: var(--shopping-primary-ink);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-height-tight);
}

.shopping-list-panel .shopping-store-group__count {
  color: var(--shopping-primary-ink);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
}

@media (min-width: 761px) {
  .shopping-workspace {
    grid-template-columns: minmax(0, 42rem);
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-workspace,
  .page-shell--shopping.is-editing-shopping-item .shopping-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .page-shell--shopping.is-shopping-settings .shopping-workspace {
    grid-template-columns: minmax(0, 38rem);
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-quick-add,
  .page-shell--shopping.is-editing-shopping-item [data-shopping-results] {
    grid-column: 1;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-quick-add {
    grid-row: 1;
  }

  .page-shell--shopping.is-editing-shopping-item [data-shopping-results] {
    grid-row: 2;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-edit-panel {
    position: sticky;
    top: 2rem;
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 720px) {
  .page-shell--shopping {
    padding: 0 1rem 6.2rem;
  }

  .page-shell--shopping.is-creating-shopping-item,
  .page-shell--shopping.is-editing-shopping-item,
  .page-shell--shopping.is-shopping-settings {
    min-height: 100dvh;
    padding: 0 1rem calc(1.2rem + env(safe-area-inset-bottom));
  }

  .shopping-store-group {
    padding: 0.9rem;
  }

  .shopping-store-group__header .section-title {
    font-size: 1rem;
  }

  .shopping-item-row {
    min-height: 3.6rem;
  }

  .shopping-item-row__title {
    font-size: 1rem;
  }

  .shopping-quick-add {
    padding: 0.8rem;
  }

  .shopping-quick-add-form {
    grid-template-columns: minmax(0, 1fr) minmax(5.25rem, auto);
    gap: 0.65rem;
  }

  .shopping-quick-add-form__item {
    grid-column: 1 / -1;
  }

  .shopping-quick-add-form__store {
    min-width: 0;
  }

  .shopping-quick-add-form__submit {
    min-width: 5.25rem;
    padding-inline: 0.7rem;
    font-size: 0.86rem;
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-app-header,
  .page-shell--shopping.is-creating-shopping-item .shopping-list-panel,
  .page-shell--shopping.is-creating-shopping-item .shopping-list,
  .page-shell--shopping.is-creating-shopping-item .shopping-empty-state,
  .page-shell--shopping.is-creating-shopping-item .shopping-edit-panel,
  .page-shell--shopping.is-creating-shopping-item .shopping-settings-page,
  .page-shell--shopping.is-editing-shopping-item .shopping-app-header,
  .page-shell--shopping.is-editing-shopping-item .shopping-quick-add,
  .page-shell--shopping.is-editing-shopping-item .shopping-list-panel,
  .page-shell--shopping.is-editing-shopping-item .shopping-list,
  .page-shell--shopping.is-editing-shopping-item .shopping-empty-state,
  .page-shell--shopping.is-editing-shopping-item .shopping-settings-page,
  .page-shell--shopping.is-shopping-settings .shopping-app-header,
  .page-shell--shopping.is-shopping-settings .shopping-list,
  .page-shell--shopping.is-shopping-settings .shopping-empty-state,
  .page-shell--shopping.is-shopping-settings .shopping-edit-panel,
  .page-shell--shopping.is-shopping-settings .shopping-create-page {
    display: none;
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-workspace,
  .page-shell--shopping.is-editing-shopping-item .shopping-workspace,
  .page-shell--shopping.is-shopping-settings .shopping-workspace {
    display: block;
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-create-page,
  .page-shell--shopping.is-editing-shopping-item .shopping-edit-panel,
  .page-shell--shopping.is-shopping-settings .shopping-settings-page {
    min-height: calc(100dvh - 1rem);
    padding: 1.25rem 0.75rem calc(1.2rem + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-create-mobile-header,
  .page-shell--shopping.is-editing-shopping-item .shopping-edit-mobile-header,
  .page-shell--shopping.is-shopping-settings .shopping-settings-mobile-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
  }

  .page-shell--shopping.is-shopping-settings .shopping-settings-mobile-header {
    height: 2.6rem;
    margin-bottom: 2.05rem;
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-create-mobile-header h1,
  .page-shell--shopping.is-editing-shopping-item .shopping-edit-mobile-header h1,
  .page-shell--shopping.is-shopping-settings .shopping-settings-mobile-header h1 {
    margin: 0;
    color: var(--shopping-ink);
    font-size: 2rem;
    font-weight: var(--font-weight-title, 780);
    line-height: 1;
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-create-page > .panel-heading,
  .page-shell--shopping.is-editing-shopping-item .shopping-edit-panel > .panel-heading,
  .page-shell--shopping.is-shopping-settings .shopping-settings-page > .panel-heading {
    display: none;
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-add-form,
  .page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form {
    gap: 0.85rem;
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-add-form__actions,
  .page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .form-actions--edit-submit {
    position: fixed;
    right: 1.5rem;
    bottom: calc(1.75rem + env(safe-area-inset-bottom));
    left: 1.5rem;
    z-index: 30;
    display: grid;
    margin: 0;
    pointer-events: none;
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-add-form__actions .app-button:not(.app-button--primary),
  .page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .form-actions--edit-submit .app-button:not(.app-button--primary) {
    display: none;
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-add-form__actions .app-button--primary,
  .page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .form-actions--edit-submit .app-button--primary {
    width: 100%;
    min-height: 3.45rem;
    font-size: 1rem;
    pointer-events: auto;
  }

  body:has(.page-shell--shopping.is-creating-shopping-item) .bottom-navigation,
  body:has(.page-shell--shopping.is-editing-shopping-item) .bottom-navigation,
  body:has(.page-shell--shopping.is-shopping-settings) .bottom-navigation {
    display: none;
  }
}

.shopping-item-row {
  align-items: center;
  min-height: 2.45rem;
  padding: 0.25rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.shopping-item-row:first-child {
  border-top: 0;
}

.shopping-item-toggle {
  margin: 0;
}

.shopping-item-row__content-link {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.shopping-item-row__title {
  font-size: 0.94rem;
  font-weight: 620;
  line-height: 1.25;
}

.shopping-create-store-panel {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--shopping-line);
}

.shopping-create-store-panel h3 {
  margin: 0;
  color: var(--shopping-ink);
  font-size: 1.05rem;
  font-weight: 760;
}

.shopping-store-create-form {
  display: grid;
  gap: 0.85rem;
}

.shopping-item-list {
  gap: 0.18rem;
}

.shopping-item-row {
  min-height: 2.2rem;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  padding: 0.1rem 0;
}

.shopping-item-row__title {
  font-size: 0.9rem;
}

.shopping-new-store-inline {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.shopping-new-store-inline[hidden] {
  display: none;
}

.shopping-new-store-inline__errors {
  margin: 0;
}

.shopping-store-group {
  gap: 0.8rem;
  padding: 0.95rem;
  border: 1px solid var(--app-line, var(--shopping-line));
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--app-surface, var(--shopping-surface)) 88%, transparent);
}

.shopping-store-group__header {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.shopping-store-group__header::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 0.32rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--shopping-primary);
}

.shopping-store-group__header .section-title {
  margin: 0;
  color: var(--shopping-primary-ink);
  font-size: 1.05rem;
  font-weight: var(--font-weight-title, 760);
  line-height: 1.15;
}

.shopping-store-group__count {
  margin-left: auto;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 0.68rem;
  border-radius: 999px;
  background: var(--shopping-primary-soft);
  color: var(--shopping-primary-ink);
  font-size: 0.78rem;
  font-weight: var(--font-weight-title, 760);
}

.shopping-settings-page {
  display: grid;
  gap: 0.75rem;
}

.shopping-settings-section {
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--app-line, var(--shopping-line));
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--app-surface, var(--shopping-surface)) 88%, transparent);
}

.shopping-settings-section + .shopping-settings-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--app-line, var(--shopping-line));
}

.shopping-settings-section h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--shopping-primary-ink);
  font-size: 1.05rem;
  font-weight: var(--font-weight-title, 760);
  line-height: 1.15;
}

.shopping-settings-section h3::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 0.32rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--shopping-primary);
}

.shopping-settings-store-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.45rem;
  min-height: 3.05rem;
  padding: 0.55rem 0.7rem;
}

.shopping-settings-store-category {
  display: grid;
  gap: 0.55rem;
}

.shopping-settings-store-category + .shopping-settings-store-category {
  margin-top: 0.9rem;
}

.shopping-settings-store-category h4 {
  margin: 0;
  color: var(--shopping-muted);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.2;
}

.shopping-settings-store-row__rename {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.shopping-settings-store-row__rename input[type="text"] {
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--shopping-ink);
  font: inherit;
  font-size: 0.96rem;
  font-weight: 640;
}

.shopping-settings-store-row__rename input[type="text"]::placeholder {
  color: color-mix(in srgb, var(--shopping-muted) 70%, transparent);
}

.shopping-settings-store-row--new {
  border-style: dashed;
}

.shopping-settings-store-row.is-saving {
  opacity: 0.82;
}

.shopping-settings-store-row__actions {
  align-items: center;
  gap: 0.2rem;
}

.shopping-settings-store-row__actions .icon-button {
  color: var(--shopping-ink);
}

.shopping-settings-store-row__actions .icon-button:disabled {
  color: var(--shopping-ink);
  cursor: not-allowed;
  opacity: 0.32;
}

.shopping-settings-store-row__remove-button {
  border-color: transparent;
  background: transparent;
  color: var(--shopping-ink);
  font-size: 1.45rem;
  font-weight: 640;
  line-height: 1;
}

.shopping-settings-store-row__remove-button:hover,
.shopping-settings-store-row__remove-button:focus-visible {
  background: transparent;
}

.shopping-settings-alert {
  color: var(--shopping-danger);
}

@media (max-width: 720px) {
  .page-shell--shopping.is-creating-shopping-item .shopping-create-page,
  .page-shell--chores.is-creating-chore .chore-create-page,
  .page-shell--tasks.is-creating-task .task-create-page{
    padding-bottom: calc(6rem + env(safe-area-inset-bottom));
  }

  .page-shell--shopping.is-shopping-settings .shopping-settings-page {
    display: block;
    min-height: calc(100dvh - 1rem);
  }

  .page-shell--shopping.is-shopping-settings .shopping-settings-section {
    gap: 0.9rem;
    padding: 1rem;
  }

  .page-shell--shopping.is-shopping-settings .shopping-settings-store-list {
    gap: 0.65rem;
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-add-form__actions,
  .page-shell--chores.is-creating-chore .chore-form > .form-actions,
  .page-shell--tasks.is-creating-task .task-form > .form-actions{
    position: fixed;
    right: 1.5rem;
    bottom: calc(1.75rem + env(safe-area-inset-bottom));
    left: 1.5rem;
    z-index: 30;
    display: grid;
    justify-content: stretch;
    margin: 0;
    pointer-events: none;
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-add-form__actions .app-button:not(.app-button--primary),
  .page-shell--chores.is-creating-chore .chore-form > .form-actions .app-button:not(.app-button--primary),
  .page-shell--tasks.is-creating-task .task-form > .form-actions .app-button:not(.app-button--primary){
    display: none;
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-add-form__actions .app-button--primary,
  .page-shell--chores.is-creating-chore .chore-form > .form-actions .app-button--primary,
  .page-shell--tasks.is-creating-task .task-form > .form-actions .app-button--primary{
    width: 100%;
    min-height: 3.45rem;
    font-size: 1rem;
    pointer-events: auto;
  }

  .shopping-store-group {
    padding: 0.9rem;
  }

  .shopping-settings-store-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-edit-panel {
    align-content: start;
  }

  .page-shell--shopping.is-editing-shopping-item .task-form__grid--shopping-item {
    gap: 1.15rem;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .field {
    gap: 0.6rem;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .field label {
    font-size: 0.9rem;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .field input,
  .page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .field select {
    min-height: 3.45rem;
    padding-inline: 1rem;
    font-weight: 650;
  }

  .page-shell--dashboard .daily-dashboard {
    gap: 0.65rem;
  }

  .daily-dashboard__header,
  .app-header.chores-app-header,
  .app-header.tasks-app-header,
  .app-header.habits-app-header {
    min-height: 4.05rem;
    padding-top: 1.05rem;
    padding-bottom: 0.45rem;
  }

  .page-shell--dashboard .daily-dashboard {
    gap: 0.9rem;
  }

  .page-shell--dashboard .daily-dashboard__header {
    align-items: center;
    min-height: 5.25rem;
    padding: 0.78rem 0 0.45rem;
  }

  .daily-dashboard__header h1 {
    line-height: 1;
  }

  .daily-dashboard__title-full {
    display: none;
  }

  .daily-dashboard__title-mobile {
    display: grid;
    gap: 0.1rem;
  }

  .daily-dashboard__weekday {
    color: var(--app-primary);
    font-size: 0.9rem;
    font-weight: 720;
    line-height: 1;
    text-transform: uppercase;
  }

  .daily-dashboard__date {
    color: var(--app-ink);
    font-size: clamp(2rem, 9.5vw, 2.35rem);
    font-weight: 780;
    line-height: 0.98;
  }

  .page-shell--dashboard .daily-dashboard__settings {
    width: 2.45rem;
    min-width: 2.45rem;
    height: 2.45rem;
    border-color: var(--app-line);
    border-radius: 0.78rem;
    background: var(--app-surface);
    color: var(--app-muted-2);
  }

  .page-shell--dashboard .daily-dashboard__settings svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke-width: 1.8;
  }

  .page-shell--chores,
  .page-shell--tasks,
  .page-shell--habits {
    gap: 0.7rem;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
  }
}

.daily-dashboard__settings {
  display: inline-grid;
  place-items: center;
  width: 2.125rem;
  min-width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-muted-2);
  text-decoration: none;
  line-height: 0;
}

.daily-dashboard__settings svg {
  display: block;
  width: 1.12rem;
  height: 1.12rem;
  margin: auto;
}

.daily-card-section-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.daily-card-section-heading__link {
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

.daily-card-section-heading__link:hover .section-title,
.daily-card-section-heading__link:focus-visible .section-title {
  color: var(--daily-primary-ink);
}

.daily-card-section-heading__link:focus-visible {
  outline: 2px solid var(--daily-primary-ink);
  outline-offset: 0.25rem;
}

.daily-card-section-heading::before {
  content: "";
  align-self: stretch;
  width: 0.32rem;
  min-height: 2rem;
  border-radius: 999px;
  background: var(--daily-primary);
}

.daily-card-section-heading .section-title {
  color: var(--daily-primary-ink);
  font-size: 1.08rem;
  font-weight: 820;
  letter-spacing: 0;
  line-height: 1.12;
}

.daily-habit-row__main .task-row__title {
  color: var(--app-ink);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-meta);
  line-height: var(--line-height-body);
}

.daily-task-row__main .task-row__title,
.daily-habit-stats,
.daily-task-due,
.habit-row__copy strong,
.habit-stats,
.shopping-item-row__title {
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-meta);
  line-height: var(--line-height-body);
}

.shopping-item-row__content-link {
  display: grid;
  align-content: center;
}

.shopping-item-row__copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.shopping-item-row__notes {
  color: var(--app-muted);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-meta);
  line-height: var(--line-height-body);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.task-form__grid--shopping-item .notes-field,
.shopping-add-form__notes {
  grid-column: 1 / -1;
}

.shopping-store-group__count {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
}

.shopping-settings-store-row__remove-button,
.shopping-settings-store-row__actions .shopping-settings-store-row__remove-button {
  color: var(--shopping-muted);
  font-size: 1.45rem;
  font-weight: 780;
}

@media (max-width: 720px) {
  .page-shell--shopping {
    gap: 0.7rem;
  }

  .page-shell--chores.is-editing-chore .chore-edit-mobile-header h2,
.page-shell--chores.is-creating-chore .chore-create-mobile-header h2,
.page-shell--tasks.is-editing-task .task-edit-mobile-header h2,
.page-shell--tasks.is-creating-task .task-create-mobile-header h2,
.page-shell--shopping.is-creating-shopping-item .shopping-create-mobile-header h2,
.page-shell--shopping.is-editing-shopping-item .shopping-edit-mobile-header h2,
.page-shell--shopping.is-shopping-settings .shopping-settings-mobile-header h2,
.page-shell--family.is-editing-family-work .family-editor-mobile-header h2{
    margin: 0;
    color: var(--app-ink);
    font-family: var(--app-display-font, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-title);
    line-height: var(--line-height-tight);
  }

  .page-shell--family.is-editing-family-work {
    gap: 0;
  }

  .page-shell--family.is-editing-family-work .family-app-header,
  .page-shell--family.is-editing-family-work .family-workspace-panel,
  .page-shell--family.is-editing-family-work .family-editor-panel > .panel-heading {
    display: none;
  }

  .page-shell--family.is-editing-family-work .family-workspace-grid {
    display: block;
  }

  .page-shell--family.is-editing-family-work .family-editor-panel {
    min-height: calc(100dvh - var(--bottom-navigation-mobile-height) - 1rem);
    padding: 1.25rem 0.75rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--family.is-editing-family-work .family-editor-mobile-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
  }

  .page-shell--family.is-editing-family-work .family-editor-panel .task-form__grid--personal,
.page-shell--family.is-editing-family-work .chore-form .task-form__grid--chore{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  :root {
    --bottom-navigation-mobile-height: calc(5.25rem + env(safe-area-inset-bottom));
  }

  html:has(.bottom-navigation),
  body:not(:has(.page-shell--tasks)):has(.bottom-navigation) {
    min-height: 100dvh;
  }

  body > .bottom-navigation {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  .bottom-navigation {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 100;
    width: 100% !important;
    max-width: none;
    min-height: var(--bottom-navigation-mobile-height);
    margin: 0 !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: layout paint;
    pointer-events: auto;
    will-change: transform;
  }

  .page-shell:not(.page-shell--settings):not(.page-shell--tasks):not(.is-editing-task):not(.is-creating-task):not(.is-editing-chore):not(.is-creating-chore):not(.is-editing-shopping-item):not(.is-creating-shopping-item):not(.is-shopping-settings) {
    padding-bottom: calc(var(--bottom-navigation-mobile-height) + 1rem) !important;
  }

  .habits-header-back-link,
  .tasks-header-back-link,
  .calendar-header-back-link {
    display: grid;
  }

}

@media (min-width: 761px) {
  html,
  body {
    background: var(--app-bg);
    color: var(--app-ink);
    color-scheme: light;
  }

  html:has(.page-shell--dashboard),
  body:has(.page-shell--dashboard) {
    --daily-bg: var(--app-bg);
    --daily-card: var(--app-surface);
    --daily-ink: var(--app-ink);
    --daily-muted: var(--app-muted);
    --daily-muted-2: var(--app-muted-2);
    --daily-line: var(--app-line);
    --daily-hairline: var(--app-hairline);
    --daily-primary: var(--app-primary);
    --daily-primary-ink: var(--app-primary-ink);
    --daily-primary-soft: var(--app-primary-soft);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--app-primary-soft) 38%, transparent), transparent 22rem),
      var(--app-bg);
  }

  body:has(.page-shell--dashboard) .daily-dashboard {
    --daily-bg: var(--app-bg);
    --daily-card: var(--app-surface);
    --daily-ink: var(--app-ink);
    --daily-muted: var(--app-muted);
    --daily-muted-2: var(--app-muted-2);
    --daily-line: var(--app-line);
    --daily-hairline: var(--app-hairline);
    --daily-primary: var(--app-primary);
    --daily-primary-ink: var(--app-primary-ink);
    --daily-primary-soft: var(--app-primary-soft);
  }

  .page-shell--dashboard .daily-card-more-link {
    display: none;
  }

  .daily-dashboard__header h1,
  .app-header__title {
    color: var(--app-ink);
  }

  .app-header {
    border: 0;
    background: transparent;
  }

  .chores-app-header,
  .tasks-app-header,
  .habits-app-header,
  .shopping-app-header,
  .family-app-header {
    padding: 0;
    color: var(--app-ink);
  }

  .daily-inbox-panel,
.daily-habits-panel,
.daily-tasks-panel,
.daily-calendar-panel,
.daily-card,
.chores-summary__item,
.chores-list-panel,
.chore-edit-panel,
.chore-create-panel__body,
.tasks-list-panel,
.task-edit-panel,
.task-create-page,
.habits-list-panel,
.calendar-list-panel,
.shopping-add-panel,
.shopping-list-panel,
.shopping-stores-panel,
.shopping-create-page,
.shopping-edit-panel,
.shopping-settings-page,
.shopping-store-group,
.shopping-settings-section,
.settings-card,
.family-workspace-panel,
.panel{
    border-color: color-mix(in srgb, var(--app-line) 82%, white);
    background: color-mix(in srgb, var(--app-surface) 94%, white);
  }

  .daily-inbox-panel,
  .daily-habits-panel,
  .daily-tasks-panel,
  .daily-calendar-panel {
    align-content: start;
    min-height: 12.5rem;
    padding: 1.25rem;
  }

  .daily-inbox-panel__heading .section-title,
  .daily-habits-panel__heading .section-title,
  .daily-tasks-panel__heading .section-title,
  .daily-calendar-panel__heading .section-title {
    font-size: 1.85rem;
    line-height: 1.05;
  }

  .daily-habit-row,
  .daily-task-row,
  .daily-calendar-row,
  .daily-preview-empty-row {
    padding-block: 0.32rem;
  }

  .desktop-sidebar {
    border-right-color: color-mix(in srgb, var(--app-line) 72%, white);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--app-surface) 96%, white), color-mix(in srgb, var(--app-bg) 92%, white)),
      var(--app-surface);
    color: var(--app-ink);
  }

  .desktop-sidebar__link {
    border: 1px solid transparent;
  }

  .desktop-sidebar__link:hover {
    border-color: color-mix(in srgb, var(--app-primary) 18%, var(--app-line));
    background: color-mix(in srgb, var(--app-primary-soft) 36%, transparent);
    color: var(--app-primary-ink);
  }

  .desktop-sidebar__link.is-active {
    border-color: color-mix(in srgb, var(--app-primary) 36%, var(--app-line));
    background: var(--app-primary-soft);
    color: var(--app-primary-ink);
  }

  .desktop-sidebar__link b,
  .filter-count,
  .task-section__count {
    background: color-mix(in srgb, var(--app-primary-soft) 74%, white);
    color: var(--app-primary-ink);
  }

  .desktop-sidebar__primary {
    border-color: var(--app-primary);
    background: var(--app-primary);
    color: #fffdf8 !important;
  }

  .desktop-sidebar__secondary {
    border-color: var(--app-line);
    background: color-mix(in srgb, var(--app-surface) 82%, transparent);
    color: var(--app-muted);
  }




  .family-workspace-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .family-workspace-grid .family-workspace-panel,
  .family-workspace-grid .family-editor-panel {
    grid-row: 1;
  }

  .family-workspace-grid .family-workspace-panel {
    grid-column: 1;
  }

  .family-workspace-grid .family-editor-panel {
    position: sticky;
    top: 2rem;
    grid-column: 2;
  }
}

@media (min-width: 901px) {
  :root {
    --app-desktop-sidebar-width: clamp(15rem, 15vw, 17rem);
  }

  .desktop-sidebar,
  body:has(.page-shell--dashboard) .desktop-sidebar,
  body:has(.page-shell--chores) .desktop-sidebar,
  body:has(.page-shell--tasks) .desktop-sidebar,
  body:has(.page-shell--habits) .desktop-sidebar,
  body:has(.page-shell--calendar) .desktop-sidebar,
  body:has(.page-shell--shopping) .desktop-sidebar {
    width: var(--app-desktop-sidebar-width);
    padding: 1.65rem 1.05rem;
  }

  .page-shell,
  .page-shell--dashboard,
  .page-shell--shopping {
    margin-left: var(--app-desktop-sidebar-width);
    padding: clamp(1.65rem, 2.4vw, 2.4rem) clamp(1.75rem, 3vw, 3.5rem) 3.5rem;
  }

  .page-shell--dashboard,
  .page-shell--chores,
  .page-shell--tasks,
  .page-shell--habits,
  .page-shell--calendar,
  .page-shell--shopping,
  .page-shell--family,
  .page-shell--settings {
    width: auto;
    max-width: none;
  }

  .daily-dashboard,
  .chores-layout,
  .tasks-layout,
  .habits-layout,
  .calendar-layout,
  .shopping-layout,
  .family-workspace-grid,
  .family-workspace-panel,
  .settings-card {
    max-width: min(80rem, calc(100vw - var(--app-desktop-sidebar-width) - 5rem));
  }

  .daily-dashboard {
    gap: 1.25rem;
  }

  .daily-dashboard__header {
    min-height: auto;
    padding: 0 0 0.3rem;
  }

  .daily-dashboard__header h1 {
    font-size: clamp(2.45rem, 3.25vw, 3.35rem);
  }

  .daily-dashboard__grid {
    grid-template-columns: repeat(2, minmax(18rem, 1fr));
    gap: 1rem;
  }

  .chores-workspace,
  .tasks-workspace,
  .habits-workspace,
  .shopping-workspace {
    align-items: start;
  }

  .family-workspace-panel {
    justify-self: stretch;
    width: 100%;
  }

  .family-workspace-grid {
    justify-self: stretch;
    width: 100%;
  }

  .family-workspace-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .family-workspace-grid .family-workspace-panel,
  .family-workspace-grid .family-editor-panel {
    grid-row: 1;
  }

  .family-workspace-grid .family-workspace-panel {
    grid-column: 1;
  }

  .family-workspace-grid .family-editor-panel {
    position: sticky;
    top: 2rem;
    grid-column: 2;
  }

  .page-shell--chores.is-creating-chore .chores-workspace,
.page-shell--chores.is-editing-chore .chores-workspace,
.page-shell--tasks.is-creating-task .tasks-workspace,
.page-shell--tasks.is-editing-task .tasks-workspace,
.page-shell--shopping.is-creating-shopping-item .shopping-workspace,
.page-shell--shopping.is-editing-shopping-item .shopping-workspace{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-primary-column,
  .page-shell--shopping.is-editing-shopping-item .shopping-primary-column {
    grid-column: 1;
    grid-row: 1;
  }

  .page-shell--chores.is-creating-chore .chores-list-panel,
.page-shell--chores.is-editing-chore .chores-list-panel,
.page-shell--tasks.is-creating-task .tasks-list-panel,
.page-shell--tasks.is-editing-task .tasks-list-panel,
.page-shell--shopping.is-creating-shopping-item .shopping-list-panel,
.page-shell--shopping.is-editing-shopping-item .shopping-list-panel,
.page-shell--shopping.is-creating-shopping-item .shopping-empty-state,
.page-shell--shopping.is-editing-shopping-item .shopping-empty-state{
    grid-column: 1;
    grid-row: 1;
  }

  .page-shell--chores.is-creating-chore .chore-create-page,
.page-shell--chores.is-editing-chore .chore-edit-panel,
.page-shell--tasks.is-creating-task .task-create-page,
.page-shell--tasks.is-editing-task .task-edit-panel,
.page-shell--shopping.is-creating-shopping-item .shopping-create-page{
    grid-column: 2;
    grid-row: 1;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-edit-panel {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (min-width: 1180px) {
  .daily-dashboard,
  .chores-layout,
  .tasks-layout,
  .habits-layout,
  .calendar-layout,
  .shopping-layout,
  .family-workspace-grid,
  .family-workspace-panel,
  .settings-card {
    max-width: min(88rem, calc(100vw - var(--app-desktop-sidebar-width) - 5.5rem));
  }

  .daily-dashboard__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .daily-calendar-panel {
    grid-column: auto;
  }
}

.daily-dashboard__header,
.app-header.chores-app-header,
.app-header.tasks-app-header,
.app-header.habits-app-header,
.app-header.shopping-app-header,
.app-header.family-app-header,
.app-header.calendar-app-header {
  min-height: 4.05rem;
  padding: 1.05rem 0 0.45rem;
}

.daily-dashboard__header h1,
.chores-app-header .app-header__title,
.tasks-app-header .app-header__title,
.habits-app-header .app-header__title,
.shopping-app-header .app-header__title,
.family-app-header .app-header__title,
.calendar-app-header .app-header__title {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-title);
  letter-spacing: 0;
  line-height: 1;
}

@media (max-width: 720px) {
  .page-shell--chores,
  .page-shell--tasks,
  .page-shell--habits,
  .page-shell--shopping,
  .page-shell--family,
  .page-shell--calendar {
    gap: 0.7rem;
  }

  .page-shell--dashboard .daily-dashboard {
    gap: 0.7rem;
  }
}

@media (min-width: 761px) {
  .page-shell--habits,
  .page-shell--calendar,
  .page-shell.page-shell--family {
    margin-left: 14.75rem;
    padding: 2.25rem 2.25rem 3rem;
  }

  .page-shell--habits,
  .page-shell--shopping,
  .page-shell.page-shell--family,
  .page-shell--calendar {
    gap: 1.25rem;
  }

  .habits-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .habits-list-panel {
    grid-column: 1;
    grid-row: 1;
  }

  .daily-dashboard__header,
  .app-header.chores-app-header,
  .app-header.tasks-app-header,
  .app-header.habits-app-header,
  .app-header.shopping-app-header,
  .app-header.family-app-header,
  .app-header.calendar-app-header {
    min-height: auto;
    padding: 0 0 0.75rem;
  }

  .daily-dashboard__header h1,
  .chores-app-header .app-header__title,
  .tasks-app-header .app-header__title,
  .habits-app-header .app-header__title,
  .shopping-app-header .app-header__title,
  .family-app-header .app-header__title,
  .calendar-app-header .app-header__title {
    font-size: 2.75rem;
  }
}

@media (max-width: 900px) and (min-width: 761px) {
  .page-shell--dashboard,
  .page-shell--habits,
  .page-shell--calendar,
  .page-shell.page-shell--family {
    margin-left: 4.875rem;
    padding: 2.125rem 1.875rem 2rem;
  }

  .habits-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .daily-dashboard__header h1,
  .chores-app-header .app-header__title,
  .tasks-app-header .app-header__title,
  .habits-app-header .app-header__title,
  .shopping-app-header .app-header__title,
  .family-app-header .app-header__title,
  .calendar-app-header .app-header__title {
    font-size: 3.25rem;
  }
}

@media (min-width: 901px) {
  .page-shell.page-shell--family {
    width: auto;
    margin-left: var(--app-desktop-sidebar-width);
    padding: clamp(1.65rem, 2.4vw, 2.4rem) clamp(1.75rem, 3vw, 3.5rem) 3.5rem;
  }
}

.chore-checklist-preview__input,
.task-subtask-preview__input,
.daily-task-subtask-preview__input {
  position: static;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  border: 2px solid var(--app-muted-2);
  border-radius: 999px;
  opacity: 1;
  background: var(--app-surface);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  pointer-events: auto;
}

.daily-task-subtask-preview__input {
  width: 1rem;
  height: 1rem;
  border-color: var(--daily-muted-2);
  background: var(--daily-card);
}

.task-subtask-preview__input {
  border-color: var(--tasks-muted-2);
  background: var(--tasks-surface);
}

.chore-checklist-preview__input {
  border-color: var(--chores-muted-2);
  background: var(--chores-surface);
}

.chore-checklist-preview__input:checked,
.task-subtask-preview__input:checked,
.daily-task-subtask-preview__input:checked {
  border-color: var(--app-primary);
  background: var(--app-primary);
}

.daily-task-subtask-preview__input:checked {
  border-color: var(--daily-primary);
  background: var(--daily-primary);
}

.task-subtask-preview__input:checked {
  border-color: var(--tasks-primary);
  background: var(--tasks-primary);
}

.chore-checklist-preview__input:checked {
  border-color: var(--chores-primary);
  background: var(--chores-primary);
}

.chore-checklist-preview__input:checked::after,
.task-subtask-preview__input:checked::after,
.daily-task-subtask-preview__input:checked::after {
  width: 0.38rem;
  height: 0.62rem;
  border: solid #fffdf8;
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg) translateY(-1px);
}

.daily-task-subtask-preview__input:checked::after {
  width: 0.33rem;
  height: 0.54rem;
}

.chore-checklist-preview__item {
  color: var(--chores-ink);
}

.task-subtask-preview__item {
  color: var(--tasks-ink);
}

.daily-task-subtask-preview__item {
  color: var(--daily-ink);
}

.chore-checklist-preview__item.is-done {
  color: var(--chores-muted);
}

.chore-checklist-preview__item.is-done .chore-checklist-preview__time,
.chore-checklist-preview__item.is-done .chore-checklist-preview__copy,
.chore-checklist-preview__item.is-done .chore-checklist-preview__copy > span {
  color: inherit;
}

.task-subtask-preview__item.is-done {
  color: var(--tasks-muted);
}

.daily-task-subtask-preview__item.is-done {
  color: var(--daily-muted);
}

.mini-check {
  display: none;
}

@media (min-width: 761px) {
  :root {
    --app-desktop-topbar-height: 4.25rem;
    --app-desktop-header-top: 1.75rem;
    --app-desktop-header-height: 4.25rem;
    --app-desktop-content-gutter: clamp(1.875rem, 3vw, 3.5rem);
  }

  .desktop-sidebar,
  body:has(.page-shell--dashboard) .desktop-sidebar,
  body:has(.page-shell--chores) .desktop-sidebar,
  body:has(.page-shell--tasks) .desktop-sidebar,
  body:has(.page-shell--habits) .desktop-sidebar,
  body:has(.page-shell--calendar) .desktop-sidebar,
  body:has(.page-shell--shopping) .desktop-sidebar,
  body:has(.page-shell--family) .desktop-sidebar {
    position: absolute;
    z-index: 50;
    top: calc(var(--app-desktop-header-top) + var(--app-desktop-header-height));
    right: var(--app-desktop-content-gutter);
    left: var(--app-desktop-content-gutter);
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: var(--app-desktop-topbar-height);
    min-height: 0;
    padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
    border-right: 0;
    border-bottom: 0;
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .desktop-sidebar__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.55rem, 1.4vw, 1.25rem);
    width: auto;
    min-height: 100%;
    margin: 0 auto;
  }

  .desktop-sidebar__link,
  body:has(.page-shell--dashboard) .desktop-sidebar__link,
  body:has(.page-shell--chores) .desktop-sidebar__link,
  body:has(.page-shell--tasks) .desktop-sidebar__link,
  body:has(.page-shell--habits) .desktop-sidebar__link,
  body:has(.page-shell--shopping) .desktop-sidebar__link,
  body:has(.page-shell--family) .desktop-sidebar__link {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: 0.55rem;
    min-width: 0;
    min-height: 3rem;
    padding: 0 0.9rem;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--app-ink);
    opacity: 1;
    white-space: nowrap;
  }

  .desktop-sidebar__link span:not(.desktop-sidebar__icon),
  body:has(.page-shell--dashboard) .desktop-sidebar__link span:not(.desktop-sidebar__icon),
  body:has(.page-shell--chores) .desktop-sidebar__link span:not(.desktop-sidebar__icon),
  body:has(.page-shell--tasks) .desktop-sidebar__link span:not(.desktop-sidebar__icon),
  body:has(.page-shell--habits) .desktop-sidebar__link span:not(.desktop-sidebar__icon),
  body:has(.page-shell--shopping) .desktop-sidebar__link span:not(.desktop-sidebar__icon),
  body:has(.page-shell--family) .desktop-sidebar__link span:not(.desktop-sidebar__icon),
  .desktop-sidebar__link b {
    display: inline;
    color: currentColor;
  }

  .desktop-sidebar__icon {
    width: 1.2rem;
    height: 1.2rem;
    color: currentColor;
  }

  .desktop-sidebar__icon svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  .desktop-sidebar__link:not(.is-active),
  body:has(.page-shell--dashboard) .desktop-sidebar__link:not(.is-active),
  body:has(.page-shell--chores) .desktop-sidebar__link:not(.is-active),
  body:has(.page-shell--tasks) .desktop-sidebar__link:not(.is-active),
  body:has(.page-shell--habits) .desktop-sidebar__link:not(.is-active),
  body:has(.page-shell--shopping) .desktop-sidebar__link:not(.is-active),
  body:has(.page-shell--family) .desktop-sidebar__link:not(.is-active) {
    color: var(--app-ink);
    opacity: 1;
  }

  .habits-header-back-link,
  .tasks-header-back-link,
  .calendar-header-back-link {
    display: grid;
  }

  body:has(.page-shell--tasks) .desktop-sidebar,
  body:has(.page-shell--calendar) .desktop-sidebar {
    display: none;
  }

  body:has(.page-shell--family) .desktop-sidebar__link.is-active {
    border: 1px solid color-mix(in srgb, var(--family-primary) 42%, var(--family-line));
    background: var(--family-primary-soft);
    color: var(--family-primary-ink);
  }

  .page-shell,
  .page-shell--dashboard,
  .page-shell--chores,
  .page-shell--tasks,
  .page-shell--habits,
  .page-shell--calendar,
  .page-shell--shopping,
  .page-shell.page-shell--family,
  .page-shell--settings {
    width: auto;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    padding-top: var(--app-desktop-header-top);
    padding-right: var(--app-desktop-content-gutter);
    padding-left: var(--app-desktop-content-gutter);
  }

  .daily-dashboard__header,
  .app-header.chores-app-header,
  .app-header.tasks-app-header,
  .app-header.habits-app-header,
  .app-header.shopping-app-header,
  .app-header.family-app-header,
  .app-header.calendar-app-header,
  .page-shell--settings .app-header {
    margin-bottom: calc(var(--app-desktop-topbar-height) + 1rem);
  }

  body:has(.page-shell--tasks) .app-header.tasks-app-header,
  body:has(.page-shell--habits) .app-header.habits-app-header,
  body:has(.page-shell--calendar) .app-header.calendar-app-header {
    margin-bottom: 0;
  }

  .daily-dashboard,
  .chores-layout,
  .tasks-layout,
  .habits-layout,
  .calendar-layout,
  .shopping-layout,
  .family-workspace-grid,
  .family-workspace-panel {
    width: 100%;
    max-width: none;
  }

  .settings-card {
    max-width: min(88rem, calc(100vw - var(--app-desktop-content-gutter) - var(--app-desktop-content-gutter)));
  }

  .page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chores-workspace,
  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-workspace,
  .page-shell--habits .habits-workspace,
  .page-shell--shopping:not(.is-creating-shopping-item):not(.is-editing-shopping-item):not(.is-shopping-settings) .shopping-workspace,
  .page-shell--family:not(.is-editing-family-work) .family-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 901px) {
  html:has(.page-shell--dashboard),
body:has(.page-shell--dashboard),
html:has(.page-shell--chores.is-creating-chore),
body:has(.page-shell--chores.is-creating-chore),
html:has(.page-shell--chores.is-editing-chore),
body:has(.page-shell--chores.is-editing-chore),
html:has(.page-shell--tasks.is-creating-task),
body:has(.page-shell--tasks.is-creating-task),
html:has(.page-shell--tasks.is-editing-task),
body:has(.page-shell--tasks.is-editing-task),
html:has(.page-shell--shopping.is-creating-shopping-item),
body:has(.page-shell--shopping.is-creating-shopping-item),
html:has(.page-shell--shopping.is-editing-shopping-item),
body:has(.page-shell--shopping.is-editing-shopping-item),
html:has(.page-shell--family.is-editing-family-work),
body:has(.page-shell--family.is-editing-family-work){
    height: 100%;
    overflow: hidden;
  }

  .page-shell--dashboard,
.page-shell--chores.is-creating-chore,
.page-shell--chores.is-editing-chore,
.page-shell--tasks.is-creating-task,
.page-shell--tasks.is-editing-task,
.page-shell--shopping.is-creating-shopping-item,
.page-shell--shopping.is-editing-shopping-item,
.page-shell.page-shell--family.is-editing-family-work{
    box-sizing: border-box;
    height: 100dvh;
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .page-shell--dashboard {
    grid-template-rows: minmax(0, 1fr);
  }

  .page-shell--dashboard .daily-dashboard,
.page-shell--chores.is-creating-chore .chores-layout,
.page-shell--chores.is-editing-chore .chores-layout,
.page-shell--tasks.is-creating-task .tasks-layout,
.page-shell--tasks.is-editing-task .tasks-layout,
.page-shell--shopping.is-creating-shopping-item .shopping-layout,
.page-shell--shopping.is-editing-shopping-item .shopping-layout,
.page-shell--family.is-editing-family-work .family-workspace-grid{
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .page-shell--dashboard .daily-dashboard {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .page-shell--dashboard .daily-dashboard__grid,
.page-shell--chores.is-creating-chore .chores-workspace,
.page-shell--chores.is-editing-chore .chores-workspace,
.page-shell--tasks.is-creating-task .tasks-workspace,
.page-shell--tasks.is-editing-task .tasks-workspace,
.page-shell--shopping.is-creating-shopping-item .shopping-workspace,
.page-shell--shopping.is-editing-shopping-item .shopping-workspace,
.page-shell--family.is-editing-family-work .family-workspace-grid{
    min-height: 0;
    height: 100%;
    overflow: hidden;
    align-items: stretch;
  }

  .page-shell--dashboard .daily-habits-panel,
.page-shell--dashboard .daily-tasks-panel,
.page-shell--dashboard .daily-calendar-panel,
.page-shell--chores.is-creating-chore .chores-list-panel,
.page-shell--chores.is-editing-chore .chores-list-panel,
.page-shell--chores.is-creating-chore .chore-create-page,
.page-shell--chores.is-editing-chore .chore-edit-panel,
.page-shell--tasks.is-creating-task .tasks-list-panel,
.page-shell--tasks.is-editing-task .tasks-list-panel,
.page-shell--tasks.is-creating-task .task-create-page,
.page-shell--tasks.is-editing-task .task-edit-panel,
.page-shell--shopping.is-creating-shopping-item .shopping-primary-column,
.page-shell--shopping.is-editing-shopping-item .shopping-primary-column,
.page-shell--shopping.is-creating-shopping-item .shopping-create-page,
.page-shell--shopping.is-editing-shopping-item .shopping-edit-panel,
.page-shell--family.is-editing-family-work .family-workspace-panel,
.page-shell--family.is-editing-family-work .family-editor-panel{
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* EOF cascade guard for improved-screens visual fidelity. */
html,
body {
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-family);
}

.daily-habits-panel,
.daily-tasks-panel,
.daily-calendar-panel,
.tasks-list-panel,
.task-edit-panel,
.task-create-page,
.habits-list-panel,
.calendar-list-panel,
.settings-card,
.chores-list-panel,
.chore-edit-panel,
.chore-create-page,
.shopping-list-panel,
.shopping-add-panel,
.shopping-create-page,
.shopping-edit-panel,
.shopping-settings-page,
.family-workspace-panel,
.family-editor-panel,
.panel{
  border-color: var(--color-line);
  border-radius: 16px;
  background: var(--color-card);
}

.bottom-navigation__link.is-active,
.bottom-navigation__link.is-active:hover,
.desktop-sidebar__link.is-active {
  background: var(--color-teal-tint);
  color: var(--color-teal-dark);
}

.page-shell--tasks .task-create-panel__summary,
.page-shell--tasks .task-form .form-actions .app-button--primary,
.chore-form .form-actions .app-button--primary,
.shopping-add-form .app-button--primary,
.shopping-item-edit-form .form-actions .app-button--primary{
  border-color: var(--color-teal);
  background: var(--color-teal);
  color: #fff;
}

/* App-wide completion checkmarks: centered SVG tick inside the filled ring. */
.task-toggle input:checked,
.personal-task-toggle input:checked,
.page-shell--tasks .personal-task-toggle input[type="checkbox"]:checked,
.habit-toggle input:checked,
.daily-task-toggle input:checked,
.daily-habit-toggle input:checked,
.chore-toggle input:checked,
.shopping-item-toggle input:checked,
.shopping-item-row input[type="checkbox"]:checked,
.family-assigned-work-row__toggle input[type="checkbox"]:checked,
.daily-work-row__toggle input:checked,
.chore-checklist-preview__input:checked,
.task-subtask-preview__input:checked,
.daily-task-subtask-preview__input:checked {
  position: relative;
  border-color: var(--completion-color, var(--app-primary, var(--color-teal)));
  background: var(--completion-color, var(--app-primary, var(--color-teal)));
}

.daily-task-toggle input:checked,
.daily-habit-toggle input:checked,
.daily-work-row__toggle input:checked,
.daily-task-subtask-preview__input:checked {
  --completion-color: var(--daily-primary, var(--color-teal));
}

.chore-toggle input:checked,
.chore-checklist-preview__input:checked {
  --completion-color: var(--chores-primary, var(--color-teal));
}

.personal-task-toggle input:checked,
.task-subtask-preview__input:checked,
.page-shell--tasks .personal-task-toggle input[type="checkbox"]:checked {
  --completion-color: var(--tasks-primary, var(--color-teal));
}

.habit-toggle input:checked {
  --completion-color: var(--habits-primary, var(--app-primary, var(--color-teal)));
}

.shopping-item-toggle input:checked,
.shopping-item-row input[type="checkbox"]:checked {
  --completion-color: var(--shopping-primary, var(--color-teal));
}

.family-assigned-work-row__toggle input[type="checkbox"]:checked {
  --completion-color: var(--family-primary, var(--color-teal));
}

.task-toggle input:checked::after,
.personal-task-toggle input:checked::after,
.page-shell--tasks .personal-task-toggle input[type="checkbox"]:checked::after,
.habit-toggle input:checked::after,
.daily-task-toggle input:checked::after,
.daily-habit-toggle input:checked::after,
.chore-toggle input:checked::after,
.shopping-item-toggle input:checked::after,
.shopping-item-row input[type="checkbox"]:checked::after,
.family-assigned-work-row__toggle input[type="checkbox"]:checked::after,
.daily-work-row__toggle input:checked::after,
.chore-checklist-preview__input:checked::after,
.task-subtask-preview__input:checked::after,
.daily-task-subtask-preview__input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58%;
  height: 58%;
  margin: 0;
  border: 0;
  background: #fffdf8;
  transform: translate(-50%, -50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%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 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.chore-checklist-preview__input:checked::after,
.task-subtask-preview__input:checked::after,
.daily-task-subtask-preview__input:checked::after {
  width: 60%;
  height: 60%;
}

/* App-wide completed child rows: muted copy with the same struck-through treatment. */
.chore-checklist-preview__item.is-done,
.task-subtask-preview__item.is-done,
.daily-task-subtask-preview__item.is-done {
  color: var(--app-muted);
  opacity: 1;
}

.chore-checklist-preview__item.is-done .chore-checklist-preview__time,
.chore-checklist-preview__item.is-done .chore-checklist-preview__copy,
.chore-checklist-preview__item.is-done .chore-checklist-preview__copy > span,
.task-subtask-preview__item.is-done .task-subtask-preview__due,
.task-subtask-preview__item.is-done .task-subtask-preview__copy,
.task-subtask-preview__item.is-done .task-subtask-preview__copy > span,
.daily-task-subtask-preview__item.is-done .daily-task-subtask-preview__due,
.daily-task-subtask-preview__item.is-done .daily-task-subtask-preview__copy,
.daily-task-subtask-preview__item.is-done .daily-task-subtask-preview__copy > span {
  color: inherit;
}

.task-subtask-preview__item.is-done .task-subtask-preview__due,
.task-subtask-preview__item.is-done .task-subtask-preview__copy > span,
.daily-task-subtask-preview__item.is-done .daily-task-subtask-preview__due,
.daily-task-subtask-preview__item.is-done .daily-task-subtask-preview__copy > span {
  text-decoration: none;
}

@media (max-width: 760px) {
  body > .bottom-navigation {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  .bottom-navigation {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    display: flex;
    margin: 0 !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .page-shell:not(.page-shell--settings):not(.page-shell--tasks):not(.is-editing-task):not(.is-creating-task):not(.is-editing-chore):not(.is-creating-chore):not(.is-editing-shopping-item):not(.is-creating-shopping-item):not(.is-shopping-settings) {
    padding-bottom: calc(var(--bottom-navigation-mobile-height) + 1rem) !important;
  }

  .habits-header-back-link,
  .tasks-header-back-link,
  .calendar-header-back-link {
    display: grid;
  }

  .page-shell--tasks.is-editing-task .task-edit-panel,
.page-shell--tasks.is-creating-task .task-create-page,
.page-shell--chores.is-editing-chore .chore-edit-panel,
.page-shell--chores.is-creating-chore .chore-create-page,
.page-shell--shopping.is-editing-shopping-item .shopping-edit-panel,
.page-shell--shopping.is-creating-shopping-item .shopping-create-page{
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    max-height: 92dvh;
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
  }

  .page-shell--tasks.is-editing-task .notes-field textarea,
  .page-shell--tasks.is-creating-task .notes-field textarea {
    min-height: 2.65rem;
    height: 2.65rem;
  }

  .page-shell--tasks.is-editing-task .task-subtask-editor,
  .page-shell--tasks.is-creating-task .task-subtask-editor {
    margin-top: 5.5rem;
  }
}

@media (min-width: 761px) {
  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-workspace,
  .page-shell--habits .habits-workspace {
    width: min(860px, 100%);
  }

  .page-shell--dashboard .daily-dashboard {
    max-width: 1200px;
    margin: 0 auto;
  }

  .page-shell--tasks.is-editing-task .task-edit-panel,
.page-shell--tasks.is-creating-task .task-create-page{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 70;
    width: min(540px, calc(100vw - 2rem));
    max-height: 86dvh;
    overflow-y: auto;
    transform: translate(-50%, -50%);
    border-radius: 22px;
  }
}

/* Final add/edit overlay pass: match supplied bottom-sheet and web-modal designs. */
@media (max-width: 760px) {
  body > .bottom-navigation {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  .bottom-navigation {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    display: flex;
    margin: 0 !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .page-shell:not(.page-shell--settings):not(.page-shell--tasks):not(.is-editing-task):not(.is-creating-task):not(.is-editing-chore):not(.is-creating-chore):not(.is-editing-shopping-item):not(.is-creating-shopping-item):not(.is-shopping-settings) {
    padding-bottom: calc(var(--bottom-navigation-mobile-height) + 1rem) !important;
  }

  .page-shell--tasks.is-editing-task,
.page-shell--tasks.is-creating-task,
.page-shell--chores.is-editing-chore,
.page-shell--chores.is-creating-chore,
.page-shell--shopping.is-editing-shopping-item,
.page-shell--shopping.is-creating-shopping-item{
    min-height: 100dvh;
    padding: 0.85rem;
    background: var(--color-cream);
  }

  .page-shell--tasks.is-editing-task::before,
.page-shell--tasks.is-creating-task::before,
.page-shell--chores.is-editing-chore::before,
.page-shell--chores.is-creating-chore::before,
.page-shell--shopping.is-editing-shopping-item::before,
.page-shell--shopping.is-creating-shopping-item::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(36, 49, 44, 0.38);
    backdrop-filter: blur(2px);
  }

  .page-shell--tasks.is-editing-task .sheet-backdrop-cancel,
.page-shell--tasks.is-creating-task .sheet-backdrop-cancel{
    position: fixed;
    inset: 0;
    z-index: 56;
    display: block;
    color: transparent;
    text-decoration: none;
  }

  .page-shell--tasks.is-editing-task .tasks-app-header,
.page-shell--tasks.is-creating-task .tasks-app-header,
.page-shell--chores.is-editing-chore .chores-app-header,
.page-shell--chores.is-creating-chore .chores-app-header,
.page-shell--shopping.is-editing-shopping-item .shopping-app-header,
.page-shell--shopping.is-creating-shopping-item .shopping-app-header{
    display: grid;
  }

  .page-shell--tasks.is-editing-task .tasks-list-panel,
.page-shell--tasks.is-creating-task .tasks-list-panel,
.page-shell--chores.is-editing-chore .chores-list-panel,
.page-shell--chores.is-creating-chore .chores-list-panel,
.page-shell--shopping.is-editing-shopping-item .shopping-list-panel,
.page-shell--shopping.is-creating-shopping-item .shopping-list-panel,
.page-shell--shopping.is-editing-shopping-item .shopping-quick-add{
    display: grid;
    opacity: 0.52;
  }

  .page-shell--shopping.is-editing-shopping-item .shopping-list,
  .page-shell--shopping.is-creating-shopping-item .shopping-list {
    display: block;
  }

  .page-shell--tasks.is-editing-task .tasks-workspace,
.page-shell--tasks.is-creating-task .tasks-workspace,
.page-shell--chores.is-editing-chore .chores-workspace,
.page-shell--chores.is-creating-chore .chores-workspace,
.page-shell--shopping.is-editing-shopping-item .shopping-workspace,
.page-shell--shopping.is-creating-shopping-item .shopping-workspace{
    display: block;
    height: auto;
    overflow: visible;
  }

  .page-shell--tasks.is-editing-task .task-edit-panel,
.page-shell--tasks.is-creating-task .task-create-page,
.page-shell--chores.is-editing-chore .chore-edit-panel,
.page-shell--chores.is-creating-chore .chore-create-page,
.page-shell--shopping.is-editing-shopping-item .shopping-edit-panel,
.page-shell--shopping.is-creating-shopping-item .shopping-create-page{
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    display: grid;
    gap: 0.85rem;
    max-height: 92dvh;
    min-height: auto;
    overflow-y: auto;
    padding: 0.7rem 1rem calc(6.3rem + env(safe-area-inset-bottom));
    border: 1px solid color-mix(in srgb, var(--color-line) 80%, transparent);
    border-radius: 24px 24px 0 0;
    background: var(--color-card);
    overscroll-behavior: contain;
  }

  .page-shell--tasks.is-editing-task .task-edit-panel::before,
.page-shell--tasks.is-creating-task .task-create-page::before,
.page-shell--chores.is-editing-chore .chore-edit-panel::before,
.page-shell--chores.is-creating-chore .chore-create-page::before,
.page-shell--shopping.is-editing-shopping-item .shopping-edit-panel::before,
.page-shell--shopping.is-creating-shopping-item .shopping-create-page::before{
    display: none;
    content: none;
  }

  .page-shell--tasks.is-editing-task .task-edit-panel > .panel-heading,
.page-shell--tasks.is-creating-task .task-create-page > .panel-heading,
.page-shell--chores.is-editing-chore .chore-edit-panel > .panel-heading,
.page-shell--chores.is-creating-chore .chore-create-page > .panel-heading,
.page-shell--shopping.is-editing-shopping-item .shopping-edit-panel > .panel-heading,
.page-shell--shopping.is-creating-shopping-item .shopping-create-page > .panel-heading{
    display: none;
  }

  .task-edit-mobile-header,
.chore-edit-mobile-header,
.shopping-edit-mobile-header{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    margin: 0;
  }

  .task-edit-mobile-header h2,
.chore-edit-mobile-header h2,
.shopping-edit-mobile-header h2{
    margin: 0;
    color: var(--color-ink);
    font-size: 1.62rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
  }

  .task-back-link,
  .habit-back-link,
  .chore-back-link,
  .shopping-back-link {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: var(--color-card);
    color: var(--color-muted);
    font-size: 1.85rem;
  }

  .page-shell--tasks.is-editing-task .task-form__grid--personal,
.page-shell--tasks.is-creating-task .task-form__grid--personal,
.page-shell--chores.is-editing-chore .chore-form .task-form__grid--chore,
.page-shell--chores.is-creating-chore .chore-form .task-form__grid--chore,
.page-shell--shopping.is-editing-shopping-item .task-form__grid--shopping-item,
.page-shell--shopping.is-creating-shopping-item .shopping-add-form{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .page-shell--tasks .task-form .field--emoji,
.page-shell--chores .chore-form .field--emoji{
    grid-column: 1 / -1;
  }

  .page-shell--tasks .task-form .field--title,
.page-shell--tasks .task-form .field--url,
.page-shell--tasks .task-form .field--assignee,
.page-shell--tasks .task-form .field--recurrence-frequency,
.page-shell--tasks .task-form .recurrence-custom-fields,
.page-shell--chores .chore-form .field--title,
.page-shell--chores .chore-form .field--description,
.page-shell--chores .chore-form .field--assignee,
.page-shell--shopping .shopping-add-form__item,
.page-shell--shopping .shopping-add-form__url,
.page-shell--shopping .shopping-add-form__notes,
.page-shell--shopping .shopping-item-edit-form .field:first-child,
.page-shell--shopping .shopping-item-edit-form .field:nth-child(3),
.page-shell--shopping .shopping-item-edit-form .notes-field,
.notes-field{
    grid-column: 1 / -1;
  }

  .page-shell--tasks .task-form,
.chore-form,
.shopping-add-form,
.shopping-item-edit-form{
    gap: 0.8rem;
  }

  .page-shell--tasks .task-form .field label,
.chore-form .field label,
.shopping-add-form .field label,
.shopping-item-edit-form .field label{
    margin: 0;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
  }

  .page-shell--tasks .task-form .field input,
.page-shell--tasks .task-form .field select,
.page-shell--tasks .task-form .field textarea,
.chore-form .field input,
.chore-form .field select,
.chore-form .field textarea,
.shopping-add-form .field input,
.shopping-add-form .field select,
.shopping-add-form .field textarea,
.shopping-item-edit-form .field input,
.shopping-item-edit-form .field select,
.shopping-item-edit-form .field textarea{
    min-height: 3.15rem;
    border: 1px solid var(--color-line);
    border-radius: 13px;
    background: #fffefa;
    color: var(--color-ink);
    font-size: 16px;
    font-weight: 760;
  }

  .page-shell--tasks .field--emoji input,
.chore-form .field--emoji input{
    min-height: 3.15rem;
    width: 100%;
    font-size: 1.35rem;
  }

  .page-shell--tasks .field--task-date input,
.page-shell--tasks .field--task-time input,
.page-shell--tasks .field--recurrence-frequency select{
    border-radius: 999px;
    background: var(--color-teal-tint);
    color: var(--color-teal-dark);
  }

  .page-shell--tasks .notes-field textarea,
.chore-form .notes-field textarea,
.shopping-add-form .notes-field textarea,
.shopping-item-edit-form .notes-field textarea{
    min-height: 3.15rem;
    height: 3.15rem;
  }

  .page-shell--tasks.is-editing-task .task-subtask-editor,
  .page-shell--tasks.is-creating-task .task-subtask-editor,
  .page-shell--chores.is-editing-chore .chore-checklist-editor,
  .page-shell--chores.is-creating-chore .chore-checklist-editor {
    margin-top: 0;
  }

  .page-shell--tasks.is-editing-task .task-form > .form-actions,
.page-shell--tasks.is-creating-task .task-form > .form-actions,
.page-shell--chores.is-editing-chore .chore-form > .form-actions,
.page-shell--chores.is-creating-chore .chore-form > .form-actions,
.page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .form-actions--edit-submit,
.page-shell--shopping.is-creating-shopping-item .shopping-add-form__actions{
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 82;
    display: grid;
    justify-content: stretch;
    margin: 0;
    padding: 0.65rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-card) 94%, white);
    pointer-events: none;
  }

  .page-shell--tasks.is-editing-task .task-form .form-actions--edit-submit,
.page-shell--chores.is-editing-chore .chore-form .form-actions--edit-submit,
.page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .form-actions--edit-submit{
    padding-left: 4.9rem;
  }

  .page-shell--shopping.is-creating-shopping-item .shopping-add-form__actions .app-button:not(.app-button--primary),
  .page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .form-actions--edit-submit .app-button:not(.app-button--primary) {
    display: none;
  }

  .page-shell--tasks .task-form .form-actions .app-button--primary,
.chore-form .form-actions .app-button--primary,
.shopping-add-form .app-button--primary,
.shopping-item-edit-form .form-actions .app-button--primary{
    width: 100%;
    min-height: 3.35rem;
    border-radius: 13px;
    pointer-events: auto;
  }

  .page-shell--tasks.is-editing-task .task-delete-icon-form,
.page-shell--chores.is-editing-chore .chore-delete-icon-form,
.page-shell--shopping.is-editing-shopping-item .shopping-delete-icon-form{
    position: fixed;
    bottom: calc(0.85rem + env(safe-area-inset-bottom));
    left: 1rem;
    z-index: 83;
    margin: 0;
  }

  .task-delete-icon-button,
.chore-delete-icon-button,
.shopping-delete-icon-button{
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 13px;
  }
}

@media (min-width: 761px) {
  .page-shell--tasks.is-editing-task::before,
.page-shell--tasks.is-creating-task::before,
.page-shell--chores.is-editing-chore::before,
.page-shell--chores.is-creating-chore::before,
.page-shell--shopping.is-editing-shopping-item::before,
.page-shell--shopping.is-creating-shopping-item::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(36, 49, 44, 0.35);
    backdrop-filter: blur(1.5px);
  }

  .page-shell--tasks.is-editing-task .sheet-backdrop-cancel,
.page-shell--tasks.is-creating-task .sheet-backdrop-cancel{
    position: fixed;
    inset: 0;
    z-index: 56;
    display: block;
    color: transparent;
    text-decoration: none;
  }

  .page-shell--tasks.is-editing-task .tasks-list-panel,
.page-shell--tasks.is-creating-task .tasks-list-panel,
.page-shell--chores.is-editing-chore .chores-list-panel,
.page-shell--chores.is-creating-chore .chores-list-panel,
.page-shell--shopping.is-editing-shopping-item .shopping-list-panel,
.page-shell--shopping.is-creating-shopping-item .shopping-list-panel{
    opacity: 0.58;
  }

  .page-shell--tasks.is-editing-task .task-edit-panel,
.page-shell--tasks.is-creating-task .task-create-page,
.page-shell--chores.is-editing-chore .chore-edit-panel,
.page-shell--chores.is-creating-chore .chore-create-page,
.page-shell--shopping.is-editing-shopping-item .shopping-edit-panel,
.page-shell--shopping.is-creating-shopping-item .shopping-create-page{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 70;
    width: min(540px, calc(100vw - 2rem));
    max-height: min(86dvh, 44rem);
    overflow-y: auto;
    padding: 0.95rem 0.95rem 4.65rem;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    background: var(--color-card);
    transform: translate(-50%, -50%);
    overscroll-behavior: contain;
  }

  .page-shell--tasks.is-editing-task .task-edit-panel > .panel-heading,
.page-shell--tasks.is-creating-task .task-create-page > .panel-heading,
.page-shell--chores.is-editing-chore .chore-edit-panel > .panel-heading,
.page-shell--chores.is-creating-chore .chore-create-page > .panel-heading,
.page-shell--shopping.is-editing-shopping-item .shopping-edit-panel > .panel-heading,
.page-shell--shopping.is-creating-shopping-item .shopping-create-page > .panel-heading{
    display: none;
  }

  .task-edit-mobile-header,
.chore-edit-mobile-header,
.shopping-edit-mobile-header{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
  }

  .task-edit-mobile-header h2,
.chore-edit-mobile-header h2,
.shopping-edit-mobile-header h2{
    margin: 0;
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0;
  }

  .page-shell--tasks.is-editing-task .task-delete-icon-form,
.page-shell--chores.is-editing-chore .chore-delete-icon-form,
.page-shell--shopping.is-editing-shopping-item .shopping-delete-icon-form{
    position: absolute;
    bottom: 0.95rem;
    left: 0.95rem;
    z-index: 2;
    margin: 0;
  }

  .page-shell--tasks.is-editing-task .task-form .form-actions--edit-submit,
.page-shell--chores.is-editing-chore .chore-form .form-actions--edit-submit,
.page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .form-actions--edit-submit,
.page-shell--tasks.is-creating-task .task-form > .form-actions,
.page-shell--chores.is-creating-chore .chore-form > .form-actions,
.page-shell--shopping.is-creating-shopping-item .shopping-add-form__actions{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: grid;
    justify-content: stretch;
    margin: 0;
    padding: 0.95rem;
    background: var(--color-card);
  }

  .page-shell--tasks.is-editing-task .task-form .form-actions--edit-submit,
.page-shell--chores.is-editing-chore .chore-form .form-actions--edit-submit,
.page-shell--shopping.is-editing-shopping-item .shopping-item-edit-form .form-actions--edit-submit{
    padding-left: 5rem;
  }

  .page-shell--tasks .task-form .form-actions .app-button--primary,
.chore-form .form-actions .app-button--primary,
.shopping-add-form .app-button--primary,
.shopping-item-edit-form .form-actions .app-button--primary{
    width: 100%;
    min-height: 2.55rem;
    border-radius: 8px;
  }
}

/* Task add/edit chip controls: native fields submit; chips provide redesign UI. */
.field--task-schedule,
.page-shell--tasks .task-form .field--recurrence-frequency,
.page-shell--tasks .task-form .field--assignee {
  grid-column: 1 / -1;
}

.task-chip-native-input,
.task-chip-native-select {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.task-form-chip--native-picker {
  position: relative;
  overflow: hidden;
}

.task-form-chip--native-picker .task-chip-native-input {
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  opacity: 0;
  /* Let the visible chip own activation so shared JS can call showPicker
     consistently instead of relying on browser-specific transparent-input clicks. */
  pointer-events: none;
  font-size: 16px;
}

.task-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.task-form-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.4rem;
  padding: 0.45rem 0.8rem;
  border: 1.5px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
}

.task-form-chip.is-selected {
  border-color: var(--color-teal);
  background: var(--color-teal);
  color: #fff;
}

.task-form-chip--member.is-selected {
  border-color: var(--member-accent, var(--color-teal));
  background: color-mix(in srgb, var(--member-accent, var(--color-teal)) 16%, var(--color-card));
  color: var(--color-ink);
}

.task-form-chip__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--member-accent, var(--color-teal));
}

.task-time-clear-button {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  border: 1.5px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-muted);
  cursor: pointer;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
}

.task-time-clear-button[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  body > .bottom-navigation {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  .bottom-navigation {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    display: flex;
    margin: 0 !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .page-shell:not(.page-shell--settings):not(.page-shell--tasks):not(.is-editing-task):not(.is-creating-task):not(.is-editing-chore):not(.is-creating-chore):not(.is-editing-shopping-item):not(.is-creating-shopping-item):not(.is-shopping-settings) {
    padding-bottom: calc(var(--bottom-navigation-mobile-height) + 1rem) !important;
  }

  .page-shell--tasks .task-form .field label {
    color: var(--color-muted);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .page-shell--tasks.is-editing-task .task-form__grid--personal,
  .page-shell--tasks.is-creating-task .task-form__grid--personal {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .page-shell--tasks .task-form .field--emoji {
    grid-column: 1;
  }

  .page-shell--tasks .task-form .field--title {
    grid-column: 2;
  }

  .page-shell--tasks .task-form .field--url,
  .page-shell--tasks .task-form .field--task-schedule,
  .page-shell--tasks .task-form .field--recurrence-frequency,
  .page-shell--tasks .task-form .field--assignee,
  .page-shell--tasks .task-form .recurrence-custom-fields {
    grid-column: 1 / -1;
  }

  .task-form-chip {
    min-height: 2.35rem;
    padding-inline: 0.75rem;
    font-size: 0.88rem;
  }
}

/* Final design-alignment pass for supplied Improved Screens refs. */
:root {
  --app-font: Helvetica, Arial, sans-serif;
  --app-display-font: Helvetica, Arial, sans-serif;
  --font-size-display: 1.72rem;
  --font-size-display-lg: 2.42rem;
  --font-weight-title: 860;
  --font-weight-strong: 790;
}

body,
button,
input,
select,
textarea {
  font-family: var(--app-font);
}

.daily-dashboard__header h1,
.chores-app-header .app-header__title,
.tasks-app-header .app-header__title,
.habits-app-header .app-header__title,
.shopping-app-header .app-header__title,
.family-app-header .app-header__title,
.calendar-app-header .app-header__title,
.page-shell--settings .app-header__title {
  font-family: var(--app-display-font);
  font-size: clamp(1.72rem, 7vw, 2.28rem);
  font-weight: 900;
  line-height: 1.04;
}

.daily-habit-stats,
.daily-task-due,
.habit-stats,
.daily-calendar-time,
.calendar-event-time,
.task-row__overdue {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--app-primary-ink);
  font-size: 0.86rem;
  font-weight: 840;
}

.daily-task-due.is-overdue,
.task-row__overdue,
.task-subtask-preview__due.is-overdue,
.daily-task-subtask-preview__due.is-overdue {
  background: transparent;
  color: var(--app-danger);
}

.habit-stats.is-missed {
  color: var(--app-danger);
}

.habit-stats.has-streak {
  color: var(--app-primary-ink);
}

.daily-habits-progress-pill--mobile,
.daily-habits-progress-pill--desktop,
.daily-tasks-open-pill,
.daily-calendar-events-pill,
.daily-habit-status {
  display: none;
}

.daily-calendar-row,
.calendar-event-row {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  padding: 0.72rem 0.75rem;
  border: 1px solid var(--app-hairline);
  border-radius: 12px;
  background: var(--app-surface);
}

.daily-calendar-row::before,
.calendar-event-row__main::before {
  content: "";
  width: 0.28rem;
  align-self: stretch;
  border-radius: 999px;
  background: var(--event-accent, var(--app-primary));
}

.daily-calendar-row__main,
.calendar-event-row__main {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
}

.daily-calendar-row__main {
  grid-template-columns: minmax(0, 1fr) minmax(3.9rem, max-content);
}

.daily-calendar-row::before {
  position: absolute;
  top: 0.72rem;
  bottom: 0.72rem;
  left: 0.75rem;
}

.daily-calendar-row__main {
  padding-left: 0.95rem;
}

.calendar-event-row__copy {
  gap: 0.12rem;
}

.calendar-event-row__date {
  display: block;
  color: var(--habits-ink);
  font-size: 0.96rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
}

.calendar-event-time {
  color: var(--habits-ink);
  font-size: 0.96rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
}

.task-subtask-preview,
.daily-task-subtask-preview {
  margin-top: 0.35rem;
  padding-top: 0;
  padding-left: 0.75rem;
  border-top: 0;
  border-left: 2px solid var(--app-line);
}

.task-subtask-preview__item,
.daily-task-subtask-preview__item {
  padding: 0.08rem 0;
}

.task-toggle input,
.personal-task-toggle input,
.habit-toggle input,
.daily-task-toggle input,
.daily-habit-toggle input,
.chore-toggle input,
.shopping-item-toggle input,
.shopping-item-row input[type="checkbox"],
.family-assigned-work-row__toggle input[type="checkbox"] {
  display: grid;
  place-items: center;
}

.task-toggle input:checked::after,
.personal-task-toggle input:checked::after,
.page-shell--tasks .personal-task-toggle input[type="checkbox"]:checked::after,
.habit-toggle input:checked::after,
.daily-task-toggle input:checked::after,
.daily-habit-toggle input:checked::after,
.chore-toggle input:checked::after,
.shopping-item-toggle input:checked::after,
.shopping-item-row input[type="checkbox"]:checked::after,
.family-assigned-work-row__toggle input[type="checkbox"]:checked::after {
  width: 62%;
  height: 62%;
  transform: translate(-50%, -50%);
  mask-position: center;
  -webkit-mask-position: center;
}

.habit-progress-card {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
  padding: 0.95rem;
  border: 1px solid var(--app-line);
  border-radius: 14px;
  background: var(--app-primary-soft);
}

.habit-progress-card__copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.habit-progress-card__copy strong {
  color: var(--habits-primary);
  font-size: 1.05rem;
  font-weight: 900;
}

.habit-progress-card__bar {
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface));
}

.habit-progress-card__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--app-primary);
}

.tasks-list-titlebar {
  display: none;
}

.settings-group {
  display: grid;
  gap: 0.45rem;
  width: min(100%, 46rem);
}

.settings-group + .settings-group {
  margin-top: 1rem;
}

.settings-group > h2 {
  margin: 0 0 0 0.35rem;
  color: var(--app-muted);
  font-size: 0.82rem;
  font-weight: 860;
}

.settings-row-group {
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 16px;
  background: var(--app-surface);
}

.settings-list-row,
.page-shell--settings .settings-list-row.settings-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 4.15rem;
  padding: 0.8rem 0.95rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

.settings-list-row + .settings-list-row,
.settings-row-group > .settings-list-row + .settings-list-row {
  border-top: 1px solid var(--app-hairline);
}

.settings-list-row__icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  background: var(--app-primary-soft);
  color: var(--app-primary-ink);
}

.settings-list-row__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.settings-list-row__copy,
.settings-list-row summary > div,
.settings-card__header > div {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.task-card-settings-form {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.task-card-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.task-card-settings-row > span {
  display: grid;
  gap: 0.18rem;
}

.task-card-settings-row strong,
.task-card-settings-row em {
  display: block;
}

.task-card-settings-row em {
  color: var(--settings-muted);
  font-style: normal;
}

.appearance-settings-form {
  display: grid;
}

.appearance-settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
}

.appearance-settings-row + .appearance-settings-row {
  border-top: 1px solid var(--settings-hairline);
}

.appearance-settings-row > span {
  display: grid;
  gap: 0.2rem;
}

.appearance-settings-row strong,
.appearance-settings-row em {
  font-style: normal;
}

.appearance-settings-row em {
  color: var(--settings-muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.appearance-settings-row input[type="radio"] {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  accent-color: var(--settings-primary);
}

.habits-tutorial-card {
  padding: 0;
  overflow: hidden;
}

.habits-tutorial-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.habits-tutorial-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1rem;
}

.habits-tutorial-step + .habits-tutorial-step {
  border-top: 1px solid var(--settings-hairline);
}

.habits-tutorial-step__number {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: var(--settings-primary-soft);
  color: var(--settings-primary-ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.habits-tutorial-step h3,
.habits-tutorial-key h3 {
  margin: 0;
  color: var(--settings-ink);
  font-size: 1rem;
  font-weight: 860;
  line-height: 1.2;
}

.habits-tutorial-step p {
  margin: 0.25rem 0 0;
  color: var(--settings-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.habits-tutorial-key {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
  border-top: 1px solid var(--settings-hairline);
  background: color-mix(in srgb, var(--settings-primary-soft) 34%, var(--settings-card));
}

.habits-tutorial-key dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
}

.habits-tutorial-key dl > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.habits-tutorial-key dt,
.habits-tutorial-key dd {
  margin: 0;
}

.habits-tutorial-key__value {
  font-size: 0.92rem;
  font-weight: 900;
}

.habits-tutorial-key__value--positive {
  color: var(--app-primary-ink);
}

.habits-tutorial-key__value--zero {
  color: var(--settings-muted-2);
}

.habits-tutorial-key__value--negative {
  color: var(--color-red);
}

.habits-tutorial-key dd {
  color: var(--settings-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.habits-tutorial-open {
  justify-self: stretch;
  margin: 0 1rem 1rem;
  text-align: center;
}

.tasks-tutorial-card {
  padding: 0;
  overflow: hidden;
}

.tasks-tutorial-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tasks-tutorial-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1rem;
}

.tasks-tutorial-step + .tasks-tutorial-step {
  border-top: 1px solid var(--settings-hairline);
}

.tasks-tutorial-step__number {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: var(--settings-primary-soft);
  color: var(--settings-primary-ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.tasks-tutorial-step h3,
.tasks-tutorial-key h3 {
  margin: 0;
  color: var(--settings-ink);
  font-size: 1rem;
  font-weight: 860;
  line-height: 1.2;
}

.tasks-tutorial-step p {
  margin: 0.25rem 0 0;
  color: var(--settings-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.tasks-tutorial-key {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
  border-top: 1px solid var(--settings-hairline);
  background: color-mix(in srgb, var(--settings-primary-soft) 34%, var(--settings-card));
}

.tasks-tutorial-key dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
}

.tasks-tutorial-key dl > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.tasks-tutorial-key dt,
.tasks-tutorial-key dd {
  margin: 0;
}

.tasks-tutorial-key__value {
  font-size: 0.92rem;
  font-weight: 900;
}

.tasks-tutorial-key__value--overdue {
  color: var(--app-danger);
}

.tasks-tutorial-key__value--today,
.tasks-tutorial-key__value--repeating {
  color: var(--app-primary-ink);
}

.tasks-tutorial-key dd {
  color: var(--settings-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.tasks-tutorial-open {
  justify-self: stretch;
  margin: 0 1rem 1rem;
  text-align: center;
}

.chores-tutorial-card {
  padding: 0;
  overflow: hidden;
}

.chores-tutorial-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chores-tutorial-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1rem;
}

.chores-tutorial-step + .chores-tutorial-step {
  border-top: 1px solid var(--settings-hairline);
}

.chores-tutorial-step__number {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: var(--settings-primary-soft);
  color: var(--settings-primary-ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.chores-tutorial-step h3,
.chores-tutorial-key h3 {
  margin: 0;
  color: var(--settings-ink);
  font-size: 1rem;
  font-weight: 860;
  line-height: 1.2;
}

.chores-tutorial-step p {
  margin: 0.25rem 0 0;
  color: var(--settings-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.chores-tutorial-key {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
  border-top: 1px solid var(--settings-hairline);
  background: color-mix(in srgb, var(--settings-primary-soft) 34%, var(--settings-card));
}

.chores-tutorial-key dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
}

.chores-tutorial-key dl > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.chores-tutorial-key dt,
.chores-tutorial-key dd {
  margin: 0;
}

.chores-tutorial-key__value {
  font-size: 0.92rem;
  font-weight: 900;
}

.chores-tutorial-key__value--household {
  color: var(--app-danger);
}

.chores-tutorial-key__value--tidy {
  color: var(--app-primary-ink);
}

.chores-tutorial-key__value--deep {
  color: var(--settings-muted-2);
}

.chores-tutorial-key dd {
  color: var(--settings-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.chores-tutorial-open {
  justify-self: stretch;
  margin: 0 1rem 1rem;
  text-align: center;
}

.calendar-tutorial-card {
  padding: 0;
  overflow: hidden;
}

.calendar-tutorial-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.calendar-tutorial-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1rem;
}

.calendar-tutorial-step + .calendar-tutorial-step {
  border-top: 1px solid var(--settings-hairline);
}

.calendar-tutorial-step__number {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: var(--settings-primary-soft);
  color: var(--settings-primary-ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.calendar-tutorial-step h3,
.calendar-tutorial-key h3 {
  margin: 0;
  color: var(--settings-ink);
  font-size: 1rem;
  font-weight: 860;
  line-height: 1.2;
}

.calendar-tutorial-step p {
  margin: 0.25rem 0 0;
  color: var(--settings-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.calendar-tutorial-key {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
  border-top: 1px solid var(--settings-hairline);
  background: color-mix(in srgb, var(--settings-primary-soft) 34%, var(--settings-card));
}

.calendar-tutorial-key dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
}

.calendar-tutorial-key dl > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.calendar-tutorial-key dt,
.calendar-tutorial-key dd {
  margin: 0;
}

.calendar-tutorial-key__value {
  color: var(--app-primary-ink);
  font-size: 0.92rem;
  font-weight: 900;
}

.calendar-tutorial-key__value--private {
  color: var(--settings-muted-2);
}

.calendar-tutorial-key dd {
  color: var(--settings-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.calendar-tutorial-open {
  justify-self: stretch;
  margin: 0 1rem 1rem;
  text-align: center;
}

.shopping-tutorial-card {
  padding: 0;
  overflow: hidden;
}

.shopping-tutorial-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shopping-tutorial-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1rem;
}

.shopping-tutorial-step + .shopping-tutorial-step {
  border-top: 1px solid var(--settings-hairline);
}

.shopping-tutorial-step__number {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: var(--settings-primary-soft);
  color: var(--settings-primary-ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.shopping-tutorial-step h3,
.shopping-tutorial-key h3 {
  margin: 0;
  color: var(--settings-ink);
  font-size: 1rem;
  font-weight: 860;
  line-height: 1.2;
}

.shopping-tutorial-step p {
  margin: 0.25rem 0 0;
  color: var(--settings-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.shopping-tutorial-key {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
  border-top: 1px solid var(--settings-hairline);
  background: color-mix(in srgb, var(--settings-primary-soft) 34%, var(--settings-card));
}

.shopping-tutorial-key dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
}

.shopping-tutorial-key dl > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.shopping-tutorial-key dt,
.shopping-tutorial-key dd {
  margin: 0;
}

.shopping-tutorial-key__value {
  color: var(--app-primary-ink);
  font-size: 0.92rem;
  font-weight: 900;
}

.shopping-tutorial-key__value--done {
  color: var(--settings-muted-2);
}

.shopping-tutorial-key dd {
  color: var(--settings-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.shopping-tutorial-open {
  justify-self: stretch;
  margin: 0 1rem 1rem;
  text-align: center;
}

.family-tutorial-card {
  padding: 0;
  overflow: hidden;
}

.family-tutorial-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.family-tutorial-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1rem;
}

.family-tutorial-step + .family-tutorial-step {
  border-top: 1px solid var(--settings-hairline);
}

.family-tutorial-step__number {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: var(--settings-primary-soft);
  color: var(--settings-primary-ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.family-tutorial-step h3,
.family-tutorial-key h3 {
  margin: 0;
  color: var(--settings-ink);
  font-size: 1rem;
  font-weight: 860;
  line-height: 1.2;
}

.family-tutorial-step p {
  margin: 0.25rem 0 0;
  color: var(--settings-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.family-tutorial-key {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
  border-top: 1px solid var(--settings-hairline);
  background: color-mix(in srgb, var(--settings-primary-soft) 34%, var(--settings-card));
}

.family-tutorial-key dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
}

.family-tutorial-key dl > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.family-tutorial-key dt,
.family-tutorial-key dd {
  margin: 0;
}

.family-tutorial-key__value {
  color: var(--app-primary-ink);
  font-size: 0.92rem;
  font-weight: 900;
}

.family-tutorial-key__value--habit {
  color: var(--family-primary-ink);
}

.family-tutorial-key__value--chore {
  color: var(--settings-muted-2);
}

.family-tutorial-key dd {
  color: var(--settings-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.family-tutorial-open {
  justify-self: stretch;
  margin: 0 1rem 1rem;
  text-align: center;
}

.settings-list-row__copy strong,
.settings-card__header h2 {
  margin: 0;
  color: var(--app-ink);
  font-size: 1rem;
  font-weight: 880;
  line-height: 1.18;
}

.settings-list-row__copy em,
.settings-card__header p {
  margin: 0;
  color: var(--app-muted);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 690;
  line-height: 1.25;
}

.settings-list-row__chevron,
.calendar-settings-panel__toggle,
.shortcut-panel__toggle {
  color: var(--app-muted);
  font-size: 1.35rem;
}

.settings-list-row--details {
  display: block;
  padding: 0;
}

.settings-list-row--details > summary.settings-card__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.15rem;
  padding: 0.8rem 0.95rem;
}

.settings-list-row--details .settings-card__header h2::before {
  display: none;
}

.calendar-settings-panel__content,
.shortcut-panel__content {
  padding: 0 0.95rem 0.95rem 4rem;
}

.page-shell--household-settings {
  align-content: start;
}

.page-shell--household-settings .settings-card {
  width: min(100%, 46rem);
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}

.page-shell--household-settings .household-roster-section {
  gap: 1rem;
  padding: 1rem;
}

.page-shell--household-settings .settings-section-heading {
  padding: 0.95rem 1rem 0.45rem;
}

.page-shell--household-settings .household-roster-section .settings-section-heading {
  padding: 0;
}

.page-shell--household-settings .household-invitation-row,
.page-shell--household-settings .household-invitation-form {
  margin: 0;
  border-radius: 0;
  border-right: 0;
  border-left: 0;
}

/* Settings grouped-row contract: list rows navigate, detail pages hold controls. */
.settings-list-row,
.page-shell--settings .settings-list-row.settings-card {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.settings-list-row__status {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  color: var(--app-primary-ink);
  font-size: 0.82rem;
  font-weight: 820;
  white-space: nowrap;
}

.settings-list-row__status span {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: var(--app-primary);
}

.settings-list-row__icon--warning {
  background: color-mix(in srgb, #f2c164 22%, var(--app-surface));
}

.page-shell--settings-detail,
.page-shell--household-settings {
  justify-items: start;
}

.page-shell--settings-detail .settings-card,
.page-shell--settings-detail .settings-detail-intro,
.page-shell--household-settings .settings-detail-intro,
.page-shell--household-settings .settings-card {
  width: min(100%, 46rem);
}

.settings-detail-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem clamp(1.3rem, 4vw, 2.3rem) 0.1rem;
}

.settings-detail-intro h2 {
  margin: 0 0 0.3rem;
  color: var(--settings-primary);
  font-size: 1.18rem;
  font-weight: 810;
  line-height: 1.1;
}

.settings-detail-intro p {
  max-width: 34rem;
  margin: 0;
  color: var(--settings-muted);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.22;
}

.settings-detail-card {
  gap: 1rem;
}

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

.settings-detail-card .settings-card__header h2::before {
  display: none;
}

.household-member-color-form {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  display: block;
  width: 1.15rem;
  min-width: 0;
}

.household-member-color-form label {
  color: var(--settings-muted);
  font-size: 0.82rem;
  font-weight: 720;
}

.household-member-color-form input[type="color"] {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.household-member-row__actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.household-member-create-form.household-member-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.household-member-row__actions .icon-button {
  color: var(--settings-ink);
}

.household-member-row__actions .icon-button:disabled {
  color: var(--settings-ink);
  cursor: not-allowed;
  opacity: 0.32;
}

.household-member-row__delete-button {
  border-color: transparent;
  background: transparent;
  color: var(--settings-ink);
  font-size: 1.45rem;
  font-weight: 640;
  line-height: 1;
}

.household-member-row__delete-button:hover,
.household-member-row__delete-button:focus-visible {
  background: transparent;
}

@media (min-width: 761px) {
  .page-shell--settings:not(.page-shell--settings-detail):not(.page-shell--household-settings) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .page-shell--settings:not(.page-shell--settings-detail):not(.page-shell--household-settings) .settings-group {
    width: min(100%, 46rem);
  }

  .page-shell--settings-detail,
  .page-shell--household-settings {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .page-shell--settings {
    padding-bottom: calc(var(--bottom-navigation-mobile-height) + 1rem);
  }

  body:has(.page-shell--settings) .bottom-navigation {
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    width: 100%;
    min-height: calc(5.25rem + env(safe-area-inset-bottom));
    padding: 0.7rem 1.4rem max(0.7rem, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--app-line);
    border-radius: 0;
    background: color-mix(in srgb, var(--app-surface) 92%, white);
    transform: none;
  }

  body:has(.page-shell--settings) .bottom-navigation__link {
    flex: 1 1 0;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.18rem;
    min-width: 0;
    min-height: 4.45rem;
    padding: 0.48rem 0.2rem;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--app-muted);
    font-size: 0.86rem;
    font-weight: 760;
  }

  body:has(.page-shell--settings) .bottom-navigation__link.is-active {
    border-color: transparent;
    background: var(--app-primary-soft);
    color: var(--app-primary-ink);
  }

  .household-member-color-form {
    flex-wrap: nowrap;
  }
}

@media (max-width: 760px) {
  body > .bottom-navigation {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  .bottom-navigation {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    display: flex;
    margin: 0 !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .page-shell:not(.page-shell--settings):not(.page-shell--tasks):not(.is-editing-task):not(.is-creating-task):not(.is-editing-chore):not(.is-creating-chore):not(.is-editing-shopping-item):not(.is-creating-shopping-item):not(.is-shopping-settings) {
    padding-bottom: calc(var(--bottom-navigation-mobile-height) + 1rem) !important;
  }

  .habit-progress-card__copy strong {
    font-size: 1.014rem;
    font-weight: 820;
  }

  .page-shell--habits-filter-done .habit-toggle--done input {
    width: 1.32rem;
    height: 1.32rem;
  }

  .habit-row__copy em,
  .page-shell--habits-filter-assigned .habit-row__copy em,
  .page-shell--tasks .personal-task-row__copy .task-row__meta,
  .page-shell--chores .chore-row__copy .task-row__meta,
  .family-assigned-work-row__copy .task-row__meta {
    font-size: 0.74rem;
    line-height: 1.16;
  }

  .calendar-event-row {
    padding: 0.75rem;
  }

  .settings-group {
    width: 100%;
  }

  .page-shell--dashboard {
    padding-right: 0.78rem;
    padding-left: 0.78rem;
  }

  .page-shell--dashboard .daily-dashboard {
    gap: 0.82rem;
  }

  .page-shell--dashboard .daily-inbox-panel,
  .page-shell--dashboard .daily-habits-panel,
  .page-shell--dashboard .daily-tasks-panel,
  .page-shell--dashboard .daily-calendar-panel {
    min-height: 0;
    padding: 1rem 0.95rem 1.05rem;
    border-radius: 1.25rem;
  }

  .page-shell--dashboard .daily-inbox-panel__heading,
  .page-shell--dashboard .daily-habits-panel__heading,
  .page-shell--dashboard .daily-tasks-panel__heading,
  .page-shell--dashboard .daily-calendar-panel__heading {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-content: space-between;
    gap: 0.64rem;
    margin-bottom: 0.6rem;
  }

  .page-shell--dashboard .daily-inbox-panel__heading::before,
  .page-shell--dashboard .daily-habits-panel__heading::before,
  .page-shell--dashboard .daily-tasks-panel__heading::before,
  .page-shell--dashboard .daily-calendar-panel__heading::before {
    width: 0.3rem;
    min-height: 1.48rem;
  }

  .page-shell--dashboard .daily-inbox-panel__heading .section-title,
  .page-shell--dashboard .daily-habits-panel__heading .section-title,
  .page-shell--dashboard .daily-tasks-panel__heading .section-title,
  .page-shell--dashboard .daily-calendar-panel__heading .section-title {
    font-size: 1.2rem;
    font-weight: 720;
    line-height: 1;
  }

  .daily-inbox-count-pill,
  .daily-habits-progress-pill--mobile,
  .daily-tasks-open-pill,
  .daily-calendar-events-pill--phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.05rem;
    min-height: 1.5rem;
    padding: 0 0.72rem;
    border-radius: 999px;
    background: var(--app-primary-soft);
    color: var(--app-primary-ink);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .page-shell--dashboard .daily-inbox-list {
    gap: 0;
  }

  .page-shell--dashboard .daily-inbox-row {
    min-height: 3.2rem;
    padding: 0.36rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--dashboard .daily-inbox-row + .daily-inbox-row {
    border-top: 1px solid var(--app-line);
  }

  .page-shell--dashboard .daily-inbox-row__copy .task-row__title {
    font-size: 0.95rem;
    font-weight: 680;
    line-height: 1.16;
  }

  .page-shell--dashboard .daily-habit-list {
    gap: 0;
  }

  .page-shell--dashboard .daily-habit-row {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.48rem;
    min-height: 3.36rem;
    padding: 0.24rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--dashboard .daily-habit-row + .daily-habit-row {
    border-top: 1px solid var(--app-line);
  }

  .page-shell--dashboard .daily-habit-toggle {
    width: 1.65rem;
    height: 1.65rem;
    margin: 0;
  }

  .page-shell--dashboard .daily-habit-toggle input {
    width: 1.62rem;
    height: 1.62rem;
    border-width: 2.5px;
    background: transparent;
  }

  .page-shell--dashboard .daily-habit-row__main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
  }

  .page-shell--dashboard .daily-habit-row__copy {
    min-width: 0;
  }

  .page-shell--dashboard .daily-habit-row__main .task-row__title {
    font-size: 0.95rem;
    font-weight: 680;
    line-height: 1.16;
    overflow-wrap: normal;
  }

  .page-shell--dashboard .daily-habit-stats {
    display: none;
  }

  .daily-habit-status {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: max-content;
    padding-right: 0.72rem;
    color: var(--app-muted);
    font-size: 0.82rem;
    font-weight: 680;
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
  }

  .daily-habit-status.has-streak {
    color: var(--app-primary-ink);
  }

  .daily-habit-status.is-missed {
    color: var(--app-danger);
  }

  .page-shell--dashboard .daily-habits-panel .daily-card-more-link {
    display: none;
  }

  .page-shell--dashboard .daily-task-list {
    gap: 0;
  }

  .page-shell--dashboard .daily-task-row {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.48rem;
    min-height: 3.36rem;
    padding: 0.24rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--dashboard .daily-task-row.has-subtasks {
    row-gap: 0.34rem;
    padding: 0.52rem 0 0.68rem;
  }

  .page-shell--dashboard .daily-task-row + .daily-task-row {
    border-top: 1px solid var(--app-line);
  }

  .page-shell--dashboard .daily-task-toggle {
    width: 1.65rem;
    height: 1.65rem;
    margin: 0;
  }

  .page-shell--dashboard .daily-task-toggle input {
    width: 1.62rem;
    height: 1.62rem;
    border-width: 2.5px;
    background: transparent;
  }

  .page-shell--dashboard .daily-task-row__main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.52rem;
  }

  .page-shell--dashboard .daily-task-row__main .task-row__title {
    font-size: 0.95rem;
    font-weight: 680;
    line-height: 1.16;
    overflow-wrap: normal;
  }

  .page-shell--dashboard .daily-task-due {
    display: inline-flex;
    justify-content: center;
    min-width: 4.05rem;
    padding-right: 0;
    font-size: 0.82rem;
    font-weight: 680;
    line-height: 1.1;
    text-align: center;
  }

  .page-shell--dashboard .daily-task-subtask-preview {
    grid-column: 2;
    gap: 0.16rem;
    margin-top: 0;
    padding-top: 0.12rem;
    padding-left: 0.82rem;
    border-left: 2px solid var(--app-line);
  }

  .page-shell--dashboard .daily-task-subtask-preview__item {
    min-height: 1.46rem;
    padding: 0;
    color: var(--app-ink);
    font-size: 0.82rem;
    font-weight: 680;
  }

  .page-shell--dashboard .daily-task-subtask-preview__label {
    grid-template-columns: 1.05rem minmax(0, 1fr);
    min-height: 1.46rem;
    gap: 0.36rem;
  }

  .page-shell--dashboard .daily-task-subtask-preview__input {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
  }

  .page-shell--dashboard .daily-task-subtask-preview .mini-check {
    display: none;
  }

  .page-shell--dashboard .daily-task-subtask-preview__copy {
    display: inline-flex;
    min-width: 0;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.34rem;
    color: inherit;
    line-height: 1.18;
  }

  .page-shell--dashboard .daily-task-subtask-preview__title {
    min-width: 0;
  }

  .page-shell--dashboard .daily-task-subtask-preview__due {
    flex: 0 0 auto;
    color: var(--app-primary-ink);
    font-size: inherit;
    font-weight: inherit;
  }

  .page-shell--dashboard .daily-task-subtask-preview__due.is-overdue {
    color: var(--app-danger);
  }

  .page-shell--dashboard .daily-task-subtask-preview__item.is-done {
    color: var(--app-muted);
  }

  .page-shell--dashboard .daily-task-subtask-preview__item.is-done .daily-task-subtask-preview__copy,
  .page-shell--dashboard .daily-task-subtask-preview__item.is-done .daily-task-subtask-preview__due {
    color: inherit;
    text-decoration: none;
  }

  .page-shell--dashboard .daily-task-subtask-preview__item.is-done .mini-check {
    border-color: var(--app-primary);
    background: var(--app-primary);
  }

  .page-shell--dashboard .daily-task-subtask-preview__item.is-done .mini-check::after {
    width: 62%;
    height: 62%;
    border: 0;
    background: #fffdf8;
    content: "";
    transform: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%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 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .page-shell--dashboard .daily-calendar-panel__heading {
    margin-bottom: 0.6rem;
  }

  .page-shell--dashboard .daily-calendar-panel {
    padding: 1rem 0.95rem 1.05rem;
  }

  .page-shell--dashboard .daily-calendar-list {
    gap: 0;
  }

  .page-shell--dashboard .daily-calendar-row {
    min-height: 3.36rem;
    padding: 0.24rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--dashboard .daily-calendar-row + .daily-calendar-row {
    border-top: 1px solid var(--app-line);
  }

  .page-shell--dashboard .daily-calendar-row::before {
    top: 0.42rem;
    bottom: 0.42rem;
    left: 0;
    width: 0.22rem;
    background: var(--event-accent, #6d679f);
  }

  .page-shell--dashboard .daily-calendar-row__main {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    padding-left: 1.05rem;
  }

  .page-shell--dashboard .daily-calendar-time {
    color: #46427d;
    font-size: 0.95rem;
    font-weight: 680;
    line-height: 1.16;
    text-align: right;
    white-space: normal;
  }

  .page-shell--dashboard .daily-calendar-row__main .task-row__title {
    color: var(--app-ink);
    font-size: 0.95rem;
    font-weight: 680;
    line-height: 1.16;
  }
}

@media (min-width: 761px) {
  .daily-dashboard__header h1,
  .chores-app-header .app-header__title,
  .tasks-app-header .app-header__title,
  .habits-app-header .app-header__title,
  .shopping-app-header .app-header__title,
  .family-app-header .app-header__title,
  .calendar-app-header .app-header__title,
  .page-shell--settings .app-header__title {
    font-size: clamp(2rem, 2.6vw, 2.65rem);
  }

  .page-shell--dashboard .daily-dashboard {
    height: auto;
    grid-template-rows: auto auto;
  }

  .page-shell--dashboard .daily-dashboard__grid {
    height: auto;
    align-items: start;
    overflow: visible;
  }

  .page-shell--dashboard .daily-habits-panel,
  .page-shell--dashboard .daily-tasks-panel,
  .page-shell--dashboard .daily-calendar-panel {
    align-self: start;
    max-height: none;
    overflow: visible;
  }

  .page-shell--dashboard .daily-inbox-panel,
  .page-shell--dashboard .daily-habits-panel,
  .page-shell--dashboard .daily-calendar-panel {
    padding: 1.38rem 1.45rem 1.55rem;
    border-radius: 1.28rem;
  }

  .page-shell--dashboard .daily-inbox-panel__heading,
  .page-shell--dashboard .daily-habits-panel__heading,
  .page-shell--dashboard .daily-calendar-panel__heading {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.8rem;
    margin-bottom: 0.72rem;
  }

  .page-shell--dashboard .daily-inbox-panel__heading::before,
  .page-shell--dashboard .daily-habits-panel__heading::before,
  .page-shell--dashboard .daily-calendar-panel__heading::before {
    min-height: 1.65rem;
  }

  .page-shell--dashboard .daily-inbox-panel__heading .section-title,
  .page-shell--dashboard .daily-habits-panel__heading .section-title,
  .page-shell--dashboard .daily-calendar-panel__heading .section-title {
    font-size: 1.34rem;
    line-height: 1.02;
  }

  .daily-inbox-count-pill,
  .daily-habits-progress-pill--desktop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6.9rem;
    min-height: 1.68rem;
    padding: 0 0.95rem;
    border-radius: 999px;
    background: var(--app-primary-soft);
    color: var(--app-primary-ink);
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
  }

  .page-shell--dashboard .daily-inbox-list {
    gap: 0;
  }

  .page-shell--dashboard .daily-inbox-row {
    min-height: 3.02rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--dashboard .daily-inbox-row + .daily-inbox-row {
    border-top: 1px solid var(--app-line);
  }

  .page-shell--dashboard .daily-inbox-row__copy .task-row__title {
    font-size: 0.92rem;
    font-weight: 740;
    line-height: 1.12;
  }

  .page-shell--dashboard .daily-habit-list {
    gap: 0;
  }

  .page-shell--dashboard .daily-habit-row {
    grid-template-columns: 2.05rem minmax(0, 1fr);
    gap: 0.55rem;
    min-height: 3.02rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--dashboard .daily-habit-row + .daily-habit-row {
    border-top: 1px solid var(--app-line);
  }

  .page-shell--dashboard .daily-habit-toggle {
    width: 1.8rem;
    height: 1.8rem;
    margin: 0;
  }

  .page-shell--dashboard .daily-habit-toggle input {
    width: 1.7rem;
    height: 1.7rem;
    border-width: 2.5px;
    background: transparent;
  }

  .page-shell--dashboard .daily-habit-row__main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.7rem;
  }

  .page-shell--dashboard .daily-habit-row__main .task-row__title {
    font-size: 0.9rem;
    font-weight: 660;
    line-height: 1.12;
    overflow-wrap: normal;
  }

  .page-shell--dashboard .daily-habit-stats {
    display: none;
  }

  .page-shell--dashboard .daily-habit-status {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: max-content;
    padding-right: 0.95rem;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 660;
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
  }

  .page-shell--dashboard .daily-habit-status.has-streak {
    color: var(--app-primary-ink);
  }

  .page-shell--dashboard .daily-habit-status.is-missed {
    color: var(--app-danger);
  }

  .page-shell--dashboard .daily-tasks-panel {
    padding: 1.38rem 1.45rem 1.55rem;
    border-radius: 1.28rem;
  }

  .page-shell--dashboard .daily-tasks-panel__heading {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.8rem;
    margin-bottom: 0.72rem;
  }

  .page-shell--dashboard .daily-tasks-panel__heading::before {
    min-height: 1.65rem;
  }

  .page-shell--dashboard .daily-tasks-panel__heading .section-title {
    font-size: 1.34rem;
    line-height: 1.02;
  }

  .daily-tasks-open-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    min-height: 1.68rem;
    padding: 0 0.95rem;
    border-radius: 999px;
    background: var(--app-primary-soft);
    color: var(--app-primary-ink);
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
  }

  .page-shell--dashboard .daily-task-list {
    gap: 0;
  }

  .page-shell--dashboard .daily-task-row {
    grid-template-columns: 2.05rem minmax(0, 1fr);
    gap: 0.42rem;
    min-height: 2.9rem;
    padding: 0.16rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--dashboard .daily-task-row.has-subtasks {
    row-gap: 0.28rem;
    padding: 0.46rem 0 0.52rem;
  }

  .page-shell--dashboard .daily-task-row + .daily-task-row {
    border-top: 1px solid var(--app-line);
  }

  .page-shell--dashboard .daily-task-toggle {
    width: 1.62rem;
    height: 1.62rem;
    margin: 0;
  }

  .page-shell--dashboard .daily-task-toggle input {
    width: 1.55rem;
    height: 1.55rem;
    border-width: 2.5px;
    background: transparent;
  }

  .page-shell--dashboard .daily-task-row__main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.48rem;
  }

  .page-shell--dashboard .daily-task-row__main .task-row__title {
    font-size: 0.9rem;
    font-weight: 660;
    line-height: 1.12;
    overflow-wrap: normal;
  }

  .page-shell--dashboard .daily-task-due {
    padding-right: 0.95rem;
    color: var(--app-primary-ink);
    font-size: 0.78rem;
    font-weight: 660;
    line-height: 1.1;
  }

  .page-shell--dashboard .daily-task-due.is-overdue {
    color: var(--app-danger);
  }

  .page-shell--dashboard .daily-task-subtask-preview {
    grid-column: 2;
    gap: 0.2rem;
    margin-top: 0;
    padding-top: 0.1rem;
    padding-left: 0.78rem;
    border-top: 0;
    border-left: 2px solid var(--app-line);
  }

  .page-shell--dashboard .daily-task-subtask-preview__item {
    min-height: 1.38rem;
    padding: 0;
    color: var(--app-ink);
    font-size: 0.76rem;
    font-weight: 820;
  }

  .page-shell--dashboard .daily-task-subtask-preview__label {
    grid-template-columns: 1.05rem minmax(0, 1fr);
    min-height: 1.38rem;
    gap: 0.36rem;
  }

  .page-shell--dashboard .daily-task-subtask-preview__input {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
  }

  .page-shell--dashboard .daily-task-subtask-preview .mini-check {
    display: none;
  }

  .page-shell--dashboard .daily-task-subtask-preview__copy {
    display: inline-flex;
    min-width: 0;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.28rem;
    color: inherit;
    line-height: 1.18;
  }

  .page-shell--dashboard .daily-task-subtask-preview__title {
    min-width: 0;
  }

  .page-shell--dashboard .daily-task-subtask-preview__due {
    flex: 0 0 auto;
    color: var(--app-primary-ink);
    font-size: inherit;
    font-weight: inherit;
  }

  .page-shell--dashboard .daily-task-subtask-preview__due.is-overdue {
    color: var(--app-danger);
  }

  .page-shell--dashboard .daily-task-subtask-preview__item.is-done {
    color: var(--app-muted);
  }

  .page-shell--dashboard .daily-task-subtask-preview__item.is-done .daily-task-subtask-preview__copy,
  .page-shell--dashboard .daily-task-subtask-preview__item.is-done .daily-task-subtask-preview__due {
    color: inherit;
    text-decoration: none;
  }

  .page-shell--dashboard .daily-task-subtask-preview__item.is-done .mini-check {
    border-color: var(--app-primary);
    background: var(--app-primary);
  }

  .page-shell--dashboard .daily-task-subtask-preview__item.is-done .mini-check::after {
    width: 62%;
    height: 62%;
    border: 0;
    background: #fffdf8;
    content: "";
    transform: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%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 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .page-shell--dashboard .daily-calendar-row__main {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 0.52rem;
  }

  .page-shell--dashboard .daily-calendar-time,
  .page-shell--dashboard .daily-calendar-row__main .task-row__title {
    font-size: 0.88rem;
    font-weight: 820;
    line-height: 1.1;
  }

  .daily-dashboard__header,
  .app-header.tasks-app-header,
  .app-header.habits-app-header,
  .app-header.calendar-app-header,
  .page-shell--settings .app-header {
    margin-bottom: 0.85rem;
  }

  .daily-dashboard__header,
  .page-shell--settings .app-header {
    margin-bottom: calc(var(--app-desktop-topbar-height) + 1rem);
  }

  .page-shell--dashboard .daily-dashboard {
    max-width: none;
    margin: 0;
  }

  .page-shell--dashboard .daily-dashboard__grid {
    width: min(1200px, 100%);
    margin: 0 auto;
  }

  body:has(.page-shell--dashboard) .desktop-sidebar {
    top: var(--app-desktop-header-top);
    height: var(--app-desktop-header-height);
    align-items: center;
  }

  body:has(.page-shell--dashboard) .desktop-sidebar__nav {
    min-height: var(--app-desktop-header-height);
    align-items: center;
    gap: clamp(1.05rem, 2.4vw, 2.05rem);
  }

  body:has(.page-shell--dashboard) .desktop-sidebar__link {
    align-self: center;
    gap: 0.65rem;
    min-height: 3.05rem;
    padding: 0 1.15rem;
    border-radius: 14px;
    color: color-mix(in srgb, var(--app-ink) 70%, var(--app-muted));
    font-size: 1rem;
    font-weight: 850;
  }

  body:has(.page-shell--dashboard) .desktop-sidebar__link.is-active {
    min-width: 9.1rem;
    min-height: 3.35rem;
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--app-primary) 26%, var(--app-line));
    background: color-mix(in srgb, var(--app-primary-soft) 76%, var(--app-surface));
    color: var(--app-primary-ink);
  }

  body:has(.page-shell--dashboard) .daily-dashboard__header {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--app-desktop-header-height);
    min-height: var(--app-desktop-header-height);
    margin-bottom: 1rem;
    padding: 0;
  }

  body:has(.page-shell--dashboard) .daily-dashboard__header::after {
    content: "";
    position: absolute;
    right: calc(-1 * var(--app-desktop-content-gutter));
    bottom: -1px;
    left: calc(-1 * var(--app-desktop-content-gutter));
    border-bottom: 1px solid var(--app-line);
  }

  body:has(.page-shell--dashboard) .daily-dashboard__header h1 {
    color: var(--app-primary);
    font-size: clamp(2.2rem, 2.35vw, 2.55rem);
    font-weight: 900;
    line-height: 1;
  }

  .page-shell--dashboard .daily-dashboard__settings {
    width: 2.45rem;
    min-width: 2.45rem;
    height: 2.45rem;
    align-self: center;
    border-color: var(--app-line);
    border-radius: 0.78rem;
    background: var(--app-surface);
    color: var(--app-muted-2);
  }

  .page-shell--dashboard .daily-dashboard__settings svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke-width: 1.8;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-layout,
  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-workspace {
    width: 100%;
    max-width: min(72rem, 100%);
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-list-panel {
    padding: 1rem;
  }

  .tasks-list-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
  }

  .tasks-list-titlebar h2 {
    margin: 0;
    color: var(--app-ink);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.1;
  }

  .tasks-list-titlebar p {
    margin: 0.15rem 0 0;
    color: var(--app-muted);
    font-size: 0.86rem;
    font-weight: 720;
  }

  .tasks-list-titlebar__add {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 8px;
    background: var(--app-primary);
    color: #fff;
    text-decoration: none;
    font-size: 0;
  }

  .tasks-list-titlebar__add::before,
  .tasks-list-titlebar__add::after {
    content: "";
    position: absolute;
    width: 0.95rem;
    height: 0.14rem;
    border-radius: 999px;
    background: #fff;
  }

  .tasks-list-titlebar__add::after {
    transform: rotate(90deg);
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-app-header .task-create-panel__summary {
    display: none;
  }

  .page-shell--tasks .task-row {
    grid-template-columns: 1.55rem minmax(0, 1fr) auto;
    min-height: 3.1rem;
    padding: 0.62rem 0.75rem;
    border-radius: 12px;
  }

  .page-shell--tasks .task-row.has-subtasks {
    align-items: start;
  }

  .settings-group,
  .page-shell--household-settings .settings-card {
    width: min(46rem, 100%);
  }
}

/* Global typography contract: user requested Helvetica app-wide. */
:root {
  --app-font: Helvetica, Arial, sans-serif;
  --app-display-font: Helvetica, Arial, sans-serif;
  --font-family: Helvetica, Arial, sans-serif;
}

html,
body,
body *,
button,
input,
select,
textarea,
.page-shell,
.app-header__title,
.section-title,
.task-row__title,
.habit-row__copy strong,
.settings-card__header h2 {
  font-family: Helvetica, Arial, sans-serif !important;
}

/* Dedicated Habits web view: use the supplied desktop list composition without changing filters. */
.habits-list-titlebar__copy{
  display: none;
}

.habits-list-titlebar__controls {
  display: grid;
  min-width: 0;
}

@media (min-width: 761px) {
  body:has(.page-shell--habits) .desktop-sidebar {
    top: var(--app-desktop-header-top);
    display: flex;
    height: var(--app-desktop-header-height);
    align-items: center;
  }

  body:has(.page-shell--habits) .desktop-sidebar__nav {
    min-height: var(--app-desktop-header-height);
    align-items: center;
    gap: clamp(0.9rem, 1.8vw, 1.65rem);
  }

  body:has(.page-shell--habits) .desktop-sidebar__link {
    align-self: center;
    gap: 0.55rem;
    min-height: 2.65rem;
    padding: 0 0.95rem;
    border-radius: 14px;
    color: color-mix(in srgb, var(--app-ink) 58%, var(--app-muted));
    font-size: 0.95rem;
    font-weight: 820;
  }

  body:has(.page-shell--habits) .desktop-sidebar__link.is-active {
    min-width: 6.9rem;
    min-height: 2.9rem;
    border-color: color-mix(in srgb, var(--app-primary) 24%, var(--app-line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--app-primary-soft) 72%, var(--app-surface));
    color: var(--app-primary-ink);
  }

  .page-shell--habits {
    padding-top: calc(var(--app-desktop-header-top) + var(--app-desktop-header-height) + 1.9rem);
  }

  .page-shell--habits .habits-app-header {
    display: none;
  }

  .page-shell--habits .habits-layout,
  .page-shell--habits .habits-workspace {
    width: min(100%, 72rem);
    max-width: 72rem;
    margin-inline: auto;
  }

  .page-shell--habits .habits-list-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--habits .habits-list-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.05rem;
  }

  .habits-list-titlebar__copy {
    display: block;
    min-width: 0;
  }

  .habits-list-titlebar__copy h2 {
    margin: 0;
    color: var(--app-ink);
    font-size: 1.65rem;
    font-weight: 860;
    line-height: 1.05;
  }

  .habits-list-titlebar__controls {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    min-width: 0;
  }

  .page-shell--habits .habits-filter.segmented {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex: 0 1 27rem;
    width: clamp(20rem, 34vw, 27rem);
    max-width: 27rem;
    min-height: auto;
    padding: 0.18rem;
    border-radius: var(--radius-md);
  }

  .page-shell--habits .habits-filter--with-assigned.segmented {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-shell--habits .habits-filter__link {
    min-height: 1.55rem;
    padding: 0 0.45rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-meta);
    font-weight: var(--font-weight-meta);
    line-height: var(--line-height-body);
  }

  .page-shell--habits .habit-progress-card {
    margin: 0 0 1.4rem;
  }

  .page-shell--habits .habit-section {
    gap: 0.72rem;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section {
    gap: 0.72rem;
  }

  .page-shell--habits .habit-section + .habit-section {
    margin-top: 1.15rem;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section + .task-section {
    margin-top: 1.15rem;
  }

  .page-shell--habits .habit-section .task-section__header {
    margin: 0 0 0.25rem;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section .task-section__header {
    margin: 0 0 0.25rem;
  }

  .page-shell--habits .habit-section .task-section__header .section-title {
    font-size: 1.1rem;
    font-weight: 800;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section .task-section__header .section-title {
    font-size: 1.1rem;
    font-weight: 800;
  }

  .page-shell--habits .habit-list {
    gap: 0.7rem;
  }

  .page-shell--habits .habit-row {
    grid-template-columns: 1.95rem minmax(0, 1fr);
    min-height: 3.85rem;
    padding: 0.9rem 1.05rem;
    border-radius: 16px;
    background: var(--app-surface);
  }

  .page-shell--habits .habit-toggle,
  .page-shell--habits .habit-toggle input,
  .page-shell--habits .habit-toggle--placeholder {
    width: 1.7rem;
    height: 1.7rem;
  }
}

/* Dedicated Tasks list view follows the unframed Habits list composition. */
.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-list-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-list-heading {
  margin: 0 0 1.05rem;
}

@media (max-width: 760px) {
  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-filter.segmented {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: auto;
    padding: 0.25rem;
    border-radius: 8px;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-filter--compact.segmented {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-filter__link {
    min-height: 1.55rem;
    padding: 0 0.45rem;
    border-radius: 6px;
    font-size: 0.86rem;
    font-weight: 650;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section {
    gap: 0.72rem;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section + .task-section {
    margin-top: 1.15rem;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section .task-section__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin: 0.6rem 0 0.2rem;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section .task-section__header::before {
    align-self: center;
    width: 0.4rem;
    height: 2rem;
    min-height: 2rem;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section .task-section__header .section-title {
    font-size: 0.78rem;
    font-weight: 820;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    min-height: 1.85rem;
    padding: 0 0.72rem;
    font-size: 0.72rem;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .personal-task-list {
    gap: 0.7rem;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .personal-task-row {
    grid-template-columns: 1.95rem minmax(0, 1fr);
    min-height: 3.85rem;
    padding: 0.9rem 1.05rem;
    border-radius: 16px;
    background: var(--app-surface);
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .personal-task-toggle,
  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .personal-task-toggle input {
    width: 1.7rem;
    height: 1.7rem;
  }
}

/* Final phone tab bar contract: match the supplied rounded iPhone dock. */
@media (max-width: 760px) {
  :root {
    --bottom-navigation-mobile-height: calc(5.85rem + env(safe-area-inset-bottom));
  }

  body > .bottom-navigation {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  .page-shell:not(.page-shell--settings):not(.page-shell--tasks):not(.is-editing-task):not(.is-creating-task):not(.is-editing-chore):not(.is-creating-chore):not(.is-editing-shopping-item):not(.is-creating-shopping-item):not(.is-shopping-settings) {
    padding-bottom: calc(var(--bottom-navigation-mobile-height) + 1rem) !important;
  }

  .bottom-navigation,
  body:has(.page-shell--dashboard) .bottom-navigation,
  body:has(.page-shell--chores) .bottom-navigation,
  body:has(.page-shell--shopping) .bottom-navigation {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.45rem;
    width: 100% !important;
    min-height: var(--bottom-navigation-mobile-height);
    margin: 0 !important;
    padding: 0.5rem 1.45rem calc(1.05rem + env(safe-area-inset-bottom)) !important;
    border: 0;
    border-top: 1px solid var(--app-line);
    border-radius: 0 !important;
    background: var(--app-surface);
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
  }

  .bottom-navigation::after,
  body:has(.page-shell--dashboard) .bottom-navigation::after,
  body:has(.page-shell--chores) .bottom-navigation::after,
  body:has(.page-shell--shopping) .bottom-navigation::after {
    content: "";
    position: absolute;
    bottom: max(0.38rem, env(safe-area-inset-bottom));
    left: 50%;
    width: 6.5rem;
    height: 0.28rem;
    border-radius: 999px;
    background: #b9b6ad;
    transform: translateX(-50%);
  }

  .bottom-navigation__link,
  body:has(.page-shell--dashboard) .bottom-navigation__link,
  body:has(.page-shell--chores) .bottom-navigation__link,
  body:has(.page-shell--shopping) .bottom-navigation__link {
    flex: 1 1 0;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.22rem;
    min-width: 0;
    min-height: 3.72rem;
    padding: 0.42rem 0.2rem;
    border: 0;
    border-radius: 1.05rem;
    background: transparent !important;
    color: var(--app-muted-2) !important;
    font-size: 0.86rem;
    font-weight: 680;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
  }

  .bottom-navigation__link.is-active,
  .bottom-navigation__link.is-active:hover,
  body:has(.page-shell--dashboard) .bottom-navigation__link.is-active,
  body:has(.page-shell--dashboard) .bottom-navigation__link.is-active:hover,
  body:has(.page-shell--chores) .bottom-navigation__link.is-active,
  body:has(.page-shell--chores) .bottom-navigation__link.is-active:hover,
  body:has(.page-shell--shopping) .bottom-navigation__link.is-active,
  body:has(.page-shell--shopping) .bottom-navigation__link.is-active:hover {
    background: var(--app-primary-soft) !important;
    color: var(--app-primary-ink) !important;
  }

  .bottom-navigation__icon,
  .bottom-navigation__icon svg,
  body:has(.page-shell--dashboard) .bottom-navigation__icon,
  body:has(.page-shell--dashboard) .bottom-navigation__icon svg,
  body:has(.page-shell--chores) .bottom-navigation__icon,
  body:has(.page-shell--chores) .bottom-navigation__icon svg,
  body:has(.page-shell--shopping) .bottom-navigation__icon,
  body:has(.page-shell--shopping) .bottom-navigation__icon svg {
    width: 1.35rem;
    height: 1.35rem;
  }
}


.task-form__identity{
  grid-column: 1 / -1;
}

.task-form__identity{
  display: grid;
  gap: 0.5rem;
}

.task-form__identity-fields{
  display: grid;
  grid-template-columns: 3.9rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: end;
}



.task-form__identity .field{
  gap: 0;
}

.task-form__identity .field label{
  display: none;
}

.page-shell--tasks .task-form .task-form__identity-fields .field--emoji {
  grid-column: 1;
}

.page-shell--tasks .task-form .task-form__identity-fields .field--title {
  grid-column: 2;
}





.task-form__section-label{
  display: block;
  color: var(--app-muted-2, var(--color-muted));
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.task-sheet-cancel-link,
.chore-sheet-cancel-link{
  color: var(--app-muted-2, var(--color-muted));
  font-size: 0.88rem;
  font-weight: 760;
  text-decoration: none;
}

.page-shell--tasks .field--task-schedule,
.page-shell--tasks .task-form .field--assignee{
  display: grid;
  gap: 0.55rem;
}

.page-shell--tasks .task-form .field--emoji input{
  text-align: center;
}

.page-shell--tasks.is-editing-task .task-edit-panel::before,
.page-shell--tasks.is-creating-task .task-create-page::before{
  display: none;
  content: none;
}

@media screen and (max-width: 760px) {
  html:has(.page-shell--tasks.is-editing-task),
html:has(.page-shell--tasks.is-creating-task),
body:has(.page-shell--tasks.is-editing-task),
body:has(.page-shell--tasks.is-creating-task){
    height: 100%;
    overflow: hidden;
  }

  .page-shell--tasks.is-editing-task .task-edit-panel,
.page-shell--tasks.is-creating-task .task-create-page{
    display: grid;
    gap: 0.78rem;
    max-height: 92dvh;
    min-height: auto;
    padding: 0.72rem 1rem calc(6.3rem + env(safe-area-inset-bottom));
    border: 1px solid color-mix(in srgb, var(--app-line, var(--color-line)) 84%, transparent);
    border-radius: 24px 24px 0 0;
    background: var(--app-surface, var(--color-card));
  }

  .page-shell--tasks.is-editing-task .task-edit-panel::before,
.page-shell--tasks.is-creating-task .task-create-page::before{
    display: none;
    content: none;
  }

  .page-shell--tasks.is-editing-task .task-edit-mobile-header,
.page-shell--tasks.is-creating-task .task-edit-mobile-header{
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    min-height: 2.3rem;
    width: auto;
    margin: 0;
  }

  .page-shell--tasks.is-editing-task .task-edit-mobile-header h2,
.page-shell--tasks.is-creating-task .task-edit-mobile-header h2{
    color: var(--app-ink, var(--color-ink));
    font-size: 1.35rem;
    font-weight: 820;
    line-height: 1.08;
  }

  .page-shell--tasks.is-editing-task .task-form__grid--personal,
.page-shell--tasks.is-creating-task .task-form__grid--personal{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .page-shell--tasks .task-form__identity-fields{
    grid-template-columns: 3.8rem minmax(0, 1fr);
  }

  .page-shell--tasks .task-form .task-form__identity-fields .field--emoji,
.page-shell--tasks .task-form .task-form__identity-fields .field--title{
    grid-column: auto;
  }

  .page-shell--tasks .task-form .field--emoji input,
.page-shell--tasks .task-form .field--title input{
    min-height: 3.25rem;
    border-radius: 13px;
    background: #fffefa;
    font-size: 16px;
    font-weight: 700;
  }

  .page-shell--tasks .task-form .field--emoji input{
    padding-inline: 0;
    font-size: 1.28rem;
  }

  .page-shell--tasks .task-form .task-chip-row{
    gap: 0.5rem;
  }

  .page-shell--tasks .task-form .task-form-chip{
    min-height: 2.35rem;
    padding: 0.5rem 0.82rem;
    font-size: 0.88rem;
    font-weight: 760;
  }




}

@media (min-width: 761px) {
  .page-shell--tasks.is-editing-task .task-edit-mobile-header,
.page-shell--tasks.is-creating-task .task-edit-mobile-header{
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .page-shell--tasks.is-editing-task .task-edit-mobile-header h2,
.page-shell--tasks.is-creating-task .task-edit-mobile-header h2{
    font-size: 1.05rem;
    font-weight: 820;
  }

  .page-shell--tasks .task-form .task-form-chip{
    font-weight: 760;
  }
}

/* Production-style edit gutters: Task sheets keep generous, aligned padding. */
@media (max-width: 760px) {
  .page-shell--tasks.is-editing-task .task-edit-panel,
.page-shell--tasks.is-creating-task .task-create-page{
    padding: 0.95rem 1.35rem calc(7.55rem + env(safe-area-inset-bottom));
  }

  .page-shell--tasks.is-editing-task .task-form > .form-actions,
.page-shell--tasks.is-creating-task .task-form > .form-actions{
    padding-right: 1.35rem;
    padding-bottom: calc(1.55rem + env(safe-area-inset-bottom));
    padding-left: 1.35rem;
  }

  .page-shell--tasks.is-editing-task .task-form .form-actions--edit-submit{
    padding-left: 5.25rem;
  }

  .page-shell--tasks.is-editing-task .task-delete-icon-form{
    bottom: calc(1.55rem + env(safe-area-inset-bottom));
    left: 1.35rem;
  }
}

@media (min-width: 761px) {
  .page-shell--tasks.is-editing-task .task-edit-panel,
.page-shell--tasks.is-creating-task .task-create-page{
    padding: 1.25rem 1.35rem 5.55rem;
  }

  .page-shell--tasks.is-editing-task .task-form .form-actions--edit-submit,
.page-shell--tasks.is-creating-task .task-form > .form-actions{
    padding: 1rem 1.35rem 1.55rem;
  }

  .page-shell--tasks.is-editing-task .task-form .form-actions--edit-submit{
    padding-left: 5.4rem;
  }

  .page-shell--tasks.is-editing-task .task-delete-icon-form{
    bottom: 1.45rem;
    left: 1.35rem;
  }
}






@media (max-width: 480px) {
  .login-copy h1 {
    max-width: 100%;
    font-size: clamp(2.85rem, 10.5vw, 3.2rem);
    line-height: 1.02;
  }
}

/* Home tab design contract: supplied phone/web Home mockups, with Settings group heading typography. */
.page-shell--dashboard .daily-habits-panel,
.page-shell--dashboard .daily-tasks-panel,
.page-shell--dashboard .daily-calendar-panel {
  border: 1px solid var(--app-line);
  background: var(--app-surface);
}

.page-shell--dashboard #dashboard_calendar {
  display: contents;
}

.page-shell--dashboard .daily-calendar-refresh-status {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin: -0.18rem 0 0.5rem;
  color: var(--app-muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.page-shell--dashboard .daily-calendar-refresh-status::before {
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--app-primary) 24%, transparent);
  border-top-color: var(--app-primary);
  border-radius: 999px;
  content: "";
  animation: dashboard-calendar-refresh-spin 0.8s linear infinite;
}

.page-shell--dashboard .daily-calendar-refresh-status.is-stale::before {
  border: 0;
  background: var(--app-warning, #9a6b1f);
  animation: none;
}

.calendar-sync-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.8rem;
  margin: 0 0 0.55rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--app-warning, #9a6b1f) 38%, var(--app-line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--app-warning, #9a6b1f) 8%, var(--app-surface));
}

.calendar-sync-alert p {
  flex: 1 1 14rem;
  margin: 0;
  color: var(--app-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.calendar-last-synced {
  display: block;
  margin: -0.15rem 0 0.55rem;
  color: var(--app-muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

@keyframes dashboard-calendar-refresh-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-shell--dashboard .daily-calendar-refresh-status::before {
    animation: none;
  }
}

.page-shell--dashboard .daily-card-section-heading {
  color: inherit;
  text-decoration: none;
}

.page-shell--dashboard .daily-habits-panel__heading,
.page-shell--dashboard .daily-tasks-panel__heading,
.page-shell--dashboard .daily-calendar-panel__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.page-shell--dashboard .daily-habits-panel__heading::before,
.page-shell--dashboard .daily-tasks-panel__heading::before,
.page-shell--dashboard .daily-calendar-panel__heading::before {
  content: none;
  display: none;
}

.page-shell--dashboard .daily-habits-panel__heading .section-title,
.page-shell--dashboard .daily-tasks-panel__heading .section-title,
.page-shell--dashboard .daily-calendar-panel__heading .section-title {
  color: var(--app-primary);
  font-size: 1.02rem;
  font-weight: 860;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.page-shell--dashboard .daily-habit-row,
.page-shell--dashboard .daily-task-row,
.page-shell--dashboard .daily-calendar-row {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page-shell--dashboard .daily-habit-row + .daily-habit-row,
.page-shell--dashboard .daily-task-row + .daily-task-row,
.page-shell--dashboard .daily-calendar-row + .daily-calendar-row {
  border-top: 1px solid var(--app-line);
}

.page-shell--dashboard .daily-task-row.has-subtasks {
  padding-top: 0.46rem;
}

.page-shell--dashboard .daily-calendar-row__main {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

@media screen and (max-width: 760px) {
  body:has(.page-shell--dashboard) {
    background: var(--app-bg);
  }

  .page-shell--dashboard {
    min-height: 100dvh;
    padding: calc(env(safe-area-inset-top) + 0.35rem) 0.78rem calc(var(--bottom-navigation-mobile-height) + 0.92rem) !important;
  }

  .page-shell--dashboard .daily-dashboard {
    gap: 1.02rem;
  }

  .page-shell--dashboard .daily-dashboard__header {
    align-items: center;
    min-height: 4.45rem;
    margin-bottom: 0;
    padding: 0.18rem 0 0.34rem;
  }

  .page-shell--dashboard .daily-dashboard__header::after {
    display: none;
  }

  .daily-dashboard__title-full {
    display: none;
  }

  .daily-dashboard__title-mobile {
    display: grid;
    gap: 0.04rem;
  }

  .daily-dashboard__weekday {
    color: var(--app-primary);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
  }

  .daily-dashboard__date {
    color: var(--app-ink);
    font-size: clamp(2.1rem, 9.2vw, 2.55rem);
    font-weight: 760;
    line-height: 0.96;
  }

  .page-shell--dashboard .daily-dashboard__settings {
    width: 2.45rem;
    min-width: 2.45rem;
    height: 2.45rem;
    border-color: color-mix(in srgb, var(--app-muted-2) 32%, var(--app-line));
    border-radius: 0.84rem;
    background: var(--app-surface);
    color: var(--app-muted-2);
  }

  .page-shell--dashboard .daily-dashboard__settings svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke-width: 1.8;
  }

  .page-shell--dashboard .daily-dashboard__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.05rem;
    width: 100%;
    margin: 0;
  }

  .page-shell--dashboard .daily-habits-panel,
  .page-shell--dashboard .daily-tasks-panel,
  .page-shell--dashboard .daily-calendar-panel {
    min-height: 0;
    padding: 0.9rem 0.82rem 0.96rem;
    border-radius: 1.22rem;
  }

  .page-shell--dashboard .daily-habits-panel__heading,
  .page-shell--dashboard .daily-tasks-panel__heading,
  .page-shell--dashboard .daily-calendar-panel__heading {
    gap: 0.58rem;
    margin-bottom: 0.56rem;
  }

  .page-shell--dashboard .daily-habits-panel__heading .section-title,
  .page-shell--dashboard .daily-tasks-panel__heading .section-title,
  .page-shell--dashboard .daily-calendar-panel__heading .section-title {
    font-size: 1.02rem;
    font-weight: 860;
    line-height: 1.2;
  }

  .page-shell--dashboard .daily-habits-progress-pill--mobile,
  .page-shell--dashboard .daily-tasks-open-pill,
  .page-shell--dashboard .daily-calendar-events-pill--phone {
    min-width: 4.05rem;
    min-height: 1.48rem;
    padding: 0 0.72rem;
    font-size: 0.79rem;
    font-weight: 640;
  }

  .page-shell--dashboard .daily-calendar-list > .daily-calendar-row:nth-of-type(n + 6) {
    display: none;
  }

  .page-shell--dashboard .daily-habit-row,
  .page-shell--dashboard .daily-task-row,
  .page-shell--dashboard .daily-calendar-row {
    min-height: 3.12rem;
    padding: 0.22rem 0;
  }

  .page-shell--dashboard .daily-habit-row,
  .page-shell--dashboard .daily-task-row {
    grid-template-columns: 1.72rem minmax(0, 1fr);
    gap: 0.46rem;
  }

  .page-shell--dashboard .daily-habit-toggle,
  .page-shell--dashboard .daily-task-toggle {
    width: 1.58rem;
    height: 1.58rem;
  }

  .page-shell--dashboard .daily-habit-toggle input,
  .page-shell--dashboard .daily-task-toggle input {
    width: 1.56rem;
    height: 1.56rem;
    border-width: 2.4px;
  }

  .page-shell--dashboard .daily-habit-row__main,
  .page-shell--dashboard .daily-task-row__main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
  }

  .page-shell--dashboard .daily-habit-row__main .task-row__title,
  .page-shell--dashboard .daily-task-row__main .task-row__title,
  .page-shell--dashboard .daily-calendar-row__main .task-row__title {
    font-size: 0.92rem;
    font-weight: 640;
    line-height: 1.14;
  }

  .page-shell--dashboard .daily-habit-status,
  .page-shell--dashboard .daily-task-due {
    min-width: 4.05rem;
    padding-right: 0;
    font-size: 0.8rem;
    font-weight: 640;
    line-height: 1.1;
    text-align: center;
  }

  .page-shell--dashboard .daily-habit-status {
    justify-content: center;
  }

  .page-shell--dashboard .daily-task-row.has-subtasks {
    row-gap: 0.52rem;
    padding: 0.68rem 0 0.78rem;
  }

  .page-shell--dashboard .daily-task-subtask-preview {
    gap: 0.17rem;
    margin-top: 0;
    padding-top: 0.12rem;
    padding-left: 0.7rem;
    border-left: 2px solid var(--app-line);
  }

  .page-shell--dashboard .daily-task-subtask-preview__item,
  .page-shell--dashboard .daily-task-subtask-preview__label {
    min-height: 1.35rem;
  }

  .page-shell--dashboard .daily-task-subtask-preview__item {
    font-size: 0.78rem;
    font-weight: 640;
  }

  .page-shell--dashboard .daily-task-subtask-preview__copy {
    gap: 0.28rem;
  }

  .page-shell--dashboard .daily-calendar-row::before {
    top: 0.38rem;
    bottom: 0.38rem;
    width: 0.22rem;
  }

  .page-shell--dashboard .daily-calendar-row__main {
    gap: 0.44rem;
    padding-left: 1.12rem;
  }

  .page-shell--dashboard .daily-habit-list > .daily-habit-row:nth-of-type(n + 4),
  .page-shell--dashboard .daily-task-row.is-phone-hidden {
    display: none;
  }

  .page-shell--dashboard .daily-calendar-time {
    font-size: 0.92rem;
    font-weight: 640;
    line-height: 1.14;
    text-align: right;
  }
}

@media (min-width: 761px) {
  .page-shell--dashboard {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    grid-template-rows: auto;
    padding-bottom: 3rem;
  }

  .page-shell--dashboard .daily-dashboard {
    grid-template-rows: auto auto;
    gap: 0.9rem;
    height: auto;
    max-width: none;
    margin: 0;
    overflow: visible;
  }

  body:has(.page-shell--dashboard) .daily-dashboard__header {
    height: var(--app-desktop-header-height);
    min-height: var(--app-desktop-header-height);
    margin-bottom: 0.68rem;
    padding: 0;
  }

  body:has(.page-shell--dashboard) .daily-dashboard__header h1 {
    color: var(--app-primary);
    color: var(--app-primary) !important;
    font-size: clamp(1.62rem, 1.8vw, 1.95rem);
    font-weight: 720;
    line-height: 1;
  }

  body:has(.page-shell--dashboard) .desktop-sidebar__nav {
    gap: clamp(1.25rem, 2.7vw, 3.1rem);
  }

  body:has(.page-shell--dashboard) .desktop-sidebar__link {
    gap: 0.5rem;
    min-height: 2.32rem;
    padding: 0 0.58rem;
    border-radius: 0.78rem;
    color: color-mix(in srgb, var(--app-muted-2) 90%, var(--app-surface));
    font-size: 0.9rem;
    font-weight: 700;
  }

  body:has(.page-shell--dashboard) .desktop-sidebar__link:not(.is-active) {
    color: color-mix(in srgb, var(--app-muted-2) 86%, var(--app-surface));
  }

  body:has(.page-shell--dashboard) .desktop-sidebar__link.is-active {
    min-width: 6.1rem;
    min-height: 2.48rem;
    border-radius: 0.92rem;
    border-color: color-mix(in srgb, var(--app-primary) 22%, var(--app-line));
    background: color-mix(in srgb, var(--app-primary-soft) 82%, var(--app-surface));
    color: var(--app-primary-ink);
  }

  body:has(.page-shell--dashboard) .desktop-sidebar__icon svg {
    width: 1.08rem;
    height: 1.08rem;
    stroke-width: 1.85;
  }

  .page-shell--dashboard .daily-dashboard__settings {
    width: 2.3rem;
    min-width: 2.3rem;
    height: 2.3rem;
    border-color: color-mix(in srgb, var(--app-muted-2) 32%, var(--app-line));
    border-radius: 0.76rem;
    background: var(--app-surface);
    color: var(--app-muted-2);
  }

  .page-shell--dashboard .daily-dashboard__settings svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 1.75;
  }

  .page-shell--dashboard .daily-dashboard__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    height: auto;
    width: min(1280px, 100%);
    margin: 0 auto;
    gap: 1rem;
    overflow: visible;
  }

  .page-shell--dashboard .daily-habits-panel,
  .page-shell--dashboard .daily-tasks-panel,
  .page-shell--dashboard .daily-calendar-panel {
    align-self: start;
    min-height: 0;
    max-height: none;
    padding: 0.9rem 0.94rem 1rem;
    border-radius: 1.06rem;
    overflow: visible;
  }

  .page-shell--dashboard .daily-habits-panel__heading,
  .page-shell--dashboard .daily-tasks-panel__heading,
  .page-shell--dashboard .daily-calendar-panel__heading {
    gap: 0.74rem;
    margin-bottom: 0.58rem;
  }

  .page-shell--dashboard .daily-habits-panel__heading .section-title,
  .page-shell--dashboard .daily-tasks-panel__heading .section-title,
  .page-shell--dashboard .daily-calendar-panel__heading .section-title {
    font-size: 1.02rem;
    font-weight: 860;
    line-height: 1.2;
  }

  .page-shell--dashboard .daily-habits-progress-pill--desktop,
  .page-shell--dashboard .daily-tasks-open-pill,
  .page-shell--dashboard .daily-calendar-events-pill--web {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.95rem;
    min-height: 1.52rem;
    padding: 0 0.82rem;
    font-size: 0.8rem;
    font-weight: 680;
  }

  .page-shell--dashboard .daily-habit-row,
  .page-shell--dashboard .daily-task-row,
  .page-shell--dashboard .daily-calendar-row {
    min-height: 2.9rem;
    padding: 0.18rem 0;
  }

  .page-shell--dashboard .daily-habit-row,
  .page-shell--dashboard .daily-task-row {
    grid-template-columns: 1.72rem minmax(0, 1fr);
    gap: 0.46rem;
  }

  .page-shell--dashboard .daily-habit-toggle,
  .page-shell--dashboard .daily-task-toggle {
    width: 1.54rem;
    height: 1.54rem;
  }

  .page-shell--dashboard .daily-habit-toggle input,
  .page-shell--dashboard .daily-task-toggle input {
    width: 1.48rem;
    height: 1.48rem;
  }

  .page-shell--dashboard .daily-habit-row__main,
  .page-shell--dashboard .daily-task-row__main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.48rem;
  }

  .page-shell--dashboard .daily-habit-row__main .task-row__title,
  .page-shell--dashboard .daily-task-row__main .task-row__title,
  .page-shell--dashboard .daily-calendar-row__main .task-row__title {
    font-size: 0.9rem;
    font-weight: 660;
    line-height: 1.12;
  }

  .page-shell--dashboard .daily-habit-status,
  .page-shell--dashboard .daily-task-due {
    min-width: 4.05rem;
    padding-right: 0;
    font-size: 0.78rem;
    font-weight: 660;
    line-height: 1.1;
    text-align: center;
  }

  .page-shell--dashboard .daily-task-row.has-subtasks {
    row-gap: 0.42rem;
    padding: 0.58rem 0 0.64rem;
  }

  .page-shell--dashboard .daily-task-subtask-preview {
    gap: 0.14rem;
    padding-top: 0.1rem;
    padding-left: 0.66rem;
  }

  .page-shell--dashboard .daily-task-subtask-preview__item,
  .page-shell--dashboard .daily-task-subtask-preview__label {
    min-height: 1.28rem;
  }

  .page-shell--dashboard .daily-task-subtask-preview__item {
    font-size: 0.74rem;
    font-weight: 660;
  }

  .page-shell--dashboard .daily-calendar-row::before {
    top: 0.34rem;
    bottom: 0.34rem;
    width: 0.22rem;
  }

  .page-shell--dashboard .daily-calendar-row__main {
    gap: 0.46rem;
    padding-left: 1.18rem;
  }

  .page-shell--dashboard .daily-calendar-time {
    font-size: 0.9rem;
    font-weight: 660;
    line-height: 1.12;
    text-align: right;
  }
}

@media (min-width: 761px) {
  body:has(.page-shell--dashboard) .desktop-sidebar__nav,
  body:has(.page-shell--habits) .desktop-sidebar__nav,
  body:has(.page-shell--chores) .desktop-sidebar__nav,
  body:has(.page-shell--shopping) .desktop-sidebar__nav,
  body:has(.page-shell--family) .desktop-sidebar__nav {
    align-items: center;
    justify-content: center;
    gap: clamp(1.1rem, 2.31vw, 2.64rem);
  }

  body:has(.page-shell--dashboard) .desktop-sidebar__link,
  body:has(.page-shell--habits) .desktop-sidebar__link,
  body:has(.page-shell--chores) .desktop-sidebar__link,
  body:has(.page-shell--shopping) .desktop-sidebar__link,
  body:has(.page-shell--family) .desktop-sidebar__link {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    align-content: center;
    gap: 0.09rem;
    min-width: 4.68rem;
    min-height: 3rem;
    padding: 0.37rem 0.64rem;
    border: 0;
    border-radius: 1.16rem;
    background: transparent;
    color: var(--app-muted-2);
    font-size: 0.86rem;
    font-weight: 680;
    line-height: 1.08;
    text-align: center;
  }

  body:has(.page-shell--dashboard) .desktop-sidebar__link span:not(.desktop-sidebar__icon),
  body:has(.page-shell--habits) .desktop-sidebar__link span:not(.desktop-sidebar__icon),
  body:has(.page-shell--chores) .desktop-sidebar__link span:not(.desktop-sidebar__icon),
  body:has(.page-shell--shopping) .desktop-sidebar__link span:not(.desktop-sidebar__icon),
  body:has(.page-shell--family) .desktop-sidebar__link span:not(.desktop-sidebar__icon) {
    display: block;
    color: currentColor;
    line-height: 1.08;
  }

  body:has(.page-shell--dashboard) .desktop-sidebar__link:not(.is-active),
  body:has(.page-shell--habits) .desktop-sidebar__link:not(.is-active),
  body:has(.page-shell--chores) .desktop-sidebar__link:not(.is-active),
  body:has(.page-shell--shopping) .desktop-sidebar__link:not(.is-active),
  body:has(.page-shell--family) .desktop-sidebar__link:not(.is-active) {
    color: var(--app-muted-2);
    opacity: 1;
  }

  body:has(.page-shell--dashboard) .desktop-sidebar__link.is-active,
  body:has(.page-shell--habits) .desktop-sidebar__link.is-active,
  body:has(.page-shell--chores) .desktop-sidebar__link.is-active,
  body:has(.page-shell--shopping) .desktop-sidebar__link.is-active,
  body:has(.page-shell--family) .desktop-sidebar__link.is-active {
    min-width: 4.9rem;
    min-height: 3.15rem;
    border: 0 !important;
    border-radius: 1.16rem;
    background: var(--app-primary-soft);
    color: var(--app-primary-ink);
  }

  body:has(.page-shell--dashboard) .desktop-sidebar__icon,
  body:has(.page-shell--dashboard) .desktop-sidebar__icon svg,
  body:has(.page-shell--habits) .desktop-sidebar__icon,
  body:has(.page-shell--habits) .desktop-sidebar__icon svg,
  body:has(.page-shell--chores) .desktop-sidebar__icon,
  body:has(.page-shell--chores) .desktop-sidebar__icon svg,
  body:has(.page-shell--shopping) .desktop-sidebar__icon,
  body:has(.page-shell--shopping) .desktop-sidebar__icon svg,
  body:has(.page-shell--family) .desktop-sidebar__icon,
  body:has(.page-shell--family) .desktop-sidebar__icon svg {
    width: 1.27rem;
    height: 1.27rem;
  }
}

.page-shell--dashboard .daily-calendar-time {
  color: var(--app-ink);
}

/* Home Habits card checkboxes reuse the dedicated Habit checkbox standard. */
.page-shell--dashboard .daily-habit-toggle {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
}

.page-shell--dashboard .daily-habit-toggle input {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 2px;
}

.page-shell--dashboard .daily-habit-toggle input:not(:checked) {
  border: 2px solid var(--habits-muted-2, var(--app-muted-2));
  background: var(--habits-surface, var(--app-surface));
}

@media (min-width: 761px) {
  .page-shell--dashboard .daily-habit-toggle,
  .page-shell--dashboard .daily-habit-toggle input {
    width: 1.7rem;
    height: 1.7rem;
  }
}

/* Final completion-state guard: later layout rules must not turn checked
   task and habit toggles back into empty rings. */
.task-toggle input:checked,
.personal-task-toggle input:checked,
.page-shell--tasks .personal-task-toggle input[type="checkbox"]:checked,
.daily-task-toggle input:checked,
.family-task-work-row .family-assigned-work-row__toggle input[type="checkbox"]:checked {
  position: relative;
  border-color: var(--tasks-primary, var(--app-primary));
  background: var(--tasks-primary, var(--app-primary));
}

.daily-task-toggle input:checked {
  border-color: var(--daily-primary, var(--app-primary));
  background: var(--daily-primary, var(--app-primary));
}

.task-toggle input:checked::after,
.personal-task-toggle input:checked::after,
.page-shell--tasks .personal-task-toggle input[type="checkbox"]:checked::after,
.daily-task-toggle input:checked::after,
.family-task-work-row .family-assigned-work-row__toggle input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  height: 62%;
  margin: 0;
  border: 0;
  background: #fffdf8;
  transform: translate(-50%, -50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%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 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.habit-toggle input:checked,
.daily-habit-toggle input:checked,
.family-habit-work-row .family-assigned-work-row__toggle input[type="checkbox"]:checked {
  position: relative;
  border-color: var(--habits-primary, var(--app-primary));
  background: var(--habits-primary, var(--app-primary));
}

.habit-toggle input:checked::after,
.daily-habit-toggle input:checked::after,
.family-habit-work-row .family-assigned-work-row__toggle input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  height: 62%;
  margin: 0;
  border: 0;
  background: #fffdf8;
  transform: translate(-50%, -50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%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 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Final selected-navigation contract: active tabs use only the soft green tile.
   No extra outline/border should appear on top tabs or bottom tabs. */
.bottom-navigation__link.is-active,
.bottom-navigation__link.is-active:hover,
.desktop-sidebar__link.is-active,
.desktop-sidebar__link.is-active:hover,
body:has(.page-shell--dashboard) .desktop-sidebar__link.is-active,
body:has(.page-shell--dashboard) .desktop-sidebar__link.is-active:hover,
body:has(.page-shell--habits) .desktop-sidebar__link.is-active,
body:has(.page-shell--habits) .desktop-sidebar__link.is-active:hover,
body:has(.page-shell--chores) .desktop-sidebar__link.is-active,
body:has(.page-shell--chores) .desktop-sidebar__link.is-active:hover,
body:has(.page-shell--shopping) .desktop-sidebar__link.is-active,
body:has(.page-shell--shopping) .desktop-sidebar__link.is-active:hover,
body:has(.page-shell--family) .desktop-sidebar__link.is-active,
body:has(.page-shell--family) .desktop-sidebar__link.is-active:hover {
  border: 0 !important;
  outline: 0;
  background: var(--app-primary-soft);
  color: var(--app-primary-ink);
}
























/* Habit native time/date chips: selected picker text stays white on iOS. */


/* Task native time/date chips: selected picker text stays white on iOS. */
.page-shell--dashboard.is-editing-task .task-form .task-form-chip--native-picker.is-selected,
.page-shell--dashboard.is-editing-task .task-form .task-form-chip--native-picker.is-selected span,
.page-shell--dashboard.is-editing-task .task-form .task-form-chip--native-picker.is-selected .task-chip-native-input,
.page-shell--dashboard.is-editing-task .task-form .task-form-chip--native-picker.is-selected .task-chip-native-input::-webkit-date-and-time-value,
.page-shell--tasks.is-editing-task .task-form .task-form-chip--native-picker.is-selected,
.page-shell--tasks.is-editing-task .task-form .task-form-chip--native-picker.is-selected span,
.page-shell--tasks.is-editing-task .task-form .task-form-chip--native-picker.is-selected .task-chip-native-input,
.page-shell--tasks.is-editing-task .task-form .task-form-chip--native-picker.is-selected .task-chip-native-input::-webkit-date-and-time-value,
.page-shell--tasks.is-creating-task .task-form .task-form-chip--native-picker.is-selected,
.page-shell--tasks.is-creating-task .task-form .task-form-chip--native-picker.is-selected span,
.page-shell--tasks.is-creating-task .task-form .task-form-chip--native-picker.is-selected .task-chip-native-input,
.page-shell--tasks.is-creating-task .task-form .task-form-chip--native-picker.is-selected .task-chip-native-input::-webkit-date-and-time-value,
.page-shell--inbox.is-editing-task .task-form .task-form-chip--native-picker.is-selected,
.page-shell--inbox.is-editing-task .task-form .task-form-chip--native-picker.is-selected span,
.page-shell--inbox.is-editing-task .task-form .task-form-chip--native-picker.is-selected .task-chip-native-input,
.page-shell--inbox.is-editing-task .task-form .task-form-chip--native-picker.is-selected .task-chip-native-input::-webkit-date-and-time-value {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* Task sheets are overlays; keep the dimmed desktop list in the normal layout. */
@media (min-width: 761px) {
  .page-shell--tasks.is-editing-task,
.page-shell--tasks.is-creating-task{
    padding-top: calc(var(--app-desktop-header-top) + var(--app-desktop-header-height) + 1.9rem);
  }

  .page-shell--tasks.is-editing-task .tasks-app-header,
.page-shell--tasks.is-creating-task .tasks-app-header{
    display: none;
  }

  .page-shell--tasks.is-editing-task .tasks-layout,
.page-shell--tasks.is-creating-task .tasks-layout,
.page-shell--tasks.is-editing-task .tasks-workspace,
.page-shell--tasks.is-creating-task .tasks-workspace{
    width: min(100%, 72rem);
    max-width: 72rem;
    margin-inline: auto;
  }

  .page-shell--tasks.is-editing-task .tasks-workspace,
.page-shell--tasks.is-creating-task .tasks-workspace{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .page-shell--tasks.is-editing-task .tasks-list-panel,
.page-shell--tasks.is-creating-task .tasks-list-panel{
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
}

/* Mobile task polish: Home-origin task sheets share the canonical editor behavior. */
.page-shell--dashboard.is-editing-task::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(36, 49, 44, 0.38);
  backdrop-filter: blur(2px);
}

.page-shell--dashboard.is-editing-task .sheet-backdrop-cancel--task {
  position: fixed;
  inset: 0;
  z-index: 56;
  display: block;
  color: transparent;
  text-decoration: none;
}

.page-shell--dashboard.is-editing-task .daily-dashboard {
  filter: opacity(0.58);
}

.page-shell--dashboard.is-editing-task .task-edit-panel {
  z-index: 70;
}

.page-shell--dashboard.is-editing-task .field--task-schedule,
.page-shell--dashboard.is-editing-task .task-form .field--assignee {
  display: grid;
  gap: 0.55rem;
}

.page-shell--dashboard.is-editing-task .task-form .field--emoji input {
  text-align: center;
}

.page-shell--dashboard.is-editing-task .task-form .field label {
  color: var(--color-muted);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-shell--dashboard.is-editing-task .task-form__identity .field label {
  display: none;
}

@media (max-width: 760px) {
  html:has(.page-shell--dashboard.is-editing-task),
  body:has(.page-shell--dashboard.is-editing-task) {
    height: 100%;
    overflow: hidden;
  }

  body:has(.page-shell--dashboard.is-editing-task) .bottom-navigation {
    display: none;
  }

  .page-shell--tasks.is-editing-task .task-form > .form-actions,
  .page-shell--tasks.is-creating-task .task-form > .form-actions,
  .page-shell--dashboard.is-editing-task .task-form > .form-actions {
    border-top: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent);
    filter: drop-shadow(0 -18px 24px color-mix(in srgb, var(--color-ink) 16%, transparent));
  }




  .page-shell--dashboard.is-editing-task {
    min-height: 100dvh;
    padding: calc(env(safe-area-inset-top) + 0.35rem) 0.78rem calc(var(--bottom-navigation-mobile-height) + 0.92rem) !important;
    background: var(--app-bg);
  }

  .page-shell--dashboard.is-editing-task .task-edit-panel {
    position: fixed;
    inset: auto 0 0;
    display: grid;
    gap: 0.85rem;
    max-height: 92dvh;
    overflow-y: auto;
    padding: 0.95rem 1.35rem calc(7.55rem + env(safe-area-inset-bottom));
    border: 1px solid color-mix(in srgb, var(--color-line) 80%, transparent);
    border-radius: 24px 24px 0 0;
    background: var(--color-card);
    overscroll-behavior: contain;
  }

  .page-shell--dashboard.is-editing-task .task-edit-panel::before,
  .page-shell--dashboard.is-editing-task .task-edit-panel > .panel-heading {
    display: none;
    content: none;
  }

  .page-shell--dashboard.is-editing-task .task-edit-mobile-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    min-height: 2.3rem;
    width: auto;
    margin: 0;
  }

  .page-shell--dashboard.is-editing-task .task-edit-mobile-header h2 {
    color: var(--app-ink, var(--color-ink));
    font-size: 1.35rem;
    font-weight: 820;
    line-height: 1.08;
  }

  .page-shell--dashboard.is-editing-task .task-form__grid--personal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .page-shell--dashboard.is-editing-task .task-form__identity-fields {
    grid-template-columns: 3.8rem minmax(0, 1fr);
  }

  .page-shell--dashboard.is-editing-task .task-form .task-form__identity-fields .field--emoji,
  .page-shell--dashboard.is-editing-task .task-form .task-form__identity-fields .field--title {
    grid-column: auto;
  }

  .page-shell--dashboard.is-editing-task .task-form .field input,
  .page-shell--dashboard.is-editing-task .task-form .field select,
  .page-shell--dashboard.is-editing-task .task-form .field textarea {
    min-height: 3.25rem;
    border-radius: 13px;
    background: #fffefa;
    font-size: 16px;
    font-weight: 700;
  }

  .page-shell--dashboard.is-editing-task .task-form .field--emoji input {
    padding-inline: 0;
    font-size: 1.28rem;
  }

  .page-shell--dashboard.is-editing-task .task-form .task-chip-row {
    gap: 0.5rem;
  }

  .page-shell--dashboard.is-editing-task .task-form .task-form-chip {
    min-height: 2.35rem;
    padding: 0.5rem 0.82rem;
    font-size: 0.88rem;
    font-weight: 760;
  }

  .page-shell--dashboard.is-editing-task .task-form > .form-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 82;
    display: grid;
    justify-content: stretch;
    margin: 0;
    padding: 0.65rem 1.35rem calc(1.55rem + env(safe-area-inset-bottom)) 5.25rem;
    background: color-mix(in srgb, var(--color-card) 94%, white);
    pointer-events: none;
  }

  .page-shell--dashboard.is-editing-task .task-form .form-actions .app-button--primary {
    width: 100%;
    min-height: 3.35rem;
    border-radius: 13px;
    pointer-events: auto;
  }

  .page-shell--dashboard.is-editing-task .task-delete-icon-form {
    position: fixed;
    bottom: calc(1.55rem + env(safe-area-inset-bottom));
    left: 1.35rem;
    z-index: 83;
    margin: 0;
  }

  .page-shell--dashboard.is-editing-task .task-delete-icon-button {
    width: 3rem;
    height: 3rem;
    border-radius: 13px;
  }
}

@media (min-width: 761px) {
  .page-shell--dashboard.is-editing-task .task-edit-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(540px, calc(100vw - 2rem));
    max-height: min(86dvh, 44rem);
    overflow-y: auto;
    padding: 0.95rem 0.95rem 4.65rem;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    background: var(--app-surface, var(--color-card));
    transform: translate(-50%, -50%);
    overscroll-behavior: contain;
  }

  .page-shell--dashboard.is-editing-task .task-edit-mobile-header h2 {
    font-size: 1.05rem;
  }

  .page-shell--dashboard.is-editing-task .task-delete-icon-form {
    position: absolute;
    bottom: 0.95rem;
    left: 0.95rem;
    z-index: 2;
    margin: 0;
  }

  .page-shell--dashboard.is-editing-task .task-delete-icon-button {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 13px;
  }

  .page-shell--dashboard.is-editing-task .task-form .form-actions--edit-submit {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: grid;
    justify-content: stretch;
    margin: 0;
    padding: 0.95rem 0.95rem 0.95rem 5rem;
    background: var(--color-card);
    filter: drop-shadow(0 -12px 18px color-mix(in srgb, var(--color-ink) 12%, transparent));
  }
}

/* Compact task edit modal: keep recurrence details revealable from the Repeats chip. */
:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .recurrence-custom-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .recurrence-custom-fields[hidden] {
  display: none !important;
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__row-shell.is-new.is-empty {
  display: none;
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor {
  gap: 0.55rem;
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__rows {
  overflow: visible;
  gap: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Empty subtask templates stay invisible until "+ Add subtask" creates a real row. */
:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__rows:has(.task-subtask-editor__row-shell:not([hidden])) {
  overflow: hidden;
  border: 1px solid var(--tasks-line, var(--app-line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--tasks-surface, var(--app-surface)) 96%, white);
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__rows:has(.task-subtask-editor__row-shell.is-new.is-empty[hidden]:only-child) {
  display: none;
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__row-shell[hidden] {
  display: none !important;
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__row-shell + .task-subtask-editor__row-shell {
  border-top: 1px solid var(--tasks-line);
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__row {
  grid-template-columns: 1.35rem minmax(0, 1fr) auto auto;
  grid-template-areas: "mark title schedule remove";
  min-height: 2.75rem;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__row:has(.nested-schedule-clear-button:not([hidden])) {
  grid-template-columns: 1.35rem minmax(0, 1fr) auto;
  grid-template-areas:
    "mark title remove"
    ". schedule .";
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__row:has(.nested-schedule-clear-button:not([hidden])) .task-subtask-editor__schedule {
  justify-content: flex-start;
  flex-wrap: wrap;
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__row textarea {
  min-height: 1.8rem;
  padding: 0.25rem 0;
  font-size: 0.86rem;
  font-weight: 780;
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__row.is-done textarea {
  color: var(--tasks-muted);
  text-decoration: line-through;
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__row .task-subtask-editor__schedule-field:has(input.is-empty),
:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__row .task-subtask-editor__schedule-field:has(select.is-empty) {
  display: none;
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__row-shell.is-editing .task-subtask-editor__schedule-field:has(input.is-empty),
:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__row-shell.is-editing .task-subtask-editor__schedule-field:has(select.is-empty) {
  display: inline-grid;
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__remove-button {
  width: 1.9rem;
  height: 1.9rem;
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__add-button {
  justify-self: start;
  min-height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tasks-primary);
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 820;
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .task-subtask-editor__add-button:hover {
  color: var(--tasks-primary-ink);
}

:is(.task-edit-panel, .task-create-page) .task-form--compact-modal .field--recurrence-frequency label,
.page-shell--chores .chore-form .field--recurrence-frequency > label,
.page-shell--chores .chore-form .chore-cadence-field > label {
  color: var(--color-muted);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  body:has(.page-shell--tasks.is-editing-task) .bottom-navigation,
  body:has(.page-shell--dashboard.is-editing-task) .bottom-navigation,
  body:has(.page-shell--inbox.is-editing-task) .bottom-navigation {
    display: none;
  }

  .page-shell--dashboard.is-editing-task .task-edit-panel,
  .page-shell--tasks.is-editing-task .task-edit-panel,
  .page-shell--inbox.is-editing-task .task-edit-panel {
    position: fixed;
    inset: max(1.15rem, env(safe-area-inset-top)) 1rem auto;
    display: grid;
    gap: 0.72rem;
    max-height: calc(100dvh - 2.3rem);
    overflow-y: auto;
    padding: 1rem 1rem 5.45rem;
    border: 1px solid color-mix(in srgb, var(--color-line) 82%, transparent);
    border-radius: 18px;
    background: var(--color-card);
    overscroll-behavior: contain;
  }

  .page-shell--tasks.is-creating-task .task-create-page {
    inset: max(1.15rem, env(safe-area-inset-top)) 1rem auto;
  }

  .page-shell--dashboard.is-editing-task .task-edit-mobile-header,
  .page-shell--tasks.is-editing-task .task-edit-mobile-header,
  .page-shell--tasks.is-creating-task .task-edit-mobile-header,
  .page-shell--inbox.is-editing-task .task-edit-mobile-header {
    min-height: 2rem;
  }

  .page-shell--dashboard.is-editing-task .task-edit-mobile-header h2,
  .page-shell--tasks.is-editing-task .task-edit-mobile-header h2,
  .page-shell--tasks.is-creating-task .task-edit-mobile-header h2,
  .page-shell--inbox.is-editing-task .task-edit-mobile-header h2 {
    font-size: 1.28rem;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit,
  .page-shell--tasks.is-editing-task .task-form--edit,
  .page-shell--tasks.is-creating-task .task-form--compact-modal,
  .page-shell--inbox.is-editing-task .task-form--edit {
    display: grid;
    gap: 0.72rem;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit .task-form__grid--personal,
  .page-shell--tasks.is-editing-task .task-form--edit .task-form__grid--personal,
  .page-shell--tasks.is-creating-task .task-form--compact-modal .task-form__grid--personal,
  .page-shell--inbox.is-editing-task .task-form--edit .task-form__grid--personal {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.72rem 0.86rem;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit .task-form__identity,
  .page-shell--dashboard.is-editing-task .task-form--edit .field--task-schedule,
  .page-shell--tasks.is-editing-task .task-form--edit .task-form__identity,
  .page-shell--tasks.is-editing-task .task-form--edit .field--task-schedule,
  .page-shell--tasks.is-creating-task .task-form--compact-modal .task-form__identity,
  .page-shell--tasks.is-creating-task .task-form--compact-modal .field--task-schedule,
  .page-shell--inbox.is-editing-task .task-form--edit .task-form__identity,
  .page-shell--inbox.is-editing-task .task-form--edit .field--task-schedule {
    grid-column: 1 / -1;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit .task-form__identity-fields,
  .page-shell--tasks.is-editing-task .task-form--edit .task-form__identity-fields,
  .page-shell--tasks.is-creating-task .task-form--compact-modal .task-form__identity-fields,
  .page-shell--inbox.is-editing-task .task-form--edit .task-form__identity-fields {
    grid-template-columns: 3.55rem minmax(0, 1fr);
  }

  .page-shell--dashboard.is-editing-task .task-form--edit .field input,
  .page-shell--dashboard.is-editing-task .task-form--edit .field select,
  .page-shell--dashboard.is-editing-task .task-form--edit .field textarea,
  .page-shell--tasks.is-editing-task .task-form--edit .field input,
  .page-shell--tasks.is-editing-task .task-form--edit .field select,
  .page-shell--tasks.is-editing-task .task-form--edit .field textarea,
  .page-shell--tasks.is-creating-task .task-form--compact-modal .field input,
  .page-shell--tasks.is-creating-task .task-form--compact-modal .field select,
  .page-shell--tasks.is-creating-task .task-form--compact-modal .field textarea,
  .page-shell--inbox.is-editing-task .task-form--edit .field input,
  .page-shell--inbox.is-editing-task .task-form--edit .field select,
  .page-shell--inbox.is-editing-task .task-form--edit .field textarea {
    min-height: 3.05rem;
    border-radius: 11px;
    font-size: 16px;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit .task-form-chip,
  .page-shell--tasks.is-editing-task .task-form--edit .task-form-chip,
  .page-shell--tasks.is-creating-task .task-form--compact-modal .task-form-chip,
  .page-shell--inbox.is-editing-task .task-form--edit .task-form-chip {
    min-height: 2.35rem;
    padding: 0.5rem 0.82rem;
    font-size: 0.88rem;
    font-weight: 760;
  }

  /* Task schedule chips use compact chip language, not field-label casing. */
  .page-shell--dashboard.is-editing-task .task-form--edit .field--task-schedule .task-form-chip,
  .page-shell--tasks.is-editing-task .task-form--edit .field--task-schedule .task-form-chip,
  .page-shell--tasks.is-creating-task .task-form--compact-modal .field--task-schedule .task-form-chip,
  .page-shell--inbox.is-editing-task .task-form--edit .field--task-schedule .task-form-chip {
    min-height: 2.35rem;
    padding: 0.5rem 0.82rem;
    font-size: 0.88rem;
    font-weight: 760;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit .field--task-schedule label.task-form-chip,
  .page-shell--tasks.is-editing-task .task-form--edit .field--task-schedule label.task-form-chip,
  .page-shell--tasks.is-creating-task .task-form--compact-modal .field--task-schedule label.task-form-chip,
  .page-shell--inbox.is-editing-task .task-form--edit .field--task-schedule label.task-form-chip {
    color: var(--color-ink);
    letter-spacing: 0;
    text-transform: none;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit > .form-actions,
  .page-shell--tasks.is-editing-task .task-form--edit > .form-actions,
  .page-shell--inbox.is-editing-task .task-form--edit > .form-actions {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    margin: 0;
    padding: 0.72rem 0.95rem calc(0.9rem + env(safe-area-inset-bottom)) 4.65rem;
    background: color-mix(in srgb, var(--color-card) 95%, white);
    filter: drop-shadow(0 -12px 18px color-mix(in srgb, var(--color-ink) 14%, transparent));
  }

  .page-shell--tasks.is-creating-task .task-form--compact-modal > .form-actions {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    margin: 0;
    padding: 0.72rem 0.95rem calc(0.9rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-card) 95%, white);
    filter: drop-shadow(0 -12px 18px color-mix(in srgb, var(--color-ink) 14%, transparent));
  }

  .page-shell--dashboard.is-editing-task .task-delete-icon-form,
  .page-shell--tasks.is-editing-task .task-delete-icon-form,
  .page-shell--inbox.is-editing-task .task-delete-icon-form {
    position: absolute;
    bottom: calc(0.9rem + env(safe-area-inset-bottom));
    left: 0.95rem;
    z-index: 3;
    margin: 0;
  }
}

@media (min-width: 761px) {
  .page-shell--dashboard.is-editing-task .task-edit-panel,
  .page-shell--tasks.is-editing-task .task-edit-panel,
  .page-shell--tasks.is-creating-task .task-create-page {
    width: min(560px, calc(100vw - 2rem));
    max-height: min(86dvh, 43rem);
    padding: 1.15rem 1.15rem 5.2rem;
    border-radius: 18px;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit,
  .page-shell--tasks.is-editing-task .task-form--edit,
  .page-shell--tasks.is-creating-task .task-form--compact-modal {
    display: grid;
    gap: 0.72rem;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit .task-form__grid--personal,
  .page-shell--tasks.is-editing-task .task-form--edit .task-form__grid--personal,
  .page-shell--tasks.is-creating-task .task-form--compact-modal .task-form__grid--personal {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.72rem 0.9rem;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit .task-form__identity,
  .page-shell--dashboard.is-editing-task .task-form--edit .field--task-schedule,
  .page-shell--tasks.is-editing-task .task-form--edit .task-form__identity,
  .page-shell--tasks.is-editing-task .task-form--edit .field--task-schedule,
  .page-shell--tasks.is-creating-task .task-form--compact-modal .task-form__identity,
  .page-shell--tasks.is-creating-task .task-form--compact-modal .field--task-schedule {
    grid-column: 1 / -1;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit > .form-actions,
  .page-shell--tasks.is-editing-task .task-form--edit > .form-actions {
    padding: 0.85rem 1.15rem 0.85rem 5.25rem;
  }

  .page-shell--tasks.is-creating-task .task-form--compact-modal > .form-actions {
    padding: 0.85rem 1.15rem;
  }
}

.page-shell--tasks.is-editing-task .task-edit-panel > .panel-heading,
.page-shell--tasks.is-creating-task .task-create-page > .panel-heading,
.page-shell--dashboard.is-editing-task .task-edit-panel > .panel-heading,
.page-shell--inbox.is-editing-task .task-edit-panel > .panel-heading {
  display: none !important;
}

/* Task overlays retain the compact task form. */
@media (max-width: 760px) {
  .page-shell--dashboard.is-editing-task .task-edit-panel,
  .page-shell--tasks.is-editing-task .task-edit-panel,
  .page-shell--tasks.is-creating-task .task-create-page,
  .page-shell--inbox.is-editing-task .task-edit-panel {
    inset: auto 0 0 !important;
    width: auto;
    max-height: 92dvh;
    padding: 0.95rem 1.35rem calc(7.55rem + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit > .form-actions,
  .page-shell--tasks.is-editing-task .task-form--edit > .form-actions,
  .page-shell--inbox.is-editing-task .task-form--edit > .form-actions {
    padding: 0.95rem 1.35rem calc(1.55rem + env(safe-area-inset-bottom)) 5.25rem;
  }

  .page-shell--tasks.is-creating-task .task-form--compact-modal > .form-actions {
    padding: 0.95rem 1.35rem calc(1.55rem + env(safe-area-inset-bottom));
  }

  .page-shell--dashboard.is-editing-task .task-delete-icon-form,
  .page-shell--tasks.is-editing-task .task-delete-icon-form,
  .page-shell--inbox.is-editing-task .task-delete-icon-form {
    bottom: calc(1.55rem + env(safe-area-inset-bottom));
    left: 1.35rem;
  }
}

@media (min-width: 761px) {
  .page-shell--dashboard.is-editing-task .task-edit-panel,
  .page-shell--tasks.is-editing-task .task-edit-panel,
  .page-shell--tasks.is-creating-task .task-create-page {
    width: min(540px, calc(100vw - 2rem));
    max-height: min(86dvh, 44rem);
    padding: 1.25rem 1.35rem 5.55rem;
    border-radius: 16px;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit > .form-actions,
  .page-shell--tasks.is-editing-task .task-form--edit > .form-actions {
    padding: 1rem 1.35rem 1.55rem 5.4rem;
  }

  .page-shell--tasks.is-creating-task .task-form--compact-modal > .form-actions {
    padding: 1rem 1.35rem 1.55rem;
  }

  .page-shell--dashboard.is-editing-task .task-delete-icon-form,
  .page-shell--tasks.is-editing-task .task-delete-icon-form {
    bottom: 1.45rem;
    left: 1.35rem;
  }
}

/* Dashboard and Inbox task edits reuse the Tasks overlay geometry and compact form layout. */
@media (max-width: 760px) {
  .page-shell--dashboard.is-editing-task .task-form .field--title,
  .page-shell--inbox.is-editing-task .task-form .field--title,
  .page-shell--dashboard.is-editing-task .task-form .field--url,
  .page-shell--inbox.is-editing-task .task-form .field--url,
  .page-shell--dashboard.is-editing-task .task-form .field--assignee,
  .page-shell--inbox.is-editing-task .task-form .field--assignee,
  .page-shell--dashboard.is-editing-task .task-form .field--recurrence-frequency,
  .page-shell--inbox.is-editing-task .task-form .field--recurrence-frequency,
  .page-shell--dashboard.is-editing-task .task-form .recurrence-custom-fields,
  .page-shell--inbox.is-editing-task .task-form .recurrence-custom-fields,
  .page-shell--dashboard.is-editing-task .notes-field,
  .page-shell--inbox.is-editing-task .notes-field {
    grid-column: 1 / -1;
  }

  .page-shell--dashboard.is-editing-task .task-form,
  .page-shell--inbox.is-editing-task .task-form {
    gap: 0.72rem;
  }

  .page-shell--dashboard.is-editing-task .task-form .field input,
  .page-shell--dashboard.is-editing-task .task-form .field select,
  .page-shell--dashboard.is-editing-task .task-form .field textarea,
  .page-shell--inbox.is-editing-task .task-form .field input,
  .page-shell--inbox.is-editing-task .task-form .field select,
  .page-shell--inbox.is-editing-task .task-form .field textarea {
    width: 100%;
  }

  .page-shell--dashboard.is-editing-task .notes-field textarea,
  .page-shell--inbox.is-editing-task .notes-field textarea {
    min-height: 3.15rem;
    height: 3.15rem;
  }

  .page-shell--dashboard.is-editing-task .task-subtask-editor,
  .page-shell--inbox.is-editing-task .task-subtask-editor {
    margin-top: 0;
  }

  .page-shell--dashboard.is-editing-task .task-edit-panel,
  .page-shell--tasks.is-editing-task .task-edit-panel,
  .page-shell--tasks.is-creating-task .task-create-page,
  .page-shell--inbox.is-editing-task .task-edit-panel {
    scroll-padding-bottom: calc(8rem + env(safe-area-inset-bottom));
  }

  .page-shell--dashboard.is-editing-task .task-form--edit > .form-actions,
  .page-shell--tasks.is-editing-task .task-form--edit > .form-actions,
  .page-shell--tasks.is-creating-task .task-form--compact-modal > .form-actions,
  .page-shell--inbox.is-editing-task .task-form--edit > .form-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 82;
  }

  .page-shell--dashboard.is-editing-task .task-delete-icon-form,
  .page-shell--tasks.is-editing-task .task-delete-icon-form,
  .page-shell--inbox.is-editing-task .task-delete-icon-form {
    position: fixed;
    z-index: 83;
  }
}

/* Task edit/add sheets own mobile scrolling while page behind stays locked. */
@media (max-width: 760px) {
  .page-shell--dashboard.is-editing-task .task-edit-panel,
  .page-shell--tasks.is-editing-task .task-edit-panel,
  .page-shell--tasks.is-creating-task .task-create-page,
  .page-shell--inbox.is-editing-task .task-edit-panel {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }
}

/* Habits topbars keep title/actions on one visual row across phone and web. */
.page-shell--habits .habits-list-titlebar {
  align-items: center;
}

@media (min-width: 761px) {
  .page-shell--habits .habits-list-titlebar {
    min-height: 2.8rem;
  }

  .page-shell--habits .habits-list-titlebar__copy,
  .page-shell--habits .habits-list-titlebar__controls {
    align-self: center;
  }
}

@media (max-width: 760px) {
  .page-shell--habits .habits-app-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 4.45rem;
    padding: 0.9rem 0 0.7rem;
  }

  .page-shell--habits .habits-app-header .app-header__copy {
    display: grid;
    grid-template-columns: 2.125rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.85rem;
    min-width: 0;
  }

  .page-shell--habits .habits-header-back-link{
    width: 2.125rem;
    height: 2.125rem;
    min-width: 2.125rem;
    min-height: 2.125rem;
    align-self: center;
  }

  .page-shell--habits .habits-app-header .app-header__title {
    align-self: center;
    line-height: 1;
  }

  /* Tasks management header reuses the Habits phone gold standard. */
  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-app-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 4.45rem;
    padding: 0.9rem 0 0.7rem;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-app-header .app-header__copy {
    display: grid;
    grid-template-columns: 2.125rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.85rem;
    min-width: 0;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-header-back-link,
  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-create-panel__summary {
    width: 2.125rem;
    height: 2.125rem;
    min-width: 2.125rem;
    min-height: 2.125rem;
    align-self: center;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .tasks-app-header .app-header__title {
    align-self: center;
    line-height: 1;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-create-panel__summary {
    border-radius: 8px;
    font-size: 1.45rem;
    line-height: 1;
  }

  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-create-panel__summary::before,
  .page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-create-panel__summary::after {
    width: 0.72rem;
    height: 0.13rem;
  }

  /* Tasks gold-standard header applied to sibling workspaces. */
  .page-shell--calendar .calendar-app-header,
  .page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chores-app-header,
  .page-shell--shopping:not(.is-creating-shopping-item):not(.is-editing-shopping-item) .shopping-app-header,
  .page-shell--family:not(.is-editing-family-work) .family-app-header,
  .page-shell--inbox:not(.is-editing-task) .inbox-app-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 4.45rem;
    padding: 0.9rem 0 0.7rem;
  }

  .page-shell--calendar .calendar-app-header .app-header__copy,
  .page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chores-app-header .app-header__copy,
  .page-shell--shopping:not(.is-creating-shopping-item):not(.is-editing-shopping-item) .shopping-app-header .app-header__copy,
  .page-shell--family:not(.is-editing-family-work) .family-app-header .app-header__copy,
  .page-shell--inbox:not(.is-editing-task) .inbox-app-header .app-header__copy {
    display: grid;
    grid-template-columns: 2.125rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.85rem;
    min-width: 0;
  }

  .page-shell--calendar .calendar-header-back-link,
  .page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chores-header-back-link,
  .page-shell--shopping:not(.is-creating-shopping-item):not(.is-editing-shopping-item) .shopping-header-back-link,
  .page-shell--family:not(.is-editing-family-work) .family-header-back-link,
  .page-shell--inbox:not(.is-editing-task) .inbox-header-back-link {
    display: grid;
    width: 2.125rem;
    min-width: 2.125rem;
    height: 2.125rem;
    min-height: 2.125rem;
    align-self: center;
  }

  .page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chores-header-back-link,
  .page-shell--family:not(.is-editing-family-work) .family-header-back-link {
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: var(--color-card);
    color: var(--color-muted);
    font-size: 1.45rem;
    line-height: 1;
    text-decoration: none;
  }

  .page-shell--calendar .calendar-app-header .app-header__title,
  .page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chores-app-header .app-header__title,
  .page-shell--shopping:not(.is-creating-shopping-item):not(.is-editing-shopping-item) .shopping-app-header .app-header__title,
  .page-shell--family:not(.is-editing-family-work) .family-app-header .app-header__title,
  .page-shell--inbox:not(.is-editing-task) .inbox-app-header .app-header__title {
    align-self: center;
    line-height: 1;
  }

  .page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-create-panel__summary,
  .page-shell--shopping:not(.is-creating-shopping-item):not(.is-editing-shopping-item) .shopping-settings-button,
  .page-shell--family:not(.is-editing-family-work) .family-app-header .daily-dashboard__settings {
    width: 2.125rem;
    min-width: 2.125rem;
    height: 2.125rem;
    min-height: 2.125rem;
    align-self: center;
  }

  .page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-create-panel__summary {
    border-radius: 8px;
    font-size: 1.45rem;
    line-height: 1;
  }

  .page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-create-panel__summary::before,
  .page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-create-panel__summary::after {
    width: 0.72rem;
    height: 0.13rem;
  }

  /* Phone Habits gold standard: unframed outer shell, with Tasks-matched card-row rhythm. */
  .page-shell--habits .habits-list-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--habits .habits-list-titlebar {
    margin: 0 0 1.25rem;
  }

  .page-shell--habits .habits-list-titlebar__controls {
    width: 100%;
  }

  .page-shell--habits .habits-filter.segmented {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-height: auto;
    padding: 0.25rem;
    border-radius: 8px;
  }

  .page-shell--habits .habits-filter--with-assigned.segmented {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-shell--habits .habits-filter__link {
    min-width: 0;
    min-height: 1.55rem;
    padding: 0 0.45rem;
    border-radius: 6px;
    font-size: 0.86rem;
    font-weight: 650;
  }

  .page-shell--habits .habits-filter__link > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-shell--habits .habit-progress-card {
    gap: 0.9rem;
    min-height: 4.25rem;
    margin: 0 0 1.45rem;
    padding: 1rem;
    border-radius: 16px;
  }

  .page-shell--habits .habit-list {
    gap: 0.7rem;
  }

  .page-shell--habits .habit-section {
    gap: 0.85rem;
  }

  .page-shell--habits .habit-section + .habit-section {
    margin-top: 1.35rem;
  }

  .page-shell--habits .habit-section .task-section__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin: 0.1rem 0 0.15rem;
  }

  .page-shell--habits .habit-section .task-section__header::before {
    align-self: center;
    width: 0.42rem;
    height: 2rem;
    min-height: 2rem;
  }

  .page-shell--habits .habit-section .task-section__header .section-title {
    font-size: 1rem;
    font-weight: 820;
  }

  .page-shell--habits .habit-section .task-section__count {
    min-height: 2rem;
    padding: 0 0.9rem;
    font-size: 0.9rem;
    font-weight: 820;
  }

  .page-shell--habits .habit-row {
    grid-template-columns: 1.95rem minmax(0, 1fr);
    gap: 0.6rem;
    min-height: 3.85rem;
    padding: 0.9rem 1.05rem;
    border-radius: 16px;
    background: var(--app-surface);
  }

  .page-shell--habits .habit-toggle,
  .page-shell--habits .habit-toggle input,
  .page-shell--habits .habit-toggle--placeholder {
    width: 1.7rem;
    height: 1.7rem;
  }

  .page-shell--habits .habit-row__main {
    gap: 0.6rem;
  }

  /* Dedicated Habits rows match Tasks inner spacing and text scale. */
  .page-shell--habits .habit-row__copy strong {
    font-size: 0.96rem;
    font-weight: 790;
    line-height: 1.2;
  }

  .page-shell--habits .habit-row__copy em {
    font-size: 0.74rem;
    font-weight: 640;
    line-height: 1.16;
  }

  .page-shell--habits .habit-stats {
    font-size: 0.74rem;
    font-weight: 640;
    line-height: 1.16;
  }
}

/* Home header actions share one button shell; Inbox must visually match Settings. */
.page-shell--dashboard .daily-dashboard__inbox,
.page-shell--dashboard .daily-dashboard__settings {
  display: inline-grid;
  place-items: center;
  width: 2.45rem;
  min-width: 2.45rem;
  height: 2.45rem;
  align-self: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--app-muted-2) 32%, var(--app-line));
  border-radius: 0.84rem;
  background: var(--app-surface);
  color: var(--app-muted-2);
  text-decoration: none;
  line-height: 0;
}

.page-shell--dashboard .daily-dashboard__inbox svg,
.page-shell--dashboard .daily-dashboard__settings svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  margin: auto;
  stroke-width: 1.8;
}

/* Task Edit web contract: shared sheet chrome with Task-only fields. */
@media (min-width: 761px) {
  .page-shell--dashboard.is-editing-task .task-edit-panel,
  .page-shell--tasks.is-editing-task .task-edit-panel,
  .page-shell--inbox.is-editing-task .task-edit-panel {
    width: min(620px, calc(100vw - 2rem));
    max-height: min(86dvh, 44rem);
    padding: 1.25rem 1.35rem 5.55rem;
    border-radius: 22px;
  }

  .page-shell--dashboard.is-editing-task .task-edit-mobile-header,
  .page-shell--tasks.is-editing-task .task-edit-mobile-header,
  .page-shell--inbox.is-editing-task .task-edit-mobile-header {
    margin-bottom: 0.75rem;
  }

  .page-shell--dashboard.is-editing-task .task-edit-mobile-header h2,
  .page-shell--tasks.is-editing-task .task-edit-mobile-header h2,
  .page-shell--inbox.is-editing-task .task-edit-mobile-header h2 {
    font-size: 1.25rem;
    line-height: 1.05;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit,
  .page-shell--tasks.is-editing-task .task-form--edit,
  .page-shell--inbox.is-editing-task .task-form--edit {
    gap: 0.82rem;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit .task-form__grid--personal,
  .page-shell--tasks.is-editing-task .task-form--edit .task-form__grid--personal,
  .page-shell--inbox.is-editing-task .task-form--edit .task-form__grid--personal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.78rem;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit .task-form__identity,
  .page-shell--dashboard.is-editing-task .task-form--edit .field--url,
  .page-shell--dashboard.is-editing-task .task-form--edit .field--task-schedule,
  .page-shell--dashboard.is-editing-task .task-form--edit .field--recurrence-frequency,
  .page-shell--dashboard.is-editing-task .task-form--edit .field--assignee,
  .page-shell--dashboard.is-editing-task .task-form--edit .recurrence-custom-fields,
  .page-shell--dashboard.is-editing-task .task-form--edit .notes-field,
  .page-shell--dashboard.is-editing-task .task-form--edit .task-subtask-editor,
  .page-shell--tasks.is-editing-task .task-form--edit .task-form__identity,
  .page-shell--tasks.is-editing-task .task-form--edit .field--url,
  .page-shell--tasks.is-editing-task .task-form--edit .field--task-schedule,
  .page-shell--tasks.is-editing-task .task-form--edit .field--recurrence-frequency,
  .page-shell--tasks.is-editing-task .task-form--edit .field--assignee,
  .page-shell--tasks.is-editing-task .task-form--edit .recurrence-custom-fields,
  .page-shell--tasks.is-editing-task .task-form--edit .notes-field,
  .page-shell--tasks.is-editing-task .task-form--edit .task-subtask-editor,
  .page-shell--inbox.is-editing-task .task-form--edit .task-form__identity,
  .page-shell--inbox.is-editing-task .task-form--edit .field--url,
  .page-shell--inbox.is-editing-task .task-form--edit .field--task-schedule,
  .page-shell--inbox.is-editing-task .task-form--edit .field--recurrence-frequency,
  .page-shell--inbox.is-editing-task .task-form--edit .field--assignee,
  .page-shell--inbox.is-editing-task .task-form--edit .recurrence-custom-fields,
  .page-shell--inbox.is-editing-task .task-form--edit .notes-field,
  .page-shell--inbox.is-editing-task .task-form--edit .task-subtask-editor {
    grid-column: 1 / -1;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit .task-form__identity-fields,
  .page-shell--tasks.is-editing-task .task-form--edit .task-form__identity-fields,
  .page-shell--inbox.is-editing-task .task-form--edit .task-form__identity-fields {
    grid-template-columns: 4.8rem minmax(0, 1fr);
    gap: 0.65rem;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit .field input,
  .page-shell--dashboard.is-editing-task .task-form--edit .field select,
  .page-shell--dashboard.is-editing-task .task-form--edit .field textarea,
  .page-shell--tasks.is-editing-task .task-form--edit .field input,
  .page-shell--tasks.is-editing-task .task-form--edit .field select,
  .page-shell--tasks.is-editing-task .task-form--edit .field textarea,
  .page-shell--inbox.is-editing-task .task-form--edit .field input,
  .page-shell--inbox.is-editing-task .task-form--edit .field select,
  .page-shell--inbox.is-editing-task .task-form--edit .field textarea {
    width: 100%;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit .notes-field textarea,
  .page-shell--tasks.is-editing-task .task-form--edit .notes-field textarea,
  .page-shell--inbox.is-editing-task .task-form--edit .notes-field textarea {
    min-height: 3.15rem;
    height: 3.15rem;
  }

  .page-shell--dashboard.is-editing-task .task-form--edit > .form-actions,
  .page-shell--tasks.is-editing-task .task-form--edit > .form-actions,
  .page-shell--inbox.is-editing-task .task-form--edit > .form-actions {
    padding: 1rem 1.35rem 1.55rem 5.4rem;
  }

  .page-shell--dashboard.is-editing-task .task-delete-icon-form,
  .page-shell--tasks.is-editing-task .task-delete-icon-form,
  .page-shell--inbox.is-editing-task .task-delete-icon-form {
    bottom: 1.45rem;
    left: 1.35rem;
  }
}

/* Gold standard: dedicated Inbox reuses the Habits management shell without filters/progress. */
.page-shell--inbox:not(.is-editing-task) {
  align-content: start;
  width: min(100%, 100%);
  max-width: none;
  min-height: 100dvh;
  padding: 0 1.25rem 7rem;
  background: var(--habits-bg);
  color: var(--habits-ink);
}

.page-shell--inbox:not(.is-editing-task) .inbox-app-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  max-width: none;
  padding: 1.25rem 0 0.75rem;
}

.page-shell--inbox:not(.is-editing-task) .inbox-app-header .app-header__copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.page-shell--inbox:not(.is-editing-task) .inbox-header-back-link {
  display: none;
}

.page-shell--inbox:not(.is-editing-task) .inbox-layout,
.page-shell--inbox:not(.is-editing-task) .inbox-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.125rem;
  min-width: 0;
}

.page-shell--inbox:not(.is-editing-task) .inbox-list-panel {
  display: grid;
  width: 100%;
  min-width: 0;
}

/* Inbox keeps its list titlebar visible while task sheets edit over it. */
.page-shell--inbox .inbox-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
}

.page-shell--inbox .inbox-list-heading::before {
  content: none;
  display: none;
}

.page-shell--inbox .inbox-list-titlebar__copy {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.page-shell--inbox .inbox-list-titlebar__copy h2 {
  margin: 0;
  color: var(--app-ink);
  font-size: 1.65rem;
  font-weight: 860;
  line-height: 1.05;
  text-align: left;
  text-transform: none;
}

.page-shell--inbox .inbox-list-titlebar__controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.page-shell--inbox .daily-inbox-count-pill {
  flex: 0 0 auto;
  justify-self: end;
  margin-left: auto;
}

.page-shell--inbox:not(.is-editing-task) .daily-inbox-list {
  display: grid;
  gap: 0.7rem;
}

.page-shell--inbox:not(.is-editing-task) .daily-inbox-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 3.85rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--habits-hairline);
  border-radius: 16px;
  background: var(--app-surface);
}

.page-shell--inbox:not(.is-editing-task) .daily-inbox-row + .daily-inbox-row {
  border-top: 1px solid var(--habits-hairline);
}

.page-shell--inbox:not(.is-editing-task) .daily-inbox-row__copy .task-row__title {
  color: var(--habits-ink);
  font-weight: 820;
}

.page-shell--inbox:not(.is-editing-task) .daily-inbox-row__type {
  justify-self: end;
  color: var(--app-muted, var(--habits-muted, var(--daily-muted)));
  font-weight: 800;
  white-space: nowrap;
}

@media (min-width: 761px) {
  body:has(.page-shell--inbox:not(.is-editing-task)) .desktop-sidebar {
    top: var(--app-desktop-header-top);
    display: flex;
    height: var(--app-desktop-header-height);
    align-items: center;
  }

  body:has(.page-shell--inbox:not(.is-editing-task)) .desktop-sidebar__nav {
    min-height: var(--app-desktop-header-height);
    align-items: center;
    gap: clamp(0.9rem, 1.8vw, 1.65rem);
  }

  body:has(.page-shell--inbox:not(.is-editing-task)) .desktop-sidebar__link {
    align-self: center;
    gap: 0.55rem;
    min-height: 2.65rem;
    padding: 0 0.95rem;
    border-radius: 14px;
    color: color-mix(in srgb, var(--app-ink) 58%, var(--app-muted));
    font-size: 0.95rem;
    font-weight: 820;
  }

  body:has(.page-shell--inbox:not(.is-editing-task)) .desktop-sidebar__link.is-active {
    min-width: 6.9rem;
    min-height: 2.9rem;
    border-color: color-mix(in srgb, var(--app-primary) 24%, var(--app-line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--app-primary-soft) 72%, var(--app-surface));
    color: var(--app-primary-ink);
  }

  body:has(.page-shell--inbox:not(.is-editing-task)) {
    padding-left: 0;
  }

  .page-shell--inbox:not(.is-editing-task) {
    padding-top: calc(var(--app-desktop-header-top) + var(--app-desktop-header-height) + 1.9rem);
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-app-header {
    display: none;
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-layout,
  .page-shell--inbox:not(.is-editing-task) .inbox-workspace {
    width: min(100%, 72rem);
    max-width: 72rem;
    margin-inline: auto;
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-list-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-list-heading {
    min-height: 2.8rem;
    margin: 0 0 1.05rem;
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-list-titlebar__copy,
  .page-shell--inbox:not(.is-editing-task) .inbox-list-titlebar__controls {
    align-self: center;
  }

  .page-shell--inbox:not(.is-editing-task) .daily-inbox-row__copy .task-row__title {
    font-size: 0.96rem;
    line-height: 1.14;
  }
}

@media (max-width: 760px) {
  .page-shell--inbox:not(.is-editing-task) {
    padding: 0 1.5rem 7rem;
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-app-header {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 4.45rem;
    padding: 0.9rem 0 0.7rem;
    background: transparent;
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-app-header .app-header__copy {
    grid-template-columns: 2.125rem minmax(0, 1fr);
    column-gap: 0.85rem;
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-header-back-link {
    display: grid;
    width: 2.125rem;
    min-width: 2.125rem;
    height: 2.125rem;
    min-height: 2.125rem;
    align-self: center;
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-app-header .app-header__title {
    align-self: center;
    line-height: 1;
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-list-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-list-heading {
    margin: 0 0 1.25rem;
  }

  .page-shell--inbox:not(.is-editing-task) .inbox-list-titlebar__copy h2 {
    font-size: 1.45rem;
  }

  .page-shell--inbox:not(.is-editing-task) .daily-inbox-row__copy .task-row__title {
    font-size: 1rem;
    line-height: 1.12;
  }
}

/* Inbox edit overlays keep the desktop Inbox list in its normal centered position. */
@media (min-width: 761px) {
  body:has(.page-shell--inbox.is-editing-task) {
    padding-left: 0;
  }

  body:has(.page-shell--inbox.is-editing-task) .desktop-sidebar {
    top: var(--app-desktop-header-top);
    display: flex;
    height: var(--app-desktop-header-height);
    align-items: center;
  }

  body:has(.page-shell--inbox.is-editing-task) .desktop-sidebar__nav {
    min-height: var(--app-desktop-header-height);
    align-items: center;
    gap: clamp(0.9rem, 1.8vw, 1.65rem);
  }

  body:has(.page-shell--inbox.is-editing-task) .desktop-sidebar__link {
    align-self: center;
    gap: 0.55rem;
    min-height: 2.65rem;
    padding: 0 0.95rem;
    border-radius: 14px;
    color: color-mix(in srgb, var(--app-ink) 58%, var(--app-muted));
    font-size: 0.95rem;
    font-weight: 820;
  }

  body:has(.page-shell--inbox.is-editing-task) .desktop-sidebar__link.is-active {
    min-width: 6.9rem;
    min-height: 2.9rem;
    border-color: color-mix(in srgb, var(--app-primary) 24%, var(--app-line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--app-primary-soft) 72%, var(--app-surface));
    color: var(--app-primary-ink);
  }

  .page-shell--inbox.is-editing-task {
    align-content: start;
    width: min(100%, 100%);
    max-width: none;
    min-height: 100dvh;
    padding: calc(var(--app-desktop-header-top) + var(--app-desktop-header-height) + 1.9rem) 1.25rem 7rem;
    background: var(--habits-bg);
    color: var(--habits-ink);
  }

  .page-shell--inbox.is-editing-task .inbox-app-header {
    display: none;
  }

  .page-shell--inbox.is-editing-task .inbox-layout,
  .page-shell--inbox.is-editing-task .inbox-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;
    width: min(100%, 72rem);
    max-width: 72rem;
    min-width: 0;
    margin-inline: auto;
  }

  .page-shell--inbox.is-editing-task .inbox-list-panel {
    display: grid;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--inbox.is-editing-task .inbox-list-heading {
    min-height: 2.8rem;
    margin: 0 0 1.05rem;
  }

  .page-shell--inbox.is-editing-task .inbox-list-titlebar__copy,
  .page-shell--inbox.is-editing-task .inbox-list-titlebar__controls {
    align-self: center;
  }

  .page-shell--inbox.is-editing-task .daily-inbox-list {
    display: grid;
    gap: 0.7rem;
  }

  .page-shell--inbox.is-editing-task .daily-inbox-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 3.85rem;
    padding: 0.9rem 1.05rem;
    border: 1px solid var(--habits-hairline);
    border-radius: 16px;
    background: var(--app-surface);
  }

  .page-shell--inbox.is-editing-task .daily-inbox-row + .daily-inbox-row {
    border-top: 1px solid var(--habits-hairline);
  }

  .page-shell--inbox.is-editing-task .daily-inbox-row__copy .task-row__title {
    color: var(--habits-ink);
    font-size: 0.96rem;
    font-weight: 820;
    line-height: 1.14;
  }

  .page-shell--inbox.is-editing-task .daily-inbox-row__type {
    justify-self: end;
    color: var(--app-muted, var(--habits-muted, var(--daily-muted)));
    font-weight: 800;
    white-space: nowrap;
  }
}

/* Inbox edit overlays preserve the unframed Inbox row list behind the sheet. */
@media (min-width: 761px) {
  .page-shell--inbox.is-editing-task .daily-inbox-list {
    gap: 0;
  }

  .page-shell--inbox.is-editing-task .daily-inbox-row {
    min-height: 3.02rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-shell--inbox.is-editing-task .daily-inbox-row + .daily-inbox-row {
    border-top: 1px solid var(--app-line);
  }
}

/* Shared section-label typography: match Home Habits heading while preserving section colors. */
.page-shell--habits .habit-section .task-section__header .section-title,
.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section .task-section__header .section-title,
.page-shell--calendar .calendar-section .task-section__header .section-title,
.page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-section .task-section__header .section-title,
.page-shell--shopping .shopping-store-group__header .section-title,
.page-shell--family .family-work-section .task-section__header .section-title {
  font-size: 1.02rem;
  font-weight: 860;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Shared section color contract: overdue red, today green, next/store muted. */
.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section--upcoming .task-section__header::before,
.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section--no-date .task-section__header::before,
.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section--completed:not(.task-section--today) .task-section__header::before,
.page-shell--family .family-work-section.task-section--upcoming .task-section__header::before {
  background: var(--tasks-muted);
}

.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section--upcoming .task-section__header .section-title,
.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section--no-date .task-section__header .section-title,
.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section--completed:not(.task-section--today) .task-section__header .section-title,
.page-shell--family .family-work-section.task-section--upcoming .task-section__header .section-title {
  color: var(--tasks-muted);
}

.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section--upcoming .task-section__count,
.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section--no-date .task-section__count,
.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section--completed:not(.task-section--today) .task-section__count,
.page-shell--family .family-work-section.task-section--upcoming .task-section__count {
  background: var(--tasks-surface-soft);
  color: var(--tasks-muted);
}

.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section--overdue .task-section__header::before,
.page-shell--family .family-work-section.task-section--overdue .task-section__header::before {
  background: var(--tasks-danger);
}

.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section--overdue .task-section__header .section-title,
.page-shell--family .family-work-section.task-section--overdue .task-section__header .section-title {
  color: var(--tasks-danger);
}

.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section--overdue .task-section__count,
.page-shell--family .family-work-section.task-section--overdue .task-section__count {
  background: color-mix(in srgb, var(--tasks-rose-soft) 68%, var(--tasks-surface));
  color: var(--tasks-danger);
}

.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section--today .task-section__header::before,
.page-shell--family .family-work-section.task-section--today .task-section__header::before {
  background: var(--tasks-primary);
}

.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section--today .task-section__header .section-title,
.page-shell--family .family-work-section.task-section--today .task-section__header .section-title {
  color: var(--tasks-primary);
}

.page-shell--tasks:not(.is-creating-task):not(.is-editing-task) .task-section--today .task-section__count,
.page-shell--family .family-work-section.task-section--today .task-section__count {
  background: var(--tasks-primary-soft);
  color: var(--tasks-primary);
}

.page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-section--upcoming .task-section__header::before,
.page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-section--done:not(.chore-section--today) .task-section__header::before {
  background: var(--chores-muted);
}

.page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-section--upcoming .task-section__header .section-title,
.page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-section--done:not(.chore-section--today) .task-section__header .section-title {
  color: var(--chores-muted);
}

.page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-section--upcoming .task-section__count,
.page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-section--done:not(.chore-section--today) .task-section__count {
  background: var(--chores-surface-soft);
  color: var(--chores-muted);
}

.page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-section--overdue .task-section__header::before {
  background: var(--chores-danger);
}

.page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-section--overdue .task-section__header .section-title {
  color: var(--chores-danger);
}

.page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-section--overdue .task-section__count {
  background: color-mix(in srgb, var(--chores-rose-soft) 68%, var(--chores-surface));
  color: var(--chores-danger);
}

.page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-section--today .task-section__header::before {
  background: var(--chores-primary);
}

.page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-section--today .task-section__header .section-title {
  color: var(--chores-primary);
}

.page-shell--chores:not(.is-creating-chore):not(.is-editing-chore) .chore-section--today .task-section__count {
  background: var(--chores-primary-soft);
  color: var(--chores-primary);
}

.page-shell--shopping .shopping-store-group__header::before {
  background: var(--shopping-muted);
}

.page-shell--shopping .shopping-store-group__header .section-title {
  color: var(--shopping-muted);
}

.page-shell--shopping .shopping-store-group__count {
  background: var(--shopping-surface-soft);
  color: var(--shopping-muted);
}
/* Bounded Done-history navigation; shared by Tasks, Chores, Habits, and Shopping. */
.history-pagination {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
}

.history-pagination a {
  align-items: center;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: 999px;
  color: var(--app-ink);
  display: inline-flex;
  font-weight: 750;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  text-decoration: none;
}