:root {
  --color-bg: #0f1115;
  --color-bg-elevated: #171a21;
  --color-bg-inset: #1f232c;
  --color-fg: #e6e8eb;
  --color-fg-muted: #a0a7b3;
  --color-fg-dim: #5c6370;
  --color-accent: #1D9E75;
  --color-accent-dim: #085041;
  --color-accent-soft: #5DCAA5;
  --color-accent-light: #9FE1CB;
  --color-low: #e05a5a;
  --color-high: #5fbf7f;
  --color-border: #2a2f3a;
  /* Brand palette — also used directly by the marketing landing page. */
  --brand-teal: #1D9E75;
  --brand-green-deep: #085041;
  --brand-charcoal: #2C2C2A;
  --brand-white: #FFFFFF;
  --brand-mint: #9FE1CB;
  --brand-mid-teal: #5DCAA5;
  --font-sans: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Fraunces, "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Fraunces variable axes — warmth + optical sizing for display headings */
  --display-soft: 50;
  --display-opsz: 72;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display typography. Fraunces for headings — variable axes pulled up for
   warmth (SOFT) and display-scale optical weight. The classic coaching
   Wheel-of-Life has a serif lineage; we lean into it. */
h1, h2, .landing-h1, .landing-section h2, .hero h1 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" var(--display-opsz), "SOFT" var(--display-soft);
  letter-spacing: -0.015em;
  line-height: 1.12;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  padding-bottom: calc(4rem + env(safe-area-inset-bottom));
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wordmark {
  display: block;
  width: 180px;
  height: auto;
  margin-bottom: 3rem;
  border-radius: 6px;
}

/* --------------- Home (coming-soon) --------------- */
.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 1.25rem 0;
}

.lede {
  font-size: 1.125rem;
  color: var(--color-fg-muted);
  margin: 0 0 3rem 0;
}

.status {
  border-top: 1px solid var(--color-border);
  padding-top: 2rem;
  margin-bottom: 3rem;
}

.badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--color-accent-dim);
  border-radius: 999px;
  margin-bottom: 1rem;
}

.status p {
  color: var(--color-fg-muted);
  margin: 0 0 1.5rem 0;
}

.cta {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 600;
  padding: 0.9rem 1.4rem;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid var(--color-accent);
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.cta:hover,
.cta:focus-visible { opacity: 0.9; transform: translateY(-1px); }
.cta:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.cta-ghost {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-border);
}

.cta-danger {
  background: transparent;
  color: var(--color-low);
  border-color: var(--color-border);
}

footer {
  margin-top: auto;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-fg-dim);
  font-size: 0.85rem;
}

footer p { margin: 0 0 0.25rem; }

.footer-link a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
}
.footer-link a:hover { text-decoration: underline; }

/* --------------- Auth forms --------------- */
main.view[data-view="login"],
main.view[data-view="signup"],
main.view[data-view="forgot"],
main.view[data-view="reset"],
main.view[data-view="app"],
main.view[data-view="admin-users"],
main.view[data-view="admin-templates"],
main.view[data-view="not-found"] {
  justify-content: flex-start;
}

/* Admin users table needs more horizontal room than the 640px default —
   7 columns of selects + dates can't fit otherwise. */
main.view[data-view="admin-users"] {
  max-width: 1100px;
}

/* Admin templates page — wider than default to fit the nested category
   editor without forced wrapping. */
main.view[data-view="admin-templates"] {
  max-width: 900px;
}

.back-link {
  display: inline-block;
  color: var(--color-fg-muted);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 2rem;
}
.back-link:hover { color: var(--color-fg); }

/* App-shell heading style for auth/app views (login, signup, settings…).
   Exclude the home view so the marketing landing can own its own H1
   sizing and centering via .landing-h1. */
.view:not([data-view="home"]) h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-fg-muted);
}

.form input {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.85rem 0.9rem;
  background: var(--color-bg-elevated);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  outline: none;
}

.form input:focus {
  border-color: var(--color-accent);
}

.pw-field {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.pw-field > input {
  flex: 1;
  padding-right: 2.75rem;
  min-width: 0;
}

.pw-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2.75rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-fg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0 6px 6px 0;
}

.pw-toggle:hover { color: var(--color-fg); }
.pw-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -3px;
}

.pw-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}

.form-hint {
  margin: -0.25rem 0 0.25rem;
  font-size: 0.8rem;
  color: var(--color-fg-dim);
}

.form-error {
  color: var(--color-low);
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  background: rgba(224, 90, 90, 0.08);
  border-left: 3px solid var(--color-low);
  border-radius: 4px;
}

.form button[type="submit"] {
  width: 100%;
  margin-top: 0.5rem;
}

.form-footer {
  color: var(--color-fg-muted);
  font-size: 0.9rem;
  margin: 0.75rem 0;
}
.form-footer a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
}
.form-footer a:hover { text-decoration: underline; }

.success-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}
.success-title {
  margin: 0;
  font-size: 1.5rem;
  color: var(--color-accent);
}
.redirect-countdown {
  display: block;
  margin-top: 0.5rem;
  color: var(--color-fg-muted);
  font-size: 0.95rem;
}

/* --------------- Dev-token box (forgot view) --------------- */
.dev-box {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.dev-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.dev-hint {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--color-fg-muted);
}
.dev-token {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.75rem 0.9rem;
  background: var(--color-bg-inset);
  border-radius: 6px;
  word-break: break-all;
  user-select: all;
  color: var(--color-fg);
}

/* --------------- App (placeholder) --------------- */
.profile-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.profile-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.profile-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
}

.profile-value {
  color: var(--color-fg);
  font-size: 0.95rem;
  text-align: right;
  word-break: break-all;
}

code.profile-value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--color-bg-inset);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

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

.actions-row .cta { flex: 1; text-align: center; }

/* --------------- App shell --------------- */
main.view[data-view="app"] {
  justify-content: flex-start;
  padding: 0;
  max-width: 960px;
}

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 0.75rem;
}

.app-topbar .wordmark {
  margin: 0;
  width: 130px;
}

.app-content {
  flex: 1;
  padding: 0.5rem 1.5rem 5.5rem;
}

/* Unverified-email banner shown above the active tab. Slim row,
   dismissible. Hidden once the user verifies (banner is only rendered
   when /auth/me reports email_verified_at === null) or clicks the × . */
.verify-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 1.5rem;
  padding: 0.55rem 0.75rem;
  background: rgba(91, 141, 239, 0.10);
  border: 1px solid rgba(91, 141, 239, 0.28);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--color-fg);
}
.verify-banner-text { flex: 1; line-height: 1.35; }
.verify-banner-link {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
  margin-left: 0.4rem;
  white-space: nowrap;
}
.verify-banner-link:hover { text-decoration: underline; }
.verify-banner-dismiss {
  background: transparent;
  border: 0;
  color: var(--color-fg-muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
}
.verify-banner-dismiss:hover { color: var(--color-fg); background: rgba(255,255,255,0.05); }

.tab-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
  justify-content: space-around;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 0.8rem 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-fg-dim);
  text-decoration: none;
  border-radius: 6px;
}
.tab:hover { color: var(--color-fg-muted); }
.tab--active { color: var(--color-accent); }

