/* ==========================================================================
   Connected Social, chapter 6: one brand, everything connected.

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

   MOTION IS OPT IN. Every transition below sits inside .s6-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.

     sDiagnose    dia-  an account nobody has explained
     sFourBoards  fbd-  nine rows, four situations
     sSameBoard   smb-  three identical boards
     sCarry       car-  carry an audience out
     sAsset       ast-  one file, six places
     sFeed        pfd-  eight faults, money for three
     sShop        shp-  two returns, one word
     sAllocate    alo-  split the money, then defend it
     sGiveUp      gvn-  what this account can no longer answer
   ========================================================================== */

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

.btn.g-best,.btn.ok{border-color:var(--money)}
.btn.g-bad,.btn.no{border-color:var(--warn)}

/* who holds a decision, shared by the two board exhibits */
.w-you{color:var(--money)}
.w-platform{color:var(--ink-3)}
.w-creator{color:var(--accent)}
.w-audience{color:var(--open)}

/* ------------------------------------------- an account nobody explained - */
.dia-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.dia-f{padding:9px 11px;background:var(--bg-2);border:1px solid var(--line);border-radius:11px}
.dia-fn{display:inline-block;min-width:18px;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-4)}
.dia-ft{margin:0 0 5px;font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink)}
.dia-fw{margin:0;font-family:var(--ui);font-size:11px;line-height:1.5;color:var(--ink-4)}

.dia-gate{margin-top:13px;padding:12px 13px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px}
.dia-gq,.dia-fq{margin:0 0 9px;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink)}
.dia-gopts,.dia-fopts,.dia-po{display:flex;flex-wrap:wrap;gap:6px}
.dia-gw,.dia-pw,.dia-fw2{margin:9px 0 0;font-family:var(--ui);font-size:12px;line-height:1.65;
  color:var(--ink-3)}

.dia-build{margin-top:14px}
.dia-parts{display:flex;flex-direction:column;gap:11px}
.dia-p{padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.dia-pq{margin:0 0 8px;font-family:var(--ui);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4)}
.dia-sent{margin:14px 0 0;padding:12px 13px;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:12px}
.dia-lab{display:block;margin-bottom:6px;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.dia-sent b{display:block;font-family:var(--display);font-size:15px;line-height:1.5;color:var(--ink)}
.dia-sent b.ok{color:var(--money)}
.dia-sent b.no{color:var(--ink)}
.dia-sent i{display:block;margin-top:7px;font-family:var(--ui);font-size:11.5px;line-height:1.55;
  color:var(--warn);font-style:normal}
.dia-first{margin-top:14px}
.dia-fg{margin:10px 0 0;font-family:var(--ui);font-size:12.5px;font-weight:600}
.dia-fg.g-best{color:var(--money)}
.dia-fg.g-ok{color:var(--open)}
.dia-fg.g-poor{color:var(--warn)}
.dia-close{margin:11px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}
.btn.dia-f1.g-ok,.btn.alo-ob.g-ok{border-color:var(--open)}
.btn.dia-f1.g-poor,.btn.alo-ob.g-poor{border-color:var(--warn);opacity:.75}

/* -------------------------------------------- nine rows, four situations - */
.fbd-gate{padding:12px 13px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.fbd-gq{margin:0 0 10px;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink)}
.fbd-gopts{display:flex;flex-wrap:wrap;gap:6px}
.fbd-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.btn.fbd-t.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
/* One label column, one column per situation, one for whether the row moves.
   --sits is set by the component, the same way --cols is in social_kit.css. */
.fbd-grid{--sits:4;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--bg-2)}
.fbd-row{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(var(--sits,4),minmax(0,1fr)) 64px;
  border-bottom:1px solid var(--line)}
