/* DropSet guide pages — styles layered on top of programs.css (loaded first,
 * provides :root tokens, .pp-nav, .pp-main, .pp-section, .faq-item, .pp-cta,
 * buttons, footer, waitlist modal). Only guide-specific components live here. */

/* Hero — text-only variant of .pp-hero */
.guide-hero { margin-bottom: 36px; }
.guide-hero .pp-hero-text p { font-size: 15.5px; color: var(--muted2); max-width: 720px; margin-bottom: 12px; }
.guide-updated { font-size: 12px !important; color: var(--muted) !important; font-family: var(--mono); }

/* On-this-page ToC */
.guide-toc {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 18px 20px; margin-bottom: 44px;
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
}
.guide-toc .section-label { width: 100%; margin-bottom: 2px; }
.guide-toc a { color: var(--muted2); text-decoration: none; font-size: 13.5px; }
.guide-toc a:hover { color: var(--accent); }

/* Sections — anchor jumps must clear the fixed banner (38px) + nav (~76px) */
.guide-section { scroll-margin-top: 128px; }
.guide-section h2 { max-width: 720px; }

/* Numbered how-to steps */
.guide-steps { margin: 4px 0 18px; padding: 0; list-style: none; counter-reset: step; max-width: 720px; }
.guide-steps li {
  counter-increment: step; position: relative;
  padding: 10px 0 10px 44px; font-size: 14.5px; color: var(--muted2);
  border-bottom: 1px solid var(--border);
}
.guide-steps li:last-child { border-bottom: none; }
.guide-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 8px;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--accent-dim); color: var(--accent);
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}

/* "Did you know?" callout */
.tip-callout {
  border: 1px solid rgba(91,123,166,0.2); border-radius: 12px;
  background: var(--accent-dim); padding: 14px 18px; margin: 18px 0;
  max-width: 720px;
}
.tip-callout .tip-label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 6px;
}
.tip-callout p { font-size: 14px; color: var(--text); margin: 0 0 6px; }
.tip-callout p:last-child { margin-bottom: 0; }

/* Screenshot in a phone bezel */
.shot-frame { margin: 22px 0; }
.shot-frame img {
  display: block; width: 100%; max-width: 320px; height: auto;
  border-radius: 28px; border: 6px solid #262A1D;
  outline: 1px solid var(--border);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(91,123,166,0.06);
}
.shot-frame figcaption { font-size: 12.5px; color: var(--muted); margin-top: 10px; max-width: 320px; text-align: center; }
/* Landscape captures (rotated phone) get a wider bezel */
.shot-frame.landscape img { max-width: 560px; }
.shot-frame.landscape figcaption { max-width: 560px; }
/* Several shots side by side */
/* Top-align the phones so different-length captions below don't push them out of line */
.shot-row { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-start; }
.shot-row .shot-frame { margin: 22px 0 10px; }

/* Before → after comparison: two phones flanking a centred before→after payoff
 * (the a-real-531 "40 kg → 70 kg" look — big numerals, delta badge, note).
 * Breaks out of the 720px section measure to the full wrap so the phones read
 * large, capped to the viewport so it never causes horizontal scroll. Stacks
 * with the centre column first on mobile. */
