/*
 * Shared SEO article redesign.
 *
 * This layer intentionally follows the legacy stylesheet and is scoped to
 * body.article-page.content-redesign. It does not alter calculator, legal
 * or account routes, and is enabled template-by-template.
 */

body.article-page.content-redesign {
  --cr-bg: #eff4f2;
  --cr-surface: #ffffff;
  --cr-surface-subtle: #f5f8f7;
  --cr-ink: #142326;
  --cr-muted: #647276;
  --cr-line: #d9e1df;
  --cr-primary: #0b4d4a;
  --cr-primary-hover: #083f3d;
  --cr-primary-soft: #e4f0ed;
  --cr-accent: #49a79a;
  --cr-warning: #a84d1a;
  --cr-warning-soft: #fff4ea;
  --cr-focus: #0b4d4a;
  --cr-radius-panel: 10px;
  --cr-radius-control: 8px;
  --cr-content-width: 920px;
  --cr-reading-width: 72ch;
  --cr-ease: 160ms ease;

  box-sizing: border-box;
  min-width: 0;
  min-height: 100dvh;
  margin: 0;
  padding: clamp(12px, 2vw, 24px);
  overflow-x: clip;
  color: var(--cr-ink);
  background: var(--cr-bg);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

body.article-page.content-redesign *,
body.article-page.content-redesign *::before,
body.article-page.content-redesign *::after {
  box-sizing: border-box;
}

body.article-page.content-redesign :where(a, button, summary) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body.article-page.content-redesign :where(a, button, summary):focus-visible {
  outline: 3px solid var(--cr-focus);
  outline-offset: 3px;
}

body.article-page.content-redesign .app-icon use {
  stroke: currentColor;
}

body.article-page.content-redesign .page-reveal,
body.article-page.content-redesign .page-reveal.page-reveal-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Header */
body.article-page.content-redesign .article-header,
body.article-page.content-redesign .seo-main {
  width: min(var(--cr-content-width), 100%);
}

body.article-page.content-redesign .article-header {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 100;
  min-height: 56px;
  margin: 0 auto 16px;
  padding: 6px;
  border: 1px solid var(--cr-line) !important;
  border-radius: var(--cr-radius-panel);
  background: var(--cr-surface) !important;
  isolation: isolate;
  box-shadow: none !important;
}

body.article-page.content-redesign .article-header::before {
  display: none !important;
}

body.article-page.content-redesign .article-topnav {
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

body.article-page.content-redesign .article-topnav a,
body.article-page.content-redesign .article-header .theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-control);
  color: var(--cr-ink);
  background: var(--cr-surface);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: color var(--cr-ease), background-color var(--cr-ease), border-color var(--cr-ease);
}

body.article-page.content-redesign .article-topnav a:hover,
body.article-page.content-redesign .article-header .theme-btn:hover {
  border-color: var(--cr-line);
  color: var(--cr-primary);
  background: var(--cr-surface-subtle);
  transform: none;
}

body.article-page.content-redesign .article-header .theme-btn {
  width: 44px;
  padding: 0;
  color: var(--cr-primary);
  cursor: pointer;
}

body.article-page.content-redesign .article-header .theme-btn .app-icon {
  width: 20px;
  height: 20px;
}

/* Document shell and editorial lead */
body.article-page.content-redesign .seo-main {
  display: block;
  min-width: 0;
  margin: 0 auto;
}