.fbd-row:last-child{border-bottom:0}
.fbd-head{background:var(--bg-3)}
.fbd-rl{padding:7px 9px;font-family:var(--ui);font-size:11.5px;line-height:1.4;color:var(--ink-2)}
.fbd-n{display:inline-block;min-width:16px;font-family:var(--mono);font-size:10px;color:var(--ink-4)}
.fbd-h{padding:7px 9px;font-family:var(--ui);font-size:10.5px;line-height:1.4;color:var(--ink-4)}
.fbd-h b{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.fbd-c{padding:7px 9px;font-family:var(--ui);font-size:11px;line-height:1.4}
.fbd-mv{font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-4)}
.fbd-row.mv{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.fbd-row.mv .fbd-mv{color:var(--accent)}
.s6-motion .fbd-row{transition:background var(--t2) var(--ease)}
.fbd-note{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}
.fbd-tot{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:7px;
  margin-top:12px}
.fbd-tc{padding:8px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  text-align:center}
.fbd-tc.on{border-color:var(--accent)}
.fbd-tc b{display:block;font-family:var(--mono);font-size:16px;color:var(--ink)}
.fbd-tc span{font-family:var(--ui);font-size:10.5px;color:var(--ink-4)}
.fbd-close{margin:13px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}

@media (max-width:720px){
  .fbd-row{grid-template-columns:minmax(0,1.4fr) repeat(var(--sits,4),minmax(0,1fr));}
  .fbd-mh,.fbd-mv{display:none}
}

/* --------------------------------------------- three identical boards ---- */
.smb-ask{margin:0 0 11px;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink)}
.smb-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:9px}
.smb-b{padding:10px 11px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.smb-b.open{border-color:var(--line-2)}
.smb-t{margin:0 0 8px;font-family:var(--ui);font-size:11.5px;line-height:1.5;color:var(--ink-2);
  min-height:34px}
.smb-rows{display:flex;flex-direction:column;gap:2px;margin-bottom:9px}
.smb-r{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:6px;align-items:baseline}
.smb-n{font-family:var(--mono);font-size:9.5px;color:var(--ink-4)}
.smb-l{font-family:var(--ui);font-size:10.5px;color:var(--ink-4)}
.smb-w{font-family:var(--ui);font-size:10.5px;font-weight:600;text-align:right}
.smb-o{display:flex;gap:5px}
.btn.smb-c.on{border-color:var(--accent)}
.smb-s{margin:9px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.smb-score{margin:9px 0 0;font-family:var(--ui);font-size:13px;color:var(--ink-2)}
.smb-score b{font-family:var(--mono);color:var(--accent)}
.smb-close{margin:10px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}

/* ------------------------------------------------- carry an audience out - */
.car-gate,.ast-gate,.shp-gate,.gvn-gate{padding:12px 13px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:12px}
.car-gq,.car-gq2,.ast-gq,.shp-gq,.gvn-gq{margin:0 0 10px;font-family:var(--ui);font-size:13px;
  line-height:1.6;color:var(--ink)}
.car-gopts,.car-gopts2,.ast-gopts,.shp-gopts,.gvn-gopts{display:flex;flex-wrap:wrap;gap:6px}
.car-gw,.ast-gw,.shp-gw,.gvn-gw{margin:9px 0 0;font-family:var(--ui);font-size:12px;
  line-height:1.65;color:var(--ink-3)}
.car-live{margin-top:13px}
.car-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:7px}
.btn.car-k{display:block;text-align:left;white-space:normal;padding:9px 11px}
.btn.car-k b{display:block;font-family:var(--ui);font-size:12.5px;margin-bottom:3px}
.btn.car-k span{display:block;font-family:var(--ui);font-size:11px;line-height:1.5;
  color:var(--ink-4)}
.btn.car-k.on{border-color:var(--accent);background:var(--accent-soft)}
.car-guess{margin-top:12px}
.car-out{margin-top:12px}
.car-flow{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:8px;
  align-items:center}
.car-side{padding:10px 11px;background:var(--bg-2);border:1px solid var(--line);border-radius:11px}
.car-side.lost{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 6%,transparent)}
.car-side span{display:block;margin-bottom:5px;font-family:var(--ui);font-size:10px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.car-side p{margin:0;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-2)}
.car-arrow{font-family:var(--mono);font-size:18px;color:var(--ink-4);text-align:center}
.car-cap,.car-cost{margin:11px 0 0;font-family:var(--ui);font-size:12px;line-height:1.65;
  color:var(--ink-3)}
