/* ==========================================================================
   Connected Social, chapter 0: understand social.

   Nothing here introduces a colour. Every value is a variable already declared
   in academy.css, or a length.

   MOTION IS OPT IN. Every transition below sits inside .s0-motion, which the
   components add only when the reader has not asked for reduced motion. A
   component that animates by default and switches it off afterwards has already
   moved something.

     sPlans      pn-   three plans, one brief, and the board drawn from them
     sWhoCanSee  wc-   two accounts, two screens
     sQueue      qu-   the advertising slots, and the dial you do not hold
     sAccept     ac-   three accounts, three products
     sInstead    in-   the money moved, and what it destroyed
     sSpread     sp-   one post, four platforms
     sWeight     wt-   build the weighting, and be refused
   ========================================================================== */

/* ------------------------------------------------------------ shared ----- */
.s0-mark{margin:0 0 9px;font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.02em}
.s0-mark.ok{color:var(--money)}
.s0-mark.no{color:var(--warn)}

/* ------------------------------------------- three plans, one brief ------ */
.pn-card{padding:12px 13px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.pn-t{margin:0 0 8px;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3)}
.pn-l{margin:0;padding-left:17px;font-family:var(--ui);font-size:13.5px;line-height:1.7;
  color:var(--ink)}
.pn-l li{margin:0 0 4px}
.pn-q{margin:13px 0 8px;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink)}
.pn-opts{display:flex;flex-wrap:wrap;gap:6px}
.pn-o{text-align:left}
.pn-o.ok{border-color:var(--money);color:var(--money)}
.pn-o.no{border-color:var(--warn);color:var(--warn)}
.pn-why,.pn-ans{margin:0 0 4px;font-family:var(--ui);font-size:13px;line-height:1.7;
  color:var(--ink-2)}
.pn-ans{color:var(--ink)}
.pn-more{display:flex;align-items:center;gap:12px;margin-top:11px}
.pn-count{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}

.pn-board{margin-top:14px}
.pn-row{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(var(--cols,3),minmax(0,1fr));
  gap:5px;margin-bottom:5px;align-items:stretch}
.pn-rl{display:flex;align-items:center;gap:7px;padding:7px 9px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:8px;font-family:var(--ui);font-size:12px;
  line-height:1.4;color:var(--ink-2)}
.pn-n{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:17px;
  height:17px;border-radius:5px;background:var(--bg-4);font-family:var(--mono);font-size:10.5px;
  color:var(--ink-3)}
.pn-h{padding:8px 9px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:8px;
  font-family:var(--ui);line-height:1.4}
.pn-h b{display:block;font-size:12.5px;color:var(--ink)}
.pn-h span{display:block;margin-top:2px;font-size:10.5px;color:var(--ink-4)}
.pn-cell{display:flex;align-items:center;padding:7px 9px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:8px;font-family:var(--ui);font-size:11.5px;
  color:var(--ink-3)}
.pn-cell.w-you{border-color:var(--money);background:color-mix(in srgb,var(--money) 9%,transparent);
  color:var(--money);font-weight:600}
.pn-cell.w-creator{border-color:var(--accent-2);color:var(--accent-2)}
.pn-cell.w-audience{border-color:var(--open);color:var(--open)}
.pn-foot .pn-rl{background:var(--bg-3);color:var(--ink)}
.pn-tot{justify-content:center;font-family:var(--mono);font-size:12.5px;color:var(--ink);
  background:var(--bg-3)}
.pn-bs{margin:11px 0 0;font-family:var(--ui);font-size:13.5px;line-height:1.7;color:var(--ink)}

