/* ==========================================================================
   Slot release calendar — /slots/calendar/ (#773)
   Layered on crash-tracker.css (.crx tokens, head, KPI tiles, cards, segmented
   picker, note) and slots-section.css (tabs, the "Next up" cover rail, play
   button). Scoped under .slc. Adds the filter bar with the Coming soon / Out on
   Stake switch, and the release rows grouped by month.
   ========================================================================== */

/* ---------- head ---------- */
.slc .crx-mark{display:grid;place-items:center;background:linear-gradient(150deg,rgba(245,196,81,.2),rgba(123,77,242,.22));color:var(--gold,#F5C451)}
.slc .crx-mark svg{width:28px;height:28px}
.slc .crx-ident-text{min-width:0}
@media (max-width:560px){
	.slc .crx-facts{gap:4px 10px}
	.slc .crx-facts li{white-space:normal}
	.slc .crx-facts li+li::before{content:none;margin:0}
}
.slc .crx-kpis.slc-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:22px}
@media (max-width:1080px){
	.slc .crx-kpis.slc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.slc-sec{margin-bottom:28px}
.slc .slc-next{margin-bottom:22px}

/* ---------- filter bar ---------- */
.slc .slc-bar{position:sticky;top:calc(var(--top-h,66px) + 8px);z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
	padding:10px 12px;margin-bottom:18px;background:color-mix(in srgb,var(--card,#1B2030) 90%,transparent);
	backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* the list switch only works with the script; without it both lists show */
.slc:not(.slc-tabbed) .slc-tabs{display:none}
.slc .slc-tabs button{display:inline-flex;align-items:center;gap:7px}
.slc-tab-n{font:600 11.5px/1 var(--font-mono,ui-monospace,monospace);font-variant-numeric:tabular-nums;color:var(--ink-4)}
.slc .slc-tabs button[aria-pressed="true"] .slc-tab-n{color:var(--gold,#F5C451)}
.slc .slc-studio-pick{flex:0 1 220px;min-width:150px;max-width:240px;padding-top:9px;padding-bottom:9px}
.slc .slc-toggle{padding:8px 14px;border-radius:999px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
	color:var(--ink-3);background:var(--card-2);border:1px solid var(--hair-2);white-space:nowrap;transition:color .14s,background .14s}
.slc button.slc-toggle:hover{color:#fff;background:var(--surface-3,#293046)}
.slc .slc-toggle[aria-pressed="true"]{color:#fff;background:var(--grad,linear-gradient(115deg,#4FC7EA,#2F97EE 45%,#7B4DF2));border-color:transparent}
.slc .slc-toggle:focus-visible{outline:2px solid var(--cyan,#4FC7EA);outline-offset:2px}
.slc .slc-count{margin:0 0 0 auto;font-size:12.5px;color:var(--ink-4);font-variant-numeric:tabular-nums;white-space:nowrap}
.slc-panel[hidden]{display:none}

/* ---------- release rows, grouped by month ---------- */
.slc .slc-list{padding:0;overflow:hidden}
.slc-group[hidden],.slc-row[hidden]{display:none}
.slc-group+.slc-group{border-top:1px solid var(--hair)}
.slc-group-h{display:flex;align-items:center;gap:8px;margin:0;padding:10px 16px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--ink-3);background:rgba(255,255,255,.025);border-bottom:1px solid var(--hair)}
.slc-group-n{font:600 11px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:0;color:var(--ink-4)}
.slc-rows{list-style:none;margin:0;padding:0}

.slc-row{display:grid;grid-template-columns:48px 44px minmax(0,1fr) 92px 100px 132px 76px;align-items:center;gap:0 14px;
	padding:10px 16px;min-height:72px;transition:background .14s}
.slc-list.is-coming .slc-row{grid-template-columns:48px 44px minmax(0,1fr) 150px 76px}
.slc-row+.slc-row{border-top:1px solid var(--hair)}
.slc-row:hover{background:rgba(255,255,255,.025)}

.slc-date{display:grid;justify-items:center;align-content:center;gap:2px;width:48px;height:50px;border-radius:10px;
	background:var(--card-2,#212739);border:1px solid var(--hair)}
.slc-date b{font:800 18px/1 var(--font-display,Sora,inherit);color:#fff;font-variant-numeric:tabular-nums}
.slc-date span{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.slc-row.is-coming .slc-date b{color:var(--gold,#F5C451)}

.slc-thumb{position:relative;display:grid;place-items:center;width:44px;height:55px;border-radius:8px;overflow:hidden;border:1px solid var(--hair)}
.slc-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slc-ini{font-size:13px;font-weight:800;color:rgba(255,255,255,.75)}

.slc-main{display:grid;gap:4px;min-width:0}
.slc-main b{font-size:14.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slc-sub{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0;font-size:12.5px}
.slc-sub a{color:var(--ink-3);text-decoration:none;white-space:nowrap}
.slc-sub a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}
.slc-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:6px;font-size:11px;font-weight:700;white-space:nowrap;line-height:1.35}
.slc-chip.is-demo{color:var(--up,#2ED47F);background:rgba(46,212,127,.1);border:1px solid rgba(46,212,127,.25)}
.slc-chip.is-demo::before{content:"";width:0;height:0;border-style:solid;border-width:3.5px 0 3.5px 6px;border-color:transparent transparent transparent currentColor}
.slc-chip.is-early{color:var(--gold,#F5C451);background:rgba(245,196,81,.1);border:1px solid rgba(245,196,81,.28)}
.slc-chip.is-studio{color:var(--ink-3);background:var(--card-2,#212739);border:1px solid var(--hair-2)}

.slc-stat{display:grid;gap:3px;justify-items:end;text-align:right}
.slc-stat small{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
.slc-stat b{font:600 13px/1 var(--font-mono,ui-monospace,monospace);font-variant-numeric:tabular-nums;color:var(--ink)}
.slc-when{font:500 12px/1.3 var(--font-mono,ui-monospace,monospace);color:var(--ink-3);text-align:right;white-space:nowrap}
.slc-row.is-coming .slc-when{color:var(--cyan,#4FC7EA)}
.slc-act{display:flex;justify-content:flex-end}
.slc .slc-play.cd-slot-play{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 14px;border-radius:999px;border:0;cursor:pointer;
	font:inherit;font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;
	background:var(--grad,linear-gradient(115deg,#4FC7EA,#2F97EE 45%,#7B4DF2));box-shadow:0 6px 16px -10px rgba(79,150,242,.9);transition:filter .14s}
.slc .slc-play:hover{filter:brightness(1.1)}
.slc .slc-play:focus-visible{outline:2px solid var(--cyan,#4FC7EA);outline-offset:2px}

.slc-more-row{display:flex;justify-content:center;margin-top:14px}
.slc-more-row[hidden]{display:none}
.slc-none{margin-top:4px}

/* ---------- breakpoints ---------- */
@media (max-width:1240px){
	.slc-row{grid-template-columns:48px 44px minmax(0,1fr) 92px 120px 76px}
	.slc-row .slc-stat+.slc-stat{display:none}
}
@media (max-width:760px){
	.slc .slc-bar{position:static}
	.slc .slc-tabs{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr}
	.slc .slc-tabs button{justify-content:center}
	.slc .slc-studio-pick{flex:1 1 auto;max-width:none}
	.slc .slc-toggle{min-height:48px}
	.slc .slc-count{margin-left:0;flex-basis:100%}
	.slc-group-h{padding:9px 12px}
	.slc-row,.slc-list.is-coming .slc-row{grid-template-columns:42px 40px minmax(0,1fr) auto;gap:0 10px;padding:10px 12px}
	.slc-row .slc-stat{display:none}
	.slc-date,.slc-thumb{grid-row:1 / span 2}
	.slc-date{width:42px;height:46px}
	.slc-date b{font-size:16px}
	.slc-thumb{width:40px;height:50px}
	.slc-main b{font-size:14px;white-space:normal;line-height:1.25}
	.slc-when{grid-column:3;grid-row:2;text-align:left;font-size:11.5px;margin-top:4px}
	.slc-act{grid-column:4;grid-row:1 / span 2}
	.slc .slc-play.cd-slot-play{min-height:44px;padding:8px 14px}
}
@media (prefers-reduced-motion:reduce){
	.slc .slc-toggle,.slc .slc-play.cd-slot-play,.slc-row{transition:none}
}