/* AUTO-GENERATED from public/css/*.css by `npm run build:css` — DO NOT EDIT THIS FILE.
   Edit the matching partial under public/css/ and re-run; the gate (css:check) enforces it. */
/* ════════════════════════════════════════════════════════════════
   enkez · design system
   - Twitter/Reddit-style single-column feed
   - Dark + light theme (switched via data-theme attr)
   - Platform accent colors (reddit / youtube / eksi / telegram / donanimhaber / onedio / google trends)
   ════════════════════════════════════════════════════════════════ */

:root {
  --reddit: #ff4500;
  --reddit-soft: #ff6a33;
  --upvote: #22c55e; /* D-GF-2 upvote */
  --downvote: #ef4444; /* D-GF-2 downvote (dark); light override below — theme-aware + AA */
  --youtube: #ff0033;
  --youtube-soft: #ff3355;
  --eksi: #81c14b;
  --eksi-text: #81c14b; /* D-GF-4 body ref: dark AA 8.5:1 */
  --eksi-soft: #97d362;
  --telegram: #2aabee;
  --telegram-soft: #4dbcf0;
  --donanimhaber: #fc6703;
  --donanimhaber-soft: #ff8c3a;
  --onedio: #f5f5f5;
  --onedio-soft: #ffffff;
  --onedio-ink: #111111; /* onedio primary button text: white background → black text (dark) */
  --googletrends: #a855f7;
  --googletrends-soft: #c084fc;
  /* Region/source expansion (2026-07-13): new platform accent colors.
     All are saturated enough in both themes — no onedio-style override needed. */
  --haber: #e11d48;
  --haber-soft: #f43f5e;
  --teknoloji: #06b6d4;
  --teknoloji-soft: #22d3ee;
  --spor: #16a34a;
  --spor-soft: #22c55e;
  --hackernews: #ff6600;
  --hackernews-soft: #ff8533;
  --buzzfeed: #ee3322;
  --buzzfeed-soft: #ff5544;
  --boredpanda: #eab308;
  --boredpanda-soft: #facc15;
  --mastodon: #6364ff;
  --mastodon-soft: #8183ff;
  --ninegag: #14b8a6;
  --ninegag-soft: #2dd4bf;
  /* Arabic region sources (2026-07-14): youtube-ar/googletrends-ar share the base
     platform's color ([data-platform] mapping below). */
  --akhbar: #b91c1c;
  --akhbar-soft: #ef4444;
  --taqnia: #0ea5e9;
  --taqnia-soft: #38bdf8;
  --riyada: #15803d;
  --riyada-soft: #4ade80;
  --fann: #c026d3;
  --fann-soft: #e879f9;
  /* Spanish region sources (2026-07-14): youtube-es/googletrends-es share the base
     platform's color ([data-platform] mapping below). */
  --noticias: #ea580c;
  --noticias-soft: #fb923c;
  --tecnologia: #2563eb;
  --tecnologia-soft: #60a5fa;
  --deportes: #059669;
  --deportes-soft: #34d399;
  --farandula: #db2777;
  --farandula-soft: #f472b6;
  /* German region sources (2026-07-14): youtube-de/googletrends-de share the base
     platform's color ([data-platform] mapping below). */
  --nachrichten: #dc2626;
  --nachrichten-soft: #f87171;
  --technik: #0891b2;
  --technik-soft: #22d3ee;
  --sport: #65a30d;
  --sport-soft: #a3e635;
  --promis: #9333ea;
  --promis-soft: #c084fc;
  /* Russian region sources (2026-07-14): youtube-ru/googletrends-ru share the base
     platform's color ([data-platform] mapping below). */
  --novosti: #e11d48;
  --novosti-soft: #fb7185;
  --tehnologii: #4f46e5;
  --tehnologii-soft: #818cf8;
  --sport-ru: #22c55e;
  --sport-ru-soft: #86efac;
  --zvezdy: #a855f7;
  --zvezdy-soft: #d8b4fe;
  /* Global region sources (2026-07-14): youtube-global/googletrends-global share the base
     platform's color ([data-platform] mapping below). */
  --worldnews: #b91c1c;
  --worldnews-soft: #f87171;
  --popculture: #db2777;
  --popculture-soft: #f9a8d4;
  --sports: #16a34a;
  --sports-soft: #86efac;
  --technews: #0284c7;
  --technews-soft: #7dd3fc;
  --bluesky: #1185fe;
  --bluesky-soft: #74b7ff;
  /* Curated X posts (2026-07-19): monochrome X brand — white in dark (the
     onedio pattern), black in the light-theme override below. */
  --x: #e7e9ea;
  --x-soft: #ffffff;
  --x-ink: #111111; /* x primary button text: white background → black text (dark) */

  --radius-lg: 18px;
  --radius: 14px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  /* Missing-token cleanup (2026-07-02): the three below were in use but UNDEFINED →
     var() was treated as invalid and background/shadow/glow SILENTLY disappeared (the ⋮ menu
     transparency was in this class). Bound to --accent/--text, so they are theme-aware. */
  --hover-bg: color-mix(in srgb, var(--text) 8%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 28%, transparent);
  /* Mobile Reddit view: top-level comment separator strip. In dark it is the page
     background (dark band, as in the reference image); in light --bg stays too close
     to white (1.06:1, invisible) so a distinct gray override is applied below. */
  --comment-strip: var(--bg);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.18);
  --container: 720px;
  --container-wide: 980px;

  --ease: cubic-bezier(0.32, 0.72, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.14s;
  --t: 0.22s;
  --t-slow: 0.42s;

  --header-h: 68px;
}

:root,
[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0a0a0c;
  --bg-elevated: #0e0e11;
  --surface: #131318;
  --surface-2: #1a1a20;
  --surface-hover: #1f1f26;
  --surface-active: #25252d;
  --border: #25252d;
  --border-strong: #36363f;
  --border-soft: #1d1d23;

  --text: #f5f5f7;
  --text-muted: #a1a1aa;
  --text-dim: #6f6f78;
  --bn-inactive: #8a8a93; /* D-GF-5 nav inactive label: dark AA 5.3:1 */
  --text-faint: #4a4a52;

  --accent: #f5f5f7;
  --accent-contrast: #0a0a0c;

  --danger: #f87171;
  --warning: #fbbf24;
  --success: #4ade80;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);

  --header-bg: rgba(10, 10, 12, 0.78);
  --shimmer-from: #131318;
  --shimmer-to: #1c1c22;
  --kbd-bg: #1f1f26;
}

[data-theme='light'] {
  color-scheme: light;
  --bg: #f7f7f8;
  --bg-elevated: #ffffff;
  /* Onedio: monochrome black — light theme (dark uses the white values above) */
  --onedio: #111111;
  --onedio-soft: #333333;
  /* Curated X posts: monochrome black — light theme (dark uses the white values above) */
  --x: #0f1419;
  --x-soft: #536471;
  --x-ink: #ffffff; /* light: black background → white text */
  --onedio-ink: #ffffff; /* light: black background → white text (existing look preserved) */
  --downvote: #dc2626; /* D-GF-2 downvote (light): red, AA */
  --comment-strip: #e9e9ee; /* Mobile comment strip (light): gray band distinct from white surface */
  --surface: #ffffff;
  --surface-2: #f1f1f3;
  --surface-hover: #f7f7f8;
  --surface-active: #ececef;
  --border: #e6e6ea;
  --border-strong: #c8c8d0;
  --border-soft: #efeff2;

  --text: #0e0e12;
  --text-muted: #4f4f57;
  --text-dim: #7d7d86;
  --bn-inactive: #6c6c74; /* D-GF-5 nav inactive label: light AA 5.2:1 */
  --eksi-text: #3f7d1f; /* D-GF-4 body ref: light AA ~5:1 (Eksi green #81c14b fails at 2.2:1) */
  --text-faint: #b4b4bc;

  --accent: #0e0e12;
  --accent-contrast: #ffffff;

  --danger: #dc2626;
  --warning: #b45309;
  --success: #16a34a;

  --shadow-sm: 0 1px 2px rgba(15, 15, 25, 0.04);
  --shadow: 0 4px 18px rgba(15, 15, 25, 0.06);
  --shadow-lg: 0 12px 36px rgba(15, 15, 25, 0.1);

  --header-bg: rgba(255, 255, 255, 0.82);
  --shimmer-from: #eef0f3;
  --shimmer-to: #e3e6ea;
  --kbd-bg: #ececef;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* The HTML `hidden` attribute must always hide — CSS display rules must not override it */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  /* Kill the mobile browser's default blue tap-flash overlay app-wide (inherited
     property). Intentional feedback stays: :active/:hover, :focus-visible outline,
     and the active-tab accent (aria-current) are all explicit CSS, unaffected. */
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    background var(--t) var(--ease),
    color var(--t) var(--ease);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  font-feature-settings: inherit;
}
input,
select,
textarea {
  font-family: inherit;
  color: inherit;
}

kbd {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72em;
  background: var(--kbd-bg);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  color: var(--text-muted);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute;
  /* Horizontal off-screen (left:-9999px) inflates scrollWidth in RTL and spawns a
     horizontal scrollbar → use direction-independent vertical hiding. */
  left: 12px;
  top: -100px;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 200;
}
.skip-link:focus {
  top: 12px;
}

::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text);
}

.container {
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 0 18px;
}

/* ─── 3-column layout (left forum · feed · right placeholder) ───
   Right panel was removed — an invisible placeholder stands in so the feed
   stays horizontally centered (otherwise it would shift right when only the left panel is filled). */
.layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, var(--container)) minmax(280px, 1fr);
  gap: 22px;
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 18px 0;
  align-items: start;
  flex: 1;
}

/* Right slot is now an invisible placeholder — it only holds grid space */
.side-panel-placeholder {
  /* Sticky guest panel: the grid cell must stretch to the row (feed) height so the
     .guest-cta inside (position: sticky) has room to slide. If the cell stays card-sized
     sticky does not work — the card would scroll along with the feed. #guestPanel is hidden after login. */
  align-self: stretch;
}

.layout .main {
  padding: 4px 0 48px;
}

.side-panel {
  position: sticky;
  top: calc(var(--header-h) + 12px);
  height: calc(100vh - var(--header-h) - 24px);
  max-height: calc(100vh - var(--header-h) - 24px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.side-panel::-webkit-scrollbar {
  width: 6px;
}
.side-panel::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}
.side-panel::-webkit-scrollbar-track {
  background: transparent;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.panel + .panel {
  margin-top: 14px;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.panel-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  flex: 1;
}

.panel-actions {
  display: inline-flex;
  gap: 4px;
}

.icon-btn-sm {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--t-fast) var(--ease);
}

.icon-btn-sm:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.icon-btn-sm.primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.icon-btn-sm.primary:hover {
  filter: brightness(1.08);
}

.panel-body {
  padding: 10px 12px 14px;
}

.panel-empty {
  padding: 22px 10px;
  text-align: center;
  font-size: 0.83rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.panel-empty.small {
  padding: 14px 6px;
  font-size: 0.78rem;
}
/* ─── Header ─── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
  transition:
    background var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 12px;
  padding-bottom: 12px;
  max-width: 1680px; /* same as layout: let items spread to the edges */
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-right: auto;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--reddit) 0%, var(--youtube) 50%, var(--eksi) 100%);
  color: #fff;
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease);
}

.brand:hover .brand-mark {
  transform: rotate(-6deg) scale(1.06);
}

/* Mobile row-2 logo mark — hidden on desktop; visible next to the search at ≤720px. */
.brand-mark-mobile {
  display: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}

.logo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text);
  display: inline-flex;
}

/* "en" plain, "kez" warm gradient — visual break in the wordmark */
.logo-en {
  color: var(--text);
}
.logo-kez {
  background: linear-gradient(135deg, var(--reddit) 0%, var(--youtube) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.tagline {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Guest (not logged in) header actions: theme + Login + Signup.
   Shares the same top-right corner as #profileMenu (mutually exclusive). */
.guest-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* D-BUG-3 · Auth flash guard: when a session hint exists (theme-bootstrap <html data-auth-pending>)
   guest actions are hidden before paint → no 1-second "Log in" flash on refresh.
   visibility (not display): header height/alignment does not shift. auth.js removes the
   attribute once restore resolves (theme-bootstrap has a 4 s failsafe if the bundle fails). */
html[data-auth-pending] .guest-actions {
  visibility: hidden;
}
/* Login + Signup buttons EQUAL size + aligned with the theme icon button (34px).
   btn-primary/btn-link carry different padding+font, so they are normalized here. */
.guest-actions .btn-primary,
.guest-actions .btn-link {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
}
/* Compact on narrow screens — still equal size. */
@media (max-width: 560px) {
  .guest-actions {
    gap: 4px;
  }
  .guest-actions .btn-primary,
  .guest-actions .btn-link {
    height: 32px;
    padding: 0 11px;
    font-size: 0.76rem;
  }
  /* Compact header icons: with the always-visible help "?" the guest row
     (brand + ? + Sign up + Log in + theme) overflows onto the wordmark at
     ≤368px in es/de — 30px icons + a tighter gap recover the width. */
  .header-right.header-actions {
    gap: 4px;
  }
  .header-actions .icon-btn {
    width: 30px;
    height: 30px;
  }
  .header-actions .icon-btn svg {
    width: 15px;
    height: 15px;
  }
}
/* ≤380px: the es/de guest header is the tightest layout in the app —
   squeeze the guest text buttons further so everything still clears the brand. */
@media (max-width: 380px) {
  .guest-actions .btn-primary,
  .guest-actions .btn-link {
    padding: 0 8px;
    font-size: 0.72rem;
  }
}

.health {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--t) var(--ease);
}

.health:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.health-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
  position: relative;
}

.health-dot[data-state='ok'] {
  background: var(--success);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}
.health-dot[data-state='stale'] {
  background: var(--warning);
}
.health-dot[data-state='error'] {
  background: var(--danger);
}
.health-dot[data-state='loading'] {
  background: var(--text-faint);
  animation: blink 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px transparent;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

.icon-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--t) var(--ease);
  position: relative;
}

.icon-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
  transform: translateY(-1px);
}

.icon-btn:active {
  transform: translateY(0);
  background: var(--surface-active);
}
.icon-btn.spinning svg {
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* ─── Feed toolbar (controls above the content) ─── */
.feed-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}

.view-switch {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.view-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
}

.view-switch-btn:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.view-switch-btn.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.view-switch-btn svg {
  flex-shrink: 0;
}
.view-switch-btn.is-active svg {
  opacity: 1;
}

/* ─── "Global" button — adds/removes international content in the country feed
   (aria-pressed toggle; host [hidden] while the home region is global) ─── */
.region-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
}

.region-toggle:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.region-toggle.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.region-toggle svg {
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .region-toggle {
    padding: 6px 9px;
    font-size: 11.5px;
  }
}

/* ─── Subbar ─── */
.subbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  max-width: 1680px; /* same as header: spread to the edges */
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  min-width: 220px;
  max-width: 540px; /* don't let it get too wide */
  margin-right: auto; /* push tabs + sort to the right edge */
}

.search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-dim);
  pointer-events: none;
  transition: color var(--t) var(--ease);
}

.search-input {
  width: 100%;
  height: 38px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 44px 0 38px;
  font-size: 0.88rem;
  color: var(--text);
  transition: all var(--t) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.search-input::placeholder {
  color: var(--text-dim);
}
.search-input:hover {
  border-color: var(--border-strong);
}

.search-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.search-input:focus + .search-kbd {
  opacity: 0;
}
.search-wrap:has(.search-input:focus) .search-icon {
  color: var(--text);
}

.search-kbd {
  position: absolute;
  right: 10px;
  opacity: 1;
  transition: opacity var(--t) var(--ease);
  pointer-events: none;
}

.tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--surface);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t) var(--ease);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c, var(--text-dim));
}

.tab:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.tab.active {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.tab.active .tab-dot {
  outline: 1.5px solid var(--accent-contrast);
  outline-offset: 1px;
}

/* ─── Main ─── */
.main {
  flex: 1;
  padding: 22px 18px 64px;
}

.status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 0.83rem;
  color: var(--warning);
}

.status-bar strong {
  color: var(--text);
}

.status-bar-close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

.status-bar-close:hover {
  background: color-mix(in srgb, var(--warning) 15%, transparent);
}

.empty-state {
  text-align: center;
  padding: 80px 16px 100px;
  color: var(--text-dim);
}

.empty-state h2 {
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 6px;
  font-weight: 600;
}

.empty-state p {
  font-size: 0.88rem;
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.5;
}

.error-state {
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  background: color-mix(in srgb, var(--danger) 6%, transparent);
  border-radius: var(--radius);
  padding: 28px 22px;
  color: var(--danger);
  text-align: center;
  font-size: 0.92rem;
}

