/* Chapter 12, Search. Site tokens only; over /style.css and /playbook/kit/kit.css. */
.pb-still text,.sr-plot text{font-family:var(--font)}

/* the crawl: a wide still and an upright one for phones; once live, the canvas keeps the same shape */
.sr-crawl-fig .pb-still.sr-still-narrow{display:none}
.js .sr-crawl-fig .pb-stage{aspect-ratio:1200 / 620}
@media (max-width:40rem){
  .sr-crawl-fig .pb-still.sr-still-wide{display:none}
  .sr-crawl-fig .pb-still.sr-still-narrow{display:block}
  .js .sr-crawl-fig .pb-stage{aspect-ratio:400 / 560}
}
.js .sr-crawl-fig .pb-stage > .pb-still{height:100%}
.sr-crawl-fig .pb-stage > canvas{}@media (prefers-reduced-motion:no-preference){.sr-crawl-fig .pb-stage > canvas{transition:opacity .5s var(--ease-draw)}}
.sr-crawl-fig.is-answers .pb-stage > canvas{opacity:.3}
[data-pb-tier="still"] .sr-crawl-fig .pb-stage > canvas{transition:none}
html:not(.js) .sr-live-only{display:none}
.sr-s-edge{stroke:var(--faint);stroke-width:1;opacity:.7;vector-effect:non-scaling-stroke}
.sr-s-walk{stroke:var(--trail);stroke-width:1.3;opacity:.7;vector-effect:non-scaling-stroke}
.sr-s-name{fill:var(--ink)}
.sr-s-dark{fill:var(--faint)}
.sr-s-empty{fill:var(--ground);stroke:var(--ink);stroke-width:1.3;vector-effect:non-scaling-stroke}
.sr-s-note{fill:var(--muted)}

.sr-fixes{margin-top:.75rem}
.sr-meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem 2rem;margin-top:1.5rem;max-width:var(--measure)}
.sr-meters .pb-meter-value{color:var(--muted);font-size:var(--t-meta)}
.sr-crawl-fig > .sr-meters,.sr-crawl-fig > .sr-read,.sr-crawl-fig > .sr-answers,.sr-plot-fig > .sr-readout{margin-left:calc((var(--pb-stage-w) - 100cqw) / 2 + var(--pb-shift))}
.sr-read,.sr-answers{max-width:var(--measure);margin-top:1.5rem}
.sr-dl{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.35rem 1rem;margin:.6rem 0 0;font-size:var(--t-meta);line-height:1.45}
.sr-dl dt{color:var(--muted)}
.sr-dl dd{margin:0;overflow-wrap:anywhere}
.sr-missed{margin-top:.9rem !important;color:var(--muted);font-size:var(--t-meta)}
.sr-answers{opacity:0}@media (prefers-reduced-motion:no-preference){.sr-answers{transition:opacity .45s var(--ease-draw)}}
.sr-answers.is-in{opacity:1}
[data-pb-tier="still"] .sr-answers{transition:none}
.sr-answers .sr-note{color:var(--muted);font-size:var(--t-meta)}
.sr-qs{margin-top:1rem !important}
.sr-q{padding:1rem 0;border-top:1px solid var(--rule)}
.sr-q-text{font-size:1.125rem}
.sr-q blockquote{margin:.6rem 0 0;padding-left:1rem;border-left:1px solid var(--halo-lamp);color:var(--spark)}
.sr-why,.sr-flag,.sr-considered{font-size:var(--t-meta);line-height:1.5;margin-top:.5rem !important}
.sr-why{color:var(--muted)}
.sr-flag{color:var(--ink)}
.sr-considered{color:var(--faint)}
.sr-considered li{margin-top:.2rem}

/* the keyword plot */
.sr-plot-fig .pb-stage{max-width:44rem;margin-inline:auto}
.sr-plot{display:block;width:100%;height:100%;overflow:visible}
.sr-plot .sr-grid,.sr-s-grid{stroke:var(--rule);vector-effect:non-scaling-stroke}
.sr-plot .sr-axes text,.sr-s-axis{fill:var(--muted)}
.sr-kw{cursor:pointer;outline:none}@media (prefers-reduced-motion:no-preference){.sr-kw{transition:opacity .4s var(--ease-draw)}}
.sr-kw .sr-hit{fill:transparent}
.sr-kw .sr-ring{fill:none;stroke:transparent;vector-effect:non-scaling-stroke}
.sr-kw:focus-visible .sr-ring,.sr-kw:hover .sr-ring{stroke:var(--ink)}
.sr-shape,.sr-s-pt{stroke-width:1.4;vector-effect:non-scaling-stroke}@media (prefers-reduced-motion:no-preference){.sr-shape,.sr-s-pt{transition:fill .4s,filter .4s}}
.sr-informational .sr-shape,.sr-s-informational{fill:var(--ground);stroke:var(--muted)}
.sr-commercial .sr-shape,.sr-s-commercial{fill:var(--muted);stroke:var(--muted)}
.sr-transactional .sr-shape,.sr-s-transactional{fill:var(--ink);stroke:var(--ink)}
.sr-navigational .sr-shape,.sr-s-navigational{fill:var(--ground);stroke:var(--faint)}
.sr-kw.is-hi .sr-shape,.sr-s-hi{fill:var(--spark);stroke:var(--spark)}
.sr-kw.is-dim{opacity:.35}
.sr-kw.is-off{display:none}
.sr-lab,.sr-s-lab{fill:var(--ink)}
.sr-lab{opacity:0;pointer-events:none}@media (prefers-reduced-motion:no-preference){.sr-lab{transition:opacity .3s var(--ease-draw)}}
.sr-plot.is-tail .sr-kw.is-hi .sr-lab.is-tail,.sr-kw:focus .sr-lab,.sr-kw:hover .sr-lab{opacity:1}
.sr-lead,.sr-s-lead{fill:none;stroke:var(--halo-lamp);stroke-width:1;opacity:0;vector-effect:non-scaling-stroke}@media (prefers-reduced-motion:no-preference){.sr-lead,.sr-s-lead{transition:opacity .3s}}
.sr-plot.is-tail .sr-lead.is-on,.sr-s-lead{opacity:.6}
[data-pb-tier="still"] .sr-kw,[data-pb-tier="still"] .sr-lab,[data-pb-tier="still"] .sr-lead,[data-pb-tier="still"] .sr-shape{transition:none}
.sr-legend{display:inline-block;width:14px;height:14px;vertical-align:-2px;overflow:visible}
.sr-readout{max-width:var(--measure);min-height:3em;margin-top:1rem;color:var(--muted);font-size:var(--t-meta);line-height:1.5}

/* brochure to answer */
.sr-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:1.25rem;max-width:44rem}
.sr-ba > div{border:1px solid var(--rule);padding:1.1rem 1.25rem}
.sr-ba .pb-label{display:block;margin-bottom:.6rem}
.sr-ba .sr-ba-h1{font-size:1.375rem;line-height:1.25}
.sr-ba .sr-ba-h2{margin-top:.9rem !important;color:var(--muted);font-size:var(--t-meta)}
.sr-ba .sr-ba-p{margin-top:.25rem !important;font-size:var(--t-meta);line-height:1.5}
@media (max-width:40rem){.sr-ba{grid-template-columns:minmax(0,1fr)}.sr-dl{grid-template-columns:minmax(0,1fr);gap:0}.sr-dl dd{margin-bottom:.4rem}}

/* a visually hidden table still lays out at its min-content width; keep it from widening the page */
.sr-plot-fig table.visually-hidden{top:0;left:0;white-space:normal}