/* SAGE interactive nutrition label — learner-facing, progressive enhancement. */
.sage-nutrition-widget {
  --nf-ink: #111;
  --nf-line: #111;
  --nf-muted: #5f6664;
  --nf-control: #f1f3f2;
  width: min(100%, 760px);
  margin: 14px 0 8px;
  color: var(--nf-ink) !important;
}

.sage-nutrition-heading {
  font-size: clamp(22px, 2.4vw, 32px);
  margin: 0 0 10px;
  line-height: 1.18;
}

.sage-nutrition-reference-note {
  margin: 8px 0 14px;
  padding: 10px 12px;
  border-left: 4px solid #008f8b;
  background: #f5faf9;
  color: #26332f;
  line-height: 1.45;
}

.sage-nutrition-controls {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  color: #202826;
}

.sage-nutrition-controls label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
}

.sage-nutrition-controls input,
.sage-nutrition-controls select {
  box-sizing: border-box;
  height: 42px;
  border: 1px solid #bcc6c2;
  border-radius: 8px;
  background: var(--nf-control);
  color: #1d2422;
  font: inherit;
  padding: 7px 10px;
}

.sage-nutrition-controls .sage-food-qty { width: 86px; }
.sage-nutrition-controls .sage-food-serving { min-width: 210px; max-width: min(420px, 70vw); }
.sage-nutrition-controls .sage-food-custom-grams { width: 120px; }
.sage-food-custom-wrap[hidden] { display: none !important; }

/* The nutrition panel deliberately does NOT inherit SAGE's rounded table/card style. */
.sage-nutrition-label,
.sage-nf-label {
  box-sizing: border-box;
  background: #fff !important;
  color: #111 !important;
  border: 2px solid #111 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 14px 14px;
  width: min(100%, 560px);
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1.08 !important;
}

.sage-nf-title {
  font-size: clamp(34px, 5.2vw, 48px) !important;
  font-weight: 700 !important;
  letter-spacing: -1px;
  line-height: .95 !important;
  padding-bottom: 7px;
  border-bottom: 4px solid #111;
}

.sage-nf-serving {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  font-size: 16px !important;
  padding: 8px 0 5px;
}
.sage-nf-serving b { font-size: 18px !important; }

.sage-nf-rule { width: 100%; background: #111; height: 1px; }
.sage-nf-rule-heavy { height: 9px; margin: 2px 0 5px; }
.sage-nf-rule-bottom { margin-top: 3px; }

.sage-nf-calories {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0 3px;
  font-size: clamp(28px, 5vw, 42px) !important;
  font-weight: 800;
}
.sage-nf-calories b { font-size: clamp(42px, 8vw, 68px) !important; line-height: .9 !important; }

.sage-nf-dv-head {
  text-align: right;
  font-size: 14px !important;
  font-weight: 800;
  padding: 4px 0 4px;
  border-bottom: 1px solid #111;
}

.sage-nf-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid #111;
  font-size: 15px !important;
}
.sage-nf-row b { font-weight: 800 !important; white-space: nowrap; }
.sage-nf-primary .sage-nf-name { font-weight: 800; }
.sage-nf-indent .sage-nf-name { padding-left: 16px; }
.sage-nf-micro { font-size: 14px !important; }

.sage-nf-footnote {
  font-size: 11px !important;
  line-height: 1.25 !important;
  padding-top: 5px;
}

.sage-nutrition-source {
  margin-top: 9px;
  font-size: 13px;
  color: var(--nf-muted);
}
.sage-nutrition-source a { color: #006f9b; text-decoration: underline; }

.sage-nutrition-macros {
  width: min(100%, 560px);
  margin-top: 10px;
  color: #26322f;
}
.sage-nutrition-macros summary { cursor: pointer; font-weight: 800; }
.sage-macro-bar { display: flex; height: 15px; margin: 10px 0 8px; background: #ecefed; overflow: hidden; }
.sage-macro-bar > span { display: block; height: 100%; }
.sage-macro-protein { background: #176d7d; }
.sage-macro-carbs { background: #42aa8b; }
.sage-macro-fat { background: #efb84f; }
.sage-macro-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.sage-macro-legend span { display: inline-flex; gap: 5px; align-items: center; }
.sage-macro-dot { width: 10px; height: 10px; display: inline-block; }
.sage-nutrition-macros small { display: block; margin-top: 6px; color: var(--nf-muted); }

/* Defeat generic chat-table rules inside this component if any nested table appears. */
.bot-response-text .sage-nutrition-widget table,
#conversation .sage-nutrition-widget table {
  border-collapse: collapse !important;
  border-radius: 0 !important;
  background: #fff !important;
}

@media (max-width: 620px) {
  .sage-nutrition-widget { width: 100%; }
  .sage-nutrition-controls { align-items: stretch; }
  .sage-nutrition-controls label { flex: 1 1 140px; }
  .sage-nutrition-controls .sage-food-serving { min-width: 0; width: 100%; max-width: none; }
  .sage-nutrition-label,
  .sage-nf-label { width: 100%; padding: 10px 11px 12px; }
  .sage-nf-row { font-size: 14px !important; }
}