/* ==========================================================================
   /streamers — Creator Worth Index layer (FEED-v2 §8, inc/streamers-cwi.php).

   Loaded only for a viewer who sees the CWI (public mode, or an administrator
   in review mode), so the board everyone else gets is untouched. Layers on
   streamers.css (scope .crx.stx): the "Est. value / mo" cell (range, grade
   chip, the "Net worth" line and the provisional label), the co-founder pill,
   the administrators' review note, the drawer's "How this estimate is built"
   section with its net worth block, the method-panel block and the corrections
   page (.stx-cor). Text never goes below 12px; phone controls are 48px tall.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Table cell + chips
   -------------------------------------------------------------------------- */

.stx-table td.stx-cwi-col{white-space:nowrap}
/* Range and grade chip on one line; the net worth line and a provisional label (grade P) run underneath. */
.stx-cwi{display:inline-grid;grid-template-columns:auto auto;align-items:center;justify-items:end;gap:2px 6px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3;vertical-align:middle}
.stx-cwi-r{white-space:nowrap}
.stx-cwi.is-d{display:inline;color:var(--ink-4);font-weight:500;font-style:italic;white-space:nowrap;cursor:help}
.stx-cwi-prov{grid-column:1/-1;max-width:200px;text-align:right;font-size:12px;font-weight:600;color:var(--gold,#F5C451);white-space:normal}
.stx-cwi-nw{grid-column:1/-1;text-align:right;font-size:12px;font-weight:600;color:var(--ink-4);white-space:nowrap;cursor:help}
.stx-cwi-nw-r{color:var(--ink-2);font-weight:700}
.stx-grade{display:inline-grid;place-items:center;flex:0 0 auto;min-width:20px;height:20px;padding:0 5px;border-radius:6px;border:1px solid var(--hair-2);background:var(--card-2);color:var(--ink-2);font:800 12px/1 var(--font-body,"Inter",sans-serif);letter-spacing:.02em;cursor:help}
.stx-grade.g-a{border-color:rgba(46,212,127,.45);background:rgba(46,212,127,.12);color:var(--up,#2ED47F)}
.stx-grade.g-b{border-color:rgba(79,199,234,.45);background:rgba(79,199,234,.12);color:var(--cyan,#4FC7EA)}
.stx-grade.g-c{border-color:rgba(167,139,250,.45);background:rgba(167,139,250,.12);color:var(--violet-l,#A78BFA)}
.stx-grade.g-p{border-color:rgba(245,196,81,.5);background:rgba(245,196,81,.12);color:var(--gold,#F5C451)}
.stx-founder{padding:0 6px;border-radius:5px;background:rgba(245,196,81,.12);color:var(--gold,#F5C451);font-size:12px;font-weight:700;white-space:nowrap}
/* The pill wraps under the live state instead of widening the Streamer column for every row. */
.stx-table .stx-who-sub{flex-wrap:wrap;row-gap:2px}

/* Administrators' note above the rankings (review mode only). */
.stx-cwi-review{margin:0 0 12px;padding:10px 14px;border-radius:12px;border:1px dashed rgba(245,196,81,.45);background:rgba(245,196,81,.06);font-size:13px;line-height:1.55;color:var(--ink-2)}
.stx-cwi-review b{color:var(--gold,#F5C451)}
.stx-cwi-review-meta{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.stx-cwi-review-err{color:var(--down-l,#FF7A94);font-weight:600}
/* The visible note under the table: what the column is and what its letter means (not left to tooltips). */
.stx-cwi-note{margin:0;padding:10px 14px 12px;border-top:1px solid var(--hair);font-size:12.5px;line-height:1.55;color:var(--ink-3)}

/* --------------------------------------------------------------------------
   Method panel block
   -------------------------------------------------------------------------- */

.stx-method .stx-cwi-hint{grid-column:1/-1;border-color:rgba(167,139,250,.3);background:linear-gradient(180deg,rgba(167,139,250,.06),transparent),var(--card-2)}
.stx-method .stx-cwi-hint p+p{margin-top:8px}
.stx-cwi-change{font-size:13px;color:var(--ink-3)}
.stx-cwi-facts{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stx-cwi-disclose{font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.stx-cwi-disclose a{color:var(--cyan,#4FC7EA);text-decoration:underline;text-underline-offset:2px}

/* --------------------------------------------------------------------------
   Drawer section
   -------------------------------------------------------------------------- */

.stx-cwi-sec{margin-top:6px;padding:2px 0 0}
.stx-cwi-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.stx-cwi-range{font:800 22px/1.2 var(--font-display,"Sora",sans-serif);color:#fff;font-variant-numeric:tabular-nums}
.stx-cwi-head .stx-grade{height:24px;min-width:24px;font-size:13px}
.stx-cwi-per{font-size:12.5px;color:var(--ink-3)}
.stx-cwi-mean{margin-top:4px;font-size:13px;color:var(--ink-3)}
.stx-cwi-nwline{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:4px}
.stx-cwi-nwk{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--ink-3)}
.stx-cwi-nwline b{font:800 17px/1.25 var(--font-display,"Sora",sans-serif);color:var(--ink);font-variant-numeric:tabular-nums}
.stx-cwi-nwnote{font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.stx-cwi-provline{margin-top:6px;padding:8px 10px;border-radius:10px;border:1px solid rgba(245,196,81,.3);background:rgba(245,196,81,.06);font-size:12.5px;color:var(--ink-2)}
.stx-cwi-provline b{color:var(--gold,#F5C451)}
.stx-cwi-none{padding:10px 12px;border-radius:10px;background:var(--card-2);font-size:13px;color:var(--ink-2);line-height:1.55}
.stx-cwi-none b{color:#fff}
.stx-cwi-how{margin-top:10px;border:1px solid var(--hair);border-radius:12px;background:var(--card-2)}
.stx-cwi-how>summary{display:flex;align-items:center;min-height:44px;padding:8px 12px;cursor:pointer;font-size:13.5px;font-weight:700;color:#fff;list-style:none}
.stx-cwi-how>summary::-webkit-details-marker{display:none}
.stx-cwi-how>summary::after{content:"";width:7px;height:7px;margin-left:auto;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .16s}
.stx-cwi-how[open]>summary::after{transform:rotate(-135deg)}
.stx-cwi-how>summary:focus-visible{outline:2px solid var(--cyan,#4FC7EA);outline-offset:-2px;border-radius:12px}
.stx-cwi-how>:not(summary){margin-left:12px;margin-right:12px}
.stx-cwi-how>:last-child{margin-bottom:12px}
.stx-cwi-how>p{font-size:12.5px;color:var(--ink-3)}
.stx-cwi-steps{width:100%;border-collapse:collapse;font-size:12.5px}
.stx-cwi-steps th,.stx-cwi-steps td{padding:6px 8px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
.stx-cwi-steps thead th{font-size:12px;font-weight:600;color:var(--ink-4)}
.stx-cwi-steps tbody th{font-weight:600;color:var(--ink-2)}
.stx-cwi-steps td:nth-child(2){white-space:nowrap;text-align:right;color:#fff;font-variant-numeric:tabular-nums}
.stx-cwi-steps td:nth-child(3){color:var(--ink-4)}
.stx-cwi-steps tr.k-range td:nth-child(2),.stx-cwi-steps tr.k-w-range td:nth-child(2){font-weight:800;color:var(--violet-l,#A78BFA)}
.stx-cwi-steps tr.k-w-mid td:nth-child(2){color:var(--ink-2)}
.stx-cwi-how>.stx-cwi-nwnote{margin-top:8px}
.stx-cwi-steps tr.k-e td:nth-child(2){color:var(--ink-2)}
.stx-cwi-alt{margin-top:10px;font-size:13px;color:var(--ink-3)}
.stx-cwi-alt b{color:#fff;font-variant-numeric:tabular-nums}
.stx-cwi-warn{margin-top:8px;font-size:12.5px;color:var(--gold,#F5C451)}
.stx .stx-cwi-how .stx-cwi-h{margin:14px 12px 6px;font:700 12px/1.3 var(--font-body,"Inter",sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.stx-cwi-inputs,.stx-cwi-checks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.stx-cwi-inputs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:7px 9px;border-radius:9px;background:var(--card);border:1px solid var(--hair);font-size:12.5px}
.stx-cwi-in-name{color:var(--ink-2);font-weight:600}
.stx-cwi-inputs li>b{text-align:right;color:#fff;font-variant-numeric:tabular-nums}
.stx-cwi-inputs li>.stx-prov{grid-column:1/-1;justify-self:start}
.stx-cwi-inputs li>small{grid-column:1/-1;font-size:12px;color:var(--ink-4);overflow-wrap:anywhere}
.stx-cwi-inputs a{color:var(--cyan,#4FC7EA);text-decoration:underline;text-underline-offset:2px}
.stx-prov{display:inline-block;padding:1px 7px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--hair-2);color:var(--ink-2)}
.stx-prov.is-m{border-color:rgba(46,212,127,.4);color:var(--up,#2ED47F);background:rgba(46,212,127,.08)}
.stx-prov.is-s{border-color:rgba(79,199,234,.4);color:var(--cyan,#4FC7EA);background:rgba(79,199,234,.08)}
.stx-prov.is-c{border-color:rgba(167,139,250,.4);color:var(--violet-l,#A78BFA);background:rgba(167,139,250,.08)}
.stx-prov.is-a{border-color:rgba(245,196,81,.4);color:var(--gold,#F5C451);background:rgba(245,196,81,.08)}
.stx-prov.is-x{border-style:dashed;color:var(--ink-4)}
.stx-cwi-checks li{font-size:12.5px;color:var(--ink-2)}
.stx-cwi-checks li.is-ok>span[aria-hidden]{color:var(--up,#2ED47F);font-weight:800}
.stx-cwi-checks li.is-fail{color:var(--ink)}
.stx-cwi-checks li.is-fail>span[aria-hidden]{color:var(--down-l,#FF7A94);font-weight:800}
.stx-cwi-foot{margin-top:12px;font-size:12.5px;color:var(--ink-4)}
.stx-cwi-foot code{font:12px/1.4 var(--font-mono,"JetBrains Mono",monospace);color:var(--ink-3)}
.stx-cwi-foot a{color:var(--cyan,#4FC7EA);text-decoration:underline;text-underline-offset:2px}
.stx-cwi-sec>.stx-cwi-disclose{margin-top:10px}

/* --------------------------------------------------------------------------
   /streamers/corrections/
   -------------------------------------------------------------------------- */

.stx-cor .stx-cor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stx-cor .stx-cor-grid .crx-hint ol,.stx-cor .stx-cor-grid .crx-hint ul{margin-top:6px;padding-left:20px;display:grid;gap:5px;color:var(--ink-3)}
.stx-cor .stx-cor-grid .crx-hint p{margin-top:6px;color:var(--ink-3)}
.stx-cor .stx-cor-log{padding:0;overflow:hidden}
.stx-cor .stx-cor-log table{width:100%}
.stx-cor .stx-cor-log td{white-space:normal}
.stx-cor .stx-cor-empty{padding:16px;font-size:13.5px;color:var(--ink-3)}
.stx-cor .crx-note a{color:var(--cyan,#4FC7EA);text-decoration:underline;text-underline-offset:2px}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

/* The CWI column needs ~140px the board never had, and this file loads only for CWI viewers, so their table folds its
   secondary columns a step earlier than streamers.css does, least useful first: the 24h sparkline and Last live from
   1430px, Peak from 1320px, Followers between the 1240px and 760px folds, Hours streamed between 1100px and 760px, and
   the CWI column itself on phones (760px; the drawer still shows the range). Nothing clips. Column order is fixed with
   the CWI column (1 #, 2 streamer, 3 casino, 4 followers, 5 avg, 6 peak, 7 hours watched, 8 change, 9 hours streamed,
   10 CWI, 11 last live, 12 24h, 13 share), so the nth-child folds are safe. */
@media (max-width:1430px){.stx-table tr>:nth-child(11),.stx-table tr>:nth-child(12){display:none}}
@media (max-width:1320px){.stx-table .stx-lg{display:none}}
@media (max-width:1240px) and (min-width:761px){.stx-table th[data-sort="followers"],.stx-table tbody td:nth-child(4){display:none}}
@media (max-width:1100px) and (min-width:761px){.stx-table th[data-sort="air"],.stx-table tbody td:nth-child(9){display:none}}
@media (max-width:760px){.stx-table .stx-cwi-col{display:none}}
@media (max-width:560px){.stx-founder{white-space:normal}}
@media (max-width:900px){.stx-cor .stx-cor-grid{grid-template-columns:1fr}}
@media (max-width:760px){
	.stx-cwi-how>summary{min-height:48px}
	.stx-cor .crx-actions .crx-btn{min-height:48px}
}
/* Phones: each step is a label + value line with its note underneath. */
@media (max-width:560px){
	.stx-cwi-steps thead{display:none}
	.stx-cwi-steps tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;padding:7px 0;border-bottom:1px solid var(--hair)}
	.stx-cwi-steps th,.stx-cwi-steps td{padding:0 8px;border-bottom:0}
	.stx-cwi-steps td:nth-child(3){grid-column:1/-1;margin-top:2px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.stx-cwi-how>summary::after{transition:none}}
