/* ============ Base / theme tokens ============ */
/* Dark is the default (approved) theme. Every component reads these semantic
   tokens only — the light theme below overrides the same token names, so all
   existing and future components inherit both themes automatically. */
:root {
  color-scheme: dark;
  /* Surface hierarchy: page darkest → cards slightly lighter → hovered rows lighter again. */
  --bg-page: #0b0b0e;            /* page canvas */
  --bg-surface: #121216;         /* inset surfaces: info panels, chips, icon tiles */
  --bg-card: #15151b;            /* cards, tables, panels */
  --bg-surface-elevated: #1a1a21; /* media backdrops, floating dropdowns */
  --bg-hover: #1e1e25;           /* hovered rows / cards */
  --header-bg: rgba(11, 11, 14, .92);
  --footer-bg: #09090c;
  --field-bg: #1a1a21;           /* search fields */
  --field-border: #26262d;
  --field-text: #f4f4f6;
  --field-placeholder: #a8a8b4;
  --text-primary: #f4f4f6;
  --text-secondary: #a8a8b4;
  --text-muted: #74747f;         /* uppercase micro-labels */
  --text-meta: #8e8e9a;          /* small meta text */
  --text-strong: #ffffff;        /* hover emphasis on rows */
  --text-faint: #5e5e6a;         /* muted dash placeholder */
  --icon-dim: #5c5c68;           /* chevrons, separators */
  --border-subtle: #26262d;
  --border-strong: #3a3a45;
  --row-line: rgba(255, 255, 255, .045);
  --rule: rgba(255, 255, 255, .07);
  --accent: #f43f5e;
  --accent-hover: #ff5c74;
  --accent-soft: rgba(244, 63, 94, .12);
  --accent-tint: rgba(244, 63, 94, .08);
  --accent-tint-soft: rgba(244, 63, 94, .07);
  --accent-border: rgba(244, 63, 94, .45);
  --accent-border-soft: rgba(244, 63, 94, .4);
  --accent-border-faint: rgba(244, 63, 94, .35);
  --accent-line: rgba(244, 63, 94, .6);
  --li-shade-strong: rgba(11, 11, 14, .94);
  --li-shade-mid: rgba(11, 11, 14, .55);
  --li-shade-soft: rgba(11, 11, 14, .05);
  --li-card-text: #ffffff;
  --li-card-sub: rgba(244, 244, 246, .82);
  --rank-gold: #ddb04c;
  --rank-silver: #c7c7cf;
  --rank-bronze: #c9825c;
  --rank-gold-border: rgba(221, 176, 76, .7);
  --rank-silver-border: rgba(199, 199, 207, .6);
  --rank-bronze-border: rgba(201, 130, 92, .65);
  --rank-gold-text: #241a04;
  --rank-silver-text: #191920;
  --rank-bronze-text: #2a1508;
  --rank-n-bg: #191920;          /* ranks 4+ badge */
  --rank-n-text: #a8a8b4;
  --star: #a3925f;
  --noimg-letter: #4a4a56;
  --noimg-letter-sm: #5a5a66;
  --pros: #7cc79b;
  --cons: #d9968a;
  /* On-image overlays stay dark in both themes (they sit over imagery,
     not over the page surface). */
  --overlay-bg: rgba(11, 11, 14, .85);
  --overlay-bg-soft: rgba(11, 11, 14, .82);
  --overlay-border: #26262d;
  --overlay-text: #f4f4f6;
  --overlay-dim: #a8a8b4;
  --radius: 12px;
  --row-h: 54px;
  /* Ranking-table metrics (shared by every table; theme-independent) */
  --row-h-main: 54px;            /* main ranked rows — compact (5 stay visible per block) */
  --row-h-side: 58px;            /* compact ranked rows (sidebar panels) */
  --rk-size: 20px;               /* rank badge — 30% smaller, secondary to the logo */
  --rk-size-sm: 18px;            /* rank badge on narrow cards/mobile */
  --rk-radius: 6px;              /* badge radius — scaled with the 30% smaller badge */
  --art-size: 36px;              /* logo slot: 32–38px desktop ranking rows */
  --art-size-compact: 30px;      /* logo slot on compact tables/mobile: 28–32px */
  --eye-col: 64px;               /* the "Overview" (eye) column on ranking rows */
  --section-gap: 48px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .22);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
}

/* ============ Light theme (soft warm editorial — warm paper / soft stone / cream) ============ */
/* Applied via html[data-theme="light"], set before first paint by the inline
   script in the layout (and toggled by the header switch). Only token VALUES
   change — no component rule is duplicated. */
html[data-theme="light"] {
  color-scheme: light;
  --bg-page: #f3f1ed;
  --bg-surface: #f8f6f2;         /* insets, chips, info panels */
  --bg-card: #fcfbf8;            /* cards, tables — warm white */
  --bg-surface-elevated: #fcfbf8;
  --bg-hover: #ece8e2;           /* hovered rows — slightly darker warm gray */
  --header-bg: rgba(236, 233, 228, .92); /* a touch darker than the page */
  --footer-bg: #ece9e4;
  --field-bg: #ece9e4;           /* search fields */
  --field-border: #d8d2cb;
  --field-text: #262428;
  --field-placeholder: #8a858d;
  --text-primary: #1e1d20;
  --text-secondary: #67636b;
  --text-muted: #8b868e;
  --text-meta: #8b868e;
  --text-strong: #1e1d20;
  --text-faint: #9b959d;
  --icon-dim: #9a938b;
  --border-subtle: #ded9d2;
  --border-strong: #cbc5bd;
  --row-line: rgba(30, 29, 32, .07);
  --rule: rgba(30, 29, 32, .1);
  --accent: #d95463;             /* RankNest coral, kept close to the brand */
  --accent-hover: #c94a59;
  --accent-soft: rgba(217, 84, 99, .1);
  --accent-tint: rgba(217, 84, 99, .08);
  --accent-tint-soft: rgba(217, 84, 99, .06);
  --accent-border: rgba(217, 84, 99, .4);
  --accent-border-soft: rgba(217, 84, 99, .35);
  --accent-border-faint: rgba(217, 84, 99, .3);
  --accent-line: rgba(217, 84, 99, .5);
  --li-shade-strong: rgba(252, 251, 248, .96);
  --li-shade-mid: rgba(252, 251, 248, .62);
  --li-shade-soft: rgba(252, 251, 248, .08);
  --li-card-text: #1e1d20;
  --li-card-sub: rgba(30, 29, 32, .74);
  --rank-gold: #d7b44a;
  --rank-silver: #b9bcc2;
  --rank-bronze: #c58d68;
  --rank-gold-border: rgba(176, 143, 44, .5);
  --rank-silver-border: rgba(146, 150, 158, .5);
  --rank-bronze-border: rgba(167, 110, 74, .5);
  --rank-n-bg: #ece8e2;          /* light neutral badge, darker text */
  --rank-n-text: #57525a;
  --star: #9a8349;
  --noimg-letter: #c8c1b7;
  --noimg-letter-sm: #b4aca1;
  --pros: #4e7a5f;
  --cons: #a2604f;
  --shadow: 0 4px 18px rgba(20, 20, 20, .05); /* elevation by tone, not heavy shadow */
}

/* Subtle cross-fade while switching themes (background / border / color only —
   never layout). The class is added for ~240ms by site.js. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-switching,
  html.theme-switching *,
  html.theme-switching *::before,
  html.theme-switching *::after { transition: none; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.62;
  color: var(--text-primary);
  background: var(--bg-page);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
h1 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .012em;
  font-size: clamp(2rem, 1.25rem + 2.2vw, 2.65rem); line-height: 1.1;
}
h2 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
.tx-accent { color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted-dash { color: var(--text-faint); }

.container { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 8px 14px; z-index: 100; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; color: #fff; }

.prose h2, .prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose blockquote { margin: 1em 0; padding: .6em 1.1em; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; color: var(--text-secondary); }
.prose table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: .95rem; }
.prose th, .prose td { border: 1px solid var(--border-subtle); padding: 8px 12px; text-align: left; }
.prose th { background: var(--bg-surface); }
.prose img { border-radius: var(--radius); margin: 1em 0; }

/* ============ Buttons ============ */
.btn {
  display: inline-block; padding: 10px 20px; border-radius: 9px;
  font-weight: 700; font-size: .92rem; border: 1px solid transparent;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
  min-height: 42px; line-height: 1.4;
}
.btn-primary { background: var(--accent); color: #fff !important; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: var(--border-subtle); color: var(--text-primary) !important; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent) !important; }
.noscript-note { font-size: .85rem; color: var(--text-secondary); margin-left: 8px; }

/* ============ Header ============ */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); }
[id] { scroll-margin-top: 84px; }
.header-inner { display: flex; align-items: center; gap: 14px; min-height: 64px; position: relative; }
.logo {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  font-size: 1.5rem; color: var(--text-primary); white-space: nowrap; line-height: 1;
}
.logo span { color: var(--accent); }
.logo:hover { color: var(--text-primary); }

