:root {
  color-scheme: light;
  /* The sticky topbar's height, shared so anything that has to sit clear of it —
     the sticky agenda panel — cannot drift out of step with it. */
  --topbar-height: 52px;
  --ink: #2c2c2c;
  --muted: #6b6b6b;
  --cream: #fffef9;
  --paper: #ffffff;
  --light-gray: #f5f5f5;
  --line: #ece7dd;
  --coral: #f66951;
  --coral-dark: #d35945;
  --blue: #dbe9f2;
  --blue-dark: #9fc1d6;
  --icon-blue: #6ea8c0;
  --gold: #e5b852;
  --danger: #b94b42;
  --shadow: 0 10px 30px rgba(44, 44, 44, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", ui-rounded, "Segoe UI", Roboto, system-ui, sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 6% -10%, rgba(229, 184, 82, 0.16), transparent 28rem),
    radial-gradient(circle at 95% 8%, rgba(246, 105, 81, 0.08), transparent 30rem),
    var(--cream);
}

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

button {
  color: inherit;
  border: 0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(246, 105, 81, 0.35);
  outline-offset: 2px;
}

.hidden {
  display: none !important;
}

.login-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 40px 24px;
}

.login-loading {
  color: var(--muted);
  text-align: center;
}

.login-loading p {
  margin: 16px 0 0;
  font-size: 0.95rem;
}

.spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(246, 105, 81, 0.22);
  border-top-color: var(--coral);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Full-screen loading indicator shown while the first iCloud fetch is in flight
   (the content area is still empty at that point). */
.app-loading {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--cream);
  color: var(--muted);
}

.app-loading p {
  margin: 0;
  font-size: 0.95rem;
}

/* Pre-login landing page ------------------------------------------------- */

.landing {
  width: min(1080px, 100%);
  margin: 0 auto;
  text-align: left;
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 800;
}

.landing-nav-link {
  color: var(--coral-dark);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}

.landing-nav-link:hover {
  text-decoration: underline;
}

.landing-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  margin: 20px 0 56px;
}

.landing-title {
  margin: 10px 0 16px;
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.06;
}

.landing-lede {
  max-width: 34ch;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.55;
}

.landing-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}


.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 14px;
  color: #fff;
  background: var(--ink);
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(44, 44, 44, 0.22);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.store-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(44, 44, 44, 0.28);
}

/* Landing "sign in" CTA — the secondary action beside the App Store download.
   Matches the app's secondary-button style (bordered white pill) and mirrors the
   store badge's dimensions so the two line up. Actual sign-in happens on /app. */
.landing-app-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, color 150ms ease;
}

.landing-app-cta:hover {
  border-color: var(--coral);
  color: var(--coral-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(44, 44, 44, 0.10);
}

/* Value-prop row under the hero: free, no subscription, iCloud, platforms. */
.landing-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.landing-perks li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.landing-perks li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(91, 179, 129, 0.18);
  color: #2f8b5e;
  font-size: 0.72rem;
  font-weight: 800;
}

/* Compact sign-in card on the /app page (the marketing hero lives on the
   landing page now, so /app just needs a focused sign-in prompt). */
.signin-card {
  width: min(420px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.signin-card h1 {
  margin: 4px 0 0;
  font-size: 1.6rem;
}

.signin-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.store-badge-logo {
  width: 26px;
  height: 26px;
}

.store-badge-text {
  display: grid;
  line-height: 1.05;
  text-align: left;
}

.store-badge-text small {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.store-badge-text strong {
  font-size: 1.15rem;
  font-weight: 700;
}

/* Hero mockup */
.landing-hero-art {
  display: flex;
  justify-content: center;
}

.mock {
  width: min(360px, 100%);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--paper);
  box-shadow: 0 30px 70px rgba(44, 44, 44, 0.16);
  transform: rotate(1.5deg);
}

.mock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.mock-title {
  font-size: 1.3rem;
  font-weight: 800;
}

.mock-dots {
  display: flex;
  gap: 5px;
}

.mock-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}

.mock-week {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.mock-week span {
  padding: 8px 0;
  border-radius: 10px;
}

.mock-day-active {
  color: #fff;
  background: var(--coral);
}

.mock-events {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.mock-events li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--light-gray);
  font-size: 0.85rem;
  font-weight: 600;
}

.mock-events li span {
  width: 5px;
  height: 26px;
  border-radius: 99px;
  background: var(--c);
}

.mock-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.mock-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  background: #5bb381;
  font-size: 0.8rem;
}

