@import url('/app/fonts.css?v=da8ef1cbaa4e8ce4393bb5aca6d96d5e6f41b52f39a42f6def98073ae674c217');

:root {
  /* Botanical Wellness tokens — unified palette across all five screens. */
  --nc-canvas: #F7F8F3;
  --nc-surface: #F9FAF5;
  --nc-surface-low: #E8F2E8;
  --nc-surface-container: #E8F2E8;
  --nc-surface-high: #E4ECE0;
  --nc-surface-highest: #D8E0D4;
  --nc-text: #1A2B1E;
  --nc-text-muted: #5F7462;
  --nc-outline: #657A68;
  --nc-outline-variant: #E4ECE0;
  --nc-primary: #1e4b31;
  --nc-primary-container: #4e9e3a;
  --nc-primary-fixed: #A2F887;
  --nc-on-primary: #ffffff;
  --nc-ai: #4e9e3a;
  --nc-ai-container: #A2F887;
  --nc-ai-fixed: #E8F2E8;
  --nc-energy: #1e4b31;
  --nc-energy-container: #4e9e3a;
  --nc-energy-fixed: #E8F2E8;
  --nc-hero-start: #1e4b31;
  --nc-hero-mid: #2D6B45;
  --nc-hero-end: #2D6B45;
  --nc-hero-text: #ffffff;
  --nc-hero-active: #A2F887;
  --nc-space-1: 4px;
  --nc-space-2: 8px;
  --nc-space-3: 12px;
  --nc-space-4: 16px;
  --nc-space-5: 20px;
  --nc-space-6: 24px;
  --nc-space-8: 32px;
  --nc-gutter: 16px;
  --nc-gutter-desktop: 24px;
  --nc-radius-sm: 4px;
  --nc-radius: 8px;
  --nc-radius-md: 12px;
  --nc-radius-lg: 16px;
  --nc-radius-xl: 24px;
  --nc-radius-pill: 9999px;
  --nc-font-display: var(--font-app);
  --nc-font-body: var(--font-app);
  --nc-type-display-size: 32px;
  --nc-type-display-line: 38px;
  --nc-type-headline-xl-size: 40px;
  --nc-type-headline-xl-line: 48px;
  --nc-type-headline-lg-size: 26px;
  --nc-type-headline-lg-line: 32px;
  --nc-type-headline-md-size: 20px;
  --nc-type-headline-md-line: 26px;
  --nc-type-headline-sm-size: 18px;
  --nc-type-headline-sm-line: 24px;
  --nc-type-body-lg-size: 16px;
  --nc-type-body-lg-line: 24px;
  --nc-type-body-md-size: 14px;
  --nc-type-body-md-line: 20px;
  --nc-type-body-sm-size: 13px;
  --nc-type-body-sm-line: 18px;
  --nc-type-label-lg-size: 14px;
  --nc-type-label-lg-line: 20px;
  --nc-type-label-md-size: 13px;
  --nc-type-label-md-line: 16px;
  --nc-type-label-sm-size: 11px;
  --nc-type-label-sm-line: 14px;
  --nc-weight-regular: 400;
  --nc-weight-semibold: 600;
  --nc-weight-bold: 700;
  --nc-weight-extrabold: 800;
  --nc-shadow-card: 0 1px 3px rgba(30, 75, 49, 0.04), 0 6px 16px rgba(30, 75, 49, 0.02);
  --nc-shadow-overlay: 0 12px 32px -4px rgba(30, 75, 49, 0.08), 0 4px 12px -2px rgba(30, 75, 49, 0.03);
  --nc-shadow-primary: 0 12px 28px -6px rgba(30, 75, 49, 0.35);
  --nc-shadow-ai: 0 8px 24px -4px rgba(78, 158, 58, 0.12);
  --nc-shadow-nav: 0 8px 30px rgba(30, 75, 49, 0.08);
  --leaf: #4e9e3a;
  --deep: #02341c;
  --canvas: #F7F8F3;
  --ink: #1A2B1E;
  --muted: #5F7462;
  --line: #E4ECE0;
  --soft: #E8F2E8;
  --warm: #A2F887;
  --white: #fff;
  --font-app: Inter, ui-sans-serif, system-ui, sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #e8ede2;
  color: var(--ink);
  font-family: var(--font-app);
  -webkit-font-smoothing: antialiased;
}
/* Native form controls don't inherit color — without this, typed text stays black on dark inputs */
input,
select,
textarea {
  color: var(--ink);
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}
.phone {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--canvas);
  padding: 20px 16px calc(108px + env(safe-area-inset-bottom, 0px));
  position: relative;
}
@media (max-width: 480px) {
  .phone {
    padding: 16px 14px calc(108px + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 481px) and (max-width: 1024px) {
  .phone {
    max-width: 560px;
    padding: 24px 20px calc(108px + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 1025px) {
  .phone {
    max-width: 430px;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    min-height: 100dvh;
  }
}
.nc-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 30;
  pointer-events: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 481px) {
  .nc-nav {
    max-width: 560px;
  }
}
@media (min-width: 1025px) {
  .nc-nav {
    max-width: 430px;
  }
}
.nc-nav-outer {
  padding: 4px 16px 12px;
}
.nc-nav-pill {
  position: relative;
  height: 64px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 30px rgba(19, 27, 46, 0.08);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  padding: 0 8px;
  pointer-events: auto;
}
.screen-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.date {
  font-size: calc(11px * var(--text-scale, 1));
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.avatar {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--leaf);
  color: #fff;
  font-weight: 850;
}
.screen h2 {
  font-size: calc(26px * var(--text-scale, 1));
  letter-spacing: -0.05em;
  line-height: 1.05;
  margin: 0;
}
.sub {
  font-size: calc(12px * var(--text-scale, 1));
  color: var(--muted);
  margin: 6px 0 18px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 15px;
  margin-bottom: 11px;
}
.hero {
  background: var(--deep);
  color: #fff;
  border: 0;
  position: relative;
  overflow: hidden;
}
.hero:after {
  content: '';
  position: absolute;
  right: -45px;
  top: -60px;
  width: 160px;
  height: 160px;
  border: 22px solid #9bd66a44;
  border-radius: 50%;
}
.today-summary-card {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--nc-radius-lg);
  background: linear-gradient(135deg, var(--nc-hero-start) 0%, var(--nc-hero-mid) 58%, var(--nc-hero-end) 100%);
  color: var(--nc-hero-text);
  box-shadow: var(--nc-shadow-primary);
  padding: var(--nc-space-6);
}
.today-summary-card::before,
.today-summary-card::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.today-summary-card::before {
  width: 176px;
  height: 176px;
  right: 8px;
  top: 8px;
  background: rgba(133, 248, 196, 0.2);
  filter: blur(18px);
}
.today-summary-card::after {
  width: 160px;
  height: 160px;
  left: 8px;
  bottom: 8px;
  background: rgba(162, 248, 135, 0.2);
  filter: blur(18px);
}
.today-summary-content {
  position: relative;
  z-index: 1;
}
.today-summary-head,
.today-summary-title,
.today-summary-main,
.today-summary-remaining,
.today-summary-actions,
.today-summary-macro-head {
  display: flex;
  align-items: center;
}
.today-summary-head,
.today-summary-main {
  justify-content: space-between;
}
.today-summary-title {
  gap: var(--nc-space-2);
  font-family: var(--nc-font-display);
  font-size: calc(var(--nc-type-label-lg-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-lg-line);
  font-weight: var(--nc-weight-bold);
  letter-spacing: 0.01em;
}
.today-summary-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--nc-radius-md);
  background: rgba(255, 255, 255, 0.15);
  font-size: 20px;
  line-height: 1;
}
.today-summary-history {
  border: 0;
  border-radius: var(--nc-radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  padding: 6px 10px;
  font: inherit;
  font-size: calc(var(--nc-type-label-sm-size) * var(--text-scale, 1));
  font-weight: var(--nc-weight-semibold);
  cursor: pointer;
}
.today-summary-history:hover,
.today-summary-history:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.today-summary-main {
  gap: var(--nc-space-4);
  margin-top: var(--nc-space-6);
}
.today-summary-copy {
  min-width: 0;
  flex: 1;
}
.today-summary-overline {
  display: block;
  color: rgba(255, 255, 255, 0.82);
  font-size: calc(var(--nc-type-label-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-sm-line);
  font-weight: var(--nc-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.today-summary-remaining {
  gap: 6px;
  align-items: baseline;
  margin-top: 2px;
  white-space: nowrap;
}
.today-summary-remaining strong {
  font-family: var(--nc-font-display);
  font-size: calc(var(--nc-type-display-size) * var(--text-scale, 1));
  line-height: var(--nc-type-display-line);
  font-weight: var(--nc-weight-extrabold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
.today-summary-remaining span {
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--nc-font-display);
  font-size: calc(var(--nc-type-headline-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-headline-sm-line);
}
.today-summary-copy p,
.today-summary-copy small {
  display: block;
  color: rgba(255, 255, 255, 0.82);
  font-size: calc(var(--nc-type-body-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-body-sm-line);
}
.today-summary-copy p {
  margin: 2px 0 0;
}
.today-summary-copy small {
  margin-top: var(--nc-space-2);
  opacity: 1;
}
.today-summary-ring {
  position: relative;
  width: 96px;
  height: 96px;
  flex: none;
  display: grid;
  place-items: center;
}
.today-summary-ring svg {
  width: 96px;
  height: 96px;
  transform: rotate(-90deg);
}
.today-summary-ring-value {
  transition: stroke-dashoffset 0.35s ease;
}
.today-summary-ring > span {
  position: absolute;
  font-family: var(--nc-font-display);
  font-size: calc(var(--nc-type-headline-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-headline-sm-line);
  font-weight: var(--nc-weight-bold);
  font-variant-numeric: tabular-nums;
}
.today-summary-ring > span.unavailable {
  color: rgba(255, 255, 255, 0.78);
  font-size: calc(var(--nc-type-body-md-size) * var(--text-scale, 1));
}
.today-summary-macros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nc-space-2);
  margin-top: var(--nc-space-6);
}
.today-summary-macro {
  min-width: 0;
  min-height: 80px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--nc-radius-md);
  background: rgba(255, 255, 255, 0.14);
}
.today-summary-macro-head {
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  color: rgba(255, 255, 255, 0.92);
  font-size: calc(var(--nc-type-label-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-sm-line);
  font-weight: var(--nc-weight-semibold);
}
.today-summary-macro-head span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.today-summary-macro-head span:last-child {
  color: rgba(255, 255, 255, 0.82);
  font-size: calc(9px * var(--text-scale, 1));
  max-width: 100%;
  margin-left: auto;
  text-align: right;
  white-space: normal;
}
.today-summary-macro strong {
  display: block;
  margin-top: 8px;
  font-family: var(--nc-font-display);
  font-size: calc(var(--nc-type-label-lg-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-lg-line);
  font-weight: var(--nc-weight-bold);
  font-variant-numeric: tabular-nums;
}
.today-summary-macro small {
  display: block;
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.82);
  font-size: calc(9px * var(--text-scale, 1));
  line-height: 1.3;
}
.today-summary-macro.unknown strong {
  color: rgba(255, 255, 255, 0.82);
  font-size: calc(18px * var(--text-scale, 1));
}
.today-summary-macro-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--nc-space-6);
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--nc-radius-md);
  background: rgba(255, 255, 255, 0.12);
}
.today-summary-macro-note b {
  font-size: calc(var(--nc-type-label-md-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-md-line);
}
.today-summary-macro-note span {
  color: rgba(255, 255, 255, 0.82);
  font-size: calc(var(--nc-type-body-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-body-sm-line);
}
.today-summary-actions {
  gap: var(--nc-space-2);
  margin-top: var(--nc-space-6);
}
.today-summary-primary {
  flex: 1;
  min-height: 42px;
  border: 0;
  border-radius: var(--nc-radius-md);
  background: var(--nc-surface);
  color: var(--nc-primary);
  padding: 10px 14px;
  font: inherit;
  font-size: calc(var(--nc-type-label-lg-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-lg-line);
  font-weight: var(--nc-weight-bold);
  cursor: pointer;
  box-shadow: var(--nc-shadow-card);
}
.today-summary-primary:hover,
.today-summary-primary:focus-visible {
  background: var(--nc-surface-low);
}
.today-summary-primary:active {
  transform: scale(0.98);
}
/* Task 30 calorie presentation; opening titles now follow Task 37 below. */
.view[data-screen='today'] .today-summary-card {
  padding: var(--nc-space-4);
}
.view[data-screen='today'] .today-summary-icon {
  flex: none;
}
.view[data-screen='today'] .today-summary-main {
  gap: var(--nc-space-3);
  flex-wrap: wrap;
  margin-top: var(--nc-space-3);
}
.view[data-screen='today'] .today-summary-copy {
  flex: 1 1 156px;
}
.view[data-screen='today'] .today-summary-main--wide .today-summary-copy {
  flex-basis: 100%;
}
.view[data-screen='today'] .today-summary-remaining {
  flex-wrap: wrap;
  white-space: normal;
}
.view[data-screen='today'] .today-summary-remaining strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.view[data-screen='today'] .today-summary-copy small {
  margin-top: 4px;
}
.view[data-screen='today'] .today-summary-macros,
.view[data-screen='today'] .today-summary-macro-note {
  margin-top: var(--nc-space-3);
}
.view[data-screen='today'] .today-summary-macro {
  min-height: 0;
  padding: 8px;
}
.view[data-screen='today'] .today-summary-macro strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.view[data-screen='today'] .today-summary-macro-note {
  padding: 8px 10px;
}
.view[data-screen='today'] .today-summary-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: var(--nc-space-3);
}
.view[data-screen='today'] .today-summary-actions button {
  min-height: 44px;
  min-width: 0;
}
.view[data-screen='today'] .today-summary-actions button:focus-visible {
  outline: 2px solid var(--nc-hero-active);
  outline-offset: 3px;
}
/* ---- Today plan-progress module (Task 5 Part 1) ---- */
.nc-plan-progress {
  background: var(--nc-surface);
  border: 1px solid var(--nc-outline-variant);
  border-radius: var(--nc-radius-lg);
  padding: var(--nc-space-4);
  margin-bottom: var(--nc-space-3);
  box-shadow: var(--nc-shadow-card);
}
.nc-plan-progress-head {
  display: flex;
  align-items: center;
  gap: var(--nc-space-3);
}
.nc-plan-progress-badge {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--nc-radius-pill);
  background: var(--nc-ai-fixed);
  color: var(--nc-primary);
}
.nc-plan-progress-badge svg {
  width: 18px;
  height: 18px;
}
.nc-plan-progress-text {
  flex: 1;
  min-width: 0;
}
.nc-plan-progress-title {
  margin: 0;
  font-family: var(--nc-font-display);
  font-size: calc(var(--nc-type-headline-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-headline-sm-line);
  font-weight: var(--nc-weight-bold);
  color: var(--nc-text);
}
.nc-plan-progress-sub {
  margin: 1px 0 0;
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-body-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-body-sm-line);
  color: var(--nc-text-muted);
}
.nc-plan-progress-action {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 0;
  background: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-label-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-sm-line);
  font-weight: var(--nc-weight-semibold);
  color: var(--nc-primary);
}
.nc-plan-progress-action svg {
  width: 14px;
  height: 14px;
}
.nc-plan-progress-action:hover,
.nc-plan-progress-action:focus-visible {
  color: var(--nc-primary);
  text-decoration: underline;
}
.nc-plan-progress-track-area {
  margin-top: var(--nc-space-3);
}
.nc-plan-progress-track {
  height: 10px;
  border-radius: var(--nc-radius-pill);
  background: var(--nc-surface-high);
  overflow: hidden;
}
.nc-plan-progress-fill {
  height: 100%;
  border-radius: var(--nc-radius-pill);
  background: var(--nc-primary);
  transition: width 0.4s ease;
}
.nc-plan-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  padding: 0 2px;
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-label-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-sm-line);
  color: var(--nc-text-muted);
}
.nc-plan-progress-current {
  font-weight: var(--nc-weight-bold);
  color: var(--nc-primary);
}
html[data-theme='dark'] .nc-plan-progress {
  background: var(--nc-surface);
  border-color: var(--nc-outline-variant);
}
html[data-theme='dark'] .nc-plan-progress-title {
  color: var(--nc-text);
}
html[data-theme='dark'] .nc-plan-progress-sub {
  color: var(--nc-text-muted);
}
html[data-theme='dark'] .nc-plan-progress-badge {
  background: var(--nc-surface-container);
  color: var(--nc-primary);
}
html[data-theme='dark'] .nc-plan-progress-track {
  background: var(--nc-surface-high);
}
html[data-theme='dark'] .nc-plan-progress-labels {
  color: var(--nc-text-muted);
}
html[data-theme='dark'] .nc-plan-progress-current {
  color: var(--nc-primary);
}
/* ---- Today meal cards (Task 5 Part 2) ---- */
.nc-meals-heading {
  display: flex;
  align-items: center;
  gap: var(--nc-space-2);
  margin: var(--nc-space-4) 0 var(--nc-space-3);
}
.nc-meals-title {
  margin: 0;
  font-family: var(--nc-font-display);
  font-size: calc(var(--nc-type-headline-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-headline-sm-line);
  font-weight: var(--nc-weight-bold);
  color: var(--nc-text);
}
.nc-meals-count {
  padding: 2px 10px;
  border-radius: var(--nc-radius-pill);
  background: var(--nc-surface-high);
  color: var(--nc-text-muted);
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-label-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-sm-line);
  font-weight: var(--nc-weight-semibold);
  white-space: nowrap;
}
.nc-meals-plan-link {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-label-md-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-md-line);
  font-weight: var(--nc-weight-semibold);
  color: var(--nc-primary);
}
.nc-meals-plan-link:hover,
.nc-meals-plan-link:focus-visible {
  text-decoration: underline;
}
.nc-meals-list {
  display: flex;
  flex-direction: column;
  gap: var(--nc-space-3);
}
.nc-meal-card {
  display: flex;
  align-items: center;
  gap: var(--nc-space-3);
  background: var(--nc-surface);
  border: 1px solid var(--nc-outline-variant);
  border-radius: var(--nc-radius-lg);
  padding: var(--nc-space-3);
  box-shadow: var(--nc-shadow-card);
}
.nc-meal-image {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--nc-radius-md);
  background: var(--nc-surface-container);
  color: var(--nc-primary);
}
.nc-meal-image--empty {
  background: var(--nc-surface-low);
  color: var(--nc-text-muted);
}
.nc-meal-image svg {
  width: 26px;
  height: 26px;
}
.nc-meal-content {
  flex: 1;
  min-width: 0;
}
.nc-meal-head {
  display: flex;
  align-items: center;
  gap: var(--nc-space-2);
  flex-wrap: wrap;
}
.nc-meal-category {
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-label-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-sm-line);
  font-weight: var(--nc-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nc-text-muted);
}
.nc-meal-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  border-radius: var(--nc-radius-pill);
  font-family: var(--nc-font-body);
  font-size: calc(10px * var(--text-scale, 1));
  line-height: 1.4;
  font-weight: var(--nc-weight-semibold);
  white-space: nowrap;
}
.nc-meal-status svg {
  width: 10px;
  height: 10px;
}
.nc-meal-status--logged {
  background: var(--nc-primary-fixed);
  color: var(--nc-primary);
}
.nc-meal-status--planned {
  background: var(--nc-surface-container);
  color: var(--nc-text-muted);
}
.nc-meal-title {
  margin: 2px 0 0;
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-label-lg-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-lg-line);
  font-weight: var(--nc-weight-bold);
  color: var(--nc-text);
  overflow-wrap: break-word;
  word-break: break-word;
}
.nc-meal-info {
  margin: 2px 0 0;
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-body-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-body-sm-line);
  color: var(--nc-text-muted);
  overflow-wrap: break-word;
}
.nc-meal-delete {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--nc-radius-pill);
  background: none;
  color: var(--nc-text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.nc-meal-delete svg {
  width: 16px;
  height: 16px;
}
.nc-meal-delete:hover,
.nc-meal-delete:focus-visible {
  background: rgba(186, 26, 26, 0.08);
  color: #ba1a1a;
}
.nc-meal-action {
  flex: none;
  border: 0;
  border-radius: var(--nc-radius-md);
  background: var(--nc-primary);
  color: var(--nc-on-primary);
  padding: 6px 14px;
  cursor: pointer;
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-label-md-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-md-line);
  font-weight: var(--nc-weight-semibold);
}
.nc-meal-action:hover,
.nc-meal-action:focus-visible {
  background: var(--nc-hero-mid);
  color: var(--nc-hero-text);
}
.nc-meal-action:active {
  transform: scale(0.97);
}
/* Task 31: widen the reading column; actions have their own safe touch row. */
.view[data-screen='today'] .nc-meals-heading {
  flex-wrap: wrap;
}
.view[data-screen='today'] .nc-meals-plan-link {
  min-height: 44px;
  min-width: 44px;
  padding: 8px;
  border-radius: var(--nc-radius-md);
}
.view[data-screen='today'] .nc-meals-list {
  display: grid;
  grid-auto-rows: 1fr;
}
.view[data-screen='today'] .nc-meal-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
}
.view[data-screen='today'] .nc-meal-image {
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.view[data-screen='today'] .nc-meal-content {
  display: flow-root;
}
.view[data-screen='today'] .nc-meal-head {
  justify-content: flex-start;
  gap: 6px;
  min-height: 20px;
}
.view[data-screen='today'] .nc-meal-category {
  min-width: 0;
  overflow-wrap: anywhere;
}
.view[data-screen='today'] .nc-meal-title {
  margin-top: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
}
.view[data-screen='today'] .nc-meal-info {
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.view[data-screen='today'] .nc-meal-action,
.view[data-screen='today'] .nc-meal-delete {
  float: right;
  margin-left: 8px;
  min-width: 44px;
  min-height: 44px;
}
.view[data-screen='today'] .nc-meal-delete {
  width: 44px;
  height: 44px;
  background: var(--nc-surface-low);
}
.view[data-screen='today'] .nc-meal-action:focus-visible,
.view[data-screen='today'] .nc-meal-delete:focus-visible,
.view[data-screen='today'] .nc-meals-plan-link:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 3px;
}
html[data-theme='dark'] .nc-meals-title {
  color: var(--nc-text);
}
html[data-theme='dark'] .nc-meals-count {
  background: var(--nc-surface-container);
  color: var(--nc-text-muted);
}
html[data-theme='dark'] .nc-meal-card {
  background: var(--nc-surface);
  border-color: var(--nc-outline-variant);
}
html[data-theme='dark'] .nc-meal-image {
  background: var(--nc-surface-container);
}
html[data-theme='dark'] .nc-meal-image--empty {
  background: var(--nc-surface-low);
}
html[data-theme='dark'] .nc-meal-category {
  color: var(--nc-text-muted);
}
html[data-theme='dark'] .nc-meal-status--logged {
  background: var(--nc-surface-container);
  color: var(--nc-primary);
}
html[data-theme='dark'] .nc-meal-status--planned {
  background: var(--nc-surface-container);
  color: var(--nc-text-muted);
}
html[data-theme='dark'] .nc-meal-title {
  color: var(--nc-text);
}
html[data-theme='dark'] .nc-meal-info {
  color: var(--nc-text-muted);
}
html[data-theme='dark'] .nc-meal-delete:hover,
html[data-theme='dark'] .nc-meal-delete:focus-visible {
  background: rgba(240, 145, 125, 0.12);
  color: #f0917d;
}
/* ---- Today hydration tracker (Task 6 Part 1) ---- */
.nc-hydration {
  background: var(--nc-surface);
  border: 1px solid var(--nc-outline-variant);
  border-radius: var(--nc-radius-lg);
  padding: var(--nc-space-4);
  margin-bottom: var(--nc-space-3);
  box-shadow: var(--nc-shadow-card);
}
.nc-hydration-head {
  display: flex;
  align-items: center;
  gap: var(--nc-space-3);
}
.nc-hydration-badge {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--nc-radius-pill);
  background: var(--nc-ai-fixed);
  color: var(--nc-primary);
}
.nc-hydration-badge svg {
  width: 18px;
  height: 18px;
}
.nc-hydration-text {
  flex: 1;
  min-width: 0;
}
.nc-hydration-title {
  margin: 0;
  font-family: var(--nc-font-display);
  font-size: calc(var(--nc-type-headline-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-headline-sm-line);
  font-weight: var(--nc-weight-bold);
  color: var(--nc-text);
}
.nc-hydration-sub {
  margin: 1px 0 0;
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-body-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-body-sm-line);
  color: var(--nc-text-muted);
}
.nc-hydration-count {
  flex: none;
  padding: 3px 10px;
  border-radius: var(--nc-radius-pill);
  background: var(--nc-ai-fixed);
  color: var(--nc-primary);
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-label-md-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-md-line);
  font-weight: var(--nc-weight-bold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nc-hydration-glasses {
  display: flex;
  gap: 6px;
  margin-top: var(--nc-space-3);
}
.nc-hydration-glass {
  flex: 1;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--nc-radius-md);
  background: var(--nc-surface-container);
  color: var(--nc-text-muted);
  transition: background 0.2s, color 0.2s;
}
.nc-hydration-glass.filled {
  background: #1E4B31;
  color: #FFFFFF;
}
.nc-hydration-glass svg {
  width: 16px;
  height: 16px;
}
.nc-hydration-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--nc-space-3);
}
.nc-hydration-target-label {
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-label-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-sm-line);
  color: var(--nc-text-muted);
}
.nc-hydration-buttons {
  display: flex;
  gap: var(--nc-space-2);
}
.nc-hydration-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--nc-radius-md);
  background: var(--nc-surface-container);
  color: var(--nc-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, transform 0.1s;
}
.nc-hydration-btn svg {
  width: 20px;
  height: 20px;
}
.nc-hydration-btn:hover,
.nc-hydration-btn:focus-visible {
  background: var(--nc-surface-high);
}
.nc-hydration-btn:focus-visible {
  outline: 2px solid var(--nc-ai);
  outline-offset: 2px;
}
.nc-hydration-btn:active {
  transform: scale(0.93);
}
.nc-hydration-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.nc-hydration-btn--add {
  background: #1E4B31;
  color: #FFFFFF;
}
.nc-hydration-btn--add:hover,
.nc-hydration-btn--add:focus-visible {
  background: #2D6B45;
}
html[data-theme='dark'] .nc-hydration {
  background: var(--nc-surface);
  border-color: var(--nc-outline-variant);
}
html[data-theme='dark'] .nc-hydration-title {
  color: var(--nc-text);
}
html[data-theme='dark'] .nc-hydration-sub {
  color: var(--nc-text-muted);
}
html[data-theme='dark'] .nc-hydration-badge {
  background: var(--nc-surface-container);
  color: var(--nc-primary);
}
html[data-theme='dark'] .nc-hydration-count {
  background: var(--nc-surface-container);
  color: var(--nc-primary);
}
html[data-theme='dark'] .nc-hydration-glass {
  background: var(--nc-surface-container);
  color: var(--nc-text-muted);
}
html[data-theme='dark'] .nc-hydration-glass.filled {
  background: #1E4B31;
  color: #FFFFFF;
}
html[data-theme='dark'] .nc-hydration-btn {
  background: var(--nc-surface-container);
  color: var(--nc-text);
}
html[data-theme='dark'] .nc-hydration-btn--add {
  background: #1E4B31;
  color: #FFFFFF;
}
/* ---- Today scanner banner (Task 6 Part 2) ---- */
.nc-scan-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nc-space-3);
  border-radius: var(--nc-radius-lg);
  padding: var(--nc-space-4);
  background: linear-gradient(to right, var(--nc-ai-container) 0%, var(--nc-primary-fixed) 55%, var(--nc-ai-container) 100%);
  color: #02341C;
  box-shadow: var(--nc-shadow-ai);
}
.nc-scan-banner-glow {
  position: absolute;
  right: -24px;
  bottom: -24px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  filter: blur(16px);
  pointer-events: none;
}
.nc-scan-banner-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--nc-space-3);
  min-width: 0;
}
.nc-scan-banner-icon {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--nc-radius-md);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nc-scan-banner-icon svg {
  width: 26px;
  height: 26px;
}
.nc-scan-banner-text {
  min-width: 0;
}
.nc-scan-banner-title {
  margin: 0;
  font-family: var(--nc-font-display);
  font-size: calc(var(--nc-type-headline-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-headline-sm-line);
  font-weight: var(--nc-weight-bold);
  color: #02341C;
}
.nc-scan-banner-sub {
  margin: 2px 0 0;
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-body-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-body-sm-line);
  color: #1E4B31;
}
.nc-scan-banner-btn {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: var(--nc-radius-md);
  background: #02341C;
  color: #FFFFFF;
  padding: 8px 16px;
  cursor: pointer;
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-label-md-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-md-line);
  font-weight: var(--nc-weight-bold);
  box-shadow: var(--nc-shadow-card);
  transition: transform 0.15s;
}
.nc-scan-banner-btn svg {
  width: 14px;
  height: 14px;
}
.nc-scan-banner-btn:hover,
.nc-scan-banner-btn:focus-visible {
  transform: scale(1.04);
}
.nc-scan-banner-btn:active {
  transform: scale(0.96);
}
@media (max-width: 380px) {
  .nc-scan-banner {
    flex-wrap: wrap;
  }
  .nc-scan-banner-btn {
    margin-left: 60px;
  }
}
html[data-theme='dark'] .nc-scan-banner {
  background: linear-gradient(to right, var(--nc-ai-container) 0%, var(--nc-primary-fixed) 55%, var(--nc-ai-container) 100%);
}
@media (max-width: 380px) {
  .nc-plan-progress-head {
    flex-wrap: wrap;
  }
  .nc-plan-progress-action {
    margin-left: 48px;
  }
}
@media (max-width: 380px) {
  .today-summary-macros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.hero .mini {
  font-size: calc(10px * var(--text-scale, 1));
  color: #cfeab8;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.hero strong {
  display: block;
  font-size: calc(24px * var(--text-scale, 1));
  letter-spacing: -0.04em;
  margin: 10px 0 4px;
}
.hero small {
  color: #d7e8d0;
  font-size: calc(11px * var(--text-scale, 1));
}
.progress {
  height: 8px;
  background: #ffffff2c;
  border-radius: 8px;
  margin-top: 16px;
  overflow: hidden;
}
.progress span {
  height: 100%;
  display: block;
  background: #9bd66a;
  border-radius: 8px;
  transition: width 0.3s;
}
.heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 10px;
}
.heading-row h3 {
  font-size: calc(14px * var(--text-scale, 1));
  margin: 0;
}
.meal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.meal:last-child {
  border: 0;
}
.meal-icon {
  width: 31px;
  height: 31px;
  border-radius: 11px;
  background: var(--soft);
  display: grid;
  place-items: center;
  color: var(--deep);
  font-size: calc(11px * var(--text-scale, 1));
  font-weight: 850;
  flex: none;
}
.meal b {
  font-size: calc(12px * var(--text-scale, 1));
}
.meal span {
  display: block;
  font-size: calc(10px * var(--text-scale, 1));
  color: var(--muted);
  margin-top: 2px;
}
.meal .kcal {
  margin-left: auto;
  font-size: calc(11px * var(--text-scale, 1));
  font-weight: 700;
  color: var(--deep);
}
/* Keep Android's default tap flash off the navigation; keyboard focus stays visible. */
@keyframes nc-screen-enter {
  from { opacity: 0.65; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
/* Animate content only: transforming the view would move its fixed dock. */
.view.nc-screen-enter > :not(.nc-nav):not([aria-hidden='true']) {
  animation: nc-screen-enter 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .view.nc-screen-enter > :not(.nc-nav):not([aria-hidden='true']) { animation: none; }
}
.nc-nav-item,
.nc-nav-scan {
  -webkit-tap-highlight-color: transparent;
}
.nc-nav-item {
  min-width: 56px;
  height: 48px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--nc-text-muted);
  transition: color 0.15s;
}
.nc-nav-item:hover {
  color: var(--nc-text);
}
.nc-nav-item:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 2px;
  border-radius: var(--nc-radius);
}
.nc-nav-icon {
  width: 24px;
  height: 24px;
}
.nc-nav-label {
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-label-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-sm-line);
  font-weight: var(--nc-weight-semibold);
}
.nc-nav-item.active {
  color: var(--nc-primary);
  font-weight: var(--nc-weight-bold);
}
.nc-nav-item.active .nc-nav-label {
  font-weight: var(--nc-weight-bold);
}
.nc-nav-scan-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: -24px;
}
.nc-nav-scan {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 9999px;
  background: var(--nc-primary-container);
  color: var(--nc-on-primary);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(30, 75, 49, 0.28);
  transition: transform 0.15s, box-shadow 0.15s;
}
.nc-nav-scan:hover,
.nc-nav-scan:active {
  box-shadow: 0 8px 20px rgba(30, 75, 49, 0.35);
}
.nc-nav-scan:focus-visible {
  outline: 2px solid var(--nc-primary-container);
  outline-offset: 3px;
}
.nc-nav-scan-icon {
  width: 28px;
  height: 28px;
}
.nc-nav-scan-label {
  margin-top: 4px;
  font-family: var(--nc-font-body);
  font-size: calc(var(--nc-type-label-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-label-sm-line);
  font-weight: var(--nc-weight-semibold);
  color: var(--nc-text-muted);
}
.nc-nav-scan-group.active .nc-nav-scan-label {
  color: var(--nc-primary);
  font-weight: var(--nc-weight-bold);
}
.nc-nav-scan.active {
  box-shadow: 0 0 0 2px var(--nc-primary), 0 8px 20px rgba(30, 75, 49, 0.28);
}
/* Let clicks pass through transparent corners around the raised Scan action. */
.nc-nav .nc-nav-scan-group {
  pointer-events: none;
}
.nc-nav .nc-nav-scan {
  pointer-events: auto;
}
.view {
  display: none;
}
.view.active {
  display: block;
}
.ring-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ring-box {
  position: relative;
  width: 96px;
  height: 96px;
  flex: none;
}
.ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: conic-gradient(var(--leaf) 0 68%, var(--soft) 68% 100%);
  display: grid;
  place-items: center;
}
.ring:after {
  content: '';
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
}
.ring-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(17px * var(--text-scale, 1));
  font-weight: 850;
  color: var(--deep);
}
.ring-copy b {
  font-size: calc(15px * var(--text-scale, 1));
}
.ring-copy p {
  font-size: calc(11px * var(--text-scale, 1));
  color: var(--muted);
  margin: 5px 0 0;
}
.week-tabs {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 4px 0 14px;
  padding: 2px 0 4px;
}
.week-tabs .plan-tab-row {
  display: flex;
  justify-content: center;
  max-width: 100%;
  gap: 6px;
}
.week-tabs .plan-tab-row:first-child {
  display: grid;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  width: max-content;
}
.week-tabs .plan-tab-row:has([data-plan-tab='0']) {
  grid-template-columns: max-content repeat(4, minmax(0, 1fr)) max-content;
  gap: 3px;
}
.week-tabs .plan-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 8px;
  background: var(--nc-surface);
  border: 1px solid var(--nc-outline-variant);
  border-radius: 999px;
  font-family: var(--nc-font-body);
  font-size: calc(12px * var(--text-scale, 1));
  line-height: 16px;
  font-weight: var(--nc-weight-semibold);
  white-space: normal;
  color: var(--nc-text-muted);
  cursor: pointer;
}
@container (max-width: 380px) {
  .week-tabs .plan-tab-row:has([data-plan-tab='0']) .plan-tab {
    padding-inline: 2px;
    font-size: calc(11px * var(--text-scale, 1));
  }
  .week-tabs .plan-tab-row:has([data-plan-tab='0']) .plan-tab:not([data-plan-tab='0']):not([data-plan-tab='5']) {
    min-width: 0;
  }
}
@container (max-width: 300px) {
  .week-tabs .plan-tab-row:has([data-plan-tab='0']) .plan-tab {
    padding-inline: 1px;
    font-size: calc(10px * var(--text-scale, 1));
  }
}
.week-tabs .plan-tab:hover {
  background: var(--nc-surface-low);
  color: var(--nc-text);
}
.week-tabs .plan-tab:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 2px;
}
.week-tabs .plan-tab.active {
  background: var(--nc-primary);
  border-color: var(--nc-primary);
  color: var(--nc-on-primary);
}
.plan-card {
  background: var(--deep);
  color: #fff;
  border-radius: 20px;
  padding: 17px;
  margin-bottom: 12px;
}
.plan-card small {
  color: #cfeab8;
  font-size: calc(10px * var(--text-scale, 1));
}
.plan-card h3 {
  font-size: calc(20px * var(--text-scale, 1));
  letter-spacing: -0.04em;
  margin: 7px 0;
}
.plan-card p {
  font-size: calc(11px * var(--text-scale, 1));
  color: #d7e8d0;
  margin: 0;
}
.btn-primary {
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: #1E4B31;
  color: #FFFFFF;
  padding: 13px;
  font: inherit;
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: 850;
  cursor: pointer;
}
.btn-primary:disabled {
  opacity: 0.6;
}
.btn-ghost {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--deep);
  padding: 12px;
  font: inherit;
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 800;
  cursor: pointer;
}
.message {
  max-width: 88%;
  font-size: calc(12px * var(--text-scale, 1));
  line-height: 1.5;
  padding: 12px 13px;
  border-radius: 17px;
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: 9px;
  word-wrap: break-word;
}
.message.user {
  margin-left: auto;
  background: var(--soft);
  border-color: #c2dfaf;
  color: var(--deep);
  border-bottom-right-radius: 5px;
}
.message.coach {
  border-bottom-left-radius: 5px;
}
.chat-scroll {
  min-height: 260px;
  max-height: 46dvh;
  overflow-y: auto;
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
}
.chat-input {
  display: flex;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 8px 9px;
  margin-top: 10px;
  align-items: flex-end;
}
.chat-input textarea {
  flex: 1;
  border: 0;
  font: inherit;
  font-size: calc(12px * var(--text-scale, 1));
  outline: none;
  background: transparent;
  color: var(--ink);
  resize: none;
  max-height: 120px;
  font-family: inherit;
  line-height: 1.45;
}
.chat-input button {
  border: 0;
  background: none;
  color: var(--nc-primary);
  font-size: calc(17px * var(--text-scale, 1));
  cursor: pointer;
  font-weight: 900;
}
.message.coach {
  max-width: 100%;
}
.message.coach-failed {
  border-color: #f0a8a8;
  background: #fff8f8;
}
.coach-retry-wrap {
  margin-top: 6px;
}
.btn-coach-retry {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #1E4B31;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  font-size: calc(11px * var(--text-scale, 1));
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
}
.btn-coach-retry:hover {
  filter: brightness(1.1);
}
/* ---- Neat coach document typography ---- */
.coach-p {
  margin: 0 0 6px;
  line-height: 1.55;
  font-size: calc(11.5px * var(--text-scale, 1));
  color: var(--ink);
}
.coach-h {
  font-weight: 850;
  color: var(--deep);
  margin: 12px 0 6px;
  line-height: 1.3;
}
.coach-h1 {
  font-size: calc(17px * var(--text-scale, 1));
  letter-spacing: -0.03em;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--leaf);
  margin-top: 4px;
}
.coach-h2 {
  font-size: calc(13.5px * var(--text-scale, 1));
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.coach-h2::before {
  content: '';
  width: 4px;
  height: 14px;
  background: var(--leaf);
  border-radius: 3px;
  flex: none;
}
.coach-h3 {
  font-size: calc(12px * var(--text-scale, 1));
  color: var(--deep);
}
.coach-gap {
  height: 6px;
}
.coach-ul {
  margin: 4px 0 8px;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.coach-ul li {
  font-size: calc(11.5px * var(--text-scale, 1));
  line-height: 1.5;
  color: var(--ink);
}
.coach-ul li::marker {
  color: var(--leaf);
  font-weight: 800;
}
.coach-quote {
  border-left: 3px solid var(--warm);
  background: #fdf8ec;
  padding: 7px 10px;
  border-radius: 0 10px 10px 0;
  margin: 7px 0;
  color: #8a6d3a;
  font-size: calc(10.5px * var(--text-scale, 1));
  line-height: 1.5;
}
.coach-hr {
  border: 0;
  border-top: 1px dashed var(--line);
  margin: 10px 0;
}
.coach-table-wrap {
  margin: 8px 0;
}
.table-wrap {
  margin: 8px 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.coach-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(10.5px * var(--text-scale, 1));
}
.coach-table td {
  padding: 6px 9px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.45;
}
.coach-table tr:last-child td {
  border-bottom: 0;
}
.coach-table tr:first-child td {
  background: var(--soft);
  font-weight: 800;
  color: var(--deep);
  font-size: calc(10px * var(--text-scale, 1));
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
}
.coach-table tr:nth-child(even) td {
  background: #fafcf7;
}
.message.coach code {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 5px;
  font-size: calc(10px * var(--text-scale, 1));
}
/* Plan page document */
.plan-doc {
  max-height: none;
  overflow: visible;
}
.plan-doc .coach-h1 {
  font-size: calc(19px * var(--text-scale, 1));
}
/* Plan page week summary card + small header buttons */
.week-summary {
  background: var(--soft);
  border-color: #c2dfaf;
}
.week-summary .mini {
  font-size: calc(10px * var(--text-scale, 1));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep);
}
.week-sum-text {
  margin: 6px 0 0;
  font-size: calc(12px * var(--text-scale, 1));
  line-height: 1.5;
  color: var(--deep);
}
.btn-small {
  width: auto;
  padding: 7px 13px;
  font-size: calc(11px * var(--text-scale, 1));
  border-radius: 999px;
  white-space: nowrap;
}
/* ---- Task 11: Botanical Plan header, pill tabs, saved-plan overview card ----
   Every rule below is scoped to the Plan screen. Today, Scanner, Profile,
   Coach, and both Task 10 navigation variants are not restyled here. */
.view[data-screen='plan'] .plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nc-space-2);
  margin-bottom: var(--nc-space-1);
}
.view[data-screen='plan'] .plan-head-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.view[data-screen='plan'] .plan-eyebrow {
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  font-weight: var(--nc-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nc-primary);
}
.view[data-screen='plan'] .plan-title {
  margin: 0;
  font-family: var(--nc-font-display);
  font-size: calc(26px * var(--text-scale, 1));
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: var(--nc-weight-bold);
  color: var(--nc-primary);
}
.view[data-screen='plan'] .plan-meta {
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--nc-font-body);
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 18px;
  color: var(--nc-text-muted);
}
.view[data-screen='plan'] .plan-clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border: 1px solid var(--nc-outline-variant);
  border-radius: var(--nc-radius-pill);
  background: var(--nc-surface);
  color: var(--nc-text-muted);
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  font-weight: var(--nc-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}
.view[data-screen='plan'] .plan-clear:hover {
  background: var(--nc-surface-low);
  color: var(--nc-text);
}
.view[data-screen='plan'] .plan-clear:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 2px;
  color: var(--nc-text);
}
.view[data-screen='plan'] .plan-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: var(--nc-space-4);
  margin-bottom: var(--nc-space-3);
  color: #ffffff;
  background: linear-gradient(135deg, #0f2e1b 0%, #1e4b31 55%, #2a633f 100%);
  box-shadow: 0 12px 28px rgba(2, 52, 28, 0.22);
}
.view[data-screen='plan'] .plan-hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.view[data-screen='plan'] .plan-hero-glow-a {
  width: 192px;
  height: 192px;
  top: -48px;
  right: -48px;
  background: rgba(162, 248, 135, 0.2);
  filter: blur(48px);
}
.view[data-screen='plan'] .plan-hero-glow-b {
  width: 160px;
  height: 160px;
  bottom: -40px;
  left: -40px;
  background: rgba(55, 106, 75, 0.3);
  filter: blur(40px);
}
.view[data-screen='plan'] .plan-hero-motif {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 176px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  opacity: 0.2;
  pointer-events: none;
}
.view[data-screen='plan'] .plan-hero-motif svg {
  width: 160px;
  height: 160px;
}
.view[data-screen='plan'] .plan-hero-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--nc-space-2);
}
.view[data-screen='plan'] .plan-hero-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--nc-radius-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  font-weight: var(--nc-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.view[data-screen='plan'] .plan-hero-badge-icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--nc-hero-active);
}
.view[data-screen='plan'] .plan-hero-title {
  margin: 0;
  padding-right: 56px;
  font-family: var(--nc-font-display);
  font-size: calc(22px * var(--text-scale, 1));
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: var(--nc-weight-bold);
  color: #ffffff;
}
.view[data-screen='plan'] .plan-hero-text {
  margin: 0;
  padding-right: 56px;
  font-family: var(--nc-font-body);
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}
.view[data-screen='plan'] .plan-hero-caption {
  margin: 0;
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  color: rgba(255, 255, 255, 0.82);
}
.view[data-screen='plan'] .plan-empty-card {
  background: var(--nc-surface);
  border: 1px solid var(--nc-outline-variant);
  border-radius: 20px;
  padding: var(--nc-space-4);
  margin-bottom: var(--nc-space-3);
  box-shadow: var(--nc-shadow-card);
}
.view[data-screen='plan'] .plan-empty-badge {
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  font-weight: var(--nc-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nc-primary);
}
.view[data-screen='plan'] .plan-empty-title {
  margin: var(--nc-space-2) 0 0;
  font-family: var(--nc-font-display);
  font-size: calc(18px * var(--text-scale, 1));
  line-height: 1.3;
  font-weight: var(--nc-weight-bold);
  color: var(--nc-text);
}
.view[data-screen='plan'] .plan-empty-text {
  margin: 6px 0 0;
  font-family: var(--nc-font-body);
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 1.45;
  color: var(--nc-text-muted);
}
.view[data-screen='plan'] .plan-empty-cta {
  margin-top: 14px;
}
.view[data-screen='plan'] .plan-preview-note {
  margin: -4px 0 8px;
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  color: var(--nc-text-muted);
}
/* ---- Task 13: Botanical Plan week day cards --------------------------------
   Saved-plan Week 1-4 presentation only, scoped to the Plan screen. It renders
   the source's own day/meal text as static cards: no clickable rows, no
   completion checks, no invented nutrient totals. Long authored cells wrap in
   full. Today, Scanner, Profile, Coach, and both Task 10 navigation variants
   are not restyled here. */