.guide-compare { display: grid; grid-template-columns: minmax(0, 300px) minmax(180px, 1fr) minmax(0, 300px); gap: 32px; align-items: center; justify-content: center; margin: 36px auto 30px; width: min(1040px, 100%); }
.gc-col { margin: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.gc-tag { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.gc-tag.up { color: var(--accent); }
.gc-col img { display: block; width: 100%; max-width: 300px; height: auto; border-radius: 24px; border: 6px solid #262A1D; outline: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.gc-col.up img { outline-color: rgba(91,123,166,0.3); box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(91,123,166,0.16); }
.gc-mid { text-align: center; min-width: 0; }
.gc-delta { font-family: var(--sans); font-size: clamp(30px, 4.4vw, 50px); font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1.05; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gc-delta .arw { color: var(--accent); font-weight: 400; }
.gc-badge { display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: var(--accent); padding: 7px 12px; border-radius: 8px; }
.gc-mid p { margin: 16px auto 0; color: var(--muted2); font-size: 14px; line-height: 1.55; max-width: 34ch; }
@media (max-width: 720px) {
  .guide-compare { grid-template-columns: 1fr 1fr; gap: 16px 12px; width: 100%; }
  .gc-mid { grid-column: 1 / -1; order: -1; }
  .gc-col img { max-width: 100%; }
  /* Longer deltas (e.g. "120 kg × 5 → 142.5 kg × 3") wrap rather than overflow */
  .gc-delta { white-space: normal; font-size: clamp(24px, 6.5vw, 34px); }
}

/* Glossary */
.term-list { max-width: 760px; }
.term-item { border-bottom: 1px solid var(--border); padding: 14px 0; scroll-margin-top: 128px; }
.term-item dt { font-weight: 700; font-size: 15px; font-family: var(--sans); margin-bottom: 4px; }
.term-item dd { font-size: 14px; color: var(--muted2); margin: 0; }

/* Hub cards */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.hub-card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 20px;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
/* NEW corner ribbon: a diagonal band wrapping the top-right corner. The card
   clips it to its own rounded corner (overflow:hidden), so the ribbon reads as
   part of the card rather than a floating chip. */
.hub-card { position: relative; }
.hub-card.has-badge { overflow: hidden; }
.hub-card.has-badge b { padding-right: 40px; }
.hub-badge-new {
  position: absolute; top: 15px; right: -30px;
  width: 108px; transform: rotate(45deg);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
  color: #fff; background: var(--accent);
  padding: 4px 0; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28);
}
.hub-card:hover { background: var(--surface-hover); border-color: rgba(91,123,166,0.2); transform: translateY(-2px); }
.hub-card b { color: var(--text); font-size: 16px; font-family: var(--sans); font-weight: 700; }
.hub-card p { color: var(--muted2); font-size: 13.5px; margin: 0; flex: 1; }
.hub-card .hub-meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* Related-topic cards (text-only cousins of .rel-card) */
.guide-rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.guide-rel-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 18px;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.guide-rel-card:hover { background: var(--surface-hover); border-color: rgba(91,123,166,0.2); transform: translateY(-2px); }
.guide-rel-card b { color: var(--text); font-size: 14.5px; }
.guide-rel-card span { color: var(--muted); font-size: 12.5px; }

@media (max-width: 600px) {
  .guide-toc { padding: 14px 16px; }
  .shot-frame img { max-width: 260px; }
}

/* YMYL health disclaimer — nutrition/calorie articles. Visible, not buried: this is a
   real liability boundary, so it sits above the article body, not in the footer. */
.guide-disclaimer {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: var(--radius);
  padding: 14px 18px; margin: 0 0 32px; font-size: 13.5px; line-height: 1.55;
  color: var(--muted2); max-width: 760px;
}
.guide-disclaimer strong { color: var(--text); }

/* ── TDEE calorie calculator ──────────────────────────────────────────────────
   Reuses .finder-panel / .chip / .chip-row / .chip-label / .chip-wrap from
   programs.css (loaded on every guide page). Only the numeric inputs and the
   result block are calculator-specific. */
/* THE STRUCTURAL FIX (v3): .finder-panel's gap only spaces its DIRECT children, and the
   whole form is one child — so without this, every row inside the form sits in raw block
   flow with no rhythm, which is what made the widget look cramped and misaligned no
   matter what the individual rows did. The form itself owns the vertical rhythm. */
.tdee-calc #cc-form { display: flex; flex-direction: column; gap: 20px; }
/* One rule for EVERY label-above-control group, chips and inputs alike, so the
   label→control distance is identical down the whole form. */
.tdee-calc .chip-row, .tdee-calc .cc-field { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tdee-calc .chip-label { min-width: 0; }

/* Body stats: an even 3-column grid (Age · Weight · Height) that spans the panel and
   lines up with the chip rows. Exactly 3 cells are ever visible — the unit toggle
   display:none's the other unit's fields, and grid reflows the survivors into 3 columns. */
.tdee-calc .cc-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.tdee-calc .cc-field { min-width: 0; }
.tdee-calc .cc-field .cc-input { align-self: stretch; }

/* Selected-activity description — always visible (hover title= is desktop-only). */
.tdee-calc .cc-hint { font-size: 12.5px; color: var(--muted); margin: 0; }
.tdee-calc .cc-input {
  width: 100%; box-sizing: border-box; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font-size: 15px; font-family: inherit; outline: none; transition: border-color 0.12s;
}
.tdee-calc .cc-input:focus { border-color: rgba(91,123,166,0.5); }
.tdee-calc .cc-input::placeholder { color: var(--muted); }
.tdee-calc .cc-ftin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .tdee-calc .cc-inputs { grid-template-columns: 1fr 1fr; } }
/* Collapses entirely when empty — otherwise it reserves a blank row (plus two form gaps)
   of dead space between Goal and the button. */
.tdee-calc .cc-error { color: #f13560; font-size: 13px; margin: 0; }
.tdee-calc .cc-error:empty { display: none; }
.tdee-calc .cc-submit { align-self: flex-start; border: none; cursor: pointer; }

/* Result — hidden until a calculation runs; the big figure uses the app accent. */
.tdee-calc .cc-result { display: none; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(91,123,166,0.18); }
.tdee-calc[data-has-result="true"] .cc-result { display: block; }
.cc-kcal-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cc-kcal { font-family: var(--sans); font-size: 46px; font-weight: 800; color: var(--accent); line-height: 1.05; margin: 4px 0; }
.cc-kcal small { font-size: 15px; color: var(--muted2); font-weight: 400; letter-spacing: 0; }
.cc-goal-note { font-size: 13.5px; color: var(--muted2); margin: 2px 0 0; max-width: 60ch; }
.cc-result-rows { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 18px 0 14px; }
.cc-result-rows > div { font-size: 13.5px; color: var(--muted2); }
.cc-result-rows > div span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.cc-result-rows b { color: var(--text); font-size: 17px; }
.cc-estimate-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; max-width: 70ch; }

/* ── Progression arc strip ───────────────────────────────────────────────
   One cell per logged session: the weight the program actually put on the bar,
   and whether it advanced, held on a miss, or deloaded. Captured by driving the
   real app, so these are engine values rather than an illustration. Colours match
   the logger: accent for a completed advance, #f87171 for a miss, #fbbf24 for a
   deload. Scrolls on its own axis so a long block never moves the page. */
.guide-arc { margin: 26px 0 0; }
.guide-arc .arc-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 8px;
}
/* WRAPS rather than scrolls. A 15-plus session block on one scrolling row put a
   scrollbar through the middle of the article and pushed most of the story out of
   view; five to a row fits any phone and reads as a grid of sessions. */
.guide-arc .arc-strip {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.guide-arc .arc-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--green);
  border-radius: 10px; padding: 9px 6px 7px; min-width: 0;
}
.guide-arc .arc-cell.miss   { border-top-color: #f87171; }
.guide-arc .arc-cell.deload { border-top-color: #fbbf24; }
.guide-arc .arc-w {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 600; color: var(--text);
}
.guide-arc .arc-m { font-size: 12px; line-height: 1; color: var(--green); }
.guide-arc .arc-cell.miss   .arc-m { color: #f87171; }
.guide-arc .arc-cell.deload .arc-m { color: #fbbf24; }
.guide-arc .arc-s {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 10px; color: var(--muted); white-space: nowrap;
}
.guide-arc .arc-key {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  list-style: none; margin: 12px 0 0; padding: 0;
  font-size: 12.5px; color: var(--muted);
}
.guide-arc .arc-key li { display: flex; align-items: center; gap: 6px; }
.guide-arc .arc-key li::before {
  content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--green);
}
.guide-arc .arc-key li.miss::before   { background: #f87171; }
.guide-arc .arc-key li.deload::before { background: #fbbf24; }
.guide-arc figcaption {
  font-size: 13px; color: var(--muted2); line-height: 1.55;
  margin: 12px 0 0; max-width: 70ch;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 460px) {
  .guide-arc .arc-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-arc .arc-cell { padding: 8px 4px 6px; }
  .guide-arc .arc-w { font-size: 14px; }
}

/* ── Fat-loss cardio progression (renderCardioArc) ── sibling of .guide-arc: a
   weekly HIIT interval grid + a steady-cardio minutes ramp. Green "harder"
   accent matches the strength arc's advance colour. */
.guide-cardio { margin: 20px 0 0; }
.guide-cardio .arc-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 8px;
}
.guide-cardio .carc-name {
  font-size: 13.5px; color: var(--text); margin: 14px 0 8px; font-weight: 600;
}
.guide-cardio .carc-name .carc-sub {
  font-family: var(--mono); font-weight: 400; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.guide-cardio .carc-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.guide-cardio .carc-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--muted2);
  border-radius: 10px; padding: 9px 6px 8px; min-width: 0; text-align: center;
}
.guide-cardio .carc-cell.up { border-top-color: var(--green); }
.guide-cardio .carc-wk {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--muted); text-transform: uppercase;
}
.guide-cardio .carc-int {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.guide-cardio .carc-int .carc-sep { color: var(--muted); font-weight: 400; }
.guide-cardio .carc-rounds { font-size: 11px; color: var(--muted2); white-space: nowrap; }
.guide-cardio .carc-m { font-size: 12px; line-height: 1; color: var(--green); }
.guide-cardio .carc-cell:not(.up) .carc-m { color: var(--muted); }
.guide-cardio .carc-steady {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.guide-cardio .carc-steady li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 9px 12px; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--green);
  border-radius: 8px;
}
.guide-cardio .carc-steady-name {
  font-size: 13px; font-weight: 600; color: var(--text); min-width: 8.5em;
}
.guide-cardio .carc-steady-ramp {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--text);
}
.guide-cardio .carc-arw, .guide-cardio .carc-steady-ramp .carc-unit { color: var(--muted); }
.guide-cardio .carc-key {
  display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none;
  margin: 12px 0 0; padding: 0; font-size: 12.5px; color: var(--muted);
}
.guide-cardio .carc-key li { display: flex; align-items: center; gap: 6px; }
.guide-cardio .carc-key li::before {
  content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--green);
}
.guide-cardio .carc-key li.flat::before { background: var(--muted2); }
.guide-cardio figcaption {
  font-size: 13px; color: var(--muted2); line-height: 1.55;
  margin: 12px 0 0; max-width: 70ch;
}
@media (max-width: 560px) {
  .guide-cardio .carc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}