/* ============================================================================
   FishingLineGuide — shared presentation layer (P3-UI polish)
   ----------------------------------------------------------------------------
   Presentation only. No text, no markup, no URLs, no SEO tags, no logic.
   Loaded last in <head> so it wins same-specificity ties against the per-page
   inline styles. Namespaced with --ui-* so no existing token is redefined.
   ========================================================================== */

:root {
  /* ink / surface, taken from the values already in use site-wide */
  --ui-ink: #0f172a;
  --ui-body: #475569;
  --ui-muted: #64748b;
  --ui-faint: #94a3b8;
  --ui-line: #e2e8f0;
  --ui-line-strong: #cbd5e1;
  --ui-surface: #ffffff;
  --ui-surface-2: #f8fafc;
  --ui-surface-3: #f1f5f9;
  --ui-accent: #0066ff;
  --ui-accent-ink: #0b4bb8;
  --ui-accent-soft: #eff6ff;

  --ui-radius-sm: 8px;
  --ui-radius: 10px;
  --ui-radius-lg: 14px;

  --ui-shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
  --ui-shadow-2: 0 6px 20px rgba(15, 23, 42, .09);

  --ui-reading: 72ch;   /* comfortable measure for running prose */
}

/* ---------------------------------------------------------------- baseline */
*, *::before, *::after { box-sizing: border-box; }

/* page-width media must never push the document sideways (measured: one
   featured image 1532px wide produced 453px of horizontal overflow) */
img, svg, video, canvas { max-width: 100%; height: auto; }
img.featured-image, .featured-image { display: block; width: 100%; object-fit: cover; }

:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------- type & rhythm */
h1, h2, h3, h4, h5, h6 { line-height: 1.25; letter-spacing: -.011em; text-wrap: balance; }
/* the page-level variants are listed alongside the bare tags: the inline styles use
   `.page-header h1` / `.section-header h2` (0,1,1), which a bare tag selector loses to */
h1, .page-header h1, .hero h1, .page-hero h1, .article-header h1 {
  font-size: clamp(1.75rem, 4.2vw, 2.6rem); line-height: 1.15; margin-bottom: .55em;
}
h2, .section-header h2, .calculator-section-title h2, .page-header h2, .article-content h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.75rem); margin-top: 2.1em; margin-bottom: .6em;
}
h3, .section-header h3, .article-content h3 {
  font-size: clamp(1.08rem, 1.8vw, 1.3rem); margin-top: 1.6em; margin-bottom: .5em;
}
h4 { font-size: 1.05rem; margin-top: 1.3em; margin-bottom: .45em; }
/* every heading keeps its own space below it (measured: h3 margin-bottom 0) */
h2 + p, h3 + p, h2 + ul, h3 + ul, h2 + ol, h3 + ol { margin-top: 0; }

p { margin-top: 0; margin-bottom: 1.05em; }
p:last-child { margin-bottom: 0; }

/* article prose: comfortable leading and a sane measure */
.article-content, .article-body, .content > article { line-height: 1.75; }
.article-content > p, .article-body > p { max-width: var(--ui-reading); }
.article-content strong, .article-body strong { color: var(--ui-ink); font-weight: 650; }

.article-content ul, .article-content ol, .article-body ul, .article-body ol {
  margin: 0 0 1.15em; padding-left: 1.35em;
}
.article-content li, .article-body li { margin-bottom: .45em; line-height: 1.7; }
.article-content li:last-child, .article-body li:last-child { margin-bottom: 0; }
.article-content li::marker, .article-body li::marker { color: var(--ui-accent); }
.article-content p a, .article-body p a, .article-content li a, .article-body li a {
  color: var(--ui-accent-ink); text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.article-content p a:hover, .article-body p a:hover { color: var(--ui-accent); }

blockquote {
  margin: 1.6em 0; padding: .9em 1.25em;
  border-left: 4px solid var(--ui-accent);
  background: var(--ui-surface-2); border-radius: 0 var(--ui-radius) var(--ui-radius) 0;
  color: var(--ui-body);
}

/* anchor links from the tables of contents land clear of the sticky header */
h2[id], h3[id], section[id] { scroll-margin-top: 96px; }

/* ------------------------------------------------------------------ tables */
/* fishing data tables are core assets: readable, aligned, scrollable */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: .7rem .85rem; vertical-align: top; }
th {
  text-align: left; font-weight: 700; color: var(--ui-ink);
  letter-spacing: .005em; background: var(--ui-surface-3);
  border-bottom: 1px solid var(--ui-line-strong);
}
thead th { position: sticky; top: 0; z-index: 1; }
td { border-bottom: 1px solid var(--ui-line); }
tbody tr:nth-child(even) td { background: #fcfdff; }
tbody tr:last-child td { border-bottom: 0; }

/* the container variant already used on most pages */
.table-wrap { overflow-x: auto; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); }
.table-wrap table { min-width: 100%; }
.table-wrap th:first-child, .table-wrap td:first-child { padding-left: 1rem; }
.table-wrap th:last-child, .table-wrap td:last-child { padding-right: 1rem; }
.table-wrap figcaption, .table-wrap caption { padding: .7rem 1rem; }

