@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  --kk428-bg: #F5F8F7;
  --kk428-surface: #FFFFFF;
  --kk428-text: #1C2925;
  --kk428-muted: #52645E;
  --kk428-primary: #357563;
  --kk428-primary-strong: #285C4D;
  --kk428-primary-soft: #EAF2EF;
  --kk428-border: #DCE5E1;
  --kk428-warning: #A96816;
  --kk428-error: #A43B37;
  --kk428-radius-card: 24px;
  --kk428-radius-control: 14px;
  --kk428-shadow: 0 6px 24px rgba(28, 41, 37, 0.045);

  /* Clinical Clarity #513: one existing font and shared semantic roles. */
  --kk-font-sans: "DM Sans", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --kk-font-display: var(--kk-font-sans);
  --kk-font: var(--kk-font-sans);
  --kk-font-weight-display: 560;
  --kk-font-weight-title: 570;
  --kk-font-weight-label: 550;
  --kk-green: var(--kk428-primary);
  --kk-green-strong: var(--kk428-primary-strong);
  --kk-green-deep: var(--kk428-primary-strong);
  --kk-green-soft: var(--kk428-primary-soft);
  --kk-green-faint: #F3F7F5;
  --kk-ink: var(--kk428-text);
  --kk-ink-soft: var(--kk428-muted);
  --kk-ink-faint: #64746E;
  --kk-bg: var(--kk428-bg);
  --kk-border: var(--kk428-border);
  --kk-track: #E5ECE8;
  --kk-action-primary: var(--kk428-primary);
  --kk-action-primary-hover: var(--kk428-primary-strong);
  --kk-action-primary-active: #214E41;
  --kk-action-primary-subtle: var(--kk428-primary-soft);
  --kk-text-primary: var(--kk428-text);
  --kk-text-secondary: var(--kk428-muted);
  --kk-text-tertiary: #64746E;
  --kk-bg-canvas: var(--kk428-bg);
  --kk-border-subtle: var(--kk428-border);
  --kk-focus: var(--kk428-primary-strong);
  --green: var(--kk428-primary);
  --green-dark: var(--kk428-primary-strong);
  --green-soft: var(--kk428-primary-soft);
  --ink: var(--kk428-text);
  --muted: var(--kk428-muted);
  --line: var(--kk428-border);
}

html {
  font-size: 100%;
  background: var(--kk428-bg);
  color: var(--kk428-text);
  font-family: "DM Sans", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
  font-family: "DM Sans", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

body {
  background: var(--kk428-bg);
  color: var(--kk428-text);
}

:where(h1, h2, h3, p, span, small, label, button, a) {
  overflow-wrap: break-word;
}

:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--kk428-primary-strong);
  outline-offset: 3px;
}

.kk-product-ui-rebuild :where(.goal-card, .journal-section, .progress-stat-card, .trajectory-card, .weight-history-section, .capture-card, .question-card, .result-card, .success-card) {
  border: 1px solid var(--kk428-border);
  border-radius: var(--kk428-radius-card);
  background: var(--kk428-surface);
  box-shadow: var(--kk428-shadow);
}

.kk-product-ui-rebuild :where(.eyebrow, .today-card-status, .today-calorie-label) {
  color: var(--kk428-primary-strong);
}

.kk-product-ui-rebuild :where(.button.primary, .small-action, .nav-capture-icon) {
  background: var(--kk428-primary);
  color: #fff;
}

.kk-product-ui-rebuild :where(.button, .small-action, .round-action, .icon-button, .text-button) {
  min-height: 44px;
  border-radius: var(--kk428-radius-control);
}

.kk-product-ui-rebuild .desktop-nav-item,
.kk-product-ui-rebuild .nav-item {
  color: var(--kk428-muted);
}

.kk-product-ui-rebuild :where(.desktop-nav-item, .nav-item).active {
  color: var(--kk428-primary-strong);
}

.kk-product-ui-rebuild .nav-capture {
  color: var(--kk428-primary-strong);
  font-weight: 750;
}

.kk-product-ui-rebuild .today-budget-ring-progress {
  stroke: var(--kk428-primary);
}

