/* Bought sparks (chapter ten): the bandwagon stage, its controls and meters, the essay and the feed card. Site tokens
   only, over /style.css and /playbook/kit/kit.css. */

/* the stage: the still sets its own shape; once live, the canvas gets a frame of its own */
.bs-figure .pb-still{background:none}
.js .bs-figure .pb-stage > .pb-still{display:none}
.js .bs-figure .pb-stage{aspect-ratio:16 / 10}
@media (max-width:40rem){.js .bs-figure .pb-stage{aspect-ratio:1 / 1}}
.bs-still-key{margin-top:1rem;max-width:var(--measure);color:var(--muted);font-size:var(--t-meta);line-height:1.5}
.js .bs-figure .bs-still-key{display:none}
html:not(.js) .bs-js{display:none}

/* the budget: a native radio group drawn like the kit's buttons */
.pb-figure > .bs-meters,.pb-figure > .bs-still-key{margin-left:calc((var(--pb-stage-w) - 100cqw) / 2 + var(--pb-shift))}
.bs-budget{border:0;margin:0 0 .4rem;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;min-width:0;flex-basis:100%}
.bs-budget legend{color:var(--muted);font-size:var(--t-meta);padding:0;margin-bottom:.5rem;float:left;width:100%}
.bs-budget label{position:relative;display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.55rem 1rem;border:1px solid var(--faint);font-size:var(--t-meta);line-height:1.3;cursor:pointer}@media (prefers-reduced-motion:no-preference){.bs-budget label{transition:border-color .2s,background-color .2s}}
.bs-budget label:hover,.bs-budget label:has(input:checked){border-color:var(--ink)}
.bs-budget label:has(input:checked){background:var(--ground-raised)}
.bs-budget label:has(input:focus-visible){outline:1px solid var(--ink);outline-offset:3px}
.bs-budget input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.bs-budget label::before{content:"";width:.55rem;height:.55rem;border:1px solid var(--faint);border-radius:50%}@media (prefers-reduced-motion:no-preference){.bs-budget label::before{transition:background-color .3s,border-color .3s}}
.bs-budget label:has(input:checked)::before{background:var(--spark);border-color:var(--spark)}
.bs-actions{display:inline-flex;flex-wrap:wrap;gap:.6rem}
.bs-status{flex-basis:100%;color:var(--muted);font-size:var(--t-meta);font-variant-numeric:lining-nums tabular-nums}

/* the meters: two columns where there is room */
.bs-meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.25rem 2.5rem;margin-top:1.75rem;max-width:44rem}
.bs-meters .pb-meter{max-width:none}
.bs-meters .pb-meter-label{font-size:var(--t-meta);line-height:1.35}
.bs-meters .pb-meter-value{font-size:1.25rem;min-width:4.5ch;text-align:right}

/* the assumptions: label and value on a line, the dial and its meaning beneath */
.bs-assumptions{max-width:44rem}
.bs-assumptions .bs-toy{color:var(--muted);font-size:var(--t-meta);line-height:1.5;margin-top:.5rem}
.bs-assumptions > div{grid-template-columns:minmax(0,1fr) auto;margin-top:1.25rem}
.bs-assumptions > div .pb-label{color:var(--ink);font-size:var(--t-body)}
.bs-assumptions output{font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.bs-assumptions .bs-dial,.bs-assumptions .bs-what{grid-column:1 / -1}
.bs-assumptions .bs-dial{width:min(100%,24rem)}
.bs-assumptions .bs-what{color:var(--muted);font-size:var(--t-meta);line-height:1.45;margin-top:0}
@media (min-width:56rem){.bs-assumptions{display:grid;grid-template-columns:1fr 1fr;column-gap:3rem}.bs-assumptions legend,.bs-assumptions .bs-toy{grid-column:1 / -1}}

/* the essay: the site's long-form measure and indents */
.bs-essay-note{color:var(--muted);font-size:var(--t-meta);line-height:1.5}
.bs-essay{margin-top:2rem;max-width:var(--measure);font-size:1.1875rem;line-height:1.7}
.pb-chapter .bs-essay p + p{margin-top:0;text-indent:1.5em}
.bs-essay a{text-decoration-color:var(--muted)}

/* how to read the feed: a short card, ruled, no ornament */
.bs-card{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:1.75rem;max-width:var(--measure)}
.pb-chapter .bs-card{max-width:var(--measure)}
.bs-card h2{margin-bottom:.5rem}
.bs-card > p{color:var(--muted)}
.bs-questions{margin-top:1rem}
.bs-questions li{position:relative;padding:.45rem 0 .45rem 1.4rem;font-size:var(--t-lede);line-height:1.4}
.bs-questions li::before{content:"";position:absolute;left:0;top:1.05em;width:.4rem;height:.4rem;border-radius:50%;background:var(--spark)}
/* the meters' hidden table laid out at its nowrap width and widened the page at 390 px; reset as the site's .chart tables are */
.bs-meters table.visually-hidden{top:0;left:0;white-space:normal}