/* ============================================================
   /how-it-works — app-screen mockups ("What's inside the app")

   HTML/CSS copies of real app screens, drawn inside a phone frame.
   Everything inside .app-screen follows the app's own StyleSheet values
   (src/lumen/lumen-tokens.js, light theme, getShadow(false)); everything
   outside it uses the marketing site's landing.css. No JavaScript: the
   scroll inside the phone is native overflow on desktop and a CSS
   keyframe on touch screens.

   Icons: glyphs of the app's own icon fonts, drawn as SVG <symbol>s in
   the page (Ionicons: MIT licence; Material Design Icons: Apache-2.0).
   ============================================================ */

/* ---------- Section layout (marketing side) ---------- */
.hiw-shots .sec-head { margin-bottom: 64px; }
.hiw-shot {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 72px;
  max-width: 1040px;
  margin: 0 auto;
}
.hiw-shot + .hiw-shot { margin-top: 96px; }
/* Screens alternate by position in the list: odd = phone left, even = phone
   right. Adding a screen anywhere keeps the rhythm without touching markup. */
.hiw-shots-list > .hiw-shot:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
.hiw-shots-list > .hiw-shot:nth-child(even) .hiw-shot-phone { order: 2; }
.hiw-shot-phone { display: flex; justify-content: center; }
.hiw-shot-copy h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 22px;
}
.hiw-shot-copy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hiw-shot-copy li {
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  padding-left: 18px;
  position: relative;
}
.hiw-shot-copy li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.68em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rose-gold);
}
.hiw-shot-copy li strong { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .hiw-shot { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hiw-shots-list > .hiw-shot:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .hiw-shots-list > .hiw-shot:nth-child(even) .hiw-shot-phone { order: 0; }
  .hiw-shot + .hiw-shot { margin-top: 72px; }
}

/* ---------- Phone frame ----------
   The app lays itself out from the window width, so the screen is drawn at
   a real phone's logical size (390 x 844, iPhone 12-15) and the whole phone is scaled.
   The box reserves the scaled footprint so the page never scrolls sideways. */
.hiw-phone-box {
  --phone-scale: 0.84;
  --phone-w: 410px;   /* 390 screen + 2 x 10 frame */
  --phone-h: 864px;   /* 844 screen + 2 x 10 frame */
  width: calc(var(--phone-w) * var(--phone-scale));
  height: calc(var(--phone-h) * var(--phone-scale));
  position: relative;
  flex-shrink: 0;
}
.hiw-phone {
  position: absolute;
  top: 0; left: 0;
  width: var(--phone-w);
  height: var(--phone-h);
  transform: scale(var(--phone-scale));
  transform-origin: top left;
  box-sizing: border-box;
  border: 10px solid #1f1620;
  border-radius: 46px;
  background: #1f1620;
  box-shadow: 0 60px 120px -40px rgba(42,31,43,0.5), 0 0 0 2px rgba(201,168,118,0.18);
  overflow: hidden;
}
@media (max-width: 420px) {
  .hiw-phone-box { --phone-scale: 0.82; }
}
@media (max-width: 360px) {
  .hiw-phone-box { --phone-scale: 0.76; }
}

/* ============================================================
   APP SCREEN — everything below is scoped to .app-screen
   ============================================================ */
.app-screen {
  /* Lumen light tokens (lumen-tokens.js C) */
  --app-bg: #FAF8F5;
  --app-surface: #FFFFFF;
  --app-surface-alt: #F5F1EC;
  --app-line: #E8E1D8;
  --app-line-strong: #D8C8B0;
  --app-fg: #241826;
  --app-fg2: #6B5A50;
  --app-fg3: rgba(42,31,43,0.65);
  --app-signal: #B83B73;
  --app-signal-soft: #FBE9F1;
  --app-success: #1E8449;
  --app-rose-gold: #C9A876;
  /* ACCENTS (line / soft) */
  --acc-food: #C2683B;  --acc-food-soft: #FBF1DD;
  --acc-water: #2C7795; --acc-water-soft: #E4F1F6;
  --acc-move: #1F8A5B;  --acc-move-soft: #E5F5EF;
  --acc-sleep: #3F5AA8; --acc-sleep-soft: #E7ECFA;
  --acc-cycle: #C13A78; --acc-cycle-soft: #FBE9F1;
  --acc-labs: #8B4A5C;  --acc-labs-soft: #F3E6EA;
  --acc-mona: #6A4DC4;  --acc-mona-soft: #EDEAFA;
  /* getShadow(false) */
  --app-e1: 0 4px 10px rgba(42,24,36,0.08);
  /* FONT */
  --app-ui: 'Manrope', system-ui, sans-serif;
  --app-number: 'Playfair Display', Georgia, serif;
  --app-display: 'Italiana', 'Menoup Display', serif;
  --app-editor: 'Cormorant Garamond', serif;
  --app-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Fixed chrome heights; the scroll area is what is left of 844. */
  --status-h: 44px;
  --header-h: 53px;
  --tabbar-h: 105px;
  --scroll-h: calc(844px - var(--status-h) - var(--header-h) - var(--tabbar-h));

  width: 390px;
  height: 844px;
  border-radius: 36px;
  overflow: hidden;
  background: var(--app-bg);
  color: var(--app-fg);
  font-family: var(--app-ui);
  display: grid;
  grid-template-rows: var(--status-h) var(--header-h) var(--scroll-h) var(--tabbar-h);
  grid-template-columns: minmax(0, 1fr);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  user-select: none;
}
.app-screen *, .app-screen *::before, .app-screen *::after { box-sizing: border-box; margin: 0; padding: 0; }
.app-screen .ic { display: block; fill: currentColor; flex-shrink: 0; }

/* Status bar (the OS draws this; kept neutral) */
.app-screen .app-status {
  background: var(--app-surface);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px 0 30px;
  font-size: 15px; font-weight: 600; color: var(--app-fg);
}
.app-screen .app-status-icons { display: flex; align-items: center; gap: 6px; }
.app-screen .app-status-icons svg { display: block; fill: var(--app-fg); }

/* ScreenHeader variant="stack" (ScreenHeader.js, componentTokens.ScreenHeader) */
.app-screen .app-header {
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-line);
  display: flex; align-items: center;
  min-height: 52px;
  padding: 0 8px;
}
.app-screen .app-header-side { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.app-screen .app-header-title {
  flex: 1; text-align: center;
  font-weight: 600; font-size: 17px; line-height: 22px;
  padding: 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Scroll area */
.app-screen .app-scroll { position: relative; overflow: hidden; }
.app-screen .app-scroll-inner { padding: 16px 0 40px; }
@media (hover: hover) and (pointer: fine) {
  .app-screen .app-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .app-screen .app-scroll::-webkit-scrollbar { display: none; }
}
/* Touch screens: no scrolling inside the phone (the page scroll must never
   get caught); instead a slow back-and-forth pan over the whole content.
   translateY(-100%) is the content's own height, so this is exact in every
   language, however the text wraps. */
@media (hover: none), (pointer: coarse) {
  .app-screen .app-scroll-inner {
    animation: app-pan 36s ease-in-out infinite alternate;
  }
  .app-screen .app-scroll:active .app-scroll-inner,
  .app-screen .app-scroll:hover .app-scroll-inner { animation-play-state: paused; }
}
@keyframes app-pan {
  0%, 8% { transform: translateY(0); }
  92%, 100% { transform: translateY(calc(-100% + var(--scroll-h))); }
}

/* ScreenIntro */
.app-screen .app-intro {
  font-size: 13px; line-height: 19px;
  color: var(--app-fg2);
  padding: 4px 20px 12px;
}

/* ---------- DiaryHubScreen: card grid ---------- */
.app-screen .dh-grid {
  display: flex; flex-wrap: wrap;
  gap: 12px;
  padding: 0 16px;
  margin-bottom: 16px;
}
.app-screen .dh-card {
  /* CARD_W = floor((390 - 32 - 12) / 2) - 1 */
  width: 172px;
  min-height: 168px;
  border-radius: 20px;
  border: 1px solid var(--app-line);
  padding: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  background:
    radial-gradient(55% 55% at 18% 6%, var(--halo), transparent 100%),
    var(--app-surface);
  box-shadow: var(--app-e1);
}
.app-screen .dh-card-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px;
}
.app-screen .dh-label { font-size: 12px; font-weight: 600; line-height: 16px; margin-bottom: 3px; }
.app-screen .dh-desc { font-size: 11px; line-height: 14px; color: var(--app-fg2); flex: 1; }
.app-screen .dh-footer { display: flex; align-items: center; margin-top: 12px; }
.app-screen .dh-spacer { flex: 1; }
.app-screen .dh-arrow {
  width: 24px; height: 24px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--a-soft); color: var(--a-line);
  flex-shrink: 0;
}
/* QuickLogButton, light 3D variant */
.app-screen .dh-quick {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--app-line-strong);
  background:
    linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0) 55%),
    linear-gradient(#ffffff, var(--a-soft-60));
  box-shadow: 0 4px 10px var(--a-line-08);
  color: var(--a-line);
  font-size: 11px; font-weight: 600; line-height: 13px;
  min-width: 0;
}
.app-screen .dh-quick .ic { margin-right: 2px; }