/* Keep the budget value atomic when browser text is enlarged. */
.kk-product-ui-rebuild .today-budget-ring {
  container-type: inline-size;
  width: min(100%, max(clamp(196px, 48vw, 224px), 8em));
}

.kk-product-ui-rebuild .today-budget-ring-copy {
  width: 84%;
}

.kk-product-ui-rebuild .today-budget-ring .today-calorie-value {
  font-size: min(clamp(2.55rem, 8vw, 3.35rem), 19cqi);
  line-height: 1.2;
}

.kk-product-ui-rebuild #remaining-kcal,
.kk-product-ui-rebuild #remaining-kcal-unit {
  display: block;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.kk-product-ui-rebuild #remaining-kcal-unit {
  margin-top: .18em;
}

.kk-product-ui-rebuild :where(.today-dashboard-grid, .journal-list, .macro-grid, .hydration-card, .meal-row, .result-item, .question-options) > * {
  min-width: 0;
}

.kk-product-ui-rebuild .journal-section {
  scroll-margin-top: 96px;
}

/* Controls may move to the next line before squeezing their adjacent copy. */
.kk-product-ui-rebuild :where(.goal-plan-empty, .section-heading, .today-section-heading, .today-calorie-meta, .today-heading, .today-date-controls) {
  flex-wrap: wrap;
}

.kk-product-ui-rebuild .goal-plan-empty > div,
.kk-product-ui-rebuild :where(.section-heading, .today-section-heading) > div,
.kk-product-ui-rebuild .today-heading-copy {
  flex: 1 1 10em;
}

.kk-product-ui-rebuild .today-heading-copy h1,
.kk-product-ui-rebuild .today-date-button,
.kk-product-ui-rebuild #today-date {
  overflow: visible;
  white-space: normal;
}

.kk-product-ui-rebuild :where(.goal-plan-action, .small-action, .water-button, .entry-alternative, .button) {
  max-width: 100%;
  min-width: 0;
  height: auto;
  padding-block: .5em;
}

.kk-product-ui-rebuild :where(.today-water-actions, .today-water-secondary-actions, .today-water-value, .entry-alternatives) {
  display: flex;
  flex-wrap: wrap;
}

.kk-product-ui-rebuild :where(.today-water-actions, .today-water-secondary-actions, .entry-alternatives) > button {
  flex: 1 1 7em;
}

.kk-product-ui-rebuild .today-side-stack {
  min-width: 0;
}

.kk-product-ui-rebuild .bottom-nav .nav-item > span {
  max-width: 100%;
}

.kk-product-ui-rebuild .bottom-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--kk428-surface) 94%, transparent);
  backdrop-filter: blur(18px);
}

.kk-product-ui-rebuild .nav-capture-icon {
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  background: var(--kk428-primary);
  color: #fff;
  box-shadow: 0 8px 24px rgba(46, 125, 90, 0.28);
}

/* Product examples must grow with their text instead of cropping it. */

.onboarding-page {
  --color-background: var(--kk428-bg);
  --color-surface: var(--kk428-surface);
  --color-primary: var(--kk428-primary);
  --color-text: var(--kk428-text);
  background: var(--kk428-bg);
  color: var(--kk428-text);
}

.onboarding-page :where(.onboarding-card, .onboarding-panel, .onboarding-summary) {
  border-color: var(--kk428-border);
  border-radius: var(--kk428-radius-card);
  box-shadow: var(--kk428-shadow);
}

.onboarding-page :where(input, select, textarea) {
  border-color: var(--kk428-border);
  border-radius: var(--kk428-radius-control);
  color: var(--kk428-text);
}

.onboarding-page :where(.button.primary, button[type="submit"]) {
  background: var(--kk428-primary);
  color: #fff;
}

/* #513: quieter hierarchy, retaining the existing layout and touch targets. */
.onboarding-page h1,
.kk-product-ui-rebuild h1,
.kk-product-ui-rebuild .today-heading h1 {
  font-family: var(--kk-font-sans);
  font-weight: 560;
  letter-spacing: -0.028em;
  line-height: 1.12;
}

.onboarding-page h1,
.onboarding-page .choice-card strong {
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

.onboarding-page .intro-copy h1 {
  font-size: clamp(2rem, 4.6vw, 4rem);
}

.onboarding-page :where(.onboarding-flow, .onboarding-panel) h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
}

