/* ---------- Theme tokens ---------- */
:root {
  --bg: #16171b;
  --bg-grad: radial-gradient(1200px 600px at 80% -10%, #24262c 0%, transparent 60%),
    radial-gradient(900px 500px at 0% 0%, #1c1e23 0%, transparent 55%);
  --panel: #1d1f24;
  --panel-2: #25272d;
  --panel-hover: #2f323a;
  --border: #3a3d45;
  --border-soft: #2b2e35;
  --text: #ededef;
  --muted: #a8aab1;
  --muted-2: #7f828a;
  --accent: #4da3ff;
  --accent-2: #6d5cff;
  --gold: #f5c518;
  --regional: #3b5bdb;
  --ok: #35c46a;
  --favorite: #b57cff; /* per-feed priority bonus (wheel + popup) */
  --danger: #ff6b6b;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.34);
  color-scheme: dark; /* native controls, scrollbars, file pickers */
}

html[data-theme='light'] {
  color-scheme: light;
  --favorite: #8a4fdc;
  --bg: #f4f6fa;
  --bg-grad: radial-gradient(1200px 600px at 80% -10%, #e4ecfb 0%, transparent 60%);
  --panel: #ffffff;
  --panel-2: #f0f3f8;
  --panel-hover: #eef2f8;
  --border: #dde4ee;
  --border-soft: #e7ecf3;
  --text: #131a24;
  --muted: #5b6b80;
  --muted-2: #8290a3;
  --shadow: 0 14px 40px rgba(30, 45, 70, 0.16);
  --shadow-sm: 0 6px 18px rgba(30, 45, 70, 0.12);
  /* Deeper accents: the dark-theme ones are too pale as text on white. */
  --accent: #1f6fd1;
  --accent-2: #5a48f0;
  --gold: #a76b00;
  --ok: #1d8a4a;
  --danger: #c93636;
  --regional: #2f4fc9;
}

/* ---------- Light theme fixes ---------- */
html[data-theme='light'] .topbar {
  background: var(--bg);
}
/* Cards are dark (photo scrim or feed tint) in both themes: keep the bright
   accents. The mobile list rows sit on the page instead; see the 720px block. */
html[data-theme='light'] .card {
  --gold: #f5c518;
  --accent: #4da3ff;
  --ok: #35c46a;
}
html[data-theme='light'] .rating-pill {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme='light'] .rating-pill--compact {
  background: var(--panel-2);
}
html[data-theme='light'] .notice {
  color: #7a4d00;
  background: #fff6dc;
  border-color: #f0d48a;
}
html[data-theme='light'] .form-error {
  color: #9f1f1f;
  background: #fdecec;
  border-color: #f3b4b4;
}

/* ---------- Base ---------- */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background-color: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Helvetica Neue', Helvetica, Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 24px;
}

a {
  color: inherit;
}

.svg {
  display: inline-flex;
  align-items: center;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 1px 5px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* ---------- Top bar: masthead + section bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
  transition: box-shadow 0.2s ease;
}
.topbar.is-scrolled {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 22px 8px;
}
.topbar-start {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1 1 auto;
  min-width: 0;
}
.topbar-end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 16px rgba(77, 163, 255, 0.35);
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.brand-date {
  font-size: 11.5px;
  color: var(--muted);
}
.brand-date::first-letter {
  text-transform: uppercase;
}
.manage-btn {
  height: 34px;
  padding: 0 12px;
}

/* Row 2: sections (tags) on the left, ordering + toggles on the right. */
.sectionbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 22px;
}
.sections {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.sections::-webkit-scrollbar {
  display: none;
}
.section {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 10px 12px 11px;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.14s ease;
}
.section::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  transition: background 0.14s ease;
}
.section:hover {
  color: var(--text);
}
.section:hover::after {
  background: var(--border);
}
.section.is-active {
  color: var(--text);
}
.section.is-active::after {
  background: var(--cat, var(--accent));
}
.section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cat, var(--accent));
}
.section-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

.view-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 6px 0;
}
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}
.seg-btn {
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.14s ease;
}
.seg-btn:hover {
  color: var(--text);
}
.seg-btn.is-active {
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.14s ease;
}
.toggle-pill:hover {
  color: var(--text);
  border-color: var(--muted-2);
}
.toggle-pill--discovery.is-on {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.toggle-pill--regional.is-on {
  color: color-mix(in srgb, var(--regional) 70%, var(--text));
  border-color: color-mix(in srgb, var(--regional) 70%, transparent);
  background: color-mix(in srgb, var(--regional) 20%, transparent);
}
.toggle-pill[hidden] {
  display: none;
}
/* (.icon-btn.help-btn: must beat .icon-btn's own radius further down.) */
.icon-btn.help-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
}

/* Photo cards always have a dark scrim behind their footer, so their rating
   pill keeps dark-theme colours in light mode too (it was near-invisible). */
html[data-theme='light'] .card .rating-pill {
  background: rgba(20, 21, 26, 0.55);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ededef;
}
/* Gold "NEW" on white is hard to read; a deeper amber in light mode. */
html[data-theme='light'] .news-new,
html[data-theme='light'] .latest-fresh {
  color: #b7791f;
}

/* Buttons with their own display value would otherwise ignore `hidden`
   (e.g. the search box's ✕ showed even with nothing typed). */
.icon-btn[hidden],
.btn[hidden] {
  display: none;
}

/* One focus style for every control. */
.btn:focus-visible,
.icon-btn:focus-visible,
.section:focus-visible,
.seg-btn:focus-visible,
.toggle-pill:focus-visible,
.info-tab:focus-visible,
.tab:focus-visible,
.rating-pill:focus-visible,
.rating-sum-more:focus-visible,
.rating-calc-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Search box */
.search-box {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 260px;
  max-width: 420px;
  min-width: 140px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
}
.search-box:focus-within {
  border-color: var(--muted-2);
}
.search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  outline: none;
}
.search-input::placeholder {
  color: var(--muted-2);
}
.search-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dd-spin 0.7s linear infinite;
  flex: 0 0 auto;
}
@keyframes dd-spin {
  to {
    transform: rotate(360deg);
  }
}
.search-box-clear {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
}

/* Search results bar: static flow (pushes content down), light-gray via the
   existing --panel-2 token in both themes. */
.search-results {
  background: var(--panel-2);
  border-bottom: 1px solid var(--border-soft);
}
.search-results-inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 12px 24px;
}
.search-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.search-result-row:hover {
  background: var(--panel-hover);
}
.search-result-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--feed, var(--muted-2));
  flex: 0 0 auto;
}
.search-result-main {
  min-width: 0;
}
.search-result-title {
  color: var(--text);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
}
.search-result-title:hover {
  text-decoration: underline;
}
.search-result-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.search-highlight {
  background: var(--gold);
  color: #1a1a1a;
  border-radius: 2px;
  padding: 0 1px;
}
.search-results-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.search-page-info {
  color: var(--muted);
  font-size: 12.5px;
}
.search-results-empty {
  color: var(--muted);
  padding: 8px 10px;
}

/* Registered so the countdown fill below can be animated by CSS alone. */
@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* Refresh button carries the auto-refresh countdown as a status-coloured ring
   that fills clockwise around the button and completes exactly when the next
   (randomly timed) refresh fires. */