.tab-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.5rem;
}
.tab-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin: 0;
}

/* --------------- Sync badge --------------- */
.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  font-size: 0.72rem;
  color: var(--color-fg-muted);
}

.sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-high);
  transition: background 0.15s ease;
}

/* --------------- First-check-in nudge ---------------
   Shown above the Week Pulse for a user who has categories but zero logs.
   Self-clears the moment the first rating commits. Activation-critical
   moment — the copy is the invitation, not an instruction. */
.first-checkin-nudge {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin: 0.75rem 0 1rem;
  padding: 0.95rem 1.1rem;
  background: color-mix(in oklab, var(--color-accent) 9%, var(--color-bg-elevated));
  border: 1px solid color-mix(in oklab, var(--color-accent) 45%, var(--color-border));
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  animation: nudgeEnter 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes nudgeEnter {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.first-checkin-arrow {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  width: 1.5rem;
  text-align: center;
  padding-top: 0.1rem;
  animation: nudgeBob 1.6s ease-in-out infinite;
}
@keyframes nudgeBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
.first-checkin-copy {
  flex: 1;
}
.first-checkin-title {
  color: var(--color-fg);
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 0.2rem;
}
.first-checkin-body {
  color: var(--color-fg-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* --------------- Week Pulse ---------------
   Seven rolling days, one column per day, a colored dot per check-in.
   Bottom-up stack so busy days visually rise. The rhythm of the week. */
.week-pulse {
  margin: 0.75rem 0 1.5rem;
  padding: 1rem 0.75rem 0.85rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.week-pulse::before {
  /* Faint horizontal rule at baseline — hints at a ground to stack on. */
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(1.5rem + 0.35rem);
  height: 1px;
  background: var(--color-border);
  opacity: 0.55;
}
.pulse-cols {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  height: 86px;
  position: relative;
}
.pulse-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  height: 100%;
}
.pulse-stack {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 3px;
  min-height: 10px;
  flex: 1;
  justify-content: flex-end;
  padding-bottom: 2px;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--color-bg-elevated);
  transition: transform 0.2s ease;
}
.pulse-dot:hover {
  transform: scale(1.4);
  z-index: 1;
}
.pulse-empty {
  width: 10px;
  height: 2px;
  background: var(--color-border);
  border-radius: 2px;
}
.pulse-more {
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--color-fg-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.pulse-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
  font-variant-numeric: tabular-nums;
}
.pulse-col--today {
  position: relative;
}
.pulse-col--today::before {
  /* Subtle vertical wash under today's column so the eye finds "now". */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 24px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: linear-gradient(
    to top,
    rgba(29, 158, 117, 0.12),
    rgba(29, 158, 117, 0)
  );
  pointer-events: none;
  z-index: 0;
}
.pulse-col--today .pulse-stack,
.pulse-col--today .pulse-label {
  position: relative;
  z-index: 1;
}
.pulse-col--today .pulse-label {
  color: var(--color-accent);
}

/* --------------- Category cards --------------- */
.group-heading {
  margin: 1.75rem 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
}

/* Day with no scheduled check-ins. Quiet copy beneath the lede so the
   user knows what's happening without reading the screen as broken. */
.empty-day {
  text-align: center;
  color: var(--color-fg-dim);
  padding: 1.5rem 1rem;
  margin: 0;
}

/* --------------- Today masthead + Rhythm Strip + Past mode ---------------
   Editorial header for the Today screen. Live mode = "Today" (Fraunces)
   with an uppercase weekday/date kicker beneath. Past mode = brass
   "EDITING PAST DAY" kicker above the date in serif. */
.today-masthead {
  align-items: flex-start;
}
.today-masthead-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.today-masthead-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.today-masthead-title--past {
  font-size: 1.85rem;
}
.today-masthead-kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-fg-dim);
}
.today-masthead-kicker--past {
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #c79560;
  text-transform: uppercase;
}

/* 30-day horizontal rhythm strip — replaces Week Pulse on Today. Doubles
   as a visual pulse and the navigator into past-day editing. */
.rhythm-strip {
  margin: 0.75rem 0 1.5rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
}
.rhythm-strip-scroll {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0.55rem 0.6rem 0.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.rhythm-strip-scroll::-webkit-scrollbar {
  height: 6px;
}
.rhythm-strip-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}
.strip-cell {
  flex: 0 0 auto;
  width: 44px;
  padding: 0.45rem 4px 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.strip-cell:hover {
  background: rgba(255, 255, 255, 0.03);
}
.strip-cell--selected-live {
  background: rgba(29, 158, 117, 0.12);
}
.strip-cell--selected-past {
  border-color: #c79560;
  background: rgba(199, 149, 96, 0.10);
}
.strip-stack {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  height: 38px;
  gap: 2px;
  margin-bottom: 4px;
}
.strip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.strip-dot--dim {
  opacity: 0.62;
}
.strip-empty {
  width: 8px;
  height: 1.5px;
  background: var(--color-border);
  border-radius: 1px;
  opacity: 0.55;
}
.strip-more {
  font-size: 8px;
  font-weight: 700;
  color: var(--color-fg-dim);
  margin-top: 1px;
  letter-spacing: 0.05em;
}
.strip-weekday {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-fg-dim);
}
.strip-cell--today .strip-weekday {
  color: var(--color-accent);
}
.strip-cell--selected-past .strip-weekday {
  color: #c79560;
}
.strip-daynum {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--color-fg-muted);
  line-height: 1;
  margin-top: 1px;
}
.strip-cell--today .strip-daynum {
  color: var(--color-fg);
}
.strip-cell--selected-past .strip-daynum {
  color: #c79560;
}
.strip-today-underline {
  position: absolute;
  bottom: 0;
  left: 24%;
  right: 24%;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
}

/* Past-mode banner — sits below the strip when a non-today cell is
   selected. Brass/sepia tinge so it reads as "you're editing the past". */
.past-mode-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  margin: 0 0 1.25rem;
  border: 1px solid rgba(199, 149, 96, 0.5);
  background: rgba(199, 149, 96, 0.10);
  border-radius: 10px;
  animation: pastBannerIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes pastBannerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.past-mode-banner-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.past-mode-banner-kicker {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #c79560;
  text-transform: uppercase;
}
.past-mode-banner-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--color-fg);
}
.past-mode-banner-dist {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--color-fg-dim);
  letter-spacing: 0;
}
.past-mode-banner-exit {
  background: transparent;
  border: 1px solid transparent;
  color: #c79560;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.past-mode-banner-exit:hover {
  border-color: rgba(199, 149, 96, 0.5);
  background: rgba(199, 149, 96, 0.08);
}

