/* ==========================================================================
   Theme — breaking.css (Breaking News ticker)
   One headline visible at a time; items fade/slide via .is-active (no marquee).
   Tokens: --sn-breaking (label colour), --sn-surface, --sn-border, fonts.
   ========================================================================== */
.sn-breaking {
	--sn-breaking-h: 44px;
	position: relative;
	background: var(--sn-surface);
	color: var(--sn-text);
	border-bottom: 1px solid var(--sn-border);
	font-family: var(--sn-font-ui);
	font-size: var(--sn-fs-sm);
	line-height: 1.3;
}
.sn-breaking__inner {
	display: flex;
	align-items: center;
	gap: var(--sn-space-3);
	width: 100%;
	max-width: var(--sn-container);
	min-height: var(--sn-breaking-h);
	margin-inline: auto;
	padding-inline: var(--sn-gutter);
}

/* Label */
.sn-breaking__label {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	flex: 0 0 auto;
	padding: .4em .7em;
	background: var(--sn-breaking);
	color: #fff;
	font-size: var(--sn-fs-xs);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
	border-radius: var(--sn-radius-sm);
	white-space: nowrap;
}
.sn-breaking__icon { flex: 0 0 auto; animation: sn-breaking-flicker 1.6s ease-in-out infinite; }
@keyframes sn-breaking-flicker {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .7; transform: scale(.92); }
}
.sn-breaking--pill .sn-breaking__label { border-radius: var(--sn-radius-full); padding-inline: .9em; }
.sn-breaking--pill { background: color-mix(in srgb, var(--sn-breaking) 6%, var(--sn-surface)); }

/* Ticker viewport: single line */
.sn-breaking__ticker {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	min-height: 1.5em;
}
.sn-breaking__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	min-height: 1.5em;
}
.sn-breaking__item {
	position: absolute;
	inset: 0 0 auto 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(60%);
	transition: opacity .35s var(--sn-ease), transform .35s var(--sn-ease), visibility 0s linear .35s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sn-breaking__item.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .35s var(--sn-ease), transform .35s var(--sn-ease), visibility 0s;
}
.sn-breaking__item.is-leaving { transform: translateY(-60%); }
.sn-breaking__link {
	display: inline-flex;
	align-items: baseline;
	gap: .5em;
	max-width: 100%;
	color: var(--sn-text);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
}
a.sn-breaking__link:hover { color: var(--sn-primary); }
a.sn-breaking__link:hover .sn-breaking__text { text-decoration: underline; text-underline-offset: 3px; }
.sn-breaking__text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sn-breaking__time {
	flex: 0 0 auto;
	color: var(--sn-breaking);
	font-size: var(--sn-fs-xs);
	font-weight: 700;
	letter-spacing: .02em;
}

/* Controls */
.sn-breaking__controls { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: auto; }
.sn-breaking__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--sn-radius-full);
	color: var(--sn-text-muted);
	transition: background var(--sn-dur), color var(--sn-dur);
}
.sn-breaking__btn:hover { background: color-mix(in srgb, var(--sn-text) 8%, transparent); color: var(--sn-text); }
.sn-breaking__btn[aria-pressed="true"] { color: var(--sn-breaking); }
.sn-breaking__ico-play[hidden], .sn-breaking__ico-pause[hidden] { display: none; }
.sn-breaking--single .sn-breaking__controls { display: none; }

/* Mobile: compact label (icon only), tighter bar */
@media (max-width: 639px) {
	.sn-breaking { --sn-breaking-h: 40px; }
	.sn-breaking__inner { gap: var(--sn-space-2); }
	.sn-breaking__label { padding: .45em .5em; }
	.sn-breaking__label-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.sn-breaking__time { display: none; }
	.sn-breaking__prev, .sn-breaking__next { display: none; }
}

/* Reduced motion: no slide/fade, no flicker (JS also stops auto-rotation) */
@media (prefers-reduced-motion: reduce) {
	.sn-breaking__item, .sn-breaking__item.is-active { transition: none; transform: none; }
	.sn-breaking__icon { animation: none; }
}

/* Dark mode: tokens switch automatically; soften the pill tint */
:root[data-theme="dark"] .sn-breaking--pill { background: color-mix(in srgb, var(--sn-breaking) 12%, var(--sn-surface)); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .sn-breaking--pill { background: color-mix(in srgb, var(--sn-breaking) 12%, var(--sn-surface)); }
}

@media print { .sn-breaking { display: none; } }