.error-state small {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.skeleton-feed {
  display: grid;
  gap: 10px;
}

.skeleton-card {
  height: 116px;
  border-radius: var(--radius);
  background: linear-gradient(
    90deg,
    var(--shimmer-from) 0%,
    var(--shimmer-to) 50%,
    var(--shimmer-from) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
  border: 1px solid var(--border-soft);
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* ─── Feed fresh pill (feed-fresh.js) ─── */
/* Deferred-refresh invitation: appears under the header once the local timer
   is due; click = scroll top + reload. z 70 keeps it BELOW the drawer (90),
   DM sheet (95) and settings page (955) so overlays cover it naturally.
   bars-hidden (mobile scroll) pins it to the viewport top instead. */
.feed-fresh-pill {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  /* Brand gradient — same ramp as the wordmark's "kez" (02-header.css .logo-kez):
     the enkez counterpart of X's brand-blue pill. */
  background: linear-gradient(135deg, var(--reddit) 0%, var(--youtube) 90%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  z-index: 70;
  box-shadow: 0 6px 18px rgb(255 51 51 / 0.35);
  animation: ffp-in 0.22s ease;
}
.feed-fresh-pill svg {
  width: 16px;
  height: 16px;
}
.feed-fresh-pill:hover {
  filter: brightness(1.08);
}
@keyframes ffp-in {
  from {
    opacity: 0;
    transform: translate(-50%, -8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .feed-fresh-pill {
    animation: none;
  }
}
body.bars-hidden .feed-fresh-pill {
  top: 12px;
}
/* ─── Feed & Card ─── */
.feed {
  display: grid;
  gap: 10px;
}

.card {
  --pc: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--t) var(--ease),
    background var(--t) var(--ease),
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
  animation: cardIn 0.42s var(--ease-out) both;
  scroll-margin-top: calc(var(--header-h) + 12px);
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feed .card:nth-child(1) {
  animation-delay: 0s;
}
.feed .card:nth-child(2) {
  animation-delay: 0.03s;
}
.feed .card:nth-child(3) {
  animation-delay: 0.06s;
}
.feed .card:nth-child(4) {
  animation-delay: 0.09s;
}
.feed .card:nth-child(5) {
  animation-delay: 0.12s;
}
.feed .card:nth-child(6) {
  animation-delay: 0.15s;
}
.feed .card:nth-child(7) {
  animation-delay: 0.18s;
}
.feed .card:nth-child(8) {
  animation-delay: 0.2s;
}
.feed .card:nth-child(n + 9) {
  animation-delay: 0.22s;
}

.card:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  box-shadow: var(--shadow-sm);
}

.card.is-focused {
  border-color: var(--pc);
  background: var(--surface-hover);
  box-shadow:
    0 0 0 1px var(--pc) inset,
    var(--shadow);
}

.card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--pc);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}

.card:hover::before,
.card.is-open::before,
.card.is-focused::before {
  opacity: 1;
}

[data-platform='reddit'] {
  --pc: var(--reddit);
}
[data-platform='youtube'] {
  --pc: var(--youtube);
}
[data-platform='eksi'] {
  --pc: var(--eksi);
}
[data-platform='telegram'] {
  --pc: var(--telegram);
}
[data-platform='donanimhaber'] {
  --pc: var(--donanimhaber);
}
[data-platform='onedio'] {
  --pc: var(--onedio);
  --pc-ink: var(--onedio-ink);
}
[data-platform='googletrends'] {
  --pc: var(--googletrends);
}
[data-platform='news-tr'] {
  --pc: var(--haber);
}
[data-platform='tech-tr'] {
  --pc: var(--teknoloji);
}
[data-platform='sports-tr'] {
  --pc: var(--spor);
}
[data-platform='hackernews'] {
  --pc: var(--hackernews);
}
[data-platform='buzzfeed'] {
  --pc: var(--buzzfeed);
}
[data-platform='boredpanda'] {
  --pc: var(--boredpanda);
}
[data-platform='mastodon'] {
  --pc: var(--mastodon);
}
[data-platform='9gag'] {
  --pc: var(--ninegag);
}
[data-platform='youtube-ar'] {
  --pc: var(--youtube);
}
[data-platform='googletrends-ar'] {
  --pc: var(--googletrends);
}
[data-platform='akhbar'] {
  --pc: var(--akhbar);
}
[data-platform='taqnia'] {
  --pc: var(--taqnia);
}
[data-platform='riyada'] {
  --pc: var(--riyada);
}
[data-platform='fann'] {
  --pc: var(--fann);
}
[data-platform='youtube-es'] {
  --pc: var(--youtube);
}
[data-platform='googletrends-es'] {
  --pc: var(--googletrends);
}
[data-platform='noticias'] {
  --pc: var(--noticias);
}
[data-platform='tecnologia'] {
  --pc: var(--tecnologia);
}
[data-platform='deportes'] {
  --pc: var(--deportes);
}
[data-platform='farandula'] {
  --pc: var(--farandula);
}
[data-platform='youtube-de'] {
  --pc: var(--youtube);
}
[data-platform='googletrends-de'] {
  --pc: var(--googletrends);
}
[data-platform='nachrichten'] {
  --pc: var(--nachrichten);
}
[data-platform='technik'] {
  --pc: var(--technik);
}
[data-platform='sport'] {
  --pc: var(--sport);
}
[data-platform='promis'] {
  --pc: var(--promis);
}
[data-platform='youtube-ru'] {
  --pc: var(--youtube);
}
[data-platform='googletrends-ru'] {
  --pc: var(--googletrends);
}
[data-platform='novosti'] {
  --pc: var(--novosti);
}
[data-platform='tehnologii'] {
  --pc: var(--tehnologii);
}
[data-platform='sport-ru'] {
  --pc: var(--sport-ru);
}
[data-platform='zvezdy'] {
  --pc: var(--zvezdy);
}
[data-platform='youtube-global'] {
  --pc: var(--youtube);
}
[data-platform='googletrends-global'] {
  --pc: var(--googletrends);
}
[data-platform='worldnews'] {
  --pc: var(--worldnews);
}
[data-platform='popculture'] {
  --pc: var(--popculture);
}
[data-platform='sports'] {
  --pc: var(--sports);
}
[data-platform='technews'] {
  --pc: var(--technews);
}
[data-platform='bluesky'] {
  --pc: var(--bluesky);
}
[data-platform='x'] {
  --pc: var(--x);
  --pc-ink: var(--x-ink);
}
[data-platform='x-global'] {
  --pc: var(--x);
  --pc-ink: var(--x-ink);
}

.card-head {
  display: flex;
  gap: 14px;
  padding: 14px;
  cursor: pointer;
  user-select: none;
}

.card-head:hover .title {
  color: var(--pc);
}

.thumb {
  flex-shrink: 0;
  width: 116px;
  height: 86px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  border: 1px solid var(--border-soft);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}

.card-head:hover .thumb img {
  transform: scale(1.04);
}

.thumb .play-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}

.thumb .play-badge svg {
  width: 36px;
  height: 36px;
  color: #fff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.card-head:hover .thumb .play-badge {
  opacity: 1;
}

.card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
}

.card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 3px 7px;
  border-radius: 4px;
  color: var(--pc);
  background: color-mix(in srgb, var(--pc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc) 28%, transparent);
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pill-sub {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.title {
  display: block !important;
  color: var(--text);
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  text-overflow: clip !important;
  white-space: normal !important;
  max-height: none !important;
  transition: color var(--t) var(--ease);
}

/* Card box grows with its content — no height constraint */
.card,
.card-head,
.card-body {
  overflow: visible;
}
.card {
  overflow: hidden; /* only for clipping the radius edge */
}
.card-head,
.card-body {
  overflow: visible;
}

/* Thumbnail stays fixed no matter how long the title gets */
.card-head {
  align-items: flex-start;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.78rem;
  color: var(--text-muted);
  align-items: center;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.meta-item svg {
  opacity: 0.7;
}
.meta-item strong {
  color: var(--text);
  font-weight: 600;
}

.meta-item.nsfw {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.card-action {
  background: transparent;
  border: none;
  color: var(--text-dim);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--t-fast) var(--ease);
}

.card-action:hover {
  background: var(--surface-active);
  color: var(--text);
}
.card-action .chev {
  transition: transform var(--t) var(--ease);
}
.card.is-open .card-action .chev {
  transform: rotate(180deg);
}

/* ─── Card expand (inline preview) ─── */
.card-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t) var(--ease);
}

.card.is-open .card-expand {
  grid-template-rows: 1fr;
}

.card-expand-inner {
  overflow: hidden;
  min-height: 0;
}

.card-preview {
  border-top: 1px solid var(--border);
  padding: 14px 14px 16px;
  background: var(--bg-elevated);
}

.preview-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 320px;
  overflow-y: auto;
}

.preview-img {
  display: block;
  max-width: 100%;
  max-height: 480px;
  border-radius: var(--radius-sm);
  margin: 0 auto;
  border: 1px solid var(--border);
}

.preview-iframe {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
}

.preview-iframe iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.preview-cta {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.btn-link:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

/* Monochrome brands (onedio, x) have a near-white platform color in one theme,
   where fixed #fff CTA text would be unreadable — those platforms set --pc-ink
   next to --pc (mappings above); everyone else falls back to #fff. */
.btn-link.primary {
  background: var(--pc);
  color: var(--pc-ink, #fff);
  border-color: var(--pc);
}

.btn-link.primary:hover {
  filter: brightness(1.08);
}

/* ─── Footer ─── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 22px 0 max(22px, env(safe-area-inset-bottom));
  color: var(--text-dim);
  font-size: 0.74rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kbd-hints {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.hint kbd {
  font-size: 0.66rem;
  min-width: 21px;
  padding: 2px 5px;
  justify-content: center;
  color: var(--text-muted);
  transition:
    color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.hint kbd + kbd {
  margin-left: -4px;
}

.hint:hover kbd {
  color: var(--text);
  border-color: var(--border-strong);
}

/* Source list removed (2026-07-14, user request) → remaining
   brand + rules/privacy links are centered. */
.footer-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.footer-brand {
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* B10 · Footer community rules link (to the server-rendered /rules page) */
.footer-rules-link {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--t) var(--ease);
}

.footer-rules-link:hover {
  color: var(--text);
}

/* Rules + Privacy in one group — on narrow screens "Privacy" must not wrap to the next
   line alone; it always stays next to "Community rules" (user request). */
.footer-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
}

/* ─── Seen demote (feed-rank.js) ─── */
/* Divider above the previously-seen tail + dimmed titles on seen cards. */
.feed-seen-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  user-select: none;
}
.feed-seen-divider::before,
.feed-seen-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.card-seen .title {
  color: var(--text-dim);
}

/* ─── Responsive ─── */
@media (max-width: 760px) {
  :root {
    --header-h: 154px;
  }

  .header-inner {
    padding-top: 11px;
    padding-bottom: 8px;
  }
  .brand-text .tagline {
    display: none;
  }
  .health-text {
    display: none;
  }
  .health {
    padding: 0 9px;
  }

  .subbar {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding-bottom: 10px;
  }

  .search-wrap {
    flex: none;
    max-width: 100%;
    min-width: 0;
    margin-right: 0;
  }

  .tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }

  /* Only the CARD view becomes a full-width banner. The compact view
     keeps its own dense row layout (the [data-view='compact'] mobile
     block below). These rules used to be view-independent, which is why
     compact looked ≈ card on mobile. */
  [data-view='card'] .card-head {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }

  [data-view='card'] .thumb {
    width: 100%;
    height: 200px;
    border-radius: var(--radius-sm);
  }

  .footer-meta {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    text-align: center;
  }
  .kbd-hints {
    display: none;
  }
}

@media (max-width: 380px) {
  .meta {
    gap: 10px;
    font-size: 0.74rem;
  }
  .title {
    font-size: 0.93rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ════════════════════════════════════════════════════════════════
   Social layer (v0.3)
   - like button on cards
   - in-card comments (mini-forum)
   - left panel: thread list + thread detail
   - right panel: profile + my comments
   - login/signup modal + avatar picker
   - toast
   ════════════════════════════════════════════════════════════════ */

/* ─── card action bar (like + comment count) ─── */
.card-social {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 0;
}

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 4px 10px;
  height: 26px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.like-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.like-btn.liked {
  color: #ff3b5c;
  border-color: color-mix(in srgb, #ff3b5c 45%, transparent);
  background: color-mix(in srgb, #ff3b5c 10%, transparent);
}

.like-btn:active {
  transform: scale(0.96);
}

.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 999px;
}

/* D-QUOTE-1 · card "Quote" button — RIGHT-aligned in the like/comment row */
.quote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  width: 32px;
  height: 26px;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.quote-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.quote-btn:active {
  transform: scale(0.96);
}

/* D-QUOTE-1 · quote card (shared by composer preview + Forum OP detail) */
.quote-card {
  position: relative;
  margin-top: 8px;
}

.quote-card-link {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

/* Variant with image: small fixed square hotlink thumb on the left, text on the right.
   If the image fails to load, the dom.js listener removes the img and drops has-thumb →
   falls back to the block (text-only) layout. */
.quote-card-link.has-thumb {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quote-card-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: calc(var(--radius-sm) - 2px);
  background: var(--surface-2);
}

.quote-card-main {
  display: block;
  min-width: 0;
}

.quote-card-link:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.quote-card-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.quote-card-title {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.quote-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.quote-card-domain {
  overflow-wrap: anywhere;
}

.quote-card-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.quote-card-remove:hover {
  background: var(--surface-active);
  color: var(--text);
}

.quote-card-removable .quote-card-link {
  padding-right: 34px;
}

/* ─── thread list (left panel) ─── */
.thread-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.thread-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 16px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.thread-row:hover,
.thread-row:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

.avatar {
  display: block;
  border-radius: 50%;
}

.thread-body {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.thread-title {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.thread-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-dim);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.thread-counts {
  margin-left: auto;
  display: inline-flex;
  gap: 8px;
  color: var(--text-muted);
}

.thread-counts span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ─── left forum · numbered pagination ─── */
.forum-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.fp-page,
.fp-nav {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.fp-page:hover:not(.is-active),
.fp-nav:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--text);
}

.fp-page:focus-visible,
.fp-nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fp-page.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
  cursor: default;
}

.fp-nav svg {
  width: 16px;
  height: 16px;
}

.fp-nav.fp-next svg {
  transform: scaleX(-1);
}

.fp-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.fp-gap {
  min-width: 18px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.8rem;
  user-select: none;
}

/* ─── thread detail (left panel) ─── */
.btn-back {
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  margin-bottom: 8px;
}
.btn-back:hover {
  color: var(--text);
  background: var(--surface-hover);
}

/* ─── thread detail: large title (D-FORUM-3; NOT sticky — scrolls away,
   scrolled back to top via scrollThreadTop on page change) ─── */
.thread-detail-header {
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.thread-detail-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.thread-detail-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
}

.td-toolbar-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-width: 0;
}

.td-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* "thread opener" + "search in thread" — both are collapsed dropdown triggers
   (text + arrow only); clicking opens the profile card for one, the search bar for the other. */
.thread-opener,
.thread-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 100%;
}
.thread-opener:hover,
.thread-search-trigger:hover {
  color: var(--text);
}
.thread-opener:focus-visible,
.thread-search-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.thread-opener .chev,
.thread-search-trigger .chev {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

/* "search in thread": collapsed dropdown; a small search bar opens under the trigger */
.thread-search {
  position: relative;
}
.thread-search-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 4px 3px 12px;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
}
.thread-search-pop[hidden] {
  display: none;
}
.thread-search-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.8rem;
  width: 160px;
  max-width: 50vw;
  padding: 4px 0;
}
.thread-search-input::placeholder {
  color: var(--text-dim);
}
.thread-search-clear {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex: none;
  font-size: 1.05rem;
  line-height: 1;
}
.thread-search-clear:hover {
  background: var(--surface-hover);
  color: var(--text);
}
/* search (submit) icon — DIFFERENTLY COLORED box: make it obvious it must be clicked */
.thread-search-go {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
  flex: none;
}
.thread-search-go:hover {
  filter: brightness(1.08);
}
.thread-search-go:focus-visible,
.thread-search-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* "search in thread" results heading */
.thread-search-info {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 2px 2px 8px;
  overflow-wrap: anywhere;
}

/* top/bottom numbered pagination (shares the .forum-pagination style) */
.thread-pagination:empty {
  display: none;
}
/* thread pagination leans RIGHT (top + bottom); the centered pagination in the left list is NOT affected */
.thread-pagination .forum-pagination {
  justify-content: flex-end;
}
/* top pagination now lives in the toolbar (left of the counter) → compact: no frame/spacing */
.thread-pagination-top .forum-pagination {
  margin: 0;
  padding: 0;
  border: none;
}
/* bottom pagination (flat agenda) must not stick to the composer right below it: leave
   breathing room under the numbers, symmetric with the padding-top above (on mobile the
   composer margin is zeroed, so it otherwise touched the composer's top border) */
.thread-pagination-bottom .forum-pagination {
  padding-bottom: 12px;
}

/* Agenda (flat) entry box: IDENTICAL to the forum's (comment-form-open) —
   only difference is position: BELOW the list (Eksi end-of-stream) → margin direction flipped. */
.comments-flat > .comment-form-open {
  margin-top: 18px;
  margin-bottom: 0;
}

/* ─── thread form (new thread) ─── */
.thread-form {
  display: grid;
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.field-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.field input,
.field textarea {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 0.86rem;
  color: var(--text);
  transition: all var(--t-fast) var(--ease);
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.field-hint {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.btn-primary.btn-sm {
  padding: 6px 12px;
  font-size: 0.76rem;
}
.btn-link.btn-sm {
  padding: 6px 12px;
  font-size: 0.76rem;
}
.btn-danger.btn-sm {
  padding: 6px 12px;
  font-size: 0.76rem;
  font-weight: 600;
}
/* ─── comments (shared by in-card + thread detail) ─── */
.comments {
  margin-top: 4px;
}

.comments-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.comments-head h4 {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.comments-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.comments-add-btn:hover {
  border-style: solid;
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface-hover);
}
.comments-add-btn svg {
  opacity: 0.85;
}

.comments-sort {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  background: var(--surface-2);
  padding: 2px;
  border-radius: 999px;
}
.cs-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.cs-tab:hover {
  color: var(--text);
}
.cs-tab.active {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.comment-form {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

.comment-input {
  background: transparent;
  border: none;
  padding: 4px 2px;
  font-size: 0.86rem;
  color: var(--text);
  resize: vertical;
  min-height: 40px;
  font-family: inherit;
}
.comment-input:focus {
  outline: none;
}
.comment-input::placeholder {
  color: var(--text-dim);
}

.comment-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* Reddit-style Discussion comment box */
.comment-form-open {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-elevated);
  transition:
    border-color var(--t-fast) var(--ease),
    border-radius var(--t-fast) var(--ease);
}
.comment-form-open:focus-within {
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
}
.comment-form-open .comment-input {
  width: 100%;
  border: none;
  border-radius: 0;
  padding: 10px 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow: hidden;
  resize: none;
  background: transparent;
  height: auto;
}
.comment-form-open .comment-form-actions {
  justify-content: flex-end;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}

/* ── Comment composer "Add link" (user request 2026-07-15) ─────────────
   Icon button on the LEFT of the action row (margin-inline-end:auto; moves right
   in RTL), Cancel+Submit stay grouped on the right (.has-link is flex-end in every
   context — the reply form's space-between must not spread the three items). The URL
   input row opens between the textarea and the actions. */
.comment-form-actions.has-link {
  justify-content: flex-end;
}
.comment-link-btn {
  margin-inline-end: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.comment-link-btn:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface-hover);
}
.comment-link-btn.is-active {
  color: var(--accent);
  border-color: var(--border-strong);
  background: var(--surface-active);
}
.comment-link-row {
  display: flex;
  flex-wrap: wrap; /* on narrow screens URL + title + Add wrap to the next line */
  align-items: center;
  gap: 8px;
}
.comment-form-open .comment-link-row {
  padding: 8px 12px 0;
}
/* Links in comment + Forum OP bodies (renderCommentBody): long URLs must not overflow.
   ALWAYS underlined — in the dark theme --accent == --text (#f5f5f7), so color alone
   does not distinguish a link from text. */
.comment-text a,
.forum-op-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.comment-text a:hover,
.forum-op-body a:hover {
  opacity: 0.82;
}

.comment-hint {
  color: var(--text-dim);
  font-size: 0.68rem;
}

.comment-list {
  display: grid;
  gap: 10px;
}

.comments-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.82rem;
}

/* D-PERF-2: comment "show more" pagination button */
.comments-load-more {
  display: block;
  margin: 4px auto 2px;
  padding: 6px 16px;
  font-size: 0.8rem;
  color: var(--text-dim);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  cursor: pointer;
}
.comments-load-more:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--border);
}
.comments-load-more:disabled {
  opacity: 0.6;
  cursor: default;
}

.comment {
  display: flex;
  flex-direction: column;
}

/* Inner row: left column (avatar+line+⊖) + right column (header+text+actions) */
.comment-top {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 10px 0;
}

.comment-reply > .comment-top {
  padding: 6px 0;
}

/* Replies sit OUTSIDE .comment-top, indented in line with the left column */
.comment-replies {
  margin-left: 36px; /* 28px (left column, all levels) + 8px (gap) */
  position: relative;
}

.comment-reply > .comment-replies {
  margin-left: 36px; /* 28px + 8px — all levels equal */
}

/* ── Thread connector lines (no eraser, background-independent) ──────
   Each .comment-reply::before = L-shape (vertical bridge + horizontal L-connector):
     border-left  → from the parent thread-line to this child's avatar center
     border-bottom → horizontal L-connector (line reaching the avatar)
   Each .comment-reply:not(:last-child)::after = extension running down
     from the avatar center (connects to the next sibling).
   Last child has NO ::after → the line automatically ends at the avatar center.

   Root parent : gap=10+4=14px, avatar center=6+14=20px
                 L top=-14px, height=34px, left=-22px, width=36px
   Reply parent: gap=6+4=10px, avatar center=6+14=20px
                 L top=-10px, height=30px, left=-22px, width=36px
   (all levels share margin-left=36px → left=-(36-14)=-22px)

   width=36 (not 22): the border-bottom line does not stop at the child
   avatar's LEFT edge (x=0), it extends to the avatar center (x=-22+36=14).
   Since y=20 is exactly the horizontal diameter of the avatar (28px, with
   6px padding above), this extension stays INSIDE the circle for x∈[0,28] →
   the avatar (painted later) covers it, so the line visually goes
   BEHIND/merges into the profile picture (like on reddit);
   previously it was cut right at the edge (tangent point) → the
   "line doesn't merge into the avatar" look. */

.comment-replies > .comment-reply {
  position: relative;
}

/* L-shape: root parent → child */
.comment:not(.comment-reply) > .comment-replies > .comment-reply::before {
  content: '';
  position: absolute;
  top: -14px;
  left: -22px;
  width: 36px;
  height: 34px;
  border-left: 2px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-bottom-left-radius: 8px;
  pointer-events: none;
}

/* L-shape: reply parent → child */
.comment.comment-reply > .comment-replies > .comment-reply::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -22px;
  width: 36px;
  height: 30px;
  border-left: 2px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-bottom-left-radius: 8px;
  pointer-events: none;
}