.mock-task-text {
  display: grid;
  flex: 1;
  font-size: 0.9rem;
  font-weight: 700;
}

.mock-task-text small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.mock-stars {
  color: var(--gold);
  letter-spacing: 2px;
}

/* Feature grid */
.landing-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 600px) {
  .landing-features {
    grid-template-columns: 1fr;
  }
}

.feature {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Illustration banner at the top of each feature card, tinted with the card's
   accent color (--c). The inline SVG scene sits centered on it. */
.feature-illustration {
  display: grid;
  place-items: center;
  height: 200px;
  background: color-mix(in srgb, var(--c) 12%, var(--cream));
  border-bottom: 1px solid var(--line);
}

.feature-illustration svg {
  width: min(300px, 92%);
  height: auto;
}

.feature-body {
  padding: 20px 22px 24px;
}

.feature h3 {
  margin: 0 0 6px;
  font-size: 1.12rem;
}

.feature p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.landing-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

@media (max-width: 860px) {
  .landing-hero {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
    text-align: center;
  }

  .landing-hero-art {
    order: -1;
  }

  .landing-lede {
    margin-right: auto;
    margin-left: auto;
  }

  .landing-cta,
  .landing-perks {
    justify-content: center;
  }
}

.login-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
}

/* CloudKit renders the "Sign in with Apple ID" button as
   <div class="apple-auth-button"> with an inline width/height, and its label
   (.apple-auth-button-text) is an SVG positioned with `position:relative;
   left:50%;top:50%` — i.e. offset by half the button's OWN width/height, which
   only lands centered at CloudKit's native size. So we must NOT override its
   width or height (that shifts the label off-center); only cosmetic tweaks that
   don't affect layout — a pill radius and a shadow to match the site's CTAs. */
/* CloudKit's label SVG paints its glyphs centered on the origin (x:0) and uses
   `position:relative; left:50%; top:50%` to drop that origin at the button's
   center — that's what centers the text. So we must leave its width/height,
   display, and the label's positioning untouched; overriding any of them
   (flex, position, forced width…) shifts the label off-center. Only cosmetic
   tweaks that don't affect layout: a pill radius and a shadow. */
.login-signin .apple-auth-button {
  position: relative !important;  /* containing block for the absolutely-placed label */
  border-radius: 999px !important;
  box-shadow: 0 8px 20px rgba(44, 44, 44, 0.22);
  transition: box-shadow 150ms ease;
}

.login-signin .apple-auth-button:hover {
  box-shadow: 0 12px 26px rgba(44, 44, 44, 0.28);
}

/* Spinner shown in the sign-in button's place while CloudKit configures it. */
.login-signin-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
}

/* Place the label's origin exactly at the button's center. Its glyphs are
   painted symmetrically around that origin (getBBox x≈-88..+88), so this
   centers the text deterministically — unlike CloudKit's native relative
   positioning, which picks up an inline-flow offset and lands ~19px right. */
.login-signin .apple-auth-button-text {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
}

.login-error {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #e8c4bd;
  border-radius: 14px;
  color: var(--danger);
  background: #fdeeeb;
  font-size: 0.88rem;
  line-height: 1.4;
}

.login-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--topbar-height);
  padding: 7px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 254, 249, 0.88);
  backdrop-filter: blur(18px);
}

/* Slim header controls so the topbar stays compact and leaves more room for
   content. Buttons elsewhere in the app keep their default size. */
.topbar .button {
  min-height: 38px;
  padding: 0 16px;
}

.topbar .icon-button {
  width: 38px;
  height: 38px;
  font-size: 1.2rem;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: white;
  background: var(--coral);
  box-shadow: 0 8px 20px rgba(246, 105, 81, 0.28);
  font-weight: 800;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 1.05rem;
}