.view[data-screen='plan'] .plan-week-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 2px 0 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--nc-shadow-card);
}
.view[data-screen='plan'] .plan-day-card {
  background: var(--white);
  border: 0;
  border-radius: 0;
  padding: 12px;
  box-shadow: none;
}
/* Task 39: one week shell, gently divided semantic day articles. No overflow
   clipping: authored text (and any future focus outlines) may grow naturally. */
.view[data-screen='plan'] .plan-day-card + .plan-day-card {
  border-top: 1px solid var(--line);
}
.view[data-screen='plan'] .plan-day-card:nth-child(even) {
  background: var(--nc-surface-low);
}
.view[data-screen='plan'] .plan-day-card:first-child {
  border-radius: 15px 15px 0 0;
}
.view[data-screen='plan'] .plan-day-card:last-child {
  border-radius: 0 0 15px 15px;
}
.view[data-screen='plan'] .plan-day-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 2px 8px;
}
.view[data-screen='plan'] .plan-day-initial {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--warm);
  /* fixed deep forest: --deep flips to light green in dark mode, which would
     make this badge unreadable (measured contrast 1.0) */
  color: #02341c;
  font-family: var(--nc-font-body);
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 1;
  font-weight: var(--nc-weight-bold);
}
.view[data-screen='plan'] .plan-day-title {
  margin: 0;
  min-width: 0;
  font-family: var(--nc-font-display);
  font-size: calc(15px * var(--text-scale, 1));
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: var(--nc-weight-bold);
  color: var(--nc-primary);
  overflow-wrap: anywhere;
}
.view[data-screen='plan'] .plan-day-meals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.view[data-screen='plan'] .plan-day-meal {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--soft);
}
.view[data-screen='plan'] .plan-day-meal:last-child {
  background: rgba(232, 242, 232, 0.55);
}
html[data-theme='dark'] .view[data-screen='plan'] .plan-day-meal:last-child {
  background: rgba(28, 42, 31, 0.7);
}
.view[data-screen='plan'] .plan-day-meal-badge {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgba(162, 248, 135, 0.45);
  color: var(--deep);
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 1;
  font-weight: var(--nc-weight-bold);
}
.view[data-screen='plan'] .plan-day-meal-body {
  position: relative;
  flex: 1;
  min-width: 0;
}
.view[data-screen='plan'] .plan-day-meal-label {
  margin: 0 0 2px;
  font-family: var(--nc-font-body);
  font-size: calc(10.5px * var(--text-scale, 1));
  line-height: 14px;
  font-weight: var(--nc-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* darker than --muted so the small label clears WCAG AA (4.5:1) on sage */
  color: #4a5c4d;
}
html[data-theme='dark'] .view[data-screen='plan'] .plan-day-meal-label {
  color: var(--muted);
}
/* Standard B/L/D/S badges replace the visual label line, not its accessible
   text. Custom source labels keep the existing visible treatment. */
.view[data-screen='plan'] .plan-day-meal-label--compact {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.view[data-screen='plan'] .plan-day-meal-text {
  margin: 0;
  font-family: var(--nc-font-body);
  font-size: calc(14px * var(--text-scale, 1));
  line-height: 1.45;
  font-weight: var(--nc-weight-semibold);
  color: var(--ink);
  overflow-wrap: anywhere;
  white-space: normal;
}
.view[data-screen='plan'] .plan-day-meal-text b {
  font-weight: var(--nc-weight-bold);
}
.view[data-screen='plan'] .plan-day-meal-empty {
  color: var(--muted);
  font-weight: var(--nc-weight-regular);
  font-style: italic;
}
/* Log page: meal delete + water tracker */
.meal-delete {
  margin-left: 10px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: calc(12px * var(--text-scale, 1));
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  flex: none;
  line-height: 1;
}
.meal-delete:hover {
  color: #b3402f;
  background: #fbeae7;
}
.water-card {
  background: #f4f9fd;
  border-color: #d8e7f3;
}
.water-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.water-row b {
  font-size: calc(12px * var(--text-scale, 1));
  color: #1e4e6e;
}
.water-row span {
  display: block;
  font-size: calc(10px * var(--text-scale, 1));
  color: #6c8ba1;
  margin-top: 2px;
}
.water-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.water-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #d8e7f3;
  background: #fff;
  color: #1e4e6e;
  font-size: calc(16px * var(--text-scale, 1));
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.water-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.water-add {
  background: #1e4e6e;
  color: #fff;
  border-color: #1e4e6e;
}
.water-count {
  font-size: calc(14px * var(--text-scale, 1));
  font-weight: 850;
  color: #1e4e6e;
  min-width: 18px;
  text-align: center;
}
.water-dots {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.water-dot {
  width: 100%;
  height: 8px;
  border-radius: 6px;
  background: #e2edf5;
  flex: 1;
}
.water-dot.filled {
  background: linear-gradient(90deg, #4a9fd8, #1e4e6e);
}
/* Coach page: chat fills the screen — no dead space above the nav */
.view[data-screen='coach'] {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 128px - env(safe-area-inset-bottom, 0px));
  height: calc(100dvh - 128px - env(safe-area-inset-bottom, 0px));
}
.view[data-screen='coach'] .chat-scroll {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
/* Long-chat clipping fix: .chat-scroll is a fixed-height column flex box, so
   its .message children default to flex-shrink: 1; combined with the coach
   card's overflow: hidden (needed to clip the leaf accent bar), long replies
   were crushed to a thin clipped strip in long histories. Keep each bubble at
   its natural height; the conversation itself scrolls internally. */
.view[data-screen='coach'] .chat-scroll > .message {
  flex-shrink: 0;
}
.view[data-screen='coach'] .suggestions {
  flex: none;
}
.view[data-screen='coach'] .to-top {
  flex: none;
}
.view[data-screen='coach'] .chat-input {
  flex: none;
}
/* Small screens (phones): chat area keeps the input reachable — page doesn't grow */
@media (max-width: 480px) {
  .view[data-screen='coach'] {
    height: calc(100dvh - 124px - env(safe-area-inset-bottom, 0px));
    min-height: calc(100dvh - 124px - env(safe-area-inset-bottom, 0px));
  }
}
.suggestions {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 13px 0;
}
.suggestions button {
  white-space: nowrap;
  background: var(--soft);
  border: 1px solid #c2dfaf;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: calc(10px * var(--text-scale, 1));
  color: var(--deep);
  font-weight: 750;
  cursor: pointer;
}
.profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.profile-row:last-child {
  border: 0;
}
.profile-row .big-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--deep);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 850;
  flex: none;
}
.profile-row b {
  font-size: calc(13px * var(--text-scale, 1));
}
.profile-row span {
  display: block;
  color: var(--muted);
  font-size: calc(10px * var(--text-scale, 1));
  margin-top: 2px;
}
.profile-row input {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  font: inherit;
  font-size: calc(12px * var(--text-scale, 1));
  width: 140px;
}
.field-label {
  font-size: calc(10px * var(--text-scale, 1));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 6px;
}
/* ---- Task 14A: Botanical Profile intro and identity card ----
   Scoped to the Profile screen. Settings, Goal/Activity form, Save, Sign out,
   and the other four screens are not restyled here. */
.view[data-screen='profile'] .profile-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nc-space-3);
  margin-bottom: var(--nc-space-4);
}
.view[data-screen='profile'] .profile-intro-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.view[data-screen='profile'] .profile-eyebrow {
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  font-weight: var(--nc-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nc-primary);
}
.view[data-screen='profile'] .profile-title {
  margin: 0;
  font-family: var(--nc-font-display);
  font-size: calc(32px * var(--text-scale, 1));
  line-height: 38px;
  letter-spacing: -0.02em;
  font-weight: var(--nc-weight-bold);
  color: var(--nc-primary);
}
.view[data-screen='profile'] .profile-subtitle {
  margin: 2px 0 0;
  font-family: var(--nc-font-body);
  font-size: calc(14px * var(--text-scale, 1));
  line-height: 20px;
  color: var(--nc-text-muted);
}
.view[data-screen='profile'] .profile-identity {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--nc-space-3);
  padding: var(--nc-space-4);
  margin-bottom: var(--nc-space-4);
  background: var(--nc-surface);
  border: 1px solid var(--nc-outline-variant);
  border-radius: 12px;
  box-shadow: var(--nc-shadow-card);
}
.view[data-screen='profile'] .profile-identity-accent {
  position: absolute;
  right: -24px;
  bottom: -24px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(162, 248, 135, 0.2);
  pointer-events: none;
}
.view[data-screen='profile'] .profile-identity-avatar {
  position: relative;
  z-index: 1;
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--nc-primary);
  color: var(--nc-on-primary);
  font-family: var(--nc-font-display);
  font-size: calc(26px * var(--text-scale, 1));
  line-height: 32px;
  font-weight: var(--nc-weight-bold);
  box-shadow: 0 2px 8px rgba(2, 52, 28, 0.18);
}
.view[data-screen='profile'] .profile-identity-text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.view[data-screen='profile'] .profile-identity-name {
  margin: 0;
  font-family: var(--nc-font-display);
  font-size: calc(22px * var(--text-scale, 1));
  line-height: 1.3;
  font-weight: var(--nc-weight-semibold);
  color: var(--nc-text);
  overflow-wrap: anywhere;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  background: var(--deep);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 700;
  box-shadow: 0 8px 22px #244a2a55;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.toast.show {
  opacity: 1;
}
.empty {
  font-size: calc(12px * var(--text-scale, 1));
  color: var(--muted);
  text-align: center;
  padding: 18px 0;
}
/* login */
.login-body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 20% 0, #fff 0, #f1f5eb 40%, #e1e9dc 100%);
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: 0 18px 44px #244a2a1f;
}
.login-card h1 {
  font-size: calc(24px * var(--text-scale, 1));
  letter-spacing: -0.04em;
  margin: 10px 0 6px;
}
.login-card .sub {
  margin-bottom: 18px;
}
.login-card label {
  display: block;
  font-size: calc(11px * var(--text-scale, 1));
  font-weight: 800;
  color: var(--deep);
  margin-bottom: 12px;
}
.login-card input {
  display: block;
  width: 100%;
  margin-top: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  font-size: calc(13px * var(--text-scale, 1));
  background: var(--canvas);
}
.login-card input:focus {
  outline: 2px solid var(--leaf);
  outline-offset: 1px;
}
.error {
  color: #b3402f;
  font-size: calc(11px * var(--text-scale, 1));
  font-weight: 700;
  margin: 0 0 10px;
}
.demo-note {
  font-size: calc(10px * var(--text-scale, 1));
  color: var(--muted);
  text-align: center;
  margin: 14px 0 0;
}
.eyebrow {
  font-size: calc(10px * var(--text-scale, 1));
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nc-primary);
}
/* ---- Food Scanner (nav item handled by .nc-nav-scan above) ---- */
.scan-panel {
  background: var(--deep);
  color: #fff;
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 11px;
  position: relative;
  overflow: hidden;
}
.scan-panel:after {
  content: '';
  position: absolute;
  right: -45px;
  top: -60px;
  width: 160px;
  height: 160px;
  border: 22px solid #9bd66a44;
  border-radius: 50%;
}
.scan-frame {
  border: 1.5px dashed #9bd66a88;
  border-radius: 16px;
  padding: 20px 14px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.scan-cross {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border: 2px solid #9bd66a;
  border-radius: 10px;
  position: relative;
}
.scan-cross:before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 2px solid #c9ecab;
  border-radius: 5px;
}
.camera-copy {
  font-size: calc(11px * var(--text-scale, 1));
  color: #d7e8d0;
  margin: 10px 0 12px;
}
.round-shutter {
  border: 0;
  background: #1E4B31;
  color: #FFFFFF;
  border-radius: 999px;
  padding: 11px 22px;
  font: inherit;
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 6px 14px #69b43755;
}
.round-shutter:disabled {
  opacity: 0.5;
  cursor: default;
}
.scan-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}
.scan-actions button {
  flex: 1;
  border: 1px solid #9bd66a66;
  background: #ffffff14;
  color: #fff;
  border-radius: 12px;
  padding: 11px 8px;
  font: inherit;
  font-size: calc(11px * var(--text-scale, 1));
  font-weight: 800;
  cursor: pointer;
}
.scan-actions button:hover {
  background: #ffffff26;
}
.scan-analyzing {
  text-align: center;
  background: var(--deep);
  color: #fff;
  border: 0;
}
.scan-analyzing .sub {
  color: #d7e8d0;
}
.scan-preview {
  width: 100%;
  max-height: 230px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.scan-preview.blurred {
  filter: blur(3px);
  opacity: 0.75;
}
.scan-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid #ffffff3d;
  border-top-color: #9bd66a;
  border-radius: 50%;
  margin: 14px auto 0;
  animation: scan-spin 1s linear infinite;
}
@keyframes scan-spin {
  to {
    transform: rotate(360deg);
  }
}
.macro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 4px 0 6px;
}
.macro {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 7px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.macro input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  font: inherit;
  font-size: calc(12px * var(--text-scale, 1));
  background: #fff;
}
.macro span {
  font-size: calc(9px * var(--text-scale, 1));
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.confidence-chip {
  display: inline-block;
  background: var(--soft);
  border: 1px solid #c2dfaf;
  color: var(--deep);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: calc(10px * var(--text-scale, 1));
  font-weight: 800;
  margin: 6px 0 2px;
}
.scan-notes {
  font-size: calc(11px * var(--text-scale, 1));
  color: var(--muted);
  line-height: 1.5;
  margin: 7px 0 0;
}
.scan-disclaimer {
  font-size: calc(10px * var(--text-scale, 1));
  color: #8a6d3a;
  background: #fdf8ec;
  border: 1px solid #f4e3bb;
  border-radius: 12px;
  padding: 9px 11px;
  line-height: 1.5;
  margin-top: 10px;
}
.scan-error {
  border-color: #f0d3cc;
  background: #fdf4f2;
}
.scan-error b {
  font-size: calc(13px * var(--text-scale, 1));
  color: #8f3a2b;
}
.scan-error-msg {
  font-size: calc(11.5px * var(--text-scale, 1));
  color: #8f3a2b;
  line-height: 1.55;
  margin: 6px 0 10px;
}
.scan-actions-row {
  display: flex;
  gap: 8px;
}
.scan-actions-row .btn-primary,
.scan-actions-row .btn-ghost {
  flex: 1;
  width: auto;
}
.how-row {
  display: flex;
  gap: 8px;
  margin: 4px 0 2px;
}
.how {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
}
.how b {
  font-size: calc(11px * var(--text-scale, 1));
  color: var(--deep);
}
.how p {
  font-size: calc(9.5px * var(--text-scale, 1));
  color: var(--muted);
  line-height: 1.45;
  margin: 3px 0 0;
}
.how-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1E4B31;
  color: #FFFFFF;
  font-size: calc(10px * var(--text-scale, 1));
  font-weight: 850;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
/* ---- Display settings: font scale + dark mode ------------------------------ */
html {
  font-size: var(--font-scale, 100%);
}
/* Dark theme — same soft-green identity, low-glare surfaces. Covers the shared
   variables plus every hardcoded light surface used across the app. */
html[data-theme='dark'] {
  --nc-canvas: #0E1A12;
  --nc-surface: #162018;
  --nc-surface-low: #1C2A1F;
  --nc-surface-container: #1e2a20;
  --nc-surface-high: #25332A;
  --nc-surface-highest: #2D3E33;
  --nc-text: #eaf2e6;
  --nc-text-muted: #93a48e;
  --nc-outline: #657A68;
  --nc-outline-variant: #2D3E33;
  --nc-primary: #6DCFA0;
  --nc-primary-container: #4e9e3a;
  --nc-primary-fixed: #A2F887;
  --nc-on-primary: #0E1A12;
  --nc-ai: #4e9e3a;
  --nc-ai-container: #A2F887;
  --nc-ai-fixed: #1C2A1F;
  --nc-energy: #6DCFA0;
  --nc-energy-container: #4e9e3a;
  --nc-energy-fixed: #1C2A1F;
  --nc-hero-start: #0C2E1C;
  --nc-hero-mid: #1A4A2E;
  --nc-hero-end: #2D6B45;
  --nc-hero-text: #ffffff;
  --nc-hero-active: #A2F887;
  --nc-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.28), 0 6px 16px rgba(0, 0, 0, 0.18);
  --nc-shadow-overlay: 0 12px 32px -4px rgba(0, 0, 0, 0.38), 0 4px 12px -2px rgba(0, 0, 0, 0.2);
  --nc-shadow-primary: 0 12px 28px -6px rgba(0, 0, 0, 0.42);
  --nc-shadow-ai: 0 8px 24px -4px rgba(78, 158, 58, 0.28);
  --nc-shadow-nav: 0 8px 30px rgba(0, 0, 0, 0.36);
  --leaf: #4e9e3a;
  --deep: #A2F887;
  --canvas: #0E1A12;
  --ink: #eaf2e6;
  --muted: #93a48e;
  --line: #2D3E33;
  --soft: #1C2A1F;
  --warm: #A2F887;
  --white: #162018;
}
html[data-theme='dark'] body {
  background: #0d120e;
}
html[data-theme='dark'] .phone {
  background: var(--canvas);
}
html[data-theme='dark'] .nc-nav-pill {
  background: rgba(27, 36, 29, 0.9);
}
html[data-theme='dark'] .nc-nav-item {
  color: var(--nc-text-muted);
}
html[data-theme='dark'] .nc-nav-item:hover {
  color: var(--nc-text);
}
html[data-theme='dark'] .nc-nav-item.active {
  color: var(--nc-primary);
}
html[data-theme='dark'] .card {
  background: #1b241d;
  border-color: var(--line);
}
html[data-theme='dark'] .hero {
  background: #1e2a20;
  color: var(--ink);
}
html[data-theme='dark'] .hero .mini {
  color: #6DCFA0;
}
html[data-theme='dark'] .hero small {
  color: #a9be9e;
}
html[data-theme='dark'] .progress {
  background: #ffffff14;
}
html[data-theme='dark'] .week-tabs .plan-tab {
  background: var(--nc-surface);
  border-color: var(--nc-outline-variant);
  color: var(--nc-text-muted);
}
html[data-theme='dark'] .week-tabs .plan-tab.active {
  background: var(--nc-primary);
  border-color: var(--nc-primary);
  color: var(--nc-on-primary);
}
html[data-theme='dark'] .plan-card {
  background: #1e2a20;
  color: var(--ink);
}
html[data-theme='dark'] .plan-card small {
  color: #6DCFA0;
}
html[data-theme='dark'] .plan-card p {
  color: #a9be9e;
}
html[data-theme='dark'] .btn-primary {
  background: #1E4B31;
  color: #FFFFFF;
}
html[data-theme='dark'] .btn-ghost {
  background: #1b241d;
  border-color: var(--line);
  color: var(--deep);
}
html[data-theme='dark'] .message {
  background: #1b241d;
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme='dark'] .message.coach-failed {
  border-color: #632d2d;
  background: #251616;
}
html[data-theme='dark'] .btn-coach-retry {
  background: #1E4B31;
  color: #FFFFFF;
}
html[data-theme='dark'] .message.user {
  background: #233427;
  border-color: #2e4433;
  color: #c9ecab;
}
html[data-theme='dark'] .chat-input {
  background: #1b241d;
  border-color: var(--line);
}
html[data-theme='dark'] .chat-input textarea {
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
/* Kill the ugly nested white artifact inside the input in dark mode: the global
   dark input rule paints textareas dark; the chat textarea must stay transparent
   INSIDE its pill instead of rendering its own dark box. */
html[data-theme='dark'] .chat-input textarea {
  background-color: transparent !important;
  background-image: none !important;
}
html[data-theme='dark'] .coach-p,
html[data-theme='dark'] .coach-ul li {
  color: var(--ink);
}
html[data-theme='dark'] .coach-h,
html[data-theme='dark'] .coach-h1,
html[data-theme='dark'] .coach-h2,
html[data-theme='dark'] .coach-h3 {
  color: var(--deep);
}
html[data-theme='dark'] .coach-h1 {
  border-bottom-color: #4e9427;
}
html[data-theme='dark'] .coach-h2::before {
  background: #4e9427;
}
html[data-theme='dark'] .coach-quote {
  background: #241f12;
  border-color: #3a3120;
  color: #d8c79a;
}
html[data-theme='dark'] .coach-table tr:first-child td {
  background: #233427;
  color: #c9ecab;
}
html[data-theme='dark'] .coach-table td {
  border-bottom-color: var(--line);
  color: var(--ink);
}
html[data-theme='dark'] .coach-table tr:nth-child(even) td {
  background: #19221b;
}
html[data-theme='dark'] .message.coach code {
  background: #141b15;
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme='dark'] .table-wrap {
  border-color: var(--line);
}
html[data-theme='dark'] .week-summary {
  background: #233427;
  border-color: #2e4433;
}
html[data-theme='dark'] .week-summary .mini {
  color: #6DCFA0;
}
html[data-theme='dark'] .week-sum-text {
  color: #c9ecab;
}
html[data-theme='dark'] .meal {
  border-bottom-color: var(--line);
}
html[data-theme='dark'] .meal-icon {
  background: #233427;
  color: #4E9E3A;
}
html[data-theme='dark'] .meal .kcal {
  color: #6DCFA0;
}
html[data-theme='dark'] .meal-delete:hover {
  color: #e8836f;
  background: #2a1b17;
}
html[data-theme='dark'] .water-card {
  background: #16202a;
  border-color: #22303d;
}
html[data-theme='dark'] .water-row b {
  color: #A2F887;
}
html[data-theme='dark'] .water-row span {
  color: #6c8ba1;
}
html[data-theme='dark'] .water-btn {
  border-color: #22303d;
  background: #16202a;
  color: #A2F887;
}
html[data-theme='dark'] .water-add {
  background: #1e4e6e;
  color: #fff;
  border-color: #1e4e6e;
}
html[data-theme='dark'] .water-count {
  color: #A2F887;
}
html[data-theme='dark'] .water-dot {
  background: #22303d;
}
html[data-theme='dark'] .water-dot.filled {
  background: linear-gradient(90deg, #4a9fd8, #1e4e6e);
}
html[data-theme='dark'] .suggestions button {
  background: #233427;
  border-color: #2e4433;
  color: #c9ecab;
}
html[data-theme='dark'] .scan-panel {
  background: #1e2a20;
}
html[data-theme='dark'] .scan-analyzing {
  background: #1e2a20;
}
html[data-theme='dark'] .macro {
  background: #141b15;
  border-color: var(--line);
}
html[data-theme='dark'] .macro input {
  background: #1b241d;
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme='dark'] .confidence-chip {
  background: #233427;
  border-color: #2e4433;
  color: #c9ecab;
}
html[data-theme='dark'] .scan-disclaimer {
  background: #241f12;
  border-color: #3a3120;
  color: #d8c79a;
}
html[data-theme='dark'] .scan-error {
  border-color: #3a241f;
  background: #241715;
}
html[data-theme='dark'] .scan-error b,
html[data-theme='dark'] .scan-error-msg {
  color: #f0917d;
}
html[data-theme='dark'] .how {
  background: #1b241d;
  border-color: var(--line);
}
html[data-theme='dark'] .how b {
  color: #6DCFA0;
}
html[data-theme='dark'] .how p {
  color: var(--muted);
}
html[data-theme='dark'] .round-shutter {
  background: #1E4B31;
}
html[data-theme='dark'] .scan-actions button {
  border-color: #4e942766;
}
html[data-theme='dark'] .scan-actions button:hover {
  background: #ffffff10;
}
html[data-theme='dark'] .empty,
html[data-theme='dark'] .sub,
html[data-theme='dark'] .scan-notes,
html[data-theme='dark'] .date,
html[data-theme='dark'] .field-label {
  color: var(--muted);
}
html[data-theme='dark'] .toast {
  background: #2e4433;
  box-shadow: 0 8px 22px #00000066;
}
html[data-theme='dark'] .login-body {
  background: radial-gradient(circle at 20% 0, #1b241d 0, #141b15 40%, #0d120e 100%);
}
html[data-theme='dark'] .login-card {
  background: #1b241d;
  border-color: var(--line);
}
html[data-theme='dark'] .login-card label {
  color: var(--deep);
}
html[data-theme='dark'] .login-card input {
  background: #141b15;
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme='dark'] .profile-row input {
  border-color: var(--line);
  background: #141b15;
  color: var(--ink);
}
/* Dark inputs: goal/activity fields + manual-entry fields + scanner result inputs */
html[data-theme='dark'] input,
html[data-theme='dark'] select,
html[data-theme='dark'] textarea {
  background: #141b15;
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme='dark'] select {
  background-image: none;
}
html[data-theme='dark'] select option {
  background: #1b241d;
  color: var(--ink);
}
html[data-theme='dark'] .macro input {
  background: #141b15;
  border-color: var(--line);
  color: var(--ink);
}
/* ---- Phase 14B: Botanical Profile Settings card ---------------------------
   Warm off-white surface, forest text, soft-leaf selected pills, rounded
   toggle. Presentation only: theme switch, data-font-size, data-font-family
   and stored preferences are unchanged. Scoped to the Profile settings card;
   other screens are untouched. */
.view[data-screen='profile'] .settings-heading {
  margin: 0 0 var(--nc-space-2);
  padding: 0 4px;
  font-family: var(--nc-font-display);
  font-size: calc(18px * var(--text-scale, 1));
  line-height: 24px;
  font-weight: var(--nc-weight-bold);
  color: var(--nc-primary);
}
.view[data-screen='profile'] .settings-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--nc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--nc-space-5);
  box-shadow: var(--nc-shadow-card);
}
.view[data-screen='profile'] .settings-card .setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nc-space-3);
}
.view[data-screen='profile'] .settings-card .setting-block {
  display: flex;
  flex-direction: column;
  gap: var(--nc-space-2);
}
.view[data-screen='profile'] .settings-card .setting-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.view[data-screen='profile'] .settings-card .setting-copy b {
  font-family: var(--nc-font-body);
  font-size: calc(14px * var(--text-scale, 1));
  line-height: 20px;
  font-weight: var(--nc-weight-semibold);
  color: var(--ink);
}
.view[data-screen='profile'] .settings-card .setting-copy span {
  font-family: var(--nc-font-body);
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 18px;
  color: var(--muted);
}
/* Task 33: a 44px hit area around the reference's compact 48x28 track. */
.view[data-screen='profile'] .settings-card .toggle {
  width: 56px;
  height: 44px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex: none;
  padding: 0;
}
.view[data-screen='profile'] .settings-card .toggle::before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  width: 48px;
  height: 28px;
  left: 4px;
  top: 8px;
  border: 1px solid var(--nc-outline-variant);
  border-radius: var(--nc-radius-pill);
  background: var(--nc-surface-highest);
  transition: background 0.2s;
  pointer-events: none;
}
.view[data-screen='profile'] .settings-card .toggle .knob {
  position: absolute;
  top: 10px;
  left: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(2, 52, 28, 0.25);
  transition: left 0.2s;
}
.view[data-screen='profile'] .settings-card .toggle.on::before {
  background: var(--nc-primary-container);
  border-color: var(--nc-primary-container);
}
.view[data-screen='profile'] .settings-card .toggle.on .knob {
  left: 26px;
}
.view[data-screen='profile'] .settings-card .toggle:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 2px;
}
/* segmented pill groups (Text size / Font) */
.view[data-screen='profile'] .settings-card .settings-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--soft);
}
.view[data-screen='profile'] .settings-card .font-opt {
  min-height: 44px;
  min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  padding: 8px 6px;
  font: inherit;
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 18px;
  font-weight: var(--nc-weight-semibold);
  /* darker than --muted so unselected pills clear WCAG AA on soft sage */
  color: #4a5c4d;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
}
.view[data-screen='profile'] .settings-card .font-opt.active {
  background: var(--warm);
  color: #02341c;
  font-weight: var(--nc-weight-bold);
  border-color: #237412;
  box-shadow: 0 1px 2px rgba(2, 52, 28, 0.12);
}
.view[data-screen='profile'] .settings-card .font-opt:focus-visible {
  outline: 3px solid var(--nc-primary);
  outline-offset: 2px;
}
.view[data-screen='profile'] .settings-card .setting-block {
  border-top: 1px solid var(--line);
  padding-top: var(--nc-space-4);
}
.view[data-screen='profile'] .settings-card .setting-copy {
  overflow-wrap: anywhere;
}
html[data-theme='dark'] .view[data-screen='profile'] .settings-card .font-opt:not(.active) {
  color: var(--muted);
}
/* ---- Phase 14C: Botanical Profile goals form, Save, Sign out -------------
   Warm off-white surfaces, forest labels, rounded sage inputs, leaf-green
   primary Save, quiet secondary Sign out. Presentation only: goal/activity
   values, POST /api/client/profile, save feedback, and the logout flow are
   unchanged. Scoped to the Profile form area; other screens untouched. */