.refresh-btn {
  position: relative;
  --ring: var(--ok);
}
.refresh-ring {
  position: absolute;
  inset: -1px;
  border-radius: 7px;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(var(--ring) calc(var(--p, 0) * 1turn), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.refresh-btn.is-counting {
  animation: ring-fill var(--ring-ms, 20s) steps(var(--ring-steps, 80), end) forwards;
}
@keyframes ring-fill {
  from {
    --p: 0;
  }
  to {
    --p: 1;
  }
}
.refresh-btn.is-syncing {
  --ring: var(--accent);
}
.refresh-btn.is-syncing .refresh-ring {
  animation: ring-pulse 0.85s ease-in-out infinite;
}
.refresh-btn.is-error {
  --ring: var(--danger);
}
@keyframes ring-pulse {
  50% {
    opacity: 0.3;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.14s ease;
  white-space: nowrap;
}
.btn:hover {
  background: var(--panel-hover);
  border-color: var(--muted-2);
}
.btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.btn-primary {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 16px rgba(77, 163, 255, 0.28);
}
.btn-primary:hover {
  filter: brightness(1.08);
}
.btn-block {
  width: 100%;
  justify-content: center;
  padding: 11px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  transition: all 0.14s ease;
}
.icon-btn:hover {
  color: var(--text);
  background: var(--panel-hover);
}
.icon-btn.danger:hover {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

/* ---------- Notice ---------- */
.notice {
  margin: 14px 22px 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #ffd7a1;
  background: rgba(224, 168, 0, 0.12);
  border: 1px solid rgba(224, 168, 0, 0.35);
}

/* ---------- Layout: content left, latest right ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 22px;
  align-items: start;
  padding: 22px;
  max-width: 1340px;
  margin: 0 auto;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.hero-zone {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* ---------- Cards ---------- */
/* The image IS the whole card; text sits on a black fade near the bottom. */
.card {
  --feed: var(--muted-2);
  --cat: var(--accent);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 355px;
  background: linear-gradient(165deg, #26282e, #1b1d22 70%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: visible;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.card--new {
  animation: card-in 0.32s ease both;
}
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.card:hover {
  z-index: 5; /* float the favicon popup above neighbouring cards */
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-sm);
}

/* Photo layer — covers the whole card (rounded + clipped to the card corners) */
.card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--panel-2), var(--border-soft));
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.card:hover .card-media img {
  transform: scale(1.06);
}

/* Black fade: taller and heavier at the bottom so the headline and summary sit
   on solid near-black; fades out higher up. Tinted dark grey rather than pure
   black so photo cards feel softer in dark mode. */
.card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      to top,
      rgba(26, 27, 32, 0.97) 0%,
      rgba(26, 27, 32, 0.95) 38%,
      rgba(26, 27, 32, 0.84) 55%,
      rgba(26, 27, 32, 0.48) 72%,
      rgba(26, 27, 32, 0) 90%
    ),
    linear-gradient(to bottom, rgba(26, 27, 32, 0.6) 0%, rgba(26, 27, 32, 0) 36%);
}
.card--no-media .card-scrim {
  display: none;
}
/* No photo: tint the card with the feed's colour (as the mobile list does),
   dark enough that the white text stays readable in both themes. */
.card--no-media {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--feed) 34%, #26282e),
    color-mix(in srgb, var(--feed) 14%, #1b1d22) 70%
  );
}

/* Discovery pick — deliberately grey (not black) so a story lifted into the
   feed by Discovery reads as different from the importance-ranked cards
   around it. Matches the gold "Discovery" badge and the gold pie segment.
   This is a separate overlay (not an override of .card-scrim's own gradient)
   because background-image / gradients cannot be CSS-transitioned — only its
   opacity fades, which is what lets the read-state below animate smoothly
   instead of snapping instantly. */
.card-discovery-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 2s ease;
}
.card--discovery .card-discovery-tint {
  opacity: 1;
  background:
    linear-gradient(
      to top,
      rgba(52, 53, 61, 0.97) 0%,
      rgba(52, 53, 61, 0.94) 38%,
      rgba(52, 53, 61, 0.82) 55%,
      rgba(52, 53, 61, 0.46) 72%,
      rgba(52, 53, 61, 0) 90%
    ),
    linear-gradient(to bottom, rgba(52, 53, 61, 0.62) 0%, rgba(52, 53, 61, 0) 36%);
}
.card--discovery.card--no-media .card-discovery-tint {
  background: linear-gradient(165deg, rgba(46, 48, 56, 0.55), rgba(33, 35, 41, 0.35) 70%);
}
.card--discovery {
  border-color: color-mix(in srgb, var(--gold) 34%, var(--border-soft));
  transition: border-color 2s ease;
}
.card--discovery:hover {
  border-color: color-mix(in srgb, var(--gold) 58%, transparent);
}

/* Read (but not yet expired) — the gold "you haven't seen this yet" look
   fades out to the plain card look underneath (the tint overlay above simply
   fades to 0 opacity, revealing .card-scrim / .card's own background, which
   were never changed), as a quieter "already read" cue than waiting for the
   full fade-and-replace at the end of the window. A fresh pick landing in
   the same slot later gets the gold treatment again (this class is only
   ever applied to the currently-read occupant). */
.card--discovery.card--discovery-read {
  border-color: var(--border-soft);
}
.card--discovery.card--discovery-read:hover {
  border-color: rgba(255, 255, 255, 0.16);
}
.card--discovery.card--discovery-read .card-discovery-tint {
  opacity: 0;
}
/* The badge stays put and legible — it just loses its gold colouring, same
   as the border/tint — rather than disappearing. */
.card--discovery.card--discovery-read .discovery-badge {
  background: color-mix(in srgb, var(--muted-2) 22%, rgba(26, 27, 32, 0.68));
  border-color: color-mix(in srgb, var(--muted-2) 58%, transparent);
  color: var(--muted);
}

/* A discovery slot's current occupant has been read and its visibility
   window has run out — it fades out in place (no reflow/position change)
   before the slot hands over to the next unread candidate. Duration must
   stay in sync with DISCOVERY_FADE_MS in app.js. */
.card--discovery-fading {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 2s ease, transform 2s ease;
  pointer-events: none;
}

/* "Discovery" badge — top-right of a lifted-in card */
.discovery-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 22%, rgba(26, 27, 32, 0.68));
  border: 1px solid color-mix(in srgb, var(--gold) 58%, transparent);
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 2s ease, border-color 2s ease, color 2s ease;
  flex: 0 0 auto;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.discovery-badge .svg {
  display: inline-flex;
}

/* Hidden until the card is hovered/focused, so it doesn't clutter the badge
   at rest — click fast-forwards this pick's visibility countdown to expired. */
.discovery-ignore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 58%, transparent);
  background: color-mix(in srgb, var(--gold) 22%, rgba(26, 27, 32, 0.68));
  color: var(--gold);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  pointer-events: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.card--discovery:hover .discovery-ignore-btn,
.discovery-ignore-btn:focus-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.discovery-ignore-btn:hover {
  background: var(--gold);
  color: #1a1a1a;
}

/* Source badge (feed favicon) — top-left, over the photo */
.card-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}

/* Source badge — reads well on top of any photo */
.source-badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(26, 27, 32, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: default;
  flex: 0 0 auto;
}
.source-badge .favicon {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  object-fit: contain;
}
.source-badge .favicon-fallback {
  display: none;
  color: var(--accent);
}
.source-icon {
  display: inline-grid;
  place-items: center;
}
.source-icon.no-icon .favicon {
  display: none;
}
.source-icon.no-icon .favicon-fallback {
  display: inline-flex;
}
/* Merged story (e.g. AD + Tubantia): one icon per source, side by side. */
.source-badge.is-multi {
  display: inline-flex;
  gap: 5px;
  width: auto;
  padding: 0 7px;
}

.popup {
  position: absolute;
  top: calc(100% + 8px);
  left: -4px;
  z-index: 60;
  min-width: 180px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 7px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  pointer-events: none;
}
.source-badge:hover .popup,
.source-badge:focus-visible .popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.popup-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
.popup-sub {
  font-size: 11.5px;
  color: var(--muted);
}
.popup-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--feed);
}