.brand small {
  max-width: 260px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions,
.month-controls,
.dialog-footer,
.filter-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cloudkit-auth-button:empty {
  display: none;
}

.button,
.icon-button {
  border: 0;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.button:hover,
.icon-button:hover {
  transform: translateY(-1px);
}

.button {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
}

.button-primary {
  color: white;
  background: var(--coral);
  box-shadow: 0 7px 16px rgba(246, 105, 81, 0.28);
}

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

.button-secondary,
.button-quiet {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
}

.button-danger {
  color: white;
  background: var(--danger);
}

.icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 1.35rem;
}

.shell {
  width: 100%;
  padding: 20px clamp(20px, 4vw, 64px) calc(136px + env(safe-area-inset-bottom));
}

/* Full screen maximizes content: drop the top bar, zero the main content margin,
   square off the panel to the edges, and let the task columns run to the bottom
   edge. The floating tab bar stays reachable but auto-hides on scroll (see JS). */
:fullscreen .topbar {
  display: none;
}

:fullscreen .shell {
  padding: 0;
}

:fullscreen .panel {
  border-radius: 0;
}

:fullscreen .task-column {
  max-height: calc(100vh - 120px);
}

.eyebrow,
.section-kicker {
  margin: 0 0 7px;
  color: var(--coral-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.setup-banner {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 24px;
  padding: 18px 20px;
  border: 1px solid #ead6a9;
  border-radius: 18px;
  background: #fff7df;
}

.setup-banner p {
  margin: 3px 0 0;
  color: #756646;
}

.setup-banner a {
  flex: none;
  color: var(--coral-dark);
  font-weight: 800;
}

/* Offline / cached: the calendar on screen is real, just not live. */
.offline-banner {
  border-color: #d8dee7;
  background: #eef2f7;
}

.offline-banner p {
  color: #5c6675;
}

/* The window between the cached paint and the live data landing: the view is
   readable but not yet editable, so it reads as arriving rather than inert. */
#app.is-syncing .task-check,
#app.is-syncing .list-item-check {
  opacity: 0.55;
  cursor: progress;
}

.tabs {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  transition: transform 300ms ease, opacity 300ms ease;
  isolation: isolate;
  display: flex;
  gap: 5px;
  width: fit-content;
  padding: 8px 10px;
  border-radius: 999px;
  box-shadow:
    0 1px 2px rgba(44, 44, 44, 0.06),
    0 14px 32px rgba(44, 44, 44, 0.16),
    0 28px 56px rgba(44, 44, 44, 0.12);
}

/* Slides the floating tab bar off the bottom edge (keeping the -50% X centering)
   when scrolling down through tasks in full screen; scrolling back up restores it. */
.tabs.tabs-hidden {
  transform: translateX(-50%) translateY(calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
}

.tabs-glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42));
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 5px rgba(44, 44, 44, 0.06);
  pointer-events: none;
}

.tab-indicator {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 10px;
  border-radius: 999px;
  background: rgba(44, 44, 44, 0.07);
  box-shadow: inset 0 1px 2px rgba(44, 44, 44, 0.06);
  transition: left 320ms cubic-bezier(0.34, 1.2, 0.4, 1), width 320ms cubic-bezier(0.34, 1.2, 0.4, 1);
}

.tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 100px;
  padding: 10px 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  transition: color 150ms ease, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tab:active {
  transform: scale(0.94);
}

.tab-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
}

.tab-icon svg {
  display: block;
}

.tab.active {
  color: var(--coral);
}

.count-badge {
  position: absolute;
  top: -6px;
  right: -13px;
  display: inline-grid;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  place-items: center;
  border-radius: 999px;
  color: var(--ink);
  background: var(--gold);
  font-size: 0.55rem;
  font-weight: 800;
}

.view {
  display: none;
}

.view.active {
  display: block;
  animation: rise 240ms ease both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
  gap: 20px;
}