/* StatDisplay (light) */
.app-screen .dh-stat { display: flex; flex-direction: column; align-items: flex-end; max-width: 92px; } /* CARD_W - 80 */
.app-screen .dh-stat-val { font-family: var(--app-display); font-size: 19px; line-height: 22px; color: var(--app-fg); text-align: right; max-width: 100%; }
.app-screen .dh-stat-unit { font-size: 11px; color: var(--app-fg2); margin-top: 1px; }
.app-screen .dh-stat-bar { width: 52px; height: 3px; background: var(--app-surface-alt); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.app-screen .dh-stat-bar span { display: block; height: 100%; border-radius: 2px; background: var(--a-line); }
.app-screen .dh-stat-sub { font-size: 11px; font-weight: 600; color: var(--a-line); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 2px; }

/* Text leaves are <span>s (the postbuild translates leaf elements); the app's
   <Text> blocks stack, so these are blocks too. */
.app-screen .dh-panel-title, .app-screen .dh-chart-label,
.app-screen .dh-health-title, .app-screen .dh-health-sub { display: block; }

/* Category accents on a card */
.app-screen .a-food { --a-line: var(--acc-food); --a-soft: var(--acc-food-soft); --a-soft-60: rgba(251,241,221,0.6); --a-line-08: rgba(194,104,59,0.08); --halo: rgba(194,104,59,0.16); }
.app-screen .a-move { --a-line: var(--acc-move); --a-soft: var(--acc-move-soft); --a-soft-60: rgba(229,245,239,0.6); --a-line-08: rgba(31,138,91,0.08); --halo: rgba(31,138,91,0.16); }
.app-screen .a-water { --a-line: var(--acc-water); --a-soft: var(--acc-water-soft); --a-soft-60: rgba(228,241,246,0.6); --a-line-08: rgba(44,119,149,0.08); --halo: rgba(44,119,149,0.16); }
.app-screen .a-sleep { --a-line: var(--acc-sleep); --a-soft: var(--acc-sleep-soft); --a-soft-60: rgba(231,236,250,0.6); --a-line-08: rgba(63,90,168,0.08); --halo: rgba(63,90,168,0.16); }
.app-screen .a-cycle { --a-line: var(--acc-cycle); --a-soft: var(--acc-cycle-soft); --a-soft-60: rgba(251,233,241,0.6); --a-line-08: rgba(193,58,120,0.08); --halo: rgba(193,58,120,0.16); }
.app-screen .a-labs { --a-line: var(--acc-labs); --a-soft: var(--acc-labs-soft); --a-soft-60: rgba(243,230,234,0.6); --a-line-08: rgba(139,74,92,0.08); --halo: rgba(139,74,92,0.16); }
.app-screen .a-mona { --a-line: var(--acc-mona); --a-soft: var(--acc-mona-soft); --a-soft-60: rgba(237,234,250,0.6); --a-line-08: rgba(106,77,196,0.08); --halo: rgba(106,77,196,0.16); }

/* ---------- OrbBadge (componentTokens.OrbBadge: 64 / 46 / ring 46) ---------- */
.app-screen .orb-badge {
  width: 64px; height: 64px; flex-shrink: 0;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.app-screen .orb-badge-ring {
  position: absolute;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--orb-accent);
  opacity: 0.7;
  animation: app-orb-ring 3.6s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.app-screen .orb-badge-ring + .orb-badge-ring { animation: app-orb-ring-lead 5.4s linear infinite; }
.app-screen .orb-badge-core {
  width: 46px; height: 46px; border-radius: 50%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1.8px solid var(--a-line-60);
  border-top-color: rgba(255,255,255,0.7);
  background:
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0) 48%),
    linear-gradient(to top, var(--a-line-27), transparent 55%),
    var(--a-soft);
  box-shadow: 0 6px 14px var(--a-line-35);
  color: var(--a-line);
}
.app-screen .a-food { --orb-accent: #96681A; --a-line-60: rgba(194,104,59,0.6); --a-line-27: rgba(194,104,59,0.27); --a-line-35: rgba(194,104,59,0.35); }
.app-screen .a-move { --orb-accent: #2E7FA8; --a-line-60: rgba(31,138,91,0.6); --a-line-27: rgba(31,138,91,0.27); --a-line-35: rgba(31,138,91,0.35); }
.app-screen .a-water { --orb-accent: #2E7FA8; --a-line-60: rgba(44,119,149,0.6); --a-line-27: rgba(44,119,149,0.27); --a-line-35: rgba(44,119,149,0.35); }
.app-screen .a-sleep { --orb-accent: #3A5898; --a-line-60: rgba(63,90,168,0.6); --a-line-27: rgba(63,90,168,0.27); --a-line-35: rgba(63,90,168,0.35); }
.app-screen .a-cycle { --orb-accent: #A84E74; --a-line-60: rgba(193,58,120,0.6); --a-line-27: rgba(193,58,120,0.27); --a-line-35: rgba(193,58,120,0.35); }
.app-screen .a-labs { --orb-accent: #6B2737; --a-line-60: rgba(139,74,92,0.6); --a-line-27: rgba(139,74,92,0.27); --a-line-35: rgba(139,74,92,0.35); }
.app-screen .a-mona { --orb-accent: #5A519C; --a-line-60: rgba(106,77,196,0.6); --a-line-27: rgba(106,77,196,0.27); --a-line-35: rgba(106,77,196,0.35); }
/* Second OrbBadge ring: every loop starts with a 1.8 s hold (Animated.delay
   inside the loop, webRingStyle leadIn), then the same 3.6 s ring. */
@keyframes app-orb-ring-lead {
  0%, 33.333% { transform: scale(1); opacity: 0.7; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  86.667% { opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes app-orb-ring {
  0% { transform: scale(1); opacity: 0.7; }
  80% { opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---------- BalanceOrb (size 168) ---------- */
.app-screen .bo { padding: 0 4px; }
.app-screen .bo-orb-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.app-screen .bo-orb { width: 289px; height: 289px; position: relative; display: flex; align-items: center; justify-content: center; }
.app-screen .bo-ring {
  position: absolute; border-radius: 50%;
  animation: app-breathe 2.5s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}
.app-screen .bo-ring.r1 { width: 198px; height: 198px; border: 1.5px solid #C9A876; opacity: 0.55; }
.app-screen .bo-ring.r2 { width: 232px; height: 232px; border: 1px solid #A89CDB; opacity: 0.38; animation-delay: 0.4s; }
.app-screen .bo-ring.r3 { width: 265px; height: 265px; border: 1px solid #B83B73; opacity: 0.22; animation-delay: 0.8s; }
.app-screen .bo-core {
  width: 168px; height: 168px; border-radius: 50%;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1.5px solid rgba(201,168,118,0.33);
  border-top-color: rgba(255,255,255,0.18);
  background:
    linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0) 46%),
    linear-gradient(135deg, #5A3F58 0%, #2C1C3D 50%, #0B0D20 100%);
  box-shadow: 0 18px 34px rgba(201,168,118,0.4);
}
.app-screen .bo-score { font-family: var(--app-number); font-weight: 600; font-size: 63.84px; line-height: 1.1; letter-spacing: 0.02px; color: #C9A876; }
.app-screen .bo-sub { font-family: var(--app-mono); font-size: 13.94px; letter-spacing: 0.9px; text-transform: uppercase; color: rgba(201,168,118,0.67); margin-top: -2px; }
.app-screen .bo-caption {
  font-family: var(--app-editor); font-style: italic;
  font-size: 14px; line-height: 20px;
  color: var(--app-fg2);
  text-align: center;
  padding: 0 12px;
  margin-bottom: 20px;
}
.app-screen .bo-dims { padding-top: 4px; }
.app-screen .bo-dim { display: flex; align-items: center; margin-bottom: 11px; }
.app-screen .bo-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--a-line); opacity: 0.9; margin-right: 8px; flex-shrink: 0; }
.app-screen .bo-label { font-size: 13px; width: 108px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-screen .bo-track { flex: 1; height: 6px; background: var(--a-soft); border-radius: 3px; margin: 0 8px; }
.app-screen .bo-track span { display: block; height: 6px; border-radius: 3px; background: var(--a-line); opacity: 0.82; }
.app-screen .bo-val { font-size: 13px; font-weight: 600; color: var(--a-line); width: 28px; text-align: right; flex-shrink: 0; }
.app-screen .bo-trend { width: 18px; font-size: 13px; line-height: 18px; text-align: right; flex-shrink: 0; color: var(--app-fg3); }
.app-screen .bo-trend.up { color: var(--a-line); }
.app-screen .bo-trend.down { color: var(--app-signal); }
.app-screen .bo-dim.is-empty .bo-dot { opacity: 0.28; }
.app-screen .bo-dim.is-empty .bo-label,
.app-screen .bo-dim.is-empty .bo-val { color: var(--app-fg3); }
.app-screen .bo-hint { flex: 1; font-size: 11px; color: var(--app-fg3); margin: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes app-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }

/* ---------- Cards below the orb (BalanceWheel, RingProgressCard, WeeklyTrendsCard) ---------- */
.app-screen .dh-panel {
  margin: 8px 20px;
  background: var(--app-surface);
  border-radius: 20px;
  box-shadow: var(--app-e1);
}
.app-screen .dh-panel.wheel { padding: 20px 0; display: flex; justify-content: center; }
.app-screen .dh-panel.rings { padding: 20px 16px; display: flex; flex-direction: column; align-items: center; }
.app-screen .dh-panel.trends { padding: 16px; margin-bottom: 24px; }
.app-screen .dh-panel-title {
  font-size: 13px; font-weight: 600; color: var(--app-fg2);
  letter-spacing: 0.4px; text-transform: uppercase;
  margin-bottom: 16px;
}
.app-screen .dh-panel.trends .dh-panel-title { margin-bottom: 12px; }
.app-screen .dh-chart-label { font-size: 12px; font-weight: 600; color: var(--app-fg2); margin-bottom: 4px; }
.app-screen .dh-legend { display: flex; justify-content: center; gap: 20px; margin-top: 18px; }
.app-screen .dh-legend-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.app-screen .dh-legend-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--a-line); }
.app-screen .dh-legend-label { font-size: 11px; color: var(--app-fg2); }
.app-screen .dh-legend-val { font-size: 12px; font-weight: 600; }
.app-screen svg text { font-family: var(--app-ui); }
.app-screen .t-ui { font-family: var(--app-ui); font-weight: 600; }
.app-screen .t-num { font-family: var(--app-number); font-weight: 600; }
.app-screen .t-mono { font-family: var(--app-mono); }

/* ---------- Health card (AppleHealthCard, iOS variant; no Apple artwork) ---------- */
.app-screen .dh-health {
  border-radius: 16px;
  border: 1px solid var(--app-line);
  border-top: 3px solid var(--acc-labs);
  background: var(--app-surface);
  box-shadow: var(--app-e1);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.app-screen .dh-health-head { display: flex; align-items: center; gap: 10px; }
.app-screen .dh-health-icon {
  width: 36px; height: 36px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(139,74,92,0.1); color: var(--acc-labs);
}
.app-screen .dh-health-titles { flex: 1; min-width: 0; }
.app-screen .dh-health-title { font-size: 14px; font-weight: 600; }
.app-screen .dh-health-sub { font-size: 11px; color: var(--app-fg3); margin-top: 1px; }
.app-screen .dh-health-badge {
  display: flex; align-items: center; gap: 3px;
  border-radius: 8px; padding: 2px 6px;
  border: 1px solid rgba(30,132,73,0.27);
  background: rgba(30,132,73,0.125);
  color: var(--app-success);
  font-size: 11px; font-weight: 600;
  max-width: 132px;
}
.app-screen .dh-health-badge span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-screen .dh-health-desc { font-size: 12px; line-height: 17px; color: var(--app-fg3); }
.app-screen .dh-health-rows { display: flex; flex-direction: column; gap: 4px; }
.app-screen .dh-health-rowlabel { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--app-fg3); margin-bottom: 2px; }
.app-screen .dh-health-rowlabel.gap { margin-top: 8px; }
.app-screen .dh-health-item { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 17px; color: var(--acc-labs); }
.app-screen .dh-health-item span { color: var(--app-fg); flex: 1; }
.app-screen .dh-health-item .ic { margin-top: 2px; }
.app-screen .dh-health-btn {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  border: 1px solid rgba(139,74,92,0.33); border-radius: 10px;
  padding: 8px 12px;
  color: var(--acc-labs);
  font-size: 12px; font-weight: 600;
}

/* ---------- LumenTabBar ---------- */
.app-screen .app-tabbar {
  background: var(--app-surface);
  border-top: 1px solid var(--app-line);
  display: flex;
  padding: 8px 0 34px;
}
.app-screen .app-tab {
  flex: 1; min-width: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 4px; padding-bottom: 2px;
  min-height: 50px;
  color: var(--app-fg2);
}
.app-screen .app-tab-icon { width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.app-screen .app-tab-label { font-size: 11px; letter-spacing: 0.1px; padding: 0 2px; white-space: nowrap; line-height: 14px; }
.app-screen .app-tab.is-active { color: var(--app-signal); }
.app-screen .app-tab.is-active .app-tab-icon { background: var(--app-signal-soft); }
.app-screen .app-tab.is-active .app-tab-label { font-weight: 600; }
.app-screen .app-tab-dot { width: 4px; height: 4px; border-radius: 2px; background: var(--app-signal); }

/* MonaOrb size 10 (core 15, rings 24, container 36); the focused tab is
   size 11 (core 16.5, rings 26.4, container 39.6). The rings follow
   webAuroraRing.js: Easing.inOut(Easing.ease) sampled in 24 steps, played
   linearly; opacity [0, 0.8, 1] -> [0.7, 0, 0], scale 1 -> 1.7, 3600 ms,
   each ring 1200 ms after the previous one. */
.app-screen .mona-orb { width: 36px; height: 36px; position: relative; display: flex; align-items: center; justify-content: center; }
.app-screen .mona-orb-ring {
  position: absolute; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid; opacity: 0.7;
  animation: app-aurora 3.6s linear infinite;
}
.app-screen .mona-orb.is-active { width: 39.6px; height: 39.6px; }
.app-screen .mona-orb.is-active .mona-orb-ring { width: 26.4px; height: 26.4px; }
.app-screen .mona-orb.is-active .mona-orb-core { width: 16.5px; height: 16.5px; font-size: 10.45px; line-height: 10.45px; }
@keyframes app-aurora {
  0% { opacity: 0.7; transform: scale(1); }
  4.17% { opacity: 0.695; transform: scale(1.0042); }
  8.33% { opacity: 0.681; transform: scale(1.0156); }
  12.5% { opacity: 0.659; transform: scale(1.0327); }
  16.67% { opacity: 0.632; transform: scale(1.0547); }
  20.83% { opacity: 0.599; transform: scale(1.0807); }
  25% { opacity: 0.562; transform: scale(1.1104); }
  29.17% { opacity: 0.521; transform: scale(1.1433); }
  33.33% { opacity: 0.476; transform: scale(1.1791); }
  37.5% { opacity: 0.428; transform: scale(1.2177); }
  41.67% { opacity: 0.376; transform: scale(1.2589); }
  45.83% { opacity: 0.321; transform: scale(1.3028); }
  50% { opacity: 0.262; transform: scale(1.35); }
  54.17% { opacity: 0.204; transform: scale(1.3972); }
  58.33% { opacity: 0.149; transform: scale(1.4411); }
  62.5% { opacity: 0.097; transform: scale(1.4823); }
  66.67% { opacity: 0.049; transform: scale(1.5209); }
  70.83% { opacity: 0.004; transform: scale(1.5567); }
  75% { opacity: 0; transform: scale(1.5896); }
  79.17% { opacity: 0; transform: scale(1.6193); }
  83.33% { opacity: 0; transform: scale(1.6453); }
  87.5% { opacity: 0; transform: scale(1.6673); }
  91.67% { opacity: 0; transform: scale(1.6844); }
  95.83% { opacity: 0; transform: scale(1.6958); }
  100% { opacity: 0; transform: scale(1.7); }
}
.app-screen .mona-orb-ring.g1 { border-color: #C9A876; }
.app-screen .mona-orb-ring.g2 { border-color: #A89CDB; animation-delay: 1.2s; }
.app-screen .mona-orb-ring.g3 { border-color: #B83B73; animation-delay: 2.4s; }
.app-screen .mona-orb-core {
  width: 15px; height: 15px; border-radius: 50%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #B8924A;
  border-top-color: rgba(201,168,118,0.65);
  background:
    linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0) 46%),
    linear-gradient(135deg, #5A3F58 0%, #2C1C3D 50%, #0B0D20 100%);
  box-shadow: 0 6px 18px rgba(201,168,118,0.45);
  font-family: var(--app-display); font-size: 9.5px; line-height: 9.5px;
  color: #B8924A;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* ============================================================
   SymptomsScreen (SymptomsScreen.js makeStyles, light)
   ============================================================ */
/* Accent per category / symptom: colors[token] (theme/colors.js, light).
   Alpha steps mirror the source's hex suffixes: '10' 6%, '22' 13%,
   '33' 20%, '44' 27%, '55' 33%. */
.app-screen .ac-roseDeep { --ac: #B0426F; }
.app-screen .ac-amber { --ac: #A9762A; }
.app-screen .ac-teal { --ac: #2C7795; }
.app-screen .ac-violet { --ac: #5E50B8; }
.app-screen .ac-lavender { --ac: #5A519C; }
.app-screen .ac-indigo { --ac: #42579E; }
.app-screen .ac-rose { --ac: #A84E74; }
.app-screen .ac-aqua { --ac: #2E7FA8; }
.app-screen .ac-signal { --ac: #B83B73; }

/* scrollContent: padding 14, paddingBottom 40, gap 10 */
.app-screen .sy-scroll { padding: 14px 14px 40px; display: flex; flex-direction: column; gap: 10px; }
.app-screen .sy-intro { padding: 0 0 12px; }
.app-screen .sy-label {
  display: block;
  font-family: var(--app-mono); font-size: 11px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--app-fg2);
}
.app-screen .sy-label.log { margin-top: 6px; }
.app-screen .sy-search {
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px 12px;
  padding: 0 12px; height: 44px;
  border-radius: 12px; border: 1px solid var(--app-line);
  background: var(--app-surface);
  color: var(--app-fg3);
}
.app-screen .sy-search-ph { font-size: 15px; color: var(--app-fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Cards shared by the top row, category sections and entries */
.app-screen .sy-card {
  position: relative;
  border-radius: 20px; border: 1px solid var(--app-line);
  overflow: hidden;
  background: var(--app-surface);
  box-shadow: var(--app-e1);
}
/* TopSymptomsRow */
.app-screen .sy-top {
  padding: 12px; margin-bottom: 4px;
  background: radial-gradient(70% 70% at 10% 0%, rgba(193,58,120,0.12), transparent 100%), var(--app-surface);
}
.app-screen .sy-top-head { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; color: var(--acc-cycle); }
.app-screen .sy-top-label { font-family: var(--app-mono); font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; }
.app-screen .sy-items { display: flex; flex-wrap: wrap; }
/* CategorySection */
.app-screen .sy-cat {
  margin-bottom: 8px;
  background: radial-gradient(65% 65% at 12% 0%, color-mix(in srgb, var(--ac) 10%, transparent), transparent 100%), var(--app-surface);
}
.app-screen .sy-cat-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ac); }
.app-screen .sy-cat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 12px 18px;
}
.app-screen .sy-cat-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.app-screen .sy-cat-icon {
  width: 30px; height: 30px; border-radius: 15px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ac) 13%, transparent); color: var(--ac);
}
.app-screen .sy-cat-label { font-family: var(--app-mono); font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--app-fg); flex: 1; min-width: 0; }
.app-screen .sy-cat-right { display: flex; align-items: center; gap: 6px; color: var(--ac); flex-shrink: 0; }
.app-screen .sy-cat-count { font-family: var(--app-mono); font-size: 11px; }
.app-screen .sy-cat .sy-items { padding: 0 6px 8px 12px; }
/* gridItem: width 25%, padding 10/2; OrbBadge pulse=false border=false iconSize 22 */
.app-screen .sy-item { width: 25%; display: flex; flex-direction: column; align-items: center; padding: 10px 2px; }
.app-screen .sy-orb { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-screen .sy-orb-core {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ac);
  background:
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0) 48%),
    linear-gradient(to top, color-mix(in srgb, var(--ac) 27%, transparent), transparent 55%),
    color-mix(in srgb, var(--ac) 20%, transparent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--ac) 35%, transparent);
}
/* gridLabel: 11/13. The app clamps at two lines (numberOfLines={2}); here three,
   so a hyphenated long name is never cut off.
   A compound wider than the cell is hyphenated at a syllable boundary by the
   browser dictionary for the page language (lang is set per page); it is never
   cut at an arbitrary character, which is what React Native does. */
.app-screen .sy-item-label {
  display: block;
  font-size: 11px; line-height: 13px; color: var(--app-fg2); text-align: center;
  max-width: 100%;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}

/* EntryCard */
.app-screen .sy-entry {
  display: flex; gap: 12px; padding: 14px;
  background: radial-gradient(55% 55% at 18% 6%, color-mix(in srgb, var(--ac) 16%, transparent), transparent 100%), var(--app-surface);
}
.app-screen .sy-entry-icon {
  width: 42px; height: 42px; border-radius: 21px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ac);
  background:
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0) 48%),
    linear-gradient(to top, color-mix(in srgb, var(--ac) 20%, transparent), transparent 52%),
    color-mix(in srgb, var(--ac) 20%, transparent);
  box-shadow: 0 4px 5px color-mix(in srgb, var(--ac) 35%, transparent);
}
.app-screen .sy-entry-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.app-screen .sy-entry-top { display: flex; align-items: center; gap: 6px; }
.app-screen .sy-entry-label { font-weight: 600; font-size: 14px; color: var(--app-fg); flex: 1; min-width: 0; }
.app-screen .sy-pill {
  padding: 2px 8px; border-radius: 12px; flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--ac) 33%, transparent);
  background: color-mix(in srgb, var(--ac) 6%, transparent);
  font-family: var(--app-mono); font-size: 11px; font-weight: 600; color: var(--ac);
  white-space: nowrap;
}
.app-screen .sy-trash { padding: 2px; color: var(--app-fg3); flex-shrink: 0; }
.app-screen .sy-time { display: block; font-size: 11px; color: var(--app-fg3); }
.app-screen .sy-intensity { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.app-screen .sy-dots { display: flex; gap: 3px; }
.app-screen .sy-dots i { display: block; width: 7px; height: 7px; border-radius: 4px; background: var(--app-line); }
.app-screen .sy-dots i.on { background: var(--ac); }
.app-screen .sy-intensity-text { font-family: var(--app-mono); font-size: 11px; font-weight: 700; color: var(--ac); }
.app-screen .sy-duration { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; color: var(--ac); }
.app-screen .sy-triggers { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.app-screen .sy-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ac) 33%, transparent);
  background: color-mix(in srgb, var(--ac) 6%, transparent);
  font-size: 11px; color: var(--ac);
}
.app-screen .sy-comment { display: flex; align-items: flex-start; gap: 8px; margin-top: 7px; padding-top: 8px; border-top: 1px solid var(--app-line); }
.app-screen .sy-mona {
  width: 22px; height: 22px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,168,118,0.13); border: 1.5px solid rgba(201,168,118,0.6);
  font-weight: 600; font-size: 11px; color: #C9A876;
}
.app-screen .sy-comment-text { flex: 1; font-size: 12px; line-height: 17px; color: var(--app-fg2); font-style: italic; }

/* ============================================================
   BiohackingScreen (BiohackingScreen.js makeStyles / makeTcStyles, light)
   ============================================================ */
/* Light Therapy's lumenCategory is 'gold' (ACCENTS.gold). */
.app-screen .a-gold { --a-line: #B68F4D; --a-soft: #FBF1DD; --halo: rgba(182,143,77,0.16); }

/* ScreenIntro sits outside the FlatList, so it stays put while the tips
   scroll. Its height depends on the language, so the scroll row takes what
   is left and the touch pan measures it as a size container (100cqh). */
.app-screen.has-intro {
  grid-template-rows: var(--status-h) var(--header-h) auto minmax(0, 1fr) var(--tabbar-h);
}
.app-screen .bh-intro { padding-top: 12px; }
@media (hover: none), (pointer: coarse) {
  .app-screen.has-intro .app-scroll-inner, .app-screen.mo-screen .app-scroll-inner { animation: none; }
  @supports (container-type: size) {
    .app-screen.has-intro .app-scroll, .app-screen.mo-screen .app-scroll { container-type: size; }
    .app-screen.has-intro .app-scroll-inner, .app-screen.mo-screen .app-scroll-inner { animation: app-pan-cq 36s ease-in-out infinite alternate; }
  }
}
@keyframes app-pan-cq {
  0%, 8% { transform: translateY(0); }
  92%, 100% { transform: translateY(calc(-100% + 100cqh)); }
}

/* scroll: paddingTop 20, paddingBottom 48 */
.app-screen .bh-scroll { padding: 20px 0 48px; }

/* Today's tip: dailySection / dailyLabel / dailyCard */
.app-screen .bh-daily { padding: 0 16px; margin-bottom: 20px; }
.app-screen .bh-daily-label { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; color: #B8924A; } /* star: colors.primary */
.app-screen .bh-daily-label-text {
  font-size: 11px; font-weight: 700; color: #B68F4D; /* C.roseGold */
  text-transform: uppercase; letter-spacing: 0.8px;
}
.app-screen .bh-daily-card,
.app-screen .bh-tip {
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(55% 55% at 18% 6%, var(--halo), transparent 100%),
    var(--app-surface);
  box-shadow: var(--app-e1);
}
.app-screen .bh-daily-card { padding: 20px; }
.app-screen .bh-daily-cat {
  display: block;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  margin: 14px 0 6px;
  color: var(--a-line);
}
.app-screen .bh-daily-title { display: block; font-size: 18px; font-weight: 700; line-height: 24px; color: var(--app-fg); margin-bottom: 10px; }
.app-screen .bh-daily-body {
  font-size: 13px; line-height: 20px; color: var(--app-fg3); margin-bottom: 14px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.app-screen .bh-daily-footer { display: flex; align-items: center; gap: 8px; }
.app-screen .bh-daily-arrow {
  width: 28px; height: 28px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--a-soft); color: var(--a-line);
}
.app-screen .bh-daily-more { font-size: 12px; font-weight: 600; color: var(--a-line); }

/* Filter chips: filterRow / filterBtn3D, light variant. Inactive: white to
   soft+'99' with the gloss; active: the accent fill with a fainter gloss.
   The shadow is getShadow(false).e1 in the chip's accent. */
.app-screen .bh-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; margin-bottom: 16px; }
.app-screen .bh-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--app-line-strong);
  background:
    linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0) 55%),
    linear-gradient(var(--app-surface), color-mix(in srgb, var(--a-soft) 60%, transparent));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--a-line) 8%, transparent);
  color: var(--a-line);
  font-size: 12px; font-weight: 500; line-height: 16px;
  white-space: nowrap;
}
.app-screen .bh-chip .ic { margin-right: 2px; }
.app-screen .bh-chip.is-all { --a-line: #B83B73; --a-soft: #FBE9F1; } /* C.signal / C.signalSoft */
.app-screen .bh-chip.is-active {
  border-color: transparent;
  background:
    linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0) 55%),
    var(--a-line);
  color: #FFFFFF; /* C.ctaText */
  font-weight: 700;
}

/* TipCard (makeTcStyles) */
.app-screen .bh-tip { margin: 0 16px 12px; padding: 14px; }
.app-screen .bh-tip-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.app-screen .bh-tip-icon {
  width: 38px; height: 38px; border-radius: 19px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--a-line) 33%, transparent);
  background:
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0) 48%),
    linear-gradient(to top, color-mix(in srgb, var(--a-line) 20%, transparent), transparent 52%),
    color-mix(in srgb, var(--a-line) 20%, transparent);
  color: var(--a-line);
}
.app-screen .bh-tip-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; line-height: 20px; color: var(--app-fg); }
.app-screen .bh-tip-body {
  font-size: 12px; line-height: 18px; color: var(--app-fg3); margin-bottom: 10px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.app-screen .bh-tip-footer { display: flex; justify-content: flex-end; }
.app-screen .bh-tip-arrow {
  width: 24px; height: 24px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--a-soft); color: var(--a-line);
}
/* A word wider than its line breaks only at a syllable boundary, with a
   hyphen, in the page language (same rule as the Symptoms chip labels). */