.view[data-screen='profile'] .goals-heading {
  margin: var(--nc-space-5) 0 var(--nc-space-2);
  padding: 0 4px;
  color: var(--nc-primary);
  font-family: var(--nc-font-display);
  font-size: calc(18px * var(--text-scale, 1));
  line-height: 24px;
  font-weight: var(--nc-weight-bold);
}
.view[data-screen='profile'] .goals-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.view[data-screen='profile'] .goals-field .goals-label {
  margin: 0;
}
.view[data-screen='profile'] textarea.goals-input {
  display: block;
  box-sizing: border-box;
  min-height: 44px;
  max-width: 100%;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.view[data-screen='profile'] #goal {
  min-height: 64px;
}
.view[data-screen='profile'] .goals-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--nc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--nc-space-4);
  box-shadow: var(--nc-shadow-card);
}
.view[data-screen='profile'] .goals-label {
  margin: 10px 0 0;
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  font-weight: var(--nc-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nc-primary);
}
.view[data-screen='profile'] .goals-label:first-child {
  margin-top: 0;
}
.view[data-screen='profile'] .goals-input {
  width: 100%;
  margin-top: 2px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--soft);
  color: var(--ink);
  font: inherit;
  font-size: calc(14px * var(--text-scale, 1));
  line-height: 20px;
}
.view[data-screen='profile'] .goals-input:focus {
  background: var(--white);
  border-color: var(--nc-primary-container);
  outline: none;
  box-shadow: 0 0 0 1px var(--nc-primary-container);
}
.view[data-screen='profile'] .goals-save {
  width: 100%;
  margin-top: 4px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--nc-radius-pill);
  /* deep leaf: brand leaf #4E9E3A with white text measures 3.3:1; this shade
     keeps the leaf-green look while clearing WCAG AA (5.4:1) */
  background: #2f7a1d;
  color: #ffffff;
  font-family: var(--nc-font-body);
  font-size: calc(14px * var(--text-scale, 1));
  line-height: 20px;
  font-weight: var(--nc-weight-bold);
  box-shadow: 0 4px 14px rgba(28, 109, 11, 0.22);
  cursor: pointer;
}
.view[data-screen='profile'] .goals-save:active {
  transform: scale(0.99);
}
.view[data-screen='profile'] .goals-save:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 2px;
}
.view[data-screen='profile'] .goals-signout {
  margin-top: var(--nc-space-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--nc-shadow-card);
}
.view[data-screen='profile'] .goals-signout .profile-row b {
  font-family: var(--nc-font-body);
  font-size: calc(14px * var(--text-scale, 1));
  line-height: 20px;
  font-weight: var(--nc-weight-semibold);
  color: var(--ink);
}
.view[data-screen='profile'] .goals-signout .profile-row span {
  font-family: var(--nc-font-body);
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 18px;
  color: var(--muted);
}
.view[data-screen='profile'] .goals-signout-btn {
  width: auto;
  flex: none;
  padding: 9px 16px;
  border-radius: var(--nc-radius-pill);
  border: 1px solid var(--nc-outline-variant);
  background: transparent;
  color: var(--muted);
  font-family: var(--nc-font-body);
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 18px;
  font-weight: var(--nc-weight-semibold);
  cursor: pointer;
}
.view[data-screen='profile'] .goals-signout-btn:hover {
  background: var(--soft);
  color: var(--ink);
}
.view[data-screen='profile'] .goals-signout-btn:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 2px;
  color: var(--ink);
}
/* ---- Phase 15A: Botanical Coach heading + message bubbles -----------------
   Warm off-white surface, forest text, soft user bubble vs white coach card
   with hairline border and leaf accent bar; readable inline tables/lists.
   Presentation only: real chat history only; empty state ("Say hello"),
   typing indicator, failed-message Retry, and Clear chat keep their behavior.
   Suggestions strip, composer, to-top button, and other screens are untouched. */