.onboarding-page :where(.intro-preview, .onboarding-flow, .onboarding-panel) {
  border-color: var(--kk428-border);
  box-shadow: var(--kk428-shadow);
}

.onboarding-page .intro-preview > strong {
  font-weight: 550;
  letter-spacing: -0.035em;
}

.onboarding-page :where(.intro-trust, .intro-proof-list li, .preview-badge, .choice-card strong, .flow-stages li) {
  font-weight: 550;
}

.onboarding-page .intro-proof-list li {
  background: var(--kk428-primary-soft);
  border-color: var(--kk428-border);
}

.onboarding-page :where(.button.primary, button[type="submit"]):hover:not(:disabled),
.kk-product-ui-rebuild :where(.button.primary, .small-action):hover:not(:disabled) {
  background: var(--kk428-primary-strong);
}

.onboarding-page .button.primary:disabled,
.kk-product-ui-rebuild .button.primary:disabled {
  background: #E0E8E4;
  color: #52645E;
  opacity: 1;
  box-shadow: none;
}

.onboarding-page .choice-card:has(input:focus-visible) {
  outline-color: var(--kk428-primary-strong);
}

.kk-product-ui-rebuild :where(h2, h3, .today-card-heading h2, .section-heading h2) {
  font-weight: 570;
  letter-spacing: -0.018em;
}

.kk-product-ui-rebuild :where(.button, .small-action, .text-button, .desktop-nav-item) {
  font-weight: 550;
}

.kk-product-ui-rebuild .nav-capture-icon {
  box-shadow: 0 3px 10px rgba(28, 41, 37, 0.12);
}

/* #513 Founder alignment: content axes do not depend on date arrows. */
.kk-product-ui-rebuild .today-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 44px;
  align-items: end;
  gap: 12px;
}

.kk-product-ui-rebuild .today-heading-copy {
  grid-column: 1;
  grid-row: 1;
}

.kk-product-ui-rebuild #today-prev {
  position: absolute;
  left: -52px;
  bottom: 0;
}

.kk-product-ui-rebuild #today-next { grid-column: 2; grid-row: 1; }
.kk-product-ui-rebuild #open-settings { grid-column: 3; grid-row: 1; }

.kk-product-ui-rebuild :where(.today-summary-card, .today-capture-card, .today-journal-card, .today-water-card) {
  padding: 24px;
}

@media (max-width: 899px) {
  .kk-product-ui-rebuild .today-heading {
    grid-template-columns: 44px 44px minmax(0, 1fr) 44px;
    gap: 8px;
  }
  .kk-product-ui-rebuild .today-heading-copy { grid-column: 1 / -1; }
  .kk-product-ui-rebuild #today-prev {
    position: static;
    grid-column: 1;
    grid-row: 2;
  }
  .kk-product-ui-rebuild #today-next { grid-column: 2; grid-row: 2; }
  .kk-product-ui-rebuild #open-settings { grid-column: 4; grid-row: 2; }
  .kk-product-ui-rebuild :where(.today-summary-card, .today-capture-card, .today-journal-card, .today-water-card) {
    padding: 18px;
  }
}

@media (max-width: 330px) {
  .kk-product-ui-rebuild :where(.today-summary-card, .today-capture-card, .today-journal-card, .today-water-card) {
    padding-inline: 15px;
  }
}

.onboarding-page .choice-card > span {
  min-width: 0;
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
}

.onboarding-page .choice-card strong {
  overflow-wrap: break-word;
}

.onboarding-page .choice-group {
  min-width: 0;
  max-width: 100%;
}

.onboarding-page .flow-stages {
  display: flex;
  flex-wrap: wrap;
}

.onboarding-page .flow-stages li {
  flex: 1 0 3.5em;
  overflow-wrap: normal;
}

@media (max-width: 800px) {
  /* Keep the action after the step when enlarged content needs scrolling. */
  .onboarding-page #onboarding-actions:not([hidden]) {
    position: static;
    margin-top: 16px !important;
  }

  .onboarding-page #onboarding-form:not([hidden]) {
    padding-bottom: 0 !important;
  }
}

@media (max-width: 700px) {

}

