/* CalZen content: a quiet diary page, with the useful numbers in focus.
 * Unslop workflow by Damir Sokolovsky (@heydamir), CC BY 4.0.
 * https://heydamir.design/unslop
 * Screen-only; shared navigation, footer, store artwork and print sheets retain
 * their existing styles. Nutrient and BMI colors keep their semantic meaning.
 */
:root {
  --reading-ink:#202522;
  --reading-secondary:#414b45;
  --reading-meta:#59645d;
  --reading-accent:#1e6b48;
  --reading-line:#dce1dc;
  --reading-surface:#f1f4f0;
  --reading-ease:cubic-bezier(.22,1,.36,1);
}

/* 1. Spacing: one rhythm through the form, results and editorial content. */
.calc-hero { max-width:800px; padding-block:48px 32px; }
.calc-hero .subtitle { max-width:640px; margin-bottom:24px; }
.calc-wrap { max-width:704px; padding-bottom:48px; }
.calc-card .step-panel,.calc-card .results-panel { padding:24px; }
.calc-card .step-panel > .results-panel { padding:0; }
.calc-card .field { margin-bottom:24px; }
.calc-card .field-label { margin-bottom:8px; }
.calc-card .activity-list { gap:8px; }
.calc-card .activity-card { padding:16px; gap:12px; }
.calc-card .activity-card .a-desc { margin-top:4px; }
.content-area { max-width:800px; }
.content-section { padding-block:40px; }
.content-section .cs-h2 { margin-bottom:20px; }
.content-section .cs-text { margin-bottom:24px; }
.food-content > section,.food-desc,.nutrition-card,.serving-card,
.serving-table-card,.compare-card,.similar-section { margin-bottom:40px; }
.food-content .desc-body p { margin-bottom:20px; }
.food-content .desc-body h3 { margin-block:32px 12px; }
.article-content .on-this-page { padding-block:24px; margin-block:24px 32px; }
.article-content .section { padding-block:40px; }

