:root {
  --ink: #17191c;
  --muted: #4f5a54;
  --line: #dde3e0;
  --canvas: #f5f7f8;
  --white: #ffffff;
  --green: #2e7d5b;
  --green-soft: #cde8c2;
  --green-pale: #eaf5e6;
  --blue-pale: #dcecff;
  --coral: #d96a5d;
  --coral-bright: #f56f5b;
  --lime: #cbff50;
  --warm: #fffaf4;
  --shadow: 0 18px 48px rgba(30, 47, 39, 0.08);
  --sans: Inter, "SF Pro Display", "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  min-width: 320px;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--sans);
  scroll-behavior: smooth;
}

body { margin: 0; min-height: 100vh; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid #82b99c; outline-offset: 3px; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.app { min-height: 100vh; display: grid; grid-template-columns: 230px minmax(0, 1fr); }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 34px 22px 26px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand > span:last-child { display: grid; gap: 1px; }
.brand strong { font-size: 21px; letter-spacing: 2.4px; }
.brand small { color: var(--muted); font-size: 10px; }

.brand-mark, .bala-orb, .mini-orb { position: relative; display: inline-grid; place-items: center; border-radius: 50%; background: var(--ink); overflow: hidden; }
.brand-mark { width: 39px; height: 39px; }
.brand-mark i, .bala-orb i, .mini-orb i { position: absolute; border-radius: 50%; background: var(--green-soft); }
.brand-mark i:nth-child(1) { width: 24px; height: 24px; left: -4px; top: 10px; }
.brand-mark i:nth-child(2) { width: 19px; height: 19px; right: -2px; top: 4px; background: var(--blue-pale); }
.brand-mark i:nth-child(3) { width: 14px; height: 14px; right: 8px; bottom: -3px; background: #f3c8bb; }

nav { margin-top: 58px; display: grid; gap: 8px; }
.nav-item, .privacy-button {
  border: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #47514c;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
}
.nav-item { min-height: 48px; padding: 0 14px; }
.nav-item svg, .privacy-button svg { width: 20px; }
.nav-item.active { color: var(--green); background: var(--green-pale); }
.nav-item:hover { background: #f0f4f2; }
.privacy-button { margin-top: auto; padding: 12px 8px; font-size: 12px; }

main { width: 100%; max-width: 1500px; margin: 0 auto; padding: 42px clamp(24px, 4vw, 64px) 34px; overflow: hidden; }
.page-header {
  position: relative;
  min-height: 330px;
  padding: clamp(28px, 4vw, 58px);
  border: 1px solid #e3e5dd;
  border-radius: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 20%, rgba(203,255,80,.24), transparent 23%),
    radial-gradient(circle at 78% 92%, rgba(245,111,91,.15), transparent 28%),
    linear-gradient(135deg, #fffdfa 0%, #f8fbf4 100%);
}
.page-header::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -105px;
  width: 360px;
  height: 250px;
  border: 1px solid rgba(46,125,91,.12);
  border-radius: 50%;
  transform: rotate(-12deg);
}
.hero-copy { position: relative; z-index: 1; max-width: 850px; }
.hero-intro { margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.page-header .eyebrow { margin: 0 0 14px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.hero-intro .eyebrow { margin: 0; }
.profile-button { padding: 6px 9px; border: 1px solid #cfe0d7; border-radius: 999px; color: var(--green); background: rgba(255,255,255,.82); cursor: pointer; font-size: 9px; font-weight: 750; }
.page-header h1 { max-width: 820px; margin: 0; font-size: clamp(42px, 5vw, 76px); line-height: .98; letter-spacing: -3.8px; text-wrap: balance; }
.page-header .hero-copy > span { display: block; max-width: 720px; margin-top: 22px; color: #435049; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55; }
.hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions button {
  min-height: 48px;
  padding: 0 17px;
  border: 1px solid #d7ddd5;
  border-radius: 12px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 7px 20px rgba(28,38,32,.05);
  cursor: pointer;
  font-size: 12px;
  font-weight: 780;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.hero-actions button:hover { transform: translateY(-2px); box-shadow: 0 11px 25px rgba(28,38,32,.1); }
.hero-actions .hero-primary { color: var(--white); border-color: var(--ink); background: var(--ink); }
.hero-actions .hero-coral { color: var(--white); border-color: var(--coral-bright); background: var(--coral-bright); }
.hero-privacy { margin: 17px 0 0 !important; display: flex; align-items: center; gap: 8px; color: var(--muted) !important; font-size: 11px !important; font-weight: 560 !important; }
.hero-privacy span { color: var(--green); font-size: 9px; }

.sync-button {
  position: relative;
  z-index: 1;
  min-height: 56px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--white);
  cursor: pointer;
  text-align: left;
}
.sync-button > span:nth-child(2) { display: grid; gap: 3px; }
.sync-button strong { font-size: 12px; }
.sync-button small { color: var(--muted); font-size: 10px; }
.sync-button svg { width: 18px; }
.device-dots { position: relative; width: 30px; height: 31px; }
.device-dots i { position: absolute; width: 21px; height: 21px; border: 2px solid var(--green); border-radius: 7px; background: var(--white); }
.device-dots i:last-child { right: 0; bottom: 0; width: 17px; height: 17px; border-color: #8aaed2; border-radius: 50%; }

.score-panel {
  margin-top: -30px;
  margin-inline: clamp(15px, 3vw, 42px);
  min-height: 245px;
  padding: 31px 38px;
  border: 1px solid var(--line);
  border-radius: 28px;
  display: grid;
  grid-template-columns: 175px minmax(300px, 1fr) auto;
  align-items: center;
  gap: 38px;
  background: var(--white);
  box-shadow: 0 24px 60px rgba(30,47,39,.12);
  overflow: visible;
}
.score-ring { position: relative; width: 165px; height: 165px; filter: drop-shadow(0 10px 18px rgba(46,125,91,.12)); }
.score-ring svg { width: 100%; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 10; }
.ring-track { stroke: #e8efeb; }
.ring-value { stroke: var(--green); stroke-dasharray: 390; stroke-dashoffset: 70; transition: stroke 220ms ease, stroke-dashoffset 420ms ease; }
.score-ring[data-level="steady"] .ring-value { stroke: #d59745; }
.score-ring[data-level="recover"] .ring-value { stroke: var(--coral); }
.score-ring[data-level="check"] .ring-value { stroke: #8a6650; }
.score-ring > .score-ring-core { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.score-ring > #bala-score-delta { position: absolute; right: 0; bottom: -24px; left: 0; min-height: 14px; text-align: center; white-space: nowrap; }
.score-ring small { color: var(--muted); font-size: 10px; }
.score-ring strong { font-size: 48px; line-height: .95; letter-spacing: -2px; }
.score-ring em { margin-top: 5px; color: var(--green); font-size: 10px; font-style: normal; font-weight: 750; letter-spacing: -.1px; white-space: nowrap; }
.score-ring em b { margin-right: 3px; font-size: 11px; }
.score-ring em[data-level="steady"] { color: #b45b47; }
.score-ring em[data-level="recover"] { color: #a44a40; }
.score-ring em[data-level="check"] { color: #765a2d; }
.section-label { margin: 0 0 8px; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.score-insight h2, .panel-heading h2, .suggestion-panel h2 { margin: 0; letter-spacing: -.6px; }
.score-data-source { display: inline-flex; margin: 0 0 6px; padding: 5px 8px; border-radius: 999px; color: #526159; background: var(--green-pale); font-size: 9px; font-weight: 750; }
/* B63 Import Trust */
.b63-import-trust { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.b63-signal-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 4px; }
.b63-chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: .02em; }
.b63-chip-ok  { background: var(--green-pale, #e8f5e9); color: #357a50; }
.b63-chip-gap { background: #f3f4f6; color: #8a8fa8; }
.b63-chip-gap::before { content: '–'; margin-right: 2px; opacity: .55; }
.b63-trust-meta { margin: 0 0 8px; font-size: 10px; color: var(--muted, #6b7280); line-height: 1.4; }
.score-insight h2 { font-size: clamp(27px, 2.8vw, 42px); }
.score-insight > p:not(.section-label) { max-width: 620px; margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.score-checks { margin: 17px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; }
.score-checks li { color: #506159; font-size: 10px; font-weight: 700; }
.score-checks li::before { content: "✓"; margin-right: 6px; color: var(--green); }
.primary-action {
  min-height: 52px;
  padding: 0 19px;
  border: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--white);
  background: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.primary-action svg { width: 18px; }

.trust-strip {
  margin: 18px 0;
  padding: 16px 20px;
  border: 1px solid #dce5d7;
  border-radius: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  color: #526159;
  background: rgba(255,255,255,.78);
}
.trust-strip span { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 720; line-height: 1.35; }
.trust-strip i { width: 19px; height: 19px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: var(--green); background: var(--green-pale); font-size: 10px; font-style: normal; }

.capture-panel {
  margin-top: 0;
  padding: 22px 25px;
  border: 1px solid #cfe0d7;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(110deg, #f2f8f4 0%, #ffffff 68%);
}
.capture-panel h2 { margin: 8px 0 5px; font-size: 20px; letter-spacing: -.4px; }
.capture-panel p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.capture-panel code { padding: 2px 5px; border-radius: 5px; color: var(--green); background: #e4f1e9; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.local-status { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; }
.local-status i { width: 7px; height: 7px; border-radius: 50%; background: #79c35a; box-shadow: 0 0 0 4px rgba(121,195,90,.14); }
.capture-actions { display: flex; gap: 9px; flex: 0 0 auto; }
.capture-actions button { min-height: 44px; padding: 0 15px; border-radius: 12px; cursor: pointer; font-size: 11px; font-weight: 750; }
.capture-secondary { border: 1px solid var(--line); background: var(--white); }
.capture-primary { border: 1px solid var(--ink); color: var(--white); background: var(--ink); }
.capture-clear { border: 0; color: var(--coral); background: transparent; }
.setup-card { margin-top: 14px; padding: 19px 22px; border: 1px solid #dce5d7; border-radius: 20px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 15px; background: var(--white); }
.setup-card-icon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--green); background: var(--green-pale); font-size: 25px; }
.setup-card h2 { margin: 0; font-size: 18px; }
.setup-card p:not(.section-label) { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.setup-card button { min-height: 42px; padding: 0 15px; border: 0; border-radius: 11px; color: var(--white); background: var(--ink); cursor: pointer; font-size: 11px; font-weight: 750; }
.data-portability { margin-top: 14px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 20px; display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: center; gap: 16px 24px; background: var(--white); }
.data-portability h2 { margin: 0; font-size: 18px; }
.data-portability p:not(.section-label) { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.data-portability-actions { display: flex; gap: 8px; }
.data-portability-actions button { min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--canvas); cursor: pointer; font-size: 10px; font-weight: 750; }
.data-portability-actions button:first-child { color: var(--white); border-color: var(--ink); background: var(--ink); }
.data-portability .data-portability-status { grid-column: 1 / -1; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 9px; }
.baseline-panel { margin-top: 14px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: 24px; display: grid; gap: 20px; background: var(--white); }
.baseline-panel h2 { margin: 3px 0 7px; font-size: clamp(24px, 2.7vw, 36px); letter-spacing: -1px; }
.baseline-panel h3 { margin: 3px 0 7px; font-size: 18px; }
.baseline-panel p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.baseline-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.baseline-heading > div:first-child { max-width: 720px; }
.baseline-status { min-width: 135px; padding: 12px 14px; border-radius: 14px; display: grid; gap: 3px; background: var(--green-pale); }
.baseline-status strong { font-size: 18px; }
.baseline-status span { color: var(--green); font-size: 9px; font-weight: 750; }
.baseline-averages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.baseline-averages > div { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 5px; background: var(--canvas); }
.baseline-averages span { color: var(--muted); font-size: 9px; font-weight: 700; }
.baseline-averages strong { font-size: 17px; overflow-wrap: anywhere; }
.baseline-averages .baseline-empty { grid-column: 1 / -1; padding: 16px; border: 1px dashed #cbd6d0; border-radius: 14px; background: var(--canvas); }
.change-summary { padding: 18px; border-radius: 18px; background: #f3f7f4; }
.change-labels { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 8px; }
.change-label { padding: 8px 10px; border: 1px solid #dbe5df; border-radius: 11px; display: grid; gap: 2px; background: var(--white); }
.change-label strong { font-size: 10px; }
.change-label span { color: var(--muted); font-size: 8px; }
.change-label.above { border-color: #eadbc8; background: #fffaf3; }
.change-label.below { border-color: #d8e1ea; background: #f6f9fc; }
.timeline-section { padding-top: 18px; border-top: 1px solid var(--line); }
.timeline-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.timeline-heading button, .baseline-actions button { min-height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--canvas); cursor: pointer; font-size: 10px; font-weight: 700; }
.timeline-heading button { color: var(--white); border-color: var(--ink); background: var(--ink); }
.timeline-list { margin-top: 12px; display: grid; gap: 8px; }
.timeline-list article { padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); }
.timeline-list header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.timeline-list header strong { font-size: 11px; }
.timeline-list header span { color: var(--muted); font-size: 8px; text-align: right; }
.timeline-list article p { margin-top: 7px; color: #3f4944; font-size: 10px; }
.timeline-list article small { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.timeline-empty { padding: 16px; border: 1px dashed #cbd6d0; border-radius: 14px; background: var(--canvas); }
.timeline-toggle { margin-top: 10px; width: 100%; min-height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--canvas); color: var(--ink); cursor: pointer; font-size: 10px; font-weight: 700; }
.timeline-toggle[hidden] { display: none; }
.timeline-heading-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.timeline-heading .timeline-manage { background: var(--canvas); color: var(--ink); border-color: var(--line); }
.timeline-heading .timeline-manage[hidden] { display: none; }
.fh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed #dce5df; }
.fh-label { font-size: 8px; font-weight: 760; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; flex-shrink: 0; margin-right: 2px; }
.fh-pill { padding: 3px 9px; border: 1px solid #dbe5df; border-radius: 999px; color: #46504b; background: #edf5ef; font-size: 9px; font-weight: 700; white-space: nowrap; }
.fh-note { font-size: 10px; color: var(--muted); font-style: italic; flex-basis: 100%; margin-top: 3px; line-height: 1.45; }
.timeline-row-actions { display: flex; gap: 8px; }
.timeline-remove, .timeline-edit { margin-top: 8px; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); color: var(--ink); cursor: pointer; font-size: 9px; font-weight: 700; }
.form-edit-note { margin: 4px 0 0; font-size: 10px; font-weight: 700; color: var(--muted); }
.timeline-status { margin-top: 10px !important; font-size: 9px !important; }
.baseline-actions { display: flex; justify-content: flex-end; gap: 8px; }
.timeline-copy-fallback { width: 100%; min-height: 280px; margin-top: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; resize: vertical; color: var(--ink); background: var(--canvas); font: 10px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.weekly-patterns { margin-top: 14px; padding: clamp(20px, 3vw, 30px); border: 1px solid #dce5df; border-radius: 24px; display: grid; gap: 20px; background: linear-gradient(145deg, #ffffff, #f8fbf9); }
.weekly-patterns-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.weekly-patterns h2 { margin: 3px 0 7px; font-size: clamp(24px, 2.7vw, 36px); letter-spacing: -1px; }
.weekly-patterns h3 { margin: 3px 0 9px; font-size: 18px; }
.weekly-patterns p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.weekly-count { padding: 8px 11px; border-radius: 999px; color: var(--green); background: var(--green-pale); font-size: 9px; font-weight: 800; white-space: nowrap; }
.weekly-averages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.weekly-averages > div { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 5px; background: var(--white); }
.weekly-averages span { color: var(--muted); font-size: 9px; font-weight: 700; }
.weekly-averages strong { font-size: 17px; overflow-wrap: anywhere; }
.weekly-trend { width: fit-content; padding: 4px 6px; border-radius: 999px; color: #55615b; background: #edf2ef; font-size: 8px; font-weight: 750; }
.weekly-trend.improving { color: var(--green); background: var(--green-pale); }
.weekly-trend.lower { color: #526b80; background: #eaf1f7; }
.weekly-trend.higher { color: #8b6038; background: #fff0df; }
.weekly-insight-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr); gap: 12px; }
.pattern-insights, .weekly-focus { padding: 18px; border-radius: 18px; }
.pattern-insights { background: var(--white); border: 1px solid var(--line); }
.pattern-insights ul { margin: 12px 0 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.pattern-insights li { padding-left: 17px; position: relative; color: #46504b; font-size: 10px; line-height: 1.5; }
.pattern-insights li::before { content: "·"; position: absolute; left: 4px; color: var(--green); font-size: 18px; line-height: 12px; }
.weekly-focus { color: var(--ink); background: var(--green-pale); }
.weekly-focus strong { display: block; margin: 12px 0 7px; font-size: 20px; letter-spacing: -.4px; }
.behavior-journal { margin-top: 14px; padding: clamp(20px, 3vw, 30px); border: 1px solid #dce5df; border-radius: 24px; display: grid; gap: 18px; background: var(--white); }
.behavior-journal-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.behavior-journal h2 { margin: 3px 0 7px; font-size: clamp(24px, 2.7vw, 36px); letter-spacing: -1px; }
.behavior-journal p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.behavior-journal button { min-height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 11px; color: var(--white); background: var(--ink); cursor: pointer; font-size: 10px; font-weight: 750; white-space: nowrap; }
.behavior-factor-list { display: flex; flex-wrap: wrap; gap: 8px; }
.behavior-factor-pill { padding: 9px 11px; border: 1px solid #dbe5df; border-radius: 999px; color: #46504b; background: #f3f7f4; font-size: 9px; font-weight: 760; }
.behavior-factor-pill.empty { border-style: dashed; color: var(--muted); font-weight: 700; }
.behavior-reflection { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; font-style: italic; }
.behavior-history { display: grid; gap: 10px; }
.behavior-history:empty { display: none; }
.behavior-history-entry { padding: 10px 13px; border: 1px solid #e8ede9; border-radius: 14px; background: #f8faf8; }
.behavior-history-entry .bh-date { font-size: 9px; font-weight: 700; color: var(--muted); margin: 0 0 5px; }
.behavior-history-entry .bh-factors { display: flex; flex-wrap: wrap; gap: 5px; }
.behavior-history-entry .bh-pill { padding: 4px 8px; border-radius: 999px; background: #edf2ee; color: #5a665e; font-size: 8px; font-weight: 700; }
.behavior-history-entry .bh-note { margin: 6px 0 0; font-size: 9px; color: var(--muted); line-height: 1.4; }

/* Weekly Reflection card */
.weekly-reflection-section { margin-top: 14px; padding: clamp(20px, 3vw, 30px); border: 1px solid #dce5df; border-radius: 24px; display: grid; gap: 14px; background: var(--white); }
.weekly-reflection-section h2 { margin: 3px 0 7px; font-size: clamp(22px, 2.5vw, 32px); letter-spacing: -0.5px; }
.weekly-reflection-section p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.wr-pills { display: flex; flex-wrap: wrap; gap: 8px; min-height: 10px; }
.wr-pills:empty { display: none; }
.wr-pill { padding: 8px 12px; border: 1px solid #dbe5df; border-radius: 999px; color: #46504b; background: #edf5ef; font-size: 9px; font-weight: 760; }
.wr-notes { font-size: 12px !important; color: var(--ink) !important; line-height: 1.6 !important; }
.wr-disclaimer { font-size: 9px !important; color: var(--muted) !important; font-style: italic; }
/* B45 — observations list */
.wr-observation-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.wr-observation-list[hidden] { display: none; }
.wr-observation-item { font-size: 12px; color: var(--ink); line-height: 1.6; padding: 10px 14px; background: #f4f9f5; border-left: 3px solid #b6d4bc; border-radius: 8px; }
/* B45 — next-week focus */
.wr-focus { font-size: 11px; color: #3a5c43; background: #eaf4ec; border-radius: 10px; padding: 10px 14px; line-height: 1.6; }
.wr-focus[hidden] { display: none; }

/* B46 — Weekly Focus offer card (inside Weekly Reflection) */
.wf-offer { background: #f0f8f2; border: 1px solid #bfdbca; border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; }
.wf-offer[hidden] { display: none; }
.wf-offer-label { margin: 0; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.wf-offer-text { margin: 0; font-size: 12px; color: var(--ink); line-height: 1.6; }
.wf-accept-btn { align-self: start; padding: 9px 18px; background: var(--action); color: var(--white); border: none; border-radius: 10px; font-size: 11px; font-weight: 700; cursor: pointer; transition: opacity 0.15s; }
.wf-accept-btn:hover { opacity: 0.85; }

/* B46 — Today's focus actions (inside aside.weekly-focus) */
.wf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wf-actions[hidden] { display: none; }
.wf-try-btn  { padding: 8px 14px; background: var(--action); color: var(--white); border: none; border-radius: 10px; font-size: 11px; font-weight: 700; cursor: pointer; transition: opacity 0.15s; }
.wf-try-btn:hover { opacity: 0.85; }
.wf-skip-btn { padding: 8px 14px; background: transparent; color: var(--action); border: 1.5px solid var(--action); border-radius: 10px; font-size: 11px; font-weight: 700; cursor: pointer; transition: opacity 0.15s; }
.wf-skip-btn:hover { opacity: 0.75; }
.wf-dismiss  { padding: 6px 10px; background: transparent; color: var(--muted); border: 1px solid #ccc; border-radius: 8px; font-size: 10px; cursor: pointer; transition: opacity 0.15s; }
.wf-dismiss:hover { opacity: 0.75; }
.wf-logged   { margin: 6px 0 0; font-size: 11px; color: #3a7a50; font-weight: 600; }
.wf-logged[hidden] { display: none; }


/* ─── BALA-B47 First Three Check-ins Journey card ────────────────────────── */
.journey-card {
  margin: 0 16px 12px;
  background: linear-gradient(135deg, #f7faf9 0%, #edf6f0 100%);
  border: 1px solid #c4dccb;
  border-radius: 16px;
  padding: 16px 18px 14px;
  display: grid;
  gap: 10px;
}
.journey-card[hidden] { display: none; }
.journey-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.journey-heading {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}
.journey-dismiss {
  flex-shrink: 0;
  padding: 2px 7px;
  background: transparent;
  color: var(--muted);
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 10px;
  cursor: pointer;
  line-height: 1.4;
}
.journey-dismiss:hover { opacity: 0.7; }
.journey-copy {
  margin: 0;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.6;
  opacity: 0.85;
}
.journey-progress-bar {
  height: 6px;
  background: #d4ead9;
  border-radius: 3px;
  overflow: hidden;
}
.journey-progress-fill {
  height: 100%;
  background: var(--action);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.journey-progress-label {
  margin: 0;
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.source-rail {
  margin-top: 18px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 19px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 22px;
  background: var(--white);
}

/* ─── BALA-B48 Symptom Nudge card ───────────────────────────────────────── */
.nudge-card {
  margin: 0 16px 12px;
  background: #f9f7ff;
  border: 1px solid #d8d0ef;
  border-radius: 16px;
  padding: 14px 16px 12px;
  display: grid;
  gap: 10px;
}
.nudge-card[hidden] { display: none; }
.nudge-question {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}
.nudge-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nudge-chip {
  padding: 7px 12px;
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid #c5bde8;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.nudge-chip:hover { background: #ede8fb; border-color: #9d8fd4; }
.nudge-ack {
  margin: 0;
  font-size: 11px;
  color: #5a4a8a;
  font-weight: 600;
}
.nudge-ack[hidden] { display: none; }
.nudge-skip {
  align-self: start;
  padding: 5px 10px;
  background: transparent;
  color: var(--muted);
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 10px;
  cursor: pointer;
  width: fit-content;
}
.nudge-skip:hover { opacity: 0.7; }

/* ── BALA-B49: Doctor-Ready Export Summary ─────────────────────────── */
.ds-card {
  margin-top: 18px;
  padding: 22px 20px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 19px;
}
.ds-card[hidden] { display: none; }
.ds-heading {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
}
.ds-intro {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.ds-generate-btn {
  display: inline-block;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 650;
  background: var(--accent, #2563eb);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.ds-generate-btn:hover { opacity: 0.88; }
.ds-output {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
  padding: 12px 14px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg, #f8f8f8);
  border: 1px solid var(--line);
  border-radius: 10px;
  resize: vertical;
}
.ds-output[hidden] { display: none; }
.ds-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.ds-copy-btn, .ds-download-btn {
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 640;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  color: var(--text);
  cursor: pointer;
}
.ds-copy-btn[hidden], .ds-download-btn[hidden] { display: none; }
.ds-copy-btn:hover, .ds-download-btn:hover { background: var(--bg, #f4f4f4); }
.ds-status {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--green, #16a34a);
  min-height: 16px;
}
.ds-disclaimer {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
/* ── B50: Ask BALA Coach ────────────────────────────────────────────── */
.ac-card {
  margin-top: 20px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--white);
}
.ac-card[hidden] { display: none; }
.ac-heading {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--text);
}
.ac-intro {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}
.ac-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ac-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg, #fafafa);
  outline: none;
  transition: border-color .15s;
}
.ac-input:focus { border-color: var(--accent, #2a7a5b); }
.ac-submit-btn {
  padding: 10px 18px;
  background: var(--accent, #2a7a5b);
  color: #fff;
  border: none;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.ac-submit-btn:hover { opacity: .85; }
.ac-mic-btn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  color: var(--accent, #2a7a5b);
  background: var(--accent-light, #e8f4ef);
  border: 1px solid color-mix(in srgb, var(--accent, #2a7a5b) 35%, var(--line));
  border-radius: 11px;
  cursor: pointer;
}
.ac-mic-btn svg, .coach-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ac-mic-btn.listening { color: #fff; background: #b83232; border-color: #b83232; animation: bala-voice-pulse 1.15s ease-in-out infinite; }
.ac-voice-status { min-height: 18px; margin: 8px 2px 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.coach-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(90px, calc(76px + env(safe-area-inset-bottom)));
  z-index: 8;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #b83232;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(92, 24, 24, .32);
  cursor: pointer;
}
.coach-fab:hover { background: #982828; }
@keyframes bala-voice-pulse { 50% { box-shadow: 0 0 0 8px rgba(184,50,50,.17); } }

/* Launch surface: one decision at a time. Body/lab depth remains available
   through the connected-data and profile flows, rather than stacking extra
   dashboards above the core score and check-in. */
.rebound-launchpad, .bala-control-tower { display: none; }
.hero-secondary { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.hero-secondary:hover { color: var(--ink); border-color: var(--muted); }
.score-ring .score-ring-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 650; line-height: 1; }
.ac-feed {
  margin-top: 18px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ac-q {
  align-self: flex-end;
  max-width: 85%;
  background: var(--accent-light, #e8f4ef);
  color: var(--text);
  padding: 9px 13px;
  border-radius: 14px 14px 4px 14px;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}
.ac-a {
  align-self: flex-start;
  max-width: 92%;
  background: var(--surface, #f5f5f5);
  color: var(--text);
  padding: 9px 13px;
  border-radius: 14px 14px 14px 4px;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}
.ac-a--emergency {
  background: #fff0f0;
  border: 1px solid #e8a0a0;
  color: #7a1a1a;
  font-weight: 600;
}

.section-intro { max-width: 720px; margin: 62px 0 18px; }
.section-intro h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); letter-spacing: -1.4px; }
.section-intro > p:last-child { margin: 11px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.source-rail h2 { margin: 0; font-size: 16px; letter-spacing: -.3px; }
.source-rail p:not(.section-label) { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.source-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.source-badges span { padding: 7px 9px; border-radius: 18px; color: #52615a; background: var(--canvas); font-size: 9px; font-weight: 700; }
#source-details-button { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--green); background: var(--white); cursor: pointer; font-size: 10px; font-weight: 750; white-space: nowrap; }

.connections-section { margin-top: 18px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg, #ffffff, #f7faf8); }
.connections-heading { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(300px, 1fr); align-items: end; gap: 28px; }
.connections-heading h2 { max-width: 680px; margin: 0; font-size: clamp(27px, 3vw, 42px); line-height: 1.08; letter-spacing: -1.2px; }
.connections-heading > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.connection-matrix { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.connection-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 19px; background: var(--white); }
.connection-card.available { border-color: #c9dfd0; background: #fbfefb; }
.connection-card header { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; }
.connection-card header > div { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.connection-card h3 { margin: 0; font-size: 14px; letter-spacing: -.2px; }
.connection-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--white); background: var(--ink); font-size: 13px; font-weight: 850; }
.connection-mark.android, .connection-mark.local { color: #1d6548; background: var(--green-soft); }
.connection-mark.samsung { background: #3559a8; }
.connection-mark.fitbit { color: #245d76; background: var(--blue-pale); }
.connection-mark.garmin { background: #177d91; }
.connection-mark.oura { background: #8b7059; }
.connection-mark.demo { color: #665c25; background: #f4efcb; }
.connection-mark.file { color: #4d708e; background: var(--blue-pale); }
.connection-mark.automation { background: #e46a3a; }
.connection-mark.tools { background: #6e5ca8; }
.connection-mark.voice { color: #a94b3d; background: #ffe5dc; }
.connection-status { flex: 0 0 auto; padding: 5px 7px; border-radius: 999px; font-size: 8px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.connection-status.ready { color: var(--green); background: var(--green-pale); }
.connection-status.planned, .connection-status.future { color: #5c6f7f; background: #edf2f5; }
.connection-status.protected, .connection-status.approval { color: #8b5a2d; background: #fff0df; }
.connection-status.conditional { color: #8d4b42; background: #ffe9e4; }
.connection-card dl { margin: 16px 0 0; display: grid; }
.connection-card dl > div { padding: 10px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 105px 1fr; gap: 12px; }
.connection-card dt { color: #526159; font-size: 9px; font-weight: 800; }
.connection-card dd { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.source-card > p { min-height: 42px; margin: 14px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.source-card-actions { margin-top: 13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.source-card-actions button { min-width: 0; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; color: var(--green); background: var(--canvas); cursor: pointer; font-size: 9px; font-weight: 780; line-height: 1.25; }
.source-card-actions button:last-child { color: var(--white); border-color: var(--ink); background: var(--ink); }
.source-card-actions button:only-child { grid-column: 1 / -1; }
.connections-note { margin: 17px 0 0; padding: 12px 14px; border-radius: 13px; color: #5d655f; background: #eef4f0; font-size: 10px; line-height: 1.5; }
.metric-strip {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  background: var(--white);
}
.metric-item {
  min-height: 105px;
  padding: 20px;
  border: 0;
  border-right: 1px solid var(--line);
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 13px;
  background: var(--white);
  cursor: pointer;
  text-align: left;
}
.metric-item:last-child { border-right: 0; }
.metric-item:hover { background: #fafcfb; }
.metric-item > span:last-child { display: grid; gap: 4px; }
.metric-item small { color: var(--muted); font-size: 10px; }
.metric-item strong { font-size: 22px; letter-spacing: -.5px; }
.metric-item strong b { font-size: 11px; }
.metric-item em { color: var(--green); font-size: 9px; font-style: normal; }
.metric-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 16px; font-weight: 800; }
.metric-icon.recovery { color: var(--green); background: var(--green-pale); }
.metric-icon.recovery[data-level="steady"] { color: #976524; background: #fff0d8; }
.metric-icon.recovery[data-level="recover"] { color: #a94b3d; background: #ffe5dc; }
.metric-icon.recovery[data-level="check"] { color: #765a2d; background: #f2e8dd; }
.metric-icon.sleep { color: #517aa3; background: var(--blue-pale); }
.metric-icon.heart { color: #c65d53; background: #fae4df; }
.metric-icon.cardio { color: #7a6f32; background: #f4efcb; }

.content-grid { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, .75fr); gap: 18px; }
.signals-panel, .suggestion-panel, .health-signals { border: 1px solid var(--line); border-radius: 24px; background: var(--white); }
.signals-panel { padding: 25px 28px 20px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.panel-heading h2 { font-size: 24px; }
.tabs { padding: 4px; border-radius: 12px; display: flex; background: var(--canvas); }
.tabs button { min-height: 32px; padding: 0 13px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; font-weight: 700; }
.tabs button.active { color: var(--ink); background: var(--white); box-shadow: 0 2px 8px rgba(26, 43, 35, .08); }
.chart-summary { margin: 25px 0 -3px; display: flex; align-items: baseline; gap: 10px; }
.chart-summary strong { font-size: 28px; }
.chart-summary span { color: var(--green); font-size: 10px; }
.chart { position: relative; height: 225px; }
.chart svg { position: absolute; inset: 0 0 24px; width: 100%; height: calc(100% - 24px); overflow: visible; }
.grid-line { position: absolute; left: 0; right: 0; height: 1px; background: #edf1ef; }
.line-1 { top: 25%; } .line-2 { top: 50%; } .line-3 { top: 75%; }
.line-path { fill: none; stroke: var(--green); stroke-width: 3; vector-effect: non-scaling-stroke; }
.area-path { fill: url(#areaGreen); stroke: none; }
.point { fill: var(--white); stroke: var(--green); stroke-width: 3; vector-effect: non-scaling-stroke; }
.point.current { fill: var(--green); }
.day-labels { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; color: #87918c; font-size: 9px; }

.suggestion-panel { padding: 25px; display: flex; flex-direction: column; align-items: flex-start; background: var(--green-pale); }
.bala-orb { width: 54px; height: 54px; margin-bottom: 25px; }
.bala-orb i:nth-child(1) { width: 34px; height: 34px; left: -8px; bottom: 5px; }
.bala-orb i:nth-child(2) { width: 29px; height: 29px; right: -5px; top: 2px; background: var(--blue-pale); }
.bala-orb i:nth-child(3) { width: 20px; height: 20px; right: 10px; bottom: -6px; background: #f4cabb; }
.suggestion-panel h2 { font-size: clamp(22px, 2vw, 30px); line-height: 1.2; }
.suggestion-panel > p:not(.section-label) { margin: 13px 0 25px; color: #52615a; font-size: 12px; line-height: 1.55; }
.suggestion-panel > button { width: 100%; min-height: 47px; margin-top: auto; padding: 0 15px; border: 1px solid #afcfb7; border-radius: 13px; display: flex; align-items: center; justify-content: space-between; color: var(--green); background: rgba(255,255,255,.62); cursor: pointer; font-size: 12px; font-weight: 750; }
.suggestion-panel > button svg { width: 18px; }
.suggestion-panel > button.added { color: var(--white); border-color: var(--green); background: var(--green); }

.health-signals { margin-top: 18px; padding: 24px 28px 8px; }
#all-data-button { border: 0; color: var(--green); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.signal-list { margin-top: 13px; display: grid; }
.signal-row { min-height: 70px; padding: 10px 4px; border: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 42px minmax(170px, 1fr) minmax(95px, .4fr) minmax(90px, .45fr) 100px; align-items: center; gap: 14px; background: transparent; cursor: pointer; text-align: left; }
.signal-row:hover { background: #fafcfb; }
.signal-row > span:nth-child(2) { display: grid; gap: 3px; }
.signal-row strong { font-size: 13px; }
.signal-row small { color: var(--muted); font-size: 9px; font-weight: 500; }
.signal-row > b { font-size: 16px; }
.signal-row em { justify-self: start; padding: 5px 8px; border-radius: 20px; font-size: 9px; font-style: normal; }
.signal-row em.good { color: var(--green); background: var(--green-pale); }
.signal-row em.watch { color: #9a5a35; background: #fff0e3; }
.signal-row em.progress { color: #587a9a; background: var(--blue-pale); }
.signal-glyph { width: 33px; height: 33px; border-radius: 11px; display: grid; place-items: center; color: var(--green); background: var(--green-pale); font-size: 12px; font-weight: 800; }
.sparkline { position: relative; width: 82px; height: 30px; justify-self: end; }
.sparkline::before { content: ""; position: absolute; inset: 10px 0; border-top: 2px solid var(--green); transform: skewY(-7deg); }
.sparkline.level::before { transform: skewY(2deg); }
/* B51: suppress CSS placeholder when real SVG sparkline is present */
.sparkline:has(.sp-svg)::before { display: none; }
.sp-svg { display: block; overflow: visible; }
.mini-progress { width: 82px; height: 6px; border-radius: 10px; background: #e8eeeb; overflow: hidden; }
.mini-progress i { display: block; width: 68%; height: 100%; background: var(--green); }

.action-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.action-card {
  min-height: 220px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 24px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 15px;
  background: var(--white);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.action-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.action-card h2, .founder-story h2, .voice-preview h2 { margin: 0; font-size: 23px; letter-spacing: -.7px; }
.action-card p:not(.section-label), .founder-story p:not(.section-label), .voice-preview p:not(.section-label) { color: var(--muted); font-size: 12px; line-height: 1.6; }
.action-card button { min-height: 41px; padding: 0 13px; border: 0; border-radius: 11px; color: var(--white); background: var(--ink); cursor: pointer; font-size: 11px; font-weight: 750; }
.action-icon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #a94b3d; background: #ffe5dc; font-size: 22px; font-weight: 500; }
.coach-card .action-icon { color: var(--green); background: var(--green-pale); }
.report-card .action-icon { color: #4d708e; background: var(--blue-pale); }
.coach-card button { color: var(--ink); background: var(--lime); }
.report-card button { background: #496f8d; }

.story-grid { margin-top: 18px; display: grid; grid-template-columns: .9fr 1.3fr; gap: 18px; }
.founder-story, .voice-preview {
  min-height: 245px;
  padding: clamp(27px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
}
.founder-story { position: relative; background: linear-gradient(135deg, #fff3e9, #ffe5dc); }
.founder-story::after { content: none; }
.founder-story > * { position: relative; z-index: 1; }
.founder-story p:not(.section-label) { max-width: 530px; color: #4f5552; font-size: 14px; }
.founder-story > span:not(.founder-heart) { display: inline-block; margin-top: 9px; color: var(--coral); font-size: 11px; font-weight: 750; }
.founder-heart { position: absolute !important; right: 30px; top: 24px; z-index: 2; display: grid !important; place-items: center; width: 34px; height: 34px; margin: 0 !important; border-radius: 50%; color: #fff; background: var(--coral); box-shadow: 0 8px 18px rgba(169,75,61,.24); font-size: 16px !important; }
.voice-preview { display: flex; align-items: center; justify-content: space-between; gap: 30px; background: linear-gradient(135deg, #f1f7e9, #fcfff8); }
.voice-preview > div { max-width: 620px; }
.language-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.language-tags span { padding: 6px 10px; border: 1px solid #d6dfce; border-radius: 9px; color: #526159; background: rgba(255,255,255,.65); font-size: 10px; }
#voice-preview-button { width: 105px; height: 105px; border: 1px solid #dfe4dc; border-radius: 24px; display: grid; place-content: center; gap: 7px; color: var(--green); background: var(--white); box-shadow: 0 12px 30px rgba(30,47,39,.09); cursor: pointer; font-size: 10px; font-weight: 750; }
#voice-preview-button span { font-size: 32px; }
.medical-note { margin-top: 18px; padding: 17px 21px; border: 1px solid #f3d9ca; border-radius: 18px; display: flex; align-items: flex-start; gap: 12px; color: #635c57; background: #fff5ee; }
.medical-note > span { width: 23px; height: 23px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: var(--white); background: var(--coral); font-size: 12px; font-weight: 850; }
.medical-note p { margin: 1px 0 0; font-size: 11px; line-height: 1.55; }

.future-vision {
  margin-top: 18px;
  padding: clamp(30px, 4vw, 52px);
  border-radius: 28px;
  display: grid;
  grid-template-columns: minmax(270px, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 70px);
  color: var(--white);
  background:
    radial-gradient(circle at 8% 90%, rgba(203,255,80,.18), transparent 28%),
    linear-gradient(135deg, #19211d, #29382f);
  overflow: hidden;
}
.future-copy h2 { max-width: 530px; margin: 0; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.05; letter-spacing: -1.7px; }
.future-copy > p:last-child { max-width: 570px; margin: 18px 0 0; color: #c7d1cb; font-size: 13px; line-height: 1.7; }
.future-vision .section-label { color: var(--lime); }
.future-steps { display: grid; gap: 0; }
.future-steps article { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.15); display: grid; grid-template-columns: 38px 1fr; gap: 4px 13px; }
.future-steps article:first-child { border-top: 0; padding-top: 0; }
.future-steps span { grid-row: 1 / 3; color: var(--lime); font-size: 11px; font-weight: 800; }
.future-steps strong { font-size: 15px; }
.future-steps small { color: #aebcb4; font-size: 11px; line-height: 1.5; }

footer { padding: 24px 0 0; color: #858e89; font-size: 10px; text-align: center; }
footer a { color: var(--green); }
.legal-page { max-width: 760px; min-height: 100vh; margin: 0 auto; padding: 70px 24px; overflow: visible; }
.legal-page h1 { max-width: 650px; margin: 0 0 28px; font-size: clamp(38px, 7vw, 68px); line-height: 1; letter-spacing: -2px; }
.legal-page h2 { margin: 34px 0 8px; font-size: 20px; }
.legal-page p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.legal-back { display: inline-block; margin-bottom: 50px; color: var(--green); font-size: 12px; font-weight: 750; text-decoration: none; }

.ask-button { position: fixed; right: 26px; bottom: 24px; z-index: 5; min-height: 50px; padding: 7px 18px 7px 8px; border: 0; border-radius: 28px; display: flex; align-items: center; gap: 10px; color: var(--white); background: var(--ink); box-shadow: 0 13px 35px rgba(23,25,28,.24); cursor: pointer; font-size: 12px; font-weight: 750; }
.mini-orb { width: 36px; height: 36px; flex: 0 0 auto; }
.mini-orb i:first-child { width: 24px; height: 24px; left: -4px; top: 8px; }
.mini-orb i:last-child { width: 19px; height: 19px; right: -2px; top: 3px; background: var(--blue-pale); }

dialog { width: min(590px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 25px; color: var(--ink); background: var(--white); box-shadow: 0 30px 100px rgba(22,33,27,.22); }
dialog::backdrop { background: rgba(38,50,44,.34); backdrop-filter: blur(4px); }
dialog form { position: relative; padding: 35px; }
dialog h2 { margin: 0 0 20px; font-size: 34px; letter-spacing: -1px; }
.dialog-close { position: absolute; top: 18px; right: 20px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--canvas); cursor: pointer; font-size: 24px; }
.dialog-primary { width: 100%; min-height: 49px; margin-top: 25px; border: 0; border-radius: 13px; color: var(--white); background: var(--ink); cursor: pointer; font-weight: 700; }
.plan-list { margin: 0; padding: 0; display: grid; list-style: none; }
.plan-list li { padding: 15px 0; border-top: 1px solid var(--line); display: grid; gap: 5px; }
.plan-list span { color: var(--green); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.plan-list strong { font-size: 15px; }
.plan-list small, .source-list span, .source-list p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.source-list { display: grid; gap: 14px; }
.source-list > div { padding: 15px; border-radius: 15px; display: grid; gap: 5px; background: var(--canvas); }
.signal-detail { display: grid; gap: 12px; }
.signal-detail > strong { color: var(--green); font-size: 44px; letter-spacing: -1.5px; }
.signal-detail p { margin: 0; line-height: 1.55; }
.signal-detail small { color: var(--muted); }
.signal-chart { margin-top: 8px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--canvas); }
.signal-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.signal-chart-head > strong { color: var(--ink); font-size: 12px; letter-spacing: 0; }
.signal-chart-head [role="group"] { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--white); }
.signal-chart-head button { min-height: 30px; padding: 5px 9px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; font-weight: 750; }
.signal-chart-head button[aria-pressed="true"] { color: #fff; background: #b83232; }
.signal-chart-svg { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.signal-chart-svg line { stroke: var(--line); stroke-width: 1; }
.signal-chart-svg polyline { fill: none; stroke: #b83232; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.signal-chart-caption, .signal-chart-empty { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.form-intro, .form-note { color: var(--muted); font-size: 12px; line-height: 1.5; }
.metric-form-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.metric-form-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; }
.metric-form-grid input { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--canvas); font-size: 14px; }
.form-note { margin: 17px 0 0; }
.signal-note, .name-field { margin-top: 15px; display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; }
.mood-chips { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mood-chips > span { width: 100%; color: var(--muted); font-size: 10px; font-weight: 750; }
.mood-chips button { min-height: 36px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--canvas); cursor: pointer; font-size: 12px; font-weight: 700; }
.mood-chips button[aria-pressed="true"] { color: #fff; background: #b83232; border-color: #b83232; }
.capture-date-field { margin-top: 15px; display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; }
.capture-date-field[hidden] { display: none; }
.capture-date-field input { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--canvas); font-size: 14px; }
.signal-note textarea { min-height: 82px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; resize: vertical; color: var(--ink); background: var(--canvas); font: inherit; font-size: 13px; }
.name-field input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--canvas); font-size: 16px; }
.onboarding-dialog { width: min(480px, calc(100vw - 28px)); }
.onboarding-dialog form { padding: 40px; text-align: center; }
.onboarding-dialog h2 { margin-bottom: 12px; }
.onboarding-dialog .form-intro { margin-inline: auto; max-width: 360px; }
.onboarding-dialog .name-field { text-align: left; }
.onboarding-mark { position: relative; width: 58px; height: 58px; margin: 0 auto 22px; border-radius: 50%; background: var(--ink); overflow: hidden; }
.onboarding-mark i { position: absolute; border-radius: 50%; background: var(--green-soft); }
.onboarding-mark i:nth-child(1) { width: 36px; height: 36px; left: -5px; top: 15px; }
.onboarding-mark i:nth-child(2) { width: 28px; height: 28px; right: -3px; top: 5px; background: var(--blue-pale); }
.onboarding-mark i:nth-child(3) { width: 20px; height: 20px; right: 12px; bottom: -5px; background: #f3c8bb; }
.onboarding-reset { margin-top: 12px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; }
.symptom-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.symptom-grid label { padding: 11px; border: 1px solid var(--line); border-radius: 12px; display: flex; gap: 8px; align-items: center; font-size: 11px; }
.behavior-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.behavior-grid label { padding: 11px; border: 1px solid var(--line); border-radius: 12px; display: flex; gap: 8px; align-items: center; font-size: 11px; }
.symptom-note { margin-top: 14px; display: grid; gap: 7px; color: var(--muted); font-size: 10px; }
.symptom-note textarea { min-height: 80px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; resize: vertical; font: inherit; }
/* Alcohol standard drink calculator */
.alcohol-calc-panel { margin-top: 10px; padding: 14px; border: 1px dashed #c8d9cc; border-radius: 14px; background: #f7faf7; display: grid; gap: 10px; }
.alcohol-calc-title { margin: 0; font-size: 10px; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.alcohol-calc-subtitle { margin: 4px 0 0; font-size: 10px; color: var(--muted); line-height: 1.45; }
.alcohol-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.alcohol-label { display: grid; gap: 4px; font-size: 10px; color: var(--muted); }
.alcohol-label select, .alcohol-label input[type="number"] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 11px; background: var(--white); }
.alcohol-calc-btn { align-self: start; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font-size: 10px; font-weight: 700; cursor: pointer; }
.alcohol-result { padding: 10px 12px; border-radius: 10px; background: #eef4ef; display: grid; gap: 4px; }
.alcohol-estimate { margin: 0; font-size: 12px; font-weight: 700; color: var(--ink); }
.alcohol-note { margin: 0; font-size: 10px; color: var(--muted); }
.alcohol-disclaimer { margin: 0; font-size: 9px; color: var(--muted); font-style: italic; }
.shortcut-template { margin-top: 15px; display: grid; gap: 7px; color: var(--muted); font-size: 10px; }
.shortcut-template textarea { min-height: 92px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; resize: none; font: 10px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }
.platform-summary { margin-bottom: 18px; }
.platform-summary p, .connection-note p { color: var(--muted); font-size: 12px; line-height: 1.55; }
.status-badge { display: inline-flex; padding: 6px 9px; border-radius: 20px; color: var(--green); background: var(--green-pale); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; }
.platform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.platform-option { padding: 17px; border: 1px solid var(--line); border-radius: 18px; display: grid; grid-template-columns: 38px 1fr; gap: 11px; background: var(--canvas); }
.platform-option.recommended { border-color: #9fc9af; background: #f1f8f3; }
.platform-option > div:nth-child(2) { display: grid; gap: 3px; }
.platform-option strong { font-size: 13px; }
.platform-option span { color: var(--muted); font-size: 9px; }
.platform-option ol { grid-column: 1 / -1; margin: 5px 0 0; padding-left: 18px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.platform-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--white); background: var(--ink); font-size: 14px; font-weight: 800; }
.platform-icon.android { color: #1d5e43; background: #cde8c2; }
.connection-note { margin-top: 12px; padding: 14px 16px; border-radius: 15px; background: #fff3ee; }
.connection-note strong { color: #a64f43; font-size: 11px; }
.connection-note p { margin: 5px 0 0; }
.devices-dialog { width: min(790px, calc(100vw - 32px)); }
.device-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.device-card { padding: 13px; border: 1px solid var(--line); border-radius: 16px; display: grid; grid-template-columns: 38px 1fr; gap: 10px; background: var(--canvas); transition: border-color 160ms ease, background 160ms ease; }
.device-card.selected { border-color: #91bda3; background: #f0f8f3; }
.device-card > div { display: grid; gap: 3px; min-width: 0; }
.device-card strong { font-size: 11px; }
.device-card small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.device-card em { grid-column: 1 / -1; color: var(--green); font-size: 8px; font-style: normal; font-weight: 750; }
.device-card button { grid-column: 1 / -1; min-height: 32px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); cursor: pointer; font-size: 9px; font-weight: 700; }
.provider-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--white); background: var(--ink); font-size: 13px; font-weight: 850; }
.provider-mark.health-connect { color: #246b4c; background: var(--green-soft); }
.provider-mark.fitbit { color: #245d76; background: var(--blue-pale); }
.provider-mark.samsung { background: #3559a8; }
.provider-mark.oura { background: #8b7059; }
.provider-mark.garmin { background: #177d91; }
.provider-detail { min-height: 116px; margin-top: 12px; padding: 16px; border-radius: 16px; background: #f2f7f4; }
.provider-detail h3 { margin: 10px 0 5px; font-size: 17px; }
.provider-detail > strong { font-size: 10px; }
.provider-detail p { margin: 7px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.provider-detail small { color: #8a716c; font-size: 8px; }
.priority-table { margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.priority-table > div { min-height: 37px; padding: 8px 12px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 145px 1fr; align-items: center; gap: 12px; font-size: 9px; }
.priority-table > div:first-child { border-top: 0; color: var(--muted); background: var(--canvas); }
.priority-table span:last-child { color: var(--muted); }
.import-steps ol { margin: 0; padding: 0; display: grid; list-style: none; }
.import-steps li { padding: 13px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 32px 1fr; gap: 11px; align-items: start; }
.import-steps li > span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--green); background: var(--green-pale); font-size: 10px; font-weight: 800; }
.import-steps li > div { display: grid; gap: 4px; }
.import-steps strong { font-size: 13px; }
.import-steps small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.import-steps code { color: var(--green); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.import-source-label { margin: 18px 0; display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 750; }
.import-source-label select { min-height: 45px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--canvas); font: inherit; font-size: 12px; }
.import-dialog-actions { margin-top: 25px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.import-dialog-actions .dialog-primary { margin-top: 0; }
.dialog-secondary { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--green); background: var(--white); cursor: pointer; font-size: 10px; font-weight: 780; }
.import-result-list { margin: 12px 0 0; padding: 0; display: grid; list-style: none; }
.import-result-list li { padding: 9px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 135px minmax(0, 1fr); gap: 10px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.import-result-list strong { color: var(--ink); }

.coach-drawer { position: fixed; top: 0; right: 0; z-index: 10; width: min(420px, 100vw); height: 100vh; padding: 22px; display: grid; grid-template-rows: auto 1fr auto auto; color: var(--ink); background: var(--white); box-shadow: -20px 0 70px rgba(22,33,27,.17); transform: translateX(105%); transition: transform 260ms ease; }
.coach-drawer.open,
.coach-drawer[aria-hidden="false"] { transform: translateX(0) !important; }
.coach-drawer header { padding-bottom: 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 11px; }
.coach-drawer header > div:nth-child(2) { display: grid; gap: 1px; }
.coach-drawer header small { color: var(--green); font-size: 9px; text-transform: uppercase; }
.coach-drawer header h2 { margin: 0; font-size: 23px; }
#coach-close { margin-left: auto; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--canvas); cursor: pointer; font-size: 24px; }
.coach-messages { padding: 24px 0; overflow-y: auto; display: flex; flex-direction: column; gap: 13px; }
.coach-message, .user-message { max-width: 86%; padding: 13px 15px; border-radius: 17px; font-size: 13px; line-height: 1.5; }
.coach-message { align-self: flex-start; background: var(--green-pale); }
.coach-message p { margin: 0; white-space: pre-line; }
.ai-source { display: block; margin-top: 7px; color: var(--muted); font-size: 8px; }
.user-message { align-self: flex-end; color: var(--white); background: var(--ink); }
.prompt-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.prompt-chips button { padding: 8px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); cursor: pointer; font-size: 10px; }
#coach-form { border-top: 1px solid var(--line); padding-top: 16px; }
#coach-form label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; }
.language-picker { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
.language-picker select { min-height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--white); font-size: 10px; }
.ai-consent { padding: 9px 0; display: flex !important; align-items: center; gap: 8px; line-height: 1.35; }
.ai-consent input { accent-color: var(--green); }
.local-ai-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-pale); flex: 0 0 auto; }
.coach-input-row { padding: 5px 5px 5px 13px; border: 1px solid var(--line); border-radius: 15px; display: flex; gap: 5px; }
#coach-input { min-width: 0; flex: 1; border: 0; outline: 0; }
#coach-form button { width: 38px; height: 38px; border: 0; border-radius: 11px; display: grid; place-items: center; color: var(--white); background: var(--ink); cursor: pointer; }
#coach-form button:disabled { cursor: not-allowed; opacity: .48; }
#coach-form svg { width: 19px; }
.voice-controls { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
#coach-form .voice-control { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line); color: var(--green); background: var(--white); font-size: 9px; font-weight: 760; }
#coach-form .voice-start.listening { color: var(--ink); border-color: var(--lime); background: var(--lime); animation: voice-pulse 1.15s ease-in-out infinite; }
.read-aloud-toggle { min-height: 36px; margin: 0 !important; padding: 7px 10px; border: 1px solid var(--line); border-radius: 11px; display: flex !important; align-items: center; gap: 7px; color: var(--green) !important; cursor: pointer; font-size: 9px !important; font-weight: 760; }
.read-aloud-toggle input { margin: 0; accent-color: var(--green); }
.coach-note { margin-top: 10px; color: var(--muted); font-size: 9px; text-align: center; }
@keyframes voice-pulse { 50% { box-shadow: 0 0 0 7px rgba(203, 255, 80, .28); } }

@media (prefers-reduced-motion: reduce) {
  #coach-form .voice-start.listening { animation: none; }
}

@media (max-width: 1100px) {
  .app { grid-template-columns: 76px minmax(0,1fr); }
  .sidebar { padding: 25px 12px; align-items: center; }
  .brand > span:last-child, .nav-item { font-size: 0; }
  .brand-mark { width: 42px; height: 42px; }
  nav { width: 100%; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item svg { width: 22px; }
  .privacy-button { font-size: 0; justify-content: center; }
  .score-panel { grid-template-columns: 150px 1fr; }
  .primary-action { grid-column: 2; justify-self: start; }
  .action-grid { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .app { display: block; }
  .sidebar { position: fixed; inset: auto 0 0; z-index: 8; width: 100%; height: 68px; padding: 8px 15px; border-top: 1px solid var(--line); border-right: 0; flex-direction: row; }
  .brand, .privacy-button { display: none; }
  nav { width: 100%; margin: 0; grid-template-columns: repeat(4, 1fr); gap: 2px; }
  .nav-item { min-height: 52px; flex-direction: column; gap: 3px; border-radius: 12px; font-size: 9px; }
  .nav-item svg { width: 19px; height: 19px; }
  main { padding: 22px 16px 100px; }
  .page-header { min-height: 0; padding: 27px 22px 52px; align-items: flex-start; border-radius: 25px; }
  .page-header h1 { font-size: clamp(38px, 12vw, 54px); line-height: 1; letter-spacing: -2.3px; }
  .page-header .hero-copy > span { margin-top: 17px; font-size: 14px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-actions button { width: 100%; padding: 0 10px; }
  .hero-privacy { align-items: flex-start; line-height: 1.45; }
  .sync-button { width: 46px; min-height: 46px; padding: 7px; justify-content: center; border-radius: 14px; }
  .sync-button > span:nth-child(2), .sync-button > svg { display: none; }
  .score-panel { margin: -25px 10px 0; min-height: 0; padding: 24px; grid-template-columns: 105px 1fr; gap: 18px; border-radius: 23px; }
  .score-ring { width: 104px; height: 104px; }
  .score-ring strong { font-size: 34px; }
  .score-insight h2 { font-size: 25px; }
  .score-insight > p:not(.section-label) { font-size: 12px; }
  .primary-action { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .capture-panel { align-items: stretch; flex-direction: column; }
  .baseline-heading, .timeline-heading { align-items: stretch; flex-direction: column; }
  .baseline-status { width: 100%; }
  .baseline-averages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baseline-averages > div:last-child { grid-column: 1 / -1; }
  .timeline-heading button { width: 100%; }
  .timeline-list header { align-items: flex-start; flex-direction: column; gap: 3px; }
  .timeline-list header span { text-align: left; }
  .baseline-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .weekly-patterns-heading { align-items: stretch; flex-direction: column; }
  .weekly-count { width: fit-content; }
  .weekly-averages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weekly-averages > div:last-child { grid-column: 1 / -1; }
  .weekly-insight-grid { grid-template-columns: 1fr; }
  .behavior-journal-heading { align-items: stretch; flex-direction: column; }
  .capture-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .setup-card { grid-template-columns: 42px 1fr; }
  .setup-card button { grid-column: 1 / -1; width: 100%; }
  .data-portability { grid-template-columns: 1fr; }
  .data-portability-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .data-portability-actions button { width: 100%; }
  .source-rail { grid-template-columns: 1fr; gap: 13px; }
  .source-badges { justify-content: flex-start; }
  #source-details-button { width: 100%; }
  .connections-heading { grid-template-columns: 1fr; align-items: start; gap: 12px; }
  .connection-matrix { grid-template-columns: 1fr; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .metric-item { min-height: 93px; padding: 15px; }
  .metric-item:nth-child(2) { border-right: 0; }
  .metric-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .content-grid { grid-template-columns: 1fr; }
  .section-intro { margin-top: 44px; }
  .action-grid, .story-grid { grid-template-columns: 1fr; }
  .action-card { min-height: 0; }
  .voice-preview { align-items: flex-start; }
  .future-vision { grid-template-columns: 1fr; }
  .suggestion-panel { min-height: 300px; }
  .signals-panel, .health-signals { padding: 21px 18px 10px; }
  .panel-heading { align-items: flex-start; flex-direction: column; }
  .tabs { width: 100%; }
  .tabs button { flex: 1; }
  .signal-row { grid-template-columns: 32px 1fr; gap: 8px; }
  .signal-row em, .sparkline, .mini-progress { grid-column: 2; }
}

/* B52: signal history detail panel */
.hist-block {
  margin-top: 18px;
  border-top: 1px solid var(--border, #e5e5e5);
  padding-top: 14px;
}
.hist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.hist-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, #666);
}
.hist-trend {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.hist-good  { color: #2e7d5b; }
.hist-watch { color: #b85c00; }
.hist-flat  { color: #8a8a8a; }
.hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.hist-table td {
  padding: 5px 0;
  border-bottom: 1px solid var(--border, #f0f0f0);
  vertical-align: middle;
}
.hist-table tr:last-child td { border-bottom: none; }
.hist-date {
  color: var(--text-secondary, #666);
  width: 56px;
}
.hist-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* BALA-B53 Score History bar */
.score-bar {
  height: 6px;
  background: var(--border, #e5e5e5);
  border-radius: 3px;
  overflow: hidden;
  min-width: 80px;
}
.score-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.score-fill.hist-good  { background: #2e7d5b; }
.score-fill.hist-watch { background: #b85c00; }
.score-fill.hist-low   { background: #b82e2e; }
.hist-val.hist-low     { color: #b82e2e; }

/* BALA-B54 Weekly Trend Summary Card */
#weekly-trend-card { margin: 0 var(--page-pad, 1rem); }
.trend-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.trend-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}
.trend-card-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, #666);
}
.tc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.tc-table td {
  padding: 0.3rem 0;
  vertical-align: middle;
}
.tc-label {
  color: var(--text-primary, #1a1a1a);
  width: 40%;
}
.tc-avg {
  color: var(--text-secondary, #666);
  width: 30%;
  font-variant-numeric: tabular-nums;
}
.tc-trend {
  width: 30%;
  font-weight: 600;
  font-size: 0.84rem;
}
.tc-good  { color: #2e7d5b; }
.tc-watch { color: #b85c00; }
.tc-flat  { color: #8a8a8a; }
.trend-card-note {
  margin-top: 0.75rem;
  font-size: 0.72rem;
  color: var(--text-secondary, #666);
  line-height: 1.4;
}

/* ── BALA-B55 Check-in Streak Tracker ─────────────────────────────────────── */
#streak-card { margin-bottom: 16px; }
.streak-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.streak-header { margin-bottom: 8px; }
.streak-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary); }
.streak-main { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.streak-flame { font-size: 1.4rem; line-height: 1; }
.streak-count { font-size: 2rem; font-weight: 800; line-height: 1; }
.streak-count-good { color: #2e7d5b; }
.streak-count-watch { color: #b85c00; }
.streak-count-flat { color: var(--secondary); }
.streak-unit { font-size: 0.85rem; color: var(--secondary); }
.streak-best { font-size: 0.75rem; color: var(--secondary); margin-bottom: 10px; }
.streak-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.streak-badge { font-size: 0.72rem; font-weight: 600; padding: 3px 8px; border-radius: 12px; background: var(--surface, #f5f5f5); border: 1px solid var(--border); color: var(--secondary); }
.streak-badge-earned { background: #2e7d5b22; border-color: #2e7d5b; color: #2e7d5b; }
.streak-next { font-size: 0.78rem; color: var(--secondary); margin-bottom: 4px; }
.streak-next-max { color: #2e7d5b; font-weight: 600; }
.streak-today { font-size: 0.78rem; color: var(--secondary); margin-bottom: 8px; }
.streak-today-done { color: #2e7d5b; font-weight: 600; }
.streak-note { font-size: 0.7rem; color: var(--secondary); margin: 0; opacity: 0.8; }

/* ── BALA-B56 Daily Coach Tip Card ────────────────────────────────────────── */
#daily-tip-card { margin-bottom: 16px; }
.tip-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.tip-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tip-card-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary); }
.tip-cat-chip { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--surface, #f0f0f0); border: 1px solid var(--border); color: var(--secondary); }
.tip-cat-sleep    { background: #1a4a7422; border-color: #1a4a74; color: #1a4a74; }
.tip-cat-recovery { background: #2e7d5b22; border-color: #2e7d5b; color: #2e7d5b; }
.tip-cat-activity { background: #b85c0022; border-color: #b85c00; color: #b85c00; }
.tip-cat-rhr      { background: #b82e2e22; border-color: #b82e2e; color: #b82e2e; }
.tip-cat-spo2     { background: #4a1a7422; border-color: #4a1a74; color: #4a1a74; }
.tip-cat-general  { background: var(--surface, #f0f0f0); border-color: var(--border); color: var(--secondary); }
.tip-text { font-size: 0.9rem; line-height: 1.55; color: var(--text); margin: 0 0 10px; }
.tip-note { font-size: 0.68rem; color: var(--secondary); margin: 0; opacity: 0.75; }

/* ── BALA-B57 Cardio/Exercise Tracking Panel ───────────────────────────────── */
.ex-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.ex-panel-header { margin-bottom: 10px; }
.ex-panel-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary); }
.ex-goal-label { font-size: 0.82rem; color: var(--secondary); margin-bottom: 6px; }
.ex-goal-label strong { color: var(--text); }
.ex-goal-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.ex-goal-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.ex-goal-fill.ex-goal-met   { background: #2e7d5b; }
.ex-goal-fill.ex-goal-close { background: #b85c00; }
.ex-goal-fill.ex-goal-low   { background: #8a8a8a; }
.ex-goal-status { font-size: 0.78rem; font-weight: 600; margin-bottom: 10px; }
.ex-goal-status.ex-goal-met   { color: #2e7d5b; }
.ex-goal-status.ex-goal-close { color: #b85c00; }
.ex-goal-status.ex-goal-low   { color: var(--secondary); }
.ex-active-row { font-size: 0.82rem; color: var(--secondary); margin-bottom: 6px; }
.ex-active-row strong { color: var(--text); }
.ex-dots { font-size: 0.75rem; letter-spacing: 0.06em; color: #2e7d5b; }
.ex-vs-last { font-size: 0.78rem; margin-bottom: 10px; }
.ex-delta-up   { color: #2e7d5b; }
.ex-delta-down { color: #b85c00; }
.ex-delta-flat { color: var(--secondary); }
.ex-note { font-size: 0.68rem; color: var(--secondary); margin: 0; opacity: 0.75; }


/* ═══════════════════════════════════════════════════════════════════════════════
   B67: UI Glow-Up — warm palette, circular score ring, signal gradients, coach
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 1. Warm palette additions */
:root {
  --warm-primary:  #E8845A;
  --warm-teal:     #5A9E8E;
  --warm-bg:       #FAFAF7;
  --warm-dark:     #1A2B2B;
  --warm-primary-glow: rgba(232, 132, 90, 0.4);
}

/* 2. Global box-sizing safety */
*, *::before, *::after { box-sizing: border-box; }

/* 3. Body warm background */
html { background: var(--warm-bg, #FAFAF7); }

/* 4. Typography line-height boost */
body { line-height: 1.6; }
p { line-height: 1.65; }

/* 5. Signal cards — gradient backgrounds + micro-animation on data update */
.signal-row {
  border-radius: 12px;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.signal-row:hover {
  background: linear-gradient(135deg, #f7fdfb 0%, #f0f8f5 100%);
  transform: translateX(2px);
  box-shadow: 0 2px 12px rgba(90, 158, 142, 0.1);
}
.signal-row:active { transform: scale(0.98); }

/* Signal value flash animation (triggered via JS adding .signal-updated) */
@keyframes signal-flash {
  0%   { background: rgba(232, 132, 90, 0.15); }
  100% { background: transparent; }
}
.signal-row.signal-updated { animation: signal-flash 0.6s ease forwards; }

/* 6. Metric strip cards — subtle gradients */
.metric-item {
  background: linear-gradient(145deg, #ffffff 0%, #fafcfb 100%);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.metric-item:hover {
  background: linear-gradient(145deg, #f5fdf9 0%, #f0f8f5 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(46, 125, 91, 0.1);
}
.metric-item:active { transform: scale(0.97); }

/* 7. Score ring — enhanced glow + animated fill */
.score-ring {
  filter: drop-shadow(0 8px 24px rgba(232, 132, 90, 0.18));
  transition: filter 0.3s ease;
}
.score-ring:hover { filter: drop-shadow(0 12px 32px rgba(232, 132, 90, 0.28)); }
.ring-value { transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease; }

/* Score card enhanced */
.score-panel {
  background: linear-gradient(145deg, #ffffff 0%, #fdfaf7 100%);
  box-shadow: 0 20px 60px rgba(26, 43, 43, 0.14);
}

/* 8. Button micro-interactions */
button:active { transform: scale(0.96); }
.hero-actions button:active { transform: scale(0.97); }
.primary-action:active { transform: scale(0.97); }
.capture-primary:active { transform: scale(0.97); }
.dialog-primary:active { transform: scale(0.98); }

/* 9. Action cards hover lift */
.action-card {
  background: linear-gradient(145deg, #ffffff 0%, #fdfcfb 100%);
}
.action-card:hover {
  box-shadow: 0 12px 40px rgba(26, 43, 43, 0.12);
  transform: translateY(-4px);
}

/* 10. Suggestion panel warm teal accent */
.suggestion-panel {
  background: linear-gradient(145deg, #eaf5f2 0%, #d6f0ea 100%);
}

/* ── B65 BALA Voice Coach Card ──────────────────────────────────────────────── */

.bala-voice-coach {
  margin: 18px 0;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(232, 132, 90, 0.2);
  border-radius: 26px;
  background: linear-gradient(145deg, #fffaf7 0%, #fdf5ef 100%);
  box-shadow: 0 8px 32px rgba(232, 132, 90, 0.08);
}

.bvc-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.bvc-orb {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--warm-primary);
  overflow: hidden;
}
.bvc-orb i {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
}
.bvc-orb i:nth-child(1) { width: 28px; height: 28px; left: -4px; top: 10px; }
.bvc-orb i:nth-child(2) { width: 22px; height: 22px; right: -3px; top: 3px; background: rgba(255,255,255,0.2); }

.bvc-title {
  margin: 0;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.5px;
  color: var(--warm-dark);
}

.bvc-chat {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding: 4px 0;
  scroll-behavior: smooth;
}

.bvc-bubble {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}
.bvc-bubble p { margin: 0; }

.bvc-bubble--bala {
  align-self: flex-start;
  background: white;
  border: 1px solid rgba(232, 132, 90, 0.15);
  color: var(--warm-dark);
  border-radius: 4px 18px 18px 18px;
}

.bvc-bubble--user {
  align-self: flex-end;
  background: var(--warm-primary);
  color: white;
  border-radius: 18px 4px 18px 18px;
}

/* Thinking dots */
.bvc-thinking {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
}
.bvc-thinking span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warm-primary);
  animation: bvc-dot-bounce 1.2s ease infinite;
}
.bvc-thinking span:nth-child(2) { animation-delay: 0.2s; }
.bvc-thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bvc-dot-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
  40%           { transform: scale(1.0); opacity: 1; }
}

/* Waveform when listening */
.bvc-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  margin-bottom: 10px;
}
.bvc-waveform span {
  display: inline-block;
  width: 4px;
  background: var(--warm-primary);
  border-radius: 2px;
  animation: bvc-wave 0.9s ease-in-out infinite;
}
.bvc-waveform span:nth-child(1) { height: 12px; animation-delay: 0s; }
.bvc-waveform span:nth-child(2) { height: 22px; animation-delay: 0.1s; }
.bvc-waveform span:nth-child(3) { height: 28px; animation-delay: 0.2s; }
.bvc-waveform span:nth-child(4) { height: 18px; animation-delay: 0.3s; }
.bvc-waveform span:nth-child(5) { height: 10px; animation-delay: 0.4s; }
@keyframes bvc-wave {
  0%, 100% { transform: scaleY(0.5); }
  50%       { transform: scaleY(1.0); }
}

/* Input area */
.bvc-input-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bvc-input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 1.5px solid rgba(232, 132, 90, 0.25);
  border-radius: 14px;
  font-size: 14px;
  color: var(--warm-dark);
  background: white;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bvc-input:focus {
  border-color: var(--warm-primary);
  box-shadow: 0 0 0 3px rgba(232, 132, 90, 0.12);
}

/* B67 Mic button with pulse-ring animation */
.coach-mic-btn {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--warm-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px var(--warm-primary-glow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.coach-mic-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 28px var(--warm-primary-glow);
}
.coach-mic-btn:active { transform: scale(0.95); }
.coach-mic-btn.listening {
  animation: pulse-ring 1.5s ease infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(232, 132, 90, 0.6); }
  70%  { box-shadow: 0 0 0 20px rgba(232, 132, 90, 0); }
  100% { box-shadow: 0 0 0 0   rgba(232, 132, 90, 0); }
}

.bvc-send-btn {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--warm-dark);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}
.bvc-send-btn:hover { background: #2d4040; }
.bvc-send-btn:active { transform: scale(0.94); }

.bvc-powered {
  margin: 10px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.3px;
}

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

/* ── Mobile safety for B65 coach card at 375px ─────────────────────────────── */
@media (max-width: 480px) {
  .bala-voice-coach {
    padding: 18px 14px;
    margin: 14px 0;
  }
  .bvc-input-area {
    flex-wrap: wrap;
  }
  .bvc-input {
    flex: 1 1 100%;
    order: 1;
  }
  .coach-mic-btn {
    order: 2;
    width: 56px;
    height: 56px;
  }
  .bvc-send-btn {
    order: 3;
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }
  .bvc-chat { max-height: 240px; }
  .bvc-title { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .coach-mic-btn.listening { animation: none; }
  .bvc-thinking span { animation: none; opacity: 0.6; }
  .bvc-waveform span { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   End B67
   ═══════════════════════════════════════════════════════════════════════════════ */

/* BALA launch visual polish: calm rhythm, dependable tap targets, and a true dark system. */
:root {
  --surface: var(--white);
  --surface-muted: var(--canvas);
  --focus-ring: #5eaa83;
}

body {
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, select, input, textarea {
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled),
.nav-item,
.privacy-button,
.profile-button,
.tabs button,
.prompt-chips button,
.device-card,
.source-card-actions button,
.timeline-toggle,
.baseline-actions button,
.timeline-heading button {
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

button:not(:disabled):active { transform: translateY(1px); }

.page-header,
.score-panel,
.capture-panel,
.setup-card,
.data-portability,
.baseline-panel,
.timeline-panel,
.signals-panel,
.health-signals,
.suggestion-panel,
.action-card,
.story-card,
.trend-card,
.streak-card,
.journey-card {
  border-color: color-mix(in srgb, var(--line) 88%, var(--green));
}

.page-header { box-shadow: 0 10px 30px rgba(30, 47, 39, .045); }
.score-panel { box-shadow: 0 18px 50px rgba(30, 47, 39, .10); }

.hero-actions button,
.capture-actions button,
.setup-card button,
.data-portability-actions button,
.baseline-actions button,
.timeline-heading button,
.source-card-actions button,
.prompt-chips button,
.device-card button,
.dialog-secondary,
.import-dialog-actions button {
  min-height: 44px;
}

.nav-item { min-height: 48px; }
.profile-button { min-height: 36px; }
.hero-subactions { gap: 8px; }
.hero-subactions button { min-height: 40px; }

.score-checks li,
.score-insight > p:not(.section-label),
.capture-panel p,
.setup-card p:not(.section-label),
.data-portability p,
.panel-heading p,
.action-card p,
.story-card p {
  line-height: 1.55;
}

.baseline-empty,
.timeline-empty,
.behavior-factor-pill.empty,
.source-empty,
.empty-state {
  border-style: dashed;
  color: var(--muted);
  background: color-mix(in srgb, var(--canvas) 82%, var(--green-pale));
}

@media (hover: hover) {
  .nav-item:hover,
  .privacy-button:hover,
  .prompt-chips button:hover,
  .source-card-actions button:hover,
  .dialog-secondary:hover,
  .device-card button:hover {
    border-color: #a9c8b5;
    background: var(--green-pale);
  }

  .capture-panel:hover,
  .setup-card:hover,
  .data-portability:hover,
  .trend-card:hover,
  .streak-card:hover {
    box-shadow: 0 10px 28px rgba(30, 47, 39, .07);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #edf4ef;
    --muted: #a9b7ae;
    --line: #2e4037;
    --canvas: #101714;
    --white: #17201b;
    --green: #80c99c;
    --green-soft: #254938;
    --green-pale: #1d3328;
    --blue-pale: #203d52;
    --warm: #172019;
    --surface: #17201b;
    --surface-muted: #101714;
    --focus-ring: #a6e4b9;
    --shadow: 0 18px 48px rgba(0, 0, 0, .34);
    --text: var(--ink);
    --secondary: var(--muted);
    --border: var(--line);
    --card-bg: var(--white);
    --warm-bg: #101714;
    --warm-dark: #edf4ef;
    --warm-primary-glow: rgba(128, 201, 156, .28);
  }

  html, body, .sidebar, .coach-drawer, dialog { background: var(--canvas); }
  .sidebar, .coach-drawer { background: var(--white); }
  .page-header { border-color: #33473b; background: linear-gradient(135deg, #17251d 0%, #13211a 100%); }
  .page-header::after { border-color: rgba(128, 201, 156, .18); }
  .profile-button, .hero-actions button, .sync-button, .capture-secondary,
  .dialog-secondary, .prompt-chips button, .language-picker select,
  .device-card button, .source-card-actions button, .read-aloud-toggle,
  .metric-form-grid input, .capture-date-field input, .signal-note textarea,
  .name-field input, .import-source-label select, .coach-input-row {
    color: var(--ink);
    border-color: var(--line);
    background: #1a261f;
  }
  .hero-actions .hero-primary, .primary-action, .capture-primary,
  .setup-card button, #coach-form button { color: #101714; background: var(--green); border-color: var(--green); }
  .hero-actions .hero-coral { color: #fff; }
  .score-data-source, .status-badge, .local-status, .b63-chip-ok { color: #b7e8c5; background: #1d3d2b; }
  .score-panel, .capture-panel, .setup-card, .data-portability, .trend-card,
  .streak-card, .journey-card, .platform-option, .device-card, .source-list > div,
  .timeline-list article, .baseline-averages > div, .provider-detail { background: var(--white); }
  .connection-card, .signal-chart, .hist-block, .score-more-details > summary,
  .mood-chips button { color: var(--ink); border-color: var(--line); background: #1a261f; }
  .connection-card.available { background: #1a3023; border-color: #315b42; }
  .connection-card p, .signal-chart-caption, .signal-chart-empty,
  .mood-chips > span { color: #b9c8bd; }
  .signal-row:hover { background: #1b2d23; }
  .capture-panel { background: linear-gradient(110deg, #183223 0%, #17201b 68%); }
  .suggestion-panel { background: linear-gradient(145deg, #183726 0%, #143022 100%); }
  .bala-voice-coach { border-color: #5b4438; background: linear-gradient(145deg, #29201c 0%, #1d1917 100%); }
  .bvc-send-btn { background: #315d43; }
  .bvc-send-btn:hover { background: #3d7251; }
  .nav-item.active { color: #b7e8c5; background: #1f422e; }
  .nav-item:hover { background: #203328; }
  .score-ring .ring-track { stroke: #2a4234; }
  .score-checks li, .score-insight > p:not(.section-label), .hero-copy > span,
  .capture-panel p, .setup-card p:not(.section-label), .platform-option span,
  .provider-detail p, .coach-note, .ai-source { color: var(--muted); }
  .coach-message { color: var(--ink); background: #20422e; }
  .user-message { color: #101714; background: var(--green); }
  .bvc-bubble--bala, .bvc-input { color: var(--ink); background: #1a261f; }
}

@media (max-width: 760px) {
  .hero-subactions { display: none; }
  .score-checks { gap: 8px 12px; }
  .coach-drawer { padding: 18px 16px max(16px, env(safe-area-inset-bottom)); }
  .prompt-chips button { min-height: 40px; padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Real-device pass: keep the first mobile screen simple, aligned, and easy to tap. */
.score-more-details { margin-top: 16px; }
.score-more-details > summary {
  width: fit-content;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--green);
  background: var(--white);
  cursor: pointer;
  font-size: 12px;
  font-weight: 780;
  list-style: none;
}
.score-more-details > summary::-webkit-details-marker { display: none; }
.score-more-details > summary::after { content: ' +'; }
.score-more-details[open] > summary::after { content: ' −'; }
.score-more-details > :not(summary) { margin-top: 14px; }
.score-ring .score-ring-hint { display: block; }
.voice-controls.voice-input-unavailable { grid-template-columns: 1fr; }

@media (max-width: 480px) {
  main { padding: 16px 12px 104px; }
  .page-header { padding: 22px 18px 48px; border-radius: 21px; }
  .page-header h1 { font-size: clamp(35px, 11vw, 45px); }
  .hero-actions { gap: 8px; }
  .hero-actions #demo-button { grid-column: 1 / -1; }
  .hero-actions #hero-report-button { display: none; }
  .hero-actions button { min-height: 46px; font-size: 11px; }
  .score-panel { margin: -23px 4px 0; padding: 18px; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; border-radius: 20px; }
  .score-ring { width: 92px; height: 92px; }
  .score-ring strong { font-size: 31px; }
  .score-ring small, .score-ring em { font-size: 8px; }
  .score-ring .score-ring-hint { display: none; }
  .score-insight h2 { font-size: 22px; line-height: 1.08; }
  .score-insight > p:not(.section-label) { margin-top: 8px; font-size: 12px; line-height: 1.45; }
  .score-more-details { margin-top: 12px; }
  .score-more-details > summary { width: 100%; min-height: 46px; text-align: center; }
  .score-checks { display: grid; gap: 8px; }
  .score-completeness-card, .bala-explainability { font-size: 11px; }
  .rebound-launchpad, .bala-control-tower, .capture-panel, .signals-panel, .health-signals, .suggestion-panel { border-radius: 18px; }
  /* These two modules repeat the hero and score actions. Keep them available
     on wider screens, but let a phone reach its score, signals, trend, and
     coach without an extra launch funnel. */
  .rebound-launchpad, .bala-control-tower { display: none; }
  .coach-drawer { width: 100vw; padding: 16px 14px max(16px, env(safe-area-inset-bottom)); }
  .coach-messages { padding: 16px 0; }
  .coach-message, .user-message { max-width: 92%; padding: 12px 13px; }
  #coach-form .voice-control, .read-aloud-toggle { min-height: 44px; }
  .bvc-input-area { gap: 9px; }
  .coach-mic-btn, .bvc-send-btn { min-width: 48px; min-height: 48px; }
  .sidebar { height: calc(68px + env(safe-area-inset-bottom)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}