/* Past-mode card chrome — brass hairline border so the editing context
   reinforces at every level of the screen. */
.cat-card--past {
  border-color: rgba(199, 149, 96, 0.32);
}

/* "logged" badge replaces the live "✓ this week" done-badge in past mode */
.logged-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #c79560;
  background: rgba(199, 149, 96, 0.10);
  border: 1px solid rgba(199, 149, 96, 0.40);
  border-radius: 999px;
  padding: 1px 0.5rem;
}

/* Empty-state latest chip when no entry exists for the day yet (past mode). */
.latest-rating--empty {
  border-color: var(--color-border) !important;
  border-style: dashed !important;
  color: var(--color-fg-dim) !important;
  font-weight: 500;
}

/* Prefilled rating pip in past mode — lit at the saved rating's color so
   the user sees "this is what you said" at a glance, while the others
   sit in the normal idle treatment. Tapping a different number commits
   an overwrite. */
.rating-pip--prefill {
  background: var(--rc);
  color: var(--color-bg);
  border-color: var(--rc);
}

.cat-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: opacity 0.15s ease;
}

/* Done cards stay visually alive — the sparkline + the ✓ badge carry the
   "done" signal now, so we only lightly subdue instead of dimming to 0.55. */
.cat-card--done { opacity: 0.82; }

.cat-sparkline {
  display: block;
  padding: 0 1rem 0.65rem;
  margin-top: -0.35rem;
  pointer-events: none;
}
.cat-sparkline svg {
  display: block;
  width: 100%;
  height: 26px;
  overflow: visible;
}

.cat-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cat-meta { flex: 1; }

.cat-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-fg);
}

.cat-caption {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--color-fg-muted);
}

.color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.latest-rating {
  width: 40px;
  height: 40px;
  border: 2px solid;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: 700;
}

.done-badge {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--color-bg-inset);
  border: 1px solid var(--color-high);
  color: var(--color-high);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* --------------- Rating picker sheet --------------- */
.cat-sheet {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sheet-hint {
  margin: 0.75rem 0 0;
  text-align: center;
  color: var(--color-fg-muted);
  font-size: 0.8rem;
}

.rating-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
}

.rating-pip {
  aspect-ratio: 1;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  background: transparent;
  color: var(--color-fg-muted);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease, color 0.1s ease;
}
.rating-pip:hover,
.rating-pip:focus-visible {
  border-color: var(--rc);
  color: var(--color-bg);
  background: var(--rc);
  outline: none;
  transform: translateY(-1px);
}

/* Committed state — the held beat after the user taps a rating. The picked
   pip swells and keeps its color; the others dim away. The sheet then shows
   "Saved at 9:14am" for ~900ms before the card collapses. */
.cat-sheet--committed .rating-row {
  pointer-events: none;
}
.rating-pip--picked {
  border-color: var(--rc);
  color: var(--color-bg);
  background: var(--rc);
  transform: scale(1.08);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--rc) 20%, transparent);
  animation: pipCommit 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rating-pip--dim {
  opacity: 0.18;
  transform: scale(0.94);
  filter: grayscale(60%);
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}
@keyframes pipCommit {
  0%   { transform: scale(1); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1.08); }
}
.sheet-saved {
  margin: 0.25rem 0 0.5rem;
  text-align: center;
  color: var(--color-accent);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  animation: savedFadeIn 280ms ease 60ms both;
}
.sheet-saved-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
@keyframes savedFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.note-input {
  width: 100%;
  min-height: 60px;
  background: var(--color-bg-inset);
  color: var(--color-fg);
  border: 0;
  border-radius: 6px;
  padding: 0.75rem;
  font: inherit;
  resize: vertical;
}

/* --------------- Empty state --------------- */
.empty-state {
  padding: 1rem 0;
}

.empty-state h2 {
  font-size: 1.6rem;
  margin: 0 0 0.5rem;
}

.pill-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill {
  padding: 0.35rem 0.8rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--color-fg);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.pill-list--reveal .pill {
  opacity: 0;
  transform: translateY(4px);
  animation: pillReveal 380ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes pillReveal {
  to { opacity: 1; transform: translateY(0); }
}
/* Locked pills shown during onboarding when the user's tier doesn't fit
   the full Wheel of Life. Visible (so the lineage reads) but dimmed and
   dashed so it's clear they're not part of "what you'll start with".
   When pill-list--reveal is in play we override the keyframe end-state
   to land at the locked opacity, not 1. */
.pill--locked {
  opacity: 0.42;
  border-style: dashed !important;
  filter: saturate(0.65);
}
.pill-list--reveal .pill--locked {
  animation-name: pillRevealLocked;
}
@keyframes pillRevealLocked {
  to { opacity: 0.42; transform: translateY(0); }
}

/* --------------- Onboarding (first-run, web) ---------------
   Welcome hero + Wheel-of-Life pill row + template-pack chooser. Shown
   when a freshly-signed-in account has no categories yet. */
.onboarding {
  padding: 1rem 0 4rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.onboarding-hero {
  text-align: left;
}
.onboarding-kicker {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}
.onboarding-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "SOFT" 60;
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 1rem;
  color: var(--color-fg);
}
.onboarding-lede {
  font-size: 1.05rem;
  color: var(--color-fg-muted);
  max-width: 52ch;
  margin: 0 0 0;
  line-height: 1.55;
}
.onboarding-preview {
  padding: 1.1rem 1rem 0.85rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(6px);
  animation: onboardingPreviewReveal 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 180ms forwards;
}
@keyframes onboardingPreviewReveal {
  to { opacity: 1; transform: translateY(0); }
}
.onboarding-preview svg {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  overflow: visible;
}
.onboarding-preview-caption {
  margin: 0;
  text-align: center;
  color: var(--color-fg-muted);
  font-size: 0.82rem;
  font-style: italic;
  max-width: 36ch;
}

.onboarding-section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.onboarding-h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}
.onboarding-sub {
  font-size: 0.95rem;
  color: var(--color-fg-muted);
  margin: 0;
  line-height: 1.55;
}
.onboarding-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-fg-dim);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}
.onboarding-divider::before,
.onboarding-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.pack-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}
@media (min-width: 560px) {
  .pack-list { grid-template-columns: 1fr 1fr; }
}
.pack-card {
  appearance: none;
  text-align: left;
  padding: 1rem 1.1rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
  opacity: 0;
  transform: translateY(6px);
  animation: pillReveal 420ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}