.panel {
  overflow: hidden;
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.panel-header {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 26px 20px;
}

.panel-header h2 {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 800;
}

.weekday-row,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.weekday-row {
  padding: 0 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.weekday-row span {
  padding: 13px 4px;
}

.calendar-grid {
  min-height: 620px;
}

.day-cell {
  position: relative;
  min-height: 114px;
  padding: 10px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.day-cell:nth-child(7n) {
  border-right: 0;
}

.day-cell.outside {
  color: #b9b7b0;
  background: rgba(245, 241, 233, 0.52);
}

.day-cell.selected {
  background: rgba(219, 233, 242, 0.65);
  box-shadow: inset 0 0 0 2px var(--blue-dark);
}

.day-number {
  display: grid;
  width: 30px;
  height: 30px;
  margin-bottom: 6px;
  place-items: center;
  border-radius: 50%;
  font-size: 0.86rem;
  font-weight: 800;
}

.day-cell.today .day-number {
  color: white;
  background: var(--coral);
}

.event-chip {
  position: relative;
  display: block;
  width: 100%;
  margin: 4px 0;
  padding: 5px 7px 5px 10px;
  overflow: hidden;
  border-radius: 7px;
  color: #32413c;
  background: color-mix(in srgb, var(--profile-color, var(--coral)) 15%, white);
  font-size: 0.74rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The leading color bar. A border can't carry a gradient, so a multi-profile
   event needs a real element to split. */
.event-chip::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: 7px 0 0 7px;
  background: var(--profile-bar, var(--profile-color, var(--coral)));
}

.event-overflow {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
}

.agenda-panel {
  align-self: start;
  /* Sticky beside the grid. Reaching the last week of a month means scrolling the
     page, and the selected day's events have to stay on screen while that happens —
     otherwise tapping a late date and reading its events are two scroll positions
     that cannot both be satisfied. Unstuck below 980px, where the agenda sits above
     the grid instead of beside it. */
  position: sticky;
  top: calc(var(--topbar-height) + 20px);
  /* A busy day scrolls inside the panel rather than pushing it past the viewport,
     which would put the end of the list out of reach. The reserve at the bottom
     clears the floating tab bar. */
  max-height: calc(100vh - var(--topbar-height) - 116px);
  display: flex;
  flex-direction: column;
}

.agenda-panel .agenda-list {
  /* A flex child will not shrink below its content without this, so the list would
     overflow the panel instead of scrolling inside it. */
  min-height: 0;
  overflow-y: auto;
}

.agenda-list,
.task-list {
  padding: 0 18px 20px;
}

.agenda-item,
.task-item {
  position: relative;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.agenda-item {
  cursor: pointer;
}

.color-bar {
  width: 5px;
  min-height: 44px;
  align-self: stretch;
  border-radius: 99px;
  /* A gradient when several profiles share the event, a flat color otherwise —
     see profileBarCSS in app.js, which mirrors the app's ProfileColorBar. */
  background: var(--profile-bar, var(--profile-color, var(--coral)));
}

.item-content {
  min-width: 0;
  flex: 1;
}

.item-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
}

/* Task card titles run 25% larger than the shared item title. */
.task-item .item-title {
  font-size: 1.275rem;
}

.item-meta {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* Category filter chips above the task columns (mirrors the iOS selector). */
.task-category-bar {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  /* Match the panel header's horizontal inset so the chips line up with the
     kicker and title above them. */
  padding: 2px 26px 14px;
  scrollbar-width: none;
}

.task-category-bar::-webkit-scrollbar { display: none; }
.task-category-bar[hidden] { display: none; }

.task-category-pill {
  flex: none;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--light-gray);
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.task-category-pill:hover { color: var(--ink); }

.task-category-pill.selected {
  border-color: color-mix(in srgb, var(--cat) 55%, transparent);
  color: color-mix(in srgb, var(--cat) 82%, var(--ink));
  background: color-mix(in srgb, var(--cat) 16%, transparent);
}

/* Row under a task title holding its category pill and (optional) due date. */
.item-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}

.item-tags .item-meta { margin: 0; }

/* Category pill on a task cell — icon + name, tinted by the category color. */
.task-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 7px;
  border: 1px solid color-mix(in srgb, var(--cat) 50%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--cat) 82%, var(--ink));
  background: color-mix(in srgb, var(--cat) 10%, transparent);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.task-cat-pill-icon { font-size: 0.85em; }

/* "+N" overflow chip when a task has more categories than the row shows.
   Neutral rather than tinted — it stands for several categories at once. */
.task-cat-pill--more {
  padding: 2px 8px;
  border-color: color-mix(in srgb, var(--ink) 25%, transparent);
  color: color-mix(in srgb, var(--ink) 65%, transparent);
  background: none;
}

/* Recurrence indicator beside a recurring task's title. */
.task-repeat {
  width: 15px;
  height: 15px;
  margin-left: 7px;
  color: var(--muted);
  vertical-align: -2px;
}

/* Cadence label ("Weekly", "Tue, Thu") beside the recurrence indicator. */
.task-cadence {
  margin-left: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  vertical-align: 1px;
}

/* "Today" / "Upcoming" section dividers within a task column. */
.task-section-label {
  margin: 14px 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The first label in a column (Today) sits flush with the column top. */
.task-column-body > .task-section-label:first-child {
  margin-top: 2px;
}

.empty-state {
  padding: 42px 16px;
  color: var(--muted);
  text-align: center;
}

.empty-state strong {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 800;
}

/* Task filter chips live in the panel header, aligned right and horizontally
   with the "Family Tasks" title on wide screens (see .panel-header space-between).
   On narrow screens they wrap onto their own line below the title. */
.filter-chip {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 750;
}

.filter-chip.active {
  color: white;
  border-color: var(--coral);
  background: var(--coral);
}

.task-list {
  display: flex;
  align-items: stretch;
  gap: 14px;
  overflow-x: auto;
}

/* One column per profile: fixed width, its own vertical scroll, tinted with a
   light wash of the profile color. Columns grow rightward and scroll
   horizontally when the family has many profiles. */
.task-column {
  display: flex;
  flex: 0 0 400px;
  flex-direction: column;
  max-height: calc(100vh - 250px);
  padding: 14px;
  border-radius: 18px;
  background: #faf6ee;
  background: color-mix(in srgb, var(--profile-color, var(--coral)) 14%, white);
}

.task-column-header {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 2px 4px 12px;
}

.task-column.dragging {
  opacity: 0.55;
  cursor: grabbing;
}

/* Floating clone that follows the finger during a touch drag (see
   startTouchColumnDrag). Positioned via transform from the top-left corner. */
.task-column-ghost {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.92;
  transform-origin: top left;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.task-column-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--profile-color, var(--coral));
  font-size: 1.2rem;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.task-column-avatar:active {
  cursor: grabbing;
}

.task-column-heading {
  flex: 1;
  min-width: 0;
}

.task-column-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--ink);
}

.task-column-progress {
  margin: 7px 0 1px;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.task-column-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--profile-color, var(--coral));
  transition: width 250ms ease;
}