/* Downward extension: root parent, non-last child */
.comment:not(.comment-reply) > .comment-replies > .comment-reply:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 0;
  left: -22px;
  width: 0;
  border-left: 2px solid color-mix(in srgb, var(--text) 10%, transparent);
  pointer-events: none;
}

/* Downward extension: reply parent, non-last child */
.comment.comment-reply > .comment-replies > .comment-reply:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 0;
  left: -22px;
  width: 0;
  border-left: 2px solid color-mix(in srgb, var(--text) 10%, transparent);
  pointer-events: none;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

/* ── Thread left column (Reddit style) ───────────────────────────── */
/* Same width at every level: 28px avatar, uniform indent */
.comment-left {
  flex-shrink: 0;
  width: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.comment-reply > .comment-top > .comment-left {
  width: 28px;
  position: relative;
}

/* L-connector now lives on .comment-reply::before (border-bottom).
   .comment-left::before removed — position: relative no longer needed but harmless. */

/* Vertical thread line — runs from below the avatar to the end of the reply list.
   Using border-left: NO border-radius tapering issue (background at 2px gives a
   half-circle at each end → short lines look optically thin); browser border pixel-snap
   is more deterministic than background fill → better sub-pixel consistency. */
.comment-thread-line {
  width: 0;
  border-left: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}

/* Show the line and give it height on comments that have replies */
.comment:has(> .comment-replies) > .comment-top > .comment-left > .comment-thread-line {
  flex: 1;
  min-height: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
}

.comment-head {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.comment-user {
  color: var(--text);
  font-weight: 600;
}
.comment-time {
  color: var(--text-dim);
  font-size: 0.75rem;
}

.comment-text {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0 0 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.ca-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--t-fast) var(--ease);
}

.ca-btn:hover {
  color: var(--text);
  background: var(--surface-hover);
}
.ca-btn.liked {
  color: #ff3b5c;
}
.ca-btn.ca-danger:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* ── Forum discussion collapse ⊖/⊕ ─────────────────────────────────
   In the left column: below the thread-line, aligned with the vote widget.
   Alignment math (reddit-parity audit): being the last flex child of
   .comment-left, its bottom edge coincides with the bottom edge of
   .comment-actions (footer) (comment-top align-items:stretch → both columns
   equal height). The .comment-actions row height is set by the tallest
   element in that row, the .vote-widget's .vote-btn (22px fixed box;
   .ca-btn stays shorter at ~20px). ⊖ is 18px → to align centers,
   margin-bottom = (22-18)/2 = 2px (previously 4px → ⊖ sat ~2px higher
   than the vote-arrow row, the "centered on the left/raised on the
   right" drift). */
.ca-collapse {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent);
  padding: 0;
  flex-shrink: 0;
  margin-bottom: 2px;
  background: transparent;
  cursor: pointer;
  position: relative;
  color: var(--text-dim);
}
/* Horizontal bar (always visible → minus) */
.ca-collapse::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Vertical bar (when collapsed → plus) */
.ca-collapse::after {
  content: '';
  position: absolute;
  width: 1.5px;
  height: 8px;
  background: currentColor;
  border-radius: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleY(0);
  transition: transform var(--t-fast) var(--ease);
}
.comment.is-collapsed .ca-collapse::after {
  transform: translate(-50%, -50%) scaleY(1);
}
.ca-collapse:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

/* Collapsed state: body content + reply list are hidden */
.comment.is-collapsed > .comment-top > .comment-body > .comment-text,
.comment.is-collapsed > .comment-top > .comment-body > [data-reply-form],
.comment.is-collapsed > .comment-top > .comment-body > .comment-actions {
  display: none;
}
.comment.is-collapsed > .comment-replies {
  display: none;
}
.comment.is-collapsed > .comment-top > .comment-left > .comment-thread-line {
  border-color: transparent;
}
.comment.is-collapsed > .comment-top > .comment-body > .comment-head {
  opacity: 0.6;
}

.reply-form {
  margin: 8px 0 4px;
  padding: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 6px;
}

.comment-replies {
  margin-top: 4px;
  display: grid;
  gap: 0;
}

/* ── Eksi flat forum entries (migration 31) ───────────────── */
/* Flat entry: NO indentation/tree; each entry full-width in its own area. */
.comment-flat {
  border-bottom: 1px solid var(--border-soft);
  padding: 12px 0; /* equal top/bottom space → entry content centered between the two separator lines */
  /* Avatar on the LEFT, body on the right: base .comment is a column and the nested
     layout wraps avatar+body in a .comment-top row; flat markup has no wrapper,
     so it is turned into a row here (the avatar used to sit above the name). */
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.comment-flat:last-of-type {
  border-bottom: none;
}

/* Comments nested inside the card preview */
.card-preview .comments {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ─── Profile panel ─── */
.profile-card {
  padding: 4px 4px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.profile-card.guest {
  text-align: center;
  padding: 14px 6px 6px;
  border-bottom: none;
  margin-bottom: 0;
}

.profile-guest-icon {
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.profile-guest-text {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0 0 12px;
}
.profile-guest-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.profile-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 12px;
}

.profile-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.profile-name strong {
  color: var(--text);
  font-size: 0.92rem;
}
.profile-name small {
  color: var(--text-dim);
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-avatars {
  display: grid;
  gap: 6px;
}

.avatar-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.avatar-pick {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 50%;
  padding: 2px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--t-fast) var(--ease);
}

.avatar-pick:hover {
  transform: scale(1.05);
}
.avatar-pick.selected {
  border-color: var(--accent);
}
/* ─── Login / Signup modal ─── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal.open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.18s ease;
}

[data-theme='light'] .modal-backdrop {
  background: rgba(20, 20, 25, 0.35);
}

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 22px 22px;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.22s var(--ease-out);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.modal-close:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.modal-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 18px;
  line-height: 1.45;
}

.modal-tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--surface-2);
  padding: 3px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.modal-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.modal-tab:hover {
  color: var(--text);
}
.modal-tab.active {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.modal-form {
  display: grid;
  gap: 13px;
}

.modal-error {
  font-size: 0.8rem;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}

/* ─── Auth: staged signup (step indicator + stage transition) ─── */
.auth-steps {
  display: flex;
  gap: 6px;
  margin: 0 0 16px;
}
.auth-step-dot {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  transition: background var(--t-fast) var(--ease);
}
.auth-step-dot.done {
  background: color-mix(in srgb, var(--accent) 50%, transparent);
}
.auth-step-dot.active {
  background: var(--accent);
}

.auth-stage {
  display: grid;
  gap: 13px;
  animation: authStageIn 0.22s var(--ease-out);
}
@keyframes authStageIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Step 2: centered, roomy preview of the selected avatar + "you can change it later" hint */
.avatar-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}
.avatar-preview-frame {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  border: 2px solid var(--accent);
}
/* Image fills the frame completely (same pattern as apm-preview-frame) */
.avatar-preview-frame .avatar {
  display: block;
  width: 100%;
  height: 100%;
}
.avatar-preview-hint {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* Step 2 grid: 5 columns; 40 avatars scroll INSIDE a ~4.5-row window
   (half a row visible → scrollability hint), the modal does not grow */
.auth-stage[data-stage='avatar'] .avatar-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  justify-items: center;
  padding: 2px;
  max-height: 272px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Captcha centered ([hidden] display:none preserved while hidden) */
.auth-captcha:not([hidden]) {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}

/* Action row: equal-height Back (secondary) + flexible primary button */
.auth-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 2px;
}
.auth-actions #authBack {
  flex: 0 0 auto;
  min-width: 96px;
  justify-content: center;
}
.auth-actions .btn-primary {
  flex: 1;
}

/* ─── Toast ─── */
.toast-host {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  right: 20px;
  display: grid;
  gap: 8px;
  /* Toast is a transient notification → must sit ABOVE all overlays (settings
     .set-modal=955, confirm/pw/lang/kbd modals=1000); otherwise it hides behind
     the full-screen settings page (looks like it never pops up from below). */
  z-index: 1100;
  pointer-events: none;
}

.toast {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.83rem;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--t) var(--ease),
    transform var(--t) var(--ease);
  pointer-events: auto;
  max-width: 340px;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast-success {
  border-left-color: var(--success);
}
.toast-warn {
  border-left-color: var(--warning);
}
.toast-error {
  border-left-color: var(--danger);
}

/* ─── Drawer (mobile/tablet panel) shared ─── */
.drawer-toggle {
  display: none;
} /* hidden on desktop, enabled at breakpoints */

.drawer-close {
  display: none; /* only visible in drawer mode */
  position: sticky;
  top: 0;
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  place-items: center;
  z-index: 2;
  transition: all var(--t-fast) var(--ease);
}
.drawer-close:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 80; /* below the drawer (drawer is 90) */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
[data-theme='light'] .drawer-backdrop {
  background: rgba(20, 20, 25, 0.4);
}
.drawer-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* background scroll lock while the drawer is open */
body.drawer-open {
  overflow: hidden;
}

/* ─── Responsive: panels ─── */
@media (max-width: 1180px) {
  .layout {
    grid-template-columns: 260px minmax(0, var(--container));
    max-width: 1080px;
  }
  /* At this viewport the right placeholder falls outside the grid — hide it */
  .side-panel-placeholder {
    display: none;
  }
}

@media (max-width: 920px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 14px 0;
    gap: 16px;
    max-width: 100%;
  }

  /* left panel → drawer. Direction-aware tab transition (2026-07-02): the bottom-nav
     order Feed·Agenda·Forum·Profile is a strip — since the Agenda/Forum screen sits to
     the RIGHT of the Feed, the drawer enters FROM the right (feed→agenda) and exits TO
     the right (on forum→feed the feed appears from the left). Hidden position is
     therefore +100% (the old -100% entered from the left). */
  .side-panel.left {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 88vw;
    max-height: none;
    height: auto; /* override base .side-panel height → top:0 ↔ bottom:nav full height (mobile full page) */
    z-index: 90;
    background: var(--bg);
    border-right: 1px solid var(--border);
    padding: 14px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.28s var(--ease);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
  }
  .side-panel.left.is-open {
    transform: translateX(0);
  }

  #forumToggle {
    display: grid;
  }
}

@media print {
  .site-header,
  .site-footer,
  .card-actions,
  .card-expand,
  .side-panel,
  .modal,
  .toast-host,
  .confirm-modal {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .card {
    break-inside: avoid;
    border: 1px solid #ccc;
    box-shadow: none;
  }
}
/* ════════════════════════════════════════════════════════════════
   Language switcher button
   ════════════════════════════════════════════════════════════════ */
.lang-btn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
  min-width: 38px;
}

/* ════════════════════════════════════════════════════════════════
   Confirm dialog (instead of native confirm())
   ════════════════════════════════════════════════════════════════ */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
.confirm-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.confirm-panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px 18px;
  width: min(420px, calc(100vw - 32px));
  box-shadow: var(--shadow-lg);
  transform: translateY(8px) scale(0.985);
  transition: transform var(--t) var(--ease-out);
}
.confirm-modal.open .confirm-panel {
  transform: translateY(0) scale(1);
}
.confirm-text {
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 18px;
}
.confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.confirm-actions .btn-primary.danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.confirm-actions .btn-primary.danger:hover {
  filter: brightness(1.08);
}

/* prefers-reduced-motion compliance */
@media (prefers-reduced-motion: reduce) {
  .confirm-modal,
  .confirm-panel {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   Report modal (D-MOD-1) — shares the confirm-modal skeleton.
   ════════════════════════════════════════════════════════════════ */
.report-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.report-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.report-option:hover {
  background: var(--surface-hover);
}
.report-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface-hover);
}
.report-option input {
  accent-color: var(--accent);
}
.report-detail {
  margin-top: 4px;
  resize: vertical;
}
.report-form .confirm-actions {
  margin-top: 12px;
}

/* Feedback modal — shares the report-modal skeleton. */
.feedback-sub {
  margin: -4px 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
}
/* Message area separates from the panel: recessed (darker) background + distinct border. */
.feedback-body {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.feedback-body:focus {
  outline: none;
  border-color: var(--border-strong);
}

/* Moderation: hidden-content tombstone + list badge */
.comment-tombstone {
  color: var(--text-dim);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 6px;
}
.thread-hidden-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-style: normal;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 999px;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════
   Avatar picker modal (wide, two columns: preview + grid)
   ════════════════════════════════════════════════════════════════ */
.apm-panel {
  width: min(680px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 64px));
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.apm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
/* Mobile bottom-sheet live-preview badge — hidden on desktop (aside preview exists) */
.apm-head-preview {
  display: none;
  line-height: 0;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.apm-head-preview .avatar {
  display: block;
}
.apm-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  flex: 1;
  margin: 0;
  color: var(--text);
}
.apm-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  padding: 18px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.apm-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.apm-preview-frame {
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface);
}
.apm-preview-frame .avatar {
  display: block;
  width: 100%;
  height: 100%;
}
.apm-preview-label {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}
.apm-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.apm-grid-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.apm-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  overflow-y: auto;
  padding: 4px;
  min-height: 0;
}
.apm-pick {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 50%;
}
.apm-pick .avatar {
  display: block;
  width: 100%;
  height: 100%;
}
.apm-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
.apm-foot .btn-primary[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Mobile (≤640px): BOTTOM SHEET — user request 2026-07-03.
   Panel slides from the bottom (translateY 100%→0; .confirm-modal opacity fade already
   exists), full width + rounded top corners + safe-area. Large preview box hidden —
   live preview is in the header badge (.apm-head-preview). Compact 5-column grid.
   Scoped to .apm-* only → other modals (confirm/report etc.) are NOT affected. */
@media (max-width: 640px) {
  .apm-modal {
    place-items: end stretch;
  }
  .apm-panel {
    width: 100%;
    max-width: none;
    max-height: min(86dvh, 620px);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    transform: translateY(100%);
  }
  .apm-modal.open .apm-panel {
    transform: translateY(0);
  }
  .apm-head {
    padding: 12px 14px;
  }
  .apm-head-preview {
    display: inline-flex;
  }
  .apm-body {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
    overflow-y: auto;
  }
  .apm-preview {
    display: none;
  }
  .apm-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 2px;
    scrollbar-width: thin;
  }
  .apm-foot {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .apm-foot .btn-link,
  .apm-foot .btn-primary {
    flex: 1;
    /* .btn-link is inline-flex → text-align is not enough; label is centered on the flex axis */
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .apm-panel {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   Help tour — spotlight coachmarks (header "?" button)
   Four fixed backdrop-blur panels frame a transparent "hole" over the
   highlighted element; a small bubble explains it; every click on the
   blurred area advances, X/Esc exits. Scoped to .help-tour/.ht-* only.
   ════════════════════════════════════════════════════════════════ */
.help-tour {
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
.help-tour.open {
  opacity: 1;
  pointer-events: auto;
}
.ht-blur {
  position: fixed;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  cursor: pointer;
  transition:
    top var(--t) var(--ease),
    left var(--t) var(--ease),
    width var(--t) var(--ease),
    height var(--t) var(--ease);
}
/* transparent click-catcher over the spotlit element: shows it sharp,
   rings it, and keeps mid-tour clicks off the real control underneath */
.ht-hole {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--accent-soft);
  cursor: pointer;
  transition:
    top var(--t) var(--ease),
    left var(--t) var(--ease),
    width var(--t) var(--ease),
    height var(--t) var(--ease);
}
.ht-bubble {
  position: fixed;
  width: min(320px, calc(100vw - 24px));
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px 10px;
  transition:
    top var(--t) var(--ease),
    left var(--t) var(--ease);
}
.ht-bubble-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ht-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ht-title {
  flex: 1;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}
.ht-body {
  margin: 6px 0 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.ht-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ht-progress {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
/* page frozen while the tour runs → the spotlight stays aligned */
body.tour-lock {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .help-tour,
  .ht-blur,
  .ht-hole,
  .ht-bubble {
    transition: none;
  }
}
/* ════════════════════════════════════════════════════════════════
   Pagination sentinel + optimistic comment style
   ════════════════════════════════════════════════════════════════ */
.feed-sentinel {
  height: 1px;
  margin: 20px 0 60px;
  pointer-events: none;
}

.comment.is-optimistic {
  opacity: 0.68;
  position: relative;
}
.comment.is-optimistic::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  border-top-color: transparent;
  animation: enkez-spin 0.7s linear infinite;
  opacity: 0.55;
}
@keyframes enkez-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .comment.is-optimistic::after {
    animation: none;
  }
}

/* Brief "as if selected" white flash for a comment jumped to from
   "My comments".
   With a ::before pseudo-element we draw a filled box extending ~6/10 px
   beyond the comment — fill + ring + glow live entirely on it.
   isolation: isolate keeps the pseudo in the background, avatar/text on top. */
.comment.is-highlighted {
  position: relative;
  isolation: isolate;
}

.comment.is-highlighted::before {
  content: '';
  position: absolute;
  inset: -6px -10px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: -1;
  /* A single 0%->100% interpolation. easeOutQuint: instant flash, then a
     long soft fade-out. No intermediate keyframes so there is no
     stepped feel. */
  animation: enkez-comment-flash 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes enkez-comment-flash {
  0% {
    background: rgba(255, 255, 255, 0.32);
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.7),
      0 0 38px rgba(255, 255, 255, 0.22);
  }
  100% {
    background: rgba(255, 255, 255, 0);
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0),
      0 0 0 rgba(255, 255, 255, 0);
  }
}

[data-theme='light'] .comment.is-highlighted::before {
  animation-name: enkez-comment-flash-light;
}

@keyframes enkez-comment-flash-light {
  0% {
    background: rgba(14, 14, 18, 0.22);
    box-shadow:
      0 0 0 2px rgba(14, 14, 18, 0.55),
      0 0 32px rgba(14, 14, 18, 0.14);
  }
  100% {
    background: rgba(14, 14, 18, 0);
    box-shadow:
      0 0 0 2px rgba(14, 14, 18, 0),
      0 0 0 rgba(14, 14, 18, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .comment.is-highlighted::before {
    animation: none;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
    transition:
      background 0.8s ease,
      box-shadow 0.8s ease;
  }
  [data-theme='light'] .comment.is-highlighted::before {
    background: rgba(14, 14, 18, 0.1);
    box-shadow: 0 0 0 2px rgba(14, 14, 18, 0.35);
  }
}

/* Telegram fallback thumbnail (channel initials) */
.thumb.tg-thumb {
  background: linear-gradient(135deg, var(--telegram), var(--telegram-soft));
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  display: grid;
  place-items: center;
  letter-spacing: 0.4px;
}
/* ════════════════════════════════════════════════════════════════
   Header: 3-column grid (left / center / right) →
   search is in the EXACT center of the header, not of its cell.
   With 1fr 1fr side columns the space around search-wrap stays
   symmetric; brand hugs the left, actions hug the right.
   ════════════════════════════════════════════════════════════════ */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 14px;
  flex-wrap: nowrap;
}
.header-inner .brand-text .tagline {
  display: none;
}

.header-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  justify-self: start;
}

.header-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  width: 100%;
}

.header-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}

/* Search: dead center, reasonable width */
.header-inner .search-wrap {
  width: clamp(220px, 38vw, 460px);
  min-width: 0;
  position: relative;
}
.header-inner .search-wrap .search-input {
  width: 100%;
  height: 38px;
  padding: 0 16px 0 40px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13.5px;
  transition: all var(--t-fast) var(--ease);
}
.header-inner .search-wrap .search-input::placeholder {
  color: var(--text-dim);
}
.header-inner .search-wrap .search-input:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.header-inner .search-wrap .search-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.header-inner .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  pointer-events: none;
}
.header-inner .search-wrap:has(.search-input:focus) .search-icon {
  color: var(--text);
}