/* (the photo layer, scrim and card-head are defined above the source badge) */
.card-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 16px 14px 6px;
  flex: 0 0 auto;
}
.card-h {
  margin: 0;
  font-size: 17px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.card-title {
  text-decoration: none;
  color: #fff;
}
.card-title:hover {
  text-decoration: none;
}
/* Hovering the card underlines the headline instead of lifting the card */
.card:hover .card-title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.72);
}
.card-summary {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer: the feed-colour rule line, then feed/time + rating, then the tag pills */
.card-foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 13px;
  border-top: 3px solid var(--feed);
  font-size: 12px;
  color: #fff;
}
.card-foot-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.card-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-src::before {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--feed);
}
.card-time {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.66);
}
.card-rating-slot {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.card-foot .card-tags {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.card-foot .tag-chip {
  color: #fff;
  background: color-mix(in srgb, var(--cat) 30%, rgba(26, 27, 32, 0.55));
  border-color: color-mix(in srgb, var(--cat) 55%, transparent);
}
.card-foot .tag-chip.more {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Bigger hero + medium featured variants */
.card--hero {
  min-height: 510px;
}
.card--hero .card-head {
  padding: 14px 15px 0;
}
.card--hero .card-body {
  padding: 20px 18px 8px;
}
.card--hero .card-h {
  font-size: clamp(24px, 2.6vw, 33px);
  line-height: 1.2;
}
.card--hero .card-summary {
  font-size: 15px;
  -webkit-line-clamp: 2;
}
.card--hero .card-foot {
  padding: 12px 18px 16px;
  font-size: 12.5px;
}

.card--feature .card-h {
  font-size: 19px;
}
.card--feature .card-summary {
  -webkit-line-clamp: 2;
}

/* ---------- Weather widget (top of sidebar) ---------- */
.weather {
  margin-bottom: 14px;
  padding: 12px 13px 13px;
  border-radius: 7px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent) 11%, var(--panel-2)),
    var(--panel-2)
  );
  perspective: 1200px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.weather:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft));
}
.weather[hidden] {
  display: none;
}
/* 3D flip: front face defines the card height, back face fills it in. */
.weather-flipper {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.35, 0.1, 0.25, 1);
}
.weather.is-flipped .weather-flipper {
  transform: rotateY(180deg);
}
.weather-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.weather-front {
  position: relative;
}
.weather-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.weather-top-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.weather-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.weather-loc::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.weather-updated {
  font-size: 10.5px;
  color: var(--muted-2);
  white-space: nowrap;
}
.weather-flipbtn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}
.weather-flipbtn:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.weather-flipbtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.weather-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 9px 0 10px;
}
.weather-icon {
  font-size: 30px;
  line-height: 1;
}
.weather-temp {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.weather-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.3;
}
.weather-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  font-size: 11.5px;
  color: var(--muted-2);
}
.weather-stats b {
  color: var(--text);
  font-weight: 700;
}
.weather-stats .wstat {
  display: inline-flex;
  gap: 4px;
}
.weather-days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.weather-day {
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 7px 4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
}
.weather-day .wd-name {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.weather-day .wd-ic {
  font-size: 17px;
  line-height: 1;
}
.weather-day .wd-temp {
  font-size: 11.5px;
  color: var(--muted);
}
.weather-day .wd-max {
  color: var(--text);
  font-weight: 700;
}
/* --- flipped radar face: full-bleed, minimal --- */
.weather-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}
.weather-radar {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #e6eaef;
}
#radarCanvas {
  display: block;
  width: 100%;
  height: 100%;
}
.radar-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 2;
}
.weather-radar-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #fff 26%, transparent);
  background: color-mix(in srgb, #0b1322 74%, transparent);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.weather-radar-close:hover {
  opacity: 1;
}
.weather-radar-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.weather-radar-note {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 8px;
  font-size: 10.5px;
  text-align: center;
  color: #3a4250;
}
.weather-radar-note[hidden] {
  display: none;
}
.weather-radar-attr {
  position: absolute;
  right: 5px;
  bottom: 4px;
  z-index: 2;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 8.5px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(15, 22, 34, 0.42);
  pointer-events: none;
}
.radar-live {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #fff 30%, transparent);
  background: color-mix(in srgb, #0b1322 72%, transparent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  pointer-events: none;
}
.radar-live[hidden] {
  display: none;
}
.radar-live-dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #ff5252;
}
/* The pulse ring is a separate layer animated with transform/opacity only,
   so the compositor runs it without repainting every frame. */
.radar-live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 82, 82, 0.55);
  will-change: transform, opacity;
  animation: radar-live-pulse 1.6s ease-out infinite;
}
.radar-live-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.radar-live-tag {
  font-weight: 800;
  letter-spacing: 0.08em;
}
.radar-live[data-kind='fc'] {
  border-color: color-mix(in srgb, #ffb547 55%, transparent);
}
.radar-live[data-kind='fc'] .radar-live-dot {
  background: #ffb547;
}
.radar-live[data-kind='fc'] .radar-live-dot::after {
  content: none;
}
/* Same look as the old 0 -> 7px box-shadow ring: 7px dot + 7px each side = 3x. */
@keyframes radar-live-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  70% {
    transform: scale(3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* ---------- Right: latest news ---------- */
.sidebar {
  position: sticky;
  top: calc(var(--topbar-h, 104px) + 14px);
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 15px;
  max-height: calc(100vh - var(--topbar-h, 104px) - 28px);
  overflow-y: auto;
}
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-soft);
}
.sidebar-head h2 {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.sidebar-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
}
.latest-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.latest-item {
  display: flex;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-soft);
}
.latest-item:last-child {
  border-bottom: none;
}
.latest-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex: 0 0 auto;
  background: var(--feed, var(--accent));
}
.latest-body {
  min-width: 0;
}
.latest-title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  color: var(--text);
}
.latest-title:hover {
  color: var(--accent);
}
.latest-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted-2);
}
.latest-meta .latest-src {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.latest-fresh {
  color: var(--gold);
  font-weight: 700;
}
.sidebar-empty {
  padding: 14px 2px;
  font-size: 13px;
  color: var(--muted-2);
}

/* ---------- Latest-news list view (shown when Rate-based is off) ---------- */
.news-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.content--list .hero-zone,
.content--list .grid-3 {
  display: none;
}
.content--list .news-list {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
/* Match the weather bar: let the content span the full page width so both are
   centred on the same axis. */
.content--list .content {
  grid-column: 1 / -1;
}
/* List view (Rate-based off): the list IS the latest feed, so the sidebar goes
   away and the weather widget becomes a centred top bar spanning the page. */
.sidebar--empty {
  display: none;
}
.content--list .sidebar {
  grid-column: 1 / -1;
  order: -1;
  position: static;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.content--list .sidebar .weather {
  margin: 0 auto;
  max-width: 800px;
  cursor: default;
}
.content--list .sidebar-head,
.content--list .latest-list {
  display: none;
}
/* Weather report + live radar side by side instead of click-to-flip. */
.content--list .weather-flipper {
  display: flex;
  align-items: stretch;
  gap: 16px;
  transform: none;
}
.content--list .weather.is-flipped .weather-flipper {
  transform: none;
}
.content--list .weather-face {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  flex: 1 1 0;
  min-width: 0;
}
.content--list .weather-front,
.content--list .weather-back {
  position: relative;
  inset: auto;
  transform: none;
}
.content--list .weather-flipbtn,
.content--list .weather-radar-close {
  display: none;
}
.content--list .weather-radar {
  min-height: 180px;
}
.news-row {
  --feed: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.14s ease;
}
.news-row:last-child {
  border-bottom: none;
}
.news-row:hover {
  background: var(--panel-2);
}
.news-row:hover .news-title {
  color: var(--accent);
}
.news-thumb {
  flex: 0 0 auto;
  width: 108px;
  height: 68px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(135deg, var(--panel-2), var(--border-soft));
}
.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* No-image placeholder: same footprint, quieter fill, keeps rows aligned. */
.news-thumb--empty {
  background: linear-gradient(135deg, var(--panel-2), var(--border-soft));
  border: 1px solid var(--border-soft);
}
.news-main {
  flex: 1 1 auto;
  min-width: 0;
}
.news-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  font-size: 11.5px;
  color: var(--muted-2);
}
.news-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--feed);
}
.news-src {
  color: var(--muted);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 45%;
}
.news-new {
  color: var(--gold);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.news-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
}
.news-summary {
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted-2);
}
.news-labels {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 30%;
}
.news-label-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.news-labels .card-rating-slot {
  display: inline-flex;
  align-items: center;
}