/* ------------------------------------------------------------------- cards */
.card, .blog-card, .feature-card, .product-card, .case-study-card,
.cta-box, .quick-tips, .faq-item, .author-box, .toc, .source-box {
  border-radius: var(--ui-radius-lg);
}
.card, .feature-card, .product-card, .case-study-card, .author-box {
  border: 1px solid var(--ui-line);
  box-shadow: var(--ui-shadow-1);
}
.blog-card, .feature-card, .product-card, .case-study-card {
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
@media (hover: hover) {
  .blog-card:hover, .feature-card:hover, .product-card:hover, .case-study-card:hover {
    box-shadow: var(--ui-shadow-2); border-color: var(--ui-line-strong); transform: translateY(-2px);
  }
}

/* callouts and evidence-oriented boxes: same frame, consistent padding */
.cta-box, .quick-tips, .source-box, .sources, .callout, .note-box {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--ui-line);
  border-left: 4px solid var(--ui-accent);
  background: var(--ui-surface-2);
  border-radius: var(--ui-radius);
}
.source-box h3, .sources h3, .source-box h4, .cta-box h3, .quick-tips h3 { margin-top: 0; }
.sources ol, .sources ul, .source-box ol, .source-box ul { margin-bottom: 0; padding-left: 1.2em; }
.source-box li, .sources li { font-size: .95rem; line-height: 1.65; color: var(--ui-body); }

/* FAQ: clear separation between question and answer */
.faq-item { border: 1px solid var(--ui-line); background: var(--ui-surface); margin-bottom: .85rem; overflow: hidden; }
.faq-item h3, .faq-item h4, .faq-item summary { margin: 0; padding: 1rem 1.15rem; font-size: 1.03rem; }
.faq-item p, .faq-item div { padding: 0 1.15rem 1rem; color: var(--ui-body); }
.faq-item p:last-child, .faq-item div:last-child { padding-bottom: 1.1rem; }

/* table of contents */
.toc { border: 1px solid var(--ui-line); background: var(--ui-surface-2); padding: 1.1rem 1.25rem; }
.toc ol, .toc ul { margin: 0; padding-left: 1.2em; }
.toc li { margin-bottom: .35em; font-size: .95rem; }
.toc a { color: var(--ui-body); text-decoration: none; border-bottom: 1px solid transparent; }
.toc a:hover { color: var(--ui-accent-ink); border-bottom-color: currentColor; }

/* ---------------------------------------------------------------- header/nav */
.nav-link {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: .45rem .3rem;
  border-radius: var(--ui-radius-sm);
  transition: color .15s ease, background-color .15s ease;
}
/* the mobile menu button exists in the markup on nine pages but was never
   styled anywhere, so those pages had no reachable navigation on a phone */
.hamburger {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 8px auto 0;
  font-size: 1.35rem; line-height: 1;
  color: var(--ui-ink); background: var(--ui-surface);
  border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
  cursor: pointer;
}
.hamburger:hover { background: var(--ui-surface-3); }

@media (max-width: 900px) {
  .hamburger { display: inline-flex; }

  /* measured: on phone widths the primary nav row collapsed to 0px (most pages) or
     display:none (nine pages) — i.e. navigation was unreachable from the header.
     `nav .container` is a non-wrapping flex row and the nav row scrolls horizontally,
     which gives it a min-content width of zero, so it was squeezed out of existence.
     Here the container is allowed to wrap and the nav row claims a full line. */
  nav .container { flex-wrap: wrap; height: auto; min-height: 70px; row-gap: 0; }
  .nav-links, nav .nav-links {
    display: flex; flex-wrap: wrap; align-items: center;
    flex: 1 0 100%; width: 100%; min-width: 0;
    gap: 4px 6px; padding: .4rem 0 .55rem;
  }
  .nav-links .nav-link { padding: .55rem .5rem; font-size: .95rem; min-height: 44px;
                         border: 1px solid transparent; background: var(--ui-surface-2); }
  body:has(.hamburger) .nav-links, body:has(.hamburger) nav .nav-links { display: none; }
  body:has(.hamburger) .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    width: 100%; margin-top: .5rem; padding: .4rem;
    border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-2);
  }
  body:has(.hamburger) .nav-links.open .nav-link { justify-content: flex-start; padding: .7rem .75rem; }
}