.header-inner .header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.header-inner .health {
  width: auto;
  padding: 0 6px;
  height: 32px;
}
.header-inner .health .health-text {
  display: none;
}

/* ─── Lang button: mini flag + small text ─── */
.header-inner .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px 0 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--t-fast) var(--ease);
}
.header-inner .lang-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
  transform: translateY(-1px);
}
.header-inner .lang-btn:active {
  transform: translateY(0);
}

.lang-flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
  display: block;
}

.lang-flag-en {
  display: none;
}
.lang-flag-tr {
  display: block;
}
[lang='en'] .lang-flag-tr {
  display: none;
}
[lang='en'] .lang-flag-en {
  display: block;
}

.lang-code {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  line-height: 1;
  color: var(--text);
}

@media (max-width: 720px) {
  /* ──────────────────────────────────────────────────────────────
     Mobile header: Reddit-style two rows.
     Row 1: enkez wordmark (no logo) + actions on the right
            (guest: Signup/Login/theme · logged in: notifications/messages/profile).
     Row 2: logo mark + full-width search.
     Agenda (≡) hidden for now — separate mobile nav bar later.
     ────────────────────────────────────────────────────────────── */
  :root {
    --header-h: 108px;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'brand actions'
      'search search';
    column-gap: 10px;
    row-gap: 9px;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .header-left {
    grid-area: brand;
    justify-self: start;
    min-width: 0;
  }
  .header-right {
    grid-area: actions;
    justify-self: end;
  }
  .header-center {
    grid-area: search;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
  }

  /* Agenda menu (≡) hidden on mobile — separate mobile nav bar later. */
  .header-left .drawer-toggle-left {
    display: none;
  }

  /* Shrink the row-1 wordmark; move the logo mark to row 2. */
  .header-inner .brand-text .logo {
    font-size: 21px;
  }
  .brand .brand-mark {
    display: none;
  }
  .brand-mark-mobile {
    display: grid;
    flex-shrink: 0;
  }

  /* Row 2: full-width search, to the right of the logo mark. */
  .header-inner .search-wrap {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ════════════════════════════════════════════════════════════════
   Custom dropdown menu (dropmenu visual language — platform filter)
   - .dropmenu-trigger pill button + .dropmenu-panel dropdown
   ════════════════════════════════════════════════════════════════ */
.dropmenu {
  position: relative;
  display: inline-flex;
}

.dropmenu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  height: 32px;
  padding: 0 11px 0 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease);
  font-family: inherit;
}
.dropmenu-trigger:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.dropmenu.is-open .dropmenu-trigger,
.dropmenu-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.dropmenu-label {
  line-height: 1;
  color: var(--text);
}

.dropmenu-caret {
  color: var(--text-dim);
  transition:
    transform var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.dropmenu.is-open .dropmenu-caret {
  transform: rotate(180deg);
  color: var(--accent);
}

.dropmenu-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 260px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px;
  box-shadow: var(--shadow-lg);
  z-index: 60;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transition:
    opacity var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
  display: grid;
  gap: 1px;
}
.dropmenu.is-open .dropmenu-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dropmenu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
  font-family: inherit;
}
.dropmenu-item:hover,
.dropmenu-item.is-active {
  background: var(--surface-hover);
}

/* ─── Multi-select variant (platform filter) ─── */
.dropmenu-multi .dropmenu-panel {
  min-width: 190px;
}
/* The platform list can grow with region unions (user request 2026-07-14):
   the panel grows up to a set height, beyond that it scrolls internally. Keyboard
   navigation keeps the active row visible via scrollIntoView (paintActive). */
.dropmenu-platform .dropmenu-panel {
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dropmenu-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pc, var(--text-faint));
  flex-shrink: 0;
}

/* Color dot cluster on the trigger (avatar-stack style overlap) */
.dropmenu-dots {
  display: inline-flex;
  align-items: center;
}
.dropmenu-dots:empty {
  display: none;
}
.dropmenu-dots .dropmenu-dot {
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--surface);
  margin-left: -4px;
}
.dropmenu-dots .dropmenu-dot:first-child {
  margin-left: 0;
}
.dropmenu-trigger.is-empty .dropmenu-label {
  color: var(--text-dim);
}

.dropmenu-item-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dropmenu-multi .dropmenu-item {
  color: var(--text-muted);
}
.dropmenu-multi .dropmenu-item .dropmenu-dot {
  opacity: 0.35;
  transition: opacity var(--t-fast) var(--ease);
}
.dropmenu-multi .dropmenu-item.is-checked {
  color: var(--text);
}
.dropmenu-multi .dropmenu-item.is-checked .dropmenu-dot {
  opacity: 1;
}
.dropmenu-item-all {
  font-weight: 600;
}

/* Checkbox — takes the platform's own color when checked */
.dropmenu-check {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: transparent;
  flex-shrink: 0;
  transition: all var(--t-fast) var(--ease);
}
.dropmenu-item.is-checked .dropmenu-check {
  background: var(--pc, var(--accent));
  border-color: var(--pc, var(--accent));
  color: var(--accent-contrast);
}
.dropmenu-check.is-mixed {
  border-color: var(--accent);
  color: var(--accent);
}
.dropmenu-check svg {
  display: block;
}

/* ════════════════════════════════════════════════════════════════
   Header profile dropdown menu (avatar / login)
   ════════════════════════════════════════════════════════════════ */
.profile-menu {
  position: relative;
  display: inline-flex;
}

.profile-trigger {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--t-fast) var(--ease);
  padding: 0;
  overflow: hidden;
}
.profile-trigger:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.profile-menu.is-open .profile-trigger,
.profile-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.profile-trigger.has-avatar {
  background: transparent;
  border-color: var(--border-strong);
  padding: 1px;
  /* Logged-in avatar reads bigger than the neighboring 34px icon circles —
     the guest person-icon trigger keeps 34px (tight es/de guest header). */
  width: 38px;
  height: 38px;
}
.profile-trigger.has-avatar .profile-trigger-avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.profile-trigger.has-avatar .profile-trigger-avatar .avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.profile-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  max-width: calc(100vw - 24px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow-lg);
  /* Above the message sheet (95) + drawer (90) — dropdown is always on top */
  z-index: 120;
  display: grid;
  gap: 10px;
  overflow: hidden;
  animation: pmenu-in 0.16s var(--ease-out);
}
@keyframes pmenu-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pmenu-empty {
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
  padding: 12px 6px;
  line-height: 1.45;
}

/* Guest mode: centered, small description + login/signup buttons */
.pmenu-guest {
  display: grid;
  gap: 10px;
  text-align: center;
  padding: 8px 4px 2px;
  justify-items: center;
}
.pmenu-guest-avatar {
  display: grid;
  place-items: center;
}
.pmenu-guest-avatar .avatar {
  opacity: 0.55;
}
.pmenu-guest-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
  max-width: 220px;
}
.pmenu-guest-actions {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 2px;
}
.pmenu-guest-actions .btn-primary {
  flex: 1;
  width: auto;
}
.pmenu-guest-actions .btn-link {
  flex: 1;
  width: auto;
  text-align: center;
}

.pmenu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--border);
}
.pmenu-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.15;
}
.pmenu-head-text strong {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmenu-head-year {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
}
.pmenu-head-text small {
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pmenu-actions {
  display: flex;
  gap: 8px;
  flex-direction: column;
  padding: 0 2px;
}
.pmenu-actions .btn-primary {
  width: 100%;
}
.pmenu-actions .btn-link {
  width: 100%;
  text-align: center;
}

.pmenu-section {
  display: grid;
  gap: 6px;
  padding: 2px 4px;
}
.pmenu-section-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.pmenu-avatars {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Profile dropdown header — the whole avatar is clickable; a small "edit"
   badge in the top-right corner. Button is transparent, only the avatar shows. */
.pmenu-avatar-editable {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
  transition: transform var(--t-fast) var(--ease);
}
.pmenu-avatar-editable:hover {
  transform: scale(1.04);
}
.pmenu-avatar-editable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pmenu-avatar-editable-img {
  display: inline-flex;
  border-radius: 50%;
}
.pmenu-avatar-editable-img .avatar {
  display: block;
}
.pmenu-avatar-edit-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  border: 1.5px solid var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  transition: transform var(--t-fast) var(--ease);
}
.pmenu-avatar-edit-badge svg {
  display: block;
  stroke: currentColor;
}
.pmenu-avatar-editable:hover .pmenu-avatar-edit-badge {
  transform: scale(1.12);
}

.pmenu-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

.pmenu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 8px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.pmenu-item:hover {
  background: var(--surface-hover);
}
.pmenu-item.pmenu-danger {
  color: var(--danger);
}
.pmenu-item.pmenu-danger:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.pmenu-item svg {
  flex-shrink: 0;
  opacity: 0.85;
}

/* Static menu item — non-interactive row (e.g. the language selection host) */
.pmenu-item-static {
  cursor: default;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
}
.pmenu-item-static:hover {
  background: transparent;
}

/* Segmented control: language selection (TR | EN) */
.pmenu-lang-seglist {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.pmenu-lang-seg {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.pmenu-lang-seg:hover {
  color: var(--text);
}
.pmenu-lang-seg.is-active {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Settings sub-view heading: ← back + "Settings" (paintSettings) */
.pmenu-subhead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 6px;
}
.pmenu-subhead strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.pmenu-back {
  flex-shrink: 0;
}

/* On mobile (≤920px, the bottom-nav threshold) the bottom bar's "Profile" tab
   already opens the profile page directly → "My profile" in the dropdown would
   be a duplicate; shown only on desktop. */
@media (max-width: 920px) {
  .pmenu-desktop-only {
    display: none;
  }
}

/* Notification & DM buttons in the header */
.header-bell,
.header-dm {
  position: relative;
}
.header-bell:disabled,
.header-dm:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.header-bell:disabled:hover,
.header-dm:disabled:hover {
  background: transparent;
  border-color: var(--border);
  transform: none;
}
.header-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--reddit);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  line-height: 16px;
  text-align: center;
  border: 2px solid var(--bg);
  pointer-events: none;
}
/* ════════════════════════════════════════════════════════════════
   Feed-toolbar: filters on the left, view switch on the right
   ════════════════════════════════════════════════════════════════ */
.feed-toolbar {
  justify-content: space-between;
}
.toolbar-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .feed-toolbar {
    gap: 8px;
  }
  .toolbar-filters {
    gap: 6px;
  }
  .dropmenu-trigger {
    font-size: 11.5px;
    padding: 0 10px 0 12px;
  }
}

/* ════════════════════════════════════════════════════════════════
   Side panels: little content → vertically center; a lot → scroll
   (the 'safe' keyword keeps the top from being cut off on overflow)
   ════════════════════════════════════════════════════════════════ */
.side-panel {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: 12px;
}
.side-panel > .panel {
  flex: 0 0 auto;
}

/* Forum panel is the left side-panel's only content box — full width. */
.side-panel > .panel {
  width: 100%;
}

/* ════════════════════════════════════════════════════════════════
   Forum left panel (desktop): header FIXED, list scrolls inside.
   The panel fills the side-panel height; .panel-head stays fixed,
   only .panel-body (thread list + pagination) scrolls vertically.
   The mobile drawer (max-width:920px) is not affected by this rule.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 921px) {
  .side-panel.left {
    overflow: hidden; /* inner body scrolls; the panel itself is fixed */
  }
  .side-panel.left > #forumPanel {
    flex: 1 1 auto; /* fill the available height */
    min-height: 0; /* flex child overflow rule */
    display: flex;
    flex-direction: column;
  }
  #forumPanel > .panel-head {
    flex: 0 0 auto; /* fixed header */
  }
  #forumPanel > .panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto; /* only the list scrolls */
  }
}

/* ════════════════════════════════════════════════════════════════
   View mode: card (Reddit-like)
   - triggered via <html data-view="card">
   - Thumbnail becomes a full-width banner, content below
   - Title fully visible (there is no line-clamp anyway)
   ════════════════════════════════════════════════════════════════ */
[data-view='card'] .feed {
  gap: 14px;
}

[data-view='card'] .card-head {
  flex-direction: column;
  gap: 0;
  padding: 0;
  align-items: stretch;
}

/* Card view: full-width banner thumb. For portrait images we show a
   blurred copy of the same image as a backdrop on the sides —
   the image is not cropped, it is centered in a near-square frame. */
[data-view='card'] .card-head .thumb {
  order: 1;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  /* Keep portrait images from pushing the card past the viewport.
     ~220px: allowance for header (~68) + card-body (~120) + spacing. */
  max-height: min(640px, calc(100dvh - 220px));
  min-height: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
  padding: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Blurred backdrop — covers with the same image and blurs it */
[data-view='card'] .card-head .thumb .thumb-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(38px) brightness(0.55) saturate(1.25);
  transform: scale(1.25);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  display: block;
}

/* Foreground image — at its original aspect ratio, uncropped */
[data-view='card'] .card-head .thumb .thumb-fg {
  position: relative;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(640px, calc(100dvh - 220px));
  object-fit: contain;
  display: block;
  margin: 0 auto;
  z-index: 1;
  image-rendering: auto;
}

/* Card view: card-body must come AFTER the thumb (thumb order:1, body order:2)
   → image is the banner on top, text below. This rule had previously been lost. */
[data-view='card'] .card-head .card-body {
  order: 2;
  padding: 14px 16px 16px;
  gap: 10px;
}

/* Compact view: hide thumb-bg entirely, fg keeps the old 116x86 behavior */
[data-view='compact'] .card-head .thumb .thumb-bg {
  display: none !important;
}
[data-view='compact'] .card-head .thumb .thumb-fg {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ════════════════════════════════════════════════════════════════
   Compact view — MOBILE (≤760px)
   Since the card view is a full-width banner on mobile, compact must
   clearly differ from it: dense horizontal row — small image on the left,
   title + metrics to its right (mobile counterpart of the desktop compact layout).
   Note: this block comes AFTER the [data-view='compact'] .thumb-fg rule
   above, so its height/object-fit override wins by source order.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  [data-view='compact'] .feed {
    gap: 8px;
  }

  [data-view='compact'] .card-head {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
  }

  [data-view='compact'] .thumb {
    width: 104px;
    height: 78px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
  }

  /* Small image fills the box completely (overrides the height:auto above) */
  [data-view='compact'] .card-head .thumb .thumb-fg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  [data-view='compact'] .card-top {
    gap: 6px;
  }

  [data-view='compact'] .title {
    font-size: 0.92rem;
    line-height: 1.35;
  }

  [data-view='compact'] .card-social {
    margin-top: 4px;
  }
}
/* ════════════════════════════════════════════════════════════════
   Messaging (DM) panel
   Shown in the right drawer as an alternative to the profile panel.
   ════════════════════════════════════════════════════════════════ */
:root {
  --dm-bubble-mine-bg: #2563eb;
  --dm-bubble-mine-color: #ffffff;
  --dm-bubble-other-bg: var(--surface-2);
  --dm-bubble-other-color: var(--text);
}
[data-theme='light'] {
  --dm-bubble-mine-bg: #2563eb;
  --dm-bubble-mine-color: #ffffff;
}

/* Independent sheet: never clashes with the drawer/profile panel.
   Slides in from the right on mobile, from the bottom right on desktop.
   ---------------------------------------------------- */
.messages-sheet {
  position: fixed;
  z-index: 95; /* above drawer (90) and backdrop (80), below modal (100) */
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition:
    transform 0.32s var(--ease),
    opacity 0.22s var(--ease);

  /* Mobile/tablet (default): full height, slides from the right */
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}
.messages-sheet[hidden] {
  display: none;
}
.messages-sheet.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.messages-sheet-inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border: 0;
  background: transparent;
}

/* Desktop: floating bottom-sheet from the bottom right
   (Messenger / Twitter Chat style). The My Comments panel stays open.
   Width is kept at ~720px so it can host both panels (sidebar list +
   main thread) at the same time. */
@media (min-width: 1181px) {
  .messages-sheet {
    top: auto;
    bottom: 0;
    right: 24px;
    width: min(720px, calc(100vw - 48px));
    height: min(640px, calc(100dvh - 100px));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
    transform: translateY(calc(100% + 8px));
  }
  .messages-sheet.is-open {
    transform: translateY(0);
  }
}

.messages-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease);
}
[data-theme='light'] .messages-backdrop {
  background: rgba(20, 20, 28, 0.35);
}
.messages-backdrop[hidden] {
  display: none;
}
.messages-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}
/* NO backdrop behind the floating bottom-sheet on desktop — the user
   must be able to interact with the page. */
@media (min-width: 1181px) {
  .messages-backdrop {
    display: none !important;
  }
}

.messages-close-btn {
  margin-left: 2px;
}

