/* ============================================================================
 * CENTILE — Complete stylesheet
 * Cream paper + serif display + warm orange + deep green hero + fixed tabs
 * Fraunces (display) + Inter (body) + IBM Plex Mono (eyebrows/numbers)
 * ========================================================================== */

:root {
  /* Palette */
  --paper:        #efe9d9;   /* newsprint cream background */
  --paper-2:      #e6dfca;   /* secondary surface */
  --paper-card:   #f5f0e0;   /* card surface, slightly lighter */
  --ink:          #1a1a1a;   /* primary text */
  --ink-soft:     #5a5a55;   /* secondary text */
  --ink-mute:     #8a8a82;   /* tertiary text / disabled */
  --rule:         #d8d2bf;   /* hairline rules on cream */
  --hero:         #1a3a30;   /* deep evergreen */
  --hero-2:       #244a3e;   /* hero gradient secondary */
  --hero-soft:    #c8d2c8;   /* soft sage ornament */
  --warm:         #c25a2a;   /* warm orange accent */
  --warm-soft:    #e8a684;   /* softer warm variant */

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* Spacing & rhythm */
  --col-max:      420px;
  --r-sm:         6px;
  --r-md:         12px;
  --r-lg:         18px;
  --shadow-soft:  0 1px 2px rgba(26, 26, 26, 0.04), 0 4px 16px rgba(26, 26, 26, 0.04);
}

/* ============================================================================
 * Reset & Baseline
 * ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Accessibility: remove focus ring on mouse/touch, keep it for keyboard navigation */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; border-radius: 2px; }

html, body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: 'kern' on, 'liga' on;
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: none;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: var(--col-max);
  margin: 0 auto;
  /* 150px bottom: tab bar (~46px + safe area) + footer-tag (~32px) +
   * breathing room. Was 120px before the Phase 0/1 footer tag landed. */
  padding: 0 22px 150px;
  position: relative;
}

/* ============================================================================
 * Links & basic elements
 * ========================================================================== */
a {
  color: var(--warm);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
}

/* Used on <button> elements that visually behave as cards / rows / tiles.
 * The global button reset above handles font/border/background/color;
 * this adds full-width, left text alignment, and inherited line-height —
 * the remaining defaults that differ from <div>. Apply to converted
 * div-as-button surfaces (V2 a11y migration) so layout matches the
 * pre-migration <div> rendering. Tabs/pills don't need this — they have
 * their own sized layouts via existing classes. */
button.as-card {
  width: 100%;
  text-align: left;
  line-height: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  min-height: 44px;
}

/* ============================================================================
 * Typography
 * ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

h1 {
  font-size: 44px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 22px;
}

h4 {
  font-size: 18px;
}

p {
  margin: 0 0 12px;
}

.heading {
  font-size: 28px;
  font-family: var(--font-display);
  font-weight: 500;
  margin-bottom: 8px;
}

.sub-heading {
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm);
}

.eyebrow-soft {
  color: var(--ink-soft);
}

.muted {
  color: var(--ink-soft);
}

.center {
  text-align: center;
}

/* ============================================================================
 * Home page layout
 * ========================================================================== */
.home {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Clear fixed elements at bottom: tab bar (~68px) + mic dock / input row (~60px) + breathing room */
  padding-bottom: calc(140px + env(safe-area-inset-bottom));
}

.home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 18px;
}

.baby-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--r-md);
  transition: background 0.15s ease;
}

.baby-pill:hover {
  background: rgba(0, 0, 0, 0.02);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--warm-soft);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
}

.avatar.lg {
  width: 60px;
  height: 60px;
  font-size: 28px;
}

.avatar.blue {
  background: #a8d8ea;
  color: var(--ink);
}

.baby-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.baby-info .n {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.baby-info .s {
  font-size: 12px;
  color: var(--ink-soft);
}

/* ============================================================================
 * Week progress
 * ========================================================================== */
.week-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--paper-card);
  border-radius: var(--r-md);
  font-size: 14px;
}

.wp-left {
  flex: 1;
  line-height: 1.4;
}

.wp-left b {
  font-weight: 600;
}

.wp-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}

.pbar {
  width: 80px;
  height: 4px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
}

.pbar .fill {
  height: 100%;
  background: var(--warm);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ============================================================================
 * Hero card (deep green evergreen)
 * ========================================================================== */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--hero) 0%, var(--hero-2) 100%);
  color: var(--paper);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.hero:hover {
  transform: translateY(-2px);
}

.hero::after {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 210, 200, 0.18) 0%, rgba(200, 210, 200, 0) 70%);
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-soft);
  margin-bottom: 6px;
}