.pack-card:hover {
  border-color: color-mix(in oklab, var(--color-accent) 40%, var(--color-border));
}
.pack-card--active {
  border-color: var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 8%, var(--color-bg-elevated));
  transform: translateY(-1px);
}
.pack-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pack-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-fg);
}
.pack-card-check {
  color: var(--color-accent);
  font-size: 1.1rem;
  font-weight: 800;
}
.pack-card-tagline {
  margin: 0;
  color: var(--color-fg-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}
.pack-card-swatches {
  display: flex;
  gap: 5px;
  margin-top: 0.2rem;
}
.pack-swatch {
  width: 18px;
  height: 4px;
  border-radius: 3px;
}
.pack-card-cats {
  margin: 0;
  font-size: 0.72rem;
  color: var(--color-fg-dim);
  letter-spacing: 0.02em;
}

/* Disabled CTA (used while no template pack is selected yet). */
.cta[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.empty-line {
  color: var(--color-fg-muted);
  padding: 1rem 0;
}

/* --------------- Settings --------------- */
.template-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-fg);
}
.template-tagline {
  margin: 0;
  color: var(--color-fg-muted);
  font-size: 0.95rem;
}
.template-meta {
  margin: 0;
  color: var(--color-fg-dim);
  font-size: 0.85rem;
}

.section-heading {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 2rem 0 0.75rem;
  color: var(--color-fg);
}

.settings-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.category-card {
  transition: border-color 120ms ease, opacity 120ms ease;
}
.category-card.dragging {
  opacity: 0.4;
}
.category-card.drag-over {
  border-color: var(--color-accent);
}

.drag-handle {
  cursor: grab;
  color: var(--color-fg-dim);
  font-size: 1rem;
  line-height: 1;
  user-select: none;
  padding: 0.25rem 0.1rem;
  letter-spacing: -0.1em;
}
.drag-handle:active {
  cursor: grabbing;
  color: var(--color-fg);
}

.reorder-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reorder-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-fg);
  font-size: 0.7rem;
  line-height: 1;
  padding: 2px 5px;
  cursor: pointer;
}
.reorder-btn:hover:not(:disabled) {
  background: var(--color-bg-inset);
}
.reorder-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

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

.settings-input {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  background: var(--color-bg-inset);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  width: 100%;
  outline: none;
}

.settings-input:focus {
  border-color: var(--color-accent);
}

.settings-name {
  font-weight: 600;
  flex: 1;
}

.settings-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-fg-muted);
  margin-top: 0.25rem;
}

.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

.swatch--selected {
  border-color: var(--color-fg);
}

.form-success {
  color: var(--color-high);
  font-size: 0.9rem;
  margin: 0.25rem 0;
}

.version-note {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-fg-dim);
}

.settings-legal {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.85rem;
}

.settings-legal a {
  color: var(--color-fg-muted);
  text-decoration: none;
  padding: 0 0.5rem;
}

.settings-legal a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ---------------- Legal pages (privacy, terms) ---------------- */
main.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  color: var(--color-fg);
  line-height: 1.55;
}

.legal-header {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}

.legal-back {
  display: inline-block;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  color: var(--color-accent);
  text-decoration: none;
}

.legal-header h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
}

.legal-meta {
  margin: 0;
  color: var(--color-fg-muted);
  font-size: 0.9rem;
}

.legal-section {
  margin-bottom: 2rem;
}

.legal-section h2 {
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
  color: var(--color-fg);
}

.legal-section p,
.legal-section li {
  color: var(--color-fg-muted);
  margin: 0.5rem 0;
}

.legal-section ul {
  padding-left: 1.25rem;
}

.legal-section a {
  color: var(--color-accent);
}

.legal-section code {
  background: var(--color-bg-inset);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

.legal-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
  color: var(--color-fg-dim);
  font-size: 0.85rem;
}

.legal-footer a {
  color: var(--color-fg-muted);
  text-decoration: none;
}

.legal-footer a:hover { color: var(--color-accent); }

.settings-footer {
  display: flex;
  justify-content: flex-end;
}

.text-btn {
  background: transparent;
  border: 0;
  color: var(--color-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0.4rem 0;
}

.text-btn--danger { color: var(--color-low); }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-fg-muted);
  font: inherit;
  font-size: 0.8rem;
  border-radius: 999px;
  cursor: pointer;
}

.chip--active {
  border-color: var(--color-accent);
  background: var(--color-bg-inset);
  color: var(--color-fg);
}

.chip--dot {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.chip--active-cat {
  color: var(--color-fg);
}

.chip:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --------------- Admin users table --------------- */
/* Settings-card wrapping the table needs to clip + scroll horizontally
   when the viewport is narrower than the content (mobile browsers,
   resized windows). Without this the table bleeds outside the card. */
#adminUsersWrap {
  overflow-x: auto;
}
.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.admin-users-table th {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-users-table td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-fg);
}
.admin-users-table tr:last-child td {
  border-bottom: none;
}
.admin-users-email {
  font-weight: 500;
}
.admin-users-self {
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  border-radius: 999px;
  background: var(--color-bg-inset);
  color: var(--color-fg-muted);
}
.admin-users-date {
  color: var(--color-fg-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.admin-users-select {
  width: 100%;
  padding: 0.3rem 0.5rem;
  background: var(--color-bg-inset);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.85rem;
}
.admin-users-select:disabled {
  opacity: 0.55;
  cursor: progress;
}
.admin-users-status {
  min-width: 100px;
}
.admin-users-error {
  font-size: 0.75rem;
}

/* --------------- Admin templates --------------- */
/* Editorial header for the admin templates page. */
.admin-tmpl-hero {
  margin-bottom: 2.25rem;
}
.admin-tmpl-kicker {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.admin-tmpl-title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: var(--color-fg);
}
.admin-tmpl-lede {
  color: var(--color-fg-muted);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 38em;
  margin: 0 0 0.9rem;
}
.admin-tmpl-crumbs {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: var(--color-fg-dim);
}
.admin-tmpl-crumbs a {
  color: var(--color-fg-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.admin-tmpl-crumbs a:hover {
  color: var(--color-fg);
  border-bottom-color: var(--color-accent);
}
.admin-tmpl-crumbs-dot {
  color: var(--color-border);
}

.admin-tmpl-loading {
  color: var(--color-fg-dim);
  font-style: italic;
  padding: 2rem 0;
}

.admin-tmpl-grid {
  display: grid;
  gap: 0.75rem;
}

.admin-tmpl-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.admin-tmpl-card--editing {
  border-color: var(--color-accent);
  background: linear-gradient(180deg,
    rgba(29, 158, 117, 0.05) 0%,
    var(--color-bg-elevated) 60%);
}
.admin-tmpl-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.admin-tmpl-card-headline {
  flex: 1;
  min-width: 0;
}
.admin-tmpl-card-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 0.15rem;
  color: var(--color-fg);
}
.admin-tmpl-card-tag {
  font-size: 0.9rem;
  color: var(--color-fg-muted);
  font-style: italic;
  margin: 0;
  line-height: 1.45;
}
.admin-tmpl-card-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}
.admin-tmpl-action {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.admin-tmpl-action:hover {
  border-color: var(--color-accent);
  color: var(--color-fg);
}
.admin-tmpl-action.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(29, 158, 117, 0.08);
}
.admin-tmpl-action--danger:hover {
  border-color: var(--color-low);
  color: var(--color-low);
}

.admin-tmpl-card-spec {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.75rem;
}
.admin-tmpl-spec-cell {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.admin-tmpl-spec-cell--slug {
  margin-left: auto;
}
.admin-tmpl-spec-num {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
.admin-tmpl-spec-lbl {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
}
.admin-tmpl-slug {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-fg-muted);
  background: var(--color-bg-inset);
  border: 1px solid var(--color-border);
  padding: 0.18rem 0.5rem;
  border-radius: 4px;
}

.admin-tmpl-swatches {
  display: flex;
  gap: 4px;
  height: 6px;
  margin-bottom: 0.25rem;
}
.admin-tmpl-swatch-bar {
  flex: 1;
  height: 100%;
  border-radius: 3px;
  min-width: 8px;
}

.admin-tmpl-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  color: var(--color-fg-muted);
}
.admin-tmpl-empty-glyph {
  display: block;
  font-size: 2rem;
  color: var(--color-fg-dim);
  margin-bottom: 0.6rem;
}
.admin-tmpl-empty h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 0.4rem;
  color: var(--color-fg);
}
.admin-tmpl-empty p {
  margin: 0 auto;
  max-width: 32em;
  line-height: 1.55;
}

/* "+ New template" affordance shown below the grid when no form is open. */
.admin-tmpl-newrow {
  margin-top: 1rem;
}
.admin-tmpl-new-cta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--color-border);
  color: var(--color-fg-muted);
  padding: 1rem 1.25rem;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.admin-tmpl-new-cta:hover {
  border-color: var(--color-accent);
  border-style: solid;
  color: var(--color-fg);
  background: rgba(29, 158, 117, 0.04);
}
.admin-tmpl-new-plus {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
  color: var(--color-accent);
}
.admin-tmpl-new-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-tmpl-new-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-fg);
}
.admin-tmpl-new-sub {
  font-size: 0.78rem;
  color: var(--color-fg-dim);
}

