/* ==========================================================================
   StudyLab Quiz — Test Series (browser grid + series page), v2.3
   Pure CSS (no layout JS), mobile-first, uses the --slq-* tokens from
   frontend.css so Settings → Appearance re-themes it.
   ========================================================================== */

.slq-series-browser, .slq-series-detail { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.slq-series-browser a, .slq-series-detail a { text-decoration: none; }

/* shared little pieces */
.slq-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: var( --slq-paper ); border: 1px solid var( --slq-line ); font-size: 12.5px; font-weight: 600; color: var( --slq-ink-soft ); white-space: nowrap; }
.slq-pill strong { color: var( --slq-ink ); font-weight: 800; }
.slq-pill-free { background: var( --slq-success-bg ); border-color: transparent; color: var( --slq-success ); }
.slq-pill-free strong { color: var( --slq-success ); }

/* ---- Browser: header + search ---- */
.slq-series-browser-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; }
.slq-series-browser-title { font-family: var( --slq-font-display ); font-size: clamp( 22px, 4vw, 30px ); line-height: 1.2; margin: 0; color: var( --slq-ink ); }
.slq-series-search { position: relative; width: 100%; max-width: 340px; }
.slq-series-search-icon { position: absolute; left: 15px; top: 50%; transform: translateY( -50% ); opacity: .5; font-size: 14px; pointer-events: none; }
.slq-series-search input { width: 100%; padding: 12px 16px 12px 40px; border: 1px solid var( --slq-line ); border-radius: 999px; font-family: var( --slq-font-body ); font-size: 15px; background: var( --slq-paper-raised ); color: var( --slq-ink ); box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.slq-series-search input:focus { outline: none; border-color: var( --slq-btn, var( --slq-accent ) ); box-shadow: 0 0 0 3px rgba( 29, 78, 216, .12 ); }

/* ---- Browser: card grid (full width, no sidebar) ---- */
.slq-series-browser-body { display: block; padding: 0; border: 0; background: none; }
.slq-series-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( min( 100%, 280px ), 1fr ) ); gap: 18px; align-content: start; }

