/* ============================================================
   COMPONENT LAYER - probiotics.info
   Ported from probiotics-redesign.html. Tokens only: no raw hex,
   no raw px font size, no magic-number margin (Phase 5 greps).

   The demo tab-switcher chrome (.demobar/.screen) is deliberately
   NOT ported - it exists only in the reference document.

   THE ONE BOLD ELEMENT is .verdict. Everything else stays
   hairlines and tabular numbers. Do not add a second heavy
   element: no card shadows, no gradients, no coloured section
   backgrounds.
   ============================================================ */

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--t-base)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;margin:0}
h1{font-size:var(--t-3xl);line-height:1.15}
h2{font-size:var(--t-xl);line-height:1.25}
h3{font-size:var(--t-md);line-height:1.3}
p{margin:0 0 var(--s2)}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-wash)}
a:hover{border-bottom-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s3)}
.prose{max-width:var(--measure)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-muted)}
.small{font-size:var(--t-sm)}


/* --- site header --- */
.masthead{border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:baseline;gap:var(--s4);padding-top:var(--s2);padding-bottom:var(--s2)}
.logo{font-family:var(--serif);font-size:var(--t-lg);font-weight:600;color:var(--ink);border:0}
.nav{display:flex;gap:var(--s3);font-size:var(--t-sm);margin-left:auto}
.nav a{color:var(--ink-muted);border:0;padding-bottom:2px}
.nav a[aria-current]{color:var(--ink);border-bottom:2px solid var(--accent)}

/* --- breadcrumb + page head --- */
.crumbs{font-size:var(--t-xs);color:var(--ink-muted);padding-top:var(--s3)}
.crumbs a{color:var(--ink-muted);border:0;text-decoration:underline;text-decoration-color:var(--rule)}
.pagehead{padding:var(--s2) 0 var(--s3);border-bottom:1px solid var(--rule)}
.kicker{font-size:var(--t-sm);color:var(--ink-muted);margin-bottom:var(--s1)}
.standfirst{font-size:var(--t-md);color:var(--ink-muted);max-width:var(--measure);margin-top:var(--s2)}

/* --- two-column article layout --- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--s6);padding:var(--s4) 0 var(--s6)}
.rail{font-size:var(--t-sm)}
.rail-inner{position:sticky;top:var(--s4)}
.rail h3{font-family:var(--sans);font-size:var(--t-xs);font-weight:600;color:var(--ink-muted);margin-bottom:var(--s1)}
.rail ol{list-style:none;margin:0 0 var(--s3);padding:0;border-left:1px solid var(--rule)}
.rail li a{display:block;padding:.3rem 0 .3rem var(--s2);color:var(--ink-muted);border:0}
.rail li a:hover{color:var(--ink)}
.rail li[data-here] a{color:var(--ink);box-shadow:-1px 0 0 var(--accent)}
.railfact{border-top:1px solid var(--rule);padding-top:var(--s2);color:var(--ink-muted);font-size:var(--t-xs)}
.railfact b{display:block;font-size:var(--t-lg);font-family:var(--serif);color:var(--ink)}

/* ============================================================
   THE ONE BOLD ELEMENT: the certainty verdict block.
   Everything else on the page stays quiet.
   ============================================================ */
.verdict{border:1px solid var(--ink);border-radius:var(--radius);overflow:hidden;margin-bottom:var(--s4)}
.verdict-body{padding:var(--s3)}
.verdict-body p{font-family:var(--serif);font-size:var(--t-lg);line-height:1.45;margin:0}
.verdict-scale{display:flex;border-top:1px solid var(--rule);font-size:var(--t-xs)}
.verdict-scale div{flex:1;padding:.55rem var(--s2);color:var(--ink-muted);border-right:1px solid var(--rule);
  display:flex;align-items:center;gap:.4rem}
.verdict-scale div:last-child{border-right:0}
.verdict-scale div[data-on]{background:var(--surface);color:var(--ink);font-weight:600}
.dot{width:9px;height:9px;border-radius:50%;background:var(--rule);flex:none}
.verdict-scale div[data-on] .dot{background:var(--cur)}
.verdict-note{padding:.55rem var(--s3);border-top:1px solid var(--rule);font-size:var(--t-xs);color:var(--ink-muted)}

/* --- article sections --- */
section{padding-top:var(--s4);scroll-margin-top:var(--s4)}
section > h2{padding-bottom:var(--s1);border-bottom:1px solid var(--rule);margin-bottom:var(--s2)}
.strain{border-bottom:1px solid var(--rule);padding:var(--s2) 0}
.strain h3{font-family:var(--sans);font-size:var(--t-base);font-weight:600}
.strain h3 em{font-style:italic;font-weight:400}
.strain p{margin:.35rem 0 0;color:var(--ink-muted);font-size:var(--t-sm)}
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{padding:.45rem 0;border-bottom:1px solid var(--rule)}

/* --- tables --- */
table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
th{text-align:left;font-weight:600;color:var(--ink-muted);font-size:var(--t-xs);
  padding:.5rem .75rem .5rem 0;border-bottom:1px solid var(--ink)}
td{padding:.7rem .75rem .7rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
td:last-child,th:last-child{padding-right:0;text-align:right}
tbody tr:hover{background:var(--surface)}
.chip{display:inline-block;font-size:var(--t-xs);padding:.1rem .45rem;border:1px solid var(--rule);
  border-radius:var(--radius);color:var(--ink-muted);white-space:nowrap}
.rank{color:var(--ink-muted);font-variant-numeric:tabular-nums}

/* --- stat strip --- */
.stats{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rule);border-radius:var(--radius);margin:var(--s2) 0 var(--s3)}
.stats div{flex:1 1 120px;padding:var(--s2);border-right:1px solid var(--rule)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-family:var(--serif);font-size:var(--t-xl);line-height:1;font-variant-numeric:tabular-nums}
.stats span{font-size:var(--t-xs);color:var(--ink-muted)}

