:root {
  --primary: #4f46e5;
  --primary-strong: #4338ca;
  --primary-contrast: #ffffff;
  /* Foreground for ghost (outline) buttons. Overridden in dark mode to keep
     the text/border legible on dark panels (WCAG AA). */
  --ghost-fg: #4f46e5;
  --accent: #14b8a6;
  --radius: 14px;
  --max-width: 1040px;
  --transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Light theme (default) ---- */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --page-bg: linear-gradient(160deg, #e0e7ff 0%, #eef2ff 40%, #faf5ff 100%);
  --on-page: #1e1b4b;
  --on-page-soft: #4338ca;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --text: #0f172a;
  --text-soft: #475569;
  --border: #e2e8f0;
  --chip-bg: rgba(79, 70, 229, 0.10);
  --chip-border: rgba(79, 70, 229, 0.25);
  --code-bg: #0f172a;
  --code-text: #e2e8f0;
  --inline-code-bg: rgba(15, 23, 42, 0.06);
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

/* ---- Dark theme ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: linear-gradient(160deg, #0f172a 0%, #312e81 55%, #4338ca 100%);
  --on-page: #f1f5f9;
  --on-page-soft: #c7d2fe;
  --ghost-fg: #a5b4fc;
  --surface: #1e293b;
  --surface-alt: #0f172a;
  --text: #e2e8f0;
  --text-soft: #94a3b8;
  --border: #334155;
  --chip-bg: rgba(255, 255, 255, 0.10);
  --chip-border: rgba(255, 255, 255, 0.22);
  --code-bg: #020617;
  --code-text: #e2e8f0;
  --inline-code-bg: rgba(255, 255, 255, 0.08);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* Follow the OS preference when the visitor hasn't chosen explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --page-bg: linear-gradient(160deg, #0f172a 0%, #312e81 55%, #4338ca 100%);
    --on-page: #f1f5f9;
    --on-page-soft: #c7d2fe;
    --ghost-fg: #a5b4fc;
    --surface: #1e293b;
    --surface-alt: #0f172a;
    --text: #e2e8f0;
    --text-soft: #94a3b8;
    --border: #334155;
    --chip-bg: rgba(255, 255, 255, 0.10);
    --chip-border: rgba(255, 255, 255, 0.22);
    --code-bg: #020617;
    --code-text: #e2e8f0;
    --inline-code-bg: rgba(255, 255, 255, 0.08);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--text);
  background: var(--page-bg);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.55;
  transition: var(--transition);
}

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0 2rem;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--on-page);
  font-weight: 700;
  font-size: 1.25rem;
}

.brand__mark { font-size: 1.5rem; }

.brand--docs { color: var(--text); margin-bottom: 0.5rem; }
.brand--docs .brand__name { font-size: 1rem; }

.badge {
  background: var(--chip-bg);
  color: var(--on-page);
  border: 1px solid var(--chip-border);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--on-page);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: var(--transition), transform 0.05s ease;
}

.theme-toggle:hover { border-color: var(--primary); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Hero content */
.hero__content { color: var(--on-page); }

h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  color: var(--on-page);
}

.lead {
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  max-width: 46ch;
  color: var(--on-page-soft);
  margin: 0 0 2.5rem;
}

/* Features */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.feature {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.feature__icon { font-size: 1.8rem; }

.feature h2 {
  font-size: 1.1rem;
  margin: 0.6rem 0 0.4rem;
}

.feature p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* CTA */
.cta {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.cta h2 { margin-top: 0; }

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.2rem 0 0.5rem;
}

.button {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.05s ease, background 0.2s ease;
}

.button:active { transform: translateY(1px); }

.button--primary {
  background: var(--primary);
  color: var(--primary-contrast);
}

.button--primary:hover { background: var(--primary-strong); }

.button--ghost {
  background: transparent;
  color: var(--ghost-fg);
  border: 1px solid var(--ghost-fg);
}

.button--ghost:hover { background: rgba(79, 70, 229, 0.08); }

.cta__note {
  color: var(--text-soft);
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
}

/* ============================ Landing page ============================ */
.pill {
  display: inline-block;
  background: var(--chip-bg);
  color: var(--on-page);
  border: 1px solid var(--chip-border);
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.landing__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-bottom: 3rem;
}
.landing__hero-text .lead { margin-bottom: 1.5rem; }
.landing__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.landing__hero-note {
  margin: 0;
  color: var(--on-page-soft);
  font-size: 0.85rem;
}
.landing__hero-preview { margin: 0; }
.landing__caption {
  margin: 0.7rem 0 0;
  color: var(--on-page-soft);
  font-size: 0.85rem;
  text-align: center;
}

.landing__section { margin: 0 0 3rem; }
.landing__title {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  color: var(--on-page);
  margin: 0 0 0.4rem;
  text-align: center;
}
.landing__subtitle {
  color: var(--on-page-soft);
  text-align: center;
  max-width: 52ch;
  margin: 0 auto 1.8rem;
}

/* How-it-works steps */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  counter-reset: step;
}
.step {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow);
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-contrast);
  font-weight: 700;
}
.step h3 { margin: 0.7rem 0 0.3rem; font-size: 1.05rem; }
.step p { margin: 0; color: var(--text-soft); font-size: 0.95rem; }

