/* Chapter 9, Organic social: native, tested, repeated. Site tokens only, over /style.css and /playbook/kit/kit.css.
   Each platform and each test version keeps one colour from the site's light: X and A day, LinkedIn and B lamp,
   Instagram and C studio, TikTok spark, Facebook muted. Text is ink or muted. */

/* ---------- the orrery stage: the still only without JS (keyed on the head-set .js class, so the stage never resizes after paint), then the canvas, the WebGL host and the hit layer ---------- */
.os-figure .pb-stage{aspect-ratio:1200 / 620}
.js .os-figure .pb-stage > .pb-still{display:none}
@media (max-width:40rem){.js .os-figure .pb-stage{aspect-ratio:1200 / 800}.os-board .os-time{display:block}}
.os-orbit{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.os-orbit[data-platform="x"]{stroke:var(--halo-day)}
.os-orbit[data-platform="linkedin"]{stroke:var(--halo-lamp)}
.os-orbit[data-platform="instagram"]{stroke:var(--halo-studio)}
.os-orbit[data-platform="tiktok"]{stroke:var(--spark)}
.os-orbit[data-platform="facebook"]{stroke:var(--muted)}
.pb-still .os-still-name,.pb-still .os-still-core{font-family:var(--font);font-size:26px;fill:var(--ink)}
.pb-still .os-still-fit{font-family:var(--font);font-size:21px;fill:var(--muted)}
.os-layer{touch-action:pan-y}
.os-gl{position:absolute;inset:0;display:none}
.os-gl canvas{display:block;width:100%;height:100%}
.os-3d-on .os-gl{display:block}
.os-3d-on .pb-stage > .os-flat{visibility:hidden}
.os-hit{position:absolute;inset:0;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.os-hit.is-dragging{cursor:grabbing}

/* ---------- controls: two radio groups drawn like the kit's buttons, the five platforms, the 3D toggle ---------- */
.os-choice{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;min-width:0;flex-basis:100%}
.os-choice + .os-choice{margin-top:.4rem}
.os-choice legend{color:var(--muted);font-size:var(--t-meta);padding:0;margin-bottom:.5rem;float:left;width:100%}
.os-choice label{position:relative;display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.55rem 1rem;border:1px solid var(--faint);font-size:var(--t-meta);line-height:1.3;cursor:pointer}
.os-choice label:hover,.os-choice label:has(input:checked){border-color:var(--ink)}
.os-choice label:has(input:checked){background:var(--ground-raised)}
.os-choice label:has(input:focus-visible){outline:1px solid var(--ink);outline-offset:3px}
.os-choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.os-choice label::before{content:"";width:.55rem;height:.55rem;border:1px solid var(--faint);border-radius:50%}
.os-choice label:has(input:checked)::before{background:var(--spark);border-color:var(--spark)}
.os-picks{display:flex;flex-wrap:wrap;gap:.6rem;flex-basis:100%;margin-top:.6rem}
.os-pick{display:inline-flex;align-items:center;gap:.5rem}
.os-pick::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--os-c,var(--faint))}
.os-pick[aria-pressed="true"]{border-color:var(--ink);background:var(--ground-raised)}
.os-pick-fit{color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.os-pick-fit:empty{display:none}
.os-3d[hidden]{display:none}
[data-platform="x"],[data-variation="A"]{--os-c:var(--halo-day)}
[data-platform="linkedin"],[data-variation="B"]{--os-c:var(--halo-lamp)}
[data-platform="instagram"],[data-variation="C"]{--os-c:var(--halo-studio)}
[data-platform="tiktok"]{--os-c:var(--spark)}
[data-platform="facebook"]{--os-c:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .os-choice label{transition:border-color .2s,background-color .2s}
  .os-choice label::before{transition:background-color .3s,border-color .3s}
}
.pb-figure > .os-note,.pb-figure > .os-cards,.pb-figure > .os-scores,.pb-figure > .os-grid-wrap,.pb-figure > .os-verdicts,
.pb-figure > .os-curve,.pb-figure > .os-curve-note{margin-left:calc((var(--pb-stage-w) - 100cqw) / 2 + var(--pb-shift))}
.os-note{color:var(--muted);font-size:var(--t-meta);line-height:1.5;margin-top:1rem;max-width:var(--measure)}

/* ---------- the platform cards: all five without script, the chosen one with it ---------- */
.os-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.75rem 2.5rem;margin:1.75rem 0 0;padding:0;list-style:none;max-width:64rem}
.js .os-figure .os-cards{grid-template-columns:minmax(0,1fr);max-width:44rem}
.js .os-figure .os-card:not(.is-on){display:none}
.os-card{border-top:1px solid var(--os-c,var(--faint));padding-top:1rem}
.os-card h3{font-size:1.375rem;line-height:1.3;margin:0;display:flex;align-items:center;gap:.6rem}
.os-dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--os-c,var(--faint));flex:none}
.os-card-fit{color:var(--muted);font-size:var(--t-meta);margin-top:.35rem;line-height:1.45}
.os-card dl{margin:.5rem 0 0}
.os-card dt{color:var(--muted);font-size:var(--t-meta);margin-top:.9rem}
.os-card dd{margin:.2rem 0 0;line-height:1.5}
.os-rules{margin:0;padding:0;list-style:none}
.os-rules li{padding-left:1rem;position:relative;margin-top:.3rem}
.os-rules li::before{content:"";position:absolute;left:0;top:.72em;width:.4rem;height:1px;background:var(--faint)}
.os-sample{margin-top:1.25rem;padding:1rem 1.1rem;background:var(--ground-raised);border-left:1px solid var(--os-c,var(--faint))}
.os-sample-label{color:var(--muted);font-size:var(--t-meta);line-height:1.4}
.os-post{margin-top:.45rem;line-height:1.55}
.os-sample .os-post + .os-sample-label{margin-top:1.1rem}
.os-slides{margin:.5rem 0 0;padding-left:1.4rem;line-height:1.5}
.os-slides li{margin-top:.3rem;padding-left:.2rem}
.os-board{list-style:none;padding-left:0}
.os-time{display:inline-block;min-width:6.5rem;color:var(--muted);font-size:var(--t-meta);font-variant-numeric:lining-nums tabular-nums}