.hero-week-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--paper);
  margin-bottom: 8px;
}

.hero-headline {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  color: var(--paper);
  line-height: 1.1;
  margin-bottom: 12px;
}

.hero-summary {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(239, 233, 217, 0.9);
  margin-bottom: 16px;
}

.hero-cta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(239, 233, 217, 0.2);
  font-size: 14px;
}

.hero-cta {
  font-weight: 600;
  color: var(--paper);
}

.hero-cta-meta {
  font-size: 12px;
  color: rgba(239, 233, 217, 0.7);
}

/* ============================================================================
 * Section titles & cards
 * ========================================================================== */
.section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm);
  margin: 24px 0 14px;
  font-weight: 500;
}

/* Softer, body-font heading used for profile group labels (Your account /
 * Caregivers / AI assistant / Privacy). The caps-mono .section-title works
 * for short verb-eyebrows ('Try asking', 'Today', 'Quick log') but reads
 * as admin-panel chrome on profile where each label gates a real section
 * of the account. (V2 D-PROFILE-SECTION-LABELS-ENGINEER-VOICE) */
.profile-section {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 28px 0 10px;
}

/* Inline source pill following a clinical claim. Rendered inline in
 * the bullet, e.g. 'Mood that stays low for 2+ weeks [NHS]'. Quieter than
 * a global anchor — typography carries the meaning of a citation, not
 * the colour. (V2 D-PARENTS-CLINICAL-CLAIMS-NO-CITATIONS) */
.inline-source {
  display: inline;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.inline-source:hover { color: var(--ink); text-decoration: underline; }

.caia-strip {
  background: var(--paper-card);
  border-radius: var(--r-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.caia-strip:hover {
  background: #f0ebe1;
  transform: translateY(-1px);
}

.caia-strip.rt-pulse {
  animation: pulse 0.6s ease;
}

@keyframes pulse {
  0%, 100% { background: var(--paper-card); }
  50% { background: #fff5e6; }
}

.caia-strip .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 6px;
  font-weight: 500;
}

.caia-strip .head {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}

.caia-strip .sub {
  font-size: 14px;
  color: var(--ink-soft);
}

.tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 6px;
  font-weight: 500;
}

.head {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 0;
}

/* ============================================================================
 * Parents card
 * ========================================================================== */
.parents-card {
  background: var(--paper-card);
  border-radius: var(--r-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.parents-card:hover {
  background: #f0ebe1;
}

.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
}

.label-row .l {
  font-weight: 500;
}

.arrow {
  color: var(--ink-mute);
  font-size: 18px;
}

.parents-tabs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.parents-tab {
  flex: 1;
  padding: 8px 10px;
  background: var(--paper);
  border-radius: var(--r-sm);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background 0.15s ease, color 0.15s ease;
}

.parents-tab.viewer {
  background: var(--warm);
  color: var(--paper);
}

/* ============================================================================
 * Proof tiles (data indicators)
 * ========================================================================== */
.proof-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}

.proof-tile {
  background: var(--paper-card);
  border-radius: var(--r-md);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.proof-tile:hover {
  background: #f0ebe1;
  transform: translateY(-1px);
}

.proof-tile .ic {
  font-size: 28px;
  margin-bottom: 8px;
  display: block;
}

.proof-tile .v {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.proof-tile .l {
  font-size: 12px;
  color: var(--ink-soft);
}

/* ============================================================================
 * Up next
 * ========================================================================== */
.up-next {
  background: var(--paper-card);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 14px;
  margin-top: 12px;
}

.up-next .tag {
  margin-bottom: 6px;
}

.up-next .ms {
  color: var(--ink);
  line-height: 1.5;
}

/* ============================================================================
 * Weekly page
 * ========================================================================== */
.weekly-page {
  display: flex;
  flex-direction: column;
}

.weekly-back {
  align-self: flex-start;
  padding: 8px 12px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}

.weekly-back:hover {
  color: var(--ink);
}

/* Percentile masthead SVG */
.percentile-masthead {
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 20px 0;
  display: block;
}

.pm-curve {
  stroke: var(--rule);
  stroke-width: 1;
  fill: none;
  stroke-linecap: round;
}

.pm-curve-50 {
  stroke: var(--warm);
  opacity: 0.3;
}

.pm-grid {
  stroke: var(--rule);
  stroke-width: 0.5;
}

.pm-dot {
  fill: var(--warm);
}

.pm-label {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: var(--ink-mute);
  letter-spacing: 0.1em;
}

/* Week navigation */
.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 20px;
  padding: 12px 14px;
  background: var(--paper-card);
  border-radius: var(--r-md);
}

.week-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.week-nav-btn:hover:not(.disabled) {
  background: var(--paper-2);
  border-color: var(--warm);
}

.week-nav-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.week-nav-label {
  flex: 1;
  text-align: center;
}

.week-nav-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 2px;
}

.week-nav-num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

/* Weekly headings */
.weekly-h1 {
  font-size: 32px;
  font-family: var(--font-display);
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.1;
}

.weekly-theme {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 18px;
  font-style: italic;
}

/* Weekly hero — flows on cream paper (no green box). Continues the home aesthetic
 * via shared eyebrow / serif Week N / warm accent, but reads like a magazine article
 * opening, not a card. */
.weekly-hero {
  margin: 14px 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}

.weekly-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 14px;
}

.weekly-hero-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.weekly-hero-chev {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.weekly-hero-chev:hover {
  background: var(--paper-card);
  border-color: var(--ink-soft);
}

.weekly-hero-chev.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.weekly-hero-week {
  flex: 1;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
}

.weekly-hero-h1 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink);
}