/* Edit form — wraps inside an open card OR sits below the grid as the
   "new template" form. */
.admin-tmpl-form {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--color-bg-inset);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.admin-tmpl-form--new {
  margin-top: 1rem;
  border-color: var(--color-accent);
  background: linear-gradient(180deg,
    rgba(29, 158, 117, 0.05) 0%,
    var(--color-bg-inset) 50%);
}
.admin-tmpl-form-head {
  margin-bottom: 0.85rem;
}
.admin-tmpl-form-kicker {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-accent);
  text-transform: uppercase;
}
.admin-tmpl-form-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0.15rem 0 0;
  color: var(--color-fg);
}

.admin-tmpl-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 0.8rem;
  margin-bottom: 0.9rem;
}
.admin-tmpl-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.admin-tmpl-field--wide {
  grid-column: 1 / -1;
}
.admin-tmpl-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.admin-tmpl-label-hint {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-fg-dim);
  opacity: 0.78;
  font-size: 0.7rem;
}
.admin-tmpl-input {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  color: var(--color-fg);
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 140ms ease;
}
.admin-tmpl-input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.admin-tmpl-input[readonly] {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  background: var(--color-bg);
}

.admin-tmpl-cats {
  margin-top: 0.5rem;
  margin-bottom: 0.9rem;
}
.admin-tmpl-cats-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.admin-tmpl-cats-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: var(--color-fg-dim);
  text-transform: uppercase;
}
.admin-tmpl-cats-count {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-fg-muted);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 1px 0.55rem;
  font-variant-numeric: tabular-nums;
}
.admin-tmpl-add-cat {
  background: transparent;
  border: 1px dashed var(--color-border);
  color: var(--color-fg-muted);
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.83rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: border-color 140ms ease, color 140ms ease;
}
.admin-tmpl-add-cat:hover {
  border-color: var(--color-accent);
  border-style: solid;
  color: var(--color-fg);
}
.admin-tmpl-add-cat-plus {
  color: var(--color-accent);
  font-size: 1rem;
  line-height: 1;
}

.admin-tmpl-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
}
.admin-tmpl-save {
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 140ms ease;
}
.admin-tmpl-save:hover {
  background: var(--color-accent-soft);
}
.admin-tmpl-cancel {
  background: transparent;
  color: var(--color-fg-muted);
  border: 1px solid var(--color-border);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
}
.admin-tmpl-cancel:hover {
  color: var(--color-fg);
  border-color: var(--color-fg-muted);
}

@media (max-width: 640px) {
  .admin-tmpl-form-grid {
    grid-template-columns: 1fr;
  }
  .admin-tmpl-card-head {
    flex-direction: column;
    gap: 0.6rem;
  }
  .admin-tmpl-card-actions {
    align-self: stretch;
  }
  .admin-tmpl-action {
    flex: 1;
  }
  .admin-tmpl-card-spec {
    gap: 1rem;
  }
}

.admin-template-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.admin-template-summary h3 {
  margin: 0 0 0.15rem;
}
.admin-template-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}
.admin-template-form {
  margin-top: 0.5rem;
  background: var(--color-bg-inset);
}
.admin-template-cat {
  display: grid;
  grid-template-columns: auto 1.4fr 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.admin-template-cat .settings-input {
  font-size: 0.85rem;
}
.admin-template-cat-reorder {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-template-arrow {
  background: var(--color-bg-elevated);
  color: var(--color-fg-muted);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  width: 22px;
  height: 18px;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.admin-template-arrow:hover:not(:disabled) {
  color: var(--color-fg);
  border-color: var(--color-accent);
}
.admin-template-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.admin-template-cat-swatches {
  display: flex;
  gap: 0.3rem;
}
.admin-template-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.admin-template-swatch--selected {
  border-color: var(--color-fg);
}
.admin-template-remove {
  font-size: 0.8rem;
  padding: 0.4rem 0.6rem;
}
@media (max-width: 720px) {
  .admin-template-cat {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "reorder name remove"
      "reorder interval interval"
      "reorder swatches swatches";
    row-gap: 0.4rem;
  }
  .admin-template-cat-reorder { grid-area: reorder; }
  .admin-template-cat-name { grid-area: name; }
  .admin-template-cat-interval { grid-area: interval; }
  .admin-template-cat-swatches { grid-area: swatches; flex-wrap: wrap; }
  .admin-template-remove { grid-area: remove; }
}
.admin-template-row + .admin-template-row {
  margin-top: 0.5rem;
}

/* --------------- History page --------------- */
.history-hero {
  margin-bottom: 1.5rem;
}
.history-kicker {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}
.history-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
}
.history-lede {
  color: var(--color-fg-muted);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 38em;
  margin: 0;
}

.legend-heading {
  margin: 0.5rem 0 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
}
.chip-row--legend {
  margin-bottom: 1.5rem;
}
.chip-avg {
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 0.35rem;
  letter-spacing: 0.01em;
}
.chip-avg--empty {
  color: var(--color-fg-dim);
}
.chip--range {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Editorial frame around the overlay chart — replaces the simple
   bordered wrap. The kicker/title/sub at the top reads as a magazine
   plate caption. */
.chart-frame {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.chart-frame-head {
  padding: 1rem 1.1rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chart-frame-kicker {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-fg-dim);
}
.chart-frame-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-fg);
  margin-top: 2px;
}
.chart-frame-sub {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-fg-muted);
  margin-top: 1px;
}
.chart-frame .chart-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
  margin-top: 0;
  padding: 0.4rem 0.6rem 0.6rem;
}