.task-column-stars {
  display: flex;
  gap: 5px;
  align-items: center;
}

.task-column-star-icon {
  color: var(--gold);
  font-size: 1.5rem;
  text-shadow: 0 1px 2px rgba(230, 150, 20, 0.35);
}

.task-column-star-count {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
}

.task-column-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 2px;
}

.task-column-empty {
  padding: 26px 8px;
  color: var(--muted);
  text-align: center;
  font-size: 0.9rem;
}

.task-item {
  margin: 0;
  align-items: center;
}

.task-checkbox {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border: 2px solid var(--profile-color, var(--coral));
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-weight: 900;
}

/* Swipe-to-complete: the checkbox is a thumb dragged left→right. It sits above
   the title so it visibly slides across it; the strike overlay follows behind. */
.task-checkbox--swipe {
  position: relative;
  z-index: 3;
  color: var(--profile-color, var(--coral));
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform 180ms ease;
}

.task-item.swiping {
  user-select: none; /* dragging over the title must not start a text selection */
}

.task-item.swiping .task-checkbox--swipe {
  cursor: grabbing;
  transition: none; /* track the finger without lag while dragging */
}

/* Progressive strikethrough: a line-through copy of the title revealed
   left→right as the swipe advances (0 = hidden, 1 = fully struck). A positioned
   copy handles multi-line titles, which a single CSS line cannot. */
.item-title {
  position: relative;
}

.task-title-strike {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: inherit;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  clip-path: inset(0 calc((1 - var(--swipe-progress, 0)) * 100%) 0 0);
  transition: clip-path 180ms ease;
  pointer-events: none;
}

.task-item.swiping .task-title-strike {
  transition: none;
}

/* A wash of the profile color fills the card left→right as the swipe advances,
   so progress toward completion is obvious at a glance. `isolation` contains the
   negative-z-index fill so it sits over the card's paper but under the content. */
.task-item {
  isolation: isolate;
}

.task-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: color-mix(in srgb, var(--profile-color, var(--coral)) 24%, transparent);
  transform: scaleX(var(--swipe-progress, 0));
  transform-origin: left center;
  transition: transform 180ms ease;
  pointer-events: none;
}

.task-item.swiping::before {
  transition: none;
}

/* Past the completion threshold the thumb fills solid and shows a check, cueing
   "release to complete" (the glyph swap is done in wireTaskSwipe). */
.task-checkbox--swipe.will-complete {
  color: white;
  background: var(--profile-color, var(--coral));
}