.weekly-hero-summary {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0;
}

/* Parents page */
.parents-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
}

.parents-intro {
  margin-top: 4px;
}

.parents-intro h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm);
  margin: 0 0 8px;
}

.parents-intro h2 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 10px;
}

.parents-intro p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

.audience-content {
  padding-top: 6px;
}

.audience-content h4 {
  font-size: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin: 18px 0 8px;
}

.audience-content p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 10px;
}

.audience-content ul {
  padding-left: 20px;
  margin: 0 0 10px;
}

.audience-content li {
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 6px;
}

/* Audience tabs */
.audience-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--rule);
  margin: 16px 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.audience-tabs::-webkit-scrollbar {
  display: none;
}

.audience-tab {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.audience-tab.on {
  color: var(--ink);
  border-bottom-color: var(--warm);
}

/* Depth pills */
.depth-pills {
  display: flex;
  gap: 8px;
  margin: 12px 0 16px;
}

.depth-pill {
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-weight: 500;
}

.depth-pill.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Weekly sections & content */
.weekly-section {
  margin: 18px 0;
}

.weekly-section h4 {
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--ink);
}

.weekly-section ul, .weekly-section ol {
  margin: 0 0 12px;
  padding-left: 20px;
}

.weekly-section li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.weekly-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 14px;
  font-weight: 500;
}

.weekly-notice {
  background: #fff5e6;
  border-left: 3px solid var(--warm);
  padding: 12px 14px;
  border-radius: var(--r-sm);
}

.weekly-personalised {
  background: var(--paper-card);
  border-radius: var(--r-md);
  padding: 14px 16px;
}

.weekly-closer {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-style: italic;
}

.weekly-article {
  margin: 20px 0;
}

.weekly-article-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 6px;
  font-weight: 500;
}

.weekly-article-title {
  font-size: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  margin-bottom: 8px;
}

.weekly-article-dek {
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
}

.weekly-article-body {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
}

.weekly-sources {
  margin-top: 20px;
}

.weekly-sources h4 {
  margin-bottom: 12px;
}

.weekly-sources ul {
  list-style: decimal;
}

.weekly-sources a {
  color: var(--warm);
}

.weekly-source {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 10px;
}

.weekly-empty {
  text-align: center;
  padding: 24px 16px;
}

.weekly-empty h4 {
  margin-bottom: 8px;
}

.weekly-empty p {
  color: var(--ink-soft);
  margin-bottom: 12px;
}

/* ============================================================================
 * Caïa tab (data-driven weekly view)
 * ========================================================================== */
.caia-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm);
  margin: 16px 0 12px;
  font-weight: 500;
}

.caia-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.caia-stat {
  background: var(--paper-card);
  border-radius: var(--r-md);
  padding: 14px 12px;
  text-align: center;
}

.caia-stat-num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.caia-stat-label {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 500;
}

.caia-pending-note {
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  padding: 12px 16px 4px;
  font-style: italic;
}

/* ============================================================================
 * Markdown content
 * ========================================================================== */
