/* Chapter 7, Cold outreach that leads with the wound. Site tokens only; the kit's frame from /playbook/kit/kit.css.
   The four parts keep one colour each wherever they appear: a line about her (lamp), the trigger (studio), what
   changes for her (day), a small ask (spark). */

.pb-chapter .co-check,.pb-chapter .co-res{list-style:decimal;padding-left:1.4rem;margin-top:1rem}
.co-check li,.co-res li{padding:.3rem 0 .3rem .25rem;line-height:1.5}

/* the stills */
.co-xray .pb-still text,.co-calc .pb-still text{font-family:var(--font)}
.co-s-head{fill:var(--muted);font-size:22px}
.co-s-mail text{fill:var(--ink);font-size:20px}
.co-s-note{fill:var(--ink);font-size:20px}
.co-s-sub{fill:var(--muted);font-size:17px}
.co-s-val{fill:var(--ink);font-size:22px}
.co-s-tick-dim line{stroke:var(--faint);stroke-width:2}
.co-s-tick-lit line{stroke:var(--halo-lamp);stroke-width:3}
.co-s-rule{stroke:var(--rule)}
.co-s-axis line{stroke:var(--faint)}
.co-s-join line{stroke:var(--halo-lamp);stroke-width:1;opacity:.55}
.co-s-band line{stroke:var(--trail);stroke-width:4;stroke-linecap:square}

/* the X-ray, live: the layer has its own height, so the still steps out of the way */
.js .co-xray .pb-stage > .pb-still,.js .co-calc .pb-stage > .pb-still{display:none}
.js .co-xray .pb-stage > .pb-layer,.js .co-calc .pb-stage > .pb-layer{display:block}
.co-xray .pb-stage > .pb-layer,.co-calc .pb-stage > .pb-layer{position:relative;inset:auto;height:auto}
.co-desk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.co-edit .pb-label{display:block}
.co-to{color:var(--muted);font-size:var(--t-meta);line-height:1.45;margin:.35rem 0 .75rem}
.co-text{display:block;width:100%;min-height:22rem;font:inherit;font-size:1.0625rem;line-height:1.55;color:var(--ink);background:var(--ground-raised);border:1px solid var(--faint);border-radius:0;padding:.85rem 1rem;resize:vertical}
.co-text:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.co-read{position:relative}
.co-read > canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.pb-chapter .co-lamps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.25rem;margin:.6rem 0 1.1rem}
.co-lamp{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.1rem .6rem;font-size:var(--t-meta);line-height:1.3}
.co-dot{grid-row:span 2;width:.8rem;height:.8rem;border-radius:50%;border:1px solid var(--faint);background:var(--ground)}
.co-lamp-name{color:var(--ink)}
.co-lamp-state{color:var(--muted);font-size:.875rem}
.co-lamp.is-on .co-dot{background:var(--spark);border-color:var(--spark)}
.co-lamp.is-on[data-part="trigger"] .co-dot{background:var(--halo-studio);border-color:var(--halo-studio)}
.co-lamp.is-on[data-part="value"] .co-dot{background:var(--halo-day);border-color:var(--halo-day)}
.co-lamp.is-on[data-part="ask"] .co-dot{background:var(--ink);border-color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.co-dot{transition:background-color .5s var(--ease-draw),border-color .5s var(--ease-draw)}}
.co-scan{white-space:pre-wrap;overflow-wrap:anywhere;font-size:1.0625rem;line-height:1.75;color:var(--muted);border-left:1px solid var(--rule);padding:.15rem 0 .15rem 1rem;min-height:12rem}
.co-part{color:var(--ink);text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:.32em}
.co-part[data-part="personal"]{text-decoration-color:var(--halo-lamp)}
.co-part[data-part="trigger"]{text-decoration-color:var(--halo-studio)}
.co-part[data-part="value"]{text-decoration-color:var(--halo-day)}
.co-part[data-part="ask"]{text-decoration-color:var(--spark)}
.co-part[data-part="big"]{text-decoration-style:dashed;text-decoration-color:var(--faint)}
.co-tell{color:var(--spark);background:rgba(217,178,122,.16);padding:0 .1em}
.co-sum{margin-top:1rem;font-size:var(--t-meta);line-height:1.5;color:var(--ink)}
.pb-chapter .co-tells{margin-top:.5rem;font-size:var(--t-meta);line-height:1.45}
.co-tells li{padding:.4rem 0;border-top:1px solid var(--rule)}
.co-tell-kind{color:var(--ink)}
.co-tells li{color:var(--muted)}
.co-tell-fix{color:var(--halo-lamp)}
.co-fixes{max-width:56rem}
.co-fix-label{width:100%}
.co-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}
.co-rules li{padding:.3rem 0}
html:not(.js) .co-fixes,html:not(.js) .co-assume{display:none}