.header-search { position: relative; display: flex; align-items: center; gap: 9px; background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 10px; padding: 0 14px; min-height: 40px; width: min(380px, 32vw); min-width: 180px; margin-left: auto; }
.header-search .hs-ico { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-secondary); }
.header-search input { border: 0; background: transparent; outline: none; font-size: .9rem; width: 100%; min-width: 60px; color: var(--field-text); }
.header-search input::placeholder { color: var(--field-placeholder); }
.header-search button { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.header-search:focus-within { border-color: var(--accent); }

/* Compact theme switch (sun / moon). Sits on the same field treatment as the
   search bar; only the relevant icon shows for the current theme. On phones
   (≤560px) the header bar has no room, so the switch lives in the nav menu
   instead and the header-bar icon is hidden. */
.theme-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; margin-left: 2px;
  border: 1px solid var(--field-border); border-radius: 10px;
  background: var(--field-bg); color: var(--text-secondary); cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .ico-moon { display: none; }
html[data-theme="light"] .theme-toggle .ico-sun { display: none; }
html[data-theme="light"] .theme-toggle .ico-moon { display: block; }

/* Menu variant (phones): a labeled row at the end of the mobile nav. */
.theme-toggle-nav {
  width: auto; height: auto; min-height: 44px; justify-content: flex-start; gap: 9px;
  padding: 10px 8px; margin: 2px 0 4px; border-radius: 8px;
  background: var(--bg-surface); border-color: var(--border-subtle);
}
.tt-label { font-size: .92rem; font-weight: 600; color: var(--text-primary); }
.tt-label-dark { display: none; }
html[data-theme="light"] .tt-label-light { display: none; }
html[data-theme="light"] .tt-label-dark { display: inline; }
@media (min-width: 561px) { .theme-toggle-nav { display: none !important; } }
@media (max-width: 560px) { .header-inner > .theme-toggle { display: none; } }

.header-cta { margin-left: 4px; padding: 8px 18px; min-height: 38px; font-size: .88rem; white-space: nowrap; }

.nav-toggle { display: flex; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 10px 8px; min-width: 44px; min-height: 44px; justify-content: center; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.main-nav { display: none; position: absolute; top: 100%; left: -20px; right: -20px; z-index: 49; background: var(--bg-page); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow); }
.main-nav.open { display: block; }
.nav-inner { display: flex; flex-direction: column; padding: 8px 20px 12px; }
.nav-item > a { display: block; padding: 10px 6px; font-weight: 600; color: var(--text-primary); border-radius: 8px; }
.nav-item > a:hover { color: var(--accent); }
.nav-dropdown { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 10px; }
.nav-dropdown a { font-size: .85rem; color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-subtle); padding: 5px 12px; border-radius: 999px; }
.nav-dropdown a:hover { color: var(--accent); border-color: var(--accent); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .main-nav { display: block; position: static; background: transparent; border-bottom: 0; box-shadow: none; }
  .nav-inner { flex-direction: row; align-items: center; gap: 2px; padding: 0; min-height: auto; }
  .nav-item { position: relative; }
  .nav-item > a { padding: 8px 11px; font-size: .92rem; }
  .nav-dropdown {
    display: none; position: absolute; top: 100%; left: 0; z-index: 60;
    background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle); border-radius: 10px;
    box-shadow: var(--shadow); padding: 8px; min-width: 200px; flex-direction: column; gap: 2px;
  }
  .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { display: flex; }
  .nav-dropdown a { border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; font-size: .9rem; }
  .nav-dropdown a:hover { background: var(--accent-soft); }
}

/* ============ Search autocomplete ============ */
.search-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 70;
  max-height: min(420px, 70vh); overflow-y: auto;
  background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle); border-radius: 10px;
  box-shadow: var(--shadow); text-align: left;
}
.sg-group { padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.sg-group:last-child { border-bottom: 0; }
.sg-label { padding: 6px 14px 4px; font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.sg-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; color: var(--text-primary); font-size: .9rem; font-weight: 500; }
.sg-item:hover, .sg-item.active { background: var(--accent-soft); color: var(--text-strong); }
.sg-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-meta { flex: 0 0 auto; font-size: .66rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.sg-all { color: var(--accent); font-weight: 700; }
.sg-all:hover, .sg-all.active { color: var(--text-strong); }

/* ============ Home layout ============ */
main.container { padding-top: 8px; padding-bottom: 64px; }
/* Discovery band — the Trending Categories panel sits below the Top Rankings
   blocks and spans the full container width (latest posts live in the blog
   section; the homepage carries no Latest Lists rail). */

/* ============ Hero (compact) ============ */
/* Headline + category pills on the left, featured post box (image left,
   title + meta right) on the right; stacked into a single column on
   narrow screens. */
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
@media (min-width: 780px) { .hero-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; } }
.hero-copy { min-width: 0; }
.hero-aside { min-width: 0; }
.hero-aside > :first-child { margin-top: 0; }
.hero-eyebrow { color: var(--accent); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; margin: 2px 0 8px; }
.hero-copy h1 { margin: 0 0 10px; }
.hero-sub { color: var(--text-secondary); font-size: .95rem; line-height: 1.55; margin: 0; max-width: 520px; }

.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-card);
  color: var(--text-primary); font-weight: 600; font-size: .84rem; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.pill svg { width: 14px; height: 14px; color: var(--text-secondary); transition: color .15s; }
.pill:hover { color: var(--accent); border-color: var(--accent); }
.pill:hover svg { color: var(--accent); }
.pill-active, .pill-active:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.pill-active svg, .pill-active:hover svg { color: #fff; }

/* Featured post box — one rectangular card: square image slot on the left,
   title, excerpt and meta on the right. Sits in the hero aside. */
.featured-box {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color .2s;
}
.featured-box:hover { border-color: var(--border-strong); }
/* min-height matches the column width, so the slot stays square even when
   the text beside it is short. */
.featured-media { position: relative; display: block; min-height: 200px; background: var(--bg-surface-elevated); overflow: hidden; }
.featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 800; color: var(--noimg-letter); background: linear-gradient(135deg, var(--bg-surface), var(--bg-surface-elevated)); }
.featured-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; min-width: 0; }
.featured-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.featured-label svg { width: 13px; height: 13px; color: var(--rank-gold); }
.featured-title { margin: 0; font-size: 1.02rem; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.featured-title a { color: var(--text-primary); transition: color .15s; }
.featured-title a:hover { color: var(--accent); }
.featured-desc { margin: 0; font-size: .84rem; color: var(--text-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.featured-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--text-secondary); font-size: .74rem; margin-top: auto; padding-top: 8px; }
.featured-meta span { display: inline-flex; align-items: center; gap: 5px; }
.featured-meta svg { width: 12px; height: 12px; flex: 0 0 auto; }
.featured-link { font-size: .82rem; font-weight: 700; margin-top: 6px; color: var(--accent); }
.featured-link:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .featured-box { grid-template-columns: 120px minmax(0, 1fr); }
  .featured-media { min-height: 120px; }
  .featured-title { font-size: .95rem; -webkit-line-clamp: 2; }
}

/* ============ Sections ============ */
.section, .info-section, .faq, .detail-section { margin-top: var(--section-gap); }
.detail-main > .block-card { margin-top: var(--section-gap); }
.home-section { margin-top: var(--section-gap); }
/* One consistent section-heading system: icon · Anton heading · subtle divider
   · optional meta / more link. Shared by every page (home, category, search…). */
.block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.block-head h2 {
  margin: 0; display: flex; align-items: center; gap: 9px;
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-display); font-weight: 400; font-size: 1.3rem;
  letter-spacing: .015em; line-height: 1.15;
}
.block-head h2::after { content: ""; flex: 1 1 24px; min-width: 24px; height: 1px; background: var(--rule); margin-left: 6px; }
.head-ico { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent); }
.section-meta { font-size: .78rem; color: var(--text-secondary); white-space: nowrap; }
.block-more { font-size: .8rem; font-weight: 700; white-space: nowrap; color: var(--text-secondary); }
.block-more:hover { color: var(--accent); }

/* Category chips (category pages) */
.cat-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cat-chip {
  display: inline-flex; align-items: center; padding: 9px 16px;
  border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-card);
  color: var(--text-primary); font-weight: 600; font-size: .88rem;
}
.cat-chip small { display: none; }
.cat-chip:hover { color: var(--accent); border-color: var(--accent); }

