/* Socials, Results, My city and Post it (studio/social.js, SOCIAL.md). Tokens and parts from ds.css only. */

/* platform marks: the icon wears its series color, the same on every screen and in every chart */
.so-pi{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);background:var(--c-surface-2);flex:none}
.so-pi svg{width:18px;height:18px}
.so-s1{color:var(--c-series-1)}.so-s2{color:var(--c-series-2)}.so-s3{color:var(--c-series-3)}.so-s4{color:var(--c-series-4)}
.so-f1{fill:var(--c-series-1)}.so-f2{fill:var(--c-series-2)}.so-f3{fill:var(--c-series-3)}.so-f4{fill:var(--c-series-4)}
.so-b1{background:var(--c-series-1)}.so-b2{background:var(--c-series-2)}.so-b3{background:var(--c-series-3)}.so-b4{background:var(--c-series-4)}

/* page frame */
.so-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap}
.so-h1{margin-top:var(--sp-4)}
.so-lead{margin-top:var(--sp-3);max-width:600px}
.so-sec{margin-top:var(--sp-8)}
.so-h{font-weight:750;font-size:var(--fs-xl);color:var(--c-strong);margin:0 0 var(--sp-4);letter-spacing:-.01em}
.so-row .so-h{margin:0}
.so-row{display:flex;align-items:center;gap:var(--sp-3);min-width:0;flex-wrap:wrap}
.so-eye{font-family:var(--wide);font-stretch:115%;font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:var(--fs-2xs);color:var(--c-mute);margin:0}
.so-eye.mark{color:var(--c-mark)}
.so-sub{display:block;font-size:var(--fs-xs);color:var(--c-mute);line-height:1.45}
.so-txt{font-size:var(--fs-sm);color:var(--c-text-2);margin:0;line-height:1.45}
.so-txt.bad{color:var(--c-bad-ink);font-weight:650}
.so-gap{margin-top:var(--sp-3)}

/* Socials: one card per platform */
.so-cards{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-top:var(--sp-7)}
.so-card{display:flex;flex-direction:column;gap:var(--sp-3);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);padding:var(--sp-5);min-height:200px}
.so-card.bad{border-color:var(--c-bad);box-shadow:0 0 0 3px var(--c-bad-soft)}
.so-an{font-size:var(--fs-lg);color:var(--c-strong)}
.so-num{margin:0;font-size:var(--fs-sm);color:var(--c-text-2)}
.so-num b{font-size:var(--fs-xl);color:var(--c-strong)}
.so-up{color:var(--c-ok);font-weight:700}
.so-acts{margin-top:auto}
.so-team{padding:var(--sp-4);border:1px dashed var(--c-border-2);border-radius:var(--r-lg)}
.so-steps{margin:0;padding-left:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-md);color:var(--c-text-2)}
.so-steps b{color:var(--c-strong)}

/* a video's posts */
.so-room{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-lg);background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text)}
.so-live{display:flex;flex-direction:column;gap:var(--sp-2)}
.so-lrow{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);background:var(--c-surface-2);min-width:0}
.so-lrow b{color:var(--c-strong);font-size:var(--fs-sm)}
.so-live.sm .so-lrow{padding:var(--sp-2) var(--sp-3)}
.so-live.sm .so-pi{width:28px;height:28px}
.so-ext{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);color:var(--c-accent);flex:none}
.so-ext:hover{background:var(--c-accent-soft)}
.so-ext svg{width:16px;height:16px}
.so-picks{--ds-min:180px}

/* Results: the numbers */
.so-kpis{display:grid;gap:var(--sp-3);grid-template-columns:repeat(6,minmax(0,1fr));margin-top:var(--sp-7)}
@media (max-width:1100px){.so-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.so-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.so-kpi{display:flex;flex-direction:column;gap:2px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--sp-4)}
.so-kn{font-family:var(--wide);font-stretch:125%;font-weight:850;font-size:var(--fs-2xl);color:var(--c-strong);line-height:1.05;letter-spacing:-.02em}
.so-kl{font-size:var(--fs-xs);color:var(--c-mute);font-weight:650}
.so-ch{display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-xs);font-weight:700;margin:var(--sp-1) 0 0}
.so-ch svg{width:13px;height:13px}
.so-ch.up{color:var(--c-ok)}.so-ch.down{color:var(--c-bad)}

