/* Chapter 13, Measurement you can defend. Site tokens only; the kit's frame from /playbook/kit/kit.css. */
.tag .pb-still text,.credit .pb-still text{font-family:var(--font)}
.m-head{fill:var(--muted);font-size:20px}
.m-cell{fill:var(--ink);font-size:24px}
.m-url{fill:var(--muted);font-size:16px}
.m-bad{fill:var(--halo-lamp)}
.m-rule{stroke:var(--rule)}
.m-tie{fill:none;stroke:var(--halo-lamp);stroke-width:1.5}
.m-note{fill:var(--halo-lamp);font-size:22px}
.m-note-sub{fill:var(--muted);font-size:18px}
.m-day{fill:var(--muted);font-size:20px}
.m-multiples rect{fill:var(--ink)}
.m-multiples .m-head{font-size:21px;fill:var(--ink)}
.m-key text{fill:var(--muted);font-size:21px}

/* tag it: the builder replaces the still and takes its own height */
.js .tag .pb-stage > .pb-still,.js .credit .pb-stage > .pb-still{display:none}
.js .credit .pb-stage > .pb-layer{display:block}
.tag .pb-stage > .pb-layer,.credit .pb-stage > .pb-layer{position:relative;inset:auto;height:auto}
.js .tag .pb-stage > .tag-layer{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:2rem 3.5rem;align-items:start;max-width:62rem}
.utm-form{display:flex;flex-direction:column;gap:1.1rem}
.utm-field{display:flex;flex-direction:column;gap:.2rem}
.utm-field label{font-size:var(--t-meta);color:var(--ink)}
.utm-hint{font-size:.875rem;color:var(--faint);line-height:1.4}
.utm-field input{font:inherit;font-size:1rem;color:var(--ink);background:var(--ground-raised);border:1px solid var(--faint);border-radius:0;min-height:44px;padding:.45rem .7rem;width:100%}
.utm-field input:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.utm-field input[aria-invalid="true"]{border-color:var(--halo-lamp)}
.utm-err{font-size:.875rem;line-height:1.45;color:var(--halo-lamp)}
.utm-err:empty{display:none}
.utm-err span{display:block}
.utm-err span + span{margin-top:.3rem}
.utm-form .pb-btn{align-self:flex-start}
.utm-out{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.utm-url{font-size:1rem;line-height:1.5;color:var(--muted);overflow-wrap:anywhere;padding:.75rem .9rem;border:1px solid var(--rule);min-height:4.5rem}@media (prefers-reduced-motion:no-preference){.utm-url{transition:color .6s,border-color .6s}}
.utm-url.is-ok{color:var(--ink);border-color:var(--faint)}
.utm-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.utm-actions .pb-btn[disabled]{color:var(--faint);border-color:var(--rule);cursor:not-allowed}
.utm-status{font-size:var(--t-meta);color:var(--muted);min-height:1.5em}
.utm-report-wrap{overflow-x:auto;margin-top:.5rem}
.utm-report{border-collapse:collapse;font-size:.9375rem;line-height:1.4;width:100%}
.utm-report caption{text-align:left;color:var(--muted);caption-side:top;padding-bottom:.5rem}
.utm-report th,.utm-report td{text-align:left;font-weight:400;padding:.45rem .9rem .45rem 0;border-top:1px solid var(--rule);vertical-align:top}
.utm-report thead th{color:var(--muted)}
.utm-report td:last-child{font-variant-numeric:lining-nums tabular-nums}
.utm-report tr.is-split td:first-child,.utm-report tr.is-split td:nth-child(2){color:var(--ink)}
.utm-report tr.is-split .m-split{color:var(--halo-lamp)}
.utm-report tr.is-new td{color:var(--ink)}
.utm-report tr.is-new td:first-child{box-shadow:inset 2px 0 0 var(--halo-lamp);padding-left:.6rem}
.utm-report .m-split,.utm-report .m-this{display:block;font-size:.8125rem;color:var(--faint)}
.utm-report tr.is-row-in{}@media (prefers-reduced-motion:no-preference){.utm-report tr.is-row-in{animation:m-in .8s var(--ease-draw)}}
@keyframes m-in{from{opacity:0}to{opacity:1}}
[data-pb-tier="still"] .utm-report tr,[data-pb-tier="still"] .utm-url{animation:none!important;transition:none!important}

/* credit it */
.credit-layer canvas{position:relative;display:block;width:100%;aspect-ratio:1000 / 270;height:auto}
.credit.pb-live .pb-stage > .pb-layer > canvas{display:block}
.credit-touches{list-style:none;padding:0;margin-top:1rem;max-width:var(--measure);margin-left:calc((var(--pb-stage-w) - 100cqw) / 2 + var(--pb-shift))}
.credit-touches li{display:grid;grid-template-columns:4.5rem minmax(0,1fr) auto;gap:.2rem 1rem;padding:.45rem 0;border-top:1px solid var(--rule);font-size:var(--t-meta);line-height:1.4;color:var(--muted)}@media (prefers-reduced-motion:no-preference){.credit-touches li{transition:color .5s}}
.credit-touches li.is-lit{color:var(--ink)}
.credit-day{color:var(--faint);font-variant-numeric:lining-nums tabular-nums}
.credit-share{font-variant-numeric:lining-nums tabular-nums;color:var(--ink);text-align:right;min-width:3.5rem}
html:not(.js) .credit-share{display:none}
html:not(.js) .credit-touches li{grid-template-columns:4.5rem minmax(0,1fr)}
.credit-models{display:flex;flex-wrap:wrap;gap:.5rem}
.credit-model[aria-pressed="true"]{border-color:var(--ink);background:var(--ground-raised)}
#credit-compare-btn[aria-pressed="true"]{border-color:var(--ink);background:var(--ground-raised)}
.credit-assumptions .pb-dial-line{width:min(100%,14rem)}
.credit-assumptions > div{max-width:22rem}
.credit-assumptions output{color:var(--muted);font-size:var(--t-meta);font-variant-numeric:lining-nums tabular-nums}
.credit-assumptions .pb-dial{grid-column:1 / -1}
html:not(.js) .credit-controls,html:not(.js) .credit-assumptions{display:none}
.credit-assumptions span{font-size:var(--t-meta)}
.credit > .credit-chart,.credit > .credit-compare,.credit > .credit-static{margin-left:calc((var(--pb-stage-w) - 100cqw) / 2 + var(--pb-shift))}
.credit-chart{max-width:var(--measure)}
.credit-compare{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:0 2.5rem;max-width:44rem}
.credit-compare[hidden]{display:none}
.credit-compare .pb-chartbox{margin-top:1.5rem}
.credit-compare .pb-chartbox .chart-title{font-size:1rem}
html.js .credit-static{display:none}
html.js .markov-static{display:none}

/* tables */
.m-table-wrap,.credit-static{overflow-x:auto;max-width:44rem}
.m-table{border-collapse:collapse;font-size:var(--t-meta);line-height:1.4;margin-top:1.25rem}
.m-table caption{text-align:left;color:var(--muted);caption-side:top;padding-bottom:.5rem}
.m-table th,.m-table td{text-align:left;font-weight:400;padding:.4rem 1rem .4rem 0;border-top:1px solid var(--rule);vertical-align:top}
.m-table thead th{color:var(--muted)}
.m-table td{font-variant-numeric:lining-nums tabular-nums}
.m-paths td:last-child{color:var(--muted);white-space:nowrap}
.markov{margin-top:1.5rem}
.markov-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:0 2.5rem}
.markov figcaption{color:var(--muted);font-size:var(--t-meta);line-height:1.5;margin-top:1rem}

/* what I'd do now */
.ga-plan{margin-top:1.5rem}
.ga-plan dt{color:var(--ink);margin-top:1rem}
.ga-plan dd{margin:.2rem 0 0;color:var(--muted)}
.ga-metrics{margin-top:1.75rem}
.ga-metrics li{padding:.55rem 0;border-top:1px solid var(--rule);line-height:1.45;color:var(--muted)}
.ga-metrics li span{color:var(--ink)}