.md {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.md p {
  margin: 0;
  line-height: 1.6;
}

.md strong {
  font-weight: 600;
}

.md ul, .md ol {
  margin: 0;
  padding-left: 20px;
}

.md li {
  margin-bottom: 6px;
}

/* ============================================================================
 * Chat view
 * ========================================================================== */
.chat-disclaimer {
  background: #fff5e6;
  border-left: 3px solid var(--warm);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.chat-disclaimer b {
  font-weight: 600;
}

.chat-sources-line {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.suggested-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin: 16px 0 20px;
}

.suggestion {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.suggestion:hover {
  background: #f0ebe1;
  border-color: var(--warm);
}

/* Reserve space at the bottom so the last message isn't hidden behind the fixed input row + tab bar. */
.chat-msg-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
  min-height: 200px;
  padding-bottom: 140px; /* clear the fixed input row + tab bar */
}

.msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1.6;
}

.msg.user {
  align-items: flex-end;
  margin-bottom: 12px;
}

.msg.user > div:first-child {
  background: var(--warm);
  color: var(--paper);
  padding: 10px 14px;
  border-radius: 18px 18px 4px 18px;
  max-width: 85%;
  word-wrap: break-word;
}

.msg.bot > div:first-child {
  padding: 0;
}

.msg-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-h {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  margin-top: 8px;
  margin-bottom: 4px;
}

.chat-list {
  padding-left: 20px;
  margin: 0;
}

.chat-list li {
  margin-bottom: 6px;
}

.chat-link {
  color: var(--warm);
  text-decoration: underline;
}

/* Citation chip — superscript pill that reads as a typographic system,
 * not as inline body text (V2 D-CHAT-CITATION-CHIP-INLINE-RENDER). */
.chat-cite {
  display: inline-block;
  padding: 0 4px;
  margin: 0 2px;
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--paper-2);
  border-radius: 3px;
  vertical-align: super;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: none;
}
.chat-cite:hover { color: var(--ink); }

.msg-sources {
  margin-top: 8px;
}

.chat-sources-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
  font-weight: 500;
}

.chat-sources-list {
  list-style: decimal;
  padding-left: 20px;
  margin: 0;
}

.chat-source-item {
  font-size: 12px;
  line-height: 1.5;
  color: var(--warm);
}

.chat-source-item:hover {
  text-decoration: underline;
}

.chat-source-publication {
  font-weight: 600;
  color: var(--warm);
}

.chat-source-title {
  color: var(--ink-soft);
  font-style: italic;
}

.msg-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.chat-action-btn {
  padding: 6px 12px;
  font-size: 12px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.chat-action-btn:hover {
  background: #f0ebe1;
  border-color: var(--warm);
}

/* Log-suggest card — appears below sources when a loggable message is detected */
.msg-log-suggest {
  margin-top: 8px;
}
.msg-log-suggest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f5f0e8;
  border: 1px solid #e2d9c8;
  border-radius: var(--r-sm);
  padding: 8px 12px;
}
.msg-log-suggest-label {
  font-size: 13px;
  color: var(--ink-mute);
}