.chart-wrap {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0.75rem;
  margin-top: 1rem;
  position: relative;
}

.history-svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--color-fg-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chart-empty-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-fg-muted);
  letter-spacing: -0.012em;
}
.chart-empty-sub {
  font-size: 0.82rem;
  color: var(--color-fg-dim);
}

/* History chart point markers — small rings, fill matches card background
   so the line passes "through" them rather than getting capped. */
.chart-marker {
  pointer-events: none;
}

/* Tooltip — hover/tap the chart to see per-series values on that bucket. */
.chart-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 0.45rem 0.65rem 0.55rem;
  background: rgba(15, 17, 21, 0.96);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  font-size: 0.75rem;
  color: var(--color-fg);
  pointer-events: none;
  min-width: 7rem;
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.chart-tooltip-date {
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--color-fg-muted);
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}
.chart-tooltip-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2px;
}
.chart-tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.chart-tooltip-name {
  color: var(--color-fg);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chart-tooltip-val {
  color: var(--color-fg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --------------- Patterns panel (History correlations) ---------------
   The product's wedge: overlay ≠ pretty lines, overlay = coach-grade
   insight. r ≥ 0.6 gets prominent treatment, mild links get muted. */
.patterns {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.patterns-heading {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
  margin: 0 0 0.25rem;
}
.patterns-empty {
  color: var(--color-fg-muted);
  font-size: 0.9rem;
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--color-bg-elevated);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  line-height: 1.5;
}
.pattern-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.pattern-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.08;
  pointer-events: none;
}
.pattern-card--strong-pos::before { background: var(--color-high); }
.pattern-card--strong-neg::before { background: var(--color-low); }
.pattern-card--mild-pos::before   { background: transparent; }
.pattern-card--mild-neg::before   { background: transparent; }
.pattern-card--strong-pos {
  border-color: color-mix(in oklab, var(--color-high) 50%, var(--color-border));
}
.pattern-card--strong-neg {
  border-color: color-mix(in oklab, var(--color-low) 50%, var(--color-border));
}
.pattern-swatches {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 0.3rem;
  position: relative;
  z-index: 1;
}
.swatch-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--color-bg-elevated);
}
.pattern-copy {
  flex: 1;
  position: relative;
  z-index: 1;
}
.pattern-headline {
  margin: 0 0 0.25rem;
  color: var(--color-fg);
  font-size: 0.95rem;
  line-height: 1.4;
}
.pattern-headline strong {
  font-weight: 700;
  color: var(--color-fg);
}
.pattern-meta {
  margin: 0;
  font-size: 0.72rem;
  color: var(--color-fg-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

/* --------------- Category details directory (History) ---------------
   Mobile's History screen has had this list since day one; web gets it
   now so the two surfaces offer parity for drill-down from the overlay. */
.directory {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.directory-heading {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "SOFT" var(--display-soft);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.25rem;
  color: var(--color-fg);
}
.directory-sub {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--color-fg-muted);
}
.directory-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.directory-list li + li .directory-row {
  border-top: 1px solid var(--color-border);
}
.directory-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  color: var(--color-fg);
  text-decoration: none;
  transition: background 0.15s ease;
}
.directory-row:hover,
.directory-row:focus-visible {
  background: var(--color-bg-inset);
  outline: none;
}
.directory-name {
  flex: 1;
  font-size: 0.95rem;
  color: var(--color-fg);
}
.directory-chevron {
  color: var(--color-fg-dim);
  font-size: 1.15rem;
  line-height: 1;
}

/* --------------- Category detail --------------- */
.cat-detail-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
}
.cat-detail-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin: 0;
}

.description-edit {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 0.5rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cat-description-text { color: var(--color-fg-muted); }
.cat-description-add {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.85rem;
}

.cat-meta-line {
  color: var(--color-fg-dim);
  font-size: 0.8rem;
  margin: 0 0 1.25rem;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.stat-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0.9rem;
}

.stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-bottom: 0.35rem;
}

.stat-value {
  font-size: 1.65rem;
  font-weight: 700;
}

.stat-suffix {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-fg-dim);
}

.log-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}

.rating-pill {
  width: 36px;
  height: 36px;
  border: 2px solid;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 700;
  flex-shrink: 0;
}

.log-body { flex: 1; }
.log-date {
  color: var(--color-fg);
  font-size: 0.9rem;
}
.log-note {
  color: var(--color-fg-muted);
  font-size: 0.8rem;
  margin-top: 0.1rem;
}
.log-note--empty {
  color: var(--color-fg-dim);
  font-style: italic;
}

.detail-link {
  display: block;
  text-align: center;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  padding: 0.25rem 0;
}
.detail-link:hover { text-decoration: underline; }

/* --------------- Push (reminders) section --------------- */
.push-status {
  color: var(--color-fg-muted);
  font-size: 0.9rem;
}

.push-actions {
  margin-top: 0.5rem;
}

/* ===================================================================
   Landing page (marketing). Scoped to .landing so it doesn't collide
   with the dark app-shell styles above. The landing uses a light bg;
   the <main> above is centered-column for auth/app views so we detach
   the landing from those constraints via width: 100%; max-width: none.
   =================================================================== */

/* Router sets data-view="home" on <main> — more portable than :has() for
   older mobile browsers (pre-2023 Firefox + Samsung Internet). */
main[data-view="home"] {
  max-width: none;
  padding: 0;
  justify-content: flex-start;
  background: var(--brand-white);
  /* Guard against horizontal overflow from any stray fixed-width child. */
  overflow-x: hidden;
}