.car-cap span,.car-cost span{display:block;font-family:var(--ui);font-size:10px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.car-close{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}

@media (max-width:720px){
  .car-flow{grid-template-columns:minmax(0,1fr)}
  .car-arrow{transform:rotate(90deg)}
}

/* ----------------------------------------------------- one file, six places */
.ast-live{margin-top:13px}
.ast-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;
  padding:11px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.ast-shapes{display:flex;flex-wrap:wrap;gap:5px}
.btn.ast-sh{padding:7px 9px}
.btn.ast-sh b{display:block;font-family:var(--ui);font-size:12px}
.btn.ast-sh span{display:block;font-family:var(--ui);font-size:10px;color:var(--ink-4)}
.btn.ast-sh.on{border-color:var(--accent);background:var(--accent-soft)}
.ast-len{display:flex;flex-direction:column;gap:5px;font-family:var(--ui);font-size:11.5px;
  color:var(--ink-3)}
.ast-len input[type=range]{width:100%}
.ast-lv{font-family:var(--mono);font-size:13px;color:var(--ink)}
.ast-checks{display:flex;flex-direction:column;gap:5px}
.ast-checks label{font-family:var(--ui);font-size:11.5px;line-height:1.5;color:var(--ink-2)}
.ast-count{margin:12px 0 8px;font-family:var(--ui);font-size:13.5px;color:var(--ink)}
.ast-count b{font-family:var(--mono);color:var(--accent)}
.ast-rows{display:flex;flex-direction:column;gap:5px}
.ast-row{display:grid;grid-template-columns:74px minmax(0,1fr) minmax(0,1.8fr) 132px;gap:9px;
  align-items:center;padding:7px 10px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:9px}
.s6-motion .ast-row{transition:border-color var(--t2) var(--ease),background var(--t2) var(--ease)}
.ast-row.v-ok{border-color:var(--money);background:color-mix(in srgb,var(--money) 8%,transparent)}
.ast-row.v-crop,.ast-row.v-silent,.ast-row.v-short,.ast-row.v-cover{opacity:.8}
.ast-p{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--ink-3)}
.ast-t{font-family:var(--ui);font-size:12px;color:var(--ink-2)}
.ast-pub{font-family:var(--ui);font-size:11px;line-height:1.5;color:var(--ink-4)}
.ast-by{display:block;margin-top:3px;font-family:var(--mono);font-size:10px;font-style:normal;
  color:var(--ink-3)}
.ast-ceil{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}
.ast-v{font-family:var(--ui);font-size:11px;font-weight:600;text-align:right}
.ast-row.v-ok .ast-v{color:var(--money)}
.ast-row.v-crop .ast-v,.ast-row.v-cover .ast-v{color:var(--open)}
.ast-row.v-silent .ast-v,.ast-row.v-short .ast-v{color:var(--warn)}
.ast-close{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}

@media (max-width:720px){
  .ast-row{grid-template-columns:minmax(0,1fr) auto;row-gap:3px}
  .ast-pub{grid-column:1 / -1}
}

/* ------------------------------------------------- eight faults, fix three */
.pfd-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px}
.btn.pfd-f{display:block;text-align:left;white-space:normal;padding:9px 11px}
.btn.pfd-f.on{border-color:var(--accent);background:var(--accent-soft)}
.btn.pfd-f.bid{border-color:var(--money)}
.pfd-t{display:block;font-family:var(--ui);font-size:12px;line-height:1.5}
.pfd-tag{display:block;margin-top:4px;font-family:var(--ui);font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-4)}
.pfd-go{display:flex;align-items:center;gap:12px;margin-top:11px}
.pfd-n{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.pfd-say{margin-top:13px}
.pfd-score{margin:0 0 11px;font-family:var(--ui);font-size:13px;color:var(--ink-2)}
.pfd-score b{font-family:var(--mono);color:var(--accent)}
.pfd-why{display:flex;flex-direction:column;gap:6px}
.pfd-w{padding:9px 11px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px}
.pfd-w.bid{border-color:var(--money)}
.pfd-w.on{background:var(--bg-3)}
.pfd-wt{margin:0 0 4px;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink-2)}
.pfd-ww{margin:0;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.pfd-close{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}

/* ---------------------------------------------------- two returns, one word */
.shp-live{margin-top:13px}
.shp-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;
  padding:11px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.shp-l{display:flex;flex-direction:column;gap:5px;font-family:var(--ui);font-size:11.5px;
  line-height:1.5;color:var(--ink-3)}
.shp-l input[type=range]{width:100%}
.shp-v{font-family:var(--mono);font-size:13px;color:var(--ink)}
.shp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:9px;
  margin-top:12px}