/* ============ Cards ============ */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .15s, border-color .15s; }
.card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.card-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--bg-surface-elevated); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.card:hover .card-media img { transform: scale(1.04); }
.card-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 800; color: var(--noimg-letter); background: linear-gradient(135deg, var(--bg-surface), var(--bg-surface-elevated)); }
.card-rank { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--accent); color: #fff; font-weight: 800; font-size: .8rem; border-radius: 6px; padding: 2px 9px; }
.card-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-title { margin: 0; font-size: 1rem; }
.card-title a { color: var(--text-primary); }
.card-title a:hover { color: var(--accent); }
.card-desc, .card-note { margin: 0; font-size: .86rem; color: var(--text-secondary); }

/* ============ RankingTable (ranked blocks with toggleable columns) ============ */
/* Three blocks per row on desktop; per-card container queries below collapse
   the table columns gracefully at narrower card widths. */
.blocks-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 760px) { .blocks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .blocks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.block-card {
  container-type: inline-size;
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius);
  overflow: hidden; transition: border-color .2s;
}
.block-card:hover { border-color: var(--border-strong); }

/* Card head — same metrics as the sidebar panel heads. */
.block-card-head { display: flex; align-items: center; gap: 9px; padding: 12px 16px 10px; }
.block-glyph { flex: 0 0 auto; display: flex; align-items: center; color: var(--accent); }
.block-glyph svg { width: 18px; height: 18px; }
.block-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.block-card-head h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: .015em;
  font-size: 1.12rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.block-meta { font-size: .71rem; color: var(--text-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Shared table spec — every ranking table (main and sidebar alike) uses the
   exact same column rhythm, padding, separators, hover and header treatment. */
.block-cols, .block-row, .side-cols, .side-row { display: flex; align-items: center; }
.block-cols, .side-cols {
  padding: 6px 16px; border-bottom: 1px solid var(--row-line);
  color: var(--text-muted); font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.block-row, .side-row {
  padding: 8px 16px; min-height: var(--row-h); border-bottom: 1px solid var(--row-line);
  color: var(--text-primary); cursor: pointer;
  transition: background-color .14s ease, box-shadow .14s ease;
}
/*
 * THE STRETCHED LINK (ranking rows): each block row is a <div> whose whole
 * surface is one transparent REAL anchor (.block-row-stretch, inset 0,
 * z-index 1) — a native link for the entire row: the browser shows its
 * target in the corner on hover, clicks and keyboard focus need no
 * JavaScript, and its rel/target are in the HTML to inspect. The row's own
 * interactive pieces — the outbound name anchor and the eye anchor (the
 * Overview column) — sit ABOVE it (relative + z-index 2) so their own
 * targets win where they are; an <a> is never nested inside another <a>.
 */
.block-row { position: relative; }
.block-row-stretch {
  position: absolute; inset: 0; z-index: 1;
  color: inherit; text-decoration: none;
}
.block-row .bc-name-link { position: relative; z-index: 2; }
.block-row a.block-eye { position: relative; z-index: 2; }
.block-row-stretch:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Column rhythm — headers and rows share the SAME gap within each table so
   every column edge lines up vertically: fixed-width rank column →
   fixed-size logo container → flexible title → right-aligned actions.
   Main tables: 12px track (rank→logo 10–12, logo→title ≈12). Compact
   sidebar panels keep a tighter 10px track. Rows are 68–76px tall on
   desktop; contents are vertically centered by the shared align-items. */
.block-cols, .block-row { gap: 12px; }
.side-cols, .side-row { gap: 12px; }
.block-row { min-height: var(--row-h-main); }
.side-row { min-height: var(--row-h-side); }
.block-row:last-child, .side-row:last-child { border-bottom: 0; }
.block-row:hover, .side-row:hover { background: var(--bg-hover); color: var(--text-primary); box-shadow: inset 2px 0 0 var(--accent-line); }
.block-row:focus-visible, .side-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Blocks render compact — tighter vertical rhythm than the shared spec
   above (sidebar panels keep theirs): a block keeps ~5 rows visible
   before it scrolls internally; see RankingTable / site.js. */
.block-cols { padding: 5px 14px; }
.block-row { padding: 6px 14px; }
/* Static block rows — "Open item pages from blocks" disabled in the backend
   (Settings → Ranking blocks): the row is plain presentation, not a link.
   No pointer, no hover lift, no accent edge, no emphasis shift on the name. */
.block-row-static { cursor: default; }
.block-row-static:hover { background: none; box-shadow: none; color: var(--text-primary); }
.block-row-static:hover .block-title-text { color: var(--text-primary); }
.block-row-static:hover .bc-chev { color: var(--icon-dim); }
/* Block rows are all-native now (stretched link + real anchors) — the
   pointer comes from the anchors themselves. The rule stays for any
   JS-driven rows other templates may still emit. */
.block-row[data-ext-href], .block-row[data-external-id], .block-row[data-int-href] { cursor: pointer; }
/* Visible feedback while a protected URL resolves server-side — the
   class lands on the protected NAME span (site.js data-external-id). */
.block-row.is-opening, .block-row .bc-name-link.is-opening { opacity: .6; }

/* Scrollable block rows — the backend `block_max_visible_items` setting
   (Admin → Settings → Ranking blocks) caps how many rows stay visible;
   taller blocks scroll inside the card. max-height has a calc() fallback
   (row metrics) that site.js refines to the measured row height, so themes
   and media queries need no JS updates. Fade → card background, shown only
   while the rows actually overflow (is-scrollable, toggled by site.js). */
.block-scroll-wrap { position: relative; }
.block-scroll-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-card));
  opacity: 0; transition: opacity .2s ease;
}
.block-scroll-wrap.is-scrollable::after { opacity: 1; }
.block-rows-scroll {
  max-height: calc(var(--block-vis, 10) * var(--block-row-h, 72px));
  overflow-y: auto;
  /* Deliberately no overscroll-behavior: contain — when the rows reach their
     end, scrolling chains to the page instead of stopping dead. */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.block-rows-scroll::-webkit-scrollbar { width: 8px; }
.block-rows-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.block-rows-scroll::-webkit-scrollbar-track { background: transparent; }

/* Rank badges — gold / silver / bronze for the top three, a subtle neutral
   surface for ranks 4+. One compact size everywhere (20px badge, ~10px bold
   number — 30% down from the previous 28px/14px, sidebar included); scales
   down one more notch on narrow cards/mobile. The 1px hairline border and
   the background sit inside the smaller border-box, so the whole badge —
   bg, border, number — shrank together. Vertically centered by the row
   flex; always secondary to the logo. */
.rk, .bc-rank { flex: 0 0 var(--rk-size); width: var(--rk-size); }
.bc-rank { text-align: center; }
.rk {
  height: var(--rk-size); border-radius: var(--rk-radius); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .63rem; font-variant-numeric: tabular-nums;
  background: var(--rank-n-bg); border: 1px solid var(--border-subtle); color: var(--rank-n-text);
}
.rk-1 { background: var(--rank-gold); border-color: var(--rank-gold-border); color: var(--rank-gold-text); }
.rk-2 { background: var(--rank-silver); border-color: var(--rank-silver-border); color: var(--rank-silver-text); }
.rk-3 { background: var(--rank-bronze); border-color: var(--rank-bronze-border); color: var(--rank-bronze-text); }

/* Logo container — a fixed-size, fully transparent slot in every table
   (36px main, 30px compact): no background, border, outline, radius or
   shadow, so favicons and logos sit directly on the row background while
   every row still aligns perfectly. Artwork priority: uploaded image →
   auto-pulled site favicon → initials placeholder (the fallback always
   renders underneath; site.js hides broken artwork images so the initials
   show instead of a broken-image icon). */
.bc-art {
  position: relative; flex: 0 0 var(--art-size); width: var(--art-size); height: var(--art-size);
}
/* Uploaded cover artwork fills the slot; object-fit keeps the aspect ratio
   (never stretched). */
.bc-art-img {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* site.js hides broken artwork images with the hidden attribute — this rule
   is what makes that work: without it the display:block above would beat
   the browser's [hidden] style and the broken-image icon would keep
   covering the initials placeholder underneath. */
.bc-art-img[hidden] { display: none; }
/* Favicons / website logos (bc-art-ico): object-fit contain with no padding,
   crop, stretch or mask — the source logo keeps its natural shape,
   transparent edges and aspect ratio (circular stays circular). */
.bc-art-img.bc-art-ico { object-fit: contain; }
.bc-art-init {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .88rem; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  color: var(--noimg-letter-sm);
}
/* --- Block-row hover: bigger artwork --- */
/* Hovering a row is the site's main browse gesture: the artwork grows —
   the favicon/logo pops to ~122% with a soft drop shadow. Same cell, no
   layout shift, nothing clips inside the scrollable card. Static rows
   (nothing to click) keep their plain look. (The old hover thumbnail
   reveal was dropped — at this slot size it was too small to see.) */
.bc-art-img {
  transition: transform .18s ease, box-shadow .18s ease;
}
.block-row:not(.block-row-static):hover .bc-art-img {
  transform: scale(1.22);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
@media (prefers-reduced-motion: reduce) {
  .bc-art-img { transition: none; }
  .block-row:not(.block-row-static):hover .bc-art-img { transform: none; }
}
/* Column-header tracks keep the same widths so labels stay aligned. */
.block-cols .bc-art-col { flex: 0 0 var(--art-size); width: var(--art-size); }
.side-cols .sc-art-col { flex: 0 0 var(--art-size-compact); width: var(--art-size-compact); }
/* Compact tables (sidebar panels) use the compact artwork size. */
.side-row .bc-art { flex-basis: var(--art-size-compact); width: var(--art-size-compact); height: var(--art-size-compact); }

/* Initials placeholder shared with other fallbacks (detail hero). */
.thumb-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 800; color: var(--noimg-letter-sm); background: linear-gradient(135deg, var(--bg-surface), var(--bg-surface-elevated)); }

/* Name column — gets all remaining space. The item name is the primary text
   element (≈15px, semibold); where secondary metadata (developer · year) is
   already displayed it sits as a muted ≈12.5px second line. */
.bc-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.bc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.block-title-text { font-weight: 600; font-size: .94rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block-title-meta { font-size: .78rem; color: var(--text-secondary); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block-row:hover .block-title-text { color: var(--text-strong); }
/* External names: clicking the NAME opens the official site in a new tab —
   a real followed <a href> while backlinks are on, a data-ext-href attribute
   opened via JS (with nofollow/noopener) while off; protected names resolve
   server-side (data-external-id). Either way the rest of the row and the eye
   icon stay INTERNAL (see RankingRow). The name gets the accent affordance;
   real <a> names need the pointer back (rows are not links in that state). */
/* The name is a REAL <a> now (the SEO anchor) — the global link color must
   NOT paint it: at rest it stays the row's own text color (white in the
   dark theme, black in the light theme), exactly like it always was, and
   only picks the accent up on hover. */
.block-row .bc-name-link { color: inherit; cursor: pointer; }
.block-row:hover .bc-name-link { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.block-row .bc-name-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* The OVERVIEW column — the eye icon, one real link per row to the item's
   detail page on OUR site (keyboard-native). Its header cell reads
   "Overview" like Name and #, so it is a proper fixed-width column: the
   header (.bc-eye-col in .block-cols) and every row cell share the same
   --eye-col track, keeping the column edges aligned. The eye sits above
   the stretched link (z-index 2) and is the peek-details escape hatch
   even on straight-to-their-site rows. */
.block-cols .bc-eye-col { flex: 0 0 var(--eye-col); width: var(--eye-col); }
.block-eye {
  flex: 0 0 var(--eye-col); width: var(--eye-col);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
}
.block-eye svg { width: 14px; height: 14px; }
.block-row:hover .block-eye { color: var(--accent); }
.block-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* Legacy "external visit" hint (kept for any custom template still using it). */
.block-link-ext { flex: 0 0 auto; display: flex; color: var(--text-secondary); }
.block-link-ext svg { width: 14px; height: 14px; }
.block-row:hover .block-link-ext { color: var(--accent); }
/* Bottom "View all" link (blocks holding more items than they render). */
.block-viewall {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-top: 1px solid var(--row-line);
  font-size: .82rem; font-weight: 700; color: var(--text-secondary);
  transition: color .15s ease, background-color .15s ease;
}
.block-viewall svg { width: 13px; height: 13px; transition: transform .15s ease; }
.block-viewall:hover { color: var(--accent); background: var(--bg-hover); }
.block-viewall:hover svg { transform: translateX(2px); }

/* Auto-pulled favicon lives inside the artwork cell (.bc-art) — see above. */

.block-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: .58rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  padding: 2px 8px 2px 7px; border-radius: 3px;
  color: var(--accent-hover); background: var(--accent-tint); border: 1px solid var(--accent-border);
}
.block-badge::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* Genre / platform / rating / chevron */
.bc-genre { flex: 0 0 120px; max-width: 120px; min-width: 0; font-size: .8rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-plat { flex: 0 0 18px; min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.plat-ico { display: flex; align-items: center; flex: 0 0 auto; }
.plat-ico svg { width: 16px; height: 16px; }
.block-cols .plat-ico svg { width: 13px; height: 13px; }
.plat-label { display: none; min-width: 0; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Wide tables get the platform name next to the icon */
@container (min-width: 640px) {
  .bc-plat { flex: 0 1 110px; }
  .plat-label { display: block; }
}
/* Rating column — identical in every table: tiny star + score, right-aligned,
   tabular numerals; unrated items show a neutral muted dash. */
.bc-rating, .side-rating {
  flex: 0 0 48px; display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  font-weight: 700; font-size: .87rem; font-variant-numeric: tabular-nums;
}
.rate-star { flex: 0 0 auto; width: 10px; height: 10px; color: var(--star); fill: currentColor; stroke: none; }
.bc-chev, .side-chev { flex: 0 0 16px; display: flex; color: var(--icon-dim); }
.bc-chev svg, .side-chev svg { width: 15px; height: 15px; transition: transform .14s ease; }
/* Block rows no longer render the side arrow (it duplicated the eye — the
   Overview column); the rules above stay for the sidebar panels and the
   Appears In card, whose rows still carry one. */
.block-row:hover .bc-chev, .side-row:hover .side-chev { color: var(--accent); }
.block-row:hover .bc-chev svg, .side-row:hover .side-chev svg { transform: translateX(2px); }

/* Responsive column tiers (per-card, never scroll horizontally):
   >= 560px  full table · 440-559px tighter genre · < 440px compact list.
   Badge + artwork scale down one notch on narrow cards (mobile), never
   tiny enough to lose the artwork or cause horizontal overflow. */
@container (max-width: 559px) {
  .bc-genre { flex-basis: 112px; max-width: 112px; font-size: .78rem; }
}
@container (max-width: 439px) {
  .bc-genre, .bc-plat, .block-title-meta { display: none; }
  .block-cols, .block-row { padding: 6px 12px; }
  .rk, .bc-rank, .block-cols .bc-rank { flex: 0 0 var(--rk-size-sm); width: var(--rk-size-sm); }
  .rk { height: var(--rk-size-sm); font-size: .59rem; }
  .bc-art, .block-cols .bc-art-col { flex-basis: var(--art-size-compact); width: var(--art-size-compact); }
  .bc-art { height: var(--art-size-compact); }
  .block-row { min-height: 50px; }
}
@container (max-width: 400px) {
  .block-meta { display: none; }
}
/* Phones: same notch down for the full-width cards. */
@media (max-width: 560px) {
  .rk, .bc-rank, .side-cols .sc-rank { flex: 0 0 var(--rk-size-sm); width: var(--rk-size-sm); }
  .rk { height: var(--rk-size-sm); font-size: .59rem; }
  .bc-art { flex-basis: var(--art-size-compact); width: var(--art-size-compact); height: var(--art-size-compact); }
  .block-cols .bc-art-col { flex-basis: var(--art-size-compact); width: var(--art-size-compact); }
}

/* ============ Side panels (popular / latest lists / trending) ============ */
/* Ranking rows and column headers share the exact spec of the main tables
   (see the shared rules under RankingTable); only the panel chrome and the
   column track widths live here. */
.side-panel { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 10px; }
.side-head h2 {
  margin: 0; display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 400; letter-spacing: .015em; font-size: 1.12rem; line-height: 1.15;
}
.sc-rank { flex: 0 0 var(--rk-size); width: var(--rk-size); text-align: center; }
.sc-title { flex: 1; min-width: 0; }
.sc-rating { flex: 0 0 48px; display: flex; justify-content: flex-end; text-align: right; }
.sc-chev { flex: 0 0 16px; }
.side-title { flex: 1; min-width: 0; font-weight: 600; font-size: .94rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-row:hover .side-title { color: var(--text-strong); }

/* Latest Lists rows (ListCard row variant) + Trending Categories rows —
   non-ranking rows sit slightly denser than the ranking tables. */
.side-row.row-list, .side-row.row-cat { min-height: 48px; }

/* Latest Lists rows */
/* Thumbnail artwork replaces the old index number: the list's #1 item
   image (blocks) or the post's featured image (listicles) sits on top of
   the bc-art-init initials layer, which shows when the image is missing
   or breaks (site.js hides broken .bc-art-img — see the bc-art sweep).
   Same layer classes as the ranking rows, own cell size: 44px rounded. */
.side-row .list-row-art {
  position: relative; flex: 0 0 44px; width: 44px; height: 44px;
  border-radius: 8px; overflow: hidden; flex-shrink: 0;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
}
.list-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.list-row-date { font-size: .71rem; color: var(--text-secondary); }

/* Latest Lists panel — the list body is its own scroll area: the panel keeps
   a fixed footprint in the rail while every row stays reachable. Roughly 8
   rows are visible at once (rows run 53–70px tall); the rest scroll into
   view. Scroll chains outward at the box's end (site convention). */
.side-latest .side-scroll {
  max-height: 540px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.side-latest .side-scroll::-webkit-scrollbar { width: 8px; }
.side-latest .side-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.side-latest .side-scroll::-webkit-scrollbar-track { background: transparent; }

/* Trending Categories rows */
.row-cat .side-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-row-ico {
  flex: 0 0 30px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-secondary);
  transition: color .15s, border-color .15s;
}
.cat-row-ico svg { width: 15px; height: 15px; }
.row-cat:hover .cat-row-ico { color: var(--accent); border-color: var(--accent-border-soft); }
.cat-row-count {
  flex: 0 0 auto; min-width: 26px; text-align: center;
  font-size: .7rem; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 1px 8px;
}

/* ============ Recently Updated Rankings (compact continuation) ============ */
/* Same visual language as the ranking tables: panel, hairline dividers,
   hover lift with the coral left accent, chevron nudge. */
.recent-panel { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; }
.recent-row {
  display: flex; align-items: center; gap: 10px; min-height: var(--row-h); padding: 8px 16px;
  border-bottom: 1px solid var(--row-line); color: var(--text-primary); cursor: pointer;
  transition: background-color .14s ease, box-shadow .14s ease;
}
.recent-row:last-child { border-bottom: 0; }
.recent-row:hover { background: var(--bg-hover); color: var(--text-primary); box-shadow: inset 2px 0 0 var(--accent-line); }
.recent-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.recent-idx { flex: 0 0 24px; width: 24px; text-align: center; font-weight: 700; font-size: .74rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.recent-title { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: .94rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-row:hover .recent-title { color: var(--text-strong); }
.recent-meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: .76rem; white-space: nowrap; }
.recent-meta svg { width: 12px; height: 12px; flex: 0 0 auto; }
.recent-chev { flex: 0 0 16px; display: flex; color: var(--icon-dim); }
.recent-chev svg { width: 15px; height: 15px; transition: transform .14s ease; }
.recent-row:hover .recent-chev { color: var(--accent); }
.recent-row:hover .recent-chev svg { transform: translateX(2px); }
@media (max-width: 560px) { .recent-idx { display: none; } }

/* ============ ListCard tiles (list grids on category / search pages) ============ */
.listcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
.list-card .card-media { aspect-ratio: 16 / 9; }
.list-card .card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-count-badge {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--overlay-bg); border: 1px solid var(--overlay-border);
  color: var(--overlay-text); font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 6px; backdrop-filter: blur(4px);
}
.card-count-badge svg { width: 12px; height: 12px; color: var(--overlay-dim); }
.list-card-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-secondary); font-size: .76rem; margin-top: auto; padding-top: 10px; }
.list-card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.list-card-meta svg { width: 13px; height: 13px; flex: 0 0 auto; }
.list-card-link { font-size: .84rem; font-weight: 700; margin-top: 10px; }

/* ============ Browse Rankings (compact category cards) ============ */
.cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cat-card {
  display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 12px 14px;
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--bg-card); color: var(--text-primary);
  transition: border-color .2s, background .2s;
}
.cat-card:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-hover); }
.cat-card-ico {
  flex: 0 0 36px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  color: var(--accent); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 9px;
  transition: border-color .15s;
}
.cat-card-ico svg { width: 17px; height: 17px; }
.cat-card:hover .cat-card-ico { border-color: var(--accent-border-soft); }
.cat-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cat-card-name { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-card-count { color: var(--text-secondary); font-size: .74rem; }
.cat-card-chev { flex: 0 0 auto; color: var(--icon-dim); display: flex; }
.cat-card-chev svg { width: 14px; height: 14px; transition: transform .15s ease; }
.cat-card:hover .cat-card-chev { color: var(--accent); }
.cat-card:hover .cat-card-chev svg { transform: translateX(2px); }

/* ============ Page head / meta ============ */
.page-head { padding: 26px 0 6px; }
.page-sub { color: var(--text-secondary); font-size: 1.05rem; max-width: 720px; }
.page-hero-img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); margin-top: 16px; }
.meta-line { display: flex; flex-wrap: wrap; gap: 14px; color: var(--text-secondary); font-size: .85rem; margin-bottom: 8px; }
.eyebrow { display: inline-block; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; color: var(--accent); margin-bottom: 10px; }
.page-intro { margin: 18px 0; font-size: 1.05rem; color: var(--text-primary); max-width: 780px; }

/* Scrollable page description/content — limited height with internal
   scrolling so long page bodies don't stretch the page. The bottom fade
   appears only while content actually overflows (toggled by site.js). */
.page-scroll-wrap { position: relative; }
.page-scroll-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-page));
  opacity: 0; transition: opacity .2s ease;
}
.page-scroll-wrap.is-scrollable::after { opacity: 1; }
.page-scroll {
  max-height: min(60vh, 560px);
  overflow-y: auto;
  /* No overscroll-behavior: contain here — chaining is intentional: once the
     box's own scroll reaches its end, the wheel/scroll hands over to the page
     so the pointer never has to leave the box to keep reading. */
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.page-scroll::-webkit-scrollbar { width: 8px; }
.page-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.page-scroll::-webkit-scrollbar-track { background: transparent; }
/* Tall variant (detail Overview): the box is capped at the usable viewport
   height BELOW the sticky site header (64px header + standard 84px offset
   convention, see .site-header / scroll-margin-top) plus breathing room —
   the same usable height the sticky sidebar uses — so the overview never
   extends behind the sticky header or stretches the page; longer content
   scrolls inside the box (same fade/toggle machinery as above). */
.page-scroll-tall { max-height: calc(100vh - 108px); max-height: calc(100svh - 108px); }

/* ============ Breadcrumbs ============ */
.breadcrumbs { padding-top: 16px; font-size: .84rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; color: var(--text-secondary); }
.breadcrumbs li + li::before { content: "›"; margin-right: 6px; color: var(--icon-dim); }
.breadcrumbs a { color: var(--text-secondary); }
.breadcrumbs a:hover { color: var(--accent); }

/* ============ Listicle ============ */
/* Post pages: the hero banner closes the page head, so its bottom padding
   is dropped and the article text starts one clean 16px step below the
   image — matching the 16px step above it (title block → image), instead
   of the stacked 6px + 18px margins that read as odd extra space. */
.listicle .page-head { padding-bottom: 0; }
.listicle .page-intro { margin-top: 16px; }
/* …and the article text below the banner spans the SAME width as the
   banner itself (the full main column), not the 780px reading measure —
   so the text takes as much space as the main image above it. Category
   pages keep their narrower intro. */
.listicle .page-intro { max-width: none; }
/* Post rail: steps down 26px (the page head's top padding) so the Latest
   Lists panel sits level with the post title, not above it. */
.blog-side-post { margin-top: 26px; }
.listicle-items { list-style: none; margin: 24px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.listicle-item { min-width: 0; }
/* Listicle item rows — the same ranking-table language: #rank → artwork
   (compact size) → title + note + chevron. Shares the .rk badge and
   .bc-art cell rules; only the card chrome lives here. */
.li-card { position: relative; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius); background: var(--bg-surface-elevated); box-shadow: var(--shadow); padding: 12px 14px; transition: border-color .2s, transform .2s; }
.li-card:hover, .li-card:focus-visible { border-color: var(--accent-border); transform: translateY(-2px); }
.li-card-rank { flex: 0 0 var(--rk-size); width: var(--rk-size); height: var(--rk-size); border-radius: var(--rk-radius); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; background: var(--bg-card); color: var(--text-primary); font-weight: 800; font-size: .63rem; font-variant-numeric: tabular-nums; }
.li-card-rank.rk-1 { background: var(--rank-gold); border-color: var(--rank-gold-border); color: var(--rank-gold-text); }
.li-card-rank.rk-2 { background: var(--rank-silver); border-color: var(--rank-silver-border); color: var(--rank-silver-text); }
.li-card-rank.rk-3 { background: var(--rank-bronze); border-color: var(--rank-bronze-border); color: var(--rank-bronze-text); }
.li-card .bc-art { flex-basis: var(--art-size-compact); width: var(--art-size-compact); height: var(--art-size-compact); }
.li-card-body { position: static; z-index: auto; margin-top: 0; display: flex; flex-direction: column; gap: 4px; width: auto; min-width: 0; flex: 1; padding: 0; }
.li-card-title { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.3; color: var(--text-primary); }
/* Only the TITLE opens the external site (rest of the card stays internal) */
.li-title-link { cursor: pointer; }
.li-card:hover .li-title-link { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.li-title-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.li-card-note { color: var(--text-secondary); font-size: .84rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.li-card-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--accent); font-weight: 700; font-size: .82rem; }
.li-card-cta svg { width: 14px; height: 14px; transition: transform .2s; }
.li-card:hover .li-card-cta svg { transform: translateX(3px); }
.listicle-body { margin-top: 30px; padding-top: 8px; }

/* ============ Content page — modular detail blocks ============ */
/* Every block below shares the homepage surfaces (--panel cards, --radius,
   hairline --row-line separators, the coral accent and the same hover lift),
   so detail pages read as part of the same product as the homepage. */
.detail-layout { display: block; }
.detail-main { min-width: 0; max-width: 1080px; }

/* --- DetailHero --- */
.detail-hero {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  margin-top: 14px; padding: 20px;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@media (min-width: 900px) {
  .detail-hero { grid-template-columns: 236px minmax(0, 1fr); gap: 24px; }
  .dh-media { aspect-ratio: 3 / 4; }
}
.dh-media {
  position: relative; display: block; aspect-ratio: 21 / 9; overflow: hidden;
  background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle); border-radius: 10px;
}
.dh-media img { width: 100%; height: 100%; object-fit: cover; }
.dh-media .thumb-noimg { font-size: 3rem; }
/* Auto-pulled favicon over the letter placeholder on the detail hero. */
.dh-favicon-wrap {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface-elevated);
}
/* Same as .bc-art-img[hidden]: site.js hides the whole wrap when its favicon
   404s — display:flex would otherwise override the [hidden] attribute. */
