/* ==========================================================================
   Connected Social, chapter 1: paid social. Component styles.

   Nothing here introduces a colour.

     sSuccess    ss-   write a success definition, and see what it finds
     sGoalGate   gg-   when do you find out you were wrong
   ========================================================================== */

/* ------------------------------------------------ success definition ----- */
.ss-controls{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;
  margin-bottom:12px}
.ss-ev{margin:0;padding:11px 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg-2)}
.ss-ev legend{padding:0 6px;font-family:var(--ui);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.ss-evs{display:flex;flex-direction:column;gap:7px}
.ss-e{display:flex;gap:8px;align-items:baseline;font-family:var(--ui);font-size:12.5px;
  line-height:1.5;color:var(--ink-2);cursor:pointer}
.ss-e input{margin:0;accent-color:var(--accent)}
.ss-side{display:flex;flex-direction:column;gap:11px;justify-content:center}
.ss-val{display:flex;gap:8px;align-items:flex-start;font-family:var(--ui);font-size:12.5px;
  line-height:1.5;color:var(--ink-2);cursor:pointer}
.ss-val input{margin:2px 0 0;accent-color:var(--accent)}
.ss-bud{display:flex;flex-direction:column;gap:5px;font-family:var(--ui);font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.ss-bud input{width:100%;accent-color:var(--accent)}
.ss-bv{font-size:17px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600;
  font-variant-numeric:tabular-nums}
.ss-gate{padding:12px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:12px}
.ss-gq{margin:0 0 9px;font-family:var(--ui);font-size:13px;line-height:1.55;color:var(--ink-2)}
.ss-opts{display:flex;flex-wrap:wrap;gap:8px}
.ss-out{margin-top:12px}
.ss-mark{margin:0 0 9px;font-family:var(--ui);font-size:12px;font-weight:600}
.ss-mark.ok{color:var(--money)}
.ss-mark.no{color:var(--warn)}

.ss-tab{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-2)}
.ss-tr{display:contents}
.ss-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}
.ss-th>span{background:var(--bg-3);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4)}
.ss-tr.on>span{background:var(--accent-soft)}
.ss-tr.best>span{box-shadow:inset 0 -2px 0 var(--money)}
.ss-tr>span b{display:block;color:var(--ink);font-size:13px}
.ss-tr>span i{display:block;font-style:normal;font-size:10px;color:var(--ink-4);margin-top:1px}
.ss-tr>span.y{color:var(--money)}
.ss-tr>span.n{color:var(--open);font-weight:600}

.ss-bars{display:flex;flex-direction:column;gap:5px;margin-top:11px}
.ss-bar{display:grid;grid-template-columns:minmax(0,1fr);position:relative;height:22px}
.ss-bar i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:6px}
.ss-bar.on i{background:color-mix(in srgb,var(--money) 40%,transparent)}
.ss-bar span{position:relative;padding:4px 8px;font-family:var(--ui);font-size:11px;
  color:var(--ink-2)}

.ss-lab{margin:11px 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)}
.ss-lab span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:3px}
.ss-warn{margin:11px 0 0;padding:11px 13px;border:1px solid var(--warn);border-radius:12px;
  background:color-mix(in srgb,var(--warn) 9%,transparent);font-family:var(--ui);
  font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.ss-note{margin:12px 0 0;font-family:var(--ui);font-size:11px;line-height:1.55;color:var(--ink-4)}

@media (max-width:720px){
  .ss-controls{grid-template-columns:minmax(0,1fr)}
  .ss-tab{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));font-size:11px}
  .ss-tab .ss-tr>span:nth-child(4),.ss-tab .ss-tr>span:nth-child(5){display:none}
}

/* ------------------------------------------------ when do you find out --- */
.gg-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.gg-c{border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:var(--bg-2)}
.gg-c.y{border-color:var(--money);background:color-mix(in srgb,var(--money) 7%,transparent)}
.gg-c.n{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 7%,transparent)}
.gg-t{margin:0 0 8px;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.gg-when{margin:0 0 9px;font-family:var(--ui)}
.gg-when span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:2px}
.gg-when b{font-size:16px;color:var(--ink)}
.gg-w{margin:0 0 9px;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-2)}
.gg-cost{margin: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)}
.gg-cost span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:2px}
.gg-so{margin:11px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}