/* ── Conversation list ── */
.dm-conv-list {
  /* D-TEST-2: now a <div> (not the old <ul>) — button-stack semantics. */
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.dm-conv {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.dm-conv:hover,
.dm-conv:focus-visible {
  background: var(--surface-hover);
  outline: none;
}
/* D-TEST-2: keyboard focus is visible via an inner ring distinguishable from hover. */
.dm-conv:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.dm-conv:active {
  transform: scale(0.995);
}
.dm-conv-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dm-conv-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.dm-conv-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.dm-conv-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-conv-time {
  font-size: 0.7rem;
  color: var(--text-dim);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.dm-conv-preview {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-conv.is-unread .dm-conv-name,
.dm-conv.is-unread .dm-conv-preview {
  color: var(--text);
}
.dm-conv.is-unread .dm-conv-preview {
  font-weight: 600;
}
.dm-conv-badge {
  background: var(--dm-bubble-mine-bg);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

/* ── Compose (user search) ── */
.dm-compose {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dm-user-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  max-height: 60vh;
  overflow-y: auto;
}
.dm-user-pick {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.dm-user-pick:hover,
.dm-user-pick:focus-visible {
  background: var(--surface-hover);
  border-color: var(--border);
  outline: none;
}
/* D-TEST-2: distinct accent ring for keyboard focus (must differ from hover). */
.dm-user-pick:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.dm-user-pick-name {
  font-size: 0.85rem;
  font-weight: 600;
}

/* ── Thread (messages) ── */
.dm-thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto; /* let the parent (.messages-body) hand over all the space */
}

.dm-thread-avatar {
  display: inline-flex;
  align-items: center;
}
.dm-thread-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}

.dm-thread-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden; /* dm-bubble-del must not overflow, no horizontal scroll */
  padding: 8px 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-behavior: smooth;
}
.dm-thread-body::-webkit-scrollbar {
  width: 8px;
}
.dm-thread-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.dm-day {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 4px;
  font-size: 0.7rem;
  color: var(--text-dim);
}
.dm-day span {
  background: var(--bg);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
}
/* D-PERF-9: "load older messages" button (at the top of the thread) */
.dm-load-older {
  display: block;
  margin: 6px auto 10px;
  padding: 5px 14px;
  font-size: 0.78rem;
  color: var(--text-dim);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  cursor: pointer;
}
.dm-load-older:hover {
  color: var(--text);
  border-color: var(--border);
}

.dm-bubble {
  position: relative;
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 0.86rem;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  animation: dm-bubble-in 0.16s var(--ease-out) both;
}
@keyframes dm-bubble-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dm-bubble-text {
  margin: 0;
  white-space: pre-wrap;
}
.dm-bubble-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 0.66rem;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.dm-bubble-other {
  align-self: flex-start;
  background: var(--dm-bubble-other-bg);
  color: var(--dm-bubble-other-color);
  border-top-left-radius: 4px;
}
.dm-bubble-mine {
  align-self: flex-end;
  background: var(--dm-bubble-mine-bg);
  color: var(--dm-bubble-mine-color);
  border-top-right-radius: 4px;
}
.dm-bubble.is-optimistic {
  opacity: 0.65;
}
.dm-read-dot,
.dm-read-label {
  font-size: 0.7rem;
}

.dm-bubble-del {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.18);
  border: 0;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  padding: 3px;
  border-radius: 50%;
  opacity: 0;
  transition:
    opacity var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
  line-height: 0;
}
.dm-bubble-mine:hover .dm-bubble-del,
.dm-bubble-mine:focus-within .dm-bubble-del {
  opacity: 1;
}
.dm-bubble-del:hover {
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
}

/* ── Composer ── */
.dm-composer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end; /* if the textarea grows, send stays fixed at the bottom */
  padding: 10px 0 0;
  margin-top: 10px;
  border-top: 1px solid var(--border-soft);
  background: transparent;
  flex-shrink: 0; /* composer must not get squeezed even if thread-body grows */
}
.dm-composer-input {
  width: 100%;
  resize: none;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.4;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
  min-height: 42px;
  max-height: 160px;
  /* No scrollbar in the single-line resting state; autoGrow switches to
     'auto' only when content exceeds max-height. */
  overflow-y: hidden;
}
.dm-composer-input:focus {
  border-color: var(--border-strong);
}
.dm-composer-send {
  flex-shrink: 0;
  white-space: nowrap;
  height: 40px;
  min-width: 64px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.messages-sheet-inner .panel-head {
  flex: 0 0 auto;
}

/* ── Master/detail shell ─────────────────────────────────────── */
.dm-shell {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.dm-sidebar,
.dm-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.dm-fallback {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
.dm-fallback .messages-close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
}

/* Mobile/tablet — single-panel mode: data-pane picks the active panel */
@media (max-width: 1180px) {
  .dm-shell {
    flex-direction: column;
  }
  .dm-sidebar,
  .dm-main {
    flex: 1 1 auto;
    width: 100%;
  }
  .dm-shell[data-pane='list'] .dm-main {
    display: none;
  }
  .dm-shell[data-pane='main'] .dm-sidebar {
    display: none;
  }
  /* The title ("Messages") now takes only the space it needs, the + button sits
     right next to it; panel-actions (close X) stays alone on the right via margin-left:auto. */
  .dm-sidebar-head .panel-title {
    flex: 0 0 auto;
  }
  .dm-main-head .dm-main-avatar img.avatar {
    width: 38px !important;
    height: 38px !important;
  }
  .dm-main-head .dm-main-title {
    font-size: 1.05rem;
    font-weight: 700;
  }
}

/* Desktop — two panels side by side: narrow sidebar, wide main */
@media (min-width: 1181px) {
  .dm-sidebar {
    flex: 0 0 260px;
    width: 260px;
    border-right: 1px solid var(--border);
  }
  .dm-main {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* hide mobile-only buttons on desktop */
  .messages-sheet .mobile-only {
    display: none !important;
  }
}

/* Sidebar header — sticky, same look as panel-head */
.dm-sidebar-head {
  flex: 0 0 auto;
}
/* New chat (+) next to the title; close (X) stays alone on the right in
   panel-actions (margin-left:auto — user report 2026-07-04). On desktop panel-title
   keeps flex:1, so it is already right-aligned; the rule kicks in on mobile. */
.dm-sidebar-head .panel-actions {
  margin-left: auto;
}
.dm-sidebar-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px 10px;
}

/* Main header */
.dm-main-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dm-main-header-profile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}
.dm-main-header-profile:hover .dm-main-title {
  text-decoration: underline;
}
.dm-main-head .dm-main-avatar {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.dm-main-head-empty .dm-main-title {
  color: var(--text-muted);
  font-weight: 600;
}
.dm-main-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

/* Main body — thread/compose/empty container */
.dm-main-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 14px 18px;
  overflow: hidden;
}

/* Empty state — visible on desktop; on mobile the user is already in the list */
.dm-main-empty {
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
  gap: 10px;
}
.dm-main-empty svg {
  color: var(--text-dim);
  margin-bottom: 4px;
}
.dm-main-empty h4 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
}
.dm-main-empty p {
  margin: 0;
  max-width: 280px;
  font-size: 0.82rem;
  line-height: 1.45;
}
/* ════════════════════════════════════════════════════════════════
   Notifications panel
   - Dropdown attached to the bell button in the header
   - Desktop: anchored below the bell (via positionPanel)
   - Mobile: full-width bottom sheet
   - Backdrop on mobile only; on desktop it closes on outside click
   ════════════════════════════════════════════════════════════════ */
.notif-panel {
  position: fixed;
  z-index: 96; /* same tier as messages-sheet (95); notifications on top */
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: min(560px, calc(100dvh - 80px));
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.18s var(--ease),
    transform 0.18s var(--ease);
  pointer-events: none;
}
.notif-panel[hidden] {
  display: none;
}
.notif-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.notif-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease);
}
.notif-backdrop[hidden] {
  display: none;
}
.notif-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}
/* No backdrop on desktop — the outside-click handler closes it */
@media (min-width: 721px) {
  .notif-backdrop {
    display: none !important;
  }
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.notif-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.notif-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.notif-mark-all {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 5px 9px;
  font-size: 0.74rem;
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 0.12s,
    border-color 0.12s,
    background 0.12s;
}
.notif-mark-all:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.notif-close {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notif-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.notif-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  transition: background 0.12s;
}
.notif-item:last-child {
  border-bottom: 0;
}
.notif-item:hover {
  background: var(--surface-2);
}
.notif-item.is-unread {
  background: color-mix(in srgb, var(--reddit) 6%, transparent);
}
.notif-item.is-unread:hover {
  background: color-mix(in srgb, var(--reddit) 10%, transparent);
}

.notif-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notif-avatar svg {
  border-radius: 999px;
}

.notif-body {
  flex: 1 1 auto;
  min-width: 0;
}
.notif-text {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text);
  word-break: break-word;
}
.notif-text strong {
  font-weight: 600;
}
.notif-others {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-left: 2px;
}
.notif-snippet {
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  border-left: 2px solid var(--border);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif-meta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.notif-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--reddit);
}

.notif-mark-one {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: 999px;
}
.notif-mark-one:hover {
  color: var(--text);
}

/* Mobile: full-width bottom sheet */
@media (max-width: 720px) {
  .notif-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 78dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
    transform: translateY(100%);
  }
  .notif-panel.is-open {
    transform: translateY(0);
  }
}
/* ════════════════════════════════════════════════════════════════
   Forum thread center view
   Opens inside main instead of the feed; closes when "Back" is pressed.
   ════════════════════════════════════════════════════════════════ */
.thread-center-view {
  width: 100%;
}
.thread-center-view[hidden] {
  display: none;
}
.thread-center-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 22px;
}
.thread-center-inner .btn-back {
  margin-bottom: 14px;
}
.thread-center-inner .thread-detail,
.thread-center-inner .thread-form {
  margin: 0;
}

/* Active thread (open in the center) is highlighted in the left list */
.thread-row.is-active {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.thread-row.is-active .thread-title {
  color: var(--accent);
}

/* "Back" button is sticky: when the user scrolls down it stays pinned
   right below the header — no need for a separate floating chip, and it
   always appears in its original horizontal position (top of the center column). */
.thread-center-inner .btn-back {
  position: sticky;
  top: calc(var(--header-h) + 8px);
  z-index: 5;
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  /* margin-bottom is inherited (14px) — even when not sticky-pinned, the
     title still gets breathing room in normal flow */
}
.thread-center-inner .btn-back:hover {
  background: var(--surface-hover);
}

/* On the new-thread form (Agenda + Forum share the same markup: btn-back + .thread-form)
   the back button should sit HIGHER (user request 2026-07-04). ACTUAL root cause
   (measured with headless Chromium): sticky `top: calc(var(--header-h) + 8px)` acts
   like a CLAMP — when the button's natural position was above this line, it got
   pushed DOWN even at scroll 0 (on narrow viewports --header-h 154px ≫ the real header;
   the same class of --header-h over-estimation bug as in round 6). The form is short →
   sticky is unnecessary anyway: switch to static + pull it above the card + add
   breathing room below. Detail views are unaffected (:has(+ .thread-form) only matches the form). */
.thread-center-inner > .btn-back:has(+ .thread-form) {
  position: static;
  margin-top: -8px;
  margin-bottom: 20px;
}

/* D-FORUM-3: the back button is now INSIDE the sticky header → cancel its own sticky
   (nested sticky is prevented; the sticky header is already pinned to the top of every page). */
.thread-center-inner .thread-detail-header .btn-back {
  position: static;
  top: auto;
  z-index: auto;
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════
   User profile card (small pop-up opened by clicking the avatar)
   ════════════════════════════════════════════════════════════════ */
.comment-avatar.is-clickable {
  cursor: pointer;
  /* In the flex column (comment-left) align left/top; reset to SVG size. */
  display: inline-flex;
  align-self: start;
  width: max-content;
  height: max-content;
  padding: 0;
  line-height: 0;
  border-radius: 50%;
  transition:
    transform 0.15s var(--ease, ease),
    box-shadow 0.15s var(--ease, ease);
}
.comment-avatar.is-clickable > .avatar {
  display: block;
  border-radius: 50%;
}
.comment-avatar.is-clickable:hover,
.comment-avatar.is-clickable:focus-visible {
  transform: scale(1.06);
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}

.profile-card-pop {
  position: fixed;
  /* 990: ABOVE panels/headers (≤200) + profile (950) / settings (955) pages,
     BELOW confirm/report (1000) — so the block-confirmation card can cover it
     (user report 2026-07-04: at 1100 it stayed under the confirmation card). */
  z-index: 990;
  min-width: 224px;
  max-width: 280px;
  padding: 16px 16px 14px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  transform-origin: 50% top;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
  pointer-events: none;
}
.profile-card-pop.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.profile-card-pop[data-placement='above'] {
  transform-origin: 50% bottom;
}

.profile-card-pop .pcp-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 50%;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.profile-card-pop .pcp-close:hover {
  color: var(--text);
  background: var(--border-soft);
}
/* Block corner icon — mirrors the close ✕ on the LEFT (user request 2026-07-04).
   Neutral gray; red (downvote) on hover/when blocked. */
.profile-card-pop .pcp-block {
  position: absolute;
  top: 6px;
  left: 8px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 50%;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.profile-card-pop .pcp-block:hover {
  color: var(--downvote);
  background: color-mix(in srgb, var(--downvote) 12%, transparent);
}
.profile-card-pop .pcp-block.is-blocked {
  color: var(--downvote);
}

/* HORIZONTAL header (user request 2026-07-04, round 3): avatar on the LEFT, name +
   membership date left-aligned next to it. padding-top drops below the corner icons
   (✕ / block) — does not overlap the avatar. */
.profile-card-pop .pcp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-top: 14px;
  text-align: left;
}
.profile-card-pop .pcp-avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.profile-card-pop .pcp-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}
/* Name = clickable button → profile page (user request 2026-07-04:
   tap the name directly instead of a separate "View profile" row). */
.profile-card-pop .pcp-name {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  text-align: left;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease;
}
.profile-card-pop .pcp-name:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* @username sub-line, shown only when a display_name differs from the handle. */
.profile-card-pop .pcp-handle {
  font-size: 0.8rem;
  color: var(--text-dim);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card-pop .pcp-meta {
  margin-top: 2px;
  font-size: 0.74rem;
  color: var(--text-dim);
  text-align: left;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Card stat row — boxless single-line text: "N Followers · N Total likes"
   (plain hover-card redesign, X/Slack pattern · user request 2026-07-04) */
.profile-card-pop .pcp-stats {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0 0 14px;
}
.profile-card-pop .pcp-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}
.profile-card-pop .pcp-stat + .pcp-stat::before {
  content: '·';
  margin-right: 8px;
  color: var(--text-dim);
  font-weight: 700;
}
.profile-card-pop .pcp-stat-value {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.profile-card-pop .pcp-stat-value.is-neg {
  color: var(--downvote);
}
.profile-card-pop .pcp-stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
/* Actions: primary "Follow" (filled pill) + secondary "Send message" (outline).
   Compact: auto width + icon; row CENTERED (user request 2026-07-04:
   "nudge follow a bit to the right" — should not stick to the left). */
.profile-card-pop .pcp-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.profile-card-pop .pcp-actions button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 13px;
  font-size: 0.79rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    filter 0.15s ease,
    opacity 0.15s ease;
}
.profile-card-pop .pcp-actions button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.profile-card-pop .pcp-follow-icon {
  display: inline-flex;
}
.profile-card-pop .pcp-follow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.profile-card-pop .pcp-follow:hover:not(:disabled) {
  filter: brightness(1.07);
}
/* Following: fill drops (neutral outline); hover shows "unfollow" intent in red */
.profile-card-pop .pcp-follow.is-following {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.profile-card-pop .pcp-follow.is-following:hover:not(:disabled) {
  background: color-mix(in srgb, #ef4444 10%, transparent);
  border-color: #ef4444;
  color: #ef4444;
  filter: none;
}
.profile-card-pop .pcp-follow:disabled,
.profile-card-pop .pcp-follow[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.55;
}
.profile-card-pop .pcp-message:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.profile-card-pop .pcp-message:disabled,
.profile-card-pop .pcp-message[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.5;
}
.profile-card-pop button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .profile-card-pop {
    transition: none;
  }
}

@media print {
  .profile-card-pop {
    display: none !important;
  }
}

/* Error state — retry button (so the user doesn't get stuck on a fetch error). */
.retry-btn {
  margin-top: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.retry-btn:hover {
  border-color: var(--text-muted);
}
.retry-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Touch device (finger): enlarge touch targets + make hover-only actions visible.
   Visual icon size is preserved, only the tap area grows. pointer:coarse only. */
@media (pointer: coarse) {
  .icon-btn {
    min-width: 40px;
    min-height: 40px;
  }
  .icon-btn-sm,
  .notif-mark-one,
  .dm-bubble-del,
  .pcp-close,
  .pcp-block,
  .quote-btn,
  .quote-card-remove {
    min-width: 36px;
    min-height: 36px;
  }
  /* The hover-only DM delete button was invisible on touch -> now always visible (mobile
     functionality loss). 2026-07-03 (user report): the 36px semi-transparent circle overlapped
     INTO the bubble and covered the text -> moved to the LEFT of the bubble (outside);
     no background, small gray icon. Our own messages are right-aligned (max-width 78%)
     -> there's always room on the left. */
  .dm-bubble-mine .dm-bubble-del {
    opacity: 1;
    top: 50%;
    right: calc(100% + 4px);
    transform: translateY(-50%);
    background: transparent;
    color: var(--text-muted);
    display: grid;
    place-items: center;
  }
  .dm-bubble-del:hover {
    background: transparent;
    color: var(--danger);
  }
}

/* ── D-MOD-2: user blocking (blocked comment collapse + block button) ── */
.comment-blocked .comment-blocked-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-style: italic;
}
.comment-blocked-show {
  font-style: normal;
}
.dm-block-btn.is-blocked,
.pcp-block.is-blocked {
  color: var(--danger);
}
/* Info note that replaces the composer when blocked */
.dm-composer-blocked {
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 0.88rem;
  text-align: center;
}
/* Long (spaceless) username shouldn't overflow the toast (general improvement) */
.toast {
  overflow-wrap: anywhere;
}
/* The 3rd action (block) on the profile card shouldn't look asymmetric in a single column */
.pcp-block {
  grid-column: 1 / -1;
}

/* ── Agenda/Forum panel header: row 1 = toggle+button, row 2 = search ── */
.forum-head {
  flex-wrap: wrap;
  row-gap: 8px;
  padding: 10px 12px 10px;
}
.forum-head .panel-title {
  flex: 0 0 auto;
}
/* Search box: centered in the remaining space (margin auto); the + button stays at the right edge */
.forum-search-wrap {
  flex: 0 0 100%; /* full row width → drops to its own line */
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
}
.forum-search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-dim);
  pointer-events: none;
}
.forum-search {
  width: 100%;
  height: 28px;
  padding: 0 12px 0 30px; /* left: room for the search icon */
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.forum-search::placeholder {
  color: var(--text-dim);
}
.forum-search:focus-visible {
  border-color: var(--border-strong);
}
.forum-search-info {
  padding: 4px 4px 10px;
  font-size: 0.74rem;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
/* ─── Part A/B · Guest "join" panel + Google button + "or" separator ─── */
.guest-cta {
  position: sticky;
  top: calc(var(--header-h) + 12px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 18px);
  /* overflow: horizontal hidden (cuts glow bleed), vertical auto + max-height → on a
     short screen the long panel scrolls within the card (side-panel pattern); normally
     no scrollbar appears. */
  overflow: hidden auto;
  max-height: calc(100vh - var(--header-h) - 24px);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
/* soft brand glow at the top — visual appeal (abs; .guest-cta sticky = positioning context) */
.guest-cta-glow {
  position: absolute;
  inset: -45% -25% auto -25%;
  height: 200px;
  background: radial-gradient(60% 100% at 50% 0%, var(--accent-soft), transparent 72%);
  pointer-events: none;
}
.guest-cta > *:not(.guest-cta-glow) {
  position: relative;
}
.guest-cta-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.guest-cta-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}
.guest-cta-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.guest-cta-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.guest-cta-sub {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.guest-cta-features {
  list-style: none;
  margin: 2px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.guest-cta-features li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.85rem;
  font-weight: 500;
}
.gc-feat-ic {
  flex-shrink: 0;
  color: var(--accent);
}
.guest-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 4px;
}
.guest-cta-btn {
  width: 100%;
  justify-content: center;
}
.guest-cta-legal {
  margin: 2px 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--text-faint, var(--text-dim));
  text-align: center;
}
.guest-cta-legal a {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.guest-cta-legal a:hover {
  color: var(--text);
}
.guest-cta-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.gc-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
}
/* Brand-color dot per source (decorative; keys set by guest-cta.js data-src). */
.gc-src::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gc-dot, var(--text-dim));
}
.gc-src[data-src='reddit'] {
  --gc-dot: #ff4500;
}
.gc-src[data-src='youtube'] {
  --gc-dot: #ff0000;
}
.gc-src[data-src='x'] {
  --gc-dot: var(--text);
}
.gc-src[data-src='eksi'] {
  --gc-dot: #53a245;
}
.gc-src[data-src='telegram'] {
  --gc-dot: #26a5e4;
}
.gc-src[data-src='trends'] {
  --gc-dot: #4285f4;
}
.gc-src[data-src='hackernews'] {
  --gc-dot: #ff6600;
}
.gc-src[data-src='bluesky'] {
  --gc-dot: #0085ff;
}
.gc-src[data-src='mastodon'] {
  --gc-dot: #6364ff;
}
.gc-src[data-src='donanimhaber'] {
  --gc-dot: #e2001a;
}
.gc-src[data-src='onedio'] {
  --gc-dot: #f43f5e;
}