.dh-favicon-wrap[hidden] { display: none; }
/* Transparent favicon on the media backdrop — no white chip, padding or
   rounded container around it. */
.dh-favicon-wrap img.dh-favicon { width: 40px; height: 40px; }
.dh-badge {
  position: absolute; z-index: 2; display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 7px;
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: var(--overlay-bg); border: 1px solid var(--overlay-border); color: var(--overlay-text);
  backdrop-filter: blur(4px);
}
.dh-badge-rank { top: 10px; left: 10px; font-size: .8rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.dh-badge-rank.rk-1 { background: var(--rank-gold); border-color: var(--rank-gold-border); color: var(--rank-gold-text); }
.dh-badge-rank.rk-2 { background: var(--rank-silver); border-color: var(--rank-silver-border); color: var(--rank-silver-text); }
.dh-badge-rank.rk-3 { background: var(--rank-bronze); border-color: var(--rank-bronze-border); color: var(--rank-bronze-text); }
.dh-badge-type { bottom: 10px; left: 10px; }
.dh-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dh-body .breadcrumbs { padding-top: 0; font-size: .78rem; }
.dh-title { margin: 0; font-size: clamp(1.85rem, 1.3rem + 2vw, 2.5rem); }
.dh-sub { margin: 0; color: var(--text-secondary); font-size: .98rem; line-height: 1.6; max-width: 640px; }
.dh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .84rem; color: var(--text-secondary); }
.dh-meta-part:not(:last-child)::after, .dh-meta-plats:not(:last-child)::after { content: "·"; margin-left: 14px; color: var(--icon-dim); }
.dh-meta-plats { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dh-plat { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); }
.dh-plat .plat-ico svg { width: 14px; height: 14px; }
.dh-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dh-rating {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 9px;
}
.dh-rating .rate-star { width: 13px; height: 13px; }
.dh-rating .rate-val { font-size: 1.02rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.dh-rating-label { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.dh-rank-note { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--text-secondary); }
.dh-rank-note svg { width: 13px; height: 13px; color: var(--accent); }
.dh-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }

/* --- DetailInfoGrid (Quick Information) --- */
.info-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px; margin: 0;
  background: var(--row-line); border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 640px) { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.info-cell { background: var(--bg-card); padding: 13px 18px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.info-label { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.info-value { margin: 0; font-size: .92rem; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.info-value a { color: var(--accent); }
.info-value a:hover { color: var(--accent-hover); }

/* --- DetailTextBlock --- */
/* Full column width — matches the Quick Information grid (and every other
   detail block), so the overview/additional sections line up edge to edge
   with the linked-list grids; the scroll box (page-scroll) spans the same
   width. Readability of long lines is handled by the block's own gaps. */
.detail-prose { font-size: .96rem; }

/* --- FeatureListBlock --- */
.feature-list {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--row-line); border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 760px) { .feature-list-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature-item {
  display: flex; align-items: flex-start; gap: 11px; min-height: 48px; padding: 12px 16px;
  background: var(--bg-card); transition: background-color .14s ease;
}
.feature-item:hover { background: var(--bg-hover); }
.feature-check {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-top: 2px; border-radius: 6px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border-faint);
}
.feature-check svg { width: 11px; height: 11px; }
.feature-text { font-size: .92rem; font-weight: 500; color: var(--text-primary); line-height: 1.5; }

/* --- ProsConsBlock (quiet green/red, never saturated panels) --- */
.proscons-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .proscons-grid:not(.proscons-single) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proscons-panel { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 16px 18px; }
.proscons-title { margin: 0 0 8px; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.proscons-pros .proscons-title { color: var(--pros); }
.proscons-cons .proscons-title { color: var(--cons); }
.proscons-list { list-style: none; margin: 0; padding: 0; }
.proscons-list li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--row-line); font-size: .9rem; color: var(--text-primary); }
.proscons-list li:last-child { border-bottom: 0; }
.pc-mark { flex: 0 0 auto; display: flex; margin-top: 3px; }
.pc-mark svg { width: 14px; height: 14px; }
.proscons-pros .pc-mark { color: var(--pros); }
.proscons-cons .pc-mark { color: var(--cons); }

/* --- RankingAppearancesBlock (homepage table language, roomier) ---
   The Appears In card is the one FULL-WIDTH ranking card (homepage cards
   are compact, three per row), so its rows get their own roomier rhythm:
   a wider 16px track, a larger 40px thumbnail, a taller 64px row and a
   touch more padding — the badge → thumbnail → title trio breathes.
   Header and rows share every metric, so the columns stay aligned. */
.appears-row, .appears-cols { gap: 16px; }
.appears-row { padding: 8px 16px; min-height: 64px; }
.appears-cols { padding: 6px 16px; }
.appears-row .bc-art, .appears-cols .bc-art-col { flex-basis: 40px; width: 40px; }
.appears-row .bc-art { height: 40px; }
.appears-row .app-cat, .appears-cols .app-cat {
  flex: 0 0 130px; min-width: 0; font-size: .8rem; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appears-row .app-updated, .appears-cols .app-updated {
  flex: 0 0 110px; font-size: .78rem; color: var(--text-secondary); text-align: right;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.appears-cols .app-updated { color: var(--text-muted); }
@container (max-width: 700px) { .appears-row .app-cat, .appears-cols .app-cat { display: none; } }
@container (max-width: 520px) { .appears-row .app-updated, .appears-cols .app-updated { display: none; } }

/* --- RelatedListsBlock (compact cards on the homepage card surfaces) --- */
.rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.rl-card .card-media { aspect-ratio: 16 / 9; }
.rl-card .card-body { padding: 12px 14px 14px; gap: 3px; }
.rl-card .card-title { font-size: .98rem; }
.rl-card .card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rl-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; color: var(--text-secondary); font-size: .76rem; }
.rl-meta span { display: inline-flex; align-items: center; gap: 5px; }
.rl-meta svg { width: 12px; height: 12px; flex: 0 0 auto; }
.rl-link { font-size: .82rem; font-weight: 700; color: var(--accent); margin-top: 10px; }
.rl-card:hover .rl-link { color: var(--accent-hover); }

/* --- RelatedItemsBlock (ranking-row cards, no huge image tiles) --- */
.ri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ri-card {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); color: var(--text-primary);
  transition: border-color .15s, background-color .14s ease, box-shadow .14s ease;
}
.ri-card:hover { background: var(--bg-hover); border-color: var(--border-strong); box-shadow: inset 2px 0 0 var(--accent-line); }
.ri-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Logo container — the same transparent fixed-size slot as the ranking
   tables (no background/border/shadow); the artwork or initials fallback
   sits directly on the card surface. */
.ri-card .bc-thumb {
  flex: 0 0 var(--art-size-compact); width: var(--art-size-compact); height: var(--art-size-compact);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ri-card .bc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ri-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ri-title { font-weight: 700; font-size: .94rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri-card:hover .ri-title { color: var(--text-strong); }
.ri-genre { font-size: .75rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- ComparisonBlock --- */
.cmp-wrap { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow-x: auto; }
.cmp-table { border-collapse: collapse; width: 100%; min-width: 560px; margin: 0; font-size: .88rem; }
.cmp-table th, .cmp-table td { padding: 10px 14px; border-bottom: 1px solid var(--row-line); text-align: left; vertical-align: top; }
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: 0; }
.cmp-table thead th {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .015em; font-size: .92rem;
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap; color: var(--text-primary);
}
.cmp-table thead th a { color: var(--text-primary); }
.cmp-table thead th a:hover { color: var(--accent); }
.cmp-label { width: 120px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.cmp-cur { background: var(--accent-tint-soft); }
.cmp-table thead .cmp-cur { box-shadow: inset 0 2px 0 var(--accent); }
.cmp-val { color: var(--text-primary); }

/* --- ActionLinksBlock --- */
.ext-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.detail-actions .ext-actions { margin-top: 0; }

/* --- TagBlock (homepage pill language) --- */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- MediaBlock --- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.media-item { display: block; border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; background: var(--bg-surface-elevated); transition: border-color .15s; }
.media-item:hover { border-color: var(--border-strong); }
.media-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* --- Optional sticky sidebar (wide desktop only; stacks on tablet/mobile) --- */
@media (min-width: 1280px) {
  .detail-layout.detail-has-side { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
  /* Capped at the viewport with its own scrollbar so a sidebar taller than
     the screen stays fully reachable; children never shrink (same rule as
     the linked-list grids) and scroll chains to the page at the box's end. */
  .detail-layout.detail-has-side .detail-side {
    position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; min-width: 0;
    max-height: calc(100vh - 108px); max-height: calc(100svh - 108px);
    overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  }
  .detail-layout.detail-has-side .detail-side > * { flex-shrink: 0; }
  .detail-layout.detail-has-side .detail-side::-webkit-scrollbar { width: 8px; }
  .detail-layout.detail-has-side .detail-side::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
  .detail-layout.detail-has-side .detail-side::-webkit-scrollbar-track { background: transparent; }
}

/* --- Linked lists (content pages that are the destination of ranking
    blocks — e.g. a "Top X Sites" landing page): every block whose
    "View all" link points at the page renders IN the main column as a
    grid of screenshot tiles (see partials/detail/linked-blocks.php),
    placed right after the Quick Information block. No side rail — the
    lists are the page's main content. --- */
/* 4 tiles per row where the main column is wide (~1080px), 3 on mid
   widths, 2 on phones — auto-fill does it from the available space. */
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
@media (max-width: 480px) { .site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* One tile = one ranked website. The card itself is the link (<a> or a
   JS-activated div — see linked-blocks.php), so it needs display:block,
   its own focus ring and pointer affordances. */
.site-card {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--border-subtle); border-radius: var(--radius);
  background: var(--bg-card); box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.site-card:hover { transform: translateY(-3px); border-color: var(--accent-border-soft); box-shadow: 0 10px 26px rgba(0, 0, 0, .38); }
a.site-card:hover, .site-card[data-ext-href]:hover, .site-card[data-external-id]:hover { cursor: pointer; }
a.site-card:focus-visible, .site-card[data-ext-href]:focus-visible, .site-card[data-external-id]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Cover media: the auto-pulled screenshot fills the tile (16/10). The
   initials layer sits underneath — a failed/broken shot gets hidden by
   site.js (bc-art-img sweep) and the initials + gradient show instead. */
.sc-media {
  display: block; position: relative; aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-surface-elevated));
  overflow: hidden;
}
.sc-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1); transform-origin: center;
  transition: transform .3s ease;
}
.sc-img[hidden] { display: none; } /* beats .sc-img when JS hides a broken shot */
.site-card:hover .sc-img { transform: scale(1.05); }
/* Initials placeholder — centered, muted, never blocks the screenshot
   (it sits behind the <img>). */
.sc-init {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 400; font-size: 2.6rem;
  color: var(--noimg-letter); user-select: none;
}

/* Rank badge — podium colors for the top 3 (same tokens as the ranking
   rows), neutral for the rest. */
.sc-rank {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  min-width: 26px; height: 26px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--rank-n-bg); color: var(--rank-n-text);
  font-size: .78rem; font-weight: 800; line-height: 1;
}
.sc-rank-1 { background: var(--rank-gold); border-color: var(--rank-gold-border); color: var(--rank-gold-text); }
.sc-rank-2 { background: var(--rank-silver); border-color: var(--rank-silver-border); color: var(--rank-silver-text); }
.sc-rank-3 { background: var(--rank-bronze); border-color: var(--rank-bronze-border); color: var(--rank-bronze-text); }

/* Name overlay: a bottom scrim gradient that fades up from transparent —
   deep enough that the white name and the link line always read cleanly
   over any screenshot, while the top of the tile stays untouched so the
   shot itself stays clearly visible. Hover deepens the scrim a touch and
   lays a coral diagonal gradient wash over the whole tile. */
.sc-overlay {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; flex-direction: column; gap: 3px;
  padding: 34px 12px 12px;
  background: linear-gradient(180deg,
    rgba(11, 11, 14, 0) 0%,
    rgba(11, 11, 14, .16) 34%,
    rgba(11, 11, 14, .52) 64%,
    rgba(11, 11, 14, .92) 100%);
  transition: background .25s ease;
}
.sc-name {
  color: #fff; font-size: 1rem; font-weight: 800; line-height: 1.25;
  letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .65);
}
.sc-host {
  display: inline-flex; align-items: center; gap: 4px;
  color: rgba(244, 244, 246, .78); font-size: .72rem; font-weight: 700;
  letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .6);
}
.sc-host svg { width: 11px; height: 11px; flex: 0 0 auto; opacity: .8; }
/* Coral diagonal wash on hover — sits above the screenshot, below the text. */
.site-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, rgba(244, 63, 94, .22) 0%, rgba(11, 11, 14, 0) 55%);
  transition: opacity .25s ease;
}
.site-card:not(.site-card-static):hover::after, .site-card:not(.site-card-static):focus-visible::after { opacity: 1; }
.site-card:not(.site-card-static):hover .sc-overlay {
  background: linear-gradient(180deg,
    rgba(11, 11, 14, 0) 0%,
    rgba(11, 11, 14, .22) 32%,
    rgba(11, 11, 14, .6) 62%,
    rgba(11, 11, 14, .96) 100%);
}