/* ---------- Empty state ---------- */
.empty {
  max-width: 560px;
  margin: 8vh auto;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.empty strong {
  color: var(--text);
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal[hidden] {
  display: none;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 16, 20, 0.64);
  backdrop-filter: blur(3px);
  animation: fade-in 0.16s ease;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
.modal-panel {
  position: relative;
  width: min(580px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: panel-in 0.2s ease;
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  margin-right: auto;
}
.modal-head h2 {
  margin: 0;
  font-size: 17px;
}
.modal-body {
  padding: 18px;
  overflow-y: auto;
}

/* ---------- Score-info modal (the "i" in the rating popup) ---------- */
.info-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  justify-content: flex-end;
}
.info-modal[hidden] {
  display: none;
}
.info-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 16, 20, 0.64);
  backdrop-filter: blur(3px);
  animation: fade-in 0.16s ease;
}
/* The score side panel: slides in from the right, full height. */
.info-panel {
  position: relative;
  width: min(460px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  outline: none;
  animation: drawer-in 0.22s ease;
}
@keyframes drawer-in {
  from {
    transform: translateX(32px);
    opacity: 0;
  }
}
.info-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border-soft);
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}
.info-head-text {
  min-width: 0;
}
.info-kicker {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.info-head h2 {
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
}
.info-body {
  padding: 14px 18px 20px;
  overflow-y: auto;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
/* Tabs in the "i" modal: Uitleg | Dit artikel */
.info-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 18px 0;
  border-bottom: 1px solid var(--border-soft);
}
.info-tab {
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px 8px;
  margin-bottom: -1px;
  cursor: pointer;
}
.info-tab:hover {
  color: var(--text);
}
.info-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.info-tab[hidden] {
  display: none;
}
.info-body[hidden] {
  display: none;
}

/* Tab 2: which words triggered which score groups */
.explain-loading {
  min-height: 160px;
}
.explain-meta {
  margin: 0 0 6px;
  color: var(--muted-2);
  font-size: 12px;
}
.explain-note {
  color: var(--muted);
  font-size: 12px;
}
.explain-group {
  margin: 6px 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--panel-2);
}
.explain-group.is-muted {
  opacity: 0.6;
}
.explain-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.explain-group-label {
  font-weight: 700;
}
.explain-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--muted);
  border: 1px solid var(--border);
}
.explain-badge.is-main {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 50%, transparent);
}
.explain-badge.is-second {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.explain-group-pts {
  margin-left: auto;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.explain-group-pts.is-zero {
  color: var(--muted-2);
}
.explain-term {
  padding: 5px 0;
  border-top: 1px dashed var(--border-soft);
}
.explain-term:first-of-type {
  border-top: none;
}
.explain-term-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.explain-match {
  font-weight: 700;
}
.explain-rule {
  color: var(--muted-2);
  font-size: 11.5px;
}
.explain-where {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.explain-where--head {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.explain-where--body {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted-2) 18%, transparent);
}
.explain-ctx {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.explain-ctx mark {
  color: var(--text);
  background: color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: 2px;
  padding: 0 1px;
}
.explain-list {
  margin: 0;
  padding-left: 16px;
  font-size: 12.5px;
}
.explain-inline-pts {
  color: var(--gold);
}
.rating-calc-link {
  display: block;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.rating-calc-link:hover {
  text-decoration: underline;
}

.info-body h3 {
  margin: 18px 0 6px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.info-body p {
  margin: 6px 0;
}
.info-body ul {
  margin: 6px 0;
  padding-left: 18px;
}
.info-body li {
  margin: 4px 0;
}
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.info-table td {
  padding: 5px 8px;
  border-top: 1px solid var(--border-soft);
  vertical-align: top;
}
.info-table td:first-child {
  white-space: nowrap;
  font-weight: 600;
  color: var(--text);
}
.info-table td:last-child {
  color: var(--muted-2);
}

.add-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--panel-2);
}
.add-form h3,
.list-title {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.field {
  display: grid;
  gap: 5px;
}
.field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hint-inline {
  font-weight: 400;
  color: var(--muted-2);
  font-size: 11px;
}
.check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.check-line input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}
.form-actions {
  display: flex;
  gap: 10px;
}
.form-actions .btn {
  flex: 1 1 auto;
  justify-content: center;
  padding: 11px;
}
.form-actions .btn[hidden] {
  display: none;
}
.add-form input[type='text'],
.add-form input[type='url'],
.add-form input:not([type]),
.add-form input[type='password'] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
#f-url,
#f-title,
#f-priority,
#refreshMode {
  width: 100%;
  padding: 10px 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
#f-url:focus,
#f-title:focus,
#f-priority:focus,
#refreshMode:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.18);
}

.color-control {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel);
}
input[type='color'] {
  width: 40px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: none;
  cursor: pointer;
}
input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type='color']::-webkit-color-swatch {
  border: 1px solid var(--border);
  border-radius: 5px;
}
.color-hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--muted);
  text-transform: uppercase;
}

.form-error {
  font-size: 13px;
  color: #ffb3b3;
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.35);
  border-radius: 6px;
  padding: 8px 11px;
}

.list-title {
  margin: 22px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.count-pill {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.hint {
  font-size: 12.5px;
  color: var(--muted-2);
  margin: 6px 0 12px;
}

.feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.feed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--panel-2);
}
.feed-fav {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  flex: 0 0 auto;
}
.feed-fav img {
  width: 17px;
  height: 17px;
  border-radius: 3px;
  object-fit: contain;
}
.feed-info {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
}
.feed-name {
  font-weight: 600;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-url {
  font-size: 11.5px;
  color: var(--muted-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-auto {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
}
.feed-priority {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.05em;
}
.feed-row.is-editing {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.feed-colors {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.swatch {
  display: flex;
  align-items: center;
  gap: 4px;
}
.swatch input[type='color'] {
  width: 26px;
  height: 26px;
  border-radius: 5px;
}
.swatch-label {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.feed-cat {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cat, var(--muted));
  background: color-mix(in srgb, var(--cat, var(--panel)) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat, var(--border)) 42%, transparent);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Tags ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tabs {
  display: flex;
  gap: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 3px;
}
.tab {
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.14s ease;
}
.tab:hover {
  color: var(--text);
}
.tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.tab-panel[hidden] {
  display: none;
}

.tag-chip {
  --cat: var(--accent);
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cat);
  background: color-mix(in srgb, var(--cat) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat) 42%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.tag-chip.more {
  color: var(--muted);
  background: var(--panel-2);
  border-color: var(--border-soft);
}

.card-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  overflow: hidden;
  justify-content: flex-end;
  min-width: 0;
}

/* ---------- Automatic importance stars ---------- */
.card-head-side {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Rating pie — a three-segment donut: green = importance, gold = discovery,
   grey = unmatched capacity. Segment lengths are normalised in ranking.js so
   the three always sum to the full ring. */
.rating-pie {
  flex: 0 0 auto;
  display: block;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.rating-pie circle {
  fill: none;
  stroke-width: 4.2;
  stroke-linecap: butt;
}
.pie-neutral {
  stroke: color-mix(in srgb, var(--muted-2) 32%, transparent);
}
.pie-importance {
  stroke: var(--ok);
}
.pie-favorite {
  stroke: var(--favorite);
}
/* Points lost to age: the importance colour, faded. */
.pie-aged {
  stroke: color-mix(in srgb, var(--ok) 40%, transparent);
}
.pie-discovery {
  stroke: var(--gold);
}
.pie-regional {
  stroke: var(--regional);
}
/* Clickable rating pill (a tag-like pill behind the pie) */
.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-hover) 55%, rgba(26, 27, 32, 0.5));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.rating-pill:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}
.rating-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.rating-pill-score {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rating-pill-bonus {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.rating-pill-regional {
  font-size: 11px;
  font-weight: 700;
  color: var(--regional);
  font-variant-numeric: tabular-nums;
}
.rating-pill-num {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rating-pill--compact {
  gap: 4px;
  margin-left: auto;
  align-self: center;
  padding: 1px 6px;
  background: color-mix(in srgb, var(--panel-hover) 70%, transparent);
  border-color: color-mix(in srgb, var(--muted-2) 30%, transparent);
}
.rating-pill--compact:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

/* Rating breakdown popup (opened by clicking the stars) */
.rating-pop {
  position: fixed;
  z-index: 120;
  width: min(280px, calc(100vw - 16px));
  padding: 12px 13px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.45;
}
.rating-pop-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
}
.rating-pop-score {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 5px;
  font-weight: 700;
  color: var(--text);
}
.rating-pop-bonus {
  color: var(--gold);
}
.rating-pop-regional {
  color: var(--regional);
}
.rating-pop-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--muted);
}
.rating-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rating-legend-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.rating-legend-swatch.sw-importance {
  background: var(--ok);
}
.rating-legend-swatch.sw-favorite {
  background: var(--favorite);
}
.rating-legend-swatch.sw-aged {
  background: color-mix(in srgb, var(--ok) 40%, transparent);
}
.rating-legend-swatch.sw-discovery {
  background: var(--gold);
}
.rating-legend-swatch.sw-regional {
  background: var(--regional);
}
.rating-legend-swatch.sw-neutral {
  background: color-mix(in srgb, var(--muted-2) 32%, transparent);
}
.rating-pop-sub {
  color: var(--muted);
  margin-bottom: 8px;
}
.rating-pop-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted-2);
  margin: 9px 0 5px;
}
.rating-pop-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rating-pop-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rating-pop-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rating-pop-pts {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.rating-pop-pts.is-neg {
  color: var(--danger);
}
.rating-pop-pts--regional {
  color: var(--regional);
}
.rating-pop-pts--regional.is-neg {
  color: var(--danger);
}
.rating-pop-none {
  color: var(--muted);
}
.rating-pop-miss {
  padding: 8px 9px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel-hover) 70%, transparent);
  color: var(--muted-2);
  font-size: 11.5px;
  line-height: 1.55;
}