/* Log suggest action rows inside the modal */
.log-suggest-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.log-suggest-action:last-child { border-bottom: none; }
.log-suggest-action.saved { opacity: 0.55; }
.log-suggest-icon { font-size: 20px; flex-shrink: 0; }
.log-suggest-summary { flex: 1; font-size: 14px; line-height: 1.4; }
.log-suggest-check { color: var(--green, #3a7d44); font-size: 18px; }

/* ============================================================================
 * Chat input row
 * ========================================================================== */
.chat-input-row {
  position: fixed;
  bottom: calc(68px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  padding: 0 22px 12px;
  display: flex;
  gap: 8px;
  max-width: var(--col-max);
  margin: 0 auto;
  z-index: 95;
}

.chat-input-row input {
  flex: 1;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  outline: none;
}

.chat-input-row input::placeholder {
  color: rgba(239, 233, 217, 0.5);
}

.chat-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--warm);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.chat-send:hover {
  background: #b24a27;
}

.chat-send:active {
  transform: scale(0.96);
}

/* ============================================================================
 * Capture view
 * ========================================================================== */
.capture-intro {
  background: var(--paper-card);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.capture-intro h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.capture-intro p {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.examples {
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
}

.log-input-card {
  background: var(--paper-card);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.log-mode-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.mode-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.mode-btn.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.upload-box {
  background: var(--paper);
  border: 2px dashed var(--rule);
  border-radius: var(--r-md);
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.upload-box:hover {
  background: #f9f5ec;
  border-color: var(--warm);
}

.upload-box .ic {
  font-size: 40px;
  margin-bottom: 10px;
  display: block;
}

.upload-box p {
  margin: 0 0 4px;
  font-size: 14px;
}

.upload-box strong {
  font-weight: 600;
}

.upload-box .small {
  font-size: 12px;
  color: var(--ink-soft);
}

.log-textarea {
  width: 100%;
  min-height: 100px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 12px;
  font-size: 14px;
  font-family: var(--font-body);
  resize: vertical;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s ease;
}

.log-textarea:focus {
  border-color: var(--warm);
}

.review-card {
  background: var(--paper-card);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  border-left: 3px solid var(--warm);
}

.review-card .tag {
  margin-bottom: 6px;
}

.review-card .summary {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--ink);
}

.review-card .data {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--paper);
  padding: 6px 8px;
  border-radius: 3px;
  color: var(--ink-mute);
  margin-bottom: 10px;
  overflow-x: auto;
}

.review-actions {
  display: flex;
  gap: 8px;
}

.review-actions button {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.15s ease;
}

.review-actions .save {
  background: var(--warm);
  color: var(--paper);
  border: 0;
}

.review-actions .save:hover {
  background: #b24a27;
}

.review-actions .skip {
  background: transparent;
  color: var(--ink-soft);
}

.review-actions .skip:hover {
  background: var(--paper);
  color: var(--ink);
}

/* Quick log tiles */
.quick-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 16px 0;
}

.qt {
  background: var(--paper-card);
  border-radius: var(--r-md);
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.qt:hover {
  background: #f0ebe1;
  transform: translateY(-1px);
}

.qt .ic {
  font-size: 24px;
  margin-bottom: 6px;
  display: block;
}

.qt .l {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
}

/* Timeline */
.timeline-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.timeline-item:last-child {
  border-bottom: 0;
}

.timeline-time {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  min-width: 45px;
}

.timeline-text {
  flex: 1;
  font-size: 14px;
  color: var(--ink);
}

.timeline-text .meta {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* ============================================================================
 * Auth & onboarding
 * ========================================================================== */
.welcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
  padding: 32px 0;
}

.w-hero {
  text-align: center;
  margin-bottom: 32px;
}

.w-hero h2 {
  margin-bottom: 8px;
  font-size: 32px;
}

.w-hero p {
  color: var(--ink-soft);
  margin-bottom: 24px;
  font-size: 16px;
}

.w-illustration {
  font-size: 60px;
  margin: 20px 0;
}

/* Welcome CTA block — anchors the primary button + sign-in helper at the bottom of the hero. */
.w-cta {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.w-cta .btn.full {
  width: 100%;
  padding: 16px 22px;
  font-size: 16px;
}

.w-cta .footer-note {
  margin-top: 0;
}

/* Generic empty state — used in Progress > Growth/Milestones, etc. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 28px 0 20px;
  text-align: center;
}

.empty-state .muted {
  font-size: 15px;
  margin: 0;
}

.footer-note {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 14px;
  cursor: pointer;
  /* Reset button defaults so .footer-note works on a real <button> too. */
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
}

.footer-note:hover {
  text-decoration: underline;
}

.auth-screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
  padding: 20px 0;
}

.top-bar-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.back-link {
  padding: 8px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s ease;
}

.back-link:hover {
  color: var(--ink);
}

.step-progress {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}

.step-heading {
  font-size: 24px;
  margin-bottom: 8px;
}

.step-sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.error {
  background: #ffe6e6;
  border-left: 3px solid #d32f2f;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 13px;
  color: #d32f2f;
  margin-bottom: 14px;
}

.label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
  font-weight: 500;
}

.input {
  display: block;
  width: 100%;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease;
  margin-bottom: 14px;
}

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

.input[type="date"] {
  font-family: var(--font-body);
}

/* Auth Pattern A — typographic horizon above the input cluster.
 * Inspired by Stripe Checkout's hairline-anchored block. */
.auth-form {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

/* Auth footer line — smaller, mute, left-aligned. Replaces the old
 * generic "By continuing you agree…" line which has moved to /access-gate. */
.auth-foot {
  margin-top: 24px;
  font-size: 13px;
  color: var(--ink-mute);
  text-align: left;
}

/* Quiet text-link button — used for "Wrong email? Try again." reset.
 * Reads as text, not as a button. Inherits warm-orange focus ring from
 * the global :focus-visible rule. */
.auth-text-link {
  margin-top: 16px;
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.auth-text-link:hover { color: var(--ink); }

/* Radio grid / tile selection */
.radio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.radio-grid.radio-grid[style*="1fr"] {
  grid-template-columns: 1fr;
}

.radio-tile {
  background: var(--paper-card);
  border: 2px solid var(--rule);
  border-radius: var(--r-md);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.radio-tile:hover {
  border-color: var(--warm);
  background: #f9f5ec;
}

.radio-tile.on {
  border-color: var(--warm);
  background: #fff5e6;
}

.radio-tile .ic {
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
}

.radio-tile .body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.radio-tile.row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  grid-column: 1 / -1;
  padding: 12px 14px;
}

.radio-tile.row .ic {
  font-size: 28px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.radio-tile.row .body {
  flex: 1;
}

.radio-tile.row .body > div:first-child {
  font-weight: 500;
  color: var(--ink);
}

.radio-tile.row small {
  font-size: 12px;
  color: var(--ink-soft);
}

/* Step screen */
.step-screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
  padding: 20px 0;
}

.progress-bar {
  display: flex;
  gap: 4px;
  margin: 12px 0 20px;
}

.progress-bar .seg {
  flex: 1;
  height: 4px;
  background: var(--rule);
  border-radius: 2px;
  transition: background 0.2s ease;
}

.progress-bar .seg.on {
  background: var(--warm);
}

/* Chip grid */
.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}

.chip {
  padding: 6px 14px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.chip:hover {
  border-color: var(--warm);
  background: #f9f5ec;
}

.chip.on {
  background: var(--warm);
  color: var(--paper);
  border-color: var(--warm);
}

/* Consent list */
.consent-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0;
}

/* ============================================================================
 * Profile / progress
 * ========================================================================== */
.me-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 18px;
}

.me-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.me-info .n {
  font-weight: 600;
  color: var(--ink);
}

.me-info .s {
  font-size: 13px;
  color: var(--ink-soft);
}

.settings-group, .setting-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 18px;
  background: var(--paper-card);
  border-radius: var(--r-md);
  overflow: hidden;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.15s ease;
}

.setting-row:last-child {
  border-bottom: 0;
}

.setting-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

.s-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.s-ic {
  font-size: 22px;
  flex-shrink: 0;
}

.s-label {
  font-weight: 500;
  color: var(--ink);
  font-size: 14px;
}

.s-sub {
  font-size: 12px;
  color: var(--ink-soft);
}

.s-right {
  color: var(--ink-mute);
  font-size: 18px;
}

.progress-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--rule);
  margin: 14px 0 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.progress-tabs::-webkit-scrollbar {
  display: none;
}

