/* ==========================================================================
   Connected Social, chapter 2: organic social. Component styles.

   Nothing here introduces a colour. Every value is a variable already declared
   in academy.css, which is the rule that keeps five Academies looking like one
   platform rather than five products.

     sOrganicChain  oc-   the seven steps, and the one with no way back
     sOrganicDay    od-   three moments in a day with no dashboard
     sThreeIdeas    th-   three posts, and who chose the winner
     sPool          po-   the candidate pool, per screen
     sEligible      eg-   which of eight never entered the running
     sWork          wk-   six jobs, one job title
     sListen        ls-   what a listening tool can actually answer
     sFindable      fd-   what can be optimised, and what is documented nowhere
     sMerge         mg-   can you write an honest organic report here
     sBoost         bo-   boost or build, three times
     sBench         bm-   two reports, two answers, overlapping years
     sValue         vl-   build a valuation and watch it fall over
     sFolklore      fk-   ten things everybody believes

   REDUCED MOTION. Every component adds `.s2` and, where the reader has asked
   for less movement, `.s2-still`. One rule at the foot of this file turns every
   transition off rather than each component remembering to.
   ========================================================================== */

/* ------------------------------------------------------- shared -------- */
.s2-mark{margin:0 0 9px;font-family:var(--ui);font-size:12px;font-weight:600}
.s2-mark.ok{color:var(--money)}
.s2-mark.no{color:var(--warn)}

.s2 .btn.truth{box-shadow:inset 0 0 0 1px var(--money)}

/* --------------------------------------------------- the chain --------- */
.oc-gate{padding:12px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:12px}
.oc-gopts,.th-gopts,.fd-gopts,.bm-gopts,.bo-gopts{display:flex;flex-wrap:wrap;gap:8px}
.oc-why{margin:0 0 12px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.oc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.oc-s{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-2);
  transition:background .18s var(--ease)}
.oc-s.shut{opacity:.4;background:transparent}
.oc-s.key{border-color:var(--accent);background:var(--accent-soft)}
.oc-n{display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--bg-4);font-family:var(--ui);font-size:11px;
  color:var(--ink-3)}
.oc-t{margin:0;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink);line-height:1.45}
.oc-who{margin:5px 0 0;font-family:var(--ui);font-size:11.5px;color:var(--ink-3)}
.oc-who span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4)}
.oc-d{margin:7px 0 0;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-2)}
.oc-more{display:flex;align-items:center;gap:10px;margin-top:11px}
.oc-count,.po-count,.ls-count,.mg-count,.bo-count,.eg-count,.wk-count,.fk-count,.vl-count,
.od-count{font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.oc-so{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}

/* ------------------------------------------------------ the day -------- */
.od-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.od-when{font-family:var(--mono);font-size:15px;color:var(--accent)}
.od-s{margin:0 0 9px;font-family:var(--ui);font-size:13.5px;line-height:1.65;color:var(--ink)}
.od-q{margin:0 0 9px;font-family:var(--ui);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.od-opts{display:flex;flex-direction:column;gap:7px}
.od-o{text-align:left;line-height:1.5}
.od-o.ok{border-color:var(--money)}
.od-o.no{border-color:var(--warn)}
.od-say{margin-top:11px}
.od-w{margin:0 0 8px;padding:10px 12px;border-radius:10px;background:var(--bg-3);
  font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-3)}
.od-w.ok{background:var(--money-soft);color:var(--ink-2)}
.od-w b{display:block;margin-bottom:4px;color:var(--ink)}
.od-so,.th-so,.po-so,.eg-so,.wk-so,.ls-so,.fd-so,.mg-so,.bo-so,.bm-so,.vl-so,.fk-so{
  margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}

/* ------------------------------------------------ three ideas ---------- */
.th-tabs,.bm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 11px}
.th-t.on,.bm-t.on{border-color:var(--accent);background:var(--accent-soft)}
.th-bars{display:flex;flex-direction:column;gap:8px}
.th-bar{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) 46px;gap:10px;
  align-items:center}
.th-lab{font-family:var(--ui);font-size:12px;color:var(--ink-2)}
.th-track{position:relative;height:20px;border-radius:6px;background:var(--bg-4);overflow:hidden}
.th-track i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--accent) 34%,transparent);
  transition:width .3s var(--ease)}
.th-bar.win .th-track i{background:color-mix(in srgb,var(--money) 42%,transparent)}
.th-pc{font-family:var(--ui);font-size:12.5px;text-align:right;color:var(--ink);
  font-variant-numeric:tabular-nums}