/* 2. Color: three legible text roles and a single control accent. */
.calc-hero,.calc-wrap,.content-area,.food-hero,.food-content {
  --text:var(--reading-ink);
  --text-2:var(--reading-secondary);
  --text-3:var(--reading-meta);
  color:var(--reading-ink);
}
.calc-hero h1,.food-hero h1 {
  background:none; -webkit-background-clip:initial;
  -webkit-text-fill-color:var(--reading-ink); color:var(--reading-ink);
}
.calc-hero h1 .hl,.food-hero h1 .hl,.content-section .cs-h2 .hl {
  background:none; padding:0; border-radius:0;
}
.calc-wrap .gender-btn.selected,.calc-wrap .activity-card.selected,
.calc-wrap .goal-card.selected,.calc-wrap .macro-ratio.active {
  border-color:var(--reading-accent); background:var(--reading-surface);
  color:var(--reading-ink);
}
.calc-wrap .activity-card.selected .a-mult,
.calc-wrap .activity-table .at-kcal,
.calc-wrap .macro-tab.active .macro-tab-cals { color:var(--reading-accent); }
.calc-wrap .input-group input:focus,.calc-wrap .formula-select:focus {
  border-color:var(--reading-accent);
}
.calc-wrap .goal-btn { background:var(--reading-accent); box-shadow:none; }
.calc-wrap .goal-card:not([data-goal]) {
  background:var(--reading-surface); border:1px solid var(--reading-line);
}
.calc-wrap .cta-card,.calc-wrap .res-cta-card { background:#171c19; }
.calc-wrap .cta-card p,.calc-wrap .res-cta-card p { color:#e5ebe6; }
.calc-wrap .cta-proof,.calc-wrap .cta-proof b { color:#c4cfc7; }
.content-area .cs-text,.food-content .food-desc,
.food-content .faq-a-inner,.article-content .section > p,
.article-content .section > ul,.article-content .section > ol,
.article-content .section details p { color:var(--reading-ink); }
.content-area a,.food-content .desc-toggle,.article-content .sources a {
  color:var(--reading-accent); text-decoration-thickness:1px;
}
.food-content .serving-btn.active { background:var(--reading-accent); border-color:var(--reading-accent); }
.cta-section::before { background:none; }

/* 3. Icons: labels carry meaning; decorative activity emoji do not compete. */
.calc-wrap .a-icon,.calc-wrap .goal-icon { display:none; }
.food-ref-card .food-ref-emoji { display:none; }

/* 4. Copy presentation: keep reviewed wording and remove typographic shouting. */
.calc-card .field-label,.content-section .cs-label,.content-section .info-table th,
.food-content .serving-sizes th,.food-content .compare-table th,
.food-content .nutrition-table th,.food-content .serving-result-title,
.calc-card .macro-ratio-name,.calc-card .goal-stat-label,
.calc-card .bmi-badge,.calc-card .risk-title,.article-content .eyebrow,
.article-content .on-this-page > p,.food-hero .cal-label {
  text-transform:none; letter-spacing:0;
}

/* 5. Type: body 20/18, explanatory text 18/16, functional meta 16/14. */
.calc-hero h1,.food-hero h1 { font-weight:600; line-height:1.2; letter-spacing:-.02em; }
.calc-hero .subtitle { font-size:20px; line-height:1.6; }
.calc-card .step-title,.calc-card .res-program,
.calc-card .goal-title { font-size:22px; line-height:1.4; font-weight:600; letter-spacing:0; }
.calc-card .field-label,.calc-card .a-title,
.calc-card .gender-btn,.calc-card .goal-card[data-goal],
.calc-card .formula-select,.calc-card .btn-primary,
.calc-card .btn-recalc,.calc-card .recalc-btn,.calc-card .goal-btn {
  font-size:16px; line-height:1.5; font-weight:500; letter-spacing:0;
}
.calc-card .a-desc,.calc-card .a-mult,.calc-card .input-group .unit,
.calc-card .unit-btn,.calc-card .btn-back,.calc-card .res-params,
.calc-card .mc-pct,.calc-card .goal-stat-label,.calc-card .goal-hint,
.calc-card .macro-ratio-name,.calc-card .macro-ratio-split,
.calc-card .macro-ratio-item span,.calc-card .macro-tab-cals,
.calc-card .activity-table .at-mult,.calc-card .activity-table .at-week,
.calc-card .bd-desc,.calc-card .iw-year {
  font-size:14px; line-height:1.5; letter-spacing:0;
}
.calc-card .res-explain,.calc-card .bmi-interpret,.calc-card .risk-card,
.calc-card .goal-desc,.calc-card .bp-desc,.calc-card .iw-desc {
  font-size:18px; line-height:1.65; color:var(--reading-secondary);
}
.calc-card .result-number { font-weight:600; letter-spacing:-.02em; }
.calc-card .result-per-day,.calc-card .result-unit,.calc-card .mc-name,
.calc-card .bd-label,.calc-card .activity-table .at-level,
.calc-card .activity-table .at-kcal,.calc-card .macro-tab,
.calc-card .breakdown-title,.calc-card .activity-table-label,
.calc-card .macros-section-label,.calc-card .iw-table td {
  font-size:16px; line-height:1.5; letter-spacing:0;
}
.calc-card .medical-disclaimer,.calc-card .disclaimer {
  font-size:16px; line-height:1.65; color:var(--reading-secondary);
  text-align:start; padding-block:20px;
}
.calc-card .bmi-labels,.calc-card .bmi-gauge-labels {
  font-size:14px; line-height:1.5; gap:8px;
}
.calc-card .bmi-labels > * { min-width:0; overflow-wrap:anywhere; }
.calc-card .cta-card h3,.calc-card .res-cta-card h3 {
  font-size:24px; line-height:1.35; font-weight:500; letter-spacing:0;
}
.calc-card .cta-card p,.calc-card .res-cta-card p {
  font-size:18px; line-height:1.65; margin-bottom:20px;
}
.calc-card .cta-proof { font-size:14px; line-height:1.5; }
.content-section .cs-label { font-size:14px; line-height:1.5; color:var(--reading-meta); font-weight:500; }
.content-section .cs-h2,.faq-header h2,.food-content h2 {
  font-size:30px; line-height:1.3; font-weight:500; letter-spacing:-.015em;
}
.content-section .cs-text,.content-section .component-card p,
.content-section .limit-card p,.faq .faq-ans-inner,
.food-content .food-desc,.food-content .faq-a-inner {
  font-size:20px; line-height:1.65;
}
.content-section .component-card h3,.content-section .limit-card h3 {
  font-size:22px; font-weight:500; line-height:1.4; letter-spacing:0;
}
.faq .faq-q,.food-content .faq-q { font-size:20px; line-height:1.5; font-weight:500; }
.content-section .refs,.content-section .refs a,.content-section .last-updated,
.content-section .cs-quote cite,.content-section .cs-quote p {
  font-size:16px; line-height:1.7; color:var(--reading-secondary); letter-spacing:0;
}
.content-section .info-table { font-size:16px; line-height:1.6; }
.content-section .info-table th { font-size:16px; line-height:1.5; font-weight:500; }
.content-section .info-table td { color:var(--reading-secondary); }
.food-content :is(.nutrition-table,.serving-sizes,.compare-table) :is(th,td) {
  font-size:16px; line-height:1.5; color:var(--reading-secondary);
}
.food-content :is(.nt-source,.sr-label,.sc-unit),.food-hero .updated-stamp,
.food-hero :is(.cal-label,.cal-unit,.macro-name,.macro-pct),
.food-hero .cal-hero-mobile :is(.nm,.vl,.pc,.s-detail) {
  font-size:14px; line-height:1.5; color:var(--reading-meta); letter-spacing:0;
}
.food-content :is(.serving-input-label,.serving-btn,.serving-result-title,.sc-name) {
  font-size:16px; line-height:1.5; letter-spacing:0;
}
.food-content .sr-label,.food-hero .cal-hero-mobile :is(.nm,.vl) { font-size:16px; }
.calc-card :is(.mc-grams,.tier-cal,.bd-kcal,.goal-stat-val,.iw-range-display,.bp-value),
.food-hero :is(.cal-num,.macro-val,.hs-big),.food-content :is(.sr-val,.sc-cal) { font-weight:600; }
.calc-card .macro-ratio-item.p { color:#9a3434; }
.calc-card .macro-ratio-item.c { color:#245b98; }
.calc-card .macro-ratio-item.f { color:#765709; }
.article-content :is(h1,h2,h3) { font-weight:600; }
.article-content .section > h2 { font-weight:500; }
.article-content :is(.small,.notice,.sources ul,.disclaimer,.byline,.breadcrumb) {
  color:var(--reading-secondary);
}
.article-content .on-this-page > p { font-size:16px; line-height:1.5; font-weight:500; }
.article-content .on-this-page ol,.article-content .table-scroll :is(th,td) { font-size:18px; line-height:1.6; }
.article-content :is(.section-number,.table-scroll caption,.example-record dt) { font-size:16px; letter-spacing:0; }
.article-content :is(.resource-list a,.field-list h3) { font-weight:500; }
.calc-wrap,.food-content,.food-hero .cal-hero-card,.food-hero .cal-hero-mobile,
.article-content .table-scroll { font-variant-numeric:tabular-nums; }

/* 6. Layout: text follows reading direction; tables scroll within the page. */
.content-section :is(.cs-label,.cs-h2),.faq-header { text-align:start; }
.faq .faq-ans-inner { padding-inline-end:0; }
.content-section .info-table { display:block; max-width:100%; overflow-x:auto; }
.content-section .info-table :is(th,td) { min-width:128px; padding:16px; }
.food-content .compare-table { table-layout:fixed; width:100%; }
.food-content .compare-table :is(th,td) { overflow-wrap:anywhere; }
.food-hero .cal-hero-mobile .chm-macros { flex-direction:column; gap:12px; }
.food-hero .cal-hero-mobile .chm-m { width:100%; justify-content:flex-start; gap:8px; }
.food-hero .cal-hero-mobile .chm-m .nm { flex:1; }
.food-hero .cal-hero-mobile .chm-m .pc { min-width:40px; text-align:end; }
.calc-wrap .macro-tabs { flex-wrap:wrap; }
.calc-wrap .macro-tab { min-width:100px; }
.calc-wrap .macro-ratios { grid-template-columns:repeat(auto-fit,minmax(min(100%,144px),1fr)); }
.calc-wrap .bmi-gauge-labels { flex-wrap:wrap; }
.food-ref-grid { grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:12px; }
.food-ref-card { text-align:start; align-items:flex-start; padding:16px; }
.food-ref-card .food-ref-name { font-size:16px; line-height:1.5; text-align:start; font-weight:500; }
.food-ref-card .food-ref-kcal { font-size:14px; line-height:1.5; background:none; padding:0; color:var(--reading-secondary); }
.food-ref-hint,.food-ref-sub { font-size:16px; line-height:1.6; color:var(--reading-secondary); }

/* 7. Details: quiet surfaces, clear selection and keyboard focus. */
.calc-card,.food-content :is(.nutrition-card,.serving-card,.serving-table-card,.compare-card),
.food-hero :is(.cal-hero-card,.cal-hero-mobile) {
  border:1px solid var(--reading-line); border-radius:16px;
  box-shadow:0 2px 8px #20252206;
}
.calc-card:hover { box-shadow:0 2px 8px #20252206; }
.calc-wrap :is(.input-group input,.formula-select,.gender-btn,.activity-card,
.btn-primary,.btn-recalc,.recalc-btn,.goal-btn) { border-radius:8px; }
.calc-wrap :is(.input-group input,.formula-select,.unit-btn,.btn-primary,
.btn-back,.btn-recalc,.recalc-btn,.macro-tab),
.food-content :is(.serving-btn,.serving-input,.desc-toggle) { min-height:44px; }
.calc-wrap :is(button,input,select,[tabindex]):focus-visible,
.content-area a:focus-visible,.food-content :is(a,button,input):focus-visible,
.article-content :is(a,button,summary):focus-visible {
  outline:2px solid var(--reading-accent); outline-offset:4px;
}
.calc-wrap .cta-badges { justify-content:flex-start; gap:12px; }
.calc-wrap .cta-badges a { display:inline-flex; align-items:center; min-height:44px; }
.cta-section .cta-sec-sub { font-size:18px; line-height:1.65; color:#e5ebe6; }
.cta-section .cta-sec-h2 { font-weight:500; }
.cta-section .cta-sec-rate-label { color:#c4cfc7; font-size:14px; line-height:1.5; letter-spacing:0; text-transform:none; }
.calc-hero .tp { background:none; border-radius:0; box-shadow:none; backdrop-filter:none; padding:0; font-size:14px; line-height:1.5; }
.calc-hero .tp:hover { box-shadow:none; transform:none; }

/* 8. Visuals: existing app screens, meaningful nutrient bars, no filler. */
.article-content .app-screen { box-shadow:0 8px 24px #2025220d; }
.calc-wrap .bd-bar,.calc-wrap .macro-tabs { box-shadow:none; }

/* 9. Motion: preserve calculator behavior; remove decoration that moves. */
.calc-wrap :is(button,.activity-card,.gender-btn,.goal-card,.macro-ratio),
.food-content :is(.serving-btn,.similar-card),.food-ref-card {
  transition:color 160ms var(--reading-ease),background-color 160ms var(--reading-ease),border-color 160ms var(--reading-ease);
}
.calc-wrap :is(.btn-primary,.goal-btn,.cta-badges a):hover,
.food-ref-card:hover,.food-content .similar-card:hover { transform:none; box-shadow:none; }
.article-content :is(.button,.app-store-link):hover { transform:none; }
.article-content .reveal-ready { opacity:1; transform:none; }
.calc-wrap .step-panel { animation:none; }
.content-section .cs-quote cite { font-style:normal; }

@media (max-width:600px) {
  .calc-hero { padding-block:32px 24px; }
  .calc-hero .subtitle { font-size:18px; }
  .calc-hero .trust-row { flex-direction:row; gap:8px 16px; }
  .calc-card .step-panel,.calc-card .results-panel { padding:20px 16px; }
  .calc-card .step-panel > .results-panel { padding:0; }
  .calc-card .res-params { overflow-wrap:anywhere; }
  .content-section { padding-block:32px; }
  .content-section .cs-h2,.faq-header h2,.food-content h2 { font-size:26px; }
  .content-section .cs-text,.content-section .component-card p,
  .content-section .limit-card p,.faq .faq-ans-inner,
  .food-content .food-desc,.food-content .faq-a-inner { font-size:18px; }
  .faq .faq-q,.food-content .faq-q { font-size:18px; }
  .faq .faq-num { font-size:20px; min-width:24px; color:var(--reading-meta); }
  .faq .faq-item { gap:12px; }
  .calc-card .bmi-labels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .calc-wrap .cta-card,.calc-wrap .res-cta-card { padding:24px 16px; }
  .calc-wrap .cta-badges img { height:40px; }
  .article-content .table-scroll :is(th,td) { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .calc-wrap *,.food-content *,.article-content * { transition:none!important; animation:none!important; }
}