/* Rating summary popover (click a ring) */
.rating-sum-head {
  display: flex;
  align-items: center;
  gap: 11px;
}
.rating-sum-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rating-sum-score {
  color: var(--muted);
  font-size: 12.5px;
}
.rating-sum-score strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rating-sum-bonuses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.rating-sum-bonus.is-discovery {
  color: var(--gold);
}
.rating-sum-bonus.is-regional {
  color: color-mix(in srgb, var(--regional) 70%, var(--text));
}
.rating-sum-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}
.rating-sum-chip {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  font-size: 11.5px;
  font-weight: 600;
}
.rating-sum-chip.is-priority {
  color: var(--favorite);
  border-color: color-mix(in srgb, var(--favorite) 50%, transparent);
}
.rating-sum-none,
.rating-sum-age {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.rating-sum-more {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--accent);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.rating-sum-more:hover {
  background: var(--panel-hover);
}

/* Discovery / regional bonuses: bars beside (not inside) the importance ring */
.rating-bonuses {
  display: grid;
  gap: 4px;
  margin: 2px 0 6px;
}
.rating-bonus {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}
.rating-bonus-label {
  color: var(--muted);
}
.rating-bonus-track {
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted-2) 25%, transparent);
  overflow: hidden;
}
.rating-bonus-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.rating-bonus.is-discovery .rating-bonus-fill {
  background: var(--gold);
}
.rating-bonus.is-regional .rating-bonus-fill {
  background: var(--regional);
}
.rating-bonus-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rating-bonus.is-discovery .rating-bonus-val {
  color: var(--gold);
}
.rating-bonus.is-regional .rating-bonus-val {
  color: var(--regional);
}

/* Score calculation: signals at publication, × recency weight, = importance */
.rating-calc-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.rating-calc-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.rating-pop-row.is-priority .rating-pop-label,
.rating-pop-row.is-priority .rating-pop-pts {
  color: var(--favorite);
}
.rating-calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}
.rating-calc-row.is-subtotal {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
}
.rating-calc-row.is-recency .rating-calc-val {
  color: color-mix(in srgb, var(--ok) 55%, var(--muted));
}
.rating-calc-row.is-total {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--border);
  font-weight: 800;
}
.rating-calc-row.is-total .rating-calc-val {
  color: var(--ok);
}
.rating-calc-val {
  flex: 0 0 auto;
  font-weight: 700;
}
.rating-calc-age {
  color: var(--muted-2);
  font-weight: 400;
}
.rating-calc-note {
  margin-top: 2px;
  color: var(--muted-2);
  font-size: 11px;
}
.rating-curve-wrap {
  margin: 4px 0 2px;
}
.rating-curve {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.rating-curve-fill {
  fill: color-mix(in srgb, var(--ok) 12%, transparent);
}
.rating-curve-line {
  fill: none;
  stroke: color-mix(in srgb, var(--ok) 70%, transparent);
  stroke-width: 1.5;
}
.rating-curve-axis {
  stroke: var(--border);
  stroke-width: 1;
}
.rating-curve-tick {
  font-size: 8px;
  fill: var(--muted-2);
}
.rating-curve-drop {
  stroke: var(--ok);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}
.rating-curve-dot {
  fill: var(--ok);
  stroke: var(--panel);
  stroke-width: 1.5;
}

/* Checkbox tag picker (in the Add feed form) */
.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
  min-height: 44px;
}
.tag-check {
  --cat: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--panel-2);
  cursor: pointer;
  transition: all 0.12s ease;
}
.tag-check:hover {
  border-color: var(--muted-2);
}
.tag-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--cat) 60%, transparent);
  background: color-mix(in srgb, var(--cat) 16%, transparent);
}
.tag-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--cat);
}
.tag-check span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

/* Tag manager (Tags tab) */
.tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.tag-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--panel-2);
}
.tag-row input[type='color'] {
  width: 30px;
  height: 30px;
}
.tag-name-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}
.tag-name-input:hover {
  border-color: var(--border-soft);
}
.tag-name-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel);
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.16);
}
.tag-feedcount {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--muted-2);
  white-space: nowrap;
}

/* Feed subscription row tag chips */
.feed-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
  max-width: 210px;
  flex: 0 0 auto;
}

/* ---------- Article reader ---------- */
.reader {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: 24px;
}
.reader[hidden] {
  display: none;
}
body.reader-open {
  overflow: hidden;
}
.reader-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 16, 20, 0.6);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  animation: reader-fade 0.2s ease both;
}
@keyframes reader-fade {
  from {
    opacity: 0;
  }
}
.reader-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1220px, 100%);
  max-height: min(90vh, 1000px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: reader-in 0.22s ease both;
}
@keyframes reader-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
}
.reader-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.reader-source {
  --feed: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--feed);
}
.reader-source::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--feed);
}
.reader-scroll {
  overflow-y: auto;
  padding: 26px 34px 34px;
  overscroll-behavior: contain;
}
.reader-title {
  margin: 0 0 10px;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.reader-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  font-size: 12.5px;
  color: var(--muted-2);
}
.reader-body {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--text);
}
.reader-body img,
.reader-body video,
.reader-body iframe {
  display: block;
  float: none;
  max-width: min(80%, 760px);
  height: auto;
  border-radius: 0; /* article photos stay unrounded */
  margin: 14px auto; /* centred */
}
.reader-body figure {
  margin: 16px 0;
}
.reader-body figcaption {
  font-size: 12.5px;
  color: var(--muted-2);
  text-align: center;
}
/* Gallery for feed-level photos that aren't part of the story text. It sits at
   the top of the reader, above the story text. */
.reader-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  justify-items: center;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}
.reader-gallery .reader-figure {
  width: 100%;
  max-width: 760px; /* a single photo stays article-width, centred */
  margin: 0;
}
.reader-gallery img {
  width: 100%;
  max-width: 100%; /* fill the (already capped) figure; the .reader-body 80% cap must not apply here */
  height: auto;
  margin: 0 auto;
  border-radius: 0;
  background: var(--panel-2);
}
.reader-body p {
  margin: 0 0 15px;
}
.reader-body a {
  color: var(--accent);
}
.reader-body h1,
.reader-body h2,
.reader-body h3,
.reader-body h4 {
  line-height: 1.28;
  margin: 22px 0 10px;
}
.reader-body ul,
.reader-body ol {
  margin: 0 0 15px;
  padding-left: 22px;
}
.reader-body li {
  margin-bottom: 6px;
}
.reader-body blockquote {
  margin: 18px 0;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--border);
  color: var(--muted);
}
.reader-body pre {
  overflow-x: auto;
  padding: 12px 14px;
  border-radius: 7px;
  background: var(--panel-2);
  font-size: 13px;
}
.reader-body code {
  font-size: 0.92em;
}
.reader-empty {
  color: var(--muted);
}
/* Scraped full text replaces the feed's teaser and reads like any other
   article body. */
.reader-scrape-body {
  font: inherit;
  color: inherit;
}
/* Shown in place of the article while its page is being scraped. */
.reader-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 240px;
  font-size: 13.5px;
  color: var(--muted);
}
.reader-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dd-spin 0.7s linear infinite;
}
.reader-head-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
}
.reader-origin {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted-2);
  padding: 2px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
}
.reader-origin[hidden] {
  display: none;
}
.reader-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
}
/* `.btn` sets display:inline-flex, which would otherwise beat the `hidden`
   attribute; the scrape button must really disappear for long/link-less items. */
#readerScrape[hidden] {
  display: none;
}
#readerScrape.is-busy {
  opacity: 0.65;
}
.reader-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-soft);
  background: var(--panel-2);
}
.reader-rating {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}
.reader-foot .btn {
  text-decoration: none;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%) translateY(10px);
  z-index: 90;
  padding: 10px 16px;
  border-radius: 7px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast[hidden] {
  display: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
}
.toast-action {
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}
.toast-action:hover {
  text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  .sidebar {
    position: static;
    max-height: none;
    order: -1;
  }
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  /* Sections get the full width; ordering + toggles move to their own row. */
  .sectionbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .view-controls {
    overflow-x: auto;
    padding: 2px 0 8px;
    scrollbar-width: none;
  }
}

