/*
 * Ticker page and sidebar widget.
 *
 * Plain CSS shipped with the plugin (no theme build step). Colours come from the theme's
 * custom properties, which the built style.css keeps at runtime — including their dark-
 * mode values — so this follows the theme instead of hard-coding a palette.
 */

/* ── Page header ─────────────────────────────────────────────────────────────── */

/*
 * The "Briefing" pill in the meta line, shaped like the theme's section badges
 * (.entry-recent-* in modules/post.css: 1px 8px padding, 3px radius) and coloured with
 * the "News" pairing the related grid documents — var(--color-blue-dark) with white text,
 * 10.41:1. The other pill colours already mean something (Debatte, Premium/English,
 * Top-Story, Advertorial); tokens, so it follows the dark-mode palette too.
 */
.ticker-flag {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 3px;
	background: var(--color-blue-dark, #013e83);
	color: var(--color-white, #fff);
}

/* "Aktualisiert heute 09:50" wraps as one piece rather than splitting at the time. */
.ticker-updated {
	white-space: nowrap;
}

/* The topic in the page's meta line: bold capitals (CSS, so the text itself keeps its
   spelling). The sidebar widget shows it at regular weight. */
.ticker-topic {
	font-weight: 700;
	text-transform: uppercase;
}

/* ── Lead day: the summary box carries the newest day's heading ──────────────── */

.ticker-summary {
	margin: 0 0 0.25em;
	padding: 0.9em 1.1em;
	border-left: 4px solid var(--color-box-highlight, #013e83);
	background: var(--color-box-background, #e4eff9);
	color: var(--color-box-text, inherit);
}

.ticker .entry-content .ticker-summary .ticker-day-title {
	margin: 0 0 0.5em;
	padding: 0;
	border-bottom: 0;
}

.ticker .entry-content .ticker-summary-text p {
	margin: 0 0 0.6em;
}

.ticker .entry-content .ticker-summary-text p:last-child {
	margin-bottom: 0;
}

/* ── Timeline ────────────────────────────────────────────────────────────────── */

.ticker-day {
	margin: 0 0 1.5em;
}

.ticker .entry-content .ticker-day-title {
	margin: 0 0 0.5em;
	padding: 0.35em 0;
	border-bottom: 1px solid var(--color-grey-light, #c5c5c5);
	font-size: 1em;
}

.ticker-day-title:focus {
	outline: 2px solid var(--color-link, #013e83);
	outline-offset: 2px;
}

.ticker-day-relative {
	margin-right: 0.35em;
	color: var(--color-link, #013e83);
}

/* Beats the theme's `.entry-content ol` indent and per-item margin (typography.css). */
.ticker .entry-content .ticker-messages {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ticker .entry-content .ticker-messages > li {
	margin-bottom: 0;
}

.ticker-message {
	display: grid;
	grid-template-columns: 3.4em 1fr;
	gap: 0 0.75em;
	padding: 0.75em 0;
	border-bottom: 1px solid var(--color-blue-highlight, #e4eff9);
	scroll-margin-top: 3em;
}

.ticker-message:target {
	background: var(--color-blue-highlight, #e4eff9);
}

.ticker-message-time {
	padding-top: 0.1em;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--color-grey-medium, #999);
}

.ticker .entry-content .ticker-message-headline {
	margin: 0 0 0.25em;
	font-size: 1em;
	line-height: 1.4;
}

.ticker-message.is-important .ticker-message-headline::before {
	content: "Wichtig";
	display: inline-block;
	margin-right: 0.45em;
	padding: 0 0.4em;
	border-radius: 2px;
	background: var(--color-yellow, #ffdc00);
	color: var(--color-yellow-opposite, #3a2c00);
	font-size: 0.75em;
	vertical-align: 0.1em;
}

.ticker-message-body p {
	margin: 0 0 0.4em;
}

.ticker-quote {
	margin: 0.5em 0;
	padding: 0 0 0 0.9em;
	border-left: 3px solid var(--color-grey-light, #c5c5c5);
	font-style: italic;
}

.ticker-quote p {
	margin: 0;
}

.ticker-quote-source {
	font-style: normal;
	font-size: 0.85em;
}

/* A translated quote: German by default, the button flips to the original (ticker.js). */
.ticker-quote-toggle {
	margin: 0.2em 0 0;
	padding: 0 0.45em;
	border: 1px solid var(--color-grey-light, #c5c5c5);
	border-radius: 3px;
	background: transparent;
	color: var(--color-grey-dark, #555);
	font: inherit;
	font-size: 0.75em;
	font-style: normal;
	line-height: 1.6;
	cursor: pointer;
}

/* Translated quotes: the source sits on the button's line, to its right. */
.ticker-quote--translated .ticker-quote-source {
	display: inline;
	margin-left: 0.5em;
}

.ticker-quote-toggle:hover,
.ticker-quote-toggle:focus,
.ticker-quote-toggle:active {
	background: transparent;
	border-color: var(--color-grey-medium, #999);
	color: inherit;
}

/* Sources: a tight row of favicons (served from our uploads, see class-favicons.php). */
.ticker-sources {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin: 0.4em 0 0;
	padding: 0;
	list-style: none;
}

/* The theme's list items carry a dash and an indent: not here. */
.ticker-message .ticker-sources > li {
	margin: 0;
	padding: 0;
	line-height: 0;
}

.ticker-message .ticker-sources > li::before {
	content: none;
	display: none;
}

.ticker-source {
	display: inline-flex;
	line-height: 0;
}

.ticker-source:hover .ticker-favicon,
.ticker-source:focus-visible .ticker-favicon {
	opacity: 0.7;
}

.ticker-favicon {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.ticker-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ticker-empty,
.ticker-disclosure {
	color: var(--color-grey-medium, #999);
	font-size: 0.85em;
}

.ticker-more {
	margin: 1em 0 1.5em;
	text-align: center;
}

.ticker-more-button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.ticker-more-status:empty {
	display: none;
}

@media (max-width: 599px) {
	.ticker-message {
		grid-template-columns: 1fr;
	}

	.ticker-message-time {
		padding: 0;
		font-size: 0.85em;
	}
}

/* ── Widget ──────────────────────────────────────────────────────────────────── */

/*
 * The items use the theme's article markup inside .widget-content, so .widget /
 * .entry-meta / .entry-title style them like "Aktuell" and the other post widgets. The
 * space between items is the theme's for posts in a widget (modules/post.css,
 * `.widget .type-post`): one base height, half on mobile. Unlike there, no divider line.
 * Mirrored rather than borrowed by adding `post`/`type-post`, which would make tickers
 * look like posts to anything that counts or targets those.
 */
.widget .ticker-widget-item {
	margin-bottom: var(--base-height, 12pt);
}

/*
 * "Beta" beside the widget title: the page pill's shape, inverted to sit on the title
 * bar's dark blue — white with dark blue text (10.41:1), as the bar itself pairs them.
 */
.ticker-widget-beta {
	display: inline-block;
	margin-left: 0.4em;
	padding: 2px 5px 0;
	border-radius: 3px;
	background: var(--color-white, #fff);
	color: var(--color-blue-dark, #013e83);
	font-size: 0.65em;
	font-weight: 600;
	/* 4px under 1.4, the top 2px given back as padding: shorter at the bottom only. */
	line-height: calc(1.4em - 4px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 0.15em;
}

@media (max-width: 959px) {
	.widget .ticker-widget-item {
		margin-bottom: calc(0.5 * var(--base-height, 12pt));
	}
}

/* Topic in capitals at regular weight; capitals by CSS, so the text itself (and what a
   screen reader says) keeps its normal spelling. */
.ticker-widget-topic {
	font-weight: 400;
	text-transform: uppercase;
}

/*
 * The newest message's time, with a clock. Dark blue until this reader has opened the
 * ticker since that message (Render::seen_record_script), grey after (.is-seen, set by
 * the widget's inline script). The grey is #767676, the lightest that keeps 4.5:1 on
 * white — the theme's --color-grey-medium (#999, 2.8:1) is too faint for text this size.
 */
.ticker-widget-time {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	white-space: nowrap;
	color: var(--color-blue-dark, #013e83);
	font-variant-numeric: tabular-nums;
}

.ticker-widget-item.is-seen .ticker-widget-time {
	color: #767676;
}

.ticker-widget-clock {
	width: 0.95em;
	height: 0.95em;
	flex: none;
}

/* Today's comments (since 06:00, as the page's "Heute"), beside the time; only when > 0.
   The meta line's own colour: it does not change with "seen". */
.ticker-widget-comments {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ticker-widget-comment-icon {
	width: 0.95em;
	height: 0.95em;
	flex: none;
}

/* ── Comments: "Heute | Alle" ────────────────────────────────────────────────── */

/*
 * Below "N Kommentare" and the sort bar (the theme's insideparadeplatz_comments_after_title
 * hook), one left-aligned row: a small switch (Comments::toggle) — the page shows the
 * discussion since 06:00, the "Alle" page every comment — and beside it the line that
 * says so, on both pages. On a phone the line wraps within its own column, still to the
 * right of the switch. The
 * switch is a segmented pair in the "Briefing" pill's dark blue, the current one filled;
 * plain links, so it works without script and each view is cached.
 */
.ticker-comments-bar {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0.5em 0 1em;
}

.ticker-comments-toggle {
	display: flex;
	flex: none;
	border: 1px solid var(--color-blue-dark, #013e83);
	border-radius: 3px;
	overflow: hidden;
	font-size: 0.75em;
	line-height: 1.35;
}

.ticker-comments-toggle-item {
	padding: 0.1em 0.55em;
	color: var(--color-blue-dark, #013e83);
	text-decoration: none;
	white-space: nowrap;
}

.ticker-comments-toggle-item + .ticker-comments-toggle-item {
	border-left: 1px solid var(--color-blue-dark, #013e83);
}

.ticker-comments-toggle-item:hover,
.ticker-comments-toggle-item:focus-visible {
	background: var(--color-blue-highlight, #e4eff9);
}

.ticker-comments-toggle-item.is-current {
	background: var(--color-blue-dark, #013e83);
	color: var(--color-white, #fff);
}

.ticker-comments-toggle-count {
	font-variant-numeric: tabular-nums;
	opacity: 0.8;
}

.ticker .ticker-comments-note {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 0.875em;
	line-height: 1.35;
	color: #767676;
}

/* ── Content ads in the timeline ─────────────────────────────────────────────── */

/*
 * ad_content_6.. (Render::AD_FIRST_SLOT): below the summary box and between messages.
 * The theme's .ad-tag--content reserves the height; this only spaces the band from the
 * text around it and keeps it clear of the messages' divider lines.
 */
.ticker-ad {
	margin: 1em 0;
}

.ticker .entry-content .ticker-messages > li.ticker-ad {
	margin: 1em 0;
	padding: 0;
	list-style: none;
}