@media (max-width: 899px) {
  .kk-product-ui-rebuild .bottom-nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

@media (max-width: 390px) {
  .kk-product-ui-rebuild .app-shell {
    padding-inline: 14px;
  }

  .kk-product-ui-rebuild .bottom-nav {
    gap: 2px;
    padding-inline: 6px;
  }

  .kk-product-ui-rebuild .nav-item {
    min-width: 0;
    font-size: clamp(0.65rem, 2.8vw, 0.78rem);
  }

}

@media (max-width: 330px) {
  .kk-product-ui-rebuild .app-shell {
    padding-inline: 10px;
  }

  .kk-product-ui-rebuild .nav-item {
    font-size: 0.65rem;
  }

  .kk-product-ui-rebuild .nav-capture-icon {
    inline-size: 48px;
    block-size: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* #515 Balanced Center: capture is an action; content alone carries food color. */
.kk-product-ui-rebuild .nav-capture { color: var(--kk428-primary); gap: 4px; }
.kk-product-ui-rebuild .nav-capture-icon { inline-size: 36px; block-size: 36px; box-shadow: none; }
.kk-product-ui-rebuild .nav-capture-icon svg { fill: none; stroke: currentColor; stroke-width: 2; }
.kk-product-ui-rebuild .bottom-nav .nav-item { font-size: .8125rem; min-height: 64px; white-space: normal; }
.kk-product-ui-rebuild .bottom-nav .nav-item > span { overflow-wrap: normal; word-break: normal; }
.kk-product-ui-rebuild .desktop-nav [hidden] { display: none; }
.kk-product-ui-rebuild .desktop-nav-capture, .kk-product-ui-rebuild #desktop-nav-capture { color: var(--kk428-primary); }
.kk-food-icon-v2 { display: inline-block; inline-size: 100%; block-size: 100%; object-fit: contain; vertical-align: middle; }
.food-result-icon { flex: 0 0 24px; inline-size: 24px; block-size: 24px; }
.meal-type-icon .kk-food-icon-v2 { inline-size: 32px; block-size: 32px; }
.kk-product-ui-rebuild .account-security-actions { flex: 0 1 auto; flex-wrap: wrap; min-width: 0; max-inline-size: 100%; }
@media (max-width: 899px) {
  .kk-product-ui-rebuild .account-security-actions { flex-basis: 100%; margin-left: 0; }
}

/* #535 Shared responsive Onboarding/Homepage energy teaching. */
.teaching-energy{background:linear-gradient(120deg,#f5f8f6,#f0f5f2);border:1px solid var(--kk-border-subtle);border-radius:20px;padding:24px}
.energy-teaching-row+.energy-teaching-row{margin-top:24px}
.energy-teaching-labels{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:1.125rem;line-height:1.35}
.energy-teaching-labels>span{font-weight:550}
.energy-teaching-labels>strong{font-variant-numeric:tabular-nums;font-weight:600}
.energy-teaching-bar{width:100%;height:28px;background:#e0eae4;border-radius:9px}
.energy-teaching-bar>i{display:block;height:100%;background:linear-gradient(100deg,#2b8262,#206c50);border-radius:9px}
.energy-teaching-row--intake .energy-teaching-bar>i{background:linear-gradient(100deg,#82c3a6,#64ac8d)}
.energy-teaching-gap{margin-top:7px;color:var(--kk-action-primary-active)}
.energy-gap-bracket{margin-left:var(--intake-ratio);width:calc(100% - var(--intake-ratio));height:30px}
.energy-gap-bracket svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;overflow:visible}
.energy-gap-bracket path{vector-effect:non-scaling-stroke}
.energy-gap-guides{stroke-dasharray:3 3;opacity:.7}
.energy-teaching-gap>strong{display:block;text-align:right;font-size:1.2rem;font-weight:600;margin-top:6px}
.energy-teaching-labels>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
@media(max-width:800px){
 .energy-teaching-labels{font-size:1rem;margin-bottom:10px;gap:6px}
 .energy-teaching-bar{height:24px}
 .energy-teaching-row+.energy-teaching-row{margin-top:18px}
 .energy-teaching-gap>strong{font-size:1.125rem;margin-top:2px}
 .energy-teaching-gap .illustrative-label{margin-top:12px}
}