.th-d{margin:11px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.th-read{margin:9px 0 0;padding:10px 12px;background:var(--bg-3);border-radius:10px;
  font-family:var(--ui);font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.th-read span,.po-worth span,.mg-cost span{display:block;font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}

/* --------------------------------------------- the candidate pool ------ */
.po-list,.ls-list,.mg-list,.bo-list{display:flex;flex-direction:column;gap:9px}
.po-r,.ls-r,.mg-r,.bo-c{padding:11px 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg-2)}
.po-r.ok,.ls-r.ok,.mg-r.ok,.bo-c.ok{border-color:var(--money)}
.po-r.no,.ls-r.no,.mg-r.no,.bo-c.no{border-color:var(--warn)}
.po-t,.ls-t,.mg-t,.bo-t{margin:0 0 8px;font-family:var(--ui);font-size:13px;font-weight:600;
  line-height:1.5;color:var(--ink)}
.po-o,.ls-o,.mg-o,.bo-o{display:flex;flex-wrap:wrap;gap:7px}
.po-p.on,.ls-p.on,.mg-p.on,.bo-p.on{border-color:var(--accent);background:var(--accent-soft)}
.po-w,.ls-w,.mg-w,.bo-w,.eg-w,.wk-w,.fk-w{margin:9px 0 0;font-family:var(--ui);font-size:12px;
  line-height:1.65;color:var(--ink-2)}
.po-worth,.mg-cost{margin:9px 0 0;padding-top:8px;border-top:1px solid var(--line);
  font-family:var(--ui);font-size:11.5px;line-height:1.55;color:var(--ink-3)}
.po-more,.ls-more,.mg-more,.bo-more,.eg-more,.wk-more,.fk-more,.vl-more,.od-more{
  display:flex;align-items:center;gap:10px;margin-top:11px}
.po-score,.ls-score,.mg-score,.eg-score,.wk-score,.fk-score{margin:0 0 6px;font-family:var(--ui);
  font-size:12px;font-weight:600;color:var(--ink)}

/* -------------------------------------------------- eligibility -------- */
.eg-item,.wk-item,.fk-item{margin:0 0 10px;font-family:var(--ui);font-size:14px;line-height:1.6;
  color:var(--ink)}
.eg-opts,.wk-opts,.fk-opts{display:flex;flex-wrap:wrap;gap:8px}
.eg-o.ok,.wk-o.ok,.fk-o.ok{border-color:var(--money);background:var(--money-soft)}
.eg-o.no,.wk-o.no,.fk-o.no{border-color:var(--warn);background:var(--warn-soft)}
.eg-say,.wk-say,.fk-say{margin-top:11px}

/* ----------------------------------------------------- findable -------- */
.fd-why{margin:0 0 12px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.fd-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-2)}
.fd-row{display:contents}
.fd-row>span{padding:8px 9px;border-bottom:1px solid var(--line);font-family:var(--ui);
  font-size:10.5px;line-height:1.4;color:var(--ink-3)}
.fd-head>span{background:var(--bg-3);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4)}
.fd-rl{color:var(--ink-2);font-size:11.5px}
.fd-c.v-yes{color:var(--money)}
.fd-c.v-search{color:var(--accent)}
.fd-c.v-never,.fd-c.v-bad{color:var(--open)}
.fd-c.v-no{color:var(--ink-4)}
.fd-c.v-gap{color:var(--warn)}
.fd-c.v-part{color:var(--ink-3)}

/* -------------------------------------------------------- boost -------- */
.bo-gate,.bm-gate,.th-gate,.fd-gate{padding:12px;background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:12px}
.bo-gw,.bm-so{margin:0 0 12px;font-family:var(--ui);font-size:12.5px;line-height:1.65;
  color:var(--ink-2)}

/* ---------------------------------------------------- benchmarks ------- */
.bm-tab{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-2);
  margin-bottom:12px}
.bm-tr{display:contents}
.bm-tr>span{padding:8px 9px;border-bottom:1px solid var(--line);font-family:var(--ui);
  font-size:12px;line-height:1.4;color:var(--ink-2);font-variant-numeric:tabular-nums}
.bm-th>span{background:var(--bg-3);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4)}
.bm-a{color:var(--open)}
.bm-b{color:var(--accent)}
.bm-card{padding:12px 13px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-2);
  margin-bottom:12px}
.bm-ct{margin:0 0 8px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.bm-ct i{display:block;font-style:normal;font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);margin-top:2px}
.bm-card ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:7px}
.bm-card li{font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-2)}
.bm-hint{margin:0 0 12px;font-family:var(--ui);font-size:11px;color:var(--ink-4)}

/* ------------------------------------------------- the valuation ------- */
.vl-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;
  margin-bottom:12px}
.vl-l{display:flex;flex-direction:column;gap:5px;font-family:var(--ui);font-size:10.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.vl-l input{width:100%;accent-color:var(--accent)}
.vl-l b{font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600;
  font-variant-numeric:tabular-nums}
.vl-out{margin:0 0 12px;padding:14px;border:1px solid var(--line-2);border-radius:12px;
  background:var(--bg-3);text-align:center;font-family:var(--ui);
  transition:opacity .2s var(--ease)}
.vl-out span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:4px}
.vl-out b{font-size:26px;color:var(--money);font-variant-numeric:tabular-nums}
.vl-out.shaky b{color:var(--warn)}
.vl-out.gone{border-color:var(--open)}
.vl-out.gone b,.vl-dead{font-size:18px;color:var(--open)}
.vl-obs{display:flex;flex-direction:column;gap:9px}
.vl-ob{padding:11px 12px;border-left:2px solid var(--open);border-radius:0 10px 10px 0;
  background:var(--bg-2)}
.vl-ot{margin:0 0 6px;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink);
  display:flex;gap:8px;align-items:baseline}
.vl-ot span{font-family:var(--mono);font-size:11px;color:var(--ink-4)}
.vl-ow{margin:0;font-family:var(--ui);font-size:12px;line-height:1.65;color:var(--ink-2)}

/* --------------------------------------------------------- small ------- */
@media (max-width:720px){
  .fd-grid{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr))}
  .fd-row>span:nth-child(4),.fd-row>span:nth-child(5){display:none}
  .th-bar{grid-template-columns:minmax(0,1fr);gap:4px}
  .th-pc{text-align:left}
  .oc-s{grid-template-columns:22px minmax(0,1fr)}
}

/* ------------------------------------------------- reduced motion ------ */
.s2-still *,.s2-still *::before,.s2-still *::after{
  transition:none !important;animation:none !important}