/* Chapter 2, One company, several buyers. Site tokens only; text is ink or muted, marks are the three halos or --faint. */

/* the stage: the still only without JS (the .js class is set in the head, so the stage never resizes after paint), then the 2.5D canvas, the WebGL host and the hit layer on top */
.sb-figure .pb-stage{aspect-ratio:1200 / 620}
.js .sb-figure .pb-stage > .pb-still{display:none}
@media (max-width:40rem){.js .sb-figure .pb-stage{aspect-ratio:5 / 4}}
.sb-orbit{fill:none;stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sb-orbit-cfo{stroke:var(--halo-lamp)}
.sb-orbit-pm{stroke:var(--halo-day)}
.sb-orbit-super{stroke:var(--halo-studio)}
.sb-ico{fill:none;stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.pb-still .sb-still-name,.pb-still .sb-still-role{font-family:var(--font);font-size:26px;fill:var(--ink)}
.pb-still .sb-still-stake{font-family:var(--font);font-size:22px;fill:var(--muted)}
.sb-layer{touch-action:pan-y}
.sb-gl{position:absolute;inset:0;display:none}
.sb-gl canvas{display:block;width:100%;height:100%}
.sb-3d-on .sb-gl{display:block}
.sb-3d-on .pb-stage > .sb-flat{visibility:hidden}
.sb-line{position:absolute;left:50%;bottom:.5rem;width:min(92%,32rem);transform:translateX(-50%);margin:0;text-align:center;font-size:1.0625rem;line-height:1.35;color:var(--ink);text-shadow:0 0 8px var(--ground),0 0 2px var(--ground);pointer-events:none}
@media (max-width:40rem){.sb-line{font-size:.9375rem;bottom:.25rem}}
.sb-hit{position:absolute;inset:0;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.sb-hit.is-dragging{cursor:grabbing}

/* controls: three buyer buttons, the split toggle, the 3D toggle */
.sb-buyers{display:flex;flex-wrap:wrap;gap:.6rem}
.sb-pick{display:inline-flex;align-items:center;gap:.55rem}
.sb-pick::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--sb-halo,var(--faint))}
.sb-pick[aria-pressed="true"]{border-color:var(--ink);background:var(--ground-raised)}
[data-buyer="cfo"]{--sb-halo:var(--halo-lamp)}
[data-buyer="pm"]{--sb-halo:var(--halo-day)}
[data-buyer="super"]{--sb-halo:var(--halo-studio)}

/* the cards: the same product in each buyer's terms; the average line when it is all one */
.sb-cards{margin-top:1.75rem}
.sb-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.5rem 2rem;margin:0;padding:0;list-style:none}
.sb-card{border-top:1px solid var(--faint);padding-top:1rem}
.sb-card.is-on{border-top-color:var(--ink)}
.sb-role{font-size:1.25rem;line-height:1.3;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem}
.sb-dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--sb-halo,var(--faint));align-self:center}
.sb-card .sb-dot{outline:1px solid transparent;outline-offset:2px}
.sb-card.is-on .sb-dot{outline-color:var(--sb-halo,var(--faint))}
.sb-stake{flex-basis:100%;color:var(--muted);font-size:var(--t-meta)}
.sb-card dl{margin:.4rem 0 0}
.sb-card dt{color:var(--muted);font-size:var(--t-meta);margin-top:.85rem}
.sb-card dd{margin:.15rem 0 0;line-height:1.45}
.sb-card.is-dim dd{color:var(--muted)}
.sb-card dd.sb-headline{font-size:1.125rem}
.sb-average{border-top:1px solid var(--ink);padding-top:1rem;max-width:var(--measure)}
.sb-card-kicker{color:var(--muted);font-size:var(--t-meta)}
.sb-average .sb-headline{font-size:var(--t-lede);line-height:1.4;margin-top:.35rem}
.sb-note{color:var(--muted);margin-top:.6rem;line-height:1.5}
@media (prefers-reduced-motion:no-preference){
  .sb-card{transition:border-color .4s var(--ease-draw)}
  .sb-card dd{transition:color .4s var(--ease-draw)}
  .sb-dot{transition:outline-color .4s var(--ease-draw)}
}

/* the persona builder beside the ICP card */
.pb-chapter section > .sb-pair{max-width:64rem}
.sb-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:2.5rem 3.5rem;margin-top:2rem;align-items:start}
.sb-pair h3{font-size:1.375rem;line-height:1.3;margin:0}
.sb-persona fieldset{border:0;margin:1.5rem 0 0;padding:0;min-width:0}
.sb-persona legend{font-size:1.125rem;padding:0;margin-bottom:.25rem}
.sb-field{margin-top:.85rem}
.sb-field label{display:block;color:var(--muted);font-size:var(--t-meta);margin-bottom:.3rem}
.sb-field input,.sb-field select,.sb-field textarea{display:block;width:100%;min-height:44px;font:inherit;font-size:1.0625rem;line-height:1.4;color:var(--ink);background:var(--ground-raised);border:1px solid var(--faint);border-radius:0;padding:.5rem .7rem}
.sb-field textarea{resize:vertical}
.sb-field ::placeholder{color:var(--faint);opacity:1}
.sb-field input:focus-visible,.sb-field select:focus-visible,.sb-field textarea:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.sb-verdict{margin-top:1.75rem}
.sb-verdict .pb-meter + .pb-meter{margin-top:.6rem}
.sb-flag{margin-top:1rem;font-size:1.125rem;line-height:1.45;padding-left:1rem;border-left:2px solid var(--faint)}
.sb-flag[data-verdict="who-only"],.sb-flag[data-verdict="why-only"]{border-left-color:var(--halo-studio)}
.sb-flag[data-verdict="full"]{border-left-color:var(--halo-lamp)}
.sb-form-buttons{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.sb-icp{border-top:1px solid var(--faint);padding-top:1rem}
.sb-icp-sub,.sb-icp-note{color:var(--muted);margin-top:.5rem;line-height:1.5}
.sb-icp dl{margin:1rem 0 0}
.sb-icp dt{color:var(--muted);font-size:var(--t-meta);margin-top:.75rem}
.sb-icp dd{margin:.1rem 0 0;line-height:1.45}
.sb-icp-note{margin-top:1.25rem}

/* without script: the still, every card and the worksheet; no controls that would do nothing */
html:not(.js) .sb-controls,html:not(.js) .sb-js,html:not(.js) .sb-verdict .pb-meter,html:not(.js) .sb-form-buttons{display:none}
.sb-3d[hidden]{display:none}