/* app-ui.css (2026-10-17): the home page's design language on the pages people live in - the chat and the
   journeys. Loaded after each page's own styles and written to override them: one green, system type, soft
   surfaces, pill controls, 18px cards, no gradients, nothing shouting. Tokens match article.css / app-nav.css. */
:root {
  --ui-primary: #004225; --ui-primary-hover: #0a5a35; --ui-primary-light: #2d8653;
  --ui-ink: #1d1d1f; --ui-ink-2: #515154; --ui-ink-3: #86868b;
  --ui-surface: #f5f5f7; --ui-surface-2: #ececef; --ui-white: #ffffff;
  --ui-rule: rgba(0,0,0,0.08); --ui-tint: rgba(0,66,37,0.07); --ui-tint-2: rgba(0,66,37,0.12);
  --ui-radius: 18px; --ui-radius-sm: 12px; --ui-pill: 980px;
  --ui-shadow: 0 1px 2px rgba(29,29,31,0.04), 0 8px 24px rgba(29,29,31,0.05);
  --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ui-danger: #b42318; --ui-danger-bg: #fdecea; --ui-warn: #b45309; --ui-warn-bg: #fff4e5;
}
body.ui { font-family: var(--ui-font); color: var(--ui-ink); -webkit-font-smoothing: antialiased; }
body.ui :focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
body.ui button, body.ui input, body.ui select, body.ui textarea { font-family: inherit; }
body.ui button { transition: background-color .18s, color .18s, transform .08s, box-shadow .18s; }
body.ui button:active { transform: translateY(1px); }