.ptab {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ptab.on {
  color: var(--ink);
  border-bottom-color: var(--warm);
}

/* Arc */
.arc-now {
  background: var(--paper-card);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 14px;
  border-left: 3px solid var(--warm);
}

.arc-now-lab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 4px;
  font-weight: 500;
}

.arc-now-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.arc-now-desc {
  font-size: 13px;
  color: var(--ink-soft);
}

/* Phases */
.phase {
  background: var(--paper-card);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: background 0.15s ease;
}

.phase.current {
  border-left: 3px solid var(--warm);
  background: #fff5e6;
}

.phase-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.phase-name {
  font-weight: 500;
  color: var(--ink);
  font-size: 14px;
}

.phase-weeks {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 500;
}

.phase-desc {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ============================================================================
 * Button styles
 * ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.15s ease;
}

.btn:hover {
  opacity: 0.92;
}

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

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.warm {
  background: var(--warm);
}

.btn.secondary {
  background: var(--paper-card);
  color: var(--ink);
  border: 1px solid var(--rule);
}

.btn.full {
  width: 100%;
}

.btn.sm {
  font-size: 13px;
  padding: 8px 14px;
}

/* ============================================================================
 * Bottom tab bar (fixed)
 * ========================================================================== */
/* Bottom navigation menu — typographic, ink on cream, hairline rule, mono labels.
 * Reads like a contents page footer, not a generic emoji tab bar. */
.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper);
  border-top: 1px solid var(--ink);
  display: flex;
  padding: 0 0 env(safe-area-inset-bottom);
  z-index: 100;
  max-width: var(--col-max);
  margin: 0 auto;
}

.tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 18px 4px 16px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  position: relative;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule);
}

.tab:last-child {
  border-right: 0;
}

.tab:hover {
  color: var(--ink);
  background: var(--paper-card);
}

.tab.active {
  color: var(--ink);
  background: var(--paper-card);
}

/* Warm bar across the top of the active tab — strong indicator without being loud. */
.tab.active::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--warm);
}

/* ============================================================================
 * Mic dock (fixed, above tab bar)
 * ========================================================================== */
.mic-dock {
  position: fixed;
  left: 22px;
  right: 22px;
  /* Sit above the tab bar (~56px + safe area) AND lift over the keyboard via --kb-h. */
  bottom: calc(68px + env(safe-area-inset-bottom) + var(--kb-h, 0px));
  background: var(--ink);
  border-radius: 12px;
  padding: 8px 8px 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 95;
  box-shadow: var(--shadow-soft);
  max-width: calc(var(--col-max) - 44px);
  margin: 0 auto;
  animation: slideUp 0.3s ease;
  transition: bottom 0.18s ease;
}

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

/* Inline text input inside the dock — typing replaces tap-through-to-capture */
.mic-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;       /* 16px+ stops iOS auto-zooming on focus */
  padding: 8px 4px;
}