/* ==========================================================================
   The rest of chapter 1. Nothing below introduces a colour: every value is a
   variable already declared in academy.css.

     sChain     ch-   who owns each step, brief to live
     sDay       dy-   three moments in one day
     sAuction   au-   who wins, and what do they pay
     sGates     ga-   declare the category
     sTiers     ti-   what a tighter setting actually buys
     sHandover  hv-   can you undo it, does the comparison survive
     sStruct    st-   build the account, then read the bill
     sFolk      fk-   four rules everybody repeats
     sRotate    ro-   which combination won
     sClaims    cl-   three platforms, one sale
     sKeep      kp-   buy one decision back
   ========================================================================== */

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

/* ------------------------------------------------------- brief to live --- */
.ch-list{display:flex;flex-direction:column;gap:7px}
.ch-s{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:start;
  padding:9px 11px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}
.ch-s.ok{border-color:var(--money);background:color-mix(in srgb,var(--money) 6%,transparent)}
.ch-s.no{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 6%,transparent)}
.ch-n{font-family:var(--ui);font-size:11px;font-weight:600;color:var(--ink-4);
  font-variant-numeric:tabular-nums;padding-top:2px}
.ch-t{margin:0;font-family:var(--ui);font-size:13px;line-height:1.5;color:var(--ink)}
.ch-who{margin:5px 0 0;font-family:var(--ui);font-size:11.5px;color:var(--ink-3)}
.ch-who span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4)}
.ch-d{margin:5px 0 0;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-2)}
.ch-o{display:flex;gap:5px;flex-shrink:0}
.ch-p{font-size:11px;padding:4px 9px}
.ch-p.on{background:var(--accent-soft);border-color:var(--accent)}
.ch-p.truth{box-shadow:inset 0 -2px 0 var(--money)}
.ch-more{display:flex;gap:10px;align-items:center;margin-top:11px}
.ch-count{font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.ch-score{margin:11px 0 6px;font-family:var(--ui);font-size:15px;font-weight:600;color:var(--ink)}
.ch-so,.dy-so,.au-so,.ga-so,.ti-so,.hv-so,.st-so,.fk-so,.ro-so,.cl-so,.kp-so{
  margin:10px 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)}

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

/* ------------------------------------------------------------ the auction --- */
.au-gate,.st-gate,.cl-gate,.ti-gate{padding:12px;background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:12px}
.au-gq,.st-gq,.cl-gq{margin:0 0 9px;font-family:var(--ui);font-size:13px;line-height:1.55;
  color:var(--ink-2)}
.au-gopts,.st-gopts,.cl-gopts,.ti-gopts{display:flex;flex-wrap:wrap;gap:8px}
.au-mark,.st-mark,.cl-mark{margin-bottom:12px}
.au-gw,.st-gw,.cl-gw{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.65;
  color:var(--ink-2)}
.au-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;
  margin-bottom:12px}
.au-l,.st-l,.cl-l{display:flex;flex-direction:column;gap:4px;font-family:var(--ui);font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.au-l input,.st-l input,.cl-l input{width:100%;accent-color:var(--accent)}
.au-l b,.st-l b,.cl-l b{font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);
  font-weight:600;font-variant-numeric:tabular-nums}
.au-rules{display:flex;flex-direction:column;gap:6px;justify-content:center}
.au-rl{font-size:11.5px;text-align:left;white-space:normal;line-height:1.4}
.au-rl.on{background:var(--accent-soft);border-color:var(--accent)}
.au-rows{display:flex;flex-direction:column;gap:6px}
.au-row{display:grid;grid-template-columns:minmax(0,1.2fr) auto minmax(0,1.4fr) 46px;gap:9px;
  align-items:center;padding:7px 9px;border-radius:10px;background:var(--bg-2);
  border:1px solid var(--line)}
.au-row.me{border-color:var(--accent)}
.au-row.win{background:color-mix(in srgb,var(--money) 8%,transparent)}
.au-who{font-family:var(--ui);font-size:12px;color:var(--ink-2)}
.au-who i{font-style:normal;color:var(--money);font-weight:600}
.au-sum{font-family:var(--mono);font-size:11px;color:var(--ink-4);white-space:nowrap}
.au-bar{position:relative;height:9px;background:var(--bg-4);border-radius:5px;overflow:hidden}
.au-bar i{position:absolute;inset:0 auto 0 0;background:var(--accent-deep)}
.au-row.win .au-bar i{background:var(--money)}
.au-sc{font-family:var(--mono);font-size:12px;color:var(--ink);text-align:right}
.au-price{margin:11px 0 0;padding:11px 13px;border:1px solid var(--line-2);border-radius:11px;
  background:var(--bg-2);font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.au-rd{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink-4)}