.app-screen .bh-intro, .app-screen .bh-daily-title, .app-screen .bh-daily-body,
.app-screen .bh-tip-title, .app-screen .bh-tip-body {
  overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}

/* ============================================================
   Mona: HomeScreen.js makeStyles (light), TodaySummaryCard.js,
   ChatBubble (LumenKit-modules.js), MonaOrb.js
   ============================================================ */
/* The shortcut row and the input bar sit outside the FlatList, so only the
   conversation scrolls; the touch pan measures it as a size container. */
.app-screen.mo-screen {
  grid-template-rows: var(--status-h) var(--header-h) auto minmax(0, 1fr) auto var(--tabbar-h);
}

/* ScreenHeader variant="root": menu, wordmark, spacer, new chat + avatar */
.app-screen .mo-hbtn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--app-fg); flex-shrink: 0; }
.app-screen .mo-left { margin-right: 4px; }
.app-screen .mo-wordmark {
  font-family: var(--app-display); font-size: 24px; letter-spacing: 1.8px; /* tracking.logo */
  color: var(--app-signal); margin-left: 4px; white-space: nowrap;
}
.app-screen .mo-spacer { flex: 1; }
.app-screen .mo-right { display: flex; align-items: center; gap: 4px; }
.app-screen .mo-avatar {
  width: 34px; height: 34px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  background: var(--app-signal-soft);
  font-size: 15px; font-weight: 600; color: var(--app-signal);
}

