/* ==========================================================================
   MedSys — theme fixes
   Loaded AFTER the migrated legacy stylesheets.

   ONE POLICY, stated once, applied everywhere:

     No text is ever set light-on-colour. Panels share a single content
     background and earn emphasis from a border or an accent heading. Badges use
     a pale accent tint with accent-coloured text, never a saturated fill with
     white text on it.

   That rule exists because the alternative kept failing. A filled panel needs
   its fill to stay dark in BOTH themes and its text to stay light in BOTH
   themes, and every accent token here legitimately flips lightness between
   themes. Two separate fixes to the same component collided in an earlier pass
   and shipped a dark panel with dark body text in light mode. Outlines cannot
   fail that way.

   This file is REWRITTEN as a whole, never appended to. Appending is what
   produced the collision.
   ========================================================================== */

/* ---- 1. Page background (the original painted a teal radial haze) ---- */
body{
  background:var(--paper) !important;
  background-image:none !important;
  color:var(--ink);
  font-family:var(--f-read);
  font-size:17px;
  line-height:1.7;
}

/* ---- 2. Every panel: one background, borders for emphasis ---- */
.foundation-callout,.ie-synthesis,.portion-tool,.cgm-compare,.cgm-rh-callout,
.marker-group-header,.tests-tier.t1,.tests-tier.t2,.sugar-ref-card,
.envload-panel,.doctor-callout,#doctors{
  background:var(--surface) !important;
  background-image:none !important;
  color:var(--ink) !important;
  box-shadow:none !important;
}
.foundation-callout *,.ie-synthesis *,.portion-tool *,.cgm-compare *,
.cgm-rh-callout *,.marker-group-header *,.sugar-ref-card *{color:inherit !important}

.foundation-callout strong,.ie-synthesis strong,.portion-tool strong,
.sugar-ref-card strong,.cgm-compare strong{color:var(--ink) !important}
.foundation-callout a,.ie-synthesis a,.portion-tool a,.cgm-compare a,
.cgm-rh-callout a{color:var(--ultra) !important}
.foundation-callout h3 em{color:var(--ultra) !important;font-style:normal !important}
.foundation-callout p,.portion-tool p,.ie-synthesis p{color:var(--ink-2) !important}

/* The accent survives as a left border — a signal that cannot invert. */
.foundation-callout,.portion-tool,.ie-synthesis{
  border:1px solid var(--line) !important;
  border-left:4px solid var(--ultra) !important;
  border-radius:0 !important;
}
.tests-tier.t1{border-left-color:var(--seg-hi) !important}
.tests-tier.t2{border-left-color:var(--seg-mid) !important}

.foundation-eyebrow,.doctor-eyebrow,.ie-eyebrow{
  background:var(--ultra-pale) !important;
  color:var(--ultra) !important;
  border:1px solid var(--ultra-line) !important;
}

/* Nested cards step down one surface, never up to white. */
.foundation-pillar,.portion-tool .portion-cell,.ie-card{
  background:var(--surface-2) !important;
  border:1px solid var(--line) !important;
}
.foundation-pillar{border-radius:var(--r) !important}
.foundation-pillar p{color:var(--ink-3) !important}
.foundation-pillar .fp-num,.portion-tool .pt-sub,
.portion-tool .slider-row label{color:var(--ink-3) !important}
.foundation-callout > a[style]{
  background:var(--ultra-pale) !important;
  border:1px solid var(--ultra-line) !important;
  color:var(--ink-2) !important;
}
.foundation-callout > a[style] strong{color:var(--ink) !important}

/* The portion slider sat on a dark fill and needs a visible track now. */
.portion-tool input[type=range]{background:var(--line-2) !important}
.portion-tool .age-chip{background:var(--surface-2) !important;
  border:1px solid var(--line) !important;color:var(--ink-2) !important}
.portion-tool .age-chip.active{background:var(--ultra-pale) !important;
  border-color:var(--ultra) !important;color:var(--ultra) !important}

/* ---- 3. Badges and numbered markers: pale tint, accent text ---- */
.section-num,.section-num-coral,.section-num-sage,.section-num-amber,
.section-num-plum,.section-num-ultra,.section-num.coral,.section-num.sage,
.section-num.amber,.section-num.plum,.doctor-phase-num,.proj-scenario-num,
.tech-num,.cac-action-num,.tests-tier-num{
  background:var(--ultra-pale) !important;
  color:var(--ultra) !important;
  border:1px solid var(--ultra-line) !important;
  border-radius:var(--r-sm) !important;
  box-shadow:none !important;
}
.rx-pom-tag,.essential-tag,.essential-tag.once,.essential-tag.private{
  background:var(--surface-2) !important;color:var(--ink-2) !important;
  border:1px solid var(--line) !important;
}
.irc-band-badge.band-optimal,.envload-grade.strong-ev{
  background:var(--ok-bg) !important;color:var(--ok) !important;
  border:1px solid var(--ok) !important}