.mic-input::placeholder {
  color: rgba(239, 233, 217, 0.55);
}

.mic-input:disabled {
  opacity: 0.6;
}

/* Legacy: the old <span> placeholder styling — keep it gracefully if old code lingers */
.mic-dock span:first-child {
  flex: 1;
  font-size: 13px;
  color: rgba(239, 233, 217, 0.9);
  cursor: pointer;
}

.mic-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--warm);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.mic-btn:hover {
  background: #b24a27;
}

.mic-btn:active {
  transform: scale(0.96);
}

.mic-btn.on {
  background: #b24a27;
  animation: micPulse 1.2s ease-in-out infinite;
}

@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 90, 42, 0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(194, 90, 42, 0); }
}

.x-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(239, 233, 217, 0.1);
  color: rgba(239, 233, 217, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.x-close:hover {
  background: rgba(239, 233, 217, 0.2);
}

.mic-fab {
  position: fixed;
  bottom: calc(78px + env(safe-area-inset-bottom));
  right: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--warm);
  color: var(--paper);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 95;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.mic-fab.visible {
  display: flex;
  animation: slideUp 0.3s ease;
}

/* ============================================================================
 * Utilities & misc
 * ========================================================================== */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #d32f2f;
  color: white;
  padding: 8px 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  z-index: 200;
}

.divider {
  height: 1px;
  background: var(--rule);
  margin: 18px 0;
}

.spacer {
  flex: 1;
}

.n, .s {
  display: block;
}

/* For tables, mono content */
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on;
}

/* Responsive: stack on mobile */
@media (max-width: 480px) {
  #app {
    padding: 0 16px 120px;
  }

  .proof-row {
    grid-template-columns: 1fr;
  }

  .radio-grid {
    grid-template-columns: 1fr;
  }

  .caia-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================================
 * Modal — used for "Edit baby" and similar full-sheet forms.
 * Slides up from the bottom on mobile, centred on desktop. Cream paper inside,
 * dimmed ink overlay outside. Shares input/label/btn styles with the rest.
 * ========================================================================== */
/* The overlay uses a CSS variable --kb-h that the modal JS keeps in sync with the
 * iOS keyboard height (Capacitor Keyboard willShow / willHide). When the keyboard
 * is up, we lift the bottom of the overlay so the modal sheet sits above it.
 * Default is 0 so the overlay reaches the screen edge when no keyboard is shown. */
.modal-overlay {
  position: fixed;
  inset: 0;
  bottom: var(--kb-h, 0px);
  z-index: 1000;
  background: rgba(26, 26, 26, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: bottom 0.18s ease;
}

@media (min-width: 600px) {
  .modal-overlay {
    align-items: center;
    padding: 24px;
  }
}

/* Sheet uses dvh so keyboard correctly shrinks viewport on platforms that report it.
 * On iOS Capacitor the dvh trick doesn't always fire — that's why we also use --kb-h
 * on the overlay above as a belt-and-braces. */
.modal-sheet {
  background: var(--paper);
  width: 100%;
  max-width: var(--col-max);
  height: auto;
  max-height: calc(100dvh - var(--kb-h, 0px) - 24px);
  display: flex;
  flex-direction: column;
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
  box-shadow: 0 -8px 30px rgba(26, 26, 26, 0.18);
  overflow: hidden;
}

@media (min-width: 600px) {
  .modal-sheet {
    border-radius: var(--r-lg);
    max-height: 88dvh;
  }
}

.modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  flex-shrink: 0;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}

.modal-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.modal-close:hover {
  background: var(--paper-card);
  color: var(--ink);
}

.modal-body {
  padding: 14px 20px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}

/* Tighter spacing inside modals than full-page forms */
.modal-body .label {
  margin-top: 14px;
  margin-bottom: 6px;
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.modal-body .label:first-child {
  margin-top: 0;
}

.modal-body .input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;            /* 16px+ stops iOS auto-zooming on focus */
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--ink);
  outline: none;
}

.modal-body .input:focus {
  border-color: var(--warm);
}

.modal-body .radio-grid {
  margin-bottom: 4px;
}

.modal-foot {
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  background: var(--paper);
  flex-shrink: 0;
}

.modal-foot .btn {
  flex: 1;
  padding: 14px 20px;
}

@media (min-width: 600px) {
  .modal-foot .btn {
    flex: 0 0 auto;
    min-width: 120px;
  }
}

/* ============================================================================
 * Invite modal — role tiles, access list, share link box.
 * ========================================================================== */
.role-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