/* ───────────────────────── journey pages ───────────────────────── */
body.ui.jp-page { background: var(--ui-surface); }
body.ui.jp-page .jp { padding-top: 14px; }
body.ui.jp-page .jp-head { background: var(--ui-primary); border-radius: var(--ui-radius); padding: 18px 20px 16px; box-shadow: var(--ui-shadow); }
body.ui.jp-page .jp-head a.back { color: rgba(255,255,255,0.72); font-size: 13px; font-weight: 500; }
body.ui.jp-page .jp-head a.back:hover { color: #fff; }
body.ui.jp-page .jp-head h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin: 6px 0 6px; text-wrap: balance; }
body.ui.jp-page .jp-head .round { color: rgba(255,255,255,0.78); font-size: 13px; }
body.ui.jp-page .jp-head .round b { background: rgba(255,255,255,0.16); border-radius: var(--ui-pill); padding: 3px 10px; font-weight: 600; }
body.ui.jp-page .jp-head .menu { gap: 7px; margin-top: 12px; }
body.ui.jp-page .jp-head .menu button { background: rgba(255,255,255,0.14); border: 0; color: #fff; border-radius: var(--ui-pill); padding: 7px 13px; font-size: 13px; font-weight: 500; }
body.ui.jp-page .jp-head .menu button:hover { background: rgba(255,255,255,0.24); }
body.ui.jp-page .jp-head .menu #btnRemove.danger { background: rgba(255,255,255,0.10); color: #ffd9d6; border: 0; }
body.ui.jp-page .jp-head .menu #btnRemove.danger:hover { background: rgba(255,255,255,0.18); }
body.ui.jp-page .jp-signup { background: var(--ui-ink); border-radius: var(--ui-radius); }
body.ui.jp-page .jp-flag { border-radius: var(--ui-radius-sm); border-left-width: 4px; background: var(--ui-danger-bg); color: #7a1c12; }
body.ui.jp-page .jp-flag.high { background: var(--ui-warn-bg); color: #7c3a07; }
body.ui.jp-page .panel { background: var(--ui-white); border-radius: var(--ui-radius); padding: 16px 18px; box-shadow: var(--ui-shadow); margin-bottom: 12px; }
body.ui.jp-page .panel h2 { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-ink-3); font-weight: 600; margin-bottom: 10px; }
body.ui.jp-page .panel h2 span { color: var(--ui-ink-3); font-weight: 500; }
body.ui.jp-page .budget .n { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--ui-ink); font-variant-numeric: tabular-nums; }
body.ui.jp-page .budget .n.over { color: var(--ui-danger); }
body.ui.jp-page .budget .l { color: var(--ui-ink-3); font-size: 11px; letter-spacing: 0.05em; }
body.ui.jp-page .eq, body.ui.jp-page .note, body.ui.jp-page .target, body.ui.jp-page .goalrow { color: var(--ui-ink-2); }
body.ui.jp-page .target b { color: var(--ui-primary); }
body.ui.jp-page .bar { height: 6px; background: var(--ui-surface-2); border-radius: var(--ui-pill); }
body.ui.jp-page .bar i { background: var(--ui-primary); border-radius: var(--ui-pill); }
body.ui.jp-page .bar i.over { background: var(--ui-danger); } body.ui.jp-page .bar i.limit { background: var(--ui-warn); }
body.ui.jp-page .goal { border-bottom: 1px solid var(--ui-rule); padding: 9px 0; }
body.ui.jp-page .goal .k { font-weight: 600; color: var(--ui-ink); } body.ui.jp-page .goal .v { color: var(--ui-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
body.ui.jp-page .goal .v.over { color: var(--ui-danger); } body.ui.jp-page .goal .v.met { color: var(--ui-primary-light); }
body.ui.jp-page .goal .why { color: var(--ui-ink-3); }
body.ui.jp-page .goalrow select, body.ui.jp-page .chiprow input, body.ui.jp-page .qbox textarea, body.ui.jp-page .startpanel input, body.ui.jp-page .startpanel select, body.ui.jp-page .startpanel textarea { border: 1px solid var(--ui-rule); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-ink); }
body.ui.jp-page .goalrow select:focus, body.ui.jp-page .chiprow input:focus, body.ui.jp-page .qbox textarea:focus { outline: none; border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-tint); background: var(--ui-white); }
body.ui.jp-page .meal { border-bottom: 1px solid var(--ui-rule); padding: 9px 0; }
body.ui.jp-page .meal .s { color: var(--ui-ink); } body.ui.jp-page .meal .e { color: var(--ui-ink-3); font-variant-numeric: tabular-nums; }
body.ui.jp-page .gl { background: var(--ui-tint); color: var(--ui-primary); }
body.ui.jp-page .dot.slow, body.ui.jp-page .bar.split i.slow, body.ui.jp-page .spark.week i.slow { background: var(--ui-primary); }
body.ui.jp-page .wkbars b { background: var(--ui-surface-2); border-radius: 6px; } body.ui.jp-page .wkbars b i { background: var(--ui-primary); }
body.ui.jp-page .spark i { background: var(--ui-tint-2); } body.ui.jp-page .spark i.last { background: var(--ui-primary); }
body.ui.jp-page .wt .big { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--ui-ink); font-variant-numeric: tabular-nums; } body.ui.jp-page .wt .sm { color: var(--ui-ink-2); }
body.ui.jp-page .task { border-bottom: 1px solid var(--ui-rule); padding: 9px 0; }
body.ui.jp-page .task .cnt { color: var(--ui-ink-3); font-variant-numeric: tabular-nums; }
body.ui.jp-page .task button, body.ui.jp-page .chip, body.ui.jp-page .watchacts a.chip, body.ui.jp-page .guide-modal .close, body.ui.jp-page .report-modal .rtools button { border: 1px solid var(--ui-rule); background: var(--ui-white); color: var(--ui-primary); border-radius: var(--ui-pill); padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; }
body.ui.jp-page .task button:hover, body.ui.jp-page .chip:hover, body.ui.jp-page .guide-modal .close:hover { background: var(--ui-surface); }
body.ui.jp-page .task button.done, body.ui.jp-page .chip.on { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }
body.ui.jp-page .task.is-done .lab { color: var(--ui-ink-3); } body.ui.jp-page .task .state { color: var(--ui-primary-light); }
body.ui.jp-page .wb .k { color: var(--ui-ink-3); } body.ui.jp-page .wb .v { color: var(--ui-ink); font-weight: 600; }
body.ui.jp-page .alert { background: var(--ui-warn-bg); color: #7c3a07; border-radius: var(--ui-radius-sm); }
body.ui.jp-page .reading { border-bottom: 1px solid var(--ui-rule); } body.ui.jp-page .reading .vals { color: var(--ui-primary); font-variant-numeric: tabular-nums; }
body.ui.jp-page .q:before { background: var(--ui-tint); color: var(--ui-primary); }
body.ui.jp-page .empty { color: var(--ui-ink-3); }
body.ui.jp-page .ph-tabs { gap: 8px; }
body.ui.jp-page .ph-tab { border: 1px solid var(--ui-rule); background: var(--ui-white); border-radius: 14px; padding: 9px 14px; }
body.ui.jp-page .ph-tab:hover { background: var(--ui-surface); }
body.ui.jp-page .ph-tab .n { color: var(--ui-ink); font-size: 15px; font-weight: 700; } body.ui.jp-page .ph-tab .d { color: var(--ui-ink-2); font-size: 12.5px; }
body.ui.jp-page .ph-tab.is-sel { background: var(--ui-primary); border-color: var(--ui-primary); } body.ui.jp-page .ph-tab.is-now:not(.is-sel) { border-color: var(--ui-primary); box-shadow: inset 0 0 0 1px var(--ui-primary); }
body.ui.jp-page .ph-tab.is-sel .n, body.ui.jp-page .ph-tab.is-sel .d { color: #fff; }   /* the selected tab reads white (Dan, 2026-10-21) */
body.ui.jp-page .ph-sec { scroll-margin-top: 100px; }   /* a jump from the index lands the headline under the fixed top bar, not behind it */
/* The plan, read by old eyes (Bruce, 2026-10-21): big green headings with room between the sections, the text in ink not
   grey, the two watch-for sections red and boxed, and every watch line a button that goes to the nurse. */
body.ui.jp-page .ph-title { font-size: 19px; font-weight: 700; color: var(--ui-ink); letter-spacing: -0.01em; margin: 6px 0 2px; line-height: 1.3; }
body.ui.jp-page .ph-index { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
body.ui.jp-page .ph-index button { border: 1px solid var(--ui-rule); background: var(--ui-white); color: var(--ui-primary); border-radius: var(--ui-pill); padding: 6px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
body.ui.jp-page .ph-index button:hover { background: var(--ui-tint); }
body.ui.jp-page .ph-index button.is-call, body.ui.jp-page .ph-index button.is-emerg { color: var(--ui-danger); border-color: rgba(180,35,24,0.35); }
body.ui.jp-page .ph-sec { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--ui-rule); }
body.ui.jp-page .ph-title + .ph-sec, body.ui.jp-page .ph-index + .ph-sec, body.ui.jp-page .ph-tap + .ph-sec { border-top: 0; padding-top: 0; margin-top: 12px; }
body.ui.jp-page .ph-h { font-size: 17px; font-weight: 700; color: var(--ui-primary); letter-spacing: 0; text-transform: none; margin-bottom: 6px; line-height: 1.3; }
body.ui.jp-page .ph-sec ul { font-size: 15.5px; color: var(--ui-ink); line-height: 1.55; padding-left: 22px; margin-top: 4px; }
body.ui.jp-page .ph-sec li { margin: 7px 0; }
body.ui.jp-page .ph-pain { font-size: 16px; color: var(--ui-ink); }
body.ui.jp-page .ph-sec.is-call, body.ui.jp-page .ph-sec.is-emerg { border-top: 0; border-radius: var(--ui-radius-sm); padding: 14px 16px; }
body.ui.jp-page .ph-sec.is-call { background: #fff7f6; } body.ui.jp-page .ph-sec.is-emerg { background: var(--ui-danger-bg); }
body.ui.jp-page .ph-sec.is-call .ph-h, body.ui.jp-page .ph-sec.is-emerg .ph-h { color: var(--ui-danger); }
body.ui.jp-page .ph-sec.is-call li::marker, body.ui.jp-page .ph-sec.is-emerg li::marker { color: var(--ui-danger); font-size: 1.15em; }
body.ui.jp-page .ph-tap { font-size: 13.5px; color: var(--ui-ink-2); margin: 8px 0 0; }
body.ui.jp-page li.wf { cursor: pointer; padding: 5px 8px 5px 4px; margin: 3px 0 3px -4px; border-radius: 10px; }
body.ui.jp-page li.wf:hover, body.ui.jp-page li.wf:focus { background: rgba(180,35,24,0.09); outline: none; }
body.ui.jp-page li.wf::after { content: ' ›'; color: var(--ui-danger); font-weight: 700; }
body.ui.jp-page .msg .mcall { display: block; margin-top: 10px; } body.ui.jp-page .msg .mcall .call { font-size: 15px; padding: 9px 16px; }
body.ui.jp-page .ph-src a { color: var(--ui-primary); }
/* the conversation on the journey page */
body.ui.jp-page .jp-chat { background: var(--ui-white); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
body.ui.jp-page .thread { padding: 14px 16px; gap: 10px; }
body.ui.jp-page .msg { font-size: 15px; line-height: 1.5; border-radius: var(--ui-radius); padding: 10px 14px; max-width: 86%; }
body.ui.jp-page .msg.nurse { background: var(--ui-surface); color: var(--ui-ink); border-bottom-left-radius: 6px; }
body.ui.jp-page .msg.me { background: var(--ui-primary); color: #fff; border-bottom-right-radius: 6px; }
body.ui.jp-page .msg.wait { background: var(--ui-surface-2); color: var(--ui-ink-2); font-style: normal; display: flex; align-items: center; gap: 10px; min-height: 42px; }
body.ui.jp-page .msg.wait .dots i { background: var(--ui-primary); width: 10px; height: 10px; }
body.ui.jp-page .msg.full h1, body.ui.jp-page .msg.full h2, body.ui.jp-page .msg.full h3 { color: var(--ui-ink); }
body.ui.jp-page .msg .tochat { color: var(--ui-primary); } body.ui.jp-page .msg .time { color: inherit; opacity: 0.55; }
body.ui.jp-page .chips { gap: 8px; padding: 10px 16px 0; }
body.ui.jp-page .chiprow .lbl { color: var(--ui-ink-3); }
body.ui.jp-page .chiptoast { color: var(--ui-primary-light); }
body.ui.jp-page .input { border-top: 1px solid var(--ui-rule); padding: 12px 16px 14px; gap: 8px; }
body.ui.jp-page .input textarea { border: 1px solid var(--ui-rule); border-radius: 16px; background: var(--ui-surface); padding: 10px 14px; color: var(--ui-ink); caret-color: var(--ui-primary); }
body.ui.jp-page .input textarea:focus { outline: none; border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-tint); background: var(--ui-white); }
body.ui.jp-page .input textarea::placeholder { color: var(--ui-ink-3); }
body.ui.jp-page .input button { background: var(--ui-primary); border-radius: var(--ui-pill); padding: 0 18px; font-weight: 600; }
body.ui.jp-page .input button:hover { background: var(--ui-primary-hover); }
body.ui.jp-page .input .cam { border: 1px solid var(--ui-rule); background: var(--ui-surface); border-radius: 14px; width: 42px; }
body.ui.jp-page .input .cam:hover { background: var(--ui-surface-2); }
body.ui.jp-page .photo img { border-radius: 10px; border: 1px solid var(--ui-rule); }
body.ui.jp-page .jp-chat.dragging { outline-color: var(--ui-primary); }
body.ui.jp-page .jp-savestate { min-height: 16px; font-size: 12px; line-height: 16px; color: var(--ui-muted, #667085); padding: 0 14px 4px; text-align: right; transition: color .2s; }
body.ui.jp-page .jp-savestate.failed { color: #b42318; }
body.ui.jp-page .guide-modal { background: rgba(29,29,31,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.ui.jp-page .guide-modal .box { border-radius: var(--ui-radius); padding: 24px 28px; box-shadow: 0 20px 60px rgba(29,29,31,0.25); }
body.ui.jp-page .guide-modal h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; } body.ui.jp-page .guide-modal h2 { color: var(--ui-ink); font-weight: 600; }
body.ui.jp-page .startpanel { background: var(--ui-white); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
body.ui.jp-page .startpanel h1 { color: var(--ui-ink); font-weight: 600; letter-spacing: -0.015em; }
body.ui.jp-page .loading, body.ui.jp-page .error { border-radius: var(--ui-radius); color: var(--ui-ink-3); } body.ui.jp-page .error { color: var(--ui-danger); }
body.ui.jp-page #jpPull { color: var(--ui-ink-3); }

/* ───────────────────────── the chat ───────────────────────── */
body.ui.chat-page { background: var(--ui-white); }
body.ui.chat-page nav.top-nav { background: rgba(255,255,255,0.86); color: var(--ui-ink); border-bottom: 1px solid var(--ui-rule); box-shadow: none; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); min-height: 64px; padding: 6px 16px 6px 12px; }
body.ui.chat-page nav.top-nav .top-nav-brand img { height: 36px !important; }
body.ui.chat-page .top-nav-disclaimer { color: var(--ui-ink-3); font-size: 0.68rem; }
body.ui.chat-page .nav-sidebar-toggle, body.ui.chat-page .nav-hamburger span { color: var(--ui-ink); background-color: var(--ui-ink); }
body.ui.chat-page .nav-sidebar-toggle { background: var(--ui-surface); color: var(--ui-ink); border: 0; border-radius: 10px; }
body.ui.chat-page .nav-language-select { background: var(--ui-surface); color: var(--ui-ink); border: 1px solid transparent; border-radius: var(--ui-pill); padding: 7px 28px 7px 12px; font-size: 0.82rem; font-weight: 500; }
body.ui.chat-page .nav-language-select option { color: var(--ui-ink); background: var(--ui-white); }
body.ui.chat-page .user-menu-trigger, body.ui.chat-page .auth-link { background: var(--ui-surface); color: var(--ui-ink); border-radius: var(--ui-pill); padding: 7px 14px; font-size: 0.84rem; font-weight: 500; border: 0; }
body.ui.chat-page .user-menu-trigger:hover, body.ui.chat-page .auth-link:hover { background: var(--ui-surface-2); }
body.ui.chat-page .guest-counter { background: var(--ui-tint); color: var(--ui-primary); border-radius: var(--ui-pill); font-weight: 500; }
body.ui.chat-page .user-menu { border-radius: 14px; border: 1px solid var(--ui-rule); box-shadow: 0 12px 40px rgba(29,29,31,0.16); overflow: hidden; }
body.ui.chat-page .user-menu a, body.ui.chat-page .user-menu button { color: var(--ui-ink); } body.ui.chat-page .user-menu a:hover, body.ui.chat-page .user-menu button:hover { background: var(--ui-surface); }
body.ui.chat-page .mobile-account-drawer { background: var(--ui-white); border-bottom: 1px solid var(--ui-rule); box-shadow: 0 12px 30px rgba(29,29,31,0.12); }
body.ui.chat-page .mobile-drawer-link { color: var(--ui-ink); }
/* the sidebar */
body.ui.chat-page .family-sidebar { background: var(--ui-surface); border-right: 1px solid var(--ui-rule); }
body.ui.chat-page .family-sidebar-title, body.ui.chat-page .past-conversations-title { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-ink-3); font-weight: 600; }
body.ui.chat-page .conversation-item { background: transparent; border: 0; border-radius: var(--ui-radius-sm); padding: 10px 12px; margin: 2px 0; }
body.ui.chat-page .conversation-item:hover { background: var(--ui-surface-2); }
body.ui.chat-page .conversation-item.active { background: var(--ui-white); box-shadow: var(--ui-shadow); }
body.ui.chat-page .conversation-title { color: var(--ui-ink); font-weight: 600; font-size: 14px; }
body.ui.chat-page .conversation-meta { color: var(--ui-ink-3); font-size: 12px; }
body.ui.chat-page .delete-conversation-btn { opacity: 0.55; } body.ui.chat-page .delete-conversation-btn:hover { opacity: 1; }
body.ui.chat-page .family-member-select { border: 1px solid var(--ui-rule); border-radius: var(--ui-pill); background: var(--ui-white); color: var(--ui-ink); padding: 8px 12px; }
body.ui.chat-page .add-family-member-btn, body.ui.chat-page .history-button, body.ui.chat-page .save-button-container button, body.ui.chat-page .save-button-container a:not(.journey-chip) { background: var(--ui-white); color: var(--ui-primary); border: 1px solid var(--ui-rule); border-radius: var(--ui-pill); font-weight: 600; font-size: 13px; padding: 8px 14px; }
body.ui.chat-page .history-button:hover, body.ui.chat-page .add-family-member-btn:hover, body.ui.chat-page .save-button-container button:hover { background: var(--ui-surface); }
body.ui.chat-page .save-button-container .btn-primary, body.ui.chat-page .save-button-container button.primary { background: var(--ui-primary); color: #fff; border-color: var(--ui-primary); }
body.ui.chat-page .journey-chip { background: var(--ui-tint); color: var(--ui-primary); border: 0; font-weight: 600; }
body.ui.chat-page .journey-chip:hover { background: var(--ui-tint-2); }
body.ui.chat-page .past-conv-shortcut { background: var(--ui-surface); border-bottom: 1px solid var(--ui-rule); }
body.ui.chat-page .past-conv-shortcut-btn { color: var(--ui-ink); font-weight: 500; }
/* the conversation */
body.ui.chat-page .conversation-display { padding: 24px 20px 12px; scroll-behavior: auto; }
body.ui.chat-page .user-message, body.ui.chat-page .assistant-message, body.ui.chat-page .analyzing-indicator, body.ui.chat-page .reason-card { max-width: 820px; margin-left: auto; margin-right: auto; }
body.ui.chat-page .user-message { background: var(--ui-tint); color: var(--ui-ink); border: 0; border-left: 0; border-radius: var(--ui-radius) var(--ui-radius) 6px var(--ui-radius); padding: 12px 16px; font-weight: 500; font-size: 16px; line-height: 1.5; max-width: min(820px, 82%); margin-left: auto; margin-right: 0; width: fit-content; }
@media (min-width: 900px) { body.ui.chat-page .user-message { margin-right: max(0px, calc((100% - 820px) / 2)); } }
/* a reply never widens the page: long links wrap, tables and code scroll inside the message */
body.ui.chat-page .user-message, body.ui.chat-page .assistant-message { min-width: 0; overflow-wrap: anywhere; }
body.ui.chat-page .assistant-message table { display: block; max-width: 100%; overflow-x: auto; }
body.ui.chat-page .assistant-message pre { max-width: 100%; overflow-x: auto; }
body.ui.chat-page .assistant-message img { max-width: 100%; height: auto; }
body.ui.chat-page .assistant-message { color: var(--ui-ink); font-size: 16px; line-height: 1.6; padding: 6px 0 14px; }
body.ui.chat-page .assistant-message h1, body.ui.chat-page .assistant-message h2, body.ui.chat-page .assistant-message h3, body.ui.chat-page .assistant-message h4 { color: var(--ui-ink); font-weight: 600; letter-spacing: -0.01em; }
body.ui.chat-page .assistant-message a { color: var(--ui-primary); }
body.ui.chat-page .assistant-message code { background: var(--ui-surface); border-radius: 6px; padding: 1px 6px; }
body.ui.chat-page .assistant-message blockquote { border-left: 3px solid var(--ui-primary); background: var(--ui-surface); border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; }
body.ui.chat-page .analyzing-indicator { background: var(--ui-surface); border-radius: 14px; color: var(--ui-ink-2); }
body.ui.chat-page .empty-state { color: var(--ui-ink-3); }
body.ui.chat-page .attachment-tag { background: var(--ui-surface); border: 1px solid var(--ui-rule); border-radius: 10px; color: var(--ui-ink-2); }
/* the composer: a rounded field with the tools inside it, the send pill in the one green */
body.ui.chat-page .input-box-container { border-top: 0; background: var(--ui-white); padding: 10px 20px calc(12px + env(safe-area-inset-bottom, 0px)); }
body.ui.chat-page .input-row { max-width: 820px; margin: 0 auto; border: 1px solid var(--ui-rule); background: var(--ui-surface); border-radius: 24px; padding: 6px 6px 6px 16px; align-items: flex-end; gap: 6px; transition: border-color .18s, box-shadow .18s, background-color .18s; }
body.ui.chat-page .input-row:focus-within { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-tint); background: var(--ui-white); }
body.ui.chat-page .message-input { background: transparent; color: var(--ui-ink); caret-color: var(--ui-primary); font-family: var(--ui-font); font-size: 16px; line-height: 1.5; padding: 9px 0; }
body.ui.chat-page .message-input::placeholder { color: var(--ui-ink-3); }
body.ui.chat-page .send-button { background: var(--ui-primary); color: #fff; border-radius: var(--ui-pill); height: 38px; min-width: 0; padding: 0 16px; font-weight: 600; }
body.ui.chat-page .send-button:hover:not(:disabled) { background: var(--ui-primary-hover); }
body.ui.chat-page .send-button:disabled { background: var(--ui-surface-2); color: var(--ui-ink-3); opacity: 1; }
body.ui.chat-page .attach-btn, body.ui.chat-page .camera-btn, body.ui.chat-page .mic-btn, body.ui.chat-page .left-buttons button, body.ui.chat-page .left-buttons label { width: 36px; height: 36px; border-radius: 50%; background: var(--ui-white); border: 1px solid var(--ui-rule); color: var(--ui-ink-2); display: inline-flex; align-items: center; justify-content: center; }
body.ui.chat-page .attach-btn:hover, body.ui.chat-page .camera-btn:hover { background: var(--ui-surface-2); }
body.ui.chat-page .file-preview { background: transparent; }
body.ui.chat-page .file-chip { background: var(--ui-white); border: 1px solid var(--ui-rule); border-radius: 12px; }
body.ui.chat-page .nudge-soft, body.ui.chat-page #trialNudgeBanner { border-radius: 14px; background: var(--ui-surface); border: 1px solid var(--ui-rule); color: var(--ui-ink); }
body.ui.chat-page .nudge-btn { background: var(--ui-primary); color: #fff; border-radius: var(--ui-pill); }
body.ui.chat-page .drag-overlay { background: rgba(245,245,247,0.92); } body.ui.chat-page .drag-overlay-content { color: var(--ui-ink); }
body.ui.chat-page .history-modal-content, body.ui.chat-page .subscription-modal-content, body.ui.chat-page .cookie-consent-modal { border-radius: var(--ui-radius); }
body.ui.chat-page .btn-primary, body.ui.chat-page .cookie-consent-btn.primary { background: var(--ui-primary); border-radius: var(--ui-pill); }
body.ui.chat-page .btn-secondary { border-radius: var(--ui-pill); }
body.ui.chat-page #chatUpgradeBanner { background: var(--ui-ink); border-radius: var(--ui-radius); }
@media (max-width: 768px) {
  body.ui.chat-page .conversation-display { padding: 14px 14px 8px; }
  body.ui.chat-page .user-message { max-width: 88%; }
  body.ui.chat-page .input-box-container { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
  body.ui.chat-page .input-row { padding: 4px 4px 4px 14px; border-radius: 22px; }
  body.ui.chat-page .send-button { height: 36px; padding: 0 14px; }
  body.ui .jp-head { padding: 16px 16px 14px; } body.ui .panel { padding: 14px 15px; }
}

/* third pass (2026-10-17): the journey rules are scoped to body.ui.jp-page - generic class names (.bar, .panel, .input, .menu, .chips, .empty, .q, .photo, .box, .danger) also exist in chat.html, and body.ui .bar {height:6px} had squashed the chat's journey-chip strip to a 6px band */
/* second pass (2026-10-17): long values wrap inside the whiteboard; a placeholder never breaks into a cut second line */
body.ui.jp-page .wb { min-width: 0; } body.ui.jp-page .wb .v { white-space: normal; overflow-wrap: anywhere; }
body.ui.chat-page .message-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ui.chat-page .message-input:focus { outline: none; }

/* ───────────────────────── the app pages (2026-10-17) ─────────────────────────
   My Health (dashboard.html), Account, Family, Plans, Payment, Checkout, Sign in, the password pages and
   Feedback. Each loads this file last and carries <body class="ui app-page …-page">. The green gradient
   body, white-on-green header and 12px cards give way to the home page's surface, ink header and 18px
   cards; every control becomes a pill in the one green. Overrides only - no markup changed. */
body.ui.app-page { background: var(--ui-surface); color: var(--ui-ink); padding: 20px 16px 32px; }
body.ui.app-page.has-top-nav { padding-top: 84px; }
body.ui.app-page .container { max-width: 1100px; }
/* the page header */
body.ui.app-page .header { color: var(--ui-ink); margin-bottom: 22px; gap: 12px; flex-wrap: wrap; }
body.ui.app-page .header h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.015em; color: var(--ui-ink); margin: 0; }
body.ui.app-page .header p { color: var(--ui-ink-2); opacity: 1; font-size: 16px; }
body.ui.app-page .header-actions a, body.ui.app-page .header-actions button { background: var(--ui-white); white-space: nowrap; color: var(--ui-primary); border: 1px solid var(--ui-rule); border-radius: var(--ui-pill); padding: 8px 14px; font-size: 13px; font-weight: 600; }
body.ui.app-page .header-actions a:hover, body.ui.app-page .header-actions button:hover { background: var(--ui-surface-2); }
/* cards */
body.ui.app-page .card, body.ui.app-page .payment-card, body.ui.app-page .checkout-card, body.ui.app-page .promo-section, body.ui.app-page .plan-card, body.ui.app-page .auth-container, body.ui.app-page .forgot-container, body.ui.app-page .reset-container, body.ui.app-page .feedback-card { background: var(--ui-white); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); border: 1px solid var(--ui-rule); }
body.ui.app-page .card { padding: 20px 22px; }
body.ui.app-page .card h2 { color: var(--ui-ink); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
body.ui.app-page .card-icon { font-size: 20px; }
body.ui.app-page .success-banner { background: var(--ui-tint); color: var(--ui-primary); border: 0 !important; border-radius: 14px; }
body.ui.app-page .loading { color: var(--ui-ink-3); }
body.ui.app-page .error-message, body.ui.app-page .alert-error { background: var(--ui-danger-bg); color: var(--ui-danger); border-radius: 12px; border-left: 0; }
body.ui.app-page .alert-success, body.ui.app-page .success-message, body.ui.app-page .promo-result.success, body.ui.app-page .promo-badge, body.ui.app-page .risk-reversal { background: var(--ui-tint); color: var(--ui-primary); border-radius: 12px; border-left: 0; }
body.ui.app-page .alert-warning, body.ui.app-page .warning-box, body.ui.app-page .info-box, body.ui.app-page .encryption-note, body.ui.app-page .plan-limit { background: var(--ui-surface); color: var(--ui-ink-2); border-left: 3px solid var(--ui-primary); border-radius: 0 12px 12px 0; }
body.ui.app-page .warning-box, body.ui.app-page .alert-warning, body.ui.app-page .encryption-note { border-left-color: var(--ui-warn); color: var(--ui-ink); }
/* buttons and fields */
body.ui.app-page .btn, body.ui.app-page .refer-friend-btn, body.ui.app-page .add-member-btn, body.ui.app-page .select-plan-btn, body.ui.app-page .btn-primary, body.ui.app-page .submit-button, body.ui.app-page .submit-btn, body.ui.app-page .promo-input-group button, body.ui.app-page .settings-btn-primary, body.ui.app-page .home-btn.primary, body.ui.app-page form button[type=submit], body.ui.app-page .payment-card button, body.ui.app-page .auth-container button { background: var(--ui-primary); color: #fff; border: 0; border-radius: var(--ui-pill); font-weight: 600; box-shadow: none; }
body.ui.app-page .btn:hover, body.ui.app-page .refer-friend-btn:hover, body.ui.app-page .add-member-btn:hover, body.ui.app-page .select-plan-btn:hover, body.ui.app-page .btn-primary:hover, body.ui.app-page .submit-button:hover, body.ui.app-page .submit-btn:hover, body.ui.app-page .promo-input-group button:hover, body.ui.app-page .payment-card button:hover:not(:disabled), body.ui.app-page .auth-container button:hover { background: var(--ui-primary-hover); transform: none; box-shadow: none; }
body.ui.app-page .btn.secondary, body.ui.app-page .btn-edit, body.ui.app-page .settings-btn:not(.settings-btn-primary):not(.settings-btn-danger), body.ui.app-page .home-btn { background: var(--ui-white); color: var(--ui-primary); border: 1px solid var(--ui-rule); border-radius: var(--ui-pill); font-weight: 600; }
body.ui.app-page .btn.secondary:hover, body.ui.app-page .btn-edit:hover, body.ui.app-page .home-btn:hover { background: var(--ui-surface); }
body.ui.app-page .btn.danger, body.ui.app-page .btn-delete, body.ui.app-page .settings-btn-danger { background: var(--ui-danger-bg); color: var(--ui-danger); border: 0; border-radius: var(--ui-pill); }
body.ui.app-page .btn-delete:disabled { background: var(--ui-surface-2); color: var(--ui-ink-3); }
body.ui.app-page .card button, body.ui.app-page .card a.btn, body.ui.app-page .card input[type=button] { border-radius: var(--ui-pill) !important; }
body.ui.app-page .card input[type=text], body.ui.app-page .card input[type=email], body.ui.app-page .card input[type=password], body.ui.app-page .card input[type=number], body.ui.app-page .card input[type=date], body.ui.app-page .card select, body.ui.app-page .card textarea { border-radius: 12px !important; border: 1px solid var(--ui-rule) !important; background: var(--ui-surface); }
body.ui.app-page input[type=text], body.ui.app-page input[type=email], body.ui.app-page input[type=password], body.ui.app-page input[type=number], body.ui.app-page input[type=date], body.ui.app-page input[type=tel], body.ui.app-page select, body.ui.app-page textarea, body.ui.app-page .stripe-element, body.ui.app-page #card-element, body.ui.app-page .form-input, body.ui.app-page .form-textarea, body.ui.app-page .settings-input { border: 1px solid var(--ui-rule); border-radius: 12px; background: var(--ui-surface); color: var(--ui-ink); caret-color: var(--ui-primary); font-family: var(--ui-font); transition: border-color .18s, box-shadow .18s, background-color .18s; }
body.ui.app-page input:focus, body.ui.app-page select:focus, body.ui.app-page textarea:focus, body.ui.app-page .stripe-element.StripeElement--focus, body.ui.app-page #card-element.StripeElement--focus, body.ui.app-page .form-input:focus, body.ui.app-page .form-textarea:focus { outline: none; border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-tint); background: var(--ui-white); }
body.ui.app-page input::placeholder, body.ui.app-page textarea::placeholder { color: var(--ui-ink-3); }
body.ui.app-page label, body.ui.app-page .form-label, body.ui.app-page .form-group label { color: var(--ui-ink); font-weight: 500; }
body.ui.app-page .back-link a { color: var(--ui-primary); font-weight: 500; }
body.ui.app-page .site-footer { background: transparent; color: var(--ui-ink-3); border-top: 1px solid var(--ui-rule); padding: 18px 20px 0; }
body.ui.app-page .site-footer a { color: var(--ui-ink-2); } body.ui.app-page .site-footer a:hover { color: var(--ui-primary); }
/* the modal (family page) */
body.ui.app-page .modal { background: rgba(29,29,31,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.ui.app-page .modal-content { border-radius: var(--ui-radius); box-shadow: 0 20px 60px rgba(29,29,31,0.25); }
body.ui.app-page .modal-header h3 { color: var(--ui-ink); font-weight: 600; }

/* My Health (dashboard.html) */
body.ui.dash-page .home-ask { border-left: 0; border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); border: 1px solid var(--ui-rule); padding: 20px 22px; }
body.ui.dash-page .home-ask .ask-title { color: var(--ui-ink); font-weight: 600; letter-spacing: -0.015em; font-size: 22px; }
body.ui.dash-page .home-ask .ask-sub { color: var(--ui-ink-2); }
body.ui.dash-page .home-ask .ask-row input { border: 1px solid var(--ui-rule); border-radius: 14px; background: var(--ui-surface); padding: 12px 16px; }
body.ui.dash-page .home-ask .ask-row button { border-radius: var(--ui-pill); padding: 12px 22px; }
body.ui.dash-page .home-ask .ask-links a { color: var(--ui-primary); }
body.ui.dash-page .home-welcome { background: var(--ui-tint); border: 0; border-radius: 14px; color: var(--ui-ink); }
body.ui.dash-page .home-person-bar { color: var(--ui-ink); }
body.ui.dash-page .home-person-bar .readiness { background: var(--ui-white); border: 1px solid var(--ui-rule); color: var(--ui-ink-2); }
body.ui.dash-page .home-person-bar .bar { background: var(--ui-surface-2); } body.ui.dash-page .home-person-bar .bar > i { background: var(--ui-primary); }
body.ui.dash-page .home-person-bar .setup-btn { background: var(--ui-primary); color: #fff; }
body.ui.dash-page .home-loading, body.ui.dash-page .home-empty { color: var(--ui-ink-3); font-style: normal; }
body.ui.dash-page .home-error { background: var(--ui-warn-bg); color: var(--ui-warn); border-radius: 12px; }
body.ui.dash-page .home-layer h2, body.ui.dash-page .start-title { color: var(--ui-ink-3); opacity: 1; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
body.ui.dash-page .home-card, body.ui.dash-page .home-tile { background: var(--ui-white); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); border: 1px solid var(--ui-rule); border-left: 4px solid var(--ui-rule); padding: 16px 18px; }
body.ui.dash-page .home-card.now { border-left-color: var(--ui-danger); } body.ui.dash-page .home-card.ask { border-left-color: var(--ui-warn); } body.ui.dash-page .home-card.ok, body.ui.dash-page .home-card.journey { border-left-color: var(--ui-primary); }
body.ui.dash-page .home-card .t { color: var(--ui-ink); font-weight: 600; font-size: 16px; } body.ui.dash-page .home-card .d { color: var(--ui-ink-2); }
body.ui.dash-page .home-card .meta, body.ui.dash-page .home-card.journey .jsource, body.ui.dash-page .home-card.journey .jsub { color: var(--ui-ink-3); }
body.ui.dash-page .home-card.journey .jday, body.ui.dash-page .home-card.journey .jnums, body.ui.dash-page .home-card.journey .jopen { color: var(--ui-primary); }
body.ui.dash-page .home-card.journey .jplan { background: var(--ui-surface); border-radius: 12px; }
body.ui.dash-page .home-card.journey .chip { background: var(--ui-tint); color: var(--ui-primary); }
body.ui.dash-page .home-card.journey .jraise { border-radius: 12px; }
body.ui.dash-page .home-card.journey.tile:hover { box-shadow: 0 10px 30px rgba(29,29,31,0.10); }
body.ui.dash-page .home-card.start.offered { box-shadow: 0 0 0 3px var(--ui-tint); }
body.ui.dash-page .home-card input[type=date], body.ui.dash-page .home-card input[type=text], body.ui.dash-page .home-card input[type=number], body.ui.dash-page .home-card textarea { border: 1px solid var(--ui-rule); border-radius: 12px; background: var(--ui-surface); }
body.ui.dash-page .home-card .card-confirm { border-radius: 12px; }
body.ui.dash-page .home-btn { padding: 7px 14px; }
body.ui.dash-page .home-tile { border-left: 1px solid var(--ui-rule); cursor: pointer; transition: box-shadow .18s, transform .08s; }
body.ui.dash-page .home-tile:hover { box-shadow: 0 10px 30px rgba(29,29,31,0.10); }
body.ui.dash-page .home-tile.sel { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-tint); }
body.ui.dash-page .home-tile .n { color: var(--ui-ink); font-weight: 600; } body.ui.dash-page .home-tile .n::after { content: " →"; color: var(--ui-primary); font-weight: 500; }
body.ui.dash-page .home-tile .s, body.ui.dash-page .home-tile .cnt { color: var(--ui-ink-3); }
body.ui.dash-page .home-tile .bar { background: var(--ui-surface-2); } body.ui.dash-page .home-tile .bar > i { background: var(--ui-primary); }
body.ui.dash-page .home-tile .setup-mark { color: var(--ui-warn); }
body.ui.dash-page .answer-style button { border-radius: var(--ui-pill); border-color: var(--ui-rule); } body.ui.dash-page .answer-style button.on { background: var(--ui-primary); }
body.ui.dash-page .guide-modal { background: rgba(29,29,31,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.ui.dash-page .guide-modal .box { border-radius: var(--ui-radius); }

/* Account */
body.ui.account-page .stat { border-bottom-color: var(--ui-rule); }
body.ui.account-page .stat-label { color: var(--ui-ink-3); } body.ui.account-page .stat-value { color: var(--ui-ink); font-variant-numeric: tabular-nums; }
body.ui.account-page .status-badge { border-radius: var(--ui-pill); text-transform: none; font-size: 12px; letter-spacing: 0; }
body.ui.account-page .status-badge.active, body.ui.account-page .status-badge.success { background: var(--ui-tint); color: var(--ui-primary); }
body.ui.account-page .status-badge.past-due, body.ui.account-page .status-badge.pending { background: var(--ui-warn-bg); color: var(--ui-warn); }
body.ui.account-page .status-badge.canceled { background: var(--ui-danger-bg); color: var(--ui-danger); }
body.ui.account-page .refer-description, body.ui.account-page .refer-discount { color: var(--ui-ink-2); }
body.ui.account-page .family-member, body.ui.account-page .billing-item { background: var(--ui-surface); border-radius: 12px; }
body.ui.account-page .member-name { color: var(--ui-ink); } body.ui.account-page .member-relationship { color: var(--ui-ink-3); }
body.ui.account-page .card p[style*="color:#4B5563"], body.ui.account-page .card p[style*="color:#6B7280"] { color: var(--ui-ink-2) !important; }

/* a family member in a list opens the chat as that person */
body.ui.app-page .member-info.to-chat { cursor: pointer; border-radius: 12px; transition: background-color .18s; }
body.ui.app-page .member-info.to-chat:hover { background: var(--ui-surface-2); }
body.ui.app-page .member-info.to-chat .member-name::after { content: " →"; color: var(--ui-primary); font-weight: 500; }
body.ui.app-page .member-avatar { background: var(--ui-primary); }

/* Family */
body.ui.family-page .member-card { background: var(--ui-surface); border-radius: 14px; padding: 14px 16px; }
body.ui.family-page .member-name { color: var(--ui-ink); } body.ui.family-page .member-meta { color: var(--ui-ink-3); }
body.ui.family-page .member-actions button { border-radius: var(--ui-pill); }
body.ui.family-page .empty-state { color: var(--ui-ink-3); }
body.ui.family-page .form-group input, body.ui.family-page .form-group select { font-size: 16px; }

/* Plans */
body.ui.plans-page .header { text-align: center; display: block; }
body.ui.plans-page .header h1 { font-size: 36px; }
body.ui.plans-page .plan-card { padding: 32px 28px; transition: box-shadow .18s, transform .18s; border: 1px solid var(--ui-rule); }
body.ui.plans-page .plan-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(29,29,31,0.10); }
body.ui.plans-page .plan-card.featured { border: 2px solid var(--ui-primary); }
body.ui.plans-page .badge { background: var(--ui-primary); border-radius: var(--ui-pill); text-transform: none; letter-spacing: 0; font-size: 12px; }
body.ui.plans-page .plan-name { color: var(--ui-ink); font-weight: 600; letter-spacing: -0.015em; }
body.ui.plans-page .plan-price { color: var(--ui-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
body.ui.plans-page .plan-price .plan-price-period, body.ui.plans-page .plan-period { color: var(--ui-ink-3); }
body.ui.plans-page .plan-promo-tag { background: var(--ui-tint); color: var(--ui-primary); border: 0; border-radius: var(--ui-pill); }
body.ui.plans-page .plan-features li { color: var(--ui-ink-2); border-bottom-color: var(--ui-rule); }
body.ui.plans-page .plan-features li:before { color: var(--ui-primary); }
body.ui.plans-page .select-plan-btn { padding: 14px; }
body.ui.plans-page .promo-section h3 { color: var(--ui-ink); font-weight: 600; }
body.ui.plans-page .promo-result.error { background: var(--ui-danger-bg); color: var(--ui-danger); border-radius: 12px; }

/* Payment and Checkout */
body.ui.pay-page .container { max-width: 620px; }
body.ui.pay-page .header { text-align: center; display: block; }
body.ui.pay-page .payment-card, body.ui.pay-page .checkout-card { padding: 28px 28px 24px; }
body.ui.pay-page .section h2, body.ui.pay-page .section h3 { color: var(--ui-ink); font-weight: 600; border-bottom: 1px solid var(--ui-rule); }
body.ui.pay-page .order-summary { background: var(--ui-surface); border-radius: 14px; }
body.ui.pay-page .order-item { color: var(--ui-ink-2); } body.ui.pay-page .order-item.total { color: var(--ui-ink); border-top-color: var(--ui-rule); font-variant-numeric: tabular-nums; }
body.ui.pay-page .plan-summary { background: var(--ui-tint); border-left: 0; border-radius: 14px; }
body.ui.pay-page .plan-summary h2 { color: var(--ui-primary); font-weight: 600; } body.ui.pay-page .plan-summary .price { color: var(--ui-ink); }
body.ui.pay-page .plan-features { color: var(--ui-ink-2); }
body.ui.pay-page .checkbox-group label { color: var(--ui-ink-2); } body.ui.pay-page .checkbox-group label a { color: var(--ui-primary); }
body.ui.pay-page .secure-badge { color: var(--ui-ink-3); }
body.ui.pay-page .checkout-nav a img { filter: brightness(0) saturate(100%) invert(14%) sepia(55%) saturate(1200%) hue-rotate(120deg) brightness(90%); }
body.ui.pay-page .checkout-nav .language-selector label { color: var(--ui-ink-2); }
body.ui.pay-page .checkout-nav .language-select { border-radius: var(--ui-pill); border: 1px solid var(--ui-rule); background: var(--ui-white); color: var(--ui-ink); }
body.ui.pay-page .payment-card button:disabled, body.ui.pay-page .submit-button:disabled { background: var(--ui-surface-2); color: var(--ui-ink-3); }

/* Sign in */
body.ui.auth-page { padding: 20px 16px; }
body.ui.auth-page .auth-header { border-bottom: 1px solid var(--ui-rule); }
body.ui.auth-page .auth-header .auth-tagline { color: var(--ui-ink-3); font-weight: 500; letter-spacing: .04em; }
body.ui.auth-page .tabs { background: var(--ui-surface); border-bottom: 1px solid var(--ui-rule); }
body.ui.auth-page .tab { color: var(--ui-ink-2); border-bottom-width: 2px; }
body.ui.auth-page .tab:hover { background: var(--ui-surface-2); }
body.ui.auth-page .tab.active { color: var(--ui-primary); background: var(--ui-white); border-bottom-color: var(--ui-primary); }
body.ui.auth-page .tab-content { padding: 28px 32px 32px; }
body.ui.auth-page .auth-container button:disabled { background: var(--ui-surface-2); color: var(--ui-ink-3); }
body.ui.auth-page .password-requirements { color: var(--ui-ink-3); }
body.ui.auth-page .site-footer { background: transparent; }

/* Forgot and reset password */
body.ui.pw-page .forgot-container, body.ui.pw-page .reset-container { margin: 60px auto; padding: 32px 32px 28px; }
body.ui.pw-page .forgot-container h1, body.ui.pw-page .reset-container h1 { color: var(--ui-ink); font-size: 24px; font-weight: 600; letter-spacing: -0.015em; }
body.ui.pw-page .forgot-container p, body.ui.pw-page .reset-container p { color: var(--ui-ink-2); }
body.ui.pw-page .form-group input { font-size: 16px; padding: 12px 14px; }
body.ui.pw-page .language-select { border-radius: var(--ui-pill); border: 1px solid var(--ui-rule); background: var(--ui-white); color: var(--ui-ink); font-weight: 500; }

/* Feedback */
body.ui.feedback-page { padding: 0; font-family: var(--ui-font); }
body.ui.feedback-page nav { background: rgba(255,255,255,0.86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--ui-rule); box-shadow: none; }
body.ui.feedback-page .nav-logo, body.ui.feedback-page .nav-center a, body.ui.feedback-page .nav-tagline { color: var(--ui-ink); }
body.ui.feedback-page .nav-logo-full { filter: none; }
body.ui.feedback-page .nav-auth-link, body.ui.feedback-page .user-menu-trigger { background: var(--ui-surface); color: var(--ui-ink); border-radius: var(--ui-pill); }
body.ui.feedback-page .nav-auth-link:hover, body.ui.feedback-page .user-menu-trigger:hover { background: var(--ui-surface-2); }
body.ui.feedback-page .nav-language-select { border: 1px solid var(--ui-rule); box-shadow: none; background-color: var(--ui-surface); color: var(--ui-ink); font-weight: 500; padding: 8px 32px 8px 14px; font-size: .9rem; }
body.ui.feedback-page .nav-language-select:hover { transform: none; box-shadow: none; background-color: var(--ui-surface-2); }
body.ui.feedback-page .hamburger span { background: var(--ui-ink); }
body.ui.feedback-page .mobile-menu { background: var(--ui-white); border-bottom: 1px solid var(--ui-rule); box-shadow: 0 12px 30px rgba(29,29,31,0.12); }
body.ui.feedback-page .mobile-menu a { color: var(--ui-ink); } body.ui.feedback-page .mobile-menu a:hover { background: var(--ui-surface); }
body.ui.feedback-page .user-menu { border-radius: 14px; border: 1px solid var(--ui-rule); box-shadow: 0 12px 40px rgba(29,29,31,0.16); }
body.ui.feedback-page .feedback-hero { background: var(--ui-primary); border-radius: var(--ui-radius); max-width: 680px; margin: 24px auto 0; padding: 40px 32px 34px; }
body.ui.feedback-page .feedback-hero h1 { font-family: var(--ui-font); font-weight: 600; letter-spacing: -0.015em; font-size: 2rem; }
body.ui.feedback-page .feedback-content { padding-top: 24px; }
body.ui.feedback-page .feedback-card { padding: 32px 32px 28px; }
body.ui.feedback-page .form-label { color: var(--ui-ink); } body.ui.feedback-page .form-label .optional { color: var(--ui-ink-3); }
body.ui.feedback-page .form-divider { border-color: var(--ui-rule); }
body.ui.feedback-page .star-btn, body.ui.feedback-page .rec-btn, body.ui.feedback-page .helpful-btn { border-radius: var(--ui-pill); border: 1px solid var(--ui-rule); background: var(--ui-white); color: var(--ui-ink); }
body.ui.feedback-page .rec-btn.selected, body.ui.feedback-page .helpful-btn.selected, body.ui.feedback-page .rec-btn.active, body.ui.feedback-page .helpful-btn.active { background: var(--ui-primary); color: #fff; border-color: var(--ui-primary); }
body.ui.feedback-page .rec-scale-label { color: var(--ui-ink-3); }
body.ui.feedback-page .submit-btn { padding: 14px 22px; }
body.ui.feedback-page .back-btn { background: var(--ui-primary); color: #fff; border-radius: var(--ui-pill); }
body.ui.feedback-page .field-error { color: var(--ui-danger); }
@media (max-width: 768px) {
  body.ui.app-page { padding: 16px 12px 28px; }
  body.ui.app-page.has-top-nav { padding-top: 76px; }
  body.ui.app-page .header { flex-direction: row; text-align: left; align-items: center; }
  body.ui.app-page .header h1 { font-size: 24px; }
  body.ui.app-page .card { padding: 16px; }
  body.ui.feedback-page nav { padding: 0 16px; }
  body.ui.feedback-page .feedback-hero { margin: 12px 12px 0; padding: 28px 20px 24px; }
}
/* narrow phones (2026-10-17 sweep): on pages without the person pill (plans, payment) the language select and the
   account pill ran past the right edge at 375px; the name truncates and the select narrows instead */
@media (max-width: 480px) {
  body.ui nav.top-nav .top-nav-right { gap: 6px; }
  body.ui nav.top-nav .user-menu-trigger { padding-left: 10px; padding-right: 10px; }
  body.ui nav.top-nav .user-menu-trigger #userName { display: inline-block; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  body.ui nav.top-nav .language-select { max-width: 64px; }
}
/* journey board on a 375px phone (2026-10-17 sweep): the four energy cells are 1fr tracks whose minimum is their
   content, so the board measured 411px and the phone zoomed the whole page out to fit; the cells may now shrink */
body.ui.jp-page .jp, body.ui.jp-page .jp-grid, body.ui.jp-page #jpBoard, body.ui.jp-page .panel, body.ui.jp-page .jp-chat { min-width: 0; max-width: 100%; }
body.ui.jp-page .budget > div { min-width: 0; overflow: hidden; }
body.ui.jp-page .budget .l { font-size: 10px; letter-spacing: .04em; overflow-wrap: anywhere; }
@media (max-width: 400px) { body.ui.jp-page .budget .n { font-size: 22px; } }
/* the guest sign-up banner in the chat (2026-10-17, seen on the iPhone simulator): a black strip with orange buttons,
   styled inline, so these override with !important; it becomes a tinted card with the one green */
body.ui.chat-page #chatUpgradeBanner { background: var(--ui-white); padding: 8px 12px 0; }
body.ui.chat-page #chatUpgradeBanner a { background: var(--ui-tint); border-radius: 14px; font-family: var(--ui-font); }
body.ui.chat-page #chatUpgradeBanner .banner-price { border-right-color: var(--ui-rule); }
body.ui.chat-page #chatUpgradeBanner .banner-price-label, body.ui.chat-page #chatUpgradeBanner .banner-price-sub { color: var(--ui-ink-3) !important; }
body.ui.chat-page #chatUpgradeBanner .banner-price-amount { color: var(--ui-primary) !important; font-variant-numeric: tabular-nums; }
body.ui.chat-page #chatUpgradeHeadline { color: var(--ui-ink) !important; }
body.ui.chat-page #chatUpgradeBanner .banner-bullet { color: var(--ui-ink-2) !important; }
body.ui.chat-page #chatUpgradeBanner .banner-bullet > span { color: var(--ui-primary) !important; }
body.ui.chat-page #chatUpgradeBtn, body.ui.chat-page #chatUpgradeBtnMobile { background: var(--ui-primary) !important; color: #fff !important; border-radius: var(--ui-pill) !important; letter-spacing: 0 !important; font-weight: 600 !important; }
body.ui.chat-page #chatUpgradeDismiss { color: var(--ui-ink-3); }
body.ui.chat-page .conversation-display { background: var(--ui-white); }   /* the phone rule painted it warm beige (245,243,240) */
/* the care team (Phase A, 2026-10-17): who to call, one tap on a phone */
body.ui.jp-page .call { background: var(--ui-tint); color: var(--ui-primary); border-radius: var(--ui-pill); font-weight: 600; }
body.ui.jp-page .call.num { background: var(--ui-surface); color: var(--ui-ink-2); font-weight: 500; }
body.ui.jp-page .ct-row { border-bottom-color: var(--ui-rule); } body.ui.jp-page .ct-name, body.ui.jp-page .ct-hours, body.ui.jp-page .ct-hint, body.ui.jp-page .ph-because { color: var(--ui-ink-3); } body.ui.jp-page .ph-who { color: var(--ui-primary); }