.task-item.completed {
  opacity: 0.64;
}

.task-item.completed .task-checkbox {
  color: white;
  background: var(--profile-color, var(--coral));
}

.task-item.completed .item-title {
  text-decoration: line-through;
}

.task-edit {
  align-self: center;
  flex: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
}

.reward {
  align-self: center;
  flex: none;
  white-space: nowrap;
  color: var(--gold);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 1px;
}

/* A star that flies from a just-completed task up to the profile's header star
   badge, to show the reward being earned (see flyStars). */
.flying-star {
  position: fixed;
  z-index: 10000;
  transform: translate(-50%, -50%);
  color: var(--gold);
  font-size: 1.35rem;
  pointer-events: none;
  will-change: transform, opacity;
  animation: star-fly 720ms cubic-bezier(0.5, 0, 0.2, 1) forwards;
}

@keyframes star-fly {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  22%  { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.55); opacity: 0.15; }
}

/* Brief pulse on the header star badge when the flying stars arrive. */
.task-column-stars.star-bump {
  animation: star-badge-bump 460ms ease;
}

@keyframes star-badge-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .flying-star { animation: none; opacity: 0; }
  .task-column-stars.star-bump { animation: none; }
}

/* Confetti celebration (fired when a task is completed) */
.confetti-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -6vh;
  border-radius: 2px;
  will-change: transform, opacity;
  animation-name: confetti-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translate3d(0, -6vh, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--drift, 0), 106vh, 0) rotate(var(--spin, 360deg));
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .confetti-piece {
    display: none;
  }
}

.home-greeting {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.home-greeting h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
}

.stars-pill {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  color: #a87815;
  background: white;
  box-shadow: var(--shadow);
  font-size: 0.95rem;
  font-weight: 800;
}

.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  gap: 20px;
}

.home-family-panel {
  align-self: start;
}

.home-profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
  padding: 0 26px 26px;
}

.profile-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  cursor: pointer;
  text-align: center;
}

.profile-tile-avatar {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border-radius: 50%;
  background: var(--profile-color);
  font-size: 2rem;
}

.profile-tile-name {
  font-size: 1.05rem;
  font-weight: 800;
}

.profile-tile-star-badge {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 16px;
  border-radius: 999px;
  background: #fff1cc;
}

.profile-tile-star-icon {
  color: #ffc300;
  font-size: 1.5rem;
  line-height: 1;
}

.profile-tile-star-count {
  color: #a5720a;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
}

.profile-tile-status {
  color: var(--muted);
  font-size: 0.78rem;
}

.dialog {
  width: min(620px, calc(100% - 28px));
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 26px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 32px 100px rgba(44, 44, 44, 0.25);
}

.dialog::backdrop {
  background: rgba(44, 44, 44, 0.42);
  backdrop-filter: blur(4px);
}

.dialog-small {
  width: min(500px, calc(100% - 28px));
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 26px 17px;
  border-bottom: 1px solid var(--line);
}

.dialog-header h2 {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 800;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 24px 26px;
}

.field {
  display: grid;
  gap: 7px;
}

.field-wide {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.8rem;
  font-weight: 800;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: white;
  font-size: 1rem;
}

.field textarea {
  min-height: 86px;
  resize: vertical;
}

.checkbox-field {
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 44px;
}

.checkbox-field input {
  width: 20px;
  height: 20px;
}

.dialog-footer {
  padding: 18px 26px 24px;
  border-top: 1px solid var(--line);
}

.dialog-spacer {
  flex: 1;
}

.event-detail-body {
  display: grid;
  gap: 16px;
  padding: 24px 26px;
}

.detail-card {
  padding: 16px;
  border-radius: 18px;
  background: white;
  box-shadow: var(--shadow);
}

.detail-identity {
  display: flex;
  gap: 13px;
  align-items: center;
}

.detail-color-bar {
  width: 5px;
  align-self: stretch;
  min-height: 44px;
  border-radius: 99px;
  background: var(--profile-bar, var(--profile-color, var(--coral)));
}

.detail-identity-text {
  flex: 1;
  min-width: 0;
}

.detail-event-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 750;
}

.detail-assigned {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.detail-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f4efe4;
  font-size: 1.4rem;
}

.detail-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.detail-row + .detail-row {
  margin-top: 14px;
}

.detail-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--coral);
}