/* "Continue with Google" button — shared by the auth modal + guest panel */
.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.btn-google:hover {
  background: var(--surface-hover);
  border-color: var(--text-dim);
}
.btn-google .g-icon {
  flex-shrink: 0;
}
/* "Continue with Apple" — same neutral shell as .btn-google (markup uses the
   class pair "btn-google btn-apple"); only the glyph's optical alignment differs. */
.btn-apple .g-icon {
  margin-top: -2px;
}

/* "or" separator (between the Google button ↔ email form) */
.auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.auth-or::before,
.auth-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
/* ═══════════════════════════════════════════════════════════════
   D-FORUM-3 · Agenda / Forum section split
   ═══════════════════════════════════════════════════════════════ */

/* Segment toggle in the left panel header — extra override */
.forum-head {
  column-gap: 6px;
}
.forum-seg {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-right: auto; /* pushes the + button to the right */
}
.forum-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.forum-seg-btn svg {
  width: 15px;
  height: 15px;
}
.forum-seg-btn:hover {
  color: var(--text);
}
.forum-seg-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.forum-seg-btn.is-active {
  background: var(--surface);
  color: var(--text);
}
/* Active label is ALWAYS --text → WCAG AA contrast in both themes (eksi/reddit text
   fell just short of AA in the light theme). State is conveyed via pill background +
   --text label + aria-pressed; the section color is ONLY on the icon (color alone
   is never the sole indicator). */
.forum-seg-agenda.is-active svg {
  color: var(--eksi);
}
.forum-seg-forum.is-active svg {
  color: var(--reddit);
}

/* Forum list card: title + OP description excerpt (Agenda row stays plain) */
.thread-card .thread-body {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.thread-card-excerpt {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-dim);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.thread-card .thread-meta {
  width: 100%;
}

/* Forum thread detail · OP card (author + time + description body) */
/* ── Forum post: Reddit-like flat design (no box/colored border) ── */
.forum-post {
  padding: 16px 0 4px;
}

/* Top meta row: author on the left, actions on the right */
.forum-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

/* Author button: avatar + username + time, inline */
.forum-post-author {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text);
  text-align: left;
}
.forum-post-author:hover .forum-post-username {
  text-decoration: underline;
}
.forum-post-author:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.forum-post-username {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}
.forum-post-time {
  font-size: 0.76rem;
  color: var(--text-dim);
}

/* Actions: comment counter + report + delete */
.forum-post-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Backward compatibility — no longer used but test files may reference it */
.forum-op-author {
  display: none;
}
.forum-op-meta {
  display: none;
}
.forum-op-user {
  display: none;
}
.forum-op-time {
  font-size: 0.76rem;
  color: var(--text-dim);
}
.forum-op-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0 0 14px;
}

/* ═══ D-GF-2 · Forum vote widget (up/score/down) ═══ */
.vote-widget {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  user-select: none;
  margin-left: -4px;
}
.vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.vote-btn:hover {
  background: var(--border-soft);
  color: var(--text);
}
.vote-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.vote-up.is-active {
  color: var(--upvote);
  background: color-mix(in srgb, var(--upvote) 14%, transparent);
}
.vote-down.is-active {
  color: var(--downvote);
  background: color-mix(in srgb, var(--downvote) 14%, transparent);
}
.vote-score {
  min-width: 14px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  transition: color var(--t-fast) var(--ease);
}
/* Score color should match the active vote direction */
.vote-widget:has(.vote-up.is-active) .vote-score {
  color: var(--upvote);
}
.vote-widget:has(.vote-down.is-active) .vote-score {
  color: var(--downvote);
}
.vote-score-zero {
  min-width: 0;
}
/* Forum post vote footer — vote widget + comment count side by side */
.forum-op-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* Forum list sort toggle (D-GF-2) */
.forum-sort {
  display: flex;
  gap: 4px;
  padding: 6px 4px 8px;
}
.forum-sort-btn {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.forum-sort-btn:hover {
  color: var(--text);
}
.forum-sort-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.forum-sort-btn.is-active {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.thread-card-score {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════
   D-GF-3 · Poll
   ═══════════════════════════════════════════════════════════════ */
.forum-op-poll:not(:empty) {
  margin-top: 12px;
  margin-bottom: 14px;
}
.poll {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--surface-2);
}
.poll-q {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}
.poll-multi-tag {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: middle;
}
.poll-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.poll-opt {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  font-size: 0.86rem;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.poll-opt:hover {
  border-color: var(--border-strong);
}
.poll-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.poll-opt.is-selected {
  border-color: var(--reddit);
}
.poll-opt[disabled] {
  cursor: default;
}
.poll-opt-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--reddit) 16%, transparent);
  z-index: 0;
  transition: width var(--t-fast) var(--ease);
}
.poll-opt-result.is-selected .poll-opt-bar {
  background: color-mix(in srgb, var(--reddit) 28%, transparent);
}
.poll-opt-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.poll-opt-label {
  overflow-wrap: anywhere;
}
.poll-opt-pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  flex-shrink: 0;
}
.poll-opt-check {
  color: var(--reddit);
  display: inline-flex;
  vertical-align: middle;
}
.poll-opt-check svg {
  width: 13px;
  height: 13px;
}
.poll-foot {
  margin-top: 8px;
  font-size: 0.74rem;
  color: var(--text-dim);
}

/* Poll-creation composer (new-thread form) */
/* D-QUOTE-2 · composer attach row: Poll + Link buttons SIDE BY SIDE,
   the panels they open sit full-width BELOW them (display:contents + flex-wrap;
   .pv-aside pattern). */
.composer-attach-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 4px 0;
}
.composer-attach-row .poll-composer,
.composer-attach-row .link-composer {
  display: contents;
}
.composer-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.composer-attach-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.composer-attach-btn.is-active {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-active);
}
.poll-multi-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
}
.poll-composer-body,
.link-composer-body {
  flex-basis: 100%;
  order: 3;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.link-composer-body {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.link-url-input,
.link-title-input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
}
.link-url-input {
  flex: 2 1 220px;
}
.link-title-input {
  flex: 1 1 160px;
}
.poll-question,
.poll-opt-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
}
.poll-opt-inputs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.poll-duration {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.poll-duration select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
}

/* Forum card poll badge */
.thread-poll-badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--reddit);
  border: 1px solid color-mix(in srgb, var(--reddit) 40%, var(--border));
  border-radius: 999px;
  padding: 0 7px;
}

/* Visually hidden but exposed to screen readers (D-GF-3 poll aria-live region) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══ D-GF-4 · Agenda entry #<id> reference + copyable badge (Eksi green) ═══ */
.entry-ref {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--eksi-text);
  font: inherit;
  cursor: pointer;
  text-decoration: underline; /* at-rest non-color indicator (1.4.1) */
}
.entry-ref:hover {
  text-decoration: underline;
}
.entry-ref:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 2px;
}
.entry-id {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  flex-shrink: 0;
}
.entry-id:hover,
.entry-id:focus-visible {
  color: var(--eksi-text);
}
.entry-id:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 2px;
}

/* ── Entry ⋮ menu (Agenda) ─────────────────────────────── */
.entry-menu {
  position: relative;
  display: inline-flex;
  margin-left: auto;
  flex-shrink: 0;
}
.entry-menu-btn {
  background: none;
  border: 0;
  padding: 0 3px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
}
.entry-menu-btn:hover,
.entry-menu-btn[aria-expanded='true'] {
  color: var(--text);
  background: var(--hover-bg);
}
.entry-menu-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.entry-menu-drop {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  /* Previously an UNDEFINED token was used → background was treated as invalid
     and the menu stayed TRANSPARENT (the text underneath showed through).
     Locked by tests/css-vars.test.js. */
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  z-index: 60;
  min-width: 160px;
  /* NO vertical padding: so the item hover background fills the menu edge to edge
     (there was a 4px band top/bottom left over); hover overflow spilling into the
     rounded corner gets clipped by overflow:hidden. */
  padding: 0;
  overflow: hidden;
}
.entry-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 9px 14px;
  color: var(--text);
  font-size: 0.875rem;
  cursor: pointer;
  white-space: nowrap;
}
.entry-menu-item:hover {
  background: var(--hover-bg);
}
.entry-menu-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* The ⋮ menu on the Discussion (Forum) comment footer opens ONLY in the mobile
   Reddit view (the ≤920px block below sets its display); on desktop the inline
   report/delete buttons are visible and ⋮ stays hidden. */
.comment-menu {
  display: none;
}

/* ── D-IMG-1 · thread image: composer attach + Forum OP detail ─────────
   The composer button/panel reuses the link-composer classes (same row,
   same expand pattern); only the file label + previews are new. */
.composer-attach-row .image-composer {
  display: contents;
}
/* File pick = a real pill button (user request 2026-07-21 — the old dashed
   label was too faint): icon + bold label + a muted "500 KB" badge; the pill
   shape echoes the neighboring Apply button. */
.image-file-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}
.image-file-label svg {
  flex: none;
  opacity: 0.85;
}
.image-file-label:hover {
  border-color: var(--accent);
  background: var(--surface-active);
  box-shadow: 0 1px 8px color-mix(in srgb, var(--accent) 14%, transparent);
}
.image-file-label:active {
  transform: translateY(1px);
}
/* The input is visually hidden → the keyboard focus ring lives on the label. */
.image-file-label:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.image-file-hint {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-dim) 14%, transparent);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-dim);
}
/* Visually hidden but still focusable/announced (label wraps the input). */
.image-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.image-attach {
  position: relative;
  max-width: 320px;
}
.image-attach-preview {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: var(--surface-2);
}
/* Detail (Forum OP): right under the title, a Reddit-style full-width media
   band (user request 2026-07-21) — the image is CENTERED; when it doesn't fill
   the width, the SAME image blurred fills the sides (the card-view .thumb-bg
   recipe from 11-layout-views.css). Capped height; full image in a new tab. */
.thread-image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.thread-image-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(38px) brightness(0.55) saturate(1.25);
  transform: scale(1.25);
  z-index: 0;
}
.thread-image {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
}
/* ═══════════════════════════════════════════════════════════════
   D-GF-5 · Mobile bottom menu (bottom-nav) + new-thread FAB (≤920px)
   Fully hidden on desktop (segment toggle is preserved, no regression).
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bottom-nav-h: 56px;
}

.bottom-nav {
  display: none;
}
.fab {
  display: none;
}

@media (max-width: 920px) {
  /* ── Bottom menu: fixed, full width, iOS safe-area inset ── */
  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 85;
    display: flex;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.18);
  }
  .bottom-nav-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 44px;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--bn-inactive);
    cursor: pointer;
    font: inherit;
    transition: color var(--t-fast) var(--ease);
  }
  .bottom-nav-tab .bn-icon {
    display: inline-flex;
  }
  .bottom-nav-tab .bn-icon svg {
    width: 23px;
    height: 23px;
  }
  .bottom-nav-tab .bn-label {
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1;
  }
  .bottom-nav-tab[aria-current='page'] {
    color: var(--accent);
  }
  .bottom-nav-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
    border-radius: 8px;
  }

  /* Page content shouldn't sit behind the fixed nav */
  body {
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  }

  /* Hamburger hidden — the Agenda/Forum tabs open the forum (single mobile navigation) */
  .drawer-toggle-left {
    display: none !important;
  }

  /* The bottom menu takes over mobile navigation → the footer (shortcuts + sources +
     rules/privacy) is hidden. Rules/Privacy links remain accessible from the profile menu. */
  .site-footer {
    display: none;
  }

  /* When a thread (detail/new) is open the feed search in the header is hidden —
     it's non-functional while inside a thread and belongs to the feed; the drawer
     list has its own separate search. */
  body.forum-detail-open .header-center {
    display: none;
  }

  /* Scroll-responsive bars (scroll-bars.js → body.bars-hidden): on scroll down,
     the header (sticky) slides up and bottom-nav (fixed) slides down; they come back
     on scroll up / at the very top. transform only → no layout reflow. */
  .site-header {
    transition:
      transform 0.25s var(--ease),
      background var(--t) var(--ease),
      border-color var(--t) var(--ease);
  }
  .bottom-nav {
    transition: transform 0.25s var(--ease);
  }
  body.bars-hidden .site-header {
    transform: translateY(-100%);
  }
  body.bars-hidden .bottom-nav {
    transform: translateY(100%);
  }
  /* When the Agenda/Forum drawer is open the bottom menu must stay FIXED (the
     counterpart of the profile `body.pv-lock` pattern): the drawer is positioned
     `top:0 ↔ bottom:nav` → it reserves a gap at the bottom the height of the nav
     and the bottom menu sits there for navigation. If the user scrolls down on the
     feed (bars-hidden engaged) and then opens Agenda/Forum, the nav would slide out
     of its slot; the blurred `.drawer-backdrop` + the feed would show through the
     gap (user report 2026-07-05), and with `body.drawer-open` overflow:hidden there
     is no window scroll to bring it back → tapping the backdrop closed the drawer
     and revealed the feed. transform:none locks the nav into its slot. Equal
     specificity (0,2,1) → it comes AFTER the bars-hidden rule and wins by source
     order (locked by tests/bottom-nav.test.js). Detail view is exempt:
     `body.forum-detail-open .bottom-nav { display:none }` already removes the nav
     (transform is irrelevant there). */
  body.drawer-open .bottom-nav {
    transform: none;
  }

  /* Forum panel (drawer) → FULL-WIDTH list; sits above the nav (no overlap) */
  .side-panel.left {
    width: 100%;
    max-width: 100%;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  }

  /* Mobile FULL PAGE (user request): switching between Agenda/Forum sections is
     ONLY via the bottom menu. The top segment toggle + close (X) + duplicate
     new-thread (+) are hidden — only search remains in the page header; new
     thread opens from the FAB. ≤920px only. */
  .side-panel.left .drawer-close,
  .forum-head .forum-seg,
  .forum-head .panel-actions {
    display: none;
  }

  /* Full-page list (user: not a "screen within a screen"): the outer black gap +
     card border/shadow are removed → the panel fills the screen edge to edge, a
     single surface. The search header is FIXED (flex:0), only the list
     (.panel-body) scrolls — same model as desktop. */
  .side-panel.left {
    padding: 0;
    border-right: 0;
    box-shadow: none;
    background: var(--surface);
    overflow: hidden;
  }
  .side-panel.left > #forumPanel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
  }
  #forumPanel > .panel-head {
    flex: 0 0 auto;
  }
  #forumPanel > .panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* FAB: only on the Agenda/Forum list; bottom-right, above the nav */
  body.forum-list-active .fab {
    position: fixed;
    right: 16px;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 16px);
    z-index: 92;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    background: var(--accent);
    color: var(--accent-contrast);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
  }
  body.forum-list-active .fab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  /* Detail/new view: bottom menu + FAB are hidden; the nav's reserved space is removed */
  body.forum-detail-open .bottom-nav,
  body.forum-detail-open .fab {
    display: none;
  }
  body.forum-detail-open {
    padding-bottom: 0;
  }
}

@media (min-width: 921px) {
  /* Desktop/wide tablet: bottom menu + FAB NEVER visible */
  .bottom-nav,
  .fab {
    display: none !important;
  }
}

/* ═══ Mobile Reddit view · Forum (discussion) comments (user request ·
   2026-07-03) ═════════════════════════════════════════════════════════════
   Reference: Reddit mobile screenshot — full-width comments, thick strips
   separating top-level comments, avatar+name+time in the header, right-aligned
   action set [⋮ · Reply · ↑n↓], replies indented with a left vertical thread
   line, fixed composer at the bottom. ONLY ≤920px + ONLY .comments-discussion
   (Forum section) — Agenda (Eksi-flat) and feed-card comments are UNCHANGED;
   desktop is UNCHANGED (all rules live in this media block). */
@media (max-width: 920px) {
  /* Shell: the card padding and border drop → comments go edge to edge.
     Detail opens inside #threadCenterView (.thread-center-view, within main) —
     NOT the drawer (adversarial review HIGH-1: the old .panel-body anchor was
     dead code). .layout gives 14px side padding at ≤920 → a negative margin
     pushes it out to the edge. */
  .thread-center-view:has(.comments-discussion) {
    margin: 0 -14px;
    /* base width:100% + negative margin shifts only LEFT (a 28px dead band was
       left on the right — user report "gap on the right") → auto: bleeds on
       both sides. */
    width: auto;
    /* When the thread is SHORT and the page falls short of the viewport, the
       sticky composer container ended up stuck partway down with the body
       background (a black band) showing below it (user report, rounds 5-6) →
       the column now fills the viewport; the composer settles to the bottom via
       margin-top:auto. Round 6: var(--header-h) is NOT USED — at ≤760 it's 154px
       (two-row header) but in the detail view the second row is hidden (real
       height ~68px) → using var() cut the column 86px SHORT and the band
       reappeared. 82px = single-row header (68) + .layout top padding (14)
       MINIMUM: it can never fall short; if the header is genuinely taller, it
       just scrolls a little extra (the safe direction). Round 7: 82→68 — in the
       760-920 range the header measured ~54px (the 82px assumption left the
       column 10px short); 68 = shortest header (54) + layout top padding (14)
       floor. */
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 68px);
    min-height: calc(100dvh - 68px);
  }
  .thread-center-view:has(.comments-discussion) .thread-center-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .thread-center-view:has(.comments-discussion) .thread-detail {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .thread-center-view:has(.comments-discussion) .thread-detail > .comments-discussion {
    flex: 1 1 auto;
  }
  .thread-center-view:has(.comments-discussion) .thread-center-inner {
    border: 0;
    border-radius: 0;
    padding: 10px 0 0;
  }
  .thread-center-view:has(.comments-discussion) .forum-post {
    padding: 0 12px 4px;
  }
  .comments-discussion > .comments-head {
    padding: 2px 12px 8px;
    margin-bottom: 0;
  }

  /* Thick divider strip between top-level comments (Reddit bands). Strip
     color = page background (--bg): it stands out as a darker band against
     the panel surface (surface). */
  .comments-discussion .comment-list {
    gap: 0;
  }
  .comments-discussion .comment-list > .comment {
    border-top: 7px solid var(--comment-strip);
    padding: 0 12px 2px;
  }

  /* Comment layout: avatar+name+time in a single header row, body FULL width
     (the left column drops). .comment-left display:contents → the avatar and
     ⊖ are positioned absolutely relative to comment-top (position:relative). */
  .comments-discussion .comment-top {
    display: block;
    position: relative;
    padding: 10px 0 0;
  }
  .comments-discussion .comment-reply > .comment-top {
    padding: 6px 0 0;
  }
  .comments-discussion .comment-top > .comment-left {
    display: contents;
  }
  .comments-discussion .comment-top > .comment-left > .comment-avatar {
    position: absolute;
    top: 10px;
    left: 0;
    width: 28px;
    height: 28px;
  }
  .comments-discussion .comment-reply > .comment-top > .comment-left > .comment-avatar {
    top: 6px;
  }
  .comments-discussion .comment-thread-line {
    display: none;
  }
  /* ⊖/⊕ collapse: Reddit has NO circle on the right (user: "wasted space on
     the right") → the button is hidden on mobile; collapsing happens via a
     header tap instead (social.js header-tap, ownCollapseBtn.click() → same
     aria/form logic). Desktop ⊖ is unchanged. */
  .comments-discussion .ca-collapse {
    display: none;
  }
  .comments-discussion .comment-head {
    min-height: 28px;
    align-items: center;
    padding-left: 36px;
    padding-right: 0;
    margin-bottom: 2px;
  }
  .comments-discussion .comment-user {
    overflow-wrap: anywhere;
  }
  .comments-discussion .comment-text {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 2px;
  }

  /* Action row: right-aligned [⋮ · Reply · ↑n↓] (order matches the reference
     screenshot); inline report/delete are hidden → moved into the ⋮ menu. */
  .comments-discussion .comment-actions {
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    padding-bottom: 2px;
  }
  .comments-discussion .comment-actions > .ca-btn[data-action='report'],
  .comments-discussion .comment-actions > .ca-btn[data-action='delete'] {
    display: none;
  }
  .comments-discussion .comment-actions .comment-menu {
    display: inline-flex;
    order: 1;
    margin-left: 0;
  }
  .comments-discussion .comment-actions .entry-menu-btn {
    padding: 5px 9px;
  }
  .comments-discussion .comment-actions .entry-menu-btn svg {
    width: 18px;
    height: 18px;
  }
  .comments-discussion .comment-actions .ca-btn[data-action='reply'] svg {
    width: 17px;
    height: 17px;
  }
  /* Reddit: replies have no "Reply" label, icon only (top-level keeps the label) */
  .comments-discussion
    .comment-reply
    .comment-actions
    .ca-btn[data-action='reply']
    .ca-reply-label {
    display: none;
  }
  .comments-discussion .comment-actions .ca-btn[data-action='reply'] {
    order: 2;
    font-size: 0.78rem;
  }
  .comments-discussion .comment-actions .vote-widget {
    order: 3;
  }
  .comments-discussion .comment-actions .vote-btn {
    width: 26px;
    height: 26px;
  }
  .comments-discussion .comment-actions .vote-btn svg {
    width: 18px;
    height: 18px;
  }
  .comments-discussion .comment-actions .vote-widget {
    gap: 4px;
  }
  .comments-discussion .comment-actions .vote-btn,
  .comments-discussion .comment-actions .vote-btn:hover,
  .comments-discussion .comment-actions .vote-up.is-active,
  .comments-discussion .comment-actions .vote-down.is-active {
    background: transparent;
  }

  /* Replies: instead of desktop's L-connectors, Reddit's flat vertical thread
     line; same indent per level → parallel lines at nested levels. */
  .comments-discussion .comment-replies {
    margin: 0 0 0 9px;
    padding-left: 11px;
    border-left: 2px solid color-mix(in srgb, var(--text) 10%, transparent);
  }
  /* Turn off the L-connector pseudo-elements. :not(.is-optimistic):not(.is-highlighted):
     the same ::before/::after box is also used by the optimistic spinner and the
     jump-flash overlay (pseudo properties cascade per rule) → content:none on the
     state classes would have wiped out their box too; a faint leftover line
     fragment that can persist for the 1-2s state window is a deliberate tradeoff. */
  .comments-discussion
    .comment:not(.comment-reply)
    > .comment-replies
    > .comment-reply:not(.is-optimistic):not(.is-highlighted)::before,
  .comments-discussion
    .comment.comment-reply
    > .comment-replies
    > .comment-reply:not(.is-optimistic):not(.is-highlighted)::before,
  .comments-discussion
    .comment:not(.comment-reply)
    > .comment-replies
    > .comment-reply:not(.is-optimistic):not(.is-highlighted)::after,
  .comments-discussion
    .comment.comment-reply
    > .comment-replies
    > .comment-reply:not(.is-optimistic):not(.is-highlighted)::after {
    content: none;
  }
}