/* the calculator */
.co-calc .pb-stage > .pb-layer{padding:.75rem 0 .5rem}
.co-calc-layer > canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.co-rows{list-style:none;margin:0;padding:0;position:relative;z-index:2}
.co-row{display:grid;grid-template-columns:minmax(6.5rem,11rem) minmax(0,1fr) minmax(4.5rem,6.5rem);align-items:center;gap:1rem;min-height:3.6rem}
.co-row-name{font-size:var(--t-meta);color:var(--ink)}
.co-row-val{text-align:right;font-size:1.25rem;font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.co-track{display:block;height:1px;background:var(--rule)}
.co-axis{position:relative;height:1.5rem;margin-top:.25rem}
.co-axis span{position:absolute;top:0;transform:translateX(-50%);color:var(--muted);font-size:.8125rem;font-variant-numeric:lining-nums tabular-nums}
.co-scale{color:var(--muted);font-size:.8125rem;margin-top:.25rem}
.co-result{margin-top:1.25rem;font-size:var(--t-lede);line-height:1.4;max-width:var(--measure);margin-left:calc((var(--pb-stage-w) - 100cqw) / 2 + var(--pb-shift))}
.pb-chapter .co-warn{margin-top:.6rem;max-width:var(--measure);margin-left:calc((var(--pb-stage-w) - 100cqw) / 2 + var(--pb-shift))}
.co-warn li{color:var(--halo-lamp);font-size:var(--t-meta);line-height:1.5;padding:.3rem 0 .3rem .9rem;border-left:1px solid var(--halo-lamp);margin-top:.4rem}
.co-assume{max-width:46rem}
.co-assume > .co-set{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);align-items:center;gap:.25rem 1.25rem;margin-top:.9rem}
.co-set-name{font-size:var(--t-meta)}
.co-set-dials{display:grid;grid-template-columns:4.5rem minmax(0,1fr) 4.5rem minmax(0,1fr);align-items:center;gap:.25rem .6rem}
.co-set-dials output{color:var(--muted);font-size:.875rem;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.co-set-dials .pb-dial-line{width:100%}
.co-reset{margin-top:1.25rem}
.co-calc table.visually-hidden{top:0;left:0;white-space:normal}

/* what I'd do now: the two emails */
.co-mails{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.5rem 2rem;margin-top:1.75rem;max-width:56rem}
.co-mail{border-top:1px solid var(--faint);padding-top:.9rem}
.co-mail h3{font-size:1.125rem;line-height:1.3;color:var(--muted);font-weight:400}
.co-mail p{margin-top:.75rem;line-height:1.55}
.co-mail .co-mail-subject{color:var(--ink);font-size:var(--t-meta);margin-top:.5rem}
.co-res-head{font-size:1.25rem;line-height:1.3;margin-top:2.5rem;font-weight:400}

@media (max-width:52rem){
  .co-desk{grid-template-columns:minmax(0,1fr)}
  .co-text{min-height:16rem}
  .co-assume > .co-set{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:30rem){
  .co-lamps{grid-template-columns:minmax(0,1fr)}
  .co-set-dials{grid-template-columns:4.5rem minmax(0,1fr)}
  .co-row{grid-template-columns:minmax(5.5rem,7rem) minmax(0,1fr) 4rem;gap:.6rem}
  .co-row-val{font-size:1.0625rem}
}