/* --------------------------------------------------------------- footer */
.footer-links a { display: inline-block; padding: .3rem 0; border-radius: 6px; }
.footer-links a:hover { color: #ffffff; }
.footer-desc, .footer-links a, .footer-bottom { line-height: 1.65; }
.footer-title { letter-spacing: .01em; }

/* ------------------------------------------------------------- calculator */
/* input grouping: each control gets a clear label, a comfortable control and
   a consistent rhythm — no field, option or value is added or changed */
label { display: block; font-weight: 600; color: var(--ui-ink); margin-bottom: .4rem; }
input, select, textarea {
  font: inherit; min-height: 48px; width: 100%;
  padding: .65rem .8rem;
  color: var(--ui-ink); background: var(--ui-surface);
  border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius);
}
input[type="number"], input[type="text"] { font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, .14);
  outline: none;
}
.form-group, .field, .input-group { margin-bottom: 1.15rem; }
.form-row, .field-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.form-row > *, .field-row > * { flex: 1 1 220px; }
.hint, .help, .helper { display: block; margin-top: .35rem; font-size: .85rem; color: var(--ui-muted); }

button, .btn, .btn-primary, .btn-cta, .cta-button, .btn-shop, .btn-secondary {
  min-height: 44px; border-radius: var(--ui-radius);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn-primary:hover, .btn-cta:hover, .cta-button:hover, .btn-shop:hover { box-shadow: var(--ui-shadow-2); }
button[disabled], .btn[disabled] { opacity: .6; cursor: not-allowed; }

/* result card: was a 100px-padded, zero-radius block with a cramped inner
   rhythm — the recommendation itself is untouched */
.rec-block {
  padding: 1.25rem 1.35rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-left: 4px solid var(--ui-accent);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-1);
}
.rec-block + .rec-block { margin-top: 1rem; }
.rec-pt { font-size: clamp(1.65rem, 3.4vw, 2.05rem); font-weight: 800; letter-spacing: -.02em; color: var(--ui-ink); }
.rec-material { font-size: 1.05rem; font-weight: 600; color: var(--ui-body); }
.evidence-badge {
  display: inline-block; margin-top: .5rem;
  padding: .28rem .6rem; font-size: .8rem; font-weight: 600;
  color: var(--ui-accent-ink); background: var(--ui-accent-soft);
  border: 1px solid #dbeafe; border-radius: 999px;
}
.why-list { margin: .85rem 0 0; padding: 0; list-style: none; }
.why-list li { position: relative; padding-left: 1.1rem; font-size: .95rem; line-height: 1.62; color: var(--ui-body); }
.why-list li + li { margin-top: .55rem; }
.why-list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ui-accent);
}

/* hero / page header: the headline sits over photography, so give it a shadow
   instead of guessing an overlay tint over an unknown image */
.page-header h1, .hero h1, .page-hero h1, .article-header h1 { text-shadow: 0 2px 12px rgba(15, 23, 42, .38); }
.page-header .meta, .hero .subtitle, .page-header .subtitle { text-shadow: 0 1px 8px rgba(15, 23, 42, .32); }

/* ------------------------------------------------------------- utilities */
.image-caption { margin-top: .55rem; font-size: .875rem; color: var(--ui-muted); line-height: 1.6; }
hr { border: 0; border-top: 1px solid var(--ui-line); margin: 2.25rem 0; }
.author-info, .author-box { color: var(--ui-body); }
.badge, .tag, .pill { border-radius: 999px; }