.landing {
  /* One content column width shared by every section so the left/right
     edge of the text stays vertically aligned as the eye scrolls.
     Plain sections use --landing-container as the *border-box* width
     (padding eats into it); full-bleed sections use --landing-content
     directly on their inner children so the visible text column matches. */
  --landing-container: 1040px;
  --landing-gutter: 1.5rem;
  --landing-content: calc(var(--landing-container) - var(--landing-gutter) * 2);
  --landing-form-width: 560px;

  color: var(--brand-charcoal);
  background: var(--brand-white);
  font-family: var(--font-sans);
  width: 100%;
  margin: 0 auto;
}

.landing h1,
.landing h2,
.landing h3 {
  color: var(--brand-charcoal);
  line-height: 1.2;
}

.landing p {
  color: var(--brand-charcoal);
  line-height: 1.6;
  font-size: 1.0625rem;
}

/* ---------- Hero ---------- */
.landing-hero {
  max-width: var(--landing-container);
  margin: 0 auto;
  padding: 2rem var(--landing-gutter) 4rem;
  padding-top: max(2rem, env(safe-area-inset-top));
  text-align: center;
}

.landing-wordmark {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto 2.5rem;
  border-radius: 12px;
}

.landing-h1 {
  font-size: clamp(1.625rem, 6.4vw, 2.75rem);
  font-weight: 800;
  margin: 0 auto 1.25rem;
  max-width: 20ch;
  letter-spacing: -0.01em;
  /* Keep long words from shoving content off-screen on narrow phones. */
  overflow-wrap: break-word;
  text-wrap: balance;
}

.landing-sub {
  font-size: 1.125rem;
  color: #4a4a46;
  max-width: 56ch;
  margin: 0 auto 2rem;
}

.landing-cta {
  display: inline-block;
  background: var(--brand-teal);
  color: var(--brand-white);
  font-weight: 700;
  font-size: 1.0625rem;
  padding: 0.95rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.landing-cta:hover { background: #168a66; transform: translateY(-1px); }
.landing-cta:active { transform: translateY(0); }

.landing-cta--on-dark {
  background: var(--brand-white);
  color: var(--brand-green-deep);
}
.landing-cta--on-dark:hover { background: var(--brand-mint); }

/* ---------- Generic section ----------
   Plain (white-bg) sections are a centered column inside the page.
   Tinted/dark/signup sections are full-bleed bands whose inner content
   shares the same column width — so the text edge aligns top-to-bottom. */
.landing-section {
  padding: 4rem var(--landing-gutter);
  max-width: var(--landing-container);
  margin: 0 auto;
}

.landing-section h2 {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 800;
  margin: 0 0 1.5rem 0;
  letter-spacing: -0.01em;
}

.landing-section p + p {
  margin-top: 1rem;
}

.landing-pull {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--brand-teal);
  border-left: 3px solid var(--brand-teal);
  padding-left: 1rem;
  margin: 1.5rem 0;
}

.landing-section--tinted {
  background: #f3fbf7;
  max-width: none;
  padding-left: var(--landing-gutter);
  padding-right: var(--landing-gutter);
}
.landing-section--tinted > * {
  max-width: var(--landing-content);
  margin-left: auto;
  margin-right: auto;
}

.landing-section--dark {
  background: var(--brand-green-deep);
  color: var(--brand-white);
  max-width: none;
  padding-left: var(--landing-gutter);
  padding-right: var(--landing-gutter);
}
.landing-section--dark h2,
.landing-section--dark p {
  color: var(--brand-white);
}
.landing-section--dark > * {
  max-width: var(--landing-content);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Steps ---------- */
.landing-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
}
.landing-steps li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.25rem;
  align-items: start;
}
.landing-step-num {
  background: var(--brand-teal);
  color: var(--brand-white);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.125rem;
}
.landing-steps h3 {
  margin: 0 0 0.35rem 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.landing-steps p {
  margin: 0;
}

/* ---------- Audience list ---------- */
.landing-audience {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  display: grid;
  gap: 0.9rem;
}
.landing-audience li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1.0625rem;
}
.landing-audience li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.65rem;
  height: 0.65rem;
  background: var(--brand-teal);
  border-radius: 999px;
}

.landing-closing {
  font-weight: 600;
  font-size: 1.125rem;
}

/* ---------- Pricing ---------- */
.landing-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.landing-tier {
  background: var(--brand-white);
  border: 1px solid #dbe7e1;
  border-radius: 14px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.landing-tier h3 {
  margin: 0;
  font-size: 1.125rem;
  color: var(--brand-teal);
  font-weight: 700;
}
.landing-price {
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
  color: var(--brand-charcoal);
}
.landing-price span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #6a6a65;
}
.landing-price-soon {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-green-deep);
  margin: 0;
}
.landing-price-alt {
  font-size: 0.85rem;
  font-weight: 500;
  color: #6a6a65;
  margin: 0;
}
.landing-tier p:last-child {
  color: #4a4a46;
  font-size: 0.95rem;
}
.landing-tier--highlight {
  border-color: var(--brand-teal);
  box-shadow: 0 6px 24px -12px rgba(29, 158, 117, 0.45);
}
.landing-tier--future {
  background: #f3fbf7;
  border-style: dashed;
}

/* ---------- Waitlist signup ----------
   The heading + lede share the page-wide container so the left edge of
   text matches every other section. Only the form itself is narrow —
   long input rows become unwieldy past ~560px. */
.landing-section--signup {
  background: var(--brand-teal);
  color: var(--brand-white);
  max-width: none;
  padding-left: var(--landing-gutter);
  padding-right: var(--landing-gutter);
  text-align: center;
}
.landing-section--signup h2,
.landing-section--signup p {
  color: var(--brand-white);
}
.landing-section--signup > * {
  max-width: var(--landing-content);
  margin-left: auto;
  margin-right: auto;
}
.landing-section--signup .landing-form,
.landing-section--signup .landing-thanks {
  max-width: var(--landing-form-width);
}

