/* r14F: the homepage news block, told honestly. Linked once from index.html, after /styles.css.
   Everything here is scoped to the news block's own classes or to `ul.news`; nothing global changes. */

/* One polite status region holds loading, the error message and Try again. It is NOT a story card:
   no border, no left rule, no card background. Empty (the normal, loaded state) it takes no room. */
.news-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	margin: 0 0 0.9rem;
	font-size: 0.95rem;
	color: var(--purity-dim);
}
.news-status:empty { display: none; }
.news-status-error .news-status-text { color: var(--passion-bright); }

/* "Updated <time>" and, once the list is older than three hours, the stale note beside it. */
p.note.news-updated { margin: 0 0 0.8rem; font-size: 0.85rem; }
.news-stale { color: var(--purity); font-weight: 600; }

/* An empty list (loading, or an error shown in the status region) leaves no gap of its own. */
ul.news:empty { display: none; }

/* Copy link / Copied: the button keeps ONE width whichever label it wears. The floor is measured in
   `ch` (the button's own font) so it holds on any system font: the longest label of each language
   (Copy link; Copiar enlace) plus the button's side padding and border. */
.news-copy {
	min-width: calc(9ch + 2rem);
	justify-content: center;
}
html[lang="es"] .news-copy { min-width: calc(13ch + 2rem); }

/* The read-only field a refused clipboard falls back to (the feed's pattern): its own line, 16px so
   iOS does not zoom the page on focus. */
.news-copy-fallback {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	font-size: 1rem;
}

/* Brand law (docs/BRAND.md): gold used as text ink on light is --gold-lo. styles.css hovers a headline
   to --gold-hi, which is 1.87:1 on parchment. */
[data-theme="light"] ul.news a:hover { color: var(--gold-lo); }