/* Mobile discussion composer: stays at the top in the DOM (SR/tab order is
   preserved), pinned visually to the bottom (flex order + sticky) — the
   "Join the conversation" position from the reference screenshot. The Agenda
   flat composer shares the SAME box (user request 2026-07-04):
   .comments-flat > .comment-form is grouped in — in flat mode the form is
   already at the end of the DOM + the container isn't flex, so order/
   margin-top:auto are inert there, only the sticky + appearance rules apply
   (replaces the old D-GF-5 flat sticky block). Round 4: the
   body.forum-detail-open PRECONDITION WAS REMOVED — discussion/flat only exist
   in the detail view (the gate was unnecessary) and if the class was ever
   delayed/missing for any reason, the composer lost its sticky + the body's
   nav-space reservation lagged behind, leaving a black band under the
   composer (user report). The :has rule below is the padding half of the same
   safeguard. */
@media (max-width: 920px) {
  .comments-discussion {
    display: flex;
    flex-direction: column;
  }
  .comments-discussion > .comments-head {
    order: 1;
  }
  .comments-discussion > .comment-list {
    order: 2;
  }
  .comments-flat > .comment-form,
  .comments-discussion > .comment-form {
    order: 3;
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0;
    margin-top: auto; /* eats up free space when content is short → composer stays at the bottom */
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }
  /* Input: a 999px pill clipped the text at the elliptical corners on MULTIPLE
     LINES (user report) → 18px (keeps the pill look on a single line, becomes
     a rounded rectangle as it grows). Growth ceiling is synced with the JS cap
     (OPEN_COMPOSER_MAX_H=168); once it hits the ceiling it scrolls internally
     via overflow-y → no typed line ever stays hidden. */
  .comments-flat > .comment-form .comment-input,
  .comments-discussion > .comment-form .comment-input {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 9px 16px;
    max-height: 168px;
    overflow-y: auto;
  }

  /* While the detail view is open (class-INDEPENDENT), the bottom nav space and
     nav/FAB should not remain — even if body.forum-detail-open is ever missing,
     no band forms under the composer. */
  body:has(.thread-center-view:not([hidden])) {
    padding-bottom: 0;
  }
  /* Round 7 — the ACTUAL root cause of the band (found via headless Chromium
     measurement): the base .main{padding-bottom:48px} (feed breathing room) left
     48px of background BELOW the composer in the detail view; the body/nav-space
     and min-height rounds were fighting the wrong element. Reset only while the
     Forum (discussion) detail is open. */
  main:has(.thread-center-view:not([hidden])) {
    padding-bottom: 0;
  }
  body:has(.thread-center-view:not([hidden])) .bottom-nav,
  body:has(.thread-center-view:not([hidden])) .fab {
    display: none;
  }
}

/* ── Direction-aware mobile tab transitions (2026-07-02) ─────────────────────
   Bottom menu order Feed(0)·Agenda(1)·Forum(2)·Profile(3) acts like a horizontal
   strip: moving to a tab on the right, the new screen enters from the RIGHT;
   moving left, it enters from the LEFT.
   - Feed↔Agenda/Forum: handled by the drawer's own transform (+100% above).
   - Agenda↔Forum (drawer already open): bottom-nav.js adds bn-slide-fwd/
     bn-slide-back to #forumPanel (the classes are only defined here → inert on
     desktop; .side-panel.left is overflow:hidden so there's no overflow).
   - Profile (rightmost): .pv-panel enters from the right / exits to the right;
     while open, transform is NONE (no fixed/stacking side effects).
     closeProfileModal waits 300ms before removing it. */
@media (max-width: 920px) {
  @keyframes bn-in-right {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
  @keyframes bn-in-left {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }
  #forumPanel.bn-slide-fwd {
    animation: bn-in-right 0.28s var(--ease);
  }
  #forumPanel.bn-slide-back {
    animation: bn-in-left 0.28s var(--ease);
  }

  /* Instantly prep the drawer for the back button / closing profile (drawer.js
     adds openDrawer(..., {instant:true}), removed via double-rAF). */
  .side-panel.left.no-anim {
    transition: none;
  }
}

/* NOTE: profile (.pv-modal/.pv-panel) mobile rules are NOT HERE — the base
   ".pv-modal { inset: 0 }" block comes later, so it would override a media
   rule of equal specificity here (the bug that occurred: the profile covered
   the bottom bar). See the END of the file: "Profile (pv) mobile slide + bottom
   bar spacing". */
@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
  .side-panel.left {
    transition: none;
  }
  #forumPanel.bn-slide-fwd,
  #forumPanel.bn-slide-back {
    animation: none;
  }
}

/* ── Cross-thread entry preview overlay (confirm.js pattern) ────────────── */
.epd-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
}
.epd-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.epd-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(480px, 100%);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  color: var(--text);
}
.epd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.epd-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.epd-close {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px;
  border-radius: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.epd-close:hover {
  color: var(--text);
  background: var(--hover-bg);
}
.epd-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.epd-body {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  word-break: break-word;
}
.epd-foot {
  display: flex;
  justify-content: flex-end;
}

/* ─── Feed tab "new content" dot (feed-fresh.js) — X-style ─── */
/* Due state: a small accent dot on the Feed tab icon; visible from any
   section (the bar is mobile-only, so no desktop scoping needed). */
.bottom-nav-tab .bn-icon {
  position: relative;
}
.bottom-nav-tab.bn-fresh .bn-icon::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  /* Brand gradient — matches the fresh pill (03-toolbar-main.css). */
  background: linear-gradient(135deg, var(--reddit) 0%, var(--youtube) 90%);
  border: 2px solid var(--bg-elevated);
}
/* ══ Profile modal (profile-view · 2026-07-02) ═══════════════════
   Central profile view: hero (avatar+name+membership) + stat strip
   (total likes/comments/threads/account age) + Comments|Threads tabs.
   Shares the confirm-modal skeleton (backdrop+panel). */
/* Full-screen page overlay (user decision 2026-07-02: not a modal).
   z-index 950: BELOW confirm/report modals (1000) — confirmation dialogs
   opened from the profile stay on top; bottom-nav (85) / FAB (92) are covered. */
.pv-modal {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.pv-modal.open {
  opacity: 1;
  pointer-events: auto;
}
/* While the profile page is open the background (feed) doesn't scroll — the body scrollbar is removed too. */
body.pv-lock {
  overflow: hidden;
}
.pv-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.pv-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.pv-topbar-title {
  font-size: 0.9rem;
  font-weight: 700;
}
.pv-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}
/* Two containers (2026-07-04): .pv-aside = hero+stats, .pv-main = tabs+list.
   On mobile/single-column display:contents → the children drop EXACTLY into
   the pv-scroll flow (the old single-column view is preserved 1:1). Desktop
   rules turn these into a real layout in the min-width:921px block below. */
.pv-main,
.pv-aside {
  display: contents;
}
/* Hidden-account note (when someone else is viewing) */
.pv-hidden-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
}
.pv-hidden-note strong {
  color: var(--text);
  font-size: 0.95rem;
}
.pv-hidden-note p {
  margin: 0;
  font-size: 0.8rem;
  max-width: 380px;
}
.pv-lock {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}
/* Hide-account toggle (own profile) */
.pv-hide-toggle {
  display: none !important;
  margin-top: 8px;
  align-items: center;
  gap: 6px;
  appearance: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.pv-hide-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.pv-hide-toggle.is-on {
  color: var(--downvote);
  border-color: color-mix(in srgb, var(--downvote) 55%, transparent);
}
.pv-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 24px 18px;
  background:
    radial-gradient(
      130% 150% at 0% 0%,
      color-mix(in srgb, var(--accent) 9%, transparent),
      transparent 62%
    ),
    var(--bg-elevated);
  border-bottom: 1px solid var(--border-soft);
}
.pv-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.pv-avatar .avatar {
  display: block;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.22));
}
.pv-avatar-edit {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-contrast);
  border: 2px solid var(--bg-elevated);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
}
.pv-avatar-edit:hover {
  transform: scale(1.08);
}
/* Settings gear (own profile only · user request 2026-07-15): top-right corner
   of the page on mobile, of the right identity+stats card on desktop.
   Positioning container is .pv-aside — the base display:contents does NOT
   support absolute; two media blocks (≤920 grid / ≥921 block) give it full
   width and position:relative. inset-inline-end → automatically flips to the
   top-left in RTL (ar). */
.pv-settings {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 1;
  /* One notch bigger than the icon-btn-sm base (26px) (user request 2026-07-15) */
  width: 30px;
  height: 30px;
}
.pv-id {
  min-width: 0;
}
.pv-name {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.pv-username-mob {
  display: none;
}
.pv-username-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
}
.pv-meta {
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--text-muted);
}
/* Stat strip (2026-07-04: 6 chips — karma/comments/threads/followers/following/age
   → 3 columns = 2 even rows; on narrow screens 2 columns = 3 rows) */
.pv-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-soft);
}
.pv-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  text-align: center;
  min-width: 0;
}
.pv-stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
}
.pv-stat.is-neg .pv-stat-value {
  color: var(--downvote);
}
.pv-stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.pv-skel {
  display: inline-block;
  width: 44px;
  height: 17px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 9%, transparent);
  animation: pvPulse 1.2s ease-in-out infinite;
}
@keyframes pvPulse {
  50% {
    opacity: 0.4;
  }
}
/* Tabs */
.pv-tabs {
  display: flex;
  gap: 2px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pv-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 12px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.pv-tab:hover {
  color: var(--text);
}
.pv-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.pv-tab-count {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-dim);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 5px;
  transition: all var(--t-fast) var(--ease);
}
.pv-tab:hover .pv-tab-count,
.pv-tab.is-active .pv-tab-count {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
/* List body */
.pv-body {
  overflow-y: auto;
  /* iOS safe-area: the last item on the full-screen page shouldn't sit under the home indicator */
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 180px;
}
.pv-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--bg-elevated);
}
.pv-item.is-jumpable {
  cursor: pointer;
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.pv-item.is-jumpable:hover {
  border-color: var(--border-strong);
}
.pv-item.is-jumpable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pv-item header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
  min-width: 0;
}
.pv-where {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.pv-score {
  font-weight: 700;
  white-space: nowrap;
}
.pv-score.is-neg {
  color: var(--downvote);
}
.pv-time {
  margin-left: auto;
  white-space: nowrap;
}
.pv-item p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pv-thread-title {
  font-weight: 600;
  font-size: 0.86rem;
}
.pv-kind {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  border: 1px solid;
  white-space: nowrap;
}
.pv-kind.is-agenda {
  color: var(--eksi-text);
  border-color: color-mix(in srgb, var(--eksi-text) 60%, transparent);
}
.pv-kind.is-forum {
  color: var(--reddit);
  border-color: color-mix(in srgb, var(--reddit) 60%, transparent);
}
.pv-comments-n {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.pv-comments-n svg {
  width: 12px;
  height: 12px;
}
.pv-load-more {
  margin: 4px auto 0;
  appearance: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 6px 16px;
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.pv-load-more:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
/* "Following" chip button variant (own profile only · 2026-07-04) */
.pv-stat-btn {
  appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.pv-stat-btn:hover {
  border-color: var(--border-strong);
}
.pv-stat-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Following dialog: above the profile page (950), below confirm (1000) */
.pv-fol-modal {
  position: fixed;
  inset: 0;
  z-index: 980;
  display: grid;
  place-items: center;
  padding: 20px;
}
.pv-fol-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.pv-fol-panel {
  position: relative;
  width: min(360px, 100%);
  max-height: min(480px, calc(100dvh - 48px));
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.pv-fol-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.pv-fol-head strong {
  font-size: 0.9rem;
}
.pv-fol-list {
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 120px;
}
.pv-fol-row {
  appearance: none;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: inherit;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast) var(--ease);
}
.pv-fol-row:hover {
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.pv-fol-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.pv-fol-avatar .avatar {
  display: block;
}
.pv-fol-name {
  font-weight: 600;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.pv-fol-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}
/* Narrow screen */
@media (max-width: 560px) {
  .pv-aside {
    padding: 16px 12px 10px;
    gap: 8px 12px;
  }
  .pv-name {
    font-size: 1.05rem;
  }
}

/* ── Profile stats: mobile compact (user request 2026-07-04) ───────────────
   Problem: since the 6 stats were each a boxed card, at ≤560px 3 rows × a big
   ~260px box ate up vertical space, pushing the list below (.pv-body) too far
   down. Fix: at ≤920px the stats are no longer boxes — a tight 3×2 grid without
   chrome, inside a SINGLE elevated block along with the hero (value on top,
   small label below, Instagram-style). Vertical footprint drops to roughly
   half → the list moves noticeably higher. Desktop (≥921px) is in a SEPARATE
   min-width block with a gap in between → unchanged (user: "desktop is fine,
   don't touch it"). The 6-chip + .pv-stat/.pv-stat-value/.pv-stat-label
   structure is preserved (profile-view tests). */
@media (max-width: 920px) {
  .pv-aside {
    position: relative; /* positioning container for the .pv-settings gear */
    display: grid;
    grid-template-areas:
      'avatar username'
      'avatar stats'
      'id id';
    grid-template-columns: 84px 1fr;
    align-items: center;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-soft);
    padding: 24px 20px 20px;
    gap: 8px 20px;
  }
  /* On mobile the gear follows the safe area (in self-compact the top bar is
     hidden → it's the very top-right of the page); room is left so a long
     username doesn't slide under the gear. */
  .pv-settings {
    top: calc(16px + env(safe-area-inset-top, 0px));
    inset-inline-end: 14px;
  }
  .pv-modal.pv-self-compact .pv-username-mob {
    padding-inline-end: 40px;
  }
  /* Own profile + mobile: the full-screen top bar (with just the ← back button)
     is hidden via JS (.pv-self-compact) → the hero starts right at the top of the
     screen. Top padding is added for the safe area + breathing room. On SOMEONE
     ELSE'S profile the bar + back button remain → this rule doesn't apply. */
  .pv-modal.pv-self-compact .pv-aside {
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
  }
  .pv-hero {
    display: contents !important;
  }
  .pv-avatar-wrap {
    grid-area: avatar;
    align-self: center;
  }
  .pv-username-mob {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    grid-area: username;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
    align-self: end;
    margin-bottom: -2px;
  }
  .pv-mod-badge-desk {
    display: none !important;
  }
  .pv-username-sub {
    display: none !important;
  }
  .pv-id {
    grid-area: id;
  }
  .pv-stats {
    grid-area: stats;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    align-items: center;
    align-self: start;
  }
  .pv-stat.pv-stat-comments,
  .pv-stat.pv-stat-threads,
  .pv-stat.pv-stat-age {
    display: none !important;
  }
  .pv-stat {
    background: none;
    border: none;
    border-radius: 0;
    padding: 4px 2px;
    gap: 3px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
  }
  .pv-stat-value {
    font-size: 1.12rem;
    font-weight: 700;
  }
  .pv-stat-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
  }
  .pv-tabs {
    gap: 18px !important;
  }
  .pv-name {
    font-size: 1.15rem;
    font-weight: 700;
  }
  .pv-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
  }
}

/* ── Profile desktop two columns (>920px · user decision 2026-07-04) ─────────
   Reddit-like layout: LEFT = tabs + content list, RIGHT = sticky identity +
   stats card. The base display:contents (above) preserves the mobile flow;
   this block turns the containers into a real layout only on desktop. Stats
   on desktop are NOT card-per-card: value/label pairs inside a single card.
   Kept SEPARATE from the ≤920px mobile block (min 921) → no source-order
   collision. */
@media (min-width: 921px) {
  /* THE PAGE DOESN'T SCROLL (user request 2026-07-04, round 4): only the list
     body (.pv-body) scrolls — the tabs and right card stay fixed, list items
     enter/exit under the bottom padding (pv-scroll bottom padding). The panel/
     scroll containers clip overflow; no page scrollbar ever appears. */
  /* Topbar content is aligned with the left column: padding = the grid's left
     content-edge formula (28px floor; on wide screens (100% − 1100px)/2 —
     1100 = 766+22+312). */
  .pv-topbar {
    padding: 10px max(28px, calc((100% - 1100px) / 2));
  }
  .pv-scroll {
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 766px) 312px;
    grid-template-rows: minmax(0, 1fr);
    justify-content: center;
    gap: 22px;
    max-width: none;
    padding: 22px 28px 18px;
  }
  .pv-main {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
  }
  .pv-aside {
    position: relative; /* positioning container for the .pv-settings gear */
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    /* The card is aligned with the BOTTOM LINE of the tab strip: margin-top =
       tab height (40px). Since the page doesn't scroll, sticky is UNNECESSARY —
       the card is naturally fixed. On a very short window the card scrolls
       within itself (max-height, minus the margin allowance). */
    margin-top: 40px;
    max-height: calc(100% - 40px);
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  /* Identity: vertical flow, banner-like accent gradient on top */
  .pv-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 18px 16px;
    border-bottom: none;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 76%),
      var(--bg-elevated);
  }
  .pv-id {
    width: 100%;
  }
  .pv-name {
    font-size: 1.12rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Stats: no box — two-column value/label pairs (Reddit's right rail) */
  .pv-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
    padding: 16px 18px 18px;
    border-bottom: none;
    border-top: 1px solid var(--border-soft);
  }
  .pv-stat {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
  }
  .pv-stat-value {
    font-size: 1.02rem;
  }
  .pv-stat-label {
    letter-spacing: 0.06em;
  }
  /* Left column: tabs are FIXED (page doesn't scroll), height locked at 40px —
     the right card's margin-top alignment depends on this constant. */
  .pv-tabs {
    padding: 0;
    height: 40px;
  }
  /* List = the ONLY scroller: fills the remaining height, scrolls within
     itself; 8px right padding separates the scrollbar from the content. */
  .pv-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 14px 8px 18px 0;
  }
  .pv-hidden-note {
    padding: 56px 24px;
  }
}

