/* Who reads this site: slim banner. A live dot, one proportion strip with a segment per category, and a legend
   listing every category. Desktop: one row. Mobile: dot/title/strip/link, then the full legend wrapped below. */
.readers-banner{--rb-human:var(--ink-2,#464B55);--rb-verified:var(--independent,#0F766E);--rb-declared:var(--company,#475569);--rb-other:var(--rule,#E2DED5);--rb-amber:var(--accent,#935f10);--rb-neutral:#8A8F98;
 display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:36px;padding:4px 16px;background:var(--surface,#fff);border-bottom:1px solid var(--rule,#E2DED5);
 font:400 var(--fs-meta,13px)/1.3 var(--font-meta,'IBM Plex Mono',monospace);color:var(--ink-2,#464B55);box-sizing:border-box;overflow:hidden}
.readers-banner .rb-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--rb-amber);animation:rb-breathe 2.8s ease-in-out infinite}
.readers-banner .rb-title{flex:none;color:var(--ink,#16181D);font-weight:600}
.readers-banner .rb-strip{flex:none;display:flex;gap:1px;width:112px;height:8px;border-radius:4px;overflow:hidden;background:var(--rb-other)}
.readers-banner .rb-strip i{display:block;height:100%;width:0;flex:none;transition:width 1.2s cubic-bezier(.2,.7,.2,1),opacity .35s ease,transform .35s ease;transform-origin:center}
.readers-banner .rb-op{background:var(--c,var(--rb-neutral))}
.readers-banner .rb-op.rb-hatch{background:repeating-linear-gradient(135deg,var(--c,var(--rb-neutral)) 0 3px,color-mix(in srgb,var(--c,var(--rb-neutral)) 40%,#fff) 3px 5px)}
.readers-banner .rb-h{background:var(--rb-human)}.readers-banner .rb-v{background:var(--rb-verified)}
.readers-banner .rb-d{background:repeating-linear-gradient(135deg,var(--rb-declared) 0 3px,transparent 3px 5px),color-mix(in srgb,var(--rb-declared) 35%,transparent)}
.readers-banner .rb-o{background:color-mix(in srgb,var(--rb-human) 22%,var(--rb-other))}
.readers-banner[data-state="collecting"] .rb-strip{background:linear-gradient(90deg,var(--rb-other) 0%,color-mix(in srgb,var(--rb-human) 25%,var(--rb-other)) 50%,var(--rb-other) 100%);background-size:200% 100%;animation:rb-shimmer 3.2s ease-in-out infinite}
.readers-banner .rb-caption{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .45s ease}
.readers-banner .rb-caption.rb-fade{opacity:0}
.readers-banner[data-state="estimate"] .rb-caption{display:none}
.readers-banner .rb-legend{display:none;flex:1;min-width:0;margin:0;padding:0;list-style:none;align-items:center;flex-wrap:wrap;gap:2px 10px}
.readers-banner[data-state="estimate"] .rb-legend{display:flex}
.readers-banner .rb-legend ul,.readers-banner .rb-group{display:contents} /* one flat wrapping row of categories */
.readers-banner .rb-glabel{color:var(--ink,#16181D)}
.readers-banner .rb-item{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;cursor:default;border-radius:3px;transition:color .3s ease,opacity .3s ease;outline-offset:2px}
.readers-banner .rb-sw{display:inline-block;width:9px;height:9px;border-radius:2px;flex:none}
.readers-banner .rb-pct{font-weight:600;color:var(--ink,#16181D);font-variant-numeric:tabular-nums}
.readers-banner .rb-mark{text-decoration:none;color:var(--ink-2,#464B55);font-weight:600;margin-left:-2px}
.readers-banner .rb-key{color:var(--ink-3,#6B7280);font-size:11px;white-space:nowrap}
@media(min-width:601px){.readers-banner .rb-key{display:none}} /* desktop: marks carry tooltips; "How we count" explains */
/* Live highlight: one category at a time; the rest of the strip and legend dim slightly. */
.readers-banner.rb-focus .rb-strip i:not(.rb-on){opacity:.55}
.readers-banner.rb-focus .rb-strip i.rb-on{transform:scaleY(1.35)}
.readers-banner.rb-focus .rb-item:not(.rb-on){opacity:.75}
.readers-banner .rb-item.rb-on{color:var(--ink,#16181D)}
.readers-banner .rb-item.rb-on .rb-sw{box-shadow:0 0 0 2px color-mix(in srgb,var(--rb-amber) 45%,transparent)}
.readers-banner .rb-how{flex:none;display:inline-flex;align-items:center;min-height:28px;color:var(--rb-amber);text-decoration:underline;text-underline-offset:2px}
.readers-banner .rb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes rb-breathe{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@keyframes rb-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(max-width:600px){
 .readers-banner{gap:4px 8px;padding:6px 16px 8px;font-size:12px}
 .readers-banner .rb-strip{flex:1;width:auto;min-width:60px}
 .readers-banner .rb-how{order:4;margin-left:auto}
 .readers-banner .rb-legend,.readers-banner .rb-caption{order:5;flex:1 1 100%}
 .readers-banner .rb-legend{gap:3px 10px}
}
@media(prefers-reduced-motion:reduce){.readers-banner .rb-dot,.readers-banner[data-state="collecting"] .rb-strip{animation:none}.readers-banner .rb-strip i,.readers-banner .rb-caption,.readers-banner .rb-item{transition:none}}
@media print{.readers-banner{display:none}}
