/* =====================================================
   USHA'S CARE GUIDE — STYLES
   Preserves the warm cream / burgundy / serif palette
   established in the original Sleep Guide.
===================================================== */

:root {
  --cream: #f5efe4;
  --cream-deep: #ece2d0;
  --paper: #fbf7ef;
  --ink: #2a221c;
  --ink-soft: #4a3c30;
  --ink-muted: #8a7a6a;
  --rule: #e2d5c1;
  --rule-soft: #efe5d3;
  --burgundy: #6b1f2a;
  --burgundy-soft: #8a3340;
  --accent: #c87a3a;
  --accent-deep: #9a5828;
  --accent-soft: #e8b487;
  --sage: #98a884;
  --sage-bg: #e8eddf;
  --rose-bg: #f3e6e2;
  --green: #5a7a4a;
  --red: #a23a2a;
  --shadow-sm: 0 1px 3px rgba(60, 40, 20, 0.06), 0 1px 2px rgba(60, 40, 20, 0.04);
  --shadow: 0 4px 16px rgba(60, 40, 20, 0.08), 0 2px 4px rgba(60, 40, 20, 0.04);
  --shadow-lg: 0 12px 40px rgba(60, 40, 20, 0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --max: 1080px;
  --max-narrow: 720px;
  --serif: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --t: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --cream: #1a1714;
  --cream-deep: #221d18;
  --paper: #15110e;
  --ink: #f0e6d6;
  --ink-soft: #c8b8a4;
  --ink-muted: #8a7a6a;
  --rule: #3a3128;
  --rule-soft: #2a231d;
  --burgundy: #d68a92;
  --burgundy-soft: #b8636e;
  --accent: #e8a070;
  --accent-deep: #c87a3a;
  --accent-soft: #6b3f24;
  --sage: #aebb96;
  --sage-bg: #2a3024;
  --rose-bg: #3a2a26;
  --green: #98c084;
  --red: #e88a78;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--t), color var(--t);
}

a { color: var(--burgundy); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--accent-soft); color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

/* ================== TOP BAR ================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 247, 239, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--rule);
  /* Iter 6.29: hide-on-scroll-down topbar */
  transition: transform 260ms ease;
  will-change: transform;
}
body.scrolled-down .topbar { transform: translateY(-100%); }
[data-theme="dark"] .topbar {
  background: rgba(21, 17, 14, 0.92);
}

.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: opacity var(--t);
}
.brand:hover { opacity: 0.78; text-decoration: none; }

.brand-mark {
  width: 32px;
  height: 32px;
  color: var(--accent);
  flex-shrink: 0;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--rule);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), border var(--t);
  color: inherit;
}
.theme-toggle:hover { background: var(--cream-deep); }
[data-theme="dark"] .theme-toggle .theme-icon::before {
  content: "☀️";
}
[data-theme="dark"] .theme-toggle .theme-icon { font-size: 0; }
[data-theme="dark"] .theme-toggle .theme-icon::before { font-size: 16px; }

/* ================== TABS ================== */
.tabs {
  position: sticky;
  top: 65px;
  z-index: 40;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  /* Iter 6.29: tabs slide up to the top of the viewport when topbar is hidden */
  transition: top 260ms ease;
}
body.scrolled-down .tabs { top: 0; }
[data-theme="dark"] .tabs { background: var(--paper, #15110e); }

.tabs-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Iter 6.29: scroll-snap so tabs land cleanly, not mid-label */
  scroll-snap-type: x proximity;
}
.tabs-inner::-webkit-scrollbar { display: none; }
.tabs-inner .tab { scroll-snap-align: start; }

.tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 18px 16px 16px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
  white-space: nowrap;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.tab:hover { color: var(--ink-soft); }
.tab[aria-selected="true"] {
  color: var(--burgundy);
  border-bottom-color: var(--accent);
}

.tab-num {
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.tab-label {
  font-size: 15px;
  font-weight: 500;
}

/* ================== PANELS ================== */
.panel { display: none; }
/* Use opacity-only fade so the panel never carries a transform after animation.
   A residual transform on the panel creates a containing block + stacking
   context which breaks hit-testing for absolutely-positioned descendants
   (e.g. food-tl-dot was intercepting taps on variant buttons in v132/v133). */
.panel.active { display: block; animation: fadeIn 380ms ease both; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ================== HERO ================== */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(232, 180, 135, 0.35), transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(152, 168, 132, 0.18), transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
  padding: 84px 24px 72px;
  border-bottom: 1px solid var(--rule);
}
.hero-overview {
  background:
    radial-gradient(ellipse at 70% 10%, rgba(232, 180, 135, 0.45), transparent 55%),
    radial-gradient(ellipse at 10% 60%, rgba(152, 168, 132, 0.2), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
}
.hero-sids {
  background:
    radial-gradient(ellipse at 80% 10%, rgba(152, 168, 132, 0.32), transparent 55%),
    radial-gradient(ellipse at 0% 80%, rgba(232, 180, 135, 0.25), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
}

.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 20px;
  padding: 6px 12px;
  background: rgba(232, 180, 135, 0.25);
  border-radius: 4px;
}

.hero h1 {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  line-height: 1.05;
  max-width: 880px;
  margin-bottom: 24px;
  font-weight: 600;
}

.hero-lead {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 720px;
  margin-bottom: 32px;
}

.age-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}

.age-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(200, 122, 58, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(200, 122, 58, 0.18); }
  50% { box-shadow: 0 0 0 9px rgba(200, 122, 58, 0.05); }
}

/* ================== SECTIONS ================== */
.section {
  padding: 72px 24px;
}
.section-quiet {
  background: var(--cream);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.section-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.section-inner.narrow { max-width: var(--max-narrow); }

.section-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 12px;
}

.section-heading {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin-bottom: 12px;
}
.section-heading.center { text-align: center; }

.section-sub {
  color: var(--ink-soft);
  font-size: 1.08rem;
  margin-bottom: 36px;
  max-width: 720px;
}

.sub-heading {
  font-size: 1.4rem;
  margin: 40px 0 16px;
  color: var(--burgundy);
}

.prose {
  font-size: 1.04rem;
  color: var(--ink-soft);
  max-width: 720px;
}
.prose.center { margin: 0 auto; text-align: center; }

.signature {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin-top: 24px;
}
.signature.center { text-align: center; }

/* ================== OVERVIEW CARDS ================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 8px;
}

.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover { text-decoration: none; }

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  position: relative;
  overflow: hidden;
}

.card-link:hover .card {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-soft);
}

.card-num {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  font-weight: 500;
}

.card h3 {
  font-size: 1.5rem;
  color: var(--burgundy);
  margin: 0;
}

.card p {
  color: var(--ink-soft);
  font-size: 0.97rem;
  margin: 0;
  line-height: 1.6;
  flex-grow: 1;
}

.card-cta {
  display: inline-block;
  font-size: 14px;
  color: var(--accent-deep);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 4px;
}
.card-cta.muted { color: var(--ink-muted); }

.card-soon {
  background: var(--cream);
  border-style: dashed;
}
.card-soon h3 { color: var(--ink-soft); }

/* ================== PURPLE GRID ================== */
.purple-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 28px 0 12px;
}

.purple-cell {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color var(--t), transform var(--t);
}
.purple-cell:hover {
  border-color: var(--burgundy-soft);
  transform: translateY(-2px);
}

.purple-cell .letter {
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--burgundy);
  font-weight: 600;
  line-height: 1;
}
.purple-cell .meaning {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
  font-weight: 600;
}
.purple-cell .desc {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ================== KV TABLE ================== */
.kv-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 8px 0 24px;
}

.kv {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.97rem;
}
.kv:last-child { border-bottom: 0; }

.kv .k {
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  text-transform: uppercase;
  align-self: center;
}
.kv .v { color: var(--ink-soft); }

@media (max-width: 600px) {
  .kv { grid-template-columns: 1fr; gap: 4px; }
}

/* ================== CALLOUTS ================== */
.callout {
  display: flex;
  gap: 18px;
  padding: 22px 26px;
  border-radius: var(--radius);
  margin: 32px 0 8px;
  border: 1px solid transparent;
  align-items: flex-start;
}

.callout-sage {
  background: var(--sage-bg);
  border-color: rgba(152, 168, 132, 0.4);
}
.callout-cream {
  background: var(--cream-deep);
  border-color: var(--rule);
}

.callout-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.callout-body h4 {
  font-size: 1.1rem;
  margin: 0 0 6px;
  color: var(--ink);
}
.callout-body p {
  margin: 0;
  font-size: 0.97rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ================== BRAIN FIGURE ================== */
.brain-figure {
  margin: 32px 0;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px;
}
.brain-figure svg {
  max-width: 420px;
  width: 100%;
  height: auto;
}
.brain-figure img {
  display: block;
  margin: 0 auto 18px;
  max-width: 560px;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 4px);
  box-shadow: 0 1px 2px rgba(42, 34, 28, 0.06), 0 8px 24px rgba(42, 34, 28, 0.08);
}
[data-theme="dark"] .brain-figure img {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.45);
}
.brain-figure figcaption {
  font-size: 0.88rem;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 14px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ================== SIDE-BY-SIDE COMPARISON CARDS ================== */
.cmp {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 28px auto;
  max-width: 820px;
}
@media (min-width: 720px) {
  .cmp { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.cmp-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(42, 34, 28, 0.04);
}
.cmp-card--purple { border-top-color: #8a6db0; }
.cmp-card--usha   { border-top-color: var(--burgundy); }
.cmp-card--infant { border-top-color: var(--sage); }
.cmp-card--elderly { border-top-color: var(--ink-muted); }
.cmp-title {
  font-family: 'Fraunces', serif;
  font-size: 1.18rem;
  font-weight: 500;
  margin: 0 0 14px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}
.cmp-icon { font-size: 1.4rem; line-height: 1; }
.cmp-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cmp-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  line-height: 1.55;
  color: var(--ink-muted);
  font-size: 0.95rem;
}
.cmp-list li:last-child { border-bottom: none; }
.cmp-label {
  flex: 0 0 110px;
  min-width: 110px;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.cmp-text { flex: 1; }
.cmp-text strong { color: var(--ink); }
[data-theme="dark"] .cmp-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .cmp-card--purple { border-top-color: #b29ad6; }
[data-theme="dark"] .cmp-card--usha   { border-top-color: #c97580; }
[data-theme="dark"] .cmp-card--infant { border-top-color: #b6c9a3; }
[data-theme="dark"] .cmp-card--elderly { border-top-color: #b0a294; }
@media (max-width: 600px) {
  .cmp-card { padding: 18px 18px; }
  .cmp-list li { flex-direction: column; gap: 2px; padding: 8px 0; }
  .cmp-label { flex-basis: auto; min-width: 0; }
}

/* ================== LEGACY COMPARE TABLE (unused) ================== */
.compare-table {
  margin: 28px 0 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.compare-row {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  border-bottom: 1px solid var(--rule);
}
.compare-row:last-child { border-bottom: 0; }

.compare-cell {
  padding: 16px 22px;
  font-size: 0.97rem;
  color: var(--ink-soft);
  border-right: 1px solid var(--rule);
}
.compare-cell:last-child { border-right: 0; }
.compare-cell.label {
  font-weight: 600;
  color: var(--ink-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--cream);
}

.compare-head .compare-cell {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--cream);
}

@media (max-width: 720px) {
  .compare-row { grid-template-columns: 1fr; }
  .compare-cell { border-right: 0; }
  .compare-cell.label { padding-bottom: 6px; }
  .compare-head { display: none; }
  .compare-row:not(.compare-head) { padding: 8px 0; border-bottom: 2px solid var(--rule); }
}

/* ================== CHARTS ================== */
.chart-block {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 28px 22px;
  margin: 24px 0;
}

.chart-title {
  font-size: 1.2rem;
  color: var(--burgundy);
  margin: 0 0 4px;
}
.chart-sub {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin: 0 0 16px;
}

.chart {
  width: 100%;
  height: auto;
  display: block;
}

.chart-caption {
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 10px;
  margin-bottom: 0;
}

/* horizontal bars */
.bars { padding: 26px 0 4px; }

.bar-row {
  display: grid;
  grid-template-columns: 160px 1fr 60px;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
  font-size: 0.92rem;
}
.bar-label {
  color: var(--ink-soft);
  font-weight: 500;
  text-align: right;
  font-size: 0.9rem;
}
.bar-track {
  position: relative;
  height: 14px;
  background: var(--rule-soft);
  border-radius: 7px;
  overflow: hidden;
}
.bar {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 7px;
  transition: width 0.6s ease;
}
.bar-1 { background: linear-gradient(90deg, var(--burgundy), var(--burgundy-soft)); }
.bar-2 { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }
.bar-3 { background: linear-gradient(90deg, var(--accent), var(--accent-soft)); }
.bar-4 { background: linear-gradient(90deg, var(--sage), #b6c69e); }
.bar-5 { background: linear-gradient(90deg, var(--green), var(--sage)); }

.bar-when {
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.bar-axis {
  display: grid;
  grid-template-columns: 160px 1fr 60px;
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}
.bar-axis-track {
  grid-column: 2;
  position: relative;
  height: 1em;
}
.bar-axis-track span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bar-axis-track span:first-child { transform: translateX(0); }
.bar-axis-track span:last-child { transform: translateX(-100%); }

@media (max-width: 600px) {
  .bar-row { grid-template-columns: 110px 1fr 50px; gap: 8px; }
  .bar-label { font-size: 0.82rem; }
  .bar-axis { grid-template-columns: 110px 1fr 50px; font-size: 0.7rem; }
  .bar-axis-track span:nth-child(2),
  .bar-axis-track span:nth-child(4) { display: none; }
  .bar-axis-track span:nth-child(3) { content: "2mo"; }
}

/* ================== TIMELINE ================== */
.timeline {
  margin: 36px 0 8px;
  position: relative;
  padding-left: 28px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--rule);
}

.tl-step {
  position: relative;
  padding: 10px 0 26px 22px;
}

.tl-dot {
  position: absolute;
  left: -24px;
  top: 18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-sm);
}

.tl-current .tl-dot {
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(200, 122, 58, 0.18);
}
.tl-current .tl-now { display: inline-block; }

/* ================== INTERNAL CLOCK "TODAY" INDICATOR ================== */
.bars { position: relative; }
.clock-today {
  position: absolute;
  top: 22px;
  bottom: 28px; /* leaves room for the bar-axis labels */
  width: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 200ms ease;
}
.clock-today.is-ready { opacity: 1; }
.clock-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--burgundy, #6b1f2a);
  border-radius: 2px;
  box-shadow: 0 0 0 3px rgba(107, 31, 42, 0.12);
}
[data-theme="dark"] .clock-today-line {
  background: var(--accent, #c87a3a);
  box-shadow: 0 0 0 3px rgba(200, 122, 58, 0.18);
}
.clock-today-label {
  position: absolute;
  top: -22px;
  left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--burgundy, #6b1f2a);
  background: var(--paper, #fbf7ef);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(107, 31, 42, 0.25);
}
[data-theme="dark"] .clock-today-label {
  color: var(--accent, #c87a3a);
  border-color: rgba(200, 122, 58, 0.35);
}
@media (max-width: 600px) {
  .clock-today-label { font-size: 0.65rem; padding: 1px 6px; }
}

.tl-when {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 6px;
}

.tl-now {
  display: none;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--accent);
  color: var(--paper);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.tl-body h4 {
  font-size: 1.18rem;
  margin: 0 0 6px;
  color: var(--ink);
}
.tl-body p {
  font-size: 0.97rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.6;
}

/* ================== FAQ ================== */
.faq {
  border-top: 1px solid var(--rule);
  margin-top: 12px;
}

.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 18px 4px;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.18rem;
  color: var(--ink);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--accent);
  transition: transform var(--t);
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }

.faq details p {
  margin: 14px 0 4px;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* ================== REF CARD (SIDS) ================== */
.ref-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 48px;
}

.ref-card-header {
  background: linear-gradient(135deg, var(--burgundy), var(--burgundy-soft));
  color: var(--paper);
  padding: 36px 36px 32px;
  text-align: center;
}
.ref-card-header h2 {
  color: var(--paper);
  font-size: 2rem;
  margin: 0 0 6px;
}
.ref-card-header p {
  margin: 0;
  opacity: 0.86;
  font-size: 1rem;
  font-style: italic;
  font-family: var(--serif);
}

.ref-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 720px) {
  .ref-grid { grid-template-columns: 1fr; }
}

.ref-col {
  padding: 32px 32px 28px;
}
.ref-do {
  background: var(--paper);
  border-right: 1px solid var(--rule);
}
.ref-avoid {
  background: var(--cream);
}
@media (max-width: 720px) {
  .ref-do { border-right: 0; border-bottom: 1px solid var(--rule); }
}

.ref-col-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--rule);
}
.ref-col-head h3 {
  margin: 0;
  font-size: 1.4rem;
}

.ref-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ref-do .ref-icon {
  background: var(--green);
  color: white;
}
.ref-do .ref-col-head h3 { color: var(--green); }
.ref-avoid .ref-icon {
  background: var(--red);
  color: white;
}
.ref-avoid .ref-col-head h3 { color: var(--red); }

.ref-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ref-list li {
  padding: 10px 0 10px 26px;
  position: relative;
  font-size: 0.97rem;
  color: var(--ink-soft);
  line-height: 1.55;
  border-bottom: 1px dashed var(--rule);
}
.ref-list li:last-child { border-bottom: 0; }
.ref-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 14px;
  height: 2px;
  background: var(--accent-soft);
  border-radius: 1px;
}

/* "If you remember nothing else" rule strip */
.ref-rules {
  background: var(--cream-deep);
  padding: 28px 32px 30px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.ref-rules h3 {
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-deep);
  margin: 0 0 18px;
  font-family: var(--sans);
  font-weight: 700;
}
.rule-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 600px) { .rule-row { grid-template-columns: 1fr; } }

.rule {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  text-align: left;
}
.rule-num {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--burgundy);
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}
.rule-text {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Why blocks */
.why-block { margin-top: 8px; }
.why-heading {
  font-size: 1.5rem;
  color: var(--burgundy);
  margin-bottom: 18px;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.why-item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
}
.why-item h4 {
  font-size: 1.05rem;
  margin: 0 0 8px;
  color: var(--ink);
}
.why-item p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* When to call */
.ref-emergency {
  margin-top: 32px;
  padding: 26px 28px;
  background: var(--rose-bg);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
}
.ref-emergency h3 {
  margin: 0 0 6px;
  color: var(--red);
  font-size: 1.2rem;
}
.ref-em-sub {
  font-size: 0.92rem;
  color: var(--ink-muted);
  margin: 0 0 12px;
  font-style: italic;
}
.ref-emergency ul {
  margin: 0;
  padding-left: 22px;
}
.ref-emergency li {
  margin-bottom: 8px;
  font-size: 0.96rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.sources {
  margin-top: 28px;
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-style: italic;
  padding-top: 16px;
  border-top: 1px dashed var(--rule);
}

/* ================== CLOSER ================== */
.closer {
  background: var(--ink);
  color: var(--cream);
  padding: 80px 24px;
  text-align: center;
}
[data-theme="dark"] .closer {
  background: var(--cream-deep);
}

.closer-inner {
  max-width: 720px;
  margin: 0 auto;
}
.closer h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  color: var(--cream);
  margin-bottom: 16px;
}
[data-theme="dark"] .closer h2 { color: var(--ink); }
.closer p {
  font-size: 1.05rem;
  color: rgba(245, 239, 228, 0.78);
  margin: 0;
  line-height: 1.65;
}
[data-theme="dark"] .closer p { color: var(--ink-soft); }

/* ================== FOOTER ================== */
.site-footer {
  background: var(--cream);
  padding: 36px 24px 48px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.footer-inner {
  max-width: var(--max-narrow);
  margin: 0 auto;
}
.site-footer p {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin: 0 0 6px;
  line-height: 1.6;
}
.site-footer .signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  margin-top: 8px;
}

/* ================== RESPONSIVE TWEAKS ================== */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero { padding: 60px 24px 50px; }
  .section { padding: 56px 24px; }
  /* Iter 6.32: align header gutter to body section gutter (24px) so the
     theme toggle and brand sit on the same vertical line as content edges.
     We deliberately do NOT set overflow:hidden here — the sync-popover and
     household-switcher-menu drop below the topbar and would be clipped.
     Instead, the chips below shrink to fit. */
  .topbar-inner { padding: 12px 24px; gap: 10px; }
  .brand-sub { display: none; }
  /* Iter 6.32a: prevent topbar utilities from overflowing on narrow phones.
     The cluster (household-switcher + caregiver-chip + sync-pill + theme-toggle)
     used to total wider than the available space at <=400px widths, pushing
     the theme toggle past the right gutter. Tighten gaps and let the chips
     shrink. The theme toggle is the highest-value-per-tap so we keep it the
     full 36px target; the sync pill compresses to a dot+label-less state when
     it must (handled in sync-pill rules below). */
  /* Iter 6.32b: hide the topbar theme toggle on mobile entirely. It's been
     relocated to Settings > Appearance, where it lives alongside the other
     appearance controls. Theme is a low-frequency toggle — it does not
     deserve real estate in the persistent topbar on phones, and on the
     widest phones it was pushing the rightmost chip past the gutter. */
  .theme-toggle { display: none; }
  /* Reset the prior shrink hacks so the chips render at their normal scale
     now that we've removed a competing element. */
  .header-utilities { gap: 10px; }
  .tab { padding: 14px 16px 12px; }
  .tab-num { display: none; }
  .ref-col { padding: 26px 24px; }
  .ref-card-header { padding: 28px 24px; }
}

/* ================== SUPINE SLEEP & THE AIRWAY ================== */

/* Anatomy figure (supine vs prone) */
.airway-figure {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 28px 22px;
  margin: 28px 0;
}
.airway-figure .chart-title.center { text-align: center; margin-bottom: 18px; }
.airway-diagram {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 6px;
}
.airway-panel {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius) - 4px);
  padding: 16px 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.airway-panel--good { border-top: 4px solid var(--sage); }
.airway-panel--bad  { border-top: 4px solid var(--burgundy); }
.airway-cap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.airway-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
}
.airway-tag--good {
  background: var(--sage-bg);
  color: #4f5d3e;
  border: 1px solid rgba(152, 168, 132, 0.5);
}
[data-theme="dark"] .airway-tag--good { color: var(--sage); }
.airway-tag--bad {
  background: rgba(107, 31, 42, 0.08);
  color: var(--burgundy);
  border: 1px solid rgba(107, 31, 42, 0.25);
}
[data-theme="dark"] .airway-tag--bad {
  background: rgba(214, 138, 146, 0.12);
  border-color: rgba(214, 138, 146, 0.3);
}
.airway-cap-text {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.airway-svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--paper);
  border-radius: 6px;
}
[data-theme="dark"] .airway-svg { opacity: 0.92; }

@media (max-width: 720px) {
  .airway-diagram { grid-template-columns: 1fr; gap: 18px; }
  .airway-figure { padding: 22px 18px 18px; }
}

/* Reflex sequence */
.reflex-sequence {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  margin: 24px auto 8px;
  max-width: 1000px;
}
.reflex-step {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.reflex-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--burgundy);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 4px;
}
[data-theme="dark"] .reflex-num { color: #1a1714; }
.reflex-step h4 {
  font-family: 'Fraunces', serif;
  font-size: 1.08rem;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
  line-height: 1.3;
}
.reflex-step p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.reflex-arrow {
  align-self: center;
  font-size: 1.6rem;
  color: var(--accent);
  font-weight: 300;
  user-select: none;
}

@media (max-width: 760px) {
  .reflex-sequence {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .reflex-arrow {
    transform: rotate(90deg);
    margin: 2px 0;
  }
}

/* Three pillars */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 24px auto 8px;
  max-width: 980px;
}
.pillar {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px 22px 20px;
  text-align: left;
}
.pillar-icon {
  font-size: 1.6rem;
  margin-bottom: 10px;
  line-height: 1;
}
.pillar h4 {
  font-family: 'Fraunces', serif;
  font-size: 1.08rem;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--burgundy);
  line-height: 1.3;
}
.pillar p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
@media (max-width: 760px) {
  .pillars { grid-template-columns: 1fr; gap: 14px; }
}

/* Do / Don't comparison cards */
.cmp-card--do   { border-top-color: var(--sage); }
.cmp-card--dont { border-top-color: var(--burgundy); }
.cmp-card--do .cmp-title   { color: #4f5d3e; }
[data-theme="dark"] .cmp-card--do .cmp-title { color: var(--sage); }
.cmp-card--dont .cmp-title { color: var(--burgundy); }
.cmp-emoji {
  font-size: 1.2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 700;
}
.cmp-card--do .cmp-emoji {
  background: var(--sage-bg);
  color: #4f5d3e;
}
[data-theme="dark"] .cmp-card--do .cmp-emoji { color: var(--sage); }
.cmp-card--dont .cmp-emoji {
  background: rgba(107, 31, 42, 0.1);
  color: var(--burgundy);
}
[data-theme="dark"] .cmp-card--dont .cmp-emoji {
  background: rgba(214, 138, 146, 0.14);
}

/* Warning callout variant */
.callout-warn {
  background: linear-gradient(180deg, rgba(200, 122, 58, 0.08), rgba(107, 31, 42, 0.06));
  border: 1px solid rgba(200, 122, 58, 0.35);
  border-left: 4px solid var(--burgundy);
}
[data-theme="dark"] .callout-warn {
  background: linear-gradient(180deg, rgba(232, 160, 112, 0.08), rgba(214, 138, 146, 0.06));
  border-color: rgba(232, 160, 112, 0.3);
  border-left-color: var(--burgundy);
}
.callout-warn .callout-body h4 { color: var(--burgundy); }
.warn-list {
  margin: 10px 0 0;
  padding-left: 20px;
  list-style: disc;
}
.warn-list li {
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.warn-list li strong { color: var(--ink); }
.warn-list li:last-child { margin-bottom: 0; }

/* Citation block */
.cite-block {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 36px 0 8px;
}
.cite-title {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--burgundy);
  letter-spacing: 0.01em;
}
.cite-list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.cite-list li {
  margin-bottom: 10px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cite-list li:last-child { margin-bottom: 0; }
.cite-list a {
  color: var(--burgundy);
  text-decoration: underline;
  text-decoration-color: rgba(107, 31, 42, 0.3);
  text-underline-offset: 2px;
}
.cite-list a:hover { text-decoration-color: var(--burgundy); }
.cite-list em { font-style: italic; color: var(--ink); }

/* ================== EPISODES PANEL ================== */

/* Hero variant — slightly warmer accent to distinguish from Sleep Guide */
.hero-episodes {
  background:
    radial-gradient(circle at 88% 25%, rgba(200, 122, 58, 0.08), transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
}

/* "What you see / hear / it doesn't mean" three-card grid */
.see-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 28px 0 8px;
}
.see-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
}
.see-card--reassure {
  background: var(--sage-bg);
  border-color: rgba(152, 168, 132, 0.45);
}
.see-icon {
  font-size: 1.55rem;
  line-height: 1;
  margin-bottom: 12px;
}
.see-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.12rem;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--burgundy);
  line-height: 1.3;
}
.see-card--reassure h3 { color: #4f5d3e; }
[data-theme="dark"] .see-card--reassure h3 { color: var(--sage); }
.see-card ul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.see-card li {
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 8px;
}
.see-card li:last-child { margin-bottom: 0; }
.see-card li strong { color: var(--ink); }

@media (max-width: 900px) {
  .see-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* =====================================================
   Feeding Guide panel
   ===================================================== */

/* Feeding band palette — five gentle steps from milk-cream → table-food sage */
:root {
  --feed-band-1: #f3e6d2;  /* exclusive milk — cream */
  --feed-band-2: #f0d5b4;  /* readiness — peach */
  --feed-band-3: #e8b487;  /* purées — accent-soft */
  --feed-band-4: #c4c8a0;  /* finger foods — olive */
  --feed-band-5: #98a884;  /* family textures — sage */
}
[data-theme="dark"] {
  --feed-band-1: #3a3024;
  --feed-band-2: #4a3624;
  --feed-band-3: #5a3e26;
  --feed-band-4: #4a4e36;
  --feed-band-5: #4f5a3f;
}

/* Hero variant — milk-warm gradient, distinct from sleep/episodes/SIDS heroes */
.hero-feeding {
  background: linear-gradient(135deg, var(--cream) 0%, #f0d5b4 60%, #e8b487 100%);
  border-bottom: 1px solid var(--cream-deep);
}
[data-theme="dark"] .hero-feeding {
  background: linear-gradient(135deg, var(--cream) 0%, #3a2a1d 55%, #4a3220 100%);
}

/* The progression chart text labels need to be readable on the bands */
.feed-band-labels text {
  font-weight: 500;
  fill: var(--ink-soft);
}
[data-theme="dark"] .feed-band-labels text {
  fill: var(--ink);
}

/* Stage cards: vertical stack, magazine-article width, so each stage reads as its own chapter */
.feed-stages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 32px auto 0;
  max-width: 720px;
}
.feed-stage {
  background: var(--cream);
  border: 1px solid var(--cream-deep);
  border-left: 4px solid var(--cream-deep);
  border-radius: 12px;
  padding: 26px 28px;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.feed-stage[data-feed-stage="exclusive"] { border-left-color: var(--feed-band-1); }
.feed-stage[data-feed-stage="readiness"] { border-left-color: var(--feed-band-2); }
.feed-stage[data-feed-stage="purees"]    { border-left-color: var(--feed-band-3); }
.feed-stage[data-feed-stage="finger"]    { border-left-color: var(--feed-band-4); }
.feed-stage[data-feed-stage="family"]    { border-left-color: var(--feed-band-5); }
.feed-stage h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  color: var(--accent-deep);
  margin: 6px 0 14px;
  line-height: 1.2;
}
.feed-stage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.feed-stage-when {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.feed-stage-now {
  display: none;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.feed-stage p {
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 12px;
}
.feed-stage-points {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.feed-stage-points li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  color: var(--ink-soft);
  line-height: 1.55;
  font-size: 15px;
}
.feed-stage-points li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--accent);
  font-weight: 700;
}
.feed-stage-note {
  font-style: italic;
  font-size: 14px;
  color: var(--ink-muted);
  border-left: 2px solid var(--sage);
  padding-left: 12px;
  margin-top: 12px;
}

/* Highlighted current stage */
.feed-stage.feed-current {
  border-color: var(--accent);
  border-left-color: var(--accent);
  border-left-width: 4px;
  box-shadow: 0 4px 24px rgba(200, 122, 58, 0.15);
  background: linear-gradient(180deg, var(--cream) 0%, #f7ebd6 100%);
}
[data-theme="dark"] .feed-stage.feed-current {
  background: linear-gradient(180deg, var(--cream) 0%, #2a2218 100%);
}
.feed-stage.feed-current .feed-stage-now {
  display: inline-block;
}

/* Paced bottle feeding grid */
.paced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 28px 0;
}
.paced-card {
  background: var(--cream);
  border: 1px solid var(--cream-deep);
  border-radius: 12px;
  padding: 22px;
  position: relative;
  padding-top: 56px;
}
.paced-num {
  position: absolute;
  top: 18px;
  left: 22px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.paced-card h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  color: var(--accent-deep);
  margin: 0 0 8px;
  line-height: 1.3;
}
.paced-card p {
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  font-size: 14.5px;
}

/* Hunger / fullness cue cards */
.cue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.cue-card {
  background: var(--cream);
  border: 1px solid var(--cream-deep);
  border-radius: 14px;
  padding: 24px;
  border-top: 4px solid var(--accent);
}
.cue-hungry { border-top-color: var(--sage); }
.cue-late   { border-top-color: var(--accent); }
.cue-full   { border-top-color: var(--accent-deep); }

.cue-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.cue-card h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  color: var(--ink);
  margin: 8px 0 14px;
  line-height: 1.3;
}
.cue-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.cue-card ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 7px;
  color: var(--ink-soft);
  line-height: 1.5;
  font-size: 14.5px;
}
.cue-card ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.cue-action {
  margin: 0;
  padding: 10px 12px;
  background: var(--sage-bg);
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

/* Milk handling table */
.milk-table {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border: 1px solid var(--cream-deep);
  border-radius: 12px;
  overflow: hidden;
  margin: 28px 0 24px;
  background: var(--cream);
}
.milk-row {
  display: contents;
}
.milk-row > div {
  padding: 16px 18px;
  border-bottom: 1px solid var(--cream-deep);
  color: var(--ink-soft);
  line-height: 1.5;
  font-size: 14.5px;
}
.milk-row.milk-head > div {
  background: var(--cream-deep);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.milk-row:last-child > div {
  border-bottom: none;
}
.milk-when {
  font-size: 12.5px;
  color: var(--ink-muted);
  font-style: italic;
}

/* Milk tips grid */
.milk-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.milk-tip {
  background: var(--cream);
  border: 1px solid var(--cream-deep);
  border-radius: 10px;
  padding: 18px;
}
.milk-tip h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  color: var(--accent-deep);
  margin: 0 0 6px;
}
.milk-tip p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* Mobile: collapse milk table into stacked cards —
   grid → block; each row becomes its own card with a header strip + two label-value pairs */
@media (max-width: 720px) {
  .milk-table {
    display: block;
  }
  .milk-row.milk-head {
    display: none;
  }
  .milk-row {
    display: block;
    border-bottom: 1px solid var(--cream-deep);
  }
  .milk-row:last-child {
    border-bottom: none;
  }
  .milk-row > div {
    display: block;
    padding: 8px 18px;
    border-bottom: none;
    font-size: 14.5px;
  }
  .milk-row > div:first-child {
    background: var(--cream-deep);
    padding: 12px 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--ink);
  }
  .milk-row > div:nth-child(2)::before {
    content: "Fresh: ";
    font-weight: 600;
    color: var(--ink);
  }
  .milk-row > div:nth-child(3) {
    padding-bottom: 14px;
  }
  .milk-row > div:nth-child(3)::before {
    content: "Thawed: ";
    font-weight: 600;
    color: var(--ink);
  }
  /* The leftover-row uses colspan via inline style; suppress the Thawed prefix and let the cell speak for itself */
  .milk-row > div[style*="span 2"]::before {
    content: "";
  }
  .milk-row > div[style*="span 2"] {
    padding-bottom: 14px;
  }
}

/* =====================================================
   VACCINATIONS PANEL
   ===================================================== */

/* Hero gradient — calm clinical sage→cream */
.hero-vaccines {
  background:
    linear-gradient(135deg, #e8eddf 0%, #f5efe4 45%, #fbf7ef 100%);
}
[data-theme="dark"] .hero-vaccines {
  background:
    linear-gradient(135deg, #2a3024 0%, #1f1c17 50%, #15110e 100%);
}

/* Status color tokens (palette-aware, light mode) */
:root {
  --vax-given: #5a7a4a;        /* sage green */
  --vax-given-bg: #e3ecd6;
  --vax-given-ring: #b6c89a;

  --vax-due: #c87a3a;          /* warm amber from existing accent */
  --vax-due-bg: #f7e6d2;
  --vax-due-ring: #e8b487;

  --vax-overdue: #a23a2a;      /* red */
  --vax-overdue-bg: #f3d8d2;
  --vax-overdue-ring: #d89a90;

  --vax-upcoming: #8a7a6a;     /* muted */
  --vax-upcoming-bg: #ece2d0;
  --vax-upcoming-ring: #cbbba2;

  --vax-current: #6b1f2a;      /* burgundy for "Usha is here" */
}
[data-theme="dark"] {
  --vax-given: #98c084;
  --vax-given-bg: #2e3a25;
  --vax-given-ring: #5a7a4a;

  --vax-due: #e8a070;
  --vax-due-bg: #3e2e1f;
  --vax-due-ring: #9a5828;

  --vax-overdue: #e88a78;
  --vax-overdue-bg: #3e2522;
  --vax-overdue-ring: #a23a2a;

  --vax-upcoming: #8a7a6a;
  --vax-upcoming-bg: #2a231d;
  --vax-upcoming-ring: #4a3c30;

  --vax-current: #d68a92;
}

/* ----- Summary stats ----- */
.vax-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.vax-stat {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  transition: transform var(--t), border-color var(--t);
}
.vax-stat:hover { transform: translateY(-1px); }
.vax-stat-num {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}
.vax-stat-label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.vax-stat-due { border-color: var(--vax-due-ring); background: var(--vax-due-bg); }
.vax-stat-due .vax-stat-num { color: var(--vax-due); }
.vax-stat-overdue { border-color: var(--vax-overdue-ring); background: var(--vax-overdue-bg); }
.vax-stat-overdue .vax-stat-num { color: var(--vax-overdue); }

.vax-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}
.vax-reset-btn {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.vax-reset-btn:hover {
  color: var(--vax-overdue);
  border-color: var(--vax-overdue-ring);
}

/* ----- Legend ----- */
.vax-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
}
.vax-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.vax-chip {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
}
.vax-chip-given    { color: var(--vax-given);    background: var(--vax-given);    border-color: var(--vax-given); }
.vax-chip-due      { color: var(--vax-due);      background: var(--vax-due-bg);   border-color: var(--vax-due); }
.vax-chip-overdue  { color: var(--vax-overdue);  background: var(--vax-overdue-bg); border-color: var(--vax-overdue); }
.vax-chip-upcoming { color: var(--vax-upcoming); background: var(--vax-upcoming-bg); border-color: var(--vax-upcoming); }
.vax-chip-current  { color: var(--vax-current);  background: var(--vax-current);  border-color: var(--vax-current); width: 4px; border-radius: 2px; height: 18px; }

/* ----- Timeline ----- */
.vax-timeline {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  /* Top padding must clear the "Usha (Xw)" today-label which sits at top:-22px
     above .vax-axis-track. With label height ~18px + 6px breathing room,
     we need ~46px above the axis track. */
  padding: 46px 20px 16px;
  margin-top: 8px;
  overflow-x: auto; /* horizontal scroll on small screens */
  /* Allow the today-label to render inside the rounded container. */
  overflow-y: visible;
}

.vax-axis {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: end;
  gap: 0;
  margin-bottom: 8px;
  position: relative;
}
.vax-axis-spacer { /* empty cell aligning with row labels */ }

.vax-axis-track {
  position: relative;
  height: 30px;
  border-bottom: 1px dashed var(--rule);
}

.vax-ticks {
  position: relative;
  height: 100%;
}
.vax-tick {
  position: absolute;
  bottom: 4px;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}
.vax-tick::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 1px;
  height: 5px;
  background: var(--rule);
  transform: translateX(-50%);
}

/* "Today" line spanning the whole timeline */
.vax-today-line {
  position: absolute;
  top: -8px;
  bottom: 0;
  width: 2px;
  background: var(--vax-current);
  z-index: 5;
  transform: translateX(-1px);
  pointer-events: none;
  transition: left 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.vax-today-label {
  position: absolute;
  top: -22px;
  left: 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--vax-current);
  background: var(--paper);
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid var(--vax-current);
  white-space: nowrap;
}
.vax-today-flip .vax-today-label {
  left: auto;
  right: 6px;
}

/* Vaccine rows */
.vax-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  position: relative;
}

/* Today line continues through rows */
.vax-rows::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.vax-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 0;
  min-height: 38px;
}

.vax-row-label {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-soft);
  padding-right: 14px;
  line-height: 1.25;
}

.vax-row-track {
  position: relative;
  height: 38px;
  /* horizontal guide rail */
  background:
    linear-gradient(to right, transparent 0%, var(--rule-soft) 5%, var(--rule-soft) 95%, transparent 100%);
  background-size: 100% 1px;
  background-position: 0 50%;
  background-repeat: no-repeat;
}

.vax-row-connector {
  position: absolute;
  top: 50%;
  height: 2px;
  background: var(--rule);
  transform: translateY(-50%);
  border-radius: 1px;
  z-index: 1;
}

/* Inherit today line into each row track */
.vax-row-track::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--vax-current);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
  /* Will be positioned via CSS variable set per-row, defaulting to invisible */
  left: var(--vax-today-x, -100%);
}

/* Dose dots */
.vax-dot {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--vax-upcoming-ring);
  background: var(--vax-upcoming-bg);
  cursor: pointer;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  color: var(--ink-muted);
  transition: transform var(--t), background-color var(--t), border-color var(--t), box-shadow var(--t);
  z-index: 2;
}
/* Invisible touch target extension for easier tapping on mobile */
.vax-dot::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}
.vax-dot:hover {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: var(--shadow-sm);
}
.vax-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.vax-dot::after {
  /* checkmark for given */
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(-45deg) translate(1px, -2px);
  opacity: 0;
  transition: opacity var(--t);
}
.vax-dot-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-muted);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.02em;
}

/* States */
.vax-dot-given {
  background: var(--vax-given);
  border-color: var(--vax-given);
}
.vax-dot-given::after { opacity: 1; }
.vax-dot-given .vax-dot-label { color: var(--vax-given); font-weight: 600; }

.vax-dot-due {
  background: var(--vax-due-bg);
  border-color: var(--vax-due);
  animation: vax-pulse 2.4s ease-in-out infinite;
}
.vax-dot-due .vax-dot-label { color: var(--vax-due); font-weight: 600; }

@keyframes vax-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 122, 58, 0.32); }
  50%      { box-shadow: 0 0 0 6px rgba(200, 122, 58, 0); }
}

.vax-dot-overdue {
  background: var(--vax-overdue-bg);
  border-color: var(--vax-overdue);
}
.vax-dot-overdue .vax-dot-label { color: var(--vax-overdue); font-weight: 600; }

.vax-dot-upcoming {
  background: var(--vax-upcoming-bg);
  border-color: var(--vax-upcoming-ring);
}

/* Tip below timeline */
.vax-tip {
  margin-top: 24px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  background: var(--rule-soft);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}

/* ----- Cards ----- */
.vax-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.vax-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vax-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.vax-card-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}

.vax-card-badge {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.vax-card-badge-given     { background: var(--vax-given);    color: var(--paper); }
.vax-card-badge-due       { background: var(--vax-due);      color: var(--paper); }
.vax-card-badge-overdue   { background: var(--vax-overdue);  color: var(--paper); }
.vax-card-badge-progress  { background: var(--vax-upcoming-bg); color: var(--ink-soft); border: 1px solid var(--vax-upcoming-ring); }
.vax-card-badge-upcoming  { background: var(--rule-soft);    color: var(--ink-muted); }

.vax-card-protects {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

.vax-card-progress {
  position: relative;
  height: 8px;
  background: var(--rule-soft);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.vax-card-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(to right, var(--vax-given), var(--sage));
  border-radius: 4px;
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vax-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.vax-card-completion {
  font-weight: 600;
  color: var(--ink-soft);
}
.vax-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.vax-card-chip {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 8px;
  background: var(--rule-soft);
  color: var(--ink-muted);
  border: 1px solid transparent;
  letter-spacing: 0.02em;
}
.vax-card-chip-given    { background: var(--vax-given);    color: var(--paper); }
.vax-card-chip-due      { background: var(--vax-due-bg);   color: var(--vax-due);     border-color: var(--vax-due-ring); }
.vax-card-chip-overdue  { background: var(--vax-overdue-bg); color: var(--vax-overdue); border-color: var(--vax-overdue-ring); }
.vax-card-chip-upcoming { background: var(--vax-upcoming-bg); color: var(--ink-muted); }

/* ----- Reactions section ----- */
.vax-reactions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.vax-react {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--vax-given);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.vax-react h4 {
  font-family: var(--serif);
  font-size: 16px;
  margin: 0 0 8px;
  color: var(--ink);
}
.vax-react ul {
  margin: 0 0 8px;
  padding-left: 20px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.vax-react ul li { margin-bottom: 4px; }
.vax-react p {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
}
.vax-react-normal { border-left-color: var(--vax-given); }
.vax-react-call { border-left-color: var(--vax-due); }
.vax-react-911 { border-left-color: var(--vax-overdue); }

.vax-source {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 18px;
  text-align: center;
  line-height: 1.6;
}
.vax-source a { color: var(--accent-deep); text-decoration: underline; }

/* ----- Mobile adjustments ----- */
@media (max-width: 720px) {
  .vax-summary { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .vax-stat { padding: 14px 10px; }
  .vax-stat-num { font-size: 28px; }

  .vax-timeline { padding: 42px 12px 14px; }

  .vax-axis { grid-template-columns: 110px 1fr; }
  .vax-row { grid-template-columns: 110px 1fr; min-height: 50px; }
  .vax-row-label { font-size: 12px; padding-right: 8px; line-height: 1.2; }

  .vax-dot { width: 22px; height: 22px; }
  .vax-dot::after { width: 8px; height: 5px; transform: rotate(-45deg) translate(1px, -1px); }
  .vax-dot-label { font-size: 9px; top: calc(100% + 3px); }

  /* Stagger labels: every odd-positioned dose label goes above to avoid overlap */
  .vax-row .vax-dot:nth-child(odd) .vax-dot-label {
    top: auto;
    bottom: calc(100% + 3px);
  }
  /* (The connector is the first child, so the actual dots start at index 2 — the
     `odd` selector here matches the 1st, 3rd, 5th DOM children, which gives us
     a clean alternating pattern across the dots themselves.) */

  .vax-tick { font-size: 10px; }
  /* Hide every other tick on mobile to avoid clutter */
  .vax-tick:nth-child(even) { display: none; }

  .vax-legend { gap: 10px; font-size: 12px; }
}

@media (max-width: 480px) {
  .vax-axis { grid-template-columns: 88px 1fr; }
  .vax-row { grid-template-columns: 88px 1fr; min-height: 54px; }
  .vax-row-label { font-size: 11px; }
}
/* =====================================================
   GROWTH & MILESTONES — STYLES
===================================================== */

/* Hero */
.hero-growth {
  background: linear-gradient(135deg, #f8efe2 0%, #efe2cc 100%);
}
[data-theme="dark"] .hero-growth {
  background: linear-gradient(135deg, #2b231b 0%, #211a14 100%);
}

/* ---------- Metric tabs ---------- */
.growth-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 20px;
  flex-wrap: wrap;
}
.growth-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.growth-unit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: var(--paper, #fdfaf3);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
[data-theme="dark"] .growth-unit-toggle {
  background: #211a14;
}
.growth-unit-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft, var(--ink));
  padding: 0 8px 0 10px;
  opacity: 0.7;
}
.unit-btn {
  appearance: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.unit-btn:hover {
  color: var(--accent-deep);
}
.unit-btn[aria-pressed="true"] {
  background: var(--burgundy);
  color: var(--paper, #fdfaf3);
}
.growth-value-inputs {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.growth-value-inputs .gvi-pair {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.growth-value-inputs input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: var(--paper, #fdfaf3);
  color: var(--ink);
  transition: border-color 0.15s ease;
}
[data-theme="dark"] .growth-value-inputs input {
  background: #211a14;
}
.growth-value-inputs input:focus {
  outline: none;
  border-color: var(--accent);
}
.gvi-suffix {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft, var(--ink));
  opacity: 0.75;
}
.growth-tab {
  appearance: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.growth-tab:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}
.growth-tab.active {
  background: var(--burgundy);
  color: var(--paper, #fdfaf3);
  border-color: var(--burgundy);
}

/* ---------- Chart ---------- */
.growth-chart-wrap {
  background: var(--paper, #fdfaf3);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px 12px 12px;
  position: relative;
}
[data-theme="dark"] .growth-chart-wrap {
  background: #211a14;
}
.growth-chart {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  font-family: 'Inter', sans-serif;
}

.gc-bg {
  fill: #faf6ed;
}
[data-theme="dark"] .gc-bg {
  fill: #1a140f;
}

.gc-band {
  fill: var(--accent-soft);
  fill-opacity: 0.18;
}
[data-theme="dark"] .gc-band {
  fill: var(--accent);
  fill-opacity: 0.10;
}

.gc-grid {
  stroke: var(--rule);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.6;
}
.gc-grid-v {
  opacity: 0.35;
}

.gc-axis-label {
  font-size: 11px;
  fill: var(--muted, #7a6f60);
  font-family: 'Inter', sans-serif;
}
.gc-axis-title {
  font-size: 12px;
  font-weight: 600;
  fill: var(--ink);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.gc-pctl {
  fill: none;
  stroke-width: 1.4;
}
.gc-pctl-p-edge   { stroke: var(--accent-deep); stroke-dasharray: 4 3; opacity: 0.75; }
.gc-pctl-p-mid    { stroke: var(--accent); stroke-dasharray: 5 4; opacity: 0.65; }
.gc-pctl-p-median { stroke: var(--burgundy); stroke-width: 2; opacity: 0.92; }

.gc-pctl-label {
  font-size: 10px;
  font-weight: 600;
  fill: var(--muted, #7a6f60);
  font-family: 'Inter', sans-serif;
}

.gc-line {
  fill: none;
  stroke: var(--burgundy);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gc-pt {
  fill: var(--burgundy);
  stroke: var(--paper, #fdfaf3);
  stroke-width: 2;
}

.gc-today {
  stroke: var(--burgundy);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
  opacity: 0.6;
}
.gc-today-label {
  font-size: 11px;
  font-weight: 600;
  fill: var(--burgundy);
  font-family: 'Inter', sans-serif;
}

/* Legend */
.growth-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 12px;
  padding: 0 6px 4px;
  font-size: 0.85rem;
  color: var(--muted, #7a6f60);
}
.gc-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gc-leg-swatch {
  display: inline-block;
  width: 22px;
  height: 4px;
  border-radius: 2px;
}
.gc-leg-swatch.sw-edge   { background: var(--accent-deep); opacity: 0.75; }
.gc-leg-swatch.sw-mid    { background: var(--accent);      opacity: 0.65; }
.gc-leg-swatch.sw-median { background: var(--burgundy); height: 5px; }
.gc-leg-swatch.sw-pt     { background: var(--burgundy); width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--paper, #fdfaf3); box-shadow: 0 0 0 1px var(--burgundy); }

/* ---------- Current measurement card ---------- */
.growth-current {
  margin: 24px 0 20px;
}
.growth-current-empty {
  padding: 22px 24px;
  background: var(--paper, #fdfaf3);
  border: 1px dashed var(--rule);
  border-radius: 12px;
  color: var(--muted, #7a6f60);
  font-size: 0.95rem;
  text-align: center;
}
[data-theme="dark"] .growth-current-empty {
  background: #211a14;
}
.growth-current-card {
  background: var(--paper, #fdfaf3);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 22px 26px;
}
[data-theme="dark"] .growth-current-card {
  background: #211a14;
}
.growth-current-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.growth-current-block {
  flex: 1 1 200px;
  min-width: 0;
}
.growth-current-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #7a6f60);
  margin-bottom: 6px;
  font-weight: 600;
}
.growth-current-value {
  font-family: 'Fraunces', serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.growth-current-pct { color: var(--burgundy); }
.growth-current-unit {
  font-size: 1.1rem;
  color: var(--muted, #7a6f60);
  font-weight: 400;
}
.growth-current-alt {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--muted, #7a6f60);
}
.growth-current-trend {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
  color: var(--ink);
}

/* ---------- Add measurement form ---------- */
.growth-form {
  background: var(--paper, #fdfaf3);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 18px;
}
[data-theme="dark"] .growth-form {
  background: #211a14;
}
.growth-form-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.growth-field {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.growth-field-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #7a6f60);
  font-weight: 600;
}
.growth-field input {
  appearance: none;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 0.15s ease;
  width: 100%;
}
.growth-field input:focus {
  outline: none;
  border-color: var(--accent);
}
.growth-add-btn {
  appearance: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paper, #fdfaf3);
  background: var(--burgundy);
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.growth-add-btn:hover {
  background: var(--burgundy-soft);
}
.growth-form-help {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--muted, #7a6f60);
}

/* ---------- History list ---------- */
.growth-history {
  margin-bottom: 14px;
}
.growth-history-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #7a6f60);
  font-weight: 600;
  margin: 0 0 10px;
}
.growth-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.growth-history-row {
  display: grid;
  grid-template-columns: 1.4fr 2fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.92rem;
}
.growth-history-row:last-child {
  border-bottom: none;
}
.ghr-date { color: var(--muted, #7a6f60); }
.ghr-val  { color: var(--ink); font-weight: 500; }
.ghr-alt  { color: var(--muted, #7a6f60); font-weight: 400; }
.ghr-pct  {
  color: var(--burgundy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: right;
}
.ghr-del {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--muted, #7a6f60);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ghr-del:hover {
  border-color: var(--burgundy);
  color: var(--burgundy);
}

.growth-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

/* ---------- Milestones ---------- */
.ms-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0 28px;
}
@media (max-width: 600px) {
  .ms-summary { grid-template-columns: 1fr; }
}

.ms-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.ms-group {
  background: var(--paper, #fdfaf3);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  transition: border-left-color 0.2s ease;
}
[data-theme="dark"] .ms-group {
  background: #211a14;
}
.ms-group-past    { border-left-color: var(--vax-given, #5a7a4a); }
.ms-group-current { border-left-color: var(--burgundy); }
.ms-group-upcoming { border-left-color: var(--rule); }

.ms-group-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  cursor: pointer;
  list-style: none;
  position: relative;
  user-select: none;
}
.ms-group-summary::-webkit-details-marker { display: none; }
.ms-group-summary::before {
  content: "▸";
  font-size: 0.7rem;
  color: var(--muted, #7a6f60);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.ms-group[open] > .ms-group-summary::before {
  transform: rotate(90deg);
}
.ms-group-age {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  flex-shrink: 0;
}
.ms-group-status {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.ms-group-status-past    { background: var(--vax-given-bg, #e3ecd6); color: var(--vax-given, #5a7a4a); }
.ms-group-status-current { background: rgba(107, 31, 42, 0.10); color: var(--burgundy); }
.ms-group-status-upcoming { background: var(--cream); color: var(--muted, #7a6f60); border: 1px solid var(--rule); }

.ms-group-progress {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
.ms-group-progress-bar {
  display: inline-block;
  width: 100px;
  height: 6px;
  background: var(--rule);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.ms-group-progress-fill {
  display: block;
  height: 100%;
  background: var(--vax-given, #5a7a4a);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.ms-group-progress-text {
  font-size: 0.85rem;
  color: var(--muted, #7a6f60);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.ms-cat {
  padding: 4px 22px 18px;
  border-top: 1px solid var(--rule);
}
.ms-cat:first-of-type { border-top: 1px solid var(--rule); }
.ms-cat-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
  font-weight: 700;
  margin: 14px 0 8px;
}

.ms-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ms-item {
  margin: 0;
  padding: 0;
}
.ms-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  appearance: none;
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: background 0.12s ease;
}
.ms-toggle:hover {
  background: var(--cream);
}
.ms-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--rule);
  border-radius: 5px;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ms-item-checked .ms-check {
  background: var(--vax-given, #5a7a4a);
  border-color: var(--vax-given, #5a7a4a);
}
.ms-item-checked .ms-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 11px;
  border: solid var(--paper, #fdfaf3);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ms-text {
  flex: 1;
  line-height: 1.45;
}
.ms-item-checked .ms-text {
  color: var(--muted, #7a6f60);
  text-decoration: line-through;
  text-decoration-color: var(--vax-given, #5a7a4a);
  text-decoration-thickness: 1.5px;
}
.ms-when {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--vax-given, #5a7a4a);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- Concern flags grid ---------- */
.ms-flags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 20px 0 18px;
}
.ms-flag-card {
  background: var(--paper, #fdfaf3);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--burgundy);
  border-radius: 10px;
  padding: 20px 22px;
}
[data-theme="dark"] .ms-flag-card {
  background: #211a14;
}
.ms-flag-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--burgundy);
  margin: 0 0 8px;
}
.ms-flag-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 640px) {
  .growth-chart { max-height: 360px; }
  .gc-axis-label { font-size: 12px; }
  .growth-form-row { flex-direction: column; align-items: stretch; }
  .growth-add-btn { width: 100%; padding: 12px 20px; }
  .growth-history-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date pct"
      "val  del";
    row-gap: 4px;
  }
  .ghr-date { grid-area: date; }
  .ghr-val  { grid-area: val; }
  .ghr-pct  { grid-area: pct; }
  .ghr-del  { grid-area: del; justify-self: end; }
  .ms-group-summary {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .ms-group-progress {
    margin-left: 0;
    width: 100%;
  }
  .ms-group-progress-bar { flex: 1; width: auto; }
  .ms-when { font-size: 0.72rem; }
  .growth-current-row { gap: 18px; }
  .growth-current-value { font-size: 1.7rem; }
}

/* ================== SYNC INDICATOR ================== */
.header-utilities {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 9px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--cream);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, #6a6256);
  white-space: nowrap;
  transition: opacity 200ms ease, color 200ms ease, border-color 200ms ease;
}
.sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b0a89a;
  flex: none;
  position: relative;
}
.sync-pill[data-state="connecting"] .sync-dot {
  background: #c87a3a;
  animation: sync-pulse 1.2s ease-in-out infinite;
}
.sync-pill[data-state="synced"] .sync-dot {
  background: var(--vax-given, #5a7a4a);
}
.sync-pill[data-state="syncing"] .sync-dot {
  background: #c87a3a;
  animation: sync-pulse 0.9s ease-in-out infinite;
}
.sync-pill[data-state="offline"] .sync-dot {
  background: #b07060;
}
.sync-pill[data-state="offline"] {
  color: #b07060;
  border-color: #d8b8ae;
}
@keyframes sync-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.78); }
}

/* Hide sync pill text on small screens but keep the dot */
@media (max-width: 540px) {
  .sync-label { display: none; }
  .sync-pill {
    padding: 6px;
    width: 26px;
    height: 26px;
    justify-content: center;
    gap: 0;
  }
}

/* ====================== ACTIVITIES & FIRSTS ====================== */

/* --- Timeline of unlocks --- */
.act-timeline-wrap {
  margin-top: 1.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}
.act-timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 0;
  position: relative;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 12px;
  overflow: hidden;
}
.act-tl-col {
  padding: 1.1rem 1rem 1.25rem;
  border-right: 1px solid var(--rule-soft);
  position: relative;
  min-height: 220px;
}
.act-tl-col:last-child { border-right: none; }
.act-tl-col.is-current {
  background: linear-gradient(to bottom, rgba(200, 122, 58, 0.08), transparent 70%);
  border-right: 1px solid var(--accent-soft);
  border-left: 2px solid var(--accent);
}
.act-tl-col.is-current + .act-tl-col { border-left: none; }
.act-tl-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px dashed var(--rule);
}
.act-tl-bucket {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.act-tl-now {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
[data-theme="dark"] .act-tl-now { color: var(--accent); }

.act-tl-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.act-tl-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: start;
  column-gap: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--ink);
}
.act-tl-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 0.45em;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--paper);
  flex: 0 0 auto;
}
.act-tl-upcoming .act-tl-dot {
  background: transparent;
  border: 1.5px solid var(--rule);
  box-shadow: none;
}
.act-tl-upcoming .act-tl-label { color: var(--ink-muted); }
.act-tl-unlocked.is-first-done .act-tl-dot { background: var(--vax-given); }
.act-tl-label { word-wrap: break-word; }
.act-tl-first {
  display: block;
  font-size: 0.72rem;
  color: var(--vax-given);
  margin-top: 0.1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
[data-theme="dark"] .act-tl-first { color: #aac896; }
.act-tl-empty { color: var(--ink-muted); font-style: italic; font-size: 0.85rem; }

@media (max-width: 900px) {
  .act-timeline { grid-template-columns: repeat(6, minmax(190px, 1fr)); }
}
@media (max-width: 640px) {
  .act-timeline-wrap { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
}

.act-disclaimer {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-style: italic;
  line-height: 1.55;
  max-width: 720px;
}

/* --- Category cards grid --- */
.act-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1.25rem;
}
.act-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.35rem 1.4rem 1.5rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.act-card:hover { border-color: var(--accent-soft); }
.act-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--rule-soft);
}
.act-card-title {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.act-card-count {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  white-space: nowrap;
}
.act-card-blurb {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0.5rem 0 0.85rem;
}
.act-card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }

.act-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--rule-soft);
  align-items: start;
}
.act-row:last-child { border-bottom: none; }

.act-mark {
  width: 24px;
  height: 24px;
  margin-top: 0.1rem;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 150ms ease, background 150ms ease;
}
.act-mark:hover { border-color: var(--accent); }
.act-mark .act-check {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: transparent;
  position: relative;
}
.act-mark[aria-pressed="true"] {
  background: var(--vax-given);
  border-color: var(--vax-given);
}
.act-mark[aria-pressed="true"] .act-check::before {
  content: '';
  position: absolute;
  left: 1px; top: 5px;
  width: 4px; height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.act-mark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.act-body { min-width: 0; }
.act-headline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}
.act-label {
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  flex: 1 1 auto;
}
.act-upcoming .act-label { color: var(--ink-muted); }
.act-pill {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
  flex: 0 0 auto;
}
.act-pill-unlocked {
  background: rgba(90, 122, 74, 0.12);
  color: var(--vax-given);
  border-color: rgba(90, 122, 74, 0.3);
}
.act-pill-upcoming {
  background: transparent;
  color: var(--ink-muted);
  border-color: var(--rule);
}
[data-theme="dark"] .act-pill-unlocked {
  color: #aac896;
  background: rgba(170, 200, 150, 0.1);
  border-color: rgba(170, 200, 150, 0.3);
}

.act-note {
  margin-top: 0.4rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.act-upcoming .act-note { color: var(--ink-muted); }

.act-first-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--vax-given);
  font-weight: 600;
  letter-spacing: 0.01em;
}
[data-theme="dark"] .act-first-line { color: #aac896; }
.act-first-star { font-size: 0.85rem; }
.act-first-clear {
  margin-left: 0.3rem;
  font-size: 0.7rem;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
}
.act-first-clear:hover { color: var(--burgundy); }

.act-actions { margin-top: 1.4rem; text-align: center; }

@media (max-width: 540px) {
  .act-card { padding: 1.1rem 1rem 1.25rem; }
  .act-card-head { flex-wrap: wrap; }
  .act-grid { grid-template-columns: 1fr; }
  .act-headline { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .act-pill { align-self: flex-start; }
}

/* ============================================================
   ALLERGY PREVENTION  &  ALLERGEN INTRODUCTION TRACKER
   ============================================================ */

/* ---- Four pillars ---------------------------------------- */

.allergy-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.allergy-pillar {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem 1.3rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.allergy-pillar:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--accent-soft);
}

.allergy-pillar-num {
  display: inline-block;
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 0.55rem;
}

.allergy-pillar h3 {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.5rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.allergy-pillar-lead {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 0.85rem;
}

.allergy-pillar-list {
  margin: 0;
  padding-left: 1.05rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.allergy-pillar-list li {
  margin-bottom: 0.4rem;
}
.allergy-pillar-list li:last-child { margin-bottom: 0; }
.allergy-pillar-list li::marker { color: var(--accent); }

[data-theme="dark"] .allergy-pillar {
  background: var(--cream-deep);
  border-color: var(--rule);
}
[data-theme="dark"] .allergy-pillar:hover {
  border-color: var(--accent);
}

/* ---- Allergen tracker meta row --------------------------- */

.allergen-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.4rem 0 1rem;
  padding: 0.7rem 0.95rem;
  background: var(--cream-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}

.allergen-progress {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.allergen-reset {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.allergen-reset:hover {
  color: var(--burgundy);
  border-color: var(--burgundy);
  background: var(--rose-bg);
}
[data-theme="dark"] .allergen-reset:hover {
  background: rgba(214, 138, 146, 0.12);
}

/* ---- Allergen grid --------------------------------------- */

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

.allergen-card {
  position: relative;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.95rem 1rem 1rem;
  font-family: var(--sans);
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
  box-shadow: var(--shadow-sm);
}
.allergen-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.allergen-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Priority accent on the left edge */
.allergen-priority-1 { border-left-color: var(--accent); }
.allergen-priority-2 { border-left-color: var(--accent-soft); }
.allergen-priority-3 { border-left-color: var(--rule); }

.allergen-card-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.4rem;
}

.allergen-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--rule);
  background: transparent;
  position: relative;
  transition: background var(--t), border-color var(--t);
}
.allergen-check::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background-image: none;
  transition: background-image var(--t);
}

.allergen-name {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.allergen-how {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.allergen-date {
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.005em;
}
.allergen-date strong {
  color: var(--vax-given);
  font-weight: 600;
}
.allergen-date a {
  margin-left: 0.4rem;
  color: var(--ink-muted);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
  font-size: 0.74rem;
}
.allergen-date a:hover { color: var(--burgundy); }

.allergen-date-empty {
  color: var(--ink-muted);
  font-style: italic;
}

/* Introduced state — sage green */
.allergen-card.is-introduced {
  background: var(--vax-given-bg);
  border-color: var(--vax-given-ring);
  border-left-color: var(--vax-given);
}
.allergen-card.is-introduced .allergen-check {
  background: var(--vax-given);
  border-color: var(--vax-given);
}
.allergen-card.is-introduced .allergen-check::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23fbf7ef' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='4,9.5 7.5,13 14,5.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.allergen-card.is-introduced .allergen-name { color: var(--ink); }

[data-theme="dark"] .allergen-card {
  background: var(--cream-deep);
}
[data-theme="dark"] .allergen-card.is-introduced {
  background: var(--vax-given-bg);
  border-color: var(--vax-given);
}
[data-theme="dark"] .allergen-card.is-introduced .allergen-check::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%2315110e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='4,9.5 7.5,13 14,5.5'/></svg>");
}

/* ---- Footer source line ---------------------------------- */

.allergen-foot {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
  line-height: 1.55;
}
.allergen-foot a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
}
.allergen-foot a:hover { color: var(--accent); }

/* ---- Responsive ------------------------------------------ */

@media (max-width: 880px) {
  .allergen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .allergy-pillars { grid-template-columns: 1fr; gap: 0.85rem; }
  .allergy-pillar { padding: 1.3rem 1.1rem 1.1rem; }
  .allergen-grid { grid-template-columns: 1fr; }
  .allergen-meta { flex-direction: column; align-items: stretch; text-align: left; }
  .allergen-reset { align-self: flex-start; }
}

/* Hero variant — allergy prevention: cream → soft sage → blush, evokes skin/microbiome */
.hero-allergy {
  background:
    linear-gradient(135deg, var(--cream) 0%, #e3ecd6 50%, #f3e6e2 100%);
  border-bottom: 1px solid var(--cream-deep);
}
[data-theme="dark"] .hero-allergy {
  background:
    linear-gradient(135deg, var(--cream) 0%, #2a3024 50%, #3a2226 100%);
}

/* ============================================================
   Active vs. Quiet sleep card (Safe Sleep & SIDS panel)
   ============================================================ */
.sleep-states {
  margin: 48px 0 8px;
  padding: 36px 32px 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
}
.sleep-states-head {
  margin-bottom: 24px;
}
.sleep-states-head h3 {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.55rem;
  line-height: 1.25;
  margin: 6px 0 12px;
  color: var(--ink);
}
.sleep-states-lead {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  max-width: 68ch;
}

/* Two-column comparison */
.sleep-states-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 24px 0;
}
.sleep-state {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px 22px 18px;
  position: relative;
}
.sleep-state-active {
  border-left: 4px solid var(--accent-deep);
}
.sleep-state-quiet {
  border-left: 4px solid var(--sage);
}
.sleep-state-head {
  margin-bottom: 12px;
}
.sleep-state-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.sleep-state-active .sleep-state-tag { color: var(--accent-deep); }
.sleep-state-quiet  .sleep-state-tag { color: var(--sage); }
.sleep-state h4 {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}
.sleep-state ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}
.sleep-state ul li { margin-bottom: 8px; }
.sleep-state ul li:last-child { margin-bottom: 0; }

/* Pause panel — emphasized */
.sleep-pause {
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-deep) 100%);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--burgundy);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 18px 0;
}
.sleep-pause h4 {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.1rem;
  margin: 0 0 8px;
  color: var(--burgundy);
}
.sleep-pause p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* When-to-intervene + age-arc share a structure */
.sleep-when, .sleep-arc {
  margin: 18px 0;
  padding: 18px 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.sleep-when h4, .sleep-arc h4 {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.08rem;
  margin: 0 0 10px;
  color: var(--ink);
}
.sleep-when ul, .sleep-arc-list {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}
.sleep-when ul li, .sleep-arc-list li { margin-bottom: 7px; }
.sleep-when ul li:last-child, .sleep-arc-list li:last-child { margin-bottom: 0; }

/* Caregiver-protection callout sits below */
.sleep-states .callout { margin-top: 18px; }

/* Sources line — slightly tighter */
.sleep-states .sources {
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.55;
}

/* Mobile */
@media (max-width: 720px) {
  .sleep-states {
    padding: 26px 20px;
    margin: 36px 0 8px;
  }
  .sleep-states-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .sleep-state, .sleep-pause, .sleep-when, .sleep-arc {
    padding: 18px;
  }
  .sleep-states-head h3 { font-size: 1.35rem; }
}

/* Dark mode tweaks */
[data-theme="dark"] .sleep-state {
  background: var(--cream-deep);
}
[data-theme="dark"] .sleep-pause {
  background: linear-gradient(135deg, var(--cream-deep) 0%, #2b231b 100%);
}

/* ============================================================
   Sleep architecture timeline (Active vs. Quiet sleep card)
   ============================================================ */
:root {
  /* From peak active-sleep (orange) → organized NREM (sage). */
  --sleep-band-1: #f3d9c2;  /* newborn — warm cream-orange */
  --sleep-band-2: #ecd6bf;  /* resolving — softer peach */
  --sleep-band-3: #d8d9b8;  /* maturing — sage-cream */
  --sleep-band-4: #c5d2b3;  /* organized — sage */
}
[data-theme="dark"] {
  --sleep-band-1: #4a3424;
  --sleep-band-2: #443322;
  --sleep-band-3: #3a3a26;
  --sleep-band-4: #2f3a26;
}

.sleep-arc-sub {
  margin: -4px 0 14px;
  color: var(--ink-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.sleep-arc-chart {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 18px 16px 12px;
  margin: 8px 0 14px;
}
[data-theme="dark"] .sleep-arc-chart {
  background: var(--cream-deep);
}
.sleep-arc-chart .chart {
  width: 100%;
  height: auto;
  display: block;
}

.sleep-arc .chart-caption {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Current-stage highlight in the descriptive list */
.sleep-arc-list li[data-sleep-stage] {
  position: relative;
  padding: 6px 8px 6px 10px;
  margin: 0 -8px 7px -8px;
  border-radius: 8px;
  list-style-position: outside;
  margin-left: 10px;
  transition: background 0.2s ease, color 0.2s ease;
}
.sleep-arc-list li.sleep-current {
  background: var(--sage-bg);
  color: var(--ink);
  font-weight: 500;
}
[data-theme="dark"] .sleep-arc-list li.sleep-current {
  background: rgba(174, 187, 150, 0.12);
}
.sleep-arc-list li.sleep-current::marker {
  color: var(--burgundy);
}

/* Mobile: shrink chart padding */
@media (max-width: 720px) {
  .sleep-arc-chart {
    padding: 12px 8px 8px;
  }
}

/* ============================================================
   Decoding Usha's cries (Witching Hour panel)
   ============================================================ */

/* Subheads inside the card */
.cry-card .cry-subhead {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.18rem;
  margin: 28px 0 6px;
  color: var(--ink);
}
.cry-card .cry-subhead-sub {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 68ch;
}

/* Acoustic spectrum strip */
.cry-spectrum {
  margin: 12px 0 8px;
}
.cry-spectrum-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.cry-spectrum-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.cry-band-fussy   { background: #f1ead8; }
.cry-band-hungry  { background: #ecd6bf; }
.cry-band-pain    { background: #e3b89a; }
.cry-band-colic   { background: #c98f7a; color: #fff; }
[data-theme="dark"] .cry-band-fussy   { background: #3a3528; color: #e8dec6; }
[data-theme="dark"] .cry-band-hungry  { background: #4a3a28; color: #f0d8b8; }
[data-theme="dark"] .cry-band-pain    { background: #5a3a28; color: #f5cdb0; }
[data-theme="dark"] .cry-band-colic   { background: #6b3a2a; color: #fff; }

.cry-spectrum-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
.cry-spectrum-note {
  margin: 12px 0 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 70ch;
}

/* DBL phoneme tile grid */
.cry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 8px 0 18px;
}
.cry-tile {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 18px 16px;
  position: relative;
  display: flex;
  flex-direction: column;
}
[data-theme="dark"] .cry-tile {
  background: var(--cream-deep);
}
.cry-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.cry-phoneme {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.85rem;
  line-height: 1.05;
  color: var(--ink);
  margin: 2px 0 4px;
  letter-spacing: -0.01em;
}
.cry-meaning {
  margin: 0 0 10px;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-soft);
}
.cry-cues {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.cry-cues li { margin-bottom: 4px; }
.cry-cues li:last-child { margin-bottom: 0; }
.cry-usha {
  margin: auto 0 0;
  padding: 10px 12px;
  background: var(--paper);
  border-left: 3px solid var(--burgundy);
  border-radius: 6px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
}
[data-theme="dark"] .cry-usha {
  background: rgba(255,255,255,0.04);
}

/* Per-tile accent stripes (left border) */
.cry-tile-neh     { border-left: 4px solid #c89060; }
.cry-tile-owh     { border-left: 4px solid #7a8aa8; }
.cry-tile-heh     { border-left: 4px solid #b88a5a; }
.cry-tile-eh      { border-left: 4px solid #a08a55; }
.cry-tile-eairh   { border-left: 4px solid var(--burgundy); }
.cry-tile-protest { border-left: 4px solid var(--sage); }

/* Pain-check alert reuses .sleep-pause */
.cry-alert h4 { color: var(--burgundy); }

/* Mobile */
@media (max-width: 900px) {
  .cry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cry-grid { grid-template-columns: 1fr; }
  .cry-spectrum-band { padding: 16px 8px; font-size: 0.7rem; }
  .cry-spectrum-axis { font-size: 0.7rem; gap: 8px; }
  .cry-phoneme { font-size: 1.6rem; }
}

/* Video demonstrations inside the cry card */
.cry-videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 8px 0 18px;
}
.cry-video {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.cry-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--rule);
}
.cry-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cry-video figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cry-video figcaption strong {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 720px) {
  .cry-videos {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* =================== SYNC DIAGNOSTICS PANEL =================== */
.diag-panel {
  margin-top: 18px;
  padding: 22px 22px 20px;
  background: #fff;
  border: 1px solid #e4e1da;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(31, 41, 55, 0.04);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.diag-row { display: block; }
.diag-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.diag-stat {
  padding: 12px 14px;
  background: #f7f5f0;
  border-radius: 10px;
  border: 1px solid #ece8df;
}
.diag-stat-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6657;
  margin-bottom: 4px;
}
.diag-stat-value {
  font-size: 15px;
  font-weight: 600;
  color: #2b2a25;
  word-break: break-word;
}
.diag-stat-value[data-state="ok"] { color: #1f6f3e; }
.diag-stat-value[data-state="warn"] { color: #b27300; }
.diag-stat-value[data-state="err"] { color: #b1352b; }
.diag-stat-value[data-state="muted"] { color: #6b6657; }

.diag-table-wrap { overflow-x: auto; }
.diag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.diag-table th,
.diag-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #eeece5;
}
.diag-table th {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6657;
  background: #faf8f3;
}
.diag-table td.diag-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.diag-table td.diag-num-mismatch { color: #b27300; }
.diag-empty {
  color: #8a8676;
  font-style: italic;
  padding: 8px 0;
}

.diag-subheading {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #2b2a25;
  letter-spacing: 0.02em;
}
.diag-pending-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.diag-pending-list li {
  padding: 10px 12px;
  background: #fdf5e9;
  border: 1px solid #f0dcb1;
  border-radius: 8px;
  font-size: 13px;
  color: #5c4a1d;
}
.diag-pending-list li.diag-empty {
  background: transparent;
  border: 1px dashed #d8d3c5;
  color: #8a8676;
}
.diag-pending-list .diag-pending-meta {
  display: block;
  font-size: 12px;
  color: #8a7644;
  margin-top: 2px;
}

.diag-meta-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.diag-meta { font-size: 12px; line-height: 1.4; }
.diag-meta-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6657;
  margin-bottom: 2px;
}
.diag-meta-value {
  display: block;
  color: #2b2a25;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}

.diag-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.diag-btn {
  appearance: none;
  border: 1px solid #cfc9b8;
  background: #fff;
  color: #2b2a25;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.diag-btn:hover { background: #f7f5f0; }
.diag-btn:active { transform: translateY(1px); }
.diag-btn[disabled] { opacity: 0.6; cursor: progress; }
.diag-btn-primary {
  background: #2b6e4f;
  border-color: #2b6e4f;
  color: #fff;
}
.diag-btn-primary:hover { background: #245d43; border-color: #245d43; }
.diag-action-msg {
  font-size: 13px;
  color: #6b6657;
}
.diag-action-msg[data-tone="ok"] { color: #1f6f3e; }
.diag-action-msg[data-tone="err"] { color: #b1352b; }

@media (max-width: 720px) {
  .diag-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diag-meta-row { grid-template-columns: 1fr; }
}

/* =================== SANDBOX / OPAQUE-ORIGIN BANNER =================== */
.sandbox-banner {
  background: #fdecec;
  border-bottom: 1px solid #f1b6b1;
  color: #7a1f17;
}
.sandbox-banner[hidden] { display: none; }
.sandbox-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.sandbox-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 1.45;
  flex: 1 1 320px;
}
.sandbox-banner-text strong { font-weight: 600; }
.sandbox-banner-btn {
  appearance: none;
  background: #7a1f17;
  color: #fff;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  transition: background 120ms ease, transform 80ms ease;
}
.sandbox-banner-btn:hover { background: #5e150f; }
.sandbox-banner-btn:active { transform: translateY(1px); }

/* Sync pill blocked state */
[data-sync-pill][data-state="blocked"] {
  background: #fdecec;
  color: #7a1f17;
  border-color: #f1b6b1;
}

/* =================== SETTINGS TAB (gear) =================== */
.tab.tab-settings {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b6657;
}
.tab.tab-settings .tab-icon { display: block; }
.tab.tab-settings .tab-label-settings {
  font-size: 13px;
}
.tab.tab-settings[aria-selected="true"] { color: #2b2a25; }
@media (max-width: 720px) {
  .tab.tab-settings { margin-left: 0; }
  .tab.tab-settings .tab-label-settings { display: none; }
}

/* =================== SETTINGS PANEL =================== */
.hero-settings {
  background: #faf7f0;
  border-bottom: 1px solid #ece8df;
}
.settings-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 22px;
  max-width: 1100px;
  margin: 0 auto;
  border-bottom: 1px solid #ece8df;
  background: #fdfbf5;
  /* Iter 6.29: was sticky at top: 64px, which stacked under the main tab strip
     and stole ~56px on the admin/settings tabs. Now scrolls naturally with content. */
  position: relative;
  z-index: 5;
}
.settings-nav-link {
  font-size: 13px;
  color: #4a4738;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e4e1da;
  transition: background 120ms ease, border-color 120ms ease;
}
.settings-nav-link:hover { background: #f7f5f0; border-color: #cfc9b8; }

/* =================== RESET GRID =================== */
.reset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.reset-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e4e1da;
  border-radius: 12px;
}
.reset-card-text { flex: 1 1 auto; min-width: 0; }
.reset-card-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #2b2a25;
}
.reset-card-sub {
  font-size: 13px;
  line-height: 1.4;
  color: #6b6657;
  margin: 0;
}
.reset-card-btn {
  appearance: none;
  background: #fff;
  border: 1px solid #cfc9b8;
  color: #2b2a25;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.reset-card-btn:hover {
  background: #fff5f4;
  border-color: #d6a8a3;
  color: #7a1f17;
}
.reset-card-btn:active { transform: translateY(1px); }
.reset-card-btn-danger {
  background: #7a1f17;
  border-color: #7a1f17;
  color: #fff;
}
.reset-card-btn-danger:hover {
  background: #5e150f;
  border-color: #5e150f;
  color: #fff;
}
.reset-nuclear {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px;
  background: #fff5f4;
  border: 1px solid #f1b6b1;
  border-radius: 12px;
}
.reset-nuclear .reset-card-title { color: #7a1f17; }
@media (max-width: 560px) {
  .reset-card, .reset-nuclear { flex-direction: column; align-items: stretch; }
  .reset-card-btn { width: 100%; }
}

/* =================== ABOUT GRID =================== */
.about-grid {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.about-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e4e1da;
  border-radius: 10px;
  margin: 0;
}
.about-row dt {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6657;
}
.about-row dd {
  margin: 0;
  font-size: 14px;
  color: #2b2a25;
  line-height: 1.45;
  word-break: break-word;
}
.about-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: #2b2a25;
  background: transparent;
  word-break: break-all;
}
.about-credit {
  margin-top: 18px;
  font-size: 13px;
  color: #6b6657;
  line-height: 1.55;
  font-style: italic;
}

/* =================== SYNC PILL (BUTTON) + POPOVER =================== */
.sync-pill-wrap { position: relative; display: inline-flex; }
.sync-pill {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 120ms ease;
}
.sync-pill:hover { background: rgba(0,0,0,0.04); }
.sync-pill:focus-visible {
  outline: 2px solid #2b6e4f;
  outline-offset: 2px;
}
.sync-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: #fff;
  border: 1px solid #e4e1da;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  padding: 14px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sync-popover[hidden] { display: none; }
.sync-pop-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.sync-pop-label {
  color: #6b6657;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sync-pop-value {
  color: #2b2a25;
  font-weight: 500;
  text-align: right;
}
.sync-pop-value[data-state="ok"] { color: #1f6f3e; }
.sync-pop-value[data-state="warn"] { color: #b27300; }
.sync-pop-value[data-state="err"] { color: #b1352b; }
.sync-pop-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.sync-pop-btn {
  appearance: none;
  background: #fff;
  border: 1px solid #cfc9b8;
  color: #2b2a25;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  flex: 1;
  transition: background 120ms ease;
}
.sync-pop-btn:hover { background: #f7f5f0; }
.sync-pop-btn[disabled] { opacity: 0.6; cursor: progress; }
.sync-pop-btn-primary {
  background: #2b6e4f;
  border-color: #2b6e4f;
  color: #fff;
}
.sync-pop-btn-primary:hover { background: #245d43; border-color: #245d43; }
.sync-pop-note {
  font-size: 12px;
  color: #6b6657;
  margin: 0;
  line-height: 1.4;
}
.sync-pop-note[data-tone="ok"] { color: #1f6f3e; }
.sync-pop-note[data-tone="err"] { color: #b1352b; }

@media (prefers-color-scheme: dark) {
  /* leave dark mode tuning for later \u2014 site uses manual theme toggle */
}

/* =====================================================
   TODAY PANEL (Phase 2a) — Overview tab dashboard
===================================================== */

.today {
  background: linear-gradient(180deg, var(--cream-deep) 0%, var(--paper) 100%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 48px 24px 56px;
}

.today-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.today-head {
  margin-bottom: 28px;
}

.today-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 8px;
}

.today-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.15;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.today-sub {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 620px;
}

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

.today-card {
  position: relative;
  display: block;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  box-shadow: var(--shadow-sm);
}

a.today-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--accent-soft);
}

a.today-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.today-card-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.today-card-value {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.today-card-sub {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Card variants — left accent strip */
.today-card--age {
  border-left: 3px solid var(--accent);
}
.today-card--milestone {
  border-left: 3px solid var(--sage);
}
.today-card--vax {
  border-left: 3px solid var(--burgundy);
}
.today-card--vax[data-state="ok"]     { border-left-color: var(--green); }
.today-card--vax[data-state="due"]    { border-left-color: var(--accent); }
.today-card--vax[data-state="overdue"]{ border-left-color: var(--red); }
.today-card--growth {
  border-left: 3px solid var(--accent-deep);
}
.today-card--latest {
  border-left: 3px solid var(--sage);
}
.today-card--focus {
  border-left: 3px solid var(--burgundy-soft);
  background: var(--rose-bg);
}

.today-card--focus .today-card-sub {
  color: var(--ink-muted);
  font-style: italic;
}

/* Empty state styling — when a card has no real data yet */
.today-card[data-empty="true"] .today-card-value {
  color: var(--ink-muted);
  font-style: italic;
  font-size: 18px;
}

/* Pending writes notice */
.today-pending {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--rose-bg);
  border: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
}

.today-pending-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: today-pulse 1.6s ease-in-out infinite;
}

@keyframes today-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.today-pending-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent-deep);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.today-pending-link:hover { color: var(--burgundy); }

/* Mobile */
@media (max-width: 640px) {
  .today {
    padding: 32px 16px 40px;
  }
  .today-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .today-card {
    padding: 14px 16px;
  }
  .today-card-value {
    font-size: 19px;
  }
}

/* =====================================================
   PHASE 3a — TRACKER (FAB, sheet, timer banner, chips)
===================================================== */

/* Last-event chips on Today panel */
.today-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
/* `display: grid` above overrides the default [hidden] rule, so the chips
   would otherwise stay on screen after the last event is deleted. */
.today-chips[hidden] { display: none !important; }
.today-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--sans);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
  text-align: left;
}
.today-chip:hover {
  border-color: var(--accent);
  background: var(--cream);
}
.today-chip:active { transform: translateY(1px); }
.today-chip-icon {
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}
.today-chip-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.today-chip-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.today-chip-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Amber exception dot on a Today chip when the latest entry of that kind
   was tagged with one or more exceptions (spit-up, loose stool, etc).
   Documentation-by-exception is the design intent: nothing shows up unless
   the caregiver flagged something off-normal worth pattern-matching later. */
.today-chip-label { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.today-chip-flag {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c97b1f; /* amber */
  flex: 0 0 auto;
}
.today-chip-flag[hidden] { display: none !important; }

/* Exception badges inside the Recent activity list */
.sheet-recent-textblock {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sheet-recent-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sheet-recent-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(201, 123, 31, 0.12);
  color: #8a4a0d;
  border: 1px solid rgba(201, 123, 31, 0.3);
  white-space: nowrap;
}
.sheet-recent-tag--note {
  background: rgba(70, 90, 120, 0.10);
  color: #3a4b6b;
  border-color: rgba(70, 90, 120, 0.28);
  cursor: help;
}

/* `Anything notable?` exception chip control inside the bottom-sheet form */
.sheet-exc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--rule);
  padding-top: 12px;
  margin-top: 4px;
}
.sheet-exc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
}
.sheet-exc-summary-caret {
  font-size: 11px;
  color: var(--ink-muted);
  transition: transform var(--t);
}
.sheet-exc[data-open="true"] .sheet-exc-summary-caret { transform: rotate(90deg); }
.sheet-exc-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--burgundy);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  margin-left: 6px;
}
.sheet-exc-count[hidden] { display: none !important; }
.sheet-exc-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sheet-exc[data-open="false"] .sheet-exc-body { display: none; }
.sheet-exc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sheet-exc-chip {
  font-family: var(--sans);
  font-size: 13px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.sheet-exc-chip[aria-pressed="true"] {
  background: rgba(201, 123, 31, 0.14);
  color: #6b3a09;
  border-color: rgba(201, 123, 31, 0.6);
}
.sheet-exc-other {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper);
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  resize: vertical;
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}
.sheet-exc-other:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
  border-color: var(--accent);
}

@media (max-width: 640px) {
  .today-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Floating action button */
.fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--burgundy);
  color: #fff;
  border: 1px solid var(--burgundy);
  box-shadow: 0 8px 24px rgba(60, 20, 25, 0.32), 0 2px 6px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 60;
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.fab:hover {
  background: var(--burgundy-soft);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(60, 20, 25, 0.4);
}
.fab:active { transform: translateY(0); }
.fab[hidden] { display: none; }
.fab svg { display: block; }

/* Make room above the FAB on mobile so it doesn't cover footer text */
body { padding-bottom: 0; }

/* Sheet scrim */
.sheet-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 10, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 70;
  opacity: 0;
  transition: opacity var(--t);
}
.sheet-scrim:not([hidden]) { opacity: 1; }

/* Bottom sheet */
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  background: var(--paper);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  box-shadow: 0 -12px 40px rgba(60, 40, 20, 0.22);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding: 6px 0 max(20px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  border-top: 1px solid var(--rule);
}
/* The default [hidden] attribute is overridden by display:flex above, which
   would leave a sliver of the sheet visible at the bottom edge when the
   transform animation is mid-flight on very tall viewports. Force the sheet
   completely off the page when [hidden] is present. */
.sheet[hidden] { display: none !important; }
.sheet:not([hidden]) { transform: translateY(0); }
.sheet-grip {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--rule);
  margin: 8px auto 4px;
}
.sheet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 12px;
}
.sheet-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  flex: 1;
  color: var(--ink);
}
.sheet-close,
.sheet-back {
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), color var(--t);
}
.sheet-close:hover,
.sheet-back:hover {
  background: var(--cream-deep);
  color: var(--ink);
}

/* Centered sheet on wide screens */
@media (min-width: 720px) {
  .sheet {
    left: 50%;
    right: auto;
    transform: translate(-50%, 100%);
    width: 480px;
    border-radius: 22px;
    bottom: 24px;
    max-height: 80vh;
  }
  .sheet:not([hidden]) { transform: translate(-50%, 0); }
}

/* Sheet stage */
.sheet-stage {
  overflow-y: auto;
  padding: 4px 20px 16px;
}

/* Quick-add tiles grid */
.sheet-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 12px;
}
.sheet-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 8px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--sans);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  min-height: 92px;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.sheet-tile:hover {
  border-color: var(--accent);
  background: var(--paper);
}
.sheet-tile:active { transform: translateY(1px); }
.sheet-tile-icon {
  font-size: 26px;
  line-height: 1;
}
.sheet-tile-label {
  font-weight: 500;
}

/* Sheet form (kind-specific) */
.sheet-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sheet-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sheet-row-label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sheet-seg {
  display: inline-flex;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.sheet-seg-btn {
  flex: 1;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.sheet-seg-btn[aria-pressed="true"] {
  background: var(--burgundy);
  color: #fff;
}
.sheet-input,
.sheet-textarea {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper);
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.sheet-textarea {
  min-height: 72px;
  resize: vertical;
}
.sheet-input:focus,
.sheet-textarea:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
  border-color: var(--accent);
}
.sheet-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.sheet-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: var(--cream);
  color: var(--ink);
  transition: background var(--t), border-color var(--t), color var(--t);
}
.sheet-btn:hover { background: var(--paper); border-color: var(--ink-muted); }
.sheet-btn--primary {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: #fff;
}
.sheet-btn--primary:hover {
  background: var(--burgundy-soft);
  border-color: var(--burgundy-soft);
}
.sheet-btn--danger {
  background: transparent;
  color: var(--red);
  border-color: var(--rule);
}
.sheet-btn--danger:hover {
  background: var(--rose-bg);
  border-color: var(--red);
}

/* Sheet helper note */
.sheet-help {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0;
}

/* Recent activity list inside the sheet */
.sheet-recent {
  margin-top: 6px;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}
.sheet-recent-head {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.sheet-recent-list {
  display: flex;
  flex-direction: column;
}
.sheet-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
}
.sheet-recent-item:last-child { border-bottom: none; }
.sheet-recent-icon {
  font-size: 16px;
  line-height: 1;
  width: 22px;
  text-align: center;
}
.sheet-recent-text { display: block; }
.sheet-recent-item[role="button"] {
  cursor: pointer;
  transition: background-color 120ms ease;
}
.sheet-recent-item[role="button"]:hover,
.sheet-recent-item[role="button"]:focus-visible {
  background-color: rgba(0, 0, 0, 0.04);
  outline: none;
}
.sheet-recent-item[role="button"]:focus-visible {
  box-shadow: inset 2px 0 0 var(--accent, #8a4a0d);
}
.sheet-recent-time {
  color: var(--ink-muted);
  font-size: 12px;
}
.sheet-recent-delete {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 22px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  -webkit-tap-highlight-color: rgba(184, 52, 74, 0.18);
  touch-action: manipulation;
}
.sheet-recent-delete:hover {
  color: var(--red);
  background: var(--rose-bg);
}
.sheet-recent-delete--armed,
.sheet-recent-delete--armed:hover {
  color: #fff;
  background: #b8344a;
  font-weight: 700;
  transform: scale(1.05);
  transition: transform 120ms ease, background-color 120ms ease;
}

/* Iter 6.9 — maternal rows in FAB Recent are display + delete only (no edit
   form exists for them in app.js). Remove the hover/cursor affordance that
   suggests tap-to-edit. */
.sheet-recent-item--readonly { cursor: default; }
.sheet-recent-item--readonly:hover { background: transparent !important; }

/* Active timer banner */
.timer-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 92px; /* sits above the FAB */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--burgundy);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  font-family: var(--sans);
}
.timer-banner[hidden] { display: none; }
.timer-banner-icon {
  font-size: 18px;
  line-height: 1;
}
.timer-banner-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.timer-banner-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.78;
}
.timer-banner-time {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.timer-banner-stop {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t);
}
.timer-banner-stop:hover { background: rgba(255, 255, 255, 0.28); }

@media (min-width: 720px) {
  .timer-banner {
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: min(520px, calc(100vw - 24px));
  }
}

/* When the sheet is open we hide the FAB so it doesn't sit on top */
body.sheet-open .fab { display: none; }

/* Make sure footer content has clearance for the FAB and banner on mobile */
@media (max-width: 719px) {
  footer { padding-bottom: 96px; }
}

/* ============================================================
   HISTORY & PATTERNS PANEL
   ============================================================ */

.hero-history { background: linear-gradient(180deg, var(--rose-bg), var(--cream)); }

.hist-status {
  padding: 20px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 14px;
}
.hist-status[data-state="error"] { color: var(--red); }

/* ---------- Filter bar ---------- */
.hist-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.hist-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hist-filter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  min-width: 44px;
}
.hist-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.hist-chip {
  appearance: none;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.hist-chip:hover { background: var(--rule-soft); }
.hist-chip.is-on,
.hist-chip[aria-pressed="true"],
.hist-chip[aria-checked="true"] {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: #fff;
}

/* ---------- Day strip ---------- */
.hist-daystrip-wrap {
  margin-bottom: 16px;
}
.hist-daystrip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.hist-daystrip-title {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  font-weight: 500;
}
.hist-daystrip-nav {
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--t), border-color var(--t);
}
.hist-daystrip-nav:hover { background: var(--rule-soft); border-color: var(--burgundy); }
.hist-daystrip-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.hist-daystrip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 4px 0;
}
.hist-day-pill {
  appearance: none;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t);
  min-height: 64px;
  font-family: inherit;
  color: var(--ink-soft);
}
.hist-day-pill:hover { background: var(--rule-soft); }
.hist-day-pill.is-active {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: #fff;
}
.hist-day-pill.is-today {
  border-color: var(--accent);
  border-width: 2px;
}
.hist-day-pill.is-active.is-today { border-color: var(--accent); }
.hist-day-pill.is-empty { opacity: 0.5; }
.hist-day-pill-dow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.hist-day-pill-num {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}
.hist-day-pill-dots {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  min-height: 6px;
}
.hist-day-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.hist-day-pill.is-active .hist-day-pill-dot { background: #fff !important; opacity: 0.85; }
.hist-day-pill-dot--feed   { background: var(--accent); }
.hist-day-pill-dot--diaper { background: var(--sage); }
.hist-day-pill-dot--sleep  { background: #6b8aa8; }
.hist-day-pill-dot--pump   { background: #9c6f9a; }
.hist-day-pill-dot--note   { background: var(--ink-muted); }

/* ---------- Day timeline ---------- */
.hist-day-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
.hist-day-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 13px;
  color: var(--ink-soft);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rule-soft);
}
.hist-day-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hist-day-summary-item strong {
  font-weight: 600;
  color: var(--ink);
}
.hist-timeline {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 0;
  position: relative;
}
.hist-tl-hour {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-align: right;
  padding-right: 8px;
  border-right: 1px solid var(--rule-soft);
  padding-top: 2px;
}
.hist-tl-slot {
  position: relative;
  min-height: 24px;
  padding: 2px 0 2px 8px;
  border-top: 1px dashed var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
}
.hist-tl-slot:first-of-type { border-top: none; }
.hist-tl-event {
  appearance: none;
  border: none;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform var(--t), box-shadow var(--t);
  white-space: nowrap;
  color: var(--ink);
}
.hist-tl-event:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.hist-tl-event--feed_bottle   { background: #f9e3c8; color: #4a2e16; }
.hist-tl-event--feed_breast   { background: #fbe6db; color: #5a2a1f; }
.hist-tl-event--diaper        { background: #d8e3c8; color: #2e3a22; }
.hist-tl-event--sleep         { background: #dde6f0; color: #243042; }
.hist-tl-event--pump          { background: #ead7e9; color: #4a2840; }
.hist-tl-event--note          { background: #ece6da; color: #3a3328; }
.hist-tl-event-time {
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  font-size: 10px;
}
.hist-tl-empty {
  grid-column: 2;
  padding: 40px 12px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
  font-style: italic;
}

/* ---------- Pattern cards ---------- */
.hist-pattern-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .hist-pattern-grid { grid-template-columns: 1fr 1fr; }
  .hist-card[data-hist-card="daily-heatmap"] { grid-column: 1 / -1; }
}
.hist-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.hist-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--paper);
  user-select: none;
}
.hist-card > summary::-webkit-details-marker { display: none; }
.hist-card > summary::after {
  content: '▾';
  color: var(--ink-muted);
  font-size: 12px;
  transition: transform var(--t);
}
.hist-card[open] > summary::after { transform: rotate(180deg); }
.hist-card-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.hist-card-meta {
  font-size: 12px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.hist-card-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--rule-soft);
  padding-top: 14px;
}

/* Stat rows inside cards */
.hist-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 10px;
}
.hist-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 70px;
}
.hist-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.hist-stat-value {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.1;
}
.hist-stat-sub {
  font-size: 11px;
  color: var(--ink-muted);
}

/* Sparkline bars */
.hist-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 48px;
  margin-top: 8px;
}
.hist-spark-bar {
  flex: 1;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  position: relative;
  opacity: 0.75;
  transition: opacity var(--t);
}
.hist-spark-bar:hover { opacity: 1; }
.hist-spark-bar--formula { background: var(--burgundy); }
.hist-spark-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* Heatmap (hours × days grid) */
.hist-heatmap {
  display: grid;
  grid-template-columns: 30px repeat(24, 1fr);
  gap: 1px;
  font-size: 9px;
  overflow-x: auto;
}
.hist-heatmap-corner,
.hist-heatmap-hour {
  text-align: center;
  color: var(--ink-muted);
  padding: 2px 0;
  font-weight: 600;
}
.hist-heatmap-day {
  color: var(--ink-muted);
  padding-right: 4px;
  text-align: right;
  font-weight: 600;
  line-height: 1.6;
}
.hist-heatmap-cell {
  aspect-ratio: 1;
  background: var(--rule-soft);
  border-radius: 2px;
  min-height: 12px;
}
.hist-heatmap-cell[data-density="1"] { background: #f0e0c8; }
.hist-heatmap-cell[data-density="2"] { background: #e8c8a0; }
.hist-heatmap-cell[data-density="3"] { background: #d6a070; }
.hist-heatmap-cell[data-density="4"] { background: var(--accent); }
.hist-heatmap-cell[data-density="5"] { background: var(--accent-deep); }
.hist-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--ink-muted);
  margin-top: 8px;
}
.hist-heatmap-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* Milestones list */
.hist-milestones {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hist-milestones li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13px;
}
.hist-milestones li:last-child { border-bottom: none; }
.hist-milestones strong {
  font-weight: 600;
  color: var(--ink);
}
.hist-milestones .hist-ms-meta {
  color: var(--ink-muted);
  font-size: 11px;
}

/* ─────────────────────────────────────────────────────────
   HEALTH & PHOTO UI (Phase 3b)
   ───────────────────────────────────────────────────────── */

/* Photo attachment widget (shared across forms) */
.sheet-photo { margin-top: 8px; }
.sheet-photo-preview {
  max-width: 160px;
  max-height: 160px;
  border-radius: 12px;
  display: block;
  margin-bottom: 8px;
  object-fit: cover;
  border: 1px solid var(--rule-soft);
}
.sheet-photo-preview[hidden] { display: none !important; }
.sheet-photo-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.sheet-photo-btn {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--rule-soft);
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  transition: background 120ms ease;
}
.sheet-photo-btn:hover { background: var(--surface-3, var(--rule-soft)); }
.sheet-photo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sheet-photo-btn--danger { color: #b3261e; }
.sheet-photo-status {
  font-size: 12px;
  color: var(--ink-muted);
}

/* Symptom multi-select chips */
.sheet-symptom-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sheet-symptom-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--rule-soft);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sheet-symptom-chip:hover { background: var(--surface-3, var(--rule-soft)); }
.sheet-symptom-chip[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.sheet-symptom-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Recent meds quick-pick */
.sheet-med-recent {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.sheet-med-recent-chip {
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--rule-soft);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
.sheet-med-recent-chip:hover { background: var(--surface-3, var(--rule-soft)); }
.sheet-med-recent-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Inline fever hint within temp form */
.sheet-help--alert {
  color: #b3261e;
  font-weight: 500;
}

/* History timeline pills for new kinds */
.hist-tl-event--temp    { background: #ffd7d0; color: #6a1f12; }
.hist-tl-event--symptom { background: #fde4b8; color: #5a3a0e; }
.hist-tl-event--med     { background: #d9d3ea; color: #2e2750; }

/* History day pill — composite health dot */
.hist-day-pill-dot--health { background: #b3261e; }

/* History day summary — alert variant for fever */
.hist-day-summary-item.is-alert strong { color: #b3261e; }
.hist-day-summary-item.is-alert { font-weight: 600; }

/* Health log pattern card */
.hist-health-section {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.hist-health-section:last-child { border-bottom: none; }
.hist-health-section-head {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--ink);
}
.hist-health-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  gap: 8px;
  font-size: 13px;
}
.hist-health-row strong {
  font-weight: 600;
  color: var(--ink);
}
.hist-health-row.is-alert strong { color: #b3261e; }
.hist-health-meta {
  font-size: 11px;
  color: var(--ink-muted);
}
.hist-health-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.hist-health-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--rule-soft);
  font-size: 12px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hist-health-tag-n {
  opacity: 0.65;
  font-weight: 600;
  font-size: 11px;
}
.hist-health-empty {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
}

/* Dark mode adjustments for new pills (deeper bg, lighter text) */
@media (prefers-color-scheme: dark) {
  .hist-tl-event--temp    { background: #5a2018; color: #ffd7d0; }
  .hist-tl-event--symptom { background: #4a3210; color: #fde4b8; }
  .hist-tl-event--med     { background: #2e2750; color: #d9d3ea; }
  .hist-day-pill-dot--health { background: #e35d4d; }
  .hist-day-summary-item.is-alert strong,
  .hist-health-row.is-alert strong,
  .sheet-help--alert { color: #ff9c8f; }
}
:root[data-theme="dark"] .hist-tl-event--temp    { background: #5a2018; color: #ffd7d0; }
:root[data-theme="dark"] .hist-tl-event--symptom { background: #4a3210; color: #fde4b8; }
:root[data-theme="dark"] .hist-tl-event--med     { background: #2e2750; color: #d9d3ea; }
:root[data-theme="dark"] .hist-day-pill-dot--health { background: #e35d4d; }
:root[data-theme="dark"] .hist-day-summary-item.is-alert strong,
:root[data-theme="dark"] .hist-health-row.is-alert strong,
:root[data-theme="dark"] .sheet-help--alert { color: #ff9c8f; }

/* ─────────────────────────────────────────────────────────
   INSIGHTS CARD (Phase 3e)
   Cross-referenced findings on the History view.
   Uses the app's --paper / --cream / --ink token system.
   ───────────────────────────────────────────────────────── */

.hist-insights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hist-insight {
  border-radius: 10px;
  border: 1px solid var(--rule-soft);
  background: var(--cream);
  overflow: hidden;
  transition: border-color 120ms ease;
}
.hist-insight:hover { border-color: var(--rule); }

.hist-insight > details > summary {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.hist-insight > details > summary::-webkit-details-marker { display: none; }
.hist-insight > details > summary::after { display: none; }

.hist-insight-icon {
  font-size: 16px;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
}

.hist-insight-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.hist-insight-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hist-insight-detail {
  padding: 0 12px 12px 50px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Severity coloring — light mode */
.hist-insight--ok {
  /* default neutral cream */
}
.hist-insight--watch {
  border-color: #e0b87f;
  background: #fef6ea;
}
.hist-insight--watch .hist-insight-icon {
  background: #fde4b8;
  border-color: #e0b87f;
}
.hist-insight--watch .hist-insight-value {
  color: #8a5a14;
}

.hist-insight--alert {
  border-color: #d99090;
  background: #fce8e6;
}
.hist-insight--alert .hist-insight-icon {
  background: #ffd7d0;
  border-color: #d99090;
}
.hist-insight--alert .hist-insight-title {
  font-weight: 600;
}
.hist-insight--alert .hist-insight-value {
  color: #b3261e;
}

.hist-insights-empty {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
  font-style: italic;
  padding: 4px 0;
}

/* Dark mode — use [data-theme="dark"] (the app explicitly toggles this attr) */
[data-theme="dark"] .hist-insight {
  background: var(--cream);
  border-color: var(--rule-soft);
}
[data-theme="dark"] .hist-insight-icon {
  background: var(--paper);
  border-color: var(--rule-soft);
}
[data-theme="dark"] .hist-insight--watch {
  border-color: #735030;
  background: #2e2418;
}
[data-theme="dark"] .hist-insight--watch .hist-insight-icon {
  background: #4a3a1f;
  border-color: #735030;
}
[data-theme="dark"] .hist-insight--watch .hist-insight-value {
  color: #f2c989;
}
[data-theme="dark"] .hist-insight--alert {
  border-color: #823f3f;
  background: #2e1a18;
}
[data-theme="dark"] .hist-insight--alert .hist-insight-icon {
  background: #4a2520;
  border-color: #823f3f;
}
[data-theme="dark"] .hist-insight--alert .hist-insight-value {
  color: #ff9c8f;
}

/* =====================================================================
 * Phase 3f Surface 1 — "Now" band (in-app glance + quick log)
 * Mounted at the very top of the Overview panel, before the hero.
 * Two large tappable tiles (Feed + Diaper) with last-event + CTA.
 * ===================================================================== */

.now-band {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  border-bottom: 1px solid var(--rule);
  padding: 18px 20px 22px;
}

.now-band[hidden] { display: none; }

.now-band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  max-width: var(--max);
  margin: 0 auto 12px;
  padding: 0 2px;
}

.now-band-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep, var(--burgundy));
}

.now-band-clock {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.now-band-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: var(--max);
  margin: 0 auto;
}

.now-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 16px 16px 14px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* Disable iOS Safari's long-press context menu on the tile itself. */
  -webkit-touch-callout: none;
  transition: transform 0.08s ease, box-shadow var(--t), border-color var(--t);
  box-shadow: var(--shadow-sm);
  min-height: 124px;
}

.now-tile:hover {
  border-color: var(--accent-soft, var(--burgundy-soft));
  box-shadow: var(--shadow);
}

.now-tile:active {
  transform: scale(0.985);
}

.now-tile:focus-visible {
  outline: 2px solid var(--accent, var(--burgundy));
  outline-offset: 2px;
}

.now-tile-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.now-tile-icon {
  font-size: 20px;
  line-height: 1;
}

.now-tile-kind {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.now-tile-since {
  font-family: var(--serif);
  font-size: clamp(22px, 5vw, 28px);
  line-height: 1.15;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 2px;
}

.now-tile-detail {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.35;
}

.now-tile-cta {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-deep, var(--burgundy));
  letter-spacing: 0.02em;
}

/* "Feeding now" active state — subtle sage tint so an in-progress session
   stands out from the static "last event was ___" baseline. */
.now-tile[data-now-active="true"] {
  border-color: var(--sage);
  background: linear-gradient(180deg, var(--sage-bg) 0%, var(--paper) 100%);
}

/* Iter 7.12: "Baby has arrived" tile. Visually distinct from timer chips
   (kicks/contractions) so it reads as a transition CTA, not a measurement.
   Warm rose tint + burgundy accent emphasizes the moment without overwhelming. */
.now-tile--birth {
  background: linear-gradient(180deg, var(--rose-bg) 0%, var(--paper) 100%);
  border-color: var(--burgundy-soft);
}
.now-tile--birth .now-tile-kind {
  color: var(--burgundy);
}
.now-tile--birth .now-tile-cta {
  color: var(--burgundy);
  font-weight: 700;
}
.now-tile--birth:hover {
  border-color: var(--burgundy);
}

/* =====================================================================
 * Iter 6.18 — Gap Detection Chips
 * Appears between Now-band grid and hint when overdue events are detected.
 * Tapping a chip opens the Catch-Up sheet pre-filled with the right preset.
 * ===================================================================== */

.now-gap-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: var(--max);
  margin: 12px auto 0;
  padding: 0 4px;
}

.now-gap-chips[hidden] { display: none; }

.now-gap-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 120ms ease, border-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.now-gap-chip:active {
  transform: scale(0.985);
}

.now-gap-chip:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}

.now-gap-chip--warn {
  border-color: #E0A85A;
  background: linear-gradient(180deg, #FBF3E5 0%, var(--paper) 100%);
}

.now-gap-chip--urgent {
  border-color: #C95F4A;
  background: linear-gradient(180deg, #F8E2DD 0%, var(--paper) 100%);
}

.now-gap-chip-icon {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.now-gap-chip-mid {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.now-gap-chip-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.now-gap-chip--urgent .now-gap-chip-label {
  color: #8C3A2A;
}

.now-gap-chip-sub {
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.now-gap-chip-cta {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--ink-muted);
  font-weight: 300;
  padding-right: 2px;
}

.now-gap-chip--warn .now-gap-chip-cta { color: #B47C3A; }
.now-gap-chip--urgent .now-gap-chip-cta { color: #C95F4A; }

[data-theme="dark"] .now-gap-chip {
  background: var(--paper);
  border-color: var(--rule);
}

[data-theme="dark"] .now-gap-chip--warn {
  background: linear-gradient(180deg, rgba(224, 168, 90, 0.18) 0%, var(--paper) 100%);
  border-color: #B8843F;
}

[data-theme="dark"] .now-gap-chip--urgent {
  background: linear-gradient(180deg, rgba(201, 95, 74, 0.20) 0%, var(--paper) 100%);
  border-color: #A04A38;
}

[data-theme="dark"] .now-gap-chip--urgent .now-gap-chip-label {
  color: #E8A695;
}

@media (max-width: 380px) {
  .now-gap-chip { padding: 9px 10px; gap: 8px; }
  .now-gap-chip-icon { font-size: 20px; width: 28px; height: 28px; }
  .now-gap-chip-label { font-size: 12.5px; }
  .now-gap-chip-sub { font-size: 10.5px; }
}

.now-band-hint {
  max-width: var(--max);
  margin: 10px auto 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

@media (max-width: 380px) {
  .now-tile { padding: 14px 12px 12px; min-height: 116px; }
  .now-tile-since { font-size: 20px; }
  .now-tile-detail { font-size: 13px; }
}

/* iter 7.16 (v127): tighten now-tile typography for 381-480px so short
   labels like "No session yet", "Baby has arrived", "Switch to baby care",
   "Sleep, feeding, growth" fit on one line inside a half-width tile. */
@media (min-width: 381px) and (max-width: 480px) {
  .now-tile { padding: 14px 12px 12px; }
  .now-tile-since { font-size: 18px; line-height: 1.2; }
  .now-tile-detail { font-size: 12.5px; }
}

/* =====================================================================
 * Phase 3f Surface 1 — Quick-log undo toast
 * Pinned bottom-center, above FAB (z-index 60) and below sheet scrim (70).
 * Auto-dismisses after 5s; countdown bar animates 100%→0% as visual hint.
 * ===================================================================== */

.qlog-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 88px); /* sit just above the FAB */
  transform: translate(-50%, 12px);
  z-index: 65;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(20, 14, 10, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  overflow: hidden;
}

.qlog-toast[hidden] { display: none; }

.qlog-toast[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.qlog-toast-text {
  flex: 1;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.35;
  color: var(--paper);
}

.qlog-toast-undo {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  background: transparent;
  border: 1px solid rgba(251, 247, 239, 0.5);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.qlog-toast-undo:hover {
  background: rgba(251, 247, 239, 0.12);
  border-color: var(--paper);
}

.qlog-toast-undo:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

.qlog-toast-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--burgundy);
  transform-origin: left center;
  transform: scaleX(1);
}

/* Dark mode tweaks — invert toast so it stays high-contrast against
   the dark paper background. */
[data-theme="dark"] .qlog-toast {
  background: var(--cream);
  color: var(--ink);
}
[data-theme="dark"] .qlog-toast-text { color: var(--ink); }
[data-theme="dark"] .qlog-toast-undo {
  color: var(--ink);
  border-color: rgba(42, 34, 28, 0.4);
}
[data-theme="dark"] .qlog-toast-undo:hover {
  background: rgba(42, 34, 28, 0.08);
  border-color: var(--ink);
}
[data-theme="dark"] .qlog-toast-bar {
  background: var(--burgundy);
}

/* iter-7.27.3: tone variants on the qlog toast.
   - info: "Saving…" — default dark background, slightly muted text.
   - success: legacy "Logged. Undo?" — unchanged.
   - error: "Couldn’t save. Retry?" — burgundy background so it reads as red.
*/
.qlog-toast[data-qlog-toast-tone="info"] .qlog-toast-text {
  opacity: 0.85;
}
.qlog-toast[data-qlog-toast-tone="error"] {
  background: var(--burgundy);
  color: var(--paper);
}
.qlog-toast[data-qlog-toast-tone="error"] .qlog-toast-text { color: var(--paper); }
.qlog-toast[data-qlog-toast-tone="error"] .qlog-toast-undo {
  color: var(--paper);
  border-color: rgba(251, 247, 239, 0.7);
  font-weight: 700;
}
.qlog-toast[data-qlog-toast-tone="error"] .qlog-toast-undo:hover {
  background: rgba(251, 247, 239, 0.18);
  border-color: var(--paper);
}
.qlog-toast[data-qlog-toast-tone="error"] .qlog-toast-bar {
  background: rgba(251, 247, 239, 0.4);
}
[data-theme="dark"] .qlog-toast[data-qlog-toast-tone="error"] {
  background: var(--burgundy);
  color: var(--paper);
}
[data-theme="dark"] .qlog-toast[data-qlog-toast-tone="error"] .qlog-toast-text {
  color: var(--paper);
}
[data-theme="dark"] .qlog-toast[data-qlog-toast-tone="error"] .qlog-toast-undo {
  color: var(--paper);
  border-color: rgba(251, 247, 239, 0.7);
}

/* Dark mode Now band */
[data-theme="dark"] .now-band {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
}
[data-theme="dark"] .now-tile[data-now-active="true"] {
  background: linear-gradient(180deg, var(--sage-bg) 0%, var(--paper) 100%);
}

/* =====================================================================
 * Phase 3f Surface 2 — Quick Actions section in Settings.
 * Recipe page for building iOS Shortcuts that deep-link into the app.
 * ===================================================================== */

.qa-info {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 18px 0 22px;
}
.qa-info p {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}
.qa-steps {
  margin: 4px 0 0;
  padding-left: 22px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.qa-steps li { margin-bottom: 4px; }
.qa-steps strong { color: var(--ink); font-weight: 600; }

.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.qa-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
}

.qa-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qa-card-icon {
  font-size: 20px;
  line-height: 1;
}

.qa-card-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.qa-card-desc {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.qa-card-desc code {
  background: var(--cream);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--ink);
}

.qa-card-url-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: auto;
}

.qa-card-url {
  flex: 1;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--ink);
  word-break: break-all;
  line-height: 1.4;
  display: flex;
  align-items: center;
}

.qa-copy-btn {
  flex: 0 0 auto;
  background: var(--burgundy);
  color: var(--paper);
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.06s ease;
  min-width: 64px;
}

.qa-copy-btn:hover { background: var(--burgundy-deep, #6e1f1f); }
.qa-copy-btn:active { transform: scale(0.97); }
.qa-copy-btn:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 2px;
}
.qa-copy-btn[data-qa-flashed="true"] {
  background: var(--sage-deep, #5b7a4d);
}

.qa-bonus {
  margin-top: 28px;
  padding: 18px 22px;
  background: var(--cream-deep, var(--cream));
  border: 1px solid var(--rule);
  border-radius: 16px;
}
.qa-bonus-title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.qa-bonus p {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.qa-bonus-note {
  margin-top: 8px !important;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  color: var(--ink) !important;
}

/* Dark mode adjustments */
[data-theme="dark"] .qa-card-url { background: var(--cream); }
[data-theme="dark"] .qa-info { background: var(--cream); }
[data-theme="dark"] .qa-bonus { background: var(--cream-deep, var(--cream)); }

/* =================== NOTIFICATIONS (Phase 3f Surface 3) =================== */

.notif-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
}

.notif-card-title {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
/* Iter 7.17 Phase B: descriptive sub-text under a notif card title. */
.notif-card-sub {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-muted, #6b6b6b);
}

.notif-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--rule);
  cursor: pointer;
}
.notif-row:last-child { border-bottom: none; padding-bottom: 0; }
.notif-row:first-child { padding-top: 0; }

.notif-row-master {
  border-bottom: none;
  padding: 0;
}

.notif-row-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.notif-row-title {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.notif-row-sub {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.45;
}

/* iOS-style toggle */
.notif-toggle {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--cream-deep);
  border: 1px solid var(--rule);
  position: relative;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  margin-top: 2px;
}
.notif-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.18s ease;
}
.notif-toggle:checked {
  background: var(--accent);
  border-color: var(--accent-deep);
}
.notif-toggle:checked::after { transform: translateX(18px); }
.notif-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.notif-toggle:disabled { opacity: 0.45; cursor: not-allowed; }

/* Permission card */
.notif-perm {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.notif-perm-info { flex: 1; min-width: 0; }
.notif-perm-label {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.notif-perm-state {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.notif-perm-state[data-status="granted"] { color: var(--sage-deep, #5b7a4d); }
.notif-perm-state[data-status="denied"] { color: var(--burgundy, #8a2929); }
.notif-perm-hint {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 4px;
  line-height: 1.45;
}
.notif-perm-btn {
  flex: 0 0 auto;
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.06s ease;
}
.notif-perm-btn:hover { background: var(--accent-deep); }
.notif-perm-btn:active { transform: scale(0.97); }
.notif-perm-btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* iOS caveat card */
.notif-caveat {
  background: var(--cream);
}
.notif-caveat-text {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.notif-test-btn {
  align-self: flex-start;
  margin-top: 4px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.notif-test-btn:hover { background: var(--cream-deep); border-color: var(--ink-muted); }
.notif-test-btn:active { transform: scale(0.98); }
.notif-test-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Missed alerts */
.notif-missed-card { background: var(--cream); }
.notif-missed-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.notif-missed-count {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-left: 6px;
}
.notif-clear-btn {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 5px 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.notif-clear-btn:hover { background: var(--paper); color: var(--ink); }
.notif-clear-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.notif-missed-sub {
  margin: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.45;
}

.notif-missed-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif-missed-item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.notif-missed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.notif-missed-title {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.notif-missed-reason {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  flex: 0 0 auto;
}
.notif-missed-reason[data-reason="quiet"] { color: var(--accent-deep); }
.notif-missed-reason[data-reason="cooldown"] { color: var(--ink-muted); }
.notif-missed-body {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}
.notif-missed-meta {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-muted);
}
.notif-missed-empty {
  font-family: var(--sans);
  font-size: 13px;
  font-style: normal;
  color: var(--ink-muted);
  text-align: center;
  padding: 12px 0;
}

/* Settings tab badge — red dot on nav button */
.notif-tab-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--burgundy, #8a2929);
  margin-left: 4px;
  vertical-align: 2px;
  box-shadow: 0 0 0 2px var(--paper);
}

/* Dark mode adjustments */
[data-theme="dark"] .notif-caveat { background: var(--cream-deep); }
[data-theme="dark"] .notif-missed-card { background: var(--cream-deep); }
[data-theme="dark"] .notif-missed-item { background: var(--paper); }
[data-theme="dark"] .notif-toggle::after { background: var(--ink); }

/* =====================================================================
   Phase 3g — Daily-Loop Completion
   ===================================================================== */

/* ---- Caregiver chip (top-right of header) ---- */
.caregiver-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--sans);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
  margin-left: auto;
  margin-right: 10px;
  white-space: nowrap;
}
.caregiver-chip:hover { border-color: var(--accent); background: var(--cream); }
.caregiver-chip:active { transform: translateY(1px); }
.caregiver-chip[data-caregiver-set="true"] { border-color: var(--rule); }
.caregiver-chip:not([data-caregiver-set="true"]) {
  border-style: dashed;
  border-color: var(--accent);
  color: var(--accent);
}
.caregiver-chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cream-deep);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.caregiver-chip-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

/* ---- iter 6.16.C: Household switcher (header) ---- */
.household-switcher {
  position: relative;
  margin-right: 8px;
}
.household-switcher[hidden] { display: none !important; }
.household-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--sans);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
  max-width: 200px;
}
.household-chip:hover { border-color: var(--accent); background: var(--cream); }
.household-chip:active { transform: translateY(1px); }
.household-chip[aria-expanded="true"] { border-color: var(--accent); background: var(--cream); }
.household-chip-name {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
  line-height: 1;
}
.household-chip-caret {
  font-size: 10px;
  color: var(--muted);
  margin-left: 2px;
  transition: transform var(--t);
}
.household-chip[aria-expanded="true"] .household-chip-caret { transform: rotate(180deg); color: var(--accent); }

.household-switcher-menu {
  /* iter 6.16.C bugfix: menu is relocated to <body> at open time and uses
     position: fixed (set inline by JS) to escape the header stacking context. */
  position: fixed;
  min-width: 280px;
  max-width: 360px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  z-index: 9999;
  overflow: hidden;
}
.household-switcher-menu[hidden] { display: none !important; }
.household-switcher-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.household-switcher-list li { margin: 0; padding: 0; }
.household-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--sans);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--t);
}
.household-switcher-item:hover { background: var(--cream); }
.household-switcher-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.household-switcher-item.is-active { background: var(--cream-deep); }
.household-switcher-item.is-active .hh-item-name { font-weight: 700; }
.hh-item-text { flex: 1; min-width: 0; }
.hh-item-name {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hh-item-sub {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.hh-item-check {
  font-size: 16px;
  color: var(--accent);
  font-weight: 700;
  width: 18px;
  text-align: center;
  flex: 0 0 auto;
}
.household-switcher-footer {
  border-top: 1px solid var(--rule);
  padding: 6px;
}
.household-switcher-manage {
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--sans);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.household-switcher-manage:hover { background: var(--cream); }

@media (max-width: 600px) {
  /* JS clears inline positioning on mobile so these CSS rules win. */
  .household-switcher-menu {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    min-width: 0;
    max-width: none;
    border-radius: 16px 16px 0 0;
    padding-bottom: max(env(safe-area-inset-bottom), 8px);
    animation: hhSwitcherSlideUp 0.2s ease-out;
  }
  .household-switcher-list { max-height: 60vh; }
}
@keyframes hhSwitcherSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.household-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  z-index: 2000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.household-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.household-toast.is-hiding { opacity: 0; transform: translateX(-50%) translateY(8px); }

/* ---- Caregiver picker modal ---- */
.caregiver-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.caregiver-modal[hidden] { display: none !important; }
.caregiver-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 8, 0.55);
  backdrop-filter: blur(2px);
}
.caregiver-modal-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px 22px 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
}
.caregiver-modal-title {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}
.caregiver-modal-sub {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.45;
}
.caregiver-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.caregiver-pick {
  --cg-hue: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--sans);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.caregiver-pick:hover { border-color: var(--accent); background: var(--cream); }
.caregiver-pick:active { transform: translateY(1px); }
.caregiver-pick.is-active {
  border-color: var(--accent);
  background: hsl(var(--cg-hue) 60% 94%);
}
.caregiver-pick-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: hsl(var(--cg-hue) 65% 78%);
  color: hsl(var(--cg-hue) 55% 22%);
  font-size: 17px;
  font-weight: 700;
}
.caregiver-pick-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.caregiver-modal-close {
  margin: 16px auto 0;
  display: block;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color var(--t), color var(--t);
}
.caregiver-modal-close:hover { border-color: var(--accent); color: var(--ink); }
body.caregiver-modal-open { overflow: hidden; }

/* ---- Settings "I am logging as" row ---- */
.caregiver-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.caregiver-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.caregiver-card-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.caregiver-card-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.caregiver-card-change {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.caregiver-card-change:hover { border-color: var(--accent); background: var(--cream); }

/* ---- Phase 4d-lite: Profile section ---- */
.profile-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.profile-label {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft, #6b7280);
  flex: 0 0 auto;
}
.profile-input {
  flex: 1 1 200px;
  min-width: 0;
  font-family: var(--sans);
  font-size: 15px;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
}
.profile-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.profile-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.profile-save {
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--t), transform var(--t);
}
.profile-save:hover:not(:disabled) { opacity: 0.92; }
.profile-save:disabled { opacity: 0.5; cursor: not-allowed; }
.profile-status {
  font-family: var(--sans);
  font-size: 13px;
  margin: 4px 0 8px;
  color: var(--ink-soft, #6b7280);
}
.profile-status[data-error="true"] { color: #c0392b; }
.profile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft, #6b7280);
}
.profile-meta [data-profile-email] {
  font-weight: 500;
  color: var(--ink);
  word-break: break-all;
}
.profile-signout {
  margin-left: auto;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t), color var(--t);
}
.profile-signout:hover { border-color: #c0392b; color: #c0392b; }
.profile-signout.is-armed,
[data-account-signout].is-armed {
  border-color: #c0392b;
  color: #fff;
  background: #c0392b;
}

/* Member row friendly name */
.member-row-name {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

/* ---- Inline "Now" editor (sits under Now band) ---- */
.now-inline-editor {
  margin: 10px 0 4px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 14px 10px;
  animation: nowEdSlideIn 180ms ease-out;
}
.now-inline-editor[hidden] { display: none !important; }
@keyframes nowEdSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.now-inline-editor-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.now-edit-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  flex: 0 0 auto;
}
.now-edit-nudge-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.now-edit-nudge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.now-edit-nudge:hover { border-color: var(--accent); background: var(--cream-deep); }
.now-edit-nudge:active { transform: translateY(1px); }
.now-edit-val {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  min-width: 72px;
  text-align: center;
}
.now-edit-picker {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.now-edit-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.now-edit-pick:hover { border-color: var(--accent); background: var(--cream-deep); }
.now-edit-pick:active { transform: translateY(1px); }
.now-edit-pick.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--paper);
}
.now-edit-pick-icon { font-size: 14px; line-height: 1; }
.now-edit-pick-label { font-weight: 500; }
.now-inline-editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}
.now-inline-editor-hint {
  font-size: 12px;
  color: var(--ink-muted);
  font-family: var(--sans);
}
.now-inline-editor-done {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.now-inline-editor-done:hover { border-color: var(--accent); background: var(--cream-deep); }

/* ---- Today chip "due" state (bath ≥ 72h) ---- */
.today-chip[data-due="true"] {
  border-color: #c97b1f;
  background: hsl(34 65% 95%);
}
.today-chip[data-due="true"] .today-chip-icon {
  filter: saturate(1.1);
}
.today-chip[data-due="true"] .today-chip-label {
  color: #8a4a0c;
}

/* ---- Notif permission inline test button ---- */
.notif-perm-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.notif-test-btn--inline {
  /* Compact variant for the inline-with-permission card placement. */
  font-size: 12px;
  padding: 6px 12px;
}

/* ---- Dark mode tweaks ---- */
[data-theme="dark"] .caregiver-chip { background: var(--cream-deep); }
[data-theme="dark"] .caregiver-modal-card { background: var(--cream-deep); }
[data-theme="dark"] .caregiver-pick { background: var(--cream-deep); }
[data-theme="dark"] .caregiver-pick.is-active { background: hsl(var(--cg-hue) 30% 28%); }
[data-theme="dark"] .caregiver-card { background: var(--cream-deep); }
[data-theme="dark"] .now-inline-editor { background: var(--cream-deep); }
[data-theme="dark"] .now-edit-nudge { background: var(--paper); }
[data-theme="dark"] .now-edit-pick { background: var(--paper); }
[data-theme="dark"] .today-chip[data-due="true"] {
  background: hsl(34 30% 22%);
  border-color: #c97b1f;
}
[data-theme="dark"] .today-chip[data-due="true"] .today-chip-label { color: #e7b87a; }

/* =====================================================================
   Phase 3g-streamline rev2 (5/23/2026) — slim day picker + chip aggregate
   ----------------------------------------------------------------------
   Replaces the prior 4-card totals strip (deprecated on mobile after the
   labels truncated). The day picker is a thin row above the Now band
   chips; daily aggregates render inside each chip as a third line.
   ===================================================================== */

.today-day-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--t), border-color var(--t);
}
.today-day-picker[hidden] { display: none !important; }

/* Off-today state — amber wash + visible border so the user notices the
   aggregate lines below are historical, not live. */
.today-day-picker[data-off-today] {
  background: hsl(38 65% 92%);
  border-color: hsl(38 55% 78%);
}
[data-theme="dark"] .today-day-picker[data-off-today] {
  background: hsl(38 30% 22%);
  border-color: hsl(38 35% 38%);
}

.today-day-picker-nav {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: border-color var(--t), background var(--t), opacity var(--t);
}
.today-day-picker-nav:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--cream);
}
.today-day-picker-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.today-day-picker-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  min-width: 90px;
  text-align: center;
}
.today-day-picker-reset {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: hsl(14 70% 38%);
  background: var(--paper);
  border: 1px solid hsl(38 55% 70%);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background var(--t), border-color var(--t);
}
.today-day-picker-reset:hover { background: var(--cream); border-color: var(--accent); }
.today-day-picker-reset[hidden] { display: none !important; }
[data-theme="dark"] .today-day-picker-reset { background: var(--cream-deep); color: hsl(14 70% 70%); }

/* Per-chip aggregate line — sits below the existing time-since-last
   value, smaller and lower-contrast so the live data stays dominant. */
.today-chip-aggregate {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.today-chip-aggregate[hidden] { display: none !important; }
/* Muted variant — used for bath aggregate when viewing past days, since
   "time since last bath" is inherently a now-question. */
.today-chip-aggregate[data-muted] {
  opacity: 0.55;
  font-style: normal;  /* explicit — avoid italic per house rules */
}


/* =====================================================================
 * Auth Panel (Phase 4a)
 * ===================================================================== */
#auth-login-panel {
  position: fixed;
  inset: 0;
  /* Must sit above .public-showcase (z-index: 9000) so logged-out users
     can actually see the sign-in panel when they tap the showcase CTA. */
  z-index: 9500;
  display: none;
}
#auth-login-panel[aria-hidden="false"] {
  display: block;
}
.auth-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.auth-panel-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 92vw);
  background: var(--bg-elev, #fff);
  color: var(--text, #0f172a);
  border-radius: 16px;
  padding: 24px 22px 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
  max-height: 90vh;
  overflow: auto;
}
.auth-panel-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--muted, #64748b);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
}
.auth-panel-close:hover { background: rgba(15, 23, 42, 0.06); }
.auth-panel-card h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
}
.auth-panel-sub {
  margin: 0 0 14px;
  color: var(--muted, #64748b);
  font-size: 14px;
}
.auth-panel-card label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text, #0f172a);
}
.auth-panel-card input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--bg, #fff);
  color: var(--text, #0f172a);
  box-sizing: border-box;
  margin-bottom: 12px;
}
.auth-panel-card input[type="email"]:focus {
  outline: 2px solid var(--accent, #5b8def);
  outline-offset: 1px;
}
.auth-panel-submit {
  width: 100%;
  padding: 12px 14px;
  background: var(--accent, #5b8def);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.auth-panel-submit:hover { filter: brightness(0.95); }
.auth-panel-msg {
  margin: 12px 0 0;
  min-height: 1.2em;
  font-size: 14px;
  color: var(--muted, #64748b);
}
.auth-panel-msg-ok  { color: #15803d; }
.auth-panel-msg-err { color: #b91c1c; }
.auth-panel-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e2e8f0);
  font-size: 12px;
  color: var(--muted, #64748b);
  line-height: 1.5;
}

/* Secondary text-link button used to navigate back to email entry */
.auth-panel-link {
  margin-top: 8px;
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--accent, #b45309);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.auth-panel-link:hover { filter: brightness(0.9); }

/* 6-digit code input: wide character spacing reads better at large size */
.auth-panel-card #auth-otp {
  font-size: 22px;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Account chip in Settings */
.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-elev, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  font-size: 13px;
  color: var(--text, #0f172a);
}
.account-chip[data-signed-in="false"] { color: var(--muted, #64748b); }
.account-chip .account-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #94a3b8;
}
.account-chip[data-signed-in="true"] .account-dot { background: #22c55e; }

.settings-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
}
.settings-account-actions {
  display: inline-flex;
  gap: 8px;
}
.settings-account-actions button {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg, #fff);
  cursor: pointer;
  font-size: 14px;
}
.settings-account-actions button.primary {
  background: var(--accent, #5b8def);
  color: #fff;
  border-color: transparent;
}

/* ======================================================
 * Phase 4b: Invites, Members, Admin signup requests
 * ====================================================== */
/* iter 6.16.C bugfix4: ensure [hidden] beats explicit display rules on
 * parent-only invite controls (form/result/list/role table). */
[data-parent-only][hidden],
[data-caregiver-note][hidden] { display: none !important; }
.invite-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.invite-form-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr);
  gap: 12px;
}
@media (max-width: 520px) {
  .invite-form-row { grid-template-columns: 1fr; }
}
.invite-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-soft, #6b7280);
}
.invite-field > span { font-weight: 600; }
.invite-field select,
.invite-field input {
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--ink, #111827);
}
.invite-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.invite-result {
  margin-top: 16px;
  padding: 12px;
  background: var(--surface-soft, #f9fafb);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
}
.invite-code-card,
.invite-link-card {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  flex-wrap: wrap;
}
.invite-code-label {
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.invite-code-value,
.invite-link-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  padding: 4px 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  flex: 1 1 auto;
  word-break: break-all;
}
.invite-code-copy {
  font-size: 13px;
  padding: 6px 10px;
}

.invite-list, .member-list, .signup-request-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.invite-row, .member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
}
.invite-row-main, .signup-request-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
}
.invite-row-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  padding: 2px 6px;
  background: var(--surface-soft, #f3f4f6);
  border-radius: 4px;
}
.invite-row-role, .member-row-role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-soft, #eef2ff);
  color: var(--ink-soft, #4b5563);
}
.invite-row-status {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
}
.invite-row-status-pending  { background: #fef3c7; color: #92400e; }
.invite-row-status-accepted { background: #d1fae5; color: #065f46; }
.invite-row-status-revoked  { background: #fee2e2; color: #991b1b; }
.invite-row-status-expired  { background: #e5e7eb; color: #4b5563; }
.invite-row-revoke {
  font-size: 12px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  color: #991b1b;
}
.invite-row-revoke:hover { background: #fef2f2; }
.invite-row-email { color: var(--ink-soft, #6b7280); }
.member-row-id { font-family: ui-monospace, monospace; font-size: 12px; color: var(--ink-soft, #6b7280); }
.section-sub-mini { margin: 6px 0 10px; font-size: 13px; color: var(--ink-soft, #6b7280); }
.member-row-actions { margin-left: auto; display: flex; gap: 6px; }
.member-row-action {
  font-size: 12px; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--ink-faint, #e5e7eb);
  background: #fff; cursor: pointer; color: var(--ink-soft, #6b7280);
}
.member-row-action:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.member-row-action:disabled { opacity: 0.5; cursor: not-allowed; }
.member-row-action-leave:hover { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.household-row-meta { display: flex; flex-direction: column; gap: 2px; }
.household-row-name { font-weight: 600; }
.household-row-sub { font-size: 12px; color: var(--ink-soft, #6b7280); }
.household-row-active { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--paper-soft, #f6efe1); color: var(--accent-deep, #2d5a3d); font-weight: 600; }
.member-row-you { font-size: 11px; color: var(--accent, #5b8def); font-weight: 600; }
.member-row-rel {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--paper-soft, #f6efe1);
  border: 1px solid var(--border-soft, #e6dcc6);
  color: var(--accent-deep, #9a5828);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
[data-theme="dark"] .member-row-rel {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: var(--accent, #e0a76b);
}

.signup-request-row {
  padding: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.signup-request-name { font-weight: 600; }
.signup-request-email { color: var(--ink-soft, #6b7280); }
.signup-request-relationship {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-soft, #f3f4f6);
}
.signup-request-msg {
  margin: 0;
  padding: 8px;
  background: var(--surface-soft, #f9fafb);
  border-left: 3px solid var(--line, #e5e7eb);
  border-radius: 4px;
  font-size: 13px;
  color: var(--ink-soft, #4b5563);
}
.signup-request-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.signup-request-role {
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
  display: flex;
  align-items: center;
  gap: 4px;
}
.signup-request-role select {
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
}

/* ======================================================
 * Phase 4c-lite: Pregnancy, kick counter, voice, birth-transition, onboarding
 * ====================================================== */

/* Gestation chip in top bar */
.gestation-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-right: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  color: #831843;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #fbcfe8;
}
.gestation-chip-weeks { font-weight: 700; }
.gestation-chip-eta { font-weight: 500; font-size: 11px; opacity: 0.85; }
.gestation-chip[hidden] { display: none; }

/* Voice toggle */
.voice-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 6px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--ink-soft, #6b7280);
  cursor: pointer;
  transition: all 0.15s;
}
.voice-toggle:hover { background: var(--surface-soft, #f3f4f6); }
.voice-toggle-active {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
  animation: voice-pulse 1.8s infinite;
}
@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
.voice-badge {
  position: fixed;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  background: var(--ink, #111827);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.voice-badge-pulse { opacity: 1; }

/* Kick counter */
.kick-counter-panel {
  margin: 16px;
}
.kick-counter-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  padding: 20px;
}
.kick-counter-head h3 { margin: 0 0 4px; font-size: 18px; }
.kick-counter-sub { margin: 0 0 16px; color: var(--ink-soft, #6b7280); font-size: 13px; line-height: 1.4; }
.kick-counter-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 160px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  color: #831843;
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.12s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.kick-counter-btn:active {
  transform: scale(0.97);
  box-shadow: 0 0 0 4px rgba(244, 114, 182, 0.25);
}
.kick-counter-count {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.kick-counter-label {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.85;
}
.kick-counter-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}
.kick-counter-end {
  font-size: 13px;
  padding: 8px 14px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--surface, #fff);
  border-radius: 8px;
  cursor: pointer;
}
.kick-recent { margin-top: 18px; }
.kick-recent h4 { margin: 0 0 8px; font-size: 14px; color: var(--ink-soft, #6b7280); font-weight: 600; }
.kick-recent-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.kick-recent-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--surface-soft, #f9fafb);
  border-radius: 6px;
  font-size: 13px;
}
.kick-recent-when { color: var(--ink-soft, #6b7280); flex: 1 1 auto; }
.kick-recent-count { font-weight: 600; }
.kick-recent-dur { color: var(--ink-soft, #6b7280); margin-left: 12px; }

/* ---- Phase 6.3 iter 3: inline kick counter panel ---- */
.kick-panel-inline { width: 100%; }
.kick-panel-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.kick-tap-btn {
  appearance: none;
  border: none;
  background: linear-gradient(135deg, #f5b9c8 0%, #e08aa1 100%);
  color: #5a2236;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(224, 138, 161, 0.32), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 90ms ease, box-shadow 200ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.kick-tap-btn:active {
  transform: scale(0.96);
  box-shadow: 0 4px 14px rgba(224, 138, 161, 0.3), inset 0 1px 0 rgba(255,255,255,0.5);
}
.kick-tap-count {
  font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
  font-size: 80px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.kick-tap-label {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  padding: 0 18px;
}
.kick-panel-stats {
  display: flex;
  gap: 28px;
  width: 100%;
  justify-content: center;
}
.kick-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kick-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft, #6b7280); }
.kick-stat-value { font-size: 18px; font-weight: 600; color: var(--ink, #1f2937); }
.kick-panel-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.kick-recent-block { width: 100%; border-top: 1px solid var(--line, #e5e7eb); padding-top: 14px; margin-top: 4px; }
.kick-recent-title { margin: 0 0 8px; font-size: 13px; color: var(--ink-soft, #6b7280); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.kick-recent-empty { list-style: none; color: var(--ink-soft, #6b7280); font-size: 13px; font-style: normal; padding: 8px 0; }

/* ---- Phase 6.3 iter 3: interactive checklist ---- */
.checklist { display: flex; flex-direction: column; gap: 4px; }
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 120ms ease;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink, #1f2937);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.checklist-item:hover { background: var(--surface-soft, #f9fafb); }
.checklist-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--line-strong, #cbd5e1);
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  position: relative;
  transition: border-color 120ms ease, background-color 120ms ease;
  background: var(--surface, #fff);
}
.checklist-item input[type="checkbox"]:checked {
  background: #5a8c6d;
  border-color: #5a8c6d;
}
.checklist-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.checklist-item.is-checked span {
  text-decoration: line-through;
  color: var(--ink-soft, #6b7280);
}
.checklist-progress {
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink-soft, #6b7280);
  font-weight: 500;
}
.checklist-complete {
  margin-top: 10px;
  padding: 12px 16px;
  background: #ecfdf5;
  color: #065f46;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
}
.checklist-complete[hidden] { display: none !important; }
.checklist-complete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #10b981;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

/* ---- Phase 6.3 iter 3: stage-aware FAB tiles ---- */
body[data-stage="pregnancy"] [data-fab-stage="baby"] { display: none !important; }
body[data-stage="baby"] [data-fab-stage="pregnancy"] { display: none !important; }
/* data-fab-stage="both" is always shown */

/* ---- Phase 6.3 iter 4: stage-aware Quick Actions cards ---- */
body[data-stage="pregnancy"] [data-qa-stage="baby"] { display: none !important; }
body[data-stage="baby"] [data-qa-stage="pregnancy"] { display: none !important; }

/* ---- Phase 6.3 iter 4: collapsible Settings nav (disclosure pattern) ---- */
.settings-nav-disclosure {
  margin: 0 16px 8px;
}
.settings-nav-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink, #1f2937);
  transition: background-color 120ms ease;
}
.settings-nav-summary::-webkit-details-marker { display: none; }
.settings-nav-summary::marker { content: ''; }
.settings-nav-summary:hover { background: var(--surface-soft, #f9fafb); }
.settings-nav-summary-icon {
  font-size: 14px;
  color: var(--ink-soft, #6b7280);
  transition: transform 200ms ease;
  display: inline-block;
}
.settings-nav-disclosure[open] .settings-nav-summary-icon {
  transform: rotate(180deg);
}
.settings-nav-disclosure[open] .settings-nav-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.settings-nav-disclosure .settings-nav-grouped {
  margin: 0;
  padding: 14px 16px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-top: none;
  border-radius: 0 0 12px 12px;
  animation: settings-nav-slide 160ms ease;
}
@keyframes settings-nav-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Auto-collapse on Settings scroll-down (toggled by JS) */
.settings-nav-disclosure.is-scroll-collapsed[open] {
  /* visual hint that user scrolled — pulse the closed state */
}

/* Modal backdrop (used by birth transition + onboarding) */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(17, 24, 39, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}
.modal-backdrop.open { display: flex; }
.modal-card {
  background: var(--surface, #fff);
  border-radius: 16px;
  padding: 28px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--ink-soft, #6b7280);
}
.birth-modal h3, .onboarding-modal h3 { margin: 0 0 4px; font-size: 22px; }

/* Onboarding fork */
.onboarding-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 480px) {
  .onboarding-choices { grid-template-columns: 1fr; }
}
.onboarding-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 12px;
  background: var(--surface-soft, #f9fafb);
  border: 2px solid var(--line, #e5e7eb);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.onboarding-choice:hover {
  border-color: var(--accent, #5b8def);
  background: var(--surface, #fff);
}
.onboarding-choice-emoji { font-size: 32px; }
.onboarding-choice-title { font-size: 16px; font-weight: 600; }
.onboarding-choice-sub { font-size: 12px; color: var(--ink-soft, #6b7280); text-align: center; }
.onboarding-forms { margin-top: 16px; }
.onboarding-form { display: flex; flex-direction: column; gap: 12px; }

/* Phase 4c-lite: Icon picker */
.icon-preview-row { display: flex; gap: 16px; align-items: center; margin: 12px 0; }
.icon-preview {
  width: 80px; height: 80px;
  border-radius: 18px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--surface-soft, #f9fafb);
  object-fit: cover;
}
.icon-choice-buttons { display: flex; flex-direction: column; gap: 6px; }
.icon-radio { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.icon-options { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; }

/* =====================================================================
   Phase 4d-lite UX: styled display_name modal (invite acceptance)
   ===================================================================== */
.display-name-modal {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.display-name-modal[hidden] { display: none !important; }
.display-name-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 8, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
}
.display-name-modal-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  animation: dnm-pop 200ms ease-out;
}
@keyframes dnm-pop {
  from { transform: translateY(6px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.display-name-modal-title {
  margin: 0 0 6px;
  font-family: var(--serif, var(--sans));
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.display-name-modal-sub {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.5;
}
.display-name-modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.display-name-modal-input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--cream, #fbf7ef);
  border: 1px solid var(--rule);
  border-radius: 12px;
  transition: border-color var(--t), background var(--t);
  -webkit-appearance: none;
}
.display-name-modal-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper);
}
.display-name-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.display-name-modal-skip,
.display-name-modal-save {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.display-name-modal-skip {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink-muted);
}
.display-name-modal-skip:hover { border-color: var(--accent); color: var(--ink); }
.display-name-modal-save {
  background: var(--accent, #8a2f1b);
  border: 1px solid var(--accent, #8a2f1b);
  color: #fff;
}
.display-name-modal-save:hover { filter: brightness(1.08); }
.display-name-modal-save:active { transform: translateY(1px); }
body.display-name-modal-open { overflow: hidden; }

/* =====================================================================
   Phase 4d-lite UX: 'Add to Home Screen' tip banner (iOS Safari only)
   ===================================================================== */
.a2hs-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 1400;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
  animation: a2hs-slide-up 280ms ease-out;
}
.a2hs-banner[hidden] { display: none !important; }
@keyframes a2hs-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.a2hs-banner-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cream, #fbf7ef);
  color: var(--accent, #8a2f1b);
}
.a2hs-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}
.a2hs-banner-text em {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}
.a2hs-banner-text strong { color: var(--ink); }
.a2hs-banner-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  color: var(--accent, #8a2f1b);
  margin: 0 2px;
}
.a2hs-banner-close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--ink-muted);
  font-size: 22px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.a2hs-banner-close:hover { background: var(--cream, #fbf7ef); color: var(--ink); }
@media (max-width: 380px) {
  .a2hs-banner-icon { display: none; }
}

/* =====================================================================
   Phase 5: Onboarding (hybrid landing strip + new-tenant wizard)
   ===================================================================== */

/* --- Landing strip (logged-out or no-household visitors) --- */
.platform-strip {
  background: linear-gradient(135deg, #fbf3e8 0%, #f3e1cc 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius, 14px);
  padding: 22px 22px 20px;
  margin: 18px 16px 22px;
  box-shadow: 0 4px 14px rgba(60, 30, 10, 0.04);
}
.platform-strip-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.platform-strip-text {
  flex: 1 1 280px;
  min-width: 220px;
}
.platform-strip-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #8a2f1b);
  margin-bottom: 6px;
}
.platform-strip-title {
  font-family: var(--serif, var(--sans));
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.platform-strip-sub {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-muted, #6b594b);
  margin: 0;
}
.platform-strip-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}
.platform-strip-primary,
.platform-strip-secondary {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter var(--t), border-color var(--t), background var(--t);
  white-space: nowrap;
}
.platform-strip-primary {
  background: var(--accent, #8a2f1b);
  border: 1px solid var(--accent, #8a2f1b);
  color: #fff;
}
.platform-strip-primary:hover { filter: brightness(1.08); }
.platform-strip-secondary {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
}
.platform-strip-secondary:hover { border-color: var(--accent); }
@media (max-width: 560px) {
  .platform-strip { margin: 14px 10px 18px; padding: 18px; }
  .platform-strip-title { font-size: 19px; }
  .platform-strip-actions { width: 100%; }
  .platform-strip-primary,
  .platform-strip-secondary { width: 100%; text-align: center; }
}

/* --- Onboarding wizard modal --- */
.onboarding-wizard {
  position: fixed;
  inset: 0;
  z-index: 1750;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.onboarding-wizard[hidden] { display: none !important; }
.onboarding-wizard-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 8, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
}
.onboarding-wizard-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius, 14px);
  padding: 28px 26px 24px;
  max-width: 520px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  animation: ob-pop 220ms ease-out;
}
@keyframes ob-pop {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.onboarding-wizard-title {
  margin: 0 0 6px;
  font-family: var(--serif, var(--sans));
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.onboarding-wizard-sub {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--ink-muted, #6b594b);
  line-height: 1.5;
}
.onboarding-wizard-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.onboarding-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.onboarding-field label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.onboarding-optional {
  font-weight: 400;
  color: var(--ink-muted, #6b594b);
  font-size: 12px;
}
.onboarding-field input,
.onboarding-field select {
  font-family: var(--sans);
  font-size: 16px;
  padding: 11px 13px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--cream, #fbf7ef);
  color: var(--ink);
  transition: border-color var(--t), background var(--t);
  -webkit-appearance: none;
}
.onboarding-field input:focus,
.onboarding-field select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper);
}
.onboarding-hint {
  font-size: 12px;
  color: var(--ink-muted, #6b594b);
  margin-top: 2px;
}
.onboarding-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 480px) {
  .onboarding-field-row { grid-template-columns: 1fr; }
}
.onboarding-stage-fieldset {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px 14px 10px;
  margin: 0;
  background: var(--cream, #fbf7ef);
}
.onboarding-stage-fieldset legend {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  padding: 0 6px;
}
.onboarding-stage-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
}
.onboarding-stage-option input[type="radio"] {
  /* Custom-rendered radio so iOS Safari shows a clear filled state without
     depending on accent-color (which is inconsistent across iOS versions). */
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--rule, #d3c8b1);
  border-radius: 50%;
  background: #fff;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.onboarding-stage-option input[type="radio"]:checked {
  border-color: var(--accent, #b6552c);
}
.onboarding-stage-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent, #b6552c);
  transform: translate(-50%, -50%);
}
.onboarding-stage-option input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent, #b6552c);
  outline-offset: 2px;
}
.onboarding-stage-option span {
  line-height: 1.3;
}
.onboarding-wizard-msg {
  margin: 0;
  font-size: 13px;
  min-height: 18px;
}
.onboarding-wizard-msg--error  { color: #a23a1a; }
.onboarding-wizard-msg--success { color: #2f6f3a; }
.onboarding-wizard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}
.onboarding-wizard-cancel,
.onboarding-wizard-submit {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t), filter var(--t), border-color var(--t);
}
.onboarding-wizard-cancel {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink-muted, #6b594b);
}
.onboarding-wizard-cancel:hover { border-color: var(--accent); color: var(--ink); }
.onboarding-wizard-submit {
  background: var(--accent, #8a2f1b);
  border: 1px solid var(--accent, #8a2f1b);
  color: #fff;
}
.onboarding-wizard-submit:hover { filter: brightness(1.08); }
.onboarding-wizard-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
body.onboarding-wizard-open { overflow: hidden; }

/* --- Admin: scaling alerts (Settings) --- */
.scaling-alerts-section { margin: 14px 0 22px; }
.scaling-alerts-section h3 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.scaling-alert-card {
  background: var(--cream, #fbf7ef);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent, #8a2f1b);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 14px;
}
.scaling-alert-card.acked {
  opacity: 0.55;
  border-left-color: #999;
}
.scaling-alert-threshold {
  font-weight: 600;
  color: var(--accent, #8a2f1b);
  font-size: 13px;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.scaling-alert-msg { color: var(--ink); margin: 0 0 6px; font-weight: 500; }
.scaling-alert-reco { color: var(--ink-muted, #6b594b); margin: 0 0 8px; line-height: 1.45; font-size: 13.5px; }
.scaling-alert-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-muted, #6b594b);
}
.scaling-alert-ack {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink);
}
.scaling-alert-ack:hover { border-color: var(--accent); }
.platform-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 480px) { .platform-stats { grid-template-columns: 1fr 1fr; } }
.platform-stat {
  background: var(--cream, #fbf7ef);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
}
.platform-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted, #6b594b);
}
.platform-stat-value {
  font-family: var(--serif, var(--sans));
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

/* =====================================================
   OPTION C — PUBLIC SHOWCASE (logged-out visitors)
===================================================== */

/* When showcase is active, lock the app shell out of view */
body.public-showcase-active {
  overflow: hidden;
}
body.public-showcase-active [data-app-shell] {
  display: none !important;
}
body.public-showcase-active [data-public-hide] {
  display: none !important;
}

/* Showcase container — full-screen overlay */
.public-showcase {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.public-showcase-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 28px 64px;
}

.public-showcase-header {
  margin-bottom: 28px;
}

.public-showcase-brand {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.public-showcase-moon {
  flex-shrink: 0;
  margin-top: 4px;
}

.public-showcase-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent-deep);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.public-showcase-title {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.public-showcase-lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 640px;
}

.public-showcase-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.public-showcase-feature {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.public-showcase-feature-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.public-showcase-feature p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.public-showcase-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--cream-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 24px;
}

.public-showcase-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.public-showcase-cta-text strong {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
}

.public-showcase-cta-text span {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.public-showcase-signin {
  flex-shrink: 0;
  background: var(--burgundy);
  color: #fbf7ef;
  border: none;
  border-radius: 10px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
}

.public-showcase-signin:hover {
  background: var(--burgundy-soft);
}

.public-showcase-signin:active {
  transform: translateY(1px);
}

.public-showcase-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-muted);
  padding-top: 12px;
}

.public-showcase-footer a {
  color: var(--ink-muted);
}

.public-showcase-footer a:hover {
  color: var(--burgundy);
}

.public-showcase-sep {
  opacity: 0.5;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .public-showcase-inner { padding: 32px 18px 48px; }
  .public-showcase-title { font-size: 26px; }
  .public-showcase-lede { font-size: 15px; }
  .public-showcase-features { grid-template-columns: 1fr; gap: 10px; }
  .public-showcase-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
  .public-showcase-signin { width: 100%; }
}

/* ============================================================
   v134 (Iter 7.16) — Pre-auth landing hero + carousel
   ============================================================
   Goal: make Get-started CTA visible above the fold on 390x844,
   and preview the product with a swipeable screenshot carousel.
   Phase A ships layout + placeholder slides; Phase B adds real
   screenshots; Phase C wires the auto-advance/keyboard logic.
*/
.public-showcase-inner { padding: 0 0 48px; max-width: 1120px; }

/* Hide the legacy showcase-header block (replaced by .showcase-brandbar) */
.public-showcase-header { display: none; }

/* Compact brand strip */
.showcase-brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  max-width: 1120px;
  margin: 0 auto;
  border-bottom: 1px solid color-mix(in oklab, var(--ink, #2b2a25) 8%, transparent);
}
.showcase-brandbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink, #2b2a25);
}
.showcase-brandbar-brand:hover { opacity: 0.85; text-decoration: none; }
.showcase-brandbar-name {
  font-family: var(--serif, Georgia, serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.showcase-brandbar-signin {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--ink, #2b2a25) 18%, transparent);
  color: var(--ink, #2b2a25);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
  min-height: 36px;
}
.showcase-brandbar-signin:hover {
  background: color-mix(in oklab, var(--ink, #2b2a25) 4%, transparent);
  border-color: color-mix(in oklab, var(--ink, #2b2a25) 28%, transparent);
}
.showcase-brandbar-signin:focus-visible {
  outline: 2px solid var(--accent, #b6843b);
  outline-offset: 2px;
}

/* Hero — two-column on desktop, stacked on mobile */
.showcase-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 32px 48px;
}
.showcase-hero-copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.showcase-carousel { min-width: 0; }
.showcase-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #b6843b);
}
.showcase-hero-title {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink, #2b2a25);
  margin: 0;
}
.showcase-hero-lede {
  font-size: 17px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--ink, #2b2a25) 75%, transparent);
  margin: 0;
  max-width: 38ch;
}
.showcase-hero-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.showcase-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent, #b6843b);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 22px;
  min-height: 50px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px color-mix(in oklab, var(--accent, #b6843b) 32%, transparent);
  transition: transform 120ms ease, box-shadow 200ms ease, background 160ms ease;
  align-self: flex-start;
  max-width: 360px;
}
.showcase-hero-primary:hover {
  background: color-mix(in oklab, var(--accent, #b6843b) 92%, black);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 8px 20px color-mix(in oklab, var(--accent, #b6843b) 40%, transparent);
}
.showcase-hero-primary:active { transform: translateY(1px); }
.showcase-hero-primary:focus-visible {
  outline: 2px solid var(--ink, #2b2a25);
  outline-offset: 3px;
}
.showcase-hero-cta-sub {
  font-size: 13px;
  color: color-mix(in oklab, var(--ink, #2b2a25) 60%, transparent);
  margin: 0;
  max-width: 360px;
}

/* Carousel */
.showcase-carousel {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.showcase-carousel-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 32px;
  margin: 0 -32px;
  scroll-padding: 0 32px;
}
.showcase-carousel-track::-webkit-scrollbar { display: none; }
.showcase-slide {
  flex: 0 0 auto;
  width: calc(100% - 56px);
  max-width: 320px;
  scroll-snap-align: center;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.showcase-slide-frame {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  background: var(--paper, #fbf7ef);
  border: 1px solid color-mix(in oklab, var(--ink, #2b2a25) 10%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 14px 32px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
}
.showcase-slide-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.showcase-slide-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--accent, #b6843b) 12%, var(--paper, #fbf7ef)) 0%,
    var(--paper, #fbf7ef) 65%);
}
.showcase-slide-placeholder-label {
  font-family: var(--serif, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  color: color-mix(in oklab, var(--ink, #2b2a25) 70%, transparent);
  padding: 0 18px;
  text-align: center;
}
.showcase-slide-caption {
  font-size: 13px;
  line-height: 1.4;
  color: color-mix(in oklab, var(--ink, #2b2a25) 70%, transparent);
  text-align: center;
  padding: 0 8px;
}
.showcase-carousel-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.showcase-carousel-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.showcase-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--ink, #2b2a25) 22%, transparent);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, width 200ms ease;
}
.showcase-carousel-dot.is-active {
  background: var(--accent, #b6843b);
  width: 22px;
  border-radius: 999px;
}
.showcase-carousel-dot:focus-visible {
  outline: 2px solid var(--accent, #b6843b);
  outline-offset: 3px;
}
.showcase-carousel-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ink, #2b2a25) 50%, transparent);
  font-weight: 600;
}
.showcase-carousel-hint svg { opacity: 0.7; }
.showcase-carousel-hint.is-dimmed { opacity: 0.4; }

/* Below-fold section */
.showcase-belowfold {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 32px 12px;
  border-top: 1px solid color-mix(in oklab, var(--ink, #2b2a25) 7%, transparent);
}
.showcase-belowfold-title {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink, #2b2a25);
  margin: 0 0 8px;
}
.showcase-belowfold-lede {
  font-size: 15px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--ink, #2b2a25) 70%, transparent);
  margin: 0 0 32px;
  max-width: 56ch;
}
.showcase-belowfold .public-showcase-features {
  margin-bottom: 36px;
}
.showcase-belowfold-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  padding: 24px 0 8px;
}
.public-showcase-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 32px 0;
}

/* Mobile (<=640px) overrides */
@media (max-width: 640px) {
  .showcase-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 22px 18px 28px;
  }
  .showcase-hero-copy { gap: 12px; }
  .showcase-hero-lede { font-size: 15px; }
  .showcase-hero-primary { width: 100%; max-width: none; }
  .showcase-hero-cta-sub { max-width: none; text-align: center; }
  .showcase-belowfold { padding: 44px 18px 12px; }
  .public-showcase-footer { padding: 20px 18px 0; }
  .showcase-brandbar { padding: 12px 18px; }
  .showcase-carousel { max-width: none; }
  .showcase-carousel-track { padding: 4px 18px; margin: 0 -18px; scroll-padding: 0 18px; }
  .showcase-slide { width: calc(100% - 28px); max-width: 300px; }
  .showcase-slide-frame { aspect-ratio: 9 / 14.5; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .showcase-hero-primary, .showcase-carousel-dot { transition: none; }
}

/* ============================================================
   Phase 6: Baby Details form (settings-subject section)
   ============================================================ */
.subject-form {
  margin-top: 8px;
}
.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.subject-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.subject-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1f2937);
}
.subject-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-soft, #6b7280);
  margin-left: 4px;
}
.subject-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink, #1f2937);
  background: #fff;
  box-sizing: border-box;
}
.subject-input:focus {
  outline: none;
  border-color: var(--accent, #b6843b);
  box-shadow: 0 0 0 3px rgba(182, 132, 59, 0.18);
}
.subject-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.subject-status {
  font-size: 13px;
  color: var(--ink-soft, #6b7280);
}
.subject-status[data-error="true"] { color: #c0392b; }
.subject-status[data-ok="true"]    { color: #15803d; }
.subject-meta {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
}
.subject-transition {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--line, #e5e7eb);
}

/* Pregnancy -> Postpartum transition banner */
.transition-banner {
  position: relative;
  margin: 16px;
  padding: 18px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
  border: 1px solid #f59e0b;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);
  display: flex;
  align-items: center;
  gap: 14px;
}
.transition-banner-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.transition-banner-body {
  flex: 1;
  min-width: 0;
}
.transition-banner-title {
  font-size: 15px;
  font-weight: 700;
  color: #92400e;
  margin: 0 0 4px 0;
}
.transition-banner-text {
  font-size: 13px;
  color: #78350f;
  margin: 0;
  line-height: 1.45;
}
.transition-banner-dismiss {
  background: none;
  border: none;
  color: #92400e;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.6;
  flex-shrink: 0;
}
.transition-banner-dismiss:hover { opacity: 1; }

/* ============================================================
   Phase 6.2: Admin tab + admin panel
   ============================================================ */
.tab.tab-admin {
  /* Admin tab gets a subtle "owner" visual treatment */
}
.tab.tab-admin .tab-icon {
  color: #b6843b;
}
.tab.tab-admin.active .tab-icon,
.tab.tab-admin[aria-selected="true"] .tab-icon {
  color: #6b3410;
}
.tab-label-admin {
  font-size: 13px;
  font-weight: 600;
  margin-left: 4px;
}

.hero-admin {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
  border-bottom: 1px solid #f59e0b;
}

.admin-refresh-row {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-table-wrap {
  margin: 14px 0;
  overflow-x: auto;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  background: #fff;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft, #6b7280);
  padding: 10px 12px;
  background: var(--cream, #faf6ef);
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.admin-table th.num,
.admin-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.admin-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--line-soft, #f3f4f6);
  vertical-align: top;
}
.admin-table tbody tr:last-child td {
  border-bottom: none;
}
.admin-cell-sub {
  font-size: 11px;
  color: var(--ink-soft, #6b7280);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  margin-top: 2px;
}
.admin-variant-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-variant-harrykissoon {
  background: rgba(182, 132, 59, 0.15);
  color: #6b3410;
}
.admin-variant-neutral {
  background: rgba(107, 114, 128, 0.12);
  color: var(--ink, #1f2937);
}

/* ============================================================
   Phase 6.2: Grouped settings nav
   ============================================================ */
.settings-nav-grouped {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  padding: 16px;
}
.settings-nav-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.settings-nav-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft, #6b7280);
  margin-right: 6px;
  min-width: 70px;
}
@media (max-width: 640px) {
  .settings-nav-group-label {
    min-width: 100%;
    margin-right: 0;
    margin-bottom: 2px;
  }
}

/* ============================================================
   Phase 6.3 — Prenatal Mode
   Stage gating + prenatal hero/arc/readout/scrubber/visits/modal
   ============================================================ */

/* Stage gating: visibility driven by body[data-stage]. Default to hidden
   (via [hidden]) until applyStageGate() runs in app.js. */
body[data-stage="pregnancy"] [data-stage-only="baby"] { display: none !important; }
body[data-stage="baby"] [data-stage-only="pregnancy"] { display: none !important; }

/* Soft fade-in for prenatal panels when they become visible. */
body[data-stage="pregnancy"] [data-stage-only="pregnancy"] {
  animation: prenatalFadeIn 240ms ease-out;
}
@keyframes prenatalFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Gestation arc hero ---------- */
.hero-prenatal {
  background: linear-gradient(
    160deg,
    color-mix(in oklab, var(--accent, #ec4899) 8%, var(--bg, #fff)) 0%,
    var(--card-bg, #fff) 55%,
    var(--card-bg, #fff) 100%
  );
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 18px;
  padding: 20px 22px 22px;
  margin-bottom: 18px;
}
.hero-prenatal-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.hero-prenatal-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft, #6b7280);
}
.hero-prenatal-trimester {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent, #ec4899) 14%, transparent);
  color: var(--accent, #ec4899);
}
.hero-prenatal-headline {
  margin: 0 0 4px 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.18;
  color: var(--ink, #111827);
}
.hero-prenatal-headline .hero-prenatal-ga {
  color: var(--accent, #ec4899);
}
.hero-prenatal-sub {
  margin: 0 0 14px 0;
  color: var(--ink-soft, #6b7280);
  font-size: 14px;
  line-height: 1.45;
}

/* Gestation arc SVG */
[data-gestation-arc] {
  display: block;
  width: 100%;
  max-width: 540px;
  margin: 6px auto 12px;
}
[data-gestation-arc] svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Readout cards row */
.prenatal-readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.prenatal-readout-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 0;
}
.prenatal-readout-card .pr-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft, #6b7280);
  margin-bottom: 4px;
}
.prenatal-readout-card .pr-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #111827);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Up-next visit pill */
.prenatal-upnext {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: var(--card-bg, #fff);
}
.prenatal-upnext-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft, #6b7280);
  margin-bottom: 4px;
}
.prenatal-upnext-visit {
  font-weight: 700;
  color: var(--ink, #111827);
  font-size: 15px;
}
.prenatal-upnext-week {
  color: var(--accent, #ec4899);
  font-weight: 700;
  margin-left: 6px;
}
.prenatal-upnext-body {
  margin-top: 4px;
  color: var(--ink-soft, #6b7280);
  font-size: 14px;
  line-height: 1.45;
}

/* Highlight (this week) section */
.prenatal-highlight {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--accent, #ec4899) 6%, var(--card-bg, #fff));
  border: 1px solid color-mix(in oklab, var(--accent, #ec4899) 14%, var(--border, #e5e7eb));
}
.prenatal-highlight-title {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #111827);
}
.prenatal-highlight-body {
  margin: 0 0 8px 0;
  color: var(--ink, #111827);
  font-size: 14px;
  line-height: 1.5;
}
.prenatal-highlight-bullets {
  margin: 6px 0 0 0;
  padding-left: 18px;
  color: var(--ink, #111827);
  font-size: 13.5px;
  line-height: 1.5;
}
.prenatal-highlight-bullets li { margin-bottom: 2px; }
.prenatal-highlight-mom {
  margin: 8px 0 0 0;
  color: var(--ink-soft, #6b7280);
  font-size: 13px;
  font-style: normal;
}

/* ---------- Fetal Development scrubber ---------- */
.fetal-dev-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 16px 18px;
}
.fetal-dev-scrubber {
  margin: 10px 0 8px;
}
.fetal-dev-scrubber input[type="range"] {
  width: 100%;
  accent-color: var(--accent, #ec4899);
}
.fetal-dev-week-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-soft, #6b7280);
  font-weight: 600;
  margin-top: 2px;
}
.fetal-dev-week-tick { padding: 0 2px; }
.fetal-dev-week-tick.is-current {
  color: var(--accent, #ec4899);
  font-weight: 700;
}
.fetal-dev-week-display {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.fetal-dev-week-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, #111827);
}
.fetal-dev-trimester {
  font-size: 12px;
  color: var(--accent, #ec4899);
  font-weight: 600;
}
.fetal-dev-size {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  background: color-mix(in oklab, var(--accent, #ec4899) 5%, transparent);
  border-radius: 10px;
}
.fetal-dev-thumb {
  font-size: 32px;
  line-height: 1;
  flex: 0 0 auto;
}
.fetal-dev-size-text {
  flex: 1 1 auto;
  min-width: 0;
}
.fetal-dev-size-label {
  font-weight: 700;
  color: var(--ink, #111827);
}
.fetal-dev-weight {
  color: var(--ink-soft, #6b7280);
  font-size: 13px;
  margin-top: 2px;
}
.fetal-dev-highlight {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #111827);
  line-height: 1.4;
}
.fetal-dev-bullets {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--ink, #111827);
  font-size: 14px;
  line-height: 1.55;
}
.fetal-dev-bullets li { margin-bottom: 3px; }
.fetal-dev-mom {
  margin-top: 12px;
  padding: 10px 12px;
  background: color-mix(in oklab, var(--bg-soft, #f9fafb) 60%, transparent);
  border-left: 3px solid var(--accent, #ec4899);
  border-radius: 6px;
  color: var(--ink, #111827);
  font-size: 13.5px;
  line-height: 1.5;
}
.fetal-dev-sources {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
  line-height: 1.5;
}
.fetal-dev-sources a {
  color: var(--ink-soft, #6b7280);
  text-decoration: underline;
}
.fetal-dev-sources a:hover {
  color: var(--accent, #ec4899);
}

/* ---------- Prenatal visits list ---------- */
.prenatal-visit-row {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--card-bg, #fff);
  transition: background 200ms ease, border-color 200ms ease;
}
.prenatal-visit-row.visit-done {
  background: color-mix(in oklab, var(--success, #10b981) 8%, var(--card-bg, #fff));
  border-color: color-mix(in oklab, var(--success, #10b981) 24%, var(--border, #e5e7eb));
  opacity: 0.94;
}
.prenatal-visit-row.visit-now {
  border-color: var(--accent, #ec4899);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent, #ec4899) 18%, transparent);
}
.prenatal-visit-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.prenatal-visit-week {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent, #ec4899);
}
.prenatal-visit-label {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink, #111827);
}
.prenatal-visit-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--success, #10b981) 18%, transparent);
  color: var(--success, #10b981);
}
.prenatal-visit-body {
  font-size: 14px;
  color: var(--ink, #111827);
  line-height: 1.5;
  margin: 4px 0 6px;
}
.prenatal-visit-expect, .prenatal-visit-ask {
  font-size: 13.5px;
  margin: 4px 0;
  color: var(--ink, #111827);
  line-height: 1.5;
}
.prenatal-visit-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.prenatal-visit-source {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
}
.prenatal-visit-source a {
  color: var(--ink-soft, #6b7280);
  text-decoration: underline;
}

/* ---------- Maternal health quick-log ---------- */
.maternal-quicklog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
[data-maternal-log] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card-bg, #fff);
  color: var(--ink, #111827);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 80ms ease;
}
[data-maternal-log]:hover {
  background: color-mix(in oklab, var(--accent, #ec4899) 6%, var(--card-bg, #fff));
  border-color: color-mix(in oklab, var(--accent, #ec4899) 20%, var(--border, #e5e7eb));
}
[data-maternal-log]:active { transform: scale(0.97); }

.maternal-entry-list { list-style: none; padding: 0; margin: 8px 0 0; }
.maternal-entry-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
}
.maternal-entry-row:last-child { border-bottom: 0; }
.maternal-entry-label {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink, #111827);
}
.maternal-entry-when {
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
}
.maternal-entry-notes {
  font-size: 13px;
  color: var(--ink, #111827);
  width: 100%;
  margin-top: 2px;
  line-height: 1.4;
}

/* ---------- Prenatal action buttons ---------- */
.prenatal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 160ms ease, transform 80ms ease;
}
.prenatal-btn-primary {
  background: var(--accent, #ec4899);
  color: #fff;
}
.prenatal-btn-primary:hover {
  background: color-mix(in oklab, var(--accent, #ec4899) 88%, #000);
}
.prenatal-btn-secondary {
  background: transparent;
  color: var(--ink, #111827);
  border-color: var(--border, #e5e7eb);
}
.prenatal-btn-secondary:hover {
  background: var(--bg-soft, #f9fafb);
}
.prenatal-btn:active { transform: scale(0.97); }

/* ---------- Birth transition modal ---------- */
.birth-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.46);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 16px;
}
.birth-modal-body {
  background: var(--card-bg, #fff);
  border-radius: 16px;
  padding: 22px 24px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.birth-modal-title {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink, #111827);
}
.birth-modal-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.birth-modal-field { display: flex; flex-direction: column; gap: 4px; }
.birth-modal-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.birth-modal-field input,
.birth-modal-field select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card-bg, #fff);
  color: var(--ink, #111827);
  font-size: 15px;
}
.birth-modal-msg {
  font-size: 13px;
  color: var(--ink-soft, #6b7280);
  min-height: 16px;
}
.birth-modal-msg.is-error { color: var(--danger, #ef4444); }
.birth-modal-msg.is-success { color: var(--success, #10b981); }
.birth-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ---------- Mobile tightening ---------- */
@media (max-width: 480px) {
  .hero-prenatal { padding: 16px 16px 18px; }
  .hero-prenatal-headline { font-size: 22px; }
  .prenatal-readout-card .pr-value { font-size: 16px; }
  .fetal-dev-week-num { font-size: 18px; }
  .fetal-dev-thumb { font-size: 26px; }
}

/* ============================================================
   Phase 6.3 — Bridging styles for HTML class names that don't match
   the generic prenatal CSS above.
   ============================================================ */

/* The hero block in HTML uses .prenatal-hero / .prenatal-hero-inner. */
.prenatal-hero {
  background: linear-gradient(
    160deg,
    color-mix(in oklab, var(--accent, #ec4899) 8%, var(--bg, #fff)) 0%,
    var(--card-bg, #fff) 55%,
    var(--card-bg, #fff) 100%
  );
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 18px;
  padding: 22px 24px 24px;
  margin-bottom: 18px;
}
.prenatal-hero-inner { max-width: 720px; margin: 0 auto; }
.prenatal-hero .eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft, #6b7280);
  margin-bottom: 6px;
}
.prenatal-hero-title {
  margin: 0 0 6px 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink, #111827);
}
.prenatal-hero-lead {
  margin: 0 0 14px 0;
  color: var(--ink-soft, #6b7280);
  font-size: 14.5px;
  line-height: 1.5;
}

.gestation-arc-wrap {
  display: block;
  width: 100%;
  max-width: 540px;
  margin: 6px auto 14px;
}
.gestation-arc-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Readout row: 3 cards side-by-side, stack on mobile. */
.prenatal-readout-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 600px) {
  .prenatal-readout-row { grid-template-columns: 1fr; }
}
.prenatal-readout-row .prenatal-readout-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prenatal-readout-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft, #6b7280);
}
.prenatal-readout-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink, #111827);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.prenatal-readout-value-soft {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #111827);
}
.prenatal-readout-sub {
  font-size: 12.5px;
  color: var(--ink-soft, #6b7280);
}

/* Spotlight (this week + next visit) */
.prenatal-spotlight { margin: 18px 0; }
.prenatal-spotlight-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .prenatal-spotlight-inner { grid-template-columns: 1fr; }
}
.prenatal-spotlight-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 16px 18px;
}
.prenatal-spotlight-card--highlight {
  background: color-mix(in oklab, var(--accent, #ec4899) 6%, var(--card-bg, #fff));
  border-color: color-mix(in oklab, var(--accent, #ec4899) 14%, var(--border, #e5e7eb));
}
.prenatal-card-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent, #ec4899);
  margin-bottom: 6px;
}
.prenatal-card-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #111827);
}
.prenatal-card-body {
  margin: 0 0 6px 0;
  color: var(--ink, #111827);
  font-size: 14px;
  line-height: 1.5;
}
.prenatal-card-bullets {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--ink, #111827);
  font-size: 13.5px;
  line-height: 1.5;
}
.prenatal-card-bullets li { margin-bottom: 2px; }
.prenatal-card-meta {
  margin: 8px 0 0 0;
  color: var(--ink-soft, #6b7280);
  font-size: 12.5px;
  line-height: 1.4;
}

/* Generic section container used by panels */
.prenatal-section { margin: 18px 0; }
.prenatal-section-inner { max-width: 720px; margin: 0 auto; }
.prenatal-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.prenatal-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #111827);
}
.prenatal-page-title {
  margin: 6px 0 4px 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, #111827);
}
.prenatal-page-lead {
  margin: 0 0 12px 0;
  color: var(--ink-soft, #6b7280);
  font-size: 14px;
}

/* Linky button variant (chevron-style) */
.prenatal-btn-link {
  background: transparent;
  color: var(--accent, #ec4899);
  border: 0;
  padding: 4px 0;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.prenatal-btn-link:hover {
  text-decoration: underline;
}

/* Recent kicks list inside prenatal overview */
.prenatal-recent-kicks {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 12px 14px;
}

/* CTA section */
.prenatal-cta {
  margin: 22px 0 8px;
}
.prenatal-cta-inner {
  background: color-mix(in oklab, var(--accent, #ec4899) 8%, var(--card-bg, #fff));
  border: 1px solid color-mix(in oklab, var(--accent, #ec4899) 18%, var(--border, #e5e7eb));
  border-radius: 14px;
  padding: 16px 18px;
  text-align: center;
}
.prenatal-cta-title {
  margin: 0 0 6px 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, #111827);
}
.prenatal-cta-body {
  margin: 0 0 12px 0;
  color: var(--ink-soft, #6b7280);
  font-size: 14px;
  line-height: 1.5;
}
.prenatal-cta .prenatal-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Maternal Health (HTML-side classnames) */
.maternal-quick-log {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 6px 0 18px;
}
.maternal-quick-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card-bg, #fff);
  color: var(--ink, #111827);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, transform 80ms ease;
}
.maternal-quick-btn:hover {
  background: color-mix(in oklab, var(--accent, #ec4899) 6%, var(--card-bg, #fff));
  border-color: color-mix(in oklab, var(--accent, #ec4899) 20%, var(--border, #e5e7eb));
}
.maternal-quick-btn:active { transform: scale(0.97); }
.maternal-quick-icon {
  font-size: 20px;
  flex: 0 0 24px;
  text-align: center;
}
.maternal-recent { margin-top: 8px; }

/* Fetal dev: HTML-side names */
.fetal-dev-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}
.fetal-dev-card .fetal-dev-week-num {
  font-size: 30px;
  font-weight: 800;
  color: var(--accent, #ec4899);
  line-height: 1;
  padding-top: 4px;
}
.fetal-dev-card-body { min-width: 0; }
.fetal-dev-card-title {
  margin: 0 0 4px 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, #111827);
}
.fetal-dev-card-meta {
  margin: 0 0 8px 0;
  color: var(--ink-soft, #6b7280);
  font-size: 13px;
}
.fetal-dev-card-highlight {
  margin: 0 0 10px 0;
  color: var(--ink, #111827);
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 600;
}
.fetal-dev-subhead {
  margin: 12px 0 4px 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft, #6b7280);
}

/* Fetal scrubber: HTML uses track + thumb. prenatal.js may either render
   labels into [data-fetal-week-labels] or replace innerHTML with a native
   range. Style both surfaces softly. */
.fetal-dev-scrubber {
  position: relative;
  padding: 8px 0 14px;
}
.fetal-dev-scrubber-track {
  width: 100%;
  height: 4px;
  background: color-mix(in oklab, var(--accent, #ec4899) 24%, transparent);
  border-radius: 999px;
}
.fetal-dev-scrubber-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent, #ec4899);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  position: relative;
  margin-top: -11px;
  cursor: pointer;
  outline: none;
}
.fetal-dev-scrubber-thumb:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent, #ec4899) 28%, transparent);
}

/* Prenatal visits list container */
.prenatal-visits-list { margin-top: 10px; }

/* Source links */
.prenatal-source-link, .prenatal-source-link a {
  color: var(--ink-soft, #6b7280);
  text-decoration: underline;
  font-size: 12.5px;
}
.prenatal-source-link:hover { color: var(--accent, #ec4899); }
.prenatal-source-link-wrap { margin: 6px 0 0; font-size: 12px; }

/* Birth-prep grid */
.birth-prep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.birth-prep-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 16px 18px;
}
.birth-prep-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #111827);
}
.birth-prep-list {
  margin: 0;
  padding-left: 18px;
  color: var(--ink, #111827);
  font-size: 14px;
  line-height: 1.55;
}
.birth-prep-list li { margin-bottom: 4px; }
.birth-prep-card p {
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink, #111827);
}

/* ============================================================
   Phase 6.3 Iteration 2 — Palette-aligned prenatal styles
   Override earlier prenatal CSS that used #ec4899 etc.
   ============================================================ */

/* Hero variant for prenatal panels: soft rose-blush + cream gradient
   that matches the postnatal hero palette (uses --rose-bg + --cream). */
.hero.hero-prenatal-bg {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(232, 180, 135, 0.30), transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(200, 122, 58, 0.10), transparent 55%),
    linear-gradient(180deg, var(--rose-bg) 0%, var(--paper) 100%);
}

/* Gestation arc fits the hero generously. */
.hero.hero-prenatal-bg .gestation-arc-wrap {
  max-width: 620px;
  margin: 20px auto 18px;
}

/* Readout cards inside the hero — sit on the cream paper, 3 columns. */
.hero .prenatal-readout-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 720px;
  margin: 8px auto 0;
}
@media (max-width: 640px) {
  .hero .prenatal-readout-row { grid-template-columns: 1fr; }
}
.prenatal-readout-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prenatal-readout-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
}
.prenatal-readout-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.prenatal-readout-value-soft {
  font-size: 18px;
  font-weight: 600;
}
.prenatal-readout-sub {
  font-size: 13px;
  color: var(--ink-muted);
}

/* Spotlight (this-week + upcoming visit) — two-column inside .section-inner */
.prenatal-spotlight-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 720px) {
  .prenatal-spotlight-inner { grid-template-columns: 1fr; }
}
.prenatal-spotlight-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 20px 22px;
}
.prenatal-spotlight-card--highlight {
  background: linear-gradient(180deg, var(--rose-bg) 0%, var(--paper) 100%);
  border-color: var(--accent-soft);
}
.prenatal-card-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-deep);
  margin-bottom: 8px;
}
.prenatal-card-title {
  margin: 0 0 10px 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.prenatal-card-body {
  margin: 0 0 8px 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
}
.prenatal-card-bullets {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.55;
}
.prenatal-card-meta {
  margin: 10px 0 0 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Section head with right-aligned link */
.prenatal-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* Prenatal buttons (palette-aligned) */
.prenatal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 160ms ease, transform 80ms ease, border-color 160ms ease;
  font-family: inherit;
}
.prenatal-btn-primary {
  background: var(--accent);
  color: var(--paper);
}
.prenatal-btn-primary:hover { background: var(--accent-deep); }
.prenatal-btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule);
}
.prenatal-btn-secondary:hover { background: var(--cream); }
.prenatal-btn-link {
  background: transparent;
  border: 0;
  color: var(--accent-deep);
  padding: 4px 0;
  font-weight: 600;
  font-size: 0.95rem;
}
.prenatal-btn-link:hover { text-decoration: underline; }
.prenatal-btn:active { transform: scale(0.97); }

/* Birth-arrived CTA card */
.prenatal-cta-inner {
  background: linear-gradient(180deg, var(--rose-bg), var(--paper));
  border: 1px solid var(--accent-soft);
  border-radius: 16px;
  padding: 20px 22px;
  text-align: center;
}
.prenatal-cta-title {
  margin: 0 0 6px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
}
.prenatal-cta-body {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.5;
}

/* Fetal dev — palette-aligned */
.fetal-dev-scrubber {
  position: relative;
  padding: 12px 0 16px;
  margin-bottom: 18px;
}
.fetal-dev-scrubber-track {
  width: 100%;
  height: 4px;
  background: var(--rule);
  border-radius: 999px;
}
.fetal-dev-scrubber-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  margin-top: -13px;
  cursor: pointer;
  outline: none;
  position: relative;
}
.fetal-dev-scrubber-thumb:focus-visible {
  box-shadow: 0 0 0 4px rgba(200, 122, 58, 0.28);
}
.fetal-dev-week-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 600;
  margin-top: 8px;
}
.fetal-dev-week-tick.is-current { color: var(--accent-deep); font-weight: 700; }

.fetal-dev-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 20px 22px;
}
.fetal-dev-week-num {
  font-size: 36px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  padding-top: 4px;
}
.fetal-dev-card-title {
  margin: 0 0 4px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
}
.fetal-dev-card-meta {
  margin: 0 0 10px;
  color: var(--ink-muted);
  font-size: 0.9rem;
}
.fetal-dev-card-highlight {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 600;
}
.fetal-dev-subhead {
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-deep);
}
.fetal-dev-bullets {
  margin: 6px 0 0;
  padding-left: 22px;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.6;
}
.fetal-dev-bullets li { margin-bottom: 4px; }
.fetal-dev-mom {
  margin: 6px 0 0;
  padding: 12px 16px;
  background: var(--cream);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.55;
}
.fetal-dev-sources {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.5;
}
.fetal-dev-sources a { color: var(--accent-deep); text-decoration: underline; }

/* Prenatal visits list (palette-aligned + rich content) */
.prenatal-visits-list { margin-top: 0; }
.prenatal-visit-row {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: start;
  transition: background 200ms ease, border-color 200ms ease;
}
.prenatal-visit-row.visit-done {
  background: linear-gradient(180deg, rgba(152, 168, 132, 0.10), var(--paper));
  border-color: rgba(152, 168, 132, 0.35);
}
.prenatal-visit-row.visit-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(200, 122, 58, 0.18);
}
.prenatal-visit-row.visit-past-undone {
  background: var(--cream);
  border-color: var(--rule);
  opacity: 0.85;
}
.prenatal-visit-week {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--rose-bg);
  padding: 8px 6px;
  border-radius: 10px;
  text-align: center;
  align-self: start;
}
.prenatal-visit-body { min-width: 0; }
.prenatal-visit-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.prenatal-visit-label {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}
.prenatal-visit-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--cream-deep);
  color: var(--ink-soft);
}
.prenatal-visit-row.visit-done .prenatal-visit-badge {
  background: rgba(152, 168, 132, 0.22);
  color: #4d6b3e;
}
.prenatal-visit-row.visit-current .prenatal-visit-badge {
  background: var(--accent);
  color: var(--paper);
}
.prenatal-visit-expect {
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 4px 0 8px;
}
details.prenatal-visit-ask {
  margin: 6px 0 8px;
}
details.prenatal-visit-ask summary {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent-deep);
  cursor: pointer;
  padding: 4px 0;
}
details.prenatal-visit-ask ul {
  margin: 6px 0 4px;
  padding-left: 22px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
}
details.prenatal-visit-ask li { margin-bottom: 3px; }
.prenatal-visit-source {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 0.85rem;
}
.prenatal-visit-source a { color: var(--ink-muted); text-decoration: underline; }
.prenatal-visit-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Maternal Health — palette-aligned + bigger touch targets */
.maternal-quick-log {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.maternal-quick-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, transform 80ms ease;
  font-family: inherit;
  min-height: 64px;
}
.maternal-quick-btn:hover {
  background: var(--cream);
  border-color: var(--accent-soft);
}
.maternal-quick-btn:active { transform: scale(0.97); }
.maternal-quick-icon { font-size: 22px; flex: 0 0 28px; text-align: center; }

/* Recent maternal entries — with delete X */
.maternal-recent { margin-top: 28px; }
.maternal-entry-list { list-style: none; padding: 0; margin: 8px 0 0; }
.maternal-entry-row {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule-soft);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}
.maternal-entry-row:last-child { border-bottom: 0; }
.maternal-entry-main { min-width: 0; }
.maternal-entry-label { font-weight: 700; font-size: 0.96rem; color: var(--ink); }
.maternal-entry-when {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-top: 2px;
}
.maternal-entry-notes {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-top: 2px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.maternal-entry-delete {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  font-family: inherit;
}
.maternal-entry-delete:hover {
  background: var(--rose-bg);
  border-color: var(--accent-soft);
  color: var(--accent-deep);
}

/* Birth-prep grid — palette + spacing */
.birth-prep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.birth-prep-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 20px 22px;
}
.birth-prep-title {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}
.birth-prep-list {
  margin: 0;
  padding-left: 22px;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.6;
}
.birth-prep-list li { margin-bottom: 6px; }
.birth-prep-card p {
  margin: 8px 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Prenatal "Now band" inside hero — kick + contractions when stage-triggered */
.prenatal-now-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 4px 0 20px;
}
.prenatal-now-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 160ms ease, border-color 160ms ease, transform 80ms ease;
  min-height: 92px;
}
.prenatal-now-tile:hover {
  background: var(--cream);
  border-color: var(--accent-soft);
}
.prenatal-now-tile:active { transform: scale(0.98); }
.prenatal-now-tile .pnt-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.prenatal-now-tile .pnt-icon { font-size: 22px; }
.prenatal-now-tile .pnt-kind {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
}
.prenatal-now-tile .pnt-headline {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 2px;
}
.prenatal-now-tile .pnt-detail {
  font-size: 0.88rem;
  color: var(--ink-muted);
}
.prenatal-now-tile .pnt-cta {
  margin-top: 4px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
}

/* Iter 7.7: pulsing red dot for an actively timed contraction inside the
   prenatal NOW band. The chip itself now uses the postpartum .now-tile shape
   so we scope the dot positioning to .now-tile contexts (the .now-tile is
   already position-relative-friendly via its padding box). */
.now-tile { position: relative; }
.now-tile .pnt-live-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c33;
  box-shadow: 0 0 0 0 rgba(204, 51, 51, 0.65);
  animation: pntLiveDotPulse 1.6s ease-out infinite;
}
@keyframes pntLiveDotPulse {
  0%   { box-shadow: 0 0 0 0   rgba(204, 51, 51, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(204, 51, 51, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(204, 51, 51, 0);    }
}
@media (prefers-reduced-motion: reduce) {
  .now-tile .pnt-live-dot { animation: none; }
}

/* Iter 7.7.1: "End" pill on the kicks chip while a session is active.
   role="button" span (parent chip is already a <button>). Small, neutral,
   high-affordance hit target positioned top-right. */
.now-tile-end-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--accent-deep, var(--burgundy));
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
  /* Layer above the chip's content so taps land on the pill, not the chip. */
  z-index: 2;
}
.now-tile-end-pill:hover {
  background: var(--cream-deep, var(--cream));
  border-color: var(--accent-soft, var(--burgundy-soft));
}
.now-tile-end-pill:active {
  transform: scale(0.96);
}
.now-tile-end-pill:focus-visible {
  outline: 2px solid var(--accent, var(--burgundy));
  outline-offset: 2px;
}

/* Recent kicks card on the prenatal overview */
.prenatal-recent-kicks {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px 18px;
}

/* Contractions UI (in panel-kicks or its own future panel) */
.contractions-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 20px 22px;
  margin-top: 18px;
}
.contractions-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}
.contractions-actions .prenatal-btn { min-width: 140px; justify-content: center; }
.contraction-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0 6px;
}
.contraction-stat {
  background: var(--cream);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
}
.contraction-stat .cs-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  display: block;
}
.contraction-stat .cs-value {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 2px;
}
.contractions-log {
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
@media (max-width: 480px) {
  .contraction-stats { grid-template-columns: 1fr; }
}

/* Settings: hide post-natal-only sections inside the Settings panel during pregnancy */
body[data-stage="pregnancy"] [data-settings-stage="baby"] { display: none !important; }
body[data-stage="baby"] [data-settings-stage="pregnancy"] { display: none !important; }

/* ===== Phase 6.3 iter 2: new tile + delete button classes ===== */
/* Now-band tiles rendered by prenatal.js renderPrenatalNowBand() */
.prenatal-now-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.prenatal-now-tile-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--rose-bg, #f3e6e2);
  color: var(--accent-deep, #9a5828);
}
.prenatal-now-tile-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.prenatal-now-tile-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #2a221c);
  line-height: 1.25;
}
.prenatal-now-tile-sub {
  font-size: 0.88rem;
  color: var(--ink-muted, #6b5b4d);
  line-height: 1.3;
}

/* Maternal entry delete (×) button */
.maternal-entry-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  padding-right: 44px;
  border-radius: 12px;
  background: var(--paper, #fbf7ef);
  border: 1px solid var(--rule, #e2d5c1);
  margin-bottom: 8px;
}
.maternal-entry-when {
  font-size: 0.82rem;
  color: var(--ink-muted, #6b5b4d);
  flex-shrink: 0;
  min-width: 96px;
}
.maternal-entry-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink, #2a221c);
}
.maternal-entry-notes {
  font-size: 0.85rem;
  color: var(--ink-muted, #6b5b4d);
  font-style: normal;
}
.maternal-entry-delete {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rule, #e2d5c1);
  background: transparent;
  color: var(--ink-muted, #6b5b4d);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.maternal-entry-delete:hover {
  background: #fdecea;
  color: #b91c1c;
  border-color: #fca5a5;
}
.maternal-entry-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ===== Maternal input sheet (replaces window.prompt for mobile webviews) ===== */
.maternal-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 8, 0.55);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.maternal-sheet-overlay[hidden] { display: none; }
@media (min-width: 640px) {
  .maternal-sheet-overlay {
    align-items: center;
    padding: 24px;
  }
}
.maternal-sheet {
  background: var(--paper, #fbf7ef);
  color: var(--ink, #2a221c);
  width: 100%;
  max-width: 480px;
  border-radius: 20px 20px 0 0;
  padding: 24px 22px 28px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
  position: relative;
  animation: maternalSheetIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (min-width: 640px) {
  .maternal-sheet { border-radius: 18px; }
}
@keyframes maternalSheetIn {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.maternal-sheet-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--rule, #e2d5c1);
  color: var(--ink-muted, #6b5b4d);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.maternal-sheet-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.4rem;
  margin: 0 0 6px;
  color: var(--ink, #2a221c);
}
.maternal-sheet-sub {
  margin: 0 0 16px;
  color: var(--ink-muted, #6b5b4d);
  font-size: 0.95rem;
  line-height: 1.4;
}
.maternal-sheet-sub[hidden] { display: none; }
.maternal-sheet-body { margin-bottom: 16px; }
.maternal-sheet-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted, #6b5b4d);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.maternal-sheet-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--rule, #e2d5c1);
  background: var(--cream, #f5efe4);
  color: var(--ink, #2a221c);
  font-size: 1.05rem;
  font-family: inherit;
  box-sizing: border-box;
}
.maternal-sheet-input:focus {
  outline: 2px solid var(--accent, #c87a3a);
  outline-offset: 1px;
}
.maternal-sheet-bp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.maternal-mood-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.maternal-mood-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--rule, #e2d5c1);
  background: var(--cream, #f5efe4);
  color: var(--ink, #2a221c);
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
}
.maternal-mood-chip:hover, .maternal-mood-chip:focus {
  background: var(--rose-bg, #f3e6e2);
  border-color: var(--accent-soft, #e8b487);
}
.maternal-sheet-error {
  color: #b91c1c;
  font-size: 0.9rem;
  margin: 8px 0 0;
}
.maternal-sheet-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.maternal-sheet-cancel,
.maternal-sheet-submit {
  padding: 12px 20px;
  border-radius: 12px;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.maternal-sheet-cancel {
  background: transparent;
  border: 1px solid var(--rule, #e2d5c1);
  color: var(--ink-muted, #6b5b4d);
}
.maternal-sheet-submit {
  background: var(--accent-deep, #9a5828);
  color: white;
}
.maternal-sheet-submit:hover { background: var(--accent, #c87a3a); }
.maternal-sheet-submit-destructive {
  background: #b91c1c;
}
.maternal-sheet-submit-destructive:hover { background: #991b1b; }

/* ============================================================
   Phase 6.3 iter 4: hybrid pregnancy arc
   ============================================================ */

/* Container — replaced [data-gestation-arc] inline SVG with this component */
.arc-hybrid-root {
  position: relative;
  width: 100%;
  user-select: none;
  touch-action: pan-y; /* allow page scroll in y, we'll intercept x in JS */
  /* iter 7.16 (v127): clip the zoomed SVG so it doesn't escape upward and
     overlap the welcome heading near EDD. The draggable thumb is a sibling
     inside .arc-hybrid-root and stays within bounds; verified safe. */
  overflow: hidden;
}

/* Zoom wrapper: CSS transform applied by JS */
.arc-hybrid-zoom {
  width: 100%;
  transform-origin: center 75%; /* anchor near arc centre */
  transition: transform 420ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* SVG canvas. pointer-events: none so the overflow-visible artwork (esp.
   when zoomed in) does not intercept taps on the pill controls below it.
   The draggable thumb sits OUTSIDE the SVG in .arc-hybrid-root, so this
   does not break scrubbing. (Iter 6.7 fix.)

   Iter 6.8: also disable pointer-events on the zoom wrapper itself. When
   scaled up, the wrapper's bounding box overflows downward onto the pill
   row sibling — a transformed div still receives hit-tests across its
   scaled visual area even with no background. Thumb is a sibling of
   .arc-hybrid-zoom (inside .arc-hybrid-root), so scrubbing is unaffected. */
.arc-hybrid-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}
.arc-hybrid-zoom { pointer-events: none; }

/* Draw-in animation — applied to the main arc path via JS */
.arc-hybrid-path-animated {
  stroke-dasharray: var(--arc-len, 800);
  stroke-dashoffset: var(--arc-len, 800);
  animation: arcDrawIn 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes arcDrawIn {
  to { stroke-dashoffset: 0; }
}

/* Milestone dots — fade in after arc draw */
.arc-hybrid-milestone {
  opacity: 0;
  animation: arcMilestoneFade 300ms ease-out forwards;
}
@keyframes arcMilestoneFade {
  to { opacity: 1; }
}

/* Trimester band labels (HTML overlay above SVG) */
.arc-hybrid-bands {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  justify-content: space-between;
  padding: 0 8px;
  box-sizing: border-box;
}
.arc-hybrid-band-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted, #8a7a6a);
  opacity: 0.7;
  white-space: nowrap;
  transition: opacity 200ms, font-weight 200ms, color 200ms;
}
.arc-hybrid-band-label.arc-band-active {
  color: var(--accent-deep, #9a5828);
  opacity: 1;
  font-weight: 800;
}

/* Floating info card (above scrub thumb) */
.arc-hybrid-card {
  position: absolute;
  background: var(--paper, #fbf7ef);
  border: 1px solid var(--rule, #e2d5c1);
  border-radius: 12px;
  padding: 10px 13px 9px;
  min-width: 160px;
  max-width: 220px;
  box-shadow: var(--shadow, 0 4px 16px rgba(60,40,20,0.08));
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) translateX(-50%);
  transition: opacity 150ms ease-out, transform 150ms ease-out;
  z-index: 20;
  left: 0; /* overridden by JS */
  top: 0;  /* overridden by JS */
}
.arc-hybrid-card.arc-card-visible {
  opacity: 1;
  transform: translateY(0) translateX(-50%);
}
.arc-hybrid-card-week {
  font-family: var(--serif, Georgia, serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-deep, #9a5828);
  margin: 0 0 3px 0;
  line-height: 1.2;
}
.arc-hybrid-card-milestone {
  font-size: 11px;
  font-weight: 600;
  color: var(--burgundy, #6b1f2a);
  margin: 0 0 5px 0;
  line-height: 1.3;
}
.arc-hybrid-card-size {
  font-size: 11px;
  color: var(--ink-soft, #4a3c30);
  margin: 0 0 4px 0;
  line-height: 1.4;
}
.arc-hybrid-card-visit {
  font-size: 10px;
  color: var(--ink-muted, #8a7a6a);
  margin: 0;
  border-top: 1px solid var(--rule-soft, #efe5d3);
  padding-top: 5px;
  margin-top: 4px;
  line-height: 1.35;
}

/* Thumb pill (draggable marker) */
.arc-hybrid-thumb {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-deep, #9a5828);
  border: 3px solid var(--paper, #fbf7ef);
  box-shadow: 0 2px 8px rgba(60,40,20,0.25), 0 0 0 2px var(--accent-deep, #9a5828);
  cursor: grab;
  touch-action: none;
  transform: translate(-50%, -50%);
  transition: box-shadow 150ms, transform 150ms;
  z-index: 10;
}
.arc-hybrid-thumb:active,
.arc-hybrid-thumb.arc-thumb-dragging {
  cursor: grabbing;
  box-shadow: 0 4px 16px rgba(60,40,20,0.35), 0 0 0 3px var(--accent-deep, #9a5828);
  transform: translate(-50%, -50%) scale(1.18);
}
.arc-hybrid-thumb:focus-visible {
  outline: 3px solid var(--accent, #c87a3a);
  outline-offset: 2px;
}

/* Pill controls (View full journey / Return to today) */
.arc-hybrid-pills {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.arc-hybrid-pill {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--rule, #e2d5c1);
  background: var(--paper, #fbf7ef);
  color: var(--ink-soft, #4a3c30);
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.arc-hybrid-pill:hover,
.arc-hybrid-pill:active {
  background: var(--cream-deep, #ece2d0);
  color: var(--accent-deep, #9a5828);
  border-color: var(--accent-soft, #e8b487);
}
.arc-hybrid-pill[hidden] { display: none; }

/* Halo pulse on current marker */
.arc-current-halo {
  animation: arcHaloPulse 2.4s ease-in-out infinite;
}
@keyframes arcHaloPulse {
  0%, 100% { opacity: 0.18; r: 14; }
  50%       { opacity: 0.30; r: 17; }
}

/* Dark-mode overrides */
[data-theme="dark"] .arc-hybrid-card {
  background: var(--cream-deep, #221d18);
  border-color: var(--rule, #3a3128);
}
[data-theme="dark"] .arc-hybrid-pill {
  background: var(--cream, #1a1714);
  border-color: var(--rule, #3a3128);
  color: var(--ink-soft, #c8b8a4);
}
[data-theme="dark"] .arc-hybrid-pill:hover {
  background: var(--cream-deep, #221d18);
}

/* Mobile: ensure arc area doesn't overflow at 375px */
@media (max-width: 480px) {
  .arc-hybrid-card {
    min-width: 140px;
    max-width: 180px;
    font-size: 10px;
    padding: 8px 10px 7px;
  }
  .arc-hybrid-card-week { font-size: 13px; }
  .arc-hybrid-pill { font-size: 11px; padding: 5px 12px; }
}

/* ── Collapsed past prenatal visits (Phase 6.3 iter 5) ────────────────── */
.prenatal-past-visits {
  margin: 0 0 14px 0;
  border: 1px solid var(--rule-soft, #efe5d3);
  border-radius: 14px;
  background: var(--paper-soft, #f6efe1);
  overflow: hidden;
}
.prenatal-past-visits-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft, #4a3c30);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.prenatal-past-visits-summary::-webkit-details-marker { display: none; }
.prenatal-past-visits-caret {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-muted, #8a7a6a);
  transition: transform 180ms ease;
  width: 14px;
  text-align: center;
}
.prenatal-past-visits[open] .prenatal-past-visits-caret {
  transform: rotate(90deg);
}
.prenatal-past-visits-label { flex: 1; }
.prenatal-past-visits-count {
  background: var(--accent-soft, #e2d5c1);
  color: var(--accent-deep, #9a5828);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 22px;
  text-align: center;
}
.prenatal-past-visits-body {
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prenatal-past-visits-body .prenatal-visit-row {
  opacity: 0.85;
}
[data-theme="dark"] .prenatal-past-visits {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}

/* ── Kick session row: edit + delete buttons (Phase 6.3 iter 5) ───────── */
.kick-recent-row {
  align-items: center;
}
.kick-recent-edit,
.kick-recent-delete {
  background: transparent;
  border: none;
  color: var(--ink-muted, #8a7a6a);
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  margin-left: 4px;
  cursor: pointer;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms, color 120ms;
}
.kick-recent-edit:hover,
.kick-recent-edit:focus-visible {
  color: var(--accent-deep, #9a5828);
  background: rgba(154, 88, 40, 0.08);
}
.kick-recent-delete:hover,
.kick-recent-delete:focus-visible {
  color: var(--burgundy, #6b1f2a);
  background: rgba(107, 31, 42, 0.08);
}
.kick-recent-delete {
  font-size: 18px;
  font-weight: 400;
}
[data-theme="dark"] .kick-recent-edit:hover,
[data-theme="dark"] .kick-recent-delete:hover {
  background: rgba(255,255,255,0.08);
}

/* ── Stage scope note on invite form (Phase 6.3 iter 5) ───────────────── */
.stage-scope-note {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--paper-soft, #f6efe1);
  border-left: 3px solid var(--accent-deep, #9a5828);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft, #4a3c30);
}
.stage-scope-note strong {
  color: var(--accent-deep, #9a5828);
  font-weight: 700;
}
[data-theme="dark"] .stage-scope-note {
  background: rgba(255,255,255,0.04);
  border-left-color: var(--accent, #c87a3a);
}

/* ── Role permissions explainer (Phase 6.3 iter 6) ───────────────────── */
.role-permissions {
  margin-top: 10px;
  border: 1px solid var(--border-soft, #e6dcc6);
  border-radius: 10px;
  background: var(--paper, #fffaf0);
  font-size: 13px;
}
.role-permissions > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--accent-deep, #9a5828);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.role-permissions > summary::-webkit-details-marker { display: none; }
.role-permissions > summary::before {
  content: "\25B8"; /* right-pointing triangle */
  font-size: 11px;
  transition: transform 0.15s ease;
  display: inline-block;
  color: var(--accent-deep, #9a5828);
}
.role-permissions[open] > summary::before { transform: rotate(90deg); }
.role-permissions-body {
  padding: 4px 14px 12px 14px;
  border-top: 1px solid var(--border-soft, #e6dcc6);
}
.role-permissions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 8px;
}
.role-permissions-table th,
.role-permissions-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft, #efe6d0);
  vertical-align: middle;
}
.role-permissions-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft, #6b5e4d);
  border-bottom: 2px solid var(--border-soft, #e6dcc6);
}
.role-permissions-table tbody th {
  font-weight: 500;
  color: var(--ink, #2d2520);
}
.role-permissions-table thead th:not(:first-child),
.role-permissions-table tbody td {
  text-align: center;
  width: 18%;
}
.role-permissions-table tbody td {
  font-weight: 600;
  color: var(--accent-deep, #9a5828);
}
.role-permissions-table tbody td[aria-label="No"] {
  color: var(--ink-soft, #b3a48d);
  font-weight: 400;
}
.role-permissions-footnote {
  margin: 10px 0 0 0;
  font-size: 11.5px;
  color: var(--ink-soft, #6b5e4d);
  line-height: 1.5;
}
.role-permissions-footnote em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent-deep, #9a5828);
}
[data-theme="dark"] .role-permissions {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .role-permissions-body {
  border-top-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .role-permissions-table th,
[data-theme="dark"] .role-permissions-table td {
  border-bottom-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .role-permissions-table thead th {
  color: rgba(255,255,255,0.6);
  border-bottom-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .role-permissions-table tbody th {
  color: rgba(255,255,255,0.92);
}
[data-theme="dark"] .role-permissions-table tbody td {
  color: var(--accent, #e0a76b);
}
[data-theme="dark"] .role-permissions-table tbody td[aria-label="No"] {
  color: rgba(255,255,255,0.35);
}
[data-theme="dark"] .role-permissions-footnote {
  color: rgba(255,255,255,0.55);
}
[data-theme="dark"] .role-permissions-footnote em {
  color: var(--accent, #e0a76b);
}
@media (max-width: 480px) {
  .role-permissions-table { font-size: 11px; }
  .role-permissions-table th,
  .role-permissions-table td { padding: 5px 4px; }
}

/* ── Fetal scrubber circular dial (Phase 6.3 iter 6.1) ─────────────────
   Replaces the horizontal track + hand-comparison layout with a
   tachometer-style 270° dial. Trimester-tinted rim, week labels every
   four weeks, milestone studs, today pip, draggable thumb on the rim,
   and a more anatomically accurate fetal silhouette in the center. */
.fetal-scrubber-dial {
  background: linear-gradient(180deg, var(--card-bg, #ffffff) 0%, rgba(248, 240, 232, 0.5) 100%);
  border: 1px solid var(--border-soft, rgba(0,0,0,0.06));
  border-radius: 20px;
  padding: 18px 14px 22px;
  margin: 14px 0 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.fetal-dial-wrap {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.fetal-dial-svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none; /* lets us drag without page scrolling */
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  position: relative;
  z-index: 2; /* arc track sits ABOVE the fetal silhouette (iter 6.7) */
}
.fetal-dial-svg:focus-visible {
  filter: drop-shadow(0 0 6px rgba(206, 124, 76, 0.45));
}

/* Trimester arc segments */
.fetal-dial-arc-base { fill: rgba(0, 0, 0, 0.05); }
.fetal-dial-arc-t1 { fill: rgba(231, 184, 142, 0.55); }  /* peach */
.fetal-dial-arc-t2 { fill: rgba(214, 158, 110, 0.55); }  /* honey */
.fetal-dial-arc-t3 { fill: rgba(176, 130, 90, 0.55); }   /* sand */

/* Tick marks */
.fetal-dial-tick {
  stroke: rgba(0, 0, 0, 0.32);
  stroke-width: 1;
  stroke-linecap: round;
}
.fetal-dial-tick-major {
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1.8;
}

/* Numeric week labels around the dial */
.fetal-dial-label {
  font-size: 11px;
  font-weight: 600;
  fill: rgba(0, 0, 0, 0.55);
  font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
}
.fetal-dial-label[data-active="1"] {
  fill: var(--accent-deep, #b06b3a);
  font-weight: 800;
  font-size: 12px;
}

/* Milestone studs */
.fetal-dial-milestone { cursor: pointer; }
.fetal-dial-milestone-dot {
  fill: #ffffff;
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 1.5;
  transition: fill 0.15s ease, stroke 0.15s ease, r 0.15s ease;
}
.fetal-dial-milestone[data-trimester="1"] .fetal-dial-milestone-dot { stroke: #c98a5a; }
.fetal-dial-milestone[data-trimester="2"] .fetal-dial-milestone-dot { stroke: #b06b3a; }
.fetal-dial-milestone[data-trimester="3"] .fetal-dial-milestone-dot { stroke: #8a5024; }
.fetal-dial-milestone:hover .fetal-dial-milestone-dot,
.fetal-dial-milestone:focus-visible .fetal-dial-milestone-dot {
  fill: rgba(255, 240, 224, 1);
  stroke-width: 2;
}
.fetal-dial-milestone[data-active="1"] .fetal-dial-milestone-dot {
  fill: var(--accent, #d6884a);
  stroke: var(--accent-deep, #8a5024);
  stroke-width: 2;
}
.fetal-dial-milestone:focus-visible {
  outline: none;
}
.fetal-dial-milestone:focus-visible .fetal-dial-milestone-dot {
  filter: drop-shadow(0 0 4px rgba(206, 124, 76, 0.6));
}

/* Today pip */
.fetal-dial-today-pip {
  fill: var(--accent, #d6884a);
  stroke: #ffffff;
  stroke-width: 2;
}
.fetal-dial-today-label {
  font-size: 10px;
  font-weight: 700;
  fill: var(--accent-deep, #8a5024);
  font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Draggable thumb on the rim */
.fetal-dial-thumb-outer {
  fill: #ffffff;
  stroke: var(--accent-deep, #b06b3a);
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18));
  transition: stroke 0.15s ease;
}
.fetal-dial-thumb-outer[data-trimester="1"] { stroke: #c98a5a; }
.fetal-dial-thumb-outer[data-trimester="2"] { stroke: #b06b3a; }
.fetal-dial-thumb-outer[data-trimester="3"] { stroke: #8a5024; }
.fetal-dial-thumb-inner {
  fill: var(--accent, #d6884a);
}

/* Center cluster: silhouette centered in dial; textual readouts moved to the
   right "open" side of the 270° arc so the illustration is not clipped by the
   week-number / size / delta labels (iter 6.3). */
.fetal-dial-center {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Silhouette centered in dial. Source PNGs (iter 6.7) have transparent
   backgrounds with ~15% interior margin, so the container can fill most of
   the dial center. z-index keeps the artwork BEHIND the arc track. */
.fetal-dial-silhouette {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62%;
  height: 62%;
  max-width: 200px;
  max-height: 200px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1; /* above background, below arc SVG (which is z-index: 2) */
  pointer-events: none;
}
.fetal-dial-silhouette svg,
.fetal-dial-silhouette img { width: 100%; height: 100%; object-fit: contain; }
.fetal-dial-illus { transition: opacity 0.2s ease; }
/* Readouts anchored at right-center (3 o'clock) of the dial — true vertical
   symmetry achieved by transform: translateY(-50%) on the week-num and shifting
   size/delta from the WEEK-NUM baseline (not from 50%). Iter 6.5. */
.fetal-dial-week-num {
  position: absolute;
  top: calc(50% - 18px);
  right: 2%;
  font-size: clamp(22px, 5.5vw, 30px);
  font-weight: 800;
  color: var(--accent-deep, #8a5024);
  line-height: 1;
  letter-spacing: -0.02em;
  font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
  text-align: center;
}
.fetal-dial-size {
  position: absolute;
  top: calc(50% + 8px);
  right: 2%;
  font-size: 11px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.25;
  max-width: 110px;
  text-align: center;
}
.fetal-dial-delta {
  position: absolute;
  top: calc(50% + 28px);
  right: 2%;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.7);
  pointer-events: none;
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.fetal-dial-delta[data-direction="now"] {
  background: var(--accent, #d6884a);
  color: #ffffff;
}
.fetal-dial-delta[data-direction="future"] {
  background: rgba(214, 158, 110, 0.18);
  color: var(--accent-deep, #8a5024);
}
.fetal-dial-delta[data-direction="past"] {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.55);
}

/* Dark mode */
[data-theme="dark"] .fetal-scrubber-dial {
  background: linear-gradient(180deg, rgba(40, 30, 24, 0.5) 0%, rgba(28, 22, 18, 0.4) 100%);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .fetal-dial-arc-base { fill: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .fetal-dial-arc-t1 { fill: rgba(231, 184, 142, 0.35); }
[data-theme="dark"] .fetal-dial-arc-t2 { fill: rgba(214, 158, 110, 0.40); }
[data-theme="dark"] .fetal-dial-arc-t3 { fill: rgba(176, 130, 90, 0.45); }
[data-theme="dark"] .fetal-dial-tick { stroke: rgba(255, 255, 255, 0.40); }
[data-theme="dark"] .fetal-dial-tick-major { stroke: rgba(255, 255, 255, 0.70); }
[data-theme="dark"] .fetal-dial-label { fill: rgba(255, 255, 255, 0.65); }
[data-theme="dark"] .fetal-dial-label[data-active="1"] { fill: var(--accent, #e0a76b); }
[data-theme="dark"] .fetal-dial-milestone-dot { fill: rgba(40, 30, 24, 1); }
[data-theme="dark"] .fetal-dial-today-label { fill: var(--accent, #e0a76b); }
[data-theme="dark"] .fetal-dial-thumb-outer { fill: #2a2018; }
[data-theme="dark"] .fetal-dial-silhouette { filter: brightness(0.92); }
[data-theme="dark"] .fetal-dial-week-num { color: var(--accent, #e0a76b); }
[data-theme="dark"] .fetal-dial-size { color: rgba(255, 255, 255, 0.75); }
[data-theme="dark"] .fetal-dial-delta { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); }
[data-theme="dark"] .fetal-dial-delta[data-direction="future"] { background: rgba(224, 167, 107, 0.22); color: var(--accent, #e0a76b); }
[data-theme="dark"] .fetal-dial-delta[data-direction="past"] { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.55); }

@media (max-width: 480px) {
  .fetal-scrubber-dial { padding: 14px 8px 18px; }
  .fetal-dial-wrap { max-width: 100%; }
  .fetal-dial-label { font-size: 10px; }
  .fetal-dial-silhouette { max-width: 170px; max-height: 170px; width: 60%; height: 60%; }
  .fetal-dial-week-num { right: 1%; font-size: clamp(20px, 5.5vw, 26px); top: calc(50% - 16px); }
  .fetal-dial-size { right: 1%; top: calc(50% + 6px); font-size: 10px; max-width: 92px; }
  .fetal-dial-delta { right: 1%; top: calc(50% + 24px); font-size: 9px; max-width: 92px; padding: 2px 6px; }
}

/* ============================================================ */
/* Phase 6.3 iter 6.2 — Contraction timer panel                  */
/* ============================================================ */
.contraction-timer-panel { width: 100%; display: flex; justify-content: center; }
.contraction-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 520px;
}
.contraction-tap-btn {
  appearance: none;
  border: none;
  /* Deep rose/coral — distinct from kick counter's pink */
  background: linear-gradient(135deg, #e89a8b 0%, #b85c5c 100%);
  color: #4a1722;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(184, 92, 92, 0.32), inset 0 1px 0 rgba(255,255,255,0.45);
  transition: transform 90ms ease, box-shadow 200ms ease, background 200ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0 14px;
}
.contraction-tap-btn:active { transform: scale(0.96); }
.contraction-tap-btn.contraction-tap-active {
  background: linear-gradient(135deg, #b85c5c 0%, #7a2b3a 100%);
  color: #fff5f5;
  box-shadow: 0 8px 28px rgba(122, 43, 58, 0.45), inset 0 1px 0 rgba(255,255,255,0.25);
  animation: contraction-pulse 1.4s ease-in-out infinite;
}
@keyframes contraction-pulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(122, 43, 58, 0.45), inset 0 1px 0 rgba(255,255,255,0.25); }
  50%      { box-shadow: 0 10px 36px rgba(122, 43, 58, 0.65), inset 0 1px 0 rgba(255,255,255,0.25); }
}
.contraction-tap-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
}
.contraction-tap-time {
  font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
  font-size: 44px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.contraction-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.contraction-intensity-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--surface-soft, #faf4f1);
  border: 1px solid #ecd6cc;
  border-radius: 12px;
  padding: 10px 14px;
  width: 100%;
  justify-content: center;
}
.contraction-intensity-label { font-size: 13px; font-weight: 600; color: var(--ink, #1f2937); margin-right: 4px; }
.intensity-btn {
  appearance: none;
  border: 1px solid #d4a89c;
  background: #fff;
  color: #5a2236;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.intensity-btn:hover { background: #f5e0d8; }
.intensity-btn:active { background: #e89a8b; color: #fff; }
.intensity-skip { font-size: 12px; }

.contraction-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  text-align: center;
}
.contraction-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.contraction-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft, #6b7280);
}
.contraction-stat-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #1f2937);
  font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
  line-height: 1.1;
}
.contraction-stat-unit { font-size: 11px; color: var(--ink-soft, #6b7280); }

.contraction-advisory {
  width: 100%;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.45;
}
.contraction-advisory[data-tone="urgent"] {
  background: #faebee;
  border: 1px solid #d97082;
  color: #5a1626;
}
.contraction-advisory[data-tone="caution"] {
  background: #fff5e0;
  border: 1px solid #d9a45a;
  color: #5a3a16;
}
.contraction-advisory strong { font-weight: 700; }

.contraction-history {
  width: 100%;
  border-top: 1px solid var(--line, #e5e7eb);
  padding-top: 12px;
}
.contraction-history summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 0;
}
.contraction-history-list { list-style: none; padding: 0; margin: 8px 0 0; }
.contraction-history-empty { color: var(--ink-soft, #6b7280); font-size: 13px; padding: 6px 0; }
.contraction-history-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0 4px 4px;
  border-bottom: 1px dotted var(--line, #e5e7eb);
  font-size: 13px;
}
.contraction-history-row:last-child { border-bottom: none; }
.contraction-history-when { color: var(--ink, #1f2937); font-weight: 600; min-width: 60px; }
.contraction-history-dur { color: var(--ink, #1f2937); }
.contraction-history-interval { color: var(--ink-soft, #6b7280); font-size: 12px; }
.contraction-intensity-chip {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
}
.contraction-intensity-chip[data-level="weak"]     { background: #f5e8e3; color: #7a4e44; }
.contraction-intensity-chip[data-level="moderate"] { background: #e89a8b; color: #4a1722; }
.contraction-intensity-chip[data-level="strong"]   { background: #7a2b3a; color: #fff; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .contraction-card { background: var(--surface, #1a1a1a); border-color: var(--line, #2d2d2d); }
  .contraction-intensity-prompt { background: #2a1d1a; border-color: #4a2e26; }
  .intensity-btn { background: #2a1d1a; color: #f3d4cb; border-color: #5a3a2e; }
  .intensity-btn:hover { background: #3a2620; }
  .contraction-advisory[data-tone="urgent"]  { background: #2a1418; border-color: #b85c70; color: #fbd6dc; }
  .contraction-advisory[data-tone="caution"] { background: #2a2014; border-color: #b89a5c; color: #fbe9c5; }
  .contraction-history-row { border-color: #2d2d2d; }
}

/* Mobile */
@media (max-width: 480px) {
  .contraction-card { padding: 22px 14px 18px; }
  .contraction-tap-btn { width: 170px; height: 170px; }
  .contraction-tap-time { font-size: 36px; }
  .contraction-stats-grid { gap: 8px; }
  .contraction-stat-value { font-size: 18px; }
  .contraction-history-row { grid-template-columns: auto 1fr auto auto; }
  .contraction-history-interval { grid-column: 2 / 4; font-size: 11px; margin-top: 2px; }
}

/* Iter 6.4 — Contraction sync status chip */
.contraction-sync-chip {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 4px;
}
.contraction-sync-chip[data-state="syncing"] {
  background: #f5e8e3;
  color: #7a4e44;
}
.contraction-sync-chip[data-state="error"] {
  background: #faebee;
  color: #b8344a;
  border: 1px solid #d97082;
}

/* Iter 6.7 — delete button on each contraction history row.
   Iter 6.8: bumped to 44×44px (iOS minimum tap target). Was getting hit
   on the parent row even when finger landed on the ×. */
.contraction-history-delete {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft, #6b7280);
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  z-index: 2;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
  -webkit-tap-highlight-color: rgba(184, 52, 74, 0.18);
  touch-action: manipulation;
}
.contraction-history-delete:hover,
.contraction-history-delete:focus-visible {
  background: #faebee;
  color: #b8344a;
  border-color: #e2b6c0;
  outline: none;
}
.contraction-history-delete:active { background: #f4d3da; }
@media (prefers-color-scheme: dark) {
  .contraction-history-delete { color: #9ca3af; }
  .contraction-history-delete:hover,
  .contraction-history-delete:focus-visible {
    background: #3a1a20;
    color: #f7b6c0;
    border-color: #6b3540;
  }
}

/* ============================================================
   Iter 6.17 — Catch-Up Sheet
   Streamlined backfill of multiple past events. Reuses .sheet
   bottom-sheet chrome; this block layers the body styles.
   ============================================================ */
.sheet--catchup .sheet-form {
  padding: 0 1rem 0;
  display: block;
  /* Iter 6.18.1: make the form body scroll inside the bottom sheet so
     the Save/Cancel footer never gets pushed off-screen on tall
     content (e.g. many catch-up rows on small viewports). */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Iter 6.18.1: keep the Save/Cancel actions visible while the form scrolls.
   Using sticky inside the scrollable form pins the footer to the bottom of
   the viewport while still letting the rest of the content scroll past it. */
.sheet--catchup .catchup-actions {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  margin: .5rem -1rem 0;
  padding: .75rem 1rem max(.75rem, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(252, 247, 238, 0) 0%, var(--paper) 22%, var(--paper) 100%);
  z-index: 2;
  border-top: 1px solid var(--rule);
}

[data-theme="dark"] .sheet--catchup .catchup-actions {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--paper) 22%, var(--paper) 100%);
}
.catchup-kind-toggle {
  display: flex;
  gap: .5rem;
  margin: .25rem 0 1rem;
}
/* iter-7.21 Option A: passive chain-mode breadcrumb (replaces the
   interactive kind tabs while a backfill chain is in progress). Non-button,
   non-focusable, no hover — informational only. */
.catchup-chain-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .25rem 0 1rem;
  padding: .55rem .75rem;
  font-size: .9rem;
  font-weight: 500;
  background: var(--c-bg-2, #f4f4f6);
  border: 1px solid var(--c-line, #e3e3e8);
  border-radius: 12px;
  color: var(--c-fg-mute, #58585f);
  user-select: none;
}
.catchup-chain-breadcrumb-label {
  color: var(--c-fg-mute, #58585f);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .78rem;
  font-weight: 600;
}
.catchup-chain-breadcrumb-sep {
  color: var(--c-fg-mute, #58585f);
  opacity: .55;
}
.catchup-chain-breadcrumb-step {
  color: var(--c-fg, #1c1c1f);
  font-weight: 600;
}
.catchup-chain-breadcrumb-kind {
  color: var(--c-accent-strong, #1e6a5b);
  font-weight: 600;
}
[data-theme="dark"] .catchup-chain-breadcrumb {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.catchup-kind-btn {
  flex: 1;
  appearance: none;
  background: var(--c-bg-2, #f4f4f6);
  border: 1px solid var(--c-line, #e3e3e8);
  color: var(--c-fg, #1c1c1f);
  border-radius: 12px;
  padding: .6rem .75rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.catchup-kind-btn.is-active {
  background: var(--c-accent-soft, #e9f5f1);
  border-color: var(--c-accent, #2f8f7b);
  color: var(--c-accent-strong, #1e6a5b);
}
.catchup-anchor {
  font-size: .9rem;
  color: var(--c-fg-mute, #58585f);
  margin: 0 0 .5rem;
}
.catchup-anchor-label { color: var(--c-fg-mute, #58585f); }
.catchup-anchor strong { color: var(--c-fg, #1c1c1f); }
.catchup-cg {
  font-size: .85rem;
  color: var(--c-fg-mute, #58585f);
  margin: 0 0 1rem;
}
.catchup-cg--unset { color: #b15a00; }
.catchup-field {
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.catchup-field > label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-fg, #1c1c1f);
}
.catchup-field input[type="number"] {
  appearance: none;
  border: 1px solid var(--c-line, #e3e3e8);
  border-radius: 10px;
  padding: .65rem .75rem;
  font: inherit;
  background: var(--c-bg, #fff);
  color: var(--c-fg, #1c1c1f);
  max-width: 12rem;
}
.catchup-amount-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.catchup-amount-unit {
  font-weight: 600;
  color: var(--c-fg-mute, #58585f);
}
.catchup-dtype {
  display: flex;
  gap: .5rem;
}
.catchup-dtype-btn {
  flex: 1;
  appearance: none;
  background: var(--c-bg-2, #f4f4f6);
  border: 1px solid var(--c-line, #e3e3e8);
  color: var(--c-fg, #1c1c1f);
  border-radius: 10px;
  padding: .55rem .5rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.catchup-dtype-btn.is-active {
  background: var(--c-accent-soft, #e9f5f1);
  border-color: var(--c-accent, #2f8f7b);
  color: var(--c-accent-strong, #1e6a5b);
}
/* v134f: Contents toggle (Breast milk / Formula / Mixed) for the Catch
   up: Feeds sheet. Same visual treatment as the diaper-type segmented
   control. */
.catchup-contents {
  display: flex;
  gap: .5rem;
}
.catchup-contents-btn {
  flex: 1;
  appearance: none;
  background: var(--c-bg-2, #f4f4f6);
  border: 1px solid var(--c-line, #e3e3e8);
  color: var(--c-fg, #1c1c1f);
  border-radius: 10px;
  padding: .55rem .4rem;
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  white-space: nowrap;
}
.catchup-contents-btn.is-active {
  background: var(--c-accent-soft, #e9f5f1);
  border-color: var(--c-accent, #2f8f7b);
  color: var(--c-accent-strong, #1e6a5b);
}
.catchup-dist {
  gap: .25rem;
}
.catchup-radio {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  padding: .25rem 0;
  cursor: pointer;
}
.catchup-preview {
  margin: 0 0 1rem;
  padding: .75rem .85rem;
  background: var(--c-bg-2, #f4f4f6);
  border-radius: 12px;
}
.catchup-preview-head {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-fg-mute, #58585f);
  margin: 0 0 .5rem;
}
.catchup-prev-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .35rem 0;
  border-top: 1px solid var(--c-line, #e3e3e8);
  font-size: .92rem;
}
.catchup-prev-row:first-of-type { border-top: 0; }
.catchup-prev-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.catchup-prev-detail {
  color: var(--c-fg-mute, #58585f);
}
.catchup-prev-row--editable .catchup-time-input {
  appearance: none;
  border: 1px solid var(--c-line, #e3e3e8);
  border-radius: 8px;
  padding: .3rem .5rem;
  font: inherit;
  background: var(--c-bg, #fff);
  font-variant-numeric: tabular-nums;
}
/* v133e: per-row editable details (mL input or diaper-type buttons) */
.catchup-prev-detail--edit {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.catchup-row-amount {
  appearance: none;
  border: 1px solid var(--c-line, #e3e3e8);
  border-radius: 8px;
  padding: .3rem .5rem;
  font: inherit;
  background: var(--c-bg, #fff);
  width: 5.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.catchup-row-unit {
  color: var(--c-fg-mute, #58585f);
  font-size: .85rem;
}
.catchup-row-dtype {
  display: inline-flex;
  gap: .25rem;
}
.catchup-row-dtype-btn {
  appearance: none;
  border: 1px solid var(--c-line, #e3e3e8);
  background: var(--c-bg, #fff);
  border-radius: 8px;
  padding: .25rem .55rem;
  font: inherit;
  font-size: .82rem;
  color: var(--c-fg-mute, #58585f);
  cursor: pointer;
  line-height: 1.2;
}
.catchup-row-dtype-btn.is-active {
  background: var(--c-accent-soft, #e6f4ef);
  border-color: var(--c-accent, #1f8a70);
  color: var(--c-accent, #1f8a70);
  font-weight: 600;
}
.catchup-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: .25rem;
}
.catchup-cancel,
.catchup-save {
  appearance: none;
  border-radius: 10px;
  padding: .65rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.catchup-cancel {
  background: transparent;
  color: var(--c-fg-mute, #58585f);
  border-color: var(--c-line, #e3e3e8);
}
.catchup-save {
  background: var(--c-accent, #2f8f7b);
  color: #fff;
}
.catchup-save:disabled {
  opacity: .65;
  cursor: progress;
}

/* v147 — Skip-this-gap button. Visually softer than Save, more deliberate
   than Cancel so users notice it but don't reach for it accidentally. */
.catchup-skip {
  appearance: none;
  border-radius: 10px;
  padding: .65rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--c-bg-2, #f4f4f6);
  color: var(--c-fg, #1a1a1f);
  border: 1px solid var(--c-line, #e3e3e8);
}
[data-theme="dark"] .catchup-skip {
  background: rgba(255,255,255,.06);
  color: var(--c-fg, #e6e6ec);
  border-color: rgba(255,255,255,.14);
}

/* v147 — Tappable "(N of M)" chain indicator in sheet title. Looks like
   an interactive link/chip so users learn it opens the manifest. */
.catchup-chain-indicator {
  appearance: none;
  background: var(--c-accent-soft, rgba(47,143,123,.12));
  color: var(--c-accent, #2f8f7b);
  border: 1px solid var(--c-accent, #2f8f7b);
  border-radius: 999px;
  padding: .15rem .55rem;
  font: inherit;
  font-size: .85em;
  font-weight: 600;
  cursor: pointer;
  margin-left: .35rem;
  vertical-align: baseline;
}
.catchup-chain-indicator:hover,
.catchup-chain-indicator:focus {
  background: var(--c-accent, #2f8f7b);
  color: #fff;
  outline: none;
}

/* v147 — Inline notice rendered above fields when the user toggles to a
   kind that isn't in the chain remainder. Keeps the warning quiet. */
.catchup-toggle-notice {
  background: var(--c-bg-2, #f7f3e6);
  border: 1px solid var(--c-line, #e3d8a8);
  color: var(--c-fg-mute, #6b5d2c);
  border-radius: 10px;
  padding: .55rem .75rem;
  font-size: .875rem;
  margin-bottom: .5rem;
  line-height: 1.4;
}
[data-theme="dark"] .catchup-toggle-notice {
  background: rgba(214,184,72,.08);
  border-color: rgba(214,184,72,.32);
  color: #e6d68a;
}

/* v147 — Pre-chain manifest sheet styles. */
.manifest-intro {
  font-size: .9rem;
  color: var(--c-fg-mute, #58585f);
  line-height: 1.45;
  margin-bottom: 1rem;
}
.manifest-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.manifest-row {
  background: var(--c-bg-2, #f7f7fa);
  border: 1px solid var(--c-line, #e3e3e8);
  border-radius: 12px;
  padding: .65rem .85rem;
}
.manifest-row.is-current {
  border-color: var(--c-accent, #2f8f7b);
  background: var(--c-accent-soft, rgba(47,143,123,.08));
}
[data-theme="dark"] .manifest-row {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
[data-theme="dark"] .manifest-row.is-current {
  border-color: var(--c-accent, #4dbf9f);
  background: rgba(77,191,159,.10);
}
.manifest-row-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-weight: 600;
  color: var(--c-fg, #1a1a1f);
}
.manifest-step {
  color: var(--c-fg-mute, #58585f);
  font-variant-numeric: tabular-nums;
  min-width: 1.5rem;
}
.manifest-label {
  flex: 1;
}
.manifest-current {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--c-accent, #2f8f7b);
  color: #fff;
  border-radius: 999px;
  padding: .1rem .45rem;
  font-weight: 700;
}
.manifest-row-meta {
  font-size: .85rem;
  color: var(--c-fg-mute, #58585f);
  margin-top: .15rem;
  padding-left: 2rem;
  font-variant-numeric: tabular-nums;
}

/* "Catch up" picker tile styling — distinct from primary kinds. */
.sheet-tile--catchup {
  background: var(--c-bg-2, #f4f4f6);
}

/* Backfilled marker on the History timeline pill. */
.hist-tl-event--backfilled .hist-tl-event-time {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.hist-tl-event--backfilled::after {
  content: "≈";
  font-weight: 700;
  margin-left: .25rem;
  color: var(--c-fg-mute, #58585f);
}

/* ============================================================
   Iter 6.17.2 — Smart count + target hint
   ============================================================ */
.catchup-floor-notice {
  font-size: .8rem;
  color: var(--c-fg-mute, #58585f);
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid var(--c-accent, #2f8f7b);
  padding: .4rem .55rem;
  border-radius: 0 6px 6px 0;
  margin: 0 0 .5rem;
}
.catchup-target {
  font-size: .85rem;
  margin-top: .6rem;
  padding: .45rem .6rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--c-fg, #1c1c1f);
}
.catchup-target--ok {
  background: #e8f6ef;
  color: #1e6a5b;
}
.catchup-target--low {
  background: #fff3e0;
  color: #8a4b00;
}
.catchup-target strong {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   iter-7.18 Phase 3 Part B3 — Daily-total cap banner + override
   ============================================================ */
.catchup-b3-warn {
  margin-top: .6rem;
  padding: .55rem .65rem;
  border-radius: 8px;
  background: #fff3e0;
  color: #8a4b00;
  border-left: 3px solid #d68a00;
  font-size: .85rem;
  line-height: 1.35;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.catchup-b3-warn-text {
  margin-bottom: .45rem;
}
.catchup-b3-warn strong {
  font-variant-numeric: tabular-nums;
}
.catchup-b3-override {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  cursor: pointer;
  user-select: none;
}
.catchup-b3-override input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}
.catchup-b3-warn--flash {
  background: #ffd8a8;
  box-shadow: 0 0 0 2px rgba(214, 138, 0, 0.35);
}
.catchup-save.is-b3-blocked {
  opacity: .55;
  cursor: not-allowed;
}

/* ============================================================
   Iter 6.28 — Admin Detail View v1
   ============================================================ */
.admin-table-toolbar {
  margin: 12px 0 8px;
}
.admin-search {
  width: 100%;
  max-width: 420px;
  padding: 8px 12px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: var(--ink, #1f2937);
}
.admin-search:focus {
  outline: 2px solid rgba(182, 132, 59, 0.4);
  outline-offset: -2px;
  border-color: var(--accent, #b6843b);
}

.admin-table-sortable th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.admin-table-sortable th.sortable:hover {
  color: var(--ink, #1f2937);
}
.admin-table-sortable th.sort-active::after {
  content: '\25BC';
  font-size: 9px;
  margin-left: 4px;
  opacity: 0.7;
}
.admin-table-sortable th.sort-active.sort-asc::after {
  content: '\25B2';
}

.admin-hh-row {
  cursor: pointer;
  transition: background 120ms ease;
}
.admin-hh-row:hover {
  background: rgba(182, 132, 59, 0.04);
}
.admin-hh-row.expanded {
  background: rgba(182, 132, 59, 0.06);
}
.admin-hh-row .chevron {
  display: inline-block;
  font-size: 10px;
  margin-right: 6px;
  opacity: 0.5;
  transition: transform 120ms ease;
}
.admin-hh-row.expanded .chevron {
  transform: rotate(90deg);
  opacity: 0.9;
}

.admin-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.admin-status-badge.new        { background: rgba(56, 132, 255, 0.14);  color: #1f4b9c; }
.admin-status-badge.engaged    { background: rgba(34, 134, 58, 0.16);   color: #1f5e2e; }
.admin-status-badge.active     { background: rgba(34, 134, 58, 0.10);   color: #1f5e2e; }
.admin-status-badge.setup-only { background: rgba(230, 162, 60, 0.18);  color: #7a4a00; }
.admin-status-badge.dormant    { background: rgba(120, 120, 120, 0.14); color: #555; }

/* Iter 6.31e-2: lifecycle chip rendered beneath the engagement status badge. */
.admin-lc-chip {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.admin-lc-chip-pal         { background: rgba(180, 110, 40, 0.10);  color: #8b5a1a; border-color: rgba(180, 110, 40, 0.30); }
.admin-lc-chip-paused      { background: rgba(120, 120, 120, 0.10); color: #555;    border-color: rgba(120, 120, 120, 0.25); }
.admin-lc-chip-bereavement { background: rgba(110, 90, 140, 0.10);  color: #5a4a7a; border-color: rgba(110, 90, 140, 0.30); }
.admin-lc-chip-closed      { background: rgba(60, 60, 60, 0.12);    color: #333;    border-color: rgba(60, 60, 60, 0.30); }
.admin-lc-chip-other       { background: rgba(56, 132, 255, 0.08);  color: #2a4f8a; border-color: rgba(56, 132, 255, 0.25); }

.admin-detail-row > td {
  padding: 0 !important;
  background: var(--cream, #faf6ef);
  border-top: none;
}
.admin-detail-panel {
  padding: 18px 16px;
  border-top: 1px dashed var(--line, #e5e7eb);
}
.admin-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 760px) {
  .admin-detail-grid { grid-template-columns: 1fr; }
}
.admin-detail-section h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft, #6b7280);
  margin: 0 0 8px;
  font-weight: 700;
}
.admin-detail-section ul.member-list,
.admin-detail-section ul.subject-list,
.admin-detail-section ul.invite-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.admin-detail-section li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft, #f3f4f6);
  font-size: 12.5px;
  line-height: 1.45;
}
.admin-detail-section li:last-child {
  border-bottom: none;
}
.admin-detail-section .row-title {
  font-weight: 600;
  color: var(--ink, #1f2937);
}
.admin-detail-section .row-meta {
  display: block;
  font-size: 11px;
  color: var(--ink-soft, #6b7280);
  margin-top: 2px;
}
.admin-detail-empty {
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
  font-style: normal;
}

.admin-funnel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.admin-funnel-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12.5px;
}
.admin-funnel-list .funnel-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 18px;
}
.admin-funnel-list .funnel-mark.done {
  background: rgba(34, 134, 58, 0.16);
  color: #1f5e2e;
}
.admin-funnel-list .funnel-mark.pending {
  background: rgba(120, 120, 120, 0.12);
  color: #888;
}
.admin-funnel-list .funnel-label {
  flex: 1;
}
.admin-funnel-list .funnel-time {
  font-size: 11px;
  color: var(--ink-soft, #6b7280);
  font-variant-numeric: tabular-nums;
}

.admin-histogram {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-histogram-row {
  display: grid;
  grid-template-columns: 110px 1fr 50px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.admin-histogram-kind {
  color: var(--ink, #1f2937);
  font-weight: 500;
}
.admin-histogram-bar {
  height: 10px;
  background: var(--cream, #faf6ef);
  border-radius: 3px;
  overflow: hidden;
}
.admin-histogram-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent, #b6843b);
  opacity: 0.7;
  border-radius: 3px;
}
.admin-histogram-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft, #6b7280);
}

.admin-role-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(120, 120, 120, 0.12);
  color: #444;
  margin-left: 6px;
}
.admin-role-chip.parent    { background: rgba(182, 132, 59, 0.16); color: #6b3410; }
.admin-role-chip.admin     { background: rgba(56, 132, 255, 0.16); color: #1f4b9c; }
.admin-role-chip.caregiver { background: rgba(34, 134, 58, 0.12);  color: #1f5e2e; }
.admin-role-chip.family    { background: rgba(120, 120, 120, 0.16); color: #444; }

.admin-invite-status {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
}
.admin-invite-status.pending  { background: rgba(230, 162, 60, 0.18); color: #7a4a00; }
.admin-invite-status.accepted { background: rgba(34, 134, 58, 0.16);  color: #1f5e2e; }
.admin-invite-status.revoked  { background: rgba(120, 120, 120, 0.16); color: #444; }
.admin-invite-status.expired  { background: rgba(200, 60, 60, 0.14);  color: #8a1a1a; }

/* ============================================================
   Iter 6.29 — Nav UX affordances
   Edge fades + chevron tap-to-scroll + progress strip on .tabs
   ============================================================ */

.tabs { position: sticky; } /* re-affirm; some narrow media-queries may try to override */
.tabs > .tabs-inner { position: relative; z-index: 1; }

/* Edge fade buttons. JS toggles [hidden] on/off based on scroll position. */
.tab-fade {
  position: absolute;
  top: 0;
  bottom: 3px; /* leave the progress strip uncovered */
  width: 44px;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  background: transparent;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.tab-fade[hidden] { display: none; }
.tab-fade-left {
  left: 0;
  justify-content: flex-start;
  padding-left: 6px;
  background: linear-gradient(to right, var(--cream) 35%, rgba(251, 247, 239, 0) 100%);
}
.tab-fade-right {
  right: 0;
  justify-content: flex-end;
  padding-right: 6px;
  background: linear-gradient(to left, var(--cream) 35%, rgba(251, 247, 239, 0) 100%);
}
[data-theme="dark"] .tab-fade-left {
  background: linear-gradient(to right, var(--paper, #15110e) 35%, rgba(21, 17, 14, 0) 100%);
}
[data-theme="dark"] .tab-fade-right {
  background: linear-gradient(to left, var(--paper, #15110e) 35%, rgba(21, 17, 14, 0) 100%);
}
.tab-fade-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(43, 42, 37, 0.10);
  color: var(--ink, #2b2a25);
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  transition: background 140ms ease;
}
[data-theme="dark"] .tab-fade-chev {
  background: rgba(255, 255, 255, 0.10);
  color: #e8e3d3;
}
.tab-fade:hover .tab-fade-chev,
.tab-fade:focus-visible .tab-fade-chev {
  background: rgba(43, 42, 37, 0.18);
}
.tab-fade:focus-visible {
  outline: 2px solid var(--accent, #b6843b);
  outline-offset: -2px;
}

/* Scroll-progress strip (Instagram Stories style) */
.tabs-progress {
  position: relative;
  height: 2px;
  background: rgba(43, 42, 37, 0.06);
  max-width: var(--max);
  margin: 0 auto;
  pointer-events: none;
}
.tabs-progress[hidden] { display: none; }
.tabs-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background: var(--accent, #b6843b);
  border-radius: 2px;
  transition: width 90ms linear, left 90ms linear;
}
[data-theme="dark"] .tabs-progress {
  background: rgba(255, 255, 255, 0.08);
}

/* Respect reduced-motion: drop slide animations */
@media (prefers-reduced-motion: reduce) {
  .topbar, .tabs, .tabs-progress-bar { transition: none !important; }
  body.scrolled-down .topbar { transform: none; }
  body.scrolled-down .tabs { top: 65px; }
}

/* ============================================================
   Iter 6.30 Phase 2a — Engagement Engine inbox surface
   ============================================================
   Quiet, card-shaped suggestions list mounted on Overview/Today.
   Two visual tiers:
     - T2 (visits / time-sensitive): warm amber left rule
     - T3 (engagement nudges): neutral surface with quiet rule
   The card is dismissible per-item; the entire card auto-hides when empty.
*/
.nudge-card {
  margin: 12px 16px 8px;
  padding: 14px 16px 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.nudge-card[hidden] { display: none; }
.nudge-card.is-collapsed .nudge-list,
.nudge-card.is-collapsed .nudge-empty { display: none; }

.nudge-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.nudge-card-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6b6b6b);
  font-weight: 600;
}
.nudge-card-toggle {
  background: transparent;
  border: 0;
  padding: 2px 6px;
  font-size: 12px;
  color: var(--muted, #6b6b6b);
  cursor: pointer;
  border-radius: 6px;
}
.nudge-card-toggle:hover { color: var(--text, #111); background: rgba(0,0,0,0.04); }

.nudge-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nudge-empty {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted, #6b6b6b);
}

.nudge-item {
  position: relative;
  padding: 10px 12px 10px 14px;
  background: var(--surface-2, #fafaf7);
  border-radius: 10px;
  border-left: 3px solid var(--border, rgba(0,0,0,0.12));
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 180ms ease, transform 180ms ease;
}
.nudge-item.is-dismissing {
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
}
.nudge-item--t2 { border-left-color: #c98a2a; }    /* warm amber */
.nudge-item--t1 { border-left-color: #c0392b; }    /* safety red */
.nudge-item--t3 { border-left-color: rgba(0,0,0,0.18); }
.nudge-item--t4 { border-left-color: rgba(0,0,0,0.12); }
[data-theme="dark"] .nudge-item {
  background: rgba(255,255,255,0.04);
  border-left-color: rgba(255,255,255,0.14);
}
[data-theme="dark"] .nudge-item--t2 { border-left-color: #d99a3a; }
[data-theme="dark"] .nudge-item--t1 { border-left-color: #e76b5e; }

.nudge-item-body { display: flex; flex-direction: column; gap: 3px; }
.nudge-item-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text, #111);
}
.nudge-item-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2, #444);
}
[data-theme="dark"] .nudge-item-text { color: rgba(255,255,255,0.78); }

.nudge-item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.nudge-cta {
  appearance: none;
  border: 0;
  background: var(--accent, #b6843b);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.nudge-cta:hover { filter: brightness(0.95); }
.nudge-learn {
  font-size: 12px;
  color: var(--muted, #6b6b6b);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nudge-learn:hover { color: var(--text, #111); }
.nudge-dismiss {
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--muted, #6b6b6b);
  cursor: pointer;
  border-radius: 6px;
}
.nudge-dismiss:hover { color: var(--text, #111); background: rgba(0,0,0,0.04); }
[data-theme="dark"] .nudge-dismiss:hover { background: rgba(255,255,255,0.06); }

@media (max-width: 480px) {
  .nudge-card { margin: 10px 12px 6px; padding: 12px 12px 10px; }
  .nudge-item-actions { gap: 6px; }
  .nudge-cta { padding: 6px 10px; font-size: 12.5px; }
}

/* ============================================================
   Iter 6.30 Phase 2b — T2 banner surface
   ============================================================
   Slim full-width band that pins under the tab strip. Designed to
   read at a glance — title is the headline, body is one short line.
   Hidden during quiet hours; per-session dismissable.
*/
.nudge-banner {
  position: sticky;
  top: 0;
  z-index: 8;
  background: #fff5e1;
  border-bottom: 1px solid #e2c38a;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}
.nudge-banner[hidden] { display: none; }
.nudge-banner[data-tier="T1"] {
  background: #ffe9e6;
  border-bottom-color: #f4a89e;
}
[data-theme="dark"] .nudge-banner {
  background: #3c2f15;
  border-bottom-color: rgba(217, 154, 58, 0.4);
}
[data-theme="dark"] .nudge-banner[data-tier="T1"] {
  background: #4a221d;
  border-bottom-color: rgba(231, 107, 94, 0.5);
}

.nudge-banner-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nudge-banner-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c98a2a;
}
.nudge-banner[data-tier="T1"] .nudge-banner-dot { background: #c0392b; }

.nudge-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.nudge-banner-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #111);
}
.nudge-banner-body {
  font-size: 12.5px;
  color: var(--text-2, #444);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="dark"] .nudge-banner-title { color: #fff; }
[data-theme="dark"] .nudge-banner-body { color: rgba(255,255,255,0.78); }

.nudge-banner-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.nudge-banner-cta {
  appearance: none;
  border: 0;
  background: #c98a2a;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.nudge-banner-cta:hover { filter: brightness(0.95); }
.nudge-banner[data-tier="T1"] .nudge-banner-cta { background: #c0392b; }

.nudge-banner-dismiss {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted, #6b6b6b);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.nudge-banner-dismiss:hover { background: rgba(0,0,0,0.06); color: var(--text, #111); }
[data-theme="dark"] .nudge-banner-dismiss:hover { background: rgba(255,255,255,0.08); color: #fff; }

@media (max-width: 480px) {
  .nudge-banner-inner { padding: 8px 12px; gap: 10px; }
  .nudge-banner-body { display: none; }
  .nudge-banner-title { font-size: 12.5px; }
  .nudge-banner-cta { padding: 4px 8px; font-size: 12px; }
}

/* "Later" button in the suggestions card (Phase 2b) */
.nudge-later {
  background: transparent;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  color: var(--muted, #6b6b6b);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.nudge-later:hover { color: var(--text, #111); background: rgba(0,0,0,0.03); }
[data-theme="dark"] .nudge-later { border-color: rgba(255,255,255,0.16); }
[data-theme="dark"] .nudge-later:hover { background: rgba(255,255,255,0.05); }

/* Hide-on-scroll: the banner rides below the hide-on-scroll topbar.
   When topbar tucks away, banner stays sticky at top of viewport. */
body.scrolled-down .nudge-banner { top: 0; }

/* ===== iter 6.30a: Push subscription toggle (Settings) ===== */
.push-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.push-toggle__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink, #1a1f2e);
}
.push-toggle__status {
  font-size: 13px;
  color: var(--ink-soft, #6b7280);
}
.push-toggle__btn {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border, #d1d5db);
  background: var(--surface, #fff);
  color: var(--ink, #1a1f2e);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}
.push-toggle__btn:hover:not(:disabled) {
  background: var(--surface-elev, #f3f4f6);
}
.push-toggle__btn:disabled {
  opacity: 0.5;
  cursor: wait;
}
.push-toggle__note {
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
  font-style: normal;
}
[data-theme="dark"] .push-toggle__title { color: var(--ink, #f3f4f6); }
[data-theme="dark"] .push-toggle__btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.15);
  color: var(--ink, #f3f4f6);
}
[data-theme="dark"] .push-toggle__btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
}

/* ====================================================================
   Iter 6.30c — Admin Engagement (rules, nudges, funnel)
   ==================================================================== */
.rule-tier {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.rule-tier.tier-T1 { background: #fde8e8; color: #9b1c1c; border-color: #f8b4b4; }
.rule-tier.tier-T2 { background: #fff4e0; color: #92400e; border-color: #fde68a; }
.rule-tier.tier-T3 { background: #e6f1ff; color: #1e40af; border-color: #bfdbfe; }
[data-theme="dark"] .rule-tier.tier-T1 { background: rgba(155,28,28,0.22); color: #fca5a5; border-color: rgba(252,165,165,0.35); }
[data-theme="dark"] .rule-tier.tier-T2 { background: rgba(146,64,14,0.25); color: #fde68a; border-color: rgba(253,230,138,0.3); }
[data-theme="dark"] .rule-tier.tier-T3 { background: rgba(30,64,175,0.25); color: #bfdbfe; border-color: rgba(191,219,254,0.3); }

.nudge-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nudge-status-queued    { background: #eef2ff; color: #3730a3; }
.nudge-status-delivered { background: #d1fae5; color: #065f46; }
.nudge-status-clicked   { background: #c7e9ff; color: #0c4a6e; }
.nudge-status-dismissed { background: #f3f4f6; color: #4b5563; }
.nudge-status-failed    { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .nudge-status-queued    { background: rgba(55,48,163,0.3); color: #c7d2fe; }
[data-theme="dark"] .nudge-status-delivered { background: rgba(6,95,70,0.3); color: #a7f3d0; }
[data-theme="dark"] .nudge-status-clicked   { background: rgba(12,74,110,0.35); color: #bae6fd; }
[data-theme="dark"] .nudge-status-dismissed { background: rgba(75,85,99,0.3); color: #d1d5db; }
[data-theme="dark"] .nudge-status-failed    { background: rgba(153,27,27,0.3); color: #fecaca; }

.rule-toggle-wrap {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.admin-rule-toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0;
}
.admin-rule-toolbar .admin-search { flex: 1 1 240px; min-width: 200px; }
.admin-rule-toolbar select {
  padding: 8px 10px;
  border: 1px solid var(--line, #d4d4d4);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--ink, #111);
  font-size: 14px;
}

.admin-rules-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}
@media (max-width: 640px) {
  .admin-rules-summary { grid-template-columns: 1fr 1fr; }
}

/* =====================================================
   Iter 6.31b — Lifecycle / Household status screen
   ===================================================== */

.lifecycle-root {
  display: block;
  margin-top: 8px;
}

.lifecycle-status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 12px;
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--ink-soft);
}
.lifecycle-status-banner-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6b8e23;
  flex: 0 0 8px;
}
.lifecycle-status-banner[data-lifecycle-state="paused_user"]       .lifecycle-status-banner-dot,
.lifecycle-status-banner[data-lifecycle-state="paused_inactivity"] .lifecycle-status-banner-dot {
  background: #b8a576;
}
.lifecycle-status-banner[data-lifecycle-state="bereavement"] .lifecycle-status-banner-dot {
  background: #8a7a6a;
}
.lifecycle-status-banner[data-lifecycle-state="closed"] .lifecycle-status-banner-dot {
  background: #6b6b6b;
}
.lifecycle-status-banner[data-lifecycle-state="pal_active"] .lifecycle-status-banner-dot {
  background: #8a93b8;
}
.lifecycle-status-banner-text strong { font-weight: 600; color: var(--ink); }

.lifecycle-inline-msg {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

.lifecycle-intro { margin-bottom: 18px; }
.lifecycle-title {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.lifecycle-lede {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.lifecycle-fineprint {
  margin: 6px 0 14px;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* Four options — EQUAL visual weight. No primary, no nudge. */
.lifecycle-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 640px) {
  .lifecycle-options { grid-template-columns: 1fr; }
}
.lifecycle-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  font: inherit;
  color: var(--ink);
  min-height: 84px;
}
.lifecycle-option:hover {
  border-color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.lifecycle-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lifecycle-option-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.lifecycle-option-sub {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Subflows */
.lifecycle-subflow {
  display: block;
  padding: 4px 0;
}
.lifecycle-subflow-soft .lifecycle-title { font-weight: 400; }
.lifecycle-back {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 12px;
  color: var(--ink-soft);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.lifecycle-back:hover { color: var(--ink); }

.lifecycle-pause-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 480px) {
  .lifecycle-pause-grid { grid-template-columns: 1fr; }
}
.lifecycle-pause-opt {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 120ms ease;
}
.lifecycle-pause-opt:hover { border-color: var(--ink-soft); }

.lifecycle-changed-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.lifecycle-changed-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 120ms ease;
}
.lifecycle-changed-row:hover { border-color: var(--ink-soft); }
.lifecycle-changed-row[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.lifecycle-changed-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.lifecycle-changed-sub {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.lifecycle-close-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.lifecycle-secondary,
.lifecycle-danger {
  padding: 10px 16px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  transition: border-color 120ms ease, background 120ms ease;
}
.lifecycle-secondary:hover { border-color: var(--ink-soft); }
.lifecycle-danger {
  border-color: #b85a3a;
  color: #8a3a1a;
}
.lifecycle-danger:hover {
  background: #faeee5;
  border-color: #8a3a1a;
}

.lifecycle-resources {
  margin: 18px 0 6px;
  padding: 14px 16px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.lifecycle-resources-q {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.lifecycle-resources-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* =====================================================
   Iter 6.31b — Bereavement mode body class
   Applied app-wide when household lifecycle state is in
   {bereavement, paused_user, paused_inactivity, closed}.
   Suppresses celebratory chrome: confetti, progress bars,
   hero decorative imagery, and softens the palette.
   ===================================================== */

body.bereavement-mode {
  /* Neutralize the warm accent across the app while in quiet mode.
     Existing components reading var(--accent) automatically soften. */
  --accent: #8a7a6a;
  --accent-deep: #6b6157;
  --accent-soft: #c8baa6;
}

/* Suppress all celebratory animations and decorative artifacts. */
body.bereavement-mode .confetti,
body.bereavement-mode [data-confetti],
body.bereavement-mode .celebrate,
body.bereavement-mode [data-celebrate],
body.bereavement-mode .milestone-celebration,
body.bereavement-mode .hero-decoration,
body.bereavement-mode [data-hero-illustration],
body.bereavement-mode .progress-bar-decorative,
body.bereavement-mode [data-decorative-only] {
  display: none !important;
}

/* Soften progress chrome — keep functional info, drop the cheerful bar fill. */
body.bereavement-mode .progress-bar,
body.bereavement-mode .progress-track {
  filter: grayscale(1);
  opacity: 0.55;
}

/* Suppress motion-driven celebratory effects. */
body.bereavement-mode .pulse,
body.bereavement-mode .sparkle,
body.bereavement-mode [data-celebratory-motion] {
  animation: none !important;
}

/* Hero strips and overly cheerful gradient blocks become neutral. */
body.bereavement-mode .hero-celebrate,
body.bereavement-mode .hero-gradient-cheerful,
body.bereavement-mode [data-celebratory-hero] {
  background: var(--cream) !important;
  color: var(--ink-soft) !important;
}

/* Closed households: hide the entire app surface except settings. Users
   should be able to revisit settings to export or reopen later, but not
   see baby/pregnancy content. The settings panel is exempt. */
body[data-lifecycle-state="closed"] [data-public-hide]:not(#panel-settings):not(.topbar) {
  /* Keep the tab nav so the user can reach settings; hide content panels. */
}
body[data-lifecycle-state="closed"] .panel:not(#panel-settings) {
  display: none !important;
}

/* Reduced-motion respect (no override of system preference). */
@media (prefers-reduced-motion: reduce) {
  body.bereavement-mode * {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================
   Iter 6.31c — PAL-mode body class + export result chrome
   pal-mode is layered on top of bereavement-mode. The
   bereavement rules still suppress confetti/celebratory
   chrome; pal-mode warms surfaces back up a touch so
   the app does not feel mournful in restart.
   ===================================================== */

body.bereavement-mode.pal-mode {
  /* Warmer accent than pure bereavement neutral. Stays soft. */
  --accent:      #a88a6a;
  --accent-deep: #8a6f53;
  --accent-soft: #d6c0a4;
}

/* PAL: progress bars are visible but gentle. Override bereavement greyscale. */
body.bereavement-mode.pal-mode .progress-bar,
body.bereavement-mode.pal-mode .progress-track {
  filter: none;
  opacity: 0.85;
}

/* PAL: surface a faint reassurance band on the main content frame so the
   user always knows they are in gentle mode. Implemented as a top border
   on the primary panels rather than a banner. */
body.bereavement-mode.pal-mode .panel:not(#panel-settings) {
  position: relative;
}
body.bereavement-mode.pal-mode .panel:not(#panel-settings)::before {
  content: 'Gentle mode';
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  padding: 6px 16px;
}

/* Export result card */
/* Iter 6.31e-4: download buttons row inside the export-ready block. */
.lifecycle-export-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.lifecycle-export-downloads .lifecycle-secondary {
  flex: 1 1 auto;
  min-width: 180px;
}

.lifecycle-export-result {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.lifecycle-export-result-title {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}
.lifecycle-export-result-sub {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-soft);
}
.lifecycle-export-summary {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Disabled change-list rows (used when restart is gated). */
.lifecycle-changed-row[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

/* =========================================================
   Iter 6.31d — Admin Lifecycle Operations
   ========================================================= */

.admin-lifecycle-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 12px 0 18px;
}

.admin-lifecycle-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary, #6a6760);
}

.admin-lifecycle-filter select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #d8d4cb);
  background: #fff;
  font-size: 13px;
}

.admin-lifecycle-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.admin-lifecycle-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  background: #f4f0e8;
  color: var(--text-secondary, #6a6760);
  border: 1px solid #e8e2d3;
}

.admin-lifecycle-summary-chip strong {
  font-weight: 600;
  color: var(--text-primary, #2c2a25);
}

.admin-lifecycle-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-lifecycle-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e8e2d3;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color .15s ease, transform .1s ease;
}
.admin-lifecycle-row:hover {
  border-color: #c9c1ad;
  transform: translateY(-1px);
}
.admin-lifecycle-row:focus-visible {
  outline: 2px solid var(--accent, #b08d57);
  outline-offset: 2px;
}

.admin-lifecycle-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.admin-lifecycle-row-name {
  font-weight: 600;
  color: var(--text-primary, #2c2a25);
}
.admin-lifecycle-row-sub {
  font-size: 12px;
  color: var(--text-secondary, #6a6760);
  font-family: var(--font-mono, ui-monospace, monospace);
}

.admin-lifecycle-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 12px;
  color: var(--text-secondary, #6a6760);
  text-align: right;
}
.admin-lifecycle-row-reason {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-lifecycle-export-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  background: #fff1d6;
  color: #6e4a00;
  font-size: 11px;
  font-weight: 500;
}

/* State chips */
.admin-lifecycle-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.admin-lifecycle-chip-active            { background: #e3f3e1; color: #2f6a2c; border-color: #c7e5c4; }
.admin-lifecycle-chip-pal-active        { background: #fcecd2; color: #7a4a14; border-color: #f3d8a4; }
.admin-lifecycle-chip-paused-user       { background: #eaeaf2; color: #4a4a6a; border-color: #d4d4e2; }
.admin-lifecycle-chip-paused-inactivity { background: #f0eef0; color: #6a5a6a; border-color: #ddd6dc; }
.admin-lifecycle-chip-bereavement       { background: #efe7df; color: #5a4a3c; border-color: #d8cdbf; }
.admin-lifecycle-chip-closed            { background: #f2dada; color: #6a2c2c; border-color: #e4bcbc; }
.admin-lifecycle-chip-unknown           { background: #ecebe8; color: #6a6760; border-color: #d4d2cb; }

/* Modal */
.lifecycle-admin-modal[hidden] { display: none !important; }
.lifecycle-admin-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px;
  overflow-y: auto;
}
.lifecycle-admin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 14, .55);
  backdrop-filter: blur(2px);
}
.lifecycle-admin-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  background: #fdfaf3;
  border-radius: 14px;
  padding: 28px 30px 30px;
  box-shadow: 0 24px 64px rgba(20, 18, 14, .25);
  border: 1px solid #e8e2d3;
}
.lifecycle-admin-modal-card h3 {
  margin: 0 0 18px;
  font-size: 20px;
}
.lifecycle-admin-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary, #6a6760);
  border-radius: 6px;
}
.lifecycle-admin-modal-close:hover {
  background: #ede5d3;
}
body.lifecycle-admin-modal-open {
  overflow: hidden;
}

/* Drawer content */
.lifecycle-admin-state {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8e2d3;
}
.lifecycle-admin-state-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.lifecycle-admin-state-name {
  font-weight: 600;
  color: var(--text-primary, #2c2a25);
}
.lifecycle-admin-state-id {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--text-secondary, #6a6760);
}
.lifecycle-admin-state-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 14px;
  row-gap: 4px;
  font-size: 13px;
  margin: 0;
}
.lifecycle-admin-state-meta dt {
  color: var(--text-secondary, #6a6760);
  font-weight: 500;
}
.lifecycle-admin-state-meta dd {
  margin: 0;
  color: var(--text-primary, #2c2a25);
  word-break: break-word;
}

.lifecycle-admin-section {
  margin-top: 18px;
}
.lifecycle-admin-section h4,
.lifecycle-admin-loss h4,
.lifecycle-admin-override h4 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary, #6a6760);
}

.lifecycle-admin-audit {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lifecycle-admin-audit li {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #ece6d8;
  border-radius: 8px;
  font-size: 13px;
}
.lifecycle-admin-audit-override {
  border-color: #e4bcbc;
  background: #fbf2f2;
}
.lifecycle-admin-audit-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}
.lifecycle-admin-audit-action {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .04em;
  color: #6a2c2c;
}
.lifecycle-admin-audit-override .lifecycle-admin-audit-action {
  background: #f2dada;
  padding: 2px 8px;
  border-radius: 8px;
}
.lifecycle-admin-audit-arrow {
  color: var(--text-secondary, #6a6760);
}
.lifecycle-admin-audit-meta {
  font-size: 11px;
  color: var(--text-secondary, #6a6760);
  margin-bottom: 2px;
}
.lifecycle-admin-audit-reason {
  font-size: 13px;
  color: var(--text-primary, #2c2a25);
}

.lifecycle-admin-exports {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lifecycle-admin-exports li {
  padding: 8px 12px;
  border: 1px solid #ece6d8;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 6px;
  background: #fff;
}

.lifecycle-admin-loss {
  margin-top: 18px;
}
.lifecycle-admin-loss ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}
.lifecycle-admin-loss li {
  padding: 6px 0;
  color: var(--text-secondary, #6a6760);
}

/* Override form */
.lifecycle-admin-override {
  margin-top: 22px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e4bcbc;
  border-radius: 10px;
}
.lifecycle-admin-override .section-sub code {
  background: #f2dada;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}
.lifecycle-admin-override-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.lifecycle-admin-override-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary, #6a6760);
}
.lifecycle-admin-override-form label > span {
  font-weight: 500;
  color: var(--text-primary, #2c2a25);
}
.lifecycle-admin-override-form select,
.lifecycle-admin-override-form textarea,
.lifecycle-admin-override-form input {
  font: inherit;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #d8d4cb);
  background: #fff;
}
.lifecycle-admin-override-form textarea {
  resize: vertical;
  min-height: 48px;
}
.lifecycle-admin-override-form input[name="confirm_token"] {
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: .04em;
}
.lifecycle-admin-override-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.lifecycle-admin-override-form .danger {
  background: #c0392b;
  color: #fff;
  border: 0;
  padding: 9px 16px;
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
}
.lifecycle-admin-override-form .danger:hover {
  background: #a4291d;
}
.lifecycle-admin-override-form .danger:disabled {
  background: #d6b1ad;
  cursor: not-allowed;
}
.lifecycle-admin-override-feedback {
  font-size: 12px;
  color: var(--text-secondary, #6a6760);
}

@media (max-width: 640px) {
  .admin-lifecycle-row {
    grid-template-columns: auto 1fr;
  }
  .admin-lifecycle-row-meta {
    grid-column: 1 / -1;
    align-items: flex-start;
    text-align: left;
  }
  .lifecycle-admin-state-meta {
    grid-template-columns: 1fr;
  }
  .lifecycle-admin-state-meta dt {
    margin-top: 4px;
  }
}

/* =====================================================================
   Iter 6.32 — Settings collapsible sections with peek fade
   ---------------------------------------------------------------------
   Pure additive layer over .section. JS toggles .is-collapsed on the
   container; CSS does the rest. The .section-inner gets a clipped
   max-height plus a gradient overlay that hints "more below". An
   inline pill in the heading row toggles it.

   Defensive design: if .is-collapsed never gets set (JS fails, SW
   stale, etc.) sections render fully expanded — identical to pre-6.32.
   ===================================================================== */

.settings-collapsible {
  /* Slightly tighter top padding when collapsed so the peek reads as a card. */
  transition: padding 180ms ease;
}

.settings-collapsible.is-collapsed {
  padding-top: 48px;
  padding-bottom: 32px;
}

/* Header row: heading + pill button on the same line. No flex-wrap — we
   want the pill pinned to the right even when the heading wraps to two
   lines. The heading shrinks (min-width: 0) so it can wrap rather than
   push the pill off-row. */
.settings-collapse-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-bottom: 12px;
}
.settings-collapse-row > .section-heading {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.settings-collapse-toggle {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--rule, rgba(0, 0, 0, 0.12));
  background: var(--cream, #fbf6ee);
  color: var(--ink, #2a221a);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  transition: background 120ms ease, transform 180ms ease;
}
.settings-collapse-toggle:hover {
  background: var(--cream-deep, #f3eada);
}
.settings-collapse-toggle:focus-visible {
  outline: 2px solid var(--accent, #c7895b);
  outline-offset: 2px;
}
/* Arrow direction: collapsed state shows the glyph at its native orientation
   (▾ = down-pointing), hinting "there's more to expand below". When the
   section is expanded, we rotate 180° so the arrow points up, hinting
   "tap to fold this back up". The base rule applies to the expanded state
   and .is-collapsed overrides to 0deg — but the previous build had the
   logic swapped. Inverted here so collapsed = down, expanded = up. */
.settings-collapse-icon {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  transform: rotate(0deg); /* default (expanded fallback after JS sets state) */
  transition: transform 180ms ease;
}
.settings-collapsible:not(.is-collapsed) .settings-collapse-icon {
  transform: rotate(180deg); /* expanded: arrow points up (▴) */
}
.settings-collapsible.is-collapsed .settings-collapse-icon {
  transform: rotate(0deg); /* collapsed: arrow points down (▾) */
}

/* Peek-fade: when collapsed, clip .section-inner content. Iter 6.32b sizes
   this generously — enough room for eyebrow + heading (potentially wrapping
   to 2 lines) + 2–3 lines of the section's existing .section-sub trailing
   into a soft fade. The user's stated goal is "heading and a line or two of
   body, fading out at the bottom" — that requires ~200px on desktop and
   ~180px on mobile, with the fade kept narrow so the body lines stay
   readable. */
.settings-collapsible.is-collapsed .section-inner {
  position: relative;
  max-height: 220px;
  overflow: hidden;
}

/* Bottom fade overlay. Iter 6.32b uses a softer, narrower fade (40px) so the
   last visible line of body text remains readable. The prior 60–96px fade
   covered too much of the body text — user feedback was that the peek
   showed "more of the titles but not a line or two of the body as desired." */
.settings-collapsible.is-collapsed .section-inner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(
    180deg,
    rgba(251, 246, 238, 0) 0%,
    var(--cream, #fbf6ee) 95%
  );
  pointer-events: none;
}
[data-theme="dark"] .settings-collapsible.is-collapsed .section-inner::after {
  background: linear-gradient(
    180deg,
    rgba(21, 17, 14, 0) 0%,
    var(--paper, #15110e) 90%
  );
}

/* Full-section background tints to flag the peek surface. Subtle, not noisy. */
.settings-collapsible.is-collapsed {
  background: linear-gradient(180deg, transparent 0%, rgba(247, 240, 228, 0.55) 100%);
  border-radius: 12px;
}
[data-theme="dark"] .settings-collapsible.is-collapsed {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.03) 100%);
}

/* Secondary tap target — invisible button covering the bottom of the
   collapsed section so a thumb tap anywhere in the peek expands it. */
.settings-collapse-shroud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: none; /* shown only when collapsed */
  z-index: 1;
}
.settings-collapsible.is-collapsed .settings-collapse-shroud {
  display: block;
}

/* Mobile tweaks: keep the pill compact and pinned to the right. */
@media (max-width: 600px) {
  .settings-collapse-toggle { padding: 5px 10px 5px 8px; font-size: 12px; }
  .settings-collapsible.is-collapsed .section-inner { max-height: 200px; }
}

/* Iter 6.32b: Settings > Appearance theme toggle row. Sits below the App icon
   controls. Reads as a single-line preference: label + helper + a chunky tap
   target with the current mode glyph. */
.theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid var(--rule, #e5ddd0);
  border-radius: 14px;
  background: var(--paper, #fefbf5);
}
[data-theme="dark"] .theme-toggle-row {
  background: var(--paper, #2a241e);
  border-color: var(--rule, #3a322a);
}
.theme-toggle-copy { min-width: 0; }
.theme-toggle-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #2c241c);
}
[data-theme="dark"] .theme-toggle-label { color: var(--ink, #f0e8db); }
.theme-toggle-hint {
  font-size: 13px;
  color: var(--ink-soft, #6b6056);
  margin-top: 2px;
}
[data-theme="dark"] .theme-toggle-hint { color: var(--ink-soft, #a89e94); }
.theme-toggle-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule, #e5ddd0);
  background: var(--cream, #fbf6ee);
  font-size: 20px;
  cursor: pointer;
  flex: 0 0 44px;
  transition: background-color 150ms ease, transform 80ms ease;
}
.theme-toggle-settings:hover { background: var(--paper, #fefbf5); }
.theme-toggle-settings:active { transform: scale(0.96); }
[data-theme="dark"] .theme-toggle-settings {
  background: var(--cream, #1f1b16);
  border-color: var(--rule, #3a322a);
}

/* Iter 6.32b: peek summary is no longer used. The custom "hint line" approach
   duplicated each section's existing .section-sub and competed with it. The
   new approach lets the existing .section-sub render as the peek body and
   uses a generous max-height + soft 28px bottom fade so the user clearly
   sees the heading + 2-3 lines of body text trailing off. Keep the rule as
   display:none so any markup still in the DOM stays inert. */
.settings-collapse-summary { display: none !important; }
/* Iter 6.32b: the prior rule hid .section-sub when collapsed in favor of a
   custom one-liner summary. We've reverted to letting the section's existing
   description peek through naturally — it reads as "a sentence or two of
   real body content trailing off into a soft fade," which is the desired
   effect. (Rule kept here as documentation; no override needed.) */

/* When a section is the target of the URL hash (deep link), we always render
   it expanded — defensive belt-and-suspenders alongside the JS expand hook. */
.settings-collapsible:target { /* the :target pseudo applies to id matches */
  /* JS already sets .is-collapsed = false; this just makes sure even if JS
     hasn't run yet, the user sees the full content for the linked section. */
}
.settings-collapsible:target.is-collapsed .section-inner { max-height: none; overflow: visible; }
.settings-collapsible:target.is-collapsed .section-inner::after { display: none; }
.settings-collapsible:target .settings-collapse-shroud { display: none; }

/* ============================================================
   Iter 6.33 — Push diagnostic + inline install/permission nudge
   ============================================================ */

/* Settings > Notifications > This device card */
.push-diag {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.push-diag-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink, #111);
}
.push-diag-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9ca3af;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.15);
}
.push-diag-dot[data-state="all_good"]            { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.push-diag-dot[data-state="prompt_permission"],
.push-diag-dot[data-state="finish_subscribe"],
.push-diag-dot[data-state="install_required"]    { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.20); }
.push-diag-dot[data-state="blocked_permission"]  { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20); }
.push-diag-dot[data-state="unsupported"]         { background: #9ca3af; }

.push-diag-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft, #6b7280);
}
.push-diag-meta {
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.push-diag-meta span { white-space: nowrap; }
.push-diag-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.push-diag-cta,
.push-diag-test {
  appearance: none;
  border: 1px solid var(--accent, #0ea5a4);
  background: var(--accent, #0ea5a4);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.push-diag-cta:hover,
.push-diag-test:hover { filter: brightness(1.05); }
.push-diag-cta:disabled,
.push-diag-test:disabled { opacity: 0.55; cursor: progress; }
.push-diag-test {
  background: transparent;
  color: var(--accent, #0ea5a4);
}
.push-diag-test-msg {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
}

/* Today tab inline nudge card */
.push-today-card {
  position: relative;
  margin: 14px 0 4px;
  padding: 16px 18px 16px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(14, 165, 164, 0.04), rgba(14, 165, 164, 0.01));
  border: 1px solid rgba(14, 165, 164, 0.18);
}
.push-today-card[data-state="blocked_permission"] {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.04), rgba(239, 68, 68, 0.01));
  border-color: rgba(239, 68, 68, 0.22);
}
.push-today-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-soft, #6b7280);
  cursor: pointer;
  border-radius: 6px;
}
.push-today-dismiss:hover { background: rgba(0,0,0,0.04); color: var(--ink, #111); }
.push-today-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #0ea5a4);
  margin-bottom: 6px;
}
.push-today-card[data-state="blocked_permission"] .push-today-eyebrow { color: #b91c1c; }
.push-today-headline {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink, #111);
}
.push-today-body {
  margin: 0 0 12px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft, #4b5563);
}
.push-today-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.push-today-cta {
  appearance: none;
  border: 1px solid var(--accent, #0ea5a4);
  background: var(--accent, #0ea5a4);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 9px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.push-today-cta:hover { filter: brightness(1.05); }
.push-today-cta:disabled { opacity: 0.55; cursor: progress; }

/* Install-help modal (mounted on body to escape panel stacking) */
.push-install-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.push-install-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.push-install-sheet {
  position: relative;
  width: min(440px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface, #fff);
  color: var(--ink, #111);
  border-radius: 16px;
  padding: 24px 22px 22px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);
}
.push-install-sheet h3 { margin: 0 0 14px 0; font-size: 18px; }
.push-install-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border: 0; background: transparent;
  font-size: 24px; line-height: 1;
  color: var(--ink-soft, #6b7280);
  border-radius: 8px;
  cursor: pointer;
}
.push-install-close:hover { background: rgba(0,0,0,0.05); }
.push-install-steps {
  margin: 0 0 14px 0;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink, #111);
}
.push-install-steps li { margin-bottom: 8px; }
.push-install-note {
  margin: 0;
  padding: 10px 12px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--ink-soft, #6b7280);
  line-height: 1.5;
}

/* iter 6.34: stage-agnostic push nudge wrap (sits above tab nav) */
.push-today-wrap { padding: 0 16px; max-width: 720px; margin: 0 auto; }
.push-today-wrap:empty,
.push-today-wrap > div:empty,
.push-today-wrap > div[hidden] { display: none; padding: 0; margin: 0; }

/* iter 6.34: post-accept walkthrough body + actions */
.push-post-accept-body p { margin: 0 0 12px 0; font-size: 14px; line-height: 1.55; color: var(--ink, #111); }
.push-post-accept-body p:last-child { margin-bottom: 16px; color: var(--ink-soft, #4b5563); }
.push-post-accept-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.push-post-accept-skip {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-soft, #6b7280);
  font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 6px;
}
.push-post-accept-skip:hover { background: rgba(0,0,0,0.04); color: var(--ink, #111); }

/* =====================================================================
   Iter 6.35 — Boot cloak
   ---------------------------------------------------------------------
   While body.booting is set (boot.js stamps it; auth.js removes it on
   isReady), we:
     - Hide the public showcase, header/tabs (data-public-hide), and the
       admin tab/panel (data-requires-admin) so the user never sees a
       flash of "wrong" UI.
     - Paint a centered wordmark + spinner overlay (.boot-cloak) so the
       screen reads as "loading" rather than blank.
   Once .booting is removed, .boot-cloak fades to display:none and the
   real UI takes over without an additional repaint hop.
   ===================================================================== */
.boot-cloak {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--cream, #f5efe4);
  color: var(--accent, #c87a3a);
  pointer-events: none;
}
body.booting .boot-cloak {
  display: flex;
}
.boot-cloak-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px;
  max-width: 320px;
  text-align: center;
}
.boot-cloak-mark {
  width: 56px;
  height: 56px;
  color: var(--accent, #c87a3a);
}
.boot-cloak-title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #1a1714);
  letter-spacing: -0.01em;
}
.boot-cloak-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in oklab, var(--accent, #c87a3a) 25%, transparent);
  border-top-color: var(--accent, #c87a3a);
  animation: bootCloakSpin 720ms linear infinite;
}
@keyframes bootCloakSpin {
  to { transform: rotate(360deg); }
}

/* Belt-and-braces gating while booting: never let the showcase or app
   chrome paint before auth.js has resolved its first session check. */
body.booting [data-public-showcase],
body.booting [data-public-hide],
body.booting [data-requires-admin],
body.booting [data-requires-auth],
body.booting .onboarding-wizard {
  visibility: hidden !important;
}

/* After boot, the cloak is fully removed from layout (display:none) and
   the next paint shows the real chrome. The 120ms fade prevents a hard
   pop on slower devices. */
body:not(.booting) .boot-cloak {
  display: none;
  animation: bootCloakFadeOut 120ms ease-out;
}
@keyframes bootCloakFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Iter 6.35 — Admin tab CSS belt-and-braces.
   The HTML ships [data-requires-admin] with the `hidden` attribute and
   invites.js toggles it based on UshaAuth.isAdmin(). This rule adds a
   second layer: until body[data-admin-gated="1"] is set (only after
   auth.js confirms the admin claim was processed), [data-requires-admin]
   stays display:none regardless of whether some other code stripped the
   hidden attribute. body[data-admin-gated="1"] only appears for users
   whose JWT app_metadata.is_admin === true. */
body:not([data-admin-gated="1"]) [data-requires-admin] {
  display: none !important;
}

/* ============================================================
   Iter 7.0 — Care Navigator (Nanny Anna)
   Command bar mounts on Today tab via [data-care-nav-mount].
   Bottom sheet is appended to <body> directly (per modal rule).
   ============================================================ */

.care-nav-slot { margin: 12px 0 18px; }

.care-nav-bar {
  background: linear-gradient(135deg, var(--sage-bg) 0%, var(--cream) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.care-nav-bar-input {
  appearance: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  cursor: pointer;
  text-align: left;
  color: var(--ink-muted);
  font: 500 15px/1.3 var(--sans);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.care-nav-bar-input:hover,
.care-nav-bar-input:focus-visible {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(152, 168, 132, 0.18);
  background: var(--paper);
  outline: none;
}
.care-nav-bar-icon { font-size: 18px; line-height: 1; }
.care-nav-bar-prompt { flex: 1; }

.care-nav-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.care-nav-chip {
  appearance: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 12px;
  font: 500 13px/1.2 var(--sans);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.care-nav-chip:hover,
.care-nav-chip:focus-visible {
  border-color: var(--sage);
  background: var(--sage-bg);
  outline: none;
}
.care-nav-chip:active { transform: scale(0.97); }

/* -------- Bottom sheet -------- */
.care-nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}
.care-nav-sheet.is-open { pointer-events: auto; }

.care-nav-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 8, 0.32);
  opacity: 0;
  transition: opacity var(--t);
}
.care-nav-sheet.is-open .care-nav-sheet-backdrop { opacity: 1; }

.care-nav-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 88vh;
  max-height: 880px;
  background: var(--paper);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0.2, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.care-nav-sheet.is-open .care-nav-sheet-panel { transform: translateY(0); }

.care-nav-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--cream);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}
.care-nav-sheet-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.care-nav-sheet-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sage-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.care-nav-sheet-name {
  font: 600 16px/1.2 var(--serif);
  color: var(--ink);
}
.care-nav-sheet-close {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
.care-nav-sheet-close:hover { background: var(--rule-soft); color: var(--ink); }

.care-nav-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.care-nav-empty { padding: 8px 4px 0; }
.care-nav-empty-greet {
  font: 400 15px/1.5 var(--sans);
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.care-nav-empty-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.care-nav-msg {
  display: flex;
  flex-direction: column;
  margin: 0 0 14px;
  max-width: 100%;
}
.care-nav-msg--user { align-items: flex-end; }
.care-nav-msg--assistant { align-items: flex-start; }

.care-nav-bubble {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 16px;
  font: 400 15px/1.55 var(--sans);
  color: var(--ink);
  word-wrap: break-word;
}
.care-nav-msg--user .care-nav-bubble {
  background: var(--sage-bg);
  border: 1px solid color-mix(in srgb, var(--sage) 40%, transparent);
  border-bottom-right-radius: 6px;
}
.care-nav-msg--assistant .care-nav-bubble {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-bottom-left-radius: 6px;
}
.care-nav-bubble p { margin: 0 0 8px; }
.care-nav-bubble p:last-child { margin-bottom: 0; }
.care-nav-bubble ul { margin: 6px 0 8px 18px; padding: 0; }
.care-nav-bubble li { margin: 2px 0; }
.care-nav-bubble strong { color: var(--ink); font-weight: 600; }
/* Iter 7.6.3: heading + hr styling inside bubbles. Headings are tonally
   warm — same family as body, slightly bolder, modest size lift only. */
.care-nav-bubble h2,
.care-nav-bubble h3,
.care-nav-bubble h4 {
  margin: 12px 0 6px;
  font: 600 15px/1.3 var(--sans);
  color: var(--ink);
  letter-spacing: -0.005em;
}
.care-nav-bubble h2 { font-size: 16px; }
.care-nav-bubble h3 { font-size: 15px; }
.care-nav-bubble h4 { font-size: 14px; color: var(--ink-soft, var(--ink)); }
.care-nav-bubble h2:first-child,
.care-nav-bubble h3:first-child,
.care-nav-bubble h4:first-child { margin-top: 0; }
.care-nav-bubble hr {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  margin: 10px 0;
}
.care-nav-bubble a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.care-nav-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  max-width: 86%;
}
.care-nav-source {
  font: 500 11px/1.3 var(--sans);
  color: var(--ink-muted);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--rule-soft);
  text-decoration: none;
}
.care-nav-source[href]:hover {
  color: var(--accent-deep);
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 2px 7px;
}

.care-nav-feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  padding-left: 4px;
}
.care-nav-fb-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-muted);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.care-nav-fb-btn:hover { background: var(--sage-bg); border-color: var(--sage); }
.care-nav-fb-btn:active { transform: scale(0.92); }
.care-nav-fb-btn:disabled { opacity: 0.5; cursor: default; }
.care-nav-fb-ack {
  font: 500 12px/1.2 var(--sans);
  color: var(--ink-muted);
}

.care-nav-msg--thinking .care-nav-bubble { padding: 12px 16px; }
.care-nav-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.care-nav-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-muted);
  animation: care-nav-pulse 1.2s ease-in-out infinite;
}
.care-nav-dots span:nth-child(2) { animation-delay: 0.15s; }
.care-nav-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes care-nav-pulse {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1); }
}

.care-nav-sheet-foot {
  border-top: 1px solid var(--rule-soft);
  background: var(--cream);
  /* Iter 7.6.3: explicit minimum bottom inset. On iPhone PWAs in standalone
     mode, env(safe-area-inset-bottom) sometimes resolves to 0, so the input
     pill sits flush against the home-indicator area and looks clipped.
     max(20px, inset) guarantees at least 20px of breathing room while still
     honoring the larger native inset on iPhones with home indicators. */
  padding:
    12px
    max(14px, env(safe-area-inset-right, 0px))
    max(20px, env(safe-area-inset-bottom, 0px))
    max(14px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}
.care-nav-form {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.care-nav-input {
  flex: 1 1 auto;
  /* min-width: 0 is required — flex children default to min-width:auto,
     which on an <input> reserves the intrinsic placeholder width and can
     push siblings (the send button) off-screen on narrow viewports. */
  min-width: 0;
  appearance: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 12px 16px;
  font: 400 16px/1.3 var(--sans);
  /* 16px keeps iOS Safari from auto-zooming the layout on focus, which is
     the secondary cause of the apparent right-edge clip on iPhone. */
  color: var(--ink);
  min-height: 44px;
}
.care-nav-input:focus-visible {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(152, 168, 132, 0.22);
}
.care-nav-send {
  appearance: none;
  background: var(--accent);
  color: white;
  border: 0;
  width: 44px;
  height: 44px;
  /* flex-shrink: 0 guarantees the send button can never be compressed or
     pushed out of layout by a long input value or narrow viewport. */
  flex: 0 0 44px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
}
.care-nav-send:hover { background: var(--accent-deep); }
.care-nav-send:active { transform: scale(0.94); }

/* Prevent background body scroll while sheet open */
body.care-nav-sheet-active { overflow: hidden; }

/* Larger screens — center the sheet */
@media (min-width: 720px) {
  .care-nav-sheet-panel {
    left: 50%;
    transform: translate(-50%, 100%);
    max-width: 560px;
    height: 80vh;
    max-height: 800px;
    border-radius: 22px;
    bottom: 24px;
  }
  .care-nav-sheet.is-open .care-nav-sheet-panel { transform: translate(-50%, 0); }
}

/* ============================================================
   Iter 7.10 — Admin Relevance Gate Dashboard
   ============================================================ */

/* Filter chips (used in admin-table-toolbar) */
.chip-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule, #e5e7eb);
  background: var(--paper, #fff);
  color: var(--ink-muted, #6b7280);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.chip-pill:hover {
  background: rgba(182, 132, 59, 0.06);
  border-color: rgba(182, 132, 59, 0.4);
  color: var(--ink, #1f2937);
}
.chip-pill[aria-pressed="true"] {
  background: rgba(182, 132, 59, 0.12);
  border-color: var(--accent, #b6843b);
  color: var(--accent-deep, #8b5e2a);
  font-weight: 600;
}
.chip-pill:focus-visible {
  outline: 2px solid var(--accent, #b6843b);
  outline-offset: 2px;
}

/* Verdict pills */
.relevance-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--rule, #e5e7eb);
  background: var(--paper, #fff);
  color: var(--ink-muted, #6b7280);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  white-space: nowrap;
}
.relevance-pill--passed {
  background: rgba(98, 138, 110, 0.12);
  border-color: rgba(98, 138, 110, 0.4);
  color: #3f6a4f;
}
.relevance-pill--vetoed {
  background: rgba(201, 95, 74, 0.12);
  border-color: rgba(201, 95, 74, 0.4);
  color: #8c3a2a;
}
.relevance-pill--fellopen {
  background: rgba(224, 168, 90, 0.14);
  border-color: rgba(224, 168, 90, 0.45);
  color: #8a5a1f;
  cursor: help;
}

/* Sim score pills */
.sim-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.sim-pill--strong {
  background: rgba(98, 138, 110, 0.10);
  color: #3f6a4f;
}
.sim-pill--ambiguous {
  background: rgba(224, 168, 90, 0.14);
  color: #8a5a1f;
}
.sim-pill--low {
  background: rgba(120, 120, 120, 0.10);
  color: var(--ink-muted, #6b7280);
}

/* KB id code chip in table */
.relevance-kb {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(120, 120, 120, 0.08);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px;
  color: var(--ink, #1f2937);
  white-space: nowrap;
}

/* Query cell — clamp long queries to keep table tidy */
.relevance-q {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--ink, #1f2937);
}

/* Loading state on table */
.admin-relevance-table[data-loading="1"] tbody {
  opacity: 0.55;
  transition: opacity 120ms ease;
}

/* Dark theme adjustments */
[data-theme="dark"] .chip-pill {
  background: var(--paper);
  border-color: var(--rule);
}
[data-theme="dark"] .chip-pill[aria-pressed="true"] {
  background: rgba(182, 132, 59, 0.20);
  color: #e6b87a;
}
[data-theme="dark"] .relevance-pill--passed {
  background: rgba(98, 138, 110, 0.22);
  color: #9dc5ac;
}
[data-theme="dark"] .relevance-pill--vetoed {
  background: rgba(201, 95, 74, 0.22);
  color: #e8a695;
}
[data-theme="dark"] .relevance-pill--fellopen {
  background: rgba(224, 168, 90, 0.22);
  color: #e6c089;
}
[data-theme="dark"] .sim-pill--strong { color: #9dc5ac; background: rgba(98, 138, 110, 0.18); }
[data-theme="dark"] .sim-pill--ambiguous { color: #e6c089; background: rgba(224, 168, 90, 0.18); }
[data-theme="dark"] .sim-pill--low { color: var(--ink-muted); background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .relevance-kb {
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================================
 * Iter 7.14 — Router decision pills, helpful pills, feedback reason form
 * ============================================================ */

/* Reuse .relevance-pill base. Color-code by decision. */
.relevance-pill--l1_strong {
  background: rgba(98, 138, 110, 0.14);
  border-color: rgba(98, 138, 110, 0.45);
  color: #3f6a4f;
}
.relevance-pill--l1_rescue {
  background: rgba(116, 158, 138, 0.12);
  border-color: rgba(116, 158, 138, 0.40);
  color: #4a7561;
}
.relevance-pill--l1_miss {
  background: rgba(201, 95, 74, 0.10);
  border-color: rgba(201, 95, 74, 0.35);
  color: #8c3a2a;
}
.relevance-pill--l2_data {
  background: rgba(112, 138, 178, 0.14);
  border-color: rgba(112, 138, 178, 0.42);
  color: #3a5780;
}
.relevance-pill--l3_no_match {
  background: rgba(143, 99, 138, 0.14);
  border-color: rgba(143, 99, 138, 0.42);
  color: #5d3e58;
}
.relevance-pill--l3_stub,
.relevance-pill--empty,
.relevance-pill--unknown {
  background: rgba(120, 120, 120, 0.10);
  border-color: rgba(120, 120, 120, 0.30);
  color: var(--ink-muted, #6b7280);
}
.relevance-pill--gate_pass {
  background: rgba(98, 138, 110, 0.10);
  border-color: rgba(98, 138, 110, 0.35);
  color: #3f6a4f;
}
.relevance-pill--gate_veto {
  background: rgba(201, 95, 74, 0.12);
  border-color: rgba(201, 95, 74, 0.40);
  color: #8c3a2a;
}
.relevance-pill--gate_open {
  background: rgba(224, 168, 90, 0.14);
  border-color: rgba(224, 168, 90, 0.45);
  color: #8a5a1f;
}

/* Helpful pills */
.relevance-pill--helpful {
  background: rgba(98, 138, 110, 0.16);
  border-color: rgba(98, 138, 110, 0.45);
  color: #3f6a4f;
}
.relevance-pill--unhelpful {
  background: rgba(201, 95, 74, 0.14);
  border-color: rgba(201, 95, 74, 0.42);
  color: #8c3a2a;
}

[data-theme="dark"] .relevance-pill--l1_strong   { background: rgba(98, 138, 110, 0.22);  color: #9dc5ac; }
[data-theme="dark"] .relevance-pill--l1_rescue   { background: rgba(116, 158, 138, 0.22); color: #a9cdba; }
[data-theme="dark"] .relevance-pill--l1_miss     { background: rgba(201, 95, 74, 0.22);   color: #e8a695; }
[data-theme="dark"] .relevance-pill--l2_data     { background: rgba(112, 138, 178, 0.22); color: #9fb9de; }
[data-theme="dark"] .relevance-pill--l3_no_match { background: rgba(143, 99, 138, 0.22);  color: #c9a3c2; }
[data-theme="dark"] .relevance-pill--gate_pass   { background: rgba(98, 138, 110, 0.20);  color: #9dc5ac; }
[data-theme="dark"] .relevance-pill--gate_veto   { background: rgba(201, 95, 74, 0.22);   color: #e8a695; }
[data-theme="dark"] .relevance-pill--gate_open   { background: rgba(224, 168, 90, 0.22);  color: #e6c089; }
[data-theme="dark"] .relevance-pill--helpful     { background: rgba(98, 138, 110, 0.22);  color: #9dc5ac; }
[data-theme="dark"] .relevance-pill--unhelpful   { background: rgba(201, 95, 74, 0.22);   color: #e8a695; }

/* Feedback prompt label (lives inside .care-nav-feedback). */
.care-nav-fb-prompt {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted, #6b7280);
  margin-right: 4px;
}

/* Thumbs-down expansion: short textarea for reason. */
.care-nav-fb-reason {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(120, 120, 120, 0.06);
  border: 1px solid var(--rule, #e5e7eb);
}
.care-nav-fb-reason[hidden] { display: none !important; }
.care-nav-fb-ack[hidden] { display: none !important; }
.care-nav-fb-reason-label {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted, #6b7280);
}
.care-nav-fb-reason-input {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--rule, #e5e7eb);
  background: var(--paper, #fff);
  color: var(--ink, #1f2937);
  resize: vertical;
  min-height: 56px;
  width: 100%;
  box-sizing: border-box;
}
.care-nav-fb-reason-input:focus {
  outline: 2px solid var(--accent, #b6843b);
  outline-offset: 1px;
}
.care-nav-fb-reason-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.care-nav-fb-skip,
.care-nav-fb-submit {
  font-family: var(--sans);
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule, #e5e7eb);
  background: var(--paper, #fff);
  color: var(--ink, #1f2937);
  cursor: pointer;
}
.care-nav-fb-submit {
  background: var(--sage, #628a6e);
  border-color: var(--sage, #628a6e);
  color: #fff;
}
.care-nav-fb-skip:hover { background: rgba(120, 120, 120, 0.08); }
.care-nav-fb-submit:hover { filter: brightness(0.95); }

[data-theme="dark"] .care-nav-fb-reason {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .care-nav-fb-reason-input {
  background: var(--paper);
  color: var(--ink);
}

/* ============================================================
 * iter 7.15 — Logging style toggle
 * ============================================================ */

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

.logging-style-fieldset {
  border: none;
  padding: 0;
  margin: 18px 0 8px;
  display: grid;
  gap: 10px;
}
.logging-style-fieldset[disabled] {
  opacity: 0.55;
  pointer-events: none;
}

.logging-style-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.logging-style-option:hover {
  border-color: var(--accent-soft);
}
.logging-style-option[data-selected="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.logging-style-option input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.logging-style-option-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.logging-style-option-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.logging-style-option-desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.logging-style-meta {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--ink-muted);
}

.logging-style-status {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.logging-style-status[data-ok="true"] {
  color: var(--accent-deep);
}
.logging-style-status[data-error="true"] {
  color: #b13c2c;
}

/* Confirmation sheet — reuses .sheet/.sheet-scrim defaults */
.logging-style-sheet .sheet-head {
  padding-bottom: 6px;
}
.logging-style-sheet-body {
  padding: 6px 20px 16px;
  overflow-y: auto;
}
.logging-style-sheet-lede {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.baseline-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.baseline-list li {
  padding: 10px 12px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}
.baseline-list .baseline-empty {
  color: var(--ink-muted);
  font-style: normal;
}
.logging-style-sheet-text {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.logging-style-sheet-text strong { color: var(--ink); }
.logging-style-sheet-note {
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  margin-top: 8px;
}
.logging-style-sheet-footer {
  display: flex;
  gap: 10px;
  padding: 12px 20px 4px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  flex-wrap: wrap;
}
.logging-style-sheet-footer button {
  flex: 1 1 auto;
  min-width: 140px;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 15px;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.logging-style-btn-ghost {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
}
.logging-style-btn-ghost:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}
.logging-style-btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}
.logging-style-btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.logging-style-btn-primary:disabled {
  background: var(--rule);
  border-color: var(--rule);
  color: var(--ink-muted);
  cursor: not-allowed;
}

/* iter 7.15 hotfix #2 — Logging style sheet positioning + scroll lock.
 * The sheet now lives at <body> level so position:fixed always resolves
 * to the viewport. This block:
 *  - Locks page scroll behind the sheet (iOS in-app browsers included).
 *  - Forces a higher stacking context than the topbar (z-index: 80).
 *  - Belt-and-suspenders: position:fixed with explicit inset/bottom in case
 *    a flex container in the DOM upstream interferes.
 */
html.logging-style-sheet-open,
body.logging-style-sheet-open {
  overflow: hidden !important;
  /* Some iOS standalone PWA contexts ignore overflow on <html> without this. */
  position: relative;
  height: 100%;
  touch-action: none;
}

.logging-style-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
}
[data-logging-style-scrim] {
  z-index: 79;
}

@media (min-width: 720px) {
  .logging-style-sheet {
    left: 50%;
    right: auto;
    bottom: 24px;
  }
}

/* =====================================================================
   ITER 7.15 PHASE 3 — Exception composer + Today-mode card
   ===================================================================== */

/* ---------- Mode-display visibility ---------- */
/* Driven by body[data-logging-mode] set in logging-style.js. Default
   (no attribute) leaves everything visible so first paint isn't blank. */
body[data-logging-mode="inclusion"] [data-mode-display="exception-only"] { display: none !important; }
body[data-logging-mode="exception"] [data-mode-display="inclusion-only"] { display: none !important; }

/* ---------- Now-band exception tile ---------- */
.now-tile--exception {
  /* Match existing now-tile aesthetic but at full width with warmer accent. */
  width: 100%;
  margin-top: 0.4rem;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--cream-deep) 70%);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.now-tile--exception:active {
  transform: scale(0.985);
}
.now-tile--exception .now-tile-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.now-tile--exception .now-tile-kind {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}
.now-tile--exception .now-tile-detail {
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.now-tile--exception .now-tile-cta {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-deep);
  margin-top: 0.15rem;
}

/* ---------- Today-mode card ---------- */
.today-mode-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  margin-top: 1rem;
  margin-bottom: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.today-mode-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.today-mode-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 600;
}
.today-mode-status {
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.today-mode-status--typical {
  color: var(--accent-deep);
  font-weight: 600;
}

.today-mode-baseline {
  background: var(--cream);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  padding: 0.8rem 0.95rem;
}
.today-mode-baseline-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.4rem;
}
.today-mode-baseline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.today-mode-baseline-list li {
  font-size: 0.95rem;
  color: var(--ink);
}

.today-mode-exceptions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.today-mode-exception {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: var(--cream);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
}
.today-mode-exception--red {
  border-color: #c54a4a;
  background: #fbeae6;
}
.today-mode-exception-time {
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.today-mode-exception-body {
  font-size: 0.95rem;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.today-mode-exception-body strong { font-weight: 600; }
.today-mode-exception-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.today-mode-exception-flag {
  color: #c54a4a;
  font-size: 1rem;
  align-self: center;
}

.today-mode-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.today-mode-btn-primary,
.today-mode-btn-secondary {
  flex: 1 1 auto;
  min-height: 44px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}
.today-mode-btn-primary {
  background: var(--accent);
  border-color: var(--accent-deep);
  color: #fffaf3;
}
.today-mode-btn-primary:active { background: var(--accent-deep); }
.today-mode-btn-secondary:active { background: var(--cream); }

/* ---------- Exception composer sheet ---------- */
html.exception-composer-open,
body.exception-composer-open {
  overflow: hidden !important;
  position: relative;
  height: 100%;
  touch-action: none;
}

.exception-composer-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--paper);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-overflow-scrolling: touch;
}
[data-exception-composer-scrim] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 79;
}
@media (min-width: 720px) {
  .exception-composer-sheet {
    left: 50%;
    right: auto;
    width: min(560px, calc(100vw - 32px));
    transform: translateX(-50%);
    border-radius: 18px;
    bottom: 32px;
  }
}

.exception-composer-sheet .sheet-stage {
  padding: 0.7rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.exception-field {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.exception-field-legend {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  padding: 0;
}
.exception-field-optional {
  font-size: 0.7rem;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 400;
  margin-left: 0.35rem;
}

.exception-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.exception-pill {
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 36px;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.exception-pill:hover { border-color: var(--accent-soft); }
.exception-pill--selected,
.exception-pill[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent-deep);
  color: #fffaf3;
}

.exception-when-input,
.exception-notes-input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.95rem;
  font-family: inherit;
  min-height: 44px;
  box-sizing: border-box;
}
.exception-notes-input {
  resize: vertical;
  min-height: 64px;
}

.exception-link-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  background: var(--cream);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.exception-link-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.exception-redflag {
  background: #fbeae6;
  border: 1px solid #c54a4a;
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Hotfix 7.15.3c: explicit display: flex above clobbers the HTML hidden
   attribute (the UA's display: none rule loses specificity). Restore. */
.exception-redflag[hidden] { display: none !important; }
.exception-redflag-row {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
}
.exception-redflag-icon {
  font-size: 1.2rem;
  line-height: 1.1;
}
.exception-redflag-title {
  display: block;
  font-weight: 700;
  color: #7a1f1f;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}
.exception-redflag-body {
  margin: 0;
  font-size: 0.88rem;
  color: #5e2828;
  line-height: 1.4;
}
.exception-redflag-cta {
  background: #c54a4a;
  color: #fffaf3;
  border: none;
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  min-height: 38px;
}
.exception-redflag-cta:active { background: #9c2929; }

/* Hotfix 7.15.3c: soft, always-available Ask Nanny Anna affordance in the
   composer. Visually distinct from the red banner CTA — lower contrast,
   muted moss tone matching the existing Nanny Anna lockup. */
.exception-ask-nanny {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.7rem 0.85rem;
  background: #ecf1e7;
  border: 1px solid #c4d1b8;
  border-radius: 12px;
  color: #2f4226;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.exception-ask-nanny:hover { background: #e2eadb; }
.exception-ask-nanny:active { background: #d6e0cc; }
.exception-ask-nanny-label {
  font-weight: 600;
  font-size: 0.95rem;
}
.exception-ask-nanny-hint {
  font-size: 0.78rem;
  color: #5d6f53;
  font-style: normal;
}

.exception-composer-footer {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.4rem;
}
.exception-btn-ghost,
.exception-btn-primary {
  flex: 1 1 auto;
  min-height: 44px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.65rem 0.9rem;
}
.exception-btn-ghost {
  background: var(--paper);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}
.exception-btn-primary {
  background: var(--accent);
  color: #fffaf3;
  border: 1px solid var(--accent-deep);
}
.exception-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.exception-btn-primary:not(:disabled):active { background: var(--accent-deep); }

.exception-status {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
  min-height: 1.2em;
}
.exception-status[data-status-kind="error"] { color: #c54a4a; }
.exception-status[data-status-kind="ok"] { color: var(--accent-deep); }

/* =====================================================================
   Iter 7.15 Phase 4: suggestion banner + silent-variance card
   ===================================================================== */

/* ---------- 14-day suggestion banner (inclusion mode) ---------- */
.suggest-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 0.95rem 1rem;
  margin-top: 0.9rem;
  margin-bottom: 0.4rem;
}
.suggest-banner-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-deep);
}
.suggest-banner-body {
  flex: 1 1 auto;
  min-width: 0;
}
.suggest-banner-title {
  margin: 0 0 0.2rem 0;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.35;
}
.suggest-banner-copy {
  margin: 0 0 0.7rem 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.4;
}
.suggest-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.suggest-banner-primary,
.suggest-banner-dismiss,
.suggest-banner-link {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.suggest-banner-primary {
  background: var(--accent);
  color: #fffaf3;
  border-color: var(--accent-deep);
}
.suggest-banner-primary:hover { background: var(--accent-deep); }
.suggest-banner-dismiss {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--rule);
}
.suggest-banner-dismiss:hover { background: var(--cream); color: var(--ink); }
.suggest-banner-link {
  background: transparent;
  color: var(--accent-deep);
  border-color: transparent;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.suggest-banner-link:hover { color: var(--ink); }

/* ---------- 72-hour silent-variance card (exception mode) ---------- */
.silent-variance-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  /* Slightly warmer tint than the suggest banner so users can tell them
     apart even though they never appear simultaneously (one is
     inclusion-only, the other exception-only). */
  background: #fdf5e8;
  border: 1px solid #e7d6b3;
  border-radius: 14px;
  padding: 0.95rem 1rem;
  margin-top: 0.9rem;
  margin-bottom: 0.4rem;
}
.silent-variance-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fffaf0;
  border: 1px solid #e7d6b3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b48421;
}
.silent-variance-body { flex: 1 1 auto; min-width: 0; }
.silent-variance-title {
  margin: 0 0 0.7rem 0;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.35;
}
.silent-variance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.silent-variance-primary,
.silent-variance-secondary,
.silent-variance-dismiss {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.silent-variance-primary {
  background: var(--accent);
  color: #fffaf3;
  border-color: var(--accent-deep);
}
.silent-variance-primary:hover { background: var(--accent-deep); }
.silent-variance-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.silent-variance-secondary {
  background: #fffaf0;
  color: var(--ink);
  border-color: #e7d6b3;
}
.silent-variance-secondary:hover { background: #fff3dc; }
.silent-variance-dismiss {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.silent-variance-dismiss:hover { color: var(--ink); }

/* The [hidden] HTML attribute is respected by browsers; no override needed.
   data-mode-display gating is handled by the existing CSS rules elsewhere
   in this file that key off body[data-logging-mode]. */

/* ============================================================ */
/* Phase 5: well-visit prompt, next-visit strip, other vaccines  */
/* ============================================================ */

/* ----- Vax tab: next-visit status strip -----
   Mounted above the hero (mirrors Overview "Now" band placement) so the
   most timely, conditional content is the first thing the user sees on
   the Vaccinations tab. Full-bleed cream band wraps an inner card. */
[data-vax-next-visit][hidden] { display: none; }

.vax-next-visit-mount {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  border-bottom: 1px solid var(--rule);
  padding: 18px 20px 22px;
}

.vax-next-visit {
  background: var(--paper);
  border: 1px solid var(--cream-deep);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin: 0 auto;
  max-width: var(--max);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.vax-next-visit-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.4rem;
}
.vax-next-visit-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--accent);
  margin-top: 1px;
}
.vax-next-visit-titles { flex: 1 1 auto; min-width: 0; }
.vax-next-visit-title {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.3;
}
.vax-next-visit-sub {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}
.vax-next-visit-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.3rem 0.8rem;
}
.vax-next-visit-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9rem;
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--cream-deep);
}
.vax-next-visit-item:last-child { border-bottom: none; }
.vax-next-visit-vax  { color: var(--ink); font-weight: 500; }
.vax-next-visit-dose { color: var(--ink-muted); font-size: 0.85rem; }
.vax-next-visit-more {
  color: var(--ink-muted);
  font-style: normal;
  border-bottom: none;
  padding-top: 0.2rem;
}
.vax-next-visit-empty {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ----- Vax tab: Other vaccinations list ----- */
[data-vax-other-list][hidden] { display: none; }
.vax-other {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--cream-deep);
  border-radius: 12px;
}
.vax-other-title {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.vax-other-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vax-other-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--cream-deep);
}
.vax-other-item:last-child { border-bottom: none; }
.vax-other-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.vax-other-name {
  font-weight: 500;
  color: var(--ink);
}
.vax-other-date {
  font-size: 0.85rem;
  color: var(--ink-muted);
  white-space: nowrap;
}
.vax-other-meta {
  font-size: 0.83rem;
  color: var(--ink-soft);
}

/* ----- Vax tab: Add other vaccine trigger ----- */
.vax-other-add {
  margin-top: 1.1rem;
  text-align: center;
}
.vax-other-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--accent-deep);
  border: 1px dashed var(--accent-soft);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.vax-other-add-btn:hover {
  background: var(--cream);
  border-color: var(--accent);
}
.vax-other-add-help {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

/* ----- Milestones tab: well-visit prompt card ----- */
[data-ms-visit-prompt][hidden] { display: none; }
.ms-visit-prompt {
  background: var(--paper);
  border: 1px solid var(--cream-deep);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem;
  margin: 0 0 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.ms-visit-prompt-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}
.ms-visit-prompt-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--accent);
  margin-top: 1px;
}
.ms-visit-prompt-titles { flex: 1 1 auto; min-width: 0; }
.ms-visit-prompt-title {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.3;
}
.ms-visit-prompt-sub {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}
.ms-visit-prompt-body {
  margin: 0.4rem 0 0.9rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.ms-visit-prompt-empty {
  margin: 0.4rem 0 0;
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.ms-visit-prompt-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.ms-visit-prompt-btn {
  flex: 1 1 auto;
  min-width: 140px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--cream-deep);
  border-radius: 999px;
  padding: 0.6rem 1rem;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ms-visit-prompt-btn:hover { background: var(--cream-deep); }
.ms-visit-prompt-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.ms-visit-prompt-btn-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* ----- Milestones tab: surveillance dot on past-window items ----- */
.ms-item-surveilled {
  position: relative;
}
.ms-item-surveilled::before {
  content: "";
  position: absolute;
  left: -0.05rem;
  top: 1.1rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d4923a;
  box-shadow: 0 0 0 2px rgba(212,146,58,0.18);
}
.ms-item-surveilled .ms-when {
  color: #a06820;
  font-style: italic;
  font-size: 0.82rem;
}

/* ----- Add Other Vaccine sheet ----- */
body.other-vax-locked { overflow: hidden; }
.other-vax-sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.other-vax-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  animation: ovx-fade 0.18s ease-out;
}
@keyframes ovx-fade { from { opacity: 0; } to { opacity: 1; } }
.other-vax-sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--paper);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding: 1.2rem 1.2rem 1.4rem;
  max-height: 90vh;
  overflow-y: auto;
  animation: ovx-slide 0.22s ease-out;
  box-shadow: 0 -6px 32px rgba(0,0,0,0.18);
}
@keyframes ovx-slide { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (min-width: 640px) {
  .other-vax-sheet-wrap { align-items: center; }
  .other-vax-sheet {
    border-radius: 18px;
    max-height: 80vh;
  }
}
.other-vax-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}
.other-vax-sheet-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}
.other-vax-sheet-close {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 8px;
  display: inline-flex;
}
.other-vax-sheet-close:hover { background: var(--cream); color: var(--ink); }
.other-vax-sheet-blurb {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.other-vax-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.other-vax-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.other-vax-label {
  font-size: 0.86rem;
  color: var(--ink);
  font-weight: 500;
}
.other-vax-optional {
  color: var(--ink-muted);
  font-weight: 400;
  font-size: 0.82rem;
}
.other-vax-field input,
.other-vax-field textarea {
  background: var(--cream);
  border: 1px solid var(--cream-deep);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  color: var(--ink);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.other-vax-field input:focus,
.other-vax-field textarea:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
  border-color: var(--accent);
}
.other-vax-field textarea { resize: vertical; min-height: 60px; }
.other-vax-sheet-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.other-vax-btn {
  flex: 1 1 auto;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.other-vax-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.other-vax-btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.other-vax-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.other-vax-btn-secondary {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream-deep);
}
.other-vax-btn-secondary:hover { background: var(--cream-deep); }
.other-vax-error {
  margin: 0.4rem 0 0;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  background: #fdecec;
  color: #8c2a2a;
  font-size: 0.88rem;
  border: 1px solid #f3c5c5;
}

/* Dark mode tweaks */
[data-theme="dark"] .vax-next-visit,
[data-theme="dark"] .vax-other,
[data-theme="dark"] .ms-visit-prompt,
[data-theme="dark"] .other-vax-sheet {
  background: var(--cream-deep);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .ms-item-surveilled::before { background: #e2a55a; }
[data-theme="dark"] .ms-item-surveilled .ms-when { color: #e2a55a; }
[data-theme="dark"] .other-vax-error { background: #3a1e1e; color: #f0c4c4; border-color: #5a2a2a; }

/* ====================================================================
   Phase 6 (Iter 7.15): Pediatric summary exports + Growth tab pill
   ==================================================================== */

/* ---- Settings → Pediatric summary exports ---- */
.exports-panel {
  margin-top: 1rem;
}
.exports-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.exports-status {
  font-size: 0.88rem;
  color: var(--ink-soft);
  min-height: 1.2em;
}
.exports-status-error {
  color: #8c2a2a;
}
.exports-visit-date {
  margin: 1rem 0 1.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: rgba(200, 122, 58, 0.05);
}
.exports-visit-date-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.exports-visit-date-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.exports-visit-date-input {
  flex: 1 1 auto;
  max-width: 200px;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: inherit;
}
.exports-visit-date-save {
  padding: 0.45rem 1rem;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.exports-visit-date-save:active {
  background: var(--accent-deep);
}
.exports-visit-date-status {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  min-height: 1.2em;
}
.exports-visit-date-hint {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  opacity: 0.85;
}
[data-theme="dark"] .exports-visit-date {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(232, 180, 135, 0.06);
}
[data-theme="dark"] .exports-visit-date-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

.exports-recent {
  margin-top: 0.4rem;
}
.exports-recent-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.exports-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.exports-recent-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--cream-deep);
  border-radius: 10px;
  font-size: 0.9rem;
}
.exports-recent-when {
  color: var(--ink);
  font-weight: 500;
}
.exports-recent-meta {
  color: var(--ink-muted);
  font-size: 0.83rem;
  white-space: nowrap;
}
.exports-recent-empty {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin: 0;
}

/* ---- Growth tab pill ---- */
[data-growth-pill][hidden] { display: none; }

.growth-pill-mount {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  border-bottom: 1px solid var(--rule);
  padding: 14px 20px 18px;
}
.growth-pill-stack {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 0.55rem;
}
.growth-pill {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  background: var(--paper);
  border: 1px solid var(--cream-deep);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.growth-pill:hover,
.growth-pill:focus-visible {
  border-color: var(--accent);
  outline: none;
}
.growth-pill--empty {
  cursor: default;
}
.growth-pill--empty:hover,
.growth-pill--empty:focus-visible {
  border-color: var(--cream-deep);
}
.growth-pill-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--accent);
}
.growth-pill--freshness .growth-pill-icon {
  color: var(--ink-muted);
}
.growth-pill--empty .growth-pill-icon {
  color: var(--ink-muted);
}
.growth-pill-body {
  flex: 1 1 auto;
  min-width: 0;
}
.growth-pill-title {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.3;
}
.growth-pill-sub {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-top: 0.1rem;
}
.growth-pill-chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--ink-muted);
}
.growth-pill--empty .growth-pill-chevron {
  display: none;
}

[data-theme="dark"] .exports-recent-item,
[data-theme="dark"] .growth-pill {
  background: var(--cream-deep);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .exports-status-error {
  color: #f0a4a4;
}

/* ====================================================================
   Iter 7.15 Phase 6.1: Prominent Generate CTA + Notes/Concerns Modal
   ==================================================================== */

/* ---- Anchor-jump offset ----
   Native browser anchor scroll handles this via scroll-margin-top. We
   used to compute it at click-time in JS, but iOS WebKit silently
   ignores programmatic scrolls in some PWA contexts, which kept the
   click handler from working. The native hash-link path always works
   because Safari handles it at the engine level. Tuned per-breakpoint:
   desktop topbar+tabs ~120px + extra room for eyebrow/heading;
   mobile topbar+tabs ~110px + safe-area + heading. */
#settings-exports {
  scroll-margin-top: 240px;
}
@media (max-width: 700px) {
  #settings-exports {
    scroll-margin-top: 430px;
  }
}

/* ---- Prominent Generate CTA button ---- */
.exports-cta {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  width: 100%;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  font: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  /* touch-action:manipulation tells iOS to fire click immediately on
     tap-up, without waiting ~300ms to detect a double-tap-to-zoom. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.15);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
/* Restrict :hover to actual pointer devices. iOS Safari treats the
   first tap on an element with :hover styles as a hover gesture,
   suppressing the click — the cause of the "have to tap twice" bug. */
@media (hover: hover) {
  .exports-cta:hover {
    box-shadow: var(--shadow-lg);
    filter: brightness(1.04);
    outline: none;
  }
}
.exports-cta:focus-visible {
  box-shadow: var(--shadow-lg);
  filter: brightness(1.04);
  outline: none;
}
.exports-cta:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-sm);
}
.exports-cta:disabled,
.exports-cta.is-loading {
  cursor: progress;
  opacity: 0.75;
  filter: saturate(0.8);
}
.exports-cta-icon,
.exports-cta-body,
.exports-cta-title,
.exports-cta-sub,
.exports-cta-chevron,
.exports-cta-icon svg,
.exports-cta-chevron svg {
  pointer-events: none;
}
.exports-cta-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #fff;
}
.exports-cta-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.exports-cta-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.exports-cta-title {
  font-weight: 600;
  font-size: 1.04rem;
  line-height: 1.25;
  color: #fff;
}
.exports-cta-sub {
  font-size: 0.85rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
}
.exports-cta-chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.exports-cta-chevron svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* The CTA replaces the previous .btn pattern inside .exports-actions.
   Make sure the status text now sits comfortably under the CTA. */
.exports-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
}
.exports-actions .exports-status {
  text-align: left;
}

/* ---- Notes / concerns modal ---- */
.exports-modal[hidden] { display: none; }

.exports-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.exports-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 14, 8, 0.55);
  z-index: 1;
}
.exports-modal-sheet {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 1.25rem 1.3rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
.exports-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}
.exports-modal-title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.exports-modal-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--cream-deep);
  border-radius: 8px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.exports-modal-close:hover,
.exports-modal-close:focus-visible {
  background: var(--cream);
  outline: none;
}
.exports-modal-close svg {
  width: 16px;
  height: 16px;
  display: block;
}
.exports-modal-sub {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.exports-modal-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.exports-modal-textarea {
  width: 100%;
  min-height: 130px;
  max-height: 240px;
  padding: 0.7rem 0.8rem;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--cream-deep);
  border-radius: 10px;
  resize: vertical;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.exports-modal-textarea:focus-visible {
  border-color: var(--accent);
  outline: 2px solid rgba(200, 122, 58, 0.2);
  outline-offset: 1px;
}
.exports-modal-meta {
  display: flex;
  justify-content: flex-end;
}
.exports-modal-count {
  font-size: 0.8rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.exports-modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.2rem;
}
.exports-modal-btn {
  padding: 0.6rem 1rem;
  border-radius: 10px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid transparent;
  transition: filter 120ms ease, box-shadow 120ms ease;
}
.exports-modal-btn:focus-visible {
  outline: 2px solid rgba(200, 122, 58, 0.35);
  outline-offset: 2px;
}
.exports-modal-btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--cream-deep);
}
.exports-modal-btn-secondary:hover {
  background: var(--cream);
}
.exports-modal-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-deep);
  box-shadow: var(--shadow-sm);
}
.exports-modal-btn-primary:hover {
  filter: brightness(1.05);
}

/* Lock background scroll when modal open.
   We apply overflow:hidden to <html> (not <body>) and do NOT change
   position on body. Earlier versions set body{position:fixed; top:-Ypx}
   which on iOS Safari re-anchored .exports-modal (position:fixed) to
   the document origin instead of the viewport — the modal appeared
   above the visible viewport on first open and only became visible on
   the second tap. Locking html overflow instead leaves the modal's
   containing block (the viewport) untouched, so it always overlays
   what the user is currently looking at. */
html.exports-modal-open,
html.exports-modal-open body {
  overflow: hidden;
  /* Prevent iOS rubber-band / pull-to-refresh while the modal is open. */
  overscroll-behavior: none;
  touch-action: none;
}

/* Mobile: keep sheet centered but full-width with safe-area padding */
@media (max-width: 540px) {
  .exports-modal {
    padding: 0.75rem;
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
  .exports-modal-sheet {
    max-width: 100%;
    padding: 1.1rem 1.05rem 1.2rem;
    max-height: calc(100vh - 1.5rem);
  }
  .exports-modal-actions {
    flex-direction: column-reverse;
  }
  .exports-modal-actions .exports-modal-btn {
    width: 100%;
  }
}

/* Dark mode */
[data-theme="dark"] .exports-modal-sheet {
  background: var(--cream-deep);
  color: var(--ink);
}
[data-theme="dark"] .exports-modal-textarea {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--ink);
}
[data-theme="dark"] .exports-modal-close {
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .exports-modal-close:hover {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .exports-modal-btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--ink);
}
[data-theme="dark"] .exports-modal-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   Iter 7.15 Phase 7 — v124: admin-events table polish + smoke-test UI
   ========================================================================== */

/* Each events table gets a min-width so .admin-table-wrap actually triggers
   horizontal scroll on narrow viewports instead of letting cell content
   wrap character-by-character. */
.events-table-volume   { min-width: 520px; }
.events-table-stream   { min-width: 720px; }
.events-table-hh       { min-width: 640px; }

/* Keep timestamps and short identifiers on one line. */
.events-table-stream td.nowrap,
.events-table-volume td.nowrap,
.events-table-hh     td.nowrap {
  white-space: nowrap;
}

/* Collapsible payload cell: tap to expand a pre-formatted JSON block. */
.events-payload-toggle {
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.events-payload-toggle::-webkit-details-marker { display: none; }
.events-payload-toggle::before {
  content: "▸";
  display: inline-block;
  margin-right: 4px;
  transition: transform 120ms;
}
details.events-payload[open] > .events-payload-toggle::before {
  transform: rotate(90deg);
}
.events-payload-body {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--cream, #faf6ef);
  border: 1px solid var(--line-soft, #f3f4f6);
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
}

/* Smoke-test panel inside the Feature events section. */
.events-smoke-panel {
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px dashed var(--line, #e5e7eb);
  border-radius: 10px;
  background: #fff;
}
.events-smoke-title {
  font-weight: 600;
  font-size: 13px;
  margin: 0 0 4px 0;
}
.events-smoke-sub {
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
  margin: 0 0 12px 0;
  line-height: 1.5;
}
.events-smoke-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.events-smoke-status {
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  flex: 1 1 100%;
  margin-top: 6px;
}
.events-smoke-status.ok    { color: #047857; }
.events-smoke-status.error { color: #b91c1c; }

/* =====================================================
   v131 — FOOD SCHEDULE (panallergen families)
   Variant picker, age timeline, detail cards, NOW cards,
   rotation settings toggle.
===================================================== */

/* ---------- Variant picker ---------- */
.food-variant-picker {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.food-variant-head { margin-bottom: 12px; }
.food-variant-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.food-variant-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.food-variant-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
@media (max-width: 600px) { .food-variant-set { grid-template-columns: 1fr; } }
.food-variant-opt {
  display: block;
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.food-variant-opt:hover { border-color: var(--accent-soft); }
.food-variant-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.food-variant-opt:has(input:checked),
.food-variant-opt.food-variant-opt--active {
  border-color: var(--accent);
  background: var(--cream);
  box-shadow: 0 0 0 2px var(--accent-soft) inset;
}
.food-variant-opt-label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}
.food-variant-opt-sub {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.4;
}
.food-variant-evidence-note {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  font-style: normal;
}

/* ---------- Age timeline ---------- */
.food-timeline {
  margin-bottom: 28px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 16px 14px;
  overflow-x: auto;
}
/* ---------- v132: vaccine-style timeline grid ---------- */
.food-tl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin: 4px 0 14px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}
.food-tl-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.food-tl-legend-item .food-tl-dot {
  position: static;
  width: 14px;
  height: 14px;
  transform: none;
  cursor: default;
  animation: none;
  box-shadow: none;
}
.food-tl-legend-item .food-tl-dot::after { display: none; }
.food-tl-legend-tick {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: var(--vax-current);
  border-radius: 1px;
}

.food-tl-frame {
  position: relative;
  min-width: 520px;
}
.food-tl-axis {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: end;
  gap: 0;
  margin-bottom: 8px;
  position: relative;
}
.food-tl-axis-spacer { /* empty cell aligning with row labels */ }
.food-tl-axis-track {
  position: relative;
  height: 30px;
  border-bottom: 1px dashed var(--rule);
}
.food-tl-tick {
  position: absolute;
  bottom: 4px;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}
.food-tl-tick::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 1px;
  height: 5px;
  background: var(--rule);
  transform: translateX(-50%);
}

/* Today line: lives inside .food-tl-axis-track (like vaccine tracker).
   The line itself spans only the axis area; each row inherits a faint
   ghost via the --food-today-x CSS variable set on .food-tl-rows. */
.food-tl-today-col {
  position: absolute;
  top: -8px;
  bottom: 0;
  width: 2px;
  background: var(--vax-current);
  z-index: 5;
  transform: translateX(-1px);
  pointer-events: none;
  transition: left 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.food-tl-today-label {
  position: absolute;
  top: -22px;
  left: 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--vax-current);
  background: var(--paper);
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid var(--vax-current);
  white-space: nowrap;
  z-index: 6;
}
.food-tl-today-col.is-flip .food-tl-today-label {
  /* Anchor label to the LEFT of the today line so it stays inside the axis */
  left: auto;
  right: 100%;
  margin-right: 6px;
}

.food-tl-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  position: relative;
}

/* Each row's track shows a faint vertical ghost of the today line,
   inheriting the --food-today-x variable set on the rows container. */
.food-tl-row-track::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--vax-current);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
  left: var(--food-today-x, -100%);
}

.food-tl-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 0;
  min-height: 44px;
  cursor: default;
  border-radius: var(--radius-sm);
  padding: 2px 0;
  background: transparent;
  border: none;
  font-family: inherit;
  width: auto;
  text-align: left;
}
.food-tl-row.is-introduced { opacity: 0.92; }

.food-tl-row-label {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-soft);
  padding-right: 14px;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.food-tl-row-name { display: block; font-weight: 600; color: var(--ink); }
.food-tl-row-sub {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11.5px;
  color: var(--ink-muted);
  line-height: 1.35;
}
.food-tl-row-badge {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
}

.food-tl-row-track {
  position: relative;
  height: 44px;
  background:
    linear-gradient(to right, transparent 0%, var(--rule-soft) 5%, var(--rule-soft) 95%, transparent 100%);
  background-size: 100% 1px;
  background-position: 0 50%;
  background-repeat: no-repeat;
}

.food-tl-seg {
  position: absolute;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
  z-index: 1;
}
.food-tl-seg.is-introduced { background: var(--vax-given); border-color: var(--vax-given); opacity: 0.55; }
.food-tl-seg.is-due        { background: var(--vax-due-bg); border-color: var(--vax-due); }
.food-tl-seg.is-overdue    { background: var(--vax-overdue-bg); border-color: var(--vax-overdue); }
.food-tl-seg.is-upcoming   { background: var(--vax-upcoming-bg); border-color: var(--vax-upcoming-ring); }

.food-tl-dot {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--vax-upcoming-ring);
  background: var(--vax-upcoming-bg);
  cursor: pointer;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  color: var(--ink-muted);
  transition: transform var(--t), background-color var(--t), border-color var(--t), box-shadow var(--t);
  z-index: 3;
}
.food-tl-dot::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}
.food-tl-dot:hover {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: var(--shadow-sm);
}
.food-tl-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.food-tl-dot-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-muted);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.02em;
}

.food-tl-dot.is-introduced {
  background: var(--vax-given);
  border-color: var(--vax-given);
  color: var(--paper);
}
.food-tl-dot.is-introduced .food-tl-dot-label { color: var(--vax-given); font-weight: 600; }

.food-tl-dot.is-due {
  background: var(--vax-due-bg);
  border-color: var(--vax-due);
  animation: vax-pulse 2.4s ease-in-out infinite;
}
.food-tl-dot.is-due .food-tl-dot-label { color: var(--vax-due); font-weight: 600; }

.food-tl-dot.is-overdue {
  background: var(--vax-overdue-bg);
  border-color: var(--vax-overdue);
}
.food-tl-dot.is-overdue .food-tl-dot-label { color: var(--vax-overdue); font-weight: 600; }

.food-tl-dot.is-upcoming {
  background: var(--vax-upcoming-bg);
  border-color: var(--vax-upcoming-ring);
}

.food-tl-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.food-tl-badge--evidence    { background: var(--sage-bg); color: var(--green); }
.food-tl-badge--dont-delay  { background: var(--accent-soft); color: var(--accent-deep); }
.food-tl-badge--panallergen { background: var(--rose-bg); color: var(--burgundy); }

/* Schedule footnote (citations, migrated from legacy allergen grid) */
.food-schedule-foot {
  margin: 14px 2px 0;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-muted);
}
.food-schedule-foot a { color: var(--accent-deep); }

/* Tablet: tighten label column */
@media (max-width: 640px) {
  .food-tl-frame { min-width: 460px; }
  .food-tl-axis { grid-template-columns: 130px 1fr; }
  .food-tl-row { grid-template-columns: 130px 1fr; min-height: 56px; }
  .food-tl-row-label { font-size: 12.5px; padding-right: 10px; }
  .food-tl-row-name { font-size: 13px; }
  .food-tl-row-sub { font-size: 11px; }
  .food-tl-tick { font-size: 10px; }
  /* Hide every-other tick to avoid clutter (mirror vaccine tracker) */
  .food-tl-tick:nth-child(even) { display: none; }
  .food-tl-legend { font-size: 11px; gap: 10px 14px; }
  .food-tl-today-label { font-size: 10px; padding: 1px 5px; }
  .food-tl-dot { width: 26px; height: 26px; }
  .food-tl-dot-label { font-size: 9.5px; top: calc(100% + 4px); }
  .food-tl-row-track { height: 38px; }
}

/* Phone: tightest label column */
@media (max-width: 420px) {
  .food-tl-frame { min-width: 380px; }
  .food-tl-axis { grid-template-columns: 110px 1fr; }
  .food-tl-row { grid-template-columns: 110px 1fr; }
  .food-tl-row-name { font-size: 12.5px; }
  .food-tl-row-sub { font-size: 10.5px; line-height: 1.3; }
  .food-tl-row-badge { font-size: 10.5px; margin-top: 2px; }
}

/* ---------- Detail cards ---------- */
.food-cards { display: grid; gap: 14px; }
.food-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t);
}
.food-card[data-status="introduced"] { border-color: var(--sage); }
.food-card[data-status="overdue"]    { border-color: var(--red); }
.food-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 6px;
}
.food-card-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.food-card-axis {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0 0 8px;
}
.food-card-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.food-card-badge--evidence-based { background: var(--sage-bg); color: var(--green); }
.food-card-badge--dont-delay     { background: var(--accent-soft); color: var(--accent-deep); }
.food-card-badge--panallergen    { background: var(--rose-bg); color: var(--burgundy); }
.food-card-how {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 6px 0 10px;
}
.food-card-members { margin: 0 0 10px; }
.food-card-members summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-deep);
  list-style: none;
  padding: 4px 0;
}
.food-card-members summary::-webkit-details-marker { display: none; }
.food-card-members summary::before { content: "▸ "; transition: transform var(--t); display: inline-block; }
.food-card-members[open] summary::before { content: "▾ "; }
.food-card-drawer {
  margin: 6px 0 0 0;
  padding: 8px 0 0 4px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  list-style: disc inside;
}
.food-card-drawer li { margin: 2px 0; }
.food-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.food-intro,
.food-served,
.food-clear,
.food-card-clear {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  border: 1.5px solid var(--accent-deep);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.food-intro:hover, .food-served:hover { background: var(--accent-deep); }
.food-clear,
.food-card-clear {
  background: transparent;
  color: var(--ink-muted);
  border-color: var(--rule);
}
.food-clear:hover, .food-card-clear:hover { color: var(--red); border-color: var(--red); }
.food-card-intro,
.food-card-served {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-left: 6px;
}
.food-card-rotation {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--rose-bg);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--burgundy);
  line-height: 1.4;
}

/* ---------- NOW card (Allergy + Feeding) ---------- */
.food-now-mount[hidden] { display: none; }
.food-now-card {
  margin: 18px 20px 0;
  background: linear-gradient(135deg, var(--cream) 0%, var(--paper) 100%);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: var(--shadow);
}
@media (max-width: 600px) { .food-now-card { margin: 12px 14px 0; padding: 14px 16px; } }
.food-now-head { margin-bottom: 8px; }
.food-now-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.food-now-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 2px;
}
.food-now-sub {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.45;
}
.food-now-body { margin-top: 10px; }
.food-now-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.food-now-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.food-now-name {
  flex: 1;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.food-now-check {
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.food-now-check:hover { background: var(--accent-deep); }
.food-now-check-dot { margin-right: 4px; }
.food-now-jump {
  flex: 0 0 auto;
  background: transparent;
  color: var(--accent-deep);
  border: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.food-now-foot {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-muted);
}

/* Rotation aggregate signal */
.food-now-rotation {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--rose-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--burgundy);
}
.food-now-rotation-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--burgundy);
  margin: 0 0 4px;
}
.food-now-rotation-sub {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 8px;
  line-height: 1.45;
}
.food-now-rotation-dismiss,
.food-rotation-dismiss {
  background: transparent;
  border: 1px solid var(--burgundy);
  color: var(--burgundy);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.food-now-rotation-dismiss:hover,
.food-rotation-dismiss:hover { background: var(--burgundy); color: #fff; }

/* ---------- Settings rotation toggle ---------- */
.food-rotation-settings { margin-top: 10px; }
.food-settings-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--sans);
  text-align: left;
  transition: border-color var(--t), background var(--t);
}
.food-settings-toggle:hover { border-color: var(--accent-soft); }
.food-settings-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.food-settings-toggle-track {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  background: var(--rule);
  border-radius: 999px;
  transition: background var(--t);
}
.food-settings-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t);
}
.food-settings-toggle.is-on .food-settings-toggle-track,
.food-settings-toggle[aria-pressed="true"] .food-settings-toggle-track {
  background: var(--accent);
}
.food-settings-toggle.is-on .food-settings-toggle-thumb,
.food-settings-toggle[aria-pressed="true"] .food-settings-toggle-thumb {
  transform: translateX(18px);
}
.food-settings-toggle-label {
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.4;
}
.food-settings-toggle-label strong {
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
}
.food-settings-toggle-label span {
  font-size: 12.5px;
  color: var(--ink-muted);
  font-weight: 400;
}

/* Subtle highlight flash when jumping to a card from NOW */
.food-card.is-flash {
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow);
  transition: box-shadow 1.4s ease-out;
}

/* Variant picker option button reset */
.food-variant-opt {
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.food-variant-opt.is-on {
  border-color: var(--accent);
  background: var(--cream);
  box-shadow: 0 0 0 2px var(--accent-soft) inset;
}
.food-variant-opt span { display: block; }

/* v132: NOW card pre-window preview list — subdued styling */
.food-now-list--preview .food-now-item { opacity: 0.95; }
.food-now-check.is-upcoming {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rule-soft);
  border: 2px solid var(--rule);
  vertical-align: middle;
  margin-right: 6px;
}

/* =====================================================================
 * Iter 7.17 v135d — Service worker upgrade pill
 * Surfaces briefly when a new SW takes over so the user sees why the
 * page is about to reload. Same z-stack as qlog-toast but slightly
 * higher so it's never occluded.
 * ===================================================================== */

.sw-upgrade-pill {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 88px);
  transform: translate(-50%, 12px);
  z-index: 68;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(20, 14, 10, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.sw-upgrade-pill[hidden] { display: none; }

.sw-upgrade-pill[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.sw-upgrade-pill-text {
  flex: 1;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.35;
  color: var(--paper);
}

.sw-upgrade-pill-apply {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  background: transparent;
  border: 1px solid rgba(251, 247, 239, 0.5);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.sw-upgrade-pill-apply:hover {
  background: rgba(251, 247, 239, 0.12);
  border-color: var(--paper);
}

.sw-upgrade-pill-apply:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

[data-theme="dark"] .sw-upgrade-pill {
  background: var(--cream);
  color: var(--ink);
}
[data-theme="dark"] .sw-upgrade-pill-text { color: var(--ink); }
[data-theme="dark"] .sw-upgrade-pill-apply {
  color: var(--ink);
  border-color: rgba(42, 34, 28, 0.4);
}
[data-theme="dark"] .sw-upgrade-pill-apply:hover {
  background: rgba(42, 34, 28, 0.08);
  border-color: var(--ink);
}

/* =====================================================================
 * v135f — Icon save inline status. Replaces the old alert('Saved.') which
 * fired even when the DB was written with a stale/null value.
 * ===================================================================== */
.icon-save-status {
  display: inline-block;
  margin-left: 12px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  vertical-align: middle;
}
.icon-save-status[data-kind="ok"] { color: var(--accent-green, #2f7d4a); }
.icon-save-status[data-kind="error"] { color: var(--accent-red, #b04a2b); }
.icon-save-status[data-kind="pending"] { color: var(--ink-soft, #6a5b50); }
.icon-save-status[data-kind="pending"]::after {
  content: '\2026';
}

/* ===== Phase 9 — Anna Chat ===== */
.anna-chat-fab {
  position: fixed;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--ink, #1a1a1a);
  color: #fff;
  border: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.anna-chat-fab:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
.anna-chat-fab:active { transform: scale(0.97); }
.anna-chat-fab:focus-visible { outline: 2px solid var(--accent-teal, #2a8c8c); outline-offset: 2px; }
.anna-chat-fab-icon {
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}

/* Hide FAB when chat is open */
.anna-chat-sheet.is-open ~ #anna-chat-fab,
body:has([data-anna-chat-sheet].is-open) #anna-chat-fab { opacity: 0; pointer-events: none; }

/* Tab strip inside the sheet */
.anna-chat-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 12px 0;
  border-bottom: 1px solid var(--rule-soft, #eee);
  background: var(--bg, #fff);
}
.anna-chat-tab {
  flex: 0 0 auto;
  appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-soft, #6a5b50);
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.anna-chat-tab.is-active {
  color: var(--ink, #1a1a1a);
  border-bottom-color: var(--ink, #1a1a1a);
}
.anna-chat-tab:focus-visible { outline: 2px solid var(--accent-teal, #2a8c8c); outline-offset: 2px; }

/* Empty state */
.anna-chat-empty { padding: 24px 16px; }
.anna-chat-empty-greet {
  margin: 0 0 16px;
  color: var(--ink-soft, #6a5b50);
  line-height: 1.45;
  font-size: 15px;
}
.anna-chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; }

/* Drafts strip */
.anna-chat-drafts {
  padding: 12px 14px;
  border-top: 1px solid var(--rule-soft, #eee);
  background: var(--surface-soft, #fafaf7);
  max-height: 38vh;
  overflow-y: auto;
}
.anna-chat-drafts[hidden] { display: none; }
.anna-chat-drafts-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, #6a5b50);
  margin-bottom: 8px;
}
.anna-chat-draft {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg, #fff);
  border: 1px solid var(--rule-soft, #eee);
  margin-bottom: 8px;
}
.anna-chat-draft-summary {
  font-size: 14px; color: var(--ink, #1a1a1a);
  margin-right: 10px; flex: 1 1 auto; line-height: 1.35;
}
.anna-chat-draft-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.anna-chat-draft-btn {
  appearance: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-radius: 999px;
}
.anna-chat-draft-btn--skip { background: transparent; color: var(--ink-soft, #6a5b50); }
.anna-chat-draft-btn--skip:hover { background: var(--rule-soft, #eee); }
.anna-chat-draft-btn--confirm {
  background: var(--ink, #1a1a1a); color: #fff;
}
.anna-chat-draft-btn--confirm:hover { background: #000; }
.anna-chat-draft-btn--all {
  width: 100%;
  background: var(--accent-teal, #2a8c8c);
  color: #fff;
  margin-top: 4px;
}
.anna-chat-drafts-bulk { margin-top: 4px; }

/* iter-7.27 Phase C: exception-mode advisory + inline silent-variance prompt */
.anna-chat-msg--advisory .care-nav-bubble.anna-chat-advisory {
  background: var(--surface-soft, #f5efe7);
  border: 1px solid var(--rule-soft, #e6dccf);
  color: var(--ink, #1a1a1a);
}
.anna-chat-advisory-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.anna-chat-advisory-btn {
  appearance: none;
  border: 1px solid var(--rule, #d6c7b3);
  background: #fff;
  color: var(--ink, #1a1a1a);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.anna-chat-advisory-btn:hover { background: var(--rule-soft, #f0e7d8); }
.anna-chat-advisory-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.anna-chat-advisory-btn--primary {
  background: var(--ink, #1a1a1a);
  color: #fff;
  border-color: var(--ink, #1a1a1a);
}
.anna-chat-advisory-btn--primary:hover { background: #000; }

/* Phase 11 shadow: KB citation footer rendered after ASK/MIXED replies. */
.anna-chat-cites {
  margin: 4px 16px 8px 16px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface-soft, #f5efe7);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-soft, #6a5b50);
}
.anna-chat-cites-label {
  display: inline;
  font-weight: 600;
  margin-right: 4px;
}
.anna-chat-cite {
  color: var(--accent-teal, #2a8c8c);
  text-decoration: underline;
}
.anna-chat-cite:hover { text-decoration: none; }

/* Typing dots */
.anna-chat-dots { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.anna-chat-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-soft, #6a5b50);
  display: inline-block;
  animation: anna-chat-dot 1s infinite ease-in-out;
}
.anna-chat-dots i:nth-child(2) { animation-delay: 0.15s; }
.anna-chat-dots i:nth-child(3) { animation-delay: 0.30s; }
@keyframes anna-chat-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* When tab is "ask", drafts pane stays hidden */
.anna-chat-sheet .anna-chat-input { /* inherits .care-nav-input */ }
.care-nav-send[data-anna-chat-send][disabled] { opacity: 0.4; cursor: wait; }

/* Phase 11 Step 1.2 — shadow mode unified UX: hide the Log/Ask tab strip when
   the user is on the anna-route shadow path. The empty-state copy and chips
   handle the dual-purpose surface in anna-chat.js renderUnifiedEmptyState(). */
.anna-chat-sheet[data-anna-shadow="1"] .anna-chat-tabs { display: none; }

/* Phase 11 Step 1.3 — dark-mode legibility fixes for the Anna FAB pill and
   the citation footer. In dark theme `--ink` resolves to #f0e6d6 (cream),
   so `background: var(--ink); color: #fff` produced cream-on-white text on
   the floating Anna pill. The cites strip used the same cream surface
   (`--surface-soft`) with cream ink, also failing contrast. Force dark
   inks/backgrounds in dark theme. */
[data-theme="dark"] .anna-chat-fab {
  background: #1f1a16;
  color: #f0e6d6;
  border: 1px solid rgba(240, 230, 214, 0.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .anna-chat-fab-icon {
  background: rgba(240, 230, 214, 0.18);
  color: #f0e6d6;
}
[data-theme="dark"] .anna-chat-cites {
  background: #1f1a16;
  color: #d8cdb8;
  border: 1px solid rgba(240, 230, 214, 0.10);
}
[data-theme="dark"] .anna-chat-cites-label { color: #f0e6d6; }
[data-theme="dark"] .anna-chat-cite { color: #7cc6b9; }

/* ==========================================================================
   iter-7.31 Patch A/B: fail-open defaults + token-hydration gate
   --------------------------------------------------------------------------
   Patch A: the HTML default surface is now the public showcase (its `hidden`
   attribute was removed). App chrome only appears once auth.js confirms a
   session and onboarding.js applyVisibility() adds body.app-active. If JS or
   the supabase bundle never loads, a visitor sees the showcase — never the
   raw, token-riddled app shell.
   Patch B: for signed-in loads, keep token-bearing regions invisible until
   subject.js finishes its first expansion pass (body.tokens-hydrated, with a
   6s safety ceiling in boot.js) so raw {{first_name}} tokens never paint. */
body:not(.app-active) [data-app-shell],
body:not(.app-active) [data-public-hide] {
  display: none !important;
}
body.app-active [data-public-showcase] {
  display: none !important;
}
body.app-active:not(.tokens-hydrated) [data-app-shell],
body.app-active:not(.tokens-hydrated) [data-tokenize] {
  visibility: hidden !important;
}

/* Patch A retry affordance — revealed by boot.js only when auth never
   resolves within its 6s safety window (e.g. network blocks Supabase). */
.showcase-conn-note {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: color-mix(in oklab, #c87a3a 12%, #fbf3e8);
  border: 1px solid color-mix(in oklab, #c87a3a 35%, transparent);
  color: #7a4a1f;
  font-size: 14px;
  text-align: center;
}
.showcase-conn-note a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}