.shp-card{padding:11px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.s6-motion .shp-card{transition:border-color var(--t2) var(--ease)}
.shp-card.win{border-color:var(--money)}
.shp-t{margin:0 0 6px;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.shp-who,.shp-pop{margin:0 0 5px;font-family:var(--ui);font-size:11.5px;line-height:1.55;
  color:var(--ink-3)}
.shp-pop{color:var(--ink-4)}
.shp-num{display:flex;align-items:baseline;gap:8px;margin:9px 0 6px}
.shp-num b{font-family:var(--mono);font-size:24px;color:var(--ink)}
.shp-card.win .shp-num b{color:var(--money)}
.shp-num span{font-family:var(--ui);font-size:10.5px;line-height:1.45;color:var(--ink-4)}
.shp-sum{margin:0;font-family:var(--ui);font-size:11px;line-height:1.55;color:var(--ink-4)}
.shp-close,.shp-warn{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;
  color:var(--ink)}
.shp-warn{font-size:12.5px;color:var(--ink-3)}

/* --------------------------------------------- split it, then defend it --- */
.alo-lines{display:flex;flex-direction:column;gap:7px}
.alo-l{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) 116px;gap:11px;
  align-items:center;padding:8px 11px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px}
.alo-lt b{display:block;font-family:var(--ui);font-size:12.5px;color:var(--ink)}
.alo-lt span{display:block;font-family:var(--ui);font-size:10.5px;color:var(--ink-4)}
.alo-l input[type=range]{width:100%}
.alo-lv{text-align:right}
.alo-lv b{display:block;font-family:var(--mono);font-size:14px;color:var(--ink)}
.alo-lv span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-4)}
.alo-go{display:flex;align-items:center;gap:12px;margin-top:11px;flex-wrap:wrap}
.alo-sum{font-family:var(--ui);font-size:12.5px;color:var(--ink-3)}
.alo-sum b{font-family:var(--mono);font-size:14px}
.alo-sum b.ok{color:var(--money)}
.alo-sum b.no{color:var(--warn)}
.alo-checks{margin-top:13px}
.alo-ch{margin:0 0 8px;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.alo-c{padding:9px 11px;margin-bottom:6px;background:var(--bg-2);border:1px solid var(--warn);
  border-radius:10px}
.alo-c.none{border-color:var(--money)}
.alo-ct{margin:0 0 4px;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink-2)}
.alo-cs{margin:0;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.alo-obj{margin-top:15px;display:flex;flex-direction:column;gap:11px}
.alo-o{padding:11px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.alo-ow{margin:0 0 4px;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.alo-oq{margin:0 0 9px;font-family:var(--display);font-size:14px;line-height:1.55;color:var(--ink)}
.alo-oo{display:flex;flex-direction:column;gap:5px}
.btn.alo-ob{display:block;text-align:left;white-space:normal;padding:8px 11px;font-size:12px;
  line-height:1.5}
.btn.alo-ob.on{background:var(--bg-3)}
.alo-oy{margin:9px 0 0;font-family:var(--ui);font-size:12px;line-height:1.65;color:var(--ink-3)}
.alo-oy.g-best{color:var(--ink-2)}
.alo-close{margin:13px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}

@media (max-width:720px){
  .alo-l{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .alo-lv{text-align:left}
}

/* ------------------------------------- what it can no longer answer ------- */
.gvn-live{margin-top:13px}
.gvn-bud{display:flex;flex-direction:column;gap:5px;padding:11px 12px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:12px;font-family:var(--ui);font-size:11.5px;
  color:var(--ink-3)}
.gvn-bud input[type=range]{width:100%}
.gvn-bv{font-family:var(--mono);font-size:15px;color:var(--ink)}
.gvn-spent{margin:11px 0;font-family:var(--ui);font-size:13px;color:var(--ink-2)}
.gvn-spent b{font-family:var(--mono);color:var(--accent)}
.gvn-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px}
.gvn-i{display:flex;flex-direction:column;padding:10px 12px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:12px}
.s6-motion .gvn-i{transition:border-color var(--t2) var(--ease)}
.gvn-i.on{border-color:var(--money);background:color-mix(in srgb,var(--money) 6%,transparent)}
.gvn-i.k-never{border-style:dashed}
.gvn-i.k-free{border-color:var(--open)}
.gvn-q{margin:0 0 8px;font-family:var(--display);font-size:13.5px;line-height:1.5;color:var(--ink)}
.gvn-buy,.gvn-not{margin:0 0 7px;font-family:var(--ui);font-size:11.5px;line-height:1.6;
  color:var(--ink-3)}
.gvn-not{color:var(--ink-4)}
.gvn-buy span,.gvn-not span{display:block;font-family:var(--ui);font-size:9.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.gvn-foot{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:auto;
  padding-top:8px;border-top:1px solid var(--line)}
.gvn-price{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.gvn-left{margin-top:14px;padding:11px 12px;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:12px}
.gvn-lt{margin:0 0 7px;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.gvn-ul{margin:0;padding-left:17px}
.gvn-ul li{font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-2)}
.gvn-all{margin:0;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-2)}
.gvn-close{margin:13px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}