@media (max-width: 720px) {
  .masthead {
    flex-wrap: wrap;
    padding: 10px 14px 6px;
    gap: 10px;
  }
  .sectionbar {
    padding: 0 14px;
  }
  .topbar-start {
    display: contents;
  }
  .brand {
    order: 1;
  }
  .topbar-end {
    order: 2;
    margin-left: auto;
  }
  .search-box {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }
  .btn-label {
    display: none;
  }
  .manage-btn {
    width: 34px;
    padding: 0;
    justify-content: center;
  }
  .search-results-inner {
    padding: 10px 14px;
  }
  .layout {
    padding: 12px;
    gap: 14px;
  }
  .two-up,
  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .news-thumb {
    width: 84px;
    height: 56px;
  }
  /* Narrow screens: stack the report above the radar. */
  .content--list .weather-flipper {
    flex-direction: column;
    gap: 12px;
  }
  .content--list .weather-face {
    flex: 0 1 auto;
  }
  .content--list .weather-back {
    min-height: 240px;
  }
  .field-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  /* The refresh countdown is information, not decoration: keep its timing. */
  .refresh-btn.is-counting {
    animation-duration: var(--ring-ms, 20s) !important;
  }
}

/* ---------- Share tab (export / import config) ---------- */
.share-text {
  margin: 0;
  font-size: 12.5px;
}
a.btn-block {
  text-decoration: none;
}
.share-import {
  margin-top: 16px;
}
.share-import input[type='file'] {
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  max-width: 100%;
}
.import-preview {
  font-size: 13px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.import-names {
  margin: 8px 0 0;
  padding-left: 18px;
  max-height: 160px;
  overflow-y: auto;
  color: var(--muted);
  font-size: 12.5px;
}
.import-mode {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.import-mode legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.import-mode .hint-inline {
  margin: 0 0 6px 24px;
}
.share-import .btn-block:disabled {
  opacity: 0.5;
  cursor: default;
  filter: none;
}

/* ---------- Footer: credit + disclaimer ---------- */
.site-footer {
  border-top: 1px solid var(--border-soft);
  margin-top: 12px;
  padding: 16px 22px 8px;
}
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  max-width: 1340px;
  margin: 0 auto;
}
.site-footer-credit {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.site-footer-link {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.site-footer-link:hover {
  color: var(--text);
}
.site-footer-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (max-width: 720px) {
  .site-footer {
    padding: 16px 16px 8px;
  }
}
.import-mode[hidden] {
  display: none;
}

/* ---------- Login / create account ---------- */
.auth-page {
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.auth-wrap {
  width: 100%;
  max-width: 380px;
  display: grid;
  gap: 18px;
}
.auth-brand {
  justify-content: center;
}
.auth-card {
  padding: 22px;
  gap: 14px;
}
.auth-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.auth-lead {
  margin: -6px 0 2px;
  font-size: 13px;
}
.auth-card input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.18);
}
.auth-card .field[hidden] {
  display: none;
}
.auth-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.auth-note--warn {
  color: var(--danger);
}
.auth-switch {
  justify-self: center;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px;
}
.auth-switch:hover {
  text-decoration: underline;
}
.auth-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Top right: current user + log out / switch ---------- */
.user-btn {
  height: 34px;
  padding: 0 12px;
  max-width: 220px;
}
.user-btn .user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-weight: 600;
}
.user-btn .user-action {
  border-left: 1px solid var(--border);
  padding-left: 8px;
}
@media (max-width: 720px) {
  .user-btn {
    width: 34px;
    padding: 0;
    justify-content: center;
  }
  .user-btn .user-name,
  .user-btn .user-action {
    display: none;
  }
}
.auth-wrap .auth-brand {
  order: 0;
}

/* ---------- Notifications (bell + panel) ---------- */
.notif-wrap {
  position: relative;
}
.notif-btn {
  position: relative;
}
.notif-btn.has-alerts {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  background: color-mix(in srgb, var(--danger) 12%, var(--panel));
}
.notif-btn.is-unseen {
  animation: notif-glow 1.6s ease-in-out infinite;
}
@keyframes notif-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 30%, transparent);
  }
}
.notif-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.notif-count[hidden] {
  display: none;
}
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  width: min(360px, calc(100vw - 32px));
  max-height: min(480px, calc(100vh - 120px));
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.notif-panel[hidden] {
  display: none;
}
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  background: var(--panel);
}
.notif-head h2 {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.notif-head .icon-btn {
  width: 28px;
  height: 28px;
}
.notif-list {
  list-style: none;
  margin: 0;
  padding: 6px;
}
.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
}
.notif-item + .notif-item {
  border-top: 1px solid var(--border-soft);
}
.notif-item.is-new {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.notif-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--feed, var(--danger));
}
.notif-text {
  min-width: 0;
}
.notif-text strong {
  font-size: 13.5px;
}
.notif-text p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}
.notif-text .notif-meta {
  font-size: 11.5px;
  color: var(--muted-2);
  overflow-wrap: anywhere;
}
.notif-empty {
  padding: 14px 8px;
  font-size: 13px;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .notif-btn.is-unseen {
    animation: none;
  }
}
@media (max-width: 720px) {
  .notif-panel {
    position: fixed;
    top: calc(var(--topbar-h, 104px) - 8px);
    right: 16px;
    left: 16px;
    width: auto;
  }
}

/* ---------- Location tab ---------- */
.city-current {
  margin: 0;
  font-size: 13.5px;
}
.city-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.city-results[hidden],
#cityReset[hidden] {
  display: none;
}
.city-option {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.city-option:hover,
.city-option:focus-visible {
  border-color: var(--accent);
  outline: none;
}
.city-none {
  font-size: 13px;
  color: var(--muted-2);
}
#citySearch:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.18);
}

/* Four management tabs: on narrow screens they get their own full-width row. */
@media (max-width: 560px) {
  .modal-head {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .modal-head .tabs {
    order: 3;
    flex: 1 0 100%;
  }
  .modal-head .tab {
    flex: 1 0 auto;
    padding: 7px 6px;
  }
  /* Six tabs don't always fit a phone: let the row scroll sideways. */
  .modal-head .tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }
}

/* ---------- Introduction (new account) ----------
   Built from the Beheer pieces (modal head/body, .add-form sections,
   .tag-picker/.tag-check chips, .feed-row rows); only layout glue here. */
.intro {
  z-index: 90;
}
.intro-panel {
  width: min(640px, 100%);
}
.intro-stepnote {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted-2);
}
.intro-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.intro-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.intro-step[hidden],
.intro-refresh[hidden] {
  display: none;
}
.intro-lead {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}
.intro-option {
  width: 100%;
  justify-content: space-between;
  padding: 13px 14px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.intro-option:hover,
.intro-option:focus-visible {
  border-color: var(--muted-2);
  background: var(--panel-hover);
  outline: none;
}
.intro-option-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.intro-option-text strong {
  font-size: 14px;
}
.intro-option-text .hint-inline {
  font-size: 12px;
}
.intro-option-arrow {
  font-size: 20px;
  line-height: 1;
  color: var(--muted-2);
}
.intro-categories {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.intro-cat {
  gap: 10px;
}
.intro-cat h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.intro-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--cat);
}
.intro-cat .tag-picker {
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
}
/* The Steam option looks like the other chips but opens a popup. */
.tag-check.intro-steam {
  font: inherit;
  padding: 4px 11px;
}
.tag-check.intro-steam.is-on {
  border-color: color-mix(in srgb, var(--cat) 60%, transparent);
  background: color-mix(in srgb, var(--cat) 16%, transparent);
}
#introRefreshMode {
  width: 100%;
  padding: 10px 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
#introRefreshMode:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.18);
}
.intro .field input[type='file'] {
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  max-width: 100%;
}
.intro-scrape-text {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.intro-scrape-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.intro-scrape-list .feed-row {
  cursor: pointer;
}
.intro-scrape-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
}
.feed-color-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #66c0f4;
}

/* Footer bar shared by the intro and the Steam popup. */
.intro-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-soft);
}
.intro-foot-actions {
  display: flex;
  gap: 8px;
}
.intro-foot .btn[hidden] {
  display: none;
}
.intro-skip {
  background: none;
  border-color: transparent;
  color: var(--muted);
}
.intro-skip:hover {
  background: var(--panel-2);
  border-color: var(--border-soft);
  color: var(--text);
}

/* Steam popup (above the intro). */
.steam-modal {
  z-index: 95;
}
.steam-panel {
  width: min(520px, 100%);
}
.steam-row {
  display: flex;
  gap: 8px;
}
.steam-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.steam-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.18);
}
.steam-games .feed-row {
  padding: 6px 6px 6px 12px;
}
.steam-game-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
}
.steam-games .icon-btn {
  width: 28px;
  height: 28px;
  font-size: 13px;
}
#steamEmpty[hidden] {
  display: none;
}

.refresh-setting {
  margin-bottom: 16px;
}

/* =====================================================================
   Phone layout (≤ 720px): latest-news ticker on top, search button top
   right, Belangrijkst as 1 big + 2 side by side + a compact image/title
   list, and a bottom bar whose Filters / Weer / Meer open bottom sheets
   (the section bar, the sidebar and the "Meer" menu respectively).
   ===================================================================== */