/* ── Profile (pv) mobile slide + bottom bar spacing (2026-07-02) ─────────────
   ⚠️ SOURCE ORDER IS CRITICAL: this block MUST come AFTER the base
   .pv-modal/.pv-panel rules above. Media queries don't add specificity — if
   the base `inset: 0` came after this at equal specificity, it would override
   the `bottom` spacing here and the profile would cover the bottom bar again
   (the bug that occurred; protected by the tests/bottom-nav.test.js ordering
   lock). Direction rule: Profile is the rightmost tab → enters/exits from the
   right. */
@media (max-width: 920px) {
  .pv-panel {
    transition: transform 0.28s var(--ease);
  }
  .pv-modal:not(.open) .pv-panel {
    transform: translateX(100%);
  }
  .pv-modal {
    /* NO FADE on mobile (user report 2026-07-04): while the panel slides, if
       the modal stayed semi-transparent the feed underneath showed through the
       panel for ~0.1s. Visibility is carried by the slide alone (pv-panel
       translateX) — the modal is always opaque; when closed the panel is
       already off-screen (background transparent, no issue). */
    opacity: 1;
    transition: none;
    /* The profile page ends ABOVE the bottom menu → the bar remains visible +
       clickable; you can leave the profile via the tabs. */
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  }
  /* Keep the bar visible even when Profile is opened over the DETAIL view:
     body.forum-detail-open hides the nav — pv-lock comes AFTER at equal
     specificity and reopens it. transform: none → so the bar doesn't stay
     stuck if profile opens while bars-hidden (scroll-hiding) is active (under
     pv-lock the window can't scroll → there's no scroll to bring it back). */
  body.pv-lock .bottom-nav {
    display: flex;
    transform: none;
  }
}

@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
  .pv-modal,
  .pv-panel {
    transition: none;
  }
}

/* ── Mobile thread detail top bar (user request · 2026-07-04) ─────────────
   In the Agenda/Forum thread DETAIL view (≤920px only) the top site-header
   (profile/messages/notifications) is fully hidden; a fixed Eksi-mobile-style
   bar takes its place: back on the left, title in the center. With
   scroll-bars.js's body.bars-hidden it slides up on scroll down and comes back
   on scroll up / at the top (same logic as header/nav — no extra JS). Desktop
   is UNCHANGED (base display:none; all behavior lives in the ≤920 media block).
   The topbar is rendered ONLY in the detail markup → absent in the new-thread/
   error views, where the header stays as-is (body:has gate). */
.thread-topbar {
  display: none;
}

@media (max-width: 920px) {
  .thread-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 88; /* below the drawer(90) — the Agenda/Forum tab can open the list above it */
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 4px 10px;
    padding-top: calc(4px + env(safe-area-inset-top));
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    transition: transform 0.25s var(--ease);
  }
  body.bars-hidden .thread-topbar {
    transform: translateY(-100%);
  }
  .thread-topbar-back {
    flex: 0 0 32px;
    margin-bottom: 0; /* the base .btn-back margin breaks vertical centering in the bar */
  }
  /* Icon is a bit larger visually (button is fixed at 32px; user request). */
  .thread-topbar-back svg {
    width: 20px;
    height: 20px;
  }
  /* Right end: an inert balance spacer in Forum, a real ⋮ menu in Agenda
     ("thread author" + Save — user request · 2026-07-04). Both are 32px
     (equal to the back button) → the title is OPTICALLY centered either way. */
  .thread-topbar-spacer {
    flex: 0 0 32px;
  }
  .thread-topbar-menu {
    flex: 0 0 32px;
    justify-content: center;
  }
  .thread-topbar-menu .entry-menu-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  .thread-topbar-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* In the detail view (while the topbar is rendered) the site-header is
     FULLY hidden — the topbar takes its place. The :has gate is class-
     INDEPENDENT (works even if forum-detail-open is missing). */
  body:has(.thread-topbar) .site-header {
    display: none;
  }
  /* The header left the flow + the topbar is fixed → content should start
     below the topbar. The 56px bar + safe-area more than covers the vanished
     sticky header's height (~54px) → the discussion column's min-height 68px
     assumption stays safe (never falls short; at most ~2px of extra scroll). */
  .thread-center-view:has(.thread-topbar) {
    padding-top: calc(56px + env(safe-area-inset-top));
  }
  /* The old in-content back button + large title moved into the topbar on
     mobile (so there's no double title/double back). On desktop both stay
     exactly as they were. */
  .thread-center-view:has(.thread-topbar) .thread-center-inner .btn-back,
  .thread-center-view:has(.thread-topbar) .thread-center-inner .thread-detail-title {
    display: none;
  }
  /* In Agenda, "thread author" + ⋮(Save) now live in the topbar menu → the old
     separate trigger/kebab is hidden on mobile (stays visible as-is on desktop;
     user request · 2026-07-04). Forum never renders these selectors (separate
     classes, see forum.js authorBtn/forum-post-acts) → unaffected. */
  .thread-center-view:has(.thread-topbar) .thread-center-inner .thread-opener,
  .thread-center-view:has(.thread-topbar) .thread-center-inner .td-toolbar-actions .thread-menu {
    display: none;
  }
}

@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
  .thread-topbar {
    transition: none;
  }
}
/* ══ Settings page (settings-page.js · 2026-07-04) ═════════════════════════
   Twin of the profile-view (.pv-*) full-screen pattern: top bar + scrollable
   sections. Its own selectors (.set-*) → don't affect the pv cascade lock.
   z-index 955: ABOVE profile (950) (settings never opens over the profile, but
   this is a guarantee), BELOW confirm/report (1000) (delete-confirmation
   toasts stay on top). */
.set-modal {
  position: fixed;
  inset: 0;
  z-index: 955;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.set-modal.open {
  opacity: 1;
  pointer-events: auto;
}
body.set-lock {
  overflow: hidden;
}
.set-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.set-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  /* The back button should align with the LEFT EDGE of the content column
     (card edge = scroll-inner 16px padding). Content is centered at
     max-width 680px → left edge = (100%-680)/2 + 16px. The section title's
     4px margin was also removed (below) → the back button + HESAP/ACCOUNT +
     card all line up on one left line. On narrow screens max() falls back to
     16px. Shared shell (moderator). */
  padding-left: max(16px, calc((100% - 680px) / 2 + 16px));
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.set-topbar-title {
  font-size: 0.95rem;
  font-weight: 700;
}
/* The scroller spans the PANEL's width → the scrollbar sits at the far right
   (classic page-scroll, Fix4). Content is centered in a separate inner
   wrapper → the scrollbar doesn't hug the content. */
.set-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* Back button alignment: on a WIDE screen the content sits in a CENTERED
   680px column; the vertical scrollbar shifted this column left by
   ~half-a-scrollbar's width, throwing it out of alignment with the (full-
   width) back button in the top bar. both-edges reserves an equal gutter on
   both sides → the column is fully re-centered and lines up with the back
   button. Apply this ONLY while centering is in effect (≥700px): on narrow/
   mobile screens the content is already left-aligned (left=0) and the button
   is aligned; adding a left gutter there created the OPPOSITE misalignment
   (the button ended up to the left of the title — user report). */
@media (min-width: 700px) {
  .set-scroll {
    scrollbar-gutter: stable both-edges;
  }
}
.set-scroll-inner {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 18px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.set-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.set-section-title {
  /* Flush with the card edge (the old 4px left margin was removed) → the title,
     cards, and the back button in the top bar all align on one left line. */
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ── Moderator panel (moderator-panel.js; shares the .set-* shell) ── */
.mod-topbar-title {
  flex: 1;
}
.mod-refresh {
  margin-left: auto;
}
.mod-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mod-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mod-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mod-chip {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--bg-subtle, rgba(127, 127, 127, 0.12));
  border-radius: 999px;
  padding: 2px 8px;
}
.mod-item-who {
  font-weight: 600;
}
.mod-item-count {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: auto;
}
.mod-item-reasons {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.mod-item-preview {
  font-size: 0.88rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-left: 2px solid var(--border-soft);
  padding-left: 10px;
  color: var(--text-primary, inherit);
}
.mod-item-note {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-muted);
}
.mod-item-time {
  font-size: 0.74rem;
  color: var(--text-muted);
}
.mod-item-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 2px;
}
/* Row that can jump to the reported content: clickable appearance */
.mod-item.is-jumpable {
  cursor: pointer;
}
.mod-item.is-jumpable:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-soft));
}
.mod-item.is-jumpable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* If the offender is a moderator, show a small "Moderator" note instead of a penalty button */
.mod-item-modnote {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 4px 8px;
}
.mod-empty {
  padding: 18px 6px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ── Moderator badge (moderator-store.js moderatorBadgeHtml; used everywhere) ── */
.mod-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  padding: 1px 7px 1px 5px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
}
.mod-badge-ic {
  flex: 0 0 auto;
}
/* compact: icon only (narrow/dense contexts) */
.mod-badge-compact {
  padding: 2px;
  gap: 0;
}
.mod-badge-compact .mod-badge-txt {
  display: none;
}

/* ── Moderator "show original" (social.js moderatorPeekHtml) ── */
.mod-peek-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 3px 0 0;
  padding: 2px 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
}
.mod-peek-toggle:hover {
  color: var(--accent);
}
.mod-peek-caret {
  display: inline-flex;
  transition: transform var(--t-fast) var(--ease);
}
.mod-peek-toggle.is-open .mod-peek-caret {
  transform: rotate(180deg);
}
.mod-peek-body {
  margin: 5px 0 2px;
  padding: 8px 10px;
  border-left: 2px solid color-mix(in srgb, var(--success) 45%, transparent);
  background: color-mix(in srgb, var(--success) 8%, transparent);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Card-like row container — thin divider between rows */
.set-rows {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  color: var(--text);
  background: none;
  border: none;
  border-top: 1px solid var(--border-soft);
  font: inherit;
  text-decoration: none;
}
.set-rows > .set-row:first-child,
.set-rows > .set-expand:first-child {
  border-top: none;
}
.set-row > svg {
  flex-shrink: 0;
  color: var(--text-muted);
}
.set-row-btn,
.set-row-link {
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.set-row-btn:hover,
.set-row-link:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}
.set-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.set-row-label {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
}
.set-row-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.3;
}
.set-row-value {
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.set-row-chev {
  flex-shrink: 0;
  color: var(--text-muted);
  display: inline-flex;
  transition: transform var(--t-fast) var(--ease);
}
.set-row-chev.is-open {
  transform: rotate(90deg);
}
.set-row-count {
  flex-shrink: 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}
/* Content-region radio list: checkmark for the selected row. */
.set-row-check {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--accent);
}
/* Accessibility section · keyboard shortcuts list (moved from the footer).
   Left column: key badge(s), right column: action label; display-only rows. */
.set-kbd-caption {
  margin: 0 0 6px;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.set-kbd-row {
  cursor: default;
}
.set-kbd-keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 62px;
}
.set-kbd-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 6px;
  font-size: 0.7rem;
  color: var(--text-muted);
}
/* Dangerous action (delete account / log out) — red accent */
.set-row-danger .set-row-label {
  color: var(--downvote);
}
.set-row-danger > svg {
  color: var(--downvote);
}
/* On/off toggle (hide account) */
.set-switch {
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 18%, transparent);
  position: relative;
  transition: background var(--t-fast) var(--ease);
}
.set-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition:
    transform var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.set-switch.is-on {
  background: var(--accent);
}
/* ON track = accent (in dark theme ≈white #f5f5f7). A white knob disappeared on
   this track ("colors too close"). Make the knob accent-contrast → white knob /
   dark track in light theme, dark knob / light track in dark theme: clear
   contrast in both themes (symmetric). */
.set-switch.is-on .set-switch-knob {
  transform: translateX(16px);
  background: var(--accent-contrast);
}
/* Dark theme: darken the smooth white track a notch (user request) — the dark
   knob still stands out clearly, and the track also looks more grounded
   against the dark background. */
[data-theme='dark'] .set-switch.is-on {
  background: #d4d4d8;
}
/* Segment (theme / language) */
.set-seg {
  flex-shrink: 0;
  display: inline-flex;
  gap: 3px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 999px;
  padding: 3px;
}
.set-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  appearance: none;
  border: none;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.set-seg-btn.is-active {
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
.set-row-control {
  justify-content: space-between;
}
/* Expanding panel (password form / delete confirmation / blocked users) */
.set-expand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.set-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.set-field > span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.set-field input {
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
}
.set-field input:focus {
  outline: none;
  border-color: var(--accent);
}
.set-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.set-msg {
  font-size: 0.78rem;
  font-weight: 500;
}
.set-msg.is-error {
  color: var(--downvote);
}
.set-msg.is-ok {
  color: var(--accent);
}
.set-expand-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.set-danger-zone {
  background: color-mix(in srgb, var(--downvote) 8%, transparent);
}
.set-danger-text {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}
/* Blocked users list */
.set-blocked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border-soft);
}
.set-blocked-row:first-child {
  border-top: none;
}
.set-blocked-name {
  font-size: 0.86rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.set-blocked-empty {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 0;
}
/* Guest hint card */
.set-guest {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.set-guest p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}
/* Red button (permanently delete account) */
.btn-danger {
  appearance: none;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--downvote);
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  transition: filter var(--t-fast) var(--ease);
}
.btn-danger:hover {
  filter: brightness(1.08);
}
.btn-danger:disabled {
  opacity: 0.55;
  cursor: default;
}
/* Language selection modal (Fix2: modal instead of segment → ready for a multilingual future) */
.set-lang-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.set-lang-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.set-lang-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.set-lang-panel {
  position: relative;
  width: min(320px, calc(100vw - 32px));
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  transform: translateY(8px);
  transition: transform var(--t-fast) var(--ease);
}
.set-lang-modal.open .set-lang-panel {
  transform: none;
}
.set-lang-title {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
}
/* Region modal (multi-select · 2026-07-14) shares the language modal's shell;
   only the hint text below the title is its own. */
.set-region-hint {
  margin: -6px 0 12px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-dim);
}
/* Region modal is WIDER than the language shell: at 320px, long region names
   (e.g. "Spanish (Spain and Latin America)") wrapped to two lines and got
   centered inside the button, cramping the hint text (user feedback
   2026-07-14). */
.set-region-modal .set-lang-panel {
  width: min(440px, calc(100vw - 32px));
  padding: 20px;
}
.set-region-modal .set-lang-list {
  gap: 6px;
}
.set-region-modal .set-lang-opt {
  text-align: left;
  padding: 12px 14px;
}
.set-lang-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.set-lang-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.set-lang-opt:hover {
  border-color: var(--border-strong);
}
.set-lang-opt.is-active {
  border-color: var(--accent);
  color: var(--accent);
}
.set-lang-opt > svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* ── Change-password modal (settings-page.js · mid-screen) — language modal pattern ── */
.set-pw-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.set-pw-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.set-pw-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.set-pw-panel {
  position: relative;
  width: min(380px, calc(100vw - 32px));
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  transform: translateY(8px);
  transition: transform var(--t-fast) var(--ease);
}
.set-pw-modal.open .set-pw-panel {
  transform: none;
}
.set-pw-title {
  margin: 0 0 14px;
  font-size: 0.98rem;
  font-weight: 700;
}
.set-pw-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.set-pw-forgot {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.set-pw-forgot:hover {
  color: var(--text);
}

/* ── Keyboard shortcuts modal (settings-page.js · mid-screen) ── */
.set-kbd-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.set-kbd-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.set-kbd-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.set-kbd-panel {
  position: relative;
  width: min(380px, calc(100vw - 32px));
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  transform: translateY(8px);
  transition: transform var(--t-fast) var(--ease);
}
.set-kbd-modal.open .set-kbd-panel {
  transform: none;
}
.set-kbd-title {
  margin: 0 0 14px;
  font-size: 0.98rem;
  font-weight: 700;
}
.set-kbd-list {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 14px;
}
.set-kbd-list .set-kbd-row {
  border-top: 1px solid var(--border-soft);
}
.set-kbd-list .set-kbd-row:first-child {
  border-top: none;
}
.set-kbd-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* Shortcut help (shortcuts.js · ? key) — shares the .set-kbd-modal pattern;
   with 14 rows (title + 13 shortcuts) the list scrolls on short screens. */
.kbd-help-modal .set-kbd-list {
  max-height: min(58vh, 440px);
  overflow-y: auto;
}
/* ── Settings mobile: slide from the right (profile pattern) + full screen
   (also covers the bottom bar, has a back button → tab spacing unnecessary). ── */
@media (max-width: 920px) {
  .set-panel {
    transition: transform 0.28s var(--ease);
  }
  .set-modal:not(.open) .set-panel {
    transform: translateX(100%);
  }
  .set-modal {
    opacity: 1;
    transition: none;
  }
  .set-row {
    padding: 15px 15px;
  }
  .set-row-control {
    flex-wrap: wrap;
    gap: 10px;
  }
}
@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
  .set-modal,
  .set-panel {
    transition: none;
  }
}
/* ═══ Desktop "scroll to top" button ═══════════════════════════════════════════
   A floating button that appears bottom-right once the page scrolls past a
   threshold (scroll-top.js toggles it with `.is-visible`). DESKTOP ONLY
   (≥921px): on mobile the bottom menu + auto-hide header/nav already handle
   navigation → it stays display:none there. Positioned at the viewport's right
   edge → doesn't collide with the footer content (720px centered .container).
   Under reduced-motion the global reset (above) makes transitions instant. */
.scroll-top-btn {
  display: none;
}
@media (min-width: 921px) {
  .scroll-top-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 40; /* below the header(50) → an opened panel/modal covers it */
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    /* Default: hidden — slightly shifted down + transparent + not hit-testable
       (visibility). visibility is kept in the transition → the fade-out isn't
       cut off when is-visible is removed. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition:
      opacity var(--t) var(--ease),
      transform var(--t) var(--ease),
      visibility var(--t) var(--ease),
      color var(--t) var(--ease),
      border-color var(--t) var(--ease),
      background var(--t) var(--ease);
  }
  .scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .scroll-top-btn:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-hover);
    transform: translateY(-2px);
  }
  .scroll-top-btn:active {
    transform: translateY(0);
    background: var(--surface-active);
  }
  .scroll-top-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
}

/* probe */