/* provider_reviews/_members_charts.antlers.html — moved out of the template on 2026-10-21 (owner: "move inline css and js to cached files"); edit here, the template loads it with {{ zz_asset:css }} */
    /* members band: ruled rows between 1.5px ink rules, cells divided by a hairline; this row holds the six-month
       trend, women / men, the age columns. Phones stack the cells. */
    .mb-band{margin-top:22px;border-top:1.5px solid #2b2620}
    .mb-band .mb-row{display:flex;align-items:stretch;border-bottom:1.5px solid #2b2620}
    .mb-band .mb-cell{flex:1 1 0;min-width:0;padding:18px;display:flex;flex-direction:column;justify-content:flex-end}
    .mb-band .mb-cell:first-child{padding-left:0}
    .mb-band .mb-cell:last-child{padding-right:0}
    .mb-band .mb-cell + .mb-cell{border-left:1.5px solid #2b2620}
    .mb-band .mb-cap{font:700 14px/1.4 'Libre Franklin';color:#2b2620;margin-top:10px}
    .mb-band .mb-trend{display:flex;align-items:flex-end;gap:6px;height:96px}
    .mb-band .mb-tb{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;cursor:default}
    .mb-band .mb-tb .v{font:500 14px 'IBM Plex Mono',monospace;white-space:nowrap;margin-bottom:4px;color:#2b2620;opacity:0;transform:translateY(4px)}
    .mb-band .mb-tb:first-child .v,.mb-band .mb-tb.last .v{opacity:1;transform:none}
    .mb-band .mb-tb.last .v{color:#a33d2e}
    .mb-band .mb-tb .b{display:block;width:100%;background:#c9bda4;border-radius:3px 3px 0 0}
    .mb-band .mb-tb.last .b{background:#a33d2e}
    .mb-band .mb-tb:hover .b{background:#7c2d18}
    .mb-band .mb-months{display:flex;gap:6px;margin-top:6px}
    .mb-band .mb-months span{flex:1 1 0;min-width:0;text-align:center;font:500 12px 'Libre Franklin';color:#6d6455;white-space:nowrap;overflow:hidden}
    .mb-band .mb-gn{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font:500 26px/1 'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
    .mb-band .mb-gn .f{color:#a33d2e}
    .mb-band .mb-gn .c{color:#8a7f6d;font-size:18px}
    .mb-band .mb-gbar{display:flex;height:12px;border-radius:999px;overflow:hidden;margin-top:10px}
    .mb-band .mb-gbar .f{background:#a33d2e}
    .mb-band .mb-gbar .m{background:#2b2620}
    .mb-band .mb-gbar .c{background:#8a7f6d}
    .mb-band .mb-gl{display:flex;justify-content:space-between;gap:8px;font:500 12px 'Libre Franklin';color:#6d6455;margin-top:6px}
    .mb-band .mb-ages{display:flex;gap:3px;align-items:flex-end}
    .mb-band .mb-ac{flex:1 1 0;min-width:0;text-align:center}
    .mb-band .mb-ac .v{font:500 14px 'IBM Plex Mono',monospace;color:#2b2620;white-space:nowrap;margin-bottom:4px;font-variant-numeric:tabular-nums}
    .mb-band .mb-ac .b{display:block;background:#c9bda4;border-radius:3px 3px 0 0}
    .mb-band .mb-ac.top .v{color:#a33d2e}
    .mb-band .mb-ac.top .b{background:#a33d2e}
    .mb-band .mb-ac .l{font:500 12px 'Libre Franklin';color:#6d6455;margin-top:6px;white-space:nowrap}
    /* band charts: (a) hover — the bar under the pointer lifts a little, its value brightens and the neighbours dim; a
       gender segment under the pointer scales its own percentage up (owner 2026-10-05 "chart animations on hover making
       it fun to interact with"); fine pointers only, 180 ms ease, transform / opacity only. (b) one-shot grow-in when the
       band scrolls into view (owner 2026-10-05 "nice animation effects", built to emilkowalski/skills `animate`: strong
       ease-out, 50 ms stagger, fired once). The script sets `.mb-anim` (so nothing is hidden without JS), `.in` plays
       the reveal and `.done` 1.2 s later hands the elements back to the fast hover transitions. */
    .mb-band .mb-tb .b,.mb-band .mb-ac .b{transform-origin:50% 100%;transition:transform .18s ease,opacity .18s ease,background-color .18s ease}
    .mb-band .mb-tb .v,.mb-band .mb-ac .v{transform-origin:50% 100%;transition:transform .18s ease,opacity .18s ease,color .18s ease}
    .mb-band .mb-gbar span{transition:opacity .18s ease}
    .mb-band .mb-gn span{transition:transform .18s ease,opacity .18s ease;transform-origin:0 100%}
    .mb-band .mb-gn .m{transform-origin:100% 100%}
    .mb-band .mb-gn .c{transform-origin:50% 100%}
    @media(hover:hover) and (pointer:fine){
        .mb-band .mb-tb:hover .v{opacity:1;transform:none}
        .mb-band .mb-tb:hover .b,.mb-band .mb-ac:hover .b{transform:scaleY(1.07)}
        .mb-band .mb-trend:hover .mb-tb:not(:hover) .b,.mb-band .mb-trend:hover .mb-tb:not(:hover) .v,
        .mb-band .mb-ages:hover .mb-ac:not(:hover) .b,.mb-band .mb-ages:hover .mb-ac:not(:hover) .v{opacity:.4}
        .mb-band .mb-ac:hover .v{transform:scale(1.18);color:#a33d2e}
        .mb-band .mb-ac:hover .b{background:#a33d2e}
        .mb-band .mb-gbar:hover span:not(:hover){opacity:.35}
        .mb-band .mb-cell:has(.mb-gbar .f:hover) .mb-gn .f,.mb-band .mb-cell:has(.mb-gbar .m:hover) .mb-gn .m,.mb-band .mb-cell:has(.mb-gbar .c:hover) .mb-gn .c{transform:scale(1.14)}
        .mb-band .mb-cell:has(.mb-gbar span:hover) .mb-gn span{opacity:.4}
        .mb-band .mb-cell:has(.mb-gbar .f:hover) .mb-gn .f,.mb-band .mb-cell:has(.mb-gbar .m:hover) .mb-gn .m,.mb-band .mb-cell:has(.mb-gbar .c:hover) .mb-gn .c{opacity:1}
    }
    .mb-band.mb-anim:not(.done) .mb-tb .b,.mb-band.mb-anim:not(.done) .mb-ac .b{transition:transform .5s cubic-bezier(.23,1,.32,1)}
    .mb-band.mb-anim:not(.done) .mb-tb .v,.mb-band.mb-anim:not(.done) .mb-ac .v,.mb-band.mb-anim:not(.done) .mb-gn span{transition:opacity .3s cubic-bezier(.23,1,.32,1) .25s,transform .3s cubic-bezier(.23,1,.32,1) .25s}
    .mb-band.mb-anim:not(.done) .mb-gbar{transition:clip-path .6s cubic-bezier(.77,0,.175,1)}
    .mb-band.mb-anim:not(.in) .mb-tb .b,.mb-band.mb-anim:not(.in) .mb-ac .b{transform:scaleY(0)}
    .mb-band.mb-anim:not(.in) .mb-tb .v,.mb-band.mb-anim:not(.in) .mb-ac .v,.mb-band.mb-anim:not(.in) .mb-gn span{opacity:0}
    .mb-band.mb-anim:not(.in) .mb-gbar{clip-path:inset(0 100% 0 0)}
    .mb-band.mb-anim:not(.done) .mb-tb:nth-child(2) .b,.mb-band.mb-anim:not(.done) .mb-ac:nth-child(2) .b{transition-delay:.05s}
    .mb-band.mb-anim:not(.done) .mb-tb:nth-child(3) .b,.mb-band.mb-anim:not(.done) .mb-ac:nth-child(3) .b{transition-delay:.1s}
    .mb-band.mb-anim:not(.done) .mb-tb:nth-child(4) .b,.mb-band.mb-anim:not(.done) .mb-ac:nth-child(4) .b{transition-delay:.15s}
    .mb-band.mb-anim:not(.done) .mb-tb:nth-child(5) .b,.mb-band.mb-anim:not(.done) .mb-ac:nth-child(5) .b{transition-delay:.2s}
    .mb-band.mb-anim:not(.done) .mb-tb:nth-child(6) .b{transition-delay:.25s}
    .mb-band.mb-anim:not(.done) .mb-gn span{transition-delay:.45s}
    @media(prefers-reduced-motion:reduce){.mb-band *{transition:none!important;animation:none!important}}
    @media(max-width:620px){
        .mb-band .mb-row{flex-direction:column}
        .mb-band .mb-cell,.mb-band .mb-cell:first-child,.mb-band .mb-cell:last-child{padding:16px 0}
        .mb-band .mb-cell + .mb-cell{border-left:0;border-top:1px solid #d8cdb6}
        .mb-band .mb-ac .v{font-size:12.5px}
    }