/* Results: views a day */
.so-chartcard{padding:var(--sp-5)}
.so-charthead{justify-content:space-between}
.so-legend{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.so-key{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:650;color:var(--c-text-2)}
.so-sw{width:10px;height:10px;border-radius:30%;display:inline-block}
.so-readout{margin:var(--sp-3) 0 var(--sp-2);font-size:var(--fs-sm);color:var(--c-text-2);min-height:1.45em}
.so-readout b{color:var(--c-strong)}
.so-chart{display:block;width:100%;height:auto;overflow:visible}
.so-chart:focus{outline:none}.so-chart:focus-visible{outline:2px solid var(--c-accent);outline-offset:4px;border-radius:var(--r-xs)}
.so-grid{stroke:var(--c-border);stroke-width:1}
.so-base{stroke:var(--c-border-2);stroke-width:1}
.so-ax{fill:var(--c-mute);font-size:11px;font-family:var(--body)}
.so-seg{stroke:var(--c-surface);stroke-width:2px;paint-order:stroke}
.so-hit{fill:transparent;cursor:crosshair}
.so-chart g.on .so-seg{opacity:1}
.so-chart:hover g:not(.on) .so-seg{opacity:.55}
.so-table{margin-top:var(--sp-4);font-size:var(--fs-sm)}
.so-table summary{cursor:pointer;color:var(--c-accent);font-weight:650}
.so-tw{max-height:280px;overflow:auto;margin-top:var(--sp-3)}
.so-table table{width:100%;border-collapse:collapse}
.so-table th,.so-table td{padding:6px 8px;border-bottom:1px solid var(--c-border);text-align:right}
.so-table th:first-child,.so-table td:first-child{text-align:left}

/* Results: by platform, every video; also the board's bars */
.so-plats,.so-vlist{display:flex;flex-direction:column;gap:var(--sp-2)}
.so-prow,.so-vrow{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);min-width:0}
.so-vrow{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
.so-vrow:hover{border-color:var(--c-border-hover)}
.so-prow b,.so-vt{color:var(--c-strong)}
.so-vt{display:block;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-bar{display:block;width:100%;max-width:420px;height:6px;margin-top:var(--sp-2)}
.so-track{fill:var(--c-sunk)}
.so-fyou{fill:var(--c-strong)}
.so-fthem{fill:var(--c-border-2)}
.so-pv{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none}
.so-pv b{font-size:var(--fs-lg);color:var(--c-strong)}
.so-chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-1)}
.so-chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;color:var(--c-text-2)}
.so-chip .so-pi{width:20px;height:20px;border-radius:30%}
.so-chip .so-pi svg{width:12px;height:12px}

/* My city */
.so-cityhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8);align-items:center}
.so-big{font-family:var(--wide);font-stretch:125%;font-weight:850;font-size:clamp(44px,6vw,72px);color:var(--c-strong);line-height:1;letter-spacing:-.03em;margin:var(--sp-2) 0 0}
.so-big.sm{font-size:var(--fs-2xl)}
.so-big small{font-size:var(--fs-sm);color:var(--c-mute);font-weight:650;letter-spacing:0}
.so-mini{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg)}
.so-mini .so-pi{width:28px;height:28px}
.so-soon{max-width:720px}
.so-rank{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:var(--sp-7);align-items:center;padding:var(--sp-7)}
.so-score{position:relative;width:150px;height:150px;flex:none}
.so-ring{width:150px;height:150px;transform:rotate(-90deg)}
.so-ring0{fill:none;stroke:var(--c-dark-2);stroke-width:12}
.so-ring1{fill:none;stroke:var(--c-mark);stroke-width:12;stroke-linecap:round}
.so-rn{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;font-family:var(--wide);font-stretch:125%;font-weight:850;font-size:44px;color:var(--c-on-dark);line-height:1}
.so-rn small{display:block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-on-dark-2);margin-top:6px}
.so-rt{font-size:clamp(26px,3vw,44px);margin:var(--sp-2) 0 0;overflow-wrap:anywhere;hyphens:auto}
@media (max-width:1100px){.so-rank{grid-template-columns:auto minmax(0,1fr)}.so-trend{grid-column:1/-1}}
.so-rsub{color:var(--c-on-dark-2);margin:var(--sp-2) 0 0}
.so-rsub b{color:var(--c-mark)}
.so-trend .so-eye{color:var(--c-on-dark-2)}
.so-spark{fill:none;stroke:var(--c-mark);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.so-ends{justify-content:space-between;font-size:var(--fs-2xs);color:var(--c-on-dark-2)}
.so-board{display:flex;flex-direction:column;padding:var(--sp-2) var(--sp-4)}
.so-brow{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) 0;border-bottom:1px solid var(--c-border)}
.so-brow:last-child{border-bottom:0}
.so-brow b{color:var(--c-strong);font-size:var(--fs-sm)}
.so-brow.you b{color:var(--c-accent)}
.so-bp{font-family:var(--wide);font-weight:850;color:var(--c-mute);width:34px;flex:none}
.so-brow.you .so-bp{color:var(--c-strong)}
.so-bv{width:84px;text-align:right;flex:none}
.so-parts{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.so-part{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg)}

/* home: the results line */
.so-teaser{display:flex;align-items:center;gap:var(--sp-4);width:100%;margin-top:var(--sp-3);padding:var(--sp-4) var(--sp-5);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);font:inherit;color:inherit;text-align:left;cursor:pointer}
.so-teaser:hover{border-color:var(--c-border-hover)}
.so-tn{display:block;font-size:var(--fs-sm);color:var(--c-text-2);margin-top:2px}
.so-tn b{font-family:var(--wide);font-stretch:125%;font-weight:850;font-size:var(--fs-xl);color:var(--c-strong)}
.so-spk{width:120px;height:32px;flex:none}
.so-spk polyline{fill:none;stroke:var(--c-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.so-go{color:var(--c-accent);font-weight:700;font-size:var(--fs-sm);flex:none}

@media (max-width:760px){
 .so-cityhero,.so-rank{grid-template-columns:1fr;gap:var(--sp-6)}
 .so-rank{padding:var(--sp-5)}
 .so-spk{display:none}
 .so-bv{display:none}
 .so-prow,.so-vrow{padding:var(--sp-3);gap:var(--sp-3)}
}