.view[data-screen='coach'] .coach-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nc-space-2);
  margin-bottom: var(--nc-space-2);
}
.view[data-screen='coach'] .coach-intro-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.view[data-screen='coach'] .coach-eyebrow {
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  font-weight: var(--nc-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nc-primary);
}
.view[data-screen='coach'] .coach-title {
  margin: 0;
  font-family: var(--nc-font-display);
  font-size: calc(26px * var(--text-scale, 1));
  line-height: 32px;
  letter-spacing: -0.015em;
  font-weight: var(--nc-weight-bold);
  color: var(--nc-primary);
}
.view[data-screen='coach'] .coach-subtitle {
  margin: 2px 0 0;
  font-family: var(--nc-font-body);
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 18px;
  color: var(--muted);
}
.view[data-screen='coach'] .coach-clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--nc-outline-variant);
  border-radius: var(--nc-radius-pill);
  background: var(--white);
  color: var(--muted);
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  font-weight: var(--nc-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}
.view[data-screen='coach'] .coach-clear:hover {
  background: var(--soft);
  color: var(--ink);
}
.view[data-screen='coach'] .coach-clear:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 2px;
  color: var(--ink);
}
.view[data-screen='coach'] .message {
  max-width: 86%;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 16px 16px 16px 6px;
  font-family: var(--nc-font-body);
  font-size: calc(14px * var(--text-scale, 1));
  line-height: 1.5;
  box-shadow: var(--nc-shadow-card);
}
.view[data-screen='coach'] .message.user {
  align-self: flex-end;
  background: var(--soft);
  border: 0;
  color: var(--ink);
  border-radius: 16px 4px 16px 16px;
}
.view[data-screen='coach'] .message.coach {
  align-self: flex-start;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 4px 16px 16px 16px;
  padding: 14px 16px 14px 20px;
}
.view[data-screen='coach'] .message.coach::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--nc-primary-container);
}
.view[data-screen='coach'] .message.coach-failed {
  border-color: #f0a8a8;
  background: #fff8f8;
}
html[data-theme='dark'] .view[data-screen='coach'] .message.coach-failed {
  border-color: #632d2d;
  background: #251616;
}
/* readable inline tables/lists inside coach bubbles */
.view[data-screen='coach'] .message .coach-p {
  margin: 0 0 8px;
  font-size: calc(14px * var(--text-scale, 1));
  line-height: 1.55;
}
.view[data-screen='coach'] .message .coach-ul li,
.view[data-screen='coach'] .message .coach-quote {
  font-size: calc(14px * var(--text-scale, 1));
}
.view[data-screen='coach'] .message .coach-table {
  font-size: calc(13px * var(--text-scale, 1));
}
.view[data-screen='coach'] .message .coach-table td {
  padding: 7px 9px;
}
/* ---- Phase 15B: Botanical Coach suggestions, composer, to-top -------------
   Warm off-white pill input surface, forest text, soft suggestion pills,
   leaf-green send action, quiet to-top. Presentation only: suggestion taps
   fill/send, textarea input, send handler, pending/typing state, retry, and
   Clear chat keep their behavior. Heading and message bubbles are untouched. */
.view[data-screen='coach'] .suggestions {
  margin: 10px 0 8px;
  gap: 8px;
  scrollbar-width: none;
}
.view[data-screen='coach'] .suggestions::-webkit-scrollbar {
  display: none;
}
.view[data-screen='coach'] .suggestions button {
  white-space: nowrap;
  background: var(--soft);
  border: 1px solid transparent;
  color: var(--nc-primary);
  padding: 8px 13px;
  border-radius: var(--nc-radius-pill);
  font-family: var(--nc-font-body);
  font-size: calc(12px * var(--text-scale, 1));
  line-height: 16px;
  font-weight: var(--nc-weight-semibold);
  cursor: pointer;
}
.view[data-screen='coach'] .suggestions button:hover {
  background: var(--warm);
  color: #02341c;
}
.view[data-screen='coach'] .chat-input {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 6px 6px 6px 14px;
  gap: 8px;
  margin-top: 4px;
  box-shadow: 0 4px 20px rgba(30, 75, 49, 0.08);
}
.view[data-screen='coach'] .chat-input:focus-within {
  border-color: var(--nc-primary-container);
  box-shadow:
    0 0 0 1px var(--nc-primary-container),
    0 4px 20px rgba(30, 75, 49, 0.08);
}
.view[data-screen='coach'] .chat-input textarea {
  color: var(--ink);
  font-family: var(--nc-font-body);
  font-size: calc(14px * var(--text-scale, 1));
}
.view[data-screen='coach'] .chat-input textarea::placeholder {
  color: var(--muted);
}
.view[data-screen='coach'] .chat-input button {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* deep leaf: brand leaf #4E9E3A with a white glyph measures 3.3:1; this
     shade keeps the leaf-green look while clearing 4.5:1 (5.4:1) */
  background: #2f7a1d;
  color: #ffffff;
  font-family: var(--nc-font-body);
  font-size: calc(17px * var(--text-scale, 1));
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(28, 109, 11, 0.22);
}
.view[data-screen='coach'] .chat-input button:hover {
  filter: brightness(1.08);
}
.view[data-screen='coach'] .chat-input button:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 2px;
}
.view[data-screen='coach'] .to-top {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: var(--nc-radius-pill);
  padding: 5px 11px;
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  font-weight: var(--nc-weight-semibold);
  box-shadow: var(--nc-shadow-card);
}
.view[data-screen='coach'] .to-top:hover {
  color: var(--ink);
}
.view[data-screen='coach'] .to-top:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 2px;
  color: var(--ink);
}
/* ---- Task 16: Food Scanner result/review/save appearance ------------------
   Structure adapted from ../UI/ai-nutrition-food-scanner.png to real app data
   and controls, in the Botanical palette (Inter/forest/warm off-white). Scope:
   the result/review and save area only; capture/non-result states, manual
   entry, APIs, and other screens are untouched. Unknown values stay unknown
   (empty fields, "Confidence unavailable"); no mockup-only controls added. */
.view[data-screen='scan'] .scan-result {
  display: flex;
  flex-direction: column;
  gap: var(--nc-space-3);
}
.view[data-screen='scan'] .scan-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nc-space-2);
}
.view[data-screen='scan'] .scan-result-head-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.view[data-screen='scan'] .scan-result-eyebrow {
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  font-weight: var(--nc-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nc-primary);
}
.view[data-screen='scan'] .scan-result-title {
  margin: 0;
  font-family: var(--nc-font-display);
  font-size: calc(20px * var(--text-scale, 1));
  line-height: 26px;
  letter-spacing: -0.01em;
  font-weight: var(--nc-weight-bold);
  color: var(--nc-primary);
}
.view[data-screen='scan'] .scan-retake-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--nc-outline-variant);
  border-radius: var(--nc-radius-pill);
  background: var(--white);
  color: var(--muted);
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  font-weight: var(--nc-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}
.view[data-screen='scan'] .scan-retake-btn:hover {
  background: var(--soft);
  color: var(--ink);
}
.view[data-screen='scan'] .scan-retake-btn:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 2px;
  color: var(--ink);
}
.view[data-screen='scan'] .scan-result-preview {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px;
  box-shadow: var(--nc-shadow-card);
}
.view[data-screen='scan'] .scan-result-preview .scan-preview {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
}
/* The photo stays unobstructed until the customer reveals its Retake action. */
.view[data-screen='scan'] .scan-photo-frame {
  position: relative;
  border-radius: 12px;
}
.view[data-screen='scan'] .scan-preview-toggle {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.view[data-screen='scan'] .scan-retake-scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 20, 12, 0.6);
  opacity: 0;
  pointer-events: none;
}
.view[data-screen='scan'] .is-retake-visible .scan-retake-scrim {
  opacity: 1;
}
.view[data-screen='scan'] .scan-photo-retake {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 88px;
  min-height: 88px;
  max-width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px #000;
  font: inherit;
  font-size: calc(14px * var(--text-scale, 1));
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.view[data-screen='scan'] .scan-photo-retake[hidden] {
  display: none;
}
.view[data-screen='scan'] .scan-photo-retake svg {
  width: 32px;
  height: 32px;
  flex: none;
}
.view[data-screen='scan'] .scan-photo-retake:hover {
  color: #fff;
}
.view[data-screen='scan'] .scan-preview-toggle:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 3px;
}
.view[data-screen='scan'] .scan-photo-retake:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.view[data-screen='scan'] .scan-preview-toggle:disabled,
.view[data-screen='scan'] .scan-photo-retake:disabled {
  cursor: default;
}
.view[data-screen='scan'] .scan-result-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--nc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--nc-space-2);
  box-shadow: var(--nc-shadow-card);
}
.view[data-screen='scan'] .scan-result-card .field-label {
  margin: 6px 0 0;
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  font-weight: var(--nc-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nc-primary);
}
.view[data-screen='scan'] .scan-result-chip {
  align-self: flex-start;
  margin: 0;
  background: rgba(162, 248, 135, 0.45);
  border: 1px solid transparent;
  color: #02341c;
  padding: 6px 12px;
  border-radius: var(--nc-radius-pill);
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  font-weight: var(--nc-weight-semibold);
}
.view[data-screen='scan'] .scan-result-chip--unknown {
  background: var(--soft);
  /* darker than --muted so the unknown chip clears WCAG AA on soft sage */
  color: #4a5c4d;
}
html[data-theme='dark'] .view[data-screen='scan'] .scan-result-chip {
  /* translucent leaf over the dark card drops #02341c to 3.07:1; use the
     solid secondary-container leaf so the chip clears AA (10.8:1) */
  background: var(--warm);
  color: #02341c;
}
html[data-theme='dark'] .view[data-screen='scan'] .scan-result-chip--unknown {
  background: var(--soft);
  color: var(--muted);
}
.view[data-screen='scan'] .scan-field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--soft);
  color: var(--ink);
  font: inherit;
  font-size: calc(14px * var(--text-scale, 1));
  line-height: 20px;
}
.view[data-screen='scan'] .scan-field:focus {
  background: var(--white);
  border-color: var(--nc-primary-container);
  outline: none;
  box-shadow: 0 0 0 1px var(--nc-primary-container);
}
/* ---- Task 19: food name as the result card's headline ---------------------
   One visual refinement (Task 17 finding D1): the same editable input gets
   headline-scale type like the dish-name headline in the Scanner reference
   (Botanical Inter/forest/warm off-white). The accessible "Food" label,
   maxlength, value escaping, save wiring and every other control are
   unchanged; no display-only copy or invented text is added. */
