/* Supracited kit "bloom": the census index as N blooms (SIGNATURE-HEROES-SPEC-V9, addendum v9.1 /census; v9.2
   D-033: a responsive grid). v5 (D-037 reversed) adds the gallery: a .bgy-* layout and switcher at the end.
   Copied by site/build_sig.py */
.sg--bloom .sg-stage{overflow:clip;display:flex;flex-direction:column;row-gap:.6rem;transition:opacity .25s ease}
.sg--bloom .sg-stage.bm-f{opacity:.12}
/* bm-grid: the per-category cells (bm-ft, bm-marks are siblings, not children). A flex-wrap row divides items into
   however many rows result at the current column count; align-content: stretch shares bm-grid's own definite
   height equally across those rows, so a row's height is always a positive fraction of a real total, never the
   near-zero "auto" row the old fixed 4-column grid left for a 5th item. justify-content: center centres a short
   last row. */
.bm-grid{display:flex;flex-wrap:wrap;flex:1 1 auto;min-height:0;justify-content:center;align-content:stretch;
column-gap:1rem;row-gap:1.25rem}
.bm-c{flex:0 0 calc((100% - 2rem)/3);display:flex;flex-direction:column;min-width:0;min-height:0}
.bm-pl{flex:1 1 auto;min-height:0}
.bm-tb{display:flex;flex-direction:column;align-items:center;min-height:4.2rem;text-align:center}
.bm-t{position:relative;z-index:3;font-size:16px;font-weight:600;line-height:1.4;color:var(--sg-ink);text-decoration:none;
border-bottom:1px solid var(--sg-hair)}
.bm-t:hover{color:var(--sg-teal);border-bottom-color:var(--sg-teal)}
.bm-b,.bm-tr{margin:0;font-size:15px;line-height:1.4;color:var(--sg-muted)}
.bm-tr{margin-top:.15rem;color:var(--sg-teal);max-width:17rem}
.bm-ft{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.5rem;padding-top:.6rem;
border-top:1px solid var(--sg-track)}
.bm-lg{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin:0;padding:0;list-style:none;font-size:15px;line-height:1.4;
color:var(--sg-muted)}
.bm-lg li{display:flex;align-items:center;gap:.45rem}
.bm-k{flex:none;box-sizing:border-box;width:9px;height:9px;border-radius:50%}
.bm-k1{background:var(--sg-teal)}
.bm-k2{border:1.5px solid var(--sg-teal-2);background:#fff}
.bm-k0{width:2px;height:12px;border-radius:1px;background:var(--sg-teal-2)}
.bm-wt{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem;margin:0 0 0 auto;font-size:15px;line-height:1.4;
color:var(--sg-muted)}
.bm-wa{position:relative;z-index:3;font-weight:600;color:var(--sg-ink);text-decoration:none;border-bottom:1px solid var(--sg-pale)}
.bm-wa:hover{color:var(--sg-teal);border-bottom-color:var(--sg-teal)}
.bm-ow{display:flex;gap:.3rem}
.bm-r{box-sizing:border-box;width:.9rem;height:.9rem;border:1.25px solid var(--sg-ring);border-radius:50%}
.bm-marks{position:absolute;inset:0;pointer-events:none}
.bm-marks .sg-hs{pointer-events:none}
.bm-l{position:absolute;left:0;top:0;z-index:1;display:grid;justify-items:start;font-size:15px;line-height:1.3;
white-space:nowrap;pointer-events:none;text-shadow:0 0 2px #fff,0 0 4px #fff,0 0 6px #fff;opacity:0;
transform:translate(var(--x,0px),var(--y,0px));transition:opacity .2s}
.bm-l b{font-weight:600;color:var(--sg-ink)}
@media (min-width:64rem){.bm-l{display:flex;gap:.35em}}
.bm-l span{color:var(--sg-muted)}
.bm-on .bm-l.is-on{opacity:1}
/* tablet: two columns, so a 5th category wraps to a 3rd row (bm-grid's own flex-wrap, no extra markup needed) */
@media (max-width:63.99rem){.bm-c{flex-basis:calc((100% - 1rem)/2)}
.bm-tb{min-height:0}.bm-tr{display:none}.bm-ft{gap:.4rem 1rem}.bm-wt{margin-left:0}}
/* phone: one column, every category its own row */
@media (max-width:44.99rem){.bm-c{flex-basis:100%}.bm-grid{row-gap:.85rem}}
/* taller stages so each grid bloom fills its own cell (the kit scales each bloom to its cell). Desktop three then
   two, tablet two columns, phone one; phone's 150rem gives each of five stacked rows room to be close to the
   column width. */
@media (min-width:64rem){.sg--bloom{--sg-h:58rem}}
@media (min-width:45rem) and (max-width:63.99rem){.sg--bloom{--sg-h:66rem}}
@media (max-width:44.99rem){.sg--bloom{--sg-h:150rem}}
@media (scripting:none){.sg--bloom .sg-stage{display:none}}

/* v5 gallery (2026-10-24, D-037 reversed): one featured bloom, scaled to its own box (data-kmax, sig-bloom.v4.js),
   not the grid's shared minimum; the sg--bloom rules above still size the grid the fixture and tests use. */
.bgy-stage-col .sg--bloom .bm-c{flex:1 1 100%;max-width:100%}
/* the under-bloom caption repeated the headline; hidden not removed (sig-bloom.v4.js still reads B.t/B.bs off it) */
.bgy-stage-col .sg--bloom .bm-tb{display:none}
/* .sg-say repeats the headline too; sr-only (site.v61.css's own pattern), not display:none, so a screen reader
   still hears it and go() (sig-bloom.v4.js) keeps writing it on every switch */
.bgy-stage-col .sg--bloom .sg-say{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* a ray near the top of this much bigger bloom can sit close enough to the stage's own top edge that a tall card
   centred on it would rise above the stage's own border (the wall's own fix for the same symptom, WP-A); a little
   padding here, not CLR (sig-bloom.v4.js), since CLR already clears the census link at the bottom */
.bgy-stage-col .sg--bloom .sg-stage{padding-top:3rem}
@media (min-width:64rem){.bgy-stage-col .sg--bloom{--sg-h:41rem}}
@media (max-width:63.99rem){.bgy-stage-col .sg--bloom{--sg-h:36rem}
.bgy-stage-col{margin-inline:calc(-1 * var(--margin));width:calc(100% + 2 * var(--margin))}}
.bgy-row{display:flex;flex-direction:column;gap:2rem}
.bgy-text-col{display:flex;flex-direction:column;gap:.75rem;min-width:0}
@media (min-width:64rem){.bgy-row{flex-direction:row;align-items:center;gap:3rem}
.bgy-stage-col{flex:1 1 58%;min-width:0}.bgy-text-col{flex:1 1 42%}}
.bgy-eyebrow{margin:0;font-size:15px;font-weight:600;color:var(--sg-teal)}
.bgy-h1{margin:0;font-size:clamp(2.25rem,1.6rem + 2.2vw,3.25rem);line-height:1.1;color:var(--sg-ink)}
.bgy-pct{font-weight:700}
.bgy-lead{display:block;font-size:1.4rem;font-weight:600;color:var(--sg-muted)}
.bgy-h2{margin:0;font-size:19px;line-height:1.4;color:var(--sg-muted)}
.bgy-base{margin:0;font-size:15px;line-height:1.4;color:var(--sg-muted)}
.bgy-open{display:inline-flex;align-items:center;gap:.4rem;margin-top:.25rem;font-size:16px;font-weight:600;
color:var(--sg-teal);text-decoration:none;border-bottom:1px solid var(--sg-teal)}
.bgy-open:hover{color:var(--sg-teal-2);border-bottom-color:var(--sg-teal-2)}
/* the switcher: role=tablist, five real mini blooms (SVG, no script) as its tabs */
.bgy-switcher{display:flex;gap:.75rem;margin-bottom:1.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bgy-thumb{flex:none;display:flex;flex-direction:column;align-items:center;gap:.4rem;min-width:44px;min-height:44px;
padding:.5rem;border:1px solid transparent;border-radius:12px;background:none;cursor:pointer}
.bgy-thumb[aria-selected="true"]{background:var(--sg-tray);border-color:var(--sg-hair)}
.bgy-thumb:hover{background:var(--sg-tray)}
.bgy-thumb:focus-visible{outline:2px solid var(--sg-teal);outline-offset:2px}
.bgy-thumb-svg{width:120px;height:120px;display:block}
/* a short label (GALLERY_THUMB_LABEL, build_census.py); no max-width tying it to the SVG's own size, which is
   what wrapped "Moisturizers for dry skin" across three lines */
.bgy-thumb-name{margin:0;font-size:15px;line-height:1.3;color:var(--sg-muted);text-align:center;white-space:nowrap}
.bgy-thumb[aria-selected="true"] .bgy-thumb-name{color:var(--sg-ink);font-weight:600}
.bt-hub{fill:#fff;stroke:var(--sg-pale);stroke-width:1}
.bt-0{fill:var(--sg-teal)}
.bt-1{fill:var(--sg-teal-2)}
.bt-2{fill:#fff;stroke:var(--sg-teal-2);stroke-width:1.1}
.bt-3{fill:var(--sg-pale)}
@media (max-width:44.99rem){.bgy-thumb-svg{width:72px;height:72px}}