/* Showcase grid */
.showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.showcase__item { margin: 0; }

/* ---- App-window mockups (decorative, theme-aware, no real data) ---- */
.mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.mock__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--border);
}
.mock__name {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-soft);
}
.mock__body { padding: 0.9rem; }
.mock__body--list { display: flex; flex-direction: column; gap: 0.55rem; }

/* Colour palette for mock chips/dots (set via class, not inline style, for CSP) */
.mock-c1 { --c: #4f46e5; }
.mock-c2 { --c: #0ea5e9; }
.mock-c3 { --c: #f59e0b; }
.mock-c4 { --c: #ec4899; }
.mock-c5 { --c: #10b981; }

/* Calendar mock */
.mock-cal__head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.3rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-soft);
  text-align: center;
}
.mock-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}
.mock-cal__cell {
  min-height: 2.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
}
.mock-cal__cell--muted { opacity: 0.5; }
.mock-cal__cell--today {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.mock-cal__num { font-size: 0.6rem; color: var(--text-soft); }
.mock-chip {
  font-size: 0.6rem;
  line-height: 1.3;
  color: #fff;
  background: var(--c, var(--primary));
  border-radius: 4px;
  padding: 0.05rem 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* List rows (chores) */
.mock-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
}
.mock-row--overdue { border-color: #ef4444; }
.mock-check {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  border: 2px solid var(--border);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #fff;
}
.mock-check--done { background: var(--accent); border-color: var(--accent); }
.mock-row__title { flex: 1 1 auto; color: var(--text); }
.mock-row__title--done { text-decoration: line-through; color: var(--text-soft); }
.mock-row__meta { font-size: 0.72rem; color: var(--text-soft); white-space: nowrap; }
.mock-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--c, var(--primary));
  flex: none;
}
.mock-badge {
  font-size: 0.7rem;
  color: var(--text-soft);
}

/* Reminder rows */
.mock-rem {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.mock-rem--alert { border-color: #ef4444; }
.mock-rem__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: var(--c, var(--primary));
  flex: none;
}
.mock-rem__title { margin: 0; font-size: 0.85rem; color: var(--text); font-weight: 600; }
.mock-rem__sub { margin: 0; font-size: 0.72rem; color: var(--text-soft); }

@media (max-width: 760px) {
  .landing__hero { grid-template-columns: 1fr; }
  .landing__hero-preview { order: -1; }
}

/* Family workspace */
.workspace__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.family-switcher {
  display: inline-flex;
  flex-direction: column;
  gap: 0.3rem;
}

.family-switcher__label {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-page-soft);
}

.family-switcher__select,
.input {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  padding: 0.6rem 1rem;
}

.family-switcher__select:focus-visible,
.input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Accessibility: a consistent, visible keyboard focus ring on every
   interactive element. `:where()` keeps specificity at 0 so the more specific
   rules above (inputs, the theme toggle) still win where they apply. Only
   keyboard focus shows the ring (:focus-visible), so mouse users are unaffected. */
:where(a[href], button, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.input { flex: 1 1 14rem; min-width: 0; }

/* Inline forms (create family, invite) */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.2rem 0 0.4rem;
}

.inline-form .button { white-space: nowrap; }

/* Panel */
/* Tabbed in-app navigation (Home / Account) */
.tabs {
  display: flex;
  gap: 0.25rem;
  margin-top: 1.5rem;
  padding: 0.3rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.tab {
  flex: 1 1 0;
  border: none;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.6rem 1rem;
  border-radius: calc(var(--radius) - 4px);
  cursor: pointer;
  transition: var(--transition);
}

.tab:hover { color: var(--text); }

.tab.is-active {
  background: var(--primary);
  color: var(--primary-contrast);
}

.tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Segmented control (e.g. theme: System / Light / Dark) */
.segmented {
  display: inline-flex;
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.segmented__option {
  border: none;
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  transition: var(--transition);
}

.segmented__option + .segmented__option { border-left: 1px solid var(--border); }

.segmented__option:hover { background: var(--surface-alt); }

.segmented__option.is-active {
  background: var(--primary);
  color: var(--primary-contrast);
}

.segmented__option:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.panel {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
  margin-top: 1.5rem;
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.panel__title { margin: 0; font-size: 1.2rem; }

/* Member list */
.member-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.member-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--chip-border);
  border-radius: var(--radius);
}

.member-list__name { font-weight: 600; }

.member-list__left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

/* Editable colour input — render as a small round swatch. */
.member-list__swatch {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 1px solid var(--chip-border);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.member-list__swatch::-webkit-color-swatch-wrapper { padding: 0; }
.member-list__swatch::-webkit-color-swatch { border: none; border-radius: 50%; }
.member-list__swatch::-moz-color-swatch { border: none; border-radius: 50%; }
.member-list__swatch--static { cursor: default; }

.member-list__role {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-page-soft);
}

/* Organiser actions for a managed (proxy) child member. */
.member-list__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: auto;
}
.member-list__action {
  font-size: 0.78rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--chip-border);
  border-radius: var(--radius);
  background: none;
  color: inherit;
  cursor: pointer;
}
.member-list__action:hover { background: var(--chip-border); }

.member-list__empty {
  color: var(--text-soft);
  font-size: 0.95rem;
  padding: 0.4rem 0;
}

/* Per-member role picker (managers only). */
.member-list__role-select {
  margin-left: auto;
  font-size: 0.82rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--chip-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  cursor: pointer;
}

/* Roles & permissions management panel. */
.role-list {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.role-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--chip-border);
  border-radius: var(--radius);
}
.role-list__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.role-list__name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.role-list__tag {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-page-soft);
  border: 1px solid var(--chip-border);
  border-radius: var(--radius);
  padding: 0.05rem 0.35rem;
}
.role-list__summary {
  font-size: 0.82rem;
  color: var(--on-page-soft);
}