.irc-band-badge.band-veryhigh{background:var(--hi-bg) !important;color:var(--hi) !important;
  border:1px solid var(--hi) !important}
.envload-grade.emerging{background:var(--mid-bg) !important;color:var(--mid) !important;
  border:1px solid var(--mid) !important}
.envload-grade.balance{background:var(--ultra-pale) !important;color:var(--ultra) !important;
  border:1px solid var(--ultra-line) !important}
/* Moderate sits between Strong and Emerging, so it borrows the neutral surface
   rather than a colour of its own — a fourth hue on this row would compete with
   the three that already carry meaning. */
.envload-grade.moderate{background:var(--surface-2) !important;color:var(--ink-2) !important;
  border:1px solid var(--line-2) !important}

/* Buttons may be filled, because the label colour comes from a token that flips
   with the theme rather than a hardcoded white. */
.action-btn,.shop-link,.fbtn.active,.nav-print,.seg-btn.active:not(.seg-cards .seg-btn){
  background:var(--ultra) !important;color:var(--surface) !important;
  border:1px solid var(--ultra) !important;text-shadow:none !important;
}
[data-theme="dark"] .action-btn,[data-theme="dark"] .shop-link,
[data-theme="dark"] .fbtn.active,[data-theme="dark"] .nav-print{color:var(--paper) !important}
.ftable thead th{background:var(--surface-3) !important;color:var(--ink) !important}

/* ---- 4. Inline styles the migration inherited (112 of them) ---- */
[style*="#ffe6b8"],[style*="#ffe0d8"],[style*="#ffce6b"]{color:var(--ultra) !important}
[style*="color:#fff"],[style*="color: #fff"]{color:var(--ink) !important}

/* ---- 5. Stale section numbering and duplicated headings ---- */
.topic-body .section-num{display:none !important}
.topic-body .section-head{padding-left:0 !important}
.topic-body.single-section > section:first-of-type > .section-head{display:none !important}
.topic-body .section-head-text{margin-left:0 !important}

/* ---- 6. Dark mode: tables and form controls ---- */
[data-theme="dark"] table{background:var(--surface)}
[data-theme="dark"] th{background:var(--surface-3);color:var(--ink)}
[data-theme="dark"] td,[data-theme="dark"] th{border-color:var(--line)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
  background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
[data-theme="dark"] input::placeholder{color:var(--ink-4)}

/* ---- 7. Layout: legacy content sits inside the shell's column ---- */
.topic-body section{padding-top:34px;padding-bottom:10px}
.topic-body .container{max-width:1170px}
.topic-body > .container > section{padding:30px 0}
.adv-static .adv-collapse-header{cursor:default}
.adv-static .adv-collapse-header:hover{background:none}

/* ---- 8. Card grids: real gaps, so an incomplete row leaves space, not grey ---- */
.context-grid,.env-grid,.supp-grid,.nut-grid,.tech-grid{
  background:none !important;border:0 !important;
}

/* ---- 9. Grid columns, and the orphan rule ----
   Real card counts: context-grid 2, foundation-pillars 4, tech-grid 4,
   envload-grid 16, supp-grid variable (the engine fills it at runtime).

   Auto-fit columns break rows wherever the viewport lands, which is how four
   cards became three-plus-one. Fixed counts, plus one general rule: a final card
   left alone on its row stretches to fill it. That guarantees no ragged row at
   any count, so nobody has to remember to re-check the maths after adding one. */
.foundation-pillars{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:14px !important}
.context-grid,.env-grid,.envload-grid,.tech-grid{
  display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:16px !important}
.supp-grid{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:16px !important}

/* The orphan rule, for every two-column grid on the site. */
.context-grid > :last-child:nth-child(odd),
.env-grid > :last-child:nth-child(odd),
.envload-grid > :last-child:nth-child(odd),
.tech-grid > :last-child:nth-child(odd),
.supp-grid > :last-child:nth-child(odd),
.gh-grid > :last-child:nth-child(odd),
.ess-ask > :last-child:nth-child(odd),
.a-grid > :last-child:nth-child(odd){grid-column:1 / -1}

/* Four-column: a trailing one, two or three cards spread across the space. */
.foundation-pillars > :last-child:nth-child(4n+1){grid-column:span 4}
.foundation-pillars > :last-child:nth-child(4n+2){grid-column:span 3}
.foundation-pillars > :last-child:nth-child(4n+3){grid-column:span 2}

@media (max-width:1080px){.foundation-pillars{grid-template-columns:repeat(2,1fr) !important}
  .foundation-pillars > :last-child:nth-child(odd){grid-column:1 / -1}}
@media (max-width:820px){.foundation-pillars,.context-grid,.env-grid,.envload-grid,
  .supp-grid,.tech-grid{grid-template-columns:1fr !important}}

/* ---- 10. The third supplement tier ---- */
.tier-optional{border-top-color:var(--line-2) !important;background:var(--surface) !important}