.detail-icon svg {
  width: 100%;
  height: 100%;
}

.detail-value {
  font-size: 1rem;
  line-height: 1.4;
}

.detail-row-link .detail-value a {
  color: var(--coral);
  font-weight: 600;
  text-decoration: none;
}

.detail-row-link .detail-value a:hover {
  text-decoration: underline;
}

.detail-notes-label {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.detail-notes-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.toast {
  position: fixed;
  z-index: 100;
  right: 24px;
  bottom: calc(104px + env(safe-area-inset-bottom));
  max-width: min(380px, calc(100% - 48px));
  padding: 13px 18px;
  border-radius: 14px;
  color: white;
  background: var(--ink);
  box-shadow: 0 14px 40px rgba(44, 44, 44, 0.24);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast--error {
  background: var(--danger);
}

@media (max-width: 980px) {
  .calendar-layout,
  .home-layout {
    grid-template-columns: 1fr;
  }

  .agenda-panel {
    position: static;
    max-height: none;
    display: block;
  }

  .agenda-panel,
  .home-family-panel {
    order: -1;
  }

  .agenda-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .agenda-item {
    margin: 0;
  }
}

@media (max-width: 700px) {
  .topbar {
    min-height: 68px;
    padding: 10px 14px;
  }

  .brand small,
  #refresh-button {
    display: none;
  }

  .topbar-actions {
    gap: 6px;
  }

  .button {
    min-height: 40px;
    padding: 0 14px;
  }

  .topbar .cloudkit-auth-button {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell {
    padding: 28px 14px calc(136px + env(safe-area-inset-bottom));
  }

  .tabs {
    width: calc(100% - 32px);
  }

  .tab {
    min-width: 0;
    flex: 1;
    padding: 7px 6px;
  }

  .calendar-panel {
    overflow-x: auto;
  }

  .calendar-header,
  .weekday-row,
  .calendar-grid {
    min-width: 680px;
  }

  .calendar-grid {
    min-height: 560px;
  }

  .day-cell {
    min-height: 104px;
  }

  .agenda-list {
    grid-template-columns: 1fr;
  }

  /* Stack the profile columns full-width on phones instead of scrolling
     sideways; each column grows to its content. */
  .task-list {
    flex-direction: column;
    overflow-x: visible;
  }

  .task-column {
    flex: initial;
    width: 100%;
    max-height: none;
  }

  .task-column-body {
    overflow-y: visible;
  }

  /* Not enough width to sit beside the title — drop the chips to their own row. */
  .panel-header {
    flex-wrap: wrap;
    padding: 20px 18px 16px;
  }

  .filter-row {
    width: 100%;
  }

  .home-profiles-grid,
  .task-list {
    padding-right: 14px;
    padding-left: 14px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .field-wide {
    grid-column: auto;
  }

  .dialog-footer {
    padding: 16px 20px 20px;
  }

  .setup-banner {
    align-items: flex-start;
  }
}

.task-log-body {
  display: grid;
  gap: 10px;
  padding: 20px 24px 24px;
  max-height: 60vh;
  overflow-y: auto;
}

.task-log-empty {
  color: var(--muted);
  text-align: center;
  padding: 24px 0;
}

.task-log-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: white;
  box-shadow: var(--shadow);
}

.task-log-icon {
  width: 30px;
  height: 30px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.task-log-icon.checked {
  background: var(--coral);
}

.task-log-icon.unchecked {
  background: var(--muted);
}

.task-log-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.task-log-title {
  color: var(--ink);
}

.task-log-when {
  font-size: 0.8rem;
  color: var(--muted);
}

.task-log-delta {
  font-weight: 700;
  white-space: nowrap;
}

.task-log-delta.positive {
  color: var(--coral-dark);
}

.task-log-delta.negative {
  color: var(--muted);
}

/* Shared lists */
.lists-header {
  margin-bottom: 18px;
}

.lists-header h2 {
  margin: 4px 0 0;
  font-size: 1.85rem;
  font-weight: 800;
}

/* Two panes: the index of lists, then the selected list's items. The old layout
   tiled every list as a full card, so a family with a dozen lists got a ragged
   wall of columns whose heights were set by whichever list was longest. */
.lists-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.lists-index {
  padding: 10px;
  position: sticky;
  /* Below the topbar, so the index stays put while the items scroll. */
  top: 88px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lists-index-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lists-index-row {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 140ms ease;
}

.lists-index-row:hover {
  background: color-mix(in srgb, var(--list-color, var(--coral)) 10%, transparent);
}

.lists-index-row.selected {
  background: color-mix(in srgb, var(--list-color, var(--coral)) 18%, transparent);
}

.lists-index-row .list-icon {
  width: 36px;
  height: 36px;
}

.lists-index-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.lists-index-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  /* Long names truncate rather than reflowing the row. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lists-index-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

.lists-index-chevron {
  flex: none;
  color: var(--muted);
  font-size: 1.2rem;
  /* Only meaningful in the one-pane layout, where the row navigates. */
  display: none;
}

.list-detail {
  border-top: 4px solid var(--list-color, var(--coral));
  min-width: 0;
}

.list-detail-inner {
  display: flex;
  flex-direction: column;
}

.list-detail-header {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line);
}

.list-detail-header .list-heading {
  flex: 1;
  min-width: 0;
}

/* The title needs its own min-width:0 to ellipsize inside a flex row — without
   it a long name pushed the edit button off the card. */
.list-heading-text {
  min-width: 0;
}

/* Back to the index; only shown when the panes don't fit side by side. */
.list-back {
  display: none;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 6px 12px 6px 8px;
  border: none;
  border-radius: 999px;
  background: var(--light-gray);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

/* One pane at a time: the index reads as a navigable menu, and choosing a list
   swaps in its items with a way back. */
@media (max-width: 860px) {
  .lists-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .lists-index {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .lists-index-chevron {
    display: block;
  }

  .lists-layout[data-pane="index"] .list-detail {
    display: none;
  }

  .lists-layout[data-pane="detail"] .lists-index {
    display: none;
  }

  .lists-layout[data-pane="detail"] .list-back {
    display: inline-flex;
  }

  /* Selection highlighting is meaningless when the index is a navigation menu. */
  .lists-index-row.selected {
    background: transparent;
  }
}

/* No lists at all: the empty state owns the full width. */
.lists-layout[data-pane="empty"] {
  grid-template-columns: minmax(0, 1fr);
}

.lists-layout[data-pane="empty"] .lists-index {
  display: none;
}

.list-heading {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.list-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  /* Light tint of the list color so the emoji/initial stays legible. */
  background: color-mix(in srgb, var(--list-color, var(--coral)) 22%, transparent);
  flex-shrink: 0;
}

.list-emoji {
  font-size: 1.3rem;
}

.list-initial {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--list-color, var(--coral));
}

.list-name {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-count {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.list-body {
  padding: 4px 12px 14px;
}

.list-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
}

.list-item + .list-item {
  border-top: 1px solid var(--line);
}

.list-check {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--list-color, var(--coral));
  background: transparent;
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease;
}

.list-check:active {
  transform: scale(0.9);
}

.list-item.checked .list-check {
  background: var(--list-color, var(--coral));
}

.list-check-mark {
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

.list-item-title {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}

.list-item.checked .list-item-title {
  color: var(--muted);
  text-decoration: line-through;
}

.list-empty {
  padding: 14px 12px;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Empty state shown on the Lists tab before any list exists. */
.list-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
  padding: 56px 28px;
}

.list-empty-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--icon-blue);
}

.list-empty-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
}

.list-empty-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Signed in, no family calendar yet.

   Shares the login screen's centred layout but is a different message: the
   account is fine, there is simply nothing on it to open. The calendar is
   authored in the app — the web client edits an existing one and cannot create
   one — so the only useful action here points at the App Store.
   --------------------------------------------------------------------------- */
.needs-family {
  width: min(460px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.needs-family-art {
  width: min(320px, 100%);
  height: auto;
  margin-bottom: 4px;
}

.needs-family h1 {
  margin: 0;
  font-size: 1.6rem;
}

.needs-family p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

.needs-family-secondary {
  border: 1px solid var(--line, #e4e2db);
  background: transparent;
  color: var(--text, #2c2c2c);
  border-radius: 12px;
  padding: 11px 20px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.needs-family-secondary:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Deliberately quiet. Signing out is the rarely-right action on this screen —
   the account is not the problem — so it reads as a link rather than competing
   with the two buttons above it. */
.needs-family-signout {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 8px;
}

.needs-family-signout:hover {
  color: var(--text, #2c2c2c);
}