.role-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-card);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.role-tile:hover { border-color: var(--ink-soft); }

.role-tile.on {
  border-color: var(--warm);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--warm);
}

.role-tile .ic { font-size: 18px; line-height: 1; }

.access-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.access-row {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-card);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.access-row:hover { border-color: var(--ink-soft); }
.access-row.on    { border-color: var(--warm); box-shadow: inset 0 0 0 1px var(--warm); background: var(--paper); }

.access-check {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--warm);
  line-height: 1.4;
  width: 16px;
  text-align: center;
}

.access-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

.access-blurb {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.invite-link-box {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  word-break: break-all;
  user-select: all;
}

/* Accept screen — quick callout under the headline */
.invite-blurb {
  background: var(--paper-card);
  border-left: 3px solid var(--warm);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ============================================================================
 * Activity log — reads like a quiet ledger. Hairlines, mono timestamps.
 * ========================================================================== */
.activity-list {
  display: flex;
  flex-direction: column;
}

.activity-row {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  align-items: flex-start;
}

.activity-row:last-child {
  border-bottom: 0;
}

.activity-when {
  flex-shrink: 0;
  width: 70px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  padding-top: 1px;
}

.activity-body {
  flex: 1;
  min-width: 0;
}

.activity-actor {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 1px;
}

.activity-action {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ============================================================================
 * MFA enrolment — QR, secret, factor list rows.
 * ========================================================================== */
.mfa-qr {
  display: block;
  width: 200px;
  height: 200px;
  margin: 12px auto;
  background: white;
  border-radius: var(--r-md);
  padding: 8px;
  box-shadow: var(--shadow-soft);
}

.mfa-secret {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-align: center;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  user-select: all;
  word-break: break-all;
}

.mfa-factor {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.mfa-factor:last-child {
  border-bottom: 0;
}

.mfa-factor-info {
  flex: 1;
}

.mfa-factor-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.mfa-factor-meta {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* ============================================================================
 * Phase 0/1 disclaimer — modal long-form text + bulleted list
 * Copy and structure per content/STYLE.md §"Phase 0/1 disclaimer".
 * ========================================================================== */
.disclaimer-body p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 12px;
}

.disclaimer-body .disclaimer-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0 0 12px;
}

.disclaimer-body .disclaimer-list li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 8px;
}

/* Phase 0/1 'Pre-release version' footer tag — small subtle button fixed
 * above the tab bar on every authenticated screen. Taps open the full
 * disclaimer modal. Sits inside a 44px touch target via vertical padding
 * even though the visible text is much smaller.
 *
 * Position: tab bar visual height is 18+11+16 = 45px content + 1px top
 * border = 46px, before the safe-area-inset-bottom padding kicks in. Place
 * this tag immediately above. */
.footer-tag {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(46px + env(safe-area-inset-bottom));
  z-index: 99;
  max-width: var(--col-max);
  margin: 0 auto;
  display: block;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  background: transparent;
  border: 0;
  text-align: center;
  cursor: pointer;
  transition: color 0.15s ease;
}

.footer-tag:hover { color: var(--ink-soft); }
.footer-tag:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; border-radius: 2px; }

/* Phase 0/1 disclaimer banner on weekly articles — small muted strip below
 * the back button, above the hero. Renders verbatim CONDENSED VERSION
 * per content/STYLE.md §"Phase 0/1 disclaimer". Taps to open the full
 * modal. Reads as a banner, not as a button — typography carries the
 * affordance via the trailing 'About this version' link text. */
.weekly-disclaimer-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 12px 0 18px;
  padding: 12px 14px;
  background: var(--paper-2);
  border-radius: var(--r-sm);
  border: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.weekly-disclaimer-banner:hover { background: var(--paper-card); }

.weekly-disclaimer-banner .weekly-disclaimer-text { flex: 1 1 auto; }
.weekly-disclaimer-banner .weekly-disclaimer-text strong { color: var(--ink); font-weight: 600; }

.weekly-disclaimer-banner .weekly-disclaimer-link {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--warm);
  white-space: nowrap;
}

/* ── Page label (family pilot feedback helper) ──────────────────────────────
 * Small monospace label, bottom-right, above the tab bar.
 * Kill it: change --page-label to 'none' in the :root rule below.      */
:root { --page-label: block; }

#page-label {
  display: var(--page-label, block);
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom));
  right: calc(12px + env(safe-area-inset-right));
  font-size: 11px;
  font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  color: rgba(21, 22, 26, 0.38);
  pointer-events: none;
  z-index: 200;
  white-space: nowrap;
  letter-spacing: 0.01em;
  user-select: none;
}

@media print { #page-label { display: none !important; } }