.m-ticker,
.m-search-btn,
.m-nav,
.m-backdrop,
.m-more,
.m-sheet-head {
  display: none;
}

@keyframes m-sheet-in {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}
@keyframes m-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 720px) {
  :root {
    --m-nav-h: calc(58px + env(safe-area-inset-bottom));
  }
  body {
    padding-bottom: calc(var(--m-nav-h) + 8px);
  }

  /* Solid top bar: backdrop-filter would turn it into the containing block
     for the fixed bottom sheets that live inside it. */
  .topbar {
    z-index: 55;
    background: var(--bg);
    backdrop-filter: none;
  }

  /* --- Latest-news ticker --- */
  .m-ticker:not([hidden]) {
    display: block;
    margin-bottom: 6px;
    background: var(--panel);
    border-bottom: 1px solid var(--border-soft);
  }
  .m-ticker-label {
    padding: 7px 12px 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .m-ticker-track {
    display: flex;
    margin: 0;
    padding: 0 12px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 12px;
    scrollbar-width: none;
  }
  .m-ticker-track::-webkit-scrollbar {
    display: none;
  }
  .m-ticker-item {
    flex: 0 0 auto;
    max-width: 80vw;
    scroll-snap-align: start;
  }
  /* A dotted line between the headlines. */
  .m-ticker-item + .m-ticker-item {
    border-left: 1px dotted var(--muted-2);
  }
  .m-ticker-link {
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 8px 12px;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
  .m-ticker-item:first-child .m-ticker-link {
    padding-left: 0;
  }
  .m-ticker-icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    color: var(--muted-2);
  }
  .m-ticker-icon img {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    object-fit: contain;
  }
  .m-ticker-icon svg {
    display: none;
  }
  .m-ticker-icon.no-icon img {
    display: none;
  }
  .m-ticker-icon.no-icon svg {
    display: block;
  }
  .m-ticker-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* --- Header: logo left, search button right --- */
  .masthead {
    padding: 8px 12px;
    gap: 8px;
  }
  .m-search-btn {
    display: grid;
    order: 2;
    margin-left: auto;
    width: 38px;
    height: 38px;
  }
  .topbar.m-search-open .m-search-btn {
    color: var(--accent);
    border-color: var(--accent);
  }
  .topbar-end {
    order: 4;
    margin: 0;
  }
  .topbar-end > :not(.notif-wrap),
  .notif-btn {
    display: none;
  }
  .search-box {
    display: none;
  }
  .topbar.m-search-open .search-box {
    display: flex;
  }

  /* --- Bottom bar --- */
  .m-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 52;
    height: var(--m-nav-h);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--panel);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);
  }
  .m-nav-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-nav-btn > span:not(.notif-count) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-nav-btn[aria-expanded='true'] {
    color: var(--accent);
  }
  .m-nav-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -4px;
    border-radius: 8px;
  }
  .m-nav-btn.has-alerts {
    color: var(--danger);
  }
  .m-nav-btn.is-unseen svg {
    animation: notif-glow 1.6s ease-in-out infinite;
    border-radius: 50%;
  }
  .m-nav-btn.is-syncing svg {
    animation: m-spin 0.8s linear infinite;
  }
  .m-nav-btn .notif-count {
    top: 5px;
    right: calc(50% - 24px);
  }
  .m-nav-weather {
    font-size: 18px;
    line-height: 20px;
  }

  /* --- Bottom sheets --- */
  .m-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(10, 11, 14, 0.5);
    animation: fade-in 0.16s ease;
  }
  .m-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 14px 0 10px;
    background: var(--panel);
  }
  .m-sheet-head h2 {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .m-sheet-head .icon-btn {
    width: 32px;
    height: 32px;
  }
  body.m-sheet-filter .sectionbar,
  body.m-sheet-weather .sidebar,
  .m-more:not([hidden]) {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: var(--m-nav-h);
    z-index: 56;
    max-width: none;
    max-height: 78vh;
    margin: 0;
    padding: 0 16px 16px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    box-shadow: var(--shadow);
    animation: m-sheet-in 0.2s ease;
  }

  /* Filters sheet = the section bar: tags as wrapping pills, then ordering. */
  .sectionbar {
    display: none;
  }
  body.m-sheet-filter .sections {
    flex-wrap: wrap;
    overflow: visible;
    gap: 6px;
    padding-bottom: 14px;
  }
  body.m-sheet-filter .section {
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
  }
  body.m-sheet-filter .section::after {
    display: none;
  }
  body.m-sheet-filter .section.is-active {
    border-color: var(--cat, var(--accent));
    background: color-mix(in srgb, var(--cat, var(--accent)) 16%, transparent);
  }
  body.m-sheet-filter .view-controls {
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px;
    padding: 14px 0 0;
    border-top: 1px solid var(--border-soft);
  }

  /* Weather sheet = the sidebar, minus the latest list (that's the ticker). */
  .sidebar {
    display: none;
  }
  .sidebar .sidebar-head,
  .sidebar .latest-list {
    display: none;
  }
  .sidebar .weather {
    margin-bottom: 0;
  }

  /* "Meer" menu */
  .m-more:not([hidden]) {
    display: grid;
    gap: 8px;
  }
  .m-more-item {
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--text);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }

  /* Notifications open above the bottom bar. */
  .notif-panel {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: calc(var(--m-nav-h) + 8px);
    width: auto;
    max-height: 70vh;
  }
  .toast {
    bottom: calc(var(--m-nav-h) + 12px);
  }

  /* --- Belangrijkst: 1 big, then 2 side by side, then a compact list --- */
  .layout {
    padding: 12px;
  }
  .hero-zone {
    gap: 10px;
  }
  .card--hero {
    min-height: 330px;
  }
  .card--hero .card-h {
    font-size: 22px;
  }
  .card--hero .card-summary {
    font-size: 14px;
  }

  .two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .two-up .card {
    min-height: 230px;
  }
  .two-up .card-head {
    padding: 8px;
  }
  .two-up .source-badge {
    width: 26px;
    height: 26px;
  }
  .two-up .card-body {
    padding: 10px 10px 4px;
  }
  .two-up .card-h {
    font-size: 14.5px;
    line-height: 1.25;
  }
  .two-up .card-summary,
  .two-up .card-time {
    display: none;
  }
  .two-up .card-foot .tag-chip {
    padding: 1px 6px;
    font-size: 9.5px;
  }
  .two-up .card-foot {
    padding: 8px 10px 10px;
    font-size: 11px;
  }

  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .grid-3 .card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas:
      'media body'
      'media foot';
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    align-content: center;
    min-height: 0;
    padding: 12px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    box-shadow: none;
  }
  .grid-3 .card-media {
    position: relative;
    inset: auto;
    grid-area: media;
    width: 104px;
    height: 70px;
    border-radius: 6px;
  }
  .grid-3 .card--no-media::before {
    content: '';
    grid-area: media;
    width: 104px;
    height: 70px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--feed) 24%, var(--panel-2));
  }
  .grid-3 .card-scrim,
  .grid-3 .card-head,
  .grid-3 .card-summary {
    display: none;
  }
  .grid-3 .card-discovery-tint {
    border-radius: 6px;
  }
  .grid-3 .card-body {
    grid-area: body;
    align-self: end;
    margin: 0;
    padding: 0;
  }
  .grid-3 .card-h {
    font-size: 15px;
    line-height: 1.3;
    text-shadow: none;
  }
  .grid-3 .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text);
  }
  .grid-3 .card:hover .card-title {
    text-decoration: none;
  }
  .grid-3 .card-foot {
    grid-area: foot;
    align-self: start;
    gap: 6px;
    padding: 0;
    border: 0;
    font-size: 11.5px;
    color: var(--muted);
  }
  /* No photo behind the list rows: tags and the score ring use their plain
     (non-overlay) colours. */
  .grid-3 .card-foot .tag-chip {
    color: var(--cat);
    background: color-mix(in srgb, var(--cat) 15%, transparent);
    border-color: color-mix(in srgb, var(--cat) 42%, transparent);
  }
  .grid-3 .card-foot .tag-chip.more {
    color: var(--muted);
    background: var(--panel-2);
    border-color: var(--border-soft);
  }
  html[data-theme='light'] .grid-3 .card .rating-pill {
    background: var(--panel-2);
    border-color: var(--border);
    color: var(--text);
  }
  .grid-3 .card-src {
    color: var(--muted);
    font-weight: 600;
  }
  .grid-3 .card-time {
    color: var(--muted-2);
  }

  /* Ontdekken in the list: same cues as the desktop card (gold outline and
     badge, photo untouched) instead of a grey wash over the whole row. */
  .grid-3 .card--discovery {
    grid-template-areas:
      'media head'
      'media body'
      'media foot';
    grid-template-rows: auto auto auto;
    margin: 6px 0;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--gold) 7%, transparent);
  }
  .grid-3 .card--discovery.card--discovery-read {
    border-color: var(--border-soft);
    background: none;
  }
  .grid-3 .card--discovery .card-discovery-tint {
    display: none;
  }
  .grid-3 .card--discovery .card-head {
    display: flex;
    grid-area: head;
    padding: 0;
    gap: 6px;
  }
  .grid-3 .card--discovery .card-head > :not(.discovery-badge):not(.discovery-ignore-btn) {
    display: none;
  }
  .grid-3 .discovery-badge {
    margin-left: 0;
    background: color-mix(in srgb, var(--gold) 16%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* No hover on touch screens: keep "negeren" visible. */
  .grid-3 .discovery-ignore-btn {
    width: 22px;
    height: 22px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: color-mix(in srgb, var(--gold) 16%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html[data-theme='light'] .grid-3 .card {
    --gold: #a76b00;
    --accent: #1f6fd1;
    --ok: #1d8a4a;
  }

  /* Article reader: full screen; the footer wraps instead of overlapping. */
  .reader {
    padding: 0;
    place-items: stretch;
  }
  .reader-panel {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .reader-scroll {
    flex: 1 1 auto;
    padding: 20px 16px 28px;
  }
  .reader-foot {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .reader-actions {
    flex: 1 1 auto;
  }
  .reader-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
  }

  /* Nieuwste: same compact rows, with tags + score under the headline. */
  .news-summary {
    display: none;
  }
  .news-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas:
      'thumb main'
      'thumb labels';
    align-items: start;
    column-gap: 12px;
    row-gap: 6px;
    padding: 12px;
  }
  .news-thumb {
    grid-area: thumb;
  }
  .news-main {
    grid-area: main;
  }
  .news-labels {
    grid-area: labels;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    max-width: none;
  }
  .news-label-tags {
    justify-content: flex-start;
    min-width: 0;
  }

  /* The feed badge's hover popup has no hover to trigger it on touch, and its
     off-card box would widen the page. */
  .source-badge .popup {
    display: none;
  }
}

/* ---------- "Over Newsdeck en disclaimer" popup (legal.js) ---------- */
.legal-modal {
  z-index: 100;
}
.legal-panel {
  width: min(680px, 100%);
}
.legal-body:focus {
  outline: none;
}
.legal {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}
.legal-lead {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--muted);
}
.legal h3 {
  margin: 18px 0 6px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal ul {
  margin: 0;
  padding-left: 18px;
}
.legal li + li {
  margin-top: 6px;
}
.legal p {
  margin: 0;
}
.legal-meta {
  margin-top: 18px !important;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--muted-2);
}
.legal-progress {
  font-size: 12px;
}

/* Create account: read + accept the disclaimer. */
.terms-block {
  display: grid;
  gap: 8px;
}
.terms-block[hidden] {
  display: none;
}
.terms-check input:disabled + span {
  color: var(--muted-2);
}
.terms-check input:disabled {
  cursor: not-allowed;
}
.terms-block .hint-inline {
  margin: 0;
}

/* ---------- Login steps, sign-up methods, authenticator & recovery ---------- */
.auth-body,
.auth-form {
  display: grid;
  gap: 12px;
}
.auth-form input:not([type='checkbox']):not([type='radio']),
.account-panel input[type='text'],
.account-panel input[type='password'],
.account-work input[type='text'],
.account-work input[type='password'],
.totp-setup input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.auth-form input:focus,
.account-panel input:focus,
.account-work input:focus,
.totp-setup input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.18);
}
.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  letter-spacing: 0.12em;
}
.field-label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
}
.who-line {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.who-line strong {
  color: var(--text);
}
.auth-footer {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--muted-2);
  font-size: 12.5px;
}
.help-inline-link {
  font-size: inherit;
  padding: 0;
}
.method-group {
  display: grid;
  gap: 8px;
}
.method-option {
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.method-option input {
  margin: 3px 0 0;
  accent-color: var(--accent);
}
.method-option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
}
.method-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.method-text {
  display: grid;
  gap: 3px;
}
.method-text strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
}
.method-badge {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}
.method-fields {
  display: grid;
  gap: 12px;
}
.method-fields[hidden] {
  display: none;
}
.totp-setup {
  display: grid;
  gap: 10px;
}
.totp-setup .auth-note {
  margin: 0;
}
.qr-box {
  justify-self: center;
  padding: 10px;
  border-radius: 8px;
  background: #fff; /* scanners need a light background in both themes */
  line-height: 0;
}
.manual-key summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--muted);
}
.secret-text,
.recovery-code {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 7px;
  border: 1px dashed var(--border);
  background: var(--panel);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 0.08em;
  word-break: break-all;
  user-select: all;
}
.recovery-panel {
  display: grid;
  gap: 12px;
}
.recovery-panel .auth-note {
  margin: 0;
}
.recovery-code {
  margin: 0;
  font-size: 17px;
  text-align: center;
}
.recovery-actions,
.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.legal-callout {
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  font-size: 13.5px;
}
.legal-callout strong {
  display: block;
  margin-bottom: 4px;
}

