/* ==========================================================================
   Connected Social, chapter 3: creator partnerships. Component styles.

   NOTHING HERE INTRODUCES A COLOUR. Every value is a variable already declared
   in academy.css, and the only transitions declared anywhere in the file are
   switched off by .s3-still, which the components add when the reader has asked
   for reduced motion.

     sAxes       ax-   place six real deals on the two questions
     sCreatorDay cd-   three moments in one day, one of them blocked
     sCatGate    cg-   guess which businesses may not run partner content
     sThree      tp-   four goals, three products, and one that cannot be done
     sVet        vt-   counted, or guessed
     sBrief      bf-   write a brief and see which doors it closed
     sRate       rt-   build a rate card, then look for the sources
     sClause     cq-   pick five clauses, then run the campaign
     sAmp        am-   which of these can actually be advertised
     sDisclose   ds-   eight published examples, disclose or not
     sEvid       ev-   judge four studies before you know who paid
   ========================================================================== */

/* shared marking line, so the wording and the colour do not drift ---------- */
.s3-mark{margin:0 0 9px;font-family:var(--ui);font-size:12px;font-weight:600}
.s3-mark.ok{color:var(--money)}
.s3-mark.no{color:var(--warn)}

/* the only transitions in the chapter, and the switch that removes them ---- */
.ax-o,.cg-p,.vt-p,.am-p,.bf-o,.rt-o,.cq-c,.tp-o,.ds-o,.ev-o,.cd-o{
  transition:background-color .12s linear,border-color .12s linear}
.s3-still .ax-o,.s3-still .cg-p,.s3-still .vt-p,.s3-still .am-p,.s3-still .bf-o,
.s3-still .rt-o,.s3-still .cq-c,.s3-still .tp-o,.s3-still .ds-o,.s3-still .ev-o,
.s3-still .cd-o{transition:none}

/* shared closing line, used by nine of the eleven ------------------------- */
.ax-so,.cd-so,.cg-so,.tp-so,.vt-so,.bf-so,.rt-so,.cq-so,.am-so,.ds-so,.ev-so{
  margin:11px 0 0;padding:11px 13px;background:var(--bg-3);border-radius:11px;
  font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}
.ax-score,.cg-score,.tp-score,.vt-score,.cq-score,.am-score,.ds-score,.ev-score{
  margin:11px 0 6px;font-family:var(--ui);font-size:15px;font-weight:600;color:var(--ink)}