/* Visit affordance — appears bottom-right on hover (never blocks the
   name on touch, where it simply never shows). */
.sc-visit {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  color: #fff; opacity: 0; transform: translateX(4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.sc-visit svg { width: 13px; height: 13px; }
.site-card:hover .sc-visit, .site-card:focus-visible .sc-visit { opacity: .92; transform: translateX(0); }

/* Static tiles (internal links disabled for items without an external
   URL) never pretend to be clickable. */
.site-card-static:hover { transform: none; border-color: var(--border-subtle); box-shadow: var(--shadow); }

@media (max-width: 480px) {
  .sc-rank { min-width: 22px; height: 22px; padding: 0 6px; font-size: .7rem; border-radius: 6px; top: 8px; left: 8px; }
  .sc-visit { display: none; }
  .sc-name { font-size: .86rem; }
  .sc-overlay { padding: 22px 10px 10px; }
}

/* Reviews (rendered only when enabled) */
.review { border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px; background: var(--bg-card); }
.review-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; font-size: .95rem; }
.stars { color: var(--rank-gold); letter-spacing: 2px; }
.review-body { font-size: .92rem; max-width: 780px; }

.btn-ico { width: 15px; height: 15px; vertical-align: -2px; margin-left: 2px; }

/* ============ FAQ ============ */
/* Accordion rows inside a single panel — the same hairline separators,
   row heights and hover treatment as the ranking tables. */
