/* Chapter 4, Write the line. Site tokens only; over /style.css and /playbook/kit/kit.css. */
.wl-facts{margin-top:1rem !important}
.wl-facts li{padding:.45rem 0;border-top:1px solid var(--rule);line-height:1.45}

/* both figures: the still is portrait, so it sits centred at a readable width; once live, the HTML layer takes
   its place in the flow (the kit lays a layer over the still, which suits a canvas but not a page of text) */
.wl-dial-fig .pb-still,.wl-meter-fig .pb-still{max-width:36rem;margin-inline:auto}
.js .wl-dial-fig .pb-stage > .pb-still,.js .wl-meter-fig .pb-stage > .pb-still{display:none}
.js .wl-dial-fig .pb-stage > .pb-layer,.js .wl-meter-fig .pb-stage > .pb-layer{display:block}
.wl-dial-fig .pb-stage > .pb-layer,.wl-meter-fig .pb-stage > .pb-layer{position:relative;inset:auto;height:auto}
.pb-still text{font-family:var(--font)}
.wl-s-ring{fill:none;stroke:var(--faint);stroke-width:1.2}
.wl-s-tick{stroke:var(--faint);stroke-width:1.2}
.wl-s-tick.is-on{stroke:var(--spark)}
.wl-s-name,.wl-s-sub,.wl-s-why,.wl-s-voice{fill:var(--muted)}
.wl-s-name.is-on,.wl-s-centre,.wl-s-head,.wl-s-btntext{fill:var(--ink)}
.wl-s-why{fill:var(--faint)}
.wl-s-head{white-space:pre}
.wl-s-btn{fill:none;stroke:var(--ink);stroke-width:1}
.wl-s-mark{fill:var(--spark);text-decoration:underline;text-decoration-color:var(--halo-lamp)}
.wl-s-mark.is-banned{fill:var(--halo-lamp)}
.wl-s-track{fill:var(--rule)}
.wl-s-fill{fill:var(--ink)}

/* the dial: a wheel of twelve with the light under it, and Kiln's page beside it */
.wl-dial-stage{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.wl-wheel{position:relative;width:min(100%,26rem);aspect-ratio:1;margin-inline:auto}
.wl-wheel canvas,.wl-labels{position:absolute;inset:0;width:100%;height:100%}
.wl-labels{pointer-events:none;overflow:visible}
.wl-labels text{fill:var(--muted);font-family:var(--font)}@media (prefers-reduced-motion:no-preference){.wl-labels text{transition:fill .5s var(--ease-draw)}}
.wl-labels text.is-on{fill:var(--ink)}
.wl-labels .wl-centre{fill:var(--ink)}
.wl-wheel .pb-dial{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%}
.wl-wheel .pb-dial-circle svg{width:64%;height:64%}
.wl-mock{border:1px solid var(--rule);background:var(--ground-raised);padding:clamp(1.25rem,3vw,2.5rem);min-height:20rem}
.wl-mock-label{color:var(--muted);font-size:var(--t-meta)}
.wl-copy{}@media (prefers-reduced-motion:no-preference){.wl-copy{transition:opacity .24s var(--ease-draw)}}
.wl-copy.is-out{opacity:0}
[data-pb-tier="still"] .wl-copy{transition:none}
.wl-headline{font-size:clamp(1.55rem,2.6vw,2.25rem);line-height:1.18;margin-top:1.25rem !important}
.wl-sub{color:var(--muted);margin-top:1rem !important;line-height:1.5}
.wl-btn{display:inline-block;margin-top:1.5rem;padding:.6rem 1.1rem;border:1px solid var(--ink);font-size:var(--t-meta)}

/* the meter */
.wl-meter-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.wl-meter-input .pb-label{display:block;margin-bottom:.5rem}
.wl-input{display:block;width:100%;min-height:44px;font:inherit;font-size:1.25rem;line-height:1.3;color:var(--ink);background:var(--ground);border:1px solid var(--faint);border-radius:0;padding:.7rem .85rem}
.wl-input:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.wl-marked{margin-top:1rem !important;font-size:1.25rem;line-height:1.45;min-height:1.8rem;overflow-wrap:anywhere}
.wl-marked mark{background:none;color:var(--spark);text-decoration:underline 1px var(--halo-lamp);text-underline-offset:.25em}
.wl-marked mark.is-banned{background:rgba(217,178,122,.16);text-decoration:none}
.wl-total{margin-top:1.25rem !important;font-size:var(--t-section);font-variant-numeric:lining-nums tabular-nums}
.wl-reasons{margin-top:.5rem !important;color:var(--muted);font-size:var(--t-meta);line-height:1.5}
.wl-reasons li{padding:.35rem 0;border-top:1px solid var(--rule)}
.wl-bars .pb-chartbox{margin-top:0}
.wl-rules{max-width:var(--measure);margin-top:1.5rem;margin-left:calc((var(--pb-stage-w) - 100cqw) / 2 + var(--pb-shift));color:var(--muted);font-size:var(--t-meta);line-height:1.5}
.wl-rules li{padding:.3rem 0}
.wl-spec{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:.6rem 1rem;margin:1.25rem 0;max-width:var(--measure)}
.wl-spec dt{color:var(--muted);font-size:var(--t-meta);padding-top:.15rem}
.wl-spec dd{margin:0}

@media (max-width:48rem){
  .wl-dial-stage,.wl-meter-stage{grid-template-columns:minmax(0,1fr)}
  .wl-mock{min-height:0}
  .wl-spec{grid-template-columns:minmax(0,1fr);gap:.15rem}
  .wl-spec dd{margin-bottom:.75rem}
}

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