/* ------------------------------------------------------- the two questions --- */
.ax-head{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:10px}
.ax-n{font-family:var(--ui);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4)}
.ax-d{margin:0 0 12px;font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--ink)}
.ax-qs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px}
.ax-q{padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}
.ax-q p{margin:0 0 7px;font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.ax-q>div{display:flex;flex-wrap:wrap;gap:6px}
.ax-o{font-size:11.5px;padding:5px 11px}
.ax-o.on{background:var(--accent-soft);border-color:var(--accent)}
.ax-o.truth{border-color:var(--money);background:color-mix(in srgb,var(--money) 12%,transparent)}
.ax-o.no{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.ax-more{display:flex;gap:10px;align-items:center;margin-top:11px}
.ax-say{margin-top:11px}
.ax-w{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}

/* ---------------------------------------------------- a day in the life --- */
.cd-head{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:10px}
.cd-when{font-family:var(--mono);font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.cd-count{font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.cd-s{margin:0 0 10px;font-family:var(--ui);font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.cd-q{margin:0 0 9px;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.cd-opts{display:flex;flex-direction:column;gap:7px}
.cd-o{text-align:left;font-size:12.5px;line-height:1.5;padding:9px 11px;white-space:normal}
.cd-o.ok{border-color:var(--money);background:color-mix(in srgb,var(--money) 9%,transparent)}
.cd-o.no{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,transparent)}
.cd-say{margin-top:11px}
.cd-w{margin:0 0 8px;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-3)}
.cd-w b{display:block;color:var(--ink-2);margin-bottom:2px}
.cd-w.ok b{color:var(--money)}
.cd-more{margin-top:10px}

/* -------------------------------------------------------- the category gate --- */
.cg-list,.vt-list,.am-list{display:flex;flex-direction:column;gap:7px}
.cg-i,.vt-i,.am-i{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;
  align-items:start;padding:9px 11px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg-2)}
.cg-i.ok,.vt-i.ok,.am-i.ok{border-color:var(--money);
  background:color-mix(in srgb,var(--money) 6%,transparent)}
.cg-i.no,.vt-i.no,.am-i.no{border-color:var(--warn);
  background:color-mix(in srgb,var(--warn) 6%,transparent)}
.cg-t,.vt-t,.am-t{margin:0;font-family:var(--ui);font-size:13px;line-height:1.5;color:var(--ink)}
.cg-v,.vt-v{margin:5px 0 0;font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.cg-w,.vt-w,.am-w{margin:5px 0 0;font-family:var(--ui);font-size:12px;line-height:1.6;
  color:var(--ink-2)}
.cg-o,.vt-o,.am-o{display:flex;gap:5px;flex-shrink:0}
.cg-p,.vt-p,.am-p{font-size:11px;padding:4px 9px}
.cg-p.on,.vt-p.on,.am-p.on{background:var(--accent-soft);border-color:var(--accent)}
.cg-p.truth,.vt-p.truth,.am-p.truth{box-shadow:inset 0 -2px 0 var(--money)}
.cg-more,.vt-more,.am-more,.cq-more{display:flex;gap:10px;align-items:center;margin-top:11px}
.cg-count,.vt-count,.am-count,.cq-count,.tp-count{font-family:var(--ui);font-size:11px;
  color:var(--ink-4)}

/* ------------------------------------------------------------ three products --- */
.tp-g{margin:0 0 11px;font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--ink)}
.tp-opts{display:flex;flex-direction:column;gap:7px}
.tp-o{text-align:left;font-size:12.5px;line-height:1.5;padding:9px 11px;white-space:normal}
.tp-o.ok{border-color:var(--money);background:color-mix(in srgb,var(--money) 9%,transparent)}
.tp-o.no{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,transparent)}
.tp-say{margin-top:11px}
.tp-w{margin:0 0 10px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.tp-card{padding:12px 13px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-2)}
.tp-ct{margin:0 0 6px;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.tp-cd{margin:0 0 9px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.tp-ck{margin:0;padding-top:8px;border-top:1px solid var(--line);font-family:var(--ui);
  font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.tp-ck span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:2px}
.tp-more{display:flex;gap:10px;align-items:center;margin-top:11px}

/* ------------------------------------------------------------- write a brief --- */
.bf-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.bf-c{padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}
.bf-ct{margin:0 0 7px;font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.bf-c>div{display:flex;flex-wrap:wrap;gap:6px}
.bf-o{font-size:11.5px;padding:5px 11px}
.bf-o.on{background:var(--accent-soft);border-color:var(--accent)}
.bf-gate,.rt-gate{margin-top:12px;padding:12px;background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:12px}
.bf-gq,.rt-gq{margin:0 0 9px;font-family:var(--ui);font-size:13px;line-height:1.55;
  color:var(--ink-2)}
.bf-gopts,.rt-gopts{display:flex;flex-wrap:wrap;gap:8px}
.bf-g,.rt-g{font-size:12px}
.bf-out,.rt-out{margin-top:12px}
.bf-gw,.rt-gw{margin:0 0 11px;font-family:var(--ui);font-size:12.5px;line-height:1.65;
  color:var(--ink-2)}
.bf-verdict{margin:0 0 11px;padding:11px 13px;border-radius:11px;font-family:var(--ui);
  font-size:14px;font-weight:600;line-height:1.5}
.bf-verdict.y{border:1px solid var(--money);background:color-mix(in srgb,var(--money) 9%,transparent);
  color:var(--ink)}
.bf-verdict.n{border:1px solid var(--warn);background:color-mix(in srgb,var(--warn) 9%,transparent);
  color:var(--ink)}
.bf-rows{display:flex;flex-direction:column;gap:7px}
.bf-r{padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}
.bf-r.y{border-color:var(--money)}
.bf-r.n{border-color:var(--warn)}
.bf-rt{margin:0 0 5px;font-family:var(--ui);font-size:11.5px;color:var(--ink-3)}
.bf-rt b{color:var(--ink);font-weight:600}
.bf-rw{margin:0 0 7px;font-family:var(--ui);font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.bf-rg{margin:0;padding-top:7px;border-top:1px solid var(--line);font-family:var(--ui);
  font-size:11.5px;line-height:1.55;color:var(--ink-4)}
.bf-rg span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:2px}

/* ------------------------------------------------------------ the rate card --- */
.rt-ins{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.rt-i{padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}
.rt-i.y{border-color:var(--money)}
.rt-i.n{border-color:var(--warn)}
.rt-it{margin:0 0 7px;font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);display:flex;justify-content:space-between;gap:8px}
.rt-it em{font-style:normal;letter-spacing:0}
.rt-i.y .rt-it em{color:var(--money)}
.rt-i.n .rt-it em{color:var(--warn)}
.rt-i>div{display:flex;flex-wrap:wrap;gap:6px}
.rt-o{font-size:11.5px;padding:5px 11px}
.rt-o.on{background:var(--accent-soft);border-color:var(--accent)}
.rt-src{margin:8px 0 0;padding-top:7px;border-top:1px solid var(--line);font-family:var(--ui);
  font-size:11px;line-height:1.55;color:var(--ink-4)}
.rt-total{margin:12px 0 0;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;
  background:var(--bg-3);font-family:var(--ui)}
.rt-total span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:3px}
.rt-total b{font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums}
.rt-anchor{margin:0;padding:11px 13px;border:1px solid var(--money);border-radius:11px;
  background:color-mix(in srgb,var(--money) 7%,transparent);font-family:var(--ui);font-size:12.5px;
  line-height:1.65;color:var(--ink-2)}
.rt-anchor span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:3px}

/* ---------------------------------------------------------- pick the clauses --- */
.cq-list{display:flex;flex-direction:column;gap:6px}
.cq-c{text-align:left;font-size:12.5px;line-height:1.5;padding:9px 11px;white-space:normal}
.cq-c.on{background:var(--accent-soft);border-color:var(--accent)}
.cq-say{margin-top:11px}
.cq-e,.cq-d{padding:10px 12px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg-2);margin-bottom:7px}
.cq-e.y{border-color:var(--money);background:color-mix(in srgb,var(--money) 6%,transparent)}
.cq-e.n{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 6%,transparent)}
.cq-et{margin:0 0 5px;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.cq-ew{margin:0;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-2)}

/* --------------------------------------------------------- disclose, or not --- */
.ds-head,.ev-head{display:flex;justify-content:flex-end;border-bottom:1px solid var(--line);
  padding-bottom:7px;margin-bottom:10px}
.ds-n,.ev-n{font-family:var(--ui);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4)}
.ds-t,.ev-t{margin:0 0 12px;font-family:var(--ui);font-size:14px;line-height:1.65;color:var(--ink)}
.ds-opts{display:flex;flex-wrap:wrap;gap:8px}
.ds-o{font-size:12.5px}
.ds-o.ok{border-color:var(--money);background:color-mix(in srgb,var(--money) 10%,transparent)}
.ds-o.no{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.ds-say,.ev-say{margin-top:11px}
.ds-w{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.ds-more,.ev-more{margin-top:10px}

/* ------------------------------------------------------------ four studies --- */
.ev-opts{display:flex;flex-direction:column;gap:7px}
.ev-o{text-align:left;font-size:12.5px;line-height:1.5;padding:9px 11px;white-space:normal}
.ev-o.ok{border-color:var(--money);background:color-mix(in srgb,var(--money) 9%,transparent)}
.ev-o.no{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,transparent)}
.ev-f{margin:0 0 9px;padding:10px 12px;border:1px solid var(--line-2);border-radius:11px;
  background:var(--bg-3);font-family:var(--ui);font-size:12.5px;line-height:1.6;color:var(--ink)}
.ev-f span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:3px}
.ev-w{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}

@media (max-width:720px){
  .ax-qs,.bf-choices,.rt-ins{grid-template-columns:minmax(0,1fr)}
  .cg-i,.vt-i,.am-i{grid-template-columns:minmax(0,1fr);grid-template-areas:"b" "o"}
  .cg-b,.vt-b,.am-b{grid-area:b}
  .cg-o,.vt-o,.am-o{grid-area:o;margin-top:6px}
}