body.article-page.content-redesign .seo-article {
  min-width: 0;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-panel);
  background: var(--cr-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.article-page.content-redesign .seo-breadcrumbs {
  gap: 6px;
  margin: 0 0 28px;
  color: var(--cr-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

body.article-page.content-redesign .seo-breadcrumbs a,
body.article-page.content-redesign .seo-section a {
  color: var(--cr-primary);
  font-weight: 700;
  text-decoration-color: color-mix(in srgb, var(--cr-primary) 35%, transparent);
  text-underline-offset: 0.16em;
}

body.article-page.content-redesign .seo-breadcrumbs a:hover,
body.article-page.content-redesign .seo-section a:hover {
  color: var(--cr-primary-hover);
  text-decoration-color: currentColor;
}

body.article-page.content-redesign .seo-hero {
  max-width: var(--cr-reading-width);
  margin: 0 0 34px;
}

body.article-page.content-redesign .seo-eyebrow {
  margin: 0 0 10px;
  color: var(--cr-primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

body.article-page.content-redesign .seo-hero h1 {
  max-width: 18ch;
  margin: 0 0 16px;
  color: var(--cr-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 5.4vw, 4.6rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

body.article-page.content-redesign .seo-lead {
  max-width: 66ch;
  color: var(--cr-muted);
  font-size: clamp(1.06rem, 1.8vw, 1.22rem);
  line-height: 1.68;
}

body.article-page.content-redesign .seo-lead strong {
  color: var(--cr-ink);
}

/* Answer and CTA */
body.article-page.content-redesign .seo-answer,
body.article-page.content-redesign .seo-calculator-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  align-items: end;
  gap: 24px;
  margin: 0 0 36px;
  padding: clamp(20px, 3.5vw, 32px);
  overflow: visible;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-panel);
  background: var(--cr-surface-subtle);
  box-shadow: none;
}

body.article-page.content-redesign .seo-answer:hover,
body.article-page.content-redesign .seo-calculator-cta:hover,
body.article-page.content-redesign .seo-section:hover {
  transform: none;
  box-shadow: none;
}

body.article-page.content-redesign .seo-answer__label,
body.article-page.content-redesign .seo-calculator-cta > div > span {
  margin: 0 0 10px;
  color: var(--cr-primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

body.article-page.content-redesign .energy-term-display.body-fat-metric {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0;
  color: var(--cr-primary);
}

body.article-page.content-redesign .energy-term-display.body-fat-metric > span {
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

body.article-page.content-redesign .energy-term-display.body-fat-metric small {
  padding: 0;
  color: var(--cr-muted);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
}

body.article-page.content-redesign .seo-answer__copy p {
  max-width: 58ch;
  margin: 14px 0 0;
  color: var(--cr-muted);
  line-height: 1.62;
}

body.article-page.content-redesign .seo-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--cr-primary);
  border-radius: var(--cr-radius-control);
  color: #ffffff;
  background: var(--cr-primary);
  box-shadow: none;
  font: inherit;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--cr-ease), border-color var(--cr-ease), color var(--cr-ease);
}

body.article-page.content-redesign .seo-primary-action:hover {
  border-color: var(--cr-primary-hover);
  color: #ffffff;
  background: var(--cr-primary-hover);
  transform: none;
  box-shadow: none;
}

body.article-page.content-redesign .seo-primary-action .app-icon {
  color: inherit;
}

/* Editorial sections */
body.article-page.content-redesign .seo-section {
  margin: 0 0 16px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-panel);
  background: var(--cr-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.article-page.content-redesign .seo-section__heading {
  align-items: flex-start;
  gap: 10px;
}

body.article-page.content-redesign .seo-section__heading .app-icon {
  width: 22px;
  height: 22px;
  margin-top: 0.2em;
  color: var(--cr-primary);
}

body.article-page.content-redesign .seo-section h2,
body.article-page.content-redesign .seo-calculator-cta h2 {
  margin: 0 0 12px;
  color: var(--cr-ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 780;
  line-height: 1.2;
  letter-spacing: -0.018em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

body.article-page.content-redesign .seo-section__heading h2 {
  margin-bottom: 0;
}

body.article-page.content-redesign .seo-section__heading + p {
  margin-top: 14px;
}

body.article-page.content-redesign .seo-section p,
body.article-page.content-redesign .seo-calculator-cta p {
  max-width: var(--cr-reading-width);
  color: var(--cr-muted);
  font-size: 1rem;
  line-height: 1.68;
  overflow-wrap: anywhere;
}

body.article-page.content-redesign .seo-formula {
  gap: 12px;
  margin: 20px 0;
}

body.article-page.content-redesign .seo-formula > div {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-control);
  background: var(--cr-surface-subtle);
}

body.article-page.content-redesign .seo-formula span {
  margin: 0 0 6px;
  color: var(--cr-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

body.article-page.content-redesign .seo-formula strong {
  display: block;
  color: var(--cr-ink);
  font-size: 1rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

body.article-page.content-redesign .energy-key-point {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--cr-line);
  border-left: 3px solid var(--cr-accent);
  border-radius: var(--cr-radius-control);
  background: var(--cr-primary-soft);
}

body.article-page.content-redesign .energy-key-point p {
  margin: 0;
  color: var(--cr-ink);
  line-height: 1.6;
}

/* Data tables: natural wrapping is preferred to a horizontal page scroll. */
body.article-page.content-redesign .seo-table-wrap {
  width: 100%;
  margin-top: 20px;
  overflow: visible;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-control);
  background: var(--cr-surface);
}

body.article-page.content-redesign .seo-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

body.article-page.content-redesign .seo-table th,
body.article-page.content-redesign .seo-table td {
  padding: 13px 14px;
  border-color: var(--cr-line);
  color: var(--cr-ink);
  font-size: 0.93rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: normal;
}

body.article-page.content-redesign .seo-table th {
  color: var(--cr-muted);
  background: var(--cr-surface-subtle);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.055em;
}

body.article-page.content-redesign .activity-levels-table th:nth-child(1),
body.article-page.content-redesign .activity-levels-table td:nth-child(1) {
  width: 24%;
}

body.article-page.content-redesign .activity-levels-table th:nth-child(2),
body.article-page.content-redesign .activity-levels-table td:nth-child(2) {
  width: 25%;
}

body.article-page.content-redesign .activity-levels-table th:nth-child(3),
body.article-page.content-redesign .activity-levels-table td:nth-child(3) {
  width: 51%;
}

body.article-page.content-redesign .seo-status {
  padding: 4px 7px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.3;
}

body.article-page.content-redesign .seo-status--low,
body.article-page.content-redesign .seo-status--normal {
  color: var(--cr-primary);
}

body.article-page.content-redesign .seo-status--high {
  color: var(--cr-warning);
}

/* Steps, accuracy checks, and FAQ */
body.article-page.content-redesign .calorie-steps,
body.article-page.content-redesign .seo-factors {
  gap: 12px;
  margin-top: 20px;
}

body.article-page.content-redesign .calorie-steps > div,
body.article-page.content-redesign .seo-factors > div {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-control);
  background: var(--cr-surface-subtle);
}

body.article-page.content-redesign .calorie-steps > div > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 24px;
  margin-bottom: 10px;
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--cr-primary);
  background: var(--cr-primary-soft);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

body.article-page.content-redesign .calorie-steps strong,
body.article-page.content-redesign .seo-factors strong {
  color: var(--cr-ink);
  font-size: 1rem;
  line-height: 1.35;
}

body.article-page.content-redesign .calorie-steps p,
body.article-page.content-redesign .seo-factors p {
  margin: 8px 0 0;
  color: var(--cr-muted);
  font-size: 0.92rem;
  line-height: 1.58;
}

body.article-page.content-redesign .seo-faq {
  margin-top: 18px;
  border-top: 0;
}

body.article-page.content-redesign .seo-faq details {
  margin: 0 0 8px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-control);
  background: var(--cr-surface-subtle);
}

body.article-page.content-redesign .seo-faq summary {
  min-height: 48px;
  padding: 14px 48px 14px 16px;
  color: var(--cr-ink);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.4;
  overflow-wrap: anywhere;
  transition: color var(--cr-ease), background-color var(--cr-ease);
}

body.article-page.content-redesign .seo-faq summary:hover {
  color: var(--cr-primary);
}

body.article-page.content-redesign .seo-faq summary::after {
  right: 16px;
  color: var(--cr-primary);
  font-size: 1.35rem;
}

body.article-page.content-redesign .seo-faq details[open] summary {
  border-bottom: 1px solid var(--cr-line);
}

body.article-page.content-redesign .seo-faq details p {
  max-width: var(--cr-reading-width);
  margin: 0;
  padding: 14px 16px 16px;
  color: var(--cr-muted);
  line-height: 1.64;
}

body.article-page.content-redesign .seo-calculator-cta {
  margin: 16px 0;
  border-color: var(--cr-line);
  background: var(--cr-primary-soft);
}

body.article-page.content-redesign .seo-calculator-cta h2 {
  max-width: 28ch;
}

body.article-page.content-redesign .seo-calculator-cta p {
  margin: 0;
}

/* Sources, related articles, medical notice and the shell injected by legal.js. */
body.article-page.content-redesign .seo-related {
  padding: 28px 0 0;
  border-top: 0;
}

body.article-page.content-redesign .seo-related > span {
  margin: 0 0 12px;
  color: var(--cr-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

body.article-page.content-redesign .seo-related > div {
  gap: 10px;
}

body.article-page.content-redesign .seo-related a {
  min-width: 0;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-control);
  color: var(--cr-ink);
  background: var(--cr-surface-subtle);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--cr-ease), border-color var(--cr-ease), background-color var(--cr-ease);
}

body.article-page.content-redesign .seo-related a .app-icon {
  color: var(--cr-primary);
}

body.article-page.content-redesign .seo-related a:hover {
  border-color: var(--cr-accent);
  color: var(--cr-primary);
  background: var(--cr-surface);
  transform: none;
}

body.article-page.content-redesign .seo-medical-note {
  gap: 10px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--cr-warning) 42%, var(--cr-line));
  border-radius: var(--cr-radius-control);
  background: var(--cr-warning-soft);
}

body.article-page.content-redesign .seo-medical-note .app-icon {
  width: 21px;
  height: 21px;
  margin-top: 0.1em;
  color: var(--cr-warning);
}

body.article-page.content-redesign .seo-medical-note p {
  color: var(--cr-muted);
  font-size: 0.92rem;
  line-height: 1.62;
}

body.article-page.content-redesign .seo-medical-note strong {
  color: var(--cr-ink);
}

body.article-page.content-redesign .seo-ad-slot {
  border-radius: var(--cr-radius-control);
  background: var(--cr-surface-subtle);
}

body.article-page.content-redesign .seo-ad-slot.ad-slot--active {
  min-height: 180px;
  border: 1px solid var(--cr-line);
}

/* Family-specific editorial primitives. These keep the original formulas,
 * figures and status text intact while moving their old blue/glass surfaces
 * into the shared article model. */
body.article-page.content-redesign .seo-answer__range,
body.article-page.content-redesign .energy-term-display:not(.body-fat-metric),
body.article-page.content-redesign .bmi-score > strong {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  color: var(--cr-primary);
}

body.article-page.content-redesign .seo-answer__range > span,
body.article-page.content-redesign .energy-term-display:not(.body-fat-metric) > span,
body.article-page.content-redesign .bmi-score > strong {
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 5.8vw, 4.25rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

body.article-page.content-redesign .seo-answer__range small,
body.article-page.content-redesign .energy-term-display:not(.body-fat-metric) small {
  color: var(--cr-muted);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

body.article-page.content-redesign .maintenance-answer-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 0 0;
}

body.article-page.content-redesign .maintenance-answer-values > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-control);
  background: var(--cr-surface);
}

body.article-page.content-redesign .maintenance-answer-values span,
body.article-page.content-redesign .maintenance-answer-values small {
  display: block;
  color: var(--cr-muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
}

body.article-page.content-redesign .maintenance-answer-values strong {
  display: block;
  margin: 5px 0;
  color: var(--cr-primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

body.article-page.content-redesign .calorie-equation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 20px 0;
  padding: 16px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-control);
  color: var(--cr-primary);
  background: var(--cr-surface-subtle);
  box-shadow: none;
}

body.article-page.content-redesign .calorie-equation span,
body.article-page.content-redesign .calorie-equation strong {
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
}

body.article-page.content-redesign .calorie-equation i {
  color: var(--cr-muted);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.4;
}

body.article-page.content-redesign .calorie-goals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

body.article-page.content-redesign .calorie-goals > div {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-control);
  background: var(--cr-surface-subtle);
}

body.article-page.content-redesign .calorie-goals strong {
  color: var(--cr-ink);
  font-size: 1rem;
  line-height: 1.35;
}

body.article-page.content-redesign .calorie-goals p {
  margin: 8px 0 0;
  color: var(--cr-muted);
  font-size: 0.92rem;
  line-height: 1.58;
}

body.article-page.content-redesign .seo-specific-insight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 16px;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--cr-line);
  border-left: 3px solid var(--cr-accent);
  border-radius: var(--cr-radius-panel);
  background: var(--cr-primary-soft);
  box-shadow: none;
}