.slq-series-card {
	position: relative; display: flex; flex-direction: column; gap: 12px; background: var( --slq-paper-raised ); border: 1px solid var( --slq-line ); border-radius: 20px; padding: 20px;
	box-shadow: 0 1px 2px rgba( 20, 30, 45, .04 ); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	content-visibility: auto; contain-intrinsic-size: auto 300px;
}
.slq-series-card:hover { transform: translateY( -3px ); box-shadow: 0 18px 36px -18px rgba( 20, 30, 45, .35 ); border-color: var( --slq-btn, var( --slq-accent ) ); }
.slq-series-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.slq-series-card-icon { width: 52px; height: 52px; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient( 135deg, var( --slq-paper ), var( --slq-line ) ); flex: 0 0 auto; }
.slq-series-card-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slq-series-card-icon-fallback { font-size: 24px; line-height: 1; }
.slq-series-card-users { font-size: 12px; font-weight: 700; color: var( --slq-ink-soft ); background: var( --slq-paper ); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.slq-series-card-heading { margin: 0; font-size: inherit; line-height: inherit; }
.slq-series-card-title { font-family: var( --slq-font-display ); font-weight: 700; font-size: 17px; line-height: 1.35; color: var( --slq-ink ); display: block; }
.slq-series-card-title::after { content: ""; position: absolute; inset: 0; border-radius: 20px; } /* whole card clickable */
.slq-series-card-title:hover { color: var( --slq-btn, var( --slq-accent ) ); }
.slq-series-card-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.slq-series-card-pct { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var( --slq-success ); }
.slq-series-progress { height: 6px; border-radius: 999px; background: var( --slq-line ); overflow: hidden; }
.slq-series-progress-fill { height: 100%; background: var( --slq-success ); border-radius: 999px; transition: width .4s ease; }
.slq-series-card-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-content: flex-start; }
.slq-series-card-bullets li { font-size: 12.5px; font-weight: 600; color: var( --slq-ink-soft ); background: var( --slq-paper ); border-radius: 8px; padding: 4px 10px; }
.slq-series-card-bullets .slq-series-card-more { color: var( --slq-btn, var( --slq-accent ) ) !important; background: transparent; padding-left: 2px; }
.slq-quiz-root a.slq-series-card-btn, .slq-quiz-root a.slq-series-card-btn:visited {
	position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 12px 16px; border-radius: 12px;
	background: var( --slq-btn, var( --slq-accent ) ); color: var( --slq-btn-t, #fff ); font-weight: 700; font-size: 14.5px; transition: background .15s;
}
.slq-quiz-root a.slq-series-card-btn:hover { background: var( --slq-btn-h, var( --slq-accent-ink ) ); color: var( --slq-btn-t, #fff ); }

/* ---- Series page: back link, hero ---- */
.slq-series-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 7px 14px; border-radius: 999px; background: var( --slq-paper ); color: var( --slq-ink-soft ); font-size: 13px; font-weight: 700; }
.slq-series-back:hover { color: var( --slq-btn, var( --slq-accent ) ); }

.slq-series-header { display: flex; align-items: flex-start; gap: 18px; background: var( --slq-paper-raised ); border: 1px solid var( --slq-line ); border-radius: 22px; padding: 22px; margin-bottom: 14px; }
.slq-series-header-icon { width: 68px; height: 68px; border-radius: 20px; overflow: hidden; background: linear-gradient( 135deg, var( --slq-paper ), var( --slq-line ) ); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.slq-series-header-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slq-series-header-icon .slq-series-card-icon-fallback { font-size: 32px; }
.slq-series-header-text { min-width: 0; flex: 1; }
.slq-series-header-title { font-family: var( --slq-font-display ); font-size: clamp( 21px, 4vw, 30px ); line-height: 1.25; margin: 2px 0 0; color: var( --slq-ink ); overflow-wrap: anywhere; }
.slq-series-desc { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var( --slq-ink-soft ); }
.slq-series-desc > :first-child { margin-top: 0; } .slq-series-desc > :last-child { margin-bottom: 0; }
.slq-series-desc p { margin: 0 0 .6em; }
.slq-series-header-meta { font-size: 12.5px; color: var( --slq-ink-soft ); margin-top: 10px; opacity: .85; }

.slq-series-stats-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.slq-series-progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 13px; font-weight: 600; color: var( --slq-ink-soft ); }
.slq-series-progress-row .slq-series-progress { flex: 1; }

.slq-series-alltests-title { font-family: var( --slq-font-display ); font-size: clamp( 17px, 3vw, 20px ); margin: 22px 0 14px; color: var( --slq-ink ); overflow-wrap: anywhere; }

/* ---- tabs ---- */
.slq-series-kind-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var( --slq-paper ); border: 1px solid var( --slq-line ); border-radius: 999px; }
.slq-series-kind-tab { padding: 9px 22px; border-radius: 999px; border: 0; background: transparent; color: var( --slq-ink-soft ); font-weight: 700; font-size: 13.5px; cursor: pointer; transition: background .15s, color .15s; }
.slq-series-kind-active { background: var( --slq-btn, var( --slq-accent ) ) !important; color: var( --slq-btn-t, #fff ) !important; box-shadow: 0 4px 10px -4px rgba( 0, 0, 0, .35 ); }

.slq-series-group-tabs, .slq-series-subgroup-pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; margin-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.slq-series-group-tabs::-webkit-scrollbar, .slq-series-subgroup-pills::-webkit-scrollbar { display: none; }
.slq-series-group-tab, .slq-series-subgroup-pill { flex: 0 0 auto; scroll-snap-align: start; padding: 9px 16px; border-radius: 999px; border: 1px solid var( --slq-line ); background: var( --slq-paper-raised ); color: var( --slq-ink-soft ); font-weight: 700; font-size: 13.5px; white-space: nowrap; cursor: pointer; transition: all .15s; }
.slq-series-group-tab:hover, .slq-series-subgroup-pill:hover { border-color: var( --slq-btn, var( --slq-accent ) ); color: var( --slq-ink ); }
.slq-series-group-active { background: var( --slq-ink ) !important; border-color: var( --slq-ink ) !important; color: var( --slq-paper-raised ) !important; }
.slq-series-subgroup-pill { padding: 6px 14px; font-size: 12.5px; background: var( --slq-paper ); border-color: transparent; }
.slq-series-subgroup-active { background: var( --slq-btn, var( --slq-accent ) ) !important; color: var( --slq-btn-t, #fff ) !important; }
.slq-series-subsub-pills { padding-left: 8px; margin-top: -2px; }
.slq-series-subsub-pills .slq-series-subgroup-pill { font-size: 12px; padding: 4px 12px; }

/* ---- tests ---- */
.slq-series-test-list { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 24px; }
.slq-series-test-row {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var( --slq-paper-raised ); border: 1px solid var( --slq-line ); border-radius: 16px; padding: 16px 18px;
	transition: border-color .15s, box-shadow .15s;
}
.slq-series-test-row:hover { border-color: var( --slq-btn, var( --slq-accent ) ); box-shadow: 0 10px 24px -16px rgba( 20, 30, 45, .4 ); }
.slq-series-test-main { flex: 1; min-width: 0; }
.slq-series-test-badges { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.slq-series-test-title { font-weight: 700; font-size: 15.5px; line-height: 1.4; color: var( --slq-ink ); display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; overflow-wrap: anywhere; }
.slq-series-test-users { font-size: 11.5px; font-weight: 700; color: var( --slq-ink-soft ); background: var( --slq-paper ); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.slq-series-test-info { font-size: 13px; color: var( --slq-ink-soft ); margin-top: 6px; }
.slq-series-test-window { font-size: 12.5px; color: var( --slq-warning ); margin-top: 6px; font-weight: 700; }
.slq-series-test-action { flex: 0 0 auto; }
.slq-series-test-action a.slq-btn, .slq-series-test-action button.slq-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 124px; padding: 12px 20px; border-radius: 12px; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.slq-series-test-action a.slq-btn-primary, .slq-series-test-action a.slq-btn-primary:visited { background: var( --slq-btn, var( --slq-accent ) ); border-color: var( --slq-btn, var( --slq-accent ) ); color: var( --slq-btn-t, #fff ); }
.slq-series-test-action a.slq-btn-primary:hover { background: var( --slq-btn-h, var( --slq-accent-ink ) ); color: var( --slq-btn-t, #fff ); }

.slq-badge-ended { background: var( --slq-paper ); color: var( --slq-ink-soft ); border: 1px solid var( --slq-line ); }
.slq-series-test-window.is-ended { color: var( --slq-ink-soft ); }
.slq-badge-live { background: var( --slq-danger ); color: #fff; }
.slq-badge-premium { background: var( --slq-violet-bg ); color: var( --slq-violet ); }

/* ---- accordions ---- */
.slq-series-acc { border: 1px solid var( --slq-line ); border-radius: 16px; background: var( --slq-paper-raised ); overflow: hidden; }
.slq-series-acc > summary { display: flex; align-items: center; gap: 10px; padding: 15px 18px; cursor: pointer; font-weight: 700; font-size: 15.5px; list-style: none; color: var( --slq-ink ); }
.slq-series-acc > summary::-webkit-details-marker { display: none; }
.slq-series-acc-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.slq-series-acc-count { font-size: 12px; font-weight: 800; background: var( --slq-paper ); border-radius: 999px; padding: 2px 10px; color: var( --slq-ink-soft ); }
.slq-series-acc > summary::after { content: "\25BE"; color: var( --slq-ink-soft ); transition: transform .2s; }
.slq-series-acc[open] > summary::after { transform: rotate( 180deg ); }
.slq-series-acc-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-top: 1px solid var( --slq-line ); background: var( --slq-paper ); }
.slq-series-acc-body .slq-series-test-row { background: var( --slq-paper-raised ); }

/* ---- phones / small tablets ---- */
@media ( max-width: 640px ) {
	.slq-series-browser, .slq-series-detail { padding: 0 12px; }
	.slq-series-search { max-width: none; }
	.slq-series-grid { grid-template-columns: 1fr; gap: 14px; }
	.slq-series-card { padding: 16px; border-radius: 18px; }
	.slq-series-header { padding: 16px; gap: 14px; border-radius: 18px; }
	.slq-series-header-icon { width: 52px; height: 52px; border-radius: 16px; }
	.slq-series-kind-tabs { display: flex; width: 100%; }
	.slq-series-kind-tab { flex: 1; padding: 10px 8px; }
	.slq-series-test-row { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
	.slq-series-test-action a.slq-btn, .slq-series-test-action button.slq-btn { width: 100%; }
}
@media ( prefers-reduced-motion: reduce ) {
	.slq-series-card, .slq-series-test-row, .slq-series-progress-fill { transition: none; }
	.slq-series-card:hover { transform: none; }
}

/* ---- exam-category tabs on [slq_series_browser] ---- */
.slq-series-cats { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; margin-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.slq-series-cats::-webkit-scrollbar { display: none; }
.slq-series-cat-tab { flex: 0 0 auto; padding: 10px 20px; border-radius: 999px; border: 1px solid var( --slq-line ); background: var( --slq-paper-raised ); color: var( --slq-ink-soft ); font-family: var( --slq-font-body ); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; transition: all .15s; }
.slq-series-cat-tab:hover { border-color: var( --slq-btn, var( --slq-accent ) ); color: var( --slq-ink ); }
.slq-series-cat-tab.slq-series-cat-active { background: var( --slq-btn, var( --slq-accent ) ); border-color: var( --slq-btn, var( --slq-accent ) ); color: var( --slq-btn-t, #fff ); box-shadow: 0 6px 14px -8px rgba( 0, 0, 0, .5 ); }

/* ---- top row: Back (left) + Share (right) ---- */
.slq-series-toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.slq-series-toprow .slq-series-back { margin: 0; }
.slq-share { position: relative; }
.slq-share-btn { box-sizing: border-box !important; padding: 0 !important; margin: 0 !important; min-width: 40px; line-height: 0 !important; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var( --slq-line ); background: var( --slq-paper-raised ); color: var( --slq-ink-soft ); cursor: pointer; transition: all .15s; }
.slq-share-btn svg { display: block !important; width: 20px !important; height: 20px !important; min-width: 20px; max-width: none !important; flex: none; fill: none !important; stroke: currentColor !important; overflow: visible; }
.slq-share-btn:hover, .slq-share-btn[aria-expanded="true"] { color: var( --slq-btn-t, #fff ); background: var( --slq-btn, var( --slq-accent ) ); border-color: var( --slq-btn, var( --slq-accent ) ); }
.slq-share-pop { position: absolute; right: 0; top: calc( 100% + 8px ); z-index: 30; min-width: 190px; padding: 6px; border-radius: 14px; background: var( --slq-paper-raised ); border: 1px solid var( --slq-line ); box-shadow: 0 18px 40px -16px rgba( 0, 0, 0, .45 ); }
.slq-share-pop[hidden] { display: none; }
.slq-share-pop a, .slq-share-pop button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; border-radius: 10px; color: var( --slq-ink ); font: 600 14px var( --slq-font-body ); cursor: pointer; text-decoration: none; }
.slq-share-pop a:hover, .slq-share-pop button:hover { background: var( --slq-paper ); }

/* ---- [slq_live_tests] board ---- */
.slq-live-board { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.slq-live-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) ); gap: 16px; }
.slq-live-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 20px; background: var( --slq-paper-raised ); border: 1px solid var( --slq-line ); box-shadow: 0 8px 24px -18px rgba( 0, 0, 0, .35 ); position: relative; overflow: hidden; }
.slq-live-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #94a3b8; }
.slq-live-card.slq-live-live::before { background: #ef4444; }
.slq-live-card.slq-live-upcoming::before { background: #f59e0b; }
.slq-live-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.slq-live-users { margin-left: auto; font-size: 12px; font-weight: 700; color: var( --slq-ink-soft ); }
.slq-live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; background: #e2e8f0; color: #475569; }
.slq-live-live .slq-live-badge { background: #fee2e2; color: #b91c1c; }
.slq-live-live .slq-live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: slq-live-pulse 1.2s infinite; }
.slq-live-upcoming .slq-live-badge { background: #fef3c7; color: #b45309; }
@keyframes slq-live-pulse { 0% { box-shadow: 0 0 0 0 rgba( 239, 68, 68, .6 ); } 100% { box-shadow: 0 0 0 8px rgba( 239, 68, 68, 0 ); } }
.slq-live-title { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 800; color: var( --slq-ink ); }
.slq-live-series { font-size: 13px; color: var( --slq-ink-soft ); margin-top: -6px; }
.slq-live-info { display: flex; gap: 6px; flex-wrap: wrap; }
.slq-live-when { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var( --slq-ink-soft ); }
.slq-live-countdown { color: var( --slq-ink ); font-size: 14px; min-height: 1.2em; }
.slq-live-btn { margin-top: auto; display: block; text-align: center; padding: 12px 16px; border-radius: 12px; background: var( --slq-btn, var( --slq-accent ) ); color: var( --slq-btn-t, #fff ) !important; font-weight: 800; font-size: 14px; text-decoration: none; transition: filter .15s; }
.slq-live-btn:hover { filter: brightness( 1.08 ); }
.slq-live-btn[aria-disabled="true"] { background: var( --slq-paper ); color: var( --slq-ink-soft ) !important; border: 1px dashed var( --slq-line ); cursor: not-allowed; filter: none; }
.slq-live-ended .slq-live-btn { background: var( --slq-paper ); color: var( --slq-ink ) !important; border: 1px solid var( --slq-line ); }
@media ( max-width: 640px ) { .slq-live-board { padding: 0 12px; } .slq-live-grid { grid-template-columns: 1fr; } }

/* After an attempt (logged-in students): marks + Solution / Analysis / Reattempt */
.slq-series-test-action.has-result { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; border-top: 1px solid var( --slq-line, #e5e7eb ); padding-top: 12px; margin-top: 10px; }
.slq-result-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 13px; color: var( --slq-ink-soft, #555 ); }
.slq-result-score { font-weight: 800; font-size: 15px; color: var( --slq-ink, #111 ); }
.slq-result-pct { font-weight: 700; color: var( --slq-success, #0f766e ); }
.slq-result-mode { font-size: 12px; font-weight: 700; color: var( --slq-warning, #b45309 ); }
.slq-result-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.slq-series-test-action.has-result a.slq-btn { min-width: 0; padding: 9px 16px; font-size: 13px; }
@media (max-width: 600px) { .slq-result-btns { width: 100%; } .slq-result-btns .slq-btn { flex: 1 1 0; } }
@media ( min-width: 641px ) { .slq-series-test-row { flex-wrap: wrap; } }

/* Header: icon + title on the first line, the description and "last updated" use the full width underneath */
.slq-series-header { flex-wrap: wrap; align-items: center; row-gap: 12px; }
.slq-series-header-text { display: contents; }
.slq-series-header-title { flex: 1 1 0; min-width: 0; margin: 0; }
.slq-series-desc, .slq-series-header-meta { flex: 0 0 100%; order: 5; margin-top: 0; }
.slq-series-header-meta { order: 6; margin-top: -4px; }
.slq-result-resume { margin-top: 6px; font-size: 12px; color: var( --slq-ink-soft, #666 ); }
.slq-launch-card .slq-series-test-action{margin-top:14px}.slq-live-result{margin-top:auto}