.faq-panel { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; }
.faq-item { border-bottom: 1px solid var(--row-line); background: transparent; overflow: hidden; }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
  cursor: pointer; padding: 13px 44px 13px 16px; font-weight: 600; font-size: .94rem;
  min-height: 48px; position: relative; list-style: none;
  transition: background-color .14s ease, box-shadow .14s ease, color .14s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-item summary:hover { color: var(--accent); background: var(--bg-hover); box-shadow: inset 2px 0 0 var(--accent-line); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq-answer { padding: 2px 16px 14px; color: var(--text-secondary); font-size: .92rem; max-width: 780px; }

/* ============ Search ============ */
.search-form { display: flex; gap: 8px; margin: 14px 0; max-width: 560px; }
.search-form input { flex: 1; border: 1px solid var(--field-border); border-radius: 10px; padding: 10px 16px; font-size: .95rem; outline: none; min-height: 44px; background: var(--field-bg); color: var(--field-text); }
.search-form input::placeholder { color: var(--field-placeholder); }
.search-form input:focus { border-color: var(--accent); }
.search-count { color: var(--text-secondary); font-size: .92rem; }
.top-result { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--accent-border); border-radius: var(--radius); color: var(--text-primary); transition: border-color .15s; }
.top-result:hover { border-color: var(--accent); color: var(--text-primary); }
.top-result-flag { flex: none; background: var(--accent); color: #fff; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; }
.top-result-title { min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-result-meta { margin-left: auto; flex: none; color: var(--text-secondary); font-size: .8rem; font-weight: 600; }
.top-result svg { width: 16px; height: 16px; flex: none; color: var(--text-secondary); }
.head-count { color: var(--text-secondary); font-weight: 600; font-size: .85em; }
.search-explore { border-top: 1px solid var(--border-subtle); padding-top: 20px; }
.search-explore-lists { margin-top: 16px; }
.empty-note { color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 16px; }

/* ============ Pagination ============ */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; align-items: center; }
.pagination a, .pagination .current { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border-subtle); font-size: .9rem; font-weight: 600; color: var(--text-primary); background: var(--bg-card); }
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============ Info section / error ============ */
.info-section { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 24px 26px; max-width: 920px; margin-top: var(--section-gap); }
/* Homepage info band ("How we rank") spans the full container width —
   the 920px cap above left its right half empty on wide screens. */