/* -------------------------------------------- two accounts, two screens -- */
.wc-grid{display:flex;flex-direction:column;gap:11px}
.wc-screen{padding:11px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.wc-st{margin:0 0 4px;font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--ink)}
.wc-sd{margin:0 0 10px;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-3)}
.wc-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.wc-cell{padding:10px 11px;background:var(--bg-3);border:1px solid var(--line);border-radius:10px}
.s0-motion .wc-cell{transition:border-color .18s var(--ease)}
.wc-cell.ok{border-color:var(--money)}
.wc-cell.no{border-color:var(--warn)}
.wc-at{margin:0 0 2px;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.wc-ad{margin:0 0 9px;font-family:var(--ui);font-size:11.5px;line-height:1.55;color:var(--ink-4)}
.wc-opts{display:flex;flex-direction:column;gap:5px}
.wc-opts .btn{text-align:left;font-size:11.5px}
.wc-res{margin:0 0 7px;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--accent)}
.wc-mk{margin:0 0 5px;font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--ink-3)}
.wc-cell.ok .wc-mk{color:var(--money)}
.wc-cell.no .wc-mk{color:var(--warn)}
.wc-why{margin:0;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-2)}
.wc-say{margin-top:11px}
.wc-todo{margin:0;font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.wc-close{margin:0;font-family:var(--ui);font-size:13.5px;line-height:1.7;color:var(--ink)}

/* --------------------------------------------------- the two queues ------ */
.qu-gate{padding:12px 13px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.qu-gq{margin:0 0 9px;font-family:var(--ui);font-size:13.5px;line-height:1.6;color:var(--ink)}
.qu-gopts{display:flex;flex-wrap:wrap;gap:6px}
.qu-gsay{margin-top:9px}
.qu-gw{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.qu-ctl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px;
  padding:11px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.qu-sec{display:flex;flex-direction:column;gap:5px;font-family:var(--ui);font-size:11.5px;
  line-height:1.55;color:var(--ink-3)}
.qu-sec b{color:var(--ink-2)}
.qu-sec input[type=range]{width:100%}
.qu-slots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;margin-top:12px}
.qu-slot{display:flex;align-items:flex-end;justify-content:center;height:64px;border-radius:7px;
  border:1px solid var(--line);background:var(--bg-2)}
.s0-motion .qu-slot{transition:background .18s var(--ease),border-color .18s var(--ease)}
.qu-slot span{padding:0 2px 4px;font-family:var(--ui);font-size:9px;letter-spacing:.02em;
  text-align:center;color:var(--ink-4)}
.qu-slot.ad{border-color:var(--warn);background:var(--warn-soft)}
.qu-slot.ad span{color:var(--warn)}
.qu-slot.mine{border-color:var(--accent);background:var(--accent-soft)}
.qu-slot.mine span{color:var(--accent)}
.qu-read{margin:11px 0 0;font-family:var(--ui);font-size:13px;line-height:1.7;color:var(--ink)}
.qu-read b{font-family:var(--mono);color:var(--accent)}
.qu-doc,.qu-unk,.qu-close{margin:9px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.7}
.qu-doc{color:var(--ink-3)}
.qu-unk{color:var(--ink-2)}
.qu-close{color:var(--ink)}

/* ------------------------------------------ three accounts, three units -- */
.ac-c{margin:0 0 10px;padding:11px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px;font-family:var(--ui);font-size:13.5px;line-height:1.7;color:var(--ink)}
.ac-opts{display:flex;flex-direction:column;gap:6px}
.ac-o{display:block;width:100%;text-align:left;line-height:1.55}
.ac-o b{display:block;font-family:var(--ui);font-size:12.5px;color:var(--ink)}
.ac-o span{display:block;margin-top:2px;font-family:var(--ui);font-size:11.5px;color:var(--ink-3)}
.ac-o.ok{border-color:var(--money)}
.ac-o.no{border-color:var(--warn)}
.ac-say{margin-top:10px}
.ac-why,.ac-alt,.ac-close{margin:0 0 7px;font-family:var(--ui);font-size:13px;line-height:1.7;
  color:var(--ink-2)}
.ac-alt span,.ac-close{display:block}
.ac-alt span{margin-bottom:2px;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4)}
.ac-close{color:var(--ink)}
.ac-more{display:flex;align-items:center;gap:12px;margin-top:10px}
.ac-count{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}

/* --------------------------------- the money moved, and what it destroyed  */
.in-note{margin:0 0 10px;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-4)}
.in-ctl{padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.in-sec{display:flex;flex-direction:column;gap:5px;font-family:var(--ui);font-size:11.5px;
  line-height:1.55;color:var(--ink-3)}
.in-sec input[type=range]{width:100%}
.in-sec b{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.in-bars{display:flex;flex-direction:column;gap:7px;margin:12px 0}
.in-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:9px;align-items:center}
.in-wk{font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.in-pair{display:flex;flex-direction:column;gap:3px}
.in-bar{position:relative;height:22px;border-radius:6px;background:var(--bg-2);overflow:hidden}
.in-bar::before{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:6px}
.in-bar.a::before{background:var(--accent-soft);border-right:2px solid var(--accent)}
.in-bar.b::before{background:var(--accent-2-soft);border-right:2px solid var(--accent-2)}
.s0-motion .in-bar::before{transition:width .22s var(--ease)}
.in-bar span{position:relative;display:block;padding:3px 8px;font-family:var(--ui);font-size:11px;
  white-space:nowrap;color:var(--ink-2)}
.in-gate{padding:12px 13px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.in-gq{margin:0 0 9px;font-family:var(--ui);font-size:13.5px;line-height:1.6;color:var(--ink)}
.in-gopts{display:flex;flex-wrap:wrap;gap:6px}
.in-gsay{margin-top:9px}
.in-gw{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.in-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0}
.in-box{padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}
.in-box.in-y{border-color:var(--money)}
.in-box.in-n{border-color:var(--open)}
.in-bt{margin:0 0 5px;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4)}
.in-box.in-y .in-bt{color:var(--money)}
.in-box.in-n .in-bt{color:var(--open)}
.in-bb{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.in-hs{margin:10px 0 0;font-family:var(--ui);font-size:13px;line-height:1.7;color:var(--ink)}
.in-refuse,.in-close{margin:10px 0 0;font-family:var(--ui);font-size:13px;line-height:1.7;
  color:var(--ink-2)}
.in-close{color:var(--ink)}

/* --------------------------------------- one post, four platforms -------- */
.sp-gate{padding:12px 13px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.sp-gq{margin:0 0 9px;font-family:var(--ui);font-size:13.5px;line-height:1.6;color:var(--ink)}
.sp-gopts{display:flex;flex-wrap:wrap;gap:6px}
.sp-gsay{margin-top:9px}
.sp-gw{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.sp-states{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:12px 0}
.sp-st{display:block;text-align:left;line-height:1.5}
.sp-st b{display:block;font-family:var(--ui);font-size:12.5px;color:var(--ink)}
.sp-st span{display:block;margin-top:2px;font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.sp-st.on{border-color:var(--accent);background:var(--accent-soft)}
.sp-rows{display:flex;flex-direction:column;gap:7px}
.sp-row{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1.8fr);gap:11px;
  align-items:center;padding:9px 11px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px}
.sp-p b{display:block;font-family:var(--ui);font-size:13px;color:var(--ink)}
.sp-p span{display:block;margin-top:2px;font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.sp-bar{position:relative;height:9px;border-radius:5px;background:var(--bg-4);overflow:hidden}
.sp-bar i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--accent);
  border-radius:5px}
.s0-motion .sp-bar i{transition:width .22s var(--ease)}
.sp-s{margin:0 0 3px;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-2)}
.sp-pool{margin:0;font-family:var(--ui);font-size:11px;line-height:1.55;color:var(--ink-4)}
.sp-note{margin:11px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-4)}
.sp-flip,.sp-close{margin:9px 0 0;font-family:var(--ui);font-size:13px;line-height:1.7;
  color:var(--ink-2)}
.sp-close{color:var(--ink)}

/* ------------------------------------------------ build the weighting ---- */
.wt-gate{padding:12px 13px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.wt-gq{margin:0 0 9px;font-family:var(--ui);font-size:13.5px;line-height:1.6;color:var(--ink)}
.wt-gopts{display:flex;flex-wrap:wrap;gap:6px}
.wt-gsay{margin-top:9px}
.wt-gw{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.wt-ctl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px;
  padding:11px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.wt-sec{display:flex;flex-direction:column;gap:4px;font-family:var(--ui)}
.wt-sec b{font-size:12.5px;color:var(--ink)}
.wt-sec span{font-size:11px;line-height:1.5;color:var(--ink-4)}
.wt-sec input[type=range]{width:100%;margin-top:3px}
.wt-v{font-family:var(--mono);font-size:11.5px;font-style:normal;color:var(--accent)}
.wt-warn{margin:11px 0;font-family:var(--ui);font-size:12px;line-height:1.7;color:var(--ink-3)}
.wt-rows{display:flex;flex-direction:column;gap:5px}
.wt-row{display:grid;grid-template-columns:78px minmax(0,1fr) 74px minmax(0,1.5fr);gap:9px;
  align-items:center;padding:7px 10px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:9px}
.wt-row.z{border-style:dashed;border-color:var(--line-2)}
.wt-n{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink)}
.wt-bar{position:relative;height:9px;border-radius:5px;background:var(--bg-4);overflow:hidden}
.wt-bar i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--accent);
  border-radius:5px}
.s0-motion .wt-bar i{transition:width .2s var(--ease)}
.wt-s{font-family:var(--mono);font-size:11.5px;text-align:right;color:var(--ink-2)}
.wt-sc{font-family:var(--ui);font-size:10.5px;line-height:1.5;color:var(--ink-4)}
.wt-note{margin:10px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-4)}
.wt-refuse,.wt-close{margin:10px 0 0;font-family:var(--ui);font-size:13px;line-height:1.7;
  color:var(--ink-2)}
.wt-close{color:var(--ink)}
.wt-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.wt-w{padding:9px 11px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px}
.wt-wt{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 4px}
.wt-wt b{font-family:var(--ui);font-size:12.5px;color:var(--ink)}
.wt-wt span{font-family:var(--mono);font-size:11px;color:var(--accent)}
.wt-wd{margin:0;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-3)}

/* ------------------------------------------------------------ narrow ----- */
@media (max-width:720px){
  .pn-row{grid-template-columns:minmax(0,1fr);gap:3px}
  .pn-cell{justify-content:space-between}
  .wc-cells,.in-two,.sp-states,.wt-why{grid-template-columns:minmax(0,1fr)}
  .qu-ctl,.wt-ctl{grid-template-columns:minmax(0,1fr)}
  .qu-slots{grid-template-columns:repeat(5,minmax(0,1fr))}
  .sp-row{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .wt-row{grid-template-columns:minmax(0,1fr) 70px;row-gap:4px}
  .wt-bar,.wt-sc{grid-column:1 / -1}
}