.role-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.role-form__perms {
  border: 1px solid var(--chip-border);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.role-form__legend {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-page-soft);
  padding: 0 0.35rem;
}
.role-form__actions {
  display: flex;
  gap: 0.5rem;
}

/* Inline status / form messages */
.form-message {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--text-soft);
}

.form-message--error { color: #b91c1c; }
.form-message--success { color: #047857; }

/* Footer */
.footer {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  color: var(--on-page);
  font-size: 0.85rem;
}

.footer__links {
  display: flex;
  gap: 1.25rem;
}

.footer a {
  color: var(--on-page);
  text-decoration: none;
  opacity: 0.85;
}

.footer a:hover { opacity: 1; text-decoration: underline; }

/* Legal pages (Terms, Privacy) — a single readable column in a card. */
.legal {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}
.legal h1 { margin-top: 0; }
.legal h2 { margin-top: 2rem; }
.legal__meta { color: var(--text-soft); font-size: 0.9rem; margin-top: -0.5rem; }
.legal__lead { font-size: 1.05rem; color: var(--text-soft); }
.legal table { margin: 1rem 0; }

/* Cookie / privacy notice — a dismissible bar injected by app.js. */
.consent {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 2rem));
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.consent__text { margin: 0; flex: 1 1 16rem; font-size: 0.9rem; }
.consent__actions { flex: 0 0 auto; }

/* Documentation page */
.docs {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 240px 1fr;
  overflow: hidden;
  min-height: 60vh;
}

.docs__nav {
  background: var(--surface-alt);
  border-right: 1px solid var(--border);
  padding: 1.5rem 1rem;
}

.docs__nav h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  margin: 1rem 0 0.5rem;
}

.docs__nav a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
}

.docs__nav a:hover { background: rgba(79, 70, 229, 0.12); }
.docs__nav a.active { background: var(--primary); color: var(--primary-contrast); }

