/*
 * Site banners: the one look for every announcement banner, on /z and in the editor's preview.
 * Drawn by site-banners.js. A theme is a set of variables; layouts, patterns, sizes and
 * animations are classes that read them, so any theme works with any layout.
 * The names are server/src/config/bannerLooks.ts. Never a nested comment in here (pitfall #13).
 */

.sbn-stack { display: flex; flex-direction: column; gap: 14px; }

.sbn {
	--b-bg: rgba(255, 255, 255, 0.035);
	--b-border: rgba(255, 255, 255, 0.08);
	--b-text: #ffffff;
	--b-dim: rgba(255, 255, 255, 0.68);
	--b-title: #ffffff;
	--b-title-grad: linear-gradient(var(--b-title), var(--b-title));
	--b-accent: #8b5cf6;
	--b-accent-fg: #ffffff;
	--b-tile: rgba(139, 92, 246, 0.18);
	--b-tile-fg: #c4b5fd;
	--b-badge-bg: rgba(139, 92, 246, 0.2);
	--b-badge-fg: #c4b5fd;
	--b-pat: rgba(255, 255, 255, 0.07);
	--b-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	--b-glow: rgba(139, 92, 246, 0.45);
	--b-chip: rgba(255, 255, 255, 0.07);
	--b-chip-border: rgba(255, 255, 255, 0.14);
	--b-scale: 1;
	--b-radius: 18px;
	--b-title-font: var(--font-family-title, 'Space Grotesk'), 'DM Sans', sans-serif;

	--sa-primary-bg: var(--b-accent);
	--sa-primary-fg: var(--b-accent-fg);
	--sa-primary-shadow: var(--b-glow);
	--sa-secondary-bg: var(--b-chip);
	--sa-secondary-fg: var(--b-text);
	--sa-secondary-border: var(--b-chip-border);
	--sa-ghost-fg: var(--b-dim);

	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--b-bg);
	border: 1px solid var(--b-border);
	border-radius: var(--b-radius);
	box-shadow: var(--b-shadow);
	color: var(--b-text);
	font-family: var(--font-family-body, 'DM Sans'), sans-serif;
	font-size: calc(14px * var(--b-scale));
	line-height: 1.55;
	padding: calc(22px * var(--b-scale)) calc(26px * var(--b-scale));
	text-align: left;
	transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.35s ease, margin 0.35s ease, padding 0.35s ease;
}
.sbn *, .sbn *::before, .sbn *::after { font-variant-ligatures: none; }

/* ── Themes ─────────────────────────────────────────────── */