.view[data-screen='scan'] .scan-result-card #scan-food-name {
  /* Task 21: a single editable, wrapping headline, sized by wireScannerFoodName. */
  display: block;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: 50px;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--nc-font-display);
  font-size: calc(18px * var(--text-scale, 1));
  line-height: 1.333333;
  font-weight: var(--nc-weight-bold);
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.view[data-screen='scan'] .scan-result-card #scan-food-name:focus {
  background: var(--white);
  border-color: var(--nc-primary-container);
  outline: none;
  box-shadow: 0 0 0 1px var(--nc-primary-container);
}
.view[data-screen='scan'] .scan-result-card .macro-grid {
  margin: 4px 0;
}
.view[data-screen='scan'] .scan-result-card .macro {
  background: var(--soft);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px;
}
.view[data-screen='scan'] .scan-result-card .macro input {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
}
.view[data-screen='scan'] .scan-result-card .macro input:focus {
  outline: none;
  border-color: var(--nc-primary-container);
  box-shadow: 0 0 0 1px var(--nc-primary-container);
}
.view[data-screen='scan'] .scan-result-card .macro span {
  font-family: var(--nc-font-body);
  color: var(--nc-primary);
  font-size: calc(10px * var(--text-scale, 1));
  letter-spacing: 0.05em;
}
/* Task 34: one editable energy metric, nearby portion, secondary nutrients. */
.view[data-screen='scan'] .scan-result-card .scan-nutrition-primary {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 8px;
  margin: 4px 0;
}
.view[data-screen='scan'] .scan-result-card .scan-nutrients {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.view[data-screen='scan'] .scan-nutrients legend {
  padding: 0;
  margin-bottom: 6px;
  color: var(--nc-text-muted);
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: var(--nc-weight-semibold);
}
.view[data-screen='scan'] .scan-result-card .scan-nutrients .macro-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.view[data-screen='scan'] .scan-result-card .scan-nutrition-primary .macro,
.view[data-screen='scan'] .scan-result-card .scan-nutrients .macro {
  min-width: 0;
  gap: 6px;
}
.view[data-screen='scan'] .scan-result-card .macro span {
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}
.view[data-screen='scan'] .scan-result-card .macro input {
  min-width: 0;
  min-height: 44px;
  padding: 8px;
  font-size: calc(14px * var(--text-scale, 1));
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.view[data-screen='scan'] .scan-result-card .scan-nutrition-primary input {
  min-height: 60px;
}
.view[data-screen='scan'] .scan-result-card .scan-energy-field input {
  color: var(--nc-primary);
  font-size: calc(32px * var(--text-scale, 1));
  font-weight: var(--nc-weight-bold);
}
.view[data-screen='scan'] .scan-result-card .scan-portion-field input {
  font-size: calc(18px * var(--text-scale, 1));
  font-weight: var(--nc-weight-semibold);
}
.view[data-screen='scan'] .scan-result-card .macro input:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 2px;
}
.view[data-screen='scan'] .scan-result-card .scan-notes {
  font-family: var(--nc-font-body);
  font-size: calc(12px * var(--text-scale, 1));
  color: var(--muted);
}
.view[data-screen='scan'] .scan-result-card .scan-disclaimer {
  background: rgba(162, 248, 135, 0.18);
  border: 1px solid var(--nc-outline-variant);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 6px 0 2px;
  font-family: var(--nc-font-body);
  font-size: calc(12px * var(--text-scale, 1));
  line-height: 17px;
  color: var(--ink);
}
.view[data-screen='scan'] .scan-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 2px;
  font-family: var(--nc-font-body);
  font-size: calc(12px * var(--text-scale, 1));
  line-height: 17px;
  color: var(--ink);
}
.view[data-screen='scan'] .scan-consent input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex: none;
  accent-color: var(--nc-primary-container);
}
.view[data-screen='scan'] .scan-save-btn {
  margin-top: 10px;
  border-radius: var(--nc-radius-pill);
}
.view[data-screen='scan'] .scan-manual-btn {
  margin-top: 8px;
}
.view[data-screen='scan'] .scan-save-btn:focus-visible,
.view[data-screen='scan'] .scan-manual-btn:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 2px;
}
/* Font picker: each button previews its own font */
.font-preview-rounded {
  font-family:
    ui-rounded, 'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manrope,
    'Segoe UI', system-ui, sans-serif;
}
.font-preview-modern {
  font-family: Aptos, Calibri, 'Segoe UI', Inter, ui-sans-serif, system-ui, sans-serif;
}
.font-preview-friendly {
  font-family: 'Trebuchet MS', 'Arial Rounded MT Bold', ui-rounded, system-ui, sans-serif;
}
.font-preview-accessible {
  font-family: Verdana, Tahoma, Arial, sans-serif;
  letter-spacing: -0.1px;
}
.font-preview-serif {
  font-family: Georgia, 'Iowan Old Style', Palatino, 'Times New Roman', serif;
}
/* Coach: compact spacing — same header content, tighter paddings/margins only */
.coach-head {
  margin-bottom: 4px;
}
.coach-head h2 {
  font-size: calc(20px * var(--text-scale, 1));
}
.view[data-screen='coach'] .sub {
  margin: 2px 0 8px;
}
.view[data-screen='coach'] .suggestions {
  margin: 8px 0;
}
/* App-wide compact spacing: all pages — tighter headers, subtitles, section rows.
   Content unchanged; only whitespace shrinks so more fits on screen. */
.screen-head {
  margin-bottom: 8px;
}
.screen-head h2 {
  font-size: calc(20px * var(--text-scale, 1));
}
.sub {
  margin: 2px 0 10px;
}
.heading-row {
  margin: 12px 0 8px;
}
.view[data-screen='today'] .hero strong {
  font-size: calc(20px * var(--text-scale, 1));
}
.view[data-screen='today'] .progress {
  margin-top: 10px;
}
.card {
  margin-bottom: 9px;
}
/* Meal history (inline on Today) */
.history-toggle {
  margin-top: 12px;
  border: 1px solid #ffffff40;
  background: #ffffff1c;
  color: #eafbe0;
  border-radius: 999px;
  padding: 6px 13px;
  font: inherit;
  font-size: calc(10.5px * var(--text-scale, 1));
  font-weight: 800;
  cursor: pointer;
}
.history-toggle:hover {
  background: #ffffff2e;
}
html[data-theme='dark'] .history-toggle {
  border-color: #9bd66a55;
  background: #ffffff10;
  color: #c9ecab;
}
.history-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 13px;
  margin-bottom: 11px;
}
html[data-theme='dark'] .history-panel {
  background: #1b241d;
  border-color: var(--line);
}
.history-days {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: 8px;
}
.history-day {
  flex: none;
  border: 1px solid var(--line);
  background: var(--canvas);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 11px;
  font: inherit;
  font-size: calc(10px * var(--text-scale, 1));
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
.history-day.active {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
}
html[data-theme='dark'] .history-day {
  background: #141b15;
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme='dark'] .history-day.active {
  background: #2e4433;
  border-color: #2e4433;
  color: #c9ecab;
}
.history-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed var(--line);
  margin-top: 10px;
  padding-top: 9px;
}
.history-total span {
  font-size: calc(10px * var(--text-scale, 1));
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.history-total b {
  font-size: calc(12px * var(--text-scale, 1));
  color: var(--deep);
}
html[data-theme='dark'] .history-total b {
  color: #6DCFA0;
}
.to-top {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 2px 4px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--deep);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: calc(10px * var(--text-scale, 1));
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 10px #244a2a26;
}
html[data-theme='dark'] .to-top {
  background: #1b241d;
  border-color: var(--line);
  color: var(--deep);
  box-shadow: 0 4px 10px #00000059;
}
/* "Coach is thinking…" bubble — token-based colors, so the existing dark .message.coach override covers it */
.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
}
.typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: typing-bounce 1.2s infinite;
}
.typing-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.typing-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
.typing-label {
  font-size: calc(11px * var(--text-scale, 1));
  color: var(--muted);
  font-weight: 600;
}

.font-preview-system {
  font-family: Inter, system-ui, sans-serif;
}
.font-preview-rounded {
  font-family: Nunito, system-ui, sans-serif;
}
.font-preview-serif {
  font-family: Lora, Georgia, serif;
}

/* Scanner capture and non-result states. Result review remains a separate task. */
.view[data-screen='scan'] .scan-page-sub {
  margin: 0 0 var(--nc-space-4);
  color: var(--nc-text-muted);
  font-size: calc(var(--nc-type-body-md-size) * var(--text-scale, 1));
  line-height: var(--nc-type-body-md-line);
}
.view[data-screen='scan'] .scan-capture {
  padding: var(--nc-space-3);
  margin-bottom: var(--nc-space-3);
  border-radius: var(--nc-radius-lg);
  background: var(--nc-surface);
  box-shadow: var(--nc-shadow-card);
}
.view[data-screen='scan'] .scan-optical-frame,
.view[data-screen='scan'] .scan-processing-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--nc-radius-md);
  background: linear-gradient(145deg, var(--nc-surface-container), var(--nc-surface-high));
}
.view[data-screen='scan'] .scan-optical-frame {
  min-height: 238px;
  padding: var(--nc-space-6) var(--nc-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--nc-outline-variant);
}
.view[data-screen='scan'] .scan-reticle {
  position: absolute;
  z-index: 1;
  width: 24px;
  height: 24px;
  pointer-events: none;
  border-color: var(--nc-ai);
  border-style: solid;
  border-width: 0;
}
.view[data-screen='scan'] .scan-reticle--tl { top: 12px; left: 12px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 4px; }
.view[data-screen='scan'] .scan-reticle--tr { top: 12px; right: 12px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 4px; }
.view[data-screen='scan'] .scan-reticle--bl { bottom: 12px; left: 12px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 4px; }
.view[data-screen='scan'] .scan-reticle--br { bottom: 12px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 4px; }
.view[data-screen='scan'] .scan-capture-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--nc-radius-md);
  background: var(--nc-ai-fixed);
  color: var(--nc-primary);
}
.view[data-screen='scan'] .scan-capture-icon svg {
  width: 27px;
  height: 27px;
}
.view[data-screen='scan'] .scan-optical-frame h3 {
  margin: var(--nc-space-3) 0 0;
  color: var(--nc-text);
  font-family: var(--nc-font-display);
  font-size: calc(var(--nc-type-headline-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-headline-sm-line);
}
.view[data-screen='scan'] .scan-optical-frame p {
  margin: var(--nc-space-1) 0 var(--nc-space-4);
  color: var(--nc-text-muted);
  font-size: calc(var(--nc-type-body-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-body-sm-line);
}
.view[data-screen='scan'] .scan-capture-primary,
.view[data-screen='scan'] .scan-capture-actions button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nc-space-2);
  border-radius: var(--nc-radius-md);
  padding: var(--nc-space-2) var(--nc-space-3);
  font: inherit;
  font-size: calc(var(--nc-type-label-md-size) * var(--text-scale, 1));
  font-weight: var(--nc-weight-bold);
  cursor: pointer;
}
.view[data-screen='scan'] .scan-capture-primary {
  border: 0;
  background: #1E4B31;
  color: #FFFFFF;
  box-shadow: var(--nc-shadow-ai);
}
.view[data-screen='scan'] .scan-capture-primary:hover { background: #2D6B45; }
.view[data-screen='scan'] .scan-capture-actions {
  display: flex;
  gap: var(--nc-space-2);
  margin-top: var(--nc-space-2);
}
.view[data-screen='scan'] .scan-capture-actions button {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--nc-outline-variant);
  background: var(--nc-surface-low);
  color: var(--nc-text);
}
.view[data-screen='scan'] .scan-capture-actions button:hover { background: var(--nc-surface-container); }
.view[data-screen='scan'] .scan-capture-primary svg,
.view[data-screen='scan'] .scan-capture-actions svg { width: 18px; height: 18px; flex: none; }
.view[data-screen='scan'] .scan-capture button:focus-visible,
.view[data-screen='scan'] .scan-task-message button:focus-visible {
  outline: 2px solid var(--nc-ai);
  outline-offset: 2px;
}
.view[data-screen='scan'] .scan-task-state {
  padding: var(--nc-space-2);
  margin-bottom: var(--nc-space-3);
  border-radius: var(--nc-radius-lg);
  background: var(--nc-surface);
  box-shadow: var(--nc-shadow-card);
}
.view[data-screen='scan'] .scan-processing-frame {
  height: 230px;
}
.view[data-screen='scan'] .scan-processing-photo,
.view[data-screen='scan'] .scan-processing-placeholder {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.view[data-screen='scan'] .scan-processing-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 27, 46, 0.2), rgba(19, 27, 46, 0.5));
}
.view[data-screen='scan'] .scan-processing-frame .scan-reticle { border-color: #fff; }
.view[data-screen='scan'] .scan-processing-indicator {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.view[data-screen='scan'] .scan-task-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: scan-spin 1s linear infinite;
}
.view[data-screen='scan'] .scan-task-copy { padding: var(--nc-space-4); }
.view[data-screen='scan'] .scan-task-copy h2,
.view[data-screen='scan'] .scan-task-message h2 {
  margin: 0;
  color: var(--nc-text);
  font-family: var(--nc-font-display);
  font-size: calc(var(--nc-type-headline-md-size) * var(--text-scale, 1));
  line-height: var(--nc-type-headline-md-line);
}
.view[data-screen='scan'] .scan-task-copy p,
.view[data-screen='scan'] .scan-task-message-detail {
  margin: var(--nc-space-2) 0 0;
  color: var(--nc-text-muted);
  font-size: calc(var(--nc-type-body-md-size) * var(--text-scale, 1));
  line-height: var(--nc-type-body-md-line);
  overflow-wrap: anywhere;
}
.view[data-screen='scan'] .scan-task-message {
  padding: var(--nc-space-4);
  margin-bottom: var(--nc-space-3);
  border: 1px solid var(--nc-outline-variant);
  border-radius: var(--nc-radius-lg);
  background: var(--nc-surface);
  box-shadow: var(--nc-shadow-card);
}
.view[data-screen='scan'] .scan-task-message-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: var(--nc-space-3);
  border-radius: var(--nc-radius-md);
  background: var(--nc-ai-fixed);
  color: var(--nc-primary);
}
.view[data-screen='scan'] .scan-task-message-icon svg { width: 22px; height: 22px; }
.view[data-screen='scan'] .scan-task-message--error .scan-task-message-icon {
  background: #ffdad6;
  color: #93000a;
}
.view[data-screen='scan'] .scan-task-message .scan-actions-row {
  margin-top: var(--nc-space-4);
}
.view[data-screen='scan'] .scan-task-message .scan-actions-row button {
  min-width: 0;
  min-height: 44px;
  border-radius: var(--nc-radius-md);
  font-size: calc(var(--nc-type-label-md-size) * var(--text-scale, 1));
  white-space: normal;
}
.view[data-screen='scan'] .scan-task-message .scan-actions-row .btn-primary {
  background: #1E4B31;
  color: #FFFFFF;
}
.view[data-screen='scan'] .scan-task-message .scan-actions-row .btn-ghost {
  background: var(--nc-surface-low);
  color: var(--nc-text);
}
.view[data-screen='scan'] .scan-task-alternative {
  margin: var(--nc-space-3) 0 0;
  color: var(--nc-text-muted);
  font-size: calc(var(--nc-type-body-sm-size) * var(--text-scale, 1));
  line-height: var(--nc-type-body-sm-line);
}
.view[data-screen='scan'] .how-row { gap: var(--nc-space-2); }
.view[data-screen='scan'] .how { min-width: 0; border-radius: var(--nc-radius-md); background: var(--nc-surface); }
.view[data-screen='scan'] .how-num { background: #1E4B31; color: #FFFFFF; }
.view[data-screen='scan'] .how b { color: var(--nc-text); }
.view[data-screen='scan'] .how p { overflow-wrap: anywhere; }
.view[data-screen='scan'] .scan-disclaimer { overflow-wrap: anywhere; }
/* Task 37: Top_Name_2 context / green title / muted subtitle on every opening.
   Higher specificity resolves the historical per-screen opening styles only. */
.view[data-screen] > .nc-opening {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}
.view[data-screen] > .nc-opening .nc-opening-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 220px;
}
.view[data-screen] > .nc-opening .nc-opening-context {
  margin: 0;
  color: var(--nc-primary);
  font-family: var(--nc-font-body);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 14px;
  font-weight: var(--nc-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.view[data-screen] > .nc-opening .nc-opening-title {
  margin: 0;
  color: var(--nc-primary);
  font-family: var(--nc-font-display);
  font-size: calc(26px * var(--text-scale, 1));
  line-height: 1.2;
  font-weight: var(--nc-weight-bold);
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.view[data-screen] > .nc-opening .nc-opening-subtitle {
  display: block;
  margin: 0;
  color: var(--nc-text-muted);
  font-family: var(--nc-font-body);
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 18px;
  overflow-wrap: anywhere;
}
.view[data-screen] > .nc-opening > button {
  min-width: 44px;
  min-height: 44px;
  flex: none;
}
.view[data-screen] > .nc-opening > button:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 3px;
}
html[data-theme='dark'] .view[data-screen='scan'] .scan-task-message--error .scan-task-message-icon {
  background: #39211f;
  color: #f0917d;
}
html[data-theme='dark'] .view[data-screen='scan'] .scan-capture-icon {
  background: var(--nc-surface-container);
  color: var(--nc-primary);
}
html[data-theme='dark'] .view[data-screen='scan'] .scan-capture-primary,
html[data-theme='dark'] .view[data-screen='scan'] .scan-task-message .scan-actions-row .btn-primary {
  background: #1E4B31;
  color: #FFFFFF;
}
html[data-theme='dark'] .view[data-screen='scan'] .scan-capture-primary:hover,
html[data-theme='dark'] .view[data-screen='scan'] .scan-task-message .scan-actions-row .btn-primary:hover {
  background: #2D6B45;
  color: #FFFFFF;
}
@media (max-width: 380px) {
  .view[data-screen='scan'] .scan-capture-actions { flex-direction: column; }
  .view[data-screen='scan'] .scan-optical-frame { min-height: 228px; }
  .view[data-screen='scan'] .scan-task-message .scan-actions-row { flex-wrap: wrap; }
  .view[data-screen='scan'] .scan-task-message .scan-actions-row button { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .view[data-screen='scan'] .scan-task-spinner { animation: none; }
}
/* Task 40: one input area, utility controls above the expandable composer. */
.view[data-screen='coach'] .coach-input-area {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.view[data-screen='coach'] .coach-input-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
}
.view[data-screen='coach'] .coach-input-area .suggestions {
  min-width: 0;
  margin: 0;
  padding: 3px 3px 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--nc-outline) transparent;
}
.view[data-screen='coach'] .coach-input-area .suggestions::-webkit-scrollbar {
  display: block;
  height: 4px;
}
.view[data-screen='coach'] .coach-input-area .suggestions::-webkit-scrollbar-thumb {
  background: var(--nc-outline);
  border-radius: 999px;
}
.view[data-screen='coach'] .suggestions button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--nc-font-body);
}
.view[data-screen='coach'] .suggestions button:active {
  background: var(--warm);
  color: #02341c;
}
.view[data-screen='coach'] .suggestions button:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 1px;
}
.view[data-screen='coach'] .coach-input-area .to-top {
  min-height: 44px;
  min-width: 60px;
  margin: 3px 0 0;
  justify-content: center;
  box-shadow: none;
}
.view[data-screen='coach'] .coach-input-area .chat-input {
  min-width: 0;
  margin: 0;
}
.view[data-screen='coach'] .chat-input textarea {
  min-width: 0;
}
.view[data-screen='coach'] .chat-input button {
  width: 44px;
  height: 44px;
}
/* Task 42: short viewports use one page scroll, not a compressed inner chat.
   The opening, full conversation and input area stay in document order.
   Existing .phone bottom padding reserves the One navigation/safe area;
   neither the composer nor the opening becomes another sticky overlay. */
