/* Styles for the generated static pages (guides, topics, Label Check, products). Loaded after site.css, reuses its tokens. */

.nav-links a[aria-current="page"] { color:#f4ede1; background:rgba(255,255,255,.08); }

/* Article column */
.lesson-shell > .article { max-width:760px; margin:0 auto; }
.lesson-shell > .article:has(.guide-grid),
.lesson-shell > .article:has(.product-list) { max-width:1040px; }
.lesson-shell > .crumb { max-width:760px; margin-left:auto; margin-right:auto; flex-wrap:wrap; }
.crumb a { color:var(--teal); }
.crumb a:hover { text-decoration:underline; }
.crumb span:last-child { color:var(--ink); }
.article-head { padding:28px; }
.article-head h1 { font-size:clamp(30px,5vw,46px); line-height:1.08; margin:0 0 10px; }
.article-head .sub { margin:0 0 10px; }
.article-head .summary { margin:0; font-size:16px; }
.article section { padding:24px; }
.article section h2 { font-size:clamp(22px,3vw,28px); }
.article ul,.article ol { padding-left:22px; margin:0; }
.article p { margin:0 0 12px; }
.article section p:last-child { margin-bottom:0; }
.article a:not(.btn) { color:var(--teal); font-weight:700; }
.article a:not(.btn):hover { text-decoration:underline; }
.video-panel + p { margin:0 0 18px; }

/* Answer box */
.article .answer,.article section.answer { background:var(--teal-soft); border:1px solid var(--teal-light); border-left-width:6px; box-shadow:none; }
.article .answer h2 { color:var(--teal-dark); font-size:14px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; }
.article .answer p { color:var(--ink); font-size:19px; font-weight:600; line-height:1.5; }

/* Safety */
.article section.safety { background:var(--coral-soft); border-color:var(--coral-border); }
.article section.safety h2 { color:var(--coral-text); }

/* Evidence rows */
.benefit-list { display:grid; gap:12px; }
.benefit-row { padding:14px 16px; border:1px solid var(--line); border-radius:11px; background:var(--rail); }
.benefit-row h3 { font-size:18px; margin:6px 0 4px; color:var(--navy); }
.benefit-row p { margin:0; color:var(--text); }

/* References */
.refs { padding-left:24px; }
.refs li { margin-bottom:10px; color:var(--muted); font-size:15px; overflow-wrap:anywhere; }
.refs a { color:var(--teal); font-weight:800; }
.article .disclaimer { color:var(--muted); font-size:14px; padding:6px 4px 30px; margin:0; }

/* Chips, verdicts, grades (site.css supplies the base .chip pill) */
.chip { display:inline-block; padding:6px 12px; font-size:13px; line-height:1.2; }
.chip.verdict-worth_it { background:var(--green-soft); border-color:var(--green-border); color:var(--green); }
.chip.verdict-overpriced { background:var(--amber-soft); border-color:var(--amber-border); color:var(--amber); }
.chip.verdict-skip { background:var(--crimson-soft); border-color:var(--crimson-border); color:var(--crimson); }
.chip.grade-a,.chip.grade-b { background:var(--green-soft); border-color:var(--green-border); color:var(--green); }
.chip.grade-c { background:var(--amber-soft); border-color:var(--amber-border); color:var(--amber); }
.chip.grade-d,.chip.grade-f { background:var(--crimson-soft); border-color:var(--crimson-border); color:var(--crimson); }
.verdict-banner { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:14px; padding:14px 16px; border-radius:12px; background:var(--gray-soft); border:1px solid var(--gray-border); }
.verdict-banner .chip { font-size:15px; padding:8px 16px; }
.verdict-banner p { flex:1 1 260px; margin:0; font-size:18px; font-weight:700; color:var(--ink); }
.verdict-banner:has(.verdict-worth_it) { background:var(--green-soft); border-color:var(--green-border); }
.verdict-banner:has(.verdict-overpriced) { background:var(--amber-soft); border-color:var(--amber-border); }
.verdict-banner:has(.verdict-skip) { background:var(--crimson-soft); border-color:var(--crimson-border); }

/* Label and scorecard tables */
.data-table { width:100%; border-collapse:collapse; font-size:15px; }
.data-table th,.data-table td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.data-table thead th { color:var(--muted); font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; border-bottom:2px solid var(--line-strong); }
.data-table tbody th { color:var(--navy); font-weight:800; }
.data-table tbody tr:last-child th,.data-table tbody tr:last-child td { border-bottom:0; }
.data-table td { font-variant-numeric:tabular-nums; }

/* Findings and dose gap (bars show only when an item carries an inline --w from 0 to 1) */
.finding { padding:16px 0; border-top:1px solid var(--line-soft); }
.finding:first-child { border-top:0; padding-top:0; }
.finding h3 { font-size:19px; color:var(--navy); margin-bottom:8px; }
.dose-gap { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:0 0 12px; }
.dose-gap > div { padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:var(--rail); }
.dose-gap dt { margin-bottom:4px; }
.dose-gap dd { margin:0; font-size:20px; color:var(--navy); font-variant-numeric:tabular-nums; }
.dose-gap > div[style*="--w"]::after { content:""; display:block; height:8px; margin-top:10px; border-radius:999px; width:calc(var(--w, 0) * 100%); max-width:100%; background:var(--teal-light); }

/* Hub cards */
.guide-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-bottom:24px; }
.guide-card { min-width:0; padding:20px; background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow-card); transition:border-color 140ms ease,transform 140ms ease,box-shadow 140ms ease; }
.guide-card:hover,.guide-card:focus-within { transform:translateY(-2px); border-color:var(--teal-border); box-shadow:var(--shadow-raised); }
.guide-card h3 { font-size:19px; line-height:1.25; margin-bottom:8px; }
.guide-card h3 a { color:var(--navy); }
.guide-card p { color:var(--text); font-size:15px; margin:0 0 10px; }
.guide-card p:last-child { margin-bottom:0; }
.product-list { list-style:none; padding:0; margin:0 0 24px; display:grid; gap:8px; }
.product-list li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; padding:12px 16px; background:#fff; border:1px solid var(--line); border-radius:11px; }
.product-list a { color:var(--navy); font-weight:800; }

@media (max-width:680px) {
  .article-head,.article section { padding:18px; }
  .article .answer p { font-size:17px; }
  .guide-grid { grid-template-columns:minmax(0,1fr); }
  .video-panel { padding:10px; }
  .data-table { font-size:14px; }
  .data-table th,.data-table td { padding:8px; }
}