/* 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-s5{color:var(--c-series-5)}
.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-f5{fill:var(--c-series-5)}
.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)}.so-b5{background:var(--c-series-5)}

/* 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 row per platform in one list. Wide: the rows share the list's columns (subgrid), so names,
   followers, states and buttons line up. Under 760px each row stacks: mark, name and state on top, then the
   followers, then the buttons. */
.so-accts{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden}
.so-head+.so-accts{margin-top:var(--sp-7)}
.so-acct{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;column-gap:var(--sp-5);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--c-border);min-width:0}
.so-acct:first-child{border-top:0}
.so-acct.bad{background:var(--c-bad-soft)}
.so-acct .so-pi{width:40px;height:40px;border-radius:var(--r-md)}
.so-acct .so-pi svg{width:20px;height:20px}
.so-acct.bad .so-pi{background:var(--c-surface)}
.so-acct-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.so-an{font-size:var(--fs-md);font-weight:750;color:var(--c-strong);line-height:1.3}
.so-acct-sub{font-size:var(--fs-sm);color:var(--c-mute);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-acct-sub.wrap{white-space:normal}
.so-acct-sub.bad{white-space:normal;color:var(--c-bad-ink);font-weight:650}
.so-acct-num{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;font-size:var(--fs-sm);color:var(--c-mute);line-height:1.35;white-space:nowrap}
.so-acct-num b{font-size:var(--fs-md);color:var(--c-strong);font-weight:750}
.so-acct-num .so-up{font-size:var(--fs-xs)}
.so-acct-st{display:flex;justify-content:flex-start}
.so-acct.bad .ds-pill{background:var(--c-surface);box-shadow:inset 0 0 0 1px currentColor}
.so-acct-acts{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-4);white-space:nowrap}
.so-acct-acts .btn{min-width:132px}
.so-mute{color:var(--c-mute)}
.so-mute:hover,.so-mute[data-sure]{color:var(--c-bad)}
.so-up{color:var(--c-ok);font-weight:700}
.so-accts{container-type:inline-size}
/* stacked when the list itself is narrow (a phone, or a tablet with long buttons), whatever the screen */
@container (max-width:860px){
 .so-acct{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic tx st" ". num num" ". acts acts";column-gap:var(--sp-3);row-gap:var(--sp-2);padding:var(--sp-4);align-items:start}
 .so-acct>.so-pi{grid-area:ic}.so-acct-tx{grid-area:tx}.so-acct-st{grid-area:st;padding-top:2px}
 .so-acct-num{grid-area:num;flex-direction:row;align-items:baseline;gap:6px;text-align:left}
 .so-acct-num:empty{display:none}
 .so-acct{grid-template-areas:"ic tx st" ". num num" "acts acts acts"}
 .so-acct-acts{grid-area:acts;justify-content:flex-start;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);margin-top:var(--sp-1)}
 .so-acct-acts .btn{order:-1;min-width:0;padding:0 var(--sp-3)}
}
.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)}
/* before connecting: who asks for permission (bundle.social) and what it allows */
.so-flow{display:flex;align-items:flex-start;justify-content:center;gap:var(--sp-2);padding:var(--sp-5) var(--sp-4);border-radius:var(--r-xl);background:var(--c-surface-2)}
.so-fn{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0;flex:0 1 150px}
.so-fn b{font-size:var(--fs-sm);color:var(--c-strong)}
.so-fn>span:last-child:not(.so-ft){font-size:var(--fs-2xs);color:var(--c-mute)}
.so-ft{width:56px;height:56px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--c-surface);box-shadow:var(--sh-0),inset 0 0 0 1px var(--c-border);margin-bottom:4px}
.so-ft .so-pi{width:40px;height:40px;background:none}.so-ft .so-pi svg{width:26px;height:26px}
.so-fs{background:var(--c-strong);color:var(--c-mark);font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:var(--fs-lg);box-shadow:none}
.so-fb{color:var(--c-accent)}.so-fb svg{width:24px;height:24px}
.so-fa{flex:0 0 36px;height:2px;margin-top:28px;background:repeating-linear-gradient(90deg,var(--c-border-2) 0 6px,transparent 6px 10px);position:relative}
.so-fa::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left-color:var(--c-border-2)}
.so-perm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.so-perm ul{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.so-perm li{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-sm);line-height:1.45;color:var(--c-text-2)}
.so-pm{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.so-pm svg{width:12px;height:12px}
.so-perm li.ok .so-pm{background:var(--c-mark);color:var(--c-strong)}
.so-perm li.no .so-pm{background:var(--c-bad-soft);color:var(--c-bad)}
@media (max-width:540px){.so-perm{grid-template-columns:minmax(0,1fr)}.so-fa{flex-basis:16px}.so-ft{width:48px;height:48px}}

/* 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 */
/* as many columns as there are numbers (5 or 6), so the row never ends in an empty slot */
.so-kpis{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:var(--sp-7)}
@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)}
}