/* Chapter 1, Intent rises as people move. Site tokens only; the kit's frame from /playbook/kit/kit.css. */

/* the still: the funnel and the bow tie, warmer as intent rises (the gradient is an attribute, so it is drawn, not
   checked as a mark) */
.ir-still,.ir-nf{font-family:var(--font)}
.ir .pb-stage > .ir-still{max-width:46rem;margin-inline:auto}
.ir-bounds line{stroke:var(--rule)}
.ir-sale{stroke:var(--halo-lamp);stroke-dasharray:3 6}
.ir-still .ir-sale-label{fill:var(--halo-lamp);font-size:18px}
.ir-names text{fill:var(--ink);font-size:24px}
.ir-names .ir-job-s{fill:var(--muted);font-size:18px}
.ir-chips-s rect{fill:var(--ground);stroke:var(--faint);stroke-width:1}
.ir-chips-s text{fill:var(--ink);font-size:17px}
.ir-chips-s .ir-g1 text{fill:var(--muted)}
.ir-chips-s .ir-g2 rect{stroke:var(--muted);stroke-width:1.25}
.ir-chips-s .ir-g3 rect{stroke:var(--ink);stroke-width:1.6}
.ir-chips-s .ir-g4 rect{stroke:var(--spark);stroke-width:2.2}
.ir-still .ir-foot-s{fill:var(--muted);font-size:18px}
.ir-still .pb-lit{fill:var(--spark)}

/* live: the layer has its own height, so the still steps out of the way */
.js .ir .pb-stage > .pb-still{display:none}
.js .ir .pb-stage > .pb-layer{display:block}
.ir .pb-stage > .pb-layer{position:relative;inset:auto;height:auto;padding:0 0 .5rem}
.ir-layer > canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.ir-tray,.ir-funnel,.ir-why,.ir-meter{position:relative;z-index:1}
.ir-tray{max-width:52rem;margin:0 auto 1.75rem}
.ir-tray .pb-label{margin:0}
.ir-funnel{display:flex;flex-direction:column;align-items:center;max-width:52rem;margin:0 auto}
.ir-band{width:max(15rem,var(--w));min-height:6.75rem;padding:.6rem .9rem .9rem}
.ir-band.pb-zone:not(.is-target){border-color:transparent;border-top-color:var(--rule)}
.ir-band.pb-zone.is-target{background:none}
.ir-band-name{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.15rem .6rem;margin:0;text-align:center}
.ir-stage{color:var(--ink)}
.ir-job{color:var(--muted);font-size:var(--t-meta)}
.ir-band [data-zone-items]{justify-content:center}
.ir-knot{margin:.2rem 0 .35rem;padding-top:1.1rem;color:var(--halo-lamp);font-size:var(--t-meta);text-align:center}
.ir-chip{background:var(--ground);text-align:center}
.ir-chip.is-right{border-color:var(--ink);box-shadow:inset 0 0 0 calc(var(--i) * 2px) var(--spark)}
.ir-chip.is-wrong{border-style:dashed;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.ir-chip{transition:box-shadow .6s var(--ease-draw),border-color .3s,color .3s}}
.ir-why{max-width:34rem;min-height:3.2em;margin:1.5rem auto 0;color:var(--muted);font-size:var(--t-meta);line-height:1.5;text-align:center}
.ir-why-head{color:var(--ink)}
.ir-meter{margin:1rem auto 0;max-width:31rem}
.ir [hidden]{display:none!important}
html:not(.js) .ir-controls{display:none}

/* what I'd do now: Northfield's volunteer funnel */
.ir-northfield{margin:2rem 0 0;max-width:40rem}
.ir-nf{display:block;width:100%;height:auto}
.ir-nf .pb-line{fill:none;stroke:var(--trail);stroke-width:2;stroke-linecap:square}
.ir-nf .pb-lit{fill:var(--spark)}
.ir-nf .pb-dim{fill:var(--ground);stroke:var(--faint);stroke-width:1.5}
.ir-nf-text text{fill:var(--muted);font-size:19px}
.ir-nf-text .ir-nf-stage{fill:var(--ink);font-size:24px}
.ir-northfield figcaption{color:var(--muted);font-size:var(--t-meta);line-height:1.5;margin-top:.75rem}