/* classic: the look before 2026-10-13, coloured by the old Style (info / alert / success) */
.sbn--theme-classic { --b-bg: rgba(255, 255, 255, 0.035); --b-shadow: none; --b-radius: 16px; }
.sbn--theme-classic.sbn--variant-alert { --b-accent: #f59e0b; --b-accent-fg: #1c1206; --b-tile: rgba(245, 158, 11, 0.16); --b-tile-fg: #fbbf24; --b-badge-bg: rgba(245, 158, 11, 0.2); --b-badge-fg: #fbbf24; --b-glow: rgba(245, 158, 11, 0.35); }
.sbn--theme-classic.sbn--variant-success { --b-accent: #10b981; --b-accent-fg: #03140d; --b-tile: rgba(16, 185, 129, 0.16); --b-tile-fg: #6ee7b7; --b-badge-bg: rgba(16, 185, 129, 0.2); --b-badge-fg: #6ee7b7; --b-glow: rgba(16, 185, 129, 0.35); }

.sbn--theme-rise {
	--b-bg: linear-gradient(140deg, #2a1546 0%, #1a0d2c 55%, #0b0612 100%);
	--b-border: #3a2257;
	--b-dim: #b7a5d6;
	--b-title-grad: linear-gradient(90deg, #ffd700, #ff8a00);
	--b-accent: linear-gradient(135deg, #ffd700, #ff8a00);
	--b-accent-fg: #0b0612;
	--b-tile: linear-gradient(135deg, #ffd700, #ff8a00);
	--b-tile-fg: #0b0612;
	--b-badge-bg: rgba(255, 215, 0, 0.16);
	--b-badge-fg: #ffd700;
	--b-glow: rgba(255, 138, 0, 0.4);
}
.sbn--theme-aurora {
	--b-bg: linear-gradient(135deg, #0c2b3a 0%, #1b1446 55%, #2c0f3f 100%);
	--b-border: rgba(94, 234, 212, 0.28);
	--b-dim: #b6d6e0;
	--b-title-grad: linear-gradient(90deg, #5eead4, #a78bfa 60%, #f0abfc);
	--b-accent: linear-gradient(135deg, #2dd4bf, #8b5cf6);
	--b-accent-fg: #06121a;
	--b-tile: linear-gradient(135deg, #2dd4bf, #8b5cf6);
	--b-tile-fg: #06121a;
	--b-badge-bg: rgba(94, 234, 212, 0.16);
	--b-badge-fg: #5eead4;
	--b-glow: rgba(45, 212, 191, 0.4);
}
.sbn--theme-ocean {
	--b-bg: linear-gradient(160deg, #0b2545 0%, #0e3a63 60%, #0a5a7a 100%);
	--b-border: rgba(125, 211, 252, 0.3);
	--b-dim: #b7d7ee;
	--b-title-grad: linear-gradient(90deg, #e0f2fe, #7dd3fc);
	--b-accent: #38bdf8;
	--b-accent-fg: #03192b;
	--b-tile: rgba(56, 189, 248, 0.2);
	--b-tile-fg: #7dd3fc;
	--b-badge-bg: rgba(56, 189, 248, 0.2);
	--b-badge-fg: #bae6fd;
	--b-glow: rgba(56, 189, 248, 0.4);
}
.sbn--theme-sunset {
	--b-bg: linear-gradient(135deg, #3b0d2e 0%, #7a1f3d 50%, #c2410c 100%);
	--b-border: rgba(251, 146, 60, 0.4);
	--b-dim: #fcd9c4;
	--b-title-grad: linear-gradient(90deg, #fef3c7, #fdba74);
	--b-accent: linear-gradient(135deg, #fde68a, #fb923c);
	--b-accent-fg: #2a0a12;
	--b-tile: rgba(253, 230, 138, 0.2);
	--b-tile-fg: #fde68a;
	--b-badge-bg: rgba(254, 243, 199, 0.18);
	--b-badge-fg: #fef3c7;
	--b-glow: rgba(251, 146, 60, 0.45);
}
.sbn--theme-forest {
	--b-bg: linear-gradient(150deg, #0d2417 0%, #173a26 60%, #1f4d2f 100%);
	--b-border: rgba(74, 222, 128, 0.28);
	--b-dim: #bfe3c9;
	--b-title-grad: linear-gradient(90deg, #dcfce7, #86efac);
	--b-accent: #4ade80;
	--b-accent-fg: #052e16;
	--b-tile: rgba(74, 222, 128, 0.18);
	--b-tile-fg: #86efac;
	--b-badge-bg: rgba(74, 222, 128, 0.18);
	--b-badge-fg: #bbf7d0;
	--b-glow: rgba(74, 222, 128, 0.35);
}
.sbn--theme-meadow {
	--b-bg: linear-gradient(140deg, #fff7d6 0%, #f2f8c9 55%, #d7f0b4 100%);
	--b-border: #c9d99a;
	--b-text: #3a2a12;
	--b-dim: #6b5a36;
	--b-title-grad: linear-gradient(90deg, #4d7c0f, #a16207);
	--b-accent: #65a30d;
	--b-accent-fg: #ffffff;
	--b-tile: #65a30d;
	--b-tile-fg: #ffffff;
	--b-badge-bg: #fde68a;
	--b-badge-fg: #713f12;
	--b-pat: rgba(77, 124, 15, 0.09);
	--b-glow: rgba(101, 163, 13, 0.35);
	--b-chip: rgba(58, 42, 18, 0.06);
	--b-chip-border: rgba(58, 42, 18, 0.18);
	--b-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.sbn--theme-candy {
	--b-bg: linear-gradient(135deg, #ffd6e8 0%, #f5d0fe 50%, #d4d4ff 100%);
	--b-border: #f0abfc;
	--b-text: #4a1d3f;
	--b-dim: #7a4569;
	--b-title-grad: linear-gradient(90deg, #db2777, #7c3aed);
	--b-accent: linear-gradient(135deg, #ec4899, #8b5cf6);
	--b-accent-fg: #ffffff;
	--b-tile: linear-gradient(135deg, #ec4899, #8b5cf6);
	--b-tile-fg: #ffffff;
	--b-badge-bg: #ffffff;
	--b-badge-fg: #be185d;
	--b-pat: rgba(219, 39, 119, 0.1);
	--b-glow: rgba(236, 72, 153, 0.4);
	--b-chip: rgba(255, 255, 255, 0.55);
	--b-chip-border: rgba(124, 58, 237, 0.25);
}
.sbn--theme-lavender {
	--b-bg: linear-gradient(140deg, #2e1f4f 0%, #42296d 60%, #5a3591 100%);
	--b-border: rgba(196, 181, 253, 0.32);
	--b-dim: #d8ccf5;
	--b-title-grad: linear-gradient(90deg, #f5f3ff, #d8b4fe);
	--b-accent: #c084fc;
	--b-accent-fg: #1e0b36;
	--b-tile: rgba(216, 180, 254, 0.2);
	--b-tile-fg: #e9d5ff;
	--b-badge-bg: rgba(233, 213, 255, 0.18);
	--b-badge-fg: #f3e8ff;
	--b-glow: rgba(192, 132, 252, 0.4);
}
.sbn--theme-mint {
	--b-bg: linear-gradient(140deg, #ecfdf5 0%, #d1fae5 50%, #ccfbf1 100%);
	--b-border: #99f6e4;
	--b-text: #064e3b;
	--b-dim: #2f6f5c;
	--b-title-grad: linear-gradient(90deg, #047857, #0e7490);
	--b-accent: #10b981;
	--b-accent-fg: #ffffff;
	--b-tile: #10b981;
	--b-tile-fg: #ffffff;
	--b-badge-bg: #ffffff;
	--b-badge-fg: #047857;
	--b-pat: rgba(4, 120, 87, 0.08);
	--b-glow: rgba(16, 185, 129, 0.35);
	--b-chip: rgba(255, 255, 255, 0.7);
	--b-chip-border: rgba(4, 120, 87, 0.22);
	--b-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.sbn--theme-ember {
	--b-bg: radial-gradient(120% 140% at 0% 100%, #7c2d12 0%, #2a0c03 55%, #120400 100%);
	--b-border: rgba(249, 115, 22, 0.35);
	--b-dim: #f6c6a6;
	--b-title-grad: linear-gradient(90deg, #fed7aa, #f97316 55%, #ef4444);
	--b-accent: linear-gradient(135deg, #f97316, #dc2626);
	--b-accent-fg: #ffffff;
	--b-tile: linear-gradient(135deg, #f97316, #dc2626);
	--b-tile-fg: #ffffff;
	--b-badge-bg: rgba(249, 115, 22, 0.2);
	--b-badge-fg: #fdba74;
	--b-glow: rgba(249, 115, 22, 0.5);
}
.sbn--theme-cosmic {
	--b-bg:
		radial-gradient(60% 80% at 15% 20%, rgba(168, 85, 247, 0.35), transparent 70%),
		radial-gradient(50% 70% at 85% 80%, rgba(59, 130, 246, 0.35), transparent 70%),
		#0b0420;
	--b-border: rgba(167, 139, 250, 0.3);
	--b-dim: #c9c2ef;
	--b-title-grad: linear-gradient(90deg, #f0abfc, #a5b4fc 60%, #67e8f9);
	--b-accent: linear-gradient(135deg, #a855f7, #3b82f6);
	--b-accent-fg: #ffffff;
	--b-tile: linear-gradient(135deg, #a855f7, #3b82f6);
	--b-tile-fg: #ffffff;
	--b-badge-bg: rgba(167, 139, 250, 0.2);
	--b-badge-fg: #ddd6fe;
	--b-pat: rgba(255, 255, 255, 0.5);
	--b-glow: rgba(168, 85, 247, 0.45);
}
.sbn--theme-midnight {
	--b-bg: linear-gradient(160deg, #0f172a 0%, #020617 100%);
	--b-border: #1e293b;
	--b-dim: #94a3b8;
	--b-title: #f1f5f9;
	--b-accent: #60a5fa;
	--b-accent-fg: #020617;
	--b-tile: rgba(96, 165, 250, 0.14);
	--b-tile-fg: #93c5fd;
	--b-badge-bg: rgba(148, 163, 184, 0.16);
	--b-badge-fg: #cbd5e1;
	--b-glow: rgba(96, 165, 250, 0.35);
}
.sbn--theme-neon {
	--b-bg: #07020f;
	--b-border: #f0abfc;
	--b-dim: #c4b5fd;
	--b-title-grad: linear-gradient(90deg, #22d3ee, #f0abfc);
	--b-accent: #22d3ee;
	--b-accent-fg: #04121a;
	--b-tile: transparent;
	--b-tile-fg: #22d3ee;
	--b-badge-bg: transparent;
	--b-badge-fg: #f0abfc;
	--b-pat: rgba(240, 171, 252, 0.08);
	--b-glow: rgba(34, 211, 238, 0.55);
	--b-shadow: 0 0 0 1px rgba(240, 171, 252, 0.4), 0 0 24px rgba(240, 171, 252, 0.35), inset 0 0 30px rgba(34, 211, 238, 0.08);
}
.sbn--theme-neon .sbn__title { filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.45)); }
.sbn--theme-neon .sbn__tile { border: 1.5px solid #22d3ee; box-shadow: 0 0 14px rgba(34, 211, 238, 0.5); }
.sbn--theme-neon .sbn__badge { border: 1px solid #f0abfc; box-shadow: 0 0 10px rgba(240, 171, 252, 0.4); }

.sbn--theme-arcade {
	--b-bg: #1a1033;
	--b-border: transparent;
	--b-dim: #c9bdf0;
	--b-title: #facc15;
	--b-accent: #facc15;
	--b-accent-fg: #1a1033;
	--b-tile: #ec4899;
	--b-tile-fg: #ffffff;
	--b-badge-bg: #22d3ee;
	--b-badge-fg: #0b0420;
	--b-pat: rgba(255, 255, 255, 0.05);
	--b-glow: rgba(250, 204, 21, 0.35);
	--b-radius: 4px;
	--b-title-font: 'Space Grotesk', monospace;
	--b-shadow: 0 0 0 3px #0b0420, 0 0 0 6px #facc15, 6px 6px 0 6px #ec4899;
	margin: 6px 10px 12px 6px;
}
.sbn--theme-arcade .sbn__title { text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 3px 3px 0 #ec4899; color: #facc15; background: none; -webkit-text-fill-color: #facc15; }
.sbn--theme-arcade .sa-btn { border-radius: 3px; box-shadow: 3px 3px 0 #ec4899; text-transform: uppercase; letter-spacing: 0.06em; }
.sbn--theme-arcade .sbn__tile { border-radius: 4px; box-shadow: 3px 3px 0 #0b0420; }

.sbn--theme-glass {
	--b-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
	--b-border: rgba(255, 255, 255, 0.22);
	--b-dim: rgba(255, 255, 255, 0.75);
	--b-title: #ffffff;
	--b-accent: rgba(255, 255, 255, 0.92);
	--b-accent-fg: #160c24;
	--b-tile: rgba(255, 255, 255, 0.16);
	--b-tile-fg: #ffffff;
	--b-badge-bg: rgba(255, 255, 255, 0.18);
	--b-badge-fg: #ffffff;
	--b-glow: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
}
.sbn--theme-paper {
	--b-bg: #fffaf0;
	--b-border: #e7dcc8;
	--b-text: #2b2118;
	--b-dim: #6b5d4d;
	--b-title: #2b2118;
	--b-accent: #2b2118;
	--b-accent-fg: #fffaf0;
	--b-tile: #f3e8d3;
	--b-tile-fg: #9a3412;
	--b-badge-bg: #fde68a;
	--b-badge-fg: #78350f;
	--b-pat: rgba(43, 33, 24, 0.07);
	--b-glow: rgba(43, 33, 24, 0.2);
	--b-chip: #ffffff;
	--b-chip-border: #e7dcc8;
	--b-shadow: 0 2px 0 #e7dcc8, 0 12px 28px rgba(0, 0, 0, 0.18);
}
.sbn--theme-mono {
	--b-bg: #0c0c0e;
	--b-border: #2a2a2e;
	--b-dim: #a1a1aa;
	--b-title: #fafafa;
	--b-accent: #fafafa;
	--b-accent-fg: #0c0c0e;
	--b-tile: #1c1c20;
	--b-tile-fg: #fafafa;
	--b-badge-bg: #fafafa;
	--b-badge-fg: #0c0c0e;
	--b-glow: rgba(255, 255, 255, 0.15);
}

/* ── Parts ──────────────────────────────────────────────── */

.sbn__pattern { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 1; }
.sbn__inner { position: relative; display: flex; gap: calc(18px * var(--b-scale)); align-items: flex-start; }
.sbn__body { flex: 1; min-width: 0; }
.sbn__head { display: flex; align-items: flex-start; gap: 10px; }
.sbn__title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-family: var(--b-title-font);
	font-weight: 700;
	font-size: calc(16px * var(--b-scale));
	line-height: 1.25;
	letter-spacing: 0.005em;
	background: var(--b-title-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.sbn__badge {
	flex-shrink: 0;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--b-badge-bg);
	color: var(--b-badge-fg);
	white-space: nowrap;
}
.sbn__msg { color: var(--b-dim); margin-top: 8px; font-size: calc(14px * var(--b-scale)); line-height: 1.65; white-space: pre-line; }
.sbn__msg.sbn-rich { white-space: normal; }
/* The teacher's own spacing is kept: each paragraph is spaced, a skipped line (an empty
   paragraph from the editor) keeps a full line, and spaces she typed are not collapsed. */
.sbn-rich p { margin: 0 0 0.7em; white-space: pre-wrap; } .sbn-rich p:last-child { margin-bottom: 0; }
.sbn-rich p:empty, .sbn-rich p:has(> br:only-child) { min-height: 1.65em; }
.sbn-rich p:empty::before { content: '\00a0'; }
.sbn-rich ul, .sbn-rich ol { margin: 4px 0 6px; padding-left: 20px; }
.sbn-rich a { color: inherit; text-decoration: underline; }
.sbn-rich code { background: var(--b-chip); border-radius: 4px; padding: 1px 5px; font-size: 0.9em; }
.sbn-rich mark { border-radius: 3px; padding: 0 2px; }
.sbn-rich h1, .sbn-rich h2, .sbn-rich h3 { font-size: 1.1em; margin: 6px 0 4px; color: var(--b-text); }
.sbn-rich .te-icon { display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; margin: 0 2px; }
.sbn-rich table { border-collapse: collapse; margin: 6px 0; width: 100%; }
.sbn-rich th, .sbn-rich td { border: 1px solid var(--b-chip-border); padding: 4px 8px; font-size: 0.92em; }

.sbn__tile {
	flex-shrink: 0;
	width: calc(46px * var(--b-scale));
	height: calc(46px * var(--b-scale));
	border-radius: 14px;
	display: grid;
	place-items: center;
	background: var(--b-tile);
	color: var(--b-tile-fg);
}
.sbn__tile svg { width: 55%; height: 55%; }
.sbn__actions { margin-top: calc(16px * var(--b-scale)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sbn__actions .sa-row { flex: 0 1 auto; }

.sbn__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--b-dim);
	cursor: pointer;
	z-index: 2;
}
.sbn__close:hover { background: var(--b-chip); color: var(--b-text); }
.sbn--dismissible .sbn__head { padding-right: 36px; }
.sbn__gotit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 8px 14px;
	border-radius: 11px;
	border: 1px dashed var(--b-chip-border);
	background: transparent;
	color: var(--b-dim);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.sbn__gotit:hover { color: var(--b-text); border-style: solid; }
.sbn--leaving { opacity: 0; transform: translateY(-6px) scale(0.98); }

/* Lock banners (services/bannerLocks.ts): closed is amber, --status-closed */
.sbn--lock { border-color: rgba(245, 158, 11, 0.7); box-shadow: var(--b-shadow), 0 0 0 1px rgba(245, 158, 11, 0.35); }
.sbn__lock-line {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 8px 12px;
	border-radius: 10px;
	background: rgba(245, 158, 11, 0.14);
	border: 1px solid rgba(245, 158, 11, 0.35);
	color: #fde68a;
	font-size: 12.5px;
	font-weight: 600;
}
.sbn__lock-line svg { flex-shrink: 0; }
.sbn--theme-meadow .sbn__lock-line, .sbn--theme-candy .sbn__lock-line, .sbn--theme-mint .sbn__lock-line, .sbn--theme-paper .sbn__lock-line { color: #92400e; background: rgba(245, 158, 11, 0.18); }

/* Countdown */
.sbn__countdown { margin-top: calc(12px * var(--b-scale)); display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.sbn__cd-label { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--b-dim); }
.sbn__cd-units { display: flex; gap: 6px; }
.sbn__cd-unit {
	min-width: 48px;
	padding: 6px 8px 4px;
	border-radius: 10px;
	background: var(--b-chip);
	border: 1px solid var(--b-chip-border);
	text-align: center;
}
.sbn__cd-num { display: block; font-family: var(--b-title-font); font-weight: 700; font-size: calc(19px * var(--b-scale)); line-height: 1.1; color: var(--b-text); font-variant-numeric: tabular-nums; }
.sbn__cd-cap { display: block; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--b-dim); }
.sbn__cd-done { font-weight: 700; color: var(--b-text); }

/* One-tap question */
.sbn__question { margin-top: calc(12px * var(--b-scale)); }
.sbn__q-prompt { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: var(--b-text); }
.sbn__q-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.sbn__q-choice {
	position: relative;
	overflow: hidden;
	min-height: 40px;
	padding: 8px 14px;
	border-radius: 12px;
	border: 1px solid var(--b-chip-border);
	background: var(--b-chip);
	color: var(--b-text);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.12s ease, border-color 0.15s ease;
}
.sbn__q-choice:hover { transform: translateY(-1px); border-color: var(--b-badge-fg); }
.sbn__q-choice.is-picked { border-color: var(--b-badge-fg); box-shadow: 0 0 0 2px var(--b-glow); }
.sbn__q-choice .sbn__q-bar { position: absolute; inset: 0 auto 0 0; background: var(--b-glow); opacity: 0.5; z-index: -1; transition: width 0.6s ease; }
.sbn__q-choice .sbn__q-pct { margin-left: 8px; font-variant-numeric: tabular-nums; color: var(--b-dim); font-weight: 700; }
.sbn__q-note { margin-top: 6px; font-size: 12px; color: var(--b-dim); }

/* Details */
.sbn__details { margin-top: 12px; border-top: 1px solid var(--b-chip-border); }
.sbn__details-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 2px;
	min-height: 44px;
	background: transparent;
	border: 0;
	color: var(--b-dim);
	font: inherit;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}
.sbn__details-toggle .sbn__chev { margin-left: auto; transition: transform 0.2s; }
.sbn__details.is-open .sbn__chev { transform: rotate(180deg); }
.sbn__details-body { display: none; padding-bottom: 6px; }
.sbn__details.is-open .sbn__details-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sbn__dcard { display: flex; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--b-chip); border: 1px solid var(--b-chip-border); }
.sbn__dcard--warn { grid-column: 1 / -1; }
.sbn__dcard-icon { flex-shrink: 0; color: var(--b-dim); margin-top: 1px; }
.sbn__dcard--ok .sbn__dcard-icon { color: #34d399; }
.sbn__dcard--warn .sbn__dcard-icon { color: #f87171; }
.sbn__dcard-title { font-weight: 700; font-size: 12.5px; color: var(--b-text); }
.sbn__dcard-text { font-size: 12px; color: var(--b-dim); margin-top: 2px; }
@media (max-width: 520px) { .sbn__details.is-open .sbn__details-body { grid-template-columns: 1fr; } }

/* ── Layouts ────────────────────────────────────────────── */

/* spotlight: a big icon tile beside the words */
.sbn--layout-spotlight .sbn__tile { width: calc(64px * var(--b-scale)); height: calc(64px * var(--b-scale)); border-radius: 18px; }

/* hero: centred, the icon in a ring above */
.sbn--layout-hero { padding: calc(26px * var(--b-scale)) calc(22px * var(--b-scale)); text-align: center; }
.sbn--layout-hero .sbn__inner { flex-direction: column; align-items: center; }
.sbn--layout-hero .sbn__tile { width: calc(64px * var(--b-scale)); height: calc(64px * var(--b-scale)); border-radius: 50%; box-shadow: 0 0 0 6px var(--b-chip); }
.sbn--layout-hero .sbn__head { justify-content: center; flex-direction: column; align-items: center; gap: 8px; }
.sbn--layout-hero .sbn__title { font-size: calc(22px * var(--b-scale)); flex: none; }
.sbn--layout-hero .sbn__badge { order: -1; }
.sbn--layout-hero .sbn__actions, .sbn--layout-hero .sbn__countdown, .sbn--layout-hero .sbn__q-choices { justify-content: center; }
.sbn--layout-hero.sbn--dismissible .sbn__head { padding-right: 0; }

/* poster: a big display title, the icon large and faint in the corner */
.sbn--layout-poster { padding: calc(28px * var(--b-scale)) calc(24px * var(--b-scale)); min-height: calc(180px * var(--b-scale)); }
.sbn--layout-poster .sbn__title { font-size: calc(30px * var(--b-scale)); line-height: 1.08; letter-spacing: -0.01em; }
.sbn--layout-poster .sbn__msg { font-size: calc(15px * var(--b-scale)); margin-top: 8px; max-width: 46ch; }
.sbn--layout-poster .sbn__tile {
	position: absolute;
	right: -18px;
	bottom: -22px;
	width: calc(150px * var(--b-scale));
	height: calc(150px * var(--b-scale));
	background: transparent;
	color: var(--b-badge-fg);
	opacity: 0.16;
	transform: rotate(-12deg);
	pointer-events: none;
}
.sbn--layout-poster .sbn__tile svg { width: 100%; height: 100%; }
.sbn--layout-poster .sbn__badge { position: absolute; top: 14px; right: 14px; }
.sbn--layout-poster .sbn__head { padding-right: 70px; }
.sbn--layout-poster.sbn--dismissible .sbn__badge { right: 60px; top: 18px; }

/* strip: one slim line, the buttons at the end */
.sbn--layout-strip { padding: calc(10px * var(--b-scale)) calc(14px * var(--b-scale)); border-radius: 14px; }
.sbn--layout-strip .sbn__inner { align-items: center; flex-wrap: wrap; }
.sbn--layout-strip .sbn__tile { width: 34px; height: 34px; border-radius: 10px; }
.sbn--layout-strip .sbn__body { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.sbn--layout-strip .sbn__head { flex: 0 1 auto; align-items: center; }
.sbn--layout-strip .sbn__title { font-size: calc(14.5px * var(--b-scale)); flex: none; }
.sbn--layout-strip .sbn__msg { margin-top: 0; flex: 1 1 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbn--layout-strip .sbn__msg * { display: inline; margin: 0; }
.sbn--layout-strip .sbn__actions { margin-top: 0; margin-left: auto; }
.sbn--layout-strip .sbn__countdown, .sbn--layout-strip .sbn__question, .sbn--layout-strip .sbn__details { flex-basis: 100%; margin-top: 4px; }
.sbn--layout-strip.sbn--dismissible { padding-right: 52px; }
.sbn--layout-strip.sbn--dismissible .sbn__head { padding-right: 0; }
.sbn--layout-strip .sbn__close { top: 50%; transform: translateY(-50%); }

/* ticker: the words run across, the buttons stay put */
.sbn--layout-ticker { padding: calc(10px * var(--b-scale)) calc(14px * var(--b-scale)); border-radius: 14px; }
.sbn--layout-ticker .sbn__inner { align-items: center; }
.sbn--layout-ticker .sbn__tile { width: 34px; height: 34px; border-radius: 10px; }
.sbn--layout-ticker .sbn__body { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sbn__ticker {
	flex: 1 1 220px;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sbn__ticker-track { display: inline-flex; gap: 48px; white-space: nowrap; animation: sbn-ticker var(--b-ticker-s, 22s) linear infinite; padding-left: 100%; }
.sbn__ticker:hover .sbn__ticker-track { animation-play-state: paused; }
.sbn__ticker-item b { font-family: var(--b-title-font); color: var(--b-text); margin-right: 10px; }
.sbn__ticker-item { color: var(--b-dim); }
.sbn--layout-ticker .sbn__actions { margin-top: 0; }
.sbn--layout-ticker .sbn__countdown, .sbn--layout-ticker .sbn__question, .sbn--layout-ticker .sbn__details { flex-basis: 100%; margin-top: 4px; }
.sbn--layout-ticker.sbn--dismissible { padding-right: 52px; }
.sbn--layout-ticker .sbn__close { top: 50%; transform: translateY(-50%); }
@keyframes sbn-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ── Sizes and alignment ────────────────────────────────── */

.sbn--size-compact { --b-scale: 0.88; }
.sbn--size-large { --b-scale: 1.18; }
.sbn--align-center { text-align: center; }
.sbn--align-center .sbn__inner { flex-direction: column; align-items: center; }
.sbn--align-center .sbn__head { justify-content: center; }
.sbn--align-center .sbn__title { flex: none; }
.sbn--align-center .sbn__actions, .sbn--align-center .sbn__countdown, .sbn--align-center .sbn__q-choices { justify-content: center; }

/* ── Patterns ───────────────────────────────────────────── */

.sbn--pat-dots .sbn__pattern { background-image: radial-gradient(var(--b-pat) 1.4px, transparent 1.6px); background-size: 16px 16px; }
.sbn--pat-grid .sbn__pattern {
	background-image: linear-gradient(var(--b-pat) 1px, transparent 1px), linear-gradient(90deg, var(--b-pat) 1px, transparent 1px);
	background-size: 22px 22px;
}
.sbn--pat-stripes .sbn__pattern { background-image: repeating-linear-gradient(135deg, var(--b-pat) 0 10px, transparent 10px 22px); }
.sbn--pat-checker .sbn__pattern {
	background-image: conic-gradient(var(--b-pat) 25%, transparent 0 50%, var(--b-pat) 0 75%, transparent 0);
	background-size: 24px 24px;
}
.sbn--pat-pixels .sbn__pattern {
	background-image:
		linear-gradient(var(--b-pat) 50%, transparent 0),
		linear-gradient(90deg, transparent 50%, var(--b-pat) 0);
	background-size: 8px 8px;
	opacity: 0.6;
	-webkit-mask-image: linear-gradient(90deg, transparent 40%, #000);
	mask-image: linear-gradient(90deg, transparent 40%, #000);
}
.sbn--pat-stars .sbn__pattern {
	background-image:
		radial-gradient(1.5px 1.5px at 12% 24%, var(--b-pat), transparent),
		radial-gradient(1px 1px at 28% 70%, var(--b-pat), transparent),
		radial-gradient(2px 2px at 46% 18%, var(--b-pat), transparent),
		radial-gradient(1px 1px at 63% 56%, var(--b-pat), transparent),
		radial-gradient(1.5px 1.5px at 78% 30%, var(--b-pat), transparent),
		radial-gradient(1px 1px at 88% 78%, var(--b-pat), transparent),
		radial-gradient(2px 2px at 94% 12%, var(--b-pat), transparent),
		radial-gradient(1px 1px at 6% 86%, var(--b-pat), transparent);
	background-size: 260px 140px;
	opacity: 0.9;
}
.sbn--pat-stars { --b-pat: rgba(255, 255, 255, 0.55); }
.sbn--theme-meadow.sbn--pat-stars, .sbn--theme-candy.sbn--pat-stars, .sbn--theme-mint.sbn--pat-stars, .sbn--theme-paper.sbn--pat-stars { --b-pat: rgba(0, 0, 0, 0.25); }
.sbn--pat-waves .sbn__pattern {
	background-image:
		radial-gradient(circle at 50% 120%, transparent 18px, var(--b-pat) 19px, var(--b-pat) 21px, transparent 22px);
	background-size: 40px 22px;
}
.sbn--pat-confetti .sbn__pattern {
	background-image:
		linear-gradient(45deg, #f472b6 0 0) ,
		linear-gradient(-30deg, #facc15 0 0),
		linear-gradient(60deg, #34d399 0 0),
		linear-gradient(15deg, #60a5fa 0 0),
		linear-gradient(-60deg, #a78bfa 0 0),
		linear-gradient(30deg, #fb923c 0 0);
	background-size: 7px 3px, 6px 3px, 7px 3px, 5px 3px, 6px 3px, 7px 3px;
	background-position: 8% 20%, 24% 78%, 41% 32%, 67% 18%, 83% 66%, 93% 30%;
	background-repeat: no-repeat;
	opacity: 0.7;
}

/* ── Animations (all off for reduced motion) ────────────── */

.sbn--anim-rise-in { animation: sbn-rise-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes sbn-rise-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

.sbn--anim-shimmer::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
	background-size: 250% 100%;
	animation: sbn-shimmer 4.5s ease-in-out infinite;
}
@keyframes sbn-shimmer { 0% { background-position: 130% 0; } 60%, 100% { background-position: -130% 0; } }

.sbn--anim-glow { animation: sbn-glow 2.8s ease-in-out infinite; }
@keyframes sbn-glow { 0%, 100% { box-shadow: var(--b-shadow), 0 0 0 0 var(--b-glow); } 50% { box-shadow: var(--b-shadow), 0 0 26px 2px var(--b-glow); } }

.sbn--anim-pulse { animation: sbn-pulse 2.4s ease-in-out infinite; }
@keyframes sbn-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }

.sbn--anim-float { animation: sbn-float 4s ease-in-out infinite; }
@keyframes sbn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.sbn--anim-gradient { background-size: 220% 220%; animation: sbn-gradient 9s ease infinite; }
@keyframes sbn-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.sbn--anim-sparkle .sbn__spark {
	position: absolute;
	width: 8px;
	height: 8px;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(circle, #fff 0 30%, transparent 70%);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	opacity: 0;
	animation: sbn-twinkle 2.6s ease-in-out infinite;
}
@keyframes sbn-twinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0); } 45% { opacity: 0.95; transform: scale(1.1) rotate(45deg); } }

.sbn--anim-wiggle-icon .sbn__tile svg { animation: sbn-wiggle 3.2s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes sbn-wiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } 82% { transform: rotate(12deg); } 89% { transform: rotate(-8deg); } 95% { transform: rotate(4deg); } }

/* Confetti, once */
.sbn__confetti { position: absolute; top: -10px; width: 8px; height: 12px; border-radius: 2px; z-index: 3; pointer-events: none; animation: sbn-confetti 1.9s cubic-bezier(0.25, 0.6, 0.35, 1) forwards; }
@keyframes sbn-confetti {
	0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
	100% { transform: translate3d(var(--dx, 0), var(--dy, 220px), 0) rotate(var(--rot, 540deg)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sbn, .sbn::after, .sbn *, .sbn__ticker-track { animation: none !important; transition: none !important; }
	.sbn__ticker-track { padding-left: 0; white-space: normal; flex-wrap: wrap; }
	.sbn__ticker-item + .sbn__ticker-item { display: none; }
	.sbn__ticker { -webkit-mask-image: none; mask-image: none; }
	.sbn__confetti, .sbn__spark { display: none; }
}

@media (max-width: 520px) {
	.sbn--layout-poster .sbn__title { font-size: calc(24px * var(--b-scale)); }
	.sbn--layout-poster .sbn__head { padding-right: 36px; flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
	.sbn--layout-poster .sbn__badge, .sbn--layout-poster.sbn--dismissible .sbn__badge { position: static; }
	.sbn--layout-strip .sbn__actions, .sbn--layout-ticker .sbn__actions { margin-left: 0; }
	.sbn--layout-strip .sbn__msg { white-space: normal; }
}