/* ---------- News list pages: all news, the news of a source, the news of a category ----------
 * news.html, news-source.html, news-category.html share one layout: the head (lists.css) with
 * the source mark or the category icon, the filter bar, the news list (news-list.css) split into
 * days, 50 news a page with the pager (pager.css), and the side column. */

/* A day inside the news list: a separator row */
.news-list .news-list-day { padding: 16px 0 6px; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; }
.news-list .news-list-day:first-child { padding-top: 6px; }
.news-list .news-list-day .accent { color: var(--color-primary); }
.news-list .news-list-day > span:last-child { float: right; }
.news-list .news-list-cut { padding: 12px 0; border-bottom: 1px dashed var(--line); color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-align: center; }

/* The head of a source or a category: its mark or icon beside the title */
.nl-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nl-title h1 { min-width: 0; }
.nl-title .source-avatar { width: 52px; height: 52px; font-size: 16px; }
.nl-title .panel-icon { width: 52px; height: 52px; }
.nl-title .panel-icon .icon { width: 26px; height: 26px; font-size: 26px; }
/* The follow switch beside the title of a source or a category (follow.js): "KÖVETÉS" until the
 * reader follows it, then "KÖVETED"; a guest gets a link to the sign-in in the same look. */
.nl-title { flex-wrap: wrap; }
.follow-button { display: inline-flex; flex: none; align-items: center; padding: 6px 11px; border: 1px solid var(--line-bright); color: var(--text); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; cursor: pointer; }
.follow-button > span { display: inline-flex; align-items: center; gap: 6px; }
.follow-button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.follow-button[aria-pressed="true"] { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }
.follow-button .follow-on, .follow-button[aria-pressed="true"] .follow-off { display: none; }
.follow-button[aria-pressed="true"] .follow-on { display: inline-flex; }
.follow-button[aria-busy="true"] { opacity: .6; pointer-events: none; }
.ls-intro > p.nl-facts { max-width: none; font-size: 10px; line-height: 1.6; }
.nl-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.nl-facts strong { color: var(--text); font-weight: 600; }
.nl-facts a { color: var(--color-primary); }
.nl-subs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nl-subs a { display: inline-flex; gap: 6px; padding: 4px 9px; border: 1px solid var(--line); color: var(--text); font-size: 12px; }
.nl-subs a span { color: var(--muted); font-family: var(--font-mono); font-size: 10px; }
.nl-subs a:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* List or table view switch in the filter bar */
.nl-view { display: inline-flex; border: 1px solid var(--line); }
.nl-view button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; }
.nl-view button + button { border-left: 1px solid var(--line); }
.nl-view button[aria-pressed="true"] { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }

/* The side column stays in view beside the long list */
.nl-side { position: sticky; top: 16px; }
@media (max-width: 980px) { .nl-side { position: static; } }

/* Social pages of a source or a tag (web/components/social_links.html) */
.sl { min-width: 0; }
.sl-links { display: grid; margin: 0; padding: 4px 16px 10px; list-style: none; }
.sl-links li + li { border-top: 1px solid var(--line); }
.sl-links a { display: grid; grid-template-columns: 18px auto minmax(0, 1fr) 14px; align-items: center; gap: 10px; padding: 9px 0; color: var(--text); }
.sl-links .icon { width: 16px; height: 16px; color: var(--muted); font-size: 16px; }
.sl-name { font-size: 13px; font-weight: 600; }
.sl-handle { overflow: hidden; color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.sl-links a:hover .sl-name, .sl-links a:hover .icon { color: var(--color-primary); }
.sl-links .sl-out { width: 14px; height: 14px; font-size: 14px; }
/* Variant: a row of icons, the names in the tooltip */
.sl-links.is-icons { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 16px; }
.sl-links.is-icons li + li { border-top: 0; }
.sl-links.is-icons a { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); }
.sl-links.is-icons a:hover { border-color: var(--color-primary); }
.sl-links.is-icons .icon { width: 18px; height: 18px; font-size: 18px; }
.sl-links.is-icons .sl-name, .sl-links.is-icons .sl-handle, .sl-links.is-icons .sl-out { display: none; }
/* Variant: tiles in two columns, name above the account */
.sl-links.is-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 16px 16px; }
.sl-links.is-tiles li + li { border-top: 0; }
.sl-links.is-tiles a { grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px; padding: 9px 10px; border: 1px solid var(--line); }
.sl-links.is-tiles a:hover { border-color: var(--color-primary); }
.sl-links.is-tiles .icon:first-child { grid-row: span 2; }
.sl-links.is-tiles .sl-handle { text-align: left; }
.sl-links.is-tiles .sl-out { display: none; }