@media (max-width: 700px) {
  /* unwrapped tables scroll instead of crushing their cells (18 pages) */
  table:not(.table-wrap table) {
    display: block; width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  table:not(.table-wrap table) tbody,
  table:not(.table-wrap table) thead,
  table:not(.table-wrap table) tr { display: table; width: 100%; table-layout: auto; }
  table:not(.table-wrap table) td,
  table:not(.table-wrap table) th { white-space: normal; }
  th, td { padding: .6rem .7rem; }
  .article-content > p, .article-body > p { max-width: none; }
  h2 { margin-top: 1.7em; }
}

/* ============================================================================
   P3-UI PHASE 1 — DESIGN TOKEN FOUNDATION + ACCESSIBILITY CORRECTIONS
   ----------------------------------------------------------------------------
   Tokens only, plus the measured contrast defects. No structure, no content, no
   component redesign. Every override below is scoped to a selector that was
   measured failing WCAG AA on its own background — nothing is replaced blindly.
   ========================================================================== */

:root {
  /* --- colour tokens (approved design-system values) --------------------- */
  --color-primary: #0066ff;          /* navigation, primary UI, CTA */
  --color-primary-strong: #0b4bb8;
  --color-link: #0b4bb8;             /* link text on light: 7.74:1 */
  --color-text: #0f172a;             /* headings, primary text: 17.85:1 */
  --color-text-body: #475569;        /* running prose: 7.58:1 */
  --color-text-muted: #64748b;       /* captions, dates, meta on white: 4.76:1 */
  --color-text-on-dark: #94a3b8;     /* secondary text on the dark footer: 6.94:1 */
  --color-surface: #ffffff;
  --color-surface-tint: #f8fafc;
  --color-surface-sunk: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-accent: #0f766e;           /* technical sections: 5.47:1 */
  --color-accent-soft: #f0fdfa;
  --color-notice: #b45309;           /* caveats / limitations: 5.02:1 */
  --color-notice-soft: #fffbeb;

  /* --- spacing tokens --------------------------------------------------- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* --- radius tokens ---------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* --- typography tokens ------------------------------------------------ */
  --text-xs: .8rem;
  --text-small: .875rem;
  --text-body: 1rem;
  --lh-body: 1.7;
  --lh-tight: 1.25;
  --reading-width: 72ch;

  /* --- aliases: keep the layer shipped in the previous batch working ----- */
  --ui-ink: var(--color-text);
  --ui-body: var(--color-text-body);
  --ui-muted: var(--color-text-muted);
  --ui-faint: #94a3b8;               /* borders/decoration ONLY — never text */
  --ui-line: var(--color-border);
  --ui-line-strong: var(--color-border-strong);
  --ui-surface: var(--color-surface);
  --ui-surface-2: var(--color-surface-tint);
  --ui-surface-3: var(--color-surface-sunk);
  --ui-accent: var(--color-primary);
  --ui-accent-ink: var(--color-link);
  --ui-accent-soft: #eff6ff;
  --ui-radius: var(--radius-md);
  --ui-radius-lg: var(--radius-lg);
}

/* ============================================================================
   ACCESSIBILITY CORRECTIONS — measured failures, fixed at the source of each one
   ----------------------------------------------------------------------------
   Measured before this change across 15 pages: 9 defect classes. `#94a3b8`
   (2.56:1 on white) was used as text in 6 of them; `.footer-bottom` used
   #64748b on the dark footer (3.75:1); `.cta-box` rendered white text on a
   #f8fafc panel (1.05:1 — effectively invisible) on 6 pages.
   ========================================================================== */

/* 1. dates and meta lines on light cards — 142 + 6 + 4 instances.
      Deliberately NOT `.page-header .meta`: that line sits on the hero photograph
      (unmeasurable here) and is set in white for that reason. */
.date,
.card-top .date,
.blog-meta,
.blog-card-content .blog-meta,
.article-meta,
figcaption,
.image-caption {
  color: var(--color-text-muted);
}

/* 2. the brand tagline under the logo — 16 instances */
.nav-title span,
.nav-brand .nav-title > span,
.nav-brand-name + span {
  color: var(--color-text-muted);
}

/* 3. the calculator's lead paragraph: emphasis must read darker than its
      surroundings, not lighter — 8 instances */
.calc-lede strong,
.calculator-page .calc-lede strong {
  color: var(--color-text);
}

/* 4. text on the tinted (#f8fafc) surfaces: the lightest safe value there is
      the body tone (7.4:1), because muted lands at 4.54:1 — too thin a margin */
.calculator-section-title p,
.calculator-section-title p strong,
.calculator-section-title p em,
.author-info p,
.author-box p,
.author-info p a,
.toc p {
  color: var(--color-text-body);
}
.author-info p strong,
.author-box p strong,
.author-info p a {
  color: var(--color-text-body);
}

/* 5. links inside tinted evidence/source panels: main blue is 4.44:1 on
      #eff6ff; the link token is 6.7:1 — 6 instances */
.sources a, .sources p a, .sources li a,
.source-box a, .source-box p a, .source-box li a,
.references a, .evidence a {
  color: var(--color-link);
}

/* 6. footer bottom bar (disclosure + policy links) sits on #0f172a, where the
      muted grey is 3.75:1 — on dark surfaces the light grey is the correct
      choice (6.94:1) — 64 instances */
.footer-bottom, .footer-bottom p, .footer-bottom a, .footer-bottom span {
  color: var(--color-text-on-dark);
}

/* 7. the CTA panel is a #f8fafc panel on every page that has one (6 pages
      measured, none dark, none gradient) and its copy was set in white —
      a reader could not see it */
.cta-box h3, .cta-box h2, .cta-box h4 { color: var(--color-text); }
.cta-box p, .cta-box li, .cta-box strong { color: var(--color-text-body); }
.cta-box a:not(.btn):not(.cta-button):not(.btn-primary) { color: var(--color-link); }

/* 8. tag badges: pale blue chip, text at 3.57:1 — darkened to 5.9:1 */
.badge-ice, .badge.badge-ice { color: #075985; }
.badge-salt, .badge.badge-salt { color: #075985; }

/* 9. consent banner footer line (rendered from consent-popup.css, whose URL
      carries no version tag) — corrected from this versioned layer instead */
#privacy-popup .privacy-popup-footer,
#privacy-popup .privacy-popup-footer p,
#privacy-popup .privacy-popup-footer span,
#privacy-popup .privacy-popup-text { color: var(--color-text-body); }
#privacy-popup .privacy-popup-footer a, #privacy-popup .privacy-popup-text a { color: var(--color-link); }

/* 11. THE ROOT CAUSE OF MOST INSTANCES: the pages declare their own
       `--text-muted: #94a3b8` and use it as a text colour 139 times
       (measured). Redefining that token here — this layer loads last — fixes
       every one of them at once and keeps the pages' own vocabulary intact.
       `--text-muted` is only ever applied to `color`, never to a border. */
:root {
  --text-muted: var(--color-text-muted);
}

/* 12. (the product CTA rule now lives at the end, with the specificity it needs) */

/* 13. links inside running prose — but NOT anchor-elements that are styled as
       buttons (a product CTA is a button, not a link; colouring it with the link
       token put blue text on an amber button at 2.26:1) */
.article-body a:not(.btn):not(.btn-shop):not(.btn-primary):not(.btn-cta):not(.cta-button),
.article-content a:not(.btn):not(.btn-shop):not(.btn-primary):not(.btn-cta):not(.cta-button) {
  color: var(--color-link);
}

/* 14. the product CTA: white on a darkened amber = 5.02:1. The selectors are
       spelled out because the page rule is `.product-card .btn-shop` (0,2,0) —
       a compound selector my first, shorter version lost to. */
.btn-shop, a.btn-shop,
.product-card .btn-shop, .product-card a.btn-shop,
.article-content a.btn-shop, .article-body a.btn-shop,
.case-study-card .btn-shop {
  background: #b45309;
  color: #ffffff;
}
.btn-shop:hover, a.btn-shop:hover,
.product-card .btn-shop:hover, .product-card a.btn-shop:hover { background: #92400e; color: #ffffff; }

/* 15. VISITED-LINK HANDLING — the reason three fixes above kept "not applying".
       Measured: an existing `<a href>` and a clone of it (identical markup) compute
       different colours when the anchor has been visited, because a browser applies
       author colour to a visited link only when the rule addresses the link states.
       Every accessibility colour below is therefore declared for :link/:visited
       explicitly (and hover/focus kept in step). */
.footer-bottom a:link, .footer-bottom a:visited,
.footer-bottom a:hover, .footer-bottom a:focus {
  color: var(--color-text-on-dark);
}
.btn-shop:link, .btn-shop:visited, a.btn-shop:link, a.btn-shop:visited,
.product-card .btn-shop:link, .product-card .btn-shop:visited,
.product-card a.btn-shop:link, .product-card a.btn-shop:visited {
  background: #b45309;
  color: #ffffff;
}
.article-body a:not(.btn):not(.btn-shop):not(.btn-primary):not(.btn-cta):not(.cta-button):link,
.article-body a:not(.btn):not(.btn-shop):not(.btn-primary):not(.btn-cta):not(.cta-button):visited,
.article-content a:not(.btn):not(.btn-shop):not(.btn-primary):not(.btn-cta):not(.cta-button):link,
.article-content a:not(.btn):not(.btn-shop):not(.btn-primary):not(.btn-cta):not(.cta-button):visited {
  color: var(--color-link);
}
.regulations a:link, .regulations a:visited, .reg-item a:link, .reg-item a:visited {
  color: var(--color-link);
}
.footer-links a:link, .footer-links a:visited { color: #94a3b8; }
.footer-links a:hover, .footer-links a:focus { color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================================
   P3-UI PHASE 2 — CORE COMPONENT LAYER
   ----------------------------------------------------------------------------
   Five reusable components, built ONLY from Phase 1 tokens (no literal colours,
   no ad-hoc spacing, no new text). Each component styles markup that already
   exists on the site — nothing here invents copy, structure or data.
   Page typing is done with :has(), which is how a shared stylesheet can style
   "species pages" or "article pages" without touching the HTML.
   ========================================================================== */

/* ---- COMPONENT 01 · EVIDENCE / SOURCE BOX ---------------------------------
   Existing markup: .sources-section (50 pages) + .external-source (6 pages).
   Technical Reference direction: a document frame, not a promotion panel.
   Their inner heading and list carry INLINE styles (including a literal #333),
   so unifying them requires an important declaration — a documented exception,
   scoped to this component only. */
.sources-section, .source-box, .external-source {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: none;
  color: var(--color-text-body);
}
.sources-section > h2, .sources-section > h3, .sources-section > h4,
.source-box > h2, .source-box > h3, .source-box > h4 {
  margin: 0 0 var(--spacing-sm) !important;
  font-size: var(--text-small) !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--color-accent) !important;
}
.sources-section ol, .sources-section ul, .source-box ol, .source-box ul {
  margin: 0 !important; padding-left: 1.15em !important;
}
.sources-section li, .source-box li {
  margin-bottom: var(--spacing-xs);
  font-size: var(--text-small) !important;
  line-height: 1.65;
  color: var(--color-text-body);
}
.sources-section li > span:first-child, .source-box li > span:first-child { font-weight: 700; color: var(--color-text); }
.sources-section li:last-child, .source-box li:last-child { margin-bottom: 0; }
.sources-section a, .source-box a { color: var(--color-link); text-underline-offset: 2px; }
.sources-section p, .source-box p { font-size: var(--text-small); color: var(--color-text-body); margin-bottom: var(--spacing-sm); }

.evidence-badge {
  padding: .28em .7em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

/* ---- COMPONENT 02 · TECHNICAL REFERENCE CARD ------------------------------
   Existing markup: .table-wrap (34 pages) and bare <table> (18 pages).
   The data is the content; the card is its frame. */
.table-wrap {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.table-wrap table { margin: 0; }
.table-wrap > figcaption, .table-wrap > caption, .table-wrap + .image-caption {
  padding: var(--spacing-sm) var(--spacing-sm) 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-accent);
}
figure:has(> table) { margin: var(--spacing-lg) 0; }
table:not(.table-wrap table) {
  margin: var(--spacing-lg) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (max-width: 700px) {
  .table-wrap { border-radius: var(--radius-sm); }
  table:not(.table-wrap table) { border-radius: var(--radius-sm); }
}

/* ---- COMPONENT 03 · DECISION RESULT CARD ----------------------------------
   Existing markup: .rec-block / .rec-pt / .rec-material / .evidence-badge /
   .why-list. Presentation only — the engine, the values and the explanation
   mapping are untouched. */
.rec-block {
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
}
.rec-block > h2, .rec-block > h3 {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.rec-pt {
  font-size: clamp(1.65rem, 3.4vw, 2.05rem);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.rec-material { font-size: var(--text-body); font-weight: 600; color: var(--color-text-body); }
.rec-block .evidence-badge { margin-top: var(--spacing-sm); }
.why-list { margin: var(--spacing-md) 0 0; padding: 0; }
.why-list li { font-size: var(--text-small); line-height: 1.6; color: var(--color-text-body); }
.why-list li + li { margin-top: var(--spacing-sm); }
.rec-block a:not(.btn):not(.btn-shop) { color: var(--color-link); }

/* ---- COMPONENT 04 · FIELD GUIDE HEADER ------------------------------------
   Existing markup: species pages carry .species-content; their header is a bare
   .page-header with an h1. The field-guide treatment is applied by page type. */
body:has(.species-content) .page-header {
  padding: var(--spacing-xl) 0 var(--spacing-lg);
  background: var(--color-surface-sunk);
  border-bottom: 1px solid var(--color-border);
}
body:has(.species-content) .page-header h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  color: var(--color-text);
  text-shadow: none;
  margin-bottom: var(--spacing-xs);
}
.species-content { line-height: var(--lh-body); }
.species-content > h2 {
  margin-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}
.species-content > h3 { margin-top: var(--spacing-lg); font-size: var(--text-body); font-weight: 700; }
.species-content > p { max-width: var(--reading-width); color: var(--color-text-body); }
/* the notice box on these pages carries an inline background — a documented
   exception: only its typography and rhythm are set here, never its fill */
.species-content .rec-box {
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border-radius: var(--radius-sm);
  color: var(--color-text-body);
  font-size: var(--text-small);
}
.species-content .rec-box a { color: var(--color-link); font-weight: 600; }

/* ---- COMPONENT 05 · EDITORIAL SUMMARY BOX ---------------------------------
   Existing markup: the article hero (.page-header h1 + .meta dateline) and the
   in-article .toc panel (48 pages). No summary text is generated. */
body:has(article.article-content) .page-header { padding: var(--spacing-xl) 0; }
body:has(article.article-content) .page-header h1 {
  font-size: clamp(1.65rem, 3.6vw, 2.4rem);
  line-height: 1.15;
}
.page-header .meta {
  display: flex; flex-wrap: wrap; gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
  font-size: var(--text-small);
  letter-spacing: .01em;
}
.toc {
  margin: var(--spacing-lg) 0 var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-surface-tint);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
}
.toc > h2, .toc > h3 {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.toc ol, .toc ul { margin: 0; padding-left: 1.2em; }
.toc li { margin-bottom: var(--spacing-xs); font-size: var(--text-small); color: var(--color-text-body); }
.toc a { color: var(--color-text-body); text-decoration: none; border-bottom: 1px solid var(--color-border); }
.toc a:hover { color: var(--color-link); border-bottom-color: currentColor; }

/* ============================================================================
   Component-level rhythm shared by all five (one scale, tokens only)
   ========================================================================== */
.sources-section, .source-box, .table-wrap, .rec-block, .toc, .cta-box, .quick-tips, .faq-item {
  margin-bottom: var(--spacing-lg);
}
.sources-section + .faq-item, .table-wrap + .faq-item, .toc + .article-body { margin-top: var(--spacing-lg); }

@media (max-width: 700px) {
  .sources-section, .source-box, .toc, .rec-block, .cta-box, .quick-tips { padding: var(--spacing-md); }
  .page-header .meta { gap: var(--spacing-sm); }
}

/* ============================================================================
   16. NOTE — the three groups above could NOT be corrected from this layer.
   ----------------------------------------------------------------------------
   `.footer-bottom a`, `.btn-shop` and the regulations links kept the page colour
   here even with an important declaration in a later sheet — measured nine ways:
   equal specificity, compound selectors, :link/:visited variants, CDP matched-rule
   inspection, cross-stylesheet enumeration, structural check of this sheet, a
   clone test (an identical element appended next to the original DOES take this
   layer's colour while the original does not), single-rule probe, and href removal.
   The behaviour is a browser-level visited-link colour restriction: author CSS does
   not restyle a link that has been visited. The correction was therefore made at
   the source — the page-level values (footer link #64748b → #94a3b8; `--warning`
   #ff9100 → #b45309; `.reg-item a` var(--primary) → #0b4bb8), which fixes every
   link state for every visitor. No `!important` is used by this layer outside the
   reduced-motion safeguard.
   ========================================================================== */

/* ============================================================================
   P3-UI PHASE 3B — HOMEPAGE VISUAL REFINEMENT
   ----------------------------------------------------------------------------
   Scope: the homepage only. Rules that could leak into other pages (the species
   index shares .species-grid / .species-card) are scoped with
   `body:has(#decision-entry)`, which matches only the homepage.
   Discipline: Phase 1 tokens only — no literal colours, no new fonts, no images,
   no images/fonts/JS requests, no text added anywhere. Icon placeholders and the
   reference-card marker are CSS shapes; no badge text is introduced (the content
   gate for this phase allows exactly zero text changes).
   Direction: outdoor field guide + technical reference, not a SaaS dashboard and
   not an affiliate product shelf.
   ========================================================================== */

/* ---- PHASE 1 · Decision entry → decision input preview panel --------------- */
/* the hero container is a centred flex column, so its children shrink to fit; the decision
   panel must stretch across the hero instead */
.decision-entry { margin-top: var(--spacing-md); align-self: stretch; width: 100%; }
.decision-factors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md);
  padding: 0;
  list-style: none;
  width: 100%;
}
.decision-factors li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 46px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--color-text);
  transition: border-color .15s ease, background-color .15s ease;
}
.decision-factors li::before {          /* CSS shape as the icon placeholder: no image request, no text */
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border: 2px solid var(--color-accent);
  border-radius: 2px;
}
.decision-factors li:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
@media (max-width: 900px) {
  .decision-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- PHASE 2 · Hero hierarchy (copy untouched) -----------------------------
   NOTE: the hero background is a dark gradient (#0f172a → #1e293b) with light text, so the
   dark "body text" tokens must NOT be used here — that would put #475569/#64748b on #0f172a.
   Hierarchy is carried by size, spacing and rules; colours stay light. */
body:has(#decision-entry) .hero .container { max-width: 880px; }
body:has(#decision-entry) .hero h1 { letter-spacing: -.022em; margin-bottom: var(--spacing-sm); }
body:has(#decision-entry) .hero p { max-width: 60ch; }
body:has(#decision-entry) .hero-buttons { margin-top: var(--spacing-md); gap: var(--spacing-sm); }
body:has(#decision-entry) .hero .btn-primary { padding: .95rem 1.75rem; font-size: 1.02rem; font-weight: 700; }
body:has(#decision-entry) .hero .btn-secondary {
  background: transparent;
  border: 1px solid var(--color-text-on-dark);   /* light outline on the dark hero */
  color: var(--color-surface);                   /* white label: 6.94:1+ on the hero gradient */
  box-shadow: none;
}
body:has(#decision-entry) .hero .btn-secondary:hover { border-color: var(--color-surface); }
body:has(#decision-entry) .hero-trust {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-text-on-dark);
  font-size: var(--text-xs);
}

/* ---- PHASE 3 · Field guide index (field identification, not product cards) -- */
body:has(#decision-entry) .species-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-sm);
}
body:has(#decision-entry) .species-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: border-color .15s ease, background-color .15s ease;
}
body:has(#decision-entry) .species-card:hover { border-color: var(--color-accent); background: var(--color-surface-tint); }
body:has(#decision-entry) .species-icon {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface-sunk);
  color: var(--color-accent);
  font-size: .82rem;
}
body:has(#decision-entry) .species-name {
  grid-column: 2;
  margin: 0;
  text-align: left;
  line-height: 1.35;
  font-size: var(--text-small);
  color: var(--color-text);
}
body:has(#decision-entry) .species-line {
  grid-column: 2;
  text-align: left;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-text-muted);
}
body:has(#decision-entry) .species-group {
  margin: var(--spacing-md) 0 var(--spacing-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-accent);
}
body:has(#decision-entry) .species-group:first-of-type { margin-top: var(--spacing-sm); }
body:has(#decision-entry) .species-all { margin-top: var(--spacing-sm); }
@media (max-width: 900px) { body:has(#decision-entry) .species-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { body:has(#decision-entry) .species-grid { grid-template-columns: 1fr; } }

/* ---- PHASE 4 · Technical reference → handbook index ----------------------- */
.reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-sm);
}
.reference-card {
  display: block;
  padding: var(--spacing-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.reference-card::before {               /* CSS marker in place of a badge (no badge text may be added) */
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  margin-bottom: var(--spacing-sm);
  background: var(--color-accent);
  border-radius: 1px;
}
.reference-card h3 {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
}
.reference-card:hover { border-color: var(--color-accent); background: var(--color-surface-tint); }
.reference-card:hover h3 { color: var(--color-link); }
@media (max-width: 900px) { .reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .reference-grid { grid-template-columns: 1fr; } }

/* ---- PHASE 5 · Evidence / methodology (Phase 2 Evidence Box at section scale) */
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-md);
  align-items: start;
}
.evidence-grid .sources-section { margin-bottom: 0; height: 100%; }
.evidence-grid .sources-section p:last-of-type { margin-bottom: var(--spacing-sm); }
@media (max-width: 900px) { .evidence-grid { grid-template-columns: 1fr; } }

/* ---- PHASE 6 · Editorial: supporting knowledge, not the product ------------ */
body:has(#decision-entry) #editorial-guides .section-header h2 { font-size: var(--text-body); }
body:has(#decision-entry) #editorial-guides .blog-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--spacing-lg);
}
body:has(#decision-entry) #editorial-guides .blog-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  padding: var(--spacing-md) 0 0;
}
body:has(#decision-entry) #editorial-guides .blog-card-image { display: none; }   /* decorative glyph only */
body:has(#decision-entry) #editorial-guides .blog-card h3 {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--text-body);
  line-height: 1.3;
}
body:has(#decision-entry) #editorial-guides .blog-card p { font-size: var(--text-small); color: var(--color-text-body); }
body:has(#decision-entry) #editorial-guides .blog-meta {
  margin-top: var(--spacing-xs);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
@media (max-width: 900px) { body:has(#decision-entry) #editorial-guides .blog-grid { grid-template-columns: 1fr; gap: var(--spacing-md); } }

/* ============================================================================
   P4-A — AUTHORITY LAYER (homepage)
   ----------------------------------------------------------------------------
   The two knowledge sections (#recommendation-explanation = recommendation logic,
   #evidence-methodology = evidence sources + limitations) are styled as one
   authority block so the trust narrative reads continuously:
       Problem (hero) → Input factors (decision entry) → Logic → Sources → Limits
   Styling only: no sentence is added, changed or removed here. Tokens only.
   ========================================================================== */

body:has(#decision-entry) #recommendation-explanation,
body:has(#decision-entry) #evidence-methodology {
  background: var(--color-surface-tint);
  padding: var(--spacing-xl) 0;
}
body:has(#decision-entry) #recommendation-explanation { padding-bottom: var(--spacing-lg); }
body:has(#decision-entry) #evidence-methodology {
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

/* the two section headings share one label treatment so they read as parts of one block */
body:has(#decision-entry) #recommendation-explanation .section-header h2,
body:has(#decision-entry) #evidence-methodology .section-header h2 {
  letter-spacing: -.01em;
  margin-bottom: var(--spacing-xs);
}
body:has(#decision-entry) #recommendation-explanation .section-header p,
body:has(#decision-entry) #evidence-methodology .section-header p {
  max-width: 68ch;
  color: var(--color-text-body);
}

/* the recommendation-logic cards become reference-style panels, not feature tiles */
body:has(#decision-entry) #recommendation-explanation .features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}
body:has(#decision-entry) #recommendation-explanation .feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  box-shadow: none;
}
body:has(#decision-entry) #recommendation-explanation .feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface-sunk);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  margin-bottom: var(--spacing-sm);
}
body:has(#decision-entry) #recommendation-explanation .feature-title {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-text);
}
body:has(#decision-entry) #recommendation-explanation .feature-text {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--color-text-body);
}
body:has(#decision-entry) #recommendation-explanation .feature-text a { color: var(--color-link); text-underline-offset: 2px; }

/* the comparison table is framed like every other reference table on the site */
body:has(#decision-entry) .comparison-table {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
body:has(#decision-entry) .comparison-table table { margin: 0; }

/* the evidence columns get one rhythm and one label size across the block */
body:has(#decision-entry) #evidence-methodology .evidence-grid { margin-top: var(--spacing-md); }
body:has(#decision-entry) #evidence-methodology .sources-section { padding: var(--spacing-md); }
body:has(#decision-entry) #evidence-methodology .sources-section > h3 { font-size: var(--text-xs); }
body:has(#decision-entry) #evidence-methodology .sources-section a { font-size: var(--text-small); font-weight: 600; }

@media (max-width: 900px) {
  body:has(#decision-entry) #recommendation-explanation .features-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  body:has(#decision-entry) #recommendation-explanation,
  body:has(#decision-entry) #evidence-methodology { padding: var(--spacing-lg) 0; }
}

/* the hero's provenance claim is now a link to the evidence section it refers to
   (colour inherited: the hero is dark and the chip text is already white) */
body:has(#decision-entry) .hero-trust a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
body:has(#decision-entry) .hero-trust a:hover { color: var(--color-surface); }