/* --- search / filter bar --- */
.filters{display:flex;gap:var(--s1);flex-wrap:wrap;margin:var(--s3) 0}
.filters input,.filters select{font:var(--t-sm)/1.4 var(--sans);padding:.55rem .7rem;border:1px solid var(--rule);
  border-radius:var(--radius);background:var(--paper);color:var(--ink)}
.filters input{flex:1 1 320px}
.btn{font:var(--t-sm)/1.4 var(--sans);font-weight:600;padding:.55rem 1rem;border:1px solid var(--accent);
  border-radius:var(--radius);background:var(--accent);color:var(--paper);cursor:pointer}
.btn-quiet{background:var(--paper);color:var(--accent)}

/* --- commercial block, deliberately subordinate --- */
.commerce{border-top:1px solid var(--rule);margin-top:var(--s5);padding-top:var(--s3)}
.commerce h2{font-family:var(--sans);font-size:var(--t-base);font-weight:600;border:0;padding:0}
.commerce > p{font-size:var(--t-sm);color:var(--ink-muted);max-width:var(--measure)}
.commerce td:first-child{width:44px}
.commerce img{width:44px;height:44px;object-fit:contain;background:var(--surface);border-radius:var(--radius)}

/* --- footer --- */
footer{border-top:1px solid var(--rule);margin-top:var(--s6);padding:var(--s4) 0;font-size:var(--t-sm);color:var(--ink-muted)}
footer nav{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s2)}
footer a{color:var(--ink-muted);border:0;text-decoration:underline;text-decoration-color:var(--rule)}

@media (max-width:900px){
  .cols{grid-template-columns:1fr;gap:var(--s3)}
  .rail{order:-1}.rail-inner{position:static}
  .rail ol{display:flex;flex-wrap:wrap;border-left:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .rail li a{padding:.5rem var(--s2) .5rem 0}
  h1{font-size:var(--t-2xl)}
  .verdict-scale{flex-wrap:wrap}.verdict-scale div{flex:1 1 50%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ------------------------------------------------------------
   Plugin-markup bridges.
   report.php cannot emit <section> (its wrappers close with a
   generic </div>), so these carry the reference's section rules
   onto the div it does emit. Same visual result, no fragile
   tag-matching in a 1,300-line PHP string builder.
   ------------------------------------------------------------ */
.pbx-article{min-width:0}
.pbx-section{padding-top:var(--s4);scroll-margin-top:var(--s4)}
.pbx-section > h2{padding-bottom:var(--s1);border-bottom:1px solid var(--rule);
  margin-bottom:var(--s2)}
.pbx-section:first-child{padding-top:0}

/* The verdict carries its own border, so it must not also inherit
   section padding when it leads the article. */
.verdict{margin-top:0}

/* ------------------------------------------------------------
   Theme bridge.

   Kadence prints an inline <style> AFTER our stylesheet containing

       h1,h2,h3,h4,h5,h6 { font-family: var(--global-heading-font-family) }
       body              { font-family: var(--global-body-font-family) }

   Being later in the document, those win at equal specificity - and
   --global-heading-font-family ships EMPTY, so headings silently fell
   back to the system stack and none of the reference typography
   applied.

   Repointing Kadence's own variables at our tokens is the fix that
   does not need an arms race: its rules stay, and they now resolve to
   the right faces everywhere, including markup we never touch.
   The doubled :root:root raises specificity above Kadence's :root so
   the definition survives the later inline block.
   ------------------------------------------------------------ */
:root:root{
  --global-body-font-family:var(--sans);
  --global-heading-font-family:var(--serif);
  --global-content-width:var(--wrap);
}

/* ------------------------------------------------------------
   Alignment reset for redesigned templates.

   The Customizer's "Additional CSS" (43KB, 447 !important rules -
   see customizer-additional-css.backup.css) sets

       .probiotic-result-card { text-align:center }

   which every redesigned template inherits, centring body copy the
   reference sets ragged-right. A direct rule always beats an
   inherited value regardless of the ancestor's specificity, so
   claiming alignment on our own layout roots fixes the whole
   subtree without touching that patch layer - which still has to
   keep the not-yet-migrated templates alive.

   Retire this block when the Customizer CSS is retired.
   ------------------------------------------------------------ */
.cols,
.pbx-article,
.pbx-section,
.verdict{text-align:left}
.probiotic-single-report h1{text-align:left}

/* ------------------------------------------------------------
   Condition page bridges.
   ------------------------------------------------------------ */

/* "Source year: 2026" wrapped onto two lines because the label and
   value are separate text nodes in a narrow inline box. Keeping the
   pair together is the whole fix - the markup is already correct. */
.condition-mesh-year{white-space:nowrap}

/* Same inherited-centring problem as the analysis template. */
.condition-page,
.condition-page section,
.condition-page .condition-header-main{text-align:left}

/* ------------------------------------------------------------
   Wide content must scroll inside its own box, never widen the page.
   The sources table needs ~450px for four columns; at 390px it was
   being clipped rather than scrolled, so the PMID column was simply
   unreachable on a phone.
   ------------------------------------------------------------ */
.sources,
.pbx-section > table,
.condition-page table{max-width:100%;overflow-x:auto}
.sources-table{min-width:32rem}