/* =========================================================
   Still Orchard — font system overlay
   Applies the three-font system to the ported app without
   touching call-sites. Scoped under .app-root.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..600;1,8..60,300..600&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

.app-root,
.app-root input,
.app-root textarea,
.app-root select {
  font-family: 'Source Serif 4', Georgia, serif;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
}

/* Headlines — Fraunces, the editorial voice */
.app-root h1,
.app-root h2,
.app-root h3,
.app-root h4,
.app-root h5,
.app-root h6 {
  font-family: 'Fraunces', 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.app-root h1 { letter-spacing: -0.015em; }

/* Narrative / "letter-to-self" italics */
.app-root .font-serif,
.app-root .italic {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-optical-sizing: auto;
}

/* The chrome — Hanken Grotesk does the labels, chips, controls */
.app-root button,
.app-root label,
.app-root .uppercase,
.app-root [class*="tracking-wid"],
.app-root [class*="uppercase"] {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Tighten Hanken letter-spacing in the tiny eyebrow labels — Tailwind's
   tracking-widest is 0.1em which is a touch loose for Hanken at 11px. */
.app-root .tracking-widest { letter-spacing: 0.08em; }
.app-root .tracking-wider  { letter-spacing: 0.05em; }

/* Quote / "Week's Mirror" body — keep Fraunces italic feel inside the cards. */
.app-root .font-serif.italic,
.app-root .italic.font-serif {
  font-style: italic;
}

/* Inputs that hold the parent's free-text: stay in Source Serif 4 so
   bilingual content (English + 中文) renders gracefully via OS fallback. */
.app-root textarea,
.app-root input[type="text"],
.app-root input[type="date"],
.app-root input[type="time"] {
  font-family: 'Source Serif 4', Georgia, serif;
}

/* Placeholder italic (kit convention) */
.app-root input::placeholder,
.app-root textarea::placeholder {
  font-style: italic;
  color: rgba(28, 28, 23, 0.42);
}

/* The bottom nav region: use Hanken for label legibility when present. */
.app-root nav, .app-root [role="tablist"] {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

/* Tighten the headline-style "your patterns / your child / me" hero rows. */
.app-root .text-2xl.font-medium,
.app-root .text-xl.font-medium {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* A subtle "ambient" focus ring in primary-strong, per the DS. */
.app-root :focus-visible {
  outline: 2px solid #7d562d;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Pills/chips should never break their label across two lines. */
.app-root button.rounded-full,
.app-root .rounded-full > span,
.app-root .rounded-full > div,
.app-root span.rounded-full,
.app-root div.rounded-full {
  white-space: nowrap;
}

/* =========================================================
   iOS-frame fit fixes
   The app was authored to fill a full mobile viewport; inside
   our 402×874 bezel we need to:
     1. Constrain `h-screen` so content doesn't overflow.
     2. Push first-row content below the absolute status bar.
     3. Lift bottom nav off the home indicator.
   ========================================================= */
.app-root .max-w-md.h-screen {
  height: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
  border-left: 0 !important;
  border-right: 0 !important;
  padding-top: 44px;       /* clear iOS status bar (~62px total with TopBar's pt-6) */
  background: var(--surface, #fdf9f0) !important;
}

/* Standalone (real device / installed PWA) — no iOS bezel around the app, so the
   container must use the TRUE viewport height (the bezel's `height:100%` collapses
   when .app-root has no fixed height) and drop the fake status-bar padding. */
.app-root.app-standalone .max-w-md.h-screen {
  height: 100vh !important;
  height: 100dvh !important;
  padding-top: 0;
  /* Cream-fill the column so the area behind the Android gesture-nav inset
     (with viewport-fit=cover) reads as one surface, never a white band. */
  background: var(--surface, #fdf9f0) !important;
}

/* Onboarding screen sits at z-50 absolute; same status-bar guard. */
.app-root .absolute.inset-0.z-50.flex.flex-col {
  padding-top: 0;
}
.app-root .absolute.inset-0.z-50.flex.flex-col > .absolute.top-0 {
  top: 44px;               /* push progress dots below status bar */
}

/* =========================================================
   BOTTOM NAVIGATION (DS components-nav spec)
   Five tabs, hairline outer border, active tab gets a tonal
   pill + primary ochre tint. Labels in Hanken uppercase.
   ========================================================= */
.app-root .ob-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  margin: 0 14px 38px;
  padding: 6px;
  background: #31302b;
  border: none;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(28, 28, 23, 0.10), 0 8px 22px rgba(28, 28, 23, 0.14);
  z-index: 40;
}
/* Lift the floating nav clear of the Android gesture bar / home indicator. */
.app-root.app-standalone .ob-nav {
  margin-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
/* The nav floats over the content — pad each screen's scroll area so the
   last items clear the bar (scoped to the main app column, not onboarding). */
.app-root .max-w-md:has(.ob-nav) .overflow-y-auto {
  padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
  /* Own stacking context so inner z-indexed content (e.g. the factor-cloud
     bubbles, z up to ~160) can never paint on top of the floating nav. */
  isolation: isolate;
}

/* =========================================================
   TEXT FIELDS (.ob2-in) — onboarding + add-child + rename.
   Kill the native focus ring/box-shadow (it draws OUTSIDE the
   input and gets clipped by the onboarding scroll container,
   which forces overflow-x to clip). The focus cue is a clean
   bottom-border color shift instead. Always-present so every
   .ob2-in field gets it, not just while onboarding is mounted.
   ========================================================= */
.ob2-in {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}
.ob2-in:focus,
.ob2-in:focus-visible {
  outline: none;
  box-shadow: none;
  border-bottom-color: #7d562d !important;
}
.app-root .ob-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 0 10px;
  border-radius: 8px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(253, 249, 240, 0.60); /* resting label — clears WCAG AA (~5.6:1 on #31302b) */
  background: transparent;
  border: 0;
  cursor: pointer;
}
.app-root .ob-tab:hover { color: rgba(253, 249, 240, 0.80); }
.app-root .ob-tab svg { stroke: currentColor; }
.app-root .ob-tab-active,
.app-root .ob-tab-active:hover {
  background: transparent;
  color: rgba(253, 249, 240, 1);
}
.app-root .ob-tab-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #b88e8d;
}
.app-root[data-cards="floating"] .ob-nav,
.app-root[data-cards="tonal"]    .ob-nav { border-color: transparent; }
.app-root[data-cards="floating"] .ob-nav {
  box-shadow: 0 1px 2px color-mix(in srgb, #1c1c17 5%, transparent),
              0 10px 28px color-mix(in srgb, #1c1c17 7%, transparent);
}

/* =========================================================
   CHIPS & TAGS (DS components-chips spec)
   Three tiers, all Hanken UPPERCASE tracked:
     · entry-type pills (ONE BITE / ENOUGH / DAILY LOG)
     · filter row pills (all / one bite / enough / daily log)
     · selectable mini-chips inside expanded cards (energy, mood, …)
   The current jsx renders these with mixed inline styles; the rules
   below "graft" the DS chip look onto them by class-shape selectors.
   ========================================================= */

/* --- 1. Entry-type pills inside the feed/diary rows --- */
.app-root .rounded-full.uppercase,
.app-root .rounded-full[class*="tracking-wid"] {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  line-height: 1;
  border-width: 1px;
  border-style: solid;
  text-transform: uppercase;
}

/* --- 2. The home-screen filter chips ("all / one bite / enough / daily log") --- */
/* These now mirror the Diary selection chips exactly: same Tailwind classes
   (px-3 py-1.5 rounded-full border text-[11px]) + the shared button font, so
   no dedicated typography override is needed. Normal-case, ~30px tall (clears
   WCAG 2.5.8). Their selected/unselected colors stay inline (slate = filter). */

/* --- 3. Selectable mini-chips inside the expanded context editor --- */
/* The app uses `.rounded-md.border.text-[11px]` (or text-[10px]) buttons in flex
   clusters. These mirror the Diary/filter selection chips: normal-case, weight
   400 at rest (the selected state's inline SEL_CHIP bumps to 600), full pill. */
.app-root button.rounded-md[class*="text-[11px]"],
.app-root button.rounded-md[class*="text-[10px]"] {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  border-radius: 9999px;        /* DS chips are full pill */
  padding: 6px 12px;
  line-height: 1;
  white-space: nowrap;
}
/* Recolor the "selected" state from black-ink → primary ochre, matching c-on */
.app-root button.bg-\[\#1c1c17\].border-\[\#1c1c17\] {
  background-color: var(--primary-strong, #7d562d) !important;
  border-color: var(--primary-strong, #7d562d) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* --- 4. Tiny "card metadata" chips (factor tags shown on a saved entry) --- */
/* These are rectangular .rounded.border.text-[11px] tags. Pull them into a
   muted slate-tinted pill family — the DS "status / factor" lane. */
.app-root .rounded.border.text-\[11px\]:not(button) {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 9999px !important;
  padding: 4px 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  background: color-mix(in srgb, var(--secondary, #4c6172) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--secondary, #4c6172) 35%, transparent) !important;
  color: var(--secondary, #4c6172) !important;
}

/* =========================================================
   FEED LIST ROWS (DS components-list-rows spec)
   Re-skins the EntryCard's COLLAPSED state from a bordered
   white card into a hairline-separated row pattern:
     | TIME  |  · body in serif  | META |
   The 4px left-stripe and white card surface are dropped;
   when expanded (.ob-expanded) the card-style chrome returns
   so the inline editor still feels contained.
   ========================================================= */
.app-root .ob-row {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 18px 4px 20px 32px !important;   /* breathable; spine + gap live in the left pad */
  margin: 0 !important;
  position: relative;
  --node-top: 25px;     /* dot top; tuned so dot center == time/child row center */
  --node-size: 10px;
  --node-gap: 10px;     /* break above & below the dot */
}
/* Timeline spine — a hairline BROKEN around each node: a 10px gap top & bottom
   of the dot, segments connecting between rows. Inset from the screen edge so
   it never crowds the bezel or gets clipped by the swipe wrapper. */
.app-root .ob-row::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 0.5px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--outline-variant, #d4c4b7) 70%, transparent) 0,
    color-mix(in srgb, var(--outline-variant, #d4c4b7) 70%, transparent) calc(var(--node-top) - var(--node-gap)),
    transparent                     calc(var(--node-top) - var(--node-gap)),
    transparent                     calc(var(--node-top) + var(--node-size) + var(--node-gap)),
    color-mix(in srgb, var(--outline-variant, #d4c4b7) 70%, transparent) calc(var(--node-top) + var(--node-size) + var(--node-gap)));
}
/* Timeline node — sits ON the spine, doubling as the type indicator, in the
   LIGHTER counterpart of each type's color (dark primary/secondary are
   indistinguishable this small). */
.app-root .ob-row::before {
  content: "";
  position: absolute;
  left: 7px;          /* centers the 10px dot on the 12px spine */
  top: var(--node-top);
  width: var(--node-size);
  height: var(--node-size);
  border-radius: 50%;
  z-index: 1;
  background: var(--surface-dim, #dddad1);
  box-shadow: 0 0 0 1px var(--outline-variant, #d4c4b7);
}
.app-root .ob-row.ob-bite::before {
  background: var(--primary-fixed-dim, #f0bd8b);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-strong, #7d562d) 50%, transparent);
}
.app-root .ob-row.ob-enough::before {
  background: var(--secondary-fixed-dim, #b3c9dd);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--secondary, #4c6172) 50%, transparent);
}
.app-root .ob-row.ob-insight::before {
  background: var(--tertiary-strong, #b88e8d);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tertiary, #5f3e3e) 45%, transparent);
}
/* First-entry placeholder node: a hollow circle (no fill) with a neutral
   1px ring — reads as an empty slot waiting to be filled, distinct from the
   filled type-colored dots of real entries. */
.app-root .ob-row.ob-firstentry::before {
  background: transparent;
  box-shadow: 0 0 0 1px var(--outline-variant, #d4c4b7);
}
.app-root .ob-row.ob-expanded {
  border-radius: 0 !important;
  background: var(--surface, #fdf9f0) !important;
  padding-right: 10px !important;
  padding-bottom: 16px !important;
  margin: 0 !important;
}
.app-root .ob-row.ob-expanded::after {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--secondary, #4c6172) 45%, transparent) 0,
    color-mix(in srgb, var(--secondary, #4c6172) 45%, transparent) calc(var(--node-top) - var(--node-gap)),
    transparent calc(var(--node-top) - var(--node-gap)),
    transparent calc(var(--node-top) + var(--node-size) + var(--node-gap)),
    color-mix(in srgb, var(--secondary, #4c6172) 45%, transparent) calc(var(--node-top) + var(--node-size) + var(--node-gap)));
}
/* First entry in a date group: spine begins AT the dot (no lead-in stub
   dangling under the date label). Only the downward connector remains. */
.app-root .ob-row.ob-first::after {
  background: linear-gradient(to bottom,
    transparent 0,
    transparent calc(var(--node-top) + var(--node-size) + var(--node-gap)),
    color-mix(in srgb, var(--outline-variant, #d4c4b7) 70%, transparent) calc(var(--node-top) + var(--node-size) + var(--node-gap)));
}
/* Last entry: spine ends AT the dot (no dangling tail before the next group). */
.app-root .ob-row.ob-last::after {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--outline-variant, #d4c4b7) 70%, transparent) 0,
    color-mix(in srgb, var(--outline-variant, #d4c4b7) 70%, transparent) calc(var(--node-top) - var(--node-gap)),
    transparent calc(var(--node-top) - var(--node-gap)));
}
/* A lone entry in a group has no neighbour to connect to: just the dot. */
.app-root .ob-row.ob-first.ob-last::after { background: none; }
/* Date-group label sits aligned with the entry content (the time column). */
.app-root .ob-group-label { margin-left: 32px; }
.app-root .ob-row:last-of-type {
  border-bottom: 0 !important;
}
/* Kindness Archive (Me screen) — same broken-spine skeleton as the home feed
   but rose-toned, card-less, with the dot aligned to the first text line's
   midline. A deliberately distinct flesh on a shared rhythm. */
.app-root .ka-row {
  position: relative;
  padding: 18px 0;
}
.app-root .ka-row + .ka-row {
  border-top: 0.5px solid rgba(184,142,141,0.18);
}
.app-root .ka-row:first-child { padding-top: 2px; }
.app-root .ka-row:last-child { padding-bottom: 4px; }
.app-root .ka-note {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
  color: #2e2620;
  text-wrap: pretty;
  margin: 0;
}
.app-root .ka-date {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a98f8a;
  margin-bottom: 0;
}
.app-root .ka-bloom {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--tertiary-strong, #b88e8d);
  box-shadow: 0 0 0 3px rgba(184,142,141,0.15);
}
/* Surface-mood + tonal/floating card treatments shouldn't fill these rows. */
.app-root[data-cards="tonal"]    .ob-row,
.app-root[data-cards="floating"] .ob-row { background: transparent !important; box-shadow: none !important; border-color: var(--outline-variant, #d4c4b7) !important; }
.app-root[data-cards="tonal"]    .ob-row.ob-expanded,
.app-root[data-cards="floating"] .ob-row.ob-expanded {
  background: var(--surface, #fdf9f0) !important;
}

/* The feed entry's time, child emoji, white card, outlined tags and add-context link. */
.app-root .ec-time {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant, #50453b);
  white-space: nowrap;
  line-height: 1.5;
}
.app-root .ec-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 1px solid var(--outline-variant, #d4c4b7);
  border-radius: 9999px;
  padding: 4px 11px 4px 9px;
  background: transparent;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--on-surface-variant, #50453b);
  white-space: nowrap;
  line-height: 1;
}
.app-root .ec-child-emoji {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
/* Editorial underline inputs — shared by onboarding + the child form sheet */
.app-root .ob2-in::placeholder { color: #d4c4b7; font-style: italic; }
.app-root .ob2-in { caret-color: #7d562d; }
.app-root .ob2-in.ob2-date::-webkit-calendar-picker-indicator { opacity: 0.35; cursor: pointer; }
.app-root .ec-card {
  background: var(--surface-container-lowest, #ffffff);
  border: 0.5px solid color-mix(in srgb, var(--outline-variant, #d4c4b7) 55%, transparent);
  border-radius: 12px;
  padding: 16px 16px 18px;
  box-shadow: 0 1px 2px color-mix(in srgb, #1c1c17 3%, transparent);
}
.app-root .ec-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 9999px;
  padding: 4px 10px;
  /* Read-only summary labels: flat quiet tint, NO outline — so they read as
     passive metadata, clearly distinct from the outlined interactive selectors
     (which are normal-case). Uppercase here = "label", not "unfinished chip". */
  background: color-mix(in srgb, var(--on-surface-variant, #50453b) 8%, transparent);
  border: 0;
  color: var(--on-surface-variant, #50453b);
  white-space: nowrap;
}
.app-root .ec-add {
  margin-top: 8px;
  margin-left: 2px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant, #50453b);
  background: transparent;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 120ms var(--ease-quiet, cubic-bezier(.32,.08,.24,1));
}
.app-root .ec-add:hover { opacity: 1; }

/* =========================================================
   TWEAKS — three expressive levers
   data-headline | data-surface | data-cards on .app-root.
   Each stays within the Still Orchard idiom.
   ========================================================= */

/* ---- Headline persona ---------------------------------- */
/* "editorial" (default) is set by the rules at the top of this file. */

/* Persona only swaps screen headlines (h2/h3/h4) — the TopBar wordmark (h1)
   is the brand lockup and always stays in Fraunces 500. */
.app-root[data-headline="letter"] :where(h1, h2, h3, h4) {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.004em;
  text-transform: lowercase;
}
.app-root[data-headline="letter"] .text-2xl.font-medium,
.app-root[data-headline="letter"] .text-xl.font-medium {
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.004em;
}

.app-root[data-headline="quiet"] :where(h1, h2, h3, h4),
.app-root[data-headline="quiet"] .text-2xl.font-medium,
.app-root[data-headline="quiet"] .text-xl.font-medium {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ---- Surface mood -------------------------------------- */
/* The app hard-codes Tailwind arbitrary-value classes like bg-[#f7f3ea].
   We override those classes when a non-default surface is picked.
   "cream" is the canonical floor — no override needed. */

/* Linen — paler, slightly washed cream. Cooler hue than the canonical floor. */
.app-root[data-surface="linen"] .bg-\[\#fdf9f0\],
.app-root[data-surface="linen"] .max-w-md.h-screen { background-color: #efe9d6 !important; }
.app-root[data-surface="linen"] .bg-\[\#f7f3ea\] { background-color: #e7e0c9 !important; }
.app-root[data-surface="linen"] .bg-\[\#ece8df\] { background-color: #d9d1b8 !important; }
.app-root[data-surface="linen"] .bg-white { background-color: #f8f3e2 !important; }
.app-root[data-surface="linen"] .border-\[\#d4c4b7\],
.app-root[data-surface="linen"] .border-\[\#e0d5c7\],
.app-root[data-surface="linen"] .border-\[\#ece8df\] { border-color: #cdc0a0 !important; }

/* Twilight — deep dusk cream. The hour after the lamps come on. Still warm. */
.app-root[data-surface="twilight"] .bg-\[\#fdf9f0\],
.app-root[data-surface="twilight"] .max-w-md.h-screen { background-color: #d8ccae !important; }
.app-root[data-surface="twilight"] .bg-\[\#f7f3ea\] { background-color: #ccc09f !important; }
.app-root[data-surface="twilight"] .bg-\[\#ece8df\] { background-color: #beb18d !important; }
.app-root[data-surface="twilight"] .bg-white { background-color: #ece1c1 !important; }
.app-root[data-surface="twilight"] .border-\[\#d4c4b7\],
.app-root[data-surface="twilight"] .border-\[\#e0d5c7\],
.app-root[data-surface="twilight"] .border-\[\#ece8df\] { border-color: #a89978 !important; }

/* ---- Card treatment ------------------------------------ */
/* The app's "cards" are nearly always `bg-white` boxes with a 1px outline,
   wrapped in screen containers tinted with the surface-container-low.
   We selectively override the cards (not modals — modals stay as-is). */

/* Outlined (default) — no override. */

/* Tonal — drop the border, sink the card into a deeper surface tone. */
.app-root[data-cards="tonal"] .bg-white {
  background-color: var(--surface-container-low, #f7f3ea) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Restore borders for modals & sheets — these need separation from the dim. */
.app-root[data-cards="tonal"] .bg-black\/20 .bg-white,
.app-root[data-cards="tonal"] .rounded-t-3xl.bg-white,
.app-root[data-cards="tonal"] .max-w-md.h-screen > .bg-\[\#fdf9f0\] {
  background-color: #fdf9f0 !important;
}

/* Floating — softer ambient depth, no outline, no inner stroke. */
.app-root[data-cards="floating"] .bg-white {
  border-color: transparent !important;
  box-shadow:
    0 1px 3px color-mix(in srgb, #1c1c17 8%, transparent),
    0 12px 32px color-mix(in srgb, #1c1c17 9%, transparent) !important;
}
/* Composer + entry cards get just a touch more lift since they anchor the screen. */
.app-root[data-cards="floating"] .max-w-md.h-screen .bg-white.shadow-sm {
  box-shadow:
    0 2px 4px color-mix(in srgb, #1c1c17 9%, transparent),
    0 16px 40px color-mix(in srgb, #1c1c17 10%, transparent) !important;
}

/* =========================================================
   POLISH LAYER — hi-fi pass
   Brings the app from "working port" to "ready-to-test."
   Organized by:
     · Motion + interaction (gentle ease, no scale jumps)
     · Typography (optical sizing, headline rhythm)
     · Composer (warm, inviting, editorial)
     · Stat tiles (big Fraunces numbers, Hanken eyebrow)
     · Page rhythm (generous section spacing)
     · Surfaces & inputs (refined chrome, gentle focus)
     · Modals/sheets (drag-handle refinement, type hierarchy)
     · Factor cloud (quieter motion, better blending)
     · CTA buttons (consistent rounded-xl ochre)
   ========================================================= */

/* ---- 1. Motion — quiet ease everywhere ---- */
.app-root * { transition-timing-function: cubic-bezier(0.32, 0.08, 0.24, 1); }
/* Kill `active:scale-95` jumps; DS prefers tonal shift only. */
.app-root .active\:scale-95:active,
.app-root .active\:scale-\[0\.98\]:active {
  transform: none !important;
}

/* ---- 2. Optical typography ---- */
.app-root h1, .app-root h2, .app-root h3, .app-root h4 {
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
}

/* Hero headlines that screens lean on ("the rhythm of discovery.",
   "you showed up for Sun 6 days this week.", "the day, in your own words.") */
.app-root .text-\[22px\].leading-\[1\.1\].font-medium,
.app-root .text-\[22px\].font-medium.leading-tight {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.014em !important;
  text-wrap: balance;
}

/* The "your patterns" / "me" big screen titles */
.app-root .text-2xl.font-medium.tracking-tight {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  letter-spacing: -0.018em !important;
  line-height: 1.15 !important;
}

/* ---- 3. Composer — make the daily ritual feel inviting ---- */
.app-root .p-3.pb-3.border-b > .rounded-xl.border.overflow-hidden.bg-white {
  background: #fefcf8 !important;
  border-color: color-mix(in srgb, var(--outline-variant, #d4c4b7) 55%, transparent) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 12px rgba(28, 28, 23, 0.06) !important;
}
.app-root .p-3.pb-3.border-b textarea {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  padding: 16px 16px 12px !important;
  min-height: 72px !important;
  color: var(--on-surface, #1c1c17);
}
.app-root .p-3.pb-3.border-b textarea::placeholder {
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  color: color-mix(in srgb, #1c1c17 38%, transparent);
  font-size: 15px;
}
/* Composer's pill divider + actions */
.app-root .p-3.pb-3.border-b .border-t.border-\[\#ece8df\] {
  border-color: color-mix(in srgb, var(--outline-variant, #d4c4b7) 80%, transparent) !important;
}
/* The "one bite" / "enough" composer pills — make them feel considered */
/* The multi-child switcher pills ("for: Sun / Mei") — uppercase Hanken. */
.app-root .p-3.pb-3.border-b button[class*="rounded-full"][class*="border"] {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 7px 14px !important;
  border-width: 1px !important;
}
/* The "one bite" / "enough" composer CTAs — disabled-style fills.
   Borderless solid brand fills that sit dimmed (via disabled:opacity-40)
   until the composer has text, then bloom to full opacity. */
.app-root .p-3.pb-3.border-b button.composer-cta {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  /* 0.5px transparent border at rest keeps the box the same size in both
     states so nothing shifts when the resting outline appears/disappears. */
  border: 0.5px solid transparent !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
/* Resting affordance: an empty composer leaves the CTAs disabled. Give them a
   hairline outline so they read as tappable-but-waiting rather than vanishing
   into the card; the outline drops away once text blooms them to full fill. */
.app-root .p-3.pb-3.border-b button.composer-cta:disabled {
  /* whisper-weight to match the composer card's own 0.55 hairlines, so the
     resting edge doesn't read harder than the soft fill it surrounds */
  border-color: rgba(212, 196, 183, 0.55) !important;
}

/* =========================================================
   UNIFYING SCREEN HEADER (treatment C — rule-between)
   eyebrow + control above a hairline; Fraunces title, optional
   subline + caption below. Shared masthead across all 5 screens.
   ========================================================= */
.app-root .screen-header {
  padding: 22px 0 14px;
  flex-shrink: 0;
}
.app-root .sh-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 30px;
  margin-bottom: 12px;
}
.app-root .sh-eyebrow {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-surface-variant, #82756a);
  white-space: nowrap;
}
.app-root .sh-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* date/meta sitting in the kicker's right slot (above the rule) — Diary */
.app-root .sh-kicker-meta {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant, #82756a);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.app-root .sh-rule {
  height: 0;
  border-bottom: 0.5px solid color-mix(in srgb, var(--outline-variant, #d4c4b7) 70%, transparent);
  margin-bottom: 14px;
}
.app-root .sh-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 450;
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--on-surface, #1c1c17);
  margin: 0;
  text-wrap: pretty;
}
.app-root .sh-subline {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--on-surface-variant, #6e6258);
  margin: 9px 0 0;
  max-width: 36ch;
  text-wrap: pretty;
}
.app-root .sh-caption {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant, #82756a);
  margin: 12px 0 0;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 7px;
}
/* segmented filter (7d/30d/all) sitting in the header control slot */
.app-root .sh-seg {
  display: inline-flex;
  gap: 2px;
  background: var(--surface-container-lowest, #ffffff);
  border: 0.5px solid color-mix(in srgb, var(--outline-variant, #d4c4b7) 55%, transparent);
  border-radius: 999px;
  padding: 3px;
}
.app-root .sh-seg button {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 0;
  background: transparent;
  color: var(--on-surface-variant, #82756a);
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.32,0.08,0.24,1), color 120ms cubic-bezier(0.32,0.08,0.24,1);
}
.app-root .sh-seg button.on {
  background: var(--primary-fixed, #faf2e7);
  color: var(--primary-strong, #7d562d);
}
/* small round icon action in the control slot (add / settings / edit) */
.app-root .sh-iconbtn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 0.5px solid color-mix(in srgb, var(--outline-variant, #d4c4b7) 55%, transparent);
  background: var(--surface-container-lowest, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-surface-variant, #6e6258);
  transition: background-color 120ms cubic-bezier(0.32,0.08,0.24,1);
}
.app-root .sh-iconbtn:hover { background: var(--surface-container, #ece8df); }
.app-root .sh-cap-edit {
  display: inline-flex;
  align-items: center;
  color: var(--on-surface-variant, #b8a99a);
}

/* Unified multi-child switcher — pill row under the header (Diary style). */
.app-root .child-switcher {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 18px;
  scrollbar-width: none;
}
.app-root .child-switcher::-webkit-scrollbar { display: none; }
.app-root .cs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 13px;
  border-radius: 999px;
  border: 0.5px solid transparent;
  color: var(--on-surface-variant, #82756a);
  background: transparent;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.32,0.08,0.24,1), color 120ms cubic-bezier(0.32,0.08,0.24,1), border-color 120ms cubic-bezier(0.32,0.08,0.24,1);
}
.app-root .cs-pill:hover { color: var(--on-surface, #50453b); }
.app-root .cs-pill.on {
  background: var(--surface-container-lowest, #ffffff);
  color: var(--on-surface, #1c1c17);
  border-color: color-mix(in srgb, var(--outline-variant, #d4c4b7) 55%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, #1c1c17 4%, transparent);
}
.app-root .cs-emoji { font-size: 13px; line-height: 1; }
/* trailing rename pencil in the Child switcher row */
.app-root .cs-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--on-surface-variant, #b8a99a);
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0.32,0.08,0.24,1), color 120ms cubic-bezier(0.32,0.08,0.24,1);
}
.app-root .cs-edit:hover { background: var(--surface-container, #ece8df); color: var(--on-surface-variant, #6e6258); }

/* ---- 4. Stat tiles — turn small numeric boxes into editorial moments ---- */
/* Targets the 3-up rows in Pattern + Child screens. */
.app-root .grid.grid-cols-3.gap-2 > .p-3.rounded-\[12px\].bg-white,
.app-root .flex.gap-2 > .flex-1.p-3.rounded-\[12px\].bg-white {
  padding: 18px 14px 16px !important;
  border-radius: 14px !important;
  border-color: var(--outline-variant, #d4c4b7) !important;
}
/* The number — Hanken Grotesk, kept quiet & neutral.
   Numbers/data stay in the sans family; Fraunces is reserved for emotional copy. */
.app-root .grid.grid-cols-3.gap-2 .text-\[20px\].font-medium,
.app-root .flex.gap-2 .text-\[22px\].font-medium {
  font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 28px !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 8px !important;
  font-variant-numeric: tabular-nums;
}
/* The caption */
.app-root .grid.grid-cols-3.gap-2 .text-\[11px\].leading-tight,
.app-root .flex.gap-2 .text-\[11px\].leading-tight {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--on-surface-variant, #50453b) !important;
  opacity: 0.7;
  line-height: 1.35 !important;
}
/* Child screen's third stat tile uses smaller numeric/word in 12px — keep parity
   in Hanken so it reads as neutral data, not editorial. */
.app-root .grid.grid-cols-3.gap-2 .text-\[12px\].font-medium {
  font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
}

/* ---- 5. Page rhythm — more breath ---- */
.app-root .mb-8 { margin-bottom: 36px; }
.app-root .mb-6 { margin-bottom: 28px; }

/* Eyebrow → headline pairing: tighten the gap so they feel grouped */
.app-root .text-\[11px\].uppercase.tracking-widest.font-semibold + h3,
.app-root .text-\[11px\].uppercase.tracking-widest.font-semibold + h4,
.app-root .text-\[11px\].uppercase.tracking-widest.font-semibold + .text-\[22px\] {
  margin-top: 6px !important;
}

/* ---- 6. Inputs & textareas — gentle focus ---- */
.app-root input, .app-root textarea {
  transition: border-color 160ms cubic-bezier(0.32, 0.08, 0.24, 1),
              box-shadow 160ms cubic-bezier(0.32, 0.08, 0.24, 1);
}
.app-root textarea:focus,
.app-root input[type="text"]:focus,
.app-root input[type="date"]:focus,
.app-root input[type="time"]:focus,
.app-root input[type="number"]:focus {
  outline: none !important;
  border-color: var(--primary-strong, #7d562d) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-strong, #7d562d) 14%, transparent) !important;
}
/* Diary notebook ruled fields — underline-only, no box, no ring.
   1px rule (vs the app's 0.5px containment hairlines): meant to be
   written on, so they carry slightly more structure. */
.app-root .diary-rule {
  border: 0 !important;
  border-bottom: 1px solid #d4c4b7 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.app-root .diary-rule:focus {
  border-bottom-color: var(--primary-strong, #7d562d) !important;
  box-shadow: none !important;
}
.app-root .diary-rule::placeholder {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  color: #d4c4b7;
}
/* The Home composer textarea is borderless — its border lives on the wrapper
   card. Suppress the focus ring/border so clicking in doesn't read as the
   card border thickening. */
.app-root .p-3.pb-3.border-b textarea:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ---- 7. Modals & sheets — drag-handle refinement ---- */
.app-root .w-12.h-1\.5.bg-\[\#ece8df\].rounded-full.mx-auto,
.app-root .w-10.h-1.bg-\[\#ece8df\].rounded-full.mx-auto {
  width: 36px !important;
  height: 4px !important;
  background-color: color-mix(in srgb, var(--secondary, #4c6172) 24%, transparent) !important;
  opacity: 1 !important;
}
/* Modal headers feel like museum titles */
.app-root .rounded-t-3xl h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  letter-spacing: -0.012em !important;
  text-transform: lowercase;
}
/* Sheet bottom padding accounting for safer area */
.app-root .rounded-t-3xl.pt-2.pb-8 { padding-bottom: 32px !important; }

/* ---- 8. Factor cloud — quieter, more watercolor ---- */
@keyframes wobbleQuiet {
  0%, 100% {
    border-radius: 56% 44% 52% 48% / 50% 52% 48% 50%;
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
    transform: translateY(-2px) rotate(0.5deg) scale(1.005);
  }
}
.app-root .relative.h-\[320px\].w-full > div > div {
  animation-name: wobbleQuiet !important;
  animation-duration: 6.5s !important;
  animation-timing-function: cubic-bezier(0.32, 0.08, 0.24, 1) !important;
}
/* The "size = weight · tap any cloud" caption row */
.app-root .relative.h-\[320px\].w-full + div,
.app-root .p-3.border-b.border-\[\#ece8df\] .text-\[11px\] {
  font-family: 'Hanken Grotesk', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
  opacity: 0.7;
}

/* ---- 9. Primary CTAs — unified ochre ---- */
/* Things like "go log something", "open this week's reflection", "+ generate my reflection" */
.app-root button[class*="bg-[#7d562d]"],
.app-root button[class*="bg-\\[\\#7d562d\\]"],
.app-root button[style*="background-color: rgb(125, 86, 45)"] {
  background-color: var(--primary-strong, #7d562d) !important;
  color: #fff !important;
  border-color: var(--primary-strong, #7d562d) !important;
}
/* Pattern empty-state CTA (was sage) — re-tone */
.app-root .bg-\[\#f0bd8b\].text-\[\#fff\],
.app-root .bg-\[\#7d562d\].text-\[\#fff\] {
  background-color: var(--primary-strong, #7d562d) !important;
  color: #fff !important;
}
.app-root .bg-\[\#f0bd8b\].text-\[\#fff\]:hover,
.app-root .bg-\[\#7d562d\].text-\[\#fff\]:hover {
  background-color: var(--primary, #623f18) !important;
}
/* "+ add context" + "done" expander buttons — softer */
.app-root .text-\[11px\].font-bold.uppercase.tracking-widest.w-full {
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  padding: 9px 12px !important;
  border-radius: 9999px !important;
}

/* ---- 10. The TOP BAR wordmark — give the slash a brand touch ---- */
.app-root .px-4.pt-6.pb-3.border-b h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 19px !important;
  letter-spacing: -0.012em !important;
  text-transform: lowercase;
}
/* The "SUN'S LOG" eyebrow under the wordmark */
.app-root .px-4.pt-6.pb-3.border-b .text-\[11px\] {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--on-surface-variant, #50453b) !important;
  opacity: 0.7;
  margin-top: 6px !important;
}

/* ---- 11. Child screen — Collection of Try cards refined ---- */
.app-root .grid.grid-cols-2.gap-3 > .p-4.rounded-\[12px\] {
  border-radius: 12px !important;
  padding: 16px !important;
  border: 0.5px solid color-mix(in srgb, var(--outline-variant, #d4c4b7) 55%, transparent) !important;
  background-color: var(--surface-container-lowest, #ffffff) !important;
}

/* ---- 12. The energy bar chart on Me screen — softer bars ---- */
.app-root .flex.items-end.justify-between.h-\[70px\] > div {
  border-radius: 4px 4px 1px 1px !important;
  transition: height 360ms cubic-bezier(0.32, 0.08, 0.24, 1) !important;
}

/* ---- 13. Week's Mirror body — Fraunces italic, tighter ---- */
.app-root .text-\[13px\].font-serif.leading-\[1\.7\] {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #5f3e3e !important;
}

/* ---- 14. Kindness Archive + Bottle quotes — gentler chrome ---- */
.app-root .p-4.rounded-\[14px\].bg-white.border-\[\#ece8df\] {
  background: var(--surface-container-lowest, #ffffff) !important;
  border-color: var(--outline-variant, #d4c4b7) !important;
}
.app-root .text-\[14px\].font-serif.italic.leading-relaxed {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  color: var(--on-surface, #1c1c17) !important;
}
/* The Message-in-a-Bottle quote opts into tertiary (dark rose) — overrides the
   generic serif-italic color rule above. */
.app-root .bottle-quote {
  color: #5f3e3e !important;
}
/* Bottle "another one" pill — a quiet ghost invite, not a solid CTA.
   Hover deepens the translucent rose fill + border instead of going dark,
   so the rose label stays readable; the arrow drifts a hair to the right. */
.app-root .bottle-next {
  transition: background-color 160ms cubic-bezier(0.32,0.08,0.24,1),
              border-color 160ms cubic-bezier(0.32,0.08,0.24,1) !important;
}
.app-root .bottle-next:hover {
  background-color: rgba(184, 142, 141, 0.30) !important;
  border-color: rgba(184, 142, 141, 0.62) !important;
}
.app-root .bottle-next:active {
  background-color: rgba(184, 142, 141, 0.42) !important;
}
.app-root .bottle-next .bn-arrow {
  transition: transform 160ms cubic-bezier(0.32,0.08,0.24,1);
}
.app-root .bottle-next:hover .bn-arrow {
  transform: translateX(2px);
}

/* ---- 15. Last-7-days strip on Home — quieter ---- */
.app-root .flex.justify-between.items-center.px-4.py-2.border-b.bg-\[\#fdf9f0\] {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background: transparent !important;
  border-color: color-mix(in srgb, var(--outline-variant, #d4c4b7) 60%, transparent) !important;
}

/* ---- 16. Hairline-row scroll area — no harsh bg ---- */
.app-root .flex-1.overflow-y-auto.p-3.bg-\[\#f7f3ea\] {
  background: var(--surface, #fdf9f0) !important;
  padding: 6px 16px 18px !important;
}

/* ---- 17. Day-section headers ("today", "yesterday", etc.) refined ---- */
.app-root .text-\[11px\].uppercase.tracking-wider.mb-2.ml-1.font-medium {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  color: var(--on-surface-variant, #50453b) !important;
  opacity: 0.7;
  margin: 18px 0 4px 0 !important;
}

/* ---- 18. Section eyebrows global tone — DS label-sm (12 / 600 / +0.08em) ---- */
.app-root .text-\[11px\].uppercase.tracking-widest.font-semibold,
.app-root .text-\[11px\].uppercase.tracking-wider.font-medium {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  color: var(--on-surface-variant, #50453b) !important;
  opacity: 0.82;
}

/* The Kindness Archive eyebrow is an accent inside the rose-wash zone —
   override the global eyebrow tone with tertiary-strong rose. */
.app-root .kindness-eyebrow.text-\[11px\].uppercase.tracking-widest.font-semibold {
  color: #96615f !important;
  opacity: 1;
}

/* ---- 19. The home screen filter row + child dropdown — calmer ---- */
.app-root .flex.items-center.gap-1.overflow-x-auto.no-scrollbar.pr-2 {
  gap: 6px;
}

/* ---- 20. Time/Date filter pill toggles (7d / 30d / all) ---- */
.app-root .flex.rounded-full.border.p-0\.5 {
  border-color: color-mix(in srgb, var(--outline-variant, #d4c4b7) 55%, transparent) !important;
  border-width: 0.5px !important;
  background: var(--surface-container-lowest, #ffffff) !important;
}
.app-root .flex.rounded-full.border.p-0\.5 > button {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
}

/* ---- 21. Hide scrollbars across the phone UI (scroll still works) ---- */
/* Scoped to the device screen so the Tweaks panel keeps its own thin bar. */
.app-root .max-w-md::-webkit-scrollbar,
.app-root .max-w-md *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
.app-root .max-w-md,
.app-root .max-w-md * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* =========================================================
   22. LINEAR PASS — Pattern / Diary / Child / Me
   Brings the data screens in line with the home feed's calm,
   linear rhythm: flatten the stacked white boxes into hairline
   panels, and provide a divided "stat strip" to replace 3-up
   box grids. The home feed itself uses .ec-card / .ob-row and
   is unaffected.
   ========================================================= */

/* Soften every stacked white card on the data screens: drop the heavy
   shadow-sm to home's whisper, unify the hairline, keep the 12px radius.
   Scoped away from the home feed, modals and bottom sheets. */
.app-root .max-w-md.h-screen .bg-white.shadow-sm:not(.ec-card) {
  box-shadow: 0 1px 2px color-mix(in srgb, #1c1c17 3%, transparent) !important;
  border-color: color-mix(in srgb, var(--outline-variant, #d4c4b7) 55%, transparent) !important;
  border-width: 0.5px !important;
}

/* The divided stat strip — one flat panel, hairline-split cells, no inner boxes. */
.app-root .ins-fh::first-letter { text-transform: uppercase; }
.app-root .stat-strip {
  display: flex;
  align-items: stretch;
  background: var(--surface-container-lowest, #ffffff);
  border: 0.5px solid color-mix(in srgb, var(--outline-variant, #d4c4b7) 55%, transparent);
  border-radius: 4px;
  overflow: hidden;
}
.app-root .stat-cell {
  flex: 1;
  padding: 14px 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app-root .stat-cell + .stat-cell {
  border-left: 1px solid color-mix(in srgb, var(--outline-variant, #d4c4b7) 70%, transparent);
}
.app-root .stat-num {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  font-size: 26px;
  height: 28px;
  display: flex;
  align-items: flex-end;
  line-height: 1;
  letter-spacing: -0.01em;
}
.app-root .stat-label {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--on-surface-variant, #82756a);
}

/* Section eyebrows on data screens — match home's quiet museum label. */
.app-root .linear-eyebrow {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant, #82756a);
}

/* =========================================================
   23. UNIFORM PAGE MARGIN — Home / Pattern / Diary / Child / Me
   Cream content (labels, headers, body) sits 20px from each
   screen edge. Cards & contained components sit 14px from the
   edge (6px wider than the text column) for a consistent inset
   from the screen boundary. The floating nav keeps its own
   0 10px outer padding; onboarding & settings are untouched.
   ========================================================= */
.app-root .screen-scroll {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Full-width cards & contained components → 14px from the edge.
   Scoped to <div> blocks so nested buttons/inputs/textareas keep
   their place. The timeline feed (.ec-card) and the card-less
   kindness rows (.ka-row) keep their own left-gutter rhythm, and
   mini-card grids (rounded-[16px]) stay within the 20px column. */
.app-root .screen-scroll .stat-strip,
.app-root .screen-scroll div[class*="rounded-[12px]"],
.app-root .screen-scroll div[class*="rounded-xl"][class*="shadow-sm"] {
  margin-left: -6px !important;
  margin-right: -6px !important;
}

/* =========================================================
   24. KINDNESS ARCHIVE CONTROLS — index pagination + serif prompt
   A's museum-label index nav paired with C's serif-voice log
   prompt. The italic placeholder continues the resting prompt
   into the open input; chevrons + prompt warm on hover.
   ========================================================= */
.app-root .ka-log-input::placeholder {
  font-style: italic;
  color: #a98f8a;
  opacity: 1;
}
.app-root .ka-log-input,
.app-root .ka-log-input:focus,
.app-root .ka-log-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
}
.app-root .ka-pg-arrow:not(:disabled):hover {
  color: #5f3e3e !important;
}
.app-root .kindness-add {
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms cubic-bezier(0.32,0.08,0.24,1),
              border-color 160ms cubic-bezier(0.32,0.08,0.24,1);
}
.app-root .kindness-add:hover {
  background-color: rgba(184, 142, 141, 0.10) !important;
  border-color: rgba(184, 142, 141, 0.60) !important;
}
.app-root .ws-generate {
  -webkit-tap-highlight-color: transparent;
}
.app-root .ws-generate:hover {
  background-color: #97595a !important;
}

/* =========================================================
   Hardening — long / unbroken user text and names must wrap, not
   overflow their container. overflow-wrap:anywhere only breaks a
   token when it would otherwise spill (normal text still wraps on
   spaces), so it's safe for headings, notes, and app copy alike.
   Covers: feed notes (.whitespace-pre-wrap), the Kindness Archive
   (.ka-note), the Child collection / reflection quotes (serif
   italic), and child names rendered in headings / screen titles.
   ========================================================= */
.app-root h1, .app-root h2, .app-root h3, .app-root h4,
.app-root .sh-title, .app-root .sh-subline,
.app-root .whitespace-pre-wrap,
.app-root .ka-note,
.app-root .font-serif.italic {
  overflow-wrap: anywhere;
}

/* =========================================================
   Accessibility — honor reduced-motion. Entrance/sheet animations
   and decorative transitions collapse to instant for users who ask
   the OS to minimize motion. Functionality is unchanged.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .app-root *,
  .app-root *::before,
  .app-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}