.docs__content {
  padding: 2rem clamp(1.2rem, 3vw, 2.5rem);
  overflow-x: auto;
}

.docs__content h1 { color: var(--text); }
.docs__content h1, .docs__content h2, .docs__content h3 { line-height: 1.25; }
.docs__content pre {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 1rem;
  border-radius: 10px;
  overflow-x: auto;
}
.docs__content code {
  background: var(--inline-code-bg);
  padding: 0.1rem 0.35rem;
  border-radius: 5px;
  font-size: 0.9em;
}
.docs__content pre code { background: none; padding: 0; }
.docs__content table { border-collapse: collapse; width: 100%; }
.docs__content th, .docs__content td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.docs__content blockquote {
  border-left: 4px solid var(--primary);
  margin: 1rem 0;
  padding: 0.25rem 1rem;
  background: var(--chip-bg);
  color: var(--text-soft);
}

.docs__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.docs__back {
  color: var(--on-page);
  text-decoration: none;
  display: inline-block;
}
.docs__back:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .docs { grid-template-columns: 1fr; }
  .docs__nav { border-right: none; border-bottom: 1px solid var(--border); }
}

/* Help & guides page */
.help__nav a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.help__nav-icon { font-size: 1.05rem; line-height: 1; }

.help__guide-head { margin-bottom: 1.5rem; }
.help__guide-head h1 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.help__guide-icon { font-size: 1.6rem; line-height: 1; }
.help__guide-head .lead { margin: 0; color: var(--text-soft); }

.help__section { margin: 1.75rem 0; }
.help__section h2 {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.help__section p { margin: 0.6rem 0; }

.help__steps, .help__bullets {
  margin: 0.6rem 0;
  padding-left: 1.4rem;
}
.help__steps li, .help__bullets li {
  margin: 0.4rem 0;
  line-height: 1.5;
}
.help__steps { counter-reset: help-step; }

.help__callout {
  display: block;
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin: 0.9rem 0;
  background: var(--chip-bg);
  border-left: 4px solid var(--primary);
  color: var(--text);
}
.help__callout--note {
  border-left-color: var(--border);
  color: var(--text-soft);
}
.help__callout-label {
  display: inline-block;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.5rem;
  color: var(--primary);
}
.help__callout--note .help__callout-label { color: var(--text-soft); }

.help__content code {
  background: var(--inline-code-bg);
  padding: 0.1rem 0.35rem;
  border-radius: 5px;
  font-size: 0.9em;
}

/* ---- Backlog page ---- */
.backlog {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
}

.backlog__head { margin-bottom: 1.5rem; }
.backlog__head h1 { margin: 0.75rem 0 0.5rem; color: var(--on-page); }

.backlog__count {
  display: inline-block;
  margin-top: 0.25rem;
  font-weight: 600;
  color: var(--on-page-soft);
}

.backlog__list {
  display: grid;
  gap: 1rem;
}

.backlog-card {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow);
}

.backlog-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.backlog-card__title { margin: 0; font-size: 1.15rem; }

.backlog-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.backlog-card__area {
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--on-page-soft);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.backlog-card__effort {
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid var(--border);
  color: var(--text-soft);
}