/* ------------------------------------------------------- the category gate --- */
.ga-item{margin:0 0 10px;font-family:var(--ui);font-size:15px;line-height:1.5;color:var(--ink)}
.ga-opts,.fk-opts{display:flex;flex-wrap:wrap;gap:7px}
.ga-o,.fk-o{font-size:12px}
.ga-o.ok,.fk-o.ok{border-color:var(--money);background:color-mix(in srgb,var(--money) 10%,transparent)}
.ga-o.no,.fk-o.no{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.ga-say{margin-top:11px}
.ga-w{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.ga-lost{margin-top:10px;padding:10px 12px;border:1px solid var(--open);border-radius:11px;
  background:color-mix(in srgb,var(--open) 7%,transparent)}
.ga-lt{margin:0 0 6px;font-family:var(--ui);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.ga-lost ul{margin:0;padding-left:17px;font-family:var(--ui);font-size:12px;line-height:1.7;
  color:var(--ink-2)}
.ga-more,.fk-more,.hv-more{display:flex;gap:10px;align-items:center;margin-top:11px}
.ga-count,.fk-count,.hv-count{font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.ga-score{margin:11px 0 0;font-family:var(--ui);font-size:15px;font-weight:600;color:var(--ink)}

/* ------------------------------------------------------- suitability tiers --- */
.ti-out{margin-top:12px}
.ti-why{margin:0 0 11px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.ti-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ti-t{font-size:11.5px}
.ti-t.on{background:var(--accent-soft);border-color:var(--accent)}
.ti-panel{padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.ti-r{margin:0 0 9px;font-family:var(--ui);font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.ti-r:last-child{margin-bottom:0}
.ti-r span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:2px}

/* ------------------------------------------------------------ the handover --- */
.hv-p{margin:0 0 11px;font-family:var(--ui);font-size:14px;line-height:1.55;color:var(--ink)}
.hv-unit{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:20px;
  background:var(--accent-soft);color:var(--accent);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;vertical-align:middle}
.hv-qs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.hv-q{padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}
.hv-q p{margin:0 0 7px;font-family:var(--ui);font-size:11.5px;color:var(--ink-3)}
.hv-q>div{display:flex;gap:6px}
.hv-b{font-size:11.5px;padding:4px 12px}
.hv-b.on{background:var(--accent-soft);border-color:var(--accent)}
.hv-b.ok{border-color:var(--money);background:color-mix(in srgb,var(--money) 12%,transparent)}
.hv-b.no{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.hv-say{margin-top:11px}
.hv-w{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}

/* -------------------------------------------------------- account structure --- */
.st-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;
  margin-bottom:12px}
.st-parts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.st-p{font-size:12px;padding:5px 12px;font-variant-numeric:tabular-nums}
.st-p.on{background:var(--accent-soft);border-color:var(--accent)}
.st-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.st-card{padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.st-card.y{border-color:var(--money)}
.st-card.n{border-color:var(--warn)}
.st-ct{margin:0 0 4px;font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.st-cb{margin:0 0 7px;font-family:var(--ui);font-size:19px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.st-cd{margin:0;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-2)}
.st-line{margin:11px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}

/* -------------------------------------------------------------- folklore --- */
.fk-c{margin:0 0 11px;font-family:var(--display);font-size:18px;line-height:1.45;color:var(--ink)}
.fk-say{margin-top:11px}
.fk-r{margin:0 0 9px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.fk-r span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:2px}
.fk-r.use{padding:10px 12px;border-radius:10px;background:var(--bg-3);color:var(--ink)}

/* ------------------------------------------------------- creative rotation --- */
.ro-rep{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.ro-h{margin:0 0 8px;font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.ro-tab{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ro-tr{display:contents}
.ro-tr>span{padding:7px 9px;border-bottom:1px solid var(--line);font-family:var(--ui);
  font-size:11.5px;line-height:1.4;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ro-th>span{background:var(--bg-3);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4)}
.ro-tr.win>span{background:color-mix(in srgb,var(--money) 12%,transparent);color:var(--ink)}
.ro-add{margin:9px 0 0;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-3)}
.ro-q{margin:12px 0 9px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.ro-opts{display:flex;flex-wrap:wrap;gap:7px}
.ro-o{font-size:11.5px;white-space:normal;text-align:left}
.ro-o.ok{border-color:var(--money);background:color-mix(in srgb,var(--money) 12%,transparent)}
.ro-o.no{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.ro-say{margin-top:12px}
.ro-why{margin:0 0 11px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.ro-truth{padding:12px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-3)}

/* ----------------------------------------------------------- three claims --- */
.cl-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  margin-bottom:12px;align-items:end}
.cl-v{display:flex;gap:8px;align-items:flex-start;font-family:var(--ui);font-size:12.5px;
  line-height:1.5;color:var(--ink-2);cursor:pointer}
.cl-v input{margin:2px 0 0;accent-color:var(--accent)}
.cl-rows{display:flex;flex-direction:column;gap:7px}
.cl-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 58px;
  grid-template-areas:"who bar n" "d d d";gap:8px;align-items:center;padding:8px 10px;
  border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}
.cl-row.cl-orders{border-color:var(--money);background:color-mix(in srgb,var(--money) 7%,transparent)}
.cl-who{grid-area:who;font-family:var(--ui);font-size:12.5px;color:var(--ink)}
.cl-bar{grid-area:bar;position:relative;height:10px;background:var(--bg-4);border-radius:5px;
  overflow:hidden}
.cl-bar i{position:absolute;inset:0 auto 0 0;background:var(--accent-deep)}
.cl-orders .cl-bar i{background:var(--money)}
.cl-n{grid-area:n;font-family:var(--mono);font-size:13px;color:var(--ink);text-align:right}
.cl-d2{grid-area:d;font-family:var(--ui);font-size:11.5px;line-height:1.55;color:var(--ink-4)}
.cl-sum{margin:11px 0 0;padding:11px 13px;border:1px solid var(--line-2);border-radius:11px;
  background:var(--bg-2);font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink-2)}

/* --------------------------------------------------- buy a decision back --- */
.kp-kept{padding:12px;border:1px solid var(--money);border-radius:12px;
  background:color-mix(in srgb,var(--money) 6%,transparent)}
.kp-h{margin:0 0 8px;font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.kp-k{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:baseline;
  padding:5px 0;font-family:var(--ui);font-size:12.5px;color:var(--ink)}
.kp-k+.kp-k{border-top:1px solid var(--line)}
.kp-n{font-family:var(--mono);font-size:11px;color:var(--ink-4)}
.kp-d{display:block;font-size:11.5px;line-height:1.55;color:var(--ink-3);margin-top:2px}
.kp-q{margin:13px 0 9px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink)}
.kp-buys{display:flex;flex-wrap:wrap;gap:7px}
.kp-b{font-size:12px;display:inline-flex;gap:7px;align-items:baseline}
.kp-b.on{background:var(--accent-soft);border-color:var(--accent)}
.kp-b.g-ok.on{border-color:var(--money)}
.kp-b.g-poor.on{border-color:var(--warn)}
.kp-b.g-bad.on{border-color:var(--open)}
.kp-panel{margin-top:12px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg-2)}
.kp-panel.g-ok{border-color:var(--money)}
.kp-panel.g-poor{border-color:var(--warn)}
.kp-panel.g-bad{border-color:var(--open)}
.kp-r{margin:0 0 9px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.kp-r:last-child{margin-bottom:0}
.kp-r span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:2px}

@media (max-width:720px){
  .ch-s{grid-template-columns:22px minmax(0,1fr);grid-template-areas:"n b" ". o"}
  .ch-n{grid-area:n} .ch-b{grid-area:b} .ch-o{grid-area:o;margin-top:6px}
  .au-row{grid-template-columns:minmax(0,1fr) 46px;grid-template-areas:"who sc" "bar bar"}
  .au-who{grid-area:who} .au-sc{grid-area:sc} .au-bar{grid-area:bar} .au-sum{display:none}
  .ro-tab{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr))}
  .ro-tr>span:nth-child(2){display:none}
}