/* ══════════════════════════════════════════════════════════════════════════ sections.css — the Vitalité section shell. -------------------------------------------------------------------------- One skin (gold/blue), three section-INTERFACES — the same role-split idea as the investor/entrepreneur surfaces: 🩺 Infirmary · 📚 Knowledge · 💬 Social This file styles the shared chrome the split needs: · the section switcher pills (every page header, incl. admin.html) · the infirmary dashboard strip (recovery status cards) · hub polish on the landing doors Sidebar SCOPING is done by sections.js with inline styles, so the no-JS fallback is the current single-rail behaviour. Everything here is decoration on top of each page's own theme variables. ══════════════════════════════════════════════════════════════════════════ */ /* ── Section switcher — three pills in every header ── */ .sec-switcher{ /* HARDENED: the pills are a single horizontal row, always. Older themes and stale cached stylesheets styled this as a column/block, which stacked the three pills over the account chip. flex-direction:row + nowrap + width:max-content make a stacked render impossible even if a stale .sec-switcher rule from an old sections.css is still applied. */ display:flex;flex-direction:row;align-items:center;gap:2px; width:max-content;max-width:none; margin-left:.25rem; background:var(--surface2); border:1px solid var(--border); border-radius:99px;padding:2px; /* Never shrink or stretch: the pills must stay fully visible with every element to their left pushed over, not squeezed off the bar. The base themes' generic `nav` rules would otherwise stretch this box and blow the header height (a 48px-tall switcher wrapping a ~27px pill row). */ flex:0 0 auto; align-self:center; line-height:1.2; } /* Generic nav rules in the origin themes paint their own backdrop on any