.backlog-card__effort--small { color: #15803d; border-color: #15803d; }
.backlog-card__effort--medium { color: #b45309; border-color: #b45309; }
.backlog-card__effort--large { color: #b91c1c; border-color: #b91c1c; }

[data-theme="dark"] .backlog-card__effort--small { color: #4ade80; border-color: #4ade80; }
[data-theme="dark"] .backlog-card__effort--medium { color: #fbbf24; border-color: #fbbf24; }
[data-theme="dark"] .backlog-card__effort--large { color: #f87171; border-color: #f87171; }

.backlog-card__summary {
  margin: 0.8rem 0 0;
  color: var(--text);
}

.backlog-card__detail {
  margin: 0.7rem 0 0;
  padding-left: 1.2rem;
  color: var(--text-soft);
}
.backlog-card__detail li { margin: 0.3rem 0; }

@media (max-width: 560px) {
  .page { padding: 1.25rem 1rem 2rem; }
  .cta { padding: 1.5rem; }
  .cta__actions .button { flex: 1 1 100%; text-align: center; }
}

/* Calendar */
.calendar__head {
  flex-wrap: wrap;
  justify-content: space-between;
}

.calendar__nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.calendar__step {
  padding: 0.35rem 0.8rem;
  font-size: 1.1rem;
  line-height: 1;
}

.calendar__month {
  min-width: 9.5rem;
  text-align: center;
  font-weight: 600;
  font-size: 1.05rem;
}

/* View toggle (Month / Week / Day) */
.calendar__views {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-right: 0.3rem;
}

.calendar__view {
  border: none;
  border-radius: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

.calendar__view + .calendar__view { border-left: 1px solid var(--border); }

.calendar__view.is-active {
  background: var(--primary);
  color: var(--primary-contrast);
}

.calendar__grid {
  margin-top: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

/* Weekday header row (Mon..Sun), shared by month and week views. */
.calendar__weekhead {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}

/* One week = a 7-column grid; events occupy lanes (rows) and can span columns
   so a multi-day event is a single bar across the days it covers. */
.calendar__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: min-content;
}

/* Day background cell. Spans all rows behind the numbers and event bars, and is
   the click target to add an event on that day. */
.calendar__bg {
  min-height: 6.5rem;
  min-width: 0;
  padding: 0;
  border: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
.calendar__bg:hover { background: var(--chip-bg); }
.calendar__bg--muted { background: var(--surface-alt); }

/* Day number, layered above the background; clicks fall through to the cell. */
.calendar__weeknum {
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
  padding: 0.25rem 0.3rem 0;
}
.calendar__weeknum-badge {
  min-width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.8rem;
  color: var(--text);
}
.calendar__weeknum--muted .calendar__weeknum-badge { color: var(--text-soft); }
.calendar__weeknum--today .calendar__weeknum-badge {
  background: var(--primary);
  color: var(--primary-contrast);
}

/* Weather: a compact icon + temperature shown on days within the forecast
   window. Inline SVG (img-src is 'self'); colours follow the theme via
   currentColor. Non-interactive — clicks fall through to the day cell. */
.calendar__weather {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--text-soft);
}
.calendar__weeknum .calendar__weather { margin-right: auto; }
.calendar__weather-icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
}
.calendar__weather-icon svg { width: 100%; height: 100%; display: block; }
.calendar__weather-temp { font-weight: 600; color: var(--text); }
.calendar__weather-low { color: var(--text-soft); }
.calendar__day--muted .calendar__weather,
.calendar__day--muted .calendar__weather-temp { color: var(--text-soft); }

/* Day view: the badge sits under the date number, a little larger. */
.calendar__day--expanded .calendar__weather {
  align-self: flex-end;
  font-size: 0.85rem;
  gap: 0.3rem;
}
.calendar__day--expanded .calendar__weather-icon { width: 1.3rem; height: 1.3rem; }

/* List view: the badge stacks under the date, centred with it. */
.calendar__list-date .calendar__weather { margin-top: 0.15rem; }

/* Weather location picker (Account → Weather settings). */
.weather-results {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.weather-results__item {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
.weather-results__item:hover { border-color: var(--primary); }
.weather-results__item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Week view: a single tall week row. */
.calendar__grid--week .calendar__bg { min-height: 14rem; }

/* Day view: one full-width column listing the day's events. */
.calendar__day--expanded { min-height: 18rem; }
.calendar__day--expanded .calendar__events { overflow: visible; gap: 0.35rem; }
.calendar__day--expanded .calendar__chip { font-size: 0.9rem; padding: 0.45rem 0.6rem; }

/* List (agenda) view: days stacked vertically, each with its events listed below. */
.calendar__grid--list {
  display: block;
  background: var(--surface);
}

.calendar__list-day {
  display: flex;
  gap: 0.85rem;
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

.calendar__list-day:last-child { border-bottom: none; }

.calendar__list-date {
  flex: 0 0 3.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  padding: 0.3rem 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  height: fit-content;
}

.calendar__list-date:hover { background: var(--chip-bg); }

.calendar__list-dow {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
}

.calendar__list-num {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
}

.calendar__list-mon {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
}

.calendar__list-day--today .calendar__list-num { color: var(--primary); }

.calendar__list-events {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.calendar__empty {
  margin: 0;
  padding: 1rem 0.2rem;
  color: var(--text-soft);
  text-align: center;
}

/* Member colour legend */
.calendar__legend {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.8rem;
  color: var(--text-soft);
}

.calendar__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.calendar__legend-dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.calendar__weekday {
  background: var(--surface-alt);
  padding: 0.5rem 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-align: center;
  font-weight: 600;
}

.calendar__day {
  background: var(--surface);
  min-height: 6.5rem;
  /* Allow the cell to shrink within its grid track so long event titles
     ellipsis-truncate instead of widening the column. */
  min-width: 0;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.calendar__day--muted { background: var(--surface-alt); }
.calendar__day--muted .calendar__daynum { color: var(--text-soft); }

.calendar__day--today .calendar__daynum {
  background: var(--primary);
  color: var(--primary-contrast);
}

.calendar__daynum {
  align-self: flex-end;
  width: 1.7rem;
  height: 1.7rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.calendar__daynum:hover { background: var(--chip-bg); }

.calendar__events {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow: hidden;
}

.calendar__chip {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--text);
  border-radius: 7px;
  padding: 0.15rem 0.4rem;
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
  overflow: hidden;
}

.calendar__chip:hover { border-color: var(--primary); }
.calendar__chip--allday {
  background: var(--primary);
  color: var(--primary-contrast);
  border-color: var(--primary);
}

.calendar__chip-time { font-variant-numeric: tabular-nums; opacity: 0.85; flex: none; }
.calendar__chip-title { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Spanning event bar (month/week): a single bar across the days it covers. */
.calendar__chip--span {
  margin: 1px 2px 0;
  align-self: start;
}
.calendar__chip-cont { flex: none; opacity: 0.7; font-weight: 700; }
.calendar__chip-range { flex: none; opacity: 0.75; font-size: 0.92em; margin-left: 0.15rem; }
/* Cross-family share glyph (⇄) shown on shared events */
.calendar__chip-shared { flex: none; opacity: 0.8; font-weight: 700; }
/* Repeat glyph (↻) shown on occurrences of a repeating event */
.calendar__chip-repeat { flex: none; opacity: 0.75; font-weight: 700; }
/* An event shared in from another family is read-only here — subtle italic. */
.calendar__chip--foreign .calendar__chip-title { font-style: italic; }

/* Imported (read-only) events from a connected calendar */
.calendar__chip--external {
  border-style: dashed;
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.calendar__chip--external.calendar__chip--allday {
  background: color-mix(in srgb, var(--primary) 65%, transparent);
}

/* Per-member colour. Placed after the external/all-day rules so it wins.
   Driven by the inline --member-colour custom property set in calendar.js. */
.calendar__chip--member {
  border-color: var(--member-colour);
  border-left-width: 3px;
  background: color-mix(in srgb, var(--member-colour) 14%, transparent);
}
.calendar__chip--member:hover { border-color: var(--member-colour); }
.calendar__chip--member.calendar__chip--allday {
  background: var(--member-colour);
  color: #fff;
}
.calendar__chip--member.calendar__chip--external {
  border-style: dashed;
  border-left-style: solid;
}

/* Per-source (connected calendar) accent. Layered on top of the member fill
   ("show both"): member colour = fill, source colour = a solid left stripe.
   Driven by the inline --source-colour custom property set in calendar.js. */
.calendar__chip--source {
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: var(--source-colour);
}
.calendar__chip--source.calendar__chip--allday {
  border-left-color: var(--source-colour);
}

/* Danger button (e.g. delete) */
.button--danger {
  background: transparent;
  color: #dc2626;
  border: 1px solid #dc2626;
}
.button--danger:hover { background: rgba(220, 38, 38, 0.1); }

/* Small button (inline actions in lists) */
.button--small {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
}

/* Connected calendars panel */
.panel__lead {
  margin: 0.6rem 0 0;
  color: var(--text-soft);
  font-size: 0.92rem;
}

.connections__actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Per-connection inline actions (Sync now / Disconnect) */
.connections__row-actions {
  display: flex;
  gap: 0.5rem;
  flex: none;
  align-items: center;
}

/* "Use for my chores" toggle on a Microsoft connection row. */
.connections__chore-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}

.connections__chore-toggle input {
  cursor: pointer;
}

/* Apple iCloud connect (app-specific password) */
.connections__apple {
  margin-top: 1rem;
}

.connections__apple > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.4rem 0;
}

.connections__apple .inline-form {
  margin-top: 0.6rem;
}

/* Event dialog */
.dialog {
  width: min(32rem, calc(100vw - 2rem));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.dialog::backdrop { background: rgba(15, 23, 42, 0.55); }

.dialog__form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.5rem;
}

.dialog__title { margin: 0; font-size: 1.2rem; }

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.field__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-soft);
}

.field__optional { font-weight: 400; opacity: 0.8; }

.field .input { flex: none; width: 100%; border-radius: 10px; }
.field textarea.input { resize: vertical; }

.field--check {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.field--check input { width: 1.05rem; height: 1.05rem; }

/* Radio/checkbox group wrapper (e.g. the repeating-event edit scope). */
fieldset.field {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}
fieldset.field > legend.field__label { padding: 0; margin-bottom: 0.3rem; }
fieldset.field > .field--check { margin-top: 0.35rem; }

/* Cross-family share targets: a checkbox per other family in the event editor. */
.share-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border: 1px solid var(--chip-border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}
.share-list__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
}
.share-list__item input { width: 1.05rem; height: 1.05rem; }
.share-list:empty::after {
  content: "You only belong to this family.";
  color: var(--on-page-soft);
  font-size: 0.85rem;
}
.field__hint {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--on-page-soft);
}

.field-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.field-row .field { flex: 1 1 12rem; }

.dialog__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.dialog__spacer { flex: 1 1 auto; }

/* Chores panel */
.chores__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.chores__nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Filter toggle (To do / Done / All) — same segmented style as calendar views. */
.chores__filters {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.chores__filter {
  border: none;
  border-radius: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

.chores__filter + .chores__filter { border-left: 1px solid var(--border); }

.chores__filter.is-active {
  background: var(--primary);
  color: var(--primary-contrast);
}

.chores__list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chores__empty {
  color: var(--text-soft);
  padding: 1rem 0.2rem;
  text-align: center;
}

.chores__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.chores__item--overdue {
  border-color: #dc2626;
}

/* Round complete/reopen toggle on the left. */
.chores__check {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--primary-contrast);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chores__check:hover { border-color: var(--primary); }

.chores__item--done .chores__check {
  background: var(--primary);
  border-color: var(--primary);
}

/* Tappable body that opens the editor. */
.chores__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.chores__title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chores__item--done .chores__title {
  text-decoration: line-through;
  color: var(--text-soft);
}

.chores__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-soft);
}

.chores__assignee {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.chores__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}

.chores__item--overdue .chores__due { color: #dc2626; font-weight: 600; }

.chores__recur {
  font-variant: small-caps;
}

@media (max-width: 560px) {
  .calendar__day { min-height: 4.5rem; }
  .calendar__bg { min-height: 4.5rem; }
  .calendar__grid--week .calendar__bg { min-height: 10rem; }
  .calendar__nav { width: 100%; justify-content: space-between; }
  .chores__nav { width: 100%; justify-content: space-between; }

  /* Month/week event bars are very narrow on phones (one grid column ≈ a
     finger-width), so the fixed-width start time crowds the title out to
     nothing. Drop the inline time there and let the title take the full width.
     The time is still shown in Day and List views, and in each chip's tooltip. */
  .calendar__grid--month .calendar__chip-time,
  .calendar__grid--week .calendar__chip-time {
    display: none;
  }
}

/* Reminders panel */
.badge--alert {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.35);
  color: #dc2626;
  margin-left: 0.5rem;
}

.reminders__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.reminders__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
}

.reminders__item--overdue {
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.06);
}

.reminders__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--primary);
  margin-top: 0.4rem;
  flex: none;
}

.reminders__item--overdue .reminders__dot { background: #dc2626; }

.reminders__item--event .reminders__dot { background: var(--accent); }
.reminders__item--event.reminders__item--overdue .reminders__dot { background: #dc2626; }

.reminders__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.reminders__title { font-weight: 600; }

.reminders__meta {
  font-size: 0.8rem;
  color: var(--text-soft);
}

.reminders__item--overdue .reminders__meta { color: #dc2626; }

/* Settings panel */
.settings .field { margin-top: 0.75rem; }
.settings .field--check { margin-top: 0.5rem; }

/* Respect users who prefer reduced motion: keep state changes instant rather
   than animating transitions/transforms (theme fades, button press nudges, etc.). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}