@media (max-height: 680px) {
  .view[data-screen='coach'] {
    height: auto;
    min-height: 0;
  }
  .view[data-screen='coach'] .coach-intro {
    flex: none;
  }
  .view[data-screen='coach'] .chat-scroll {
    flex: none;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .view[data-screen='coach'] .chat-input {
    scroll-margin-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }
}
/* Task 45: one final review zone, divided by purpose rather than nested cards.
   All copy stays in document flow; the native checkbox owns consent state. */
.view[data-screen='scan'] .scan-save-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--nc-outline-variant);
}
.view[data-screen='scan'] .scan-save-area .scan-destination {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.view[data-screen='scan'] .scan-save-area .field-label {
  margin: 0;
}
.view[data-screen='scan'] .scan-save-area #scan-meal-type {
  min-height: 44px;
}
.view[data-screen='scan'] .scan-save-area .scan-explanation {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.view[data-screen='scan'] .scan-save-area .scan-notes {
  margin: 0;
  overflow-wrap: anywhere;
}
.view[data-screen='scan'] .scan-save-area .scan-disclaimer {
  margin: 0;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 3px solid var(--nc-outline-variant);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}
.view[data-screen='scan'] .scan-save-area .scan-consent {
  min-height: 44px;
  margin: 0;
  padding: 12px 0;
  gap: 10px;
  border-top: 1px solid var(--nc-outline-variant);
  border-bottom: 1px solid var(--nc-outline-variant);
  cursor: pointer;
}
.view[data-screen='scan'] .scan-save-area .scan-consent input[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--nc-primary);
}
.view[data-screen='scan'] .scan-save-area .scan-consent:has(input:checked) {
  background: var(--soft);
  border-color: var(--nc-primary);
}
.view[data-screen='scan'] .scan-save-area .scan-consent:focus-within {
  outline: 2px solid var(--nc-primary);
  outline-offset: 3px;
}
.view[data-screen='scan'] .scan-save-area .scan-save-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.view[data-screen='scan'] .scan-save-area .scan-save-btn {
  margin: 0;
  min-height: 48px;
}
.view[data-screen='scan'] .scan-save-area .scan-manual-btn {
  margin: 0;
  min-height: 44px;
  border-color: transparent;
  background: transparent;
  color: var(--nc-primary);
}
.view[data-screen='scan'] .scan-save-area .scan-manual-btn:hover {
  text-decoration: underline;
  background: var(--soft);
}
.view[data-screen='scan'] .scan-save-area #scan-meal-type:focus-visible,
.view[data-screen='scan'] .scan-save-area input[type='checkbox']:focus-visible {
  outline: 2px solid var(--nc-primary);
  outline-offset: 3px;
}
/* Task 46: coach.html control composition. Keep real controls/handlers and the
   Task 42 short-height scroll model; no attachment action or external icons. */