/* Beheer → Account */
.account-panel,
.account-work {
  display: grid;
  gap: 14px;
}
.account-work:empty {
  display: none;
}
.account-work {
  margin-top: 14px;
}
.account-panel > .hint {
  margin: 0;
}
.pk-row {
  gap: 10px;
}
.pk-icon {
  font-size: 16px;
}
.pk-text {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.pk-text strong {
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-row .icon-btn {
  width: 30px;
  height: 30px;
}
.pk-row .icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pk-add,
.pw-form,
.reauth-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pk-add input,
.pw-form input,
.reauth-form input {
  flex: 1 1 180px;
  min-width: 0;
}
.pw-form[hidden] {
  display: none;
}
.btn-danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--danger) 10%, var(--panel));
}
.recovery-code {
  word-break: normal; /* wrap at the dashes, never inside a group */
}
.hint-warn {
  color: var(--danger);
}
.hint-warn[hidden] {
  display: none;
}
.reader-also {
  color: var(--muted);
}
.reader-also a {
  color: var(--accent);
}

/* Dismiss button on notices in the notifications panel. */
.notif-dismiss {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 26px;
  height: 26px;
  margin-left: auto;
  font-size: 12px;
}

/* Login: method icons, passkey-first layout */
.auth-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  line-height: 0;
}
.auth-method-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.auth-section {
  display: grid;
  gap: 8px;
}
.auth-center {
  margin: 0;
  text-align: center;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted-2);
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1 1 auto;
  border-top: 1px solid var(--border-soft);
}
.method-option .auth-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  color: var(--muted);
}
.method-option:has(input:checked) .auth-icon {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft));
}

/* Notifications: "Alles wissen" */
.notif-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.notif-clear {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.notif-clear:hover {
  color: var(--text);
  background: var(--panel-2);
}
.notif-clear[hidden] {
  display: none;
}

/* Passkeys without PRF ("standaardversleuteling") */
.pk-badge {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  vertical-align: 1px;
}
.account-protection {
  margin: 0;
}
.account-protection p {
  margin: 4px 0 0;
  font-size: 13px;
}
.choose-modal {
  z-index: 110;
}
.choose-panel {
  width: min(520px, 100%);
}
.choose-panel .modal-body p + p {
  margin-top: 10px;
}

/* ---------- Topic weights (Beheer → Voorkeuren, "Minder zoals dit") ---------- */
.weight-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.weight-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.weight-name {
  font-size: 13px;
  font-weight: 600;
}
.weight-custom {
  font-weight: 400;
  color: var(--accent);
}
.weight-row:not(.is-changed) .weight-name {
  color: var(--muted);
}
.weight-seg .seg-btn {
  font-size: 12px;
  padding: 4px 8px;
}
@media (max-width: 560px) {
  .weight-seg {
    width: 100%;
  }
  .weight-seg .seg-btn {
    flex: 1 1 0;
    padding: 4px 2px;
  }
}
#weightsResetNote {
  margin-top: 6px;
}
.less-like {
  margin-top: 14px;
}
.less-like-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.less-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.less-like-level {
  font-size: 11px;
  color: var(--muted);
}