body.article-page.content-redesign .seo-specific-insight .app-icon {
  width: 22px;
  height: 22px;
  margin-top: 0.2em;
  color: var(--cr-primary);
}

body.article-page.content-redesign .seo-specific-insight > div > span {
  display: block;
  margin-bottom: 6px;
  color: var(--cr-primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
}

body.article-page.content-redesign .seo-specific-insight h2 {
  margin: 0;
  color: var(--cr-ink);
  font-size: clamp(1.18rem, 2vw, 1.5rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.article-page.content-redesign .seo-specific-insight p {
  margin: 8px 0 0;
  color: var(--cr-muted);
  line-height: 1.62;
}

body.article-page.content-redesign .bmi-category-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 6px;
  color: var(--cr-primary);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

body.article-page.content-redesign .bmi-category-badge--over,
body.article-page.content-redesign .bmi-category-badge--obesity-one {
  color: var(--cr-warning);
}

body.article-page.content-redesign .bmi-category-badge--obesity-two,
body.article-page.content-redesign .bmi-category-badge--obesity-three {
  color: #a63636;
}

body.article-page.content-redesign .bmi-score > div > p {
  margin: 10px 0 0;
  color: var(--cr-muted);
  line-height: 1.62;
}

body.article-page.content-redesign .bmi-category-scale {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}

body.article-page.content-redesign .bmi-category-scale > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--cr-line);
  border-radius: 6px;
  background: var(--cr-surface-subtle);
}

body.article-page.content-redesign .bmi-category-scale > div.is-active {
  border-color: var(--cr-accent);
  background: var(--cr-primary-soft);
}

body.article-page.content-redesign .bmi-category-scale span,
body.article-page.content-redesign .bmi-category-scale strong {
  display: block;
  overflow-wrap: anywhere;
}

body.article-page.content-redesign .bmi-category-scale span {
  color: var(--cr-muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

body.article-page.content-redesign .bmi-category-scale strong {
  margin-top: 5px;
  color: var(--cr-ink);
  font-size: 0.78rem;
  line-height: 1.3;
}

body.article-page.content-redesign .composition-sources {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

body.article-page.content-redesign .composition-sources a {
  padding: 11px 12px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-control);
  background: var(--cr-surface-subtle);
  overflow-wrap: anywhere;
}

body.article-page.content-redesign .weight-loss-danger-note {
  margin: 0 0 20px;
}

body.article-page.content-redesign .site-footer {
  width: min(var(--cr-content-width), 100%);
  margin: 18px auto 0;
  padding: 24px 8px 4px;
  border-color: var(--cr-line);
  color: var(--cr-muted);
}

body.article-page.content-redesign .site-footer a,
body.article-page.content-redesign .site-footer button {
  color: var(--cr-muted);
}

body.article-page.content-redesign .site-footer a:hover,
body.article-page.content-redesign .site-footer button:hover,
body.article-page.content-redesign .site-footer a:focus-visible,
body.article-page.content-redesign .site-footer button:focus-visible {
  color: var(--cr-primary);
}

body.article-page.content-redesign .cookie-consent {
  width: min(920px, calc(100% - 32px));
  padding: 16px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-panel);
  color: var(--cr-ink);
  background: var(--cr-surface);
  box-shadow: none;
  backdrop-filter: none;
}

body.article-page.content-redesign .cookie-consent__copy p {
  color: var(--cr-muted);
}

body.article-page.content-redesign .cookie-consent__copy a {
  color: var(--cr-primary);
}

body.article-page.content-redesign .cookie-btn {
  min-height: 44px;
  border-radius: var(--cr-radius-control);
  box-shadow: none;
  transition: color var(--cr-ease), border-color var(--cr-ease), background-color var(--cr-ease);
}

body.article-page.content-redesign .cookie-btn--primary {
  border-color: var(--cr-primary);
  background: var(--cr-primary);
}

body.article-page.content-redesign .cookie-btn--secondary {
  border-color: var(--cr-line);
  background: var(--cr-surface-subtle);
  color: var(--cr-ink);
}

@media (hover: hover) and (pointer: fine) {
  body.article-page.content-redesign .cookie-btn:hover,
  body.article-page.content-redesign .cookie-btn--primary:hover {
    box-shadow: none;
    transform: none;
  }

  body.article-page.content-redesign .cookie-btn--primary:hover {
    border-color: var(--cr-primary-hover);
    background: var(--cr-primary-hover);
  }

  body.article-page.content-redesign .cookie-btn--secondary:hover {
    border-color: var(--cr-accent);
    background: var(--cr-surface);
  }
}

/* Dark theme */
html[data-theme="dark"] body.article-page.content-redesign {
  --cr-bg: #0d1112;
  --cr-surface: #171c1d;
  --cr-surface-subtle: #111516;
  --cr-ink: #eff4f2;
  --cr-muted: #a7b4b2;
  --cr-line: #2b3736;
  --cr-primary: #49a79a;
  --cr-primary-hover: #69beb1;
  --cr-primary-soft: #152724;
  --cr-accent: #49a79a;
  --cr-warning: #e8a262;
  --cr-warning-soft: #231b14;
  --cr-focus: #78c9bd;
}

html[data-theme="dark"] body.article-page.content-redesign .article-header,
html[data-theme="dark"] body.article-page.content-redesign .seo-article,
html[data-theme="dark"] body.article-page.content-redesign .seo-section,
html[data-theme="dark"] body.article-page.content-redesign .seo-table-wrap,
html[data-theme="dark"] body.article-page.content-redesign .cookie-consent {
  border-color: var(--cr-line);
  background: var(--cr-surface);
  box-shadow: none;
}

html[data-theme="dark"] body.article-page.content-redesign .article-topnav a:hover,
html[data-theme="dark"] body.article-page.content-redesign .article-header .theme-btn:hover,
html[data-theme="dark"] body.article-page.content-redesign .seo-related a:hover,
html[data-theme="dark"] body.article-page.content-redesign .cookie-btn--secondary:hover {
  background: var(--cr-surface-subtle);
}

html[data-theme="dark"] body.article-page.content-redesign .seo-answer,
html[data-theme="dark"] body.article-page.content-redesign .seo-calculator-cta {
  border-color: var(--cr-line);
  background: var(--cr-primary-soft);
}

html[data-theme="dark"] body.article-page.content-redesign .seo-formula > div,
html[data-theme="dark"] body.article-page.content-redesign .calorie-steps > div,
html[data-theme="dark"] body.article-page.content-redesign .seo-factors > div,
html[data-theme="dark"] body.article-page.content-redesign .maintenance-answer-values > div,
html[data-theme="dark"] body.article-page.content-redesign .calorie-equation,
html[data-theme="dark"] body.article-page.content-redesign .calorie-goals > div,
html[data-theme="dark"] body.article-page.content-redesign .bmi-category-scale > div,
html[data-theme="dark"] body.article-page.content-redesign .composition-sources a,
html[data-theme="dark"] body.article-page.content-redesign .seo-faq details,
html[data-theme="dark"] body.article-page.content-redesign .seo-related a,
html[data-theme="dark"] body.article-page.content-redesign .seo-ad-slot,
html[data-theme="dark"] body.article-page.content-redesign .cookie-btn--secondary {
  border-color: var(--cr-line);
  background: var(--cr-surface-subtle);
}

html[data-theme="dark"] body.article-page.content-redesign .seo-table th {
  color: var(--cr-muted);
  background: var(--cr-surface-subtle);
}

html[data-theme="dark"] body.article-page.content-redesign .energy-key-point {
  border-color: var(--cr-line);
  border-left-color: var(--cr-accent);
  background: var(--cr-primary-soft);
}

html[data-theme="dark"] body.article-page.content-redesign .seo-medical-note {
  border-color: color-mix(in srgb, var(--cr-warning) 44%, var(--cr-line));
  background: var(--cr-warning-soft);
}

html[data-theme="dark"] body.article-page.content-redesign .cookie-btn--secondary {
  color: var(--cr-ink);
}

/* Responsive adjustments for the exact article structure. */
@media (max-width: 760px) {
  body.article-page.content-redesign {
    padding: 10px;
  }

  body.article-page.content-redesign .article-header {
    top: max(6px, env(safe-area-inset-top));
    margin-bottom: 10px;
  }

  body.article-page.content-redesign .seo-article {
    padding: 22px 16px;
  }

  body.article-page.content-redesign .seo-answer,
  body.article-page.content-redesign .seo-calculator-cta {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 18px;
  }

  body.article-page.content-redesign .seo-primary-action {
    width: 100%;
  }

  body.article-page.content-redesign .seo-factors,
  body.article-page.content-redesign .seo-related > div,
  body.article-page.content-redesign .calorie-steps,
  body.article-page.content-redesign .calorie-goals,
  body.article-page.content-redesign .seo-formula {
    grid-template-columns: 1fr;
  }

  body.article-page.content-redesign .seo-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.article-page.content-redesign .seo-table {
    min-width: 640px;
    table-layout: auto;
  }

  body.article-page.content-redesign .seo-related > div {
    gap: 8px;
  }
}

@media (max-width: 430px) {
  body.article-page.content-redesign .article-header {
    align-items: flex-start;
  }

  body.article-page.content-redesign .article-topnav {
    flex-wrap: wrap;
    gap: 2px;
  }

  body.article-page.content-redesign .article-topnav a,
  body.article-page.content-redesign .article-header .theme-btn {
    min-height: 44px;
    padding-inline: 10px;
    font-size: 0.84rem;
  }

  body.article-page.content-redesign .article-header .theme-btn {
    width: 44px;
    padding: 0;
  }

  body.article-page.content-redesign .seo-article {
    padding: 20px 14px;
  }

  body.article-page.content-redesign .seo-breadcrumbs {
    margin-bottom: 22px;
    font-size: 0.78rem;
  }

  body.article-page.content-redesign .seo-hero {
    margin-bottom: 26px;
  }

  body.article-page.content-redesign .seo-hero h1 {
    max-width: none;
    font-size: clamp(2.1rem, 11vw, 2.7rem);
  }

  body.article-page.content-redesign .seo-lead {
    font-size: 1rem;
  }

  body.article-page.content-redesign .seo-answer,
  body.article-page.content-redesign .seo-calculator-cta,
  body.article-page.content-redesign .seo-section {
    padding: 18px 14px;
  }

  body.article-page.content-redesign .energy-term-display.body-fat-metric > span {
    font-size: clamp(2.25rem, 13vw, 3rem);
  }

  body.article-page.content-redesign .seo-answer__range > span,
  body.article-page.content-redesign .energy-term-display:not(.body-fat-metric) > span,
  body.article-page.content-redesign .bmi-score > strong {
    font-size: clamp(2.1rem, 12vw, 3rem);
  }

  body.article-page.content-redesign .maintenance-answer-values {
    grid-template-columns: 1fr;
  }

  body.article-page.content-redesign .bmi-category-scale {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.article-page.content-redesign .seo-section h2,
  body.article-page.content-redesign .seo-calculator-cta h2 {
    font-size: 1.32rem;
  }

  body.article-page.content-redesign .seo-section p,
  body.article-page.content-redesign .seo-calculator-cta p {
    font-size: 0.96rem;
  }

  body.article-page.content-redesign .seo-table th,
  body.article-page.content-redesign .seo-table td {
    padding: 10px 7px;
    font-size: 0.77rem;
    hyphens: auto;
  }

  body.article-page.content-redesign .activity-levels-table th:nth-child(1),
  body.article-page.content-redesign .activity-levels-table td:nth-child(1) {
    width: 27%;
  }

  body.article-page.content-redesign .activity-levels-table th:nth-child(2),
  body.article-page.content-redesign .activity-levels-table td:nth-child(2) {
    width: 26%;
  }

  body.article-page.content-redesign .activity-levels-table th:nth-child(3),
  body.article-page.content-redesign .activity-levels-table td:nth-child(3) {
    width: 47%;
  }

  body.article-page.content-redesign .seo-status {
    padding: 3px 5px;
    font-size: 0.69rem;
  }

  body.article-page.content-redesign .seo-faq summary {
    padding: 13px 44px 13px 14px;
    font-size: 0.95rem;
  }

  body.article-page.content-redesign .seo-faq summary::after {
    right: 14px;
  }

  body.article-page.content-redesign .seo-faq details p {
    padding: 13px 14px 14px;
    font-size: 0.95rem;
  }

  body.article-page.content-redesign .cookie-consent {
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: calc(100% - 20px);
  }
}

@media (max-width: 340px) {
  body.article-page.content-redesign .article-topnav a {
    padding-inline: 8px;
    font-size: 0.78rem;
  }

  body.article-page.content-redesign .seo-article {
    padding-inline: 12px;
  }

  body.article-page.content-redesign .seo-answer,
  body.article-page.content-redesign .seo-calculator-cta,
  body.article-page.content-redesign .seo-section {
    padding-inline: 12px;
  }

  body.article-page.content-redesign .seo-table th,
  body.article-page.content-redesign .seo-table td {
    padding-inline: 5px;
    font-size: 0.72rem;
  }
}

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