.view[data-screen='coach'] .coach-input-area {
  gap: 8px;
  padding-top: 0;
  border-top: 0;
}
.view[data-screen='coach'] .coach-input-tools {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.view[data-screen='coach'] .coach-input-area .to-top {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px 12px;
  min-width: 62px;
  border-color: transparent;
  background: var(--nc-surface-container);
  color: var(--muted);
  box-shadow: 0 1px 3px rgba(30, 75, 49, 0.05);
}
.view[data-screen='coach'] .coach-input-area .suggestions {
  padding: 3px 3px 4px;
  gap: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.view[data-screen='coach'] .coach-input-area .suggestions::-webkit-scrollbar {
  display: none;
}
.view[data-screen='coach'] .suggestions .suggestion-chip {
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-weight: var(--nc-weight-regular);
  box-shadow: 0 1px 3px rgba(30, 75, 49, 0.04);
}
.view[data-screen='coach'] .suggestions .suggestion-chip--lead {
  border-color: transparent;
  background: var(--warm);
  color: #237412;
  font-weight: var(--nc-weight-semibold);
}
.view[data-screen='coach'] .suggestions .suggestion-chip:hover,
.view[data-screen='coach'] .suggestions .suggestion-chip:active {
  background: var(--soft);
  color: var(--nc-primary);
}
.view[data-screen='coach'] .suggestions .suggestion-chip--lead:hover,
.view[data-screen='coach'] .suggestions .suggestion-chip--lead:active {
  background: var(--warm);
  color: #02341c;
}
.view[data-screen='coach'] .coach-prompt-icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--nc-primary);
  pointer-events: none;
}
.view[data-screen='coach'] .suggestion-chip--lead .coach-prompt-icon {
  color: inherit;
}
.view[data-screen='coach'] .coach-top-icon {
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.view[data-screen='coach'] .coach-input-area .chat-input {
  border-color: transparent;
  /* Task 47: a rounded rectangle leaves safe corners for expanded drafts. */
  border-radius: 20px;
  padding: 8px 12px;
  align-items: center;
  background: var(--white);
  box-shadow: 0 4px 20px rgba(30, 75, 49, 0.08);
}
.view[data-screen='coach'] .coach-input-area .chat-input textarea {
  margin: 0;
  padding: 12px 0;
  min-height: 44px;
  text-align: start;
}
.view[data-screen='coach'] .coach-input-area .chat-input:focus-within {
  border-color: var(--nc-primary);
  box-shadow: 0 0 0 1px var(--nc-primary), 0 4px 20px rgba(30, 75, 49, 0.08);
}
.view[data-screen='coach'] .chat-input button {
  background: var(--nc-hero-start);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(30, 75, 49, 0.2);
}
.view[data-screen='coach'] .coach-input-area .chat-input button {
  align-self: center;
  flex: 0 0 44px;
  margin: 0;
}
.view[data-screen='coach'] .chat-input .coach-send-icon {
  width: 22px;
  height: 22px;
  pointer-events: none;
}
/* Task 48: the reference's ambient vectors sit behind existing Coach content.
   Only this decorative layer clips its off-edge shapes; controls/text do not. */
.view[data-screen='coach'] {
  position: relative;
  isolation: isolate;
}
.view[data-screen='coach'] .coach-botanical-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.view[data-screen='coach'] .coach-botanical-shape {
  position: absolute;
  pointer-events: none;
}
.view[data-screen='coach'] .coach-botanical-shape--top {
  width: 256px;
  height: 256px;
  top: -24px;
  right: -48px;
  color: var(--nc-primary);
  opacity: 0.2;
}
.view[data-screen='coach'] .coach-botanical-shape--left {
  width: 224px;
  height: 224px;
  top: 384px;
  left: -64px;
  color: var(--nc-primary-container);
  opacity: 0.1;
}
/* Reference on-surface-variant ink keeps the subtitle readable where the new
   sage shape passes behind it; text, size and layout remain unchanged. */
html:not([data-theme='dark']) .view[data-screen='coach'] > .nc-opening .nc-opening-subtitle {
  color: #414942;
}
html[data-theme='dark'] .view[data-screen='coach'] .coach-botanical-shape--top {
  opacity: 0.12;
}
html[data-theme='dark'] .view[data-screen='coach'] .coach-botanical-shape--left {
  opacity: 0.08;
}

/* Task 49: account-owned measurements and photo, in the approved Profile shell.
   Only the ambient background clips; identity, labels and editors wrap fully. */
.view[data-screen='profile'] {
  position: relative;
  isolation: isolate;
}
.view[data-screen='profile'] .profile-botanical-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.profile-botanical-background svg {
  position: absolute;
  top: -16px;
  right: -40px;
  width: 288px;
  height: 288px;
  color: var(--nc-primary);
  opacity: 0.06;
  pointer-events: none;
}
.view[data-screen='profile'] .profile-identity {
  align-items: center;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  padding: 20px;
  gap: 16px;
}
.view[data-screen='profile'] .profile-identity-avatar {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  padding: 0;
  border: 0;
  appearance: none;
  overflow: hidden;
  font-size: calc(26px * var(--text-scale, 1));
  cursor: pointer;
}
.profile-identity-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.view[data-screen='profile'] .profile-photo-action,
.profile-editor-dialog .profile-photo-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--nc-primary);
  font: inherit;
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 1.4;
  font-weight: 600;
  cursor: pointer;
}
.profile-photo-controls {
  margin: -8px 0 16px;
  padding: 0 4px;
}
.profile-photo-controls p,
.profile-editor-help {
  margin: 0;
  color: var(--muted);
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 1.5;
}
.profile-photo-controls > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.profile-metrics-overview { margin: 0 0 24px; }
.profile-metric-card h3 {
  margin: 0;
  font-size: calc(15px * var(--text-scale, 1));
  line-height: 1.4;
  color: var(--nc-primary);
  font-weight: 700;
}
.profile-secondary-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.profile-metric-card { padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.profile-metric-card h3 { display: flex; align-items: center; gap: 7px; }
.profile-metric-card h3 svg { width: 20px; height: 20px; flex-shrink: 0; }
.profile-metric-value { margin: 12px 0 0; font-size: calc(18px * var(--text-scale, 1)); line-height: 1.4; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.profile-metric-detail { margin: 4px 0 0; font-size: calc(12px * var(--text-scale, 1)); line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.profile-metrics-editors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 12px; }
.profile-metrics-editors .goals-field { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.profile-metrics-editors label { display: block; font-size: calc(13px * var(--text-scale,1)); line-height: 1.5; font-weight: 600; color: var(--ink); }
.view[data-screen='profile'] .profile-metrics-editors input { margin-top: 0; min-height: 48px; border-color: var(--line); }
.profile-save-status { margin: 12px 4px 0; min-height: 0; font-size: calc(13px * var(--text-scale,1)); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.profile-save-status:empty { display: none; }
.view[data-screen='profile'] .goals-save { min-height: 52px; margin-top: 16px; }
.view[data-screen='profile'] .profile-update-status {margin:8px 0 0;color:var(--muted);font-size:calc(13px * var(--text-scale,1));line-height:1.5;overflow-wrap:anywhere;}
.view[data-screen='profile'] .profile-update-status:empty {display:none;}
.view[data-screen='profile'] #profile-update:disabled {opacity:.65;cursor:default;}
.view[data-screen='profile'] .profile-signout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--nc-outline-variant);
  border-radius: var(--nc-radius-pill);
  background: var(--white);
  color: #ba1a1a;
  font: inherit;
  font-size: calc(14px * var(--text-scale,1));
  line-height: 1.5;
  font-weight: 600;
  cursor: pointer;
}
.profile-signout svg { width: 20px; height: 20px; flex-shrink: 0; }
.view[data-screen='profile'] .profile-signout:hover { background: var(--soft); }
.view[data-screen='profile'] .profile-identity-avatar:focus-visible,
.view[data-screen='profile'] .profile-photo-action:focus-visible,
.view[data-screen='profile'] .profile-signout:focus-visible { outline: 3px solid var(--nc-primary); outline-offset: 3px; }
.view[data-screen='profile'] button:disabled { opacity: 0.6; cursor: wait; }
html[data-theme='dark'] .view[data-screen='profile'] .profile-signout { color: #ffb4ab; }
html[data-theme='dark'] .profile-botanical-background svg { opacity: 0.08; }
@media (max-width: 370px) {
  .profile-metric-card { padding: 14px 12px; }
}

/* Task 50: a different botanical silhouette for each non-Profile screen.
   Empty pseudo-elements carry no text/controls; their paint stays inside the
   view. Masks tint with the theme's forest ink, behind opaque content cards. */
.view:is([data-screen='today'], [data-screen='plan'], [data-screen='scan'], [data-screen='coach']) {
  position: relative;
  isolation: isolate;
}
.view:is([data-screen='today'], [data-screen='plan'], [data-screen='scan'], [data-screen='coach'])::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--nc-primary);
  opacity: 0.075;
  -webkit-mask-image: var(--nc-page-botanical-art);
  mask-image: var(--nc-page-botanical-art);
  -webkit-mask-size: var(--nc-page-botanical-size);
  mask-size: var(--nc-page-botanical-size);
  -webkit-mask-position: var(--nc-page-botanical-position);
  mask-position: var(--nc-page-botanical-position);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* Today: broad morning leaves, reaching in from the right. */
.view[data-screen='today'] {
  --nc-page-botanical-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M294 12C306 100 250 166 151 157C146 71 210 9 294 12ZM119 226C39 218 12 159 28 101C105 94 151 148 119 226Z'/%3E%3Cpath d='M105 264C174 208 235 129 280 34' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  --nc-page-botanical-size: 308px 308px;
  --nc-page-botanical-position: right -42px top -46px;
}
/* Plan: slender alternating olive leaves along an ascending branch. */
.view[data-screen='plan'] {
  --nc-page-botanical-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M88 305C167 221 217 132 265 14' fill='none' stroke='black' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M250 54C205 56 174 34 165 5C208 1 238 18 250 54ZM238 76C274 49 302 56 316 81C282 108 251 103 238 76ZM215 126C174 119 151 92 151 64C190 69 212 91 215 126ZM194 158C235 127 266 134 278 160C240 187 207 184 194 158ZM160 211C116 204 96 178 97 146C139 152 160 176 160 211ZM136 242C174 210 205 214 222 240C185 272 153 269 136 242Z'/%3E%3C/svg%3E");
  --nc-page-botanical-size: 286px 326px;
  --nc-page-botanical-position: right -24px top -64px;
}
/* Food Scanner: an open, round-leaved sprout rising from a seed. */
.view[data-screen='scan'] {
  --nc-page-botanical-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M170 302C162 252 155 209 178 139' fill='none' stroke='black' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M176 151C153 75 197 23 277 23C281 105 245 156 176 151ZM159 211C83 223 39 183 38 113C108 106 156 140 159 211ZM165 320C124 310 116 277 137 260C162 240 192 255 198 278C203 297 187 315 165 320Z'/%3E%3C/svg%3E");
  --nc-page-botanical-size: 270px 310px;
  --nc-page-botanical-position: right -36px top -82px;
}
/* Coach: two soft folded leaves, more open than Profile's organic mass. */
.view[data-screen='coach'] {
  --nc-page-botanical-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath fill-rule='evenodd' d='M302 24C318 106 280 180 184 179C161 104 208 22 302 24ZM282 54C221 67 194 111 190 161C233 133 266 103 282 54ZM33 173C104 156 161 192 161 276C86 293 24 248 33 173ZM49 192C61 242 100 265 144 269C119 229 88 204 49 192Z'/%3E%3C/svg%3E");
  --nc-page-botanical-size: 326px 326px;
  --nc-page-botanical-position: right -40px top -54px;
}
/* The user-approved unique Coach art replaces its prior ambient shapes only. */
.view[data-screen='coach'] .coach-botanical-background > svg {
  display: none;
}
html[data-theme='dark'] .view:is([data-screen='today'], [data-screen='plan'], [data-screen='scan'], [data-screen='coach'])::before {
  opacity: 0.095;
}

/* Task 51: reference-inspired dish/macros/ingredients, with real review fields.
   All controls remain native, labelled and editable; narrow/large text reflows. */
.view[data-screen='scan'] .scan-ingredient-result-card { gap: 16px; padding: 18px; }
.scan-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.scan-dish-heading { display: flex; align-items: flex-start; gap: 12px; }
.scan-dish-copy { min-width: 0; flex: 1; }
.view[data-screen='scan'] .scan-ingredient-result-card #scan-food-name { margin: 0; padding: 0; min-height: 48px; border-color: transparent; background: transparent; font-size: calc(22px * var(--text-scale,1)); line-height: 1.35; font-weight: 700; }
.view[data-screen='scan'] .scan-ingredient-result-card #scan-food-name:focus { border-color: var(--nc-primary); }
.scan-dish-copy > p { margin: 6px 0 0; color: var(--muted); font-size: calc(13px * var(--text-scale,1)); line-height: 1.5; }
.scan-result-estimate { flex: 0 0 96px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.scan-ai-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 10px; border-radius: 999px; background: var(--warm); color: #02341c; font-size: calc(12px * var(--text-scale,1)); line-height: 1.35; font-weight: 600; text-align: center; }
.scan-model-confidence { color: var(--muted); font-size: calc(11px * var(--text-scale,1)); line-height: 1.5; text-align: right; overflow-wrap: anywhere; }
.scan-reference-macros { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.scan-macro-tile { min-width: 0; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.scan-macro-tile--energy { background: #e3fbdc; color: #1c6d0b; }
.scan-macro-tile > span { font-size: calc(11px * var(--text-scale,1)); line-height: 1.5; font-weight: 700; text-transform: uppercase; }
.view[data-screen='scan'] .scan-macro-tile > input { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 4px 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: calc(23px * var(--text-scale,1)); line-height: 1.2; font-weight: 700; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.view[data-screen='scan'] .scan-macro-tile--energy > input { color: #1c6d0b; }
.scan-macro-tile input::-webkit-inner-spin-button,
.scan-macro-tile input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.scan-macro-tile > small { font-size: calc(12px * var(--text-scale,1)); line-height: 1.5; }
.scan-ingredients { padding: 14px; border-radius: 16px; background: var(--soft); }
.scan-ingredients-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.scan-ingredients-heading h3 { margin: 0; font-size: calc(15px * var(--text-scale,1)); line-height: 1.5; color: var(--ink); }
.scan-ingredients-heading button { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--nc-primary); font: inherit; font-size: calc(12px * var(--text-scale,1)); line-height: 1.4; font-weight: 600; cursor: pointer; }
.scan-ingredient-list { list-style: none; margin: 8px 0 0; padding: 0; }
.scan-ingredient-list > li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: calc(14px * var(--text-scale,1)); line-height: 1.5; }
.scan-ingredient-list > li + li { border-top: 1px solid var(--line); }
.scan-ingredient-list > li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.scan-ingredient-list > li > span:last-child { flex-shrink: 0; color: var(--muted); font-size: calc(12px * var(--text-scale,1)); }
.scan-ingredients-unavailable,
.scan-nutrition-mode,
#scan-weight-help { font-size: calc(12px * var(--text-scale,1)); line-height: 1.5; color: var(--muted); margin: 8px 0 0; }
.scan-ingredient-editor:not([hidden]) { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.scan-ingredient-row { display: grid; grid-template-columns: minmax(0,1fr) 90px; gap: 12px; align-items: center; margin-top: 12px; }
.scan-ingredient-row label { font-size: calc(14px * var(--text-scale,1)); line-height: 1.5; overflow-wrap: anywhere; }
.scan-ingredient-row small { color: var(--muted); }
.view[data-screen='scan'] .scan-ingredient-row input { width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--white); color: var(--ink); font: inherit; }
#scan-ingredient-preview { display: block; margin-top: 14px; font-size: calc(13px * var(--text-scale,1)); line-height: 1.6; font-weight: 600; }
#scan-ingredient-error,
#scan-confirm-status { margin: 8px 0 0; font-size: calc(13px * var(--text-scale,1)); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
#scan-ingredient-error:empty,
#scan-confirm-status:empty { display: none; }
.scan-weight-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.scan-weight-actions button { min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--nc-primary); font: inherit; font-size: calc(13px * var(--text-scale,1)); font-weight: 600; cursor: pointer; }
.scan-weight-actions #scan-weights-apply { background: var(--nc-hero-start); color: #fff; }
.scan-extra-values { border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; }
.scan-extra-values summary { min-height: 44px; padding: 12px 0; color: var(--nc-primary); font-size: calc(13px * var(--text-scale,1)); line-height: 1.5; font-weight: 600; cursor: pointer; }
.scan-extra-values > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 0 0 12px; }
.scan-extra-values label { min-width: 0; font-size: calc(13px * var(--text-scale,1)); line-height: 1.5; }
.view[data-screen='scan'] .scan-extra-values input { margin-top: 6px; min-height: 48px; }
.view[data-screen='scan'] .scan-macro-tile input:focus-visible,
.view[data-screen='scan'] .scan-ingredient-row input:focus-visible,
.scan-ingredients button:focus-visible,
.scan-extra-values summary:focus-visible { outline: 2px solid var(--nc-primary); outline-offset: 3px; }
.view[data-screen='scan'] .scan-ingredient-result-card [disabled] { opacity: 0.6; cursor: wait; }
html[data-theme='dark'] .scan-macro-tile--energy { background: #203c24; color: #a2f887; }
html[data-theme='dark'] .view[data-screen='scan'] .scan-macro-tile--energy > input { color: #a2f887; }
@media (max-width: 370px) {
  .view[data-screen='scan'] .scan-ingredient-result-card { padding: 16px; }
  .scan-reference-macros { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .scan-result-estimate { flex-basis: 88px; }
}

/* Task 62: saved photos and empty meal placeholders share the same 64px space. */
.nc-meal-photo-button { position: relative; width: 64px; height: 64px; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--soft); color: var(--nc-primary); cursor: zoom-in; }
.nc-meal-photo-button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nc-meal-photo-button img[hidden] { display: none; }
.nc-meal-photo-button:focus-visible { outline: 3px solid var(--nc-primary); outline-offset: 3px; }
.meal-photo-fallback { display: none; align-items: center; justify-content: center; width: 100%; height: 100%; }
.meal-photo-fallback svg { width: 26px; height: 26px; }
.meal-photo-unavailable { cursor: default; }
.meal-photo-unavailable .meal-photo-fallback { display: flex; }
.meal-photo-viewer { width: min(880px,calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--white); color: var(--ink); overflow: hidden; box-shadow: 0 16px 60px rgba(2,52,28,.28); }
.meal-photo-viewer::backdrop { background: rgba(2,18,10,.76); }
.meal-photo-shell { display: flex; flex-direction: column; gap: 12px; height: min(760px,calc(100vh - 32px)); height: min(760px,calc(100dvh - 32px)); box-sizing: border-box; padding: 16px; }
.meal-photo-viewer-heading { display: flex; align-items: flex-start; gap: 12px; flex: none; }
.meal-photo-viewer-heading h2 { flex: 1; min-width: 0; margin: 0; font: inherit; font-size: calc(18px * var(--text-scale,1)); line-height: 1.5; font-weight: 700; color: var(--nc-primary); overflow-wrap: anywhere; }
.meal-photo-close { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 6px; min-width: 76px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); color: var(--nc-primary); font: inherit; font-size: calc(13px * var(--text-scale,1)); line-height: 1.4; font-weight: 600; cursor: pointer; }
.meal-photo-close > span { font-size: 22px; line-height: 1; }
.meal-photo-close:focus-visible { outline: 3px solid var(--nc-primary); outline-offset: 3px; }
.meal-photo-frame { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; overflow: hidden; border-radius: 12px; background: var(--soft); }
.meal-photo-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.meal-photo-frame img[hidden] { display: none; }
.meal-photo-status { flex: none; margin: 0; font-size: calc(13px * var(--text-scale,1)); line-height: 1.5; color: var(--ink); }
.meal-photo-status:empty { display: none; }

/* Task 53: the GPT reference saved-plan card. All labels remain live text;
   the two bowl-only crops are optimized local data assets in cached app.js. */
.view[data-screen='plan'] .plan-hero {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  container-name: plan-hero;
  border: 1px solid #dce6d4;
  border-radius: 22px;
  padding: 20px;
  margin-bottom: var(--nc-space-3);
  color: #173f2a;
  background: #fcfdf9;
  box-shadow: 0 5px 18px rgba(23,63,42,.05);
}
.view[data-screen='plan'] .plan-hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.view[data-screen='plan'] .plan-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--nc-radius-pill);
  background: #e8f1de;
  color: #3d602d;
  font-family: var(--nc-font-body);
  font-size: calc(12px * var(--text-scale,1));
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.view[data-screen='plan'] .plan-hero-badge-icon { width: 17px; height: 17px; flex: none; color: currentColor; }
.view[data-screen='plan'] .plan-hero-day { color: #49624f; font-family: var(--nc-font-body); font-size: calc(12px * var(--text-scale,1)); line-height: 1.5; white-space: nowrap; }
.view[data-screen='plan'] .plan-hero-day strong { color: #173f2a; font-weight: 700; }
/* Task 53A: keep the reference's copy-left / bowl-right composition on phones. */
.view[data-screen='plan'] .plan-hero-main { display: grid; grid-template-columns: minmax(0,1fr) clamp(88px,38cqi,160px); align-items: center; gap: 12px; margin-top: 20px; }
.view[data-screen='plan'] .plan-hero-copy { min-width: 0; }
.view[data-screen='plan'] .plan-hero-art { justify-self: end; width: 100%; min-width: 0; pointer-events: none; }
.view[data-screen='plan'] .plan-hero-bowl {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right,transparent,#000 2%,#000 98%,transparent), linear-gradient(to bottom,transparent,#000 4%,#000 94%,transparent);
  mask-image: linear-gradient(to right,transparent,#000 2%,#000 98%,transparent), linear-gradient(to bottom,transparent,#000 4%,#000 94%,transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.view[data-screen='plan'] .plan-hero-title { margin: 0; padding: 0; font-family: var(--nc-font-display); font-size: calc(clamp(22px,6.2cqi,26px) * var(--text-scale,1)); line-height: 1.2; letter-spacing: -.025em; font-weight: var(--nc-weight-bold); color: #173f2a; overflow-wrap: normal; }
.view[data-screen='plan'] .plan-hero-title span { display: block; }
.view[data-screen='plan'] .plan-hero-text { margin: 10px 0 0; padding: 0; font-family: var(--nc-font-body); font-size: calc(14px * var(--text-scale,1)); line-height: 1.5; color: #49624f; overflow-wrap: anywhere; }
.view[data-screen='plan'] .plan-hero-footer { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #dce6d4; color: #49624f; }
.view[data-screen='plan'] .plan-hero-clock { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.view[data-screen='plan'] .plan-hero-caption { margin: 0; min-width: 0; font-family: var(--nc-font-body); font-size: calc(12px * var(--text-scale,1)); line-height: 1.5; color: inherit; overflow-wrap: anywhere; }
html[data-theme='dark'] .view[data-screen='plan'] .plan-hero { background: #173f2a; border-color: #385943; color: #f5f9ed; box-shadow: none; }
html[data-theme='dark'] .view[data-screen='plan'] .plan-hero-title,
html[data-theme='dark'] .view[data-screen='plan'] .plan-hero-day strong { color: #f5f9ed; }
html[data-theme='dark'] .view[data-screen='plan'] .plan-hero-text,
html[data-theme='dark'] .view[data-screen='plan'] .plan-hero-day,
html[data-theme='dark'] .view[data-screen='plan'] .plan-hero-footer { color: #d9e7ce; }
html[data-theme='dark'] .view[data-screen='plan'] .plan-hero-badge { background: #cee3b4; color: #173f2a; }
html[data-theme='dark'] .view[data-screen='plan'] .plan-hero-footer { border-color: #4b6a50; }
html[data-theme='dark'] .view[data-screen='plan'] .plan-hero-bowl { mix-blend-mode: lighten; }

/* Task 55: account editor and saved food preferences. */
.profile-edit-details,
.profile-editor-close,
.profile-editor-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--nc-primary);
  font: inherit;
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 1.4;
  font-weight: 600;
  cursor: pointer;
}
.profile-edit-details svg { width: 18px; height: 18px; flex-shrink: 0; }
.profile-edit-details:hover,
.profile-editor-close:hover,
.profile-editor-cancel:hover,
.profile-preference-row:hover { background: var(--soft); }
.profile-food-preferences { margin: 20px 0; }
.profile-food-preferences h3 {
  margin: 0 4px;
  color: var(--nc-primary);
  font-size: calc(20px * var(--text-scale, 1));
  line-height: 1.4;
}
.profile-food-preferences > p {
  margin: 4px 4px 14px;
  color: var(--muted);
  font-size: calc(13px * var(--text-scale, 1));
  line-height: 1.5;
}
.profile-food-card { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.profile-preference-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 78px;
  padding: 16px 20px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.profile-preference-row + .profile-preference-row { border-top: 1px solid var(--line); }
.profile-preference-row > span { min-width: 0; }
.profile-preference-row strong { display: block; font-size: calc(15px * var(--text-scale, 1)); line-height: 1.4; }
.profile-preference-value { display: block; margin-top: 4px; color: var(--muted); font-size: calc(13px * var(--text-scale, 1)); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.profile-preference-row svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); }
.profile-edit-details:focus-visible,
.profile-preference-row:focus-visible,
.profile-editor-dialog :is(input, textarea, button):focus-visible { outline: 3px solid var(--nc-primary); outline-offset: 3px; }
.profile-preference-row:focus-visible { outline-offset: -4px; }
.profile-editor-dialog {
  width: calc(100% - 32px);
  max-width: 520px;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--nc-font-body);
  font-size: calc(14px * var(--text-scale, 1));
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.3);
}
.profile-editor-dialog::backdrop { background: rgba(3, 15, 8, 0.7); }
.profile-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.profile-editor-heading h2 { margin: 0; color: var(--nc-primary); font-size: calc(22px * var(--text-scale, 1)); line-height: 1.3; }
.profile-editor-fields { display: grid; gap: 8px; padding: 20px; }
.profile-editor-fields label { margin-top: 8px; font-weight: 600; line-height: 1.5; }
.profile-editor-fields label:first-child { margin-top: 0; }
.profile-editor-fields :is(input, textarea) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
}
.profile-editor-fields textarea { resize: vertical; }
.profile-editor-fields :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
.profile-editor-email { margin: 0; color: var(--muted); font-size: calc(13px * var(--text-scale, 1)); line-height: 1.5; overflow-wrap: anywhere; }
.profile-editor-photo { display: grid; justify-items: start; gap: 8px; margin: 8px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.profile-editor-photo h3 { margin: 0; font-size: calc(15px * var(--text-scale, 1)); line-height: 1.4; }
#profile-editor-photo-status:empty { display: none; }
.profile-editor-status { margin: 0; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.profile-editor-status:empty { display: none; }
.profile-editor-actions { display: flex; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--line); }
.profile-editor-actions > button { flex: 1; min-height: 46px; margin: 0; }
.profile-editor-dialog :disabled { opacity: 0.6; cursor: wait; }
/* Task116: saved Coach preferences use the existing Botanical Profile dialog. */
.coach-memory-entry { width:100%; margin-top:12px; border:1px solid var(--line); border-radius:20px; background:var(--white); }
#coach-memory-rows { display:grid; gap:12px; min-width:0; }
.coach-memory-row { padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--soft); min-width:0; }
.coach-memory-row h3 { margin:0 0 6px; font-size:calc(16px * var(--text-scale,1)); }
.coach-memory-value { margin:0 0 4px; font-weight:600; overflow-wrap:anywhere; }
.coach-memory-row .profile-editor-help { margin:0 0 10px; }
.coach-memory-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.coach-memory-buttons button { min-height:44px; }
.coach-memory-confirm { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.coach-memory-confirm p { margin:0 0 10px; line-height:1.5; }
.coach-memory-row [data-memory-editor]:not([hidden]) { display:grid; gap:8px; margin-top:12px; }
.coach-memory-row select { width:100%; min-width:0; min-height:46px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--white); color:var(--ink); font:inherit; }
.coach-memory-dialog .profile-editor-heading { align-items:flex-start; }
.coach-memory-dialog .profile-editor-heading h2 { overflow-wrap:anywhere; }
.coach-memory-dialog .profile-editor-close { flex-shrink:0; }
.coach-memory-dialog [hidden] { display:none !important; }
.coach-memory-dialog :is(button,input,select):focus-visible { outline:3px solid var(--nc-primary); outline-offset:3px; }
@media (min-width: 371px) and (max-width: 430px) {
  .view[data-screen='profile'] .profile-identity { padding: 16px; gap: 10px; }
  .profile-edit-details { padding: 9px 10px; gap: 4px; }
}
@media (max-width: 370px) {
  .view[data-screen='profile'] .profile-identity { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 12px; padding: 16px; }
  .view[data-screen='profile'] .profile-identity-avatar { grid-row: 1 / span 2; width: 64px; height: 64px; }
  .profile-edit-details { grid-column: 2; justify-self: start; }
  .profile-preference-row { padding: 16px; }
}


/* Task67: selected outlined highlight for actual saved Plan calorie totals. */
.plan-doc .plan-calorie-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 58px;
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1.5px solid var(--nc-primary);
  border-radius: 12px;
  background: transparent;
  color: var(--nc-primary);
}
.plan-doc .plan-calorie-total-label {
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: 700;
  line-height: 1.4;
}
.plan-doc .plan-calorie-total-value {
  max-width: 100%;
  margin-left: auto;
  font-size: calc(20px * var(--text-scale, 1));
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
  overflow-wrap: anywhere;
}
html[data-theme='dark'] .plan-doc .plan-calorie-total-label {
  color: var(--nc-text);
}


/* Task68: shared saved-plan budget on every Scanner phase. */
.scan-plan-budget h3 { margin: 0 0 12px; color: var(--nc-primary); font-size: calc(14px * var(--text-scale, 1)); }
.scan-plan-budget-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.scan-plan-budget-grid span { display: block; min-height: 2.8em; color: var(--nc-text-muted); font-size: calc(11px * var(--text-scale, 1)); line-height: 1.4; }
.scan-plan-budget-grid strong { display: block; margin-top: 4px; color: var(--nc-text); font-size: calc(20px * var(--text-scale, 1)); line-height: 1.25; overflow-wrap: anywhere; }
.scan-plan-budget-grid small { display: block; font-size: calc(10px * var(--text-scale, 1)); font-weight: 500; }
.scan-plan-budget p { margin: 10px 0 0; font-size: calc(11px * var(--text-scale, 1)); line-height: 1.5; color: var(--nc-text-muted); }

/* Task69: approved outlined Profile save popup, dismissed after two seconds. */
.profile-saved-popup {
  position: fixed;
  left: 50%;
  bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 4px);
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(350px, calc(100% - 32px));
  padding: 12px 14px;
  border: 1px solid var(--nc-primary);
  border-radius: 16px;
  background: var(--nc-surface);
  color: var(--nc-text);
  box-shadow: var(--nc-shadow-overlay);
  pointer-events: none;
}
.profile-saved-popup[hidden] { display: none; }
.profile-saved-popup.show { opacity: 1; transform: translate(-50%, 0); }
.profile-saved-popup-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--nc-surface-high);
  color: var(--nc-primary);
}
.profile-saved-popup-icon svg { width: 18px; height: 18px; }
.profile-saved-popup-copy { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.profile-saved-popup-copy strong { font-size: calc(15px * var(--text-scale, 1)); line-height: 1.4; font-weight: 700; }
.profile-saved-popup-copy > span { font-size: calc(13px * var(--text-scale, 1)); line-height: 1.4; color: var(--nc-text-muted); }
@media (prefers-reduced-motion: reduce) {
  .profile-saved-popup { transition: none; }
}
.plan-replace {min-height:44px;}
.plan-replace {border:0;background:transparent;color:var(--nc-primary);font:inherit;font-size:calc(12px * var(--text-scale,1));font-weight:600;padding:8px 0;text-decoration:underline;cursor:pointer;}
.replacement-option {border:1px solid var(--line);padding:14px;border-radius:14px;display:grid;gap:8px;overflow-wrap:anywhere;}
.replacement-option span {display:block;line-height:1.5;}
.replacement-option input[type=radio] {min-height:0;width:20px;height:20px;accent-color:var(--nc-primary);}
.meal-replacement-dialog fieldset {min-width:0;border:0;padding:0;display:grid;gap:12px;}
.meal-replacement-dialog legend {font-weight:600;padding:8px 0;}
.replacement-actions {display:flex;flex-wrap:wrap;gap:12px;}
.progress-reminder {display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;}
.plan-replace:focus-visible {outline:3px solid var(--nc-primary);outline-offset:3px;}
.password-dialog .profile-editor-head {display:flex;align-items:start;justify-content:space-between;gap:12px;padding:20px;border-bottom:1px solid var(--line);}
.password-dialog h2 {margin:4px 0 0;font-size:calc(23px * var(--text-scale,1));}
.password-dialog .profile-editor-close {min-width:44px;min-height:44px;border:0;background:transparent;color:inherit;font-size:24px;cursor:pointer;}
.password-form label {display:grid;gap:8px;min-width:0;}
.password-form input {width:100%;min-width:0;box-sizing:border-box;font:inherit;}
.password-form button {min-height:44px;}
.password-form [role=alert] {overflow-wrap:anywhere;}
.password-form :focus-visible {outline:2px solid var(--nc-primary);outline-offset:3px;}
#required-password-form {display:grid;gap:16px;}
#required-password-form .profile-editor-cancel {width:100%;background:transparent;border:1px solid var(--line);border-radius:12px;color:var(--nc-primary);font:inherit;cursor:pointer;}
.help-feedback-entry {padding:0 20px 20px;}
.setup-guide-dialog [hidden] {display:none !important;}
.customer-feedback-form {display:grid;gap:14px;padding:0 20px 20px;}
.customer-feedback-form label {display:grid;gap:8px;min-width:0;font-weight:600;font-size:calc(14px * var(--text-scale,1));}
.customer-feedback-form :is(select,textarea) {width:100%;max-width:100%;min-width:0;box-sizing:border-box;min-height:44px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);font:inherit;font-weight:400;}
.customer-feedback-form textarea {resize:vertical;line-height:1.6;min-height:140px;}
.customer-feedback-form :is(button,select,textarea):focus-visible,.feedback-success button:focus-visible {outline:3px solid var(--nc-primary);outline-offset:3px;}
.feedback-field-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.feedback-intro {padding:16px 20px;margin:0;color:var(--muted);line-height:1.6;}
.feedback-small {margin:0;color:var(--muted);font-size:calc(12px * var(--text-scale,1));line-height:1.6;overflow-wrap:anywhere;}
.feedback-actions {display:flex;gap:10px;flex-wrap:wrap;}
.feedback-actions > button {flex:1;min-height:46px;}
.feedback-error {margin:0;padding:12px;border:1px solid #b83b31;border-radius:12px;color:var(--ink);line-height:1.6;overflow-wrap:anywhere;}
.feedback-discard {border:1px solid var(--line);padding:12px;border-radius:12px;}
.feedback-discard p {margin:0 0 12px;}
.feedback-success {padding:24px 20px;line-height:1.6;}
.feedback-success h3 {margin:12px 0 8px;}
.feedback-success .btn-primary {width:100%;min-height:46px;margin-top:20px;}
.feedback-success-icon {display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--nc-primary);color:var(--nc-on-primary);font-size:26px;font-weight:700;}
.customer-feedback-form :disabled {opacity:.65;cursor:wait;}
@media(max-width:360px) {.feedback-field-row{grid-template-columns:1fr;} .feedback-actions > button{flex-basis:100%;}}
.setup-guide-steps {list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.setup-guide-step {display:grid;grid-template-columns:30px minmax(0,1fr) 12px;align-items:center;gap:10px;width:100%;min-height:64px;padding:14px 12px;border:1px solid var(--line);border-radius:14px;background:var(--white);color:var(--ink);text-align:left;font:inherit;cursor:pointer;}
.setup-guide-step strong {display:block;font-weight:700;font-size:calc(14px * var(--text-scale,1));line-height:1.5;}
.setup-guide-step small {display:block;color:var(--muted);font-size:calc(12px * var(--text-scale,1));line-height:1.6;margin-top:3px;overflow-wrap:anywhere;}
.setup-guide-number {display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--nc-primary);color:var(--nc-on-primary);font-weight:700;}
.setup-guide-close,.profile-help {min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--nc-primary);font:inherit;font-weight:600;padding:8px 12px;cursor:pointer;}
.setup-guide-close {flex-shrink:0;}
.setup-guide-dialog .profile-editor-heading {align-items:start;gap:12px;}
.setup-guide-dialog h2 {overflow-wrap:anywhere;}
.setup-guide-dialog .setup-guide-body {padding:0 20px 20px;}
.setup-guide-intro {padding:16px 20px;margin:0;color:var(--muted);line-height:1.6;}
.view[data-screen='profile'] > .profile-intro {flex-wrap:nowrap;}
.view[data-screen='profile'] > .profile-intro .profile-intro-copy {flex:1 1 0;}
.view[data-screen='profile'] > .profile-intro .profile-help {margin-top:4px;}
:is(.profile-help,.setup-guide-step,.setup-guide-close):focus-visible {outline:3px solid var(--nc-primary);outline-offset:3px;}
@media(max-width:360px) {.view[data-screen='profile'] .profile-intro {gap:10px;} .profile-help {padding:8px;}}
/* Task86: give Coach replies the main reading space; the arrow has no text. */
.phone.coach-expanded {padding:12px 10px calc(108px + env(safe-area-inset-bottom,0px));}
.view[data-screen='coach'] {overflow-anchor:none;height:calc(100dvh - 120px - env(safe-area-inset-bottom,0px));min-height:calc(100dvh - 120px - env(safe-area-inset-bottom,0px));}
.view[data-screen='coach'] > .coach-intro {flex:none;flex-wrap:nowrap;gap:8px;margin-bottom:10px;}
.view[data-screen='coach'] > .coach-intro .coach-intro-copy {flex:1 1 0;}
.view[data-screen='coach'] > .coach-intro .coach-title {font-size:calc(22px * var(--text-scale,1));}
.view[data-screen='coach'] > .coach-intro .coach-subtitle {display:none;}
.view[data-screen='coach'] .coach-clear {min-height:44px;padding:8px 10px;}
.view[data-screen='coach'] .coach-reading {position:relative;flex:1;min-height:0;overflow-anchor:none;}
.view[data-screen='coach'] .chat-scroll {height:100%;padding:2px 0 64px;scroll-padding-block:8px 64px;scrollbar-width:thin;}
.view[data-screen='coach'] .message.coach {width:100%;padding:14px 12px 14px 16px;}
.view[data-screen='coach'] .coach-input-area {gap:6px;margin-top:8px;}
.view[data-screen='coach'] .coach-input-area .suggestions {padding:0;gap:6px;}
.view[data-screen='coach'] .suggestions .suggestion-chip {padding:6px 10px;font-size:calc(12px * var(--text-scale,1));}
.view[data-screen='coach'] .coach-input-area .chat-input {padding:6px 8px;}
.view[data-screen='coach'] .coach-input-area .chat-input textarea {padding:6px 0;min-height:36px;}
.view[data-screen='coach'] .coach-jump {position:absolute;right:10px;top:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--nc-outline);border-radius:50%;background:var(--white);color:var(--nc-primary);box-shadow:var(--nc-shadow-overlay);cursor:pointer;overflow-anchor:none;-webkit-tap-highlight-color:transparent;}
.view[data-screen='coach'] .coach-jump[hidden] {display:none;}
.view[data-screen='coach'] .coach-jump svg {width:24px;height:24px;pointer-events:none;}
.view[data-screen='coach'] .coach-jump[data-direction='bottom'] svg {transform:rotate(180deg);}
.view[data-screen='coach'] .coach-jump:focus-visible,.view[data-screen='coach'] .chat-scroll:focus-visible {outline:3px solid var(--nc-primary);outline-offset:2px;}
@media(max-height:680px) {
  .view[data-screen='coach'] {height:auto;min-height:0;}
  .view[data-screen='coach'] .coach-reading {flex:none;}
  .view[data-screen='coach'] .chat-scroll {height:auto;overflow:visible;}
}
/* Task88: one real button remains visible through a modal spotlight. */
html.quick-tour-open {overflow:hidden;}
.quick-tour-dialog {position:fixed;inset:0;margin:0;border:0;padding:0;width:100%;height:100%;max-width:none;max-height:none;overflow:hidden;background:transparent;color:var(--ink);}
.quick-tour-dialog::backdrop {background:transparent;}
.quick-tour-spotlight {position:fixed;border:3px solid var(--nc-primary-fixed);box-shadow:0 0 0 9999px rgba(3,15,8,.48),0 0 20px rgba(162,248,135,.65);pointer-events:none;}
.quick-tour-bubble {position:fixed;z-index:2;box-sizing:border-box;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--white);box-shadow:0 12px 32px rgba(0,0,0,.22);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;}
.quick-tour-pointer {position:fixed;z-index:3;width:14px;height:14px;background:var(--white);transform:rotate(45deg);pointer-events:none;}
.quick-tour-count {margin:0 0 5px;color:var(--muted);font-size:calc(12px * var(--text-scale,1));font-weight:600;}
.quick-tour-bubble h2 {margin:0 0 6px;color:var(--nc-primary);font-size:calc(20px * var(--text-scale,1));line-height:1.25;overflow-wrap:anywhere;}
#quick-tour-copy {margin:0;font-size:calc(14px * var(--text-scale,1));line-height:1.5;overflow-wrap:anywhere;}
.quick-tour-controls {display:flex;align-items:center;gap:6px;margin-top:12px;}
.quick-tour-controls > span {flex:1;}
.quick-tour-controls button,.setup-tour-replay button {min-height:44px;min-width:44px;padding:8px 10px;border:0;border-radius:18px;background:transparent;color:var(--nc-primary);font:inherit;font-size:calc(14px * var(--text-scale,1));font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.quick-tour-controls button[hidden] {display:none;}
.quick-tour-controls [data-tour-next] {min-width:78px;background:var(--nc-primary);color:var(--nc-on-primary);}
.quick-tour-controls button:focus-visible,.setup-tour-replay button:focus-visible {outline:3px solid var(--nc-primary);outline-offset:2px;}
.setup-tour-replay {padding:0 20px 16px;}
.setup-tour-replay button {border:1px solid var(--line);border-radius:12px;}
.setup-tour-replay p {margin:8px 0 0;color:var(--muted);font-size:calc(12px * var(--text-scale,1));line-height:1.5;}
/* Task90: reserved space keeps the connection notice clear of page controls. */
body.nc-connection-layout {padding-top:var(--nc-connection-height,0px);}
html {scroll-padding-top:calc(var(--nc-connection-height,0px) + 12px);}
.nc-connection-notice {position:fixed;z-index:50;top:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:min(600px,100%);padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;border:1px solid var(--nc-outline-variant);border-top:0;border-radius:0 0 16px 16px;background:var(--white);color:var(--ink);box-shadow:var(--nc-shadow-overlay);}
.nc-connection-notice[hidden] {display:none;}
.nc-connection-notice > div {flex:1;min-width:0;overflow-wrap:anywhere;}
.nc-connection-notice strong {display:block;font-size:calc(14px * var(--text-scale,1));line-height:1.4;color:var(--nc-primary);}
.nc-connection-notice p {margin:4px 0 0;font-size:calc(12px * var(--text-scale,1));line-height:1.5;color:var(--muted);}
.nc-connection-notice button {flex:0 0 120px;min-width:0;min-height:44px;padding:9px 10px;border:1px solid var(--nc-primary);border-radius:12px;background:transparent;color:var(--nc-primary);font:inherit;font-size:calc(13px * var(--text-scale,1));font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.nc-connection-notice button:focus-visible {outline:3px solid var(--nc-primary);outline-offset:2px;}
.nc-connection-notice button:disabled {opacity:.65;cursor:wait;}
.phone.coach-expanded .view[data-screen='coach'] {height:calc(100dvh - 120px - env(safe-area-inset-bottom,0px) - var(--nc-connection-height,0px));min-height:calc(100dvh - 120px - env(safe-area-inset-bottom,0px) - var(--nc-connection-height,0px));}
.client-loading {margin-top:16px;}
.client-loading h2 {font-size:calc(24px * var(--text-scale,1));}
.client-loading p {line-height:1.6;}
@media(max-height:680px){.phone.coach-expanded .view[data-screen='coach']{height:auto;min-height:0;}}

/* Task137: wrappers are layout-neutral below the desktop breakpoint. */
.desktop-today-primary,
.desktop-today-meals,
.desktop-today-secondary,
.desktop-plan-body,
.desktop-scan-layout,
.desktop-scan-main,
.desktop-scan-manual,
.desktop-profile-layout,
.desktop-profile-personal,
.desktop-profile-settings { display: contents; }
.desktop-plan-meals { display: none; }

/* Phone, tablet and narrow/landscape Android windows retain the existing UI. */
@media (min-width: 1025px) {
  body { background: var(--canvas); }
  .phone,
  .phone.coach-expanded {
    width: 100%;
    max-width: 1320px;
    border: 0;
    padding: 32px 38px calc(128px + env(safe-area-inset-bottom, 0px));
  }
  .phone .view { min-width: 0; }
  .nc-nav { max-width: 560px; }
  .nc-nav-outer { padding-bottom: 18px; }
  .view .nc-opening { margin-bottom: 28px; }
  .phone .view[data-screen] .nc-opening-title { font-size: calc(34px * var(--text-scale, 1)); line-height: 1.2; }
  .view .nc-opening-subtitle { max-width: 72ch; }

  /* Today: a useful overview beside the real food log. */
  .view[data-screen='today'] {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(0, 1.25fr);
    gap: 24px 30px;
    align-items: start;
  }
  .view[data-screen='today'] > .screen-head { grid-column: 1 / -1; margin-bottom: 0; }
  .desktop-today-primary { display: block; grid-column: 1; grid-row: 2; min-width: 0; }
  .desktop-today-meals { display: block; grid-column: 2; grid-row: 2 / span 2; min-width: 0; }
  .desktop-today-secondary { display: block; grid-column: 1; grid-row: 3; min-width: 0; }
  .desktop-today-meals .nc-meals-heading { margin-top: 0; }
  .desktop-today-meals .nc-meals-list { gap: 14px; }
  .desktop-today-meals .nc-meal-card { min-height: 116px; }
  .desktop-today-primary .today-summary-card { padding: 26px; }
  .desktop-today-primary .nc-plan-progress { margin-bottom: 0; }
  .desktop-today-secondary .nc-hydration { margin-top: 0; }

  /* Plan: Compact cards, with a small text rail instead of the desktop bowl. */
  .view[data-screen='plan'] {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 22px 28px;
    align-items: start;
  }
  .view[data-screen='plan'] > :is(.plan-head, .plan-tabs, .plan-empty-card, .heading-row, .plan-preview-note, .plan-card) { grid-column: 1 / -1; }
  .view[data-screen='plan'] > .plan-head { margin-bottom: 0; }
  .view[data-screen='plan'] > .plan-tabs { margin: 0 0 2px; }
  .view[data-screen='plan'] .plan-hero { grid-column: 1; margin: 0; padding: 24px 20px; background: var(--nc-surface-low); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: none; }
  .view[data-screen='plan'] .plan-hero-meta { flex-direction: column; align-items: flex-start; gap: 14px; }
  .view[data-screen='plan'] .plan-hero-main { display: block; margin-top: 20px; }
  .view[data-screen='plan'] .plan-hero-art { display: none; }
  .view[data-screen='plan'] .plan-hero-title { color: var(--ink); font-size: calc(23px * var(--text-scale, 1)); }
  .view[data-screen='plan'] .plan-hero-text,
  .view[data-screen='plan'] .plan-hero-day,
  .view[data-screen='plan'] .plan-hero-footer { color: var(--muted); }
  .view[data-screen='plan'] .plan-hero-day strong { color: var(--ink); }
  .view[data-screen='plan'] .plan-hero-footer { border-color: var(--line); }
  .desktop-plan-body { display: block; grid-column: 2; min-width: 0; }
  .desktop-plan-meals { display: block; margin-bottom: 24px; }
  .desktop-plan-meals > h3 { margin: 0 0 16px; font-size: calc(20px * var(--text-scale, 1)); color: var(--nc-primary); }
  .desktop-plan-meal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .desktop-plan-meal { min-width: 0; padding: 20px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); overflow-wrap: anywhere; }
  .desktop-plan-meal-index { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--soft); color: var(--nc-primary); font-size: calc(12px * var(--text-scale, 1)); font-weight: 700; margin-bottom: 18px; }
  .desktop-plan-meal h4 { margin: 0 0 8px; font-size: calc(16px * var(--text-scale, 1)); color: var(--ink); }
  .desktop-plan-meal > div { font-size: calc(14px * var(--text-scale, 1)); line-height: 1.7; color: var(--muted); }
  .phone .view[data-screen='plan'] .desktop-plan-body .plan-doc { padding: 26px 30px; }
  .phone .view[data-screen='plan'] .desktop-plan-body .plan-doc :is(p, ul, ol) { max-width: 78ch; }
  .phone .view[data-screen='plan'] .desktop-plan-body .plan-doc .coach-p { font-size: calc(14px * var(--text-scale, 1)); line-height: 1.75; }
  .phone .view[data-screen='plan'] .desktop-plan-body .plan-doc :is(td, th) { font-size: calc(13px * var(--text-scale, 1)); line-height: 1.6; padding: 10px; }
  .phone .view[data-screen='plan'] .desktop-plan-body .plan-week-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border: 0; background: transparent; box-shadow: none; }
  .phone .view[data-screen='plan'] .desktop-plan-body .plan-day-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
  .phone .view[data-screen='plan'] .desktop-plan-body .plan-day-card + .plan-day-card { border-top: 1px solid var(--line); }
  .phone .view[data-screen='plan'] .desktop-plan-body .plan-day-card:nth-child(even) { background: var(--white); }

  /* Scanner: capture/review and manual entry fit a desktop workspace. */
  .desktop-scan-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 28px; align-items: start; }
  .desktop-scan-main,
  .desktop-scan-manual { display: block; min-width: 0; }
  .desktop-scan-manual > :first-child { margin-top: 0; }
  .desktop-scan-layout:has(.scan-result) { grid-template-columns: minmax(0, 1fr); }
  .phone .view[data-screen='scan'] .desktop-scan-layout .scan-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px 28px; align-items: start; }
  .phone .view[data-screen='scan'] .desktop-scan-layout .scan-result-head { grid-column: 1 / -1; margin: 0; }
  .phone .view[data-screen='scan'] .desktop-scan-layout .scan-result-preview { grid-column: 1; margin: 0; width: 100%; max-width: none; }
  .phone .view[data-screen='scan'] .desktop-scan-layout .scan-result-card { grid-column: 2; grid-row: 2; margin: 0; }
  .desktop-scan-layout .scan-result:not(:has(.scan-result-preview)) .scan-result-card { grid-column: 1 / -1; }
  .desktop-scan-layout:has(.scan-result) .desktop-scan-manual { max-width: 720px; width: 100%; }
  .desktop-scan-layout .scan-reference-macros { gap: 10px; }
  .desktop-scan-layout .scan-macro-tile { min-width: 0; }
  .phone .view[data-screen='scan'] .desktop-scan-layout .scan-preview { width: 100%; height: auto; max-height: 600px; object-fit: contain; }

  /* Profile: existing identity/preferences beside settings and account actions. */
  .desktop-profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: start; }
  .desktop-profile-personal,
  .desktop-profile-settings { display: block; min-width: 0; }
  .desktop-profile-settings > .settings-heading { margin-top: 0; }
  .desktop-profile-layout .profile-identity { padding: 24px; }
  .desktop-profile-layout .profile-identity-name { overflow-wrap: anywhere; }
  .desktop-profile-layout .profile-food-preferences { margin-top: 28px; }
  .desktop-profile-layout .profile-metrics-overview { margin-top: 26px; }

  /* Coach retains its existing inner scroller, composer and explicit jump. */
  .phone.coach-expanded .view[data-screen='coach'] { height: calc(100dvh - 160px - env(safe-area-inset-bottom, 0px) - var(--nc-connection-height, 0px)); min-height: calc(100dvh - 160px - env(safe-area-inset-bottom, 0px) - var(--nc-connection-height, 0px)); }
  .view[data-screen='coach'] > .coach-intro { margin-bottom: 20px; }
  .phone .view[data-screen='coach'] > .coach-intro .coach-title { font-size: calc(28px * var(--text-scale, 1)); }
  .view[data-screen='coach'] .chat-scroll { padding: 6px 12px 64px 0; }
  .view[data-screen='coach'] .message.coach { max-width: 82ch; padding: 20px 24px; }
  .view[data-screen='coach'] .message.user { max-width: min(70%, 68ch); }
  .view[data-screen='coach'] .coach-input-area { margin-top: 16px; }
  .view[data-screen='coach'] .coach-input-area .suggestions { flex-wrap: wrap; overflow: visible; }
  .view[data-screen='coach'] .suggestions .suggestion-chip { padding: 9px 14px; font-size: calc(13px * var(--text-scale, 1)); }
  .view[data-screen='coach'] .coach-input-area .chat-input { padding: 10px 12px 10px 18px; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .desktop-plan-meal-grid { grid-template-columns: 1fr; }
  .desktop-plan-meal { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; padding: 16px; }
  .desktop-plan-meal-index { grid-row: 1 / 3; margin: 0; }
  .desktop-plan-meal h4 { margin-bottom: 0; }
}
@media (min-width: 1025px) and (max-height: 680px) {
  .phone.coach-expanded .view[data-screen='coach'] { height: auto; min-height: 0; }
}

/* Task138: one desktop review grid keeps manual entry directly below the photo.
   Display-only wrappers participate in this grid without moving DOM/form nodes. */
@media (min-width: 1025px) {
  .phone:has(.view[data-screen='scan']) { max-width: 1240px; }
  .phone .view[data-screen='scan'] .scan-plan-budget {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 1.6fr);
    gap: 6px 28px;
    padding: 20px 24px;
    margin-bottom: 24px;
    align-items: center;
  }
  .phone .view[data-screen='scan'] .scan-plan-budget h3 { grid-column: 1; margin: 0; font-size: calc(16px * var(--text-scale, 1)); line-height: 1.5; }
  .phone .view[data-screen='scan'] .scan-plan-budget > p { grid-column: 1; margin: 0; font-size: calc(13px * var(--text-scale, 1)); line-height: 1.6; }
  .phone .view[data-screen='scan'] .scan-plan-budget-grid { grid-column: 2; grid-row: 1 / span 2; gap: 16px; border-left: 1px solid var(--line); padding-left: 24px; }
  .phone .view[data-screen='scan'] .scan-plan-budget-grid span { min-height: 0; font-size: calc(13px * var(--text-scale, 1)); }
  .phone .view[data-screen='scan'] .scan-plan-budget-grid strong { margin-top: 5px; font-size: calc(24px * var(--text-scale, 1)); }
  .phone .view[data-screen='scan'] .scan-plan-budget-grid small { display: inline; margin-left: 5px; font-size: calc(12px * var(--text-scale, 1)); }
  .phone .view[data-screen='scan'] .desktop-scan-layout:has(.scan-result) {
    grid-template-columns: minmax(310px, .88fr) minmax(0, 1.25fr);
    grid-template-rows: auto auto 1fr;
    gap: 20px 28px;
    align-items: start;
  }
  .phone .view[data-screen='scan'] .desktop-scan-main:has(.scan-result),
  .phone .view[data-screen='scan'] .desktop-scan-layout .scan-result { display: contents; }
  .phone .view[data-screen='scan'] .desktop-scan-layout .scan-result-head { grid-column: 1 / -1; grid-row: 1; }
  .phone .view[data-screen='scan'] .scan-result-title { font-size: calc(24px * var(--text-scale, 1)); line-height: 1.3; }
  .phone .view[data-screen='scan'] .desktop-scan-layout .scan-result-preview { grid-column: 1; grid-row: 2; padding: 10px; }
  .phone .view[data-screen='scan'] .scan-photo-frame { background: var(--soft); }
  .phone .view[data-screen='scan'] .desktop-scan-layout .scan-preview {
    width: 100%;
    height: clamp(280px, 29vw, 400px);
    max-height: none;
    object-fit: contain;
  }
  .phone .view[data-screen='scan'] .desktop-scan-layout .scan-result-card { grid-column: 2; grid-row: 2 / span 2; padding: 24px; gap: 18px; }
  .phone .view[data-screen='scan'] .desktop-scan-layout:has(.scan-result) .desktop-scan-manual { grid-column: 1; grid-row: 3; width: 100%; max-width: none; min-width: 0; }
  .phone .view[data-screen='scan'] .desktop-scan-manual .heading-row { margin: 0 0 12px; }
  .phone .view[data-screen='scan'] .desktop-scan-manual .heading-row h3 { font-size: calc(17px * var(--text-scale, 1)); line-height: 1.5; }
  .phone .view[data-screen='scan'] #scan-manual-form { margin: 0; padding: 22px; }
  .phone .view[data-screen='scan'] #scan-manual-form :is(input, select) { font-size: calc(16px * var(--text-scale, 1)) !important; min-height: 46px; }
  .phone .view[data-screen='scan'] :is(.field-label, .scan-model-confidence, .scan-notes, .scan-disclaimer, .scan-consent, .scan-nutrition-mode) { font-size: calc(13px * var(--text-scale, 1)); line-height: 1.65; }
  .phone .view[data-screen='scan'] .scan-ingredients { padding: 18px; }
  .phone .view[data-screen='scan'] .scan-ingredient-list > li { padding-block: 10px; font-size: calc(14px * var(--text-scale, 1)); }
  .phone .view[data-screen='scan'] .desktop-scan-layout:has(.scan-result):not(:has(.scan-result-preview)) .scan-result-card { grid-column: 1 / -1; grid-row: 2; }
  .phone .view[data-screen='scan'] .desktop-scan-layout:has(.scan-result):not(:has(.scan-result-preview)) .desktop-scan-manual { grid-column: 1 / -1; grid-row: 3; max-width: 720px; }
}
/* A short, non-blocking acknowledgement after a confirmed calorie milestone. */
.calorie-celebration {position:fixed;inset:0;z-index:110;pointer-events:none;}
.calorie-confetti {position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.calorie-confetti-piece {position:absolute;left:var(--confetti-x);top:-24px;width:9px;height:15px;border-radius:2px;background:var(--confetti-color);animation:calorie-confetti-fall 2600ms cubic-bezier(.15,.45,.65,1) var(--confetti-delay) both;will-change:transform;}
.calorie-confetti-piece:nth-child(3n){border-radius:50%;width:9px;height:9px;}
.calorie-celebration-banner {position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:calc(100% - 28px);max-width:440px;box-sizing:border-box;padding:14px 12px 14px 18px;border:1px solid var(--line);border-radius:18px;background:var(--white);color:var(--ink);box-shadow:0 10px 32px rgba(0,0,0,.18);font-family:var(--font-app,Inter,sans-serif);pointer-events:auto;}
.calorie-celebration-banner > div {flex:1;min-width:0;}
.calorie-celebration-banner strong {font-size:calc(15px * var(--text-scale,1));line-height:1.5;}
.calorie-celebration-banner p {margin:4px 0 0;color:var(--muted);font-size:calc(12px * var(--text-scale,1));line-height:1.5;}
.calorie-celebration-banner button {flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);font:inherit;font-size:25px;cursor:pointer;}
.calorie-celebration-banner button:focus-visible {outline:3px solid var(--nc-primary);outline-offset:3px;}
.today-summary-copy .today-target-note {font-size:calc(12px * var(--text-scale,1));line-height:1.5;opacity:.9;}
@keyframes calorie-confetti-fall {from{transform:translate3d(0,-20px,0) rotate(0deg);opacity:1;}to{transform:translate3d(var(--confetti-drift),110vh,0) rotate(620deg);opacity:0;}}
@media(prefers-reduced-motion:reduce){.calorie-confetti{display:none;}.calorie-confetti-piece{animation:none;}}
/* App-owned confirmation for removing today's logged meal. */
.meal-remove-dialog {width:min(380px,calc(100% - 32px));max-width:380px;box-sizing:border-box;padding:20px;max-height:calc(100dvh - 32px);overflow:auto;}
.meal-remove-top {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.meal-remove-dialog h2 {font-size:calc(20px * var(--text-scale,1));line-height:1.3;margin:0;overflow-wrap:anywhere;}
.meal-remove-dialog > p {color:var(--muted);font-size:calc(13px * var(--text-scale,1));line-height:1.5;margin:0 0 12px;}
.meal-remove-summary {padding:12px;border:1px solid var(--line);border-radius:12px;margin:12px 0;background:var(--bg);}
.meal-remove-summary :is(strong,small) {display:block;overflow-wrap:anywhere;}
.meal-remove-summary strong {font-size:calc(14px * var(--text-scale,1));line-height:1.5;margin:0 0 6px;}
.meal-remove-summary small {font-size:calc(12px * var(--text-scale,1));line-height:1.5;color:var(--muted);}
.meal-remove-close {display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);font:inherit;font-size:25px;cursor:pointer;}
.meal-remove-actions {display:flex;gap:10px;}
.meal-remove-actions button {flex:1;min-width:0;min-height:44px;padding:10px 8px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--nc-primary);font:inherit;font-size:calc(14px * var(--text-scale,1));font-weight:700;cursor:pointer;}
.meal-remove-actions .meal-remove-danger {background:#a52c25;border-color:#a52c25;color:#fff;}
html[data-theme='dark'] .meal-remove-actions .meal-remove-danger {background:#e59484;border-color:#e59484;color:#24110e;}
.meal-remove-dialog button:focus-visible {outline:3px solid var(--nc-primary);outline-offset:3px;}
.meal-remove-dialog button:disabled {opacity:.6;cursor:default;}
.meal-remove-dialog [hidden] {display:none!important;}
.meal-remove-dialog .meal-remove-error {padding:12px;border:1px solid #b85b4f;border-radius:12px;color:var(--ink);overflow-wrap:anywhere;}
.meal-remove-dialog .meal-remove-status:empty {display:none;}
@media(max-width:360px){.meal-remove-dialog{padding:18px;}}