.landing-form {
  background: var(--brand-white);
  color: var(--brand-charcoal);
  border-radius: 14px;
  padding: 1.75rem;
  text-align: left;
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}
.landing-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.95rem;
}
.landing-form input[type="text"],
.landing-form input[type="email"] {
  font-family: inherit;
  /* 16px minimum prevents iOS Safari from auto-zooming on focus. */
  font-size: 16px;
  padding: 0.75rem;
  border: 1px solid #cfd9d4;
  border-radius: 8px;
  background: var(--brand-white);
  color: var(--brand-charcoal);
  width: 100%;
}
.landing-form input:focus {
  outline: 2px solid var(--brand-teal);
  outline-offset: -1px;
  border-color: var(--brand-teal);
}
.landing-role {
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.landing-role legend {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
.landing-role label {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 1rem;
}
.landing-fineprint {
  color: #6a6a65;
  font-size: 0.85rem;
  text-align: center;
  margin: 0;
}

.landing-form-error {
  background: #fbeaea;
  color: #8a2929;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-size: 0.95rem;
  margin: 0;
}

.landing-thanks {
  background: var(--brand-white);
  color: var(--brand-charcoal);
  border-radius: 14px;
  padding: 2rem;
  text-align: center;
  margin-top: 1.5rem;
}
.landing-thanks h3 {
  margin: 0 0 0.5rem 0;
  color: var(--brand-teal);
  font-size: 1.375rem;
  font-weight: 800;
}
.landing-thanks p {
  margin: 0;
  color: var(--brand-charcoal);
}

/* ---------- Mobile tuning ----------
   Breakpoint at 720px — anything narrower is treated as a phone. Reduces
   vertical padding, shrinks hero spacing, and tightens side gutters so the
   page breathes right on a 375px viewport. */
@media (max-width: 720px) {
  .landing-hero {
    padding: 1.5rem 1.125rem 2.5rem;
  }

  .landing-wordmark {
    margin-bottom: 1.75rem;
    border-radius: 10px;
  }

  .landing-sub {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  .landing-cta {
    font-size: 1rem;
    padding: 0.85rem 1.5rem;
    /* Ensure the CTA never overflows if the label wraps on very narrow
       phones (≤ 320px). */
    max-width: 100%;
    white-space: normal;
  }

  .landing-section {
    padding: 2.5rem 1.125rem;
  }
  .landing-section--tinted,
  .landing-section--dark,
  .landing-section--signup {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }

  .landing-section h2 {
    margin-bottom: 1rem;
    text-wrap: balance;
  }

  .landing-pull {
    font-size: 1.125rem;
    padding-left: 0.75rem;
    margin: 1.25rem 0;
  }

  .landing-steps {
    gap: 1.25rem;
  }
  .landing-steps li {
    grid-template-columns: 2.25rem 1fr;
    gap: 0.875rem;
  }
  .landing-step-num {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
  }
  .landing-steps h3 {
    font-size: 1.125rem;
  }

  .landing-audience li {
    padding-left: 1.25rem;
    font-size: 1rem;
  }
  .landing-audience li::before {
    width: 0.5rem;
    height: 0.5rem;
    top: 0.65em;
  }

  .landing-pricing {
    grid-template-columns: 1fr;
    gap: 0.875rem;
    margin-top: 1.25rem;
  }
  .landing-tier {
    padding: 1.25rem;
  }
  .landing-price {
    font-size: 1.75rem;
  }

  .landing-form {
    padding: 1.25rem;
    gap: 0.875rem;
  }
  .landing-role {
    gap: 0.375rem;
  }
  .landing-role label {
    padding: 0.25rem 0;
  }

  .landing-footer {
    padding: 2rem 1.125rem;
    /* Respect iOS home indicator. */
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
}

/* ---------- Footer ---------- */
.landing-footer {
  background: var(--brand-green-deep);
  color: var(--brand-white);
  padding: 3rem var(--landing-gutter);
  text-align: center;
}
.landing-footer > * {
  max-width: var(--landing-content);
  margin-left: auto;
  margin-right: auto;
}
.landing-footer-mark {
  display: block;
  width: 260px;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}
.landing-footer-tag {
  color: var(--brand-mint);
  font-style: italic;
  font-weight: 500;
  margin: 0.5rem 0 1rem 0;
}
.landing-footer-meta {
  color: var(--brand-white);
}
.landing-footer-meta a {
  color: var(--brand-white);
  text-decoration: none;
  margin: 0 0.25rem;
}
.landing-footer-meta a:hover { text-decoration: underline; }
.landing-footer-copy {
  color: var(--brand-mint);
  font-size: 0.9rem;
  margin-top: 1rem;
}
.landing-footer-signin {
  margin-top: 1.25rem;
}
.landing-footer-signin a {
  color: var(--brand-white);
  text-decoration: underline;
  font-size: 0.9rem;
}

/* ===================================================================
   Gamification — streak pill, weekly recap, badges, toasts.
   =================================================================== */

/* ---------- Streak pill (Today header) ---------- */
.streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, rgba(29, 158, 117, 0.18), rgba(29, 158, 117, 0.08));
  border: 1px solid rgba(29, 158, 117, 0.35);
  color: var(--color-accent);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.streak-flame {
  font-size: 0.95rem;
  line-height: 1;
}
.streak-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.streak-label {
  color: var(--color-fg-muted);
  font-weight: 500;
  font-size: 0.8rem;
}

/* ---------- Weekly recap ---------- */
.weekly-recap {
  margin-top: 2rem;
  padding: 1rem 1.1rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.weekly-recap .group-heading {
  margin: 0 0 0.5rem 0;
}
.recap-summary {
  color: var(--color-fg-muted);
  margin: 0 0 0.85rem 0;
  font-size: 0.95rem;
}
.recap-summary strong {
  color: var(--color-fg);
}
.recap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}
.recap-row {
  display: grid;
  grid-template-columns: 0.65rem 1fr auto auto;
  gap: 0.65rem;
  align-items: center;
  font-size: 0.95rem;
}
.recap-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
}
.recap-name {
  color: var(--color-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recap-count {
  color: var(--color-fg-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.recap-avg {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.85rem;
}

/* ---------- Badge list (Settings → Milestones) ---------- */
.badge-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0 0;
  display: grid;
  gap: 0.5rem;
}
.badge-item {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  background: var(--color-bg-inset);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.badge-item--locked { opacity: 0.55; }
.badge-item--earned {
  border-color: rgba(29, 158, 117, 0.5);
  background: linear-gradient(135deg, rgba(29, 158, 117, 0.12), var(--color-bg-inset) 60%);
}
.badge-glyph {
  font-size: 1.4rem;
  line-height: 1;
  text-align: center;
}
.badge-label {
  color: var(--color-fg);
  font-weight: 600;
  font-size: 0.95rem;
}
.badge-desc {
  color: var(--color-fg-muted);
  font-size: 0.85rem;
  margin-top: 2px;
}

/* ---------- Badge toast ---------- */
.badge-toast {
  position: fixed;
  left: 50%;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: min(90vw, 360px);
  padding: 0.85rem 1rem;
  background: var(--color-bg-elevated);
  border: 1px solid rgba(29, 158, 117, 0.55);
  border-radius: 12px;
  box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.5),
              0 4px 10px -4px rgba(29, 158, 117, 0.35);
  color: var(--color-fg);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
  z-index: 1000;
  cursor: pointer;
}
.badge-toast--shown {
  opacity: 1;
  transform: translate(-50%, 0);
}
.badge-toast-glyph {
  font-size: 1.6rem;
  line-height: 1;
}
.badge-toast-kicker {
  color: var(--color-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge-toast-title {
  font-weight: 700;
  font-size: 1rem;
  margin-top: 2px;
}
.badge-toast-desc {
  color: var(--color-fg-muted);
  font-size: 0.85rem;
  margin-top: 2px;
}