/* the judgement behind the fit, open to anyone who wants it */
.os-scores{margin-top:1.5rem;max-width:44rem}
.os-scores summary{display:list-item;padding-block:.7rem;min-height:44px;box-sizing:border-box;cursor:pointer;color:var(--ink);font-size:var(--t-meta)}
.os-scores summary:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.os-scores p{color:var(--muted);font-size:var(--t-meta);line-height:1.5;margin-top:.5rem}
.os-score-table{border-collapse:collapse;margin-top:1.25rem;font-size:var(--t-meta);font-variant-numeric:lining-nums tabular-nums;width:100%}
.os-score-table caption{text-align:left;color:var(--muted);padding-bottom:.4rem;line-height:1.4}
.os-score-table th,.os-score-table td{padding:.35rem .5rem .35rem 0;border-bottom:1px solid var(--rule);text-align:left;font-weight:400}
.os-score-table thead th{color:var(--muted);vertical-align:bottom}
.os-score-table td{text-align:right;padding-right:.25rem}

/* ---------- the two-week test ---------- */
.os-versions{margin-top:1.25rem}
.os-versions li{padding:.45rem 0;border-top:1px solid var(--rule);line-height:1.45}
.os-versions .os-dot{margin-right:.6rem;vertical-align:.1em}
.os-test .pb-stage{aspect-ratio:1200 / 470}
.js .os-test .pb-stage > .pb-still{display:none}
@media (max-width:40rem){.js .os-test .pb-stage{aspect-ratio:4 / 3}}
.os-grid-line{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}
.pb-still .os-tick{font-family:var(--font);font-size:20px;fill:var(--muted)}
.pb-still .os-still-post{font-family:var(--font);font-size:24px;fill:var(--ink)}
.os-line{fill:none;stroke:var(--os-c,var(--faint));stroke-width:2.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.os-post-dot{fill:var(--os-c,var(--faint))}
.os-grid-wrap{margin-top:1.25rem;max-width:40rem}
.os-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem;margin-top:.6rem}
.os-day{font:inherit;color:var(--ink);background:none;border:1px solid var(--faint);border-radius:0;min-height:58px;min-width:44px;padding:.3rem .2rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;line-height:1.1}
.os-day:hover{border-color:var(--ink)}
.os-day:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.os-day[data-v="A"],.os-day[data-v="B"],.os-day[data-v="C"]{border-color:var(--os-c,var(--faint));background:var(--ground-raised)}
.os-day[data-v="A"]{--os-c:var(--halo-day)}
.os-day[data-v="B"]{--os-c:var(--halo-lamp)}
.os-day[data-v="C"]{--os-c:var(--halo-studio)}
.os-day.is-now{border-color:var(--spark);border-width:2px;padding:calc(.3rem - 1px) calc(.2rem - 1px)}
.os-day-n{color:var(--muted);font-size:.8125rem;font-variant-numeric:lining-nums tabular-nums}
.os-day-v{font-size:1.25rem}
.os-day-r{color:var(--muted);font-size:.75rem;font-variant-numeric:lining-nums tabular-nums;min-height:1em}
@media (prefers-reduced-motion:no-preference){.os-day{transition:border-color .2s,background-color .2s}}
.os-test-controls .pb-btn{flex:none}
.os-status{flex-basis:100%;color:var(--muted);font-size:var(--t-meta);line-height:1.5;max-width:var(--measure)}
.os-verdicts{margin-top:1.25rem;max-width:var(--measure)}
.os-verdicts li{display:flex;gap:.6rem;align-items:baseline;padding:.45rem 0;border-top:1px solid var(--rule);line-height:1.45;font-variant-numeric:lining-nums tabular-nums}
.os-verdicts .os-dot{align-self:center}
.os-verdicts li[data-verdict="hit"]{color:var(--ink)}
.os-verdicts li[data-verdict="miss"],.os-verdicts li[data-verdict="close"],.os-verdicts li[data-verdict="none"]{color:var(--muted)}
.os-verdicts.is-pending li{color:var(--faint)}
.os-curve .pb-chartbox{margin-top:1.5rem}
.os-curve-note{color:var(--muted);font-size:var(--t-meta);line-height:1.5;margin-top:.6rem;max-width:var(--measure)}
.os-curve-note:empty{display:none}
.os-assumptions{max-width:44rem}
.os-assumptions .os-toy{color:var(--muted);font-size:var(--t-meta);line-height:1.5;margin-top:.5rem}
.os-assumptions > div{grid-template-columns:minmax(0,1fr) auto;margin-top:1.1rem}
.os-assumptions > div .pb-label{color:var(--ink);font-size:var(--t-body)}
.os-assumptions output{font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.os-assumptions .os-dial{grid-column:1 / -1;width:min(100%,24rem)}

/* ---------- without script: the stills, every card, the default verdicts; no controls that would do nothing ---------- */
html:not(.js) .os-js,html:not(.js) .os-js-inline,html:not(.js) .os-dial{display:none}