.info-section.home-info { max-width: none; }
.info-section h2 {
  margin-top: 0; font-family: var(--font-display); font-weight: 400;
  letter-spacing: .015em; font-size: 1.4rem;
}
.info-section .page-scroll-wrap::after { background: linear-gradient(to bottom, transparent, var(--bg-surface)); }
.error-head { text-align: center; padding-top: 48px; }
.error-code { font-size: 4rem; font-weight: 800; margin: 0; line-height: 1; color: #6d1b2c; }
.error-home { text-align: center; margin-top: 18px; }
.error-head + .search-form { margin-left: auto; margin-right: auto; }

/* ============ Blog ============ */
.blog-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.blog-main { min-width: 0; }
.blog-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1280px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  /* Sticky rail, capped at the viewport with its own scrollbar (same rule
     as the detail pages) so the Latest Lists panel stays in view while the
     long article scrolls past. */
  .blog-side {
    position: sticky; top: 84px;
    max-height: calc(100vh - 108px); max-height: calc(100svh - 108px);
    overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  }
  .blog-side > * { flex-shrink: 0; }
  .blog-side::-webkit-scrollbar { width: 8px; }
  .blog-side::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
  .blog-side::-webkit-scrollbar-track { background: transparent; }
}

/* --- Blog hero --- */
.blog-head { padding: 22px 0 8px; }
.blog-hero {
  position: relative; overflow: hidden;
  margin-top: 12px; padding: 30px 32px 28px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius);
  background:
    radial-gradient(860px 340px at calc(100% - 30px) -110px, var(--accent-tint), transparent 72%),
    linear-gradient(165deg, var(--bg-card), var(--bg-surface) 88%);
}
.blog-hero::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
}
.blog-hero .eyebrow { margin: 0 0 10px; }
.blog-hero h1 { margin: 0 0 8px; font-size: clamp(2rem, 1.35rem + 2.4vw, 2.8rem); }
.blog-hero .page-sub { margin: 0; max-width: 680px; }
.blog-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.blog-hero-meta .pill { background: var(--bg-page); }
.blog-hero-meta .pill svg { color: var(--accent); }
@media (max-width: 560px) {
  .blog-hero { padding: 22px 20px 20px; margin-top: 8px; }
  .blog-hero-meta .pill { padding: 6px 11px; font-size: .78rem; }
}

/* --- Featured post (blog top story) --- */
.post-feature { display: grid; grid-template-columns: minmax(0, 1fr); }
.post-feature .card-media { aspect-ratio: 16 / 10; }
.post-feature-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px 24px 22px; }
.post-flag {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  color: var(--accent); font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.post-flag svg { width: 13px; height: 13px; }
.post-feature-title { margin: 0; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.55rem); line-height: 1.28; letter-spacing: -.01em; }
.post-feature-title a { color: var(--text-primary); transition: color .15s; }
.post-feature-title a:hover { color: var(--accent); }
.post-feature-desc {
  margin: 0; color: var(--text-secondary); font-size: .92rem; line-height: 1.62;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-feature .list-card-meta { margin-top: auto; padding-top: 12px; }
@media (min-width: 820px) {
  .post-feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .post-feature .card-media { aspect-ratio: auto; }
}
@media (max-width: 560px) {
  .post-feature-body { padding: 16px 18px 18px; gap: 8px; }
}

/* --- Blog post grid --- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; }
.blog-grid .card-body { padding: 14px 16px 18px; }
.blog-grid .card-title { font-size: 1.02rem; line-height: 1.35; }

.empty-state { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 40px 24px; text-align: center; }
.empty-state .empty-title { font-weight: 800; font-size: 1.05rem; margin: 0 0 6px; color: var(--text-primary); }
.empty-state .muted { color: var(--text-secondary); font-size: .9rem; margin: 0; }

/* ============ Footer ============ */
.site-footer { border-top: 1px solid var(--border-subtle); background: var(--footer-bg); margin-top: 56px; padding: 34px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } }
.footer-logo { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; font-size: 1.15rem; }
.footer-tagline { color: var(--text-secondary); font-size: .88rem; max-width: 320px; }
.site-footer h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-meta); margin-bottom: 9px; }
.site-footer nav { display: flex; flex-direction: column; gap: 5px; }
.site-footer nav a { color: var(--text-secondary); font-size: .88rem; }
.site-footer nav a:hover { color: var(--text-primary); }
.footer-bottom { display: flex; align-items: center; gap: 16px; border-top: 0; margin-top: 32px; padding-top: 18px; color: var(--text-secondary); font-size: .84rem; text-align: center; }
.footer-bottom::before, .footer-bottom::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.footer-bottom span { white-space: nowrap; }

@media (max-width: 560px) {
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .listcard-grid { grid-template-columns: 1fr; gap: 14px; }
  .header-search { width: auto; flex: 1; min-width: 0; }
  .header-cta { padding: 8px 12px; }
  .cat-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .hero-row { gap: 16px; }
  .section, .home-section, .info-section, .detail-section { margin-top: 32px; }
  .detail-main > .block-card { margin-top: 32px; }
  .detail-hero { padding: 14px; gap: 14px; }
  .rl-grid { grid-template-columns: 1fr; }
  .ri-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ============ Lightbox (listicle images + screenshot galleries) ============ */
/* Images collected by site.js — a .listicle article's hero banner + prose
    images, and the .media-item gallery tiles — get the zoom cursor;
    clicking one opens the overlay below. */
.lb-zoom { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 56px 64px;
  background: rgba(8, 8, 10, .92);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: min(94vw, 1440px); max-height: calc(100vh - 280px); max-height: calc(100svh - 280px);
  object-fit: contain; border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
  background: var(--bg-surface-elevated);
}
.lightbox-caption {
  max-width: min(80vw, 720px); text-align: center;
  color: var(--li-card-sub); font-size: .88rem; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis;
}
.lightbox-count { color: var(--overlay-dim); font-variant-numeric: tabular-nums; }
/* Filmstrip — every image in the set as a thumbnail below the main image.
   The active one is marked (accent border, full opacity) and auto-centered
   by site.js as you navigate; clicking a thumbnail jumps to that image.
   Auto side margins center the strip when it fits and collapse to 0 when
   it overflows, so the row scrolls instead of clipping the first thumbs. */
.lightbox-thumbs {
  display: flex; align-items: center; gap: 8px;
  max-width: min(94vw, 1080px);
  padding: 4px;
  overflow-x: auto; overscroll-behavior-x: contain;
  /* Scrollbar hidden (still scrolls: wheel/touch/drag + the auto-center);
     the thumb track looked noisy under the image. */
  scrollbar-width: none;
}
.lightbox-thumbs[hidden] { display: none; }
.lightbox-thumbs::-webkit-scrollbar { display: none; }
.lightbox-thumb {
  flex: 0 0 auto; width: 76px; aspect-ratio: 16 / 10; margin: 0 auto;
  padding: 0; border: 1px solid var(--overlay-border); border-radius: 6px;
  overflow: hidden; background: var(--bg-surface-elevated);
  opacity: .45; cursor: pointer;
  transition: opacity .15s ease, border-color .15s ease;
}
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox-thumb:hover { opacity: .8; }
.lightbox-thumb.active { opacity: 1; border-color: var(--accent); }
.lightbox-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lightbox-close, .lightbox-nav {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--overlay-border); background: var(--overlay-bg-soft);
  color: var(--overlay-text); backdrop-filter: blur(4px);
  font-size: 1.15rem; line-height: 1; cursor: pointer; user-select: none;
  transition: border-color .15s ease, color .15s ease;
}
.lightbox-close { top: 20px; right: 20px; }
.lightbox-close:hover, .lightbox-nav:hover { border-color: var(--accent); color: var(--accent); }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-nav[hidden] { display: none; }
@media (max-width: 560px) {
  .lightbox { padding: 48px 12px; }
  /* Arrows stay vertically centered (a bottom row would collide with the filmstrip). */
  .lightbox-nav { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-img { max-height: calc(100vh - 300px); max-height: calc(100svh - 300px); }
  .lightbox-thumb { width: 54px; }
  .lightbox-thumbs { gap: 6px; }
}