/* Shortcut row: shortcutTileWidth(390) = 62, shortcutIconSize(62) = 42 */
.app-screen .mo-shortcuts {
  display: flex; align-items: flex-start; gap: 4px;
  padding: 8px 10px 6px;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-line);
}
.app-screen .mo-sc { width: 62px; min-height: 82px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.app-screen .mo-sc-ring {
  width: 42px; height: 42px; border-radius: 21px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--a-line); background: var(--a-soft); color: var(--a-line);
}
/* Soft hyphens from shortcutTileText() are the only break points. */
.app-screen .mo-sc-label {
  font-size: 9px; line-height: 12px; color: var(--app-fg2); text-align: center; max-width: 62px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  overflow-wrap: normal; word-break: normal; -webkit-hyphens: manual; hyphens: manual;
}
.app-screen .mo-sc-add { width: 36px; min-height: 82px; flex-shrink: 0; display: flex; justify-content: center; }
.app-screen .mo-sc-add .mo-sc-ring { border: 2px dashed var(--app-line-strong); background: transparent; color: var(--app-fg2); }

/* messageList: padding 16, paddingBottom 8 */
.app-screen .mo-scroll { padding: 16px 16px 8px; }

/* TodaySummaryCard (ListHeaderComponent: above the first message) */
.app-screen .mo-today {
  margin: 8px 20px 16px;
  border-radius: 20px; /* radius.card */
  padding: 4px;
  overflow: hidden;
  border: 1px solid var(--app-line);
  background: var(--app-surface);
  box-shadow: var(--app-e1);
}
.app-screen .mo-today-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px; }
.app-screen .mo-today-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--app-fg2); }
.app-screen .mo-today-ask { display: flex; align-items: center; gap: 5px; min-height: 44px; color: var(--app-signal); min-width: 0; }
.app-screen .mo-today-ask-text { font-size: 13px; font-weight: 600; }
.app-screen .mo-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--app-line); }
.app-screen .mo-row.is-last { border-bottom: 0; }
.app-screen .mo-row-body { flex: 1; min-width: 0; }
.app-screen .mo-row-label { display: block; font-size: 12px; line-height: 16px; margin-bottom: 2px; color: var(--app-fg2); }
.app-screen .mo-row-primary { display: block; font-size: 15px; font-weight: 600; color: var(--app-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-screen .mo-row.is-empty .mo-row-primary { color: var(--app-fg3); }
.app-screen .mo-row-secondary { display: block; font-size: 12px; line-height: 16px; margin-top: 1px; color: var(--app-fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-screen .mo-row-chev { color: var(--app-fg3); }

/* ChatBubble. Mona: MonaOrb size 36, compact, pulse={false} (core 54, no
   rings); the bubble is flex 1, at most 84% of the row. */
.app-screen .mo-msg { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.app-screen .mo-msg.is-me { flex-direction: row-reverse; }
.app-screen .mo-avatar-orb { margin-top: 2px; flex-shrink: 0; }
.app-screen .mo-avatar-orb-core {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #B8924A;
  border-top-color: rgba(201,168,118,0.65);
  background:
    linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0) 46%),
    linear-gradient(135deg, #5A3F58 0%, #2C1C3D 50%, #0B0D20 100%);
  box-shadow: 0 6px 18px rgba(201,168,118,0.45);
  font-family: var(--app-display); font-size: 34.2px; line-height: 34.2px;
  color: #B8924A;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.app-screen .mo-bubble {
  flex: 1; min-width: 0; max-width: 84%;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: 6px 18px 18px 18px;
  padding: 14px 16px;
  overflow: hidden;
  box-shadow: var(--app-e1);
}
.app-screen .mo-bubble-text { display: block; font-size: 15px; line-height: 22px; color: var(--app-fg2); }
.app-screen .mo-bubble.me {
  flex: 0 1 auto;
  background: var(--app-signal); border: 0;
  border-radius: 18px 6px 18px 18px;
  padding: 12px 16px;
}
.app-screen .mo-bubble.me .mo-bubble-text { font-weight: 500; color: #FFFFFF; }

/* Input bar, light: empty attach slot (no voice by default), pill + send.
   paddingBottom = Math.max(10, insets.bottom) = 34 on a 390 x 844 phone. */
.app-screen .mo-input {
  display: flex; align-items: center;
  padding: 8px 8px 34px;
  background: var(--app-bg);
  border-top: 1px solid var(--app-line);
}
.app-screen .mo-attach { width: 8px; height: 8px; margin-right: 6px; flex-shrink: 0; }
.app-screen .mo-pill {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  background: var(--app-surface);
  border: 1.5px solid var(--app-line);
  border-radius: 24px;
  padding: 4px 6px 4px 14px;
  box-shadow: var(--app-e1);
}
.app-screen .mo-placeholder { flex: 1; min-width: 0; font-size: 16px; color: var(--app-fg3); padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-screen .mo-send {
  width: 44px; height: 44px; border-radius: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--app-signal-soft); color: var(--app-signal);
}
.app-screen .mo-bubble-text, .app-screen .mo-today-ask-text {
  overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}

/* ============================================================
   Scan: ScanScreen.js makeStyles (light), MonaLens.js, OrbBadge.js
   ============================================================ */
/* scroll: paddingTop 16, paddingBottom 40. The ScreenIntro is the first
   child of the ScrollView, so it scrolls with the content. */
.app-screen .sn-scroll { padding: 16px 0 40px; }
.app-screen .sn-intro { display: block; }

/* Hero card, light: heroContainer (paddingHorizontal 16, marginVertical 12),
   heroCard (radius 24, border 1 C.line, padding 20, shadow e1). The
   LinearGradient runs C.surf1 -> C.surf2, both #FFFFFF since Sprint 11B, so
   the card is white under the Mona halo (cx 50%, cy 0%, r 70%, 0.13). */
.app-screen .sn-hero { padding: 0 16px; margin: 12px 0; }
.app-screen .sn-hero-card {
  border-radius: 24px;
  border: 1px solid var(--app-line);
  padding: 20px;
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
  background:
    radial-gradient(70% 70% at 50% 0%, rgba(106,77,196,0.13), rgba(106,77,196,0) 100%),
    var(--app-surface);
  box-shadow: var(--app-e1);
}
/* heroTag, light: no sparkles badge (that is the dark variant), centred,
   marginBottom 16 */
.app-screen .sn-tag {
  display: block;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--acc-mona);
  text-align: center;
  margin-bottom: 16px;
}
.app-screen .sn-lens-wrap { margin-bottom: 14px; }
.app-screen .sn-cta { display: block; font-size: 16px; font-weight: 700; color: var(--app-fg); text-align: center; margin-bottom: 4px; }
.app-screen .sn-sub { display: block; font-size: 13px; font-style: italic; color: var(--app-fg2); text-align: center; margin-bottom: 4px; }
/* heroBtnSecondary + marginTop 14, under the lens; images-outline 20, C.fg */
.app-screen .sn-gallery {
  width: 100%;
  margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 0;
  border-radius: 12px;
  border: 1.5px solid var(--app-line);
  color: var(--app-fg);
}
.app-screen .sn-gallery-text { font-size: 14px; font-weight: 700; }

/* MonaLens size={160}: rings 160 / 144 / 128 (size - i * size * 0.1, border
   1.2), gold aperture lensD + 8 = 107.2, lens size * 0.62 = 99.2. */
.app-screen .lens { width: 160px; height: 160px; display: grid; place-items: center; }
.app-screen .lens > * { grid-area: 1 / 1; }
.app-screen .lens-ring { border-radius: 50%; border: 1.2px solid; }
.app-screen .lens-ring.r0 { width: 160px; height: 160px; border-color: #C9A876; opacity: 0.22; animation: app-lens-ring-0 3.2s linear infinite; }
.app-screen .lens-ring.r1 { width: 144px; height: 144px; border-color: #C13A78; opacity: 0.28; animation: app-lens-ring-1 3.48s linear infinite; }
.app-screen .lens-ring.r2 { width: 128px; height: 128px; border-color: #8EA4D9; opacity: 0.34; animation: app-lens-ring-2 3.76s linear infinite; }
.app-screen .lens-aperture { width: 107.2px; height: 107.2px; border-radius: 50%; border: 1.5px solid rgba(201,168,118,0.7); }
.app-screen .lens-glass {
  width: 99.2px; height: 99.2px; border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid rgba(255,255,255,0.18);
  background:
    linear-gradient(rgba(255,255,255,0.14), rgba(255,255,255,0) 46%),
    linear-gradient(149deg, #3C2942 0%, #211532 50%, #0B0D20 100%); /* start (0.2, 0) -> end (0.8, 1) */
  box-shadow: 0 8px 20px rgba(201,168,118,0.4);
  color: var(--acc-mona);
}
.app-screen .lens-sweep { position: absolute; inset: 0; animation: app-lens-sweep 3.2s linear infinite; }
.app-screen .lens-sweep svg { display: block; }
.app-screen .lens-glass .ic { position: relative; }
/* Each ring loops Animated.delay(i * 280) -> 1600 ms up -> 1600 ms down,
   opacity 0.22 + 0.06i -> 0.55 + 0.08i, scale 1 -> 0.94 + 0.02i. The sweep
   turns 0 -> 360deg in 3200 ms. Both use Animated.timing's default easing,
   inOut(ease), sampled here and played linearly (as webAuroraRing.js does). */
@keyframes app-lens-ring-0 {
  0% { opacity: 0.22; transform: scale(1); }
  4.17% { opacity: 0.227; transform: scale(0.9987); }
  8.33% { opacity: 0.246; transform: scale(0.9953); }
  12.5% { opacity: 0.272; transform: scale(0.9905); }
  16.67% { opacity: 0.304; transform: scale(0.9847); }
  20.83% { opacity: 0.342; transform: scale(0.9778); }
  25% { opacity: 0.385; transform: scale(0.97); }
  29.17% { opacity: 0.428; transform: scale(0.9622); }
  33.33% { opacity: 0.466; transform: scale(0.9553); }
  37.5% { opacity: 0.498; transform: scale(0.9495); }
  41.67% { opacity: 0.524; transform: scale(0.9447); }
  45.83% { opacity: 0.543; transform: scale(0.9413); }
  50% { opacity: 0.55; transform: scale(0.94); }
  54.17% { opacity: 0.543; transform: scale(0.9413); }
  58.33% { opacity: 0.524; transform: scale(0.9447); }
  62.5% { opacity: 0.498; transform: scale(0.9495); }
  66.67% { opacity: 0.466; transform: scale(0.9553); }
  70.83% { opacity: 0.428; transform: scale(0.9622); }
  75% { opacity: 0.385; transform: scale(0.97); }
  79.17% { opacity: 0.342; transform: scale(0.9778); }
  83.33% { opacity: 0.304; transform: scale(0.9847); }
  87.5% { opacity: 0.272; transform: scale(0.9905); }
  91.67% { opacity: 0.246; transform: scale(0.9953); }
  95.83% { opacity: 0.227; transform: scale(0.9987); }
  100% { opacity: 0.22; transform: scale(1); }
}
@keyframes app-lens-ring-1 {
  0% { opacity: 0.28; transform: scale(1); }
  8.05% { opacity: 0.28; transform: scale(1); }
  11.88% { opacity: 0.288; transform: scale(0.9991); }
  15.71% { opacity: 0.307; transform: scale(0.9969); }
  19.54% { opacity: 0.335; transform: scale(0.9937); }
  23.37% { opacity: 0.37; transform: scale(0.9898); }
  27.2% { opacity: 0.409; transform: scale(0.9852); }
  31.03% { opacity: 0.455; transform: scale(0.98); }
  34.87% { opacity: 0.501; transform: scale(0.9748); }
  38.7% { opacity: 0.54; transform: scale(0.9702); }
  42.53% { opacity: 0.575; transform: scale(0.9663); }
  46.36% { opacity: 0.603; transform: scale(0.9631); }
  50.19% { opacity: 0.622; transform: scale(0.9609); }
  54.02% { opacity: 0.63; transform: scale(0.96); }
  57.85% { opacity: 0.622; transform: scale(0.9609); }
  61.69% { opacity: 0.603; transform: scale(0.9631); }
  65.52% { opacity: 0.575; transform: scale(0.9663); }
  69.35% { opacity: 0.54; transform: scale(0.9702); }
  73.18% { opacity: 0.501; transform: scale(0.9748); }
  77.01% { opacity: 0.455; transform: scale(0.98); }
  80.84% { opacity: 0.409; transform: scale(0.9852); }
  84.67% { opacity: 0.37; transform: scale(0.9898); }
  88.51% { opacity: 0.335; transform: scale(0.9937); }
  92.34% { opacity: 0.307; transform: scale(0.9969); }
  96.17% { opacity: 0.288; transform: scale(0.9991); }
  100% { opacity: 0.28; transform: scale(1); }
}
@keyframes app-lens-ring-2 {
  0% { opacity: 0.34; transform: scale(1); }
  14.89% { opacity: 0.34; transform: scale(1); }
  18.44% { opacity: 0.348; transform: scale(0.9996); }
  21.99% { opacity: 0.369; transform: scale(0.9984); }
  25.53% { opacity: 0.398; transform: scale(0.9968); }
  29.08% { opacity: 0.435; transform: scale(0.9949); }
  32.62% { opacity: 0.477; transform: scale(0.9926); }
  36.17% { opacity: 0.525; transform: scale(0.99); }
  39.72% { opacity: 0.573; transform: scale(0.9874); }
  43.26% { opacity: 0.615; transform: scale(0.9851); }
  46.81% { opacity: 0.652; transform: scale(0.9832); }
  50.35% { opacity: 0.681; transform: scale(0.9816); }
  53.9% { opacity: 0.702; transform: scale(0.9804); }
  57.45% { opacity: 0.71; transform: scale(0.98); }
  60.99% { opacity: 0.702; transform: scale(0.9804); }
  64.54% { opacity: 0.681; transform: scale(0.9816); }
  68.09% { opacity: 0.652; transform: scale(0.9832); }
  71.63% { opacity: 0.615; transform: scale(0.9851); }
  75.18% { opacity: 0.573; transform: scale(0.9874); }
  78.72% { opacity: 0.525; transform: scale(0.99); }
  82.27% { opacity: 0.477; transform: scale(0.9926); }
  85.82% { opacity: 0.435; transform: scale(0.9949); }
  89.36% { opacity: 0.398; transform: scale(0.9968); }
  92.91% { opacity: 0.369; transform: scale(0.9984); }
  96.45% { opacity: 0.348; transform: scale(0.9996); }
  100% { opacity: 0.34; transform: scale(1); }
}
@keyframes app-lens-sweep {
  0% { transform: rotate(0deg); }
  4.17% { transform: rotate(2.16deg); }
  8.33% { transform: rotate(8.01deg); }
  12.5% { transform: rotate(16.82deg); }
  16.67% { transform: rotate(28.11deg); }
  20.83% { transform: rotate(41.51deg); }
  25% { transform: rotate(56.76deg); }
  29.17% { transform: rotate(73.67deg); }
  33.33% { transform: rotate(92.1deg); }
  37.5% { transform: rotate(111.94deg); }
  41.67% { transform: rotate(133.14deg); }
  45.83% { transform: rotate(155.73deg); }
  50% { transform: rotate(180deg); }
  54.17% { transform: rotate(204.27deg); }
  58.33% { transform: rotate(226.86deg); }
  62.5% { transform: rotate(248.06deg); }
  66.67% { transform: rotate(267.9deg); }
  70.83% { transform: rotate(286.33deg); }
  75% { transform: rotate(303.24deg); }
  79.17% { transform: rotate(318.49deg); }
  83.33% { transform: rotate(331.89deg); }
  87.5% { transform: rotate(343.18deg); }
  91.67% { transform: rotate(351.99deg); }
  95.83% { transform: rotate(357.84deg); }
  100% { transform: rotate(360deg); }
}
/* Divider: paddingHorizontal 20, marginVertical 14; text 11/700, fg3, +1 */
.app-screen .sn-divider { display: flex; align-items: center; padding: 0 20px; margin: 14px 0; }
.app-screen .sn-divider-line { flex: 1; height: 1px; background: var(--app-line); min-width: 12px; }
.app-screen .sn-divider-text {
  flex: 0 1 auto;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--app-fg3);
  padding: 0 12px;
  text-align: center;
}

/* Grid: paddingHorizontal 16, gap 12. card: width 47% + flexGrow 1 (two per
   row, 173 each), radius 20, border 1, padding 14, minHeight 170. */
.app-screen .sn-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0 16px; }
.app-screen .sn-card {
  flex: 1 1 47%;
  max-width: 240px; min-width: 130px;
  min-height: 170px;
  border-radius: 20px;
  border: 1px solid var(--app-line);
  padding: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--sn-halo, none), var(--app-surface);
  box-shadow: var(--app-e1);
}
.app-screen .sn-card-top { display: flex; align-items: flex-start; margin-bottom: 8px; }
.app-screen .sn-card-label { display: block; font-size: 14px; font-weight: 700; line-height: 18px; margin-bottom: 4px; }
.app-screen .sn-card-desc { display: block; font-size: 12px; line-height: 17px; color: var(--app-fg3); flex: 1; }
/* A word wider than its line breaks only at a syllable boundary, with a
   hyphen, in the page language (same rule as the Symptoms chip labels). */
.app-screen .sn-card-label, .app-screen .sn-card-desc, .app-screen .sn-divider-text {
  overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto;
}
.app-screen .sn-card-footer { display: flex; justify-content: flex-end; margin-top: 12px; }
.app-screen .sn-arrow {
  width: 24px; height: 24px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sn-arrow-bg); color: var(--sn-accent);
}
/* Per item (makeScanItems + getScanAccents, light): OrbBadge accent (rings),
   tint (core), stroke (border '99', icon, carve '44', shadow 0.35); the arrow
   badge is accent + '1A'; the halo is getAccent(lumenCat).line at 0.13. The
   barcode card has no lumenCat, so no halo. */
.app-screen .sn-food { --sn-accent: #C2683B; --sn-arrow-bg: rgba(194,104,59,0.1); --sn-halo: radial-gradient(65% 65% at 15% 10%, rgba(194,104,59,0.13), rgba(194,104,59,0) 100%);
  --orb-accent: #C2683B; --a-soft: #FBF1DD; --a-line: #C2683B; --a-line-60: rgba(194,104,59,0.6); --a-line-27: rgba(194,104,59,0.27); --a-line-35: rgba(194,104,59,0.35); }
.app-screen .sn-barcode { --sn-accent: #6B5A50; --sn-arrow-bg: rgba(107,90,80,0.1);
  --orb-accent: #6B5A50; --a-soft: #F1ECE6; --a-line: #6B5A50; --a-line-60: rgba(107,90,80,0.6); --a-line-27: rgba(107,90,80,0.27); --a-line-35: rgba(107,90,80,0.35); }
.app-screen .sn-fridge { --sn-accent: #2E7FA8; --sn-arrow-bg: rgba(46,127,168,0.1); --sn-halo: radial-gradient(65% 65% at 15% 10%, rgba(44,119,149,0.13), rgba(44,119,149,0) 100%);
  --orb-accent: #2E7FA8; --a-soft: #E4F1F6; --a-line: #2C7795; --a-line-60: rgba(44,119,149,0.6); --a-line-27: rgba(44,119,149,0.27); --a-line-35: rgba(44,119,149,0.35); }
.app-screen .sn-labs { --sn-accent: #8B4A5C; --sn-arrow-bg: rgba(139,74,92,0.1); --sn-halo: radial-gradient(65% 65% at 15% 10%, rgba(139,74,92,0.13), rgba(139,74,92,0) 100%);
  --orb-accent: #8B4A5C; --a-soft: #F3E6EA; --a-line: #8B4A5C; --a-line-60: rgba(139,74,92,0.6); --a-line-27: rgba(139,74,92,0.27); --a-line-35: rgba(139,74,92,0.35); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .app-screen .app-scroll-inner,
  .app-screen .orb-badge-ring,
  .app-screen .mona-orb-ring,
  .app-screen .bo-ring,
  .app-screen .lens-ring,
  .app-screen .lens-sweep { animation: none !important; transform: none !important; }
  .app-screen .orb-